qms-angular 1.1.26 → 1.1.28

package/bundles/qms-angular.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/radio'), require('@angular/material/dialog'), require('rxjs/operators'), require('@angular/material/autocomplete'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/material/input'), require('@angular/material/card'), require('@angular/material/icon'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/button'), require('@angular/material/core'), require('@angular/material/progress-spinner'), require('@angular/cdk/a11y'), require('@angular/cdk/coercion'), require('@angular/cdk/collections'), require('@angular/platform-browser/animations'), require('moment'), require('@angular/material/list'), require('@angular/material/expansion'), require('@angular/cdk/scrolling'), require('@angular/material/sidenav'), require('@angular/material/tree'), require('@angular/material/menu'), require('@angular/platform-browser'), require('@angular/cdk/tree'), require('@angular/common/http'), require('@angular/material/button-toggle'), require('@angular/material/select'), require('@angular/material/snack-bar'), require('@ckeditor/ckeditor5-angular'), require('jquery'), require('lodash'), require('buffer'), require('dagre'), require('@angular/material/tooltip'), require('@angular/material/tabs'), require('@angular/material/progress-bar'), require('@angular/material/badge'), require('@angular/material/toolbar'), require('@angular/cdk/stepper'), require('@angular/material/stepper'), require('@angular/material/slide-toggle'), require('@angular/cdk/drag-drop'), require('@angular/animations'), require('@angular/material/paginator'), require('@angular/material/divider'), require('ngx-mat-select-search')) :
-    typeof define === 'function' && define.amd ? define('qms-angular', ['exports', '@angular/core', 'rxjs', '@angular/common', '@angular/forms', '@angular/material/form-field', '@angular/material/radio', '@angular/material/dialog', 'rxjs/operators', '@angular/material/autocomplete', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/material/input', '@angular/material/card', '@angular/material/icon', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/button', '@angular/material/core', '@angular/material/progress-spinner', '@angular/cdk/a11y', '@angular/cdk/coercion', '@angular/cdk/collections', '@angular/platform-browser/animations', 'moment', '@angular/material/list', '@angular/material/expansion', '@angular/cdk/scrolling', '@angular/material/sidenav', '@angular/material/tree', '@angular/material/menu', '@angular/platform-browser', '@angular/cdk/tree', '@angular/common/http', '@angular/material/button-toggle', '@angular/material/select', '@angular/material/snack-bar', '@ckeditor/ckeditor5-angular', 'jquery', 'lodash', 'buffer', 'dagre', '@angular/material/tooltip', '@angular/material/tabs', '@angular/material/progress-bar', '@angular/material/badge', '@angular/material/toolbar', '@angular/cdk/stepper', '@angular/material/stepper', '@angular/material/slide-toggle', '@angular/cdk/drag-drop', '@angular/animations', '@angular/material/paginator', '@angular/material/divider', 'ngx-mat-select-search'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["qms-angular"] = {}, global.ng.core, global.rxjs, global.ng.common, global.ng.forms, global.ng.material.formField, global.ng.material.radio, global.ng.material.dialog, global.rxjs.operators, global.ng.material.autocomplete, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.material.input, global.ng.material.card, global.ng.material.icon, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.button, global.ng.material.core, global.ng.material.progressSpinner, global.ng.cdk.a11y, global.ng.cdk.coercion, global.ng.cdk.collections, global.ng.platformBrowser.animations, global.moment, global.ng.material.list, global.ng.material.expansion, global.ng.cdk.scrolling, global.ng.material.sidenav, global.ng.material.tree, global.ng.material.menu, global.ng.platformBrowser, global.ng.cdk.tree, global.ng.common.http, global.ng.material.buttonToggle, global.ng.material.select, global.ng.material.snackBar, global.ckeditor5Angular, global.$$1, global._, global.buffer, global.dagre, global.ng.material.tooltip, global.ng.material.tabs, global.ng.material.progressBar, global.ng.material.badge, global.ng.material.toolbar, global.ng.cdk.stepper, global.ng.material.stepper, global.ng.material.slideToggle, global.ng.cdk.dragDrop, global.ng.animations, global.ng.material.paginator, global.ng.material.divider, global.ngxMatSelectSearch));
-})(this, (function (exports, i0, rxjs, i1, forms, formField, radio, dialog, operators, autocomplete, overlay, portal, input, card, icon, checkbox, chips, button, core, progressSpinner, a11y, coercion, collections, animations, moment, list, expansion, scrolling, sidenav, tree$1, menu, platformBrowser, tree, i1$1, buttonToggle, select, snackBar, ckeditor5Angular, $$1, _, buffer, dagre, tooltip, tabs, progressBar, badge, toolbar, stepper$1, stepper, slideToggle, dragDrop, animations$1, paginator, divider, ngxMatSelectSearch) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/radio'), require('@angular/material/dialog'), require('@angular/material/autocomplete'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/material/input'), require('@angular/material/card'), require('@angular/material/icon'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/button'), require('@angular/material/core'), require('@angular/material/progress-spinner'), require('@angular/cdk/a11y'), require('@angular/cdk/coercion'), require('@angular/cdk/collections'), require('@angular/platform-browser/animations'), require('moment'), require('@angular/material/list'), require('@angular/material/expansion'), require('@angular/cdk/scrolling'), require('@angular/material/sidenav'), require('@angular/material/tree'), require('@angular/material/menu'), require('@angular/platform-browser'), require('@angular/cdk/tree'), require('@angular/common/http'), require('@angular/material/button-toggle'), require('@angular/material/select'), require('@angular/material/snack-bar'), require('@ckeditor/ckeditor5-angular'), require('jquery'), require('lodash'), require('buffer'), require('dagre'), require('@angular/material/tooltip'), require('@angular/material/tabs'), require('@angular/material/progress-bar'), require('@angular/material/badge'), require('@angular/material/toolbar'), require('@angular/cdk/stepper'), require('@angular/material/stepper'), require('@angular/material/slide-toggle'), require('@angular/cdk/drag-drop'), require('@angular/animations'), require('@angular/material/paginator'), require('@angular/material/divider'), require('ngx-mat-select-search')) :
+    typeof define === 'function' && define.amd ? define('qms-angular', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@angular/common', '@angular/forms', '@angular/material/form-field', '@angular/material/radio', '@angular/material/dialog', '@angular/material/autocomplete', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/material/input', '@angular/material/card', '@angular/material/icon', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/button', '@angular/material/core', '@angular/material/progress-spinner', '@angular/cdk/a11y', '@angular/cdk/coercion', '@angular/cdk/collections', '@angular/platform-browser/animations', 'moment', '@angular/material/list', '@angular/material/expansion', '@angular/cdk/scrolling', '@angular/material/sidenav', '@angular/material/tree', '@angular/material/menu', '@angular/platform-browser', '@angular/cdk/tree', '@angular/common/http', '@angular/material/button-toggle', '@angular/material/select', '@angular/material/snack-bar', '@ckeditor/ckeditor5-angular', 'jquery', 'lodash', 'buffer', 'dagre', '@angular/material/tooltip', '@angular/material/tabs', '@angular/material/progress-bar', '@angular/material/badge', '@angular/material/toolbar', '@angular/cdk/stepper', '@angular/material/stepper', '@angular/material/slide-toggle', '@angular/cdk/drag-drop', '@angular/animations', '@angular/material/paginator', '@angular/material/divider', 'ngx-mat-select-search'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["qms-angular"] = {}, global.ng.core, global.rxjs, global.rxjs.operators, global.ng.common, global.ng.forms, global.ng.material.formField, global.ng.material.radio, global.ng.material.dialog, global.ng.material.autocomplete, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.material.input, global.ng.material.card, global.ng.material.icon, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.button, global.ng.material.core, global.ng.material.progressSpinner, global.ng.cdk.a11y, global.ng.cdk.coercion, global.ng.cdk.collections, global.ng.platformBrowser.animations, global.moment, global.ng.material.list, global.ng.material.expansion, global.ng.cdk.scrolling, global.ng.material.sidenav, global.ng.material.tree, global.ng.material.menu, global.ng.platformBrowser, global.ng.cdk.tree, global.ng.common.http, global.ng.material.buttonToggle, global.ng.material.select, global.ng.material.snackBar, global.ckeditor5Angular, global.$$1, global._, global.buffer, global.dagre, global.ng.material.tooltip, global.ng.material.tabs, global.ng.material.progressBar, global.ng.material.badge, global.ng.material.toolbar, global.ng.cdk.stepper, global.ng.material.stepper, global.ng.material.slideToggle, global.ng.cdk.dragDrop, global.ng.animations, global.ng.material.paginator, global.ng.material.divider, global.ngxMatSelectSearch));
+})(this, (function (exports, i0, rxjs, operators, i1, forms, formField, radio, dialog, autocomplete, overlay, portal, input, card, icon, checkbox, chips, button, core, progressSpinner, a11y, coercion, collections, animations, moment, list, expansion, scrolling, sidenav, tree$1, menu, platformBrowser, tree, i1$1, buttonToggle, select, snackBar, ckeditor5Angular, $$1, _, buffer, dagre, tooltip, tabs, progressBar, badge, toolbar, stepper$1, stepper, slideToggle, dragDrop, animations$1, paginator, divider, ngxMatSelectSearch) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -207,7 +207,8 @@
             "ASSISTIVE_TEXT": "Assistive text",
             "WORDS": "Words",
             "CHARACTERS": "Characters",
-            "SELECT_VIDEO_FROM_ARCHIVE": "Select video from the archive"
+            "SELECT_VIDEO_FROM_ARCHIVE": "Select video from the archive",
+            "SELECT_VIDEO_IMAGE": "Select video image"
         },
         "ABOUT": {
             "ABOUT_CKEDITOR": "About CKEditor",
@@ -362,6 +363,7 @@
             "FULLSCREEN": "Fullscreen",
             "FLOWCHART": "Flowchart",
             "HANDBOOK": "Handbook",
+            "TOGGLE_FULL_SCREEN": "Toggle full screen",
         },
         "QMSCKEDITOR_MESSAGE": {
             "CONFIRM_DELETE_TEMPLATE": "Are you sure you want to delete this template?",
@@ -594,7 +596,8 @@
             "ASSISTIVE_TEXT": "Hjelpende tekst",
             "WORDS": "Ord",
             "CHARACTERS": "Tegn",
-            "SELECT_VIDEO_FROM_ARCHIVE": "Velg video fra arkivet"
+            "SELECT_VIDEO_FROM_ARCHIVE": "Velg video fra arkivet",
+            "SELECT_VIDEO_IMAGE": "Velg videobilde"
         },
         "ABOUT": {
             "ABOUT_CKEDITOR": "Om CKEditor",
@@ -749,6 +752,7 @@
             "FULLSCREEN": "Fullskjermvisning",
             "FLOWCHART": "Flytskjema",
             "HANDBOOK": "eHåndbok",
+            "TOGGLE_FULL_SCREEN": "Veksle mellom fullskjerm",
         },
         "QMSCKEDITOR_MESSAGE": {
             "CONFIRM_DELETE_TEMPLATE": "Er du sikker på at du vil slette denne malen?",
@@ -845,15 +849,20 @@
     var QmsAngularComponent = /** @class */ (function () {
         function QmsAngularComponent(trans) {
             this.trans = trans;
+            this.ngUnsubscribe = new rxjs.Subject();
         }
         QmsAngularComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.trans.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.trans.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.trans.getObjectLang(res);
                 }
             });
         };
+        QmsAngularComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         return QmsAngularComponent;
     }());
     QmsAngularComponent.decorators = [
@@ -871,27 +880,31 @@
         function QMSComment(trans) {
             this.trans = trans;
             this.updateLog = new i0.EventEmitter();
+            this.ngUnsubscribe = new rxjs.Subject();
         }
         QMSComment.prototype.ngOnChanges = function (changes) {
-            for (var propName in changes) {
-                var changedProp = changes[propName];
-                var to = JSON.stringify(changedProp.currentValue);
-                if (changedProp.isFirstChange()) {
-                }
-                else {
-                    var from = JSON.stringify(changedProp.previousValue);
-                }
-            }
+            // for (const propName in changes) {
+            //     const changedProp = changes[propName];
+            //     const to = JSON.stringify(changedProp.currentValue);
+            //     if (changedProp.isFirstChange()) {
+            //     } else {
+            //         const from = JSON.stringify(changedProp.previousValue);
+            //     }
+            // }
             // this.sourceLog = changes.sourceLog.currentValue;
         };
         QMSComment.prototype.ngOnInit = function () {
             var _this = this;
-            this.trans.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.trans.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.trans.getObjectLang(res);
                 }
             });
         };
+        QMSComment.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         QMSComment.prototype.showContent = function (content) {
             return content.replace(/(?:\r\n|\r|\n)/g, '<br>');
         };
@@ -949,7 +962,7 @@
             this.taskFilterCtrl = new forms.FormControl();
             /** list of filtered by search keyword */
             this.filteredTask = new rxjs.ReplaySubject(1);
-            this._onDestroy = new rxjs.Subject();
+            this.ngUnsubscribe = new rxjs.Subject();
             this.data.list.map(function (item) {
                 item.checked = !!item.checked;
                 _this.task.subtasks.push(item);
@@ -957,7 +970,7 @@
         }
         SelectDialog.prototype.ngOnInit = function () {
             var _this = this;
-            this.trans.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.trans.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.trans.getObjectLang(res);
                 }
@@ -965,7 +978,7 @@
             this.filteredTask.next(this.task.subtasks.slice());
             // listen for search field value changes
             this.taskFilterCtrl.valueChanges
-                .pipe(operators.takeUntil(this._onDestroy))
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
                 .subscribe(function () {
                 _this.filterBanks();
             });
@@ -986,6 +999,10 @@
             // filter the banks
             this.filteredTask.next(this.task.subtasks.filter(function (bank) { return bank.name.toLowerCase().indexOf(search) > -1; }));
         };
+        SelectDialog.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         SelectDialog.prototype.updateAllComplete = function () {
             this.allComplete = this.task.subtasks != null && this.task.subtasks.every(function (t) { return t.checked; });
         };
@@ -1212,7 +1229,7 @@
                 this.ele.nativeElement.classList.add('qms-chip-input');
             }
         };
-        QMSChipInputSelectTriggerDirective.prototype.click = function () {
+        QMSChipInputSelectTriggerDirective.prototype.onClick = function (e) {
             if (this.autocomplete) {
                 if (!this.autocomplete.panelOpen)
                     this.autocomplete.openPanel();
@@ -1231,7 +1248,7 @@
         { type: i0.ElementRef }
     ]; };
     QMSChipInputSelectTriggerDirective.propDecorators = {
-        click: [{ type: i0.HostListener, args: ['click', ['$event.target'],] }]
+        onClick: [{ type: i0.HostListener, args: ['click', ['$event.target'],] }]
     };
 
     var QMSChipInputSelectFieldDirective = /** @class */ (function () {
@@ -1288,7 +1305,7 @@
             this.ele = ele;
         }
         QMSInputChipDirective.prototype.ngOnChanges = function (changes) {
-            if (this.selected) {
+            if (changes.selected && JSON.stringify(changes.selected.currentValue) !== JSON.stringify(changes.selected.previousValue)) {
                 this.ele.nativeElement.classList.add('qms-chip-selected');
             }
             else {
@@ -1322,7 +1339,7 @@
             this.ele = ele;
         }
         QMSDropdownMenuItem.prototype.ngOnChanges = function (changes) {
-            if (this.selected) {
+            if (changes.selected && JSON.stringify(changes.selected.currentValue) !== JSON.stringify(changes.selected.previousValue)) {
                 this.ele.nativeElement.classList.add('qms-dropdown-menu-item-selected');
             }
             else {
@@ -1401,7 +1418,7 @@
                 }
             }
         };
-        QMSFileUploadDisplayDirective.prototype.Click = function () {
+        QMSFileUploadDisplayDirective.prototype.onClick = function (e) {
             this.eleInput.nativeElement.click();
         };
         return QMSFileUploadDisplayDirective;
@@ -1417,7 +1434,7 @@
     ]; };
     QMSFileUploadDisplayDirective.propDecorators = {
         value: [{ type: i0.Input }],
-        Click: [{ type: i0.HostListener, args: ['click', ['$event.target'],] }]
+        onClick: [{ type: i0.HostListener, args: ['click', ['$event.target'],] }]
     };
 
     var QMSFileUploadMultipleDisplayDirective = /** @class */ (function () {
@@ -1429,7 +1446,7 @@
                 this.ele.nativeElement.classList.add('qms-file-upload');
             }
         };
-        QMSFileUploadMultipleDisplayDirective.prototype.Click = function () {
+        QMSFileUploadMultipleDisplayDirective.prototype.onClick = function (e) {
             this.eleInput.nativeElement.click();
         };
         return QMSFileUploadMultipleDisplayDirective;
@@ -1444,7 +1461,7 @@
     ]; };
     QMSFileUploadMultipleDisplayDirective.propDecorators = {
         acceptExtension: [{ type: i0.Input }],
-        Click: [{ type: i0.HostListener, args: ['click', ['$event.target'],] }]
+        onClick: [{ type: i0.HostListener, args: ['click', ['$event.target'],] }]
     };
 
     exports.FileErrorType = void 0;
@@ -1539,8 +1556,8 @@
         function QMSFileUploadMultipleDirective(ele) {
             this.ele = ele;
         }
-        QMSFileUploadMultipleDirective.prototype.ngOnChanges = function () {
-            if (this.isLoading) {
+        QMSFileUploadMultipleDirective.prototype.ngOnChanges = function (changes) {
+            if (changes.isLoading && JSON.stringify(changes.isLoading.currentValue) !== JSON.stringify(changes.isLoading.previousValue)) {
                 this.ele.nativeElement.classList.add('qms-file-upload-loading');
             }
             else {
@@ -1717,7 +1734,7 @@
             };
         }
         QMSFileUploadDirective.prototype.ngOnChanges = function (changes) {
-            if (this.isLoading) {
+            if (changes.isLoading && JSON.stringify(changes.isLoading.currentValue) !== JSON.stringify(changes.isLoading.previousValue)) {
                 this.ele.nativeElement.classList.add('qms-file-upload-loading');
             }
             else {
@@ -1970,7 +1987,7 @@
             this.renderer = renderer;
         }
         QMSSearchFieldDirective.prototype.ngOnChanges = function (changes) {
-            if (this.isLoading) {
+            if (changes.isLoading && JSON.stringify(changes.isLoading.currentValue) !== JSON.stringify(changes.isLoading.previousValue)) {
                 this.ele.nativeElement.classList.add('qms-search-field-loading');
             }
             else {
@@ -3268,6 +3285,7 @@
     var DateFormatPipe = /** @class */ (function () {
         function DateFormatPipe(trans) {
             this.trans = trans;
+            this.ngUnsubscribe = new rxjs.Subject();
         }
         DateFormatPipe.prototype.transform = function (value, args) {
             if (!value) {
@@ -3275,7 +3293,7 @@
             }
             var valueFormat = '';
             var langCode = '';
-            this.trans.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.trans.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 langCode = res || 'en';
             });
             switch (langCode) {
@@ -3291,6 +3309,10 @@
             }
             return moment__namespace(value).format(valueFormat);
         };
+        DateFormatPipe.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         return DateFormatPipe;
     }());
     DateFormatPipe.decorators = [
@@ -4500,7 +4522,8 @@
     ];
 
     var QMS_THEMES = ['qms-theme-default', 'qms-theme-pink'];
-    var QMS_THEME_DEFAULT = 'qms-theme-default';
+    var QMS_THEME_DEFAULT = 'qms-theme-default';
+    var QMS_LANGUAGES = ['en', 'no'];
 
     var QMSThemingLibraryService = /** @class */ (function () {
         function QMSThemingLibraryService(doc) {
@@ -4715,8 +4738,9 @@
             this.dialogRef = dialogRef;
             this.trans = trans;
             this.data = data;
+            this.ngUnsubscribe = new rxjs.Subject();
             this.fileName = this.data;
-            this.trans.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.trans.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.trans.getObjectLang(res);
                 }
@@ -4731,6 +4755,10 @@
         QMSEditFileNameDialog.prototype.clearInput = function () {
             this.fileName = '';
         };
+        QMSEditFileNameDialog.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         return QMSEditFileNameDialog;
     }());
     QMSEditFileNameDialog.decorators = [
@@ -4794,12 +4822,13 @@
             this.dialogRef = dialogRef;
             this.trans = trans;
             this.data = data;
+            this.ngUnsubscribe = new rxjs.Subject();
             this.unsupportedFiles = this.data.fileNames;
             this.supportedExtensions = this.data.acceptedExtension;
             this.overLimitFiles = this.data.overLimitFiles;
             this.fileSizeLimit = this.data.fileSizeLimit;
             this.fileSizeLimitUnit = this.data.fileSizeLimitUnit || 'MB';
-            this.trans.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.trans.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.trans.getObjectLang(res);
                 }
@@ -4808,6 +4837,10 @@
         QMSUploadFileErrorDialog.prototype.ok = function () {
             this.dialogRef.close(null);
         };
+        QMSUploadFileErrorDialog.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         return QMSUploadFileErrorDialog;
     }());
     QMSUploadFileErrorDialog.decorators = [
@@ -4978,8 +5011,8 @@
                 }
             }, 1000);
         };
-        QMSBreadcrumbItemDirective.prototype.ngOnChanges = function () {
-            if (this.isLastItem) {
+        QMSBreadcrumbItemDirective.prototype.ngOnChanges = function (changes) {
+            if (changes.isLastItem && JSON.stringify(changes.isLastItem.currentValue) !== JSON.stringify(changes.isLastItem.previousValue)) {
                 this.ele.nativeElement.classList.add('qms-breadcrumb-last-item');
             }
             else {
@@ -5050,6 +5083,7 @@
             this.sideNavNodes = [];
             this.itemSpace = DropdownBreadCrumbNodeWidth.NORMAL; // width of dropdown node in normal view
             this.isMobileType = false;
+            this.ngUnsubscribe = new rxjs.Subject();
             iconRegistry.addSvgIconLiteral('breadcrumb_dropdown', sanitizer.bypassSecurityTrustHtml(BREADCRUMB_DROPDOWN_ICON));
         }
         QMSBreadcrumb.prototype.ngOnChanges = function (changes) {
@@ -5061,7 +5095,7 @@
         };
         QMSBreadcrumb.prototype.ngOnInit = function () {
             var _this = this;
-            this.trans.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.trans.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.trans.getObjectLang(res);
                 }
@@ -5070,6 +5104,10 @@
             this.itemIconType = ItemIconType;
             this.initBreadCrumb();
         };
+        QMSBreadcrumb.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         QMSBreadcrumb.prototype.ngAfterViewInit = function () {
             this.buildBreadcrumb();
             this.cdRef.detectChanges();
@@ -5135,7 +5173,6 @@
             }
         };
         QMSBreadcrumb.prototype.buildBreadcrumb = function () {
-            var _a;
             if (!this.isMobileType && this.ele.nativeElement.offsetWidth) {
                 this.dropdownNodes = [];
                 if (!this.maxLine || this.maxLine < 2) {
@@ -5146,7 +5183,7 @@
                 }
             }
             //show number Items after 3 dot icon
-            if (+this.numDisplayItem && +this.numDisplayItem >= 2 && ((_a = this.itemNodes) === null || _a === void 0 ? void 0 : _a.length) >= 2) {
+            if (+this.numDisplayItem && +this.numDisplayItem >= 2 && this.itemNodes.length >= 2) {
                 this.dropdownNodes = [];
                 this.dropdownNodes = this.itemNodes.slice(0, -this.numDisplayItem).reverse();
                 this.itemNodes = __spreadArray(__spreadArray([], []), __read(this.itemNodes.slice(-this.numDisplayItem)));
@@ -5322,13 +5359,13 @@
             };
         };
         QMSBasicTreeComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.treeData) {
+            if (changes.treeData && JSON.stringify(changes.treeData.currentValue) !== JSON.stringify(changes.treeData.previousValue)) {
                 this.dataSource.data = this.treeData;
             }
-            if (changes.openNodes && changes.openNodes.currentValue.length) {
+            if (changes.openNodes && JSON.stringify(changes.openNodes.currentValue) !== JSON.stringify(changes.openNodes.previousValue)) {
                 this.findAndExpandNodes();
             }
-            if (changes.disabledList && changes.disabledList.currentValue.length) {
+            if (changes.disabledList && JSON.stringify(changes.disabledList.currentValue) !== JSON.stringify(changes.disabledList.previousValue)) {
                 this.findAndExpandNodes();
             }
         };
@@ -6494,6 +6531,7 @@
             this.imageProcess = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAwLjVWNi41SDJWMTYuNUgxMlYxOC41SDE4VjEyLjVIMTJWMTQuNUg0VjYuNUg2VjQuNUgxMlY2LjVIMThWMC41SDEyVjIuNUg2VjAuNUgwWk00IDIuNVY0LjVIMlYyLjVINFpNMTYgMi41VjQuNUgxNFYyLjVIMTZaTTE2IDE2LjVWMTQuNUgxNFYxNi41SDE2WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC42Ii8+DQo8L3N2Zz4NCg==';
             this.updateData = new i0.EventEmitter();
             this.onItemSelect = new i0.EventEmitter();
+            this.ngUnsubscribe = new rxjs.Subject();
             appIconService.registerProcessIcon(iconRegistry, domSanitizer);
             appIconService.registerProcessAreaIcon(iconRegistry, domSanitizer);
             appIconService.registerDocumentIcon(iconRegistry, domSanitizer);
@@ -6517,12 +6555,16 @@
             this.title = this.data.title;
             this.isNotEditedItem = (_a = this.data['isNotEditedItem']) !== null && _a !== void 0 ? _a : false;
             this.relatedData = this.data.data;
-            this.translate.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.translate.getObjectLang(res);
                 }
             });
         };
+        RelatedListComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         RelatedListComponent.prototype.getImagePath = function () {
             return this.domSanitizer.bypassSecurityTrustResourceUrl(this.imageProcess);
         };
@@ -6612,6 +6654,98 @@
         onItemSelect: [{ type: i0.Output }]
     };
 
