qms-angular 1.1.19 → 1.1.21

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/divider'), require('@angular/material/paginator'), 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/divider', '@angular/material/paginator', '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.divider, global.ng.material.paginator, 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, divider, paginator, ngxMatSelectSearch) { 'use strict';
+    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';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -112,7 +112,8 @@
         "TYPE": "Type",
         "SEARCH_WITH_NAME": "Search first and last name",
         "RESULT_SEARCH_FOR": "Results search for ",
-        "TOOLTIP_INCLUDE_CHILD": "{0} - includes {1} children",
+        "TOOLTIP_INCLUDE_SUB_DEPARTMENT": "{0} - include {1} sub-departments",
+        "NO_RESULT": "No Result",
         "ERROR": {
             "SELECT_DANGER": "You must select one or more events"
         },
@@ -497,7 +498,8 @@
         "TYPE": "Type",
         "SEARCH_WITH_NAME": "Søk for- og etternavn",
         "RESULT_SEARCH_FOR": "Resultater søk etter ",
-        "TOOLTIP_INCLUDE_CHILD": "{0} – inkluderer {1} barn",
+        "TOOLTIP_INCLUDE_SUB_DEPARTMENT": "{0} – inkluderer {1} barn",
+        "NO_RESULT": "Inget resultat",
         "ERROR": {
             "SELECT_DANGER": "Du må velge en eller flere hendelser"
         },
@@ -3885,6 +3887,91 @@
         qmsTransformIcon: [{ type: i0.Input }]
     };
 
+    var EllipsifyDirective = /** @class */ (function (_super) {
+        __extends(EllipsifyDirective, _super);
+        function EllipsifyDirective(renderer, elementRef, overlay, overlayPositionBuilder) {
+            var _this = _super.call(this, overlay, overlayPositionBuilder, elementRef) || this;
+            _this.renderer = renderer;
+            _this.elementRef = elementRef;
+            _this.overlay = overlay;
+            _this.overlayPositionBuilder = overlayPositionBuilder;
+            _this.domElement = _this.elementRef.nativeElement;
+            var elipsify = {
+                'text-overflow': 'ellipsis',
+                'overflow': 'hidden',
+                'white-space': 'nowrap',
+            };
+            Object.keys(elipsify).forEach(function (newStyle) {
+                _this.renderer.setStyle(_this.domElement, "" + newStyle, elipsify[newStyle]);
+            });
+            return _this;
+        }
+        EllipsifyDirective.prototype.ngAfterViewInit = function () {
+            this.renderer.setProperty(this.domElement, 'scrollTop', 1);
+            this.isTitleAttribute();
+        };
+        EllipsifyDirective.prototype.isTitleAttribute = function () {
+            if (this._overlayRef.hasAttached())
+                return;
+            if (this.domElement.offsetWidth < this.domElement.scrollWidth) {
+                var tooltipRef = this._overlayRef.attach(new portal.ComponentPortal(QMSToolTipComponent));
+                tooltipRef.instance.text = this.domElement.textContent;
+                tooltipRef.instance.mode = this.mode;
+            }
+        };
+        return EllipsifyDirective;
+    }(QMSToolTipRendererDirective));
+    EllipsifyDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qms-elipsify]'
+                },] }
+    ];
+    EllipsifyDirective.ctorParameters = function () { return [
+        { type: i0.Renderer2 },
+        { type: i0.ElementRef },
+        { type: overlay.Overlay },
+        { type: overlay.OverlayPositionBuilder }
+    ]; };
+    EllipsifyDirective.propDecorators = {
+        isTitleAttribute: [{ type: i0.HostListener, args: ['focus',] }, { type: i0.HostListener, args: ['mouseenter',] }]
+    };
+
+    var QMSContentChangesDirective = /** @class */ (function () {
+        function QMSContentChangesDirective(viewContainer, templateRef) {
+            this.viewContainer = viewContainer;
+            this.templateRef = templateRef;
+            this.existView = false;
+        }
+        Object.defineProperty(QMSContentChangesDirective.prototype, "qmsContentChanges", {
+            set: function (val) {
+                if (!this.existView) {
+                    this.viewContainer.createEmbeddedView(this.templateRef);
+                    this.existView = true;
+                }
+                else if (val !== this.currentValue) {
+                    this.viewContainer.clear();
+                    this.viewContainer.createEmbeddedView(this.templateRef);
+                    this.currentValue = val;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return QMSContentChangesDirective;
+    }());
+    QMSContentChangesDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qmsContentChanges]'
+                },] }
+    ];
+    QMSContentChangesDirective.ctorParameters = function () { return [
+        { type: i0.ViewContainerRef },
+        { type: i0.TemplateRef }
+    ]; };
+    QMSContentChangesDirective.propDecorators = {
+        qmsContentChanges: [{ type: i0.Input }]
+    };
+
     var ɵ0$6 = { appearance: 'fill' }, ɵ1$1 = { color: 'none' };
     var QmsAngularModule = /** @class */ (function () {
         function QmsAngularModule() {
@@ -3946,7 +4033,9 @@
                         QMSDialogHeader,
                         QMSDialogContent,
                         QMSDialogFooter,
-                        QMSMultiIconDirective
+                        QMSMultiIconDirective,
+                        EllipsifyDirective,
+                        QMSContentChangesDirective
                     ],
                     imports: [
                         i1.CommonModule,
@@ -4007,7 +4096,9 @@
                         QMSDialogHeader,
                         QMSDialogContent,
                         QMSDialogFooter,
-                        QMSMultiIconDirective
+                        QMSMultiIconDirective,
+                        EllipsifyDirective,
+                        QMSContentChangesDirective
                     ],
                     providers: [
                         { provide: formField.MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: ɵ0$6 },
@@ -5469,6 +5560,7 @@
             node.name = keyObj["name"];
             node.parentId = keyObj["parentId"];
             node.levelType = keyObj["levelType"];
+            node.markedGetChildren = keyObj["markedGetChildren"];
             if (value != null) {
                 if (typeof value === 'object') {
                     node.children = _this.buildArrayTree(value, level + 1);
@@ -5607,7 +5699,7 @@
             this.idCheckIcon = '';
             this.listChildNode = [];
             this.dataType = DataType$1;
-            this.transformer = function (node, level) {
+            this._transformer = function (node, level) {
                 var _a;
                 var checkHasChild = true;
                 if (!node.children) {
@@ -5635,10 +5727,11 @@
                     hasChild: checkHasChild,
                     parentId: node.parentId,
                     disabled: false,
-                    levelType: node.levelType
+                    levelType: node.levelType,
+                    markedGetChildren: node.markedGetChildren || false
                 };
             };
-            this.treeFlattener = new tree$1.MatTreeFlattener(this.transformer, function (node) {
+            this.treeFlattener = new tree$1.MatTreeFlattener(this._transformer, function (node) {
                 return node.level;
             }, function (node) {
                 return node.expandable;
@@ -5848,7 +5941,7 @@
                     this_3.disabledList.forEach(function (el) {
                         var _a;
                         if (((_a = _this.treeControl.dataNodes[i].id) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (el === null || el === void 0 ? void 0 : el.toLowerCase())) {
-                            _this.treeControl.expand(_this.treeControl.dataNodes[i]);
+                            // this.treeControl.expand(this.treeControl.dataNodes[i]);
                         }
                     });
                 };
@@ -6102,85 +6195,22 @@
             this.selectFolderEvent.emit(node);
         };
         TreeComponent.prototype.onExpandNode = function (node, isExpandNode) {
-            var _this = this;
-            if (this.treeConfig.selectOne) {
-                if (isExpandNode && !this.expandOnTitleClick) {
-                    this.nodeExpandEvent.emit(node);
-                }
-                else {
-                    this.idCheckIcon = this.idToCheckSelectOne(node.id, node.parentId);
-                    node.itemType = this.checkDataTypeSelectNode(node);
-                    this.selectNodeEvent.emit(node);
-                }
-                return;
-            }
-            if (window[RelatedConst$1.IS_DISPLAY_SEARCH_RESULT]) {
-                window.postMessage(RelatedConst$1.HIDE_SEARCH_RESULT, '*');
-            }
-            // set useExpandFeature = true to improve performance of tree loading
-            if (!isExpandNode || !this.useExpandFeature) {
-                for (var i = 0; i < this.arrIndex.length; i++) {
-                    if (this.arrIndex[i] === node.id) {
-                        this.arrIndex.splice(i, 1);
-                    }
-                }
-                if (isExpandNode && !this.expandOnTitleClick) {
+            if (isExpandNode && !this.expandOnTitleClick) {
+                if (!node.markedGetChildren && !this.treeControl.isExpanded(node)) {
+                    this.treeControl.dataNodes.forEach(function (x) {
+                        if (x.parentId === node.parentId && x.id === node.id) {
+                            x.markedGetChildren = true;
+                        }
+                    });
                     this.nodeExpandEvent.emit(node);
                 }
-                return;
-            }
-            // get array index to expand node after refresh datasource
-            var index = 0;
-            var isChange = false;
-            var isRemove = false;
-            this.arrIndex.push(node.id);
-            var childArray = this.treeData.filter(function (x) {
-                return x.parentId === node.id;
-            });
-            var rootId = '0';
-            var parentElement;
-            var childrenList;
-            if (childArray.length === 0) {
-                return;
-            }
-            childArray.forEach(function (item) {
-                if (item.rootId === rootId) {
-                    return;
-                }
-                // get child node from original datasource
-                var child = _this.getChildNode(item.rootId, childArray);
-                rootId = item.rootId;
-                index = _this.getNodeIndex(child.id, undefined, _this.dataSource['_treeControl'].dataNodes);
-                if (index > -1) {
-                    return;
-                }
-                // add child node to expand node
-                parentElement = _this.findChildNode(node.id, _this.dataSource.data);
-                if (parentElement) {
-                    // temporary remove all node without children => purpose to add node folder first
-                    if (!isRemove) {
-                        childrenList = __spreadArray([], __read(parentElement.children));
-                        _this.removeChildren(parentElement);
-                        isRemove = true;
-                    }
-                    // add node folder first
-                    parentElement.children.push(child);
-                    isChange = true;
-                }
-            });
-            // add node without children again
-            if (isRemove) {
-                this.addChildren(parentElement, childrenList);
             }
-            // refresh data and expand tree node from root node
-            if (isChange) {
-                this.refreshTreeData();
-                this.arrIndex.forEach(function (item) {
-                    index = _this.getNodeIndex(item, undefined, _this.dataSource['_treeControl'].dataNodes);
-                    _this.treeControl.expand(_this.treeControl.dataNodes[index]);
-                });
-                isChange = false;
+            else {
+                this.idCheckIcon = this.idToCheckSelectOne(node.id, node.parentId);
+                node.itemType = this.checkDataTypeSelectNode(node);
+                this.selectNodeEvent.emit(node);
             }
+            return;
         };
         TreeComponent.prototype.removeChildren = function (parentElement) {
             if (parentElement.children) {
@@ -24227,8 +24257,10 @@
             _this.renderer = renderer;
             _this.elRef = elRef;
             _this.required = false;
+            _this.editorId = 'qmsckeditor';
             _this.qmsckContentOutput = new i0.EventEmitter();
             _this.ckEditorEventConst = CKEditorEventConst;
+            _this.isToolbarItemsIdSet = false;
             _this.ckTagname = 'div';
             return _this;
         }
@@ -24270,6 +24302,7 @@
         };
         QMSCKEditorComponent.prototype.ngOnInit = function () {
             var _this = this;
+            this.toolbarItemPrefixId = this.editorId + "_toolbar_item_";
             this.name = 'CKEditor custom build';
             this.ckEditor = this.qmsckPlugin.pluginObject;
             this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubcribe)).subscribe(function (res) {
@@ -24277,7 +24310,11 @@
                     _this.LANG = _this.translate.getObjectLang(res);
                 }
             });
-            this.ckeditorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(this.qmsckPlugin.itemToolbar);
+            var toolbarItems = this.qmsckPlugin.itemToolbar;
+            if (this.isEnabledToggleToolbar() && this.qmsckData.toggledToolbarItems) {
+                toolbarItems += ',' + this.qmsckData.toggledToolbarItems;
+            }
+            this.ckeditorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(toolbarItems);
             this.globalService.setApiUrl(this.qmsckData.apiUrl);
             if (this.isEnabledMathtypeConfig()) {
                 this.addMathTypeConfig();
@@ -24285,9 +24322,6 @@
             if (this.isEnabledTimestampConfig()) {
                 this.addTimestampConfig();
             }
-            if (this.isEnabledToggleToolbar()) {
-                this.addToggleToolbarConfig();
-            }
             if (this.isEnabledWProofreader()) {
                 this.addWProofreaderConfig();
             }
@@ -24302,6 +24336,7 @@
             if (this.editorInstance) {
                 this.editorInstance.destroy();
             }
+            $(document).off();
         };
         QMSCKEditorComponent.prototype.registerOnChange = function (fn) {
             this.onChange = fn;
@@ -24333,12 +24368,12 @@
         };
         QMSCKEditorComponent.prototype.isEnabledToggleToolbar = function () {
             var pattern = /(toggleToolbar)/gmi;
-            return !!this.qmsckData.toggleToolbar
+            return !!this.qmsckData.toggledToolbarItems
                 && !!this.qmsckPlugin.itemToolbar
                 && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
         };
         QMSCKEditorComponent.prototype.addToggleToolbarConfig = function () {
-            var items = this.qmsckData.toggleToolbar.split(',');
+            var items = this.qmsckData.toggledToolbarItems.split(',');
             var toggleToolbarConfig = {
                 toggleToolbarConfig: {
                     toolbar: items
@@ -24406,13 +24441,13 @@
             };
             this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, mathTypeConfig);
         };
-        QMSCKEditorComponent.prototype.onChanged = function (_a) {
-            var editor = _a.editor;
+        QMSCKEditorComponent.prototype.onChanged = function (_e) {
+            var editor = _e.editor;
             //this.qmsckContentInput = editor.getData();
             this.qmsckContentOutput.emit(this.qmsckContentInput);
         };
-        QMSCKEditorComponent.prototype.onBlur = function (_a) {
-            var editor = _a.editor;
+        QMSCKEditorComponent.prototype.onBlur = function (_e) {
+            var editor = _e.editor;
             this.qmsckContentInput = editor.getData();
             this.qmsckContentOutput.emit(this.qmsckContentInput);
         };
@@ -24456,6 +24491,7 @@
                     wordsBox.textContent = _this.LANG.QMSCKEDITOR.WORDS + ": " + stats.words + " / " + _this.LANG.QMSCKEDITOR.CHARACTERS + ": " + stats.characters;
                 }
             });
+            this._setEditorInstanceObserver(this.editorId);
         };
         /**
          * Add template - Load template
@@ -24648,63 +24684,48 @@
         };
         /*
           Toolbar toggle
+      
+          This is a temporary workaround.
+          Tracking status and progress of the issue https://github.com/ckeditor/ckeditor5/issues/7383
+      
+          - Render both default toolbar and toggle toolbar at init time
+          - Set ID for toolbar items using index:
+            + From index 0 to toolbarLength - 1 is the default toolbar
+            + From index toolbarLength on is the toggle toolbar
+          - Show/hide default and toggle toolbar by set display none to corresponding toolbar items based on ID
         */
         QMSCKEditorComponent.prototype.toggleToolbarEventHandling = function () {
-            var _this = this;
-            var qmsckeditor = window.document.getElementById('qmsckeditor');
+            var qmsckeditor = window.document.getElementById(this.editorId);
             var toggleAttribute = 'isToggleToolbar';
             var ckeditorTag = 'ckeditor';
             if (qmsckeditor) {
                 var isToggleToolbar = qmsckeditor.getAttribute(toggleAttribute) == 'true';
                 if (isToggleToolbar) {
-                    this.ckeditorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(this.qmsckPlugin.itemToolbar);
+                    this._setToolbarViewMode(true);
                     qmsckeditor.setAttribute(toggleAttribute, 'false');
                 }
                 else {
-                    this.ckeditorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(this.qmsckData.toggleToolbar);
+                    this._setToolbarViewMode(false);
                     qmsckeditor.setAttribute(toggleAttribute, 'true');
                 }
-                var onChanged_1 = this.onChanged.bind(this);
-                var onBlur_1 = this.onBlur.bind(this);
-                if (this.editorInstance) {
-                    try {
-                        this.editorInstance.destroy();
-                    }
-                    catch (err) {
-                        console.log(err);
-                    }
-                }
-                //This is a temporary workaround.
-                //Tracking status and progress of the issue https://github.com/ckeditor/ckeditor5/issues/7383
-                var root = window.document.querySelector(ckeditorTag);
-                if (!!root) {
-                    var editorElement_1 = null;
-                    if (root.childElementCount > 0) {
-                        editorElement_1 = Array.from(root.children).find(function (i) { return i.nodeName.toLowerCase() == _this.ckTagname.toLowerCase(); });
-                    }
-                    else {
-                        editorElement_1 = window.document.createElement(this.ckTagname);
-                        editorElement_1.style = 'display: none;';
-                        root.appendChild(editorElement_1);
-                    }
-                    this.ckEditor.create(editorElement_1, this.ckeditorConfig).then(function (editor) {
-                        _this.initEditor(editor);
-                        _this.editorInstance = editor;
-                        //Delete cache content
-                        editorElement_1.innerHTML = '';
-                        //setup editor events
-                        var modelDocument = editor.model.document;
-                        var viewDocument = editor.editing.view.document;
-                        modelDocument.on('change:data', function () {
-                            onChanged_1({ editor: editor });
-                        });
-                        viewDocument.on('blur', function () {
-                            onBlur_1({ editor: editor });
-                        });
-                    });
-                }
             }
         };
+        QMSCKEditorComponent.prototype._setToolbarViewMode = function (showToggleToolbar) {
+            var _a, _b, _c, _d;
+            var toolbarLength = ((_a = this.qmsckPlugin.itemToolbar) === null || _a === void 0 ? void 0 : _a.split(',').length) || 0;
+            /*
+              Items in toolbar are indexed:
+              - From index 0 to toolbarLength - 1 is the default toolbar
+              - From index toolbarLength on is the toggle toolbar
+            */
+            (_b = $("#" + this.toolbarItemPrefixId + (toolbarLength - 1))) === null || _b === void 0 ? void 0 : _b.prevAll().each(function (index, element) {
+                element.style.display = showToggleToolbar ? 'none' : '';
+            });
+            (_c = $("#" + this.toolbarItemPrefixId + (toolbarLength - 1))) === null || _c === void 0 ? void 0 : _c.css('display', showToggleToolbar ? 'none' : '');
+            (_d = $("#" + this.toolbarItemPrefixId + (toolbarLength - 1))) === null || _d === void 0 ? void 0 : _d.nextAll().each(function (index, element) {
+                element.style.display = showToggleToolbar ? '' : 'none';
+            });
+        };
         /**
        * Flowchart
        */
@@ -24806,12 +24827,33 @@
                 });
             });
         };
+        QMSCKEditorComponent.prototype._setEditorInstanceObserver = function (editorId) {
+            var _this = this;
+            $(document).off('DOMNodeInserted').on('DOMNodeInserted', function (e) {
+                if (!_this.isToolbarItemsIdSet && $(e.target).has('#' + editorId)) {
+                    _this._setIdForToolbarItems();
+                }
+            });
+        };
+        QMSCKEditorComponent.prototype._setIdForToolbarItems = function () {
+            var _this = this;
+            var _a;
+            var toolbarItems = ((_a = document.querySelector((this.editorId ? '#' + this.editorId : '') + " .ck-toolbar__items")) === null || _a === void 0 ? void 0 : _a.children) || [];
+            if (!toolbarItems.length) {
+                return;
+            }
+            this.isToolbarItemsIdSet = true;
+            Array.from(toolbarItems).forEach(function (item, index) {
+                item.id = "" + _this.toolbarItemPrefixId + index;
+            });
+            this.toggleToolbarEventHandling();
+        };
         return QMSCKEditorComponent;
     }(QMSCKEditorBaseComponent));
     QMSCKEditorComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-ckeditor',
-                    template: "<div id=\"qmsckeditor\" class=\"qmsckeditor_container\">\r\n  <ckeditor class=\"qms-ckeditor\" [tagName]=\"ckTagname\" [(editor)]=\"ckEditor\" [config]=\"ckeditorConfig\"\r\n    (ready)=\"onReady($event)\" [(ngModel)]=\"qmsckContentInput\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\r\n    [disabled]=\"isDisabled\">\r\n  </ckeditor>\r\n  <div class=\"sub-container\">\r\n    <div class=\"\">\r\n      <span>{{LANG.QMSCKEDITOR.ASSISTIVE_TEXT}}</span>\r\n    </div>\r\n    <div class=\"wordcount-content\"></div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div class=\"qmsckeditor_container\" [id]=\"editorId\">\r\n  <ckeditor class=\"qms-ckeditor\" [tagName]=\"ckTagname\" [(editor)]=\"ckEditor\" [config]=\"ckeditorConfig\"\r\n    (ready)=\"onReady($event)\" [(ngModel)]=\"qmsckContentInput\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\r\n    [disabled]=\"isDisabled\">\r\n  </ckeditor>\r\n  <div class=\"sub-container\">\r\n    <div class=\"\">\r\n      <span>{{LANG.QMSCKEDITOR.ASSISTIVE_TEXT}}</span>\r\n    </div>\r\n    <div class=\"wordcount-content\"></div>\r\n  </div>\r\n</div>",
                     providers: [
                         QMSCKEditorFullscreenComponent,
                         {
@@ -24845,6 +24887,7 @@
         qmsckContentInput: [{ type: i0.Input }],
         isDisabled: [{ type: i0.Input, args: ['disabled',] }],
         required: [{ type: i0.Input, args: ['required',] }],
+        editorId: [{ type: i0.Input }],
         qmsckContentOutput: [{ type: i0.Output }],
         onMessage: [{ type: i0.HostListener, args: ['window:message', ['$event'],] }]
     };
@@ -27075,13 +27118,6 @@
         };
         SelectOneDialog.prototype.ngAfterViewChecked = function () {
             this.cdRef.detectChanges();
-            if (this.filteredOptions && this.filteredOptions.length) {
-                this.autoComplete.openPanel();
-                this.setResultHeight();
-            }
-            else if (this.autoComplete) {
-                this.autoComplete.closePanel();
-            }
         };
         SelectOneDialog.prototype.getDataTypeId = function (moduleId) {
             var itemType;
@@ -27148,9 +27184,6 @@
             }
             return this.filteredOptions;
         };
