qms-angular 1.0.71 → 1.0.75

package/fesm2015/qms-angular.js

@@ -40,8 +40,10 @@ import { CKEditorModule as CKEditorModule$1 } from '@ckeditor/ckeditor5-angular'
 import { __awaiter } from 'tslib';
 import * as $$1 from 'jquery';
 import * as _ from 'lodash';
+import { Buffer } from 'buffer';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTabsModule } from '@angular/material/tabs';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
@@ -188,7 +190,24 @@ const en = {
         "INVALID_URL": "Invalid URL",
         "REQUIRED_URL": "URL is required",
         "CLOSE": "Close",
-        "DOCUMENT_PROCESS": "Document / Process"
+        "DOCUMENT_PROCESS": "Document / Process",
+        "UPLOAD_FILE_NOT_VALID_FORMAT": "The file uploaded is invalid format. Supported file formats: {0}",
+        "UPLOAD_FILE_OVERSIZE": "The file uploaded is over the limit size. The limit size is {0}MB",
+        "UPLOAD_FILE_FAILED": "Failed to upload file.",
+        "ASSISTIVE_TEXT": "Assistive text",
+        "WORDS": "Words",
+        "CHARACTERS": "Characters",
+        "SELECT_VIDEO_FROM_ARCHIVE": "Select video from the archive"
+    },
+    "ABOUT": {
+        "ABOUT_CKEDITOR": "About CKEditor",
+        "CKEDITOR5_VERSION": "CKEditor 5 version",
+        "FOR_LICENSING_INFORMATION_PLEASE_VISIT_OUR_WEBSITE": "For licensing information please visit our website",
+        "ALL_RIGHTS_RESERVED": "All rights reserved",
+        "CHECK": "Check",
+        "FOR_HELP": "for help",
+        "CKEDITOR_USERS_GUIDE": "CKEditor User's Guide",
+        "COPYRIGHT": "Copyright ©"
     },
     "BPMN": {
         "DEFAULT": "Default",
@@ -468,7 +487,24 @@ const no = {
         "INVALID_URL": "Ugyldig URL",
         "REQUIRED_URL": "URL er påkrevd",
         "CLOSE": "Close",
-        "DOCUMENT_PROCESS": "Dokument / Prosess"
+        "DOCUMENT_PROCESS": "Dokument / Prosess",
+        "UPLOAD_FILE_NOT_VALID_FORMAT": "Filen som er lastet opp er ugyldig format. Støttede filformater: {0}",
+        "UPLOAD_FILE_OVERSIZE": "Filen som er lastet opp er over grensestørrelsen. Grensestørrelsen er {0}MB",
+        "UPLOAD_FILE_FAILED": "Kunne ikke laste opp filen.",
+        "ASSISTIVE_TEXT": "Hjelpende tekst",
+        "WORDS": "Ord",
+        "CHARACTERS": "Tegn",
+        "SELECT_VIDEO_FROM_ARCHIVE": "Velg video fra arkivet"
+    },
+    "ABOUT": {
+        "ABOUT_CKEDITOR": "Om CKEditor",
+        "CKEDITOR5_VERSION": "CKEditor 5 versjon",
+        "FOR_LICENSING_INFORMATION_PLEASE_VISIT_OUR_WEBSITE": "For lisensieringsinformasjon, besøk vår nettside",
+        "ALL_RIGHTS_RESERVED": "Alle rettigheter er forbeholdt",
+        "CHECK": "Se",
+        "FOR_HELP": "for hjelp",
+        "CKEDITOR_USERS_GUIDE": "brukerhåndboken for CKEditor",
+        "COPYRIGHT": "Opphavsrett ©"
     },
     "BPMN": {
         "DEFAULT": "Standard",
@@ -715,7 +751,7 @@ class QMSComment {
 QMSComment.decorators = [
     { type: Component, args: [{
                 selector: 'qms-comment',
-                template: "<div class=\"qms-comment\" *ngFor=\"let item of sourceLog; let i = index\">\r\n  <mat-card-header *ngIf=\"!item.isDelete\">\r\n    <mat-card-subtitle\r\n      >{{ item.user }} {{ item.date | dateFormat }}\r\n    </mat-card-subtitle>\r\n  </mat-card-header>\r\n  <mat-card-content>\r\n    <div\r\n      qms-scrollbar\r\n      *ngIf=\"!item.isEdit && !item.isDelete\"\r\n      class=\"content\"\r\n      [ngClass]=\"{ secondary: 0 != i % 2 }\"\r\n      [innerHTML]=\"showContent(item.content)\"\r\n    ></div>\r\n    <div class=\"content delete-action-wrap\" *ngIf=\"item.isDelete\">\r\n      <i>{{ LANG.DELETE_MESSAGE_COMMENT }}</i>\r\n      <button qms-btn-text class=\"btn-action\" (click)=\"regretItem(item)\">\r\n        {{ LANG.REGRET }}\r\n      </button>\r\n    </div>\r\n    <mat-form-field *ngIf=\"item.isEdit && !item.isDelete\" qms-form-textarea>\r\n      <textarea\r\n        qms-scrollbar\r\n        class=\"textarea-comment\"\r\n        matInput\r\n        cdkTextareaAutosize\r\n        cdkAutosizeMinRows=\"1\"\r\n        cdkAutosizeMaxRows=\"5\"\r\n        [(ngModel)]=\"item.editedContent\"\r\n      ></textarea>\r\n    </mat-form-field>\r\n  </mat-card-content>\r\n  <mat-card-actions *ngIf=\"item.isDraft && !item.isEdit && !item.isDelete\">\r\n    <a class=\"btn-action\" (click)=\"editContent(item)\"> {{ LANG.EDIT }} </a>\r\n    <a class=\"btn-action ml-20\" (click)=\"removeItem(item)\">{{ LANG.DELETE }}</a>\r\n  </mat-card-actions>\r\n  <mat-card-actions *ngIf=\"item.isEdit\" class=\"edit-action-wrap\">\r\n    <button qms-btn (click)=\"saveEditedContent(item)\">{{ LANG.SAVE }}</button>\r\n    <button qms-btn-text (click)=\"item.isEdit = false\" class=\"ml-10\">\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </mat-card-actions>\r\n</div>\r\n",
+                template: "<div class=\"qms-comment\" *ngFor=\"let item of sourceLog; let i = index\">\r\n  <mat-card-header *ngIf=\"!item.isDelete\">\r\n    <mat-card-subtitle>{{ item.user }} {{ item.date }} </mat-card-subtitle>\r\n  </mat-card-header>\r\n  <mat-card-content>\r\n    <div\r\n      qms-scrollbar\r\n      *ngIf=\"!item.isEdit && !item.isDelete\"\r\n      class=\"content\"\r\n      [ngClass]=\"{ secondary: 0 != i % 2 }\"\r\n      [innerHTML]=\"showContent(item.content)\"\r\n    ></div>\r\n    <div class=\"content delete-action-wrap\" *ngIf=\"item.isDelete\">\r\n      <i>{{ LANG.DELETE_MESSAGE_COMMENT }}</i>\r\n      <button qms-btn-text class=\"btn-action\" (click)=\"regretItem(item)\">\r\n        {{ LANG.REGRET }}\r\n      </button>\r\n    </div>\r\n    <mat-form-field *ngIf=\"item.isEdit && !item.isDelete\" qms-form-textarea>\r\n      <textarea\r\n        qms-scrollbar\r\n        class=\"textarea-comment\"\r\n        matInput\r\n        cdkTextareaAutosize\r\n        cdkAutosizeMinRows=\"1\"\r\n        cdkAutosizeMaxRows=\"5\"\r\n        [(ngModel)]=\"item.editedContent\"\r\n      ></textarea>\r\n    </mat-form-field>\r\n  </mat-card-content>\r\n  <mat-card-actions *ngIf=\"item.isDraft && !item.isEdit && !item.isDelete\">\r\n    <a class=\"btn-action\" (click)=\"editContent(item)\"> {{ LANG.EDIT }} </a>\r\n    <a class=\"btn-action ml-20\" (click)=\"removeItem(item)\">{{ LANG.DELETE }}</a>\r\n  </mat-card-actions>\r\n  <mat-card-actions *ngIf=\"item.isEdit\" class=\"edit-action-wrap\">\r\n    <button qms-btn (click)=\"saveEditedContent(item)\">{{ LANG.SAVE }}</button>\r\n    <button qms-btn-text (click)=\"item.isEdit = false\" class=\"ml-10\">\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </mat-card-actions>\r\n</div>\r\n",
                 host: { 'class': 'qms-comment' },
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 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}.qms-comment{font-family:Open Sans;margin-bottom:1rem;display:block}.qms-comment .mat-card-subtitle{font-size:.75rem;color:rgba(0,0,0,.6)}.qms-comment .mat-card-content .content{padding:10px 16px;background-color:rgba(0,0,0,.04);display:block;border-radius:4px;font-size:.875rem;max-height:125px;overflow-y:auto}.qms-comment .mat-card-content .content.delete-action-wrap{display:flex;justify-content:space-between;align-items:center}.qms-comment .mat-card-content .content.secondary{background-color:rgba(62,87,183,.12)}.qms-comment .mat-card-content .qms-form{width:100%}.qms-comment .btn-action{color:#1954a9;font-weight:600;font-size:13px;cursor:pointer}.qms-comment .textarea-comment{font-size:.875rem}.ml-10{margin-left:10px}.mt-15{margin-top:15px}.ml-20{margin-left:20px}.edit-action-wrap{display:block;margin-top:-10px}"]
@@ -1628,60 +1664,6 @@ MarginDirective.propDecorators = {
     value: [{ type: Input }]
 };
 
-class QMSRangeSliderLockUpDirective {
-    constructor(ele) {
-        this.ele = ele;
-    }
-    ngOnInit() {
-        if (this.ele) {
-            this.ele.nativeElement.classList.add('qms-range-slider-lockup');
-        }
-    }
-}
-QMSRangeSliderLockUpDirective.decorators = [
-    { type: Directive, args: [{
-                selector: 'mat-slider[qms-range-slider-lockup]',
-            },] }
-];
-QMSRangeSliderLockUpDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
-class QMSRangeSliderDirective {
-    constructor(ele) {
-        this.ele = ele;
-    }
-    ngOnInit() {
-        if (this.ele) {
-            this.ele.nativeElement.classList.add('qms-range-slider');
-        }
-    }
-    onMouseUp() {
-        clearTimeout(this.timerId);
-        this.timerId = setTimeout(() => {
-            this.ele.nativeElement.classList.remove('qms-range-slider-active');
-            this.ele.nativeElement.classList.remove('mat-slider-thumb-start');
-        }, 500);
-    }
-    onMouseDown() {
-        clearTimeout(this.timerId);
-        this.ele.nativeElement.classList.add('qms-range-slider-active');
-        this.ele.nativeElement.classList.add('mat-slider-thumb-start');
-    }
-}
-QMSRangeSliderDirective.decorators = [
-    { type: Directive, args: [{
-                selector: 'mat-slider[qms-range-slider]',
-            },] }
-];
-QMSRangeSliderDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-QMSRangeSliderDirective.propDecorators = {
-    onMouseUp: [{ type: HostListener, args: ['mouseup', [],] }],
-    onMouseDown: [{ type: HostListener, args: ['mousedown', [],] }]
-};
-
 class ScrollToSelectedDirective {
     constructor(el, renderer) {
         this.el = el;
@@ -1795,82 +1777,6 @@ QMSSearchFieldDirective.propDecorators = {
     isLoading: [{ type: Input }]
 };
 
-class QMSDrawerContentDirective {
-    constructor(ele) {
-        this.ele = ele;
-    }
-    ngOnInit() {
-        if (this.ele) {
-            this.ele.nativeElement.classList.add('qms-drawer-content');
-        }
-    }
-}
-QMSDrawerContentDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[qms-drawer-content]',
-            },] }
-];
-QMSDrawerContentDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
-class QMSDrawerHeaderActionDirective {
-    constructor(ele) {
-        this.ele = ele;
-    }
-    ngOnInit() {
-        if (this.ele) {
-            this.ele.nativeElement.classList.add('qms-drawer-header__action');
-        }
-    }
-}
-QMSDrawerHeaderActionDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[qms-drawer-header-action]',
-            },] }
-];
-QMSDrawerHeaderActionDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
-class QMSDrawerHeaderDirective {
-    constructor(ele) {
-        this.ele = ele;
-    }
-    ngOnInit() {
-        if (this.ele) {
-            this.ele.nativeElement.classList.add('qms-drawer-header');
-        }
-    }
-}
-QMSDrawerHeaderDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[qms-drawer-header]',
-            },] }
-];
-QMSDrawerHeaderDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
-class QMSDrawerDirective {
-    constructor(ele) {
-        this.ele = ele;
-    }
-    ngOnInit() {
-        if (this.ele) {
-            this.ele.nativeElement.classList.add('qms-drawer');
-        }
-    }
-}
-QMSDrawerDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[qms-drawer]',
-            },] }
-];
-QMSDrawerDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
 class QMSTextBlockLine {
     constructor(elRef, renderer) {
         this.elRef = elRef;
@@ -2783,39 +2689,12 @@ 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 = [
@@ -2837,7 +2716,6 @@ class QMSTableChildrenDirective {
         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');
         }
     }
 }
@@ -2851,16 +2729,6 @@ 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() { }
 }
@@ -2889,7 +2757,7 @@ class CdkDetailRowDirective {
         this.focusClass = 'focus-grid-style';
         this.onRowExpandEvent = new EventEmitter();
     }
-    get expended() {
+    get expanded() {
         return this.opened;
     }
     set cdkDetailRow(value) {
@@ -2910,6 +2778,8 @@ class CdkDetailRowDirective {
     ngOnChanges(changes) {
         this.vcRef.clear();
         if (this.othertRef && this.row) {
+            if (this.opened)
+                this.vcRef.createEmbeddedView(this.tRef, { $implicit: this.row });
             this.vcRef.createEmbeddedView(this.othertRef, { $implicit: this.row });
         }
     }
@@ -2919,13 +2789,17 @@ class CdkDetailRowDirective {
         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');
+                this._el.nativeElement.classList.add('expandable-group');
             }
         }
     }
     onClick() {
         this.toggle();
     }
+    onKeydownHandler(event) {
+        if (event.target == event.currentTarget)
+            this.toggle();
+    }
     onClickItem(event) {
         if (event && event.parentNode && event.parentNode.classList && !event.parentNode.classList.contains(this.focusClass)) {
             const elements = document.getElementsByClassName(this.focusClass);
@@ -2941,25 +2815,13 @@ class CdkDetailRowDirective {
         }
     }
     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 });
-            }
+        if (this.tRef) {
+            if (this.opened)
+                this.vcRef.detach(0);
+            else
+                this.vcRef.createEmbeddedView(this.tRef, { $implicit: this.row }, 0);
+            this.opened = !this.opened;
+            this.onRowExpandEvent.emit(this.opened);
         }
     }
 }
@@ -2974,15 +2836,65 @@ CdkDetailRowDirective.ctorParameters = () => [
 ];
 CdkDetailRowDirective.propDecorators = {
     onRowExpandEvent: [{ type: Output }],
-    expended: [{ type: HostBinding, args: ['class.expanded',] }],
+    expanded: [{ type: HostBinding, args: ['class.qms-row-expanded',] }],
     cdkDetailRow: [{ type: Input }],
     template: [{ type: Input, args: ['cdkDetailRowTpl',] }],
     otherTemplate: [{ type: Input, args: ['cdkotherTemplate',] }],
     onClick: [{ type: HostListener, args: ['click',] }],
+    onKeydownHandler: [{ type: HostListener, args: ['keydown.enter', ['$event'],] }],
     onClickItem: [{ type: HostListener, args: ['document:click', ['$event.target'],] }],
     onKeydown: [{ type: HostListener, args: ['document:keydown', ['$event.target'],] }]
 };
 
