@energycap/components v0.43.8-ECAP-30020-Report-Builder-Foundation.20250611-1036
EnergyCAP Components
A collection of common components used in EnergyCAP's Angular applications.
Install
npm install @energycap/componentsUsage
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 --save3. Update AppModule
Update your app.module.ts to use the http-loader:
import { HttpClient, provideHttpClient, withInterceptorsFromDi } 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: [
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
providers: [provideHttpClient(withInterceptorsFromDi())]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
12 months ago
10 months ago
10 months ago
9 months ago
11 months ago
6 months ago
12 months ago
12 months ago
7 months ago
12 months ago
9 months ago
11 months ago
8 months ago
8 months ago
6 months ago
11 months ago
5 months ago
5 months ago
5 months ago
7 months ago
6 months ago
8 months ago
7 months ago
11 months ago
12 months ago
9 months ago
11 months ago
12 months ago
10 months ago
8 months ago
9 months ago
10 months ago
6 months ago
12 months ago
9 months ago
9 months ago
11 months ago
10 months ago
9 months ago
9 months ago
10 months ago
11 months ago
12 months ago
8 months ago
12 months ago
11 months ago
11 months ago
11 months ago
9 months ago
6 months ago
10 months ago
6 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
5 months ago
11 months ago
8 months ago
9 months ago
1 year ago
12 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
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
3 years ago
3 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 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
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
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
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
4 years ago
4 years ago
5 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
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
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