-        SelectOneDialog.prototype.showSearchResult = function () {
-            this.autoComplete.openPanel();
-        };
         SelectOneDialog.prototype.displayRelated = function (related) {
             return related ? related.itemName : undefined;
         };
@@ -27358,6 +27391,9 @@
         };
         SelectOneDialog.prototype.selectNodeTreeEvent = function (node) {
             var _a, _b;
+            if (node.disabled) {
+                return;
+            }
             var position = -1;
             var parentName = '';
             var itemNumberId = '';
@@ -27405,9 +27441,9 @@
     SelectOneDialog.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-select-one',
-                    template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    id=\"qmslib_related_popup_search\"\r\n    class=\"input__field\"\r\n    (click)=\"showSearchResult()\"\r\n  >\r\n    <input\r\n      #name\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n      #autoCompleteInputSearch\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"displayRelated\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      class=\"related-viewport\"\r\n      *ngIf=\"filteredOptions.length\"\r\n    >\r\n      <div class=\"search__module-result\" *ngIf=\"filteredOptions.length\">\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions()\"\r\n          [value]=\"option\"\r\n          (click)=\"selectItemSearched(option)\"\r\n        >\r\n          <qms-list-item type=\"image-square\">\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              [svgIcon]=\"getNodeIcon(option)\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div\r\n                qms-line\r\n                type=\"caption\"\r\n                qms-tool-tip=\"{{\r\n                  isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                }}\"\r\n                mode=\"dark\"\r\n                *ngIf=\"getParentName(option)\"\r\n              >\r\n                <span #searchItemResult class=\"search__result__parent-name\">\r\n                  {{ option.parentName }}\r\n                </span>\r\n              </div>\r\n              <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                {{ option.itemName }}\r\n              </div>\r\n              <div\r\n                class=\"caption\"\r\n                *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n              >\r\n                <qms-breadcrumb\r\n                  class=\"breadcrumb-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                >\r\n                  local_offer\r\n                </mat-icon>\r\n              </span>\r\n              {{ getItemId(option) }}\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar col-12 qmslib_related_popup_content panel__content_item\"\r\n    >\r\n      <mat-expansion-panel\r\n        hideToggle\r\n        id=\"qmslib_related_popup_common_001\"\r\n        [expanded]=\"isCommonExpanded\"\r\n        (opened)=\"isCommonExpanded = true\"\r\n        (closed)=\"isCommonExpanded = false\"\r\n        class=\"panel-tree\"\r\n      >\r\n        <div id=\"qmslib_related_popup_common_002\">\r\n          <qms-tree\r\n            [treeData]=\"treeData\"\r\n            [treeConfig]=\"treeConfig\"\r\n            [selectedData]=\"selectedData\"\r\n            [selectedRiskData]=\"selectedRiskData\"\r\n            [disabledList]=\"disabledList\"\r\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n            (nodeExpandEvent)=\"nodeExpandEvent($event)\"\r\n            [expandOnTitleClick]=\"false\"\r\n            [expandToChildNode]=\"expandToChildNode\"\r\n          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n      <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        qms-tool-tip=\"{{\r\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n        }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)\r\n        }}</span>\r\n        <mat-icon (click)=\"removeCheckedNodeList()\">cancel</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div> -->\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button\r\n      *ngIf=\"!checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 7px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 0px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button\r\n      qms-btn-text\r\n      [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div class=\"qmslib__related__popup__container\">\r\n  <div>\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 class=\"module-name\" mat-dialog-content>\r\n      <span>{{ moduleName }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"input__field\">\r\n    <input type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput [formControl]=\"myControl\" [matAutocomplete]=\"auto\" />\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 mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n\r\n    <div class=\"search__module-result\" *ngIf=\"filteredOptions.length\">\r\n      <mat-option class=\"search__option\" *ngFor=\"let option of getModuleFilteredOptions()\" [value]=\"option\"\r\n        (click)=\"selectItemSearched(option)\">\r\n        <qms-list-item class=\"item-suggestion\" type=\"image-square\">\r\n          <mat-icon leading-icon type=\"image-square\" [svgIcon]=\"getNodeIcon(option)\"></mat-icon>\r\n          <div qms-list-header>\r\n            <div qms-line type=\"caption\" qms-tool-tip=\"{{\r\n                  isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                }}\" mode=\"dark\" *ngIf=\"getParentName(option)\">\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 class=\"caption\" *ngIf=\"option.breadcumbs && option.breadcumbs.length\">\r\n              <qms-breadcrumb class=\"breadcrumb-container\" type=\"table\" numDisplayItem=\"1\" [nodes]=\"option.breadcumbs\">\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 class=\"material-icons-outlined search__description-icon\">\r\n                local_offer\r\n              </mat-icon>\r\n            </span>\r\n            {{ getItemId(option) }}\r\n          </div>\r\n        </qms-list-item>\r\n      </mat-option>\r\n    </div>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div class=\"qms-scrollbar col-12 qmslib_related_popup_content panel__content_item\">\r\n      <mat-expansion-panel hideToggle id=\"qmslib_related_popup_common_001\" [expanded]=\"isCommonExpanded\"\r\n        (opened)=\"isCommonExpanded = true\" (closed)=\"isCommonExpanded = false\" class=\"panel-tree\">\r\n        <div id=\"qmslib_related_popup_common_002\">\r\n          <qms-tree [treeData]=\"treeData\" [treeConfig]=\"treeConfig\" [selectedData]=\"selectedData\"\r\n            [selectedRiskData]=\"selectedRiskData\" [disabledList]=\"disabledList\"\r\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (nodeExpandEvent)=\"nodeExpandEvent($event)\"\r\n            [expandOnTitleClick]=\"false\" [expandToChildNode]=\"expandToChildNode\"></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n      <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        qms-tool-tip=\"{{\r\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n        }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)\r\n        }}</span>\r\n        <mat-icon (click)=\"removeCheckedNodeList()\">cancel</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div> -->\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button *ngIf=\"!checkedNodeList.length\" qms-btn style=\"margin-top: 7px\" (click)=\"onAddClick()\">\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button *ngIf=\"checkedNodeList.length\" qms-btn style=\"margin-top: 0px\" (click)=\"onAddClick()\">\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button qms-btn-text [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\" (click)=\"onCloseClick()\">\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>",
                     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:320px}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none;height:auto}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 .search__option .mat-option:focus:not(.mat-option-disabled),cdk-virtual-scroll-viewport .search__module-result .search__option.mat-option:hover:not(.mat-option-disabled){background:transparent!important}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:10.25rem}"]
+                    styles: ["::-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)}.qms-list-item.item-suggestion .image-square.wrap-image{width:2.5rem!important;height:100%!important;background:transparent;align-self:center;margin-right:0}.mat-option:focus:not(.mat-option-disabled),::ng-deep .mat-option:hover:not(.mat-option-disabled){background:transparent!important}.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:320px}.search__module-result{margin:1.5rem;padding:0 0 .5rem}.search__module-result .search__module-title{font-size:14px;font-weight:600}.search__module-result .search__option{height:auto;line-height:normal;padding:0;border-bottom:1px solid #e0e0e0}.search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}.search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}.search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,.search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}.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}.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}.search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}.search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}.search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none;height:auto}.search__module-result .search__option .qms-list-item-content .breadcrumb-container .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}.search__module-result .search__option .mat-option:focus:not(.mat-option-disabled),.search__module-result .search__option.mat-option:hover:not(.mat-option-disabled){background:transparent!important}.search__module-result svg{display:block}.module-name{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:10.25rem}"]
                 },] }
     ];
     SelectOneDialog.ctorParameters = function () { return [
@@ -27422,7 +27458,6 @@
     ]; };
     SelectOneDialog.propDecorators = {
         dataTrees: [{ type: i0.ViewChildren, args: [TreeComponent, {},] }],
-        autoComplete: [{ type: i0.ViewChild, args: ['autoCompleteInputSearch', { read: autocomplete.MatAutocompleteTrigger, static: true },] }],
         onMessage: [{ type: i0.HostListener, args: ['window:message', ['$event'],] }]
     };
 
@@ -30323,7 +30358,7 @@
             animations$1.transition('* => *', [
                 animations$1.query(':enter', [
                     animations$1.style({ opacity: 0, transform: 'translateY(-100%)' }),
-                    animations$1.stagger(25, [
+                    animations$1.stagger(30, [
                         animations$1.animate('0.4s cubic-bezier(0.23, 1, 0.320, 1)', animations$1.style({ opacity: 1, transform: 'none' }))
                     ])
                 ], { optional: true })
@@ -30331,8 +30366,19 @@
         ])
     ];
 
+    var QMSDepartmentPagingModel = /** @class */ (function (_super) {
+        __extends(QMSDepartmentPagingModel, _super);
+        function QMSDepartmentPagingModel() {
+            var _this = _super.call(this) || this;
+            _this.data = [];
+            _this.data = [];
+            return _this;
+        }
+        return QMSDepartmentPagingModel;
+    }(paginator.PageEvent));
+
     var SelectDepartmentTreeComponent = /** @class */ (function () {
-        function SelectDepartmentTreeComponent(cdRef, domSanitizer, appIconService, iconRegistry, eleRef, trans) {
+        function SelectDepartmentTreeComponent(cdRef, domSanitizer, appIconService, iconRegistry, eleRef, trans, treeDepartmentGlobalService) {
             var _this = this;
             this.cdRef = cdRef;
             this.domSanitizer = domSanitizer;
@@ -30340,26 +30386,28 @@
             this.iconRegistry = iconRegistry;
             this.eleRef = eleRef;
             this.trans = trans;
+            this.treeDepartmentGlobalService = treeDepartmentGlobalService;
             this.enableIncludeChild = false;
             this.enableTreeSearch = false;
             this.isSelectOne = false;
             this.activeViewSearch = false;
+            this.customClass = '';
+            this.arrSkeleton = new Array(6).fill(0);
             this.treeDataSourceConfig = new QMSSelectDepartmentTreeConfig();
+            this.isIncludeChildren = false;
             this.checkSearchMappingTree = true;
             this.enablePagingSearch = true;
             this.onSearchEvent = new i0.EventEmitter();
             this.onPagingSearchEvent = new i0.EventEmitter();
             this.ngUnsubscribe = new rxjs.Subject();
             this.isLoaded = false;
-            this.resultGroupSelected = [];
-            this.resultSingleSelected = [];
             this.resultSearchSelected = [];
             this.resultSelected = [];
             this.getDataTree$ = new rxjs.BehaviorSubject([]);
             this.onValueChangeEvent = new i0.EventEmitter();
-            this.searchDepartment$ = new rxjs.Subject();
+            this.selectionNodeChangeEvent = new i0.EventEmitter();
+            this.searchDepartment$ = new rxjs.BehaviorSubject(new QMSDepartmentPagingModel());
             this.resultSearch = [];
-            this.pagingResultSearch = [];
             this.isSelectAllResultSearch = false;
             this.indeterminateSearchResult = false;
             this.currentPaginationConfig = {
@@ -30394,6 +30442,8 @@
                 flatNode.itemIconSvg = node.itemIconSvg;
                 flatNode.isFile = node.isFile;
                 flatNode.disabled = node.disabled;
+                flatNode.isGroup = node.isGroup;
+                flatNode.groupId = node.groupId;
                 _this.flatTreeNodeMap.set(flatNode, node);
                 _this.nestedTreeNodeMap.set(node, flatNode);
                 return flatNode;
@@ -30402,13 +30452,12 @@
             this._getChild = function (node) { return node.children; };
             this.isExpandable = function (node) { return node.expandable; };
             this.hasChild = function (_, node) { return node.expandable; };
-            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);
             // Init tree data
             this.getDataTree$
                 .pipe(operators.takeUntil(this.ngUnsubscribe))
                 .subscribe(function (data) {
+                if (!_this.dataSource)
+                    return;
                 _this.dataSource.data = data;
             });
             // Register icon
@@ -30424,61 +30473,31 @@
                     _this.LANG = _this.trans.getObjectLang(res);
                 }
             });
-            this.searchDepartment$
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (result) {
-                _this.resultSearch = [];
-                if (result && result.length) {
-                    result.forEach(function (item) {
-                        var node = _this.treeControl.dataNodes.find(function (node) { return node.id === item.id; });
-                        var parents = node ? _this._getAllParentNode(node) : [];
-                        _this.resultSearch.push(Object.assign(Object.assign({}, item), { disabled: _this.checkSearchMappingTree && !node, path: __spreadArray(__spreadArray([], __read((parents.map(function (x, index) { return ({
-                                id: x.id,
-                                name: x.name,
-                            }); }).reverse() || []))), [
-                                {
-                                    id: item.id,
-                                    name: item.name,
-                                }
-                            ]) }));
-                    });
-                }
-                _this.currentPaginationConfig.pageIndex = 0;
-                _this.currentPaginationConfig.pageSize = 10;
-                _this.getLoading$.next(false);
-                _this.textResultSearch = _this.formSearchControl.value;
-                _this.onPagingSearchResult(_this.currentPaginationConfig);
-                _this._mapToResultSearch();
-                _this._checkStateCheckboxAllSearch();
-                _this.setIndexView(1);
-                _this.cdRef.detectChanges();
-            });
-            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));
-            })).subscribe(function (res) {
-                _this.onScrollIntoNode(res);
-            });
-            this.getActiveNodeEvent$.pipe(operators.takeUntil(this.ngUnsubscribe), operators.switchMap(function (val) {
-                _this.activeNode = val;
-                return rxjs.timer(1500);
-            })).subscribe(function (_) {
-                _this.activeNode = '';
-            });
+            this._handleSearchEvent();
+            this._handleActiveNodeEvent();
+            this._handleItemSelectionChanged();
             this.getLoading$.pipe(operators.takeUntil(this.ngUnsubscribe))
                 .subscribe(function (res) {
                 res ? _this.formSearchControl.disable() : _this.formSearchControl.enable();
             });
         }
+        Object.defineProperty(SelectDepartmentTreeComponent.prototype, "rowsSkeleton", {
+            set: function (value) {
+                this.arrSkeleton = new Array(value).fill(0);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SelectDepartmentTreeComponent.prototype, "treeData", {
             set: function (value) {
+                this.updateDataTree([]);
                 this.treeDataSourceConfig.treeData = value || [];
-                this.updateDataTree(this.treeDataSourceConfig.treeData);
+                this._initTreeData();
             },
             enumerable: false,
             configurable: true
         });
+        ;
         Object.defineProperty(SelectDepartmentTreeComponent.prototype, "selectedList", {
             set: function (value) {
                 this.treeDataSourceConfig.selectedList = value || [];
@@ -30495,13 +30514,18 @@
         });
         Object.defineProperty(SelectDepartmentTreeComponent.prototype, "currentTreeData", {
             get: function () {
-                return this.getDataTree$.value;
+                return this.getDataTree$.getValue();
             },
             enumerable: false,
             configurable: true
         });
+        SelectDepartmentTreeComponent.prototype.ngAfterContentInit = function () {
+            this.cdRef.detectChanges();
+        };
+        SelectDepartmentTreeComponent.prototype.ngAfterViewInit = function () {
+            this.cdRef.detectChanges();
+        };
         SelectDepartmentTreeComponent.prototype.ngOnInit = function () {
-            this._initTreeData();
             this._initCheckListSelected();
         };
         SelectDepartmentTreeComponent.prototype.ngOnDestroy = function () {
@@ -30510,99 +30534,264 @@
         };
         SelectDepartmentTreeComponent.prototype._initTreeData = function () {
             var _this = this;
-            if (this.treeDataSourceConfig.treeData.length) {
-                var rootNode = this.treeDataSourceConfig.treeData.filter(function (item) { return !item.parentId; })
-                    .map(function (item, _index) {
-                    var node = {
-                        id: item.id,
-                        name: item.name,
-                        markedGetChildren: item.markedGetChildren,
-                        children: [],
-                        disabled: _this.treeDataSourceConfig.disabledList.includes(item.id),
-                        itemIcon: item.itemIcon,
-                        itemMatIcon: item.itemMatIcon,
-                        itemIconSvg: item.itemIconSvg
-                    };
-                    return node;
-                });
-                if (!rootNode.length)
-                    throw ('Data invalid.');
-                this.updateDataTree(rootNode);
-                var groupResult_1 = this.treeDataSourceConfig.treeData.filter(function (x) { return x.parentId; }).reduce(function (result, currentValue) {
-                    (result[currentValue['parentId']] = result[currentValue['parentId']] || []).push(currentValue);
-                    return result;
-                }, {});
-                var getAllParent_1 = function (parentId) {
-                    var parents = [];
-                    var parent = _this.treeDataSourceConfig.treeData.find(function (x) { return x.id == parentId; });
-                    while (parent) {
-                        parents.push(parent);
-                        parent = _this.treeDataSourceConfig.treeData.find(function (x) { return x.id == parent.parentId; });
-                    }
-                    return parents;
+            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.treeDataSourceConfig.treeData);
+            if (!_treeDataInput.length)
+                return;
+            var rootNode = _treeDataInput.filter(function (item) { return !item.parentId; })
+                .map(function (item, _index) {
+                var node = {
+                    id: item.id,
+                    name: item.name,
+                    markedGetChildren: item.markedGetChildren,
+                    children: [],
+                    isFile: false,
+                    itemIcon: item.itemIcon,
+                    itemMatIcon: item.itemMatIcon,
+                    itemIconSvg: item.itemIconSvg,
+                    parentId: item.parentId,
+                    isGroup: false
                 };
-                if (!(rootNode && !!rootNode.length))
-                    return;
-                var groupResultKey = Object.keys(groupResult_1).filter(function (x) { return getAllParent_1(x).length; });
-                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_1[key]);
-                            parentNestedNode.childCount = parentNestedNode.children.length;
-                            _this.updateDataTree(_this.currentTreeData);
-                            groupResult_1[key] = [];
-                            return false;
-                        }
-                        return true;
-                    });
-                }
+                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");
+            }
+            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;
+                    }
+                    return true;
+                });
             }
