qms-angular 1.1.40 → 1.1.41

package/fesm2015/qms-angular.js

@@ -9138,8 +9138,6 @@ class NewTreeComponent {
         return itemType;
     }
     selectFolder(node) {
-        if (!this.treeConfig.allowSelectFolder)
-            return;
         if (this.treeConfig.selectOne) {
             this.onExpandNode(node, this.treeControl.isExpanded(node));
         }
@@ -26079,7 +26077,7 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         });
         let toolbarItems = this.qmsckPlugin.itemToolbar;
         if (this.isEnabledToggleToolbar() && this.qmsckData.toggledToolbarItems) {
-            let strToolbars = this.qmsckData.toggledToolbarItems; //.replace(/qmsFlowchart,/g, "");
+            let strToolbars = this.qmsckData.toggledToolbarItems.replace(/qmsFlowchart,/g, "");
             if (!this.qmsckData.enableTemplate) {
                 strToolbars = strToolbars.replace(/qmsTemplate,/g, ""); // disable qmsTemplate if user don't have handbookAdmin Role
             }
@@ -30097,10 +30095,16 @@ class QMSSelectDepartmentTreeConfig {
 
 class QMSSelectDepartmentTreeGlobalService {
     convertToTreeData(data) {
+        var _a;
         const roots = [];
         const mapNode = new Map();
         const nestedNodes = [];
         for (let i = 0; i < data.length; i++) {
+            if (!((_a = data[i]) === null || _a === void 0 ? void 0 : _a.expandIcon))
+                data[i].expandIcon = {
+                    expand: "chevron_right",
+                    collapse: "expand_more"
+                };
             data[i].markedGetChildren = false;
             nestedNodes.push(Object.assign(Object.assign({}, data[i]), { children: [] }));
             mapNode.set(nestedNodes[i].id, i);
@@ -30233,6 +30237,7 @@ class SelectDepartmentTreeComponent {
         this.arrSkeleton = new Array(6).fill(0);
         this.height = '50vh';
         this.config = new QMSSelectDepartmentTreeConfig();
+        this.maxWidthNode = 650;
         this.isIncludeChildren = false;
         this.onSearchEvent = new EventEmitter();
         this.onPagingSearchEvent = new EventEmitter();
@@ -30291,6 +30296,7 @@ class SelectDepartmentTreeComponent {
             flatNode.selectedChildCount = node.selectedChildCount;
             flatNode.markedGetChildCountRecurrsive = node.markedGetChildCountRecurrsive;
             flatNode.isIncludeChildWhenChecked = node.isIncludeChildWhenChecked;
+            flatNode.expandIcon = node.expandIcon;
             this.flatTreeNodeMap.set(flatNode, node);
             this.nestedTreeNodeMap.set(node, flatNode);
             return flatNode;
@@ -30305,6 +30311,8 @@ class SelectDepartmentTreeComponent {
             checkNode: false,
             expand: false
         };
+        this.lockHandleSelectionChange = false;
+        this.isDisabledNode = (nodeId) => { var _a; return (_a = this.treeControl.dataNodes.find(node => node.id == nodeId)) === null || _a === void 0 ? void 0 : _a.disabled; };
         // Init tree data
         this.getDataTree$
             .pipe(takeUntil(this.ngUnsubscribe))
@@ -30419,19 +30427,28 @@ class SelectDepartmentTreeComponent {
     _handleListSelected() {
         if (!this.config.selectedList.length)
             return;
-        const selectedList = this.config.selectedList.sort((x, y) => x.isGroup ? -1 : y.isGroup ? 1 : 0);
-        for (let i = 0; i < selectedList.length; i++) {
-            const item = selectedList[i];
-            const node = this.getNodeById(item.id);
-            if (node) {
+        const treeNodes = this.treeDepartmentService.convertToTreeData(this.config.selectedList.map(x => (Object.assign(Object.assign({}, x), { parentId: x.groupId }))));
+        this.execWithoutEmitNodeChangeEvent(() => {
+            const selectedItems = [];
+            const reMapTreeNode = (item) => {
+                var _a;
+                const node = this.treeControl.dataNodes.find(x => x.id == item.id);
                 const nestedNode = this.convertToNestedNode(node);
-                nestedNode.isGroup = item.isGroup;
-                nestedNode.groupId = item.groupId;
+                node.groupId = item.groupId;
+                node.isGroup = item.isGroup;
                 this.checkListSelection.select(node);
-                this.handleCheckNode(node);
-                this.onExpandAllParent(node);
-            }
-        }
+                return Object.assign(Object.assign({}, nestedNode), { groupId: item.groupId, isGroup: item.isGroup, childCount: (_a = nestedNode.childCount) !== null && _a !== void 0 ? _a : this.getListChildrenOfNode(node).length, children: [] });
+            };
+            treeNodes.forEach(item => {
+                const node = this.treeControl.dataNodes.find(x => x.id == item.id);
+                if (!node)
+                    return;
+                const nestedNode = this.convertToNestedNode(node);
+                selectedItems.push(Object.assign(Object.assign({}, reMapTreeNode(item)), { children: item.children.map(x => reMapTreeNode(x)) }));
+            });
+            this.resultSelected.push(...selectedItems);
+        });
+        this.onValueChangeEvent.emit(this.resultSelected);
         this.cdRef.detectChanges();
     }
     _initListSelected() {
@@ -30440,7 +30457,7 @@ class SelectDepartmentTreeComponent {
         const indexRemove = [];
         for (let i = 0; i < this._selectedList.length; i++) {
             const item = this._selectedList[i];
-            const result = this.treeDepartmentService.getDescendantsOfNode(item);
+            const result = this.treeDepartmentService.getDescendantsOfNode(item).filter(x => x.groupId == item.id);
             item.children = result;
             const index = this._selectedList.findIndex(x => result.some(x1 => x1.id === x.id));
             if (index < 0)
@@ -30516,6 +30533,8 @@ class SelectDepartmentTreeComponent {
         this.checkListSelection.changed
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe(({ added, removed }) => {
+            if (this.lockHandleSelectionChange)
+                return;
             const checkExistInResult = (node) => this.resultSelected.findIndex(x => x.id === node.id) > -1;
             if (added.length) {
                 added.forEach(node => {
@@ -30524,7 +30543,12 @@ class SelectDepartmentTreeComponent {
                     if (!this.config.lazy)
                         nestedNode.childCount = this.getListChildrenOfNode(node).length;
                     const existGroup = _.cloneDeep(this.getAllParentNode(node)
-                        .map(item => this.convertToNestedNode(item))
+                        .map(item => {
+                        const nestedNode = this.convertToNestedNode(item);
+                        nestedNode.groupId = item.groupId;
+                        nestedNode.isGroup = item.isGroup;
+                        return nestedNode;
+                    })
                         .reverse()
                         .find(x => x.isGroup));
                     if (!!existGroup) {
@@ -30537,7 +30561,7 @@ class SelectDepartmentTreeComponent {
                         }
                         this._onSelectionNodeChangeEvent('updated', [groupResult]);
                         // re-filter result selected
-                        this.resultSelected = this.resultSelected.filter(item => !this.getListChildrenOfNode(flatExistGroup).map(x => x.id).includes(item.id));
+                        this.resultSelected = this.resultSelected.filter(item => item.disabled || !this.getListChildrenOfNode(flatExistGroup).map(x => x.id).includes(item.id));
                         return;
                     }
                     if (checkExistInResult(node))
@@ -30638,7 +30662,7 @@ class SelectDepartmentTreeComponent {
                             name: x.name,
                         })).reverse() : [];
                     }
-                    this.resultSearch.push(Object.assign(Object.assign({}, item), { disabled: !this.config.lazy && this.config.checkSearchMappingTree && !node, location: [
+                    this.resultSearch.push(Object.assign(Object.assign({}, item), { disabled: item.disabled || !this.config.lazy && this.config.checkSearchMappingTree && !node, location: [
                             ...location,
                             {
                                 id: item.id,
@@ -30704,14 +30728,18 @@ class SelectDepartmentTreeComponent {
             return;
         if (this.isAllDepartmentSelected) {
             this.treeControl.dataNodes.forEach(node => {
+                if (node.disabled)
+                    return;
                 const nestedNode = this.convertToNestedNode(node);
                 nestedNode.isGroup = false;
             });
-            this.checkListSelection.deselect(...this.treeControl.dataNodes);
+            this.checkListSelection.deselect(...this.treeControl.dataNodes.filter(x => x.disabled));
             return;
         }
         ;
         this.departmentRoots.forEach(node => {
+            if (node.disabled)
+                return;
             if (!this.isIncludeChildren) {
                 this.treeControl.dataNodes.filter(x => !this.isSelectedNode(x))
                     .forEach(x => this.onCheckNode(x));
@@ -30735,7 +30763,7 @@ class SelectDepartmentTreeComponent {
         });
     }
     onCheckNode(node, fireEventCheckNode = true) {
-        if (!node)
+        if (!node || node.disabled)
             return;
         if (fireEventCheckNode)
             this.onCheckNodeEvent.emit(node);
@@ -30758,33 +30786,39 @@ class SelectDepartmentTreeComponent {
     }
     _handleSelectOne(nodeId) {
         const nodeTree = this.treeControl.dataNodes.find(node => node.id === nodeId);
-        const reSelectSelection = (...params) => {
+        const reSelectSelection = (id, ...params) => {
             params.forEach(selection => {
-                const selected = selection.selected.filter(x => x.id !== nodeId);
+                const selected = selection.selected.filter(x => x.id != id);
                 selection.deselect(...selected);
             });
         };
         if (!nodeTree) {
-            const item = this.checkListSelectionSearch.selected.find(x => x.id === nodeId);
-            if (!item)
-                return;
-            this.resultSelected = [{
-                    id: item.id,
-                    parentId: item.parentId,
-                    name: item.name,
-                    externalName: item.externalName,
-                    children: []
-                }];
-            this._selectedList = [...this.resultSelected];
-            this.onValueChangeEvent.emit(this.resultSelected);
-            reSelectSelection(this.checkListSelection, this.checkListSelectionSearch);
-            this.cdRef.detectChanges();
+            this.execWithoutEmitNodeChangeEvent(() => {
+                const item = this.checkListSelectionSearch.selected.find(x => x.id === nodeId);
+                if (!item) {
+                    this.resultSelected = [];
+                    return;
+                }
+                this.resultSelected = [{
+                        id: item.id,
+                        parentId: item.parentId,
+                        name: item.name,
+                        externalName: item.externalName,
+                        children: []
+                    }];
+                this._selectedList = [...this.resultSelected];
+                this.onValueChangeEvent.emit(this.resultSelected);
+                reSelectSelection(nodeId, this.checkListSelection, this.checkListSelectionSearch);
+                this.cdRef.detectChanges();
+            });
             return;
         }
         if (this.isSelectedNode(nodeTree)) {
-            const nestedNode = this.convertToNestedNode(this.checkListSelection.selected[0]);
+            const nestedNode = this.convertToNestedNode(this.checkListSelection.selected.find(x => x.id === nodeId));
+            this.resultSelected = [Object.assign(Object.assign({}, nestedNode), { children: [] })];
             this._selectedList = [...this.resultSelected];
-            reSelectSelection(this.checkListSelection, this.checkListSelectionSearch);
+            reSelectSelection(nestedNode.id, this.checkListSelection, this.checkListSelectionSearch);
+            this.onValueChangeEvent.emit(this.resultSelected);
             return;
         }
         this.resultSelected = [];
@@ -30859,16 +30893,17 @@ class SelectDepartmentTreeComponent {
     }
     handleCheckNode(node) {
         const isSelected = this.isSelectedNode(node);
-        const childSelected = this.getChildrenSelected(node);
+        const childSelected = this.getChildrenSelected(node).filter(x => !x.disabled);
         const nestedNode = this.convertToNestedNode(node);
         if (isSelected) {
             // Check existed group
-            const existedGroup = this.getAllParentNode(node).find(x => this.convertToNestedNode(x).isGroup);
+            const allParenNodeIds = this.getAllParentNode(node).map(x => x.id);
+            const existedGroup = this.resultSelected.find(x => x.isGroup && allParenNodeIds.includes(x.id));
             if (!this.isIncludeChildren) {
                 nestedNode.groupId = existedGroup === null || existedGroup === void 0 ? void 0 : existedGroup.id;
                 return;
             }
-            const children = this.getListChildrenOfNode(node);
+            const children = this.getListChildrenOfNode(node).filter(x => !x.disabled);
             nestedNode.isGroup = !existedGroup && !!children.length;
             if (!children.length)
                 return;
@@ -30994,6 +31029,8 @@ class SelectDepartmentTreeComponent {
         }
     }
     onCheckItemSearchResult(item) {
+        if (item.disabled)
+            return;
         this.checkListSelectionSearch.toggle(item);
         if (this.config.isSelectOne) {
             this.checkListSelectionSearch.deselect(...this.checkListSelectionSearch.selected.filter(x => x.id != item.id));
@@ -31123,6 +31160,8 @@ class SelectDepartmentTreeComponent {
         if (this.config.handleCheckAllItemSearch) {
             for (let i = 0; i < this.resultSearch.length; i++) {
                 const item = this.resultSearch[i];
+                if (item.disabled)
+                    continue;
                 if (checked) {
                     const treeNode = this.treeControl.dataNodes.find(node => node.id === item.id);
                     const canSelect = (!!treeNode || this.config.lazy);
@@ -31292,16 +31331,21 @@ class SelectDepartmentTreeComponent {
         this.checkListSelection.toggle(node);
         //this.handleCheckNode(node);
     }
+    execWithoutEmitNodeChangeEvent(action) {
+        this.lockHandleSelectionChange = true;
+        action();
+        this.lockHandleSelectionChange = false;
+    }
 }
 SelectDepartmentTreeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-select-department-tree',
-                template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\r\n  <div class=\"input-select-department\">\r\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\r\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\r\n        <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"Search\" matInput />\r\n        <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\r\n          <mat-icon>search</mat-icon>\r\n        </button>\r\n        <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\r\n          *ngIf=\"getLoading$.value\"></mat-progress-spinner>\r\n        <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\r\n          <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </mat-form-field>\r\n    </form>\r\n    <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\r\n      class=\"sub-text ms-1 fw500\">\r\n      {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\r\n    </div>\r\n    <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\r\n      class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end  align-items-center\">\r\n      <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\r\n        [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\r\n        [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\r\n        qms-group-options>\r\n        <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n      </mat-slide-toggle>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\r\n        (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n      <button class=\"btn-arrow\" [@inOutAnimation]\r\n        *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\r\n        (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_forward</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div [@inOutAnimation]\r\n    *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\r\n    class=\"header-view-tree\">\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.treeName}}\r\n    </div>\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.externalName}}\r\n    </div>\r\n  </div>\r\n  <mat-divider class=\"mx-auto\"></mat-divider>\r\n  <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\r\n    minHeight: height\r\n  }\" class=\"tree-department-wrapper\">\r\n    <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\r\n      <div class=\"tree-view-main h100\">\r\n        <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\r\n          class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\r\n          <!-- Checkbox all root node -->\r\n          <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\r\n            [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\">\r\n            <span class=\"text-label \">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{treeControl.dataNodes.length}}</b>)</span>\r\n          </mat-checkbox>\r\n          <mat-divider class=\"mx-auto\"></mat-divider>\r\n        </div>\r\n        <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\r\n                    'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\r\n                    'select-department-tree': true\r\n                  }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\r\n          <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\r\n            <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\r\n              [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\r\n                              'mat-tree-node-disabled-all': node.disabled,\r\n                              'w-100': config.isSelectOne,\r\n                              'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\r\n                              'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\r\n                              'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\r\n                              'node-loading': node.isLoading\r\n                        }\">\r\n              <div class=\"node-expand-area\">\r\n                <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\"\r\n                  *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\r\n                  <mat-icon>\r\n                    {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n                  </mat-icon>\r\n                </button>\r\n                <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\r\n              </div>\r\n              <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n                [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\r\n                <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\r\n                  {{node.externalName || ''}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </cdk-virtual-scroll-viewport>\r\n        <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\r\n      height: height\r\n    }\" class=\"qms-view-search-result\">\r\n      <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n        class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.resultSearchName}}\r\n          </span>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.externalName}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\r\n      <div class=\"qms-view-search-result__wrapper\"\r\n        [class.active-external]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n        *ngIf=\"!!resultSearch.length && !getLoading$.value\">\r\n        <div class=\"\">\r\n          <mat-checkbox [@inOutAnimation]\r\n            [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n            [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n            (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n            <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{resultSearch.length}}</b>)</span>\r\n          </mat-checkbox>\r\n        </div>\r\n        <div [@inOutAnimation] [@listAnimation]\r\n          [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\r\n          <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\r\n            position=\"top\" *ngFor=\"let item of resultSearch\"\r\n            (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n            [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\r\n            <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading\" [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 *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\r\n              <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\r\n            </div>\r\n            <div class=\"result-item__content\">\r\n              <div class=\"item-result-content-wraper\">\r\n                <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\r\n                <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\r\n                  [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\r\n                  [nodes]=\"item.location\">\r\n                </qms-breadcrumb>\r\n                <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\r\n                  <span qms-elipsify mode=\"dark\" position=\"top\"\r\n                    class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\r\n                </div>\r\n              </div>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\r\n                <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n        <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n      </div>\r\n      <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\r\n        class=\"mx-auto\"></mat-divider>\r\n      <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\r\n        [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\r\n        [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\r\n        [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\r\n      </qms-paginator>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Template for Checkbox -->\r\n  <ng-template #showCheckboxTemplate let-node=\"node\">\r\n    <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\r\n      [disabled]=\"node.isLoading\" [checked]=\"checkListSelection.isSelected(node)\"\r\n      (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\r\n      <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\r\n        [src]=\"node.itemIconSvg\" />\r\n      <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n        class=\"material-icons-outlined type-icon\"></span>\r\n      <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n        node.itemMatIcon }}\r\n      </span>\r\n      <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name}}\r\n      </span>\r\n    </mat-checkbox>\r\n  </ng-template>\r\n\r\n  <!-- Template node without checkbox -->\r\n  <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\r\n    <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\r\n      <div class=\"node-info\">\r\n        <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n          class=\"material-icons-outlined type-icon\"></span>\r\n        <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n          node.itemMatIcon }}\r\n        </span>\r\n        <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\r\n      </div>\r\n      <div class=\"node-state\">\r\n        <mat-icon *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #noResult>\r\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n    <path\r\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\r\n      fill=\"#0163B3\" />\r\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\r\n  </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div [ngStyle]=\"{\r\n    'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\r\n  }\" class=\"qms-loading-container\">\r\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\r\n      <div class=\"qms-loader__wrapper\">\r\n        <div class=\"row-loader\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Template mask overlay -->\r\n<ng-template #maskOverlay>\r\n  <div class=\"mask-overlay\">\r\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\" color=\"primary\"></mat-spinner>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Loading spinner -->\r\n<ng-template #loadingSpinner>\r\n  <div class=\"qms-spinner center\">\r\n    <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\r\n  </div>\r\n</ng-template>",
+                template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\r\n  <div class=\"input-select-department\">\r\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\r\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\r\n        <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"Search\" matInput />\r\n        <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\r\n          <mat-icon>search</mat-icon>\r\n        </button>\r\n        <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\r\n          *ngIf=\"getLoading$.value\"></mat-progress-spinner>\r\n        <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\r\n          <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </mat-form-field>\r\n    </form>\r\n    <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\r\n      class=\"sub-text ms-1 fw500\">\r\n      {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\r\n    </div>\r\n    <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\r\n      class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end  align-items-center\">\r\n        <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\r\n                          [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\r\n                          [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\r\n                          qms-group-options>\r\n        <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n      </mat-slide-toggle>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\r\n        (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n      <button class=\"btn-arrow\" [@inOutAnimation]\r\n        *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\r\n        (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_forward</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div [@inOutAnimation]\r\n    *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\r\n    class=\"header-view-tree\">\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.treeName}}\r\n    </div>\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.externalName}}\r\n    </div>\r\n  </div>\r\n  <mat-divider class=\"mx-auto\"></mat-divider>\r\n  <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\r\n    minHeight: height\r\n  }\" class=\"tree-department-wrapper\">\r\n    <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\r\n      <div class=\"tree-view-main h100\">\r\n        <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\r\n          class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\r\n          <!-- Checkbox all root node -->\r\n          <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\r\n            [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\">\r\n            <span class=\"text-label \">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{treeControl.dataNodes.length}}</b>)</span>\r\n          </mat-checkbox>\r\n          <mat-divider class=\"mx-auto\"></mat-divider>\r\n        </div>\r\n        <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\r\n                    'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\r\n                    'select-department-tree': true\r\n                  }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\r\n          <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\r\n            <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\r\n              [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\r\n                              'w-100': config.isSelectOne,\r\n                              'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\r\n                              'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\r\n                              'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\r\n                              'node-loading': node.isLoading\r\n                        }\">\r\n              <div class=\"node-expand-area\">\r\n                <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\"\r\n                  *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\r\n                  <mat-icon>\r\n                    {{ treeControl.isExpanded(node) ? node?.expandIcon?.collapse : node?.expandIcon?.expand }}\r\n                  </mat-icon>\r\n                </button>\r\n                <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\r\n              </div>\r\n              <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n                [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\r\n                <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\r\n                  {{node.externalName || ''}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </cdk-virtual-scroll-viewport>\r\n        <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\r\n      height: height\r\n    }\" class=\"qms-view-search-result\">\r\n      <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n        class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.resultSearchName}}\r\n          </span>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.externalName}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\r\n      <div class=\"qms-view-search-result__wrapper\"\r\n        [class.active-external]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n        *ngIf=\"!!resultSearch.length && !getLoading$.value\">\r\n        <div class=\"\">\r\n          <mat-checkbox [@inOutAnimation]\r\n            [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n            [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n            (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n            <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{resultSearch.length}}</b>)</span>\r\n          </mat-checkbox>\r\n        </div>\r\n        <div [@inOutAnimation] [@listAnimation]\r\n          [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\r\n          <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\r\n            position=\"top\" *ngFor=\"let item of resultSearch\"\r\n            (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n            [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\r\n            <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading\" [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 *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\r\n              <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\r\n            </div>\r\n            <div class=\"result-item__content\">\r\n              <div class=\"item-result-content-wraper\">\r\n                <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\r\n                <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\r\n                  [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\r\n                  [nodes]=\"item.location\">\r\n                </qms-breadcrumb>\r\n                <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\r\n                  <span qms-elipsify mode=\"dark\" position=\"top\"\r\n                    class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\r\n                </div>\r\n              </div>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\r\n                <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n        <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n      </div>\r\n      <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\r\n        class=\"mx-auto\"></mat-divider>\r\n      <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\r\n        [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\r\n        [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\r\n        [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\r\n      </qms-paginator>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Template for Checkbox -->\r\n  <ng-template #showCheckboxTemplate let-node=\"node\">\r\n    <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\r\n      [disabled]=\"node.isLoading || node.disabled\" [checked]=\"checkListSelection.isSelected(node)\"\r\n      (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\r\n      <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\r\n        [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      <div class=\"node-text\" [ngStyle]=\"{\r\n        maxWidth: (maxWidthNode - 20*node.level)+ 'px'\r\n      }\">\r\n        <span qms-elipsify [mode]=\"'dark'\" position=\"top\" class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled}\">{{ node.name}}\r\n        </span>\r\n      </div>\r\n    </mat-checkbox>\r\n  </ng-template>\r\n\r\n  <!-- Template node without checkbox -->\r\n  <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\r\n    <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\r\n      <div class=\"node-info\">\r\n        <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n          class=\"material-icons-outlined type-icon\"></span>\r\n        <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n          node.itemMatIcon }}\r\n        </span>\r\n        <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\r\n      </div>\r\n      <div class=\"node-state\">\r\n        <mat-icon *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #noResult>\r\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n    <path\r\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\r\n      fill=\"#0163B3\" />\r\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\r\n  </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div [ngStyle]=\"{\r\n    'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\r\n  }\" class=\"qms-loading-container\">\r\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\r\n      <div class=\"qms-loader__wrapper\">\r\n        <div class=\"row-loader\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Template mask overlay -->\r\n<ng-template #maskOverlay>\r\n  <div class=\"mask-overlay\">\r\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\" color=\"primary\"></mat-spinner>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Loading spinner -->\r\n<ng-template #loadingSpinner>\r\n  <div class=\"qms-spinner center\">\r\n    <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\r\n  </div>\r\n</ng-template>\r\n",
                 animations: [
                     AnimationTreeDepartment
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .text-selected{color:rgba(0,0,0,.6);font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:-webkit-sticky;position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:first-child{padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:rgba(0,0,0,.12)}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:rgba(34,33,33,.1);position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:rgba(0,0,0,.08)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled{color:rgba(0,0,0,.38)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:rgba(0,0,0,.38);cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:rgba(0,0,0,.1)}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:first-child{padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:calc(100% - 44px);overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:first-child){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active,.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover{background:linear-gradient(0deg,rgba(1,99,178,.12),rgba(1,99,178,.12)),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:600;color:rgba(0,0,0,.8)}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions{margin-bottom:0;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:rgba(0,0,0,.6);font-weight:400;font-size:14px;max-width:250px}.qms-select-department-tree-container ::ng-deep .mat-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;grid-column-gap:4px;-moz-column-gap:4px;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,hsla(0,0%,91%,0),hsla(0,0%,89%,0) 40%,hsla(0,0%,89%,.5) 50%,hsla(0,0%,89%,0) 60%,hsla(0,0%,89%,0));-webkit-animation:animate-loading 1.2s linear infinite;animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@-webkit-keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}.qms-select-department-tree-container .mat-spinner circle,.qms-select-department-tree-container ::ng-deep .mat-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width:600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span,.qms-select-department-tree-container .text-name{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}"]
+                styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:rgba(0,0,0,.6);font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:-webkit-sticky;position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:first-child{padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:rgba(0,0,0,.12)}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:rgba(34,33,33,.1);position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:rgba(0,0,0,.08)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled{color:rgba(0,0,0,.38)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:rgba(0,0,0,.38);cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:rgba(0,0,0,.1)}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:first-child{padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:calc(100% - 44px);overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:first-child){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active,.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover{background:linear-gradient(0deg,rgba(1,99,178,.12),rgba(1,99,178,.12)),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:600;color:rgba(0,0,0,.8)}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions{margin-bottom:0;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:rgba(0,0,0,.6);font-weight:400;font-size:14px;max-width:250px}.qms-select-department-tree-container ::ng-deep .mat-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;grid-column-gap:4px;-moz-column-gap:4px;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,hsla(0,0%,91%,0),hsla(0,0%,89%,0) 40%,hsla(0,0%,89%,.5) 50%,hsla(0,0%,89%,0) 60%,hsla(0,0%,89%,0));-webkit-animation:animate-loading 1.2s linear infinite;animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@-webkit-keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}.qms-select-department-tree-container .mat-spinner circle,.qms-select-department-tree-container ::ng-deep .mat-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width:600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span,.qms-select-department-tree-container .text-name{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}"]
             },] }
 ];
 SelectDepartmentTreeComponent.ctorParameters = () => [
@@ -31319,6 +31363,7 @@ SelectDepartmentTreeComponent.propDecorators = {
     rowsSkeleton: [{ type: Input }],
     height: [{ type: Input }],
     config: [{ type: Input }],
+    maxWidthNode: [{ type: Input }],
     onSearchEvent: [{ type: Output }],
     onPagingSearchEvent: [{ type: Output }],
     onValueChangeEvent: [{ type: Output }],
@@ -31381,6 +31426,7 @@ class SelectDepartmentPopupData {
     constructor() {
         this.headerName = '';
         this.config = new QMSSelectDepartmentTreeConfig;
+        this.hidePanelResult = false;
     }
 }
 
@@ -31673,7 +31719,7 @@ class SelectDepartmentComponent {
 SelectDepartmentComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-select-department',
-                template: "<div class=\"qms-select-department\">\r\n  <div class=\"header-dialog mb-2\">\r\n    <span>{{popupData.headerName}}</span>\r\n    <button matDialogClose class=\"btn-close-dialog\" color=\"light\" qms-btn-icon>\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n  <div>\r\n    <div class=\"qms-scrollbar\">\r\n      <div>\r\n        <qms-select-department-tree #treeDepartment customClass=\"custom-department-tree\"\r\n          [height]=\"popupData.config.isMobile ? '38vh' : '50vh'\" [rowsSkeleton]=\"9\" [config]=\"popupData.config\"\r\n          (onSearchEvent)=\"onSearchEvent.emit($event)\" (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\r\n          (onPagingSearchEvent)=\"onPagingEvent.emit($event)\" (onCheckNodeEvent)=\"onCheckNodeEvent.emit($event)\"\r\n          (onExpandNodeEvent)=\"onExpandNodeEvent.emit($event)\" (onLoadMoreEvent)=\"onLoadMoreEvent.emit()\"\r\n          (onCheckAllItemSearchEvent)=\"onCheckAllItemSearchEvent.emit($event)\"\r\n          (onCheckItemSearchEvent)=\"onCheckItemSearchEvent.emit($event)\"\r\n          (toggleIncludeChildEvent)=\"toggleIncludeChildEvent.emit($event)\">\r\n        </qms-select-department-tree>\r\n      </div>\r\n    </div>\r\n    <div class=\"line__divider\"></div>\r\n    <div [@heightAnimation] *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length\" class=\" pr-0 pe-0\">\r\n      <div class=\"header-title\">{{LANG.RESULTS}}</div>\r\n      <div class=\"result-content pr-0 pe-0\">\r\n        <mat-chip-list class=\"panel__item qms-scrollbar\">\r\n          <div [@inOutAnimation_2] [id]=\"'item-result-'+item.id\" *ngFor=\"let item of treeDepartment.resultSelected\">\r\n            <mat-chip [@updateItemAnimation] *qmsContentChanges=\"item.children?.length\"\r\n              [qms-tool-tip]=\"generateTootip(item)\" position=\"top\" mode=\"dark\" qms-chip [removable]=\"true\">\r\n              <span (click)=\"onScrollToNode(item)\" qms-chip-body>\r\n                <span class=\"related__item__content_name\" #itemName>\r\n                  <span>{{item.name}}</span>\r\n                  <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && !popupData.config.lazy\">\r\n                    {{item.children.length}}/{{item.childCount}}\r\n                  </span>\r\n                  <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && popupData.config.lazy\">\r\n                    {{item.selectedChildCount || item.children.length}}/{{item.childCount}}\r\n                  </span>\r\n                </span>\r\n              </span>\r\n              <mat-icon *ngIf=\"!isNodeLoading(item.id); else loadingSpinner\"\r\n                (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\"\r\n        [disabled]=\"!resultSelected.length && !popupData.config.canAddNullResult\"\r\n        [class.qms-btn-disabled]=\"!resultSelected.length && !popupData.config.canAddNullResult\" 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\r\n<!-- Loading spinner -->\r\n<ng-template #loadingSpinner>\r\n  <div class=\"qms-spinner-wrapper\">\r\n    <div class=\"qms-spinner center\">\r\n      <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\" color=\"primary\"></mat-spinner>\r\n    </div>\r\n  </div>\r\n</ng-template>",
+                template: "<div class=\"qms-select-department\">\r\n  <div class=\"header-dialog mb-2\">\r\n    <span>{{popupData.headerName}}</span>\r\n    <button matDialogClose class=\"btn-close-dialog\" color=\"light\" qms-btn-icon>\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n  <div>\r\n    <div class=\"qms-scrollbar\">\r\n      <div>\r\n        <qms-select-department-tree #treeDepartment customClass=\"custom-department-tree\"\r\n          [height]=\"popupData.config.isMobile ? '38vh' : '50vh'\" [rowsSkeleton]=\"9\" [config]=\"popupData.config\"\r\n          (onSearchEvent)=\"onSearchEvent.emit($event)\" (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\r\n          (onPagingSearchEvent)=\"onPagingEvent.emit($event)\" (onCheckNodeEvent)=\"onCheckNodeEvent.emit($event)\"\r\n          (onExpandNodeEvent)=\"onExpandNodeEvent.emit($event)\" (onLoadMoreEvent)=\"onLoadMoreEvent.emit()\"\r\n          (onCheckAllItemSearchEvent)=\"onCheckAllItemSearchEvent.emit($event)\"\r\n          (onCheckItemSearchEvent)=\"onCheckItemSearchEvent.emit($event)\"\r\n          (toggleIncludeChildEvent)=\"toggleIncludeChildEvent.emit($event)\">\r\n        </qms-select-department-tree>\r\n      </div>\r\n    </div>\r\n    <div class=\"line__divider\"></div>\r\n    <div [@heightAnimation] *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length && !popupData.hidePanelResult\" class=\" pr-0 pe-0\">\r\n      <div class=\"header-title\">{{LANG.RESULTS}}</div>\r\n      <div class=\"result-content pr-0 pe-0\">\r\n        <mat-chip-list class=\"panel__item qms-scrollbar\">\r\n          <div [@inOutAnimation_2] [id]=\"'item-result-'+item.id\" *ngFor=\"let item of treeDepartment.resultSelected\">\r\n            <mat-chip [@updateItemAnimation] *qmsContentChanges=\"item.children?.length\"\r\n              [qms-tool-tip]=\"generateTootip(item)\" position=\"top\" mode=\"dark\" qms-chip [removable]=\"true\">\r\n              <span (click)=\"onScrollToNode(item)\" qms-chip-body>\r\n                <span class=\"related__item__content_name\" #itemName>\r\n                  <span>{{item.name}}</span>\r\n                  <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && !popupData.config.lazy\">\r\n                    {{item.children.length}}/{{item.childCount}}\r\n                  </span>\r\n                  <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && popupData.config.lazy\">\r\n                    {{item.selectedChildCount || item.children.length}}/{{item.childCount}}\r\n                  </span>\r\n                </span>\r\n              </span>\r\n              <ng-container *ngIf=\"isNodeLoading(item.id)\" [ngTemplateOutlet]=\"loadingSpinner\"></ng-container>\r\n              <mat-icon *ngIf=\"!treeDepartment.isDisabledNode(item.id) && !isNodeLoading(item.id)\"\r\n                (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 && !popupData.hidePanelResult\" class=\"mx-auto\"></mat-divider>\r\n    <div class=\"confirm__button__groups\">\r\n      <button (click)=\"onCloseDialog()\" class=\"btn-add\"\r\n        [disabled]=\"!resultSelected.length && !popupData.config.canAddNullResult\"\r\n        [class.qms-btn-disabled]=\"!resultSelected.length && !popupData.config.canAddNullResult\" 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\r\n<!-- Loading spinner -->\r\n<ng-template #loadingSpinner>\r\n  <div class=\"qms-spinner-wrapper\">\r\n    <div class=\"qms-spinner center\">\r\n      <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\" color=\"primary\"></mat-spinner>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
                 providers: [
                     {
                         provide: MAT_CHECKBOX_DEFAULT_OPTIONS,
@@ -31681,7 +31727,7 @@ SelectDepartmentComponent.decorators = [
                     }
                 ],
                 animations: [SelectDepartmentAnimationTrigger],
-                styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.qms-select-department .cursor-pointer{cursor:pointer}.qms-select-department .ml-5{margin-left:10px}.qms-select-department .padding-5{padding:5px}.qms-select-department .header-dialog{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px}.qms-select-department .input__field{display:flex;align-items:center;position:relative}.qms-select-department .input__field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department .input__field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qms-select-department .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qms-select-department .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qms-select-department .panel__item{max-height:175px;margin-top:4px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;display:block}.qms-select-department .panel__item .related__item__inline{max-width:100%}.qms-select-department .panel__item ::ng-deep .mat-chip-list-wrapper{margin:0 -4px!important}.qms-select-department .panel__item .select__toggle-include{width:100%}.qms-select-department .panel__item .select__toggle-include.toggle-include-child .mat-slide-toggle.qms-group-options .mat-slide-toggle-thumb{background-color:#5a5a5a!important}.qms-select-department .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qms-select-department .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qms-select-department .header-title{font-weight:600;color:rgba(0,0,0,.87)}.qms-select-department .result-content{padding-right:0!important}.qms-select-department .result-content .mat-chip-list{min-height:40px}.qms-select-department .result-content .mat-chip-list .mat-icon{color:rgba(0,0,0,.3)!important;cursor:pointer}.qms-select-department .result-content .mat-chip-list .mat-icon:hover{color:#000!important}.qms-select-department .result-content span.related__item__content_name{min-width:calc(100% - 13px);max-width:250px;display:flex;align-items:center}.qms-select-department .result-content span.related__item__content_name>span:first-child{display:inline-block;margin-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.qms-select-department .result-content span.related__item__content_name .select__include-children__count{font-size:.75rem;color:rgba(0,0,0,.5);font-weight:600;line-height:16px}.qms-select-department .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department .confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result{height:100%!important}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.qms-select-department ::ng-deep .custom-department-tree .loading-container{height:calc(100% - 40px)!important}.qms-select-department ::ng-deep.btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}.qms-spinner-wrapper{display:inline-block;width:22px;height:22px}.qms-spinner-wrapper .qms-spinner{font-size:20px;width:1em;height:1em;position:absolute;right:5px;top:50%;transform:translateY(-50%)}.qms-spinner-wrapper .qms-spinner .mat-progress-spinner circle,.qms-spinner-wrapper .qms-spinner .mat-spinner circle{stroke:#1b75be!important}@media screen and (max-width:600px){::ng-deep .cdk-global-overlay-wrapper{justify-content:center!important;width:100vw}.header-title{font-size:14px}.related__item__content_name{font-size:12px!important}}"]
+                styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.qms-select-department{font-family:Open Sans,sans-serif}.qms-select-department .cursor-pointer{cursor:pointer}.qms-select-department .ml-5{margin-left:10px}.qms-select-department .padding-5{padding:5px}.qms-select-department .header-dialog{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px}.qms-select-department .input__field{display:flex;align-items:center;position:relative}.qms-select-department .input__field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department .input__field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qms-select-department .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qms-select-department .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qms-select-department .panel__item{max-height:175px;margin-top:4px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;display:block}.qms-select-department .panel__item .related__item__inline{max-width:100%}.qms-select-department .panel__item ::ng-deep .mat-chip-list-wrapper{margin:0 -4px!important}.qms-select-department .panel__item .select__toggle-include{width:100%}.qms-select-department .panel__item .select__toggle-include.toggle-include-child .mat-slide-toggle.qms-group-options .mat-slide-toggle-thumb{background-color:#5a5a5a!important}.qms-select-department .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qms-select-department .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qms-select-department .header-title{font-weight:600;color:rgba(0,0,0,.87)}.qms-select-department .result-content{padding-right:0!important}.qms-select-department .result-content .mat-chip-list{min-height:40px}.qms-select-department .result-content .mat-chip-list .mat-icon{color:rgba(0,0,0,.3)!important;cursor:pointer}.qms-select-department .result-content .mat-chip-list .mat-icon:hover{color:#000!important}.qms-select-department .result-content span.related__item__content_name{min-width:calc(100% - 13px);max-width:250px;display:flex;align-items:center}.qms-select-department .result-content span.related__item__content_name>span:first-child{display:inline-block;margin-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.qms-select-department .result-content span.related__item__content_name .select__include-children__count{font-size:.75rem;color:rgba(0,0,0,.5);font-weight:600;line-height:16px}.qms-select-department .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department .confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result{height:100%!important}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.qms-select-department ::ng-deep .custom-department-tree .loading-container{height:calc(100% - 40px)!important}.qms-select-department ::ng-deep.btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}.qms-spinner-wrapper{display:inline-block;width:22px;height:22px}.qms-spinner-wrapper .qms-spinner{font-size:20px;width:1em;height:1em;position:absolute;right:5px;top:50%;transform:translateY(-50%)}.qms-spinner-wrapper .qms-spinner .mat-progress-spinner circle,.qms-spinner-wrapper .qms-spinner .mat-spinner circle{stroke:#1b75be!important}@media screen and (max-width:600px){::ng-deep .cdk-global-overlay-wrapper{justify-content:center!important;width:100vw}.header-title{font-size:14px}.related__item__content_name{font-size:12px!important}}"]
             },] }
 ];
 SelectDepartmentComponent.ctorParameters = () => [
@@ -31870,6 +31916,10 @@ class QMSSelectAccessDialog {
         this.titleDialog = '';
         this.titleResult = '';
         this.sizeUpdateDefault = '1024px';
+        this.disableSelectedList = false;
+        this.formatTooltip = null;
+        this.formatMsgDisable = null;
+        this.maxWidthNode = 510;
     }
 }
 
@@ -31913,6 +31963,17 @@ class QMSSelectAccessDialogComponent {
         this.arrSkeleton = new Array(8).fill(0);
         //prevent event paging when search emit search event
         this.getSearching$ = new BehaviorSubject(false);
+        this.allowRemove = (type, item) => {
+            if (!this.dialogData.disableSelectedList)
+                return true;
+            const { persons, departments, userGroups } = this.dialogData.data.selectedData;
+            switch (type) {
+                case OptionSelectAccessEnum.PERSON: return !persons.some(x => x.id == item.id);
+                case OptionSelectAccessEnum.DEPARTMENT: return !departments.some(x => x.id == item.id);
+                case OptionSelectAccessEnum.USER_GROUP: return !userGroups.some(x => x.id == item.id);
+                default: return true;
+            }
+        };
         this._initResultAccess();
     }
     get selectedDepartments() {
@@ -31936,6 +31997,17 @@ class QMSSelectAccessDialogComponent {
     }
     set tree(data) {
         this.treeDepartment = data;
+        const groups = this.resultAccess.departments.filter(x => x.isGroup);
+        if (groups.length)
+            groups.forEach(group => {
+                if (!group.childCount) {
+                    if (!this.treeDepartment)
+                        return;
+                    const node = this.treeDepartment.treeControl.dataNodes.find(x => x.id == group.id);
+                    if (node)
+                        group.childCount = this.treeDepartment.getListChildrenOfNode(node).length;
+                }
+            });
     }
     get personFiltered() {
         var _a;
@@ -32105,6 +32177,8 @@ class QMSSelectAccessDialogComponent {
         this.onSearchUserGroupEvent.emit(this.userGroupForm.value);
     }
     onSelectItem(type, item) {
+        if (!this.allowRemove(type, item))
+            return;
         item.selected = !item.selected;
         switch (type) {
             case OptionSelectAccessEnum.PERSON:
@@ -32205,6 +32279,13 @@ class QMSSelectAccessDialogComponent {
                 return false;
         }
     }
+    isDisabledSelectAll(type) {
+        switch (type) {
+            case OptionSelectAccessEnum.PERSON: return !this.personFiltered.length || this.personFiltered.every(x => !this.allowRemove(type, x));
+            case OptionSelectAccessEnum.USER_GROUP: return !this.userGroupFiltered.length || this.userGroupFiltered.every(x => !this.allowRemove(type, x));
+            default: return false;
+        }
+    }
     isIndeterminate(type) {
         var _a, _b;
         switch (type) {
@@ -32217,6 +32298,8 @@ class QMSSelectAccessDialogComponent {
         }
     }
     onCheckAll(type, $event) {
+        if (this.isDisabledSelectAll(type))
+            return;
         $event.checked = !$event.checked;
         switch (type) {
             case this.OPTION_ENUM.PERSON: {
@@ -32226,14 +32309,14 @@ class QMSSelectAccessDialogComponent {
                 }
                 if (!this.personFiltered.length)
                     return;
-                this.personFiltered.forEach(x => x.selected = $event.checked);
+                this.personFiltered.filter(x => this.allowRemove(type, x)).forEach(x => x.selected = $event.checked);
                 const idFiltered = this.personFiltered.map(x => x.id);
                 if ($event.checked) {
                     const idPersonSelected = this.resultAccess.persons.map(x => x.id);
-                    this.resultAccess.persons = [...this.resultAccess.persons, ...this.personFiltered.filter(x => !idPersonSelected.includes(x.id))];
+                    this.resultAccess.persons = [...this.resultAccess.persons, ...this.personFiltered.filter(x => this.allowRemove(type, x) && !idPersonSelected.includes(x.id))];
                     return;
                 }
-                this.resultAccess.persons = this.resultAccess.persons.filter(x => !idFiltered.includes(x.id));
+                this.resultAccess.persons = this.resultAccess.persons.filter(x => !this.allowRemove(type, x) || !idFiltered.includes(x.id));
                 break;
             }
             case this.OPTION_ENUM.USER_GROUP: {
@@ -32242,14 +32325,14 @@ class QMSSelectAccessDialogComponent {
                     return;
                 }
                 const userGroupPaging = this.userGroupFiltered;
-                userGroupPaging.forEach(x => x.selected = $event.checked);
+                userGroupPaging.filter(x => this.allowRemove(type, x)).forEach(x => x.selected = $event.checked);
                 const idFiltered = userGroupPaging.map(x => x.id);
                 if ($event.checked) {
                     const idSelected = this.resultAccess.userGroups.map(x => x.id);
-                    this.resultAccess.userGroups = [...this.resultAccess.userGroups, ...userGroupPaging.filter(x => !idSelected.includes(x.id))];
+                    this.resultAccess.userGroups = [...this.resultAccess.userGroups, ...userGroupPaging.filter(x => this.allowRemove(type, x) && !idSelected.includes(x.id))];
                     return;
                 }
-                this.resultAccess.userGroups = this.resultAccess.userGroups.filter(x => !idFiltered.includes(x.id));
+                this.resultAccess.userGroups = this.resultAccess.userGroups.filter(x => !this.allowRemove(type, x) || !idFiltered.includes(x.id));
                 break;
             }
             default:
@@ -32281,6 +32364,7 @@ class QMSSelectAccessDialogComponent {
                 if (!departments)
                     return;
                 departments.children = x.children;
+                departments.childCount = x.childCount;
                 if (departments.children.length)
                     departments.children.forEach(x => {
                         const index = this.resultAccess.departments.findIndex(item => item.id === x.id);
@@ -32289,6 +32373,9 @@ class QMSSelectAccessDialogComponent {
                     });
             });
         }
+        this.resultAccess.departments.forEach(item => {
+            item.children = item.children.filter((x, index) => index === item.children.findIndex(_x => x.id === _x.id));
+        });
         this._departmentSelected = _.cloneDeep(this.resultAccess.departments);
         this.cdRef.detectChanges();
     }
@@ -32321,11 +32408,16 @@ class QMSSelectAccessDialogComponent {
         if (!this.treeDepartment)
             return;
         data = data;
+        if (this.dialogData.disableSelectedList) {
+            data.data.forEach(x => x.disabled = !this.allowRemove(OptionSelectAccessEnum.DEPARTMENT, x));
+        }
         this.treeDepartment.setResultSearch(data);
     }
     generateTooltip(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})` : ''}`);
+        var _a, _b;
+        if ((_a = this.dialogData) === null || _a === void 0 ? void 0 : _a.formatTooltip)
+            return this.dialogData.formatTooltip(node);
+        return (node === null || node === void 0 ? void 0 : node.isGroup) ? this.formatString(this.LANG.TOOLTIP_INCLUDE_SUB_DEPARTMENT, node.name, (_b = node.children) === null || _b === void 0 ? void 0 : _b.length.toString()) : (`${node.name} ${(node === null || node === void 0 ? void 0 : node.subName) ? `- (${node.subName})` : ''}`);
     }
     formatString(...replacements) {
         let result = arguments[0];
@@ -32340,6 +32432,9 @@ class QMSSelectAccessDialogComponent {
     }
     updateDepartment(data = []) {
         this.getLoading$.next(false);
+        if (this.dialogData.disableSelectedList) {
+            data.forEach(item => item.disabled = !this.allowRemove(OptionSelectAccessEnum.DEPARTMENT, item));
+        }
         this.dialogData.treeDepartmentConfig.treeData = _.cloneDeep(data);
     }
     updateOptionPersonFilter(departmentFilter = [], userGroupFilter = []) {
@@ -32355,7 +32450,7 @@ class QMSSelectAccessDialogComponent {
 QMSSelectAccessDialogComponent.decorators = [
     { type: 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 class=\"btn-close-dialog\" qms-btn-icon color=\"light\">\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 overlayPanelClass=\"select-access-paginator\" #pagingPerson *ngIf=\"getPerson$.value.length > 10\" [length]=\"getPerson$.value.length\"\r\n                    [numHidden]=\"0\" [pageSize]=\"getPerson$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\r\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)' [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            <div>\r\n              <mat-dialog-content>\r\n                <form (submit)=\"onFilterUserGroup()\">\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                </form>\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 overlayPanelClass=\"select-access-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            </div>\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 [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\"\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]=\"generateTooltip(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=\"qms-loading-container\">\r\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\r\n      <div class=\"qms-loader__wrapper\">\r\n        <div class=\"row-loader\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
+                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 class=\"btn-close-dialog\" qms-btn-icon color=\"light\">\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                                  [disabled]=\"isDisabledSelectAll(OPTION_ENUM.PERSON)\"\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 overlayPanelClass=\"select-access-paginator\" #pagingPerson *ngIf=\"getPerson$.value.length > 10\" [length]=\"getPerson$.value.length\"\r\n                    [numHidden]=\"0\" [pageSize]=\"getPerson$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\r\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)' [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            <div>\r\n              <mat-dialog-content>\r\n                <form (submit)=\"onFilterUserGroup()\">\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                </form>\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                                  [disabled]=\"isDisabledSelectAll(OPTION_ENUM.USER_GROUP)\"\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 overlayPanelClass=\"select-access-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            </div>\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 [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\" [maxWidthNode]=\"dialogData.maxWidthNode\"\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\" class=\"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-chip [removable]=\"true\">\r\n        <span qms-chip-body>\r\n          <span [qms-tool-tip]=\"generateTooltip(item)\"\r\n                position=\"top\" mode=\"dark\" 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 *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\" class=\"remove-chip-icon\">cancel</mat-icon>\r\n        <mat-icon *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\" [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</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 [disabled]=\"!allowRemove(type, item)\" [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=\"qms-loading-container\">\r\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\r\n      <div class=\"qms-loader__wrapper\">\r\n        <div class=\"row-loader\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
                 animations: [SelectAccessAnimationTrigger],
                 providers: [
                     {