0.39.34 • Published 9 months ago

@energycap/components v0.39.34

Weekly downloads
2,424
License
-
Repository
-
Last release
9 months ago

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
  1. Navigate to http://localhost:4200/
0.39.33

9 months ago

0.39.34

9 months ago

0.39.32

9 months ago

0.39.31

9 months ago

0.39.30

9 months ago

0.39.17

1 year ago

0.39.18

1 year ago

0.39.19

1 year ago

0.39.24

10 months ago

0.39.25

10 months ago

0.39.26

10 months ago

0.39.27

9 months ago

0.39.20

12 months ago

0.39.21

11 months ago

0.39.22

10 months ago

0.39.23

10 months ago

0.39.28

9 months ago

0.39.29

9 months ago

0.39.16

1 year ago

0.39.15

1 year ago

0.39.14

1 year ago

0.39.13

1 year ago

0.39.10

1 year ago

0.39.9

1 year ago

0.39.8

1 year ago

0.39.7

1 year ago

0.39.6

1 year ago

0.39.5

2 years ago

0.39.4

2 years ago

0.39.3

2 years ago

0.37.3

2 years ago

0.37.2

2 years ago

0.37.1

2 years ago

0.37.0

2 years ago

0.37.6

2 years ago

0.37.5

2 years ago

0.37.4

2 years ago

0.39.1

2 years ago

0.39.0

2 years ago

0.39.2

2 years ago

0.36.4

2 years ago

0.36.3

2 years ago

0.36.2

2 years ago

0.36.1

2 years ago

0.36.0

2 years ago

0.36.5

2 years ago

0.38.2

2 years ago

0.38.1

2 years ago

0.38.0

2 years ago

0.38.7

2 years ago

0.38.6

2 years ago

0.38.5

2 years ago

0.38.4

2 years ago

0.38.3

2 years ago

0.35.1

2 years ago

0.33.4

2 years ago

0.33.3

2 years ago

0.33.2

2 years ago

0.33.1

2 years ago

0.33.0

2 years ago

0.35.0

2 years ago

0.34.0

2 years ago

0.32.30

2 years ago

0.32.20

2 years ago

0.32.29

2 years ago

0.32.28

2 years ago

0.32.27

2 years ago

0.32.26

2 years ago

0.32.25

2 years ago

0.32.24

2 years ago

0.32.23

2 years ago

0.32.22

2 years ago

0.32.21

2 years ago

0.32.19

2 years ago

0.32.18

2 years ago

0.32.17

2 years ago

0.32.16

2 years ago

0.32.15

2 years ago

0.32.14

3 years ago

0.32.13

3 years ago

0.32.12

3 years ago

0.32.11

3 years ago

0.31.6

3 years ago

0.31.5

3 years ago

0.31.4

3 years ago

0.31.3

3 years ago

0.32.8

3 years ago

0.32.7

3 years ago

0.32.6

3 years ago

0.32.5

3 years ago

0.32.4

3 years ago

0.32.3

3 years ago

0.32.2

3 years ago

0.32.1

3 years ago

0.32.9

3 years ago

0.32.0

3 years ago

0.32.10

3 years ago

0.31.2

3 years ago

0.31.1

3 years ago

0.31.0

3 years ago

0.30.4

3 years ago

0.30.3

3 years ago

0.30.2

3 years ago

0.30.1

3 years ago

0.30.0

3 years ago

0.28.12

3 years ago

0.28.15

3 years ago

0.28.14

3 years ago

0.28.13

3 years ago

0.29.0

3 years ago

0.29.1

3 years ago

0.28.9

3 years ago

0.28.11

3 years ago

0.28.10

3 years ago

0.28.8

3 years ago

0.28.7

3 years ago

0.28.6

3 years ago

0.28.5

3 years ago

0.28.4

3 years ago

0.27.12

3 years ago

0.28.1

3 years ago

0.28.3

3 years ago

0.28.2

3 years ago

0.27.11

3 years ago

0.27.10

3 years ago

0.28.0

3 years ago

0.26.11

4 years ago

0.26.10

4 years ago

0.27.2

3 years ago