+            this.getLoading$.next(false);
+            this._initCheckListSelected();
         };
         SelectDepartmentTreeComponent.prototype._initCheckListSelected = function () {
             var _this = this;
             if (!this.treeDataSourceConfig.selectedList.length)
                 return;
-            this.resultGroupSelected = this.treeDataSourceConfig.selectedList.filter(function (item) { return item.children; });
-            this.resultSingleSelected = this.treeDataSourceConfig.selectedList.filter(function (item) { return item.children === null; });
-            this.treeDataSourceConfig.selectedList.forEach(function (item) {
+            var selectedList = this.treeDataSourceConfig.selectedList;
+            selectedList.forEach(function (item) {
                 var _a;
-                var flatNode = _this.treeControl.dataNodes.find(function (node) { return node.id === item.id; });
-                if (flatNode) {
-                    _this.checkListSelection.select(flatNode);
+                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.checkListSelection.select(node);
                             _this.onExpandAllParent(node);
                         }
                     });
-                    _this.onExpandAllParent(flatNode);
+                    _this.onExpandAllParent(node);
                 }
-                _this.resultSelected = __spreadArray(__spreadArray([], __read(_this.resultSingleSelected)), __read(_this.resultGroupSelected));
-                _this.onValueChangeEvent.emit(_this.resultSelected);
             });
+            this.cdRef.detectChanges();
         };
-        SelectDepartmentTreeComponent.prototype.updateDataTree = function (data) {
-            this.getDataTree$.next(data);
-        };
-        SelectDepartmentTreeComponent.prototype.setResultSearch = function (data) {
-            this.searchDepartment$.next(data);
-        };
-        SelectDepartmentTreeComponent.prototype.onExpandNode = function (node) {
-        };
-        SelectDepartmentTreeComponent.prototype.onOptionSearchSelected = function (value) {
-            var flatNode = this.treeControl.dataNodes.find(function (node) { return node.id === value.id; });
-            if (!flatNode)
-                return;
+        //Handle item selection changed
+        SelectDepartmentTreeComponent.prototype._handleItemSelectionChanged = function () {
+            var _this = this;
+            this.checkListSelection.changed
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function (_b) {
+                var added = _b.added, removed = _b.removed;
+                var checkExistInResult = function (node) { return _this.resultSelected.findIndex(function (x) { return x.id === node.id; }) > -1; };
+                if (added.length) {
+                    added.forEach(function (node) {
+                        var nestedNode = _this.convertToNestedNode(node);
+                        nestedNode.children = [];
+                        nestedNode.childCount = _this.getListChildrenOfNode(node).length;
+                        var existGroup = _this._getAllParentNode(node).map(function (item) { return _this.convertToNestedNode(item); }).find(function (x) { return x.isGroup; });
+                        if (!!existGroup) {
+                            nestedNode.groupId = existGroup.id;
+                            if (!existGroup.children.some(function (x) { return x.id === nestedNode.id; })) {
+                                existGroup.children.push(nestedNode);
+                                _this._onSelectionNodeChangeEvent('updated', [existGroup]);
+                            }
+                            if (!checkExistInResult(existGroup)) {
+                                _this.resultSelected.push(existGroup);
+                                _this._onSelectionNodeChangeEvent('added', [existGroup]);
+                            }
+                            _this.resultSelected.forEach(function (item, index) {
+                                if (item.groupId === existGroup.id) {
+                                    _this.resultSelected.splice(index, 1);
+                                    _this._onSelectionNodeChangeEvent('removed', [item]);
+                                }
+                            });
+                            return;
+                        }
+                        if (checkExistInResult(node))
+                            return;
+                        _this.resultSelected.push(nestedNode);
+                        _this._onSelectionNodeChangeEvent('added', [nestedNode]);
+                    });
+                }
+                if (removed.length) {
+                    removed.forEach(function (node) {
+                        var nestedNode = _this.convertToNestedNode(node);
+                        var children = _this.getListChildrenOfNode(node);
+                        if (nestedNode.isGroup) {
+                            var _item = _this.resultSelected.find(function (x) { return x.id === node.id; });
+                            if (!_item)
+                                return;
+                            children.forEach(function (item) {
+                                item.groupId = null;
+                            });
+                            _this.resultSelected.splice(_this.resultSelected.indexOf(_item), 1);
+                            _this._onSelectionNodeChangeEvent('removed', [_item]);
+                            return;
+                        }
+                        var group = _this.resultSelected.find(function (x) { return x.id === nestedNode.groupId; });
+                        if (!group) {
+                            var _item = _this.resultSelected.find(function (x) { return x.id === node.id; });
+                            if (!_item)
+                                return;
+                            _this.resultSelected.splice(_this.resultSelected.indexOf(_item), 1);
+                            _this._onSelectionNodeChangeEvent('removed', [_item]);
+                            return;
+                        }
+                        var arrCheck = _this.getListChildrenOfNode(node).concat(node);
+                        arrCheck.forEach(function (item) {
+                            var _node = _this.treeControl.dataNodes.find(function (x) { return x.id === item.id; });
+                            if (group.children.some(function (x) { return x.id === _node.id && !_this.checkListSelection.isSelected(_node); })) {
+                                var _item = group.children.find(function (x) { return x.id === item.id; });
+                                if (!_item)
+                                    return;
+                                group.children.splice(group.children.indexOf(_item), 1);
+                                _this._onSelectionNodeChangeEvent('updated', [group]);
+                            }
+                        });
+                    });
+                }
+                _this.onValueChangeEvent.emit(_this.resultSelected);
+            });
+        };
+        SelectDepartmentTreeComponent.prototype._onSelectionNodeChangeEvent = function (state, data) {
+            switch (state) {
+                case 'removed':
+                    this.selectionNodeChangeEvent.emit({
+                        removed: data,
+                        added: [],
+                        updated: [],
+                        source: new collections.SelectionModel(true, this.resultSelected)
+                    });
+                    break;
+                case 'updated':
+                    this.selectionNodeChangeEvent.emit({
+                        removed: [],
+                        added: [],
+                        updated: data,
+                        source: new collections.SelectionModel(true, this.resultSelected)
+                    });
+                    break;
+                case 'added':
+                    this.selectionNodeChangeEvent.emit({
+                        removed: [],
+                        added: data,
+                        updated: [],
+                        source: new collections.SelectionModel(true, this.resultSelected)
+                    });
+                    break;
+                default:
+                    return;
+            }
+        };
+        SelectDepartmentTreeComponent.prototype._handleSearchEvent = function () {
+            var _this = this;
+            this.searchDepartment$
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function (result) {
+                _this.resultSearch = [];
+                if (result && result.length) {
+                    result.data.forEach(function (item) {
+                        var node = _this.treeControl.dataNodes.find(function (node) { return node.id === item.id; });
+                        var parents = node ? _this._getAllParentNode(node) : [];
+                        _this.resultSearch.push(Object.assign(Object.assign({}, item), { disabled: _this.checkSearchMappingTree && !node, path: __spreadArray(__spreadArray([], __read((parents.map(function (x, index) { return ({
+                                id: x.id,
+                                name: x.name,
+                            }); }).reverse() || []))), [
+                                {
+                                    id: item.id,
+                                    name: item.name,
+                                }
+                            ]) }));
+                    });
+                    _this.getLoading$.next(false);
+                    _this.textResultSearch = _this.formSearchControl.value;
+                    _this._mapToResultSearch();
+                    _this._checkStateCheckboxAllSearch();
+                    _this.setIndexView(1);
+                }
+            });
+        };
+        SelectDepartmentTreeComponent.prototype._handleActiveNodeEvent = function () {
+            var _this = this;
+            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));
+            })).subscribe(function (res) {
+                _this.onScrollIntoNode(res);
+            });
+            this.getActiveNodeEvent$.pipe(operators.takeUntil(this.ngUnsubscribe), operators.switchMap(function (val) {
+                _this.activeNode = val;
+                return rxjs.timer(1500);
+            })).subscribe(function (_) {
+                _this.activeNode = '';
+            });
+        };
+        SelectDepartmentTreeComponent.prototype.updateDataTree = function (data) {
+            this.getDataTree$.next(data);
+        };
+        SelectDepartmentTreeComponent.prototype.setResultSearch = function (data) {
+            this.getLoading$.next(false);
+            this.searchDepartment$.next(data);
+        };
+        SelectDepartmentTreeComponent.prototype.onExpandNode = function (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.onScrollIntoNode(flatNode.id);
         };
-        SelectDepartmentTreeComponent.prototype.onSlideToggleChange = function () {
-        };
         SelectDepartmentTreeComponent.prototype.displayWhenSelectDepartmentOption = function ($event) {
             return '';
         };
@@ -30614,8 +30803,6 @@
             else {
                 this._handleCheckNode(node);
             }
-            this.onValueChangeEvent.emit(this.resultSelected);
-            this._mapToResultSearch();
             this._checkStateCheckboxAllSearch();
         };
         SelectDepartmentTreeComponent.prototype._handleSelectOne = function (node) {
@@ -30644,7 +30831,6 @@
             this.checkListSelection.deselect(flatNode);
             flatNode && this._handleCheckNode(flatNode);
             this._checkStateCheckboxAllSearch();
-            this.onValueChangeEvent.emit(this.resultSelected);
         };
         SelectDepartmentTreeComponent.prototype.isIndeterminate = function (node) {
             var _this = this;
@@ -30657,77 +30843,39 @@
             return listCheck.every(function (item) { return _this.checkListSelection.isSelected(item); });
         };
         SelectDepartmentTreeComponent.prototype._handleCheckNode = function (node) {
-            var _b, _c;
-            var isSelectedNode = this.checkListSelection.isSelected(node);
-            var isOwnerGroup = !!this.resultGroupSelected.find(function (gr) { return (gr === null || gr === void 0 ? void 0 : gr.id) === node.id; });
-            if (isSelectedNode) {
-                var children = this.treeDataSourceConfig.includeChildren && this.getListChildrenOfNode(node);
-                children && (_b = this.checkListSelection).select.apply(_b, __spreadArray([], __read(children)));
-            }
-            else {
-                var childSelected = this.getChildrenSelected(node);
-                // check node is owner group or mode is 'include children' and remove all children
-                (isOwnerGroup || this.treeDataSourceConfig.includeChildren) && (_c = this.checkListSelection).deselect.apply(_c, __spreadArray([], __read(childSelected)));
-            }
-            this._updateGroupResult(node);
-            this._updateSingleResult();
-            this.resultSelected = __spreadArray(__spreadArray([], __read(this.resultSingleSelected)), __read(this.resultGroupSelected));
-            this._mapToResultSearch();
-        };
-        // Check group root contain node and re-update chilren
-        SelectDepartmentTreeComponent.prototype._updateGroupResult = function (node) {
+            var _b, _c, _d;
+            var _this = this;
+            var isSelected = this.checkListSelection.isSelected(node);
+            var childSelected = this.getChildrenSelected(node);
             var nestedNode = this.convertToNestedNode(node);
-            var existedGroup = this._getExistedGroup(node);
-            var childrenSelected = this._mapToNestedListNode(this.getChildrenSelected(this.convertToFlatNode(existedGroup) || node));
-            var item = this.resultGroupSelected.find(function (gr) { return gr.id == nestedNode.id || gr.id === (existedGroup === null || existedGroup === void 0 ? void 0 : existedGroup.id); });
-            if (!!item) {
-                item.children = childrenSelected;
-            }
-            else {
-                this.treeDataSourceConfig.includeChildren && this.resultGroupSelected.push(Object.assign(Object.assign({}, nestedNode), { children: childrenSelected }));
+            if (isSelected) {
+                // Check existed group
+                var existedGroup_1 = this._getAllParentNode(node).find(function (x) { return _this.convertToNestedNode(x).isGroup; });
+                if (!this.isIncludeChildren) {
+                    // nestedNode.isGroup = false;
+                    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;
             }
-            this._checkGroupSelected(childrenSelected);
+            var deselectNodes = (this.isIncludeChildren || nestedNode.isGroup) ? childSelected : [node];
+            (_d = this.checkListSelection).deselect.apply(_d, __spreadArray([], __read(deselectNodes)));
+            nestedNode.isGroup = false;
         };
-        // Check single selected result
-        SelectDepartmentTreeComponent.prototype._updateSingleResult = function () {
-            var _this = this;
-            var excludeChildOfGroup = [];
-            this.resultGroupSelected.forEach(function (gr) {
-                excludeChildOfGroup = __spreadArray(__spreadArray([], __read(excludeChildOfGroup)), __read(gr.children.map(function (x) { return x.id; })));
-            });
-            this.resultSingleSelected = this.treeControl.dataNodes.filter(function (item) {
-                var isSelected = _this.checkListSelection.isSelected(item);
-                var existedGroup = _this._getExistedGroup(item);
-                var isOwnerGroup = !!_this.resultGroupSelected.find(function (x) { return (x === null || x === void 0 ? void 0 : x.id) === item.id; });
-                return isSelected && !existedGroup && !isOwnerGroup && !excludeChildOfGroup.includes(item.id);
-            }).map(function (item) {
-                var nestedNode = _this.convertToNestedNode(item);
-                nestedNode.children = null;
-                return nestedNode;
-            });
-        };
-        SelectDepartmentTreeComponent.prototype._checkGroupSelected = function (childSelected) {
-            var _this = this;
-            this.resultGroupSelected = this.resultGroupSelected.filter(function (gr) {
-                var flatNode = _this.treeControl.dataNodes.find(function (node) { return node.id === gr.id; });
-                var childSelectedInGroup = gr.children.filter(function (x) { return childSelected.includes(x); });
-                gr.childCount = _this.getListChildrenOfNode(flatNode).length;
-                // if Mode is 'include child' the group list will filter exclude all child selected , ortherwise filter exclude all child in group that node is contained
-                var arrChild = _this.treeDataSourceConfig.includeChildren ? childSelected : childSelectedInGroup;
-                return gr.childCount > 0 && _this.checkListSelection.isSelected(flatNode) && !arrChild.find(function (_x) { return _x.id === gr.id; });
-            });
-        };
-        SelectDepartmentTreeComponent.prototype._getExistedGroup = function (node) {
-            var _this = this;
-            var allParent = this._getAllParentNode(node);
-            var listGroupIds = this.resultGroupSelected.map(function (gr) { return gr.id; });
-            var existedGroup;
-            allParent.forEach(function (item) {
-                if (listGroupIds.includes(item.id)) {
-                    existedGroup = _this.convertToNestedNode(item);
-                }
-            });
-            return existedGroup;
+        SelectDepartmentTreeComponent.prototype.resetNode = function (node) {
+            node.isGroup = false;
+            return node;
         };
         SelectDepartmentTreeComponent.prototype.getChildrenSelected = function (node) {
             var _this = this;
@@ -30741,24 +30889,11 @@
             return flatNodeList.map(function (item) { return _this.convertToNestedNode(item); });
         };
         SelectDepartmentTreeComponent.prototype.convertToNestedNode = function (node) {
-            return this.flatTreeNodeMap.get(node);
+            return this.flatTreeNodeMap.get(node) || {};
         };
         SelectDepartmentTreeComponent.prototype.convertToFlatNode = function (node) {
             return this.nestedTreeNodeMap.get(node);
         };
-        SelectDepartmentTreeComponent.prototype._getRootSelected = function (node) {
-            var _this = this;
-            var parentList = this._getAllParentNode(node);
-            var groupExist;
-            if (parentList.length) {
-                parentList.forEach(function (item) {
-                    if (_this.checkListSelection.isSelected(item)) {
-                        groupExist = item;
-                    }
-                });
-            }
-            return groupExist;
-        };
         SelectDepartmentTreeComponent.prototype._getAllParentNode = function (node) {
             var listParent = [];
             var parent = this._getParentNode(node);
@@ -30804,12 +30939,13 @@
             this.getActiveNodeEvent$.next(nodeId);
         };
         SelectDepartmentTreeComponent.prototype.onSearch = function () {
-            if (this.formSearchControl.value) {
-                this.getLoading$.next(true);
-                this.setIndexView(1);
-                this.onSearchEvent.emit(this.formSearchControl.value);
+            this.getLoading$.next(true);
+            this.setIndexView(1);
+            this.onSearchEvent.emit(this.formSearchControl.value);
+            if (!this.paginatorSearch)
                 return;
-            }
+            this.paginatorSearch.changePage(0);
+            this.paginatorSearch.renderDisplayNumberOfpages();
         };
         SelectDepartmentTreeComponent.prototype.onClickResultItem = function (item) {
             var node = this.treeControl.dataNodes.find(function (x) { return item.id === x.id; });
@@ -30835,7 +30971,6 @@
             }
             this._handleCheckResutlSearch(item);
             this._checkStateCheckboxAllSearch();
-            this.onValueChangeEvent.emit(this.resultSelected);
         };
         SelectDepartmentTreeComponent.prototype._mapToResultSearch = function () {
             var _this = this;
@@ -30855,44 +30990,28 @@
         SelectDepartmentTreeComponent.prototype.onSelectAllSearchResult = function (checked) {
             var _this = this;
             this.isSelectAllResultSearch = !checked;
-            var handle = function (arr) {
-                arr.length && arr.forEach(function (item) {
-                    if (_this.isSelectAllResultSearch) {
-                        !_this.checkListSelectionSearch.isSelected(item) && _this.checkListSelectionSearch.select(item);
-                    }
-                    else {
-                        _this.checkListSelectionSearch.deselect(item);
-                    }
-                    _this._handleCheckResutlSearch(item);
-                });
-            };
-            if (this.treeDataSourceConfig.includeChildren) {
-                var mainGroup = this.pagingResultSearch.filter(function (item) {
-                    var mainGroup = _this.pagingResultSearch.filter(function (item) {
-                        var node = _this.treeControl.dataNodes.find(function (x) { return x.id === item.id; });
-                        var existItemGroup = _this._getAllParentNode(node).filter(function (x) { return _this.pagingResultSearch.some(function (x1) { return x1.id === x.id; }); });
-                        return existItemGroup.length === 0;
-                    });
-                    handle(mainGroup);
-                });
-            }
-            else {
-                handle(this.pagingResultSearch);
-            }
+            this.resultSearch.length && this.resultSearch.forEach(function (item) {
+                if (_this.isSelectAllResultSearch) {
+                    !_this.checkListSelectionSearch.isSelected(item) && _this.checkListSelectionSearch.select(item);
+                }
+                else {
+                    _this.checkListSelectionSearch.deselect(item);
+                }
+                _this._handleCheckResutlSearch(item);
+            });
             this._checkStateCheckboxAllSearch();
             this.onValueChangeEvent.emit(this.resultSelected);
         };
         SelectDepartmentTreeComponent.prototype._checkStateCheckboxAllSearch = function () {
             var _this = this;
-            this.isSelectAllResultSearch = !!this.pagingResultSearch.length && this.pagingResultSearch.every(function (x) { return _this.checkListSelectionSearch.isSelected(x); });
-            this.indeterminateSearchResult = !this.isSelectAllResultSearch && !!this.pagingResultSearch.length && this.pagingResultSearch.some(function (x) { return _this.checkListSelectionSearch.isSelected(x); });
+            this.isSelectAllResultSearch = !!this.resultSearch.length && this.resultSearch.every(function (x) { return _this.checkListSelectionSearch.isSelected(x); });
+            this.indeterminateSearchResult = !this.isSelectAllResultSearch && !!this.resultSearch.length && this.resultSearch.some(function (x) { return _this.checkListSelectionSearch.isSelected(x); });
         };
         SelectDepartmentTreeComponent.prototype.isDisableChecboxAllSearch = function () {
-            return this.pagingResultSearch.length && this.pagingResultSearch.every(function (x) { return x.disabled; });
+            return this.resultSearch && this.resultSearch.every(function (x) { return x.disabled; });
         };
         SelectDepartmentTreeComponent.prototype.onPagingSearchResult = function (val) {
-            this.currentPaginationConfig = val;
-            this.pagingResultSearch = this.enablePagingSearch ? this.resultSearch.slice(val.pageIndex * val.pageSize, (val.pageIndex * val.pageSize) + val.pageSize) : this.resultSearch;
+            this.getLoading$.next(true);
             this._checkStateCheckboxAllSearch();
             this.onPagingSearchEvent.emit(val);
         };
@@ -30901,7 +31020,7 @@
         };
         SelectDepartmentTreeComponent.prototype.setIndexView = function (index) {
             if (index === 1) {
-                this.treeDataSourceConfig.includeChildren = false;
+                this.isIncludeChildren = false;
             }
             this.indexView = index;
         };
@@ -30909,18 +31028,18 @@
             return JSON.parse(localStorage.getItem('selectedNode'));
         };
         SelectDepartmentTreeComponent.prototype.setSelectedNodeStorage = function (node) {
-            this.treeDataSourceConfig.includeChildren && localStorage.setItem('selectedNode', JSON.stringify(node));
+            this.isIncludeChildren && localStorage.setItem('selectedNode', JSON.stringify(node));
         };
         return SelectDepartmentTreeComponent;
     }());
     SelectDepartmentTreeComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-select-department-tree',