+class QMSTableRowDirective {
+    constructor(_el, renderer) {
+        this._el = _el;
+        this.renderer = renderer;
+    }
+    ngAfterViewChecked() {
+        if (!this._rowData.disabled)
+            this.renderer.setAttribute(this._el.nativeElement, 'tabindex', "0");
+        else {
+            let matButtons = this._el.nativeElement.querySelectorAll('button, [tabindex]');
+            for (const [key, value] of Object.entries(matButtons)) {
+                this.renderer.setAttribute(value, "tabindex", "-1");
+            }
+        }
+    }
+    set cdkDetailRow(value) {
+        this._rowData = value;
+    }
+    get disable() {
+        return this._rowData.disabled;
+    }
+    get select() {
+        return this._rowData.selected;
+    }
+    get group() {
+        return this._rowData.childen;
+    }
+    get isDraft() {
+        return this._rowData.isDraft;
+    }
+}
+QMSTableRowDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-table-row]',
+                host: { 'class': 'qms-table-row' }
+            },] }
+];
+QMSTableRowDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 }
+];
+QMSTableRowDirective.propDecorators = {
+    cdkDetailRow: [{ type: Input }],
+    disable: [{ type: HostBinding, args: ['class.qms-table-row-disabled',] }],
+    select: [{ type: HostBinding, args: ['class.qms-table-row-selected',] }],
+    group: [{ type: HostBinding, args: ['class.qms-table-row-group',] }],
+    isDraft: [{ type: HostBinding, args: ['class.qms-table-row-draft',] }]
+};
+
 const ɵ0$2 = { appearance: 'fill' }, ɵ1 = { color: 'none' };
 class QmsAngularModule {
 }
@@ -3014,22 +2926,15 @@ QmsAngularModule.decorators = [
                     QMSFileUploadMultipleDirective,
                     QMSFileUploadMultipleDisplayDirective,
                     QMSFileUploadMultipleSelectorDirective,
-                    QMSRangeSliderDirective,
-                    QMSRangeSliderLockUpDirective,
                     QMSDropdownMenuItem,
                     QMSScrollbarDirective,
                     QMSTextBlockDirective,
                     QMSTextBlockLine,
-                    QMSDrawerDirective,
-                    QMSDrawerHeaderDirective,
-                    QMSDrawerContentDirective,
-                    QMSDrawerHeaderActionDirective,
                     QMSToolTipRendererDirective,
-                    QMSTableExpandDirective,
                     QMSTableDirective,
+                    QMSTableRowDirective,
                     QMSRowDetailDirective,
                     QMSTableChildrenDirective,
-                    QMSRowExpandDirective,
                     CdkDetailRowDirective,
                     QMSCollapseGroupDirective,
                     DateFormatPipe,
@@ -3075,16 +2980,10 @@ QmsAngularModule.decorators = [
                     QMSFileUploadMultipleDirective,
                     QMSFileUploadMultipleDisplayDirective,
                     QMSFileUploadMultipleSelectorDirective,
-                    QMSRangeSliderDirective,
-                    QMSRangeSliderLockUpDirective,
                     QMSDropdownMenuItem,
                     QMSScrollbarDirective,
                     QMSTextBlockDirective,
                     QMSTextBlockLine,
-                    QMSDrawerDirective,
-                    QMSDrawerHeaderDirective,
-                    QMSDrawerContentDirective,
-                    QMSDrawerHeaderActionDirective,
                     QMSToolTipRendererDirective,
                     DateFormatPipe,
                     QMSChipInputDirective,
@@ -3096,11 +2995,10 @@ QmsAngularModule.decorators = [
                     QMSTooltipImageDirective,
                     SelectDialog,
                     QMSAppBar,
-                    QMSTableExpandDirective,
                     QMSTableDirective,
+                    QMSTableRowDirective,
                     QMSTableChildrenDirective,
                     QMSRowDetailDirective,
-                    QMSRowExpandDirective,
                     CdkDetailRowDirective,
                     QMSCollapseGroupDirective
                 ],
@@ -3113,6 +3011,76 @@ QmsAngularModule.decorators = [
             },] }
 ];
 
+class QMSRangeSliderLockUpDirective {
+    constructor(ele) {
+        this.ele = ele;
+    }
+    ngOnInit() {
+        if (this.ele) {
+            this.ele.nativeElement.classList.add('qms-range-slider-lockup');
+        }
+    }
+}
+QMSRangeSliderLockUpDirective.decorators = [
+    { type: Directive, args: [{
+                selector: 'mat-slider[qms-range-slider-lockup]',
+            },] }
+];
+QMSRangeSliderLockUpDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+
+class QMSRangeSliderDirective {
+    constructor(ele) {
+        this.ele = ele;
+    }
+    ngOnInit() {
+        if (this.ele) {
+            this.ele.nativeElement.classList.add('qms-range-slider');
+        }
+    }
+    onMouseUp() {
+        clearTimeout(this.timerId);
+        this.timerId = setTimeout(() => {
+            this.ele.nativeElement.classList.remove('qms-range-slider-active');
+        }, 500);
+    }
+    onMouseDown() {
+        clearTimeout(this.timerId);
+        this.ele.nativeElement.classList.add('qms-range-slider-active');
+    }
+}
+QMSRangeSliderDirective.decorators = [
+    { type: Directive, args: [{
+                selector: 'mat-slider[qms-range-slider]',
+            },] }
+];
+QMSRangeSliderDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+QMSRangeSliderDirective.propDecorators = {
+    onMouseUp: [{ type: HostListener, args: ['mouseup', [],] }],
+    onMouseDown: [{ type: HostListener, args: ['mousedown', [],] }]
+};
+
+class QMSRangeSliderModule {
+}
+QMSRangeSliderModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    QMSRangeSliderDirective,
+                    QMSRangeSliderLockUpDirective
+                ],
+                imports: [
+                    CommonModule
+                ],
+                exports: [
+                    QMSRangeSliderDirective,
+                    QMSRangeSliderLockUpDirective
+                ]
+            },] }
+];
+
 class QMSListLeadingIcon {
 }
 QMSListLeadingIcon.decorators = [
@@ -4382,6 +4350,9 @@ class TreeComponent {
                 this.treeControl.expand(x);
             });
         }
+        setTimeout(() => {
+            this.treeControlNodes.emit(this.treeControl);
+        }, 500);
     }
     getParent(node) {
         const { treeControl } = this;
@@ -4433,15 +4404,12 @@ class TreeComponent {
             this.treeControl.dataNodes[i].disabled = false;
         }
         if (this.disabledList.length) {
-            for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
-                this.disabledList.forEach(x => {
-                    var _a;
-                    if (x.id === this.treeControl.dataNodes[i].id
-                        && (!x.parentId || x.parentId === ((_a = this.treeControl.dataNodes[i]) === null || _a === void 0 ? void 0 : _a.parentId))) {
-                        this.treeControl.dataNodes[i].disabled = true;
-                    }
-                });
-            }
+            this.disabledList.forEach(x => {
+                const index = this.treeControl.dataNodes.findIndex(node => node.id === x.id && (!x.parentId || x.parentId === node.parentId));
+                if (index >= 0) {
+                    this.treeControl.dataNodes[index].disabled = true;
+                }
+            });
         }
         //Selected node with select one
         if (this.disabledList.length && this.treeConfig.selectOne) {
@@ -4475,7 +4443,6 @@ class TreeComponent {
         }
         else {
             this.idCheckIcon = '';
-            this.treeControl.collapseAll();
             this.cdRef.detectChanges();
         }
     }
@@ -4593,10 +4560,7 @@ class TreeComponent {
             this.checklistSelection.toggle(node);
         }
         // process/ document single selected
-        if (this.singleSelectedNode) {
-            this.checkBoxEvent.emit(this.checklistSelection.selected);
-        }
-        else {
+        if (!this.singleSelectedNode) {
             const descendants = this.treeControl.getDescendants(node).filter(item => !item.disabled);
             this.checkSelectedSameNode(descendants, this.descendantsAllSelected(node));
             !this.descendantsAllSelected(node)
@@ -4609,8 +4573,8 @@ class TreeComponent {
                     this.checklistSelection.deselect(element);
                 });
             }
-            this.checkBoxEvent.emit(this.checklistSelection.selected);
         }
+        this.checkBoxEvent.emit(this.checklistSelection.selected);
     }
     todoChildSelectionToggle(node) {
         for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
@@ -4662,7 +4626,6 @@ class TreeComponent {
         });
         setTimeout(() => {
             this.checkBoxEvent.emit(this.checklistSelection.selected);
-            this.treeControlNodes.emit(this.treeControl);
         }, 500);
     }
     todoFolderSelection(nodes) {
@@ -4677,6 +4640,7 @@ class TreeComponent {
             }
         });
         this.checkBoxEvent.emit(this.checklistSelection.selected);
+        this.idCheckIcon = this.idToCheckSelectOne(nodes[0].id, nodes[0].parentId);
     }
     selectNode(node) {
         if (window[RelatedConst$1.IS_DISPLAY_SEARCH_RESULT]) {
@@ -4911,7 +4875,7 @@ class TreeComponent {
         }
     }
     getNodeId(node) {
-        return `_${node.parentId ? node.parentId : ''}_${node.id}_${node.level}`;
+        return `_${node.parentId ? node.parentId.toLowerCase() : ''}_${node.id.toLowerCase()}_${node.level}`;
     }
     getNodeByIdAndParentId(nodeId, parentId) {
         return this.treeControl.dataNodes.find(x => {
@@ -4928,7 +4892,7 @@ 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\"\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",
+                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      [id]=\"getNodeId(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}.mat-checkbox.mat-checkbox-disabled.qms-group-options.mat-checkbox-checked .mat-checkbox-background{background-color:#e0e0e0!important}"]
             },] }
