DLN (Delite for Angular) - Angular v13 Delite

This is a library build from Angular v13 library format using Software AG Delite Design System.

Pre-requisite
Installation
Browser Compatibility
Available Components / Widgets

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/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.

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

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 the item
active	boolean	false	Specifies the item is active or not
disable	boolean	false	Specifies the item is disable or not
itemId	string	-	Specifies the ID of the item
itemName	string	""	Specifies the text of the item
itemIcon	string	-	Specifies the icon of the item
itemStyle	string	""	Specifies the style of the item
itemImg	string	-	Specifies the image of the item
itemImgStyle	string	""	Specifies the style of the item' image
disable	boolean	false	Specifies the item is disable or not

itemType = "link"

Name	Type	Default	Description
link	string	""	Specifies the routerlink of the item

sag-dropdown-item

Name	Type	Default	Description
itemStyle	string	""	Specifies the style of the item

sag-dropdown-item-scroll

Name	Type	Default	Description
scrollStyle	string	""	Specifies the style of the scroll

sag-dropdown-item-scroll

Name	Type	Default	Description
itemName	string	""	Specifies the text of the item
dropdirection	string	"right"	Specifies the drop direction of the sub menu - "left" or "right"
submenuStyle	string	""	Specifies the style of the sub menu

Tree

Import

import { TreeModule } from '@softwareag/dln/tree';
import { SharedModule } from '@softwareag/dln/shared';

Getting Started

<h4>3 Level Tree</h4>
<sag-tree id="Test">
    <sag-tree-parent id="D3-Parent1" (expandClick)="demoParentExpandClick($event, 'D1_Parent1')">
        <i label class="dlt-icon-folder" style="font-size: 24px; color:rgb(23, 118, 191); vertical-align: sub;"></i>
        <span label>parent</span>
        <sag-tree-child children [selected]='true' id="D1-P1-Child1">
            <i label class="dlt-icon-document" style="font-size: 24px; color:rgb(23, 118, 191); vertical-align: sub;"></i>
            <span>D1_P1_mychild1</span>
        </sag-tree-child>
        <sag-tree-child children id="D1-P1-Child1">
            <i label class="dlt-icon-document" style="font-size: 24px; color:rgb(23, 118, 191); vertical-align: sub;"></i>
            <span>D1_P1_mychild2</span>
        </sag-tree-child>
        <sag-tree-child children id="D1-P1-Child1">
            <i label class="dlt-icon-document" style="font-size: 24px; color:rgb(23, 118, 191); vertical-align: sub;"></i>
            <span>D1_P1_mychild3</span>
        </sag-tree-child>
        <sag-tree-child children id="D1-P1-Child1">
            <i label class="dlt-icon-document" style="font-size: 24px; color:rgb(23, 118, 191); vertical-align: sub;"></i>
            <span>D1_P1_mychild4</span>
        </sag-tree-child>
        <sag-tree-child children id="D1-P1-Child1">
            <i label class="dlt-icon-document" style="font-size: 24px; color:rgb(23, 118, 191); vertical-align: sub;"></i>
            <span>D1_P1_mychild5</span>
        </sag-tree-child>
        <sag-tree-parent children id="D3-P1-Parent1">
            <i label class="dlt-icon-folder" style="font-size: 24px; color:rgb(23, 118, 191); vertical-align: sub;"></i>
            <span label> P1 parent</span>
            <sag-tree-child children id="D1-P1-Child1">
                <i label class="dlt-icon-document" style="font-size: 24px; color:rgb(23, 118, 191); vertical-align: sub;"></i>
                <span>D1_P1_P1_mychild1</span>
            </sag-tree-child>
            <sag-tree-child children id="D1-P1-Child1">
                <i label class="dlt-icon-document" style="font-size: 24px; color:rgb(23, 118, 191); vertical-align: sub;"></i>
                <span>D1_P1_P1_mychild2</span>
            </sag-tree-child>
            <sag-tree-child children id="D1-P1-Child1">
                <i label class="dlt-icon-document" style="font-size: 24px; color:rgb(23, 118, 191); vertical-align: sub;"></i>
                <span>D1_P1_P1_mychild3</span>
            </sag-tree-child>
            <sag-tree-child children id="D1-P1-Child1">
                <i label class="dlt-icon-document" style="font-size: 24px; color:rgb(23, 118, 191); vertical-align: sub;"></i>
                <span>D1_P1_P1_mychild4</span>
            </sag-tree-child>
        </sag-tree-parent>
    </sag-tree-parent>
</sag-tree>

import { Component, OnInit } from '@angular/core';
import { size } from '@softwareag/dln/shared';

@Component({
  selector: 'app-tree-demo',
  templateUrl: './tree-demo.component.html',
  styleUrls: ['./tree-demo.component.scss']
})
export class TreeDemoComponent implements OnInit {

  size = size;
  constructor() { }

  ngOnInit(): void {
  }
  demoParentExpandClick(val: boolean ,msg) {
    alert(String(val) + msg);
  }
  demoClick(msg) {
    alert(msg);
  }
}

Properties

Name	Type	Default	Description
id	string	''	Specifies the HTML id
itemStyle	string	""	Specifies additional style to be applied

License of this package

Apache-2.0

Copyrights and Licenses of dependencies

See file in package Third-Party-Terms-of-Dependencies.pdf

@softwareag/dln

DLN (Delite for Angular) - Angular v13 Delite

Table of Contents

Pre-requisite

Installation

Browser compatibility

Available Components / Widgets

Accordion

Import

Getting Started

Properties

sag-accordion-tab

sag-accordion-tablist

Events

Button

Import

Component

Getting Started

Properties

Events

Checkbox

Import

Getting Started

Properties

Dialog

Import

Getting Started

Properties

Events

Extra Tips

Directive Disable Controller

Import

Getting Started

Properties

Directive Disable Element

Import

Getting Started

Properties

Dropdown

Import

Getting Started

Properties

sag-dropdown

sag-dropdown-multi-select

Inline Message

Import

Getting Started

Properties

Events

Extra Tips

Leftnav

Import

Getting Started

Properties

sag-leftnav

sag-leftnav-item

sag-leftnav-expan-item

Message Dialog

Import

Getting Started

Properties

Events

Number Input

Import

Getting Started

Properties

Overflow Menu

Import

Getting Started

Properties

Events

Pagination

Import

Getting Started

Properties

Events

Radio Button

Import

Getting Started

Properties

Weekly Downloads