-                    template: "<div class=\"qms-select-department-tree-container\">\r\n  <div class=\"input-select-department\">\r\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"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]=\"enableIncludeChild && !isSelectOne\"\r\n      class=\"select__toggle-include toggle-include-child mt-1 d-flex justify-content-end  align-items-center\">\r\n      <mat-slide-toggle *ngIf=\"enableIncludeChild && !isSelectOne\" [disabled]=\"indexView === 1\"\r\n        [(ngModel)]=\"treeDataSourceConfig.includeChildren\" (ngModelChange)=\"onSlideToggleChange()\" color=\"default\"\r\n        qms-group-options>\r\n        <span class=\"text-label\">{{treeDataSourceConfig.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n      </mat-slide-toggle>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"indexView === 1 && enableTreeSearch\" (click)=\"setIndexView(0)\"\r\n        qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\" position=\"top\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"indexView === 0 && 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  <mat-divider class=\"mx-auto\"></mat-divider>\r\n  <div [@animateSlideView]=\"indexView\" class=\"tree-department-wrapper\">\r\n    <mat-tree [@listAnimation] *ngIf=\"indexView === 0\" class=\"select-department-tree\" [dataSource]=\"dataSource\"\r\n      [treeControl]=\"treeControl\">\r\n      <!-- This is the tree node template for leaf nodes -->\r\n      <mat-tree-node\r\n        [ngClass]=\"{'w-100': isSelectOne, 'selected-theme': this.checkListSelection.isSelected(node) && 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]=\"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 [@triggerColor]=\"activeNode == node.id\" *matTreeNodeDef=\"let node; when: hasChild\"\r\n        [class.selected-theme]=\"this.checkListSelection.isSelected(node) && isSelectOne\" matTreeNodePadding [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': 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]=\"isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n            [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n          <mat-progress-bar *ngIf=\"false\" mode=\"indeterminate\" class=\"example-tree-progress-bar\">\r\n          </mat-progress-bar>\r\n        </div>\r\n      </mat-tree-node>\r\n    </mat-tree>\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 || isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n          [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n          color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n          (click)=\"!isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n          <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n          <span>(<b>{{pagingResultSearch.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] *ngIf=\"pagingResultSearch.length && !getLoading$.value\"\r\n        [class.active-paging]=\"resultSearch.length > 10 && enablePagingSearch\" class=\"result\">\r\n        <div *ngFor=\"let item of pagingResultSearch\" (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              <!-- <mat-icon class=\"me-1\">arrow_right</mat-icon> -->\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=\"!pagingResultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n        <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n      </div>\r\n      <mat-divider *ngIf=\"resultSearch.length > 10 && enablePagingSearch\" class=\"mx-auto\"></mat-divider>\r\n      <qms-paginator *ngIf=\"resultSearch.length > 10 && enablePagingSearch && !getLoading$.value\"\r\n        [length]=\"resultSearch.length\" [numHidden]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 100]\"\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=\"88\" 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  </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div class=\"loading-container\">\r\n    <div class=\"loader\" *ngFor=\"let item of [1,1,1,1,1,1]\">\r\n      <div class=\"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",
+                    template: "<div [ngClass]=\"['qms-select-department-tree-container', customClass]\">\r\n  <div class=\"input-select-department\">\r\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"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]=\"enableIncludeChild && !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=\"enableIncludeChild && !isSelectOne\" [disabled]=\"indexView === 1\"\r\n        [(ngModel)]=\"isIncludeChildren\" color=\"default\" qms-group-options>\r\n        <span class=\"text-label\">{{treeDataSourceConfig.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n      </mat-slide-toggle>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"indexView === 1 && enableTreeSearch\" (click)=\"setIndexView(0)\"\r\n        qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\" position=\"top\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"indexView === 0 && 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  <mat-divider class=\"mx-auto\"></mat-divider>\r\n  <div [@animateSlideView]=\"indexView\" [ngStyle]=\"{height: height || '50vh'}\" class=\"tree-department-wrapper\">\r\n    <mat-tree [@listAnimation] *ngIf=\"indexView === 0 && !!treeControl\" class=\"select-department-tree\"\r\n      [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n      <!-- This is the tree node template for leaf nodes -->\r\n      <mat-tree-node\r\n        [ngClass]=\"{'w-100': isSelectOne, 'selected-theme': this.checkListSelection.isSelected(node) && 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]=\"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 [@triggerColor]=\"activeNode == node.id\" *matTreeNodeDef=\"let node; when: hasChild\"\r\n        [class.selected-theme]=\"this.checkListSelection.isSelected(node) && isSelectOne\" matTreeNodePadding [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': 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]=\"isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n            [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n          <mat-progress-bar *ngIf=\"false\" mode=\"indeterminate\" class=\"example-tree-progress-bar\">\r\n          </mat-progress-bar>\r\n        </div>\r\n      </mat-tree-node>\r\n    </mat-tree>\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 || isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n          [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n          color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n          (click)=\"!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]=\"resultSearch.length > 10 && enablePagingSearch\" class=\"result\">\r\n        <div *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              <!-- <mat-icon class=\"me-1\">arrow_right</mat-icon> -->\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 && enablePagingSearch\" class=\"mx-auto\"></mat-divider>\r\n      <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && enablePagingSearch \"\r\n        [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 100]\"\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 class=\"loading-container\">\r\n    <div class=\"loader\" *ngFor=\"let item of arrSkeleton\">\r\n      <div class=\"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
                     ],
-                    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 .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 .tree-department-wrapper{height:375px;padding-right:4px;overflow-y:auto;overflow-x:hidden;position:relative}.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:375px;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% - 80px)}.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-icon{display:flex;align-items:center;justify-content:center}.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 .mat-paginator-container{min-height:40px}.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;justify-content:center;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:600;font-size:13px;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-paginator-container .qms-paginator-range-actions>.qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container ::ng-deep .qms-paginator>.qms-btn-icon-wrapper{width:30px;height:30px;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{margin-right:12px;height:100%;display:flex;align-items:center;justify-content:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size>.qms-form-page-size .mat-form-field-flex{width:60px;height:30px;display:flex;align-items:center;padding:0 4px}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size>.qms-form-page-size .mat-form-field-flex .mat-form-field-infix{height:30px}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size>.qms-pagesize-label{display:none}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field.qms-form .mat-select-min-line,.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field.qms-form mat-select-trigger{font-size:14px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-select-value{text-align: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 .loading-container{overflow:hidden;height:100%;display:grid;grid-template-rows:repeat(auto-fill,minmax(60px,60px))}.qms-select-department-tree-container .loading-container .loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .loading-container .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 .loading-container .loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .loading-container .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%)}}"]
+                    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 .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 .tree-department-wrapper{height:375px;padding-right:4px;overflow-y:auto;overflow-x:hidden;position:relative}.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:375px;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% - 80px)}.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-icon{display:flex;align-items:center;justify-content:center}.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 .mat-paginator-container{min-height:40px}.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;justify-content:center;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:600;font-size:13px;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-paginator-container .qms-paginator-range-actions>.qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container ::ng-deep .qms-paginator>.qms-btn-icon-wrapper{width:30px;height:30px;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{margin-right:12px;height:100%;display:flex;align-items:center;justify-content:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size>.qms-form-page-size .mat-form-field-flex{width:60px;height:30px;display:flex;align-items:center;padding:0 4px}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size>.qms-form-page-size .mat-form-field-flex .mat-form-field-infix{height:30px}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size>.qms-pagesize-label{display:none}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field.qms-form .mat-select-min-line,.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field.qms-form mat-select-trigger{font-size:14px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-select-value{text-align: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 .loading-container{overflow:hidden;height:100%;display:grid;grid-template-rows:repeat(auto-fit,minmax(60px,60px))}.qms-select-department-tree-container .loading-container .loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .loading-container .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 .loading-container .loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .loading-container .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 [
@@ -30929,13 +31048,17 @@
         { type: QMSIconRegistryService },
         { type: icon.MatIconRegistry },
         { type: i0.ElementRef },
-        { type: TranslateLibraryService }
+        { type: TranslateLibraryService },
+        { type: QMSSelectDepartmentTreeGlobalService }
     ]; };
     SelectDepartmentTreeComponent.propDecorators = {
         enableIncludeChild: [{ type: i0.Input }],
         enableTreeSearch: [{ type: i0.Input }],
         isSelectOne: [{ type: i0.Input }],
         activeViewSearch: [{ type: i0.Input }],
+        height: [{ type: i0.Input }],
+        customClass: [{ type: i0.Input }],
+        rowsSkeleton: [{ type: i0.Input }],
         treeData: [{ type: i0.Input }],
         selectedList: [{ type: i0.Input }],
         selectIncludeLabel: [{ type: i0.Input }],
@@ -30943,7 +31066,9 @@
         enablePagingSearch: [{ type: i0.Input }],
         onSearchEvent: [{ type: i0.Output }],
         onPagingSearchEvent: [{ type: i0.Output }],
-        onValueChangeEvent: [{ type: i0.Output }]
+        onValueChangeEvent: [{ type: i0.Output }],
+        selectionNodeChangeEvent: [{ type: i0.Output }],
+        paginatorSearch: [{ type: i0.ViewChild, args: ['paginatorSearch',] }]
     };
 
     var QMSSelectDepartmentTreeModule = /** @class */ (function () {
@@ -31022,6 +31147,16 @@
                 animations$1.animate('0.3s ease-out', animations$1.style({ opacity: 1 }))
             ]),
         ]),
+        animations$1.trigger('inOutAnimation_2', [
+            animations$1.transition(':enter', [
+                animations$1.style({ opacity: 0, transform: 'translateX(-10px)' }),
+                animations$1.animate('0.3s ease-out', animations$1.style({ opacity: 1, transform: 'none' }))
+            ]),
+            animations$1.transition(':leave', [
+                animations$1.style({ opacity: 1, filter: 'blur(5px)' }),
+                animations$1.animate('0.3s ease-out', animations$1.style({ opacity: 0 }))
+            ]),
+        ]),
         animations$1.trigger('rotateAnimation', [
             animations$1.transition(':enter', [
                 animations$1.style({ transform: 'scale(0)  rotate(-180deg)' }),
@@ -31041,44 +31176,37 @@
                 animations$1.style({ maxHeight: '175px', minHeight: '40px', opacity: 1 }),
                 animations$1.animate('0.1s ease-out', animations$1.style({ minHeight: 0, maxHeight: 0, opacity: 0 }))
             ])
+        ]),
+        animations$1.trigger('updateItemAnimation', [
+            animations$1.transition('void => *', [animations$1.animate('0.3s', animations$1.keyframes([
+                    animations$1.style({
+                        boxShadow: 'rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px',
+                        background: '#c8d6ea',
+                        offset: 0
+                    }),
+                    animations$1.style({
+                        boxShadow: "*",
+                        background: '*',
+                        offset: 1
+                    })
+                ]))]),
         ])
     ];
 
-    var QMSSelectDepartmentGlobalService = /** @class */ (function () {
-        function QMSSelectDepartmentGlobalService() {
-            this.getDataTree$ = new rxjs.BehaviorSubject([]);
-            this.searchDepartment$ = new rxjs.Subject();
-        }
-        QMSSelectDepartmentGlobalService.prototype.updateDataTree = function (data) {
-            this.getDataTree$.next(data);
-        };
-        QMSSelectDepartmentGlobalService.prototype.setResultSearch = function (data) {
-            this.searchDepartment$.next(data);
-        };
-        return QMSSelectDepartmentGlobalService;
-    }());
-    QMSSelectDepartmentGlobalService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function QMSSelectDepartmentGlobalService_Factory() { return new QMSSelectDepartmentGlobalService(); }, token: QMSSelectDepartmentGlobalService, providedIn: "root" });
-    QMSSelectDepartmentGlobalService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-
     var ɵ0$1 = {
         clickAction: 'noop'
     };
     var SelectDepartmentComponent = /** @class */ (function () {
-        function SelectDepartmentComponent(selectDepartmentService, cdRef, dialogRef, data, trans) {
+        function SelectDepartmentComponent(cdRef, dialogRef, data, trans) {
             var _this = this;
-            this.selectDepartmentService = selectDepartmentService;
             this.cdRef = cdRef;
             this.dialogRef = dialogRef;
             this.data = data;
             this.trans = trans;
             this.ngUnsubscribe = new rxjs.Subject();
+            this.onPagingEvent = new i0.EventEmitter();
             this.popupData = new SelectDepartmentPopupData();
             this.groupIncludeChild = [];
-            this.singleItem = [];
             this.resultSelected = [];
             this.onSearchEvent = new i0.EventEmitter();
             this.resultSearch = [];
@@ -31089,12 +31217,7 @@
                 }
             });
             // Init popup data
-            this.popupData = ___namespace.cloneDeep(data);
-            this.selectDepartmentService.searchDepartment$
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (result) {
-                _this.treeDepartment.setResultSearch(result);
-            });
+            this.popupData = ___namespace.cloneDeep(this.data);
         }
         SelectDepartmentComponent.prototype.ngAfterViewInit = function () {
             this.cdRef.detectChanges();
@@ -31124,9 +31247,17 @@
             var _this = this;
             this.resultSelected = data.map(function (item) {
                 var _a;
-                return Object.assign(Object.assign({}, item), { tooltip: ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) ? _this.formatString(_this.LANG.TOOLTIP_INCLUDE_CHILD, item.name, item.children.length.toString()) : item.name });
+                return Object.assign(Object.assign({}, item), { tooltip: ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) ? _this.formatString(_this.LANG.TOOLTIP_INCLUDE_SUB_DEPARTMENT, item.name, item.children.length.toString()) : item.name });
             });
         };
+        SelectDepartmentComponent.prototype.generateTootip = function (node) {
+            return node.isGroup ? this.formatString(this.LANG.TOOLTIP_INCLUDE_SUB_DEPARTMENT, node.name, node.children.length.toString()) : node.name;
+        };
+        SelectDepartmentComponent.prototype.updateResultSearch = function (data) {
+            if (!this.treeDepartment)
+                return;
+            this.treeDepartment.setResultSearch(data);
+        };
         SelectDepartmentComponent.prototype.formatString = function () {
             var replacements = [];
             for (var _i = 0; _i < arguments.length; _i++) {
@@ -31144,26 +31275,26 @@
     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 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 [treeData]=\"popupData.treeData\"\r\n          [isSelectOne]=\"popupData.isSelectOne\"\r\n          [enableIncludeChild]=\"popupData.includeChildren && !popupData.isSelectOne\"\r\n          [selectIncludeLabel]=\"popupData.selectIncludeLabel\" [enableTreeSearch]=\"popupData.enableSearch\"\r\n          [enablePagingSearch]=\"popupData.enablePagingSearch\" [activeViewSearch]=\"isActiveViewSearch\"\r\n          [selectedList]=\"popupData.selectedList\" [checkSearchMappingTree]=\"true\"\r\n          (onSearchEvent)=\"onSearchEvent.emit($event)\" (onValueChangeEvent)=\"onResultDepartmentChange($event)\">\r\n        </qms-select-department-tree>\r\n      </div>\r\n    </div>\r\n    <mat-divider class=\"mx-auto\"></mat-divider>\r\n    <div *ngIf=\"!!resultSelected.length\" class=\"line__divider\"></div>\r\n    <div [@heightAnimation] *ngIf=\"!!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          <mat-chip [qms-tool-tip]=\"item?.tooltip || item.name\" position=\"top\" mode=\"dark\"\r\n            *ngFor=\"let item of resultSelected\" 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?.children\">\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        </mat-chip-list>\r\n      </div>\r\n    </div>\r\n    <mat-divider *ngIf=\"!!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 *ngIf=\"!!resultSelected\">\r\n          ({{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 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 [selectedList]=\"popupData.selectedList\"\r\n          [treeData]=\"popupData.treeData\" customClass=\"custom-department-tree\" height=\"45vh\"\r\n          [isSelectOne]=\"popupData.isSelectOne\"\r\n          [enableIncludeChild]=\"popupData.includeChildren && !popupData.isSelectOne\"\r\n          [selectIncludeLabel]=\"popupData.selectIncludeLabel\" [enableTreeSearch]=\"popupData.enableSearch\"\r\n          [enablePagingSearch]=\"popupData.enablePagingSearch\" [activeViewSearch]=\"isActiveViewSearch\"\r\n          [checkSearchMappingTree]=\"true\" (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 *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length\" 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,
                             useValue: ɵ0$1
                         }
                     ],
