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 can then fetch the library with:

npm i clopay-step-navigation

Once installed you need to import our main module:

import { CloStepNavigationModule, StepnavigationitemModule } from 'clopay-step-navigation';

@NgModule({
  ...
  imports: [CloStepNavigationModule, StepnavigationitemModule , ...],
  ...
})
export class YourAppModule {
}


## HTML code (In the below HTML clo-table-block is optional based on your project requirement add this)

> **Syntax & Example**: app.component.html
```html

    <clo-step-navigation>

    <ng-template clo-step-navigation-item title="Order Received" subtitle="Order Received Date:" completed=true date="12/20/2018">
        <div>
            <p class="status">Change order started</p>
            <p class="date">12/20/2018</p>
        </div>
    </ng-template>

    <ng-template clo-step-navigation-item title="Site Check" subtitle="Sitecheck sent:" selected=false completed=false date="12/20/2018">
        <div>
            <p class="status">Schedule sitecheck date and time</p>
            <p class="date">12/20/2018 8 AM to 12 PM </p>
        </div>
        <div class="d-md-flex mt-4">
            <clo-button type="secondary" label="Reschedule"></clo-button>
            <clo-button type="primary" label="Start sitecheck"></clo-button>
        </div>
    </ng-template>

    <ng-template clo-step-navigation-item title="Payment Status" subtitle="Payment received on:" selected=true completed=true date="12/18/2018">
        <div>
            <p class="status">Change order started</p>
            <p class="date">12/20/2018</p>
        </div>
        <clo-button type="primary" label="Select" data-toggle="modal" data-target="#modal3"></clo-button>
    </ng-template>

    <ng-template clo-step-navigation-item title="Order Changes" subtitle="Sitecheck received:" date="12/18/2018">
        <div>
            <p class="status">Change order started</p>
            <p class="date">12/20/2018</p>
        </div>
        <clo-button type="primary" label="Select" data-toggle="modal" data-target="#modal4"></clo-button>
    </ng-template>

</clo-step-navigation>

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