0.27.1

4 years ago

0.27.0

4 years ago

0.27.9

3 years ago

0.27.8

3 years ago

0.27.7

3 years ago

0.27.6

3 years ago

0.27.5

3 years ago

0.27.4

3 years ago

0.27.3

3 years ago

0.26.9

4 years ago

0.26.8

4 years ago

0.26.7

4 years ago

0.26.3

4 years ago

0.26.6

4 years ago

0.26.5

4 years ago

0.26.4

4 years ago

0.25.3

4 years ago

0.25.2

4 years ago

0.26.2

4 years ago

0.26.1

4 years ago

0.26.0

4 years ago

0.25.1

4 years ago

0.25.0

4 years ago

0.24.2

4 years ago

0.24.1

4 years ago

0.24.0

4 years ago

0.23.2

4 years ago

0.23.1

4 years ago

0.23.0

4 years ago

0.22.1

4 years ago

0.22.0

4 years ago

0.21.22

4 years ago

0.21.21

4 years ago

0.21.20

4 years ago

0.21.18

4 years ago

0.21.19

4 years ago

0.21.16

4 years ago

0.21.17

4 years ago

0.21.14

4 years ago

0.21.15

4 years ago

0.21.12

4 years ago

0.21.13

4 years ago

0.21.10

4 years ago

0.21.11

4 years ago

0.21.9

4 years ago

0.21.8

4 years ago

0.21.7

4 years ago

0.21.6

4 years ago

0.21.5

4 years ago

0.21.4

4 years ago

0.21.3

4 years ago

0.21.2

4 years ago

0.21.1

4 years ago

0.21.0

4 years ago

0.20.1

4 years ago

0.20.0

4 years ago

0.19.2

5 years ago

0.19.1

5 years ago

0.19.0

5 years ago

0.18.1

5 years ago

0.18.0

5 years ago

0.17.3

5 years ago

0.17.2

5 years ago

0.17.1

5 years ago

0.17.0

5 years ago

0.16.1

5 years ago

0.16.0

5 years ago

0.15.3

5 years ago

0.15.2

5 years ago

0.15.1

5 years ago

0.15.0

5 years ago

0.14.3

5 years ago

0.14.2

5 years ago

0.14.1

5 years ago

0.10.5

5 years ago

0.10.4

5 years ago

0.14.0

5 years ago

0.13.6

5 years ago

0.13.5

5 years ago

0.13.4

5 years ago

0.13.3

5 years ago

0.13.2

5 years ago

0.13.1

5 years ago

0.13.0

5 years ago

0.12.4

5 years ago

0.12.3

5 years ago

0.12.2

5 years ago

0.12.1

5 years ago

0.12.0

5 years ago

0.11.7

5 years ago

0.11.6

5 years ago

0.11.5

5 years ago

0.11.4

5 years ago

0.11.3

5 years ago

0.11.2

5 years ago

0.11.1

5 years ago

0.11.0

5 years ago

0.10.3

5 years ago

0.10.2

5 years ago

0.10.1

5 years ago

0.10.0

5 years ago

0.9.4

5 years ago

0.9.3

5 years ago

0.9.2

5 years ago

0.9.1

5 years ago

0.9.0

5 years ago

0.8.7

5 years ago

0.8.6

5 years ago

0.8.5

5 years ago

0.8.4

6 years ago

0.8.3

6 years ago

0.8.2

6 years ago

0.8.1

6 years ago

0.7.0

6 years ago

0.6.0

6 years ago

0.5.1-c9194ae.0

6 years ago

0.5.0

6 years ago

0.4.1

6 years ago

0.4.0

6 years ago

0.3.0

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago

0.0.9

6 years ago

0.0.8

6 years ago

0.0.7

6 years ago

0.0.6-rc.5

6 years ago

0.0.6

6 years ago

0.0.6-rc.4

6 years ago

0.0.6-rc.3

6 years ago

0.0.6-rc.2

6 years ago

0.0.6-rc.1

6 years ago

0.0.6-rc.0

6 years ago

0.0.5

6 years ago

0.0.4

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago

0.0.1

6 years ago