+    // eslint-disable-next-line import/no-extraneous-dependencies
+    var QMSCKEditorBaseComponent = /** @class */ (function () {
+        function QMSCKEditorBaseComponent() {
+            this.ngUnsubcribe = new rxjs.Subject();
+        }
+        QMSCKEditorBaseComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubcribe.next();
+            this.ngUnsubcribe.complete();
+        };
+        return QMSCKEditorBaseComponent;
+    }());
+    QMSCKEditorBaseComponent.decorators = [
+        { type: i0.Injectable }
+    ];
+
+    var QMSCKEditorGlobalService = /** @class */ (function () {
+        function QMSCKEditorGlobalService() {
+            this.getApiUrlSubject = new rxjs.BehaviorSubject(null);
+        }
+        QMSCKEditorGlobalService.prototype.setApiUrl = function (apiUrl) {
+            this.getApiUrlSubject.next(apiUrl);
+        };
+        return QMSCKEditorGlobalService;
+    }());
+    QMSCKEditorGlobalService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function QMSCKEditorGlobalService_Factory() { return new QMSCKEditorGlobalService(); }, token: QMSCKEditorGlobalService, providedIn: "root" });
+    QMSCKEditorGlobalService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    QMSCKEditorGlobalService.ctorParameters = function () { return []; };
+
+    var QMSCKEditorBaseService = /** @class */ (function (_super) {
+        __extends(QMSCKEditorBaseService, _super);
+        function QMSCKEditorBaseService(http, globalService) {
+            var _this = _super.call(this) || this;
+            _this.http = http;
+            _this.globalService = globalService;
+            _this.headers = new i1$1.HttpHeaders();
+            _this.globalService.getApiUrlSubject.pipe(operators.takeUntil(_this.ngUnsubcribe)).subscribe(function (res) {
+                _this.apiUrl = res;
+            });
+            return _this;
+        }
+        QMSCKEditorBaseService.prototype.get = function (url, params) {
+            if (params === void 0) { params = {}; }
+            return this.http.get(this.apiUrl + url, { headers: this.headers, params: params });
+        };
+        QMSCKEditorBaseService.prototype.post = function (url, data) {
+            return this.http.post(this.apiUrl + url, data, { headers: this.headers });
+        };
+        QMSCKEditorBaseService.prototype.put = function (url, data) {
+            return this.http.put(this.apiUrl + url, data, { headers: this.headers });
+        };
+        QMSCKEditorBaseService.prototype.delete = function (url, params) {
+            if (params === void 0) { params = {}; }
+            return this.http.delete(this.apiUrl + url, { headers: this.headers, params: params });
+        };
+        return QMSCKEditorBaseService;
+    }(QMSCKEditorBaseComponent));
+    QMSCKEditorBaseService.decorators = [
+        { type: i0.Injectable }
+    ];
+    QMSCKEditorBaseService.ctorParameters = function () { return [
+        { type: i1$1.HttpClient },
+        { type: QMSCKEditorGlobalService }
+    ]; };
+
+    var QMSCKEditorUploadService = /** @class */ (function (_super) {
+        __extends(QMSCKEditorUploadService, _super);
+        function QMSCKEditorUploadService() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        QMSCKEditorUploadService.prototype.uploadImage = function (file, imageHeight, imageWidth) {
+            var formData = new FormData();
+            formData.append('name', file.name);
+            formData.append('file', file);
+            if (imageHeight && imageWidth) {
+                formData.append('imageHeight', imageHeight.toString());
+                formData.append('imageWidth', imageWidth.toString());
+            }
+            return this.post('ckeditorUpload/UploadImage', formData);
+        };
+        return QMSCKEditorUploadService;
+    }(QMSCKEditorBaseService));
+    QMSCKEditorUploadService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function QMSCKEditorUploadService_Factory() { return new QMSCKEditorUploadService(i0__namespace.ɵɵinject(i1__namespace$1.HttpClient), i0__namespace.ɵɵinject(QMSCKEditorGlobalService)); }, token: QMSCKEditorUploadService, providedIn: "root" });
+    QMSCKEditorUploadService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+
     var TreeModel = /** @class */ (function () {
         function TreeModel() {
         }
@@ -6630,6 +6764,7 @@
         function PopupData() {
             this.moduleId = 0;
             this.moduleName = '';
+            this.moduleUploadImageName = '';
             this.treeData1 = [];
             this.treeData2 = [];
             this.selectedNode = [];
@@ -6704,8 +6839,9 @@
     ];
     QMSRelatedGlobalService.ctorParameters = function () { return []; };
 
+    var UPLOAD_ICON = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\">\n<path d=\"M0 0h24v24H0V0z\" fill=\"none\"/>\n<path d=\"M9 16h6v-6h4l-7-7-7 7h4v6zm3-10.17L14.17 8H13v6h-2V8H9.83L12 5.83zM5 18h14v2H5z\"/>\n</svg>\n";
     var RelatedPopupComponent = /** @class */ (function () {
-        function RelatedPopupComponent(cdRef, translate, dialogRef, globalService, iconRegistry, sanitizer, appIconService, elem, data) {
+        function RelatedPopupComponent(cdRef, translate, dialogRef, globalService, iconRegistry, sanitizer, appIconService, elem, uploadService, data) {
             this.cdRef = cdRef;
             this.translate = translate;
             this.dialogRef = dialogRef;
@@ -6714,10 +6850,12 @@
             this.sanitizer = sanitizer;
             this.appIconService = appIconService;
             this.elem = elem;
+            this.uploadService = uploadService;
             this.data = data;
             this.ngUnsubscribe = new rxjs.Subject();
             this.moduleId = 0;
             this.moduleName = '';
+            this.moduleUploadImageName = '';
             this.treeData1 = [];
             this.treeData2 = [];
             this.checkedNodeList = [];
@@ -6748,8 +6886,15 @@
             this.onSearch = new i0.EventEmitter();
             this.onExpandFolder = new i0.EventEmitter();
             this.parentNodeSelected = new TreeFlatNode();
+            this.qmsInputImageType = new forms.FormControl('', [
+                requiredFileType(['pjp', 'jpg', 'pjpeg', 'jpeg', 'jfif', 'png', 'gif', 'bmp', 'webp', 'tif', 'tiff'])
+            ]);
+            this.qmsInputImageFile = null;
+            this.isLoadingImageFile = false;
+            this.imageUpload = new Image();
             this.moduleId = data.moduleId;
             this.moduleName = data.moduleName;
+            this.moduleUploadImageName = data.moduleUploadImageName;
             this.treeData1 = data.treeData1;
             this.treeData2 = data.treeData2;
             this.treeConfig1 = data.treeConfig1;
@@ -6761,6 +6906,7 @@
             this.splitView = data.splitView;
             this.maxSelectItemCount = data.maxSelectItemCount;
             this.canOnlySelectItem = data.canOnlySelectItem;
+            this.canUploadImage = data.canUploadImage;
             appIconService.registerProcessIcon(iconRegistry, sanitizer);
             appIconService.registerProcessAreaIcon(iconRegistry, sanitizer);
             appIconService.registerDocumentIcon(iconRegistry, sanitizer);
@@ -6768,6 +6914,7 @@
             appIconService.registerDeviationIcon(iconRegistry, sanitizer);
             appIconService.registerChecklistIcon(iconRegistry, sanitizer);
             appIconService.registerRiskIcon(iconRegistry, sanitizer);
+            iconRegistry.addSvgIconLiteral('upload', sanitizer.bypassSecurityTrustHtml(UPLOAD_ICON));
         }
         RelatedPopupComponent.prototype.ngOnDestroy = function () {
             this.ngUnsubscribe.next();
@@ -6783,7 +6930,7 @@
         };
         RelatedPopupComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.translate.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.translate.getObjectLang(res);
                 }
@@ -6873,7 +7020,7 @@
                     }
                 }
             });
-            this.myControl.valueChanges.pipe(operators.debounceTime(1000)).subscribe(function (val) {
+            this.myControl.valueChanges.pipe(operators.debounceTime(1000), operators.takeUntil(this.ngUnsubscribe)).subscribe(function (val) {
                 _this.isInputValue = true;
                 _this.onSearchRelated(val);
             });
@@ -7521,26 +7668,38 @@
         };
         ;
         RelatedPopupComponent.prototype.onAddClick = function () {
-            var _this = this;
-            // if (this.treeConfig1.showCheckBox) {
-            this.selectedFolder = null;
-            this.itemInSplitview = [];
-            this.checkedNodeList.forEach(function (element) {
-                if (element.itemType === DataType$1.document) {
-                    element.status = _this.getStatusDocs(element.id);
-                    element.breadcumbs = _this.getBreadcumbAllParentDocs(element.id).slice(1).reverse();
-                    element.statusName = _this.getStatusName(element.id);
-                }
-                if (element.itemType === DataType$1.process) {
-                    element.status = _this.getStatusProcess(element.id);
-                    element.breadcumbs = _this.getBreadcumbAllParentProcess(element.id).slice(1).reverse();
-                }
+            return __awaiter(this, void 0, void 0, function () {
+                var imageRelativeUrl;
+                var _this = this;
+                return __generator(this, function (_j) {
+                    switch (_j.label) {
+                        case 0:
+                            this.selectedFolder = null;
+                            this.itemInSplitview = [];
+                            this.checkedNodeList.forEach(function (element) {
+                                if (element.itemType === DataType$1.document) {
+                                    element.status = _this.getStatusDocs(element.id);
+                                    element.breadcumbs = _this.getBreadcumbAllParentDocs(element.id).slice(1).reverse();
+                                    element.statusName = _this.getStatusName(element.id);
+                                }
+                                if (element.itemType === DataType$1.process) {
+                                    element.status = _this.getStatusProcess(element.id);
+                                    element.breadcumbs = _this.getBreadcumbAllParentProcess(element.id).slice(1).reverse();
+                                }
+                            });
+                            if (!this.canUploadImage)
+                                return [2 /*return*/, this.dialogRef.close(this.checkedNodeList)];
+                            imageRelativeUrl = "";
+                            if (!(this.checkedNodeList.length && this.qmsInputImageFile && this.canUploadImage))
+                                return [2 /*return*/, this.dialogRef.close({ checkedNodeList: this.checkedNodeList, imageRelativeUrl: imageRelativeUrl })];
+                            return [4 /*yield*/, this.uploadService.uploadImage(this.qmsInputImageFile.file, this.imageUpload.height, this.imageUpload.width).toPromise()];
+                        case 1:
+                            imageRelativeUrl = _j.sent();
+                            this.dialogRef.close({ checkedNodeList: this.checkedNodeList, imageRelativeUrl: imageRelativeUrl });
+                            return [2 /*return*/];
+                    }
+                });
             });
-            this.dialogRef.close(this.checkedNodeList);
-            // }
-            // else {
-            //   this.dialogRef.close(this.selectedNode);
-            // }
         };
         RelatedPopupComponent.prototype.getStatusName = function (id) {
             var statusName = '';
@@ -7835,14 +7994,28 @@
         RelatedPopupComponent.prototype.refreshRelatedOptions = function () {
             this.filteredOptions = this.toRelatedOptions(this.filteredOptions);
         };
+        RelatedPopupComponent.prototype.clearQMSInputImageFile = function () {
+            this.qmsInputImageFile = null;
+        };
+        RelatedPopupComponent.prototype.onChangeImage = function (event) {
+            var _this = this;
+            var readerImage = new FileReader();
+            readerImage.readAsDataURL(this.qmsInputImageFile.file);
+            readerImage.onload = function (event) { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_j) {
+                    this.imageUpload.src = event.target.result.toString();
+                    return [2 /*return*/];
+                });
+            }); };
+        };
         return RelatedPopupComponent;
     }());
     RelatedPopupComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-related-popup',
-                    template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n    (optionSelected)=\"selectRelated($event.option.value)\"\r\n    [displayWith]=\"displayWhenSelectRelatedOption\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      [class.related-viewport]=\"isInputValue\"\r\n      *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\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-container\"\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>\r\n                  <mat-icon\r\n                    class=\"material-icons-outlined search__description-icon\"\r\n                    >local_offer</mat-icon\r\n                  >\r\n                </span>\r\n                {{ getItemId(option) }}\r\n              </div>\r\n            </qms-list-item>\r\n          </mat-option>\r\n        </div>\r\n      </ng-container>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar qmslib_related_popup_content\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length,\r\n        'col-6': splitView,\r\n        'col-12': !splitView\r\n      }\"\r\n    >\r\n      <ng-container *ngIf=\"treeData1.length > 0\">\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          id=\"qmslib_related_popup_common_001\"\r\n          [expanded]=\"isCommonExpanded\"\r\n          (opened)=\"isCommonExpanded = true\"\r\n          (closed)=\"isCommonExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n              {{ LANG.PROCESSES | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.deviation\">\r\n              {{ LANG.DEVIATION | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.checklist\">\r\n              {{ LANG.CHECKLIST | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.risk\">\r\n              {{ LANG.ASSESSMENT | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_common_002\">\r\n            <qms-tree\r\n              [treeData]=\"treeData1\"\r\n              [treeConfig]=\"treeConfig1\"\r\n              [selectedData]=\"selectedData\"\r\n              [selectedRiskData]=\"selectedRiskData\"\r\n              [disabledList]=\"disabledList\"\r\n              (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n            ></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"treeData2.length > 0\">\r\n        <div\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          class=\"line__divider\"\r\n        ></div>\r\n\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          id=\"qmslib_related_popup_document_001\"\r\n          [expanded]=\"isDocumentExpanded\"\r\n          (opened)=\"isDocumentExpanded = true\"\r\n          (closed)=\"isDocumentExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title>\r\n              {{ LANG.DOCUMENTS | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isDocumentExpanded\r\n                    ? \"keyboard_arrow_up\"\r\n                    : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_document_002\">\r\n            <qms-tree\r\n              [treeData]=\"treeData2\"\r\n              [treeConfig]=\"treeConfig2\"\r\n              [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\"\r\n              (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTree2Event($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n            ></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n    </div>\r\n    <div\r\n      *ngIf=\"splitView\"\r\n      class=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\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 class=\"row\">\r\n    <div class=\"col-12 pr-0 pe-0\">\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    </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      <div *ngIf=\"canUploadImage\" class=\"selected-image\">\r\n        <span>{{ moduleUploadImageName | uppercase }}</span>\r\n        <form>\r\n          <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\r\n            <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\r\n            <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputImageType\" [readOnly]=\"true\"\r\n              qms-file-upload-display  #fileDisplay \r\n              value=\"{{qmsInputImageFile? qmsInputImageFile.fileName : ''}}\"\r\n              [attr.disabled]=\"isLoadingImageFile ? 'disabled' : null\">\r\n            <input hidden type=\"file\" [(inputFile)]=\"qmsInputImageFile\" \r\n              qms-file-upload-selector #fileSelector\r\n              accept=\".pjp, .jpg, .pjpeg, .jpeg, .jfif, .png, .gif, .bmp, .webp, .tif, .tiff\" \r\n              [maxSize]=\"1000000\" (change)=\"onChangeImage($event)\">\r\n\r\n            <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\r\n              *ngIf=\"isLoadingImageFile\"></mat-progress-spinner>\r\n            <div matSuffix qms-input-clear *ngIf=\"qmsInputImageFile && qmsInputImageFile.fileName\">\r\n              <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputImageFile()\" [disabled]=\"isLoadingImageFile\">\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            </div>\r\n\r\n            <mat-error *ngIf=\"qmsInputImageFile && qmsInputImageFile.typeError == 1\">\r\n              The extension is not supported.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </form>\r\n      </div>\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\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-container\"\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>\r\n                  <mat-icon\r\n                    class=\"material-icons-outlined search__description-icon\"\r\n                    >local_offer</mat-icon\r\n                  >\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        panel__content_height_with_upload: canUploadImage && !checkedNodeList.length,\r\n        panel__content_item_height_with_upload: canUploadImage && checkedNodeList.length,\r\n        'col-6': splitView,\r\n        'col-12': !splitView\r\n      }\"\r\n    >\r\n      <ng-container *ngIf=\"treeData1.length > 0\">\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          id=\"qmslib_related_popup_common_001\"\r\n          [expanded]=\"isCommonExpanded\"\r\n          (opened)=\"isCommonExpanded = true\"\r\n          (closed)=\"isCommonExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n              {{ LANG.PROCESSES | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.deviation\">\r\n              {{ LANG.DEVIATION | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.checklist\">\r\n              {{ LANG.CHECKLIST | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.risk\">\r\n              {{ LANG.ASSESSMENT | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_common_002\">\r\n            <qms-tree\r\n              [treeData]=\"treeData1\"\r\n              [treeConfig]=\"treeConfig1\"\r\n              [selectedData]=\"selectedData\"\r\n              [selectedRiskData]=\"selectedRiskData\"\r\n              [disabledList]=\"disabledList\"\r\n              (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n            ></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"treeData2.length > 0\">\r\n        <div\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          class=\"line__divider\"\r\n        ></div>\r\n\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          id=\"qmslib_related_popup_document_001\"\r\n          [expanded]=\"isDocumentExpanded\"\r\n          (opened)=\"isDocumentExpanded = true\"\r\n          (closed)=\"isDocumentExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title>\r\n              {{ LANG.DOCUMENTS | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isDocumentExpanded\r\n                    ? \"keyboard_arrow_up\"\r\n                    : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_document_002\">\r\n            <qms-tree\r\n              [treeData]=\"treeData2\"\r\n              [treeConfig]=\"treeConfig2\"\r\n              [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\"\r\n              (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTree2Event($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n            ></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n    </div>\r\n    <div\r\n      *ngIf=\"splitView\"\r\n      class=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\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 class=\"row\">\r\n    <div class=\"col-12 pr-0 pe-0\">\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    </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: i0.ViewEncapsulation.None,
-                    styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);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:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);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:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.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:var(--background-input-text)}.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:var(--related-item-background);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:var(--related-mat-icon-color);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{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-container .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .breadcrumb-container .qms-breadcrumb-item .mat-icon,cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .breadcrumb-container .qms-breadcrumb-item-text,cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:300px}"]
+                    styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);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:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);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:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.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:var(--background-input-text)}.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_height_with_upload{height:380px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item_height_with_upload{height:257px}.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:var(--related-item-background);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:var(--related-mat-icon-color);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{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-container .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .breadcrumb-container .qms-breadcrumb-item .mat-icon,cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .breadcrumb-container .qms-breadcrumb-item-text,cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}#qmslib_related_popup_header_001 .selected-image{display:flex;align-items:center;padding-bottom:10px}#qmslib_related_popup_header_001 .selected-image .input-upload{height:60px;padding-left:30px}.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}"]
                 },] }
     ];
     RelatedPopupComponent.ctorParameters = function () { return [
@@ -7854,6 +8027,7 @@
         { type: platformBrowser.DomSanitizer },
         { type: QMSIconRegistryService },
         { type: i0.ElementRef },
+        { type: QMSCKEditorUploadService },
         { type: PopupData, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
     ]; };
     RelatedPopupComponent.propDecorators = {
@@ -7884,11 +8058,12 @@
             this.nodeCheckedItem = [];
             this.disabledList = [];
             this.riskData = [];
+            this.ngUnsubscribe = new rxjs.Subject();
         }
         ;
         RiskAnalysisComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.translate.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.translate.getObjectLang(res);
                 }
