@softwareag/dln v2.0.0

DLN (Delite for Angular) - Angular v13 Delite

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

Table of Contents

• 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:

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

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

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

sag-accordion-tablist

Events

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

Events

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

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

Events

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

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

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

sag-dropdown-multi-select

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

Events

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

sag-leftnav-item

sag-leftnav-expan-item

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

Events

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

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

Events

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

Events

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

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

Events

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

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

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

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

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

sag-topnav-item

All itemType