# EnergyCAP Components

## Install
```npm install @energycap/components```

## Usage
Import library into the root ngModule of your application
```js
@import {ComponentsModule} from '@energycap/components'

@NgModule({
  imports: [
    ComponentsModule
  ]
})
export class AppModule {}
```
---
## 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`:

```js
// ...
"build": {
  // ...
  "options": {
    // ...
    "assets": [
      // ...
      {
        "glob": "**/*.json",
        "input": "./node_modules/@energycap/components/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:

```js
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`:

```js
import { TranslateService } from '@ngx-translate/core';

constructor(private translate: TranslateService) {
  translate.setDefaultLang('en_US');
  translate.use('en_US');
}
```

That's it!

---

## 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.

```js
// ...
"build": {
  // ...
  "options": {
    // ...
    "scripts": [
      "./node_modules/@energycap/components/src/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/



[@ngx-translate]: https://github.com/ngx-translate/core
[http-loader]: https://github.com/ngx-translate/http-loader
[energycap-libs repo]: https://bitbucket.org/energycap/energycap-libs/src/master/