@@ -7923,6 +8098,10 @@
                 canHaveDupId: false
             };
         };
+        RiskAnalysisComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         RiskAnalysisComponent.prototype.toggleChileNode = function (list) {
             var _this = this;
             this.analysisDanger = [];
@@ -7991,6 +8170,7 @@
             this.show = 5;
             this.resultData = [];
             this.riskAnalysis = [];
+            this.ngUnsubscribe = new rxjs.Subject();
             this.updateData = new i0.EventEmitter();
         }
         RiskListComponent.prototype.ngOnChanges = function (changes) {
@@ -8012,7 +8192,7 @@
             this.isNotEditedItem = (_b = this.data['isNotEditedItem']) !== null && _b !== void 0 ? _b : false;
             this.dangers = ((_c = this.data) === null || _c === void 0 ? void 0 : _c.data) || [];
             this.show = ((_d = this.data) === null || _d === void 0 ? void 0 : _d.numRow) || 5;
-            this.translate.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.translate.getObjectLang(res);
                 }
@@ -8021,6 +8201,10 @@
                 this.groupByDanger(this.dangers, 0);
             }
         };
+        RiskListComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         RiskListComponent.prototype.groupByDanger = function (dangers, i) {
             var _this = this;
             dangers.forEach(function (d) {
@@ -8165,18 +8349,23 @@
             this.results = [];
             this.color = Color;
             this.isSimple = 0;
+            this.ngUnsubscribe = new rxjs.Subject();
             this.title = data.title;
             this.results = data.results;
             this.isSimple = data.isSimple || 0;
         }
         RiskResultComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.translate.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.translate.getObjectLang(res);
                 }
             });
         };
+        RiskResultComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         RiskResultComponent.prototype.onCloseClick = function () {
             this.dialogRef.close();
         };
@@ -8307,21 +8496,6 @@
         return RiskDanger;
     }());
 
-    // eslint-disable-next-line import/no-extraneous-dependencies
-    var QMSCKEditorBaseComponent = /** @class */ (function () {
-        function QMSCKEditorBaseComponent() {
-            this.ngUnsubcribe = new rxjs.Subject();
-        }
-        QMSCKEditorBaseComponent.prototype.ngOnDestroy = function () {
-            this.ngUnsubcribe.next();
-            this.ngUnsubcribe.complete();
-        };
-        return QMSCKEditorBaseComponent;
-    }());
-    QMSCKEditorBaseComponent.decorators = [
-        { type: i0.Injectable }
-    ];
-
     var QMSCKEditorDialogData = /** @class */ (function () {
         function QMSCKEditorDialogData() {
         }
@@ -8650,59 +8824,6 @@
                 },] }
     ];
 
-    var QMSCKEditorGlobalService = /** @class */ (function () {
-        function QMSCKEditorGlobalService() {
-            this.getApiUrlSubject = new rxjs.BehaviorSubject(null);
-        }
-        QMSCKEditorGlobalService.prototype.setApiUrl = function (apiUrl) {
-            this.getApiUrlSubject.next(apiUrl);
-        };
-        return QMSCKEditorGlobalService;
-    }());
-    QMSCKEditorGlobalService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function QMSCKEditorGlobalService_Factory() { return new QMSCKEditorGlobalService(); }, token: QMSCKEditorGlobalService, providedIn: "root" });
-    QMSCKEditorGlobalService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    QMSCKEditorGlobalService.ctorParameters = function () { return []; };
-
-    var QMSCKEditorBaseService = /** @class */ (function (_super) {
-        __extends(QMSCKEditorBaseService, _super);
-        function QMSCKEditorBaseService(http, globalService) {
-            var _this = _super.call(this) || this;
-            _this.http = http;
-            _this.globalService = globalService;
-            _this.headers = new i1$1.HttpHeaders();
-            _this.globalService.getApiUrlSubject.pipe(operators.takeUntil(_this.ngUnsubcribe)).subscribe(function (res) {
-                _this.apiUrl = res;
-            });
-            return _this;
-        }
-        QMSCKEditorBaseService.prototype.get = function (url, params) {
-            if (params === void 0) { params = {}; }
-            return this.http.get(this.apiUrl + url, { headers: this.headers, params: params });
-        };
-        QMSCKEditorBaseService.prototype.post = function (url, data) {
-            return this.http.post(this.apiUrl + url, data, { headers: this.headers });
-        };
-        QMSCKEditorBaseService.prototype.put = function (url, data) {
-            return this.http.put(this.apiUrl + url, data, { headers: this.headers });
-        };
-        QMSCKEditorBaseService.prototype.delete = function (url, params) {
-            if (params === void 0) { params = {}; }
-            return this.http.delete(this.apiUrl + url, { headers: this.headers, params: params });
-        };
-        return QMSCKEditorBaseService;
-    }(QMSCKEditorBaseComponent));
-    QMSCKEditorBaseService.decorators = [
-        { type: i0.Injectable }
-    ];
-    QMSCKEditorBaseService.ctorParameters = function () { return [
-        { type: i1$1.HttpClient },
-        { type: QMSCKEditorGlobalService }
-    ]; };
-
     var QMSCKEditorLinkService = /** @class */ (function (_super) {
         __extends(QMSCKEditorLinkService, _super);
         function QMSCKEditorLinkService() {
@@ -9320,8 +9441,8 @@
             _this.targets = [];
             _this.protocols = [];
             _this.anchorDocuments = [];
-            _this.editorContent = "";
-            _this.selectedLink = 0;
+            _this.editorContent = '';
+            _this.selectedLinkType = 0;
             _this.selectedTarget = 0;
             _this.selectedProtocol = 0;
             _this.url = "";
@@ -9334,7 +9455,8 @@
             _this.documentId = 0;
             _this.anchorTitle = "";
             _this.anchorByName = "";
-            _this.selectedLink = data.typeId;
+            _this.LinkType = exports.LinkType;
+            _this.selectedLinkType = data.typeId;
             _this.selectedTarget = data.targetId;
             _this.selectedProtocol = data.protocolId;
             _this.url = data.url;
@@ -9357,14 +9479,14 @@
             this.initProtocol();
             this.initAnchor();
             if (this.data.edit) {
-                this.parseLinkUrl(this.selectedLink, this.url);
+                this.parseLinkUrl(this.selectedLinkType, this.url);
             }
         };
         QMSCKEditorLinkComponent.prototype.ngAfterViewChecked = function () {
             this.cdr.detectChanges();
         };
         QMSCKEditorLinkComponent.prototype.onCloseDialog = function () {
-            this.dialogRef.close();
+            this.dialogRef.close(null);
         };
         QMSCKEditorLinkComponent.prototype.initLinkType = function () {
             if (this.linkTypes) {
@@ -9435,36 +9557,35 @@
             this.anchors = [{ value: 0, viewValue: "", anchorValue: exports.LinkAnchor.Blank }];
         };
         QMSCKEditorLinkComponent.prototype.parseLinkUrl = function (typeId, url) {
-            if (typeId === exports.LinkType.anchorText) {
-                this.getEditorAnchor();
-                this.anchorText = url.substr(1);
-            }
-            else if (typeId === exports.LinkType.email) {
-                var p1 = url.indexOf("mailto:");
-                var p2 = url.indexOf("?subject=");
-                var p3 = url.indexOf("&body=");
-                this.emailAddress = url.substr(p1 + 7, p2 - 7);
-                this.emailSubject = url.substr(p2 + 9, p3 - p2 - 9);
-                this.emailBody = url.substr(p3 + 6, url.length - p3 - 6);
-            }
-            else if (typeId === exports.LinkType.anchorDocument) {
-                var flashIndex = url.lastIndexOf("/");
-                var hashIndex = url.indexOf("#");
-                var sId = url.substr(flashIndex + 1, hashIndex - 1 - flashIndex);
-                var documentId = parseInt(sId, 10);
-                this.getAnchorDocument(documentId);
-                this.anchorByName = url.substr(hashIndex + 1, url.length - hashIndex);
-                this.anchorTitle = this.data.title;
-            }
-            else if (typeId === exports.LinkType.url) {
-                //selectedProtocol
+            switch (typeId) {
+                case exports.LinkType.anchorText:
+                    this.getEditorAnchor();
+                    this.anchorText = url.substr(1);
+                    break;
+                case exports.LinkType.email:
+                    var p1 = url.indexOf('mailto:');
+                    var p2 = url.indexOf('?subject=');
+                    var p3 = url.indexOf('&body=');
+                    this.emailAddress = url.substr(p1 + 7, p2 - 7);
+                    this.emailSubject = url.substr(p2 + 9, p3 - p2 - 9);
+                    this.emailBody = url.substr(p3 + 6, url.length - p3 - 6);
+                    break;
+                case exports.LinkType.anchorDocument:
+                    var flashIndex = url.lastIndexOf('/');
+                    var hashIndex = url.indexOf('#');
+                    var sId = url.substr(flashIndex + 1, hashIndex - 1 - flashIndex);
+                    var documentId = parseInt(sId, 10);
+                    this.getAnchorDocument(documentId);
+                    this.anchorByName = url.substr(hashIndex + 1, url.length - hashIndex);
+                    this.anchorTitle = this.data.title;
+                    break;
             }
         };
         QMSCKEditorLinkComponent.prototype.onSelectedLinkType = function () {
-            if (this.selectedLink === exports.LinkType.anchorText) {
+            if (this.selectedLinkType === exports.LinkType.anchorText) {
                 this.getEditorAnchor();
             }
-            else if (this.selectedLink === exports.LinkType.anchorDocument) {
+            else if (this.selectedLinkType === exports.LinkType.anchorDocument) {
                 if (!this.documentAnchors) {
                     this.anchorDocuments = [];
                     this.setAnchorDocument(this.anchorDocuments);
@@ -9621,7 +9742,7 @@
         };
         QMSCKEditorLinkComponent.prototype.disableOkButton = function () {
             var isDisable = false;
-            switch (this.selectedLink) {
+            switch (this.selectedLinkType) {
                 case exports.LinkType.url:
                     isDisable = this.linkFormGroup.invalid;
                     break;
@@ -9641,32 +9762,29 @@
         };
         QMSCKEditorLinkComponent.prototype.setLink = function () {
             var link = new QMSCKEditorLink();
-            link.typeId = this.selectedLink;
+            link.typeId = this.selectedLinkType;
             link.targetId = this.selectedTarget;
             link.protocolId = this.selectedProtocol;
-            if (this.selectedLink === exports.LinkType.url) {
-                if (!this.advisoryTitle.length) {
-                    link.title = "" + this.getProtocolName() + this.linkFormGroup.value.url;
-                }
-                else {
+            switch (this.selectedLinkType) {
+                case exports.LinkType.url:
+                    link.url = "" + this.selectedLinkType + this.selectedProtocol + this.getProtocolName() + this.url;
                     link.title = this.advisoryTitle;
-                }
-                link.url = "" + this.selectedLink + this.selectedProtocol + this.getProtocolName() + this.url;
-            }
-            else if (this.selectedLink === exports.LinkType.anchorText) {
-                link.url = "" + this.selectedLink + 0 + "#" + this.anchorText;
-                link.title = "#" + this.anchorText;
-                link.targetId = exports.TargetType.topmost;
-            }
-            else if (this.selectedLink === exports.LinkType.email) {
-                link.url = "" + this.selectedLink + 0 + "mailto:" + this.emailAddress + "?subject=" + this.emailSubject + "&body=" + this.emailBody;
-                link.title = this.emailAddress;
-                link.targetId = exports.TargetType.topmost;
-            }
-            else if (this.selectedLink === exports.LinkType.anchorDocument) {
-                link.url = "" + this.selectedLink + 0 + "/document/" + this.documentId + "#" + this.anchorByName;
-                link.title = this.anchorTitle;
-                link.targetId = exports.TargetType.topmost;
+                    break;
+                case exports.LinkType.anchorText:
+                    link.url = "" + this.selectedLinkType + 0 + "#" + this.anchorText;
+                    link.title = "#" + this.anchorText;
+                    link.targetId = exports.TargetType.topmost;
+                    break;
+                case exports.LinkType.email:
+                    link.url = "" + this.selectedLinkType + 0 + "mailto:" + this.emailAddress + "?subject=" + this.emailSubject + "&body=" + this.emailBody;
+                    link.title = this.emailAddress;
+                    link.targetId = exports.TargetType.topmost;
+                    break;
+                case exports.LinkType.anchorDocument:
+                    link.url = "" + this.selectedLinkType + 0 + "/document/" + this.documentId + "#" + this.anchorByName;
+                    link.title = this.anchorTitle;
+                    link.targetId = exports.TargetType.topmost;
+                    break;
             }
             this.dialogRef.close(link);
         };
@@ -9715,7 +9833,7 @@
     QMSCKEditorLinkComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "qms-ckeditor-link",
-                    template: "<div id=\"qmsckeditor_link\" class=\"qmsckeditor qmsckeditor__link__container\">\r\n  <div id=\"qmsckeditor_link_header\">\r\n    <span id=\"qmsckeditor_link_header_001\" mat-icon-button class=\"qmsckeditor button__close\" (click)=\"onCloseDialog()\">\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmsckeditor_link_header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor_link_header_001\">\r\n        {{ LANG.QMSCKEDITOR.LINK }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <div id=\"qmsckeditor_link_type\" class=\"row\">\r\n    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\r\n      <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\r\n      <mat-select disableOptionCentering name=\"linkTypeList\" [(ngModel)]=\"selectedLink\"\r\n        (ngModelChange)=\"onSelectedLinkType()\">\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\r\n  <div id=\"qmsckeditor_link_content\">\r\n    <form [formGroup]=\"linkFormGroup\" class=\"qmsckeditor link__content height row\" *ngIf=\"selectedLink === 0\">\r\n      <div id=\"qmsckeditor_link_url\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\r\n        <mat-expansion-panel id=\"qmsckeditor_link_url_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.URL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_url_001\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\r\n              <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\" 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 id=\"qmsckeditor_link_url_002\" class=\"row\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\r\n              <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\" 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 id=\"qmsckeditor_link_url_003\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\r\n              <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\" (ngModelChange)=\"getUrlToSetProtocol()\"/>\r\n              <mat-error *ngIf=\"linkFormGroup.get('url').hasError('required')\" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_004\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ADVISORY_TITLE }}</mat-label>\r\n              <input matInput [(ngModel)]=\"advisoryTitle\" formControlName=\"advisoryTitle\" />\r\n              <mat-error *ngIf=\"linkFormGroup.get('advisoryTitle').hasError('required')\" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_005\" class=\"qmsckeditor button__groups row\">\r\n            <div class=\"col-6 pl-3 ps-3\">\r\n              <button class=\"save\" mat-flat-button (click)=\"eHandbook(false, false)\">\r\n                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n              </button>\r\n            </div>\r\n            <div class=\"col-6 pr-3 pe-3\">\r\n              <button class=\"save\" mat-flat-button (click)=\"attachment()\">\r\n                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form [formGroup]=\"anchorTextFormGroup\" class=\"qmsckeditor link__content height row\" *ngIf=\"selectedLink === 1\">\r\n      <div id=\"qmsckeditor_link_anchor_text\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\r\n        <mat-expansion-panel id=\"qmsckeditor_link_anchor_text_panel\" [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\" (closed)=\"isExpanded = false\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.ANCHOR_TEXT_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_anchor_text_001\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n              <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorText\">\r\n                <mat-option *ngFor=\"let editorAnchor of editorAnchors\" [value]=\"editorAnchor.anchorValue\"\r\n                  disableOptionCentering>\r\n                  {{ editorAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"\r\n                  anchorTextFormGroup.get('anchorText').hasError('required')\r\n                \" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form [formGroup]=\"emailFormGroup\" class=\"qmsckeditor link__content height row\" *ngIf=\"selectedLink === 2\">\r\n      <div id=\"qmsckeditor_link_email\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\r\n        <mat-expansion-panel id=\"qmsckeditor_link_email_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_email_001\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_ADDRESS }}</mat-label>\r\n              <input matInput [(ngModel)]=\"emailAddress\" formControlName=\"emailAddress\" />\r\n              <mat-error *ngIf=\"emailFormGroup.get('emailAddress').hasError('required')\" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_email_002\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_SUBJECT }}</mat-label>\r\n              <input matInput [(ngModel)]=\"emailSubject\" formControlName=\"emailSubject\" />\r\n              <mat-error *ngIf=\"emailFormGroup.get('emailSubject').hasError('required')\" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_email_003\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_BODY }}</mat-label>\r\n              <textarea matInput [(ngModel)]=\"emailBody\" formControlName=\"emailBody\"></textarea>\r\n              <mat-error *ngIf=\"emailFormGroup.get('emailBody').hasError('required')\" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form [formGroup]=\"anchorDocFormGroup\" class=\"qmsckeditor link__content height row\" *ngIf=\"selectedLink === 3\">\r\n      <div id=\"qmsckeditor_link_anchor_doc\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\r\n        <mat-expansion-panel id=\"qmsckeditor_link_email_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_anchor_doc_001\" class=\"qmsckeditor button__groups row\">\r\n            <div class=\"col-6 pl-3 ps-3\">\r\n              <button class=\"cancel\" mat-flat-button (click)=\"eHandbook(true, true)\">\r\n                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_anchor_doc_002\" class=\"row mt-4\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.DOCUMENT }}</mat-label>\r\n              <input matInput [(ngModel)]=\"anchorTitle\" formControlName=\"anchorTitle\" />\r\n              <mat-error *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorTitle').hasError('required')\r\n                \" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_anchor_doc_003\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n              <mat-select [(ngModel)]=\"anchorByName\" formControlName=\"anchorByName\" disableOptionCentering>\r\n                <mat-option *ngFor=\"let docAnchor of documentAnchors\" [value]=\"docAnchor.anchorValue\">\r\n                  {{ docAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorByName').hasError('required')\r\n                \" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n  </div>\r\n\r\n  <div id=\"qmsckeditor_link_footer\" class=\"qmsckeditor button__groups row\">\r\n    <div class=\"col-12 mt-3 pl-3 pr-3 ps-3 pe-3\">\r\n      <button class=\"save\" mat-flat-button (click)=\"setLink()\" [disabled]=\"disableOkButton()\">\r\n        {{ LANG.QMSCKEDITOR.OK }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>",
+                    template: "<div id=\"qmsckeditor_link\" class=\"qmsckeditor qmsckeditor__link__container\">\r\n  <div id=\"qmsckeditor_link_header\">\r\n    <span id=\"qmsckeditor_link_header_001\" mat-icon-button class=\"qmsckeditor button__close\" (click)=\"onCloseDialog()\">\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmsckeditor_link_header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor_link_header_001\">\r\n        {{ LANG.QMSCKEDITOR.LINK }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <div id=\"qmsckeditor_link_type\" class=\"row\">\r\n    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\r\n      <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\r\n      <mat-select disableOptionCentering name=\"linkTypeList\" [(ngModel)]=\"selectedLinkType\"\r\n        (ngModelChange)=\"onSelectedLinkType()\">\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\r\n  <div id=\"qmsckeditor_link_content\">\r\n    <form [formGroup]=\"linkFormGroup\" class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLinkType == LinkType.url\">\r\n      <div id=\"qmsckeditor_link_url\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\r\n        <mat-expansion-panel id=\"qmsckeditor_link_url_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.URL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_url_001\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\r\n              <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\" 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 id=\"qmsckeditor_link_url_002\" class=\"row\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\r\n              <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\" 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 id=\"qmsckeditor_link_url_003\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\r\n              <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\"\r\n                (ngModelChange)=\"getUrlToSetProtocol()\" />\r\n              <mat-error *ngIf=\"linkFormGroup.get('url').hasError('required')\" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_004\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\r\n              <input matInput [(ngModel)]=\"advisoryTitle\" formControlName=\"advisoryTitle\" />\r\n              <mat-error *ngIf=\"linkFormGroup.get('advisoryTitle').hasError('required')\" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_005\" class=\"qmsckeditor button__groups row\">\r\n            <div class=\"col-6 pl-3 ps-3\">\r\n              <button class=\"save\" mat-flat-button (click)=\"eHandbook(false, false)\">\r\n                {{ LANG.QMSCKEDITOR.DOCUMENT_PROCESS }}\r\n              </button>\r\n            </div>\r\n            <div class=\"col-6 pr-3 pe-3\">\r\n              <button class=\"save\" mat-flat-button (click)=\"attachment()\">\r\n                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form [formGroup]=\"anchorTextFormGroup\" class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLinkType == LinkType.anchorText\">\r\n      <div id=\"qmsckeditor_link_anchor_text\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\r\n        <mat-expansion-panel id=\"qmsckeditor_link_anchor_text_panel\" [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\" (closed)=\"isExpanded = false\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.ANCHOR_TEXT_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_anchor_text_001\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n              <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorText\">\r\n                <mat-option *ngFor=\"let editorAnchor of editorAnchors\" [value]=\"editorAnchor.anchorValue\"\r\n                  disableOptionCentering>\r\n                  {{ editorAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"\r\n                  anchorTextFormGroup.get('anchorText').hasError('required')\r\n                \" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form [formGroup]=\"emailFormGroup\" class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLinkType == LinkType.email\">\r\n      <div id=\"qmsckeditor_link_email\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\r\n        <mat-expansion-panel id=\"qmsckeditor_link_email_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_email_001\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_ADDRESS }}</mat-label>\r\n              <input matInput [(ngModel)]=\"emailAddress\" formControlName=\"emailAddress\" />\r\n              <mat-error *ngIf=\"emailFormGroup.get('emailAddress').hasError('required')\" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_email_002\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_SUBJECT }}</mat-label>\r\n              <input matInput [(ngModel)]=\"emailSubject\" formControlName=\"emailSubject\" />\r\n              <mat-error *ngIf=\"emailFormGroup.get('emailSubject').hasError('required')\" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_email_003\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_BODY }}</mat-label>\r\n              <textarea matInput [(ngModel)]=\"emailBody\" formControlName=\"emailBody\"></textarea>\r\n              <mat-error *ngIf=\"emailFormGroup.get('emailBody').hasError('required')\" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form [formGroup]=\"anchorDocFormGroup\" class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLinkType == LinkType.anchorDocument\">\r\n      <div id=\"qmsckeditor_link_anchor_doc\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\r\n        <mat-expansion-panel id=\"qmsckeditor_link_email_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_anchor_doc_001\" class=\"qmsckeditor button__groups row\">\r\n            <div class=\"col-6 pl-3 ps-3\">\r\n              <button class=\"cancel\" mat-flat-button (click)=\"eHandbook(true, true)\">\r\n                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_anchor_doc_002\" class=\"row mt-4\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.DOCUMENT }}</mat-label>\r\n              <input matInput [(ngModel)]=\"anchorTitle\" formControlName=\"anchorTitle\" />\r\n              <mat-error *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorTitle').hasError('required')\r\n                \" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_anchor_doc_003\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n              <mat-select [(ngModel)]=\"anchorByName\" formControlName=\"anchorByName\" disableOptionCentering>\r\n                <mat-option *ngFor=\"let docAnchor of documentAnchors\" [value]=\"docAnchor.anchorValue\">\r\n                  {{ docAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorByName').hasError('required')\r\n                \" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n  </div>\r\n\r\n  <div id=\"qmsckeditor_link_footer\" class=\"qmsckeditor button__groups row\">\r\n    <div class=\"col-12 mt-3 pl-3 pr-3 ps-3 pe-3\">\r\n      <button class=\"save\" mat-flat-button (click)=\"setLink()\" [disabled]=\"disableOkButton()\">\r\n        {{ LANG.QMSCKEDITOR.OK }}\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}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__link__container textarea.mat-input-element{min-height:130px}"]
                 },] }
     ];
@@ -10056,6 +10174,7 @@
             _this.dialogRef = dialogRef;
             _this.data = data;
             _this.templates = [];
+            _this.isReplace = false;
             return _this;
         }
         QMSCKEditorLoadTemplateComponent.prototype.ngOnInit = function () {
@@ -10100,7 +10219,11 @@
                         return x.id === id;
                     });
                     var content = _this.templates[index].content;
-                    _this.dialogRef.close(content);
+                    var detail = {
+                        content: content,
+                        isReplace: _this.isReplace,
+                    };
+                    _this.dialogRef.close(detail);
                 }
             });
         };
