qms-angular 1.0.69 → 1.0.70

package/fesm2015/qms-angular.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, ChangeDetectionStrategy, Input, Output, ViewEncapsulation, Inject, ElementRef, ViewChild, HostListener, Directive, ContentChild, Optional, Renderer2, InjectionToken, forwardRef, ChangeDetectorRef, ContentChildren, Attribute, NgModule, CUSTOM_ELEMENTS_SCHEMA, Pipe, NO_ERRORS_SCHEMA, ViewChildren, Injector } from '@angular/core';
+import { Injectable, Component, EventEmitter, ChangeDetectionStrategy, Input, Output, ViewEncapsulation, Inject, ElementRef, ViewChild, HostListener, Directive, ContentChild, Optional, Renderer2, InjectionToken, forwardRef, ChangeDetectorRef, ContentChildren, Attribute, NgModule, CUSTOM_ELEMENTS_SCHEMA, Pipe, ViewContainerRef, HostBinding, NO_ERRORS_SCHEMA, ViewChildren, Injector } from '@angular/core';
 import { BehaviorSubject, ReplaySubject, Subject, forkJoin } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { FormControl, FormBuilder, NgControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, NG_VALIDATORS, FormGroup, Validators } from '@angular/forms';
@@ -46,6 +46,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 class QmsAngularService {
     constructor() { }
@@ -1833,73 +1834,6 @@ QMSDrawerDirective.ctorParameters = () => [
     { type: ElementRef }
 ];
 
-class QMSTabGroupAdvancedDirective {
-    constructor(ele) {
-        this.ele = ele;
-    }
-    ngOnInit() {
-        if (this.ele) {
-            this.ele.nativeElement.classList.add('qms-tab-group-advanced');
-            if (this.color) {
-                this.ele.nativeElement.classList.add(this.color);
-            }
-            if (this.type === 'fixed') {
-                this.ele.nativeElement.classList.add('qms-tab-group-advanced-fixed');
-            }
-        }
-    }
-}
-QMSTabGroupAdvancedDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[qms-tab-group-advanced]',
-            },] }
-];
-QMSTabGroupAdvancedDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-QMSTabGroupAdvancedDirective.propDecorators = {
-    color: [{ type: Input }],
-    type: [{ type: Input }]
-};
-
-class QMSTabGroupDirective {
-    constructor(ele) {
-        this.ele = ele;
-    }
-    ngOnInit() {
-        if (this.ele) {
-            this.ele.nativeElement.classList.add('qms-tab-group');
-        }
-    }
-}
-QMSTabGroupDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[qms-tab-group]',
-            },] }
-];
-QMSTabGroupDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
-class QMSTabLabelDirective {
-    constructor(ele) {
-        this.ele = ele;
-    }
-    ngOnInit() {
-        if (this.ele) {
-            this.ele.nativeElement.classList.add('qms-tab-label');
-        }
-    }
-}
-QMSTabLabelDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[qms-tab-label]',
-            },] }
-];
-QMSTabLabelDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
 class QMSTextBlockLine {
     constructor(elRef, renderer) {
         this.elRef = elRef;
@@ -2812,6 +2746,206 @@ QMSAppBar.propDecorators = {
     mode: [{ type: Input, args: ['mode',] }]
 };
 
+class QMSTableExpandDirective {
+    constructor(_el, renderer) {
+        this._el = _el;
+        this.renderer = renderer;
+        this._el.nativeElement.classList.add('qms-table');
+    }
+    ngAfterViewChecked() {
+        let matRows = this._el.nativeElement.querySelectorAll('mat-row');
+        for (const [key, value] of Object.entries(matRows)) {
+            this.renderer.addClass(value, 'qms-row');
+        }
+    }
+}
+QMSTableExpandDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-table-expand]',
+                host: { 'class': 'qms-table-expand' }
+            },] }
+];
+QMSTableExpandDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 }
+];
+class QMSTableDirective {
+    constructor(_el, renderer) {
+        this._el = _el;
+        this.renderer = renderer;
+    }
+    ngAfterViewChecked() {
+        let matRows = this._el.nativeElement.querySelectorAll('mat-row');
+        for (const [key, value] of Object.entries(matRows)) {
+            this.renderer.addClass(value, 'qms-row');
+        }
+    }
+}
+QMSTableDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-table]',
+                host: { 'class': 'qms-table' }
+            },] }
+];
+QMSTableDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 }
+];
+class QMSTableChildrenDirective {
+    constructor(_el, renderer) {
+        this._el = _el;
+        this.renderer = renderer;
+    }
+    ngAfterViewChecked() {
+        let matRows = this._el.nativeElement.querySelectorAll('mat-row');
+        for (const [key, value] of Object.entries(matRows)) {
+            this.renderer.addClass(value, 'qms-row-children');
+            this.renderer.addClass(value, 'qms-row-group');
+        }
+    }
+}
+QMSTableChildrenDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-table-children]',
+                host: { 'class': 'qms-table-children' }
+            },] }
+];
+QMSTableChildrenDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 }
+];
+class QMSRowExpandDirective {
+    constructor() { }
+}
+QMSRowExpandDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-row-expand]',
+                host: { 'class': 'qms-row-expand' }
+            },] }
+];
+QMSRowExpandDirective.ctorParameters = () => [];
+class QMSRowDetailDirective {
+    constructor() { }
+}
+QMSRowDetailDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-row-detail]',
+                host: { 'class': 'qms-row-detail' }
+            },] }
+];
+QMSRowDetailDirective.ctorParameters = () => [];
+class QMSCollapseGroupDirective {
+    constructor() {
+    }
+}
+QMSCollapseGroupDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-collapse-group]',
+                host: { 'class': 'qms-collapse-group' }
+            },] }
+];
+QMSCollapseGroupDirective.ctorParameters = () => [];
+class CdkDetailRowDirective {
+    constructor(vcRef, _el) {
+        this.vcRef = vcRef;
+        this._el = _el;
+        this.focusClass = 'focus-grid-style';
+        this.onRowExpandEvent = new EventEmitter();
+    }
+    get expended() {
+        return this.opened;
+    }
+    set cdkDetailRow(value) {
+        if (value !== this.row) {
+            this.row = value;
+        }
+    }
+    set template(value) {
+        if (value !== this.tRef) {
+            this.tRef = value;
+        }
+    }
+    set otherTemplate(value) {
+        if (value !== this.othertRef) {
+            this.othertRef = value;
+        }
+    }
+    ngOnChanges(changes) {
+        this.vcRef.clear();
+        if (this.othertRef && this.row) {
+            this.vcRef.createEmbeddedView(this.othertRef, { $implicit: this.row });
+        }
+    }
+    ngOnInit() {
+        var _a, _b;
+        this.vcRef.clear();
+        if (this.othertRef && this.row) {
+            this.vcRef.createEmbeddedView(this.othertRef, { $implicit: this.row });
+            if (((_a = this.row) === null || _a === void 0 ? void 0 : _a.children) && ((_b = this.row) === null || _b === void 0 ? void 0 : _b.children.length) > 0) {
+                this._el.nativeElement.classList.add('qms-row-group');
+            }
+        }
+    }
+    onClick() {
+        this.toggle();
+    }
+    onClickItem(event) {
+        if (event && event.parentNode && event.parentNode.classList && !event.parentNode.classList.contains(this.focusClass)) {
+            const elements = document.getElementsByClassName(this.focusClass);
+            while (elements.length > 0) {
+                elements[0].classList.remove(this.focusClass);
+            }
+        }
+    }
+    onKeydown(event) {
+        const elements = document.getElementsByClassName(this.focusClass);
+        if (event && elements && elements.length > 0) {
+            //To do
+        }
+    }
+    toggle() {
+        if (this.opened) {
+            this.vcRef.clear();
+            if (this.othertRef) {
+                this.vcRef.createEmbeddedView(this.othertRef, { $implicit: this.row });
+            }
+        }
+        else {
+            this.render();
+        }
+        this.opened = !this.opened;
+        this.onRowExpandEvent.emit(this.opened);
+    }
+    render() {
+        this.vcRef.clear();
+        if (this.tRef && this.row) {
+            this.vcRef.createEmbeddedView(this.tRef, { $implicit: this.row });
+            if (this.othertRef) {
+                this.vcRef.createEmbeddedView(this.othertRef, { $implicit: this.row });
+            }
+        }
+    }
+}
+CdkDetailRowDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[cdkDetailRow]'
+            },] }
+];
+CdkDetailRowDirective.ctorParameters = () => [
+    { type: ViewContainerRef },
+    { type: ElementRef }
+];
+CdkDetailRowDirective.propDecorators = {
+    onRowExpandEvent: [{ type: Output }],
+    expended: [{ type: HostBinding, args: ['class.expanded',] }],
+    cdkDetailRow: [{ type: Input }],
+    template: [{ type: Input, args: ['cdkDetailRowTpl',] }],
+    otherTemplate: [{ type: Input, args: ['cdkotherTemplate',] }],
+    onClick: [{ type: HostListener, args: ['click',] }],
+    onClickItem: [{ type: HostListener, args: ['document:click', ['$event.target'],] }],
+    onKeydown: [{ type: HostListener, args: ['document:keydown', ['$event.target'],] }]
+};
+
 const ɵ0$2 = { appearance: 'fill' }, ɵ1 = { color: 'none' };
 class QmsAngularModule {
 }