-                    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:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qms-select-department .panel__item .related__item__inline{max-width:100%}.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}"]
+                    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:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qms-select-department .panel__item .related__item__inline{max-width:100%}.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}"]
                 },] }
     ];
     SelectDepartmentComponent.ctorParameters = function () { return [
-        { type: QMSSelectDepartmentGlobalService },
         { type: i0.ChangeDetectorRef },
         { type: dialog.MatDialogRef },
         { type: SelectDepartmentPopupData, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] },
         { type: TranslateLibraryService }
     ]; };
     SelectDepartmentComponent.propDecorators = {
-        treeDepartment: [{ type: i0.ViewChild, args: ['treeDepartment',] }]
+        treeDepartment: [{ type: i0.ViewChild, args: ['treeDepartment',] }],
+        onPagingEvent: [{ type: i0.Output }]
     };
 
     var QMSSelectDepartmentModule = /** @class */ (function () {
@@ -31174,7 +31305,7 @@
     QMSSelectDepartmentModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [
-                        SelectDepartmentComponent
+                        SelectDepartmentComponent,
                     ],
                     imports: [
                         i1.CommonModule,
@@ -31209,6 +31340,26 @@
                 },] }
     ];
 
+    var QMSSelectDepartmentGlobalService = /** @class */ (function () {
+        function QMSSelectDepartmentGlobalService() {
+            this.getDataTree$ = new rxjs.BehaviorSubject([]);
+            this.searchDepartment$ = new rxjs.Subject();
+        }
+        QMSSelectDepartmentGlobalService.prototype.updateDataTree = function (data) {
+            this.getDataTree$.next(data);
+        };
+        QMSSelectDepartmentGlobalService.prototype.setResultSearch = function (data) {
+            this.searchDepartment$.next(data);
+        };
+        return QMSSelectDepartmentGlobalService;
+    }());
+    QMSSelectDepartmentGlobalService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function QMSSelectDepartmentGlobalService_Factory() { return new QMSSelectDepartmentGlobalService(); }, token: QMSSelectDepartmentGlobalService, providedIn: "root" });
+    QMSSelectDepartmentGlobalService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+
     exports.OptionSelectAccessEnum = void 0;
     (function (OptionSelectAccessEnum) {
         OptionSelectAccessEnum[OptionSelectAccessEnum["PERSON"] = 0] = "PERSON";
@@ -31216,6 +31367,68 @@
         OptionSelectAccessEnum[OptionSelectAccessEnum["DEPARTMENT"] = 2] = "DEPARTMENT";
     })(exports.OptionSelectAccessEnum || (exports.OptionSelectAccessEnum = {}));
 
+    var SelectAccessAnimationTrigger = [
+        animations$1.trigger('inOutAnimation', [
+            animations$1.transition(':enter', [
+                animations$1.style({ opacity: 0 }),
+                animations$1.animate('0.3s ease-out', animations$1.style({ opacity: 1 }))
+            ])
+        ]),
+        animations$1.trigger('inOutAnimation_2', [
+            animations$1.transition(':enter', [
+                animations$1.style({ opacity: 0, transform: 'translateY(-5px)' }),
+                animations$1.animate('0.2s 0.15s ease-in', animations$1.style({ opacity: 1, transform: 'none' }))
+            ]),
+            animations$1.transition(':leave', [
+                animations$1.style({ opacity: 1, filter: 'blur(5px)', transform: 'none' }),
+                animations$1.animate('0.15s ease-out', animations$1.style({ opacity: 0, transform: 'translateX(-10px)' }))
+            ]),
+        ]),
+        animations$1.trigger('listAnimation', [
+            animations$1.transition('* => *', [
+                animations$1.query(':enter', [
+                    animations$1.style({ opacity: 0, transform: 'translateY(-100%)' }),
+                    animations$1.stagger(30, [
+                        animations$1.animate('0.4s cubic-bezier(0.23, 1, 0.320, 1)', animations$1.style({ opacity: 1, transform: 'none' }))
+                    ])
+                ], { optional: true })
+            ])
+        ]),
+        animations$1.trigger('updateItemAnimation', [
+            animations$1.transition('void => *', [animations$1.animate('0.3s', animations$1.keyframes([
+                    animations$1.style({
+                        boxShadow: 'rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px',
+                        background: '#c8d6ea',
+                        offset: 0
+                    }),
+                    animations$1.style({
+                        boxShadow: "*",
+                        background: '*',
+                        offset: 1
+                    })
+                ]))]),
+        ])
+    ];
+
+    var QMSAccessPagingChangeModel = /** @class */ (function (_super) {
+        __extends(QMSAccessPagingChangeModel, _super);
+        function QMSAccessPagingChangeModel() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return QMSAccessPagingChangeModel;
+    }(paginator.PageEvent));
+    var QMSAccessPagingModel = /** @class */ (function (_super) {
+        __extends(QMSAccessPagingModel, _super);
+        function QMSAccessPagingModel() {
+            var _this = _super.call(this) || this;
+            _this.data = [];
+            _this.pageSize = 10;
+            _this.pageIndex = 0;
+            return _this;
+        }
+        return QMSAccessPagingModel;
+    }(paginator.PageEvent));
+
     var QMSSelectAccessResult = /** @class */ (function () {
         function QMSSelectAccessResult() {
             this.userGroups = [];
@@ -31226,11 +31439,11 @@
     }());
     var QMSSelectAccessData = /** @class */ (function () {
         function QMSSelectAccessData() {
-            this.accessUserGroups = [];
             this.accessDepartments = [];
-            this.accessPersons = [];
             this.selectedData = new QMSSelectAccessResult();
             this.selectIncludeChildTreeLabel = '';
+            this.accessPersons = new QMSAccessPagingModel();
+            this.accessUserGroups = new QMSAccessPagingModel();
         }
         return QMSSelectAccessData;
     }());
@@ -31260,25 +31473,6 @@
                 },] }
     ];
 
-    var SelectAccessAnimationTrigger = [
-        animations$1.trigger('inOutAnimation', [
-            animations$1.transition(':enter', [
-                animations$1.style({ opacity: 0 }),
-                animations$1.animate('0.3s ease-out', animations$1.style({ opacity: 1 }))
-            ]),
-        ]),
-        animations$1.trigger('listAnimation', [
-            animations$1.transition('* => *', [
-                animations$1.query(':enter', [
-                    animations$1.style({ opacity: 0, transform: 'translateY(-100%)' }),
-                    animations$1.stagger(25, [
-                        animations$1.animate('0.4s cubic-bezier(0.23, 1, 0.320, 1)', animations$1.style({ opacity: 1, transform: 'none' }))
-                    ])
-                ], { optional: true })
-            ])
-        ])
-    ];
-
     var QMSSelectAccessDialog = /** @class */ (function () {
         function QMSSelectAccessDialog() {
             this.enableSelectPerson = true;
@@ -31295,6 +31489,7 @@
             };
             this.titleDialog = '';
             this.titleResult = '';
+            this.sizeUpdateDefault = '1024px';
         }
         return QMSSelectAccessDialog;
     }());
@@ -31304,7 +31499,6 @@
     };
     var QMSSelectAccessDialogComponent = /** @class */ (function () {
         function QMSSelectAccessDialogComponent(dialogRef, dialogData, translate, _fb, cdRef) {
-            var _this = this;
             this.dialogRef = dialogRef;
             this.dialogData = dialogData;
             this.translate = translate;
@@ -31314,69 +31508,91 @@
             this.optionSelect = new forms.FormControl();
             this.OPTION_ENUM = exports.OptionSelectAccessEnum;
             this.options = [];
+            this._departmentSelected = [];
             this.userGroupForm = new forms.FormControl('');
             this.getLoading$ = new rxjs.BehaviorSubject(false);
             this.onSearchPersonEvent = new i0.EventEmitter();
             this.onSearchPersonFreeTextEvent = new i0.EventEmitter();
             this.onSearchUserGroupEvent = new i0.EventEmitter();
             this.onSearchDepartmentEvent = new i0.EventEmitter();
+            this.onPagingEvent = new i0.EventEmitter();
+            this.onSelectOptionChange$ = new rxjs.Subject();
+            this.departmentResultClone = [];
             /** list filtered by search keyword */
+            this.optionFilterPersonDataGlobal = {
+                departments: [],
+                userGroups: []
+            };
             this.filteredSearchTextBox = {
-                department: new rxjs.ReplaySubject(1),
-                role: new rxjs.ReplaySubject(1),
+                department: new rxjs.BehaviorSubject([]),
+                userGroup: new rxjs.BehaviorSubject([]),
             };
-            this.getPerson$ = new rxjs.BehaviorSubject([]);
-            this.getUserGroup$ = new rxjs.BehaviorSubject([]);
+            this.getPerson$ = new rxjs.BehaviorSubject(new QMSAccessPagingModel());
+            this.getUserGroup$ = new rxjs.BehaviorSubject(new QMSAccessPagingModel());
             this.PAGINATION_SIZE = exports.PaginationSize;
+            this.PAGE_SIZE_OPTION = [5, 10, 15, 20, 25, 100];
             this.resultAccess = new QMSSelectAccessResult();
-            this.currentPaginationConfig = {
-                pageIndex: 0,
-                pageSize: 10,
-                length: 0
-            };
-            this.resultAccess = ___namespace.cloneDeep(this.dialogData.data.selectedData);
-            this.optionSelect.valueChanges
-                .pipe(operators.takeUntil(this.ngUnsubcribe))
-                .subscribe(function (_) {
-                _this.resetPagingConfig();
-            });
-            // Filtered Option select person
-            this.filteredSearchTextBox.role.next(this.dialogData.data.accessUserGroups);
-            this.filteredSearchTextBox.department.next(this.dialogData.data.accessDepartments);
-            this.updatePersonFilter(this.dialogData.data.accessPersons);
-            this.updateUserGroupFilter(this.dialogData.data.accessUserGroups);
+            this.arrSkeleton = new Array(8).fill(0);
+            this.resultAccess = ___namespace.cloneDeep(Object.assign(Object.assign({}, this.dialogData.data.selectedData), { departments: [] }));
+            this._departmentSelected = ___namespace.cloneDeep(this.dialogData.data.selectedData.departments);
         }
+        Object.defineProperty(QMSSelectAccessDialogComponent.prototype, "selectedDepartments", {
+            get: function () {
+                var departmentSelected = [];
+                this._departmentSelected.forEach(function (x) {
+                    var _a;
+                    departmentSelected.push({
+                        id: x.id,
+                        groupId: x.groupId,
+                        isGroup: x.isGroup
+                    });
+                    if (!((_a = x.children) === null || _a === void 0 ? void 0 : _a.length))
+                        return;
+                    departmentSelected.push.apply(departmentSelected, __spreadArray([], __read((x.children.map(function (item) { return ({
+                        id: item.id,
+                        groupId: item.groupId,
+                        isGroup: item.isGroup
+                    }); })))));
+                });
+                return departmentSelected || [];
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(QMSSelectAccessDialogComponent.prototype, "tree", {
             set: function (data) {
-                if (data) {
-                    this.treeDepartment = data;
-                }
+                this.treeDepartment = data;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(QMSSelectAccessDialogComponent.prototype, "personFiltered", {
             get: function () {
+                var _a;
                 var persons = this.getPerson$.value;
                 var ids = this.resultAccess.persons.map(function (x) { return x.id; });
-                persons.forEach(function (x) { return x.selected = ids.includes(x.id); });
-                return persons;
+                (_a = persons.data) === null || _a === void 0 ? void 0 : _a.forEach(function (x) { return x.selected = ids.includes(x.id); });
+                return persons.data || [];
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(QMSSelectAccessDialogComponent.prototype, "userGroupFiltered", {
             get: function () {
+                var _a;
                 var userGroups = this.getUserGroup$.value;
                 var ids = this.resultAccess.userGroups.map(function (x) { return x.id; });
-                userGroups.forEach(function (x) { return x.selected = ids.includes(x.id); });
-                return userGroups;
+                (_a = userGroups.data) === null || _a === void 0 ? void 0 : _a.forEach(function (x) { return x.selected = ids.includes(x.id); });
+                return userGroups.data || [];
             },
             enumerable: false,
             configurable: true
         });
-        QMSSelectAccessDialogComponent.prototype.ngAfterViewInit = function () {
+        ;
+        QMSSelectAccessDialogComponent.prototype.ngAfterContentInit = function () {
             this.cdRef.detectChanges();
+        };
+        QMSSelectAccessDialogComponent.prototype.ngAfterViewInit = function () {
             this.cdRef.detectChanges();
         };
         QMSSelectAccessDialogComponent.prototype.ngOnInit = function () {
@@ -31387,46 +31603,15 @@
                 }
             });
             this._buildOptionSelect();
-            this.buildPersonForm();
-            // Filter person by roles
-            this.personForm.get('roleFilter').valueChanges
-                .pipe(operators.takeUntil(this.ngUnsubcribe), operators.debounceTime(500))
-                .subscribe(function (keyword) {
-                if (!_this.dialogData.data.accessUserGroups) {
-                    return;
-                }
-                if (!keyword) {
-                    _this.filteredSearchTextBox.role.next(_this.dialogData.data.accessUserGroups);
-                    return;
-                }
-                _this.filteredSearchTextBox.role.next(_this.dialogData.data.accessUserGroups.filter(function (role) { return role.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase()); }));
-            });
-            // Filter person by departments
-            this.personForm.get('departmentFilter').valueChanges
-                .pipe(operators.takeUntil(this.ngUnsubcribe))
-                .subscribe(function () {
-                if (!_this.dialogData.data.accessDepartments) {
-                    return;
-                }
-                var search = _this.personForm.get('departmentFilter').value;
-                if (!search) {
-                    _this.filteredSearchTextBox.department.next(_this.dialogData.data.accessDepartments.slice());
-                }
-                else {
-                    search = search.toLowerCase();
-                    _this.filteredSearchTextBox.department.next(_this.dialogData.data.accessDepartments.filter(function (x) { return x.name.toLowerCase().indexOf(search) > -1; }));
-                }
-            });
             this.getLoading$.pipe(operators.takeUntil(this.ngUnsubcribe))
                 .subscribe(function (response) {
                 if (response) {
-                    _this.personForm.disable();
-                    _this.userGroupForm.disable();
-                }
-                else {
-                    _this.personForm.enable();
-                    _this.userGroupForm.enable();
+                    _this.personForm && _this.personForm.disable();
+                    _this.userGroupForm && _this.userGroupForm.disable();
+                    return;
                 }
+                _this.personForm && _this.personForm.enable();
+                _this.userGroupForm && _this.userGroupForm.enable();
             });
         };
         QMSSelectAccessDialogComponent.prototype.ngOnDestroy = function () {
@@ -31454,10 +31639,42 @@
                 }
             }
             if (this.options.length === 1) {
-                this.dialogRef.updateSize('732px');
+                this.dialogRef.updateSize(this.dialogData.sizeUpdateDefault);
                 this.optionSelect.setValue(this.options[0].type);
             }
         };
+        QMSSelectAccessDialogComponent.prototype._filterOptionPersonChange = function () {
+            var _this = this;
+            // Filter person by roles
+            this.personForm.get('userGroupFilter').valueChanges
+                .pipe(operators.takeUntil(this.ngUnsubcribe), operators.debounceTime(500))
+                .subscribe(function (keyword) {
+                if (!_this.optionFilterPersonDataGlobal.userGroups.length) {
+                    return;
+                }
+                if (!keyword) {
+                    _this.filteredSearchTextBox.userGroup.next(_this.optionFilterPersonDataGlobal.userGroups);
+                    return;
+                }
+                var resultFilter = _this.optionFilterPersonDataGlobal.userGroups.filter(function (userGroup) { return userGroup.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase()); });
+                _this.filteredSearchTextBox.userGroup.next(resultFilter);
+            });
+            // Filter person by departments
+            this.personForm.get('departmentFilter').valueChanges
+                .pipe(operators.takeUntil(this.ngUnsubcribe))
+                .subscribe(function () {
+                if (!_this.optionFilterPersonDataGlobal.departments) {
+                    return;
+                }
+                var search = _this.personForm.get('departmentFilter').value;
+                if (!search) {
+                    _this.filteredSearchTextBox.department.next(_this.optionFilterPersonDataGlobal.departments.slice());
+                    return;
+                }
+                search = search.toLowerCase();
+                _this.filteredSearchTextBox.department.next(_this.optionFilterPersonDataGlobal.departments.filter(function (x) { return x.name.toLowerCase().indexOf(search) > -1; }));
+            });
+        };
         QMSSelectAccessDialogComponent.prototype.getResultTabActive = function () {
             var resultObj = {
                 0: this.resultAccess.persons,
@@ -31471,34 +31688,44 @@
         };
         QMSSelectAccessDialogComponent.prototype.buildPersonForm = function () {
             this.personForm = this._fb.group({
-                roleId: new forms.FormControl(''),
-                departmentId: new forms.FormControl(),
-                departmentFilter: new forms.FormControl(''),
-                recursive: new forms.FormControl({ value: false, disabled: true }),
-                keyword: new forms.FormControl(''),
-                roleFilter: new forms.FormControl(''),
-                excludedQuitDepartmentId: true
+                userGroup: [],
+                department: [],
+                departmentFilter: [''],
+                recursive: [{
+                        value: false, disabled: true
+                    }],
+                keyword: [''],
+                userGroupFilter: [''],
+                excludedQuitDepartmentId: [true]
             });
         };
-        QMSSelectAccessDialogComponent.prototype.resetPagingConfig = function () {
-            this.currentPaginationConfig = {
-                pageIndex: 0,
-                pageSize: 10,
-                length: 0
-            };
-        };
         QMSSelectAccessDialogComponent.prototype.onFilterPerson = function () {
+            var _a, _b;
             this.getLoading$.next(true);
-            this.onSearchPersonEvent.emit(this.personForm.value);
-            this.getLoading$.next(true);
+            var formValue = this.personForm.getRawValue();
+            var filterData = {
+                departmentId: (_a = formValue.department) === null || _a === void 0 ? void 0 : _a.id,
+                userGroupId: (_b = formValue.userGroup) === null || _b === void 0 ? void 0 : _b.id,
+                keyword: formValue.keyword,
+                recursive: formValue.recursive
+            };
+            this.onSearchPersonEvent.emit(filterData);
+            this._resetPagingator(this.pagingPerson);
+        };
+        QMSSelectAccessDialogComponent.prototype._resetPagingator = function (paginator) {
+            if (!paginator)
+                return;
+            paginator.changePage(0);
+            paginator.renderDisplayNumberOfpages();
         };
         QMSSelectAccessDialogComponent.prototype.onSearchPersonFreeText = function () {
-            this.getLoading$.next(true);
             this.getLoading$.next(true);
             this.onSearchPersonFreeTextEvent.emit(this.personForm.get('keyword').value);
+            this._resetPagingator(this.pagingPerson);
         };
         QMSSelectAccessDialogComponent.prototype.onFilterUserGroup = function () {
             this.getLoading$.next(true);
+            this._resetPagingator(this.pagingUserGroup);
             this.onSearchUserGroupEvent.emit(this.userGroupForm.value);
         };
         QMSSelectAccessDialogComponent.prototype.onSelectItem = function (type, item) {
@@ -31562,13 +31789,26 @@
                     break;
                 case this.OPTION_ENUM.DEPARTMENT:
                     this.resultAccess.departments.splice(index, 1);
+                    this.departmentResultClone.splice(index, 1);
+                    if (!this.treeDepartment)
+                        return;
                     this.treeDepartment.onRemoveNode(item.id);
+                    break;
                 default:
                     return;
             }
         };
         QMSSelectAccessDialogComponent.prototype.onSelectionTypeChange = function (event) {
-            this.dialogRef.updateSize('732px');
+            switch (event.value) {
+                case exports.OptionSelectAccessEnum.PERSON:
+                    this.buildPersonForm();
+                    this._filterOptionPersonChange();
+                    break;
+            }
+            this.getLoading$.next(true);
+            this.dialogRef.updateSize(this.dialogData.sizeUpdateDefault);
+            this.onSelectOptionChange$.next(event);
+            this.cdRef.detectChanges();
         };
         QMSSelectAccessDialogComponent.prototype.setFormControlValue = function (formControlNames, values) {
             var _this = this;
@@ -31580,9 +31820,9 @@
         QMSSelectAccessDialogComponent.prototype.isCheckAll = function (type) {
             switch (type) {
                 case this.OPTION_ENUM.PERSON:
-                    return !this.dialogData.modeSelectOnePerson && this.personFiltered.length && this.getPaging(this.personFiltered).every(function (x) { return x.selected; });
+                    return !this.dialogData.modeSelectOnePerson && this.personFiltered.length && this.personFiltered.every(function (x) { return x.selected; });
                 case this.OPTION_ENUM.USER_GROUP:
-                    return !this.dialogData.modeSelectOneUserGroup && this.userGroupFiltered.length && this.getPaging(this.userGroupFiltered).every(function (x) { return x.selected; });
+                    return !this.dialogData.modeSelectOneUserGroup && this.userGroupFiltered.length && this.userGroupFiltered.every(function (x) { return x.selected; });
                 default:
                     return false;
             }
@@ -31591,9 +31831,9 @@
             var _a, _b;
             switch (type) {
                 case this.OPTION_ENUM.PERSON:
-                    return !this.dialogData.modeSelectOnePerson && !this.isCheckAll(type) && ((_a = this.getPaging(this.personFiltered)) === null || _a === void 0 ? void 0 : _a.some(function (x) { return x.selected; }));
+                    return !this.dialogData.modeSelectOnePerson && !this.isCheckAll(type) && ((_a = this.personFiltered) === null || _a === void 0 ? void 0 : _a.some(function (x) { return x.selected; }));
                 case this.OPTION_ENUM.USER_GROUP:
-                    return !this.dialogData.modeSelectOneUserGroup && !this.isCheckAll(type) && ((_b = this.getPaging(this.userGroupFiltered)) === null || _b === void 0 ? void 0 : _b.some(function (x) { return x.selected; }));
+                    return !this.dialogData.modeSelectOneUserGroup && !this.isCheckAll(type) && ((_b = this.userGroupFiltered) === null || _b === void 0 ? void 0 : _b.some(function (x) { return x.selected; }));
                 default:
                     return false;
             }
@@ -31606,18 +31846,16 @@
                         $event.checked = false;
                         return;
                     }
-                    var userPaging = this.getPaging(this.personFiltered) || [];
-                    if (!userPaging.length)
+                    if (!this.personFiltered.length)
                         return;
-                    userPaging.forEach(function (x) { return x.selected = $event.checked; });
-                    var idFiltered_1 = userPaging.map(function (x) { return x.id; });
+                    this.personFiltered.forEach(function (x) { return x.selected = $event.checked; });
+                    var idFiltered_1 = this.personFiltered.map(function (x) { return x.id; });
                     if ($event.checked) {
                         var idPersonSelected_1 = this.resultAccess.persons.map(function (x) { return x.id; });
-                        this.resultAccess.persons = __spreadArray(__spreadArray([], __read(this.resultAccess.persons)), __read(userPaging.filter(function (x) { return !idPersonSelected_1.includes(x.id); })));
-                    }
-                    else {
-                        this.resultAccess.persons = this.resultAccess.persons.filter(function (x) { return !idFiltered_1.includes(x.id); });
+                        this.resultAccess.persons = __spreadArray(__spreadArray([], __read(this.resultAccess.persons)), __read(this.personFiltered.filter(function (x) { return !idPersonSelected_1.includes(x.id); })));
+                        return;
                     }
+                    this.resultAccess.persons = this.resultAccess.persons.filter(function (x) { return !idFiltered_1.includes(x.id); });
                     break;
                 }
                 case this.OPTION_ENUM.USER_GROUP: {
@@ -31625,60 +31863,82 @@
                         $event.checked = false;
                         return;
                     }
-                    var userGroupPaging = this.getPaging(this.userGroupFiltered);
+                    var userGroupPaging = this.userGroupFiltered;
                     userGroupPaging.forEach(function (x) { return x.selected = $event.checked; });
                     var idFiltered_2 = userGroupPaging.map(function (x) { return x.id; });
                     if ($event.checked) {
                         var idSelected_1 = this.resultAccess.userGroups.map(function (x) { return x.id; });
                         this.resultAccess.userGroups = __spreadArray(__spreadArray([], __read(this.resultAccess.userGroups)), __read(userGroupPaging.filter(function (x) { return !idSelected_1.includes(x.id); })));
+                        return;
                     }
-                    else {
-                        this.resultAccess.userGroups = this.resultAccess.userGroups.filter(function (x) { return !idFiltered_2.includes(x.id); });
-                    }
+                    this.resultAccess.userGroups = this.resultAccess.userGroups.filter(function (x) { return !idFiltered_2.includes(x.id); });
                     break;
                 }
                 default:
                     return;
             }
         };
+        QMSSelectAccessDialogComponent.prototype.onSelectionNodeDepartmentChange = function (_c) {
+            var _this = this;
+            var added = _c.added, removed = _c.removed, updated = _c.updated;
+            if (added.length) {
+                added.forEach(function (item) {
+                    if (_this.resultAccess.departments.some(function (x) { return x.id === item.id; }))
+                        return;
+                    _this.resultAccess.departments.push(item);
+                });
+            }
+            if (removed.length) {
+                removed.forEach(function (x) {
+                    var index = _this.resultAccess.departments.findIndex(function (item) { return item.id === x.id; });
+                    if (index < 0)
+                        return;
+                    _this.resultAccess.departments.splice(index, 1);
+                });
+            }
+            if (updated.length) {
+                updated.forEach(function (x) {
+                    var index = _this.resultAccess.departments.findIndex(function (item) { return item.id == x.id; });
+                    if (index < 0)
+                        return;
+                    var deparment = _this.resultAccess.departments.find(function (item) { return item.id == x.id; });
+                    if (!!deparment)
+                        deparment.children = x.children;
+                });
+            }
+            this._departmentSelected = ___namespace.cloneDeep(this.resultAccess.departments);
+        };
         QMSSelectAccessDialogComponent.prototype.onScollToNodeTreeDepartment = function (node) {
             this.optionSelect.value === this.OPTION_ENUM.DEPARTMENT && this.treeDepartment.scrollToNode(node.id);
         };
-        QMSSelectAccessDialogComponent.prototype.onRemoveTreeNodeDepartment = function (node) {
-            if (this.optionSelect.value === this.OPTION_ENUM.DEPARTMENT) {
-                this.treeDepartment.onRemoveNode(node.id);
-            }
-            this.resultAccess.departments = this.resultAccess.departments.filter(function (item) { return item.id !== node.id; });
-        };
         QMSSelectAccessDialogComponent.prototype.trackByFn = function (index, item) {
             return index;
         };
         QMSSelectAccessDialogComponent.prototype.updatePersonFilter = function (data) {
-            this.resetPagingConfig();
             this.getPerson$.next(data);
             this.getLoading$.next(false);
-            this.getLoading$.next(false);
         };
         QMSSelectAccessDialogComponent.prototype.updateUserGroupFilter = function (data) {
-            this.resetPagingConfig();
             this.getUserGroup$.next(data);
             this.getLoading$.next(false);
-            this.getLoading$.next(false);
-        };
-        QMSSelectAccessDialogComponent.prototype.onPagingEvent = function (val) {
-            this.currentPaginationConfig = val;
         };
-        QMSSelectAccessDialogComponent.prototype.getPaging = function (source) {
-            if (!source.length)
-                return [];
-            return source.slice(this.currentPaginationConfig.pageIndex * this.currentPaginationConfig.pageSize, (this.currentPaginationConfig.pageIndex * this.currentPaginationConfig.pageSize) + this.currentPaginationConfig.pageSize);
+        QMSSelectAccessDialogComponent.prototype.onPaginatorEvent = function (val, type) {
+            this.getLoading$.next(this.optionSelect.value !== this.OPTION_ENUM.DEPARTMENT);
+            this.onPagingEvent.emit(Object.assign(Object.assign({}, val), { type: type }));
         };
         QMSSelectAccessDialogComponent.prototype.onResultDepartmentChange = function (event) {
-            var _this = this;
-            this.resultAccess.departments = event.map(function (item) {
-                var _a;
-                return Object.assign(Object.assign({}, item), { tooltip: ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) ? _this.formatString(_this.LANG.TOOLTIP_INCLUDE_CHILD, item.name, item.children.length.toString()) : item.name });
-            });
+            // this.resultAccess.departments = event;
+        };
+        QMSSelectAccessDialogComponent.prototype.updateResultSearchDepartment = function (data) {
+            if (data === void 0) { data = new QMSAccessPagingModel(); }
+            if (!this.treeDepartment)
+                return;
+            data = data;
+            this.treeDepartment.setResultSearch(data);
+        };
+        QMSSelectAccessDialogComponent.prototype.generateTootip = function (node) {
+            var _a;
+            return (node === null || node === void 0 ? void 0 : node.isGroup) ? this.formatString(this.LANG.TOOLTIP_INCLUDE_SUB_DEPARTMENT, node.name, (_a = node.children) === null || _a === void 0 ? void 0 : _a.length.toString()) : (node.name + " " + ((node === null || node === void 0 ? void 0 : node.subName) ? "- (" + node.subName + ")" : ''));
         };
         QMSSelectAccessDialogComponent.prototype.formatString = function () {
             var replacements = [];
@@ -31696,12 +31956,29 @@
             var _this = this;
             return Object.keys(this.resultAccess).some(function (key) { var _a; return !!((_a = _this.resultAccess[key]) === null || _a === void 0 ? void 0 : _a.length); });
         };
+        QMSSelectAccessDialogComponent.prototype.updateDepartment = function (data) {
+            if (data === void 0) { data = []; }
+            this.getLoading$.next(false);
+            this.dialogData.data.accessDepartments = [];
+            this.dialogData.data.accessDepartments = ___namespace.cloneDeep(data);
+        };
+        QMSSelectAccessDialogComponent.prototype.updateOptionPersonFilter = function (departmentFilter, userGroupFilter) {
+            if (departmentFilter === void 0) { departmentFilter = []; }
+            if (userGroupFilter === void 0) { userGroupFilter = []; }
+            this.optionFilterPersonDataGlobal.departments = departmentFilter;
+            this.optionFilterPersonDataGlobal.userGroups = userGroupFilter;
+            this.filteredSearchTextBox.department.next(departmentFilter);
+            this.filteredSearchTextBox.userGroup.next(userGroupFilter);
+        };
+        QMSSelectAccessDialogComponent.prototype.setDefaultPageSizeOption = function (data) {
+            this.PAGE_SIZE_OPTION = data;
+        };
         return QMSSelectAccessDialogComponent;
     }());
     QMSSelectAccessDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-select-access-dialog',