@@ -10169,8 +10292,8 @@
     QMSCKEditorLoadTemplateComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-qmsck-load-template',
-                    template: "<div\r\n  id=\"qmsckeditor-load-template\"\r\n  class=\"qmsckeditor qmsckeditor__loadtemplate__container\"\r\n>\r\n  <div id=\"qmsckeditor-load-template-header\">\r\n    <span\r\n      id=\"qmsckeditor-load-template-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-load-template-header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor-template_002_001\">\r\n        {{ LANG.QMSCKEDITOR.CONTENT_TEMPLATE }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <div id=\"load-template_002\">\r\n    <div id=\"load-template_002_001\" class=\"title col-12 mt-3\">\r\n      <h2 id=\"load-template_002_001_001\">\r\n        {{ LANG.QMSCKEDITOR.CHOOSE_TEMPLATE }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <div\r\n    id=\"qmsckeditor-load-template-content\"\r\n    class=\"qmsckeditor template-content height\"\r\n  >\r\n    <div id=\"qmsckeditor-load-template-content_003\" class=\"mt-1 pl-2 pr-2 ps-2 pe-2\">\r\n      <mat-card\r\n        class=\"qmsckeditor card col-12\"\r\n        *ngFor=\"let template of templates\"\r\n      >\r\n        <div class=\"row\">\r\n          <div\r\n            class=\"qmsckeditor__cursor col-10\"\r\n            (click)=\"onSelectTemplate(template.id)\"\r\n          >\r\n            <div class=\"col-12 pl-0 ps-0 title\">\r\n              <span>{{ template.title }}</span>\r\n            </div>\r\n            <div class=\"col-12 pl-0 ps-0 content\">\r\n              <span>{{ template.description }}</span>\r\n            </div>\r\n          </div>\r\n          <div class=\"qmsckeditor__cursor col-1\">\r\n            <mat-icon (click)=\"onEditTemplate(template.id)\">edit</mat-icon>\r\n          </div>\r\n          <div class=\"qmsckeditor__cursor col-1\">\r\n            <mat-icon (click)=\"onDeleteTemplate(template.id)\">delete</mat-icon>\r\n          </div>\r\n        </div>\r\n      </mat-card>\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}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__loadtemplate__container .template-checkbox{padding-top:20px}"]
+                    template: "<div id=\"qmsckeditor-load-template\" class=\"qmsckeditor qmsckeditor__loadtemplate__container\">\r\n  <div id=\"qmsckeditor-load-template-header\">\r\n    <span id=\"qmsckeditor-load-template-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-load-template-header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor-template_002_001\">\r\n        {{ LANG.QMSCKEDITOR.CONTENT_TEMPLATE }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <div id=\"load-template_002\">\r\n    <div id=\"load-template_002_001\" class=\"title col-12 mt-3\">\r\n      <h2 id=\"load-template_002_001_001\">\r\n        {{ LANG.QMSCKEDITOR.CHOOSE_TEMPLATE }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <div id=\"qmsckeditor-load-template-content\" class=\"qmsckeditor template-content height\">\r\n    <div id=\"qmsckeditor-load-template-content_003\" class=\"mt-1 pl-2 pr-2 ps-2 pe-2\">\r\n      <mat-card class=\"qmsckeditor card col-12\" *ngFor=\"let template of templates\">\r\n        <div class=\"row\">\r\n          <div class=\"qmsckeditor__cursor col-10\" (click)=\"onSelectTemplate(template.id)\">\r\n            <div class=\"col-12 pl-0 ps-0 title\">\r\n              <span>{{ template.title }}</span>\r\n            </div>\r\n            <div class=\"col-12 pl-0 ps-0 content\">\r\n              <span>{{ template.description }}</span>\r\n            </div>\r\n          </div>\r\n          <div class=\"qmsckeditor__cursor col-1\">\r\n            <mat-icon (click)=\"onEditTemplate(template.id)\">edit</mat-icon>\r\n          </div>\r\n          <div class=\"qmsckeditor__cursor col-1\">\r\n            <mat-icon (click)=\"onDeleteTemplate(template.id)\">delete</mat-icon>\r\n          </div>\r\n        </div>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n  <div class=\"option\">\r\n    <mat-checkbox qms-group-options [(ngModel)]=\"isReplace\" color=\"primary\">\r\n      {{ LANG.QMSCKEDITOR.REPLACE_CONTENT }}\r\n    </mat-checkbox>\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}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__loadtemplate__container .template-checkbox{padding-top:20px}.qmsckeditor__loadtemplate__container .option{padding-left:15px}"]
                 },] }
     ];
     QMSCKEditorLoadTemplateComponent.ctorParameters = function () { return [
@@ -10185,14 +10308,7 @@
         function QmsUploadAdapter(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';
-            }
         }
         QmsUploadAdapter.prototype.abort = function () {
             if (this.xhr) {
@@ -10205,6 +10321,7 @@
             xhr.responseType = 'json';
         };
         QmsUploadAdapter.prototype._initListeners = function (resolve, reject, filename) {
+            var _this = this;
             var xhr = this.xhr;
             var loader = this.loader;
             var genericErrorText = this.config.LANG.QMSCKEDITOR.FAILED_TO_UPLOAD_FILE + ": " + filename + ".";
@@ -10215,6 +10332,7 @@
                 if (!response || response.error) {
                     return reject(response && response.error ? response.error.message : genericErrorText);
                 }
+                response = _this.config.apiUrl.substring(0, _this.config.apiUrl.length - 5) + response; // delete after test
                 resolve({ default: response });
             });
             if (xhr.upload) {
@@ -10226,10 +10344,12 @@
                 });
             }
         };