@@ -7074,51 +7038,6 @@ class QMSCKEditorFullscreenComponent {
         this.showHideFullScreen('block', 'show-content-wrapper', '0px', '0px', '2px', '93vh');
     }
     showHideFullScreen(display, className, paddingTop, paddingBottom, marginTopMain, heightIframe) {
-        const sidebar = window.parent.document.getElementById('sidebar_left');
-        if (sidebar) {
-            if (display === 'block') {
-                if (!sidebar.classList.contains('show-sidebar_left')) {
-                    sidebar.classList.add('show-sidebar_left');
-                }
-            }
-            else if (display === 'none') {
-                if (sidebar.classList.contains('show-sidebar_left')) {
-                    sidebar.classList.remove('show-sidebar_left');
-                }
-            }
-        }
-        const topbars = window.parent.document.getElementsByClassName('navbar-fixed-top');
-        if (topbars && topbars.length > 0) {
-            const topbar = topbars[0];
-            topbar.style.display = display;
-        }
-        const contentWrapper = window.parent.document.getElementById('content_wrapper');
-        if (contentWrapper) {
-            contentWrapper.className = className;
-        }
-        const bodies = window.parent.document.getElementsByTagName('body');
-        if (bodies && bodies.length > 0) {
-            const body = bodies[0];
-            body.style.paddingTop = paddingTop;
-            body.style.paddingBottom = paddingBottom;
-            if (display === 'block') {
-                body.classList.remove('sidebar-hidden');
-                body.classList.add('sidebar-ltr');
-            }
-            else if (display === 'none') {
-                body.classList.remove('sidebar-ltr');
-                body.classList.add('sidebar-hidden');
-            }
-        }
-        const main = window.parent.document.getElementById('main');
-        if (main) {
-            main.style.marginTop = marginTopMain;
-        }
-        const iframes = window.parent.document.getElementsByClassName('processIFrameModule');
-        if (iframes && iframes.length > 0) {
-            const iframe = iframes[0];
-            iframe.style.height = heightIframe;
-        }
         const ck = window.document.getElementById('qmsckeditor');
         if (ck) {
             if (display === 'none') {
@@ -7435,6 +7354,9 @@ class QMSCKEditorTreeService extends QMSCKEditorBaseService {
     getProcessList() {
         return this.get('ckeditorTree/GetProcessList');
     }
+    getUploadVideoList(folderId = null) {
+        return this.get('ckeditorTree/GetUploadVideoList', { folderId });
+    }
 }
 QMSCKEditorTreeService.ɵprov = i0.ɵɵdefineInjectable({ factory: function QMSCKEditorTreeService_Factory() { return new QMSCKEditorTreeService(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(QMSCKEditorGlobalService)); }, token: QMSCKEditorTreeService, providedIn: "root" });
 QMSCKEditorTreeService.decorators = [
@@ -7867,6 +7789,9 @@ class QMSCKEditorLinkComponent extends QMSCKEditorBaseComponent {
             this.anchorByName = url.substr(hashIndex + 1, url.length - hashIndex);
             this.anchorTitle = this.data.title;
         }
+        else if (typeId === LinkType.url) {
+            //selectedProtocol
+        }
     }
     onSelectedLinkType() {
         if (this.selectedLink === LinkType.anchorText) {
@@ -8492,24 +8417,87 @@ QMSCKEditorLoadTemplateComponent.ctorParameters = () => [
     { type: String, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
 ];
 
-class UploadAdapter {
-    constructor(loader) {
+class QmsUploadAdapter {
+    constructor(loader, config) {
         this.loader = loader;
+        this.config = config;
+        this.config.imageUploadTypes = this.config.imageUploadTypes || 'png,jpeg,jpg';
+        this.config.maxFileSizeMB = this.config.maxFileSizeMB || 2;
+        if (this.config.imageUploadTypes.indexOf('jpeg') > -1) {
+            this.config.imageUploadTypes += ',jpg';
+        }
+        else if (this.config.imageUploadTypes.indexOf('jpg') > -1) {
+            this.config.imageUploadTypes += ',jpeg';
+        }
+    }
+    abort() {
+        if (this.xhr) {
+            this.xhr.abort();
+        }
+    }
+    _initRequest() {
+        const xhr = this.xhr = new XMLHttpRequest();
+        xhr.open('POST', `${this.config.apiUrl}ckeditorUpload/UploadImage`, true);
+        xhr.responseType = 'json';
+    }
+    _initListeners(resolve, reject, filename) {
+        const xhr = this.xhr;
+        const loader = this.loader;
+        const genericErrorText = `${this.config.LANG.QMSCKEDITOR.FAILED_TO_UPLOAD_FILE}: ${filename}.`;
+        xhr.addEventListener('error', () => reject(genericErrorText));
+        xhr.addEventListener('abort', () => reject());
+        xhr.addEventListener('load', () => {
+            const response = xhr.response;
+            if (!response || response.error) {
+                return reject(response && response.error ? response.error.message : genericErrorText);
+            }
+            resolve({ default: response });
+        });
+        if (xhr.upload) {
+            xhr.upload.addEventListener('progress', evt => {
+                if (evt.lengthComputable) {
+                    loader.uploadTotal = evt.total;
+                    loader.uploaded = evt.loaded;
+                }
+            });
+        }
+    }
+    _sendRequest(file) {
+        const data = new FormData();
+        data.append('file', file, file.name);
+        data.append('name', file.name);
+        this.xhr.send(data);
+    }
+    _getExtension(file) {
+        if (!file.name) {
+            return '';
+        }
+        const filenames = file.name.toLowerCase().split('.');
+        if (filenames.length < 1) {
+            return '';
+        }
+        return filenames[1];
     }
     upload() {
         return this.loader.file
             .then((file) => {
             return new Promise((resolve, reject) => {
-                const myReader = new FileReader();
-                myReader.onloadend = () => {
-                    resolve({ default: myReader.result });
+                const reader = new FileReader();
+                reader.readAsArrayBuffer(file);
+                reader.onload = () => {
+                    const fileExtension = this._getExtension(file);
+                    if (this.config.imageUploadTypes.indexOf(fileExtension) > -1) {
+                        if (file.size > (this.config.maxFileSizeMB * 1024 * 1024)) {
+                            reject(`${this.config.LANG.QMSCKEDITOR.UPLOAD_FILE_OVERSIZE}`.replace('{0}', this.config.maxFileSizeMB.toString()));
+                        }
+                        this._initRequest();
+                        this._initListeners(resolve, reject, file.name);
+                        this._sendRequest(file);
+                    }
+                    else {
+                        reject(`${this.config.LANG.QMSCKEDITOR.UPLOAD_FILE_NOT_VALID_FORMAT}`.replace('{0}', this.config.imageUploadTypes));
+                    }
                 };
-                // if (file.size > 512000) {
-                //   const msg = `${file.name} is more than 500kb. Sorry, it has to be less than or equal to 500kb`;
-                //   QMSCKEditorToastService.error(msg);
-                //   reject();
-                // }
-                myReader.readAsDataURL(file);
             });
         })
             .catch((error) => {
@@ -8537,7 +8525,9 @@ CKEditorEventConst.QMSCK_ABOUT_CKEDITOR_PLUGIN_MSG = "QMSCK_ABOUT_CKEDITOR_PLUGI
 CKEditorEventConst.QMSCK_FLOWCHART_PLUGIN_MSG = 'QMSCK_FLOWCHART_PLUGIN_MSG';
 CKEditorEventConst.QMSCK_FLOWCHART_PLUGIN_RESP = 'QMSCK_FLOWCHART_PLUGIN_RESP';
 CKEditorEventConst.QMSCK_FLOWCHART = 'flowchart';
-CKEditorEventConst.QMSCK_TOGGLE_TOOLBAR_MSG = 'QMSCK_TOGGLE_TOOLBAR_MSG';
+CKEditorEventConst.QMSCK_TOGGLE_TOOLBAR_MSG = 'QMSCK_TOGGLE_TOOLBAR_MSG';
+CKEditorEventConst.QMSCK_BROWSE_VIDEO_MSG = 'QMSCK_BROWSE_VIDEO_MSG';
+CKEditorEventConst.QMSCK_BROWSE_VIDEO_RESP = 'QMSCK_BROWSE_VIDEO_RESP';
 
 var IFRAME_SRC = '//cdn.iframe.ly/api/iframe';
 var API_KEY = 'b499e92e857f435c39c14d';
@@ -12620,6 +12610,21 @@ CKEditorLinkConst.DOCUMENT_PARTIAL_URL = '/document/';
 CKEditorLinkConst.AREA_PARTIAL_URL = '/area/detail/';
 CKEditorLinkConst.PROCESS_PARTIAL_URL = '/process-detail/';
 
+class QMSCKEditorUploadService extends QMSCKEditorBaseService {
+    uploadImage(file) {
+        const formData = new FormData();
+        formData.append('name', file.name);
+        formData.append('file', file);
+        return this.post('ckeditorUpload/UploadImage', formData);
+    }
+}
+QMSCKEditorUploadService.ɵprov = i0.ɵɵdefineInjectable({ factory: function QMSCKEditorUploadService_Factory() { return new QMSCKEditorUploadService(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(QMSCKEditorGlobalService)); }, token: QMSCKEditorUploadService, providedIn: "root" });
+QMSCKEditorUploadService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+
 class ILink {
     constructor() {
         this.target = TargetTypeName.new;
@@ -12631,13 +12636,14 @@ class ILink {
     }
 }
 class QMSCKEditorBpmnComponent extends QMSCKEditorBaseComponent {
-    constructor(dialog, translate, bmpnService, bpmnApiService, linkService, dialogRef, data) {
+    constructor(dialog, translate, bmpnService, bpmnApiService, linkService, uploadService, dialogRef, data) {
         super();
         this.dialog = dialog;
         this.translate = translate;
         this.bmpnService = bmpnService;
         this.bpmnApiService = bpmnApiService;
         this.linkService = linkService;
+        this.uploadService = uploadService;
         this.dialogRef = dialogRef;
         this.data = data;
         this.expandedPanel = true;
@@ -12793,6 +12799,19 @@ class QMSCKEditorBpmnComponent extends QMSCKEditorBaseComponent {
             });
         });
     }
+    dataUrlToFile(dataUrl, filename) {
+        const arr = dataUrl.split(',');
+        if (arr.length < 2) {
+            return undefined;
+        }
+        const mimeArr = arr[0].match(/:(.*?);/);
+        if (!mimeArr || mimeArr.length < 2) {
+            return undefined;
+        }
+        const mime = mimeArr[1];
+        const buff = Buffer.from(arr[1], 'base64');
+        return new File([buff], filename, { type: mime });
+    }
     getImageContent(paper) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve) => {
@@ -12811,8 +12830,10 @@ class QMSCKEditorBpmnComponent extends QMSCKEditorBaseComponent {
             const graphObject = graph.toJSON();
             const id = yield this.saveImageContent(graphObject);
             const imageContent = 'data:image/png;base64,' + (yield this.getImageContent(paper));
+            const file = this.dataUrlToFile(imageContent, `${CKEditorEventConst.QMSCK_BPMN}#${id}`);
+            const imageUrl = yield this.uploadService.uploadImage(file).toPromise();
             const imagemap = this.toImageMap(id, graphObject.cells, clientRect);
-            const result = { key: `${CKEditorEventConst.QMSCK_BPMN}#${id}`, values: imageContent, imagemap: imagemap };
+            const result = { key: `${CKEditorEventConst.QMSCK_BPMN}#${id}`, values: imageUrl, imagemap: imagemap };
             this.dialogRef.close(result);
         });
     }
@@ -13363,6 +13384,7 @@ QMSCKEditorBpmnComponent.ctorParameters = () => [
     { type: BpmnService },
     { type: QMSCKEditorBpmnApiService },
     { type: QMSCKEditorLinkService },
+    { type: QMSCKEditorUploadService },
     { type: MatDialogRef },
     { type: QMSCKEditorBpmnData, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
 ];
@@ -15393,6 +15415,7 @@ class QMSCKEditorImageMapComponent extends QMSCKEditorBaseComponent {
         this.anchorText = '';
         //anchorByName = '';
         this.advisoryTitle = '';
+        this.isImageLoading = false;
         this.isUrlProcessing = false;
         this.naturalImageWidth = 0;
         this.naturalImageHeight = 0;
@@ -15524,8 +15547,10 @@ class QMSCKEditorImageMapComponent extends QMSCKEditorBaseComponent {
     }
     ngAfterViewInit() {
         if (this.myImageRef) {
+            this.isImageLoading = true;
             this.imageListeners.push(this.renderer.listen(this.myImageRef.nativeElement, 'load', () => {
                 this.onImageLoad();
+                this.isImageLoading = false;
             }));
         }
         // Avoid drag&drop of the image
@@ -15560,9 +15585,9 @@ class QMSCKEditorImageMapComponent extends QMSCKEditorBaseComponent {
             }
         });
     }
-    parseLinkUrl(url, defaultProtocolName) {
+    parseLinkUrl(url) {
         const protocol = this.protocolRegex.exec(url);
-        if (protocol) {
+        if (!!protocol) {
             this.processedUrl = url.substr(protocol[0].length);
             this.url = this.processedUrl;
             this.selectedProtocol = protocol[0].toLowerCase();
@@ -15575,9 +15600,7 @@ class QMSCKEditorImageMapComponent extends QMSCKEditorBaseComponent {
         else {
             this.processedUrl = url;
             this.url = this.processedUrl;
-            if (!!this.selectedProtocol) {
-                this.selectedProtocol = defaultProtocolName || ProtocolTypeName.http;
-            }
+            this.selectedProtocol = ProtocolTypeName.other;
         }
     }
     onSelectArea(area) {
@@ -15846,8 +15869,8 @@ class QMSCKEditorImageMapComponent extends QMSCKEditorBaseComponent {
 QMSCKEditorImageMapComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-qmsck-imagemap',
-                template: "<div id=\"qmsckeditor-imagemap\" class=\"qmsckeditor qmsckeditor__imagemap__container\">\r\n    <div id=\"qmsckeditor-imagemap-header\">\r\n        <span id=\"qmsckeditor-imagemap-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\r\n            (click)=\"onCloseDialog()\">\r\n            <mat-icon>close</mat-icon>\r\n        </span>\r\n        <div id=\"qmsckeditor-imagemap-header_002\" mat-dialog-content>\r\n            <h2 id=\"qmsckeditor-imagemap_002_001\">\r\n                {{ LANG.QMSCKEDITOR.IMAGE_MAP_PROPERTIES }}\r\n            </h2>\r\n        </div>\r\n    </div>\r\n    <div id=\"qmsckeditor-imagemap-content\">\r\n        <div id=\"qmsckeditor-imagemap-content_001\" class=\"col-12 mt-1 pl-2 pr-2\">\r\n            <mat-expansion-panel id=\"qmsckeditor-imagemap-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\r\n                <div id=\"qmsckeditor-imagemap-panel_001\">\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_001\" class=\"qmsckeditor__imagemap__information\">\r\n                        <form [formGroup]=\"imageMapFormGroup\">\r\n                            <div class=\"row\">\r\n                                <div class=\"col-9\">\r\n                                    <mat-button-toggle-group [(ngModel)]=\"selectedMode\" formControlName=\"modeList\"\r\n                                        (change)=\"onModeChange($event)\">\r\n                                        <mat-button-toggle *ngFor=\"let mode of modes\" [value]=\"mode.id\"\r\n                                            [matTooltip]=\"mode.name\">\r\n                                            <mat-icon color=\"red\" [svgIcon]=\"mode.icon\" aria-hidden=\"true\">\r\n                                            </mat-icon>\r\n                                        </mat-button-toggle>\r\n                                    </mat-button-toggle-group>\r\n                                    <span style=\"margin-left: 15px;\" #myStatus></span>\r\n                                </div>\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ZOOM }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedZoom\" formControlName=\"zoomList\"\r\n                                            (ngModelChange)=\"onZoomChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let zoomType of zoomTypes\" [value]=\"zoomType.id\">\r\n                                                {{ zoomType.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedLinkType\" formControlName=\"linkTypeList\"\r\n                                            (ngModelChange)=\"onLinkTypeChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\r\n                                                {{ link.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-3\" *ngIf=\"selectedLinkType === 0\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\"\r\n                                            (ngModelChange)=\"onTargetChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\r\n                                                {{ target.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\r\n                                *ngIf=\"selectedLinkType === 1\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorTextList\"\r\n                                            (ngModelChange)=\"onAnchorTextChange()\">\r\n                                            <mat-option *ngFor=\"let editorAnchor of editorAnchors\"\r\n                                                [value]=\"editorAnchor.anchorValue\" disableOptionCentering>\r\n                                                {{ editorAnchor.viewValue }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\r\n                                *ngIf=\"selectedLinkType === 0\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\"\r\n                                            (ngModelChange)=\"onProtocolChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let protocol of protocols\" [value]=\"protocol.id\">\r\n                                                {{ protocol.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-5\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\r\n                                        <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\"\r\n                                            (ngModelChange)=\"onUrlChange()\" (keyup)=\"onUrlKeyup()\" />\r\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('required')\">{{\r\n                                            LANG.QMSCKEDITOR.REQUIRED_URL }}\r\n                                        </mat-error>\r\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('invalidURL')\">{{\r\n                                            LANG.QMSCKEDITOR.INVALID_URL }}</mat-error>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-4\">\r\n                                    <div class=\"row button__groups\">\r\n                                        <div class=\"col-6\">\r\n                                            <button class=\"save\" mat-stroked-button (click)=\"attachment()\">\r\n                                                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\r\n                                            </button>\r\n                                        </div>\r\n                                        <div class=\"col-6\">\r\n                                            <button class=\"save\" mat-stroked-button (click)=\"eHandbook(false, false)\">\r\n                                                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n                                            </button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </form>\r\n                    </div>\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_002\" class=\"qmsckeditor__imagemap__map\">\r\n                        <img #myImage [src]=\"imageMapData.imageUrl\">\r\n                    </div>\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_003\" class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4\">\r\n                        <div class=\"col-4 pr-0\">\r\n                            <button class=\"save\" mat-flat-button (click)=\"removeMap()\">\r\n                                {{ LANG.QMSCKEDITOR.REMOVE_MAP }}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"col-4 pr-0\">\r\n                            <button class=\"save\" mat-flat-button (click)=\"save()\">\r\n                                {{ LANG.QMSCKEDITOR.SAVE }}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"col-4 pl-0\">\r\n                            <button class=\"cancel\" mat-flat-button (click)=\"cancel()\">\r\n                                {{ LANG.QMSCKEDITOR.CANCEL }}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </mat-expansion-panel>\r\n        </div>\r\n    </div>\r\n</div>",
-                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}.qmsckeditor__imagemap__container .mat-form-field{width:100%}.qmsckeditor__imagemap__container .qmsckeditor__imagemap__information{position:relative}.qmsckeditor__imagemap__container .qmsckeditor__imagemap__map{overflow:auto;width:800px;min-height:371px;position:relative;max-height:460px}.qmsckeditor__imagemap__container .mat-button-toggle-checked{border:1px solid #000!important}.qmsckeditor__imagemap__container .hidden{visibility:hidden}"]
+                template: "<div id=\"qmsckeditor-imagemap\" class=\"qmsckeditor qmsckeditor__imagemap__container\">\r\n    <div id=\"qmsckeditor-imagemap-header\">\r\n        <span id=\"qmsckeditor-imagemap-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\r\n            (click)=\"onCloseDialog()\">\r\n            <mat-icon>close</mat-icon>\r\n        </span>\r\n        <div id=\"qmsckeditor-imagemap-header_002\" mat-dialog-content>\r\n            <h2 id=\"qmsckeditor-imagemap_002_001\">\r\n                {{ LANG.QMSCKEDITOR.IMAGE_MAP_PROPERTIES }}\r\n            </h2>\r\n        </div>\r\n    </div>\r\n    <div id=\"qmsckeditor-imagemap-content\">\r\n        <div id=\"qmsckeditor-imagemap-content_001\" class=\"col-12 mt-1 pl-2 pr-2\">\r\n            <mat-expansion-panel id=\"qmsckeditor-imagemap-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\r\n                <div id=\"qmsckeditor-imagemap-panel_001\">\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_001\" class=\"qmsckeditor__imagemap__information\">\r\n                        <form [formGroup]=\"imageMapFormGroup\">\r\n                            <div class=\"row\">\r\n                                <div class=\"col-9\">\r\n                                    <mat-button-toggle-group [(ngModel)]=\"selectedMode\" formControlName=\"modeList\"\r\n                                        (change)=\"onModeChange($event)\">\r\n                                        <mat-button-toggle *ngFor=\"let mode of modes\" [value]=\"mode.id\"\r\n                                            [matTooltip]=\"mode.name\">\r\n                                            <mat-icon color=\"red\" [svgIcon]=\"mode.icon\" aria-hidden=\"true\">\r\n                                            </mat-icon>\r\n                                        </mat-button-toggle>\r\n                                    </mat-button-toggle-group>\r\n                                    <span style=\"margin-left: 15px;\" #myStatus></span>\r\n                                </div>\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ZOOM }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedZoom\" formControlName=\"zoomList\"\r\n                                            (ngModelChange)=\"onZoomChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let zoomType of zoomTypes\" [value]=\"zoomType.id\">\r\n                                                {{ zoomType.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedLinkType\" formControlName=\"linkTypeList\"\r\n                                            (ngModelChange)=\"onLinkTypeChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\r\n                                                {{ link.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-3\" *ngIf=\"selectedLinkType === 0\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\"\r\n                                            (ngModelChange)=\"onTargetChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\r\n                                                {{ target.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\r\n                                *ngIf=\"selectedLinkType === 1\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorTextList\"\r\n                                            (ngModelChange)=\"onAnchorTextChange()\">\r\n                                            <mat-option *ngFor=\"let editorAnchor of editorAnchors\"\r\n                                                [value]=\"editorAnchor.anchorValue\" disableOptionCentering>\r\n                                                {{ editorAnchor.viewValue }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\r\n                                *ngIf=\"selectedLinkType === 0\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\"\r\n                                            (ngModelChange)=\"onProtocolChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let protocol of protocols\" [value]=\"protocol.id\">\r\n                                                {{ protocol.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-5\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\r\n                                        <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\"\r\n                                            (ngModelChange)=\"onUrlChange()\" (keyup)=\"onUrlKeyup()\" />\r\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('required')\">{{\r\n                                            LANG.QMSCKEDITOR.REQUIRED_URL }}\r\n                                        </mat-error>\r\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('invalidURL')\">{{\r\n                                            LANG.QMSCKEDITOR.INVALID_URL }}</mat-error>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-4\">\r\n                                    <div class=\"row button__groups\">\r\n                                        <div class=\"col-6\">\r\n                                            <button class=\"save\" mat-stroked-button (click)=\"attachment()\">\r\n                                                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\r\n                                            </button>\r\n                                        </div>\r\n                                        <div class=\"col-6\">\r\n                                            <button class=\"save\" mat-stroked-button (click)=\"eHandbook(false, false)\">\r\n                                                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n                                            </button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </form>\r\n                    </div>\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_002\" class=\"qmsckeditor__imagemap__map\">\r\n                        <img #myImage [src]=\"imageMapData.imageUrl\">\r\n                        <mat-spinner diameter=\"40\" mode=\"indeterminate\" *ngIf=\"isImageLoading\"></mat-spinner>\r\n                    </div>\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_003\" class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4\">\r\n                        <div class=\"col-4 pr-0\">\r\n                            <button class=\"save\" mat-flat-button (click)=\"removeMap()\">\r\n                                {{ LANG.QMSCKEDITOR.REMOVE_MAP }}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"col-4 pr-0\">\r\n                            <button class=\"save\" mat-flat-button (click)=\"save()\">\r\n                                {{ LANG.QMSCKEDITOR.SAVE }}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"col-4 pl-0\">\r\n                            <button class=\"cancel\" mat-flat-button (click)=\"cancel()\">\r\n                                {{ LANG.QMSCKEDITOR.CANCEL }}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </mat-expansion-panel>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}::ng-deep .qmsckeditor__imagemap__container .mat-form-field{width:100%}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__information{position:relative}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__map{overflow:auto;width:800px;min-height:371px;position:relative;max-height:460px;display:flex;align-items:flex-start}::ng-deep .qmsckeditor__imagemap__container .mat-button-toggle-checked{border:1px solid #000!important}::ng-deep .qmsckeditor__imagemap__container .hidden{visibility:hidden}"]
             },] }
 ];
 QMSCKEditorImageMapComponent.ctorParameters = () => [
@@ -15893,7 +15916,7 @@ class QMSCKEditorTooltipComponent extends QMSCKEditorBaseComponent {
                 this.LANG = this.translate.getObjectLang(res);
             }
         });
-        this.editorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(',heading,|,fontsize,fontfamily,fontColor,fontBackgroundColor,|,bold,italic,underline,strikethrough,|,alignment,|,bulletedList,numberedList,|,outdent,indent,|,subscript,superscript,|,undo,redo,|,specialCharacters,blockQuote,insertTable,|,link,anchor,|,timestamp,|,removeformat');
+        this.editorConfig = CKEditorCommonFunctions.getCKEditorConfiguration('heading,|,fontsize,fontfamily,fontColor,fontBackgroundColor,|,bold,italic,underline,strikethrough,|,alignment,|,bulletedList,numberedList,|,outdent,indent,|,subscript,superscript,|,undo,redo,|,specialCharacters,blockQuote,insertTable,|,link,anchor,|,timestamp,|,removeformat');
     }
     ngAfterViewChecked() {
         this.cdr.detectChanges();
@@ -15929,7 +15952,7 @@ class QMSCKEditorTooltipComponent extends QMSCKEditorBaseComponent {
 QMSCKEditorTooltipComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-qmsck-tooltip',
-                template: "<div\r\n  id=\"qmsckeditor-tooltip\"\r\n  class=\"qmsckeditor qmsckeditor__tooltip__container\"\r\n>\r\n  <div id=\"qmsckeditor-tooltip-header\">\r\n    <span\r\n      id=\"qmsckeditor-tooltip-header_001\"\r\n      mat-icon-button\r\n      class=\"qmsckeditor button__close\"\r\n      (click)=\"onCloseDialog()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmsckeditor-tooltip-header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor-tooltip_002_001\">\r\n        {{ LANG.QMSCKEDITOR.INSERT_TOOLTIP }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"tooltipFormGroup\">\r\n    <div\r\n      id=\"qmsckeditor-tooltip-content\"\r\n      class=\"qmsckeditor tooltip-content height\"\r\n    >\r\n      <div id=\"qmsckeditor-tooltip-content_001\" class=\"col-12 mt-1 pl-2 pr-2\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor-tooltip-panel\"\r\n          [expanded]=\"true\"\r\n          (opened)=\"(true)\"\r\n          (closed)=\"(false)\"\r\n        >\r\n          <div id=\"qmsckeditor-tooltip-panel_001\">\r\n            <div id=\"qmsckeditor-tooltip-panel_001_001\">\r\n              <mat-form-field class=\"col-12 pl-0 pr-0\" appearance=\"fill\">\r\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\r\n                <input\r\n                  matInput\r\n                  [(ngModel)]=\"tooltip.text\"\r\n                  formControlName=\"title\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n            <div id=\"qmsckeditor-tooltip-panel_001_002\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.CONTENT }}</mat-label>\r\n              <div class=\"qmsckeditor_container col-12 pl-0 pr-0\">\r\n                <ckeditor\r\n                  class=\"qms-ckeditor\"\r\n                  [(editor)]=\"editor\"\r\n                  [config]=\"editorConfig\"\r\n                  (ready)=\"onReady($event)\"\r\n                  [(ngModel)]=\"tooltip.content\"\r\n                  (change)=\"onChanged($event)\"\r\n                  (blur)=\"onBlur($event)\"\r\n                  formControlName=\"content\"\r\n                >\r\n                </ckeditor>\r\n              </div>\r\n            </div>\r\n            <div\r\n              id=\"qmsckeditor-tooltip-panel_001_003\"\r\n              class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4\"\r\n            >\r\n              <div class=\"col-6 pr-0\">\r\n                <button\r\n                  class=\"save\"\r\n                  mat-flat-button\r\n                  (click)=\"saveTooltip()\"\r\n                  [disabled]=\"tooltipFormGroup.invalid\"\r\n                >\r\n                  {{ LANG.QMSCKEDITOR.SAVE }}\r\n                </button>\r\n              </div>\r\n              <div class=\"col-6 pl-0\">\r\n                <button\r\n                  class=\"cancel\"\r\n                  mat-flat-button\r\n                  (click)=\"cancelTooltip()\"\r\n                >\r\n                  {{ LANG.QMSCKEDITOR.CANCEL }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>\r\n",
+                template: "<div id=\"qmsckeditor-tooltip\" class=\"qmsckeditor qmsckeditor__tooltip__container\">\r\n  <div id=\"qmsckeditor-tooltip-header\">\r\n    <span id=\"qmsckeditor-tooltip-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\r\n      (click)=\"onCloseDialog()\">\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmsckeditor-tooltip-header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor-tooltip_002_001\">\r\n        {{ LANG.QMSCKEDITOR.INSERT_TOOLTIP }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"tooltipFormGroup\">\r\n    <div id=\"qmsckeditor-tooltip-content\" class=\"qmsckeditor tooltip-content height\">\r\n      <div id=\"qmsckeditor-tooltip-content_001\" class=\"col-12 mt-1 pl-2 pr-2\">\r\n        <mat-expansion-panel id=\"qmsckeditor-tooltip-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\r\n          <div id=\"qmsckeditor-tooltip-panel_001\">\r\n            <div id=\"qmsckeditor-tooltip-panel_001_001\">\r\n              <mat-form-field class=\"col-12 pl-0 pr-0\" appearance=\"fill\">\r\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\r\n                <input matInput [(ngModel)]=\"tooltip.text\" formControlName=\"title\" />\r\n              </mat-form-field>\r\n            </div>\r\n            <div id=\"qmsckeditor-tooltip-panel_001_002\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.CONTENT }}</mat-label>\r\n              <div class=\"qmsckeditor_container col-12 pl-0 pr-0\">\r\n                <ckeditor class=\"qms-ckeditor\" [(editor)]=\"editor\" [config]=\"editorConfig\" (ready)=\"onReady($event)\"\r\n                  [(ngModel)]=\"tooltip.content\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\r\n                  formControlName=\"content\">\r\n                </ckeditor>\r\n              </div>\r\n            </div>\r\n            <div id=\"qmsckeditor-tooltip-panel_001_003\" class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4\">\r\n              <div class=\"col-6 pr-0\">\r\n                <button class=\"save\" mat-flat-button (click)=\"saveTooltip()\" [disabled]=\"tooltipFormGroup.invalid\">\r\n                  {{ LANG.QMSCKEDITOR.SAVE }}\r\n                </button>\r\n              </div>\r\n              <div class=\"col-6 pl-0\">\r\n                <button class=\"cancel\" mat-flat-button (click)=\"cancelTooltip()\">\r\n                  {{ LANG.QMSCKEDITOR.CANCEL }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>",
                 styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}.qmsckeditor__tooltip__container .mat-form-field{width:100%}.qmsckeditor__tooltip__container textarea.mat-input-element{min-height:150px}"]
             },] }
 ];
@@ -15940,15 +15963,49 @@ QMSCKEditorTooltipComponent.ctorParameters = () => [
     { type: QMSCKEditorTooltip, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
 ];
 
-//import { CKEditor5 } from '@ckeditor/ckeditor5-angular/ckeditor';
+class QMSCKEditorAboutComponent extends QMSCKEditorBaseComponent {
+    constructor(translate, dialogRef, data) {
+        super();
+        this.translate = translate;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.currentVersion = data;
+    }
+    ngOnInit() {
+        this.translate.getLanguageSubject$.pipe(takeUntil(this.ngUnsubcribe)).subscribe((res) => {
+            if (res) {
+                this.LANG = this.translate.getObjectLang(res);
+            }
+        });
+        this.currentYear = new Date().getFullYear();
+    }
+    onCloseDialog() {
+        this.dialogRef.close();
+    }
+}
+QMSCKEditorAboutComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-about-ckeditor',
+                template: "<div id=\"qmsckeditor-about\" class=\"qmsckeditor qmsckeditor__about__container\">\r\n    <div id=\"qmsckeditor-about-header\">\r\n        <span id=\"qmsckeditor-about-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\r\n            (click)=\"onCloseDialog()\">\r\n            <mat-icon>close</mat-icon>\r\n        </span>\r\n        <div id=\"qmsckeditor-about-header_002\" mat-dialog-content>\r\n            <h2 id=\"qmsckeditor-about_002_001\">\r\n                {{ LANG.ABOUT.ABOUT_CKEDITOR }}\r\n            </h2>\r\n        </div>\r\n    </div>\r\n    <div id=\"qmsckeditor-about-content\">\r\n        <div class=\"col-12 qmsckeditor__about__logo__container\">\r\n            <img class=\"qmsckeditor__about__logo\" src=\"../../../../assets/images/ckeditor5.svg\" alt=\"CKEditor logo\">\r\n        </div>\r\n        <div class=\"col-12\">\r\n            <p>{{LANG.ABOUT.CKEDITOR5_VERSION}} {{currentVersion}}.<br><a target=\"_blank\"\r\n                    href=\"https://ckeditor.com/\">https://ckeditor.com</a></p>\r\n            <p>{{LANG.ABOUT.CHECK}} <a target=\"_blank\"\r\n                    href=\"https://ckeditor.com/docs/\">{{LANG.ABOUT.CKEDITOR_USERS_GUIDE}}</a> {{LANG.ABOUT.FOR_HELP}}.\r\n            </p>\r\n            <p>{{LANG.ABOUT.FOR_LICENSING_INFORMATION_PLEASE_VISIT_OUR_WEBSITE}}:<br><a target=\"_blank\"\r\n                    href=\"https://ckeditor.com/legal/ckeditor-oss-license/\">https://ckeditor.com/legal/ckeditor-oss-license/</a>\r\n            </p>\r\n            <p>{{LANG.ABOUT.COPYRIGHT}} 2003-{{currentYear}}, <a target=\"_blank\"\r\n                    href=\"https://cksource.com/\">CKSource</a> - Frederico Knabben.\r\n                <br>{{LANG.ABOUT.ALL_RIGHTS_RESERVED}}.\r\n            </p>\r\n        </div>\r\n        <div class=\"col-12\">\r\n            <button mat-stroked-button class=\"qmsckeditor__about__button\" (click)=\"onCloseDialog()\">\r\n                {{ LANG.QMSCKEDITOR.CLOSE }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>",
+                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}.qmsckeditor__about__container .qmsckeditor__about__logo__container{display:flex;justify-content:center;margin-bottom:10px}.qmsckeditor__about__container .qmsckeditor__about__logo{height:64px}.qmsckeditor__about__container .qmsckeditor__about__button{float:right}"]
+            },] }
+];
+QMSCKEditorAboutComponent.ctorParameters = () => [
+    { type: TranslateLibraryService },
+    { type: MatDialogRef },
+    { type: String, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
+
 class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
     /**
      * Constructor
      */
-    constructor(dialog, globalService, qmsCKEditorFullscreenComponent, renderer, elRef) {
+    constructor(dialog, translate, globalService, treeService, qmsCKEditorFullscreenComponent, renderer, elRef) {
         super();
         this.dialog = dialog;
+        this.translate = translate;
         this.globalService = globalService;
+        this.treeService = treeService;
         this.qmsCKEditorFullscreenComponent = qmsCKEditorFullscreenComponent;
         this.renderer = renderer;
         this.elRef = elRef;
@@ -15959,9 +16016,6 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
     }
     onMessage(event) {
         switch (event.data.eventName) {
-            case this.ckEditorEventConst.QMSCK_FULLSCREEN_PLUGIN_MSG:
-                this.fullscreenEventHandling();
-                break;
             case this.ckEditorEventConst.QMSCK_TEMPLATE_PLUGIN_MSG:
                 this.templateEventHandling();
                 break;
@@ -15980,9 +16034,15 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
             case this.ckEditorEventConst.QMSCK_BPMN_PLUGIN_MSG:
                 this.bpmnEventHandling(event.data.value);
                 break;
+            case this.ckEditorEventConst.QMSCK_ABOUT_CKEDITOR_PLUGIN_MSG:
+                this.aboutCKEditorEventHandling(event.data.value);
+                break;
             case this.ckEditorEventConst.QMSCK_TOGGLE_TOOLBAR_MSG:
                 this.toggleToolbarEventHandling();
                 break;
+            case this.ckEditorEventConst.QMSCK_BROWSE_VIDEO_MSG:
+                this.browseVideoEventHandling(event.data.value);
+                break;
             default:
                 break;
         }
@@ -15990,6 +16050,11 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
     ngOnInit() {
         this.name = 'CKEditor custom build';
         this.ckEditor = this.qmsckPlugin.pluginObject;
+        this.translate.getLanguageSubject$.pipe(takeUntil(this.ngUnsubcribe)).subscribe((res) => {
+            if (res) {
+                this.LANG = this.translate.getObjectLang(res);
+            }
+        });
         this.ckeditorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(this.qmsckPlugin.itemToolbar);
         this.globalService.setApiUrl(this.qmsckData.apiUrl);
         if (this.isEnabledMathtypeConfig()) {
@@ -16001,6 +16066,15 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         if (this.isEnabledToggleToolbar()) {
             this.addToggleToolbarConfig();
         }
+        if (this.isEnabledWProofreader()) {
+            this.addWProofreaderConfig();
+        }
+        if (this.isEnabledTOCToolbar()) {
+            this.addToggleTOCConfig();
+        }
+        if (this.isEnabledFullScreenConfig()) {
+            this.addFullScreenConfig();
+        }
     }
     ngOnDestroy() {
         if (this.editorInstance) {
@@ -16018,6 +16092,23 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
             this.renderer.addClass(this.elRef.nativeElement, 'ck-disabled');
         }
     }
+    isEnabledWProofreader() {
+        const pattern = /(wproofreader)/gmi;
+        return !!this.qmsckData.wproofreader
+            && !!this.qmsckData.wproofreader.srcUrl
+            && !!this.qmsckPlugin.itemToolbar
+            && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
+    }
+    addWProofreaderConfig() {
+        const wproofreaderConfig = {
+            wproofreader: Object.assign({}, this.qmsckData.wproofreader)
+        };
+        if (!this.qmsckData.wproofreader.serviceId || this.qmsckData.wproofreader.serviceId.length == 0) {
+            //Fallback value of serviceId property to demo serviceId
+            this.qmsckData.wproofreader.serviceId = '1:KpkvQ2-6KNUj-L1W3u2-C9j0K1-Zv2tY1-CfDOx-WfGRg2-qXtci-YyyE34-j09H42-b0aCt3-d9a';
+        }
+        this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, wproofreaderConfig);
+    }
     isEnabledToggleToolbar() {
         const pattern = /(toggleToolbar)/gmi;
         return !!this.qmsckData.toggleToolbar
@@ -16033,6 +16124,35 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         };
         this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, toggleToolbarConfig);
     }
+    isEnabledFullScreenConfig() {
+        const pattern = /(qmsFullscreen)/gmi;
+        return !!this.qmsckPlugin.itemToolbar
+            && !!this.qmsckData.fullScreenClass
+            && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
+    }
+    addFullScreenConfig() {
+        const fullScreenConfig = {
+            fullScreenConfig: {
+                class: this.qmsckData.fullScreenClass
+            }
+        };
+        this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, fullScreenConfig);
+    }
+    isEnabledTOCToolbar() {
+        const pattern = /(tableOfContents)/gmi;
+        return !!this.qmsckData.tableOfContentHeadings
+            && !!this.qmsckPlugin.itemToolbar
+            && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
+    }
+    addToggleTOCConfig() {
+        const items = this.qmsckData.tableOfContentHeadings.split(',');
+        const tableOfContents = {
+            tableOfContents: {
+                supportedHeadings: items
+            }
+        };
+        this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, tableOfContents);
+    }
     isEnabledTimestampConfig() {
         const pattern = /(timestamp)/gmi;
         return !!this.qmsckData.timestampFormat
@@ -16094,33 +16214,22 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         this.initEditor(editor);
     }
     initEditor(editor) {
+        const imageUploadTypes = editor.config.get('image.upload.types');
+        const maxFileSizeMB = this.qmsckData.maxFileSizeMB;
+        const config = { apiUrl: this.qmsckData.apiUrl, LANG: this.LANG, imageUploadTypes, maxFileSizeMB };
+        editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
+            return new QmsUploadAdapter(loader, config);
+        };
         editor.ui
             .getEditableElement()
             .parentElement.insertBefore(editor.ui.view.toolbar.element, editor.ui.getEditableElement());
-        editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
-            return new UploadAdapter(loader);
-        };
         // Apped Wordcount to CKeditor
         editor.plugins.get('WordCount').on('update', (evt, stats) => {
             // Prints the current content statistics.
             const wordsBox = document.querySelector('.wordcount-content');
-            wordsBox.textContent = `Words: ${stats.words}  / Characters: ${stats.characters}`;
+            wordsBox.textContent = `${this.LANG.QMSCKEDITOR.WORDS}: ${stats.words} / ${this.LANG.QMSCKEDITOR.CHARACTERS}: ${stats.characters}`;
         });
     }
-    /**
-     * Full screen - Restore down
-     */
-    fullscreenEventHandling() {
-        const ck = window.document.getElementById('qmsckeditor');
-        if (ck) {
-            if (!ck.classList.contains('qmsckeditor__fullscreen')) {
-                this.qmsCKEditorFullscreenComponent.showFullScreen();
-            }
-            else {
-                this.qmsCKEditorFullscreenComponent.hideFullScreen();
-            }
-        }
-    }
     /**
      * Add template - Load template
      */
@@ -16203,7 +16312,7 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         data.ckEditor = this.qmsckPlugin.pluginObject;
         const dialogTemplate = this.dialog.open(QMSCKEditorTooltipComponent, {
             width: '650px',
-            height: '550px',
+            height: '555px',
             data,
             disableClose: true
         });
@@ -16278,6 +16387,21 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
             }
         });
     }
+    /*
+     About CKEditor
+   */
+    aboutCKEditorEventHandling(version) {
+        const dialogTemplate = this.dialog.open(QMSCKEditorAboutComponent, {
+            width: '500px',
+            data: version,
+            disableClose: true
+        });
+        dialogTemplate
+            .afterClosed()
+            .pipe(takeUntil(this.ngUnsubcribe))
+            .subscribe((result) => {
+        });
+    }
     /*
       Toolbar toggle
     */
@@ -16336,11 +16460,84 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
             }
         }
     }
+    /**
+     * Browse Video
+     */
+    browseVideoEventHandling(value) {
+        this.treeService
+            .getUploadVideoList()
+            .pipe(takeUntil(this.ngUnsubcribe))
+            .subscribe((response) => {
+            const videos = response || [];
+            const config = {
+                allowSelectFolder: false,
+                areaOfCurrentProcess: '',
+                showCheckBox: true,
+                allowMultipleCheck: value.allowMultipleFiles,
+                onlyCheckBoxForChild: true,
+                moduleId: DataType$2.document,
+                openIcon: 'folder_open',
+                openIconColor: '#1954A9',
+                closeIcon: 'folder_filled',
+                closeIconColor: '#4acaff',
+                itemIcon: 'insert_drive_file',
+                itemIconPath: '',
+                itemIconBase64: '',
+                singleSelectedNode: true,
+                expandAll: true
+            };
+            const data = new PopupData();
+            data.moduleId = 2;
+            data.moduleName = this.LANG.QMSCKEDITOR.SELECT_VIDEO_FROM_ARCHIVE;
+            data.treeData1 = videos.map((item) => {
+                return {
+                    rootId: item.rootId,
+                    parentId: item.parentId,
+                    rootName: item.rootName,
+                    subName: item.subName,
+                    childId: item.childId,
+                    childName: item.childName,
+                    statusId: item.statusId,
+                    displayId: item.displayId,
+                    contentType: item.contentType,
+                    url: item.url
+                };
+            });
+            data.treeData2 = [];
+            data.treeConfig1 = config;
+            const dialogRef = this.dialog.open(RelatedPopupComponent, {
+                minWidth: '450px',
+                maxWidth: '800px',
+                minHeight: '620px',
+                data,
+                panelClass: 'qmsckeditor-browse-video-popup'
+            });
+            setTimeout(() => {
+                const searchBox = window.document.querySelector('.qmsckeditor-browse-video-popup #qmslib_related_popup_search');
+                if (searchBox) {
+                    searchBox.style.display = 'none';
+                }
+            }, 100);
+            dialogRef
+                .afterClosed()
+                .subscribe((result) => {
+                if (result) {
+                    const ids = result.reduce((result, item) => {
+                        result[item.id.toString()] = item.id;
+                        return result;
+                    }, {});
+                    const urls = videos.filter(i => i.childId && !!ids[i.childId.toString()]).map(i => i.url);
+                    const evt = new CustomEvent(this.ckEditorEventConst.QMSCK_BROWSE_VIDEO_RESP, { detail: { urls: urls } });
+                    window.dispatchEvent(evt);
+                }
+            });
+        });
+    }
 }
 QMSCKEditorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-ckeditor',