@@ -2854,9 +2988,13 @@ QmsAngularModule.decorators = [
                     QMSDrawerContentDirective,
                     QMSDrawerHeaderActionDirective,
                     QMSToolTipRendererDirective,
-                    QMSTabLabelDirective,
-                    QMSTabGroupDirective,
-                    QMSTabGroupAdvancedDirective,
+                    QMSTableExpandDirective,
+                    QMSTableDirective,
+                    QMSRowDetailDirective,
+                    QMSTableChildrenDirective,
+                    QMSRowExpandDirective,
+                    CdkDetailRowDirective,
+                    QMSCollapseGroupDirective,
                     DateFormatPipe,
                     QMSChipInputDirective,
                     QMSChipInputSelectFieldDirective,
@@ -2911,9 +3049,6 @@ QmsAngularModule.decorators = [
                     QMSDrawerContentDirective,
                     QMSDrawerHeaderActionDirective,
                     QMSToolTipRendererDirective,
-                    QMSTabLabelDirective,
-                    QMSTabGroupDirective,
-                    QMSTabGroupAdvancedDirective,
                     DateFormatPipe,
                     QMSChipInputDirective,
                     QMSChipInputSelectFieldDirective,
@@ -2923,7 +3058,14 @@ QmsAngularModule.decorators = [
                     ScrollToSelectedDirective,
                     QMSTooltipImageDirective,
                     SelectDialog,
-                    QMSAppBar
+                    QMSAppBar,
+                    QMSTableExpandDirective,
+                    QMSTableDirective,
+                    QMSTableChildrenDirective,
+                    QMSRowDetailDirective,
+                    QMSRowExpandDirective,
+                    CdkDetailRowDirective,
+                    QMSCollapseGroupDirective
                 ],
                 providers: [
                     { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: ɵ0$2 },
@@ -4250,6 +4392,9 @@ class TreeComponent {
     }
     checkDisabledList() {
         // Disable List
+        for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
+            this.treeControl.dataNodes[i].disabled = false;
+        }
         if (this.disabledList.length) {
             for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
                 this.disabledList.forEach(x => {
@@ -4746,9 +4891,9 @@ class TreeComponent {
 TreeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-tree',
-                template: "<mat-tree\r\n  [dataSource]=\"dataSource\"\r\n  [treeControl]=\"treeControl\"\r\n  class=\"tree__container\"\r\n>\r\n  <mat-tree-node\r\n    class=\"tree-branch\"\r\n    *matTreeNodeDef=\"let node\"\r\n    matTreeNodeToggle\r\n    matTreeNodePadding\r\n  >\r\n    <!-- form thu 1 - child -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    >\r\n    </mat-checkbox>\r\n\r\n    <!-- form thu 2 -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"ml-10 checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <div\r\n      class=\"expand-node\"\r\n      *ngIf=\"node.name && !onlyFolder\"\r\n      [class.bgSelected]=\"\r\n        treeConfig.selectOne &&\r\n        idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n      \"\r\n      (click)=\"selectNode(node)\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <div class=\"expand-node__text\">\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.name && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n        >\r\n          {{ itemIcon }}\r\n        </mat-icon>\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.svg && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"itemIconSvg\"\r\n        >\r\n        </mat-icon>\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.path && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon\"\r\n          [src]=\"itemIconPath\"\r\n        />\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.base64 && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon image-base64\"\r\n          [src]=\"getImagePath()\"\r\n        />\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.none && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getItemIcon(node)\"\r\n        ></mat-icon>\r\n        <span\r\n          class=\"text-node\"\r\n          [class.select-one-checked]=\"\r\n            treeConfig.selectOne &&\r\n            idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n          \"\r\n          >{{ node.name }}</span\r\n        >\r\n      </div>\r\n      <mat-icon\r\n        class=\"select-one-checked\"\r\n        *ngIf=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >done</mat-icon\r\n      >\r\n    </div>\r\n  </mat-tree-node>\r\n\r\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n    <!-- form thu 1 - parent -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild\"\r\n      [checked]=\"descendantsAllSelected(node)\"\r\n      [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <button\r\n      class=\"button-boder\"\r\n      mat-icon-button\r\n      matTreeNodeToggle\r\n      [disableRipple]=\"!node.hasChild\"\r\n      [attr.aria-label]=\"'toggle ' + node.filename\"\r\n      *ngIf=\"node.name\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"openIcon && closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngStyle]=\"{\r\n          color: treeControl.isExpanded(node) ? openIconColor : closeIconColor\r\n        }\"\r\n        >{{ getNodeIcon(node) }}</mat-icon\r\n      >\r\n      <mat-icon\r\n        *ngIf=\"!openIcon || !closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngClass]=\"{\r\n          'open-icon': treeControl.isExpanded(node),\r\n          'not-department-icon': moduleId !== dataType.document\r\n        }\"\r\n        [svgIcon]=\"getNodeIcon(node)\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <span\r\n      *ngIf=\"expandOnTitleClick\"\r\n      matTreeNodeToggle\r\n      class=\"text-node-parent\"\r\n      style=\"cursor: pointer\"\r\n      (click)=\"onExpandNode(node)\"\r\n      [ngStyle]=\"{\r\n        color: treeControl.isExpanded(node) ? openIconColor : '#000000'\r\n      }\"\r\n    >\r\n      <span>{{ node.name }}</span>\r\n    </span>\r\n    <span\r\n      *ngIf=\"!expandOnTitleClick\"\r\n      class=\"text-node-parent\"\r\n      (click)=\"selectFolderNode(node)\"\r\n      style=\"cursor: pointer\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <span\r\n        [class.select-one-checked]=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >{{ node.name }}</span\r\n      >\r\n      <mat-icon\r\n        class=\"select-one-checked\"\r\n        *ngIf=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >done</mat-icon\r\n      >\r\n    </span>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n",
+                template: "<mat-tree\r\n  [dataSource]=\"dataSource\"\r\n  [treeControl]=\"treeControl\"\r\n  class=\"tree__container\"\r\n>\r\n  <mat-tree-node\r\n    class=\"tree-branch\"\r\n    *matTreeNodeDef=\"let node\"\r\n    matTreeNodeToggle\r\n    matTreeNodePadding\r\n  >\r\n    <!-- form thu 1 - child -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    >\r\n    </mat-checkbox>\r\n\r\n    <!-- form thu 2 -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"ml-10 checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <div\r\n      class=\"expand-node\"\r\n      *ngIf=\"node.name && !onlyFolder\"\r\n      [class.bgSelected]=\"\r\n        treeConfig.selectOne &&\r\n        idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n      \"\r\n      (click)=\"selectNode(node)\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <div class=\"expand-node__text\">\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.name && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n        >\r\n          {{ itemIcon }}\r\n        </mat-icon>\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.svg\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"itemIconSvg\"\r\n        >\r\n        </mat-icon>\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.path\"\r\n          class=\"mat-icon\"\r\n          [src]=\"itemIconPath\"\r\n        />\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.base64\"\r\n          class=\"mat-icon image-base64\"\r\n          [src]=\"getImagePath()\"\r\n        />\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.none\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getItemIcon(node)\"\r\n        ></mat-icon>\r\n        <span\r\n          class=\"text-node\"\r\n          [class.select-one-checked]=\"\r\n            treeConfig.selectOne &&\r\n            idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n          \"\r\n          >{{ node.name }}</span\r\n        >\r\n      </div>\r\n      <mat-icon\r\n        class=\"select-one-checked\"\r\n        *ngIf=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >done</mat-icon\r\n      >\r\n    </div>\r\n  </mat-tree-node>\r\n\r\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n    <!-- form thu 1 - parent -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild\"\r\n      [checked]=\"descendantsAllSelected(node)\"\r\n      [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <button\r\n      class=\"button-boder\"\r\n      mat-icon-button\r\n      matTreeNodeToggle\r\n      [disableRipple]=\"!node.hasChild\"\r\n      [attr.aria-label]=\"'toggle ' + node.filename\"\r\n      *ngIf=\"node.name\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"openIcon && closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngStyle]=\"{\r\n          color: treeControl.isExpanded(node) ? openIconColor : closeIconColor\r\n        }\"\r\n        >{{ getNodeIcon(node) }}</mat-icon\r\n      >\r\n      <mat-icon\r\n        *ngIf=\"!openIcon || !closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngClass]=\"{\r\n          'open-icon': treeControl.isExpanded(node),\r\n          'not-department-icon': moduleId !== dataType.document\r\n        }\"\r\n        [svgIcon]=\"getNodeIcon(node)\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <span\r\n      *ngIf=\"expandOnTitleClick\"\r\n      matTreeNodeToggle\r\n      class=\"text-node-parent\"\r\n      style=\"cursor: pointer\"\r\n      (click)=\"onExpandNode(node)\"\r\n      [ngStyle]=\"{\r\n        color: treeControl.isExpanded(node) ? openIconColor : '#000000'\r\n      }\"\r\n    >\r\n      <span>{{ node.name }}</span>\r\n    </span>\r\n    <span\r\n      *ngIf=\"!expandOnTitleClick\"\r\n      class=\"text-node-parent\"\r\n      (click)=\"selectFolderNode(node)\"\r\n      style=\"cursor: pointer\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <span\r\n        [class.select-one-checked]=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >{{ node.name }}</span\r\n      >\r\n      <mat-icon\r\n        class=\"select-one-checked\"\r\n        *ngIf=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >done</mat-icon\r\n      >\r\n    </span>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n",
                 encapsulation: ViewEncapsulation.None,
-                styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.tree__container{font-family:Open Sans;font-style:normal;font-weight:400;font-size:.875rem;line-height:19px;color:#323232}.tree__container .mat-tree-node{color:#000;min-height:0}.tree__container .mat-tree-node .mat-checkbox.qms-group-options{padding:0}.tree__container .mat-tree-node .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.tree__container .button{margin-left:6px}.tree__container .button:focus,.tree__container .button:hover{background-color:#009ef2;border-radius:2px;width:auto}.tree__container .button-boder:focus,.tree__container .button:focus{outline:0}.tree__container .button-folder-boder:focus{outline:0}.tree__container .button-folder-boder:focus,.tree__container .button-folder-boder:hover{background-color:#009ef2;border-radius:2px;width:auto}.tree__container .expand-node{margin-left:8px;min-height:32px;justify-content:space-between;width:100%}.tree__container .expand-node,.tree__container .expand-node .expand-node__text{display:flex;align-items:center}.tree__container .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.tree__container .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.tree__container .expand-node.bgSelected .select-one-checked{color:#1954a9}.tree__container .text-node-parent{width:100%;display:flex;align-items:center;justify-content:space-between;margin-left:10px;cursor:pointer}.tree__container .text-node-parent.active-item{color:#1954a9!important}.tree__container .text-node-parent .select-one-checked{color:#1954a9}.tree__container .mr-11{margin-right:11px}.tree__container .ml-10{margin-left:10px}.tree__container .tree-branch:hover{background-color:#e5eefb}.tree__container .image-base64{width:20px;height:20px}.tree__container .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}::ng-deep .mat-tree .mat-checkbox.qms-group-options{padding:0}::ng-deep .mat-tree .mat-checkbox.qms-group-options.mat-checkbox-checked{background-color:transparent}::ng-deep .mat-tree .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:0}svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.open-icon.not-department-icon svg path,.open-icon svg path:first-child{fill:#1954a9}"]
+                styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.tree__container{font-family:Open Sans;font-style:normal;font-weight:400;font-size:.875rem;line-height:19px;color:#323232}.tree__container .mat-tree-node{color:#000;min-height:0}.tree__container .mat-tree-node .mat-checkbox.qms-group-options{padding:0}.tree__container .mat-tree-node .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.tree__container .button{margin-left:6px}.tree__container .button:focus,.tree__container .button:hover{background-color:#009ef2;border-radius:2px;width:auto}.tree__container .button-boder:focus,.tree__container .button:focus{outline:0}.tree__container .button-folder-boder:focus{outline:0}.tree__container .button-folder-boder:focus,.tree__container .button-folder-boder:hover{background-color:#009ef2;border-radius:2px;width:auto}.tree__container .expand-node{margin-left:8px;min-height:32px;justify-content:space-between;width:100%}.tree__container .expand-node,.tree__container .expand-node .expand-node__text{display:flex;align-items:center}.tree__container .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.tree__container .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.tree__container .expand-node.bgSelected .select-one-checked{color:#1954a9}.tree__container .text-node-parent{width:100%;display:flex;align-items:center;justify-content:space-between;margin-left:10px;cursor:pointer}.tree__container .text-node-parent.active-item{color:#1954a9!important}.tree__container .text-node-parent .select-one-checked{color:#1954a9}.tree__container .mr-11{margin-right:11px}.tree__container .ml-10{margin-left:10px}.tree__container .tree-branch:hover{background-color:#e5eefb}.tree__container .image-base64{width:20px;height:20px}.tree__container .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}::ng-deep .mat-tree .mat-checkbox.qms-group-options{padding:0}::ng-deep .mat-tree .mat-checkbox.qms-group-options.mat-checkbox-checked{background-color:transparent}::ng-deep .mat-tree .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:0}svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.open-icon.not-department-icon svg path,.open-icon svg path:first-child{fill:#1954a9}.mat-checkbox.mat-checkbox-disabled.qms-group-options.mat-checkbox-checked .mat-checkbox-background{background-color:#e0e0e0!important}"]
             },] }
 ];
 TreeComponent.ctorParameters = () => [
@@ -6158,7 +6303,7 @@ class RelatedPopupComponent {
 RelatedPopupComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-related-popup',
-                template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n    (optionSelected)=\"selectRelated($event.option.value)\"\r\n    [displayWith]=\"displayWhenSelectRelatedOption\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      [class.related-viewport]=\"isInputValue\"\r\n    >\r\n      <ng-container *ngFor=\"let type of searchOrder\">\r\n        <div\r\n          class=\"search__module-result\"\r\n          *ngIf=\"canShowSearchOption(type.value)\"\r\n        >\r\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n          <mat-option\r\n            class=\"search__option\"\r\n            *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n            [value]=\"option\"\r\n            [disabled]=\"option.disabled\"\r\n          >\r\n            <qms-list-item type=\"image-square\">\r\n              <mat-icon\r\n                leading-icon\r\n                type=\"image-square\"\r\n                [svgIcon]=\"getNodeIcon(option)\"\r\n              ></mat-icon>\r\n              <div qms-list-header>\r\n                <div\r\n                  qms-line\r\n                  type=\"caption\"\r\n                  qms-tool-tip=\"{{\r\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                  }}\"\r\n                  mode=\"dark\"\r\n                  *ngIf=\"getParentName(option)\"\r\n                >\r\n                  <span #searchItemResult class=\"search__result__parent-name\">\r\n                    {{ option.parentName }}\r\n                  </span>\r\n                </div>\r\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                  {{ option.itemName }}\r\n                </div>\r\n                <div\r\n                  class=\"caption\"\r\n                  *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n                >\r\n                  <qms-breadcrumb\r\n                    class=\"breadcrumb-containe\"\r\n                    type=\"table\"\r\n                    numDisplayItem=\"1\"\r\n                    [nodes]=\"option.breadcumbs\"\r\n                  >\r\n                  </qms-breadcrumb>\r\n                </div>\r\n              </div>\r\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n                <span class=\"material-icons-outlined search__description-icon\">\r\n                  local_offer\r\n                </span>\r\n                {{ getItemId(option) }}\r\n              </div>\r\n            </qms-list-item>\r\n          </mat-option>\r\n        </div>\r\n      </ng-container>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar qmslib_related_popup_content\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length,\r\n        'col-6': splitView,\r\n        'col-12': !splitView\r\n      }\"\r\n    >\r\n      <mat-expansion-panel\r\n        hideToggle\r\n        id=\"qmslib_related_popup_common_001\"\r\n        [expanded]=\"isCommonExpanded\"\r\n        (opened)=\"isCommonExpanded = true\"\r\n        (closed)=\"isCommonExpanded = false\"\r\n        class=\"panel-tree\"\r\n      >\r\n        <mat-expansion-panel-header class=\"padding-5\">\r\n          <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n            {{ LANG.PROCESSES | uppercase }}\r\n          </mat-panel-title>\r\n          <mat-panel-title *ngIf=\"moduleId === module.deviation\">\r\n            {{ LANG.DEVIATION | uppercase }}\r\n          </mat-panel-title>\r\n          <mat-panel-title *ngIf=\"moduleId === module.checklist\">\r\n            {{ LANG.CHECKLIST | uppercase }}\r\n          </mat-panel-title>\r\n          <mat-panel-title *ngIf=\"moduleId === module.risk\">\r\n            {{ LANG.ASSESSMENT | uppercase }}\r\n          </mat-panel-title>\r\n          <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n            <mat-icon>\r\n              {{\r\n                isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n              }}\r\n            </mat-icon>\r\n          </button>\r\n        </mat-expansion-panel-header>\r\n        <div id=\"qmslib_related_popup_common_002\">\r\n          <qms-tree\r\n            [treeData]=\"treeData1\"\r\n            [treeConfig]=\"treeConfig1\"\r\n            [selectedData]=\"selectedData\"\r\n            [selectedRiskData]=\"selectedRiskData\"\r\n            [disabledList]=\"disabledList\"\r\n            (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n            (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n            (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n            [expandOnTitleClick]=\"!splitView\"\r\n            [parentNodeOnClick]=\"parentNodeSelected\"\r\n            (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\r\n\r\n      <ng-container *ngIf=\"treeData2.length > 0\">\r\n        <div\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          class=\"line__divider\"\r\n        ></div>\r\n\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          id=\"qmslib_related_popup_document_001\"\r\n          [expanded]=\"isDocumentExpanded\"\r\n          (opened)=\"isDocumentExpanded = true\"\r\n          (closed)=\"isDocumentExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title>\r\n              {{ LANG.DOCUMENTS | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isDocumentExpanded\r\n                    ? \"keyboard_arrow_up\"\r\n                    : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_document_002\">\r\n            <qms-tree\r\n              [treeData]=\"treeData2\"\r\n              [treeConfig]=\"treeConfig2\"\r\n              [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\"\r\n              (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n            ></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n    </div>\r\n    <div\r\n      *ngIf=\"splitView\"\r\n      class=\"\r\n        qms-scrollbar\r\n        qmslib-related-popup-splitview qmslib_related_popup_content\r\n        col-6\r\n      \"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n        {{ splitViewTitle }}\r\n      </div>\r\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n        <mat-checkbox\r\n          qms-group-options\r\n          [disabled]=\"node.disabled\"\r\n          color=\"default\"\r\n          [checked]=\"isNodeSelected(node)\"\r\n          (change)=\"toggleSelectItem(node)\"\r\n        ></mat-checkbox>\r\n        <mat-icon\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getNodeIcon(node)\"\r\n        ></mat-icon>\r\n        <span class=\"text-node\">{{ node.itemName }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n      <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        qms-tool-tip=\"{{\r\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n        }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)\r\n        }}</span>\r\n        <mat-icon\r\n          *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n          (click)=\"removeCheckedNodeList(item)\"\r\n          >cancel</mat-icon\r\n        >\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button\r\n      *ngIf=\"!checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 7px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 0px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button\r\n      qms-btn-text\r\n      [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
+                template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n    (optionSelected)=\"selectRelated($event.option.value)\"\r\n    [displayWith]=\"displayWhenSelectRelatedOption\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      [class.related-viewport]=\"isInputValue\"\r\n    >\r\n      <ng-container *ngFor=\"let type of searchOrder\">\r\n        <div\r\n          class=\"search__module-result\"\r\n          *ngIf=\"canShowSearchOption(type.value)\"\r\n        >\r\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n          <mat-option\r\n            class=\"search__option\"\r\n            *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n            [value]=\"option\"\r\n            [disabled]=\"option.disabled\"\r\n          >\r\n            <qms-list-item type=\"image-square\">\r\n              <mat-icon\r\n                leading-icon\r\n                type=\"image-square\"\r\n                [svgIcon]=\"getNodeIcon(option)\"\r\n              ></mat-icon>\r\n              <div qms-list-header>\r\n                <div\r\n                  qms-line\r\n                  type=\"caption\"\r\n                  qms-tool-tip=\"{{\r\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                  }}\"\r\n                  mode=\"dark\"\r\n                  *ngIf=\"getParentName(option)\"\r\n                >\r\n                  <span #searchItemResult class=\"search__result__parent-name\">\r\n                    {{ option.parentName }}\r\n                  </span>\r\n                </div>\r\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                  {{ option.itemName }}\r\n                </div>\r\n                <div\r\n                  class=\"caption\"\r\n                  *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n                >\r\n                  <qms-breadcrumb\r\n                    class=\"breadcrumb-containe\"\r\n                    type=\"table\"\r\n                    numDisplayItem=\"1\"\r\n                    [nodes]=\"option.breadcumbs\"\r\n                  >\r\n                  </qms-breadcrumb>\r\n                </div>\r\n              </div>\r\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n                <span class=\"material-icons-outlined search__description-icon\">\r\n                  local_offer\r\n                </span>\r\n                {{ getItemId(option) }}\r\n              </div>\r\n            </qms-list-item>\r\n          </mat-option>\r\n        </div>\r\n      </ng-container>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar qmslib_related_popup_content\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length,\r\n        'col-6': splitView,\r\n        'col-12': !splitView\r\n      }\"\r\n    >\r\n      <ng-container *ngIf=\"treeData1.length > 0\">\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          id=\"qmslib_related_popup_common_001\"\r\n          [expanded]=\"isCommonExpanded\"\r\n          (opened)=\"isCommonExpanded = true\"\r\n          (closed)=\"isCommonExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n              {{ LANG.PROCESSES | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.deviation\">\r\n              {{ LANG.DEVIATION | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.checklist\">\r\n              {{ LANG.CHECKLIST | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.risk\">\r\n              {{ LANG.ASSESSMENT | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_common_002\">\r\n            <qms-tree\r\n              [treeData]=\"treeData1\"\r\n              [treeConfig]=\"treeConfig1\"\r\n              [selectedData]=\"selectedData\"\r\n              [selectedRiskData]=\"selectedRiskData\"\r\n              [disabledList]=\"disabledList\"\r\n              (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n            ></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"treeData2.length > 0\">\r\n        <div\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          class=\"line__divider\"\r\n        ></div>\r\n\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          id=\"qmslib_related_popup_document_001\"\r\n          [expanded]=\"isDocumentExpanded\"\r\n          (opened)=\"isDocumentExpanded = true\"\r\n          (closed)=\"isDocumentExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title>\r\n              {{ LANG.DOCUMENTS | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isDocumentExpanded\r\n                    ? \"keyboard_arrow_up\"\r\n                    : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_document_002\">\r\n            <qms-tree\r\n              [treeData]=\"treeData2\"\r\n              [treeConfig]=\"treeConfig2\"\r\n              [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\"\r\n              (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n            ></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n    </div>\r\n    <div\r\n      *ngIf=\"splitView\"\r\n      class=\"\r\n        qms-scrollbar\r\n        qmslib-related-popup-splitview qmslib_related_popup_content\r\n        col-6\r\n      \"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n        {{ splitViewTitle }}\r\n      </div>\r\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n        <mat-checkbox\r\n          qms-group-options\r\n          [disabled]=\"node.disabled\"\r\n          color=\"default\"\r\n          [checked]=\"isNodeSelected(node)\"\r\n          (change)=\"toggleSelectItem(node)\"\r\n        ></mat-checkbox>\r\n        <mat-icon\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getNodeIcon(node)\"\r\n        ></mat-icon>\r\n        <span class=\"text-node\">{{ node.itemName }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n      <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        qms-tool-tip=\"{{\r\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n        }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)\r\n        }}</span>\r\n        <mat-icon\r\n          *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n          (click)=\"removeCheckedNodeList(item)\"\r\n          >cancel</mat-icon\r\n        >\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button\r\n      *ngIf=\"!checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 7px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 0px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button\r\n      qms-btn-text\r\n      [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
                 encapsulation: ViewEncapsulation.None,
                 styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-scrollbar.none-scroll-bg::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:#eee}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:#e5e5e5;max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{height:30px;font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .breadcrumb-containe .qms-breadcrumb-item-text,cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .breadcrumb-containe .qms-breadcrumb-item .mat-icon,cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:300px}"]
             },] }
@@ -8364,7 +8509,7 @@ function getCKEditorConfiguration(itemToolbar) {
         },
         language: 'en',
         table: {
-            contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
+            contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
         },
         image: {
             styles: ['alignLeft', 'alignCenter', 'alignRight'],
@@ -15649,7 +15794,7 @@ QmsAppBarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-qms-app-bar',
                 template: "<div class=\"qms-app-bar-container\">\r\n    <mat-toolbar class=\"bar-container\" *ngIf=\"!isNomalType\">\r\n        <span class=\"w-100\">\r\n            <span class=\"col-4 d-inline-flex align-items-lg-center\">\r\n                <div *ngIf=\"hideMenuDropdown\" class=\"border align-self-center\">\r\n                    <div *ngIf=\"logoSvgPath\" class=\"logo-container\">\r\n                        <img [src]=\"logoSvgPath\" alt=\"\" />\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"!hideMenuDropdown\">\r\n                    <button #menu class=\"collapse-icon\" mat-button>\r\n                        <mat-icon class=\"mat-icon-rtl-mirror\" (click)=\"onMenuClicked()\">\r\n                            menu\r\n                        </mat-icon>\r\n                    </button>\r\n                    <img [src]=\"logoSvgPath\" alt=\"\" />\r\n                </div>\r\n                <div class=\"pr-8\"></div>\r\n                <span class=\"content-title\">{{title}}</span>\r\n                <div class=\"spacer\"></div>\r\n            </span>\r\n            <span class=\"align-items-sm-center col-4 d-inline-flex justify-content-center\">\r\n                <div *ngIf=\"imgSvgPath\" class=\"img-container\" [class.bg-transparent]=\"isImgSvgTransparent\">\r\n                    <img [src]=\"imgSvgPath\" alt=\"\" />\r\n                </div>\r\n            </span>\r\n            <span class=\"col-4 d-inline-flex justify-content-end right-icon\">\r\n                <button (click)=\"onRightIconClicked(item.icon)\" *ngFor=\"let item of rightIcons\" class=\"menu-item-icon\"\r\n                    mat-button>\r\n                    <mat-icon *ngIf=\"item.icon == 'notifications_none'\" matBadge=\"{{notifications}}\"\r\n                        matBadgeColor=\"warn\">\r\n                        {{item.icon}}\r\n                    </mat-icon>\r\n                    <mat-icon *ngIf=\"item.icon != 'notifications_none'\"\r\n                        class=\"material-icons-outlined mat-icon-rtl-mirror\">\r\n                        {{item.icon}}\r\n                    </mat-icon>\r\n                    <span class=\"mg-l-3\">{{item.tooltip}}</span>\r\n                </button>\r\n            </span>\r\n        </span>\r\n    </mat-toolbar>\r\n    <mat-toolbar class=\"bar-prv-container\" *ngIf=\"isNomalType\">\r\n        <button class=\"icon-title\" #menu qms-btn-text (click)=\"onClickLeftFirstIcon()\">\r\n            <mat-icon class=\"cusor-pointer\">\r\n                {{leftFirstIcon}}\r\n            </mat-icon>\r\n        </button>\r\n        <span class=\"content-title\">{{title}}</span>\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"right-content\">\r\n            <button qms-btn-text (click)=\"onCancel()\" class=\"cusor-pointer mr-10\" *ngIf=\"cancelTitle\">\r\n                {{cancelTitle}}\r\n            </button>\r\n            <button qms-btn [disabled]=\"disabledConfirmAction\" class=\"cusor-pointer\" (click)=\"onConfirm()\" *ngIf=\"confirmTitle\">\r\n                {{confirmTitle}}\r\n            </button>\r\n        </div>\r\n    </mat-toolbar>\r\n</div>",
-                styles: [".qms-app-bar-container{height:56px}.qms-app-bar-container .spacer{flex:1 1 auto}.qms-app-bar-container .mat-toolbar{background:#00324e;color:#fff;height:56px}.qms-app-bar-container .bar-prv-container{background:#e4e4e4}.qms-app-bar-container .bar-prv-container .close-icon,.qms-app-bar-container .bar-prv-container .title-icon{color:#323232}.qms-app-bar-container .bar-prv-container .right-content button{line-height:16px!important}.qms-app-bar-container .bar-prv-container .right-content .mr-10{margin-right:10px}.qms-app-bar-container .bar-prv-container button:first-child:hover{background-color:rgba(0,0,0,.08)}.qms-app-bar-container .bar-prv-container .icon-title{color:#666;padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%;margin-right:11px}.qms-app-bar-container .bar-prv-container .content-title{font-family:Raleway;font-size:18px;font-style:normal;font-weight:600;line-height:21px;letter-spacing:0;text-align:left;color:#323232}.qms-app-bar-container .bar-container{padding:0!important}.qms-app-bar-container .bar-container .logo-container{background:#fff;padding:12px;height:56px}.qms-app-bar-container .bar-container .img-container{height:40px;background:#fff;padding:2px}.qms-app-bar-container .bar-container .bg-transparent{background:transparent;height:40px;padding:2px}.qms-app-bar-container .bar-container .right-icon button:last-child{min-width:unset!important}.qms-app-bar-container .bar-container ::ng-deep .mat-badge-warn .mat-badge-content{background-color:#9e360f!important}.qms-app-bar-container .pr-8{padding-right:8px}"]
+                styles: [".qms-app-bar-container{height:56px}.qms-app-bar-container .spacer{flex:1 1 auto}.qms-app-bar-container .mat-toolbar{background:#00324e;color:#fff;height:56px}.qms-app-bar-container .bar-prv-container{background:#e4e4e4}.qms-app-bar-container .bar-prv-container .close-icon,.qms-app-bar-container .bar-prv-container .title-icon{color:#323232}.qms-app-bar-container .bar-prv-container .right-content button{line-height:16px!important}.qms-app-bar-container .bar-prv-container .right-content .mr-10{margin-right:10px}.qms-app-bar-container .bar-prv-container button:first-child:hover{background-color:rgba(0,0,0,.08)}.qms-app-bar-container .bar-prv-container .icon-title{color:#666;padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%;margin-right:11px}.qms-app-bar-container .bar-prv-container .content-title{font-family:Raleway;font-size:18px;font-style:normal;font-weight:600;line-height:21px;letter-spacing:0;text-align:left;color:#323232}.qms-app-bar-container .bar-container{padding:0!important}.qms-app-bar-container .bar-container .logo-container{background:#fff;padding:12px;height:56px}.qms-app-bar-container .bar-container .img-container{height:40px;background:#fff;padding:2px}.qms-app-bar-container .bar-container .bg-transparent{background:transparent;height:40px;padding:2px}.qms-app-bar-container .bar-container .right-icon button:last-child{min-width:unset!important}.qms-app-bar-container .bar-container ::ng-deep .mat-badge-warn .mat-badge-content{background-color:#9e360f!important}.qms-app-bar-container .bar-container .content-title{font-family:Raleway;font-size:18px;font-style:normal;font-weight:600;line-height:21px;letter-spacing:0;text-align:left;color:#fff}.qms-app-bar-container .pr-8{padding-right:8px}"]
             },] }
 ];
 QmsAppBarComponent.ctorParameters = () => [];
