@energycap/components v0.39.34
EnergyCAP Components
A collection of common components used in EnergyCAP's Angular applications.
Install
npm install @energycap/components
Usage
Import library into the root ngModule of your application
@import {ComponentsModule} from '@energycap/components'
@NgModule({
imports: [
ComponentsModule
]
})
export class AppModule {}
Logo Assets Setup
The AppBarComponent includes an app icon image with a default path of '/assets/images/icon.svg'. You can either copy the assets that come bundled with the library:
// angular.json
"build": {
// ...
"options": {
// ...
"assets": [
// ...
{
"glob": "**/*",
"input": "./node_modules/@energycap/components/src/assets/images",
"output": "./assets/images"
}
]
}
}
or customize the path by passing a value to the [iconPath]
input on the <ec-app-bar>
component.
<ec-app-bar iconPath="path/to/my/icon.svg">
Note: This can also be a fully qualified URL like: https://cdn.freebiesupply.com/images/large/2x/apple-logo-transparent.png.
Logo Assets Setup
The AppBarComponent includes an app icon image with a default path of '/assets/images/icon.svg'. You can either copy the assets that come bundled with the library:
// angular.json
"build": {
// ...
"options": {
// ...
"assets": [
// ...
{
"glob": "**/*",
"input": "./node_modules/@energycap/components/assets/images",
"output": "./assets/images"
}
]
}
}
or customize the path by passing a value to the [iconPath]
input on the <ec-app-bar>
component.
<ec-app-bar iconPath="path/to/my/icon.svg">
Note: This can also be a fully qualified URL like: https://cdn.freebiesupply.com/images/large/2x/apple-logo-transparent.png.
Form Control Validation Messages Setup
This library provides helpful validation messages for the components. We have provided default messages which should be fine for most users, however they do require a bit of extra setup.
The following is the recommended process for an Angular application:
1. Update angular.json
The validation messages are provided in a file called en_US.json
that ships with this library. The easiest way to make them available to your Angular application is to add the following to angular.json
:
// ...
"build": {
// ...
"options": {
// ...
"assets": [
// ...
{
"glob": "**/*.json",
"input": "./node_modules/@energycap/components/src/assets/locales",
"output": "./assets/locales/"
}
]
}
}
2. Install an Http Loader
There is already a peer dependency on @ngx-translate, which is the mechanism we use to provide the validation messages, so our recommendation is to use their http-loader.
Note: This library does not support translation to any language other than English at this time.
npm install @ngx-translate/http-loader --save
3. Update AppModule
Update your app.module.ts
to use the http-loader:
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
//...
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, "/assets/locales/");
}
@NgModule({
imports: [
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
]
4. Update AppComponent
Update your app.component.ts
:
import { TranslateService } from '@ngx-translate/core';
constructor(private translate: TranslateService) {
translate.setDefaultLang('en_US');
translate.use('en_US');
}
That's it!
Icons
This library uses icons from @energycap/energycap-icons package, which is listed as a peer dependency. Refer to their documentation for configuring the webfont implementation.
Unsupported Browsers
This library does not support Internet Explorer. We've provided a helpful script that will mask the screen when a user attempts to use an
application built with this library. To add this feature to your application, add the unsupported-browser.js
script to the scripts array in the angular.json
file.
// ...
"build": {
// ...
"options": {
// ...
"scripts": [
"./node_modules/@energycap/components/src/assets/scripts/unsupported-browser.js"
]
}
}
More Info
For a list of available components and their usage: 1. Pull the energycap-libs repo 2. Run:
npm install
npm start
- Navigate to http://localhost:4200/
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
11 months ago
10 months ago
10 months ago
10 months ago
1 year ago
12 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
10 months ago
10 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago