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

3. Navigate to http://localhost:4200/