Clopay UI Component Library

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

Table of Contents

• Demo
• Dependencies
• Installation
• 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
• Bootstrap 4 CSS.
• Moment
• NgMultilselectDropdown

Installation

You need to have an Angular project with the supported Angular version. We strongly recommend using Angular CLI 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 and update your angular.json with something like:

"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:

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:

npm install @clopay-angular-components/clopay-angular-components --registry http://npm.clopay.com:4873

When the library is updated, you can update with:

npm update @clopay-angular-components/clopay-angular-components --registry http://npm.clopay.com:4873

Once installed you need to import our main module:

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.

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 and Bootstrap browser support for more details, but on the high-level it should be something like:

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