npm package: @softwareag/dln
Description: Angular component library for Software AG Delite Design System
Author: Software AG
Latest version: 2.0.0

# DLN (Delite for Angular) - Angular v13 Delite

This is a library build from Angular v13 library format using [Software AG Delite Design System](https://www.npmjs.com/package/@softwareag/dln).

![@softwareag/dlt v12.0.0](https://img.shields.io/badge/@softwareg%2fdlt-v12.0.0-blue)

## Table of Contents

- [Pre-requisite](#Pre-requisite)
- [Installation](#Installation)
- [Browser Compatibility](#Browser-Compatibility)
- [Available Components / Widgets](#available-components-/-widgets)

## Pre-requisite

DLN is built using ng-packagr v13+ using Angular v13 library.
The library will only work on [Angular](https://angular.io) application v13 and above.

Bootstrap => ^5.1.3

@softwareag/dlt => ^12.0.0

## Installation

You need to have an Angular project with the supported Angular version 9+. We strongly recommend using [Angular CLI](https://cli.angular.io) for this.

Install `@softwareag/dln` with the following steps:

1. Run npm install

```shell
npm install --save @softwareag/dln
```

Note: @softwareag/dlt and all it's dependencies (dlt-icons, bootstrap, timepicker ... etc) are required dependencies by @softwareag/dln. In this step 2, all dependencies are installed together.

2. Once installed you need to include @softwareag/dlt and bootstrap assets which comes as dependencies of @softwareag/dln as below (angular.json):

```angular.json
"styles": [ "node_modules/@chenfengyuan/datepicker/dist/datepicker.css",
"node_modules/timepicker/jquery.timepicker.css",
"node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css",
"node_modules/@softwareag/dlt-components/css/delite.min.css",
"node_modules/@softwareag/dlt-fonts/roboto.css",
"node_modules/@softwareag/dlt-icons/Font/css/dlt-icons-font.css",
"node_modules/@softwareag/dlt-icons/Font/css/dlt-icons-glyphs.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css", ... ], "scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js",
"node_modules/@chenfengyuan/datepicker/dist/datepicker.min.js",
"node_modules/timepicker/jquery.timepicker.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js", ... ]
```

You may start utilizing some of the available components that are found in the library by importing the modules with components you need, ex. dialog and spinner:

```js
import { ReactiveFormsModule } from '@angular/forms'; // required by some form related components
import { SpinnerModule } from '@softwareag/dln/spinner';
import { DialogModule } from '@softwareag/dln/dialog';
import { SharedModule } from '@softwareag/dln/shared';

@NgModule({
  ...
  imports: [
    ReactiveFormsModule,
    SpinnerModule,
    DialogModule,
    SharedModule,
    ...
    ],
  ...
})
export class YourAppModule {
}
```

## Browser compatibility

The @softwareag/dln package will work on pretty much any modern browser. With most browsers, applying a rolling release strategy and pinning down browser support to a specific version has become a little tricky.

The following table lists the versions that the @softwareag/dln package is tested on.

| Chrome | Firefox | Edge | Safari |
| -------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| 99.0+                                                                                  | 91.0+                                                                                   | 99.0+                                                                                | 12.0+                                                                                      |

## Available Components / Widgets

![@softawreag/dln v2.0.0](https://img.shields.io/badge/@softwareag%2fdln-v2.0.0-blue)

Components / Widgets List:

- [Accordion](###accordion)
- [Button](###button)
- [Checkbox](###checkbox)
- [Dialog](###dialog)
- [Directive Disable Controller](###directive-disable-controller)
- [Directive Disable Element](###directive-disable-element)
- [Dropdown](###dropdown)
- [Inline Message](###inline-Message)
- [Leftnav](###leftnav)
- [Message Dialog](###message-dialog)
- [Number Input](###number-Input)
- [Overflow Menu](###overflow-menu)
- [Pagination](###pagination)
- [Radio Button](###radio-Button)
- [Selectbox](###selectbox)
- [Shared](###shared)
- [Old Spinner](###old-spinner)
- [Spinner](###spinner)
- [Time Picker](###time-Picker)
- [Toast](###toast)
- [Top Navigation Bar](###top-navigation-bar)
- [Tree](###tree)
- [License of this package](###license-of-this-package)
- [Copyrights and Licenses of dependencies](###copyrights-and-licenses-of-dependencies)

### Accordion

#### Import

```js
import { AccordionModule } from '@softwareag/dln/accordion';
```

#### Getting Started

```html
  <sag-accordion-tablist [id]="'my-tablist-id'">
    <sag-accordion-tab
      [(active)]="flag"
      [id]="'my-tab-categories1'"
      [title]="'Tab1'"
    >
      <!-- content, you may pass in a component as well-->
    </sag-accordion-tab>
    <sag-accordion-tab
      [(active)]="flag2"
      [id]="'my-tab-categories2'"
      [title]="'Tab2'"
      [disabled]="disabledFlag"
      >
      <!-- content, you may pass in a component as well-->
    </sag-accordion-tab>
  </sag-accordion-tablist>
```

#### Properties
##### sag-accordion-tab

| Name          | Type    | Default | Description                                                               |
| ------------- | ------- | ------- | ------------------------------------------------------------------------- |
| title         | string  | ""      | Title of the sag-accordion-tab                                                 |
| active       | boolean | false   | Specifies whether the sag-accordion-tab is active or expanded                                    |
| disabled       | boolean | false   | Specifies whether is disabled and not clickable                                    |
| id         | string  | sagaccordiontab    | Specifies html id                            |

##### sag-accordion-tablist
| Name          | Type    | Default | Description                                                               |
| ------------- | ------- | ------- | ------------------------------------------------------------------------- |
| id         | string  | sagaccordiontablist    | Specifies html id                            |
#### Events

| Name          | Parameters          | Description                                                                |
| ------------- | ------------------- | -------------------------------------------------------------------------- |
| activeChange | event: Event Object | Callback to invoke when tab active changed and return boolean value |

### Button

#### Import

```js
import { ButtonModule } from '@softwareag/dln/button';
```
#### Component

```js
import { ButtonSize, ButtonType, ButtonSize } from '@softwareag/dln/button';
```
#### Getting Started

```html
  <div style="margin: 20px 10px 20px 10px;">
      <sag-button id="primarylargebutton1" [size]="ButtonSize.LARGE" (click)="test('Primary Large')">Primary Large
      </sag-button>
  </div>

  <div style="margin: 20px 10px 20px 10px;">
      <sag-button id="secondarybutton_disable1" [buttonType]="ButtonType.SECONDARY" [disabled]="true"
          (click)="test('Secondary Disabled')">Secondary Disabled
      </sag-button>
  </div>

  <div style="margin: 20px 10px 20px 10px;">
      <sag-button id="iconbutton_disable1" iconClass="dlt-icon-plus-circle" [buttonType]="ButtonType.ICON"
          [disabled]="true">
          Icon Disabled
      </sag-button>
  </div>

  <div style="margin: 20px 10px 20px 10px;">
      <sag-button id="customspinerbutton_loading2" [buttonType]="ButtonType.SECONDARY" [loading]="true"
          spinnerColor="purple" (click)="test('Loading2')">
          Loading2</sag-button>
  </div>

  <div style="margin: 20px 10px 20px 10px;">
      <sag-dropdown-button id="primarydropdownlargebutton1" label="Primary Dropdown Large" [size]='ButtonSize.LARGE'>
          <a href="javascript:void(0)">First option</a>
          <a href="javascript:void(0)">Second option</a>
          <a href="javascript:void(0)" class="disabled">Third option</a>
      </sag-dropdown-button>
  </div>
```

#### Properties

| Name          | Type    | Default | Description                                                               |
| ------------- | ------- | ------- | ------------------------------------------------------------------------- |
| id | string | sagbutton | Specifies html id |
| type | enum(HTMLButtonType)  | HTMLButtonType.button | Specifies the HTML type of button (type=submit or button or reset) |
| buttonType | enum(ButtonType) | ButtonType.PRIMARY | Specifies the button display type |
| size | enum(ButtonSize) | ButtonSize.MEDIUM | Specifies the size of the button |
| itemClass | string | "" | Specifies additional class to be applied |
| itemStyle | string | "" | Specifies additional style to be applied |
| imageSrc | string | "" | Specifies custom image to be applied (use with imagePosition) |
| imageStyle | string | "" | Specifies style to be applied to imageSrc |
| imageClass | string | "" | Specifies class to be applied to imageSrc |
| imagePosition | string | left | Specifies position of imageSrc (left or right) |
| width | number | 56 | Specifies width of the button |
| minwidth | string | "" | Specifies min-width of the button. ie. '56px' |
| selected | boolean | false | Specifies if button is selected |
| loading | boolean | false | Specifies if button should apply spinner |
| spinnerColor | string | "" | Specifies the color of the button spinner |
| disabled | boolean | false | Specifies if button is disabled |
| iconStyle | string | "" | Specifies style for icon to be applied |
| iconClass | string | "" | Specifies class for icon to be applied |

#### Events

| Name          | Parameters          | Description                                                                |
| ------------- | ------------------- | -------------------------------------------------------------------------- |
| click | event: Event Object | Callback to invoke when button is clicked |

### Checkbox

#### Import

```js
import { CheckboxModule} from '@softwareag/dln/checkbox';
import { Shared } from '@softwareag/dln/shared';
@NgModule({
 imports: [
   CheckboxModule,
   ...
  ]
```

#### Getting Started

```html
<sag-checkbox>
  <input type="checkbox" formControlName="checkbox1" id="inputId1" />
  <label for="inputId1" attr.data-toggle="tooltip" title="tooltip"
    >{{ label1 }}</label
  >
</sag-checkbox>

<sag-checkbox-group title="title" groupsize="small">
  <sag-checkbox>
    <input type="checkbox" formControlName="checkbox3" id="inputId2" />
    <label for="inputId2" attr.data-toggle="tooltip" title="tooltip"
      >{{ label2 }}</label
    >
  </sag-checkbox>
  <sag-checkbox>
    <input type="checkbox" formControlName="checkbox4" id="inputId3" />
    <label for="inputId3" attr.data-toggle="tooltip" title="tooltip"
      >{{ label3 }}</label
    >
  </sag-checkbox>
  <sag-checkbox>
    <input type="checkbox" formControlName="checkbox5" id="inputId4" />
    <label for="inputId4" attr.data-toggle="tooltip" title="tooltip"
      >{{ label4 }}</label
    >
  </sag-checkbox>
</sag-checkbox-group>
```

#### Properties

| Name      | Type   | Default | Description                                                     |
| --------- | ------ | ------- | --------------------------------------------------------------- |
| groupsize | string | "big"   | Specifies the size of the checkbox group. Default will be "big" |
| title     | string | ""      | Specifies the title of the checkbox group.                      |

### Dialog

#### Import

```js
import { DialogModule } from '@softwareag/dln/dialog';
import { size } from '@softwareag/dln/shared';
```

#### Getting Started

```html
<sag-dialog
  [title]="'Add User'"
  [(visible)]="showAddUser"
  [width]="'580px'"
  [contentHeight]="'400px'"
  [contentStyle]="{ 'overflow-x': 'auto' }"
>
  <!-- content, you may pass in a component as well-->
  <ng-footer>
    <!-- For delite buttons, buttons will be right aligned -->
  </ng-footer>
</sag-dialog>
```

#### Properties

| Name          | Type    | Default | Description                                                               |
| ------------- | ------- | ------- | ------------------------------------------------------------------------- |
| title         | string  | ""      | Title of the model dialog                                                 |
| visible       | boolean | false   | Specifies the visibility of the dialog                                    |
| width         | string  | null    | Specifies the width size of the modal. ex. 48px                           |
| contentHeight | string  | ''      | Specifies the height of the content area excludes title and footer button |
| contentStyle | string  | ''      | Inline style of the content section of the component.  |

#### Events

| Name          | Parameters          | Description                                                                |
| ------------- | ------------------- | -------------------------------------------------------------------------- |
| visibleChange | event: Event Object | Callback to invoke when dialog visibility changed and return boolean value |

#### Extra Tips

Delite full examples for formatting the dialog modal contents as below:

```html
<form class="dlt-form">
  <div class="dlt-form-item" style="width: 100%;">
    <div class="dlt-form-group">
      <input
        id="search-input"
        type="text"
        required
        class="dlt-text-input dlt-search"
        placeholder="Search"
      />
      <button class="clear-icon clear-icon-more-padding" type="button">
        <i class="dlt-icon-close"></i>
      </button>
      <button class="search-icon" type="button">
        <i class="dlt-icon-search dlt-icon-md"></i>
      </button>
    </div>
  </div>
  <div style="margin-top: 16px;">
    <a href="javascript:void(0)">Restore default</a>
  </div>
  <div class="form-items-wrapper">
    <div class="dlt-checkbox">
      <input type="checkbox" id="userId" />
      <label for="userId">User Id</label>
    </div>
    <div class="dlt-checkbox">
      <input type="checkbox" id="userName" /><label for="userName"
        >User name</label
      >
    </div>
    <div class="dlt-checkbox">
      <input type="checkbox" id="firstName" /><label for="firstName"
        >First name</label
      >
    </div>
    <div class="dlt-checkbox">
      <input type="checkbox" id="lastName" /><label for="lastName"
        >Last name</label
      >
    </div>
    <div class="dlt-checkbox">
      <input type="checkbox" id="email" /><label for="email">Email</label>
    </div>
    <div class="dlt-checkbox">
      <input type="checkbox" id="country" /><label for="country">Country</label>
    </div>
    <div class="dlt-checkbox">
      <input type="checkbox" id="role" /><label for="role">Role</label>
    </div>
    <div class="dlt-checkbox">
      <input type="checkbox" id="product" /><label for="product">Product</label>
    </div>
    <div class="dlt-checkbox">
      <input type="checkbox" id="status" /><label for="status">Status</label>
    </div>
  </div>
  <div class="checkbox-count">6 of 20 selected</div>
</form>
```
### Directive Disable Controller

#### Import

```js
import { DirectiveModule } from '@softwareag/dln/directive';
@NgModule({
 imports: [
   DirectiveModule,
   ...
  ]
```

#### Getting Started

```html
...
<input
  type="radio"
  formControlName="radio1"
  id="inputId1"
  value="value1"
  [sagDisableControl]="disableFlag"
/>
...
```

```js
import {Component} from '@angular/core';

@Component({
    templateUrl: './my.component.html'
})
export class MyComponent {
    let disableFlag = false;
    constructor() {}
}
```

#### Properties

| Name              | Type    | Default    | Description                                    |
| ----------------- | ------- | ---------- | ---------------------------------------------- |
| sagDisableControl | boolean | no default | Specifies to disable or enable the controller. |

### Directive Disable Element

#### Import

```js
import { DirectiveModule } from '@softwareag/dln/directive';
@NgModule({
 imports: [
   DirectiveModule,
   ...
  ]
```

#### Getting Started

```html
...
<input
  type="radio"
  formControlName="radio1"
  id="inputId1"
  value="value1"
  [sagDisableElement]="disableFlag"
/>
...
```

```js
import {Component} from '@angular/core';

@Component({
    templateUrl: './my.component.html'
})
export class MyComponent {
    let disableFlag = false;
    constructor() {}
}
```

#### Properties

| Name              | Type    | Default    | Description                                                      |
| ----------------- | ------- | ---------- | ---------------------------------------------------------------- |
| sagDisableElement | boolean | no default | Specifies to disable or enable the Element by using element ref. |

### Dropdown

#### Import

```js
import { ReactiveFormsModule } from '@angular/forms';
import { DropdownModule } from '@softwareag/dln/dropdown';
import { SharedModule } from '@softwareag/dln/shared';
```

#### Getting Started

```html
<h2>Single Select Dropdown</h2>
<label>Single Select Dropdown (Default)</label>
<div style="display: flex;">
    <sag-dropdown id='singleLarge1' [selections]="selections" [formControl]="singleLargefc1" [size]="size.LARGE" style="margin-right: 10px;"></sag-dropdown>
    <sag-dropdown id='single1' [selections]="selections" [formControl]="singlefc1" style="margin-right: 10px;"></sag-dropdown>
    <sag-dropdown id='singleSmall1' [selections]="selections" [formControl]="singleSmallfc1" [size]="size.SMALL"></sag-dropdown>
</div>
<br>
<label>Single Select Dropdown (disabled)</label>
<div>
    <button (click)="disableenableSingle()">disable / enable</button>
    <sag-dropdown id='single2' [selections]="selections" [formControl]="singlefc2"></sag-dropdown>
</div>
<br>
<label>Single Select Dropdown (Width 50%)</label>
<div>
    <sag-dropdown id='single3' [selections]="selections" [formControl]="singlefc3" width="50%"></sag-dropdown>
</div>
<br>
<label>Single Select Dropdown (Width 200px)</label>
<div>
    <sag-dropdown id='single4' [selections]="selections" [formControl]="singlefc4" width="200px"></sag-dropdown>
</div>
<br>
<label>Single Select Dropdown (List Height 500px)</label>
<div>
    <sag-dropdown id='single5' [selections]="selections" [formControl]="singlefc5" listHeight="500px"></sag-dropdown>
</div>
<br>
<label>Single Select Dropdown (with Refresh)</label>
<br/>
<button (click)="singlefc5_refresh = false;">Stop Refresh</button>
<div style="display: flex;">
    <sag-dropdown id='singleLarge6' [selections]="selections" [formControl]="singlefc6" [refresh]="true" [refreshing]="singlefc6_refresh" (refreshClick)="singlefc6_refresh = true"[size]="size.LARGE" style="margin-right: 10px;"></sag-dropdown>
    <sag-dropdown id='single6' [selections]="selections" [formControl]="singlefc6" [refresh]="true" [refreshing]="singlefc6_refresh" (refreshClick)="singlefc6_refresh = true" style="margin-right: 10px;"></sag-dropdown>
    <sag-dropdown id='singleSmall6' [selections]="selections" [formControl]="singlefc6" [refresh]="true" [refreshing]="singlefc6_refresh" (refreshClick)="singlefc6_refresh = true"[size]="size.SMALL" style="margin-right: 10px;"></sag-dropdown>
</div>
<br>
<label>Single Select Dropdown (with Search)</label>
<div style="display: flex;">
    <sag-dropdown id='singleLarge7' [selections]="selections" [formControl]="singlefc7" [search]="true" [size]="size.LARGE" style="margin-right: 10px;"></sag-dropdown>
    <sag-dropdown id='single7' [selections]="selections" [formControl]="singlefc7" [search]="true" style="margin-right: 10px;"></sag-dropdown>
    <sag-dropdown id='singleSmall7' [selections]="selections" [formControl]="singlefc7" [search]="true" [size]="size.SMALL" style="margin-right: 10px;"></sag-dropdown>
</div>
<br>
<br>


<h2>Multi Select Dropdown</h2>
<label>Multi Select Dropdown (Default)</label>
<div style="display: flex;">
    <sag-dropdown-multi-select id='multiLarge1' [selections]="selections" [formControl]="multiLargefc1" [size]="size.LARGE" style="margin-right: 10px;"></sag-dropdown-multi-select>
    <sag-dropdown-multi-select id='multi1' [selections]="selections" [formControl]="multifc1" style="margin-right: 10px;"></sag-dropdown-multi-select>
    <sag-dropdown-multi-select id='multiSmall1' [selections]="selections" [formControl]="multiSmallfc1" [size]="size.SMALL" style="margin-right: 10px;"></sag-dropdown-multi-select>
</div>
<br>
<label>Multi Select Dropdown (disabled)</label>
<div>
    <button (click)="disableenableMulti()">disable / enable</button>
    <sag-dropdown-multi-select id='multi2' [selections]="selections" [formControl]="multifc2" [selectionsFixed]="selectionsFixed"></sag-dropdown-multi-select>
</div>
<br>
<label>Multi Select Dropdown (Width 500px)</label>
<div>
    <sag-dropdown-multi-select id='multi3' [selections]="selections" [formControl]="multifc3" width="500px"></sag-dropdown-multi-select>
</div>
<br>
<label>Multi Select Dropdown (no search)</label>
<div>
    <sag-dropdown-multi-select id='multinosearch1' [selections]="selections" [formControl]="multinosearchfc1" [search]="false"></sag-dropdown-multi-select>
</div>
<br>
<label>Multi Select Dropdown (Width 50%)</label>
<div>
    <sag-dropdown-multi-select id='multi4' [selections]="selections" [formControl]="multifc4" width="50%"></sag-dropdown-multi-select>
</div>
<br>
<label>Multi Select Dropdown (List Height 500px)</label>
<div>
    <sag-dropdown-multi-select id='multi5' [selections]="selections" [formControl]="multifc5" listHeight="500px"></sag-dropdown-multi-select>
</div>
<br>
<label>Multi Select Dropdown (with Sort Selected Item)</label>
<div>
    <sag-dropdown-multi-select id='multi6' [selections]="selections" [formControl]="multifc6" [sort]='true'></sag-dropdown-multi-select>
</div>
<br>
```

```JS
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { DropdownItem } from '@softwareag/dln/dropdown';
import { size } from '@softwareag/dln/shared';

@Component({
  selector: 'app-dropdown-demo',
  templateUrl: './dropdown-demo.component.html',
  styleUrls: ['./dropdown-demo.component.scss']
})
export class DropdownDemoComponent implements OnInit {
  size = size;
  selectionsFixed: DropdownItem[] = [{ label: '999', value: '99' }, { label: '888', value: '88' }];
  selections: DropdownItem[] = [
    { label: 'aaa', value: '1' },
    { label: 'AssS', value: '1' },
    { label: 'bbb', value: '2' },
    { label: 'bab', value: '3' },
    { label: 'BGf', value: '1' },
    { label: 'bbb0', value: '4' },
    { label: 'cac', value: '5' },
    { label: 'cda', value: '6' },
    { label: 'ddd', value: '7' },
    { label: 'DAh', value: '1' },
    { label: 'eee', value: '8' },
    { label: 'fff', value: '9' },
    { label: 'ggg', value: '10' },
    { label: 'hhh', value: '11' },
    { label: 'iii', value: '12' },
    { label: 'jjj', value: '13' },
    { label: 'kkk', value: '14' },
    { label: 'lll', value: '15' },
    { label: 'mmm', value: '16' },
    { label: 'nnn', value: '17' },
    { label: 'ooo', value: '18' },
    { label: 'ppp', value: '19' },
    { label: 'qqq', value: '20' },
    { label: 'rrr', value: '21' },
    { label: 'sss', value: '22' },
    { label: 'ttt', value: '23' },
    { label: 'uuu', value: '24' },
    { label: 'vvv', value: '25' },
    { label: 'www', value: '26' },
    { label: 'xxx', value: '27' },
    { label: 'yyy', value: '28' },
    { label: 'zzz', value: '29' },
    { label: '111', value: '30' },
  ];
  width = 300;

  singlefc6_refresh = true;
  constructor() {}
  public singlefc10: FormControl = new FormControl(null, [Validators.required]);
  public singlefc1: FormControl = new FormControl(null, [Validators.required]);
  public singlefc2: FormControl = new FormControl([]);
  public singlefc3: FormControl = new FormControl([]);
  public singlefc4: FormControl = new FormControl([]);
  public singlefc5: FormControl = new FormControl([]);
  public singlefc6: FormControl = new FormControl([]);
  public singlefc7: FormControl = new FormControl([]);

  public singleLargefc1: FormControl = new FormControl([]);
  public singleLargefc2: FormControl = new FormControl([]);
  public singleLargefc3: FormControl = new FormControl([]);
  public singleLargefc4: FormControl = new FormControl([]);
  public singleLargefc5: FormControl = new FormControl([]);
  public singleLargefc6: FormControl = new FormControl([]);
  public singleLargefc7: FormControl = new FormControl([]);

  public singleSmallfc1: FormControl = new FormControl([]);
  public singleSmallfc2: FormControl = new FormControl([]);
  public singleSmallfc3: FormControl = new FormControl([]);
  public singleSmallfc4: FormControl = new FormControl([]);
  public singleSmallfc5: FormControl = new FormControl([]);
  public singleSmallfc6: FormControl = new FormControl([]);
  public singleSmallfc7: FormControl = new FormControl([]);
  
  public multifc1: FormControl = new FormControl([], [Validators.minLength(1)]);
  public multifc2: FormControl = new FormControl([]);
  public multifc3: FormControl = new FormControl([]);
  public multifc4: FormControl = new FormControl([]);
  public multifc5: FormControl = new FormControl([]);
  public multifc6: FormControl = new FormControl([]);

  public multinosearchfc1: FormControl = new FormControl([]);

  public multiLargefc1: FormControl = new FormControl([]);
  public multiLargefc2: FormControl = new FormControl([]);
  public multiLargefc3: FormControl = new FormControl([]);
  public multiLargefc4: FormControl = new FormControl([]);
  public multiLargefc5: FormControl = new FormControl([]);
  
  public multiSmallfc1: FormControl = new FormControl([]);
  public multiSmallfc2: FormControl = new FormControl([]);
  public multiSmallfc3: FormControl = new FormControl([]);
  public multiSmallfc4: FormControl = new FormControl([]);
  public multiSmallfc5: FormControl = new FormControl([]);
  singlefc5_refresh = true;
  ngOnInit(): void {}
  testmain(){
    console.log('testmain', this.multifc1);
  }
  searchSourceTable(value) {
    console.log('searchSourceTable', value);
  }
  
  selectSourceTable(value) {
    console.log('selectSourceTable', value);
  }

  disableenableSingle() {
    if (this.singlefc2.disabled) {
      this.singlefc2.enable();
    } else {
      this.singlefc2.disable();
    }
  }
  disableenableMulti() {
    if(this.multifc2.disabled) {
      this.multifc2.enable();
    } else {
      this.multifc2.disable();
    }
  }
  
  refresh(){

  }
}
```

#### Properties
##### sag-dropdown

| Name           | Type     | Default          | Description                                                                     |
| -------------- | -------- | ---------------- | ------------------------------------------------------------------------------- |
| id | string | "sagdropdown" | Specifies HTML id of the dropdown |
| formControl | FormControl | new FormControl(null) | Specifies FormControl corresponding to the dropdown |
| width | string | "300px" | Specifies width of the dropdown |
| listHeight | string | "200px" | Specifies list height of the dropdown |
| size | enum(size) | size.MEDIUM | Specifies size of the dropdown |
| itemClass | string | "" | Specifies class to be applied to the dropdown |
| itemStyle | string | "" | Specifies style to be applied to the dropdown |
| search | boolean | false | Enables search feature |
| refresh | boolean | false | Enables refresh button |
| refreshing | boolean | false | Displays spinner and disables dropdown |
| disabled | boolean | false | Disables dropdown |
| selections | DropdownItem | DropdownItem[] | Specifies the list of dropdown elements |
##### sag-dropdown-multi-select

| Name           | Type     | Default          | Description                                                                     |
| -------------- | -------- | ---------------- | ------------------------------------------------------------------------------- |
| id | string | "sagdropdown" | Specifies HTML id of the dropdown |
| size | enum(size) | size.MEDIUM | Specifies size of the dropdown |
| width | string | "300px" | Specifies width of the dropdown |
| listHeight | string | "200px" | Specifies list height of the dropdown |
| sort | boolean | false | Enables sorting |
| search | boolean | true | Enables search filter |
| formControl | FormControl | new FormControl([]) | Specifies FormControl corresponding to the dropdown |
| selections | DropdownItem | DropdownItem[] | Specifies the list of dropdown elements |
| selectionsFixed | DropdownItem | DropdownItem[] | Specifies the list of dropdown elements |

### Inline Message

#### Import

```js
import { InlineMessageModule } from '@softwareag/dln/inline-message';
import { SharedModule } from '@softwareag/dln/shared';
```

#### Getting Started

```html
<sag-inline-message
  [msgLevel]="MsgLevel.Error"
  [width]="'45rem'"
  [detailsVisible]="true"
  [buttonsVisible]="true"
  (closeMessage)="printStatus('Message5 Closed')"
>
  <sag-container title>
    Message5:
  </sag-container>
  <sag-container message>
    File Temp/StagingArea/Data/Management.txt added twice.
  </sag-container>
  <sag-container details>
    Try changing the naming and see if the issue still occurs. If so, visit the
    <a href="">Software AG Support</a> website for solutions or write an email
    to <a href="">support@softwareag.com</a>.
  </sag-container>
  <sag-container buttons>
    <button
      (click)="printStatus('Message5 Closed: Cancel button clicked')"
      class="dlt-button dlt-button-secondary xs-button cancel-inine"
    >
      Cancel
    </button>
    <button
      (click)="printStatus('Message5: Try again button clicked')"
      class="dlt-button dlt-button-primary xs-button"
    >
      Try again
    </button>
  </sag-container>
</sag-inline-message>
```

```JS
import { Component, OnInit } from '@angular/core';
import { MsgLevel } from '@softwareag/dln/shared';

@Component({
  selector: 'app-inline-message-demo',
  templateUrl: './inline-message-demo.component.html',
  styleUrls: ['./inline-message-demo.component.scss']
})
export class InlineMessageDemoComponent implements OnInit {
  MsgLevel = MsgLevel;
  ...
}
```

#### Properties

| Name           | Type     | Default          | Description                                                                     |
| -------------- | -------- | ---------------- | ------------------------------------------------------------------------------- |
| msgLevel       | MsgLevel | MsgLevel.Success | Message Level. Determines the border color. (see [Shared](###shared))           |
| width          | string   | '100%'           | Specifies the width of the inline message. Valid values are CSS 'width' values. |
| closeButton    | boolean  | true             | Specifies if close button 'X' is visible                                        |
| detailsVisible | boolean  | false            | Specifies if 'Show Details' section is visible                                  |
| buttonsVisible | boolean  | false            | Specifies if buttons section is visible                                         |

#### Events

| Name         | Parameters | Description                                      |
| ------------ | ---------- | ------------------------------------------------ |
| closeMessage | none       | Callback to invoke when inline message is close. |

#### Extra Tips

For buttons section, a button can trigger inline message to close / dismissed by including class "cancel-inine":
```html
<button
  (click)="printStatus('Message5 Closed: Cancel button clicked')"
  class="dlt-button dlt-button-secondary xs-button cancel-inine"
>
  Cancel
</button>
```
### Leftnav
#### Import

```js
import { LeftnavModule } from '@softwareag/dln/leftnav';
```

#### Getting Started

```html
<sag-leftnav [hideLeft]='hideLeft' topSectionHeight="50px" bottomSectionHeight="100px">
    <sag-leftnav-item LeftTop type='div' itemId="div1">
        <h5 style="overflow: hidden;">Top Test Demo</h5>
    </sag-leftnav-item>
    <ng-container LeftContent>
        <sag-leftnav-item type="link" itemId="leftItem_createNew" itemIcon="dlt-icon-plus" itemLabel="Create New"
            itemUrl="./'"></sag-leftnav-item>
        <sag-leftnav-item type="link" itemId="leftItem_createNew" itemIcon="dlt-icon-plus" itemLabel="tes2"
            itemUrl="./sadas'"></sag-leftnav-item>
        <sag-leftnav-item type='div' itemId="div2">
            <div class="dlt-form-group">
                <input id="search-input" type="text" required class="dlt-text-input dlt-search" placeholder="Search">
                <button class="clear-icon clear-icon-more-padding" type="button"><i class="dlt-icon-close"></i></button>
                <button class="search-icon" type="button"><i class="dlt-icon-search dlt-icon-sm"></i></button>
            </div>
        </sag-leftnav-item>
        <sag-leftnav-item type='link' itemId="item1" itemLabel="item 1" itemUrl="/leftnav"></sag-leftnav-item>
        <sag-leftnav-item type='link' itemId="item2" itemLabel="item 2" itemUrl="/xxx">t1</sag-leftnav-item>
        <sag-leftnav-item type='link' itemId="item3" itemLabel="item 3" itemUrl="/xxx">t2</sag-leftnav-item>
        <sag-leftnav-item type='link' itemId="item4" itemLabel="item 4" itemUrl="/xxx">t3</sag-leftnav-item>
        <sag-leftnav-expand-item itemId="expand1" itemLabel="expand 1">
            <sag-leftnav-item type='link' [itemLevel]='1' itemId="item5" itemLabel="sub 5" itemUrl="/xxx">
            </sag-leftnav-item>
            <sag-leftnav-item type='link' [itemLevel]='1' itemId="item6" itemLabel="sub 6" itemUrl="/xxx">
            </sag-leftnav-item>
            <sag-leftnav-item type='link' [itemLevel]='1' itemId="item7" itemLabel="sub Active" itemUrl="/leftnav">
            </sag-leftnav-item>

            <sag-leftnav-expand-item itemId="expand2" itemLabel="expand 2" [itemLevel]='1'>
                <sag-leftnav-item type='link' [itemLevel]='2' itemId="subsub1" itemLabel="subsub Active"
                    itemUrl="/leftnav"></sag-leftnav-item>
                <sag-leftnav-item type='link' [itemLevel]='2' itemId="subsub2" itemLabel="subsub2" itemUrl="/xxx">
                </sag-leftnav-item>
                <sag-leftnav-item type='link' [itemLevel]='2' itemId="subsub3" itemLabel="subsub3" itemUrl="/xxx">
                </sag-leftnav-item>
                <sag-leftnav-item type='link' [itemLevel]='2' itemId="subsub4" itemLabel="subsub4" itemUrl="/xxx">
                </sag-leftnav-item>
                <sag-leftnav-item type='link' [itemLevel]='2' itemId="subsub5" itemLabel="subsub5" itemUrl="/xxx">
                </sag-leftnav-item>
                <sag-leftnav-item type='link' [itemLevel]='2' itemId="subsub6" itemLabel="subsub6" itemUrl="/xxx">
                </sag-leftnav-item>
                <sag-leftnav-item type='link' [itemLevel]='2' itemId="subsub7" itemLabel="subsub7" itemUrl="/xxx">
                </sag-leftnav-item>
                <sag-leftnav-item type='link' [itemLevel]='2' itemId="subsub8" itemLabel="subsub8" itemUrl="/xxx">
                </sag-leftnav-item>
                <sag-leftnav-item type='link' [itemLevel]='2' itemId="subsub9" itemLabel="subsub9" itemUrl="/xxx">
                </sag-leftnav-item>
                <sag-leftnav-item type='link' [itemLevel]='2' itemId="subsub10" itemLabel="subsub10" itemUrl="/xxx">
                </sag-leftnav-item>
                <sag-leftnav-item type='link' [itemLevel]='2' itemId="subsub11" itemLabel="subsub11" itemUrl="/xxx">
                </sag-leftnav-item>
                <sag-leftnav-item type='link' [itemLevel]='2' itemId="subsub12" itemLabel="subsub12" itemUrl="/xxx">
                </sag-leftnav-item>
                <sag-leftnav-item type='link' [itemLevel]='2' itemId="subsub13" itemLabel="subsub13" itemUrl="/xxx">
                </sag-leftnav-item>
                <sag-leftnav-item type='link' [itemLevel]='2' itemId="subsub14" itemLabel="subsub14" itemUrl="/xxx">
                </sag-leftnav-item>
                <sag-leftnav-item type='link' [itemLevel]='2' itemId="subsub15" itemLabel="subsub15" itemUrl="/xxx">
                </sag-leftnav-item>

            </sag-leftnav-expand-item>
        </sag-leftnav-expand-item>
    </ng-container>
    <div LeftBottom>
        <h2>Bottom Test1</h2>
        <button>Testing button</button>
    </div>
    <ng-container Right>
        <!-- Content goes here-->
    </ng-container>
</sag-leftnav>
```

#### Properties
##### sag-leftnav
| Name           | Type     | Default          | Description                                                                     |
| -------------- | -------- | ---------------- | ------------------------------------------------------------------------------- |
| id | string | 'sagleftnav' | Specifies the HTML id |
| leftNavWidth | string | '240px' | Specifies width of the Leftnav |
| hideLeft | boolean | false | Collapse and hide Leftnav |
| topSectionHeight | string | '0px' | Specifies top section hegith of the Leftnav |
| bottomSectionHeight | string | '0px' | Specifies bottom section hegith of the Leftnav |

##### sag-leftnav-item
| Name           | Type     | Default          | Description                                                                     |
| -------------- | -------- | ---------------- | ------------------------------------------------------------------------------- |
| itemId | string | 'sagleftnavitem' | Specifies the HTML id |
| type | string | 'link' | Either 'link' or 'div' |
| itemUrl | string | '' | Specifies URL for [routerLink] |
| itemLevel | number | 0 | Specifies the left indent margin |
| itemLabel | string | '' | Specifies item display label |
| itemLabelStyle | string | '' | Specifies style of item display label |
| itemStyle | string | '' | Specifies style of item |
| itemIcon | string | '' | Specifies icon class of item |

##### sag-leftnav-expan-item
| Name           | Type     | Default          | Description                                                                     |
| -------------- | -------- | ---------------- | ------------------------------------------------------------------------------- |
| itemId | string | 'sagleftnavexpand' | Specifies the HTML id |
| itemLevel | number | 0 | Specifies the left indent margin |
| itemLabel | string | '' | Specifies item display label |
| expand | boolean | false | Specifies if item should show expanded state |

### Message Dialog

#### Import

```js
import { MessageDialogModule } from '@softwareag/dln/message-dialog';
import { SharedModule } from '@softwareag/dln/shared';
```

#### Getting Started

```html
<sag-message-dialog
  [title]="deleteDialogHeader"
  [msgType]="'warn'"
  [(visible)]="showDeleteUser"
>
  Are you sure you want to delete this user?
  <sag-footer>
    <button
      class="dlt-button dlt-button-secondary"
      type="button"
      id="userlist-button-deleteuserconfirm"
    >
      Yes, delete user
    </button>
    <button
      (click)="showDeleteUser=false"
      class="dlt-button dlt-button-primary"
      type="button"
      id="userlist-button-deleteusercancel"
    >
      Cancel
    </button>
  </sag-footer>
</sag-message-dialog>
```

#### Properties

| Name          | Type     | Default       | Description                                                                                    |
| ------------- | -------- | ------------- | ---------------------------------------------------------------------------------------------- |
| title         | string   | ""            | Title of the model dialog                                                                      |
| visible       | boolean  | false         | Specifies the visibility of the dialog                                                         |
| msgType       | MsgLevel | MsgLevel.Info | Specifies vertical left border color and icon (see [Shared](###shared))                        |
| readOnly      | boolean  | false         | Specifies if buttons available. Mainly for message only modal. (No sag-footer will be display) |
| showDetail    | boolean  | true          | Whether to hide detail. If hidden, detail will be show by clicking "Show Details"              |
| width         | string   | null          | Specifies the width size of the modal. ex. 48px                                                |
| contentHeight | string   | ''            | Specifies the height of the content area excludes title and footer button                      |

#### Events

| Name          | Parameters          | Description                                                                |
| ------------- | ------------------- | -------------------------------------------------------------------------- |
| visibleChange | event: Event Object | Callback to invoke when dialog visibility changed and return boolean value |

### Number Input

#### Import

```js
import { NumberInputModule } from '@softwareag/dln/number-input';
import { DirectiveModule } from '@softwareag/dln/directive';
```

#### Getting Started

```html
<div [formGroup]="demoFormGroup">
  <sag-number-input
    [id]="'demo'"
    [min]="0"
    [max]="20"
    [enableFlag]="editMode"
    [width]="'100px'"
  >
    <input
      id="demo"
      type="number"
      class="dlt-number-input"
      formControlName="demo"
      [sagDisableElement]="!editMode"
    />
  </sag-number-input>
</div>
```

#### Properties

| Name         | Type    | Default | Description                                                               |
| ------------ | ------- | ------- | ------------------------------------------------------------------------- |
| id           | string  | ""      | Id for the label that matches the id of the number input.                 |
| min          | number  | null    | Specifies the lower limit of the number input.                            |
| max          | number  | null    | Specifies the upper limit of the number input.                            |
| width        | string  | ""      | Specifies the width of the number input.                                  |
| label        | string  | ""      | Specifies the label of the number input.                                  |
| enableFlag   | boolean | true    | Disable the number input by assigning false to this flag.                 |
| errCondition | boolean | false   | Show highlight in red to indicate error when assigned true.               |
| errMessage   | string  | ""      | Show error message underneath the number input when errCondition is true. |

### Overflow Menu

#### Import

```js
import { OverflowMenuModule } from '@softwareag/dln/overflow-menu';
```

#### Getting Started

```html
<sag-overflow-menu
  [id]="'hostlist-overflowmenu{ ' + i + ' }'"
  class="hostlist-overflowmenu-{{i}}"
  (isActiveChange)="getAdaRestVersion($event, host)"
>
  <a
    id="hostlist-button-edithost{{ i }}"
    (click)="displayEditHost(host, i)"
  >
    <i
      id="hostlist-icon-edithost{{ i }}"
      class="dlt-icon-edit menu-icons"
    ></i>
    Edit
  </a>
  <a
    id="hostlist-button-delhost{{ i }}"
    (click)="deleteHost(host)"
  >
    <i
      id="hostlist-icon-delhost{{ i }}"
      class="dlt-icon-delete menu-icons"
    ></i>
    Delete
  </a>
  <div class="solid-line"></div>
  <legend class="dlt-overlay-menu-group-label">
    Version: <br />
    <span style="white-space: nowrap;">{{ adaVersion }}</span>
  </legend>
</sag-overflow-menu>
```
#### Properties

| Name           | Type     | Default          | Description                                                                     |
| -------------- | -------- | ---------------- | ------------------------------------------------------------------------------- |
| id | string | 'sagoverflowmenu' | Specifies the HTML id|
| forceOpen | boolean | false | open by default if true |

#### Events

| Name         | Parameters | Description                                      |
| ------------ | ---------- | ------------------------------------------------ |
| isActiveChange | none       | Callback to invoke when overflow open or close. |

### Pagination

Pagination for tables

#### Import

```js
import { PaginationModule } from '@softwareag/dln/pagination';
```

#### Getting Started

```html
<sag-pagination
  [rowsPerPage]="5"
  [totalRecords]="userList.length"
  [rowsPerPageOptions]="[2,5,10]"
  (paginationAction)="changePagination($event)"
></sag-pagination>
```

```js
import { Component } from '@angular/core';
import { PaginationState } from '@softwareag/dln/pagination';

@Component({
  templateUrl: './my.component.html',
})
export class MyComponent {
  userListFirstIndex: number = 0;
  userListRowsPerPage: number = 10;
  constructor() {}

  changePagination(event) {
    let paginationState: PaginationState = event;
    this.userListFirstIndex = paginationState.first;
    this.userListRowsPerPage = paginationState.rows;
  }
}
```

#### Properties

| Name               | Type          | Default | Description                                                                                                                                  |
| ------------------ | ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| totalRecords       | number        | 0       | Number of total records                                                                                                                      |
| rowsPerPage        | number        | 0       | Data count to display per page                                                                                                               |
| rowsPerPageOptions | Array<number> | []      | Array of integer/object values to display inside rows per page dropdown. In the case of empty array, "Items per page" dropdown will not show |
| showRowReport      | boolean       | true    | Whether to show row report, i.e. "1 - 10 of 34 items"                                                                                        |

#### Events

| Name             | Parameters                                                                                                                                                                | Description                                                                                      |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| paginationAction | event.first: Index of first record <br>event.rows: Number of rows to display in new page <br>event.page: Index of the new page <br>event.pageCount: Total number of pages | Callback to invoke when page changes, the event object contains information about the new state. |

### Radio Button

#### Import

```js
import { RadioButtonModule } from '@softwareag/dln/radio-button';
import { size } from '@softwareag/dln/shared';

@NgModule({
 imports: [
   RadioButtonModule,
   ...
  ]
```

#### Getting Started

```html
<sag-radio-button-group title="title1">
  <sag-radio-button>
    <input type="radio" formControlName="radio1" id="inputId1" value="value1" />
    <label for="inputId1" attr.data-toggle="tooltip1" title="tooltip1"
      >{{ label1 }}</label
    >
  </sag-radio-button>
  <sag-radio-button>
    <input type="radio" formControlName="radio2" id="inputId2" value="value2" />
    <label for="inputId2" attr.data-toggle="tooltip2" title="tooltip2"
      >{{ label2 }}</label
    >
  </sag-radio-button>
</sag-radio-button-group>
```

#### Properties

| Name      | Type   | Default | Description                                                           |
| --------- | ------ | ------- | --------------------------------------------------------------------- |
| groupsize | string | "large" | Specifies the size of the radio button group. Default will be "large" |
| title     | string | ""      | Specifies the title of the radio button group.                        |

### Selectbox

#### Import

```js
import { SelectboxDualComponent } from './selectbox-dual/selectbox-dual.component';
import { FormsModule } from '@angular/forms';
```

#### Getting Started

```html
<sag-selectbox-dual [(selectedlist)]="duallist_destination" [source]="['aaa', 'bbb', 'ccc', 'ddd', 'eee']"></sag-selectbox-dual>
<sag-selectbox-dual [selectedlist]="fc.value" (selectedlist)="fc.setValue($event)" [source]="['aaa', 'bbb', 'ccc', 'ddd', 'eee']"></sag-selectbox-dual>
```

```JS
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-selectbox-demo',
  templateUrl: './selectbox-demo.component.html',
  styleUrls: ['./selectbox-demo.component.scss']
})
export class SelectboxDemoComponent implements OnInit {

  duallist_destination = new Array<any>();
  fc = new FormControl([]);
  constructor() { }

  ngOnInit(): void {
  }
  test() {
    console.log('test', this.fc.value);
    console.log('test', this.duallist_destination);
  }

}
```

#### Properties

| Name           | Type     | Default          | Description                                                                     |
| -------------- | -------- | ---------------- | ------------------------------------------------------------------------------- |
| height | string   | '100px' | Specifies the height of the selectbox |
| source | Array<any> | [] | Specifies array of source |
| selectedlist | Array<any> | [] | Specifies array of the selected source |

#### Events

| Name         | Parameters | Description                                      |
| ------------ | ---------- | ------------------------------------------------ |
| selectedlistChange | none       | Callback to invoke when selected list is changed. Returns new list |

### Shared

Shared module consists of the following:

- Header (sag-header) component
- Footer (sag-footer) component
- MsgLevel model
  --> enum MsgLevel {
  Success = 'success',
  Info = 'info',
  Warning = 'warn',
  Error = 'error',
  }

#### Import

```js
import { SharedModule } from '@softwareag/dln/shared';
```

### Old Spinner

#### Import

```js
import { SpinnerModule } from '@softwareag/dln/spinner';
```

#### Getting Started

```html
<sag-old-spinner [textPosition]="'below'" [size]="'small'">Your spinner text here...</sag-old-spinner>
```

#### Properties

| Name | Type   | Default  | Description                                                    |
| ---- | ------ | -------- | -------------------------------------------------------------- |
| size | string | "medium" | Specifies the size of the spinner ("small", "medium", "large", "xlarge") |
| textPostion | string | "none" | Specifies the text position of your message with the spinner ("none", "right", "below") |

### Spinner

#### Import

```js
import { SpinnerModule } from '@softwareag/dln/spinner';
import { size } from '@softwareag/dln/shared';
```

#### Getting Started

```html
<sag-spinner [size]="'small'"></sag-spinner>
<br>
<h3>Medium</h3>
<sag-spinner></sag-spinner>
<br>
<h3>Large</h3>
<sag-spinner [size]="'large'"></sag-spinner>
<br>
<h3>Text Right</h3>
<sag-spinner [textPosition]="'right'">
  Loading...
</sag-spinner>
<br>
<h3>Text Bottom</h3>
<sag-spinner [size]="'xlarge'" [textPosition]="'below'">
  Please wait...
</sag-spinner>
```

#### Properties

| Name         | Type    | Default | Description                                                               |
| ------------ | ------- | ------- | ------------------------------------------------------------------------- |
| id           | string  | sagspinner      | Id for the label that matches the id of the spinner                 |
| size          | number  | medium    | Specifies the size of the spinner.                            |
| color          | string  | null    | Specifies the color of the spinner. #1776bf if null.                            |
| textPosition        | string  | none      | Specifies the location of the text in relative to the spinner.  | 
### Time Picker

#### Import

```js
import { TimePickerModule } from '@softwareag/dln/timepicker';
```

#### Getting Started

```html
<sag-timepicker [id]="'random-id'" [label]="'Time'">
  <input
    class="dlt-time-picker1"
    id="random-id"
    time-format="hh:mm:ss"
    min-interval="1"
    formControlName="timepicker"
  />
</sag-timepicker>
```

#### Properties

| Name  | Type   | Default | Description                                 |
| ----- | ------ | ------- | ------------------------------------------- |
| label | string | ""      | Label for the timepicker input.             |
| id    | string | ""      | Id to match the id of the timepicker input. |


### Toast

#### Import

```js
import { ToastModule, ToastMessageService } from '@softwareag/dln/toast';
@NgModule({
 imports: [
   ToastModule,
   ...
  ],
  providers: [
   ToastMessageService,
   ...
  ]
```

#### Getting Started

```html
<sag-toast-list
  [timeOutMilliSecond]="3000"
  [position]="'top-right'"
></sag-toast-list>
```

```js
import {Component} from '@angular/core';
import { ToastMessageService } from '@softwareag/dln/toast';

@Component({
    templateUrl: './my.component.html'
})
export class MyComponent {

    constructor(private private toastMsgService: ToastMessageService) {}

    addSingle() {
    let message = {
      msgTitle: 'Error: Rest Server',
      msgSummary: 'Rest connection responded with error.',
      msgDetail: 'Error Log Details: ...',
      msgLevel: MsgLevel.Error
    };
      this.toastMsgService.addMsg(msgToGrowl);
    }
}
```

#### Properties

| Name               | Type   | Default     | Description                                                                                                                                                                    |
| ------------------ | ------ | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| timeOutMilliSecond | number | 3000        | Specifies time in ms for each toast item to dissapear                                                                                                                          |
| position           | string | "top-right" | Specifies the position where the toast list will appear. (top-right, top-left, top-middle, center-right, center-left, center-middle, bottom-right, bottom-left, bottom-middle) |


### Top Navigation Bar

#### Prerequisite

Install and setup Bootstrap v4.4.1 or above in your angular project
Must with Angular version 9 or above

#### Import

```js
import { TopnavModule } from '@softwareag/dln/topnav';
@NgModule({
 imports: [
   TopnavModule,
   ...
  ]
```

#### Getting Started

```html
<sag-topnav
  brandsrc="/anyimage.png"
  brandtitle="Top Nav Demo"
  brandheight="24"
  brandwidth="24"
>
  <sag-topnav-left left>
    <sag-topnav-item
      itemType="link"
      link="/anyroute"
      [disable]="false"
      title="Normal Link"
      itemId="normallink"
      itemName="Normal Link"
    >
    </sag-topnav-item>

    <sag-topnav-item
      itemType="link"
      link="/anyroute2"
      [disable]="false"
      title="Link with Icon"
      itemId="linkwithicon"
      itemName="Link With Icon"
      itemIcon="dlt-icon-cam"
    >
    </sag-topnav-item>

    <sag-topnav-item
      itemType="link"
      link="/xxx"
      [disable]="false"
      title="Link with Image"
      itemId="linkwithicon"
      itemName="Link With Image"
      itemImg=".\assets\bitbucket-logo-black-and-white.png"
      itemImgStyle="width:24px; height:24px"
    >
    </sag-topnav-item>

    <sag-topnav-item
      itemType="link"
      link="/anyroute3"
      [disable]="true"
      title="Disabled Link"
      itemId="disabledlink"
      itemName="Disabled Link"
    >
    </sag-topnav-item>

    <sag-topnav-item
      itemType="button"
      itemIcon="dlt-icon-cam"
      itemId="Demobutton"
      [disable]="false"
      itemName="Button"
      title="Button"
      (buttonClick)="function1($event)"
    >
    </sag-topnav-item>

    <sag-topnav-item
      itemType="dropdown"
      itemId="normalDropdown"
      itemName="Normal Dropdown"
      title="Normal  Dropdown"
    >
      <sag-dropdown-item (click)="function1('Normal Dropdown Link1')"
        ><a>Link1</a></sag-dropdown-item
      >
      <sag-dropdown-item itemStyle="text-align: right;"
        ><a>Link2 Right</a></sag-dropdown-item
      >
      <sag-dropdown-item><a>Link1</a></sag-dropdown-item>
      <sag-dropdown-item><a>Link2</a></sag-dropdown-item>
      <sag-dropdown-item><a>Link1</a></sag-dropdown-item>
      <sag-dropdown-item><a>Link2</a></sag-dropdown-item>
      <sag-dropdown-item><a>Link1</a></sag-dropdown-item>
      <sag-dropdown-item><a>Link2</a></sag-dropdown-item>
      <sag-dropdown-item><a>Link1</a></sag-dropdown-item>
      <sag-dropdown-item><a>Link2</a></sag-dropdown-item>
    </sag-topnav-item>

    <sag-topnav-item
      itemType="dropdown"
      itemIcon="dlt-icon-buy"
      itemId="2LevelDropdown"
      itemName="2Level Dropdown"
      title="2Level Dropdown"
    >
      <sag-dropdown-item (click)="function1('2Level Dropdown Link1')"
        ><a>Link1</a></sag-dropdown-item
      >
      <sag-dropdown-item-submenu itemName="Left Menu" dropdirection="left">
        <sag-dropdown-item
          (click)="function1('2Level Dropdown sub1')"
          itemStyle="text-align: right;"
          ><a> sub1</a></sag-dropdown-item
        >
        <sag-dropdown-item
          (click)="function1('2Level Dropdown sub2')"
          itemStyle="text-align: right;"
          ><a> sub2</a></sag-dropdown-item
        >
      </sag-dropdown-item-submenu>
      <sag-dropdown-item-submenu itemName="Right Menu">
        <sag-dropdown-item
          (click)="function1('2Level Dropdown sub3')"
          itemStyle="text-align: left;"
          ><a> sub3</a></sag-dropdown-item
        >
        <sag-dropdown-item
          (click)="function1('2Level Dropdown sub4')"
          itemStyle="text-align: left;"
          ><a> sub4</a></sag-dropdown-item
        >
      </sag-dropdown-item-submenu>
    </sag-topnav-item>
  </sag-topnav-left>

  <sag-topnav-right right>
    <sag-topnav-item
      itemType="link"
      link="/dialog"
      [disable]="true"
      title="Disabled Right Link"
      itemId="disabledrightlink"
      itemName="Disabled Right Link"
    >
    </sag-topnav-item>
    <sag-topnav-item
      itemType="label"
      itemIcon="dlt-icon-cloud-minus"
      itemId="Demolabel"
      itemName="Demo Label"
    >
    </sag-topnav-item>
    <sag-topnav-item
      itemType="dropdown"
      title="Profile with Chevron"
      [chevron]="true"
      itemId="linkprofilewithChevron"
      itemIcon="dlt-icon-profile"
      menuAlignment="right"
    >
      <sag-dropdown-item>logout</sag-dropdown-item>
      <sag-dropdown-item>User Management</sag-dropdown-item>
    </sag-topnav-item>
    <sag-topnav-item
      itemType="dropdown"
      title="Profile"
      [chevron]="false"
      itemId="linkprofile"
      itemIcon="dlt-icon-profile"
      menuAlignment="right"
    >
      <sag-dropdown-item>logout</sag-dropdown-item>
      <sag-dropdown-item>User Management</sag-dropdown-item>
    </sag-topnav-item>
  </sag-topnav-right>
</sag-topnav>

<sag-topnav
  brandsrc=""
  brandtitle="Top Nav Demo"
  brandheight="24"
  brandwidth="24"
>
  <sag-topnav-left left>
    <sag-topnav-item
      itemType="link"
      link="/dialog"
      [disable]="true"
      title="Disabled Link"
      itemId="disabledlink"
      itemName="Disabled Link"
      itemStyle="color:red"
    >
    </sag-topnav-item>

    <sag-topnav-item
      itemType="link"
      link="/checkbox"
      [disable]="false"
      title="Normal Link"
      itemId="normallink"
      itemName="Normal Link"
      itemStyle="color:pink"
    >
    </sag-topnav-item>

    <sag-topnav-item
      itemType="link"
      link="/topnav"
      [disable]="false"
      title="Active Link"
      itemId="activelink"
      itemName="Active Link"
      itemStyle="color:yellow"
    >
    </sag-topnav-item>

    <sag-topnav-item
      itemType="link"
      link="/checkbox"
      [disable]="false"
      title="Link with Icon"
      itemId="linkwithicon"
      itemName="Link With Icon"
      itemIcon="dlt-icon-cam"
      itemStyle="color:grey"
    >
    </sag-topnav-item>

    <sag-topnav-item
      itemType="link"
      link="/checkbox"
      [disable]="false"
      title="Link only Icon"
      itemId="linkonlyicon"
      itemName=""
      itemIcon="dlt-icon-alarm"
      itemStyle="color:silver"
    >
    </sag-topnav-item>

    <sag-topnav-item
      itemType="link"
      link="/checkbox"
      [disable]="true"
      title="Link only Icon Disabled"
      itemId="linkonlyicondisabled"
      itemName=""
      itemIcon="dlt-icon-alarm"
      itemStyle="color:black"
    >
    </sag-topnav-item>

    <sag-topnav-item
      itemType="button"
      itemIcon="dlt-icon-cam"
      itemId="Demobutton"
      [disable]="false"
      itemName="Button"
      title="Button"
      (buttonClick)="function1($event)"
      itemStyle="color:Blue"
    >
    </sag-topnav-item>
  </sag-topnav-left>

  <sag-topnav-right right>
    <sag-topnav-item
      itemType="link"
      link="/dialog"
      [disable]="true"
      title="Disabled Right Link"
      itemId="disabledrightlink"
      itemName="Disabled Right Link"
      itemStyle="color:yellow"
    >
    </sag-topnav-item>
    <sag-topnav-item
      itemType="label"
      title="Black Label"
      itemIcon="dlt-icon-cloud-minus"
      itemId="blacklabel"
      itemName="Black Label"
      itemStyle="color:black"
    >
    </sag-topnav-item>
    <sag-topnav-item
      itemType="button"
      title="Black Icon"
      itemId="blackicon"
      itemIcon="dlt-icon-profile"
      itemStyle="color:red"
    >
    </sag-topnav-item>
  </sag-topnav-right>
</sag-topnav>
```

#### Properties

##### sag-topnav

| Name        | Type    | Default | Description                       |
| ----------- | ------- | ------- | --------------------------------- |
| home        | boolean | true    | Specifies visibility of home icon |
| homeUrl     | string  | "#"     | Specifies home url                |
| brandtitle  | string  | ""      | Specifies the title of the brand  |
| brandsrc    | string  | ""      | Specifies the source of the brand |
| brandheight | string  | ""      | Specifies the height of the brand |
| brandwidth  | string  | ""      | Specifies the width of the brand  |

##### sag-topnav-item

###### All itemType

| Name         | Type    | Default | Description                                                                   |
| ------------ | ------- | ------- | ----------------------------------------------------------------------------- |
| itemType     | string  | -       | Specifies type of the item - link, dropdown, dropdown_2level, button or label |
| title        | string  | ""      | Specifies the title of