-                    template: "<div qms-dialog-container-v2 class=\"select-access-dialog-container\">\r\n  <div qms-dialog-header>\r\n    <div class=\"access-dialog-header mb-2\">\r\n      <span class=\"header-title\">{{dialogData.titleDialog || LANG.SELECT_ACCESS}}</span>\r\n      <button matDialogClose qms-btn-icon>\r\n        <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\r\n      </button>\r\n    </div>\r\n    <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option  w-100\"\r\n      appearance=\"fill\">\r\n      <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\r\n      <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\r\n        disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\r\n\r\n        <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\r\n          {{ LANG[item.displayName] }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n  <div qms-dialog-content class=\"access-dialog-wraper\">\r\n    <!-- Person Access -->\r\n    <div class=\"option-selected-content\">\r\n      <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\r\n        <form [formGroup]=\"personForm\">\r\n          <mat-dialog-content>\r\n            <div class=\"group-filter-person-option\">\r\n              <mat-form-field class=\"w-100 input-option-filter\" qms-form>\r\n                <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\r\n                <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering formControlName=\"roleId\">\r\n                  <mat-option>\r\n                    <ngx-mat-select-search formControlName=\"roleFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\r\n                      noEntriesFoundLabel=\"\">\r\n                    </ngx-mat-select-search>\r\n                  </mat-option>\r\n                  <mat-option *ngFor=\"let item of filteredSearchTextBox.role | async\" [value]=\"item.id\">\r\n                    {{ item.name }}\r\n                  </mat-option>\r\n                </mat-select>\r\n                <!-- <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\" diameter=\"20\"></mat-progress-spinner> -->\r\n                <span [@inOutAnimation] (click)=\"personForm.get('roleId').setValue('')\" class=\"pointer \" matSuffix\r\n                  aria-label=\"Clear\" *ngIf=\"personForm.get('roleId').value && !getLoading$.value\">\r\n                  <mat-icon>close</mat-icon>\r\n                </span>\r\n              </mat-form-field>\r\n\r\n              <mat-form-field class=\"w-100 input-select-option\" qms-form qms-select-input>\r\n                <mat-label>{{LANG.DEPARTMENT_UNIT}}</mat-label>\r\n                <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\r\n                  formControlName=\"departmentId\">\r\n                  <mat-option>\r\n                    <ngx-mat-select-search formControlName=\"departmentFilter\" [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\"\r\n                      noEntriesFoundLabel=\"\">\r\n                    </ngx-mat-select-search>\r\n                  </mat-option>\r\n                  <mat-option *ngFor=\"let item of filteredSearchTextBox.department | async\" [value]=\"item.id\">\r\n                    {{item.name}}\r\n                  </mat-option>\r\n                </mat-select>\r\n                <span (click)=\"setFormControlValue(['recursive','departmentId'], [false,''])\" [@inOutAnimation]\r\n                  class=\"pointer\" matSuffix aria-label=\"Clear\"\r\n                  *ngIf=\"personForm.get('departmentId').value && !getLoading$.value\">\r\n                  <mat-icon>close</mat-icon>\r\n                </span>\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <mat-slide-toggle class=\"w-100 slide-toggle\" formControlName=\"recursive\"\r\n              [disabled]=\"!this.personForm.controls['departmentId'].value\" color=\"default\" qms-group-options>\r\n              <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\r\n            </mat-slide-toggle>\r\n\r\n            <mat-form-field class=\"w-100\" appearance=\"fill\" qms-form qms-search-field>\r\n              <input matInput appearance=\"off\" [placeholder]=\"LANG.SEARCH_WITH_NAME\" formControlName=\"keyword\"\r\n                type=\"text\" autocomplete=\"off\" />\r\n              <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\r\n                (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\r\n                <mat-icon>search</mat-icon>\r\n              </button>\r\n              <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\r\n                diameter=\"20\"></mat-progress-spinner>\r\n              <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\r\n                class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\r\n                aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\r\n                <button qms-btn-icon color=\"light\">\r\n                  <mat-icon>close</mat-icon>\r\n                </button>\r\n              </span>\r\n            </mat-form-field>\r\n            <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\r\n              {{LANG.FILTER}}\r\n            </button>\r\n          </mat-dialog-content>\r\n\r\n          <mat-dialog-content class=\"items-list\">\r\n            <div qms-scrollbar>\r\n              <div class=\"item\">\r\n                <mat-checkbox [@inOutAnimation] *ngIf=\"!getLoading$.value\"\r\n                  [disabled]=\"!personFiltered.length || dialogData.modeSelectOnePerson\" #checkPerson\r\n                  class=\"w-100 mb-1 checkbox-all\"\r\n                  (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\r\n                  [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\r\n                  color=\"default\" qms-group-options>\r\n                  <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} </span>\r\n                  <span>(<b>{{getPaging(personFiltered).length}}</b>)</span>\r\n                </mat-checkbox>\r\n              </div>\r\n              <mat-divider class=\"mx-auto\"></mat-divider>\r\n              <ng-container *ngIf=\"getLoading$.value; then loading\">\r\n              </ng-container>\r\n              <div [@inOutAnimation] *ngIf=\"getPaging(personFiltered).length && !getLoading$.value\" [@listAnimation]\r\n                class=\"item-list-wrapper\">\r\n                <div class=\"item  mt-1\" [@inOutAnimation]\r\n                  *ngFor=\"let employee of getPaging(personFiltered); trackBy: trackByFn\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\r\n                    [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n              <div [@inOutAnimation] *ngIf=\"!getPaging(personFiltered).length && !getLoading$.value\"\r\n                class=\"item-list-wrapper no-result\">\r\n                <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n              </div>\r\n              <mat-divider class=\"mx-auto\"></mat-divider>\r\n              <qms-paginator class=\"my-1\" *ngIf=\"personFiltered.length > 10 && !getLoading$.value\"\r\n                [length]=\"personFiltered.length\" [numHidden]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 100]\"\r\n                (page)='onPagingEvent($event)' [size]='PAGINATION_SIZE.medium'>\r\n              </qms-paginator>\r\n            </div>\r\n          </mat-dialog-content>\r\n        </form>\r\n      </ng-container>\r\n\r\n      <!-- UserGroup Access -->\r\n      <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\r\n        <form>\r\n          <mat-dialog-content>\r\n            <mat-form-field class=\"w-100\" qms-form qms-search-field>\r\n              <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\" placeholder=\"User group\" />\r\n              <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" (click)=\"onFilterUserGroup()\" qms-btn-icon\r\n                color=\"light\" matSuffix>\r\n                <mat-icon>search</mat-icon>\r\n              </button>\r\n              <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\r\n                diameter=\"20\"></mat-progress-spinner>\r\n              <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value && !getLoading$.value\" matSuffix qms-input-clear>\r\n                <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\r\n                  <mat-icon>close</mat-icon>\r\n                </button>\r\n              </div>\r\n            </mat-form-field>\r\n          </mat-dialog-content>\r\n          <mat-dialog-content class=\"items-list\">\r\n            <div qms-scrollbar>\r\n              <div class=\"item\">\r\n                <mat-checkbox [@inOutAnimation] *ngIf=\"!getLoading$.value\"\r\n                  [disabled]=\"!userGroupFiltered.length || dialogData.modeSelectOneUserGroup\" #checkUserGroup\r\n                  class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\r\n                  [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\r\n                  (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\r\n                  qms-group-options>\r\n                  <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n                  <span>(<b>{{getPaging(userGroupFiltered).length}}</b>)</span>\r\n                </mat-checkbox>\r\n              </div>\r\n              <mat-divider class=\"mx-auto\"></mat-divider>\r\n              <ng-container *ngIf=\"getLoading$.value;then loading\">\r\n              </ng-container>\r\n              <div *ngIf=\"getPaging(userGroupFiltered).length && !getLoading$.value\" [@listAnimation]\r\n                class=\"item-list-wrapper\">\r\n                <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of getPaging(userGroupFiltered)\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\r\n                    [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n              <div [@inOutAnimation] *ngIf=\"!getPaging(userGroupFiltered).length && !getLoading$.value\"\r\n                class=\"item-list-wrapper no-result\">\r\n                <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n              </div>\r\n              <mat-divider class=\"mx-auto\"></mat-divider>\r\n              <qms-paginator class=\"my-1\" *ngIf=\"userGroupFiltered.length > 10 && !getLoading$.value\"\r\n                [length]=\"userGroupFiltered.length\" [numHidden]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 100]\"\r\n                (page)='onPagingEvent($event)' [size]='PAGINATION_SIZE.medium'>\r\n              </qms-paginator>\r\n            </div>\r\n          </mat-dialog-content>\r\n        </form>\r\n      </ng-container>\r\n\r\n      <!-- Department Access -->\r\n      <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT\" class=\"person-access\">\r\n        <qms-select-department-tree #treeDepartment [treeData]=\"dialogData.data.accessDepartments\"\r\n          [selectIncludeLabel]=\"dialogData.treeDepartmentConfig.selectIncludeChildLabel\"\r\n          [enableIncludeChild]=\"dialogData.treeDepartmentConfig.enableIncludeChild\"\r\n          [enableTreeSearch]=\"dialogData.treeDepartmentConfig.enableTreeSearch\"\r\n          [isSelectOne]=\"dialogData.modeSelectOneDepartment\" [selectedList]=\"resultAccess.departments\"\r\n          (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\r\n          (onValueChangeEvent)=\"onResultDepartmentChange($event)\">\r\n        </qms-select-department-tree>\r\n      </ng-container>\r\n    </div>\r\n    <mat-divider *ngIf=\"optionSelect.value !== null\" class=\"mx-auto\"></mat-divider>\r\n    <div [@inOutAnimation]\r\n      *ngIf=\"(options.length === 1 && hasItemSelected()) || (options.length > 1 && optionSelect.value !== null)\"\r\n      class=\"header-title my-1\">\r\n      {{\r\n      dialogData.titleResult || LANG.RESULTS}}\r\n      <span *ngIf=\"options.length === 1 && hasItemSelected()\">\r\n        ({{getResultTabActive().length}})\r\n      </span>\r\n    </div>\r\n    <div *ngIf=\"optionSelect.value !== null\" class=\"result-selected-container\">\r\n      <!-- Result Person  -->\r\n      <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\r\n        [ngTemplateOutlet]=\"options.length == 1 ? listChip : viewResultCollapse\"\r\n        [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\r\n      </ng-container>\r\n      <!-- Result User group -->\r\n      <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\r\n        [ngTemplateOutlet]=\"options.length == 1 ? listChip : viewResultCollapse\"\r\n        [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\r\n      </ng-container>\r\n      <!-- Result Department -->\r\n      <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\r\n        [ngTemplateOutlet]=\"options.length == 1 ? listChip : viewResultCollapse\"\r\n        [ngTemplateOutletContext]=\"{data:resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\r\n      </ng-container>\r\n    </div>\r\n    <mat-divider class=\"mx-auto\"></mat-divider>\r\n  </div>\r\n  <div qms-dialog-footer class=\"confirm__button__groups\" [class.none-option]=\"optionSelect.value === null\">\r\n    <button *ngIf=\"optionSelect.value !== null\" [disabled]=\"!hasItemSelected()\" class=\"btn-add\"\r\n      [class.qms-btn-disabled]=\"!hasItemSelected()\" [mat-dialog-close]=\"resultAccess\" qms-btn>\r\n      <span>{{LANG.ADD}}</span>\r\n    </button>\r\n    <button qms-btn-text mat-dialog-close>\r\n      {{LANG.CANCEL}}\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<!-- Template -->\r\n<ng-template #noResult>\r\n  <svg width=\"89\" height=\"88\" 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  </svg>\r\n</ng-template>\r\n\r\n<!-- Template list chip -->\r\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\r\n  <mat-chip-list class=\"panel__item qms-scrollbar\">\r\n    <mat-chip class=\"chip-item-result\" [qms-tool-tip]=\"item?.tooltip || item.name\" position=\"top\" mode=\"dark\"\r\n      *ngFor=\"let item of data; let i = index\" qms-chip [removable]=\"true\">\r\n      <span qms-chip-body>\r\n        <span class=\"text-label\">\r\n          {{item.name}}\r\n          <span *ngIf=\"item.subName\">({{ item.subName }})</span>\r\n        </span>\r\n        <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children\">\r\n          {{item.children.length}}/{{item.childCount}}\r\n        </span>\r\n      </span>\r\n      <mat-icon (click)=\"onRemoveChip(type,item, i)\" class=\"remove-chip-icon\">cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-list>\r\n</ng-template>\r\n\r\n<!-- Template result with collapse -->\r\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\r\n  <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\r\n    <mat-expansion-panel-header>\r\n      <div class=\"title-content\">\r\n        <div class=\"qms-list-text\">\r\n          <div qms-line color=\"default-subtitle\">{{title}}\r\n            <span class=\"fw-600\">\r\n              ({{data.length}})\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </mat-expansion-panel-header>\r\n    <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\r\n    </ng-container>\r\n  </mat-expansion-panel>\r\n</ng-template>\r\n\r\n<!-- Template row without checkbox -->\r\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\r\n  <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\r\n    <div class=\"item-content\">\r\n      <div class=\"text-label\">\r\n        <span class=\"text-label label-item fs-14 \">\r\n          {{ item.name }}\r\n        </span>\r\n        <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\r\n      </div>\r\n      <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\r\n    </div>\r\n    <div class=\"item-state\">\r\n      <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Template checkbox  -->\r\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\r\n  <mat-checkbox [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\" class=\"w-100\" color=\"default\"\r\n    qms-group-options>\r\n    <div class=\"text-label\">\r\n      <span class=\"text-label label-item fs-14 \">\r\n        {{ item.name }}\r\n      </span>\r\n      <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\r\n    </div>\r\n    <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\r\n  </mat-checkbox>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div class=\"loading-container\">\r\n    <div class=\"loader\" *ngFor=\"let item of [1,1,1,1]\">\r\n      <div class=\"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",
+                    template: "<div qms-dialog-container-v2 class=\"select-access-dialog-container\">\r\n  <div qms-dialog-header>\r\n    <div class=\"access-dialog-header mb-2\">\r\n      <span class=\"header-title\">{{dialogData.titleDialog || LANG.SELECT_ACCESS}}</span>\r\n      <button matDialogClose qms-btn-icon>\r\n        <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div [class.active]=\"optionSelect.value !== null\" qms-dialog-content class=\"qms-dialog-content\">\r\n    <div class=\"access-dialog-wraper\">\r\n      <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option  w-100\"\r\n        appearance=\"fill\">\r\n        <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\r\n        <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\r\n          disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\r\n\r\n          <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\r\n            {{ LANG[item.displayName] }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <div class=\"body-dialog-container\">\r\n        <!-- Person Access -->\r\n        <div class=\"option-selected-content\">\r\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\r\n            <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\r\n              <mat-dialog-content>\r\n                <div class=\"group-filter-person-option\">\r\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\r\n                    class=\"w-100\" appearance=\"fill\">\r\n                    <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\r\n                    <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\r\n                      disableOptionCentering>\r\n                      <mat-select-trigger>\r\n                        {{personForm.controls['userGroup'].value?.name || ''}}\r\n                      </mat-select-trigger>\r\n                      <mat-option>\r\n                        <ngx-mat-select-search formControlName=\"userGroupFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\r\n                          noEntriesFoundLabel=\"\">\r\n                        </ngx-mat-select-search>\r\n                      </mat-option>\r\n                      <mat-option mode=\"dark\" class=\"opt-check-icon\"\r\n                        *ngFor=\"let item of filteredSearchTextBox.userGroup.value\" [value]=\"item\">\r\n                        <span qms-elipsify position=\"top\" mode=\"dark\" class=\"text-option-content\">{{ item.name }}</span>\r\n                        <mat-icon class=\"check-icon\"\r\n                          *ngIf=\"personForm.controls['userGroup'].value?.id == item.id\">check</mat-icon>\r\n                      </mat-option>\r\n                    </mat-select>\r\n                    <span [@inOutAnimation] (click)=\"personForm.get('userGroup').setValue('')\" class=\"pointer \"\r\n                      matSuffix aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\r\n                      <mat-icon>close</mat-icon>\r\n                    </span>\r\n                  </mat-form-field>\r\n                  <!-- input field department filter person -->\r\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\r\n                    class=\"w-100 input-select-option\" qms-form qms-select-input>\r\n                    <mat-label>{{LANG.DEPARTMENT_UNIT}}</mat-label>\r\n                    <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\r\n                      formControlName=\"department\">\r\n                      <mat-select-trigger>\r\n                        {{personForm.controls['department'].value?.name || ''}}\r\n                      </mat-select-trigger>\r\n                      <mat-option>\r\n                        <ngx-mat-select-search formControlName=\"departmentFilter\"\r\n                          [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\" noEntriesFoundLabel=\"\">\r\n                        </ngx-mat-select-search>\r\n                      </mat-option>\r\n                      <mat-option class=\"opt-check-icon\" *ngFor=\"let item of filteredSearchTextBox.department.value\"\r\n                        [value]=\"item\">\r\n                        <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-option-content\">{{ item.name }}</span>\r\n                        <mat-icon class=\"check-icon\"\r\n                          *ngIf=\"personForm.controls['department'].value?.id == item.id\">check</mat-icon>\r\n                      </mat-option>\r\n                    </mat-select>\r\n                    <span (click)=\"setFormControlValue(['recursive','department'], [false,''])\" [@inOutAnimation]\r\n                      class=\"pointer\" matSuffix aria-label=\"Clear\"\r\n                      *ngIf=\"personForm.get('department').value && !getLoading$.value\">\r\n                      <mat-icon>close</mat-icon>\r\n                    </span>\r\n                  </mat-form-field>\r\n                </div>\r\n\r\n                <mat-slide-toggle [@inOutAnimation] *ngIf=\"personForm.controls['department'].value\"\r\n                  class=\"w-100 slide-toggle\" formControlName=\"recursive\" color=\"default\" qms-group-options>\r\n                  <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\r\n                </mat-slide-toggle>\r\n\r\n                <mat-form-field class=\"w-100\" appearance=\"fill\" qms-form qms-search-field>\r\n                  <input matInput appearance=\"off\" [placeholder]=\"LANG.SEARCH_WITH_NAME\" formControlName=\"keyword\"\r\n                    type=\"text\" autocomplete=\"off\" />\r\n                  <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\r\n                    (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\r\n                    <mat-icon>search</mat-icon>\r\n                  </button>\r\n                  <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\r\n                    diameter=\"20\"></mat-progress-spinner>\r\n                  <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\r\n                    class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\r\n                    aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\r\n                    <button qms-btn-icon color=\"light\">\r\n                      <mat-icon>close</mat-icon>\r\n                    </button>\r\n                  </span>\r\n                </mat-form-field>\r\n                <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\r\n                  {{LANG.FILTER}}\r\n                </button>\r\n              </mat-dialog-content>\r\n\r\n              <mat-dialog-content class=\"items-list\">\r\n                <div qms-scrollbar>\r\n                  <div class=\"item\">\r\n                    <mat-checkbox [@inOutAnimation]\r\n                      *ngIf=\"!getLoading$.value && personFiltered.length && !dialogData.modeSelectOnePerson\"\r\n                      #checkPerson class=\"w-100 mb-1 checkbox-all\"\r\n                      (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\r\n                      [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\r\n                      color=\"default\" qms-group-options>\r\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} </span>\r\n                      <span>(<b>{{personFiltered.length}}</b>)</span>\r\n                    </mat-checkbox>\r\n                  </div>\r\n                  <mat-divider class=\"mx-auto\"></mat-divider>\r\n                  <ng-container *ngIf=\"getLoading$.value; then loading\">\r\n                  </ng-container>\r\n                  <div [@inOutAnimation] *ngIf=\"personFiltered.length && !getLoading$.value\" [@listAnimation]\r\n                    class=\"item-list-wrapper\">\r\n                    <div class=\"item  mt-1\" [@inOutAnimation]\r\n                      *ngFor=\"let employee of personFiltered; trackBy: trackByFn\">\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\r\n                        [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                  <div [@inOutAnimation] *ngIf=\"!personFiltered.length && !getLoading$.value\"\r\n                    class=\"item-list-wrapper no-result\">\r\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n                  </div>\r\n                  <mat-divider class=\"mx-auto\"></mat-divider>\r\n                  <qms-paginator #pagingPerson class=\"my-1\" *ngIf=\"getPerson$.value.length > 10\"\r\n                    [length]=\"getPerson$.value.length\" [numHidden]=\"0\" [pageSize]=\"getPerson$.value.pageSize\"\r\n                    [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)'\r\n                    [size]='PAGINATION_SIZE.medium'>\r\n                  </qms-paginator>\r\n                </div>\r\n              </mat-dialog-content>\r\n            </form>\r\n          </ng-container>\r\n\r\n          <!-- UserGroup Access -->\r\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\r\n            <form (submit)=\"onFilterUserGroup()\">\r\n              <mat-dialog-content>\r\n                <mat-form-field class=\"w-100\" qms-form qms-search-field>\r\n                  <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\r\n                    placeholder=\"User group\" />\r\n                  <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\r\n                    matSuffix>\r\n                    <mat-icon>search</mat-icon>\r\n                  </button>\r\n                  <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\r\n                    diameter=\"20\"></mat-progress-spinner>\r\n                  <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value && !getLoading$.value\" matSuffix qms-input-clear>\r\n                    <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\r\n                      <mat-icon>close</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </mat-form-field>\r\n              </mat-dialog-content>\r\n              <mat-dialog-content class=\"items-list\">\r\n                <div qms-scrollbar>\r\n                  <div class=\"item\">\r\n                    <mat-checkbox [@inOutAnimation]\r\n                      *ngIf=\"!getLoading$.value && (userGroupFiltered.length && !dialogData.modeSelectOneUserGroup)\"\r\n                      #checkUserGroup class=\"w-100 checkbox-all mb-1\" color=\"default\"\r\n                      [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\r\n                      [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\r\n                      (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\r\n                      qms-group-options>\r\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n                      <span>(<b>{{userGroupFiltered.length}}</b>)</span>\r\n                    </mat-checkbox>\r\n                  </div>\r\n                  <mat-divider class=\"mx-auto\"></mat-divider>\r\n                  <ng-container *ngIf=\"getLoading$.value;then loading\">\r\n                  </ng-container>\r\n                  <div *ngIf=\"userGroupFiltered.length && !getLoading$.value\" [@listAnimation]\r\n                    class=\"item-list-wrapper\">\r\n                    <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of userGroupFiltered\">\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ? itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\r\n                        [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                  <div [@inOutAnimation] *ngIf=\"!userGroupFiltered.length && !getLoading$.value\"\r\n                    class=\"item-list-wrapper no-result\">\r\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n                  </div>\r\n                  <mat-divider class=\"mx-auto\"></mat-divider>\r\n                  <qms-paginator #pagingUserGroup class=\"my-1\" *ngIf=\"getUserGroup$.value.length > 10 \"\r\n                    [length]=\"getUserGroup$.value.length\" [numHidden]=\"0\" [pageSize]=\"getUserGroup$.value.pageSize\"\r\n                    [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPaginatorEvent($event, OPTION_ENUM.USER_GROUP)'\r\n                    [size]='PAGINATION_SIZE.medium'>\r\n                  </qms-paginator>\r\n                </div>\r\n              </mat-dialog-content>\r\n            </form>\r\n          </ng-container>\r\n\r\n          <!-- Department Access -->\r\n          <ng-container\r\n            *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && getLoading$.value; then loading\"></ng-container>\r\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && !getLoading$.value\"\r\n            class=\"person-access\">\r\n            <qms-select-department-tree #tree [height]=\"'60vh'\" [treeData]=\"this.dialogData.data.accessDepartments\"\r\n              [customClass]=\"'access-department'\" [rowsSkeleton]=\"9\"\r\n              [selectIncludeLabel]=\"dialogData.treeDepartmentConfig.selectIncludeChildLabel\"\r\n              [enableIncludeChild]=\"dialogData.treeDepartmentConfig.enableIncludeChild\"\r\n              [enableTreeSearch]=\"dialogData.treeDepartmentConfig.enableTreeSearch\" [enablePagingSearch]=\"true\"\r\n              [isSelectOne]=\"dialogData.modeSelectOneDepartment\" [selectedList]=\"selectedDepartments\"\r\n              (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\r\n              (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\r\n              (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\r\n              (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\r\n            </qms-select-department-tree>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"optionSelect.value !== null\" class=\"result-wrapper\">\r\n      <div class=\"result-selected-container\">\r\n        <div [@inOutAnimation] *ngIf=\"(options.length === 1) || (options.length > 1 && optionSelect.value !== null)\"\r\n          class=\"header-title result-header\">\r\n          <span>\r\n            {{\r\n            dialogData.titleResult || LANG.RESULTS}}\r\n            <span *ngIf=\"options.length === 1 && hasItemSelected()\">\r\n              ({{getResultTabActive().length}})\r\n            </span>\r\n          </span>\r\n        </div>\r\n        <div class=\"result-body\">\r\n          <!-- Result Person  -->\r\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\r\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\r\n            [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\r\n          </ng-container>\r\n          <!-- Result User group -->\r\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\r\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\r\n            [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\r\n          </ng-container>\r\n          <!-- Result Department -->\r\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\r\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\r\n            [ngTemplateOutletContext]=\"{data: resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <mat-divider class=\"mx-auto\"></mat-divider>\r\n  <div qms-dialog-footer class=\"confirm__button__groups\" [class.none-option]=\"optionSelect.value === null\">\r\n    <button *ngIf=\"optionSelect.value !== null\" [disabled]=\"!hasItemSelected()\" class=\"btn-add\"\r\n      [class.qms-btn-disabled]=\"!hasItemSelected()\" [mat-dialog-close]=\"resultAccess\" qms-btn>\r\n      <span>{{LANG.ADD}}</span>\r\n    </button>\r\n    <button qms-btn-text mat-dialog-close>\r\n      {{LANG.CANCEL}}\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<!-- Template -->\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 list chip -->\r\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\r\n  <mat-chip-list [@inOutAnimation] *ngIf=\"data?.length\" lass=\"panel__item qms-scrollbar\">\r\n    <div [@inOutAnimation_2] *ngFor=\"let item of data; let i = index\">\r\n      <mat-chip (click)=\"onScollToNodeTreeDepartment(item)\" [@updateItemAnimation]\r\n        *qmsContentChanges=\"item.children?.length\" class=\"chip-item-result\" [qms-tool-tip]=\"generateTootip(item)\"\r\n        position=\"top\" mode=\"dark\" qms-chip [removable]=\"true\">\r\n        <span qms-chip-body>\r\n          <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-label\">\r\n            {{item.name}}\r\n            <span *ngIf=\"item.subName\">({{ item.subName }})</span>\r\n          </span>\r\n          <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children && item?.isGroup\">\r\n            {{item.children.length}}/{{item.childCount}}\r\n          </span>\r\n        </span>\r\n        <mat-icon (click)=\"onRemoveChip(type,item, i)\" class=\"remove-chip-icon\">cancel</mat-icon>\r\n      </mat-chip>\r\n    </div>\r\n  </mat-chip-list>\r\n</ng-template>\r\n\r\n<!-- Template result with collapse -->\r\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\r\n  <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\r\n    <mat-expansion-panel-header>\r\n      <div class=\"title-content\">\r\n        <div class=\"qms-list-text\">\r\n          <div qms-line color=\"default-subtitle\">{{title}}\r\n            <span class=\"fw-600\">\r\n              ({{data?.length}})\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </mat-expansion-panel-header>\r\n    <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\r\n    </ng-container>\r\n  </mat-expansion-panel>\r\n</ng-template>\r\n\r\n<!-- Template row without checkbox -->\r\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\r\n  <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\r\n    <div class=\"item-content\">\r\n      <div class=\"text-label\">\r\n        <span class=\"text-label label-item fs-14 \">\r\n          {{ item.name }}\r\n        </span>\r\n        <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\r\n      </div>\r\n      <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\r\n    </div>\r\n    <div class=\"item-state\">\r\n      <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Template checkbox  -->\r\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\r\n  <mat-checkbox [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\" class=\"w-100\" color=\"default\"\r\n    qms-group-options>\r\n    <div class=\"text-label\">\r\n      <span class=\"text-label label-item fs-14 \">\r\n        {{ item.name }}\r\n      </span>\r\n      <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\r\n    </div>\r\n    <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\r\n  </mat-checkbox>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div class=\"loading-container\">\r\n    <div class=\"loader\" *ngFor=\"let item of arrSkeleton\">\r\n      <div class=\"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: [SelectAccessAnimationTrigger],
                     providers: [
                         {
@@ -31710,7 +31987,7 @@
                         }
                     ],
                     encapsulation: i0.ViewEncapsulation.None,