@@ -15696,16 +15841,6 @@ QmsAppBarModule.decorators = [
             },] }
 ];
 
-class IconModel {
-    constructor(icon, tooltip, cssClass = '', svg = false, isShow = true) {
-        this.icon = icon;
-        this.tooltip = tooltip;
-        this.svg = svg;
-        this.cssClass = cssClass;
-        this.isShow = isShow;
-    }
-}
-
 class ConfirmDialog {
     constructor() {
         this.title = '';
@@ -15752,6 +15887,93 @@ QMSTooltipModule.decorators = [
             },] }
 ];
 
+class QMSTabGroupAdvancedDirective {
+    constructor(ele) {
+        this.ele = ele;
+    }
+    ngOnInit() {
+        if (this.ele) {
+            this.ele.nativeElement.classList.add('qms-tab-group-advanced');
+            if (this.color) {
+                this.ele.nativeElement.classList.add(this.color);
+            }
+            if (this.type === 'fixed') {
+                this.ele.nativeElement.classList.add('qms-tab-group-advanced-fixed');
+            }
+        }
+    }
+}
+QMSTabGroupAdvancedDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-tab-group-advanced]',
+            },] }
+];
+QMSTabGroupAdvancedDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+QMSTabGroupAdvancedDirective.propDecorators = {
+    color: [{ type: Input }],
+    type: [{ type: Input }]
+};
+
+class QMSTabGroupDirective {
+    constructor(ele) {
+        this.ele = ele;
+    }
+    ngOnInit() {
+        if (this.ele) {
+            this.ele.nativeElement.classList.add('qms-tab-group');
+        }
+    }
+}
+QMSTabGroupDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-tab-group]',
+            },] }
+];
+QMSTabGroupDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+
+class QMSTabLabelDirective {
+    constructor(ele) {
+        this.ele = ele;
+    }
+    ngOnInit() {
+        if (this.ele) {
+            this.ele.nativeElement.classList.add('qms-tab-label');
+        }
+    }
+}
+QMSTabLabelDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-tab-label]',
+            },] }
+];
+QMSTabLabelDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+
+class QMSTabModule {
+}
+QMSTabModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    QMSTabGroupAdvancedDirective,
+                    QMSTabGroupDirective,
+                    QMSTabLabelDirective
+                ],
+                imports: [
+                    CommonModule
+                ],
+                exports: [
+                    QMSTabGroupAdvancedDirective,
+                    QMSTabGroupDirective,
+                    QMSTabLabelDirective
+                ]
+            },] }
+];
+
 class QmsBannerContent {
 }
 var BannerType;
@@ -15924,7 +16146,7 @@ QmsStatusDropdownComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-status-dropdown',
                 template: "<div id=\"qms-status-dropdown-container\" class=\"qms-status-dropdown-container {{ getClassType(value) }}\">\r\n    <mat-form-field class=\"material-custom-multiselect height-40\" [style.width]=\"width\">\r\n        <mat-select [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange()\">\r\n            <ng-container *ngIf=\"options\">\r\n                <mat-option *ngFor=\"let option of options\" [value]=\"option.type\">\r\n                    <label class=\"qms-label qms-label-{{ getClassType(option.type) }}\">{{ option.text }}</label>\r\n                </mat-option>\r\n            </ng-container>\r\n        </mat-select>\r\n    </mat-form-field>\r\n</div>",