-                template: "<div id=\"qmsckeditor\" class=\"qmsckeditor_container\">\r\n  <ckeditor class=\"qms-ckeditor\" [tagName]=\"ckTagname\" [(editor)]=\"ckEditor\" [config]=\"ckeditorConfig\"\r\n    (ready)=\"onReady($event)\" [(ngModel)]=\"qmsckContentInput\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\r\n    [disabled]=\"isDisabled\">\r\n  </ckeditor>\r\n  <div class=\"sub-container\">\r\n    <div class=\"\">\r\n      <span>Assistive text</span>\r\n    </div>\r\n    <div class=\"wordcount-content\"></div>\r\n  </div>\r\n</div>",
+                template: "<div id=\"qmsckeditor\" class=\"qmsckeditor_container\">\r\n  <ckeditor class=\"qms-ckeditor\" [tagName]=\"ckTagname\" [(editor)]=\"ckEditor\" [config]=\"ckeditorConfig\"\r\n    (ready)=\"onReady($event)\" [(ngModel)]=\"qmsckContentInput\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\r\n    [disabled]=\"isDisabled\">\r\n  </ckeditor>\r\n  <div class=\"sub-container\">\r\n    <div class=\"\">\r\n      <span>{{LANG.QMSCKEDITOR.ASSISTIVE_TEXT}}</span>\r\n    </div>\r\n    <div class=\"wordcount-content\"></div>\r\n  </div>\r\n</div>\r\n",
                 providers: [
                     QMSCKEditorFullscreenComponent,
                     {
@@ -16356,12 +16553,14 @@ QMSCKEditorComponent.decorators = [
                 ],
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}@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}.qmsckeditor_container .qmsckeditor__minwidth{width:100%}.qmsckeditor_container .ck-editor__editable{overflow-y:auto}.qms-ckeditor .ck.ck-editor__editable{max-height:172px;min-height:172px;background-color:rgba(0,0,0,.04);font-family:Open Sans}.qms-ckeditor .ck.ck-editor__editable:not(.ck-focused,.ck-read-only):hover{background-color:rgba(0,0,0,.08);border-bottom:2px solid rgba(0,0,0,.38)}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar{width:12px}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-ckeditor .ck-placeholder{font-size:1rem;font-weight:600;color:rgba(0,0,0,.6)}.qms-ckeditor .ck-disabled .ck.ck-editor__main>.ck-editor__editable,.qms-ckeditor .ck-disabled .ck.ck-toolbar{background-color:#e4e4e4;pointer-events:none}.qms-ckeditor .ck-disabled .ck-button{pointer-events:none}.qms-ckeditor .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused):focus{border-radius:4px}.qms-ckeditor .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{border:1px solid #c4c4c4;border-bottom:2px solid #1954a9;border-radius:4px;box-shadow:none;background-color:rgba(0,0,0,.08)}.qms-ckeditor .ck.ck-toolbar{box-shadow:0 1px 3px rgba(51,51,51,.2)}.qms-ckeditor .ck.ck-sticky-panel .ck-sticky-panel__content_sticky{box-shadow:none;border-width:0}.sub-container{display:flex;justify-content:space-between;padding:0 10px;font-family:Open Sans;font-size:.75rem;font-weight:400;line-height:16px;color:rgba(0,0,0,.6)}"]
+                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}@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}.qmsckeditor_container .qmsckeditor__minwidth{width:100%}.qmsckeditor_container .ck-editor__editable{overflow-y:auto}.qms-ckeditor .ck.ck-editor__editable{max-height:172px;min-height:172px;background-color:rgba(0,0,0,.04);font-family:Open Sans}.qms-ckeditor .ck.ck-editor__editable:not(.ck-focused,.ck-read-only):hover{background-color:rgba(0,0,0,.08);border-bottom:2px solid rgba(0,0,0,.38)}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar{width:12px}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-ckeditor .ck-placeholder{font-size:1rem;font-weight:600;color:rgba(0,0,0,.6)}.qms-ckeditor .ck-disabled .ck.ck-editor__main>.ck-editor__editable,.qms-ckeditor .ck-disabled .ck.ck-toolbar{background-color:#e4e4e4;pointer-events:none}.qms-ckeditor .ck-disabled .ck-button{pointer-events:none}.qms-ckeditor .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused):focus{border-radius:4px}.qms-ckeditor .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{border:1px solid #c4c4c4;border-bottom:2px solid #1954a9;border-radius:4px;box-shadow:none;background-color:rgba(0,0,0,.08)}.qms-ckeditor .ck.ck-toolbar{box-shadow:0 1px 3px rgba(51,51,51,.2)}.qms-ckeditor .ck.ck-sticky-panel .ck-sticky-panel__content_sticky{box-shadow:none;border-width:0}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;bottom:0;right:0;overflow:auto;background:#fff}.qmsckeditor__fullscreen .qms-ckeditor{height:98%;display:block;width:100%}.qmsckeditor__fullscreen .ck.ck-editor__main{height:98%}.qmsckeditor__fullscreen .ck.ck-editor__editable{height:inherit}.sub-container{display:flex;justify-content:space-between;padding:0 10px;font-family:Open Sans;font-size:.75rem;font-weight:400;line-height:16px;color:rgba(0,0,0,.6)}"]
             },] }
 ];
 QMSCKEditorComponent.ctorParameters = () => [
     { type: MatDialog },
+    { type: TranslateLibraryService },
     { type: QMSCKEditorGlobalService },
+    { type: QMSCKEditorTreeService },
     { type: QMSCKEditorFullscreenComponent },
     { type: Renderer2 },
     { type: ElementRef }
@@ -16397,7 +16596,8 @@ QMSCKEditorModule.decorators = [
                     QMSCKEditorTooltipComponent,
                     QMSCKEditorImageMapComponent,
                     QMSCKEditorBpmnComponent,
-                    SaveTemplateComponent
+                    SaveTemplateComponent,
+                    QMSCKEditorAboutComponent
                 ],
                 imports: [
                     CKEditorModule$1,
@@ -16423,8 +16623,9 @@ QMSCKEditorModule.decorators = [
                     MatAutocompleteModule,
                     ScrollingModule,
                     HttpClientModule,
-                    SharedModule,
                     MatTabsModule,
+                    MatProgressBarModule,
+                    SharedModule
                 ],
                 providers: [],
                 exports: [QMSCKEditorComponent],
@@ -16592,6 +16793,104 @@ class QMSDialogConfig extends MatDialogConfig {
     }
 }
 
+class QMSDrawerContentDirective {
+    constructor(ele) {
+        this.ele = ele;
+    }
+    ngOnInit() {
+        if (this.ele) {
+            this.ele.nativeElement.classList.add('qms-drawer-content');
+        }
+    }
+}
+QMSDrawerContentDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-drawer-content]',
+            },] }
+];
+QMSDrawerContentDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+
+class QMSDrawerHeaderActionDirective {
+    constructor(ele) {
+        this.ele = ele;
+    }
+    ngOnInit() {
+        if (this.ele) {
+            this.ele.nativeElement.classList.add('qms-drawer-header__action');
+        }
+    }
+}
+QMSDrawerHeaderActionDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-drawer-header-action]',
+            },] }
+];
+QMSDrawerHeaderActionDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+
+class QMSDrawerHeaderDirective {
+    constructor(ele) {
+        this.ele = ele;
+    }
+    ngOnInit() {
+        if (this.ele) {
+            this.ele.nativeElement.classList.add('qms-drawer-header');
+        }
+    }
+}
+QMSDrawerHeaderDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-drawer-header]',
+            },] }
+];
+QMSDrawerHeaderDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+
+class QMSDrawerDirective {
+    constructor(ele) {
+        this.ele = ele;
+    }
+    ngOnInit() {
+        if (this.ele) {
+            this.ele.nativeElement.classList.add('qms-drawer');
+        }
+    }
+}
+QMSDrawerDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-drawer]',
+            },] }
+];
+QMSDrawerDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+
+class QMSSideSheetModule {
+}
+QMSSideSheetModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    QMSDrawerDirective,
+                    QMSDrawerHeaderDirective,
+                    QMSDrawerContentDirective,
+                    QMSDrawerHeaderActionDirective,
+                ],
+                imports: [
+                    CommonModule
+                ],
+                exports: [
+                    QMSDrawerDirective,
+                    QMSDrawerHeaderDirective,
+                    QMSDrawerContentDirective,
+                    QMSDrawerHeaderActionDirective,
+                ]
+            },] }
+];
+
 class QMSTooltipModule {
 }
 QMSTooltipModule.decorators = [
@@ -17046,7 +17345,7 @@ QmsStepperComponent.decorators = [
                 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.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}"]
+                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{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.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;-webkit-font-smoothing:antialiased!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}"]
             },] }
 ];
 QmsStepperComponent.ctorParameters = () => [
@@ -17283,10 +17582,10 @@ class SelectIncludeChildrenPopUpComponent {
         appIconService.registerRiskIcon(iconRegistry, domSanitizer);
     }
     ngAfterViewInit() {
+        this.initTree(this.checkedNodeList);
         if (this.editItem) {
             this.focusEditItem(this.editItem);
         }
-        this.initTree(this.checkedNodeList);
     }
     ngOnDestroy() {
         this.ngUnsubscribe.next();
@@ -17332,16 +17631,60 @@ class SelectIncludeChildrenPopUpComponent {
                 this.selectedOptions.push(element);
                 if (element.type === SelectOptionTypes.IncludeChildren) {
                     this.selectedOptions = this.selectedOptions.concat(element.children);
+                    if (!this.includeChildren) {
+                        this.disabledList = [...this.disabledList, element];
+                        this.disabledList = [...this.disabledList, ...element.children.map(x => {
+                                return {
+                                    id: x.id,
+                                    itemName: x.itemName,
+                                    children: [],
+                                    parentId: x.parentId,
+                                    type: x.type,
+                                    noSelectedChildren: 0,
+                                    noChildren: 0
+                                };
+                            })];
+                    }
+                }
+                else {
+                    if (this.includeChildren) {
+                        this.disabledList = [...this.disabledList, element];
+                    }
                 }
                 this.selectedData = this.mapSelectOptionToTreeNode(this.selectedOptions);
             });
         }
     }
     focusEditItem(selectedOption) {
-        const node = this.dataTrees.toArray()[0].getNodeByIdAndParentId(selectedOption.id, selectedOption.parentId);
+        let parent;
+        let parentList = [];
+        parent = this.treeData.find(x => x.rootId === selectedOption.parentId);
+        if (parent) {
+            parentList.push({
+                id: parent.rootId,
+                itemName: parent.rootName,
+                parentId: parent.parentId,
+                type: SelectOptionTypes.IncludeChildren
+            });
+            parentList = this.getParentLineOfNode(parentList, parent);
+        }
+        let node;
+        if (parentList.length > 0) {
+            parentList.forEach(parent => {
+                node = this.dataTrees.toArray()[0].getNodeByIdAndParentId(parent.id, parent.parentId);
+                if (node) {
+                    this.dataTrees.toArray()[0].expandNode(node);
+                    const element = document.getElementById(`_${node.parentId ? node.parentId.toLowerCase() : ''}_${node.id.toLowerCase()}_${node.level}`);
+                    if (element) {
+                        element.scrollIntoView(false);
+                    }
+                }
+            });
+        }
+        node = this.dataTrees.toArray()[0].getNodeByIdAndParentId(selectedOption.id, selectedOption.parentId);
         if (node) {
             this.dataTrees.toArray()[0].expandNode(node);
-            const element = document.getElementById(`_${node.parentId ? node.parentId : ''}_${node.id}_${node.level}`);
+            const element = document.getElementById(`_${node.parentId ? node.parentId.toLowerCase() : ''}_${node.id.toLowerCase()}_${node.level}`);
             if (element) {
                 element.scrollIntoView(false);
             }
@@ -17352,7 +17695,7 @@ class SelectIncludeChildrenPopUpComponent {
         if (index >= 0) {
             if (this.checkedNodeList[index].type === SelectOptionTypes.IncludeChildren) {
                 this.removeIncludeChildren(item);
-                this.refactorSelectList(item);
+                this.deleteNodeFromSelectedNode(item);
             }
             else {
                 let position = this.selectedOptions.findIndex(x => x.id === item.id && x.parentId === item.parentId);
@@ -17360,8 +17703,9 @@ class SelectIncludeChildrenPopUpComponent {
                     this.selectedOptions.splice(position, 1);
                 }
             }
+            this.focusEditItem(this.checkedNodeList[index]);
+            this.enableSelectedNode(this.checkedNodeList[index]);
             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);
         }
     }
@@ -17393,7 +17737,7 @@ class SelectIncludeChildrenPopUpComponent {
                 this.checkedNodeList.push({
                     id: item.id,
                     itemName: item.itemName,
-                    type: SelectOptionTypes.SelectOne,
+                    type: item.type,
                     parentId: item.parentId,
                     children: [],
                     noChildren: 0,
@@ -17402,6 +17746,15 @@ class SelectIncludeChildrenPopUpComponent {
             }
         }
         this.selectedData = this.mapSelectOptionToTreeNode(this.selectedOptions);
+        this.focusEditItem({
+            id: item.id,
+            itemName: item.itemName,
+            type: item.type,
+            parentId: item.parentId,
+            children: [],
+            noChildren: 0,
+            noSelectedChildren: 0
+        });
     }
     getItemIconType(item) {
         if (item.itemIcon && item.itemIcon.length)
@@ -17472,12 +17825,29 @@ class SelectIncludeChildrenPopUpComponent {
         });
     }
     removeIncludeChildren(item) {
+        const index = this.checkedNodeList.findIndex(x => x.id.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === x.parentId.toLowerCase() && x.type === SelectOptionTypes.IncludeChildren);
+        if (index >= 0) {
+            let listChildren = this.checkedNodeList[index].children;
+            const itemIndex = this.selectedOptions.findIndex(node => node.id.toLowerCase() === item.id.toLowerCase() && node.parentId.toLowerCase() === item.parentId.toLowerCase());
+            if (itemIndex >= 0) {
+                this.enableSelectedNode(this.checkedNodeList[index]);
+                this.selectedOptions.splice(itemIndex, 1);
+            }
+            listChildren.forEach(x => {
+                const index = this.selectedOptions.findIndex(node => node.id.toLowerCase() === x.id.toLowerCase() && node.parentId.toLowerCase() === x.parentId.toLowerCase());
+                if (index >= 0) {
+                    this.selectedOptions.splice(index, 1);
+                    this.disabledList = this.disabledList.filter(node => !(x.id.toLowerCase() === node.id.toLowerCase() && x.parentId.toLowerCase() === node.parentId.toLowerCase()));
+                }
+            });
+            return;
+        }
         let listChildren = [];
         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);
+            this.disabledList = this.disabledList.filter(x => !(x.id === item.id && x.parentId === item.parentId));
         }
         listChildren.forEach(x => {
             const index = this.selectedOptions.findIndex(node => node.id === x.id && node.parentId === x.parentId);
@@ -17596,7 +17966,7 @@ class SelectIncludeChildrenPopUpComponent {
                     }
                 }
                 this.checkedNodeList = this.checkedNodeList.filter(x => x.id !== node.id || x.parentId !== node.parentId);
-                this.refactorSelectList(node);
+                this.deleteNodeFromSelectedNode(node);
             }
             else {
                 const itemIndex = this.selectedOptions.findIndex(item => node.id === item.id && node.parentId === item.parentId);
@@ -17669,6 +18039,16 @@ class SelectIncludeChildrenPopUpComponent {
         });
     }
     refactorSelectList(node) {
+        this.combineNodes({
+            id: node.id,
+            itemName: node.name,
+            type: SelectOptionTypes.IncludeChildren,
+            parentId: node.parentId
+        });
+    }
+    deleteNodeFromSelectedNode(node) {
+        let children = [];
+        children = this.getAllChildrenNodeRecursive(children, node);
         let parent;
         let parentList = [];
         parent = this.treeData.find(x => x.rootId === node.parentId);
@@ -17681,30 +18061,23 @@ class SelectIncludeChildrenPopUpComponent {
             });
             parentList = this.getParentLineOfNode(parentList, parent);
         }