-        QmsUploadAdapter.prototype._sendRequest = function (file) {
+        QmsUploadAdapter.prototype._sendRequest = function (file, imageHeight, imageWidth) {
             var data = new FormData();
             data.append('file', file, file.name);
             data.append('name', file.name);
+            data.append('imageHeight', imageHeight.toString());
+            data.append('imageWidth', imageWidth.toString());
             this.xhr.send(data);
         };
         QmsUploadAdapter.prototype._getExtension = function (file) {
@@ -10240,16 +10360,26 @@
             if (filenames.length < 1) {
                 return '';
             }
-            return filenames[1];
+            return filenames[filenames.length - 1];
         };
         QmsUploadAdapter.prototype.upload = function () {
             var _this = this;
             return this.loader.file
                 .then(function (file) {
                 return new Promise(function (resolve, reject) {
-                    var reader = new FileReader();
-                    reader.readAsArrayBuffer(file);
-                    reader.onload = function () {
+                    var readerImageSrc = new FileReader();
+                    var readerArrayBuffer = new FileReader();
+                    var imageHeight = 0;
+                    var imageWidth = 0;
+                    readerImageSrc.readAsDataURL(file);
+                    readerArrayBuffer.readAsArrayBuffer(file);
+                    readerImageSrc.onload = function (event) {
+                        var img = new Image();
+                        img.src = event.target.result.toString();
+                        imageHeight = img.height;
+                        imageWidth = img.width;
+                    };
+                    readerArrayBuffer.onload = function () {
                         var fileExtension = _this._getExtension(file);
                         if (_this.config.imageUploadTypes.indexOf(fileExtension) > -1) {
                             if (file.size > (_this.config.maxFileSizeMB * 1024 * 1024)) {
@@ -10257,7 +10387,7 @@
                             }
                             _this._initRequest();
                             _this._initListeners(resolve, reject, file.name);
-                            _this._sendRequest(file);
+                            _this._sendRequest(file, imageHeight, imageWidth);
                         }
                         else {
                             reject(("" + _this.config.LANG.QMSCKEDITOR.UPLOAD_FILE_NOT_VALID_FORMAT).replace('{0}', _this.config.imageUploadTypes));
@@ -10511,6 +10641,7 @@
                 //   }
                 // ]
             },
+            // Please be aware that we can't use camelCase attribute name, it will lead to bug when upcasting
             link: {
                 addTargetToExternalLinks: false,
                 decorators: [
@@ -10519,8 +10650,7 @@
                         label: 'New window',
                         attributes: {
                             target: '_blank',
-                            manualTarget: true,
-                            url: 'url'
+                            manualtarget: true
                         }
                     },
                     {
@@ -10528,8 +10658,7 @@
                         label: 'Topmost window',
                         attributes: {
                             target: '_top',
-                            manualTarget: true,
-                            url: 'url'
+                            manualtarget: true
                         }
                     },
                     {
@@ -10537,8 +10666,7 @@
                         label: 'Same window',
                         attributes: {
                             target: '_self',
-                            manualTarget: true,
-                            url: 'url'
+                            manualtarget: true
                         }
                     },
                     {
@@ -10546,8 +10674,7 @@
                         label: 'Parent window',
                         attributes: {
                             target: '_parent',
-                            manualTarget: true,
-                            url: 'url'
+                            manualtarget: true
                         }
                     },
                     {
@@ -12908,6 +13035,15 @@
     function getToolbarConfiguration$1(LANG) {
         return {
             tools: [
+                {
+                    type: 'button',
+                    name: 'fullscreen',
+                    attrs: {
+                        button: {
+                            'data-tooltip': "" + LANG.BPMN.TOGGLE_FULL_SCREEN
+                        }
+                    }
+                },
                 {
                     type: 'button',
                     name: 'print',
@@ -13125,6 +13261,8 @@
             this.isReset = false;
             this.isSelectedTemplate = false;
             this.jsonOriginalContent = '';
+            this.isFullScreen = false;
+            this.isExpandedPanel = true;
         }
         BpmnService.prototype.buildDiagram = function (diagramTemplates, diagramTemplate, bpmnTheme, jsonContent, editMode, LANG) {
             var _this = this;
@@ -13904,6 +14042,34 @@
                         model[method]();
                     });
                     graph.stopBatch('selection');
+                },
+                toggleFullscreen: function () {
+                    var _a, _b, _c, _d, _e, _f, _g, _h;
+                    _this.isFullScreen = !_this.isFullScreen;
+                    if (_this.isFullScreen) {
+                        document.querySelectorAll('[id^="cdk-overlay-"]')[0].classList.add('full-screen-bpmn-editor_cdk-overlay');
+                        (_a = document.getElementById('leftpanel')) === null || _a === void 0 ? void 0 : _a.classList.add('full-screen-bpmn-editor_panel');
+                        (_b = document.getElementById('rightpanel')) === null || _b === void 0 ? void 0 : _b.classList.add('full-screen-bpmn-editor_panel');
+                        if (_this.isExpandedPanel) {
+                            (_c = document.getElementById('paperpanel')) === null || _c === void 0 ? void 0 : _c.classList.add('full-screen-bpmn-editor_paperpanel');
+                        }
+                        else {
+                            (_d = document.getElementById('paperpanel')) === null || _d === void 0 ? void 0 : _d.classList.add('full-screen-bpmn-editor_paperpanel-expandpanel');
+                        }
+                    }
+                    else {
+                        document.querySelectorAll('[id^="cdk-overlay-"]')[0].classList.remove('full-screen-bpmn-editor_cdk-overlay');
+                        (_e = document.getElementById('leftpanel')) === null || _e === void 0 ? void 0 : _e.classList.remove('full-screen-bpmn-editor_panel');
+                        (_f = document.getElementById('rightpanel')) === null || _f === void 0 ? void 0 : _f.classList.remove('full-screen-bpmn-editor_panel');
+                        if (_this.isExpandedPanel) {
+                            (_g = document.getElementById('paperpanel')) === null || _g === void 0 ? void 0 : _g.classList.remove('full-screen-bpmn-editor_paperpanel');
+                            document.getElementById('paperpanel').style.height = '400px';
+                        }
+                        else {
+                            (_h = document.getElementById('paperpanel')) === null || _h === void 0 ? void 0 : _h.classList.remove('full-screen-bpmn-editor_paperpanel-expandpanel');
+                            document.getElementById('paperpanel').style.height = '500px';
+                        }
+                    }
                 }
             };
             toolbar.on({
@@ -13919,7 +14085,8 @@
                 'to-front:pointerclick': toolbarCommands.applyOnSelection.bind(this, 'toFront'),
                 'to-back:pointerclick': toolbarCommands.applyOnSelection.bind(this, 'toBack'),
                 'snapline:change': toolbarCommands.changeSnapLines.bind(this),
-                'grid-size:change': paper.setGridSize.bind(paper)
+                'grid-size:change': paper.setGridSize.bind(paper),
+                'fullscreen:pointerclick': toolbarCommands.toggleFullscreen
             });
             toolbar.render().$el.appendTo('#toolbar-container');
             // const zoomTool = new joint.ui.Toolbar({
@@ -13965,8 +14132,8 @@
             window[FlowChartConst.ORG_JSONCONTENT] = this.jsonOriginalContent;
             window.postMessage(FlowChartConst.DIAGRAM_LOADED, this.getOriginForSelf());
         };
-        BpmnService.prototype.buildNewIcons = function (_a) {
-            var _b = _a === void 0 ? {} : _a, _c = _b.color, color = _c === void 0 ? '#000' : _c;
+        BpmnService.prototype.buildNewIcons = function (_j) {
+            var _k = _j === void 0 ? {} : _j, _l = _k.color, color = _l === void 0 ? '#000' : _l;
             var svgIcons = {
                 message1: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"12 12 16 16\"><path fill=\"none\" stroke=\"" + color + "\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.2\" d=\"M12.5 15.313v9.374h15v-9.375zm0 0l7.5 5.624 7.5-5.625\"/></svg>",
                 message2: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"12 12 16 16\"><path fill=\"" + color + "\" d=\"M12.5 14.344l7.5 5.625 7.5-5.625zm0 .937v9.375h15v-9.375L20 20.906z\"/></svg>",
@@ -14443,26 +14610,6 @@
     CKEditorLinkConst.AREA_PARTIAL_URL = '/area/detail/';
     CKEditorLinkConst.PROCESS_PARTIAL_URL = '/process-detail/';
 
-    var QMSCKEditorUploadService = /** @class */ (function (_super) {
-        __extends(QMSCKEditorUploadService, _super);
-        function QMSCKEditorUploadService() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        QMSCKEditorUploadService.prototype.uploadImage = function (file) {
-            var formData = new FormData();
-            formData.append('name', file.name);
-            formData.append('file', file);
-            return this.post('ckeditorUpload/UploadImage', formData);
-        };
-        return QMSCKEditorUploadService;
-    }(QMSCKEditorBaseService));
-    QMSCKEditorUploadService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function QMSCKEditorUploadService_Factory() { return new QMSCKEditorUploadService(i0__namespace.ɵɵinject(i1__namespace$1.HttpClient), i0__namespace.ɵɵinject(QMSCKEditorGlobalService)); }, token: QMSCKEditorUploadService, providedIn: "root" });
-    QMSCKEditorUploadService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-
     function base64StringToFile(base64String, filename) {
         var arr = base64String.split(',');
         if (arr.length < 2) {
@@ -14477,6 +14624,14 @@
         return new File([buff], filename, { type: mime });
     }
 
+    var QMSCKEditorBpmnExpand;
+    (function (QMSCKEditorBpmnExpand) {
+        QMSCKEditorBpmnExpand[QMSCKEditorBpmnExpand["isFullScreenAndnotExpandPanel"] = 0] = "isFullScreenAndnotExpandPanel";
+        QMSCKEditorBpmnExpand[QMSCKEditorBpmnExpand["isFullScreenAndisExpandPanel"] = 1] = "isFullScreenAndisExpandPanel";
+        QMSCKEditorBpmnExpand[QMSCKEditorBpmnExpand["notFullScreenAndnotExpandPanel"] = 2] = "notFullScreenAndnotExpandPanel";
+        QMSCKEditorBpmnExpand[QMSCKEditorBpmnExpand["notFullScreenAndisExpandPanel"] = 3] = "notFullScreenAndisExpandPanel";
+    })(QMSCKEditorBpmnExpand || (QMSCKEditorBpmnExpand = {}));
+
     var ILink = /** @class */ (function () {
         function ILink() {
             this.target = exports.TargetTypeName.new;
@@ -14490,11 +14645,11 @@
     }());
     var QMSCKEditorBpmnComponent = /** @class */ (function (_super) {
         __extends(QMSCKEditorBpmnComponent, _super);
-        function QMSCKEditorBpmnComponent(dialog, translate, bmpnService, bpmnApiService, linkService, uploadService, dialogRef, data) {
+        function QMSCKEditorBpmnComponent(dialog, translate, bpmnService, bpmnApiService, linkService, uploadService, dialogRef, data) {
             var _this = _super.call(this) || this;
             _this.dialog = dialog;
             _this.translate = translate;
-            _this.bmpnService = bmpnService;
+            _this.bpmnService = bpmnService;
             _this.bpmnApiService = bpmnApiService;
             _this.linkService = linkService;
             _this.uploadService = uploadService;
@@ -14564,7 +14719,7 @@
                             _c.jsonContent = _d.sent();
                             _d.label = 3;
                         case 3:
-                            this.bmpnService.buildDiagram(this.bpmnTemlates, null, CKEditorEventConst.QMSCK_BPMN, this.jsonContent, 1, this.LANG);
+                            this.bpmnService.buildDiagram(this.bpmnTemlates, null, CKEditorEventConst.QMSCK_BPMN, this.jsonContent, 1, this.LANG);
                             this.initDocumentIcons();
                             this.initTarget();
                             this.initConnectionType();
@@ -14606,20 +14761,37 @@
         };
         QMSCKEditorBpmnComponent.prototype.expandPanel = function () {
             this.expandedPanel = !this.expandedPanel;
+            this.bpmnService.isExpandedPanel = !this.bpmnService.isExpandedPanel;
             var panelStencil = document.getElementById('panel-stencil-container');
+            if (!panelStencil)
+                return;
             var paperContainer = document.getElementById('paperpanel');
             var stencilContainer = document.getElementById('stencilpanel');
-            if (panelStencil) {
-                if (!this.expandedPanel) {
+            switch (this.checkCaseBpmnExpandPanel()) {
+                case QMSCKEditorBpmnExpand.isFullScreenAndnotExpandPanel:
+                    stencilContainer.style.height = '50px';
+                    panelStencil.style.height = '50px';
+                    paperContainer === null || paperContainer === void 0 ? void 0 : paperContainer.classList.remove('full-screen-bpmn-editor_paperpanel');
+                    paperContainer === null || paperContainer === void 0 ? void 0 : paperContainer.classList.add('full-screen-bpmn-editor_paperpanel-expandpanel');
+                    break;
+                case QMSCKEditorBpmnExpand.isFullScreenAndisExpandPanel:
+                    stencilContainer.style.height = '150px';
+                    panelStencil.style.height = '150px';
+                    paperContainer === null || paperContainer === void 0 ? void 0 : paperContainer.classList.remove('full-screen-bpmn-editor_paperpanel-expandpanel');
+                    paperContainer === null || paperContainer === void 0 ? void 0 : paperContainer.classList.add('full-screen-bpmn-editor_paperpanel');
+                    break;
+                case QMSCKEditorBpmnExpand.notFullScreenAndnotExpandPanel:
                     stencilContainer.style.height = '50px';
                     panelStencil.style.height = '50px';
                     paperContainer.style.height = '500px';
-                }
-                else {
+                    break;
+                case QMSCKEditorBpmnExpand.notFullScreenAndisExpandPanel:
                     stencilContainer.style.height = '150px';
                     panelStencil.style.height = '150px';
                     paperContainer.style.height = '400px';
-                }
+                    break;
+                default:
+                    break;
             }
         };
         QMSCKEditorBpmnComponent.prototype.getTemplates = function () {
@@ -14987,7 +15159,7 @@
         QMSCKEditorBpmnComponent.prototype.onTabChange = function ($event) {
             window[FlowChartConst.TAB_NAME] = $event.tab.textLabel;
             if ($event.tab.textLabel == this.LANG.BPMN.PROPERTIES) {
-                this.bmpnService.openShapeFunctionality(this.LANG);
+                this.bpmnService.openShapeFunctionality(this.LANG);
             }
         };
         QMSCKEditorBpmnComponent.prototype.parseLinkUrl = function (url) {
@@ -15080,7 +15252,7 @@
                 var graph = window[FlowChartConst.GRAPH];
                 if (graph) {
                     graph.fromJSON(JSON.parse(ogrJsonContent));
-                    this.bmpnService.setDefaultSelectedValue();
+                    this.bpmnService.setDefaultSelectedValue();
                     window[FlowChartConst.IS_SELECTED_TEMPLATE] = false;
                 }
                 window[FlowChartConst.MY_CELL_VIEW] = null;
@@ -15260,6 +15432,16 @@
             return minValue;
         };
         ;
+        QMSCKEditorBpmnComponent.prototype.checkCaseBpmnExpandPanel = function () {
+            if (this.bpmnService.isFullScreen && !this.expandedPanel)
+                return QMSCKEditorBpmnExpand.isFullScreenAndnotExpandPanel;
+            if (this.bpmnService.isFullScreen && this.expandedPanel)
+                return QMSCKEditorBpmnExpand.isFullScreenAndisExpandPanel;
+            if (!this.bpmnService.isFullScreen && !this.expandedPanel)
+                return QMSCKEditorBpmnExpand.notFullScreenAndnotExpandPanel;
+            if (!this.bpmnService.isFullScreen && this.expandedPanel)
+                return QMSCKEditorBpmnExpand.notFullScreenAndisExpandPanel;
+        };
         return QMSCKEditorBpmnComponent;
     }(QMSCKEditorBaseComponent));
     QMSCKEditorBpmnComponent.decorators = [
@@ -17778,7 +17960,7 @@
     QMSCKEditorImageMapComponent.decorators = [
         { type: i0.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 ps-2 pe-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 ps-3 pe-3\">\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 ps-3 pe-3\">\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 ps-3 pe-3\">\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-3 ps-3 pe-3\">\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 ps-3 pe-3\">\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 ps-3 pe-3\">\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 ms-0 me-0\">\r\n                        <div class=\"col-4 pr-0 pe-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 pe-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 ps-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",
+                    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 ps-2 pe-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 ps-3 pe-3\">\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 ps-3 pe-3\">\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 ps-3 pe-3\">\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-3 ps-3 pe-3\">\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 ps-3 pe-3\">\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 ps-3 pe-3\">\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)=\"eHandbook(false, false)\">\r\n                                                {{ LANG.QMSCKEDITOR.DOCUMENT_PROCESS }}\r\n                                            </button>\r\n                                        </div>\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>\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\"\r\n                        class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4 ms-0 me-0\">\r\n                        <div class=\"col-4 pr-0 pe-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 pe-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 ps-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}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}::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}"]
                 },] }
     ];
@@ -24339,6 +24521,13 @@
         { type: QMSCKEditorLink, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
     ]; };
 
+    var CKEditorImageUploadTypeConst = /** @class */ (function () {
+        function CKEditorImageUploadTypeConst() {
+        }
+        return CKEditorImageUploadTypeConst;
+    }());
+    CKEditorImageUploadTypeConst.QMSCK_IMAGE_TYPES_SUPPORT_DEFAULT = 'pjp,jpg,pjpeg,jpeg,jfif,png,gif,bmp,webp,tif,tiff';
+
     var QMSCKEditorComponent = /** @class */ (function (_super) {
         __extends(QMSCKEditorComponent, _super);
         /**
@@ -24412,6 +24601,9 @@
                 toolbarItems += ',' + this.qmsckData.toggledToolbarItems;
             }
             this.ckeditorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(toolbarItems);
+            if (this.qmsckData.hideImgOptions) {
+                this.ckeditorConfig = this.hideImageOptions(this.ckeditorConfig, this.qmsckData.hideImgOptions);
+            }
             this.globalService.setApiUrl(this.qmsckData.apiUrl);
             if (this.isEnabledMathtypeConfig()) {
                 this.addMathTypeConfig();
@@ -24563,6 +24755,15 @@
                     },
                 };
         };
+        QMSCKEditorComponent.prototype.hideImageOptions = function (config, options) {
+            var itemArray = options.split(',');
+            itemArray.forEach(function (element) {
+                config.image.toolbar = config.image.toolbar.filter(function (item) {
+                    return item !== element;
+                });
+            });
+            return config;
+        };
         /**
          * onReady
          */
@@ -24575,7 +24776,7 @@
         };
         QMSCKEditorComponent.prototype.initEditor = function (editor) {
             var _this = this;
-            var imageUploadTypes = editor.config.get("image.upload.types");
+            var imageUploadTypes = CKEditorImageUploadTypeConst.QMSCK_IMAGE_TYPES_SUPPORT_DEFAULT;
             var maxFileSizeMB = this.qmsckData.maxFileSizeMB;
             var config = {
                 apiUrl: this.qmsckData.apiUrl,
@@ -24681,12 +24882,10 @@
                 .afterClosed()
                 .pipe(operators.takeUntil(this.ngUnsubcribe))
                 .subscribe(function (result) {
-                if (result) {
-                    var evt = new CustomEvent(_this.ckEditorEventConst.QMSCK_LINK_PLUGIN_RESP, {
-                        detail: result,
-                    });
-                    window.dispatchEvent(evt);
-                }
+                var evt = new CustomEvent(_this.ckEditorEventConst.QMSCK_LINK_PLUGIN_RESP, {
+                    detail: result
+                });
+                window.dispatchEvent(evt);
             });
         };
         /**
@@ -24770,6 +24969,7 @@
                 .pipe(operators.takeUntil(this.ngUnsubcribe))
                 .subscribe(function (result) {
                 if (result) {
+                    result.values = _this.qmsckData.apiUrl.substring(0, _this.qmsckData.apiUrl.length - 5) + result.values; // delete after test
                     var evt = new CustomEvent(_this.ckEditorEventConst.QMSCK_BPMN_PLUGIN_RESP, {
                         detail: result,
                     });
@@ -24892,6 +25092,7 @@
                 var data = new PopupData();
                 data.moduleId = 2;
                 data.moduleName = _this.LANG.QMSCKEDITOR.SELECT_VIDEO_FROM_ARCHIVE;
+                data.moduleUploadImageName = _this.LANG.QMSCKEDITOR.SELECT_VIDEO_IMAGE;
                 data.treeData1 = videos.map(function (item) {
                     return {
                         rootId: item.rootId,
@@ -24908,6 +25109,7 @@
                 });
                 data.treeData2 = [];
                 data.treeConfig1 = config;
+                data.canUploadImage = videos.length ? true : false;
                 var dialogRef = _this.dialog.open(RelatedPopupComponent, {
                     minWidth: "450px",
                     maxWidth: "800px",
@@ -24923,14 +25125,17 @@
                 }, 100);
                 dialogRef.afterClosed().subscribe(function (result) {
                     if (result) {
-                        var ids_1 = result.reduce(function (result, item) {
+                        if (result.imageRelativeUrl.length) { // delete after test 
+                            result.imageRelativeUrl = _this.qmsckData.apiUrl.substring(0, _this.qmsckData.apiUrl.length - 5) + result.imageRelativeUrl; // delete after test
+                        }
+                        var ids_1 = result.checkedNodeList.reduce(function (result, item) {
                             result[item.id.toString()] = item.id;
                             return result;
                         }, {});
                         var urls = videos
                             .filter(function (i) { return i.childId && !!ids_1[i.childId.toString()]; })
                             .map(function (i) { return i.url; });
-                        var evt = new CustomEvent(_this.ckEditorEventConst.QMSCK_BROWSE_VIDEO_RESP, { detail: { urls: urls } });
+                        var evt = new CustomEvent(_this.ckEditorEventConst.QMSCK_BROWSE_VIDEO_RESP, { detail: { urls: urls, thumbnailUrl: result.imageRelativeUrl } });
                         window.dispatchEvent(evt);
                     }
                 });
@@ -24978,7 +25183,7 @@
                     ],
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.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{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}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.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:var(--disabled);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 var(--primary);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)}"]
+                    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}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor_container .qmsckeditor__minwidth{width:100%}.qmsckeditor_container .ck-editor__editable{overflow-y:auto}.qmsckeditor_container p{line-height:normal}.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:var(--disabled);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 var(--primary);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 = function () { return [
@@ -26001,16 +26206,19 @@
         function QmsReportCoverPortraitComponent(translate, renderer) {
             this.translate = translate;
             this.renderer = renderer;
+            this.ngUnsubscribe = new rxjs.Subject();
         }
         QmsReportCoverPortraitComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.translate.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.translate.getObjectLang(res);
                 }
             });
         };
-        QmsReportCoverPortraitComponent.prototype.ngAfterViewInit = function () {
+        QmsReportCoverPortraitComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
         };
         return QmsReportCoverPortraitComponent;
     }());
@@ -26035,15 +26243,20 @@
     var QmsReportContentPortraitComponent = /** @class */ (function () {
         function QmsReportContentPortraitComponent(translate) {
             this.translate = translate;
+            this.ngUnsubscribe = new rxjs.Subject();
         }
         QmsReportContentPortraitComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.translate.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.translate.getObjectLang(res);
                 }
             });
         };
+        QmsReportContentPortraitComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         return QmsReportContentPortraitComponent;
     }());
     QmsReportContentPortraitComponent.decorators = [
@@ -26221,7 +26434,7 @@
         };
         SelectIncludeChildrenPopUpComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.translate.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.translate.getObjectLang(res);
                 }
@@ -26231,7 +26444,7 @@
                     _this.filteredOptions = res;
                 }
             });
-            this.myControl.valueChanges.pipe(operators.debounceTime(1000)).subscribe(function (val) {
+            this.myControl.valueChanges.pipe(operators.debounceTime(1000), operators.takeUntil(this.ngUnsubscribe)).subscribe(function (val) {
                 _this.isInputValue = true;
                 _this.onSearchRelated(val);
             });
@@ -26996,7 +27209,7 @@
             this.filteredOptions = [];
             this.isFocusedInputSearch = false;
             this.searchField = new forms.FormControl();
-            this.searchField.valueChanges.pipe(operators.startWith(''), operators.debounceTime(1000)).subscribe(function (text) {
+            this.searchField.valueChanges.pipe(operators.startWith(''), operators.debounceTime(1000), operators.takeUntil(this.ngUnsubscribe)).subscribe(function (text) {
                 if (typeof text === 'string' && text) {
                     _this.isFocusedInputSearch = !!text;
                     var params = {
@@ -27011,7 +27224,7 @@
         }
         SelectOneNextDialog.prototype.ngOnInit = function () {
             var _this = this;
-            this.translate.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.translate.getObjectLang(res);
                 }
@@ -27189,7 +27402,7 @@
         };
         SelectOneDialog.prototype.ngOnInit = function () {
             var _this = this;
-            this.translate.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.translate.getObjectLang(res);
                 }
@@ -27221,7 +27434,7 @@
                     }
                 }
             });
-            this.myControl.valueChanges.pipe(operators.debounceTime(1000)).subscribe(function (val) {
+            this.myControl.valueChanges.pipe(operators.debounceTime(1000), operators.takeUntil(this.ngUnsubscribe)).subscribe(function (val) {
                 _this.isInputValue = true;
                 _this.onSearchRelated(val);
             });
@@ -28761,7 +28974,7 @@
         };
         SelectProcessDocumentPopupComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.translate.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.translate.getObjectLang(res);
                 }
@@ -28796,7 +29009,7 @@
                     _this.setSelectedData();
                 }
             });
-            this.myControl.valueChanges.pipe(operators.debounceTime(1000)).subscribe(function (val) {
+            this.myControl.valueChanges.pipe(operators.debounceTime(1000), operators.takeUntil(this.ngUnsubscribe)).subscribe(function (val) {
                 _this.isInputValue = true;
                 _this.onSearchRelated(val);
             });
@@ -29580,10 +29793,10 @@
         QMSNavigationDrawerComponent.prototype.ngOnChanges = function (changes) {
             var _this = this;
             this.dataSource.data = this.treeData;
-            if (this.filterText) {
+            if (changes.filterText && JSON.stringify(changes.filterText.currentValue) !== JSON.stringify(changes.filterText.previousValue)) {
                 this.expandNodeSearched(this.treeData, this.filterText);
             }
-            if (changes.openNodes) {
+            if (changes.openNodes && JSON.stringify(changes.openNodes.currentValue) !== JSON.stringify(changes.openNodes.previousValue)) {
                 this.openNodes.forEach(function (item) {
                     _this.treeControl.expand(_this.treeControl.dataNodes.find(function (p) { return p.id.toString() === item; }));
                 });
@@ -29944,6 +30157,7 @@
             this.numberOfPages = [];
             this.displayNumberOfPages = [];
             this.isFirstLoad = true;
+            this.ngUnsubscribe = new rxjs.Subject();
         }
         Object.defineProperty(QMSPaginatorComponent.prototype, "pageSizeOptions", {
             get: function () {
@@ -29993,12 +30207,16 @@
         QMSPaginatorComponent.prototype.ngOnInit = function () {
             var _this = this;
             var langDefault = 'en';
-            this.trans.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.trans.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 _this.LANG = _this.trans.getObjectLang(res || langDefault);
             });
             this.getNumberOfPages();
             this.isFirstLoad = false;
         };
+        QMSPaginatorComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         QMSPaginatorComponent.prototype._updateDisplayedPageSizeOptions = function () {
             if (!this.pageSize) {
                 this._pageSize =
@@ -30205,10 +30423,10 @@
             };
         };
         QMSNavDrawerComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.treeData) {
+            if (changes.treeData && JSON.stringify(changes.treeData.currentValue) !== JSON.stringify(changes.treeData.previousValue)) {
                 this.dataSource.data = this.treeData;
             }
-            if (changes.openNodes) {
+            if (changes.openNodes && JSON.stringify(changes.openNodes.currentValue) !== JSON.stringify(changes.openNodes.previousValue)) {
                 this.findAndExpandNodes();
                 this._activeNode();
             }
@@ -30415,13 +30633,10 @@
             this.customClass = '';
             this.headerName = {
                 externalName: '',
-                treeName: '',
-                resultSearchName: ''
+                treeName: ''
             };
             this.modeView = exports.ModeDepartmentTreeeViewEnum.Basic;
             this.activeSelectAllNode = false;
-            this.isMobile = false;
-            this.lazy = false;
         }
         return QMSSelectDepartmentTreeConfig;
     }());
@@ -30515,14 +30730,13 @@
             var _this = _super.call(this) || this;
             _this.data = [];
             _this.data = [];
-            _this.pageIndex = 0;
             return _this;
         }
         return QMSDepartmentPagingModel;
     }(paginator.PageEvent));
 
     var SelectDepartmentTreeComponent = /** @class */ (function () {
-        function SelectDepartmentTreeComponent(cdRef, domSanitizer, appIconService, iconRegistry, eleRef, trans, treeDepartmentGlobalService, overlay, viewContainerRef) {
+        function SelectDepartmentTreeComponent(cdRef, domSanitizer, appIconService, iconRegistry, eleRef, trans, treeDepartmentGlobalService) {
             var _this = this;
             this.cdRef = cdRef;
             this.domSanitizer = domSanitizer;
@@ -30531,32 +30745,26 @@
             this.eleRef = eleRef;
             this.trans = trans;
             this.treeDepartmentGlobalService = treeDepartmentGlobalService;
-            this.overlay = overlay;
-            this.viewContainerRef = viewContainerRef;
-            this.spinnerArr = new Array(12).fill(0);
             this.arrSkeleton = new Array(6).fill(0);
             this.height = '50vh';
             this.config = new QMSSelectDepartmentTreeConfig();
             this.isIncludeChildren = false;
             this.onSearchEvent = new i0.EventEmitter();
             this.onPagingSearchEvent = new i0.EventEmitter();
-            this.onValueChangeEvent = new i0.EventEmitter();
-            this.selectionNodeChangeEvent = new i0.EventEmitter();
-            this.onCheckNodeEvent = new i0.EventEmitter();
-            this.onExpandNodeEvent = new i0.EventEmitter();
-            this.onLoadMoreEvent = new i0.EventEmitter();
             this.MODE_VIEW_ENUM = exports.ModeDepartmentTreeeViewEnum;
-            this.ITEM_SIZE = 50;
             this.ngUnsubscribe = new rxjs.Subject();
+            this.isLoaded = false;
             this.resultSearchSelected = [];
             this.resultSelected = [];
             this.getDataTree$ = new rxjs.BehaviorSubject([]);
+            this.onValueChangeEvent = new i0.EventEmitter();
+            this.selectionNodeChangeEvent = new i0.EventEmitter();
             this.searchDepartment$ = new rxjs.BehaviorSubject(new QMSDepartmentPagingModel());
             this.resultSearch = [];
             this.indexView = 0;
             this.scrollToNodeEvent$ = new rxjs.Subject();
-            this.getActiveNodeEvent$ = new rxjs.Subject();
             this.activeNode = '';
+            this.getActiveNodeEvent$ = new rxjs.Subject();
             this.PAGINATION_SIZE = exports.PaginationSize;
             this.PAGE_SIZE_OPTION = [5, 10, 15, 20, 25, 100];
             this.nestedTreeNodeMap = new Map();
@@ -30565,18 +30773,17 @@
             this.checkListSelectionSearch = new collections.SelectionModel(true);
             this.formSearchControl = new forms.FormControl('');
             this.getLoading$ = new rxjs.BehaviorSubject(false);
-            this.getLoadingMore$ = new rxjs.BehaviorSubject(false);
-            this.afterOnCheckNode = new rxjs.Subject();
             this.textResultSearch = '';
             this.itemIconType = ItemIconType;
             this._transformer = function (node, level) {
+                var _a;
                 var flatNode = _this.convertToFlatNode(node) || new QMSFlatNodeTree();
                 flatNode.id = node.id;
                 flatNode.name = node.name;
-                flatNode.expandable = (node.children && node.children.length > 0) || (!!node.childCount) || node.expandable;
+                flatNode.expandable = (node.children && node.children.length > 0) || (!!node.childCount);
                 flatNode.level = level;
                 flatNode.parentId = node.parentId;
-                flatNode.markedGetChildren = node.children.length > 0;
+                flatNode.markedGetChildren = !!((_a = node.children) === null || _a === void 0 ? void 0 : _a.length);
                 flatNode.parentId = node.parentId;
                 flatNode.itemIcon = node.itemIcon;
                 flatNode.itemIconSvg = node.itemIconSvg;
@@ -30600,7 +30807,6 @@
                 if (!_this.dataSource)
                     return;
                 _this.dataSource.data = data;
-                _this.cdRef.detectChanges();
             });
             // Register icon
             appIconService.registerProcessIcon(iconRegistry, domSanitizer);
@@ -30610,7 +30816,7 @@
             appIconService.registerDeviationIcon(iconRegistry, domSanitizer);
             appIconService.registerChecklistIcon(iconRegistry, domSanitizer);
             appIconService.registerRiskIcon(iconRegistry, domSanitizer);
-            this.trans.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.trans.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.trans.getObjectLang(res);
                 }
@@ -30618,9 +30824,10 @@
             this._handleSearchEvent();
             this._handleActiveNodeEvent();
             this._handleItemSelectionChanged();
-            this.getLoading$.pipe(operators.takeUntil(this.ngUnsubscribe), operators.tap(function (res) {
+            this.getLoading$.pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function (res) {
                 res ? _this.formSearchControl.disable() : _this.formSearchControl.enable();
-            })).subscribe();
+            });
         }
         Object.defineProperty(SelectDepartmentTreeComponent.prototype, "rowsSkeleton", {
             set: function (value) {
@@ -30681,19 +30888,7 @@
             this.cdRef.detectChanges();
         };
         SelectDepartmentTreeComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
             this.cdRef.detectChanges();
-            this.cdkVirtualScrollViewport.scrolledIndexChange
-                .pipe(operators.takeUntil(this.ngUnsubscribe), operators.map(function (_) { return _this.cdkVirtualScrollViewport.measureScrollOffset('bottom'); }), operators.pairwise(), operators.filter(function (_b) {
-                var _c = __read(_b, 2), x1 = _c[0], x2 = _c[1];
-                return x1 > x2 && x2 < 140;
-            }), operators.throttleTime(200), operators.tap(function (_) {
-                if (_this.getLoadingMore$.value || !_this.config.lazy)
-                    return;
-                _this.onLoadMoreEvent.emit();
-                _this.getLoadingMore$.next(true);
-            }))
-                .subscribe();
         };
         SelectDepartmentTreeComponent.prototype.ngOnInit = function () {
             this._initTreeData();
@@ -30704,69 +30899,95 @@
             this.ngUnsubscribe.complete();
         };
         SelectDepartmentTreeComponent.prototype._initTreeData = function () {
+            var _this = this;
             this.treeControl = new tree.FlatTreeControl(this.getLevel, this.isExpandable);
             this.treeFlattener = new tree$1.MatTreeFlattener(this._transformer, this.getLevel, this.isExpandable, this._getChild);
             this.dataSource = new tree$1.MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
             var _treeDataInput = ___namespace.cloneDeep(this.config.treeData);
             if (!_treeDataInput.length)
                 return;
-            var treeData = this._convertToTreeData(_treeDataInput);
-            this.updateDataTree(treeData);
-            this.getLoading$.next(false);
-        };
-        SelectDepartmentTreeComponent.prototype._convertToTreeData = function (data) {
-            var roots = [];
-            var mapNode = new Map();
-            for (var i = 0; i < data.length; i++) {
-                mapNode.set(data[i].id, i);
-                data[i].children = [];
+            var rootNode = _treeDataInput.filter(function (item) { return !item.parentId; })
+                .map(function (item, _index) {
+                var node = {
+                    id: item.id,
+                    name: item.name,
+                    externalName: item.externalName,
+                    markedGetChildren: item.markedGetChildren,
+                    children: [],
+                    isFile: false,
+                    itemIcon: item.itemIcon,
+                    itemMatIcon: item.itemMatIcon,
+                    itemIconSvg: item.itemIconSvg,
+                    parentId: item.parentId,
+                    isGroup: false
+                };
+                return node;
+            });
+            if (!rootNode.length)
+                throw ('Data invalid.');
+            var invalidItems = _treeDataInput.filter(function (item) { return item.id == item.parentId; }) || [];
+            if (invalidItems.length) {
+                throw ("data " + JSON.stringify(invalidItems) + " invalid");
             }
-            for (var i = 0; i < data.length; i++) {
-                var node = data[i];
-                if (node.parentId) {
-                    if (data[mapNode.get(node.parentId)]) {
-                        data[mapNode.get(node.parentId)].children.push(node);
-                        continue;
+            this.updateDataTree(rootNode);
+            var groupResult = _treeDataInput.filter(function (x) { return x.parentId; }).reduce(function (result, currentValue) {
+                (result[currentValue['parentId']] = result[currentValue['parentId']] || []).push(currentValue);
+                return result;
+            }, {});
+            var checkValidGroup = function (id) {
+                var parents = [];
+                var parent = _treeDataInput.find(function (x) { return x.id == id; });
+                while (parent === null || parent === void 0 ? void 0 : parent.id) {
+                    parents.push(parent);
+                    parent = _treeDataInput.find(function (x) { return x.id == (parent === null || parent === void 0 ? void 0 : parent.parentId); });
+                }
+                return parents.some(function (x) { return !x.parentId; });
+            };
+            if (!(rootNode && !!rootNode.length))
+                return;
+            var groupResultKey = Object.keys(groupResult).filter(checkValidGroup);
+            while (groupResultKey.length) {
+                groupResultKey = groupResultKey.filter(function (key) {
+                    var parentFlatNode = _this.treeControl.dataNodes.find(function (node) { return node.id === key; });
+                    if (parentFlatNode) {
+                        var parentNestedNode = _this.convertToNestedNode(parentFlatNode);
+                        parentNestedNode.markedGetChildren = true;
+                        parentNestedNode.children = ___namespace.cloneDeep(groupResult[key]);
+                        parentNestedNode.childCount = parentNestedNode.children.length;
+                        parentNestedNode.isGroup = false;
+                        _this.updateDataTree(_this.currentTreeData);
+                        groupResult[key] = [];
+                        return false;
                     }
-                    roots.push(node);
-                    continue;
-                }
-                roots.push(node);
+                    return true;
+                });
             }
-            return roots;
+            this.getLoading$.next(false);
+            this._initCheckListSelected();
         };
         SelectDepartmentTreeComponent.prototype._initCheckListSelected = function () {
             var _this = this;
             if (!this.config.selectedList.length)
                 return;
-            var selectedList = this.config.selectedList.sort(function (x, y) { return x.isGroup ? -1 : y.isGroup ? 1 : 0; });
-            selectedList.forEach(function (item) { return __awaiter(_this, void 0, void 0, function () {
-                var _a, node, nestedNode;
-                var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            node = this.treeControl.dataNodes.find(function (x) { return x.id === item.id; });
-                            if (!node) return [3 /*break*/, 2];
-                            nestedNode = this.convertToNestedNode(node);
-                            nestedNode.isGroup = item.isGroup;
-                            nestedNode.groupId = item.groupId;
-                            this.checkListSelection.select(node);
-                            return [4 /*yield*/, this.handleCheckNode(node)];
-                        case 1:
-                            _b.sent();
-                            ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) && item.children.forEach(function (child) {
-                                var node = _this.treeControl.dataNodes.find(function (_x) { return _x.id === child.id; });
-                                if (node) {
-                                    _this.onExpandAllParent(node);
-                                }
-                            });
-                            this.onExpandAllParent(node);
-                            _b.label = 2;
-                        case 2: return [2 /*return*/];
-                    }
-                });
-            }); });
+            var selectedList = this.config.selectedList;
+            selectedList.forEach(function (item) {
+                var _a;
+                var node = _this.treeControl.dataNodes.find(function (x) { return x.id === item.id; });
+                if (node) {
+                    var nestedNode = _this.convertToNestedNode(node);
+                    nestedNode.isGroup = item.isGroup;
+                    nestedNode.groupId = item.groupId;
+                    _this.checkListSelection.select(node);
+                    _this._handleCheckNode(node);
+                    ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) && item.children.forEach(function (child) {
+                        var node = _this.treeControl.dataNodes.find(function (_x) { return _x.id === child.id; });
+                        if (node) {
+                            _this.onExpandAllParent(node);
+                        }
+                    });
+                    _this.onExpandAllParent(node);
+                }
+            });
             this.cdRef.detectChanges();
         };
         //Handle item selection changed
@@ -30779,7 +31000,6 @@
                 var checkExistInResult = function (node) { return _this.resultSelected.findIndex(function (x) { return x.id === node.id; }) > -1; };
                 if (added.length) {
                     added.forEach(function (node) {
-                        var _a;
                         var nestedNode = _this.convertToNestedNode(node);
                         nestedNode.children = [];
                         nestedNode.childCount = _this.getListChildrenOfNode(node).length;
@@ -30788,7 +31008,6 @@
                             nestedNode.groupId = existGroup.id;
                             if (!existGroup.children.some(function (x) { return x.id === nestedNode.id; })) {
                                 existGroup.children.push(nestedNode);
-                                existGroup.childCount = ((_a = _this.getListChildrenOfNode(_this.convertToFlatNode(existGroup))) === null || _a === void 0 ? void 0 : _a.length) || 0;
                                 _this._onSelectionNodeChangeEvent('updated', [existGroup]);
                             }
                             if (!checkExistInResult(existGroup)) {
@@ -30911,7 +31130,7 @@
             this.scrollToNodeEvent$.pipe(operators.takeUntil(this.ngUnsubscribe), operators.switchMap(function (val) {
                 var delayTiming = _this.indexView === 1 ? 700 : 0;
                 _this.setIndexView(0);
-                return rxjs.of(val).pipe(operators.delay(delayTiming));
+                return rxjs.of(val).pipe(operators.delay(delayTiming), operators.takeUntil(_this.ngUnsubscribe));
             })).subscribe(function (res) {
                 _this.onScrollIntoNode(res);
             });
@@ -30926,20 +31145,13 @@
             this.getDataTree$.next(data);
         };
         SelectDepartmentTreeComponent.prototype.onExpandNode = function (node) {
-            if (!node.expandable)
-                return;
-            this.treeControl.toggle(node);
-            if (this.treeControl.isExpanded(node) && !node.markedGetChildren) {
-                node.isLoading = true;
-            }
-            this.onExpandNodeEvent.emit(node);
         };
         SelectDepartmentTreeComponent.prototype.onOptionSearchSelected = function (value) {
             var flatNode = this.treeControl.dataNodes.find(function (node) { return node.id === value.id; });
             if (!flatNode)
                 return;
             this.checkListSelection.select(flatNode);
-            this.handleCheckNode(flatNode);
+            this._handleCheckNode(flatNode);
             this.onScrollIntoNode(flatNode.id);
         };
         SelectDepartmentTreeComponent.prototype.onCheckAllRootTreeNode = function () {
@@ -30982,17 +31194,12 @@
         SelectDepartmentTreeComponent.prototype.onCheckNode = function (node) {
             if (!node)
                 return;
-            this.onCheckNodeEvent.emit(node);
             this.checkListSelection.toggle(node);
             if (this.config.isSelectOne) {
                 this._handleSelectOne(node);
                 return;
             }
-            if (this.config.lazy) {
-                node.isLoading = this.isIncludeChildren && node.expandable && !node.markedGetChildren;
-                return;
-            }
-            this.handleCheckNode(node);
+            this._handleCheckNode(node);
         };
         SelectDepartmentTreeComponent.prototype._handleSelectOne = function (node) {
             var _b;
@@ -31018,7 +31225,7 @@
         SelectDepartmentTreeComponent.prototype.onRemoveNode = function (nodeId) {
             var flatNode = this.treeControl.dataNodes.find(function (item) { return item.id === nodeId; });
             this.checkListSelection.deselect(flatNode);
-            flatNode && this.handleCheckNode(flatNode);
+            flatNode && this._handleCheckNode(flatNode);
         };
         SelectDepartmentTreeComponent.prototype.isIndeterminate = function (node) {
             var _this = this;
@@ -31030,56 +31237,35 @@
             var listCheck = __spreadArray(__spreadArray([], __read(this.getListChildrenOfNode(node))), [node]);
             return listCheck.every(function (item) { return _this.isSelectedNode(item); });
         };
-        /**
-         * This function handle check node of tree
-         * @param node node of tree
-         * @param callback do something before handle check node
-         * @returns
-         */
-        SelectDepartmentTreeComponent.prototype.handleCheckNode = function (node, callback) {
-            return __awaiter(this, void 0, void 0, function () {
-                var isSelected, childSelected, nestedNode, existedGroup_1, children, deselectNodes;
-                var _b, _c, _d;
-                var _this = this;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
-                        case 0:
-                            if (!!!callback) return [3 /*break*/, 2];
-                            return [4 /*yield*/, callback(node)];
-                        case 1:
-                            _e.sent();
-                            _e.label = 2;
-                        case 2:
-                            node.isLoading = false;
-                            isSelected = this.isSelectedNode(node);
-                            childSelected = this.getChildrenSelected(node);
-                            nestedNode = this.convertToNestedNode(node);
-                            if (isSelected) {
-                                existedGroup_1 = this._getAllParentNode(node).find(function (x) { return _this.convertToNestedNode(x).isGroup; });
-                                if (!this.isIncludeChildren) {
-                                    nestedNode.groupId = existedGroup_1 === null || existedGroup_1 === void 0 ? void 0 : existedGroup_1.id;
-                                    return [2 /*return*/];
-                                }
-                                children = this.getListChildrenOfNode(node);
-                                nestedNode.isGroup = !existedGroup_1 && !!children.length;
-                                if (!children.length)
-                                    return [2 /*return*/];
-                                children.forEach(function (x) {
-                                    var _node = _this.convertToNestedNode(x);
-                                    _node.groupId = existedGroup_1 ? existedGroup_1.id : node.id;
-                                    _node.isGroup = false;
-                                });
-                                (_b = this.checkListSelection).deselect.apply(_b, __spreadArray([], __read(childSelected.map(this.resetNode))));
-                                (_c = this.checkListSelection).select.apply(_c, __spreadArray([], __read(children.map(this.resetNode))));
-                                return [2 /*return*/];
-                            }
-                            deselectNodes = (this.isIncludeChildren || nestedNode.isGroup) ? childSelected : [node];
-                            (_d = this.checkListSelection).deselect.apply(_d, __spreadArray([], __read(deselectNodes)));
-                            nestedNode.isGroup = false;
-                            return [2 /*return*/];
-                    }
+        SelectDepartmentTreeComponent.prototype._handleCheckNode = function (node) {
+            var _b, _c, _d;
+            var _this = this;
+            var isSelected = this.isSelectedNode(node);
+            var childSelected = this.getChildrenSelected(node);
+            var nestedNode = this.convertToNestedNode(node);
+            if (isSelected) {
+                // Check existed group
+                var existedGroup_1 = this._getAllParentNode(node).find(function (x) { return _this.convertToNestedNode(x).isGroup; });
+                if (!this.isIncludeChildren) {
+                    nestedNode.groupId = existedGroup_1 === null || existedGroup_1 === void 0 ? void 0 : existedGroup_1.id;
+                    return;
+                }
+                var children = this.getListChildrenOfNode(node);
+                nestedNode.isGroup = !existedGroup_1 && !!children.length;
+                if (!children.length)
+                    return;
+                children.forEach(function (x) {
+                    var _node = _this.convertToNestedNode(x);
+                    _node.groupId = existedGroup_1 ? existedGroup_1.id : node.id;
+                    _node.isGroup = false;
                 });
-            });
+                (_b = this.checkListSelection).deselect.apply(_b, __spreadArray([], __read(childSelected.map(this.resetNode))));
+                (_c = this.checkListSelection).select.apply(_c, __spreadArray([], __read(children.map(this.resetNode))));
+                return;
+            }
+            var deselectNodes = (this.isIncludeChildren || nestedNode.isGroup) ? childSelected : [node];
+            (_d = this.checkListSelection).deselect.apply(_d, __spreadArray([], __read(deselectNodes)));
+            nestedNode.isGroup = false;
         };
         SelectDepartmentTreeComponent.prototype.resetNode = function (node) {
             node.isGroup = false;
@@ -31142,10 +31328,11 @@
                 return;
             this.treeControl.expand(flatNode);
             this.onExpandAllParent(flatNode);
-            var index = this.treeControl.dataNodes.findIndex(function (x) { return x.id === flatNode.id; });
-            if (!this.cdkVirtualScrollViewport)
-                return;
-            this.cdkVirtualScrollViewport.scrollToIndex(index, 'smooth');
+            var element = this.eleRef.nativeElement.querySelector("#node-" + flatNode.id);
+            element && element.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+            });
             this.getActiveNodeEvent$.next(nodeId);
         };
         SelectDepartmentTreeComponent.prototype.onSearch = function () {
@@ -31158,6 +31345,7 @@
             this.paginatorSearch.renderDisplayNumberOfpages();
         };
         SelectDepartmentTreeComponent.prototype.setResultSearch = function (data) {
+            this.getLoading$.next(false);
             this.searchDepartment$.next(data);
         };
         SelectDepartmentTreeComponent.prototype.onClickResultItem = function (item) {
@@ -31171,7 +31359,7 @@
             var node = this.treeControl.dataNodes.find(function (x) { return item.id === x.id; });
             if (node) {
                 this.setIndexView(0);
-                rxjs.of(node.id).pipe(operators.delay(700)).subscribe(function (res) {
+                rxjs.of(node.id).pipe(operators.delay(700), operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                     _this.onScrollIntoNode(res);
                 });
             }
@@ -31201,7 +31389,7 @@
             var currentNode = this.treeControl.dataNodes.find(function (x) { return item.id === x.id; });
             if (currentNode) {
                 this.checkListSelectionSearch.isSelected(item) ? this.checkListSelection.select(currentNode) : this.checkListSelection.deselect(currentNode);
-                this.config.isSelectOne ? this._handleSelectOne(currentNode) : this.handleCheckNode(currentNode);
+                this.config.isSelectOne ? this._handleSelectOne(currentNode) : this._handleCheckNode(currentNode);
             }
         };
         SelectDepartmentTreeComponent.prototype.onSelectAllSearchResult = function (checked) {
@@ -31250,58 +31438,16 @@
         SelectDepartmentTreeComponent.prototype.setSelectedNodeStorage = function (node) {
             this.isIncludeChildren && localStorage.setItem('selectedNode', JSON.stringify(node));
         };
-        SelectDepartmentTreeComponent.prototype.setDefaultPaginatorSize = function (options) {
-            this.PAGE_SIZE_OPTION = options;
-        };
-        SelectDepartmentTreeComponent.prototype.trackBy = function (index, item) {
-            return item;
-        };
-        /**
-             * This function use for lazy load children of node
-             * @param node node update. if node is null data auto insert as roots
-             * @param data list children to update node.
-             * @param mode default is update that replace current list children by new list children , if mode = 'insert' will insert new value to list children existed before.
-        */
-        SelectDepartmentTreeComponent.prototype.updateChildOfNode = function (node, data, mode) {
-            var _b;
-            if (data === void 0) { data = []; }
-            if (mode === void 0) { mode = 'update'; }
-            node.isLoading = false;
-            var nestedNode = this.flatTreeNodeMap.get(node);
-            var dataNodes = this._convertToTreeData(data);
-            if (!nestedNode)
-                return;
-            switch (mode) {
-                case 'insert':
-                    (_b = nestedNode.children).push.apply(_b, __spreadArray([], __read(dataNodes)));
-                    break;
-                case 'update':
-                    nestedNode.children = dataNodes;
-            }
-            this.updateDataTree(this.currentTreeData);
-        };
-        SelectDepartmentTreeComponent.prototype.addRootTree = function (data) {
-            var _b;
-            if (data === void 0) { data = []; }
-            this.getLoadingMore$.next(false);
-            if (!data.length)
-                return;
-            var treeNodeData = this._convertToTreeData(data);
-            (_b = this.currentTreeData).push.apply(_b, __spreadArray([], __read(treeNodeData)));
-            console.log(this.currentTreeData);
-            this.updateDataTree(this.currentTreeData);
-        };
         return SelectDepartmentTreeComponent;
     }());
     SelectDepartmentTreeComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-select-department-tree',
-                    template: "<div [ngClass]=\"['qms-select-department-tree-container', config.customClass]\">\r\n  <div class=\"input-select-department\">\r\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\r\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\r\n        <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"Search\" matInput />\r\n        <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\r\n          <mat-icon>search</mat-icon>\r\n        </button>\r\n        <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\r\n          *ngIf=\"getLoading$.value\"></mat-progress-spinner>\r\n        <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\r\n          <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </mat-form-field>\r\n    </form>\r\n    <div [@inOutAnimation] *ngIf=\"indexView === 1 && textResultSearch\" class=\"sub-text ms-1 fw500\">\r\n      {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textResultSearch}}\"</b></i>\r\n    </div>\r\n    <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\r\n      class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end  align-items-center\">\r\n      <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\" [disabled]=\"indexView === 1\"\r\n        [(ngModel)]=\"isIncludeChildren\" color=\"default\" qms-group-options>\r\n        <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n      </mat-slide-toggle>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"indexView === 1 && config.enableTreeSearch\"\r\n        (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"indexView === 0 && config.enableTreeSearch && textResultSearch\"\r\n        (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_forward</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div [@inOutAnimation]\r\n    *ngIf=\"indexView === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\r\n    class=\"header-view-tree\">\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.treeName}}\r\n    </div>\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.externalName}}\r\n    </div>\r\n  </div>\r\n  <mat-divider class=\"mx-auto\"></mat-divider>\r\n  <div [@animateSlideView]=\"indexView\" [ngStyle]=\"{\r\n    minHeight: height\r\n  }\" class=\"tree-department-wrapper\">\r\n    <div *ngIf=\"indexView === 0\" class=\"tree-view w100 h100\">\r\n      <div class=\"tree-view-main h100\">\r\n        <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\r\n          class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\r\n          <!-- Checkbox all root node -->\r\n          <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\r\n            [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\">\r\n            <span class=\"text-label \">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{treeControl.dataNodes.length}}</b>)</span>\r\n          </mat-checkbox>\r\n          <mat-divider class=\"mx-auto\"></mat-divider>\r\n        </div>\r\n        <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" class=\"select-department-tree\" [ngClass]=\"{\r\n                    'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic\r\n                  }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\r\n          <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\r\n            <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\r\n              [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\r\n                                        'mat-tree-node-disabled-all': node.disabled,\r\n                                        'w-100': config.isSelectOne,\r\n                                        'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\r\n                                        'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\r\n                                        'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\r\n                                        'node-loading': node.isLoading\r\n                                    }\">\r\n              <div class=\"node-expand-area\">\r\n                <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\"\r\n                  *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\r\n                  <mat-icon>\r\n                    {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n                  </mat-icon>\r\n                </button>\r\n                <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\r\n              </div>\r\n              <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n                [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\r\n                <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\r\n                  {{node.externalName || ''}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </cdk-virtual-scroll-viewport>\r\n        <div [@inOutAnimation] *ngIf=\"getLoadingMore$| async ;then maskOverlay\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"indexView === 1\" [ngStyle]=\"{\r\n      height: height\r\n    }\" class=\"qms-view-search-result\">\r\n      <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n        class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.resultSearchName}}\r\n          </span>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.externalName}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\r\n      <div class=\"qms-view-search-result__wrapper\"\r\n        [class.active-external]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n        *ngIf=\"!!resultSearch.length && !getLoading$.value\">\r\n        <div class=\"\">\r\n          <mat-checkbox [@inOutAnimation]\r\n            [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n            [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n            (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n            <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{resultSearch.length}}</b>)</span>\r\n          </mat-checkbox>\r\n        </div>\r\n        <div [@inOutAnimation] [@listAnimation]\r\n          [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\r\n          <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\r\n            position=\"top\" *ngFor=\"let item of resultSearch\" (click)=\"$event.stopPropagation();onClickResultItem(item)\"\r\n            [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\r\n            <mat-checkbox [disabled]=\"item.disabled\"\r\n              (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n              [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\r\n            </mat-checkbox>\r\n            <div class=\"result-item__content\">\r\n              <div class=\"item-result-content-wraper\">\r\n                <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\r\n                <qms-breadcrumb *ngIf=\"item.path?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\r\n                  [numDisplayItem]=\"6\" (onItemClick)=\"onBreadCrumbItemClick($event)\" class=\"breadcrumb-container\"\r\n                  [nodes]=\"item.path\">\r\n                </qms-breadcrumb>\r\n                <div *ngIf=\"item.path?.length === 1\" class=\"d-flex align-items-center\">\r\n                  <span qms-elipsify class=\"item-breadcrumb-disable d-block\">{{item.path[0].name}}</span>\r\n                </div>\r\n              </div>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\r\n                <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n        <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n      </div>\r\n      <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\r\n        class=\"mx-auto\"></mat-divider>\r\n      <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\r\n        [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\r\n        (page)='onPagingSearchResult($event)' [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\r\n      </qms-paginator>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Template for Checkbox -->\r\n  <ng-template #showCheckboxTemplate let-node=\"node\">\r\n    <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\r\n      [disabled]=\"node.isLoading\" [checked]=\"checkListSelection.isSelected(node)\"\r\n      (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\r\n      <img *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\" [src]=\"node.itemIconSvg\" />\r\n      <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n        class=\"material-icons-outlined type-icon\"></span>\r\n      <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n        node.itemMatIcon }}\r\n      </span>\r\n      <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name}}\r\n      </span>\r\n    </mat-checkbox>\r\n  </ng-template>\r\n\r\n  <!-- Template node without checkbox -->\r\n  <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\r\n    <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\r\n      <div class=\"node-info\">\r\n        <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n          class=\"material-icons-outlined type-icon\"></span>\r\n        <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n          node.itemMatIcon }}\r\n        </span>\r\n        <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\r\n      </div>\r\n      <div class=\"node-state\">\r\n        <mat-icon *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #noResult>\r\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n    <path\r\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\r\n      fill=\"#0163B3\" />\r\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\r\n  </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div [ngStyle]=\"{\r\n    'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\r\n  }\" class=\"qms-loading-container\">\r\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\r\n      <div class=\"qms-loader__wrapper\">\r\n        <div class=\"row-loader\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Template mask overlay -->\r\n<ng-template #maskOverlay>\r\n  <div class=\"mask-overlay\">\r\n    <div [@listAnimation] *ngIf=\"getLoadingMore$ | async\" class=\"qms-load-more-row\">\r\n      <span></span><span></span><span></span><span></span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Loading spinner -->\r\n<ng-template #loadingSpinner>\r\n  <div class=\"qms-spinner center\">\r\n    <div *ngFor=\"let item of spinnerArr\" class=\"qms-spinner-blade\"></div>\r\n  </div>\r\n</ng-template>\r\n",
+                    template: "<div [ngClass]=\"['qms-select-department-tree-container', config.customClass]\">\r\n  <div class=\"input-select-department\">\r\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\r\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\r\n        <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"Search\" matInput />\r\n        <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\r\n          <mat-icon>search</mat-icon>\r\n        </button>\r\n        <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\r\n          *ngIf=\"getLoading$.value\"></mat-progress-spinner>\r\n        <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\r\n          <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </mat-form-field>\r\n    </form>\r\n    <div [@inOutAnimation] *ngIf=\"indexView === 1 && textResultSearch\" class=\"sub-text ms-1 fw500\">\r\n      {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textResultSearch}}\"</b></i>\r\n    </div>\r\n    <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\r\n      class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end  align-items-center\">\r\n      <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\" [disabled]=\"indexView === 1\"\r\n        [(ngModel)]=\"isIncludeChildren\" color=\"default\" qms-group-options>\r\n        <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n      </mat-slide-toggle>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"indexView === 1 && config.enableTreeSearch\"\r\n        (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"indexView === 0 && config.enableTreeSearch && textResultSearch\"\r\n        (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_forward</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div [@inOutAnimation]\r\n    *ngIf=\"indexView === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\r\n    class=\"header-view-tree\">\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.treeName}}\r\n    </div>\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.externalName}}\r\n    </div>\r\n  </div>\r\n  <mat-divider class=\"mx-auto\"></mat-divider>\r\n  <div [@animateSlideView]=\"indexView\" [ngStyle]=\"{height: height}\" class=\"tree-department-wrapper\">\r\n    <div *ngIf=\"indexView === 0\" [class.active-mode-external-view]=\"config.modeView === MODE_VIEW_ENUM.ExternalView \"\r\n      class=\"tree-view w100 h100\">\r\n      <div class=\"tree-view-main h100\">\r\n        <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\r\n          class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\r\n          <!-- Checkbox all root node -->\r\n          <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\r\n            [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\">\r\n            <span class=\"text-label \">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{treeControl.dataNodes.length}}</b>)</span>\r\n          </mat-checkbox>\r\n          <mat-divider class=\"mx-auto\"></mat-divider>\r\n        </div>\r\n        <mat-tree [@listAnimation] *ngIf=\"!!treeControl\" class=\"select-department-tree\" [ngClass]=\"{\r\n            'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic\r\n          }\" [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n          <!-- This is the tree node template for leaf nodes -->\r\n          <mat-tree-node [id]=\"'mat-node-'+node.id\"\r\n            [ngClass]=\"{'w-100': config.isSelectOne, 'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne}\"\r\n            [@triggerColor]=\"activeNode == node.id\" *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\r\n            [ngClass]=\"{\r\n                                'mat-tree-node-disabled-all': node.disabled\r\n                              }\">\r\n            <button class=\"btn-toggle\" qms-btn-icon color=\"light\" disabled></button>\r\n            <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n              [ngTemplateOutletContext]=\"{ node: node }\">\r\n            </ng-container>\r\n          </mat-tree-node>\r\n          <!-- This is the tree node template for expandable nodes -->\r\n          <mat-tree-node [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\"\r\n            *matTreeNodeDef=\"let node; when: hasChild\"\r\n            [class.selected-theme]=\"this.checkListSelection.isSelected(node) && config.isSelectOne\" matTreeNodePadding\r\n            [ngClass]=\"{\r\n                                'expand-node': treeControl.isExpanded(node),\r\n                                'collapse-node': !treeControl.isExpanded(node),\r\n                                'mat-tree-node-disabled': node.disabled\r\n                              }\">\r\n            <div class=\"node-content-wraper\" [ngClass]=\"{'w-100': config.isSelectOne}\">\r\n              <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\" matTreeNodeToggle>\r\n                <mat-icon>\r\n                  {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n                </mat-icon>\r\n              </button>\r\n              <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n                [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n              <mat-progress-bar *ngIf=\"false\" mode=\"indeterminate\">\r\n              </mat-progress-bar>\r\n            </div>\r\n          </mat-tree-node>\r\n        </mat-tree>\r\n      </div>\r\n      <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"tree-view-main h100\">\r\n        <div [ngClass]=\"{\r\n            'sticky-position': config.modeView === MODE_VIEW_ENUM.ExternalView,\r\n            'h-0': config.isSelectOne || !config.activeSelectAllNode\r\n          }\" class=\"separate\">\r\n        </div>\r\n        <mat-divider *ngIf=\"!config.isSelectOne && config.activeSelectAllNode\"\r\n          [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" [ngStyle]=\"{\r\n          top: '38px'\r\n        }\"></mat-divider>\r\n        <div [@inOutAnimation] class=\"external-list-item-container h100\">\r\n          <div [ngClass]=\"{active: canActiveNodeExternal(node)}\" [ngStyle]=\"{\r\n            'height': getHeightStyleRefNode(node.id)\r\n          }\" *ngFor=\"let node of treeControl.dataNodes; let i = index\" class=\"node-external\">\r\n            <mat-divider *ngIf=\"node.level === 0 && i > 0 \"></mat-divider>\r\n            <div class=\"node-external-content\">\r\n              <span qms-elipsify position=\"top\" mode=\"dark\">\r\n                {{node.externalName || ''}}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"indexView === 1\" class=\"qms-view-search-result\">\r\n      <div class=\"\">\r\n        <mat-checkbox [@inOutAnimation] *ngIf=\"!!resultSearch.length && !getLoading$.value\"\r\n          [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n          [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n          color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n          (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n          <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n          <span>(<b>{{resultSearch.length}}</b>)</span>\r\n        </mat-checkbox>\r\n      </div>\r\n      <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\r\n      <div [@inOutAnimation] [@listAnimation] *ngIf=\"resultSearch.length && !getLoading$.value\"\r\n        [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\r\n        <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\r\n          position=\"top\" *ngFor=\"let item of resultSearch\" (click)=\"$event.stopPropagation();onClickResultItem(item)\"\r\n          [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\r\n          <mat-checkbox [disabled]=\"item.disabled\"\r\n            (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n            [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\r\n          </mat-checkbox>\r\n          <div class=\"item-result-content-wraper\">\r\n            <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\r\n            <qms-breadcrumb [numDisplayItem]=\"6\" (onItemClick)=\"onBreadCrumbItemClick($event)\"\r\n              *ngIf=\"item.path.length > 1\" class=\"breadcrumb-container\" [nodes]=\"item.path\">\r\n            </qms-breadcrumb>\r\n\r\n            <div *ngIf=\"item.path.length === 1\" class=\"d-flex align-items-center\">\r\n              <span class=\"item-breadcrumb-disable\">{{item.path[0].name}}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n        <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n      </div>\r\n      <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\r\n        class=\"mx-auto\"></mat-divider>\r\n      <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\r\n        [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\r\n        (page)='onPagingSearchResult($event)' [size]='PAGINATION_SIZE.medium'>\r\n      </qms-paginator>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Template for Checkbox -->\r\n  <ng-template #showCheckboxTemplate let-node=\"node\">\r\n    <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\r\n      [checked]=\"checkListSelection.isSelected(node)\" (click)=\"onCheckNode(node)\" [attr.disabled]=\"node.disabled\">\r\n      <img *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\" [src]=\"node.itemIconSvg\" />\r\n      <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n        class=\"material-icons-outlined type-icon\"></span>\r\n      <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n        node.itemMatIcon }}\r\n      </span>\r\n      <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name\r\n        }}\r\n      </span>\r\n    </mat-checkbox>\r\n  </ng-template>\r\n\r\n  <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\r\n    <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\r\n      <div class=\"node-info\">\r\n        <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n          class=\"material-icons-outlined type-icon\"></span>\r\n        <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n          node.itemMatIcon }}\r\n        </span>\r\n        <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name\r\n          }}\r\n        </span>\r\n      </div>\r\n      <div class=\"node-state\">\r\n        <mat-icon *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #noResult>\r\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n    <path\r\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\r\n      fill=\"#0163B3\" />\r\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\r\n  </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div [ngStyle]=\"{\r\n    'height': searchDepartment$.value.length ? 'calc(100% - 55px)' : '100%'\r\n  }\" class=\"qms-loading-container\">\r\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\r\n      <div class=\"qms-loader__wrapper\">\r\n        <div class=\"row-loader\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
                     animations: [
                         AnimationTreeDepartment
                     ],
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .text-selected{color:rgba(0,0,0,.6);font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:-webkit-sticky;position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:first-child{padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:rgba(0,0,0,.12)}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:rgba(0,0,0,.1);position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .mask-overlay>.qms-load-more-row{line-height:35px;text-align:center;display:flex;justify-content:center;align-items:center;grid-gap:4px;gap:4px;transform:translateY(-15px)}.qms-select-department-tree-container .mask-overlay>.qms-load-more-row span{display:inline-block;width:10px;height:10px;background:var(--primary-light-12-opacity);border-radius:50px;-webkit-animation:up-down-animate .5s ease-in-out infinite alternate;animation:up-down-animate .5s ease-in-out infinite alternate}.qms-select-department-tree-container .mask-overlay>.qms-load-more-row span:nth-child(2){background:var(--primary-light-24-opacity);-webkit-animation-delay:.16s;animation-delay:.16s}.qms-select-department-tree-container .mask-overlay>.qms-load-more-row span:nth-child(3){background:var(--primary-light-32-opacity);-webkit-animation-delay:.32s;animation-delay:.32s}.qms-select-department-tree-container .mask-overlay>.qms-load-more-row span:nth-child(4){background:var(--primary-light-38-opacity);-webkit-animation-delay:.48s;animation-delay:.48s}@-webkit-keyframes up-down-animate{0%{transform:translateY(-8px)}to{transform:translateY(8px)}}@keyframes up-down-animate{0%{transform:translateY(-8px)}to{transform:translateY(8px)}}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:rgba(0,0,0,.08)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled{color:rgba(0,0,0,.38)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:rgba(0,0,0,.38);cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:rgba(0,0,0,.1)}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:first-child{padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:calc(100% - 44px);overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:first-child){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active,.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover{background:linear-gradient(0deg,rgba(1,99,178,.12),rgba(1,99,178,.12)),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child):hover{color:var(--primary)}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:600;color:rgba(0,0,0,.8)}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions{margin-bottom:0;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:rgba(0,0,0,.6);font-weight:400;font-size:14px;max-width:250px}.qms-select-department-tree-container ::ng-deep .mat-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;grid-column-gap:4px;-moz-column-gap:4px;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,hsla(0,0%,91%,0),hsla(0,0%,89%,0) 40%,hsla(0,0%,89%,.5) 50%,hsla(0,0%,89%,0) 60%,hsla(0,0%,89%,0));-webkit-animation:animate-loading 1.2s linear infinite;animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@-webkit-keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}.qms-select-department-tree-container .qms-spinner>.qms-spinner-blade{position:absolute;left:.4629em;bottom:0;width:.074em;height:.2777em;border-radius:.0555em;background-color:transparent;transform-origin:center -.2222em;-webkit-animation:spinner-animation 1s linear infinite;animation:spinner-animation 1s linear infinite}.qms-select-department-tree-container .qms-spinner>.qms-spinner-blade:first-child{-webkit-animation-delay:0s;animation-delay:0s;transform:rotate(0deg)}.qms-select-department-tree-container .qms-spinner>.qms-spinner-blade:nth-child(2){-webkit-animation-delay:83ms;animation-delay:83ms;transform:rotate(30deg)}.qms-select-department-tree-container .qms-spinner>.qms-spinner-blade:nth-child(3){-webkit-animation-delay:.166s;animation-delay:.166s;transform:rotate(60deg)}.qms-select-department-tree-container .qms-spinner>.qms-spinner-blade:nth-child(4){-webkit-animation-delay:.249s;animation-delay:.249s;transform:rotate(90deg)}.qms-select-department-tree-container .qms-spinner>.qms-spinner-blade:nth-child(5){-webkit-animation-delay:.332s;animation-delay:.332s;transform:rotate(120deg)}.qms-select-department-tree-container .qms-spinner>.qms-spinner-blade:nth-child(6){-webkit-animation-delay:.415s;animation-delay:.415s;transform:rotate(150deg)}.qms-select-department-tree-container .qms-spinner>.qms-spinner-blade:nth-child(7){-webkit-animation-delay:.498s;animation-delay:.498s;transform:rotate(180deg)}.qms-select-department-tree-container .qms-spinner>.qms-spinner-blade:nth-child(8){-webkit-animation-delay:.581s;animation-delay:.581s;transform:rotate(210deg)}.qms-select-department-tree-container .qms-spinner>.qms-spinner-blade:nth-child(9){-webkit-animation-delay:.664s;animation-delay:.664s;transform:rotate(240deg)}.qms-select-department-tree-container .qms-spinner>.qms-spinner-blade:nth-child(10){-webkit-animation-delay:.747s;animation-delay:.747s;transform:rotate(270deg)}.qms-select-department-tree-container .qms-spinner>.qms-spinner-blade:nth-child(11){-webkit-animation-delay:.83s;animation-delay:.83s;transform:rotate(300deg)}.qms-select-department-tree-container .qms-spinner>.qms-spinner-blade:nth-child(12){-webkit-animation-delay:.913s;animation-delay:.913s;transform:rotate(330deg)}@-webkit-keyframes spinner-animation{0%{background-color:var(--primary-light-32-opacity)}to{background-color:transparent}}@keyframes spinner-animation{0%{background-color:var(--primary-light-32-opacity)}to{background-color:transparent}}@media screen and (max-width:600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span,.qms-select-department-tree-container .text-name{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}"]
+                    styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .text-selected{color:rgba(0,0,0,.6);font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:-webkit-sticky;position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .tree-department-wrapper{height:375px;padding-right:4px;overflow-y:auto;overflow-x:hidden;position:relative;transition:height .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:rgba(0,0,0,.12)}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:.1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mat-tree.select-department-tree{height:100%}.qms-select-department-tree-container .mat-tree.select-department-tree.has-checkbox-all{max-height:calc(100% - 47px);overflow-y:auto}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node{border-radius:4px}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node:hover{background:rgba(0,0,0,.08)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node:active{background:rgba(0,0,0,.12)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active{color:var(--primary);background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active .mat-icon-rtl-mirror,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active .text-name,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active .type-icon,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active button,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active .mat-icon-rtl-mirror,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active .text-name,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active .type-icon,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active button{color:var(--primary)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active:active,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node .mat-icon-rtl-mirror,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node .text-name,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node .type-icon,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node button{color:var(--primary)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .type-icon{margin-right:5px;color:var(--ws-action-active)}.qms-select-department-tree-container .mat-tree.select-department-tree .text-name{color:var(--default-color)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-icon-rtl-mirror{color:rgba(0,0,0,.6)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-icon-button.btn-toggle{width:35px;height:35px;line-height:35px}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all .type-icon,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all button.mat-button-disabled{color:rgba(0,0,0,.38)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:rgba(0,0,0,.38);cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled .type-icon,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled button.mat-button-disabled{color:rgba(0,0,0,.38)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled .text-name.disabled{color:rgba(0,0,0,.38);cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled.active,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled.expand-node:active,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled.expand-node:hover,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled:active,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled:hover{background-color:transparent}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node>.node-content-wraper{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node>.node-content-wraper>.mat-progress-bar{height:3px;width:100%;position:absolute;bottom:0;left:10px}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node>.node-content-wraper>.mat-progress-bar .mat-progress-bar-fill:after{background:var(--primary)}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:10px!important}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{height:100%;width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result .result{max-height:calc(100% - 44px);overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result .result.active-paging{max-height:calc(100% - 95px)}.qms-select-department-tree-container .qms-view-search-result .result.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease}.qms-select-department-tree-container .qms-view-search-result .result-item:not(:first-child){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result .result-item.active,.qms-select-department-tree-container .qms-view-search-result .result-item:hover{background:linear-gradient(0deg,rgba(1,99,178,.12),rgba(1,99,178,.12)),#fff}.qms-select-department-tree-container .qms-view-search-result .result-item .item-result-content-wraper{padding:5px 15px}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child):hover{color:var(--primary)}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:600;color:rgba(0,0,0,.8)}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions{margin-bottom:0;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:rgba(0,0,0,.6);font-weight:400;font-size:14px}.qms-select-department-tree-container ::ng-deep .mat-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;grid-column-gap:4px;-moz-column-gap:4px;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,hsla(0,0%,91%,0),hsla(0,0%,89%,0) 40%,hsla(0,0%,89%,.5) 50%,hsla(0,0%,89%,0) 60%,hsla(0,0%,89%,0));-webkit-animation:animate-loading 1.2s linear infinite;animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@-webkit-keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}"]
                 },] }
     ];
     SelectDepartmentTreeComponent.ctorParameters = function () { return [
@@ -31311,9 +31457,7 @@
         { type: icon.MatIconRegistry },
         { type: i0.ElementRef },
         { type: TranslateLibraryService },
-        { type: QMSSelectDepartmentTreeGlobalService },
-        { type: overlay.Overlay },
-        { type: i0.ViewContainerRef }
+        { type: QMSSelectDepartmentTreeGlobalService }
     ]; };
     SelectDepartmentTreeComponent.propDecorators = {
         rowsSkeleton: [{ type: i0.Input }],
@@ -31323,10 +31467,6 @@
         onPagingSearchEvent: [{ type: i0.Output }],
         onValueChangeEvent: [{ type: i0.Output }],
         selectionNodeChangeEvent: [{ type: i0.Output }],
-        onCheckNodeEvent: [{ type: i0.Output }],
-        onExpandNodeEvent: [{ type: i0.Output }],
-        onLoadMoreEvent: [{ type: i0.Output }],
-        cdkVirtualScrollViewport: [{ type: i0.ViewChild, args: [scrolling.CdkVirtualScrollViewport,] }],
         paginatorSearch: [{ type: i0.ViewChild, args: ['paginatorSearch',] }]
     };
 
@@ -31365,8 +31505,7 @@
                         core.MatRippleModule,
                         QmsPaginatorModule,
                         paginator.MatPaginatorModule,
-                        divider.MatDividerModule,
-                        scrolling.ScrollingModule
+                        divider.MatDividerModule
                     ]
                 },] }
     ];
@@ -31460,12 +31599,9 @@
             this.popupData = new SelectDepartmentPopupData();
             this.resultSelected = [];
             this.onSearchEvent = new i0.EventEmitter();
-            this.onCheckNodeEvent = new i0.EventEmitter();
-            this.onExpandNodeEvent = new i0.EventEmitter();
-            this.onLoadMoreEvent = new i0.EventEmitter();
             this.resultSearch = [];
             this.isActiveViewSearch = false;
-            this.trans.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.trans.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.trans.getObjectLang(res);
                 }
@@ -31473,13 +31609,6 @@
             // Init popup data
             this.popupData = ___namespace.cloneDeep(this.data);
         }
-        Object.defineProperty(SelectDepartmentComponent.prototype, "isIncludeChild", {
-            get: function () {
-                return !!this.treeDepartment && this.treeDepartment.isIncludeChildren;
-            },
-            enumerable: false,
-            configurable: true
-        });
         SelectDepartmentComponent.prototype.ngAfterViewInit = function () {
             this.cdRef.detectChanges();
         };
@@ -31531,37 +31660,12 @@
             }
             return result;
         };
-        /**
-             * This function use for lazy load children of node
-             * @param node node update. if node is null data auto insert as roots
-             * @param data list children to update node.
-             * @param mode default is update that replace current list children by new list children , if mode = 'insert' will insert new value to list children existed before.
-        */
-        SelectDepartmentComponent.prototype.updateChildOfNode = function (node, data, mode) {
-            if (mode === void 0) { mode = 'update'; }
-            this.treeDepartment.updateChildOfNode(node, data, mode);
-        };
-        SelectDepartmentComponent.prototype.addRootTree = function (data) {
-            if (data === void 0) { data = []; }
-            this.treeDepartment.addRootTree(data);
-        };
-        /**
-         * This function handle check node of tree
-         * @param node node of tree
-         * @param callback do something before handle check node
-         * @returns
-         */
-        SelectDepartmentComponent.prototype.handleCheckNode = function (node, callback) {
-            if (!this.treeDepartment)
-                return;
-            this.treeDepartment.handleCheckNode(node, callback);
-        };
         return SelectDepartmentComponent;
     }());
     SelectDepartmentComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-select-department',
-                    template: "<div class=\"qms-select-department\">\r\n  <div class=\"header-dialog mb-2\">\r\n    <span>{{popupData.headerName}}</span>\r\n    <button matDialogClose class=\"btn-close-dialog\" color=\"light\" qms-btn-icon>\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n  <div>\r\n    <div class=\"qms-scrollbar\">\r\n      <div>\r\n        <qms-select-department-tree #treeDepartment customClass=\"custom-department-tree\"\r\n          [height]=\"treeDepartment.resultSelected.length ? (popupData.config.isMobile ? '38vh' : '45vh'): '55vh'\"\r\n          [rowsSkeleton]=\"9\" [config]=\"popupData.config\" (onSearchEvent)=\"onSearchEvent.emit($event)\"\r\n          (onValueChangeEvent)=\"onResultDepartmentChange($event)\" (onPagingSearchEvent)=\"onPagingEvent.emit($event)\"\r\n          (onCheckNodeEvent)=\"onCheckNodeEvent.emit($event)\" (onExpandNodeEvent)=\"onExpandNodeEvent.emit($event)\"\r\n          (onLoadMoreEvent)=\"onLoadMoreEvent.emit()\">\r\n        </qms-select-department-tree>\r\n      </div>\r\n    </div>\r\n    <div class=\"line__divider\"></div>\r\n    <div [@heightAnimation] *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length\" class=\" pr-0 pe-0\">\r\n      <div class=\"header-title\">{{LANG.RESULTS}}</div>\r\n      <div class=\"result-content pr-0 pe-0\">\r\n        <mat-chip-list class=\"panel__item qms-scrollbar\">\r\n          <div [@inOutAnimation_2] [id]=\"'item-result-'+item.id\" *ngFor=\"let item of treeDepartment.resultSelected\">\r\n            <mat-chip [@updateItemAnimation] *qmsContentChanges=\"item.children?.length\"\r\n              [qms-tool-tip]=\"generateTootip(item)\" position=\"top\" mode=\"dark\" qms-chip [removable]=\"true\">\r\n              <span (click)=\"onScrollToNode(item)\" qms-chip-body>\r\n                <span class=\"related__item__content_name\" #itemName>\r\n                  <span>{{item.name}}</span>\r\n                  <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup\">\r\n                    {{item.children.length}}/{{item.childCount}}\r\n                  </span>\r\n                </span>\r\n              </span>\r\n              <mat-icon (click)=\"onRemoveNode(item)\">cancel</mat-icon>\r\n            </mat-chip>\r\n          </div>\r\n        </mat-chip-list>\r\n      </div>\r\n    </div>\r\n    <mat-divider *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length\" class=\"mx-auto\"></mat-divider>\r\n    <div class=\"confirm__button__groups\">\r\n      <button (click)=\"onCloseDialog()\" class=\"btn-add\" [disabled]=\"!resultSelected.length\"\r\n        [class.qms-btn-disabled]=\"!resultSelected.length\" qms-btn>\r\n        <span>{{LANG.ADD}}</span>\r\n        <span>\r\n          ({{treeDepartment.resultSelected.length}})\r\n        </span>\r\n      </button>\r\n      <button qms-btn-text mat-dialog-close>\r\n        Cancel\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div class=\"qms-select-department\">\r\n  <div class=\"header-dialog mb-2\">\r\n    <span>{{popupData.headerName}}</span>\r\n    <button matDialogClose class=\"btn-close-dialog\" color=\"light\" qms-btn-icon>\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n  <div>\r\n    <div class=\"qms-scrollbar\">\r\n      <div>\r\n        <qms-select-department-tree #treeDepartment customClass=\"custom-department-tree\"\r\n          [height]=\"treeDepartment.resultSelected.length ? '45vh': '55vh'\" [rowsSkeleton]=\"9\"\r\n          [config]=\"popupData.config\" (onSearchEvent)=\"onSearchEvent.emit($event)\"\r\n          (onValueChangeEvent)=\"onResultDepartmentChange($event)\" (onPagingSearchEvent)=\"onPagingEvent.emit($event)\">\r\n        </qms-select-department-tree>\r\n      </div>\r\n    </div>\r\n    <div class=\"line__divider\"></div>\r\n    <div [@heightAnimation] *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length\" class=\" pr-0 pe-0\">\r\n      <div class=\"header-title\">{{LANG.RESULTS}}</div>\r\n      <div class=\"result-content pr-0 pe-0\">\r\n        <mat-chip-list class=\"panel__item qms-scrollbar\">\r\n          <div [@inOutAnimation_2] [id]=\"'item-result-'+item.id\" *ngFor=\"let item of treeDepartment.resultSelected\">\r\n            <mat-chip [@updateItemAnimation] *qmsContentChanges=\"item.children?.length\"\r\n              [qms-tool-tip]=\"generateTootip(item)\" position=\"top\" mode=\"dark\" qms-chip [removable]=\"true\">\r\n              <span (click)=\"onScrollToNode(item)\" qms-chip-body>\r\n                <span class=\"related__item__content_name\" #itemName>\r\n                  {{item.name}}\r\n                  <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup\">\r\n                    {{item.children.length}}/{{item.childCount}}\r\n                  </span>\r\n                </span>\r\n              </span>\r\n              <mat-icon (click)=\"onRemoveNode(item)\">cancel</mat-icon>\r\n            </mat-chip>\r\n          </div>\r\n        </mat-chip-list>\r\n      </div>\r\n    </div>\r\n    <mat-divider *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length\" class=\"mx-auto\"></mat-divider>\r\n    <div class=\"confirm__button__groups\">\r\n      <button (click)=\"onCloseDialog()\" class=\"btn-add\" [disabled]=\"!resultSelected.length\"\r\n        [class.qms-btn-disabled]=\"!resultSelected.length\" qms-btn>\r\n        <span>{{LANG.ADD}}</span>\r\n        <span>\r\n          ({{treeDepartment.resultSelected.length}})\r\n        </span>\r\n      </button>\r\n      <button qms-btn-text mat-dialog-close>\r\n        Cancel\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     providers: [
                         {
                             provide: checkbox.MAT_CHECKBOX_DEFAULT_OPTIONS,
@@ -31569,7 +31673,7 @@
                         }
                     ],
                     animations: [SelectDepartmentAnimationTrigger],
-                    styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.qms-select-department .cursor-pointer{cursor:pointer}.qms-select-department .ml-5{margin-left:10px}.qms-select-department .padding-5{padding:5px}.qms-select-department .header-dialog{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px}.qms-select-department .input__field{display:flex;align-items:center;position:relative}.qms-select-department .input__field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department .input__field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qms-select-department .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qms-select-department .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qms-select-department .panel__item{max-height:175px;margin-top:4px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;display:block}.qms-select-department .panel__item .related__item__inline{max-width:100%}.qms-select-department .panel__item ::ng-deep .mat-chip-list-wrapper{margin:0 -4px!important}.qms-select-department .panel__item .select__toggle-include{width:100%}.qms-select-department .panel__item .select__toggle-include.toggle-include-child .mat-slide-toggle.qms-group-options .mat-slide-toggle-thumb{background-color:#5a5a5a!important}.qms-select-department .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qms-select-department .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qms-select-department .header-title{font-weight:600;color:rgba(0,0,0,.87)}.qms-select-department .result-content{padding-right:0!important}.qms-select-department .result-content .mat-chip-list{min-height:40px}.qms-select-department .result-content .mat-chip-list .mat-icon{color:rgba(0,0,0,.3)!important;cursor:pointer}.qms-select-department .result-content .mat-chip-list .mat-icon:hover{color:#000!important}.qms-select-department .result-content span.related__item__content_name{min-width:calc(100% - 13px);max-width:250px;display:flex;align-items:center}.qms-select-department .result-content span.related__item__content_name>span:first-child{display:inline-block;margin-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.qms-select-department .result-content span.related__item__content_name .select__include-children__count{font-size:.75rem;color:rgba(0,0,0,.5);font-weight:600;line-height:16px}.qms-select-department .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department .confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result{height:100%!important}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.qms-select-department ::ng-deep .custom-department-tree .loading-container{height:calc(100% - 40px)!important}.qms-select-department ::ng-deep.btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}@media screen and (max-width:600px){::ng-deep .cdk-global-overlay-wrapper{justify-content:center!important;width:100vw}.header-title{font-size:14px}.related__item__content_name{font-size:12px!important}}"]
+                    styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.qms-select-department .cursor-pointer{cursor:pointer}.qms-select-department .ml-5{margin-left:10px}.qms-select-department .padding-5{padding:5px}.qms-select-department .header-dialog{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px}.qms-select-department .input__field{display:flex;align-items:center;position:relative}.qms-select-department .input__field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department .input__field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qms-select-department .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qms-select-department .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qms-select-department .panel__item{max-height:175px;margin-top:4px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;display:block}.qms-select-department .panel__item .related__item__inline{max-width:100%}.qms-select-department .panel__item ::ng-deep .mat-chip-list-wrapper{margin:0 -4px!important}.qms-select-department .panel__item .select__toggle-include{width:100%}.qms-select-department .panel__item .select__toggle-include.toggle-include-child .mat-slide-toggle.qms-group-options .mat-slide-toggle-thumb{background-color:#5a5a5a!important}.qms-select-department .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qms-select-department .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qms-select-department .header-title{font-weight:600;color:rgba(0,0,0,.87)}.qms-select-department .result-content{padding-right:0!important}.qms-select-department .result-content .mat-chip-list{min-height:40px}.qms-select-department .result-content .mat-chip-list .mat-icon{color:rgba(0,0,0,.3)!important;cursor:pointer}.qms-select-department .result-content .mat-chip-list .mat-icon:hover{color:#000!important}.qms-select-department .result-content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.qms-select-department .result-content span.related__item__content_name .select__include-children__count{font-size:.75rem;color:rgba(0,0,0,.5);font-weight:600}.qms-select-department .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department .confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result{height:100%!important}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.qms-select-department ::ng-deep .custom-department-tree .loading-container{height:calc(100% - 40px)!important}.qms-select-department ::ng-deep.btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}"]
                 },] }
     ];
     SelectDepartmentComponent.ctorParameters = function () { return [
@@ -31580,11 +31684,7 @@
     ]; };
     SelectDepartmentComponent.propDecorators = {
         treeDepartment: [{ type: i0.ViewChild, args: ['treeDepartment',] }],
-        onPagingEvent: [{ type: i0.Output }],
-        onSearchEvent: [{ type: i0.Output }],
-        onCheckNodeEvent: [{ type: i0.Output }],
-        onExpandNodeEvent: [{ type: i0.Output }],
-        onLoadMoreEvent: [{ type: i0.Output }]
+        onPagingEvent: [{ type: i0.Output }]
     };
 
     var QMSSelectDepartmentModule = /** @class */ (function () {
@@ -31882,7 +31982,7 @@
         };
         QMSSelectAccessDialogComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.translate.getLanguageSubject$.pipe().subscribe(function (res) {
+            this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubcribe)).subscribe(function (res) {
                 if (res) {
                     _this.LANG = _this.translate.getObjectLang(res);
                 }
@@ -32577,6 +32677,7 @@
     exports.QMSUploadFileErrorDialog = QMSUploadFileErrorDialog;
     exports.QMSUploadFileErrorDialogModule = QMSUploadFileErrorDialogModule;
     exports.QMSUploadingFileGuard = QMSUploadingFileGuard;
+    exports.QMS_LANGUAGES = QMS_LANGUAGES;
     exports.QMS_THEMES = QMS_THEMES;
     exports.QMS_THEME_DEFAULT = QMS_THEME_DEFAULT;
     exports.QmsAngularComponent = QmsAngularComponent;
@@ -32666,16 +32767,16 @@
     exports["ɵ2"] = ɵ2;
     exports["ɵa"] = SharedMaterialModule;
     exports["ɵb"] = TreeComponent;
-    exports["ɵc"] = QMSTreeModule;
-    exports["ɵd"] = QMSBasicTreeComponent;
-    exports["ɵe"] = QMSCKEditorTreeService;
-    exports["ɵf"] = QMSCKEditorTemplateComponent;
-    exports["ɵg"] = LinkAttachmentComponent;
-    exports["ɵh"] = QMSCKEditorTooltipComponent;
-    exports["ɵi"] = QMSCKEditorTooltip;
-    exports["ɵj"] = QMSCKEditorImageMapComponent;
-    exports["ɵk"] = QMSCKEditorImageMap;
-    exports["ɵl"] = QMSCKEditorUploadService;
+    exports["ɵc"] = QMSCKEditorUploadService;
+    exports["ɵd"] = QMSTreeModule;
+    exports["ɵe"] = QMSBasicTreeComponent;
+    exports["ɵf"] = QMSCKEditorTreeService;
+    exports["ɵg"] = QMSCKEditorTemplateComponent;
+    exports["ɵh"] = LinkAttachmentComponent;
+    exports["ɵi"] = QMSCKEditorTooltipComponent;
+    exports["ɵj"] = QMSCKEditorTooltip;
+    exports["ɵk"] = QMSCKEditorImageMapComponent;
+    exports["ɵl"] = QMSCKEditorImageMap;
     exports["ɵm"] = QMSCKEditorBpmnData;
     exports["ɵn"] = QMSCKEditorAboutComponent;
     exports["ɵo"] = QMSCKEditorFlowchartComponent;