-                styles: [".qms-status-dropdown-container ::ng-deep .material-custom-multiselect{height:40px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-flex{border-radius:2px;padding:0 17.5px 0 16px;width:100%;height:40px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-flex .mat-select-min-line{font-family:Open Sans;font-size:14px;font-weight:600;line-height:16px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-infix{padding-top:0;border-top:10px solid transparent}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-infix .mat-select-value-text{line-height:16px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-wrapper .mat-form-field-underline{display:none}.qms-status-dropdown-container.warning ::ng-deep .material-custom-multiselect .mat-form-field-flex{background-color:#e4cf53}.qms-status-dropdown-container.warning ::ng-deep .material-custom-multiselect .mat-form-field-flex .mat-select-arrow-wrapper .mat-select-arrow{color:rgba(0,0,0,.6)}.qms-status-dropdown-container.warning ::ng-deep .material-custom-multiselect .mat-select-value{color:#323232;font-weight:600}.qms-status-dropdown-container.warning ::ng-deep .material-custom-multiselect .mat-select-arrow{color:#323232}.qms-status-dropdown-container.light ::ng-deep .material-custom-multiselect .mat-form-field-flex{background-color:rgba(0,0,0,.1)}.qms-status-dropdown-container.light ::ng-deep .material-custom-multiselect .mat-form-field-flex .mat-select-arrow-wrapper .mat-select-arrow{color:rgba(0,0,0,.6)}.qms-status-dropdown-container.light ::ng-deep .material-custom-multiselect .mat-select-value{color:#323232;font-weight:600}.qms-status-dropdown-container.light ::ng-deep .material-custom-multiselect .mat-select-arrow{color:#323232}.qms-status-dropdown-container.danger ::ng-deep .material-custom-multiselect .mat-form-field-flex{background-color:#9e360f}.qms-status-dropdown-container.danger ::ng-deep .material-custom-multiselect .mat-form-field-flex .mat-select-arrow-wrapper .mat-select-arrow{color:hsla(0,0%,100%,.6)}.qms-status-dropdown-container.danger ::ng-deep .material-custom-multiselect .mat-select-value{color:#fff}.qms-status-dropdown-container.danger ::ng-deep .material-custom-multiselect .mat-select-arrow{color:#fff}.qms-status-dropdown-container.success ::ng-deep .material-custom-multiselect .mat-form-field-flex{background-color:#005832}.qms-status-dropdown-container.success ::ng-deep .material-custom-multiselect .mat-select-value{color:#fff}.qms-status-dropdown-container.success ::ng-deep .material-custom-multiselect .mat-select-arrow{color:#fff}.qms-status-dropdown-container.success ::ng-deep .material-custom-multiselect .mat-select-arrow-wrapper .mat-select-arrow{color:hsla(0,0%,100%,.6)}.qms-status-dropdown-container ::ng-deep mat-select .mat-select-value{font-size:14px;line-height:16px;color:#323232;font-weight:500}.qms-status-dropdown-container ::ng-deep mat-select .mat-select-arrow-wrapper{padding-top:17.5px}.qms-status-dropdown-container ::ng-deep mat-select .mat-select-arrow-wrapper .mat-select-arrow{border-top:4px solid}.qms-status-dropdown-container ::ng-deep mat-option .mat-option-custom .mat-pseudo-checkbox-checked:after{top:3px;width:11px;height:5px;border-left:3px solid}"]
+                styles: [".qms-status-dropdown-container ::ng-deep .material-custom-multiselect{height:40px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect.mat-focused{outline:1px solid #1954a9;border-radius:2px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-flex{border-radius:2px;padding:0 17.5px 0 16px;width:100%;height:40px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-flex .mat-select-min-line{font-family:Open Sans;font-size:14px;font-weight:600;line-height:16px;letter-spacing:1px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-infix{padding-top:0;border-top:10px solid transparent}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-infix .mat-select-value-text{line-height:16px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-wrapper .mat-form-field-underline{display:none}.qms-status-dropdown-container.warning ::ng-deep .material-custom-multiselect .mat-form-field-flex{background-color:#e4cf53}.qms-status-dropdown-container.warning ::ng-deep .material-custom-multiselect .mat-form-field-flex .mat-select-arrow-wrapper .mat-select-arrow{color:rgba(0,0,0,.6)}.qms-status-dropdown-container.warning ::ng-deep .material-custom-multiselect .mat-select-value{color:#323232}.qms-status-dropdown-container.warning ::ng-deep .material-custom-multiselect .mat-select-arrow{color:#323232}.qms-status-dropdown-container.light ::ng-deep .material-custom-multiselect .mat-form-field-flex{background-color:rgba(0,0,0,.1)}.qms-status-dropdown-container.light ::ng-deep .material-custom-multiselect .mat-form-field-flex .mat-select-arrow-wrapper .mat-select-arrow{color:rgba(0,0,0,.6)}.qms-status-dropdown-container.light ::ng-deep .material-custom-multiselect .mat-select-value{color:#323232}.qms-status-dropdown-container.light ::ng-deep .material-custom-multiselect .mat-select-arrow{color:#323232}.qms-status-dropdown-container.danger ::ng-deep .material-custom-multiselect .mat-form-field-flex{background-color:#9e360f}.qms-status-dropdown-container.danger ::ng-deep .material-custom-multiselect .mat-form-field-flex .mat-select-arrow-wrapper .mat-select-arrow{color:hsla(0,0%,100%,.6)}.qms-status-dropdown-container.danger ::ng-deep .material-custom-multiselect .mat-select-value{color:#fff}.qms-status-dropdown-container.danger ::ng-deep .material-custom-multiselect .mat-select-arrow{color:#fff}.qms-status-dropdown-container.success ::ng-deep .material-custom-multiselect .mat-form-field-flex{background-color:#005832}.qms-status-dropdown-container.success ::ng-deep .material-custom-multiselect .mat-select-value{color:#fff}.qms-status-dropdown-container.success ::ng-deep .material-custom-multiselect .mat-select-arrow{color:#fff}.qms-status-dropdown-container.success ::ng-deep .material-custom-multiselect .mat-select-arrow-wrapper .mat-select-arrow{color:hsla(0,0%,100%,.6)}.qms-status-dropdown-container ::ng-deep mat-select .mat-select-value{font-size:14px;line-height:16px;color:#323232;font-weight:500}.qms-status-dropdown-container ::ng-deep mat-select .mat-select-arrow-wrapper{padding-top:17.5px}.qms-status-dropdown-container ::ng-deep mat-select .mat-select-arrow-wrapper .mat-select-arrow{border-top:4px solid}.qms-status-dropdown-container ::ng-deep mat-option .mat-option-custom .mat-pseudo-checkbox-checked:after{top:3px;width:11px;height:5px;border-left:3px solid}"]
             },] }
 ];
 QmsStatusDropdownComponent.propDecorators = {
@@ -16075,15 +16297,6 @@ var ModuleType$1;
     ModuleType[ModuleType["risk"] = 4] = "risk";
 })(ModuleType$1 || (ModuleType$1 = {}));
 
