# Clopay UI Component Library

This is a collection of reusable components that follows the Clopay Design Standards.

## Table of Contents

- [Demo](#demo)
- [Dependencies](#dependencies)
- [Installation](#installation)
- [Supported browsers](#supported-browsers)

## Demo

Please check all components we have in action at http://dev-angular.clopay.com/

## Dependencies

There are a few dependencies that need to be installed. 
 - [Angular](https://angular.io)
 - [Bootstrap 4](https://getbootstrap.com) CSS.
 - Moment
 - NgMultilselectDropdown

## Installation

You need to have an Angular project with the supported Angular version. We strongly recommend using [Angular CLI](https://cli.angular.io) for this.

You also need to add Bootstrap 4 CSS to your application by using your preferred way (it really depends on the setup you're using). Ex. for Angular CLI you can [get Bootstrap from npm](https://www.npmjs.com/package/bootstrap) and update your `angular.json` with something like:

```json
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]
```

Please note that you need only CSS and **should not** add other JavaScript dependencies like `bootstrap.js`, `jQuery` or `popper.js` as ng-bootstrap's goal is to completely replace them.

After installing the above dependencies, install `@clopay-angular-components` via our private NPM registry.

  Since this is a private registry, you must log in with:
  ````console
  npm login --registry http://npm.clopay.com:4873
  ````
  The registry will ask you for credntials. You will use:
  ````
  clopay:pvlibrary
  ````
  You can then fetch the library with:
  ````console
  npm install @clopay-angular-components/clopay-angular-components --registry http://npm.clopay.com:4873
  ````
  When the library is updated, you can update with:
  ````console
  npm update @clopay-angular-components/clopay-angular-components --registry http://npm.clopay.com:4873
   ````

Once installed you need to import our main module:
```js
import { CloModule } from 'clopay-library';

@NgModule({
  ...
  imports: [CloModule, ...],
  ...
})
export class YourAppModule {
}
```

Alternatively you could only import modules with components you need, ex. pagination and alert.
The resulting bundle will be smaller in this case.

```js
import {NgbPaginationModule, NgbAlertModule} from '@clopay-components-library/clopay-components-library';

@NgModule({
  ...
  imports: [NgbPaginationModule, NgbAlertModule, ...],
  ...
})
export class YourAppModule {
}
```

## Supported browsers

We support the same browsers and versions supported by both Bootstrap 4 and Angular, whichever is _more_ restrictive. See [Angular browser support](https://angular.io/guide/browser-support) and [Bootstrap browser support](https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/#supported-browsers) for more details, but on the high-level it should be something like:

* Chrome (45+)
* Firefox (40+)
* IE (10+)
* Edge (20+)
* Safari (7+)