+        let parentIndex = -1;
         if (parentList.length > 0) {
-            const selectedParentList = parentList.filter(x => this.selectedOptions
-                .findIndex(selectedNode => x.id === selectedNode.id && x.parentId === selectedNode.parentId) >= 0);
-            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({
-                    id: node.id,
-                    itemName: node.name,
-                    type: SelectOptionTypes.IncludeChildren,
-                    parentId: node.parentId
-                });
-                this.disabledList = this.disabledList.filter(x => !(x.id === node.id && x.parentId === node.parentId));
-            }
-        }
-        else {
-            this.combineNodes({
-                id: node.id,
-                itemName: node.name,
-                type: SelectOptionTypes.IncludeChildren,
-                parentId: node.parentId
+            parentList.forEach(parent => {
+                parentIndex = this.checkedNodeList.findIndex(x => x.id.toLowerCase() === parent.id.toLowerCase() && x.parentId.toLowerCase() === parent.parentId.toLowerCase());
+                if (parentIndex >= 0) {
+                    const index = this.checkedNodeList[parentIndex].children.findIndex(x => x.id.toLowerCase() === node.id.toLowerCase() && x.parentId.toLowerCase() === node.parentId.toLowerCase());
+                    if (index >= 0) {
+                        this.checkedNodeList[parentIndex].children.splice(index, 1);
+                    }
+                    children.forEach(child => {
+                        const index = this.checkedNodeList[parentIndex].children.findIndex(x => x.id.toLowerCase() === child.id.toLowerCase() && x.parentId.toLowerCase() === child.parentId.toLowerCase());
+                        if (index >= 0) {
+                            this.checkedNodeList[parentIndex].children.splice(index, 1);
+                        }
+                    });
+                    this.checkedNodeList[parentIndex].noSelectedChildren = this.checkedNodeList[parentIndex].children.length;
+                }
             });
         }
     }
@@ -17748,7 +18121,7 @@ class SelectIncludeChildrenPopUpComponent {
             this.checkedNodeList[selectedNodeIndex].children = nodeList;
             this.checkedNodeList[selectedNodeIndex].noChildren = children.length;
             this.checkedNodeList[selectedNodeIndex].noSelectedChildren = nodeList.length;
-            this.checkedNodeList[selectedNodeIndex].type = children.length === 0 ? SelectOptionTypes.SelectOne : SelectOptionTypes.IncludeChildren;
+            this.checkedNodeList[selectedNodeIndex].type = SelectOptionTypes.IncludeChildren;
         }
     }
     getParentLineOfNode(listParent, node) {
@@ -17772,7 +18145,7 @@ class SelectIncludeChildrenPopUpComponent {
                 return {
                     id: x.id,
                     name: x.itemName,
-                    parentId: node.id,
+                    parentId: x.parentId,
                     level: 0,
                     expandable: true,
                     hasChild: true,
@@ -17804,18 +18177,11 @@ class SelectIncludeChildrenPopUpComponent {
         }
     }
     enableSelectedNode(node) {
-        let children = [];
-        children = this.getAllChildrenNodeRecursive(children, {
-            id: node.id,
-            name: node.itemName,
-            parentId: node.parentId,
-            level: 0,
-            expandable: true,
-            hasChild: true,
-            disabled: false
-        });
-        this.disabledList = this.disabledList.filter(x => children.filter(child => (x.id === child.id && x.parentId === child.parentId)).length === 0);
         this.disabledList = this.disabledList.filter(x => !(x.id === node.id && x.parentId === node.parentId));
+        if (node.type === SelectOptionTypes.IncludeChildren) {
+            let children = node.children;
+            this.disabledList = this.disabledList.filter(x => children.filter(child => (x.id === child.id && x.parentId === child.parentId)).length === 0);
+        }
     }
 }
 SelectIncludeChildrenPopUpComponent.decorators = [
@@ -18196,9 +18562,56 @@ class SelectOneDialog {
             children: [],
             parentId: node.parentId
         };
-        this.dataTrees.toArray()[0].todoFolderSelection([treeNode]);
+        setTimeout(() => {
+            this.dataTrees.toArray()[0].todoFolderSelection([treeNode]);
+            this.expandAndScrollToNode(treeNode, node);
+        }, 500);
         return;
     }
+    expandAndScrollToNode(treeNode, node) {
+        let parent;
+        let parentList = [];
+        parent = this.treeData.find(x => x.rootId === node.parentId);
+        if (parent) {
+            parentList.push({
+                id: parent.rootId,
+                itemName: parent.rootName,
+                parentId: parent.parentId
+            });
+            parentList = this.getParentLineOfNode(parentList, parent);
+        }
+        if (parentList.length) {
+            parentList.reverse().forEach(x => {
+                this.focusEditItem(x);
+            });
+        }
+        else {
+            this.focusEditItem(treeNode);
+        }
+    }
+    getParentLineOfNode(listParent, node) {
+        let parent;
+        parent = this.treeData.find(x => x.rootId === node.parentId);
+        if (parent) {
+            listParent = [...listParent, {
+                    id: parent.rootId,
+                    itemName: parent.rootName,
+                    parentId: parent.parentId
+                }];
+            this.getParentLineOfNode(listParent, parent);
+        }
+        return listParent;
+    }
+    focusEditItem(selectedOption) {
+        const node = this.dataTrees.toArray()[0].getNodeByIdAndParentId(selectedOption.id, selectedOption.parentId);
+        if (node) {
+            this.dataTrees.toArray()[0].expandNode(node);
+            const element = document.getElementById(`_${node.parentId ? node.parentId : ''}_${node.id}_${node.level}`);
+            if (element) {
+                element.scrollIntoView(false);
+            }
+        }
+    }
     onCloseClick() {
         this.selectedFolder = null;
         this.dialogRef.close();
@@ -18322,7 +18735,7 @@ class SelectOneDialog {
 SelectOneDialog.decorators = [
     { type: Component, args: [{
                 selector: 'qms-select-one',
-                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 }}</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\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.length\">\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions()\"\r\n          [value]=\"option\"\r\n          (click)=\"selectItemSearched(option)\"\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    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar col-12 qmslib_related_popup_content\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\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        <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            (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n            (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n            [expandOnTitleClick]=\"false\"\r\n            [expandToChildNode]=\"expandToChildNode\"\r\n          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\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 (click)=\"removeCheckedNodeList()\">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",
+                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 }}</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\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.length\">\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions()\"\r\n          [value]=\"option\"\r\n          (click)=\"selectItemSearched(option)\"\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    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar col-12 qmslib_related_popup_content\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\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        <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            (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n            (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n            [expandOnTitleClick]=\"false\"\r\n            [expandToChildNode]=\"expandToChildNode\"\r\n          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\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 (click)=\"removeCheckedNodeList()\">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",
                 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:320px}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}"]
             },] }
@@ -18733,12 +19146,15 @@ class NewTreeComponent {
     }
     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 => {
                     var _a;
-                    if (x.id === this.treeControl.dataNodes[i].id
-                        && (!x.parentId || x.parentId === ((_a = this.treeControl.dataNodes[i]) === null || _a === void 0 ? void 0 : _a.parentId))) {
+                    if (x.id.toLowerCase() === this.treeControl.dataNodes[i].id.toLowerCase()
+                        && (!x.parentId || x.parentId.toLowerCase() === ((_a = this.treeControl.dataNodes[i]) === null || _a === void 0 ? void 0 : _a.parentId.toLowerCase()))) {
                         this.treeControl.dataNodes[i].disabled = true;
                     }
                 });
