Clopay UI Component Library

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

Dependencies

There are a few dependencies that need to be installed.

• Angular
• Bootstrap 4 or 5 CSS.

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 or 5 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:

You also need to add ng-bootstrap for your application:

npm i @ng-bootstrap/ng-bootstrap
OR
yarn add @ng-bootstrap/ng-bootstrap

Then you need to add popperjs to your application

npm install --save @popperjs/core
OR
yarn add @popperjs/core

You can then fetch the library with: console

 npm i [email protected]
 OR 
 yarn add [email protected]

Once installed you need to import our main module:

import { ClopayHeaderModule } from 'clopay-header';

@NgModule({
  ...
  imports: [ClopayHeaderModule, ...],
  ...
})

export class YourAppModule {

}

Importing clopay-header (Code)

Syntax & Example: app.component.ts

import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class HeaderComponent implements OnInit {
  UserFields = environment;
   imageSrc = '/custom-assets';


  constructor() { }

  ngOnInit(): void {
  }

}

HTML code

Syntax & Example: app.component.html

Syntax & Example: app.component.html

<clo-global-header assets="{{ imageSrc }}" [UserFields]="UserFields"><clo-global-header>

You need to add this below code to your angular.json in your application

Angular.JSON

"assets": [
  {
  "glob": "**/*",
 "input": "./node_modules/clopay-header/src/assets",
  "output": "./custom-assets"
},
 "src/assets"
 ],

And then you need to add the below code in environments folder(assets/environments)

Environments.ts

Syntax & Example: environments.ts

export const environment = {
  production: false,
  UserName: 'evokeuser',
  AppId: 45,
  appIds: 'installer',
};

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+)