-                    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}.select-access-dialog-container{font-family:Open Sans}.select-access-dialog-container .mat-expansion-panel .mat-expansion-panel-body{padding-top:0!important}.select-access-dialog-container .mat-expansion-panel-header{font-size:12px!important;font-weight:800!important}.select-access-dialog-container .w-100{width:100%}.select-access-dialog-container .h-100{height:100%}.select-access-dialog-container .pointer{cursor:pointer}.select-access-dialog-container .fw-600{font-weight:600}.select-access-dialog-container .label-item{font-weight:600;color:var(--ws-text-primary)}.select-access-dialog-container .sub-label{color:var(--ws-text-secondary)}.select-access-dialog-container .fs-14{font-size:14px}.select-access-dialog-container .fs-12{font-size:12px}.select-access-dialog-container .color-primary{color:var(--primary-light)!important}.select-access-dialog-container .header-title{font-weight:600;color:var(--ws-text-primary);font-size:16px}.select-access-dialog-container .chip-item-result{max-width:250px}.select-access-dialog-container .chip-item-result.item-department .qms-chip-body{display:flex;justify-content:center;align-items:center}.select-access-dialog-container .remove-chip-icon{color:rgba(0,0,0,.3);cursor:pointer}.select-access-dialog-container .remove-chip-icon:hover{color:rgba(0,0,0,.7)}.select-access-dialog-container .mat-form-field-wrapper{padding-bottom:5px!important}.select-access-dialog-container .mat-expansion-panel{border-radius:unset!important}.select-access-dialog-container .mat-expansion-panel-header:not([aria-disabled=true]){background:unset}.select-access-dialog-container .mat-expansion-panel.mat-expanded .mat-expansion-panel-header{background:#e5eefb}.select-access-dialog-container .mat-expansion-panel.mat-expanded .mat-expansion-panel-header .qms-line{color:var(--primary-light)!important}.select-access-dialog-container .access-dialog-header{display:flex;justify-content:space-between;align-items:center}.select-access-dialog-container .access-dialog-wraper{width:100%}.select-access-dialog-container .access-dialog-wraper .field-select-option .mat-form-field-wrapper{padding-bottom:16px!important}.select-access-dialog-container .access-dialog-wraper .field-select-option .mat-form-field-underline{bottom:16px!important}.select-access-dialog-container .mat-chip-list-wrapper{margin:unset!important}.select-access-dialog-container .result-selected-container{max-height:175px;overflow-y:auto;padding-right:4px}.select-access-dialog-container .item-list-wrapper{max-height:28vh;padding:4px 4px 4px 0;overflow-y:auto}.select-access-dialog-container .item-list-wrapper.no-result{height:28vh;display:flex;justify-content:center;align-items:center}.select-access-dialog-container .item-list-wrapper .item{min-height:40px}.select-access-dialog-container .item-list-wrapper .item-without-checkbox{min-height:45px;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:4px;transition:background .3s ease}.select-access-dialog-container .item-list-wrapper .item-without-checkbox.active{background:var(--primary-light-12-opacity)}.select-access-dialog-container .item-list-wrapper .item-without-checkbox:hover{background:var(--primary-light-6-opacity)}.select-access-dialog-container .item-list-wrapper .item-without-checkbox .mat-icon{color:var(--primary-light)!important}.select-access-dialog-container .confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.select-access-dialog-container .option-selected-content .group-filter-person-option{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;grid-gap:8px;gap:8px}.select-access-dialog-container span.chip-item__content_name{display:inline-block;max-width:175px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-access-dialog-container span.chip-item-children__count{font-size:.75rem;color:rgba(0,0,0,.5);font-weight:600}.select-access-dialog-container .mat-slide-toggle.qms-group-options{padding:unset!important}.select-access-dialog-container .input-option-filter .mat-form-field-wrapper{padding-bottom:8px!important}.select-access-dialog-container .input-option-filter .mat-form-field-underline{bottom:8px!important}.select-access-dialog-container .slide-toggle{margin-bottom:8px}.select-access-dialog-container .confirm__button__groups.none-option{margin-top:85px}.select-access-dialog-container .btn-icon-clear{position:relative;padding:0 1rem}.select-access-dialog-container .btn-icon-clear .qms-btn-icon{margin-right:unset!important}.select-access-dialog-container .btn-icon-clear:after{position:absolute;content:\"\";left:0;top:0;height:100%;width:1px;background:rgba(0,0,0,.3)}.select-access-dialog-container .qms-paginator .mat-icon{display:flex;align-items:center;justify-content:center}.select-access-dialog-container .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.select-access-dialog-container .qms-paginator .mat-paginator-container{min-height:40px}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-total-result{margin-bottom:2px;margin-right:12px;height:30px}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:600;font-size:13px;color:rgba(0,0,0,.8)}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-paginator-range-actions{margin-bottom:0;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.select-access-dialog-container .qms-paginator>.qms-btn-icon-wrapper{width:30px;height:30px;display:flex;justify-content:center;align-items:center}.select-access-dialog-container .qms-paginator .qms-paginator-page-size{margin-right:12px}.select-access-dialog-container .qms-paginator .qms-paginator-page-size>.qms-pagesize-label{display:none}.select-access-dialog-container .qms-paginator .qms-paginator-page-size>.qms-form-page-size .mat-form-field-flex{width:60px!important;height:30px;display:flex;align-items:center;padding:0 4px}.select-access-dialog-container .qms-paginator .qms-paginator-page-size>.qms-form-page-size .mat-form-field-flex .mat-form-field-infix{height:30px}.select-access-dialog-container .qms-paginator .mat-form-field.qms-form .mat-select-min-line,.select-access-dialog-container .qms-paginator .mat-form-field.qms-form mat-select-trigger{font-size:14px}.select-access-dialog-container .qms-paginator .mat-select-value{text-align:center}.select-access-dialog-container .mat-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row!important;align-items:center!important;grid-column-gap:4px!important;-moz-column-gap:4px!important;column-gap:4px!important}.select-access-dialog-container .mat-expansion-panel.qms-expansion{margin:0!important}.select-access-dialog-container .qms-btn-icon{width:30px!important;height:30px!important;line-height:30px!important}.select-access-dialog-container .loading-container{height:25vh;display:grid;grid-template-rows:repeat(auto-fill,minmax(60px,60px))}.select-access-dialog-container .loading-container .loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.select-access-dialog-container .loading-container .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}.select-access-dialog-container .loading-container .loader__wrapper{position:relative;width:100%;height:100%}.select-access-dialog-container .loading-container .loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px;overflow:hidden}@-webkit-keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}"]
+                    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}.select-access-dialog-container{font-family:Open Sans}.select-access-dialog-container .mat-expansion-panel .mat-expansion-panel-body{padding-top:0!important}.select-access-dialog-container .mat-expansion-panel-header{font-size:12px!important;font-weight:800!important}.select-access-dialog-container .w-100{width:100%}.select-access-dialog-container .h-100{height:100%}.select-access-dialog-container .pointer{cursor:pointer}.select-access-dialog-container .fw-600{font-weight:600}.select-access-dialog-container .label-item{font-weight:600;color:var(--ws-text-primary)}.select-access-dialog-container .sub-label{color:var(--ws-text-secondary)}.select-access-dialog-container .fs-14{font-size:14px}.select-access-dialog-container .fs-12{font-size:12px}.select-access-dialog-container .color-primary{color:var(--primary-light)!important}.select-access-dialog-container .header-title{font-weight:600;color:var(--ws-text-primary);font-size:16px}.select-access-dialog-container .chip-item-result{max-width:250px}.select-access-dialog-container .chip-item-result.item-department .qms-chip-body{display:flex;justify-content:center;align-items:center}.select-access-dialog-container .remove-chip-icon{color:rgba(0,0,0,.3);cursor:pointer}.select-access-dialog-container .remove-chip-icon:hover{color:rgba(0,0,0,.7)}.select-access-dialog-container .mat-form-field-wrapper{padding-bottom:5px!important}.select-access-dialog-container .mat-expansion-panel{border-radius:unset!important}.select-access-dialog-container .mat-expansion-panel-header:not([aria-disabled=true]){background:unset}.select-access-dialog-container .mat-expansion-panel.mat-expanded .mat-expansion-panel-header{background:#e5eefb}.select-access-dialog-container .mat-expansion-panel.mat-expanded .mat-expansion-panel-header .qms-line{color:var(--primary-light)!important}.select-access-dialog-container .access-dialog-header{display:flex;justify-content:space-between;align-items:center}.select-access-dialog-container .mat-chip-list-wrapper{margin:unset!important}.select-access-dialog-container .item-list-wrapper{max-height:45vh;padding:4px 4px 4px 0;overflow-y:auto}.select-access-dialog-container .item-list-wrapper.no-result{height:50vh;display:flex;justify-content:center;align-items:center}.select-access-dialog-container .item-list-wrapper .item{min-height:40px}.select-access-dialog-container .item-list-wrapper .item-without-checkbox{min-height:45px;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:4px;transition:background .3s ease}.select-access-dialog-container .item-list-wrapper .item-without-checkbox.active{background:var(--primary-light-12-opacity)}.select-access-dialog-container .item-list-wrapper .item-without-checkbox:hover{background:var(--primary-light-6-opacity)}.select-access-dialog-container .item-list-wrapper .item-without-checkbox .mat-icon{color:var(--primary-light)!important}.select-access-dialog-container .confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.select-access-dialog-container .qms-dialog-content{display:grid;grid-column-gap:8px;-moz-column-gap:8px;column-gap:8px}.select-access-dialog-container .qms-dialog-content.active{grid-template-columns:2fr 1fr}.select-access-dialog-container .qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-wrapper{padding-bottom:16px!important}.select-access-dialog-container .qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-underline{bottom:16px!important}.select-access-dialog-container .qms-dialog-content .result-wrapper{position:relative;width:100%;margin-left:8px}.select-access-dialog-container .qms-dialog-content .result-wrapper:after{position:absolute;content:\"\";top:0;left:0;background-color:#0000001f;height:100%;width:1px}.select-access-dialog-container .qms-dialog-content .result-selected-container{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;padding:0 8px}.select-access-dialog-container .qms-dialog-content .result-selected-container .result-header{height:51px;display:flex;align-items:center;position:-webkit-sticky;position:sticky;top:0;z-index:10;padding:0!important;background:#fff;margin-bottom:12px}.select-access-dialog-container .qms-dialog-content .result-selected-container .result-header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background:rgba(0,0,0,.04)}.select-access-dialog-container .qms-dialog-content .result-selected-container .result-header .mat-card-content{height:51px;width:100%;padding-left:4px;display:flex;align-items:center;background-color:rgba(0,0,0,.04)}.select-access-dialog-container .option-selected-content .group-filter-person-option{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;grid-gap:8px;gap:8px}.select-access-dialog-container span.chip-item__content_name{display:inline-block;max-width:175px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-access-dialog-container span.chip-item-children__count{font-size:.75rem;color:rgba(0,0,0,.5);font-weight:600}.select-access-dialog-container .mat-slide-toggle.qms-group-options{padding:unset!important}.select-access-dialog-container .input-option-filter .mat-form-field-wrapper{padding-bottom:8px!important}.select-access-dialog-container .input-option-filter .mat-form-field-underline{bottom:8px!important}.select-access-dialog-container .slide-toggle{margin-bottom:8px}.select-access-dialog-container .confirm__button__groups.none-option{margin-top:85px}.select-access-dialog-container .btn-icon-clear{position:relative;padding:0 1rem}.select-access-dialog-container .btn-icon-clear .qms-btn-icon{margin-right:unset!important}.select-access-dialog-container .btn-icon-clear:after{position:absolute;content:\"\";left:0;top:0;height:100%;width:1px;background:rgba(0,0,0,.3)}.select-access-dialog-container .qms-paginator .mat-icon{display:flex;align-items:center;justify-content:center}.select-access-dialog-container .qms-paginator .qms-btn-icon{width:30px!important;height:30px!important;line-height:30px!important}.select-access-dialog-container .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.select-access-dialog-container .qms-paginator .mat-paginator-container{min-height:40px}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-total-result{margin-bottom:2px;margin-right:12px;height:30px}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:600;font-size:13px;color:rgba(0,0,0,.8)}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-paginator-range-actions{margin-bottom:0;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.select-access-dialog-container .qms-paginator>.qms-btn-icon-wrapper{width:30px!important;height:30px!important;display:flex;justify-content:center;align-items:center}.select-access-dialog-container .qms-paginator .qms-paginator-page-size{margin-right:12px}.select-access-dialog-container .qms-paginator .qms-paginator-page-size>.qms-pagesize-label{display:none}.select-access-dialog-container .qms-paginator .qms-paginator-page-size>.qms-form-page-size .mat-form-field-flex{width:60px!important;height:30px;display:flex;align-items:center;padding:0 4px}.select-access-dialog-container .qms-paginator .qms-paginator-page-size>.qms-form-page-size .mat-form-field-flex .mat-form-field-infix{height:30px}.select-access-dialog-container .qms-paginator .mat-form-field.qms-form .mat-select-min-line,.select-access-dialog-container .qms-paginator .mat-form-field.qms-form mat-select-trigger{font-size:14px}.select-access-dialog-container .qms-paginator .mat-select-value{text-align:center}.select-access-dialog-container .mat-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row!important;align-items:center!important;grid-column-gap:4px!important;-moz-column-gap:4px!important;column-gap:4px!important}.select-access-dialog-container .mat-expansion-panel.qms-expansion{margin:0!important}.select-access-dialog-container .access-department .qms-view-search-result{height:100%!important}.select-access-dialog-container .access-department .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.select-access-dialog-container .access-department .loading-container{height:calc(100% - 40px)!important}.select-access-dialog-container .loading-container{height:50vh;overflow:hidden;display:grid;grid-template-rows:repeat(auto-fill,minmax(60px,60px))}.select-access-dialog-container .loading-container .loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.select-access-dialog-container .loading-container .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}.select-access-dialog-container .loading-container .loader__wrapper{position:relative;width:100%;height:100%}.select-access-dialog-container .loading-container .loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px;overflow:hidden}@-webkit-keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}"]
                 },] }
     ];
     QMSSelectAccessDialogComponent.ctorParameters = function () { return [
@@ -31721,9 +31998,11 @@
         { type: i0.ChangeDetectorRef }
     ]; };
     QMSSelectAccessDialogComponent.propDecorators = {
-        tree: [{ type: i0.ViewChild, args: ['treeDepartment', {
+        tree: [{ type: i0.ViewChild, args: ['tree', {
                         read: SelectDepartmentTreeComponent
-                    },] }]
+                    },] }],
+        pagingPerson: [{ type: i0.ViewChild, args: ['pagingPerson',] }],
+        pagingUserGroup: [{ type: i0.ViewChild, args: ['pagingUserGroup',] }]
     };
 
     var QMSSelectAccessDialogModule = /** @class */ (function () {
@@ -31758,7 +32037,8 @@
                         slideToggle.MatSlideToggleModule,
                         QMSListModule,
                         QmsPaginatorModule,
-                        paginator.MatPaginatorModule
+                        paginator.MatPaginatorModule,
+                        card.MatCardModule
                     ],
                     exports: [
                         QMSSelectAccessDialogComponent
@@ -31766,6 +32046,12 @@
                 },] }
     ];
 