@@ -19409,7 +19825,7 @@ class SelectProcessDocumentPopupComponent {
         });
         this.globalService.searchRelated.pipe(takeUntil(this.ngUnsubscribe)).subscribe((res) => {
             if (res && res.length) {
-                this.filteredOptions = res;
+                this.filteredOptions = this.toRelatedOptions(res);
             }
         });
         this.globalService.splitViewValue.pipe(takeUntil(this.ngUnsubscribe)).subscribe((res) => {
@@ -19501,6 +19917,11 @@ class SelectProcessDocumentPopupComponent {
         this.searchOrder = this.getSearchOrder();
     }
     ngAfterViewChecked() {
+        this.cdRef.detectChanges();
+        if (this.filteredOptions && this.filteredOptions.length) {
+            // this.autoComplete.openPanel();
+            this.setResultHeight();
+        }
     }
     removeCheckedNodeList(item) {
         this.selectedData = [];
@@ -19602,136 +20023,36 @@ class SelectProcessDocumentPopupComponent {
         this.selectedNode = [];
         if (this.treeConfig1.showCheckBox) {
             index = this.checkedNodeList.findIndex(x => {
-                return x.id === item.id && x.parentId === item.parentId;
+                return x.id.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === item.parentId.toLowerCase() && x.itemType === item.itemType;
             });
         }
         if (index < 0) {
-            let position = -1;
-            let node;
-            let typeId;
-            if (item.itemType === this.dataType.document) {
+            if (item.itemType === this.dataType.document || item.itemType === this.dataType.folder) {
                 // document  
                 const isExistInDisabled = this.disabledList2.findIndex(x => {
-                    return x.id && x.id.toLowerCase() === item.id.toLowerCase();
-                });
-                if (isExistInDisabled >= 0) {
+                    var _a;
+                    return ((_a = x.id) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === item.id.toLowerCase() && (!item.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase() && x.itemType === item.itemType);
+                }) >= 0;
+                if (isExistInDisabled) {
                     return;
                 }
-                position = this.treeData2.findIndex(x => {
-                    return x.id === item.id && x.parentId === item.parentId && !x.expandable;
-                });
-                if (position >= 0) {
-                    this.addToChecklistNodeAndSelectedData(item);
-                    node = this.treeData2[position];
-                    typeId = this.dataType.document;
-                    const treeNode = {
-                        id: node.childId,
-                        name: node.childName,
-                        children: [],
-                        parentId: node.rootId,
-                        expandable: false
-                    };
-                    this.dataTrees.toArray()[1].todoItemSelectionProcessDocument([treeNode]);
-                }
-                else {
-                    this.addNodeToTree(item);
-                    this.addToChecklistNodeAndSelectedData(item);
-                    setTimeout(() => {
-                        const treeNode = {
-                            id: item.id,
-                            name: item.itemName,
-                            children: [],
-                            parentId: item.parentId,
-                            expandable: false
-                        };
-                        this.dataTrees.toArray()[1].todoItemSelectionProcessDocument([treeNode]);
-                    }, 500);
-                }
-            }
-            else if (item.itemType === this.dataType.folder) {
-                position = this.treeData2.findIndex(x => {
-                    return x.id.toLowerCase() === item.id.toLowerCase() && (!item.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase());
-                });
-                typeId = item.itemType;
-                if (position >= 0) {
-                    node = this.treeData2[position];
-                    const treeNode = {
-                        id: node.id,
-                        name: node.name,
-                        children: [],
-                        parentId: node.parentId,
-                        expandable: true,
-                    };
-                    this.dataTrees.toArray()[1].todoFolderSelection([treeNode]);
-                }
-                else {
-                    this.addNodeToTree(item);
-                    this.addToChecklistNodeAndSelectedData(item);
-                }
-                return;
-            }
-            else if (item.itemType === this.dataType.area) {
-                position = this.treeData1.findIndex(x => {
-                    return x.id.toLowerCase() === item.id.toLowerCase() && (!item.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase()) && x.expandable;
-                });
-                typeId = item.itemType;
-                if (position >= 0) {
-                    node = this.treeData1[position];
-                    const treeNode = {
-                        id: node.id,
-                        name: node.name,
-                        children: [],
-                        parentId: node.parentId,
-                        expandable: true
-                    };
-                    this.dataTrees.toArray()[0].todoFolderSelection([treeNode]);
-                }
-                else {
-                    this.addNodeToTree(item);
-                    this.addToChecklistNodeAndSelectedData(item);
-                }
-                return;
+                this.addToChecklistNodeAndSelectedData(item);
             }
-            else {
+            else if (item.itemType === this.dataType.area || item.itemType === this.dataType.process) {
                 const isExistInDisabled = this.disabledList.findIndex(x => {
-                    return x.id.toLowerCase() === item.id.toLowerCase() && (!item.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase());
-                });
-                if (isExistInDisabled >= 0) {
+                    var _a;
+                    return ((_a = x.id) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === item.id.toLowerCase() && (!item.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase() && x.itemType === item.itemType);
+                }) >= 0;
+                if (isExistInDisabled) {
                     return;
                 }
-                position = this.treeData1.findIndex(x => {
-                    return x.id.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === item.parentId.toLowerCase() && !x.expandable;
-                });
-                if (position >= 0) {
-                    node = this.treeData1[position];
-                    typeId = this.itemType;
-                    const treeNode = {
-                        id: node.childId,
-                        name: node.childName,
-                        children: [],
-                        parentId: node.rootId,
-                        expandable: false
-                    };
-                    this.addToChecklistNodeAndSelectedData(item);
-                    this.dataTrees.toArray()[0].todoItemSelectionProcessDocument([treeNode]);
-                }
-                else {
-                    this.addNodeToTree(item);
-                    this.addToChecklistNodeAndSelectedData(item);
-                    setTimeout(() => {
-                        const treeNode = {
-                            id: item.id,
-                            name: item.itemName,
-                            children: [],
-                            parentId: item.parentId,
-                            expandable: false
-                        };
-                        this.dataTrees.toArray()[0].todoItemSelectionProcessDocument([treeNode]);
-                    }, 500);
-                }
+                this.addToChecklistNodeAndSelectedData(item);
             }
         }
     }
+    displayWhenSelectRelatedOption($event) {
+        return '';
+    }
     addNodeToTree(item) {
         let newNodeDocs = new NewTreeModel();
         newNodeDocs.id = item.id;
@@ -19772,30 +20093,34 @@ class SelectProcessDocumentPopupComponent {
             (!newNodeDocs.parentId || x.parentId.toLowerCase() === newNodeDocs.parentId.toLowerCase()) && x.expandable === newNodeDocs.expandable);
         if (index < 0) {
             if (item.itemType == DataType$1.folder || item.itemType == DataType$1.document) {
-                this.documentCheckedList.push({
-                    id: newNodeDocs.id,
-                    name: newNodeDocs.name,
-                    itemType: item.itemType,
-                    parentId: newNodeDocs.parentId,
-                    levelType: newNodeDocs.levelType,
-                    level: 0,
-                    disabled: false,
-                    expandable: newNodeDocs.expandable,
-                    hasChild: newNodeDocs.expandable
-                });
+                if (this.documentCheckedList.findIndex(x => x.id.toLowerCase() === newNodeDocs.id.toLowerCase() && x.parentId.toLowerCase() === newNodeDocs.parentId.toLowerCase()) < 0) {
+                    this.documentCheckedList.push({
+                        id: newNodeDocs.id,
+                        name: newNodeDocs.name,
+                        itemType: item.itemType,
+                        parentId: newNodeDocs.parentId,
+                        levelType: newNodeDocs.levelType,
+                        level: 0,
+                        disabled: false,
+                        expandable: newNodeDocs.expandable,
+                        hasChild: newNodeDocs.expandable
+                    });
+                }
             }
             else {
-                this.commonCheckedList.push({
-                    id: newNodeDocs.id,
-                    name: newNodeDocs.name,
-                    itemType: item.itemType,
-                    parentId: newNodeDocs.parentId,
-                    levelType: newNodeDocs.levelType,
-                    level: 0,
-                    disabled: false,
-                    expandable: newNodeDocs.expandable,
-                    hasChild: newNodeDocs.expandable
-                });
+                if (this.commonCheckedList.findIndex(x => x.id.toLowerCase() === newNodeDocs.id.toLowerCase() && x.parentId.toLowerCase() === newNodeDocs.parentId.toLowerCase()) < 0) {
+                    this.commonCheckedList.push({
+                        id: newNodeDocs.id,
+                        name: newNodeDocs.name,
+                        itemType: item.itemType,
+                        parentId: newNodeDocs.parentId,
+                        levelType: newNodeDocs.levelType,
+                        level: 0,
+                        disabled: false,
+                        expandable: newNodeDocs.expandable,
+                        hasChild: newNodeDocs.expandable
+                    });
+                }
             }
             this.checkedNodeList.push({
                 moduleId: this.moduleId,
@@ -19874,6 +20199,7 @@ class SelectProcessDocumentPopupComponent {
             level: 0,
             disabled: false,
             hasChild: item.itemType == DataType$1.area || item.itemType == DataType$1.folder,
+            itemType: item.itemType
         });
     }
     setTypeProcess(expand) {
@@ -20038,7 +20364,7 @@ class SelectProcessDocumentPopupComponent {
             return;
         }
         const index = this.checkedNodeList.findIndex(x => x.id.toLowerCase() === node.id.toLowerCase()
-            && (!node.parentId || x.parentId.toLowerCase() === node.parentId.toLowerCase()) && x.itemType == node.itemType);
+            && (!node.parentId || x.parentId.toLowerCase() === node.parentId.toLowerCase()) && x.itemType === node.itemType);
         if (index >= 0) {
             this.removeCheckedNodeList({
                 id: node.id,
@@ -20111,13 +20437,24 @@ class SelectProcessDocumentPopupComponent {
             this.onSelectFolderItem.emit(item);
         }
     }
+    hasSelected(related) {
+        const arrDisabledList = this.disabledList.concat(this.disabledList2);
+        return arrDisabledList.some(node => node.id.toUpperCase() === related.id.toUpperCase());
+    }
+    toRelatedOptions(relateds) {
+        const results = [];
+        for (const related of relateds) {
+            results.push(Object.assign(Object.assign({}, related), { disabled: this.hasSelected(related) }));
+        }
+        return results;
+    }
 }
 SelectProcessDocumentPopupComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-select-process-document',
-                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    >\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              (click)=\"selectRelated(option)\"\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 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            <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-new\r\n              [treeData]=\"treeData1\"\r\n              [treeConfig]=\"treeConfig1\"\r\n              [selectedData]=\"selectedData\"\r\n              [selectedRiskData]=\"selectedRiskData\"\r\n              [disabledList]=\"disabledList\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              (selectFolderEvent)=\"getItemOfFolder($event, dataType.area)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n            ></qms-tree-new>\r\n          </div>\r\n        </mat-expansion-panel>\r\n  \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> {{ LANG.DOCUMENTS | uppercase }} </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isDocumentExpanded ? \"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_document_002\">\r\n            <qms-tree-new\r\n              [treeData]=\"treeData2\"\r\n              [treeConfig]=\"treeConfig2\"\r\n              [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              (selectFolderEvent)=\"getItemOfFolder($event, dataType.folder)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n            ></qms-tree-new>\r\n          </div>\r\n        </mat-expansion-panel>\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        *ngIf=\"filteredOptions.length\"\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 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            <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-new\r\n              [treeData]=\"treeData1\"\r\n              [treeConfig]=\"treeConfig1\"\r\n              [selectedData]=\"selectedData\"\r\n              [selectedRiskData]=\"selectedRiskData\"\r\n              [disabledList]=\"disabledList\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              (selectFolderEvent)=\"getItemOfFolder($event, dataType.area)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n            ></qms-tree-new>\r\n          </div>\r\n        </mat-expansion-panel>\r\n  \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> {{ LANG.DOCUMENTS | uppercase }} </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isDocumentExpanded ? \"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_document_002\">\r\n            <qms-tree-new\r\n              [treeData]=\"treeData2\"\r\n              [treeConfig]=\"treeConfig2\"\r\n              [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              (selectFolderEvent)=\"getItemOfFolder($event, dataType.folder)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n            ></qms-tree-new>\r\n          </div>\r\n        </mat-expansion-panel>\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 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}"]
+                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 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}"]
             },] }
 ];
 SelectProcessDocumentPopupComponent.ctorParameters = () => [
@@ -20240,9 +20577,10 @@ class QMSNavigationDrawerComponent {
             }
         });
     }
-    onClickNode(nodeId) {
-        this.activeNode = nodeId;
-        this.onClickNodeEvent.emit(nodeId);
+    onClickNode(node) {
+        this.onClickToggleNode(node);
+        this.activeNode = node.id;
+        this.onClickNodeEvent.emit(node.id);
     }
     onOver(node) {
         this.hoverNode = node;
@@ -20498,8 +20836,8 @@ class QMSNavigationDrawerComponent {
 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\" (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), 'active': activeNode == node.id}\">\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\">\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\" (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), 'active': activeNode == node.id}\">\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\">\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.active{background-color:#f2f7fd}::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}::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!important}::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}"]
+                template: "\r\n<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\" (mouseover)=\"onOver(node)\" matTreeNodePadding matTreeNodePaddingIndent=\"34\"\r\n    cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\" (mouseleave)=\"dragHoverEnd()\"\r\n    (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\"\r\n    [ngClass]=\"{'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node), 'active': activeNode == node.id}\">\r\n    <div *ngIf=\"!node.isReadOnly\" (click)=\"onClickNode(node)\" class=\"tree-content\">\r\n      <button tabindex=\"-1\" qms-btn-outlined disabled class=\"border-0 bg-transparent\">\r\n        <img class=\"img-icon\" [src]=\"faIconPath\" alt=\"\" />\r\n      </button>\r\n      <div class=\"span-text\">{{ node.name }}</div>\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 && isHover)}\"\r\n        qms-tool-tip=\"{{!node.favorite ? addFavoriteTooltip : deleteFavoriteTooltip}}\" mode=\"dark\" position=\"bottom\"\r\n        qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\"\r\n          [class.not-favorite]=\"!node.favorite && node.id === hoverNode.id && isHover\">\r\n          {{node.favorite && node.id === hoverNode.id && isHover ? 'star_rate_outline' : ''}}\r\n          {{!node.favorite && node.id === hoverNode.id && isHover ? 'star_border' : ''}}\r\n        </mat-icon>\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && isHover\"\r\n        qms-tool-tip=\"{{addNodeTooltip}}\" (click)=\"addNewNode(node.id, $event)\" mode=\"dark\" position=\"bottom\" qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">\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\" (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]=\"\r\n    {'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node), 'active': activeNode == node.id}\">\r\n    <div *ngIf=\"!node.isReadOnly\" matTreeNodeToggle (click)=\"onClickNode(node)\" class=\"tree-content\"\r\n      (keydown)=\"onKeyDownNode($event, node)\">\r\n      <button tabindex=\"-1\" class=\"button-icon collapse-expand-icon\" qms-btn-icon [attr.aria-label]=\"'toggle ' + node.name\">\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      <div class=\"span-text\">{{ node.name }}</div>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\"\r\n        qms-tool-tip=\"{{!node.favorite ? addFavoriteTooltip : deleteFavoriteTooltip}}\"\r\n        *ngIf=\"showFavoriteIcon && (node.id === hoverNode.id || node.favorite)\"\r\n        (click)=\"addFavoriteNode(node.id, $event)\" [ngClass]=\"{'btn-favorite': (node.id === hoverNode.id && isHover)}\"\r\n        (mouseenter)=\"setHoverFavorite(node.id)\" (mouseleave)=\"setHoverFavorite(null)\" mode=\"dark\" position=\"below\"\r\n        qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\"\r\n          [class.not-favorite]=\"!node.favorite && node.id === hoverNode.id && isHover\">\r\n          {{node.favorite && node.id === hoverNode.id && isHover ? 'star_rate_outline' : ''}}\r\n          {{!node.favorite && node.id === hoverNode.id && isHover ? 'star_border' : ''}}\r\n        </mat-icon>\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && isHover\"\r\n        qms-tool-tip=\"{{addNodeTooltip}}\" mode=\"dark\" position=\"bottom\" (click)=\"addNewNode(node.id, $event)\" qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">\r\n          add\r\n        </mat-icon>\r\n      </button>\r\n    </div>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n",
+                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.active{background-color:#f2f7fd;color:#1954a9!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.active img{filter:opacity(.5) drop-shadow(0 0 0 #1954A9)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.active:hover{background-color:#e5eefb!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content{width:100%;position:relative;cursor:pointer;align-items:center}::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: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}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node:hover{background-color:#e5eefb!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{display:flex}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .button-icon{width:40px;height:40px;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;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%;color:rgba(0,0,0,.6)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .favorite{color:#b13514!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .not-favorite{color:rgba(0,0,0,.6)!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .btn-favorite{right:6px;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:7px;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}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node:hover .span-text{max-width:calc(100% - 96px)}"]
             },] }
 ];
 QMSNavigationDrawerComponent.ctorParameters = () => [];
