@softwareag/dln
v2.0.0
Published
Angular component library for Software AG Delite Design System
Downloads
2
Maintainers
sagadminReadme
DLN (Delite for Angular) - Angular v13 Delite
This is a library build from Angular v13 library format using Software AG Delite Design System.
Table of Contents
Pre-requisite
DLN is built using ng-packagr v13+ using Angular v13 library. The library will only work on Angular 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 for this.
Install @softwareag/dln with the following steps:
- Run npm install
npm install --save @softwareag/dlnNote: @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.
- Once installed you need to include @softwareag/dlt and bootstrap assets which comes as dependencies of @softwareag/dln as below (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:
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
Components / Widgets List:
- Accordion
- Button
- Checkbox
- Dialog
- Directive Disable Controller
- Directive Disable Element
- Dropdown
- Inline Message
- Leftnav
- Message Dialog
- Number Input
- Overflow Menu
- Pagination
- Radio Button
- Selectbox
- Shared
- Old Spinner
- Spinner
- Time Picker
- Toast
- Top Navigation Bar
- Tree
- License of this package
- Copyrights and Licenses of dependencies
Accordion
Import
import { AccordionModule } from '@softwareag/dln/accordion';Getting Started
<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
import { ButtonModule } from '@softwareag/dln/button';Component
import { ButtonSize, ButtonType, ButtonSize } from '@softwareag/dln/button';Getting Started
<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
import { CheckboxModule} from '@softwareag/dln/checkbox';
import { Shared } from '@softwareag/dln/shared';
@NgModule({
imports: [
CheckboxModule,
...
]Getting Started
<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
import { DialogModule } from '@softwareag/dln/dialog';
import { size } from '@softwareag/dln/shared';Getting Started
<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:
<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
import { DirectiveModule } from '@softwareag/dln/directive';
@NgModule({
imports: [
DirectiveModule,
...
]Getting Started
...
<input
type="radio"
formControlName="radio1"
id="inputId1"
value="value1"
[sagDisableControl]="disableFlag"
/>
...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
import { DirectiveModule } from '@softwareag/dln/directive';
@NgModule({
imports: [
DirectiveModule,
...
]Getting Started
...
<input
type="radio"
formControlName="radio1"
id="inputId1"
value="value1"
[sagDisableElement]="disableFlag"
/>
...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
import { ReactiveFormsModule } from '@angular/forms';
import { DropdownModule } from '@softwareag/dln/dropdown';
import { SharedModule } from '@softwareag/dln/shared';Getting Started
<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>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
import { InlineMessageModule } from '@softwareag/dln/inline-message';
import { SharedModule } from '@softwareag/dln/shared';Getting Started
<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="">[email protected]</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>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) | | 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":
<button
(click)="printStatus('Message5 Closed: Cancel button clicked')"
class="dlt-button dlt-button-secondary xs-button cancel-inine"
>
Cancel
</button>Leftnav
Import
import { LeftnavModule } from '@softwareag/dln/leftnav';Getting Started
<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
import { MessageDialogModule } from '@softwareag/dln/message-dialog';
import { SharedModule } from '@softwareag/dln/shared';Getting Started
<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) | | 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
import { NumberInputModule } from '@softwareag/dln/number-input';
import { DirectiveModule } from '@softwareag/dln/directive';Getting Started
<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
import { OverflowMenuModule } from '@softwareag/dln/overflow-menu';Getting Started
<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
import { PaginationModule } from '@softwareag/dln/pagination';Getting Started
<sag-pagination
[rowsPerPage]="5"
[totalRecords]="userList.length"
[rowsPerPageOptions]="[2,5,10]"
(paginationAction)="changePagination($event)"
></sag-pagination>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 | [] | 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 event.rows: Number of rows to display in new page event.page: Index of the new page event.pageCount: Total number of pages | Callback to invoke when page changes, the event object contains information about the new state. |
Radio Button
Import
import { RadioButtonModule } from '@softwareag/dln/radio-button';
import { size } from '@softwareag/dln/shared';
@NgModule({
imports: [
RadioButtonModule,
...
]Getting Started
<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
import { SelectboxDualComponent } from './selectbox-dual/selectbox-dual.component';
import { FormsModule } from '@angular/forms';Getting Started
<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>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 | [] | Specifies array of source | | selectedlist | Array | [] | 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
import { SharedModule } from '@softwareag/dln/shared';Old Spinner
Import
import { SpinnerModule } from '@softwareag/dln/spinner';Getting Started
<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
import { SpinnerModule } from '@softwareag/dln/spinner';
import { size } from '@softwareag/dln/shared';Getting Started
<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
import { TimePickerModule } from '@softwareag/dln/timepicker';Getting Started
<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
import { ToastModule, ToastMessageService } from '@softwareag/dln/toast';
@NgModule({
imports: [
ToastModule,
...
],
providers: [
ToastMessageService,
...
]Getting Started
<sag-toast-list
[timeOutMilliSecond]="3000"
[position]="'top-right'"
></sag-toast-list>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
import { TopnavModule } from '@softwareag/dln/topnav';
@NgModule({
imports: [
TopnavModule,
...
]Getting Started
<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