+    var FilterPersonModel = /** @class */ (function () {
+        function FilterPersonModel() {
+        }
+        return FilterPersonModel;
+    }());
+
     /*
      * Public API Surface of qms-angular
      */
@@ -31800,6 +32086,8 @@
     exports.DepartmentSearchResultModel = DepartmentSearchResultModel;
     exports.ENTERPRISE_FOLDER_ICON = ENTERPRISE_FOLDER_ICON;
     exports.ENTERPRISE_FOLDER_OUTLINED_ICON = ENTERPRISE_FOLDER_OUTLINED_ICON;
+    exports.EllipsifyDirective = EllipsifyDirective;
+    exports.FilterPersonModel = FilterPersonModel;
     exports.FlatNodeNavDrawer = FlatNodeNavDrawer;
     exports.FlowChartConst = FlowChartConst;
     exports.ISelectOneItem = ISelectOneItem;
@@ -31822,6 +32110,8 @@
     exports.PROCESS_ICON = PROCESS_ICON;
     exports.PopupData = PopupData;
     exports.QMSAccessItem = QMSAccessItem;
+    exports.QMSAccessPagingChangeModel = QMSAccessPagingChangeModel;
+    exports.QMSAccessPagingModel = QMSAccessPagingModel;
     exports.QMSAnchor = QMSAnchor;
     exports.QMSAppBar = QMSAppBar;
     exports.QMSAppIconModule = QMSAppIconModule;
@@ -31874,6 +32164,8 @@
     exports.QMSCollapseGroupDirective = QMSCollapseGroupDirective;
     exports.QMSComment = QMSComment;
     exports.QMSConfirmDialog = QMSConfirmDialog;
+    exports.QMSContentChangesDirective = QMSContentChangesDirective;
+    exports.QMSDepartmentPagingModel = QMSDepartmentPagingModel;
     exports.QMSDialogConfig = QMSDialogConfig;
     exports.QMSDialogContainer = QMSDialogContainer;
     exports.QMSDialogContainerV2 = QMSDialogContainerV2;
@@ -32020,6 +32312,7 @@
     exports.RiskResultComponent = RiskResultComponent;
     exports.SaveTemplateComponent = SaveTemplateComponent;
     exports.ScrollToSelectedDirective = ScrollToSelectedDirective;
+    exports.SelectAccessAnimationTrigger = SelectAccessAnimationTrigger;
     exports.SelectConst = SelectConst;
     exports.SelectDepartmentComponent = SelectDepartmentComponent;
     exports.SelectDepartmentPopupData = SelectDepartmentPopupData;