@@ -20533,11 +20871,11 @@ QMSNavigationDrawerModule.decorators = [
                     CommonModule,
                     MatIconModule,
                     MatToolbarModule,
-                    MatButtonModule,
                     QMSButtonModule,
                     MatTooltipModule,
                     DragDropModule,
-                    MatTreeModule
+                    MatTreeModule,
+                    QmsAngularModule
                 ],
                 exports: [
                     QMSNavigationDrawerComponent
@@ -20699,11 +21037,11 @@ class QMSPaginatorComponent {
 QMSPaginatorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-paginator',
-                template: "<div class=\"qms-paginator-outer-container\"  [class.size-small]='size == sizeSmall'>\r\n  <div class=\"mat-paginator-container\" *ngIf='size != sizeMobile'>\r\n    <div class=\"qms-total-result\">\r\n      <span>Resultater: {{length}}</span>\r\n    </div>\r\n    <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\r\n      <div class=\"qms-pagesize-label\">Rader per side:</div>\r\n      <mat-form-field\r\n        qms-form\r\n        qms-select-input\r\n        class=\"qms-form-page-size\"\r\n        appearance=\"fill\">\r\n        <mat-select\r\n          panelClass=\"qms-select-panel\"\r\n          [value]=\"pageSize\"\r\n          (selectionChange)=\"_changePageSize($event.value)\"\r\n          qms-select>\r\n          <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\r\n            {{ item }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\r\n      <div class=\"qms-pagesize-label \">Hopp til side:</div>\r\n\r\n      <mat-form-field\r\n        qms-form\r\n        qms-select-input\r\n        class=\"qms-form-page-size\"\r\n        appearance=\"fill\">\r\n        <mat-select\r\n          panelClass=\"qms-select-panel\"\r\n          [value]=\"pageIndex\"\r\n          (selectionChange)=\"_changePageNumber($event.value)\"\r\n          qms-select>\r\n          <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\r\n            {{ item }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field> \r\n    </div>\r\n    <div class=\"qms-paginator-range-actions\">\r\n      <button qms-btn-icon color=\"light\"  (click)='previousPage()' [disabled]='minPage == pageIndex'>\r\n        <mat-icon>chevron_left</mat-icon>\r\n      </button>\r\n      <ng-container *ngFor='let item of displayNumberOfPages' >\r\n          <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span>\r\n          <button  *ngIf='item != \"...\"' qms-btn-icon color=\"light\" active=\"true\" \r\n            [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\r\n            (click)='changePage(item)'>\r\n            {{item}}\r\n        </button>\r\n      </ng-container>\r\n     \r\n      <button qms-btn-icon color=\"light\"  (click)='nextPage()' [disabled]='maxpage == pageIndex'>\r\n        <mat-icon>chevron_right</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"mat-paginator-container-mobile\"  *ngIf='size == sizeMobile'>\r\n    <div class=\"mat-paginator-container\"  *ngIf='size == sizeMobile'>\r\n      <div class=\"qms-paginator-range-actions\">\r\n        <button qms-btn-icon color=\"light\"  (click)='previousPage()' [disabled]='minPage == pageIndex'>\r\n          <mat-icon>chevron_left</mat-icon>\r\n        </button>\r\n        <ng-container *ngFor='let item of displayNumberOfPages' >\r\n            <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span>\r\n            <button  *ngIf='item != \"...\"' qms-btn-icon color=\"light\" active=\"true\" \r\n              [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\r\n              (click)='changePage(item)'>\r\n              {{item}}\r\n          </button>\r\n        </ng-container>\r\n       \r\n        <button qms-btn-icon color=\"light\"  (click)='nextPage()' [disabled]='maxpage == pageIndex'>\r\n          <mat-icon>chevron_right</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"qms-total-result\">\r\n      <span>Resultater: {{length}}</span>\r\n    </div>\r\n    <div style=\"display: flex;\">\r\n      <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\r\n        <div class=\"qms-pagesize-label\">Rader per side:</div>\r\n        <mat-form-field\r\n          qms-form\r\n          qms-select-input\r\n          class=\"qms-form-page-size\"\r\n          appearance=\"fill\">\r\n          <mat-select\r\n            panelClass=\"qms-select-panel\"\r\n            [value]=\"pageSize\"\r\n            (selectionChange)=\"_changePageSize($event.value)\"\r\n            qms-select>\r\n            <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\r\n              {{ item }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\r\n        <div class=\"qms-pagesize-label \">Hopp til side:</div>\r\n        <mat-form-field\r\n          qms-form\r\n          qms-select-input\r\n          class=\"qms-form-page-size\"\r\n          appearance=\"fill\">\r\n          <mat-select\r\n            panelClass=\"qms-select-panel\"\r\n            [value]=\"pageIndex\"\r\n            (selectionChange)=\"_changePageNumber($event.value)\"\r\n            qms-select>\r\n            <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\r\n              {{ item }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field> \r\n      </div>\r\n    </div>\r\n   \r\n  </div>\r\n \r\n</div>",
+                template: "<div class=\"qms-paginator-outer-container\"  [class.size-small]='size == sizeSmall'>\r\n  <div class=\"mat-paginator-container\" *ngIf='size != sizeMobile'>\r\n    <div class=\"qms-total-result\">\r\n      <span>Resultater: {{length}}</span>\r\n    </div>\r\n    <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\r\n      <div class=\"qms-pagesize-label\">Rader per side:</div>\r\n      <mat-form-field\r\n        qms-form\r\n        qms-select-input\r\n        class=\"qms-form-page-size\"\r\n        appearance=\"fill\">\r\n        <mat-select\r\n          panelClass=\"qms-select-panel\"\r\n          [value]=\"pageSize\"\r\n          (selectionChange)=\"_changePageSize($event.value)\"\r\n          qms-select>\r\n          <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\r\n            {{ item }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\r\n      <div class=\"qms-pagesize-label \">Hopp til side:</div>\r\n\r\n      <mat-form-field\r\n        qms-form\r\n        qms-select-input\r\n        class=\"qms-form-page-size\"\r\n        appearance=\"fill\">\r\n        <mat-select\r\n          panelClass=\"qms-select-panel\"\r\n          [value]=\"pageIndex\"\r\n          (selectionChange)=\"_changePageNumber($event.value)\"\r\n          qms-select>\r\n          <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\r\n            {{ item }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field> \r\n    </div>\r\n    <div class=\"qms-paginator-range-actions\">\r\n      <button qms-btn-icon color=\"light\"  (click)='previousPage()' [disabled]='minPage == pageIndex'>\r\n        <mat-icon>chevron_left</mat-icon>\r\n      </button>\r\n      <ng-container *ngFor='let item of displayNumberOfPages' >\r\n          <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span>\r\n          <button  *ngIf='item != \"...\"' qms-btn-icon color=\"light\"  \r\n            [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\r\n            (click)='changePage(item)'>\r\n            {{item}}\r\n        </button>\r\n      </ng-container>\r\n     \r\n      <button qms-btn-icon color=\"light\"  (click)='nextPage()' [disabled]='maxpage == pageIndex'>\r\n        <mat-icon>chevron_right</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"mat-paginator-container-mobile\"  *ngIf='size == sizeMobile'>\r\n    <div class=\"mat-paginator-container\"  *ngIf='size == sizeMobile'>\r\n      <div class=\"qms-paginator-range-actions\">\r\n        <button qms-btn-icon color=\"light\"  (click)='previousPage()' [disabled]='minPage == pageIndex'>\r\n          <mat-icon>chevron_left</mat-icon>\r\n        </button>\r\n        <ng-container *ngFor='let item of displayNumberOfPages' >\r\n            <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span>\r\n            <button  *ngIf='item != \"...\"' qms-btn-icon color=\"light\" \r\n              [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\r\n              (click)='changePage(item)'>\r\n              {{item}}\r\n          </button>\r\n        </ng-container>\r\n       \r\n        <button qms-btn-icon color=\"light\"  (click)='nextPage()' [disabled]='maxpage == pageIndex'>\r\n          <mat-icon>chevron_right</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"qms-total-result\">\r\n      <span>Resultater: {{length}}</span>\r\n    </div>\r\n    <div style=\"display: flex;\">\r\n      <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\r\n        <div class=\"qms-pagesize-label\">Rader per side:</div>\r\n        <mat-form-field\r\n          qms-form\r\n          qms-select-input\r\n          class=\"qms-form-page-size\"\r\n          appearance=\"fill\">\r\n          <mat-select\r\n            panelClass=\"qms-select-panel\"\r\n            [value]=\"pageSize\"\r\n            (selectionChange)=\"_changePageSize($event.value)\"\r\n            qms-select>\r\n            <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\r\n              {{ item }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\r\n        <div class=\"qms-pagesize-label \">Hopp til side:</div>\r\n        <mat-form-field\r\n          qms-form\r\n          qms-select-input\r\n          class=\"qms-form-page-size\"\r\n          appearance=\"fill\">\r\n          <mat-select\r\n            panelClass=\"qms-select-panel\"\r\n            [value]=\"pageIndex\"\r\n            (selectionChange)=\"_changePageNumber($event.value)\"\r\n            qms-select>\r\n            <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\r\n              {{ item }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field> \r\n      </div>\r\n    </div>\r\n   \r\n  </div>\r\n \r\n</div>",
                 host: {
                     'class': 'qms-paginator'
                 },
-                styles: ["::ng-deep .qms-paginator{display:block}::ng-deep .qms-paginator .qms-paginator-outer-container{display:flex}::ng-deep .qms-paginator .mat-paginator-container{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;flex-wrap:wrap-reverse;width:100%}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-right:24px;margin-bottom:15px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:400;font-size:14px;line-height:22px;color:rgba(0,0,0,.6)}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size{margin-right:24px;display:flex;align-items:baseline}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-pagesize-label{font-weight:400;font-size:14px;line-height:22px;color:#323232;font-family:Open Sans;font-style:normal;margin-right:8px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-form-page-size .mat-form-field-flex{width:80px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .jump-page .mat-form-field-wrapper .mat-form-field-flex{width:55px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .mat-form-field-flex{height:40px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .mat-form-field-flex .mat-form-field-infix{padding-top:7px;border-top:0;padding-bottom:0}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions{display:flex;align-items:center;margin-bottom:15px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .selected{background-color:#e5eefb;color:#1954a9}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .qms-3d{font-weight:600;font-size:14px;line-height:22px;color:#323232}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-total-result{margin-bottom:16px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-total-result span{font-family:Open Sans;font-style:normal;font-weight:400;font-size:12px;line-height:16px;color:rgba(0,0,0,.6)}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-paginator-container{justify-content:flex-start}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size{margin-right:24px;display:flex;align-items:baseline}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-pagesize-label{font-weight:400;font-size:12px;line-height:22px;color:#323232;font-family:Open Sans;font-style:normal;margin-right:8px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-form-page-size .mat-form-field-flex{width:80px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .jump-page .mat-form-field-wrapper .mat-form-field-flex{width:55px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .mat-form-field-flex{height:40px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .mat-form-field-flex .mat-form-field-infix{padding-top:7px;border-top:0;padding-bottom:0}::ng-deep .qms-paginator .size-small .mat-paginator-container{justify-content:flex-start}"]
+                styles: ["::ng-deep .qms-paginator{display:block}::ng-deep .qms-paginator .qms-paginator-outer-container{display:flex}::ng-deep .qms-paginator .mat-paginator-container{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;flex-wrap:wrap-reverse;width:100%}::ng-deep .qms-paginator .mat-paginator-container .mat-select .mat-select-arrow{margin-top:17.5px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-right:24px;margin-bottom:15px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:400;font-size:14px;line-height:22px;color:rgba(0,0,0,.6)}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size{margin-right:24px;display:flex;align-items:baseline}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-pagesize-label{font-weight:400;font-size:14px;line-height:22px;color:#323232;font-family:Open Sans;font-style:normal;margin-right:8px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-form-page-size .mat-form-field-flex{width:80px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .jump-page .mat-form-field-wrapper .mat-form-field-flex{width:55px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .mat-form-field-flex{height:40px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .mat-form-field-flex .mat-form-field-infix{padding-top:7px;border-top:0;padding-bottom:0}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions{display:flex;align-items:center;margin-bottom:15px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .selected{background-color:#e5eefb;color:#1954a9}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .qms-3d{font-weight:600;font-size:14px;line-height:22px;color:#323232}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions button:not(.qms-btn-disabled) .qms-btn-icon-wrapper{color:#323232}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-select .mat-select-arrow{margin-top:17.5px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-total-result{margin-bottom:16px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-total-result span{font-family:Open Sans;font-style:normal;font-weight:400;font-size:12px;line-height:16px;color:rgba(0,0,0,.6)}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-paginator-container{justify-content:flex-start}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size{margin-right:24px;display:flex;align-items:baseline}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-pagesize-label{font-weight:400;font-size:12px;line-height:22px;color:#323232;font-family:Open Sans;font-style:normal;margin-right:8px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-form-page-size .mat-form-field-flex{width:80px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .jump-page .mat-form-field-wrapper .mat-form-field-flex{width:55px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .mat-form-field-flex{height:40px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .mat-form-field-flex .mat-form-field-infix{padding-top:7px;border-top:0;padding-bottom:0}::ng-deep .qms-paginator .size-small .mat-paginator-container{justify-content:flex-start}"]
             },] }
 ];
 QMSPaginatorComponent.ctorParameters = () => [];
@@ -20748,5 +21086,5 @@ QmsPaginatorModule.decorators = [
  * 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, 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, PaginationSize, 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, QMSCKEditorFlowchart, QMSCKEditorFlowchartService, QMSCKEditorFullscreenComponent, QMSCKEditorGlobalService, QMSCKEditorInjector, QMSCKEditorLinkAnchorDocument, QMSCKEditorLinkComponent, QMSCKEditorLinkService, QMSCKEditorLoadTemplateComponent, QMSCKEditorModule, QMSCKEditorPlugin, QMSCKEditorRelatedComponent, QMSCKEditorRelation, QMSCKEditorSaveAsTemplate, 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, QMSPaginatorComponent, 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, QmsPaginatorModule, 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, QMSCKEditorBpmnData as ɵi };
+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, PaginationSize, 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, QMSCKEditorFlowchart, QMSCKEditorFlowchartService, QMSCKEditorFullscreenComponent, QMSCKEditorGlobalService, QMSCKEditorInjector, QMSCKEditorLinkAnchorDocument, QMSCKEditorLinkComponent, QMSCKEditorLinkService, QMSCKEditorLoadTemplateComponent, QMSCKEditorModule, QMSCKEditorPlugin, QMSCKEditorRelatedComponent, QMSCKEditorRelation, QMSCKEditorSaveAsTemplate, 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, QMSPaginatorComponent, QMSProcessDocumentItem, QMSRangeSliderDirective, QMSRangeSliderLockUpDirective, QMSRangeSliderModule, QMSRelatedGlobalService, QMSRelatedModule, QMSRichText, QMSRichTextModule, QMSRowDetailDirective, QMSScrolableAttachmentListDirective, QMSScrollbarDirective, QMSSearchFieldDirective, QMSSelectGlobalService, QMSSelectIncludeChildrenModule, QMSSelectOneGlobalService, QMSSelectOneModule, QMSSelectProcessDocumentGlobalService, QMSSelectProcessDocumentModule, QMSSideSheetModule, QMSSnackbarConfig, QMSSuffixDirective, QMSSuffixFieldDirective, QMSTabGroupAdvancedDirective, QMSTabGroupDirective, QMSTabLabelDirective, QMSTabModule, QMSTableAction, QMSTableActionBlock, QMSTableChildrenDirective, QMSTableDirective, QMSTableModule, QMSTableRowDirective, 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, QmsPaginatorModule, 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, QMSCKEditorTreeService as ɵb, QMSCKEditorTemplateComponent as ɵc, LinkAttachmentComponent as ɵd, QMSCKEditorTooltipComponent as ɵe, QMSCKEditorTooltip as ɵf, QMSCKEditorImageMapComponent as ɵg, QMSCKEditorImageMap as ɵh, QMSCKEditorUploadService as ɵi, QMSCKEditorBpmnData as ɵj, QMSCKEditorAboutComponent as ɵk };
 //# sourceMappingURL=qms-angular.js.map