-class StepModel {
-    constructor(id, name, disabled, selected) {
-        this.id = id;
-        this.disabled = disabled;
-        this.name = name;
-        this.selected = selected;
-    }
-}
-
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 class QmsStepperComponent {
     constructor(changeDetector) {
@@ -16098,14 +16311,14 @@ class QmsStepperComponent {
     }
     changeStep(selectedIndex) {
         this.currentStep = selectedIndex;
-        this.selectionChangeEvent.emit(selectedIndex);
+        this.selectionChangeEvent.emit(this.currentStep);
     }
 }
 QmsStepperComponent.decorators = [
     { type: Component, args: [{
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 selector: 'app-qms-stepper',
-                template: "<div class=\"qms-stepper-container\">\r\n    <div *ngIf=\"isHorizontal\">\r\n        <mat-horizontal-stepper [style.width.px]=\"width\" labelPosition=\"{{labelPosition}}\" #stepper\r\n            (selectionChange)=\"changeStep($event)\" class=\"overflow-auto\" [selectedIndex]=\"currentStep\">\r\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\r\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\r\n                <ng-template matStepLabel>\r\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\">{{step.name}}</span>\r\n                </ng-template>\r\n                <ng-template matStepContent>\r\n                </ng-template>\r\n            </mat-step>\r\n            <ng-template matStepperIcon=\"edit\">\r\n                {{stepper.selectedIndex + 1}}\r\n            </ng-template>\r\n        </mat-horizontal-stepper>\r\n    </div>\r\n    <div *ngIf=\"!isHorizontal\">\r\n        <mat-vertical-stepper [style.height.px]=\"height\" #stepper (selectionChange)=\"changeStep($event.selectedIndex)\"\r\n            [selectedIndex]=\"currentStep\" class=\"overflow-auto\">\r\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\r\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\r\n                <ng-template matStepLabel>\r\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\">{{step.name}}</span>\r\n                </ng-template>\r\n                <ng-template matStepContent>\r\n                </ng-template>\r\n            </mat-step>\r\n            <ng-template matStepperIcon=\"edit\">\r\n                <span>{{stepper.selectedIndex + 1}}</span>\r\n            </ng-template>\r\n        </mat-vertical-stepper>\r\n    </div>\r\n</div>",
+                template: "<div class=\"qms-stepper-container\">\r\n    <div *ngIf=\"isHorizontal\">\r\n        <mat-horizontal-stepper [style.width.px]=\"width\" labelPosition=\"{{labelPosition}}\" #stepper\r\n            (selectionChange)=\"changeStep($event.selectedIndex)\" class=\"overflow-auto\" [selectedIndex]=\"currentStep\">\r\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\r\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\r\n                <ng-template matStepLabel>\r\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\">{{step.name}}</span>\r\n                </ng-template>\r\n                <ng-template matStepContent>\r\n                </ng-template>\r\n            </mat-step>\r\n            <ng-template matStepperIcon=\"edit\">\r\n                {{stepper.selectedIndex + 1}}\r\n            </ng-template>\r\n        </mat-horizontal-stepper>\r\n    </div>\r\n    <div *ngIf=\"!isHorizontal\">\r\n        <mat-vertical-stepper [style.height.px]=\"height\" #stepper (selectionChange)=\"changeStep($event.selectedIndex)\"\r\n            [selectedIndex]=\"currentStep\" class=\"overflow-auto\">\r\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\r\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\r\n                <ng-template matStepLabel>\r\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\">{{step.name}}</span>\r\n                </ng-template>\r\n                <ng-template matStepContent>\r\n                </ng-template>\r\n            </mat-step>\r\n            <ng-template matStepperIcon=\"edit\">\r\n                <span>{{stepper.selectedIndex + 1}}</span>\r\n            </ng-template>\r\n        </mat-vertical-stepper>\r\n    </div>\r\n</div>",
                 styles: [".qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item]{height:22px!important;padding:8px 12px;left:0;top:0;border-radius:4px;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-horizontal-stepper-header{width:auto}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-vertical-stepper-header{width:156px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon{background:rgba(0,0,0,.6);margin-right:14px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon-selected{background-color:#1954a9!important;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-selected=true] .title-step{font-weight:600!important;outline:none!important}.qms-stepper-container ::ng-deep mat-step-header:active{background:#e5eefb}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep mat-step-header .mat-ripple-element{background-color:rgba(229,238,251,.3)}.qms-stepper-container ::ng-deep mat-step-header:hover{background:#f2f7fd}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=disabled]{pointer-events:none!important;cursor:not-allowed;opacity:.6;height:22px!important;width:156px;left:0;top:0;border-radius:4px;padding:8px 12px}.qms-stepper-container ::ng-deep mat-step-header:focus{border:2px solid #1954a9}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-keyboard-focused,.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-program-focused{border:3px solid #1954a9;background:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus:not(:focus-visible){border:none}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=active]{pointer-events:none!important;cursor:not-allowed;opacity:.6}.qms-stepper-container .title-step{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0;text-align:center;color:#323232;outline:none!important}.qms-stepper-container ::ng-deep .mat-step-icon{width:24px;height:24px}.qms-stepper-container ::ng-deep .mat-step-icon .mat-step-icon-content{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0;text-align:center;color:#fff;padding-top:1px}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line:before{border-left-width:0;border-right-width:0}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line{margin-left:23px;background:#0000001f;height:30px;width:1px}.qms-stepper-container ::ng-deep .mat-stepper-horizontal-line{height:1px;width:22px!important;left:0;top:18px;border-radius:0;margin:8px;background:#0000001f;max-width:22px!important}"]
             },] }
 ];
@@ -16260,6 +16473,7 @@ class SelectPopupData {
     constructor() {
         this.treeData = [];
         this.headerName = '';
+        this.selectIncludeLabel = '';
         this.selectedNode = [];
         this.disabledList = [];
     }
@@ -16298,6 +16512,7 @@ class SelectIncludeChildrenPopUpComponent {
         this.data = data;
         this.ngUnsubscribe = new Subject();
         this.headerName = '';
+        this.selectIncludeLabel = '';
         this.treeData = [];
         this.checkedNodeList = [];
         this.selectedOptions = [];
@@ -16331,6 +16546,7 @@ class SelectIncludeChildrenPopUpComponent {
         this.checkedNodeList = (data === null || data === void 0 ? void 0 : data.selectedList) || [];
         this.includeChildren = data === null || data === void 0 ? void 0 : data.includeChildren;
         this.editItem = data.editItem;
+        this.selectIncludeLabel = data.selectIncludeLabel;
         appIconService.registerProcessIcon(iconRegistry, domSanitizer);
         appIconService.registerProcessAreaIcon(iconRegistry, domSanitizer);
         appIconService.registerDocumentIcon(iconRegistry, domSanitizer);
@@ -16407,19 +16623,17 @@ class SelectIncludeChildrenPopUpComponent {
     removeCheckedNodeList(item) {
         const index = this.checkedNodeList.findIndex(x => (x.id.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === item.parentId.toLowerCase()));
         if (index >= 0) {
-            let position = this.selectedOptions.findIndex(x => x.id === item.id && x.parentId === item.parentId);
-            if (position >= 0) {
-                this.selectedOptions.splice(position, 1);
-            }
             if (this.checkedNodeList[index].type === SelectOptionTypes.IncludeChildren) {
                 this.removeIncludeChildren(item);
-            }
-            if (this.includeChildren) {
                 this.refactorSelectList(item);
             }
             else {
-                this.checkedNodeList.splice(index, 1);
+                let position = this.selectedOptions.findIndex(x => x.id === item.id && x.parentId === item.parentId);
+                if (position >= 0) {
+                    this.selectedOptions.splice(position, 1);
+                }
             }
+            this.checkedNodeList.splice(index, 1);
             this.enableSelectedNode({ id: item.id, parentId: item.parentId, itemName: item.name, type: SelectOptionTypes.IncludeChildren });
             this.selectedData = this.mapSelectOptionToTreeNode(this.selectedOptions);
         }
@@ -16476,11 +16690,6 @@ class SelectIncludeChildrenPopUpComponent {
     getImagePath(item) {
         return this.domSanitizer.bypassSecurityTrustResourceUrl(item.itemIconBase64);
     }
-    isMatchTrue(arr, arr2) {
-        return arr.every((i) => {
-            return arr2.includes(i);
-        });
-    }
     setResultHeight(arr) {
         let maxHeight = 484;
         const popup_content = document.getElementsByClassName('qmslib_related_popup_content')[0];
@@ -16540,12 +16749,14 @@ class SelectIncludeChildrenPopUpComponent {
         listChildren = this.getAllChildrenNodeRecursive(listChildren, item);
         const itemIndex = this.selectedOptions.findIndex(node => node.id === item.id && node.parentId === item.parentId);
         if (itemIndex >= 0) {
+            this.enableSelectedNode(this.selectedOptions[itemIndex]);
             this.selectedOptions.splice(itemIndex, 1);
         }
         listChildren.forEach(x => {
             const index = this.selectedOptions.findIndex(node => node.id === x.id && node.parentId === x.parentId);
             if (index >= 0) {
                 this.selectedOptions.splice(index, 1);
+                this.disabledList = this.disabledList.filter(node => !(x.id === node.id && x.parentId === node.parentId));
             }
         });
     }
@@ -16632,30 +16843,17 @@ class SelectIncludeChildrenPopUpComponent {
                 disabled: false,
             });
         }
-        else {
-            // this.selectRelated(node);
-        }
     }
     isNodeSelected(node) {
         return this.checkedNodeList.filter(x => (x.id.toLowerCase() === node.id.toLowerCase() && x.parentId.toLowerCase() === node.parentId.toLowerCase())).length > 0;
     }
     getChildrenOfFolder(node) {
-        // if (this.splitView) {
-        // const parentTexts = this.elem.nativeElement.querySelectorAll('.text-node-parent');
-        // [].forEach.call(parentTexts, (el) => {
-        //     el.classList.remove('active-item');
-        // });
-        // const itemElement = document.querySelectorAll(`#_${node.parentId ? node.parentId : ''}_${node.id}_${node.level}`);
-        // [].forEach.call(itemElement, (el) => {
-        //     el.classList.add('active-item');
-        // });
         let item = new SelectOption();
         item.id = node.id;
         item.itemName = node.name;
         item.levelType = node.levelType;
         this.selectedFolder = node;
         this.onExpandFolder.emit(item);
-        // }
     }
     selectNodeTreeEvent(node) {
         let position = this.selectedOptions.findIndex(x => x.id === node.id && x.parentId === node.parentId);
@@ -16720,14 +16918,15 @@ class SelectIncludeChildrenPopUpComponent {
     }
     setValue(e) {
         this.includeChildren = !!e.checked;
-        if (!this.includeChildren) {
-            this.checkedNodeList.forEach(node => {
-                this.disableSelectedNode(node);
-            });
-        }
-        else {
-            this.disabledList = this.orginalDisableList;
-        }
+        this.disabledList = $.extend(true, [], this.orginalDisableList || []);
+        this.checkedNodeList.forEach(node => {
+            if (!this.includeChildren) {
+                this.disableSelectIncludeNode(node);
+            }
+            else {
+                this.disableSelectSingleNode(node);
+            }
+        });
     }
     mapSelectOptionToTreeNode(list) {
         return list.map(x => {
@@ -16761,6 +16960,7 @@ class SelectIncludeChildrenPopUpComponent {
             if (selectedParentList.length > 0) {
                 const highestSelectedNode = selectedParentList[selectedParentList.length - 1];
                 this.combineNodes(highestSelectedNode);
+                this.disabledList = this.disabledList.filter(x => !(x.id === highestSelectedNode.id && x.parentId === highestSelectedNode.parentId));
             }
             else {
                 this.combineNodes({
@@ -16769,6 +16969,7 @@ class SelectIncludeChildrenPopUpComponent {
                     type: SelectOptionTypes.IncludeChildren,
                     parentId: node.parentId
                 });
+                this.disabledList = this.disabledList.filter(x => !(x.id === node.id && x.parentId === node.parentId));
             }
         }
         else {
@@ -16800,10 +17001,11 @@ class SelectIncludeChildrenPopUpComponent {
             }
             const selectIndex = this.selectedOptions.findIndex(node => node.id === child.id && node.parentId === child.parentId);
             if (selectIndex >= 0) {
+                this.disabledList = this.disabledList.filter(node => !(child.id === node.id && child.parentId === node.parentId));
                 nodeList.push(child);
             }
         });
-        if (nodeList.length > 0 || children.length === 0) {
+        if (selectedNodeIndex >= 0 || nodeList.length > 0 || children.length === 0) {
             if (selectedNodeIndex < 0) {
                 this.checkedNodeList.push({
                     id: root.id,
@@ -16836,17 +17038,19 @@ class SelectIncludeChildrenPopUpComponent {
         }
         return listParent;
     }
-    disableSelectedNode(node) {
+    disableSelectIncludeNode(node) {
         if (node.type === SelectOptionTypes.IncludeChildren) {
             let children = [];
-            children = this.getAllChildrenNodeRecursive(children, {
-                id: node.id,
-                name: node.itemName,
-                parentId: node.parentId,
-                level: 0,
-                expandable: true,
-                hasChild: true,
-                disabled: false
+            children = node.children.map(x => {
+                return {
+                    id: x.id,
+                    name: x.itemName,
+                    parentId: node.id,
+                    level: 0,
+                    expandable: true,
+                    hasChild: true,
+                    disabled: false
+                };
             });
             let disableNodes = [];
             const index = this.disabledList.findIndex(x => x.id === node.id && x.parentId === node.parentId);
@@ -16862,6 +17066,16 @@ class SelectIncludeChildrenPopUpComponent {
             this.disabledList = [...this.disabledList, ...disableNodes];
         }
     }
+    disableSelectSingleNode(node) {
+        if (node.type === SelectOptionTypes.SelectOne) {
+            let disableNodes = [];
+            const index = this.disabledList.findIndex(x => x.id === node.id && x.parentId === node.parentId);
+            if (index < 0) {
+                disableNodes.push(node);
+            }
+            this.disabledList = [...this.disabledList, ...disableNodes];
+        }
+    }
     enableSelectedNode(node) {
         let children = [];
         children = this.getAllChildrenNodeRecursive(children, {
@@ -16880,7 +17094,7 @@ class SelectIncludeChildrenPopUpComponent {
 SelectIncludeChildrenPopUpComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-select-include-children-popup',
-                template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ headerName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    id=\"qmslib_related_popup_search\"\r\n    class=\"input__field\"\r\n    (click)=\"showSearchResult()\"\r\n  >\r\n    <input\r\n      #name\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n      #autoCompleteInputSearch\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n  <div class=\"select__toggle-include\">\r\n    <mat-slide-toggle\r\n      [checked]=\"includeChildren\"\r\n      (change)=\"setValue($event)\"\r\n      color=\"default\"\r\n      qms-group-options\r\n    >\r\n      <span class=\"text-label\">Select label</span>\r\n    </mat-slide-toggle>\r\n  </div>\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"displayRelated\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      class=\"related-viewport\"\r\n    >\r\n      <div class=\"search__module-result\" *ngIf=\"filteredOptions\">\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of filteredOptions\"\r\n          [value]=\"option\"\r\n          (click)=\"selectSearchOption(option)\"\r\n        >\r\n          <qms-list-item type=\"image-square\">\r\n            <mat-icon\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.name\"\r\n              class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n              type=\"image-square\"\r\n            >\r\n              {{ option.itemIcon }}\r\n            </mat-icon>\r\n\r\n            <mat-icon\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.svg\"\r\n              class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n              type=\"image-square\"\r\n              [svgIcon]=\"option.itemIconSvg\"\r\n            >\r\n            </mat-icon>\r\n\r\n            <img\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.path\"\r\n              class=\"mat-icon\"\r\n              [src]=\"option.itemIconPath\"\r\n              type=\"image-square\"\r\n            />\r\n\r\n            <img\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.base64\"\r\n              class=\"mat-icon image-base64\"\r\n              [src]=\"getImagePath(option)\"\r\n              type=\"image-square\"\r\n            />\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                {{ option.itemName }}\r\n              </div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar qmslib_related_popup_content col-12\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <div id=\"qmslib_related_popup_common_002\">\r\n        <qms-tree\r\n          [treeData]=\"treeData\"\r\n          [treeConfig]=\"treeConfig\"\r\n          [selectedData]=\"selectedData\"\r\n          [selectedRiskData]=\"selectedRiskData\"\r\n          [disabledList]=\"disabledList\"\r\n          (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n          (nodeExpandEvent)=\"getChildrenOfFolder($event)\"\r\n          (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n        ></qms-tree>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n    <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n      <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n        <button\r\n          *ngIf=\"item.itemName\"\r\n          mat-button\r\n          class=\"related__item__content\"\r\n          qms-tool-tip=\"{{\r\n            isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n          }}\"\r\n          mode=\"dark\"\r\n        >\r\n          <span class=\"related__item__content_name\" #itemName>\r\n            {{ getItemChipName(item) }}\r\n            <span\r\n              class=\"select__include-children__count\"\r\n              *ngIf=\"item.noSelectedChildren > 0\"\r\n            >\r\n              {{ getItemSelectedChildrenRatio(item) }}\r\n            </span>\r\n          </span>\r\n\r\n          <mat-icon (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"line__divider\"></div>\r\n\r\n    <div class=\"confirm__button__groups\">\r\n      <button\r\n        *ngIf=\"!checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 7px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }}\r\n      </button>\r\n      <button\r\n        *ngIf=\"checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 0px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n      </button>\r\n      <button\r\n        qms-btn-text\r\n        [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n        (click)=\"onCloseClick()\"\r\n      >\r\n        {{ LANG.CANCEL }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ headerName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    id=\"qmslib_related_popup_search\"\r\n    class=\"input__field\"\r\n    (click)=\"showSearchResult()\"\r\n  >\r\n    <input\r\n      #name\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n      #autoCompleteInputSearch\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n  <div class=\"select__toggle-include\">\r\n    <mat-slide-toggle\r\n      [checked]=\"includeChildren\"\r\n      (change)=\"setValue($event)\"\r\n      color=\"default\"\r\n      qms-group-options\r\n    >\r\n      <span class=\"text-label\">{{ selectIncludeLabel }}</span>\r\n    </mat-slide-toggle>\r\n  </div>\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"displayRelated\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      class=\"related-viewport\"\r\n    >\r\n      <div class=\"search__module-result\" *ngIf=\"filteredOptions\">\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of filteredOptions\"\r\n          [value]=\"option\"\r\n          (click)=\"selectSearchOption(option)\"\r\n        >\r\n          <qms-list-item type=\"image-square\">\r\n            <mat-icon\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.name\"\r\n              class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n              type=\"image-square\"\r\n            >\r\n              {{ option.itemIcon }}\r\n            </mat-icon>\r\n\r\n            <mat-icon\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.svg\"\r\n              class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n              type=\"image-square\"\r\n              [svgIcon]=\"option.itemIconSvg\"\r\n            >\r\n            </mat-icon>\r\n\r\n            <img\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.path\"\r\n              class=\"mat-icon\"\r\n              [src]=\"option.itemIconPath\"\r\n              type=\"image-square\"\r\n            />\r\n\r\n            <img\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.base64\"\r\n              class=\"mat-icon image-base64\"\r\n              [src]=\"getImagePath(option)\"\r\n              type=\"image-square\"\r\n            />\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                {{ option.itemName }}\r\n              </div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar qmslib_related_popup_content col-12\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <div id=\"qmslib_related_popup_common_002\">\r\n        <qms-tree\r\n          [treeData]=\"treeData\"\r\n          [treeConfig]=\"treeConfig\"\r\n          [selectedData]=\"selectedData\"\r\n          [selectedRiskData]=\"selectedRiskData\"\r\n          [disabledList]=\"disabledList\"\r\n          (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n          (nodeExpandEvent)=\"getChildrenOfFolder($event)\"\r\n          (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n        ></qms-tree>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n    <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n      <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n        <button\r\n          *ngIf=\"item.itemName\"\r\n          mat-button\r\n          class=\"related__item__content\"\r\n          qms-tool-tip=\"{{\r\n            isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n          }}\"\r\n          mode=\"dark\"\r\n        >\r\n          <span class=\"related__item__content_name\" #itemName>\r\n            {{ getItemChipName(item) }}\r\n            <span\r\n              class=\"select__include-children__count\"\r\n              *ngIf=\"item.noSelectedChildren > 0\"\r\n            >\r\n              {{ getItemSelectedChildrenRatio(item) }}\r\n            </span>\r\n          </span>\r\n\r\n          <mat-icon (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"line__divider\"></div>\r\n\r\n    <div class=\"confirm__button__groups\">\r\n      <button\r\n        *ngIf=\"!checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 7px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }}\r\n      </button>\r\n      <button\r\n        *ngIf=\"checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 0px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n      </button>\r\n      <button\r\n        qms-btn-text\r\n        [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n        (click)=\"onCloseClick()\"\r\n      >\r\n        {{ LANG.CANCEL }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 encapsulation: ViewEncapsulation.None,
                 styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-scrollbar.none-scroll-bg::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:#eee}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .select__toggle-include{width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:#e5e5e5;max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name .select__include-children__count{font-size:.75rem;color:rgba(0,0,0,.38)}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{height:30px;font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:10.25rem}"]
             },] }
@@ -16969,8 +17183,8 @@ class QmsBadgesComponent {
 QmsBadgesComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-badges',
-                template: "<div\r\n  class=\"qms-badges-container badges-container-{{ color }} text-color-{{\r\n    color\r\n  }} font-size-14 line-height-22 qms-badges-default\"\r\n  *ngIf=\"type === typeBadges.default\"\r\n>\r\n  <mat-icon class=\"font-size-16\" *ngIf=\"icon && !fontIconGG\">{{ icon }}</mat-icon>\r\n  <mat-icon\r\n    *ngIf=\"itemIconSvg\"\r\n    class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n    [svgIcon]=\"itemIconSvg\"\r\n  ></mat-icon>\r\n  <img *ngIf=\"itemIconPath\" [src]=\"itemIconPath\" />\r\n  <span *ngIf=\"icon && fontIconGG\" class=\"{{ fontIconGG }}\">{{ icon }}</span>\r\n  <span *ngIf=\"contents\">{{ contents }}</span>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"type === typeBadges.circle\"\r\n  class=\"qms-badges-circle-{{ size }} badges-container-circle-{{\r\n    color\r\n  }} text-color-write\"\r\n>\r\n  <span\r\n    *ngIf=\"contents > 99 && size !== sizeCircleBadges.small\"\r\n    class=\"font-size-8\"\r\n  >\r\n    {{ '99' }}+\r\n  </span>\r\n  <span\r\n    *ngIf=\"contents < 100 && size !== sizeCircleBadges.small\"\r\n    class=\"font-size-14\"\r\n  >\r\n    {{ contents }}\r\n  </span>\r\n</div>\r\n\r\n<div\r\n  class=\"qms-badges-container badges-container-icon-{{\r\n    color\r\n  }} font-size-12 line-height-22 qms-badges-default\"\r\n  *ngIf=\"type === typeBadges.icon\"\r\n>\r\n  <mat-icon class=\"font-size-16\" *ngIf=\"icon && !fontIconGG\">{{ icon }}</mat-icon>\r\n  <mat-icon\r\n    *ngIf=\"itemIconSvg\"\r\n    class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n    [svgIcon]=\"itemIconSvg\"\r\n  ></mat-icon>\r\n  <img *ngIf=\"itemIconPath\" [src]=\"itemIconPath\" />\r\n  <span *ngIf=\"fontIconGG\" class=\"{{ fontIconGG }}\"> {{ icon }}</span>\r\n</div>\r\n",
-                styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.badges-container-primary{background-color:#b7daf8}.badges-container-yellow{background-color:rgba(228,207,83,.3)}.badges-container-green{background-color:rgba(0,128,76,.1);border:#005935}.badges-container-red{background-color:rgba(176,0,32,.08)}.badges-container-orange{background-color:#faede8}.badges-container-grey{background-color:#e5e5e5}.badges-container-brown{background-color:#f0eae7}.badges-container-icon-primary{background-color:#00324e}.badges-container-icon-green{background-color:#005935}.badges-container-icon-red{background-color:#b00020}.badges-container-icon-orange{background-color:#9e360f}.badges-container-icon-brown{background-color:#59280b}.badges-container-icon-yellow{background-color:rgba(228,207,83,.3)}.badges-container-circle-primary{background-color:#00324e}.badges-container-circle-orange{background-color:#9e360f}.text-color-primary{color:#00324e}.text-color-red{color:#b00020}.text-color-green{color:#005935}.text-color-yellow{color:#726729}.text-color-grey{color:#525252}.text-color-brown{color:#59280b}.text-color-orange{color:#9e360f}.text-color-write{color:#fff}.qms-badges-container{display:flex;align-items:center;width:100%;height:100%;font-family:Open Sans;font-style:normal;font-weight:600;font-size:12px;line-height:16px}.qms-badges-container-text{margin-top:10px;margin-bottom:10px}.qms-badges-container .margin-horizontal-17{margin-left:17px;margin-right:17px}.qms-badges-container .qms-badges-button{margin-left:auto;margin-right:8px}.qms-badges-circle-large{width:24px;height:24px}.qms-badges-circle-large,.qms-badges-circle-medium{border-radius:50%;display:flex;align-items:center;justify-content:center}.qms-badges-circle-medium{width:20px;height:20px}.qms-badges-circle-small{width:10px;height:10px;border-radius:50%}.qms-badges-circle-small,.qms-badges-default{display:flex;align-items:center;justify-content:center}.qms-badges-default{height:24px;padding:0 5px;border-radius:4px}.qms-badges-default .mat-icon{width:auto;height:auto}.font-bold{font-weight:700}.font-size-14{font-size:14px}.font-size-16{font-size:16px}.font-size-12{font-size:12px}.font-size-8{font-size:8px}.line-height-22{line-height:22px}"]
+                template: "<div\r\n  class=\"qms-badges-container badges-container-{{ color }} text-color-{{\r\n    color\r\n  }} font-size-14 line-height-22 qms-badges-default\"\r\n  *ngIf=\"type === typeBadges.default\"\r\n>\r\n  <mat-icon class=\"font-size-16\" *ngIf=\"icon && !fontIconGG\">{{\r\n    icon\r\n  }}</mat-icon>\r\n  <mat-icon\r\n    *ngIf=\"itemIconSvg\"\r\n    class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n    [svgIcon]=\"itemIconSvg\"\r\n  ></mat-icon>\r\n  <img *ngIf=\"itemIconPath\" [src]=\"itemIconPath\" />\r\n  <span *ngIf=\"icon && fontIconGG\" class=\"{{ fontIconGG }}\">{{ icon }}</span>\r\n  <span *ngIf=\"contents\">{{ contents }}</span>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"type === typeBadges.circle\"\r\n  class=\"qms-badges-circle-{{ size }} badges-container-circle-{{\r\n    color\r\n  }} text-color-white\"\r\n>\r\n  <span\r\n    *ngIf=\"contents > 99 && size !== sizeCircleBadges.small\"\r\n    class=\"font-size-8\"\r\n  >\r\n    {{ \"99\" }}+\r\n  </span>\r\n  <span\r\n    *ngIf=\"contents < 100 && size !== sizeCircleBadges.small\"\r\n    class=\"font-size-12\"\r\n  >\r\n    {{ contents }}\r\n  </span>\r\n</div>\r\n\r\n<div\r\n  class=\"qms-badges-container badges-container-icon-{{\r\n    color\r\n  }} font-size-12 line-height-22 qms-badges-default\"\r\n  *ngIf=\"type === typeBadges.icon\"\r\n>\r\n  <mat-icon class=\"font-size-16 text-color-white\" *ngIf=\"icon && !fontIconGG\">{{\r\n    icon\r\n  }}</mat-icon>\r\n  <mat-icon\r\n    *ngIf=\"itemIconSvg\"\r\n    class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n    [svgIcon]=\"itemIconSvg\"\r\n  ></mat-icon>\r\n  <img *ngIf=\"itemIconPath\" [src]=\"itemIconPath\" />\r\n  <span *ngIf=\"fontIconGG\" class=\"text-color-white {{ fontIconGG }}\">\r\n    {{ icon }}</span\r\n  >\r\n</div>\r\n",
+                styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.badges-container-primary{background-color:#b7daf8}.badges-container-yellow{background-color:rgba(228,207,83,.3)}.badges-container-green{background-color:rgba(0,128,76,.1);border:#005935}.badges-container-red{background-color:#f4e9e6}.badges-container-orange{background-color:#faede8}.badges-container-grey{background-color:#e5e5e5}.badges-container-brown{background-color:#f0eae7}.badges-container-icon-primary{background-color:#00324e}.badges-container-icon-green{background-color:#005935}.badges-container-icon-orange,.badges-container-icon-red{background-color:#9e360f}.badges-container-icon-brown{background-color:#59280b}.badges-container-icon-yellow{background-color:rgba(228,207,83,.3)}.badges-container-circle-primary{background-color:#00324e}.badges-container-circle-orange{background-color:#9e360f}.text-color-primary{color:#00324e}.text-color-red{color:#74280b}.text-color-green{color:#005935}.text-color-yellow{color:#726729}.text-color-grey{color:#525252}.text-color-brown{color:#59280b}.text-color-orange{color:#9e360f}.text-color-white{color:#fff}.qms-badges-container{display:flex;align-items:center;width:100%;height:100%;font-family:Open Sans;font-style:normal;font-weight:600;font-size:12px;line-height:16px}.qms-badges-container-text{margin-top:10px;margin-bottom:10px}.qms-badges-container .margin-horizontal-17{margin-left:17px;margin-right:17px}.qms-badges-container .qms-badges-button{margin-left:auto;margin-right:8px}.qms-badges-circle-large{width:24px;height:24px}.qms-badges-circle-large,.qms-badges-circle-medium{border-radius:50%;display:flex;align-items:center;justify-content:center}.qms-badges-circle-medium{width:20px;height:20px}.qms-badges-circle-small{width:10px;height:10px;border-radius:50%}.qms-badges-circle-small,.qms-badges-default{display:flex;align-items:center;justify-content:center}.qms-badges-default{height:24px;padding:0 6px;border-radius:4px}.qms-badges-default .mat-icon{width:auto;height:auto}.font-bold{font-weight:700}.font-size-14{font-size:14px}.font-size-16{font-size:16px}.font-size-12{font-size:12px}.font-size-8{font-size:8px}.line-height-22{line-height:22px}"]
             },] }
 ];
 QmsBadgesComponent.propDecorators = {
@@ -19235,6 +19449,373 @@ QMSSelectProcessDocumentModule.decorators = [
 class SelectedProcessDocumentItem {
 }
 
+class QMSNavigationDrawerComponent {
+    constructor() {
+        this.treeData = [];
+        this.addNodeEvent = new EventEmitter();
+        this.addFavoriteEvent = new EventEmitter();
+        this.drogLocationEvent = new EventEmitter();
+        this.showAddIcon = true;
+        this.openNodes = [];
+        this.dragDropListDisabled = false;
+        this.nodesExpand = new EventEmitter();
+        this.onClickNodeEvent = new EventEmitter();
+        this.addFavoriteTooltip = 'Legg til favoritt';
+        this.deleteFavoriteTooltip = 'Slett favoritt';
+        this.addNodeTooltip = 'Legg til lokasjon';
+        this.expandedNodeSet = new Set();
+        this.dragging = false;
+        this.expandDelay = 1000;
+        this.isHover = false;
+        this.treeControl = new FlatTreeControl(node => node.level, node => node.expandable);
+        this.treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children);
+        this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+        this.hoverNode = {};
+        this.expandingNodes = [];
+        this.hasChild = (_, node) => node.expandable;
+        this.dataSource.data = this.treeData;
+    }
+    _transformer(node, level) {
+        return {
+            expandable: !!node.children && node.children.length > 0,
+            name: node.name,
+            level,
+            id: node.id,
+            isReadOnly: node.isReadOnly,
+            favorite: node.favorite,
+            disabled: node.disabled
+        };
+    }
+    ngOnInit() {
+        this.openNodes.forEach(item => {
+            this.treeControl.expand(this.treeControl.dataNodes.find(p => p.id.toString() === item));
+        });
+    }
+    ngOnChanges(changes) {
+        this.dataSource.data = this.treeData;
+        if (this.filterText) {
+            this.expandNodeSearched(this.treeData, this.filterText);
+        }
+        if (changes.openNodes) {
+            this.openNodes.forEach(item => {
+                this.treeControl.expand(this.treeControl.dataNodes.find(p => p.id.toString() === item));
+            });
+        }
+    }
+    expandNodeSearched(nodesOrigin, txtSearch) {
+        nodesOrigin.forEach(item => {
+            if (!item.name.toLocaleLowerCase().includes(txtSearch.toLocaleLowerCase())) {
+                this.treeControl.expand(this.treeControl.dataNodes.find(p => p.id.toString() === item.id));
+                if (item.children.length > 0) {
+                    this.expandNodeSearched(item.children, txtSearch);
+                }
+            }
+        });
+    }
+    onClickNode(nodeId) {
+        this.onClickNodeEvent.emit(nodeId);
+    }
+    onOver(node) {
+        this.hoverNode = node;
+    }
+    addNewNode(nodeId, event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.addNodeEvent.emit(nodeId);
+    }
+    addFavoriteNode(nodeId, event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.addFavoriteEvent.emit(nodeId);
+    }
+    ngOnDestroy() {
+        if (this.activeNodeLocation) {
+            this.activeNodeLocation.unsubscribe();
+        }
+    }
+    /**
+     * This constructs an array of nodes that matches the DOM,
+     * and calls rememberExpandedTreeNodes to persist expand state
+     */
+    visibleNodes() {
+        this.rememberExpandedTreeNodes(this.treeControl, this.expandedNodeSet);
+        const result = [];
+        function addExpandedChildren(node, expanded) {
+            result.push(node);
+            if (expanded.has(node.id)) {
+                node.children.map(child => addExpandedChildren(child, expanded));
+            }
+        }
+        this.dataSource.data.forEach(node => {
+            addExpandedChildren(node, this.expandedNodeSet);
+        });
+        return result;
+    }
+    /**
+     * Handle the drop - here we rearrange the data based on the drop event,
+     * then rebuild the tree.
+     * */
+    drop(event) {
+        // Save data for backup
+        const node = event.item.data;
+        const backupChangedNode = JSON.parse(JSON.stringify(node));
+        const backupData = JSON.parse(JSON.stringify(this.dataSource.data));
+        // ignore drops outside of the tree
+        if (!event.isPointerOverContainer) {
+            return;
+        }
+        // construct a list of visible nodes, this will match the DOM.
+        // the cdkDragDrop event.currentIndex jives with visible nodes.
+        // it calls rememberExpandedTreeNodes to persist expand state
+        const visibleNodes = this.visibleNodes();
+        // deep clone the data source so we can mutate it
+        const changedData = JSON.parse(JSON.stringify(this.dataSource.data));
+        // recursive find function to find siblings of node
+        function findNodeSiblings(arr, id) {
+            let result, subResult;
+            arr.forEach(item => {
+                if (item.id === id) {
+                    result = arr;
+                }
+                else if (item.children) {
+                    subResult = findNodeSiblings(item.children, id);
+                    if (subResult) {
+                        result = subResult;
+                    }
+                }
+            });
+            return result;
+        }
+        // remove the node from its old place
+        const siblings = findNodeSiblings(changedData, node.id);
+        const siblingIndex = siblings.findIndex(n => n.id === node.id);
+        // const nodeToInsert: TreeNode = siblings.splice(siblingIndex, 1)[0];
+        const nodeToInsert = siblings.splice(siblingIndex, 1)[0];
+        // determine where to insert the node
+        const nodeAtDest = visibleNodes[event.currentIndex];
+        if (nodeAtDest.id === nodeToInsert.id) {
+            return;
+        }
+        // determine drop index relative to destination array
+        let relativeIndex = event.currentIndex; // default if no parent
+        const nodeAtDestFlatNode = this.treeControl.dataNodes.find(n => nodeAtDest.id === n.id);
+        const parent = this.getParentNode(nodeAtDestFlatNode);
+        if (parent) {
+            const parentIndex = visibleNodes.findIndex(n => n.id === parent.id) + 1;
+            relativeIndex = event.currentIndex - parentIndex;
+            // update parentId for nodeToInsert
+            nodeToInsert.parentId = parent.id;
+        }
+        else {
+            nodeToInsert.parentId = guidHelper.empty;
+        }
+        // update new order for nodeToInsert
+        nodeToInsert.order = relativeIndex;
+        // insert node
+        const newSiblings = findNodeSiblings(changedData, nodeAtDest.id);
+        if (!newSiblings) {
+            return;
+        }
+        newSiblings.splice(relativeIndex, 0, nodeToInsert);
+        // rebuild tree with mutated data
+        this.rebuildTreeForData(changedData);
+        // update New Location Order for new insert node
+        this.updateNewOrderForNodeSiblings(newSiblings);
+        this.drogLocationEvent.emit({
+            newSiblings: newSiblings,
+            changedNode: backupChangedNode,
+            oldDataSource: backupData
+        });
+    }
+    updateNewOrderForNodeSiblings(newSiblings) {
+        let newOrder = 0;
+        newSiblings.forEach(item => {
+            item.order = newOrder;
+            newOrder = newOrder + 1;
+        });
+    }
+    /**
+     * Experimental - opening tree nodes as you drag over them
+    */
+    dragStart() {
+        this.dragging = true;
+    }
+    dragEnd() {
+        this.dragging = false;
+    }
+    dragHover(node) {
+        this.isHover = true;
+        if (this.dragging) {
+            clearTimeout(this.expandTimeout);
+            this.expandTimeout = setTimeout(() => {
+                this.treeControl.expand(node);
+            }, this.expandDelay);
+        }
+    }
+    dragHoverEnd() {
+        this.isHover = false;
+        if (this.dragging) {
+            clearTimeout(this.expandTimeout);
+        }
+    }
+    /**
+     * The following methods are for persisting the tree expand state
+     * after being rebuilt
+     */
+    rebuildTreeForData(data) {
+        this.rememberExpandedTreeNodes(this.treeControl, this.expandedNodeSet);
+        this.treeData = data;
+        this.dataSource.data = data;
+        this.forgetMissingExpandedNodes(this.treeControl, this.expandedNodeSet);
+        this.expandNodesById(this.treeControl.dataNodes, Array.from(this.expandedNodeSet));
+    }
+    rememberExpandedTreeNodes(treeControl, expandedNodeSet) {
+        if (treeControl.dataNodes) {
+            treeControl.dataNodes.forEach((node) => {
+                if (treeControl.isExpandable(node) && treeControl.isExpanded(node)) {
+                    // capture latest expanded state
+                    expandedNodeSet.add(node.id.toString());
+                }
+            });
+        }
+    }
+    forgetMissingExpandedNodes(treeControl, expandedNodeSet) {
+        if (treeControl.dataNodes) {
+            expandedNodeSet.forEach((nodeId) => {
+                // maintain expanded node state
+                if (!treeControl.dataNodes.find((n) => n.id.toString() === nodeId)) {
+                    // if the tree doesn't have the previous node, remove it from the expanded list
+                    expandedNodeSet.delete(nodeId);
+                }
+            });
+        }
+    }
+    expandNodesById(flatNodes, ids) {
+        if (!flatNodes || flatNodes.length === 0) {
+            return;
+        }
+        const idSet = new Set(ids);
+        return flatNodes.forEach((node) => {
+            if (idSet.has(node.id.toString())) {
+                this.treeControl.expand(node);
+                this.expandingNodes.push(node);
+                let parent = this.getParentNode(node);
+                while (parent) {
+                    this.treeControl.expand(parent);
+                    this.expandingNodes.push(parent);
+                    parent = this.getParentNode(parent);
+                }
+            }
+        });
+    }
+    getParentNode(node) {
+        const currentLevel = node.level;
+        if (currentLevel < 1) {
+            return null;
+        }
+        const startIndex = this.treeControl.dataNodes.indexOf(node) - 1;
+        for (let i = startIndex; i >= 0; i--) {
+            const currentNode = this.treeControl.dataNodes[i];
+            if (currentNode.level < currentLevel) {
+                return currentNode;
+            }
+        }
+        return null;
+    }
+    onKeyDownNode(event, node) {
+        if (event.key == 'Enter') {
+            this.onClickToggleNode(node);
+        }
+    }
+    onClickToggleNode(node) {
+        if (this.treeControl.isExpanded(node)) {
+            this.treeControl.expand(node);
+            this._addExpandingNode(node);
+        }
+        else {
+            this.treeControl.collapse(node);
+            this._removeExpandingNodes(node.id);
+        }
+        this.nodesExpand.emit({ node, isExpand: this.treeControl.isExpanded(node) });
+    }
+    setHoverFavorite(id) {
+        this.hoverFavoriteNodeId = id;
+    }
+    expandNodes() {
+        this._expandNodesLoop(this.treeData);
+    }
+    _expandNodesLoop(data) {
+        data.forEach(node => {
+            const expandingNode = this.expandingNodes.some(x => x.id === node.id);
+            if (expandingNode) {
+                this.onClickToggleNode(expandingNode);
+            }
+            data.forEach(item => {
+                if (Array.isArray(item.children)) {
+                    this._expandNodesLoop(item.children);
+                }
+            });
+        });
+    }
+    _addExpandingNode(node) {
+        if (!this.expandingNodes.some(x => x.id === node.id)) {
+            this.expandingNodes.push(node);
+        }
+    }
+    _removeExpandingNodes(nodeId) {
+        this.expandingNodes = this.expandingNodes.filter(x => x.id !== nodeId);
+    }
+}
+QMSNavigationDrawerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-qms-navigation-drawer',
+                template: "<mat-tree class=\"qms-navigation-drawer-container\" [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" cdkDropList\r\n  (cdkDropListDropped)=\"drop($event)\" [cdkDropListDisabled]=\"dragDropListDisabled\">\r\n  <!-- This is the tree node template for leaf nodes -->\r\n  <mat-tree-node *matTreeNodeDef=\"let node\" routerLinkActive=\"active\" (mouseover)=\"onOver(node)\" matTreeNodePadding\r\n    matTreeNodePaddingIndent=\"34\" cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\"\r\n    (mouseleave)=\"dragHoverEnd()\" (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\"\r\n    [ngClass]=\"{'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node)}\">\r\n    <div *ngIf=\"!node.isReadOnly\" (click)=\"onClickNode(node.id)\"\r\n      class=\"tree-content\">\r\n      <div class=\"span-text\" mode=\"dark\" position=\"below\">{{ node.name }}</div>\r\n      <button tabindex=\"-1\" class=\"button-icon collapse-expand-icon space-icon\" mat-icon-button>\r\n        <img class=\"img-icon\" [src]=\"faIconPath\" alt=\"\" />\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\"\r\n        *ngIf=\"showFavoriteIcon && (node.id === hoverNode.id || node.favorite)\"\r\n        (click)=\"addFavoriteNode(node.id, $event)\" (mouseenter)=\"setHoverFavorite(node.id)\"\r\n        (mouseleave)=\"setHoverFavorite(null)\" [ngClass]=\"{'btn-favorite': (node.id === hoverNode.id && showAddIcon)}\"\r\n        matTooltip=\"{{!node.favorite ? addFavoriteTooltip : deleteFavoriteTooltip}}\" mode=\"dark\" position=\"below\"\r\n        mat-icon-button>\r\n        <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\">\r\n          {{node.favorite && node.id !== hoverFavoriteNodeId && !favoriteMode\r\n          ? 'star_rate_outline' :\r\n          (hoverFavoriteNodeId !== null || (isHover && node.id === hoverNode.id)) && !favoriteMode ? 'star_border' : ''\r\n          }}\r\n          {{node.id === hoverNode.id && favoriteMode && isHover ? 'close' : ''}}\r\n        </mat-icon>\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && showAddIcon\"\r\n        matTooltip=\"{{addNodeTooltip}}\" (click)=\"addNewNode(node.id, $event)\" mode=\"dark\" position=\"below\"\r\n        mat-icon-button>\r\n        <mat-icon class=\"mat-icon-rtl-mirror add-icon\">\r\n          add\r\n        </mat-icon>\r\n      </button>\r\n    </div>\r\n  </mat-tree-node>\r\n  <!-- This is the tree node template for expandable nodes -->\r\n  <mat-tree-node *matTreeNodeDef=\"let node;when: hasChild\" routerLinkActive=\"active\" (mouseover)=\"onOver(node)\"\r\n    matTreeNodePadding matTreeNodePaddingIndent=\"34\" cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\"\r\n    (mouseleave)=\"dragHoverEnd()\" (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\" [ngClass]=\"\r\n    {'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node)}\">\r\n    <div *ngIf=\"!node.isReadOnly\" (click)=\"onClickNode(node.id)\"\r\n      class=\"tree-content\" (keydown)=\"onKeyDownNode($event, node)\">\r\n      <span class=\"span-text\" mode=\"dark\" position=\"below\">{{ node.name }}</span>\r\n      <button tabindex=\"-1\" class=\"button-icon space-icon collapse-expand-icon\" mat-icon-button matTreeNodeToggle\r\n        [attr.aria-label]=\"'toggle ' + node.name\" (click)=\"onClickToggleNode(node)\">\r\n        <mat-icon class=\"mat-icon-rtl-mirror arrow-icon left-icon\">\r\n          {{treeControl.isExpanded(node) ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\"\r\n        matTooltip=\"{{!node.favorite ? addFavoriteTooltip : deleteFavoriteTooltip}}\"\r\n        *ngIf=\"showFavoriteIcon && (node.id === hoverNode.id || node.favorite)\"\r\n        (click)=\"addFavoriteNode(node.id, $event)\"\r\n        [ngClass]=\"{'btn-favorite': (node.id === hoverNode.id && showAddIcon)}\" (mouseenter)=\"setHoverFavorite(node.id)\"\r\n        (mouseleave)=\"setHoverFavorite(null)\" mode=\"dark\" position=\"below\" mat-icon-button>\r\n        <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\">\r\n          {{node.favorite && node.id !== hoverFavoriteNodeId && !favoriteMode\r\n          ? 'star_rate_outline' :\r\n          (hoverFavoriteNodeId !== null || (isHover && node.id === hoverNode.id)) && !favoriteMode ? 'star_border' : ''\r\n          }}\r\n          {{node.id === hoverNode.id && favoriteMode && isHover ? 'close' : ''}}\r\n        </mat-icon>\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && showAddIcon\"\r\n        matTooltip=\"{{addNodeTooltip}}\" (click)=\"addNewNode(node.id, $event)\" mat-icon-button>\r\n        <mat-icon class=\"mat-icon-rtl-mirror add-icon\">\r\n          add\r\n        </mat-icon>\r\n      </button>\r\n    </div>\r\n  </mat-tree-node>\r\n</mat-tree>",
+                styles: ["::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node{width:272px!important;height:48px!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node{min-height:34px;margin:16px 0;padding-right:34px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content{width:100%;position:relative;cursor:pointer}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .arrow-icon{color:#00324e}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .collapse-expand-icon{color:#3e57b7}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .collapse-expand-icon:hover{background:rgba(0,0,0,.08)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .add-icon{color:#3e57b7}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .add-icon:hover{background:rgba(0,0,0,.08)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .left-icon{color:#919191}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node{padding-left:0;position:static;height:32px;left:calc(50% - 216px/2);top:0;font-family:Open Sans;font-style:normal;font-weight:400;font-size:14px;line-height:19px;display:flex;align-items:center;color:#1954a9;flex:none;order:0;align-self:stretch;flex-grow:1}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node ::ng-deep mat-icon{color:#1954a9!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node{position:static;height:32px;left:calc(50% - 176px/2);top:0;font-family:Open Sans;font-style:normal;font-weight:400;font-size:14px;line-height:19px;display:flex;align-items:center;color:#323232;flex:none;order:0;align-self:stretch;flex-grow:1}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .button-icon{width:30px;height:30px;line-height:30px!important;border-radius:50%}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .button-icon:hover{border-radius:50%}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .img-icon{max-height:25px;max-width:25px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .add-icon{position:absolute;top:-2px;right:-34px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .add-icon mat-icon{top:3px;right:3px;border-radius:50%}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .favorite{color:#b13514}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .btn-favorite{right:-5px;color:unset}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .space-icon{position:absolute;top:-5px;left:0}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .span-text{position:relative;overflow:hidden;text-overflow:ellipsis;padding-left:42px;max-width:calc(100% - 56px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .span-text:after{content:\"\";display:block;clear:both}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node:first-child{margin:0}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node:hover{background:#00000014}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node:active{background:#0000001f}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node:active{background:#f2f7fd}"]
+            },] }
+];
+QMSNavigationDrawerComponent.ctorParameters = () => [];
+QMSNavigationDrawerComponent.propDecorators = {
+    treeData: [{ type: Input }],
+    showFavoriteIcon: [{ type: Input }],
+    favoriteMode: [{ type: Input }],
+    addNodeEvent: [{ type: Output }],
+    addFavoriteEvent: [{ type: Output }],
+    drogLocationEvent: [{ type: Output }],
+    showAddIcon: [{ type: Input }],
+    openNodes: [{ type: Input }],
+    dragDropListDisabled: [{ type: Input }],
+    nodesExpand: [{ type: Output }],
+    filterText: [{ type: Input }],
+    faIconPath: [{ type: Input }],
+    onClickNodeEvent: [{ type: Output }],
+    addFavoriteTooltip: [{ type: Input }],
+    deleteFavoriteTooltip: [{ type: Input }],
+    addNodeTooltip: [{ type: Input }]
+};
+
+class QMSNavigationDrawerModule {
+}
+QMSNavigationDrawerModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    QMSNavigationDrawerComponent
+                ],
+                imports: [
+                    CommonModule,
+                    MatIconModule,
+                    MatToolbarModule,
+                    MatButtonModule,
+                    QMSButtonModule,
+                    MatTooltipModule,
+                    DragDropModule,
+                    MatTreeModule
+                ],
+                exports: [
+                    QMSNavigationDrawerComponent
+                ]
+            },] }
+];
+
 /*
  * Public API Surface of qms-angular
  */
@@ -19243,5 +19824,5 @@ class SelectedProcessDocumentItem {
  * Generated bundle index. Do not edit.
  */
 
-export { AutocompleteOffDirective, BREADCRUMB_DROPDOWN_ICON, BUTTON_TOGGLE_DEFAULT_OPTIONS, BUTTON_TOGGLE_GROUP, BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, BannerType, BpmnService, BreadcrumbNode, ButtonToggleChange, CHECKLIST_ICON, CKEditorEventConst, CKEditorModule, ConfirmDialog, DEPARTMENT_FOLDER_ICON, DEPARTMENT_FOLDER_OUTLINED_ICON, DEVIATION_ICON, DOCUMENT_DEPARTMENT_ICON, DOCUMENT_ENTERPRISE_ICON, DOCUMENT_ICON, DOCUMENT_LOCAL_ICON, DOCUMENT_REGIONAL_ICON, DataType$1 as DataType, DateFormatPipe, DocumentNodeType$1 as DocumentNodeType, ENTERPRISE_FOLDER_ICON, ENTERPRISE_FOLDER_OUTLINED_ICON, FileErrorType, FlowChartConst, FlowchartViewMode, ISelectOneItem, IconModel, InformationCoverItem, KEYBOARD_DOWN_ICON, KEYBOARD_UP_ICON, LOCAL_FOLDER_ICON, LOCAL_FOLDER_OUTLINED_ICON, LinkAnchor, LinkType, MarginDirective, ModuleType$1 as ModuleType, NORMAL_FOLDER_ICON, NORMAL_FOLDER_OUTLINED_ICON, NewTreeComponent, NewTreeModel, PROCESS_AREA_ICON, PROCESS_AREA_OUTLINED_ICON, PROCESS_ICON, PopupData, ProtocolType, ProtocolTypeName, QMSAnchor, QMSAppBar, QMSAppIconModule, QMSAttachmentListDirective, QMSBreadcrumb, QMSBreadcrumbDirectionIconDirective, QMSBreadcrumbItemDirective, QMSBreadcrumbModule, QMSButton, QMSButtonIcon, QMSButtonModule, QMSButtonToggle, QMSButtonToggleGroup, QMSCKEditorBaseComponent, QMSCKEditorBaseService, QMSCKEditorBpmn, QMSCKEditorBpmnApiService, QMSCKEditorBpmnComponent, QMSCKEditorBpmnTemplate, QMSCKEditorComponent, QMSCKEditorConfirmComponent, QMSCKEditorData, QMSCKEditorDialogData, QMSCKEditorDocumentType, QMSCKEditorFullscreenComponent, QMSCKEditorGlobalService, QMSCKEditorInjector, QMSCKEditorLinkAnchorDocument, QMSCKEditorLinkComponent, QMSCKEditorLinkService, QMSCKEditorLoadTemplateComponent, QMSCKEditorModule, QMSCKEditorPlugin, QMSCKEditorRelatedComponent, QMSCKEditorRelation, QMSCKEditorTemplate, QMSCKEditorTemplateService, QMSCKEditorToastService, QMSCKEditorTreeComponent, QMSCKEdtiorInputData, QMSChipBodyDirective, QMSChipInputChipListDirective, QMSChipInputDirective, QMSChipInputSelectDropWDownDirective, QMSChipInputSelectFieldDirective, QMSChipInputSelectTriggerDirective, QMSComment, QMSConfirmDialog, QMSDialogConfig, QMSDrawerContentDirective, QMSDrawerDirective, QMSDrawerHeaderActionDirective, QMSDrawerHeaderDirective, QMSDropdownMenuItem, QMSEditFileNameDialog, QMSEditFileNameDialogModule, QMSFileAttachment, QMSFileUploadDirective, QMSFileUploadDisplayDirective, QMSFileUploadMultipleDirective, QMSFileUploadMultipleDisplayDirective, QMSFileUploadMultipleSelectorDirective, QMSFileUploadSelectorDirective, QMSFormDialog, QMSFormFieldDatePickerDirective, QMSFormFieldDirective, QMSFormFieldTextareaDirective, QMSGroupOptionDirective, QMSIconRegistryService, QMSInputChipDirective, QMSInputClearDirective, QMSList, QMSListExpansion, QMSListExpansionHeader, QMSListHeader, QMSListItem, QMSListLeadingIcon, QMSListLine, QMSListModule, QMSNewTreeModule, QMSProcessDocumentItem, QMSRangeSliderDirective, QMSRangeSliderLockUpDirective, QMSRelatedGlobalService, QMSRelatedModule, QMSRichText, QMSRichTextModule, QMSScrolableAttachmentListDirective, QMSScrollbarDirective, QMSSearchFieldDirective, QMSSelectGlobalService, QMSSelectIncludeChildrenModule, QMSSelectOneGlobalService, QMSSelectOneModule, QMSSelectProcessDocumentGlobalService, QMSSelectProcessDocumentModule, QMSSnackbarConfig, QMSSuffixDirective, QMSSuffixFieldDirective, QMSTabGroupAdvancedDirective, QMSTabGroupDirective, QMSTabLabelDirective, QMSTableAction, QMSTableActionBlock, QMSTableModule, QMSTextBlockDirective, QMSTextBlockLine, QMSToolTipComponent, QMSToolTipRendererDirective, QMSTooltipImageDirective, QMSTooltipModule, QMSTreeModule, QMSUploadFileErrorDialog, QMSUploadFileErrorDialogModule, QMSUploadingFileGuard, QmsAngularComponent, QmsAngularModule, QmsAngularService, QmsAppBarComponent, QmsAppBarModule, QmsBadgesComponent, QmsBadgesModule, QmsBannerComponent, QmsBannerConfirmButton, QmsBannerConfirmButtonClick, QmsBannerConfirmComponent, QmsBannerConfirmModule, QmsBannerContent, QmsBannerLoadingComponent, QmsBannerLoadingModule, QmsBannerModule, QmsReportContentPortraitComponent, QmsReportCoverPortraitComponent, QmsReportModule, QmsStatusDropdownComponent, QmsStatusDropdownModule, QmsStatusDropdownOption, QmsStatusDropdownType, QmsStepperComponent, QmsStepperModule, REGIONAL_FOLDER_ICON, REGIONAL_FOLDER_OUTLINED_ICON, RISK_ICON, RelatedConst, RelatedContentComponent, RelatedItemType, RelatedListComponent, RelatedPopupComponent, Result, RiskAnalysis, RiskAnalysisComponent, RiskDanger, RiskListComponent, RiskResult, RiskResultComponent, SaveTemplateComponent, ScrollToSelectedDirective, SelectConst, SelectDialog, SelectIncludeChildrenPopUpComponent, SelectOneDialog, SelectOnePopupData, SelectOption, SelectOptionTypes, SelectPopupData, SelectProcessDocumentPopupComponent, SelectProcessDocumentPopupData, SelectedOption, SelectedProcessDocumentItem, SharedModule, ShowHideSearchResultConst, SideNav, SideNavItem, SidenavComponent, StepModel, TargetType, TargetTypeName, TranslateLibraryService, TreeComponent, TreeConfig, TreeFlatNode, TreeModel, TreeNode$1 as TreeNode, UploadErrorData, en, mixinColor, no, notExceedSize, requiredFileType, ɵ1, SharedMaterialModule as ɵa, QMSCKEditorTemplateComponent as ɵb, QMSCKEditorTreeService as ɵc, LinkAttachmentComponent as ɵd, QMSCKEditorTooltipComponent as ɵe, QMSCKEditorTooltip as ɵf, QMSCKEditorImageMapComponent as ɵg, QMSCKEditorImageMap as ɵh };
+export { AutocompleteOffDirective, BREADCRUMB_DROPDOWN_ICON, BUTTON_TOGGLE_DEFAULT_OPTIONS, BUTTON_TOGGLE_GROUP, BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, BannerType, BpmnService, BreadcrumbNode, ButtonToggleChange, CHECKLIST_ICON, CKEditorEventConst, CKEditorModule, CdkDetailRowDirective, ConfirmDialog, DEPARTMENT_FOLDER_ICON, DEPARTMENT_FOLDER_OUTLINED_ICON, DEVIATION_ICON, DOCUMENT_DEPARTMENT_ICON, DOCUMENT_ENTERPRISE_ICON, DOCUMENT_ICON, DOCUMENT_LOCAL_ICON, DOCUMENT_REGIONAL_ICON, DataType$1 as DataType, DateFormatPipe, DocumentNodeType$1 as DocumentNodeType, ENTERPRISE_FOLDER_ICON, ENTERPRISE_FOLDER_OUTLINED_ICON, FileErrorType, FlowChartConst, FlowchartViewMode, ISelectOneItem, InformationCoverItem, KEYBOARD_DOWN_ICON, KEYBOARD_UP_ICON, LOCAL_FOLDER_ICON, LOCAL_FOLDER_OUTLINED_ICON, LinkAnchor, LinkType, MarginDirective, ModuleType$1 as ModuleType, NORMAL_FOLDER_ICON, NORMAL_FOLDER_OUTLINED_ICON, NewTreeComponent, NewTreeModel, PROCESS_AREA_ICON, PROCESS_AREA_OUTLINED_ICON, PROCESS_ICON, PopupData, ProtocolType, ProtocolTypeName, QMSAnchor, QMSAppBar, QMSAppIconModule, QMSAttachmentListDirective, QMSBreadcrumb, QMSBreadcrumbDirectionIconDirective, QMSBreadcrumbItemDirective, QMSBreadcrumbModule, QMSButton, QMSButtonIcon, QMSButtonModule, QMSButtonToggle, QMSButtonToggleGroup, QMSCKEditorBaseComponent, QMSCKEditorBaseService, QMSCKEditorBpmn, QMSCKEditorBpmnApiService, QMSCKEditorBpmnComponent, QMSCKEditorBpmnTemplate, QMSCKEditorComponent, QMSCKEditorConfirmComponent, QMSCKEditorData, QMSCKEditorDialogData, QMSCKEditorDocumentType, QMSCKEditorFullscreenComponent, QMSCKEditorGlobalService, QMSCKEditorInjector, QMSCKEditorLinkAnchorDocument, QMSCKEditorLinkComponent, QMSCKEditorLinkService, QMSCKEditorLoadTemplateComponent, QMSCKEditorModule, QMSCKEditorPlugin, QMSCKEditorRelatedComponent, QMSCKEditorRelation, QMSCKEditorTemplate, QMSCKEditorTemplateService, QMSCKEditorToastService, QMSCKEditorTreeComponent, QMSCKEdtiorInputData, QMSChipBodyDirective, QMSChipInputChipListDirective, QMSChipInputDirective, QMSChipInputSelectDropWDownDirective, QMSChipInputSelectFieldDirective, QMSChipInputSelectTriggerDirective, QMSCollapseGroupDirective, QMSComment, QMSConfirmDialog, QMSDialogConfig, QMSDrawerContentDirective, QMSDrawerDirective, QMSDrawerHeaderActionDirective, QMSDrawerHeaderDirective, QMSDropdownMenuItem, QMSEditFileNameDialog, QMSEditFileNameDialogModule, QMSFileAttachment, QMSFileUploadDirective, QMSFileUploadDisplayDirective, QMSFileUploadMultipleDirective, QMSFileUploadMultipleDisplayDirective, QMSFileUploadMultipleSelectorDirective, QMSFileUploadSelectorDirective, QMSFormDialog, QMSFormFieldDatePickerDirective, QMSFormFieldDirective, QMSFormFieldTextareaDirective, QMSGroupOptionDirective, QMSIconRegistryService, QMSInputChipDirective, QMSInputClearDirective, QMSList, QMSListExpansion, QMSListExpansionHeader, QMSListHeader, QMSListItem, QMSListLeadingIcon, QMSListLine, QMSListModule, QMSNavigationDrawerComponent, QMSNavigationDrawerModule, QMSNewTreeModule, QMSProcessDocumentItem, QMSRangeSliderDirective, QMSRangeSliderLockUpDirective, QMSRelatedGlobalService, QMSRelatedModule, QMSRichText, QMSRichTextModule, QMSRowDetailDirective, QMSRowExpandDirective, QMSScrolableAttachmentListDirective, QMSScrollbarDirective, QMSSearchFieldDirective, QMSSelectGlobalService, QMSSelectIncludeChildrenModule, QMSSelectOneGlobalService, QMSSelectOneModule, QMSSelectProcessDocumentGlobalService, QMSSelectProcessDocumentModule, QMSSnackbarConfig, QMSSuffixDirective, QMSSuffixFieldDirective, QMSTabGroupAdvancedDirective, QMSTabGroupDirective, QMSTabLabelDirective, QMSTabModule, QMSTableAction, QMSTableActionBlock, QMSTableChildrenDirective, QMSTableDirective, QMSTableExpandDirective, QMSTableModule, QMSTextBlockDirective, QMSTextBlockLine, QMSToolTipComponent, QMSToolTipRendererDirective, QMSTooltipImageDirective, QMSTooltipModule, QMSTreeModule, QMSUploadFileErrorDialog, QMSUploadFileErrorDialogModule, QMSUploadingFileGuard, QmsAngularComponent, QmsAngularModule, QmsAngularService, QmsAppBarComponent, QmsAppBarModule, QmsBadgesComponent, QmsBadgesModule, QmsBannerComponent, QmsBannerConfirmButton, QmsBannerConfirmButtonClick, QmsBannerConfirmComponent, QmsBannerConfirmModule, QmsBannerContent, QmsBannerLoadingComponent, QmsBannerLoadingModule, QmsBannerModule, QmsReportContentPortraitComponent, QmsReportCoverPortraitComponent, QmsReportModule, QmsStatusDropdownComponent, QmsStatusDropdownModule, QmsStatusDropdownOption, QmsStatusDropdownType, QmsStepperComponent, QmsStepperModule, REGIONAL_FOLDER_ICON, REGIONAL_FOLDER_OUTLINED_ICON, RISK_ICON, RelatedConst, RelatedContentComponent, RelatedItemType, RelatedListComponent, RelatedPopupComponent, Result, RiskAnalysis, RiskAnalysisComponent, RiskDanger, RiskListComponent, RiskResult, RiskResultComponent, SaveTemplateComponent, ScrollToSelectedDirective, SelectConst, SelectDialog, SelectIncludeChildrenPopUpComponent, SelectOneDialog, SelectOnePopupData, SelectOption, SelectOptionTypes, SelectPopupData, SelectProcessDocumentPopupComponent, SelectProcessDocumentPopupData, SelectedOption, SelectedProcessDocumentItem, SharedModule, ShowHideSearchResultConst, SideNav, SideNavItem, SidenavComponent, TargetType, TargetTypeName, TranslateLibraryService, TreeComponent, TreeConfig, TreeFlatNode, TreeModel, TreeNode$1 as TreeNode, UploadErrorData, en, mixinColor, no, notExceedSize, requiredFileType, ɵ1, SharedMaterialModule as ɵa, QMSCKEditorTemplateComponent as ɵb, QMSCKEditorTreeService as ɵc, LinkAttachmentComponent as ɵd, QMSCKEditorTooltipComponent as ɵe, QMSCKEditorTooltip as ɵf, QMSCKEditorImageMapComponent as ɵg, QMSCKEditorImageMap as ɵh };
 //# sourceMappingURL=qms-angular.js.map