qms-angular 1.1.74 → 1.1.75

package/bundles/qms-angular.umd.js

@@ -36806,8 +36806,8 @@
                 if (value === 0)
                     _this.cdkVirtualScrollViewport &&
                         _this.cdkVirtualScrollViewport.scrolledIndexChange
-                            .pipe(operators.takeUntil(_this.untilDestroyLoadMore$), operators.map(function (_) { return _this.cdkVirtualScrollViewport.measureScrollOffset('bottom'); }), operators.pairwise(), operators.filter(function (_b) {
-                            var _c = __read(_b, 2), x1 = _c[0], x2 = _c[1];
+                            .pipe(operators.takeUntil(_this.untilDestroyLoadMore$), operators.map(function (_) { return _this.cdkVirtualScrollViewport.measureScrollOffset('bottom'); }), operators.pairwise(), operators.filter(function (_c) {
+                            var _d = __read(_c, 2), x1 = _d[0], x2 = _d[1];
                             return x1 > x2 && x2 < 140;
                         }), operators.throttleTime(200), operators.tap(function (_) {
                             if (_this.getLoadingMore$.value)
@@ -36867,7 +36867,7 @@
                 return;
             var treeNodes = this.treeDepartmentService.convertToTreeData(this.config.selectedList.map(function (x) { return (Object.assign(Object.assign({}, x), { parentId: x.groupId })); }));
             this.execWithoutEmitNodeChangeEvent(function () {
-                var _b;
+                var _c;
                 var selectedItems = [];
                 var reMapTreeNode = function (item, clearGroupId) {
                     if (clearGroupId === void 0) { clearGroupId = false; }
@@ -36887,7 +36887,7 @@
                     selectedItems.push(Object.assign(Object.assign({}, reMapTreeNode(item, true)), { children: item.children.map(function (x) { return reMapTreeNode(x); }) }));
                 });
                 if (!_this.config.moveLocationMode) {
-                    (_b = _this.resultSelected).push.apply(_b, __spreadArray([], __read(selectedItems)));
+                    (_c = _this.resultSelected).push.apply(_c, __spreadArray([], __read(selectedItems)));
                 }
             });
             this.onValueChangeEvent.emit(this.resultSelected);
@@ -36895,7 +36895,7 @@
             this.cdRef.detectChanges();
         };
         SelectDepartmentTreeComponent.prototype._initListSelected = function () {
-            var _b;
+            var _c;
             this._selectedList = this.treeDepartmentService.convertToTreeData(this.config.selectedList);
             //Convert array selectedList into nested array as 1 level form
             var indexRemove = [];
@@ -36913,7 +36913,7 @@
                 _loop_1(i);
             }
             this._selectedList = this._selectedList.filter(function (_, index) { return !indexRemove.includes(index); });
-            (_b = this.resultSelected).push.apply(_b, __spreadArray([], __read(this._selectedList)));
+            (_c = this.resultSelected).push.apply(_c, __spreadArray([], __read(this._selectedList)));
             this.onValueChangeEvent.emit(this.resultSelected);
         };
         // handle selected list when data nodes change
@@ -36932,7 +36932,7 @@
                         }
                     });
                     var _loop_2 = function (i) {
-                        var _b;
+                        var _c;
                         var element = data[i];
                         var item = _this._selectedList.find(function (x) { var _a; return x.id === element.id || ((_a = x.children) === null || _a === void 0 ? void 0 : _a.some(function (x1) { return x1.id === element.id; })); });
                         if (!!item) {
@@ -36955,7 +36955,7 @@
                                     _nestedNode.groupId = item.children[0].groupId;
                                     _nestedNode.isGroup = false;
                                 });
-                                (_b = _this.checkListSelection).select.apply(_b, __spreadArray([], __read(itemSelect)));
+                                (_c = _this.checkListSelection).select.apply(_c, __spreadArray([], __read(itemSelect)));
                             }
                         }
                     };
@@ -36973,8 +36973,8 @@
          */
         SelectDepartmentTreeComponent.prototype.onBeforeInitNodeSelected = function (callback) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             if (!this.config.lazy)
                                 return [2 /*return*/];
@@ -36982,8 +36982,8 @@
                             if (!!!callback) return [3 /*break*/, 2];
                             return [4 /*yield*/, callback()];
                         case 1:
-                            _b.sent();
-                            _b.label = 2;
+                            _c.sent();
+                            _c.label = 2;
                         case 2:
                             this.onBeforeInitNodeSelected$.next();
                             return [2 /*return*/];
@@ -36996,8 +36996,8 @@
             var _this = this;
             this.checkListSelection.changed
                 .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (_b) {
-                var added = _b.added, removed = _b.removed;
+                .subscribe(function (_c) {
+                var added = _c.added, removed = _c.removed;
                 if (_this.lockHandleSelectionChange)
                     return;
                 var checkExistInResult = function (node) { return _this.resultSelected.findIndex(function (x) { return x.id === node.id; }) > -1; };
@@ -37101,7 +37101,7 @@
                         return foundNode === null || foundNode === void 0 ? void 0 : foundNode.children;
                     };
                     var findNodeById_1 = function (id, nodes) {
-                        var e_1, _b;
+                        var e_1, _c;
                         try {
                             for (var nodes_1 = __values(nodes), nodes_1_1 = nodes_1.next(); !nodes_1_1.done; nodes_1_1 = nodes_1.next()) {
                                 var node = nodes_1_1.value;
@@ -37119,7 +37119,7 @@
                         catch (e_1_1) { e_1 = { error: e_1_1 }; }
                         finally {
                             try {
-                                if (nodes_1_1 && !nodes_1_1.done && (_b = nodes_1.return)) _b.call(nodes_1);
+                                if (nodes_1_1 && !nodes_1_1.done && (_c = nodes_1.return)) _c.call(nodes_1);
                             }
                             finally { if (e_1) throw e_1.error; }
                         }
@@ -37253,7 +37253,7 @@
             this.onScrollIntoNode(flatNode.id);
         };
         SelectDepartmentTreeComponent.prototype.onCheckAllRootTreeNode = function () {
-            var _b;
+            var _c;
             var _this = this;
             if (this.config.isSelectOne || !this.config.activeSelectAllNode)
                 return;
@@ -37264,7 +37264,7 @@
                     var nestedNode = _this.convertToNestedNode(node);
                     nestedNode.isGroup = false;
                 });
-                (_b = this.checkListSelection).deselect.apply(_b, __spreadArray([], __read(this.treeControl.dataNodes.filter(function (x) { return !x.disabled; }))));
+                (_c = this.checkListSelection).deselect.apply(_c, __spreadArray([], __read(this.treeControl.dataNodes.filter(function (x) { return !x.disabled; }))));
                 return;
             }
             ;
@@ -37482,7 +37482,7 @@
             this.handleCheckNode(flatNode);
         };
         SelectDepartmentTreeComponent.prototype.onSelectNode = function () {
-            var _b;
+            var _c;
             var nodeIds = [];
             for (var _i = 0; _i < arguments.length; _i++) {
                 nodeIds[_i] = arguments[_i];
@@ -37490,10 +37490,10 @@
             var nodes = this.treeControl.dataNodes.filter(function (x) { return nodeIds.includes(x.id); });
             if (!nodes.length)
                 return;
-            (_b = this.checkListSelection).select.apply(_b, __spreadArray([], __read(nodes)));
+            (_c = this.checkListSelection).select.apply(_c, __spreadArray([], __read(nodes)));
         };
         SelectDepartmentTreeComponent.prototype.onDeselectNode = function () {
-            var _b;
+            var _c;
             var nodeIds = [];
             for (var _i = 0; _i < arguments.length; _i++) {
                 nodeIds[_i] = arguments[_i];
@@ -37501,7 +37501,7 @@
             var nodes = this.treeControl.dataNodes.filter(function (x) { return nodeIds.includes(x.id); });
             if (!nodes.length)
                 return;
-            (_b = this.checkListSelection).deselect.apply(_b, __spreadArray([], __read(nodes)));
+            (_c = this.checkListSelection).deselect.apply(_c, __spreadArray([], __read(nodes)));
         };
         /**
          * Toggles a value between selected and deselected.
@@ -37531,15 +37531,15 @@
          */
         SelectDepartmentTreeComponent.prototype.onBeforeCheckNode = function (node, callback) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             this._handlingLazyObject.checkNode = true;
                             if (!!!callback) return [3 /*break*/, 2];
                             return [4 /*yield*/, callback(node)];
                         case 1:
-                            _b.sent();
-                            _b.label = 2;
+                            _c.sent();
+                            _c.label = 2;
                         case 2:
                             this.handleCheckNode(node);
                             this._handlingLazyObject.checkNode = false;
@@ -37549,7 +37549,7 @@
             });
         };
         SelectDepartmentTreeComponent.prototype.handleCheckNode = function (node) {
-            var _b, _c, _d;
+            var _c, _d, _e;
             var _this = this;
             var isSelected = this.isSelectedNode(node);
             var childSelected = this.getChildrenSelected(node).filter(function (x) { return !x.disabled; });
@@ -37572,14 +37572,14 @@
                     _node.isGroup = false;
                 });
                 this.updateDataTree(this.currentTreeData);
-                (_b = this.checkListSelection).deselect.apply(_b, __spreadArray([], __read(childSelected.map(function (x) { return _this.resetNode(x); }))));
-                (_c = this.checkListSelection).select.apply(_c, __spreadArray([], __read(children.map(function (x) { return _this.resetNode(x); }))));
+                (_c = this.checkListSelection).deselect.apply(_c, __spreadArray([], __read(childSelected.map(function (x) { return _this.resetNode(x); }))));
+                (_d = this.checkListSelection).select.apply(_d, __spreadArray([], __read(children.map(function (x) { return _this.resetNode(x); }))));
                 return;
             }
             var _selectedIndex = this._selectedList.findIndex(function (x) { return x.id === node.id; });
             _selectedIndex > -1 && this._selectedList.splice(_selectedIndex, 1);
             var deselectNodes = (this.isIncludeChildren || nestedNode.isGroup) ? childSelected : [node];
-            (_d = this.checkListSelection).deselect.apply(_d, __spreadArray([], __read(deselectNodes)));
+            (_e = this.checkListSelection).deselect.apply(_e, __spreadArray([], __read(deselectNodes)));
             nestedNode.isGroup = false;
             this.updateDataTree(this.currentTreeData);
             return;
@@ -37691,13 +37691,13 @@
             }
         };
         SelectDepartmentTreeComponent.prototype.onCheckItemSearchResult = function (item) {
-            var _b;
+            var _c;
             if (item.disabled || this.config.moveLocationMode) {
                 return;
             }
             this.checkListSelectionSearch.toggle(item);
             if (this.config.isSelectOne) {
-                (_b = this.checkListSelectionSearch).deselect.apply(_b, __spreadArray([], __read(this.checkListSelectionSearch.selected.filter(function (x) { return x.id != item.id; }))));
+                (_c = this.checkListSelectionSearch).deselect.apply(_c, __spreadArray([], __read(this.checkListSelectionSearch.selected.filter(function (x) { return x.id != item.id; }))));
             }
             this.onCheckItemSearchEvent.emit({
                 state: this.checkListSelectionSearch.isSelected(item),
@@ -37716,8 +37716,8 @@
         SelectDepartmentTreeComponent.prototype.onBeforeCheckItemSearch = function (item, callback) {
             return __awaiter(this, void 0, void 0, function () {
                 var isSelect;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             item.isLoading = true;
                             this._handlingLazyObject.checkItemSearch = true;
@@ -37725,8 +37725,8 @@
                             if (!!!callback) return [3 /*break*/, 2];
                             return [4 /*yield*/, callback(item)];
                         case 1:
-                            _b.sent();
-                            _b.label = 2;
+                            _c.sent();
+                            _c.label = 2;
                         case 2:
                             item.isLoading = false;
                             this._handleCheckResutlSearch(item, isSelect);
@@ -37740,15 +37740,15 @@
         SelectDepartmentTreeComponent.prototype.onBeforeCheckAllSearch = function (callback) {
             return __awaiter(this, void 0, void 0, function () {
                 var i, item;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             this._handlingLazyObject.checkAllSearch = true;
                             if (!!!callback) return [3 /*break*/, 2];
                             return [4 /*yield*/, callback(this.resultSearch)];
                         case 1:
-                            _b.sent();
-                            _b.label = 2;
+                            _c.sent();
+                            _c.label = 2;
                         case 2:
                             this._handlingLazyObject.checkAllSearch = false;
                             if (!this.resultSearch.length)
@@ -37771,33 +37771,37 @@
             var _this = this;
             if (!!this.resultSearch.length)
                 this.resultSearch.forEach(function (item) {
-                    var _a;
-                    var isExistInResultSelected = (_a = _this.resultSelected) === null || _a === void 0 ? void 0 : _a.some(function (x) { var _a; return x.id === item.id || ((_a = x.children) === null || _a === void 0 ? void 0 : _a.some(function (y) { return y.id === item.id; })); });
+                    var _a, _b;
+                    var isExistInResultSelected = false;
+                    if (_this.isIncludeChildren) {
+                        isExistInResultSelected = (_a = _this.resultSelected) === null || _a === void 0 ? void 0 : _a.some(function (x) { var _a; return x.id === item.id || ((_a = x.children) === null || _a === void 0 ? void 0 : _a.some(function (y) { return y.id === item.id; })); });
+                    }
+                    else {
+                        isExistInResultSelected = (_b = _this.resultSelected) === null || _b === void 0 ? void 0 : _b.some(function (x) { return x.id === item.id; });
+                    }
                     isExistInResultSelected ? _this.checkListSelectionSearch.select(item) : _this.checkListSelectionSearch.deselect(item);
                 });
         };
         SelectDepartmentTreeComponent.prototype._handleCheckResutlSearch = function (item, state) {
             if (state === void 0) { state = this.isSelectItemSearch(item.id); }
             item.isLoading = false;
-            if (this.isIncludeChildren) {
-                var currentNode = this.getNodeById(item.id.toString());
-                if (!!currentNode) {
-                    if (state) {
-                        if (this.checkListSelection.isSelected(currentNode))
-                            return;
-                        if (this.checkListSelectionSearch.isSelected(item)) {
-                            var nestedNode = ___namespace.cloneDeep(this.convertToNestedNode(currentNode));
-                            this.resultSelected.push(nestedNode);
-                            this.checkListSelection.select(currentNode);
-                        }
-                    }
-                    else {
-                        this.checkListSelection.deselect(currentNode);
+            var currentNode = this.getNodeById(item.id.toString());
+            if (!!currentNode) {
+                if (state) {
+                    if (this.checkListSelection.isSelected(currentNode))
+                        return;
+                    if (this.checkListSelectionSearch.isSelected(item)) {
+                        var nestedNode = ___namespace.cloneDeep(this.convertToNestedNode(currentNode));
+                        this.resultSelected.push(nestedNode);
+                        this.checkListSelection.select(currentNode);
                     }
-                    this.config.isSelectOne ? this._handleSelectOne(currentNode.id) : this.handleCheckNode(currentNode);
-                    this.cdRef.detectChanges();
-                    return;
                 }
+                else {
+                    this.checkListSelection.deselect(currentNode);
+                }
+                this.config.isSelectOne ? this._handleSelectOne(currentNode.id) : this.handleCheckNode(currentNode);
+                this.cdRef.detectChanges();
+                return;
             }
             if (this.config.isSelectOne) {
                 this._handleSelectOne(item.id);
@@ -37856,7 +37860,7 @@
                 return;
             if (this.config.handleCheckAllItemSearch) {
                 var _loop_4 = function (i) {
-                    var _b;
+                    var _c;
                     var item = this_2.resultSearch[i];
                     if (item.disabled)
                         return "continue";
@@ -37870,7 +37874,7 @@
                     else {
                         var _itemSelections = this_2.checkListSelectionSearch.selected.filter(function (x) { return x.id === item.id; });
                         if (_itemSelections.length)
-                            (_b = this_2.checkListSelectionSearch).deselect.apply(_b, __spreadArray([], __read(_itemSelections)));
+                            (_c = this_2.checkListSelectionSearch).deselect.apply(_c, __spreadArray([], __read(_itemSelections)));
                     }
                     if (!this_2.config.lazy || !this_2._handlingLazyObject.checkAllSearch)
                         this_2._handleCheckResutlSearch(item, checked);
@@ -37927,7 +37931,7 @@
              * @param mode default is update that replace current list children by new list children , if mode = 'insert' will insert new values to list children existed before.
         */
         SelectDepartmentTreeComponent.prototype.updateChildOfNode = function (node, data, mode) {
-            var _b;
+            var _c;
             if (data === void 0) { data = []; }
             if (mode === void 0) { mode = 'update'; }
             node.isLoading = false;
@@ -37938,7 +37942,7 @@
                 return;
             switch (mode) {
                 case 'insert':
-                    (_b = nestedNode.children).push.apply(_b, __spreadArray([], __read(dataNodes)));
+                    (_c = nestedNode.children).push.apply(_c, __spreadArray([], __read(dataNodes)));
                     break;
                 case 'update':
                     nestedNode.children = dataNodes;
@@ -39268,6 +39272,19 @@
                 return;
             this.getLoading$.next(this.optionSelect.value !== this.OPTION_ENUM.DEPARTMENT);
             this.onPagingEvent.emit(Object.assign(Object.assign({}, val), { type: type }));
+            var currentIndex;
+            switch (this.optionSelect.value) {
+                case this.OPTION_ENUM.PERSON: {
+                    currentIndex = this.cdkVirtualScrollViewportPerson.getRenderedRange().end;
+                    this.cdkVirtualScrollViewportPerson.scrollToIndex(currentIndex);
+                    break;
+                }
+                case this.OPTION_ENUM.USER_GROUP: {
+                    currentIndex = this.cdkVirtualScrollViewportUserGroup.getRenderedRange().end;
+                    this.cdkVirtualScrollViewportUserGroup.scrollToIndex(currentIndex);
+                    break;
+                }
+            }
         };
         QMSSelectAccessDialogComponent.prototype.onResultDepartmentChange = function (event) {
             this.resultAccess.departments = event;
@@ -39335,10 +39352,11 @@
             this.optionSelect.setValue(newType);
             var event$ = new select.MatSelectChange(null, newType);
             this.onSelectionTypeChange(event$);
+            this.setShowSearchControl(false);
         };
         QMSSelectAccessDialogComponent.prototype.onScroll = function () {
             var currentPaging = null;
-            var offset = 10;
+            var offset;
             switch (this.optionSelect.value) {
                 case this.OPTION_ENUM.PERSON: {
                     currentPaging = this.getPerson$.value;
@@ -39377,7 +39395,7 @@
     QMSSelectAccessDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-select-access-dialog',
-                    template: "<div qms-dialog-container-v2 class=\"select-access-dialog-container\" [ngClass]=\"{'h-75': dialogData.treeDepartmentConfig.isMobile}\">\n  <div qms-dialog-header>\n    <div class=\"access-dialog-header mb-2\">\n      <span class=\"header-title\">{{dialogData.titleDialog || LANG.SELECT_ACCESS}}</span>\n      <button matDialogClose class=\"btn-close-dialog\" qms-btn-icon color=\"light\" *ngIf=\"!dialogData.treeDepartmentConfig.isMobile\">\n        <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div *ngIf=\"!dialogData.treeDepartmentConfig.isMobile\" [class.active]=\"optionSelect.value !== null\" qms-dialog-content class=\"qms-dialog-content\">\n    <div class=\"access-dialog-wraper\">\n      <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option  w-100\"\n        appearance=\"fill\">\n        <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\n        <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\n          disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\n\n          <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\n            {{ LANG[item.displayName] }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"body-dialog-container\">\n        <!-- Person Access -->\n        <div class=\"option-selected-content\">\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n            <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n              <mat-dialog-content>\n                <div class=\"group-filter-person-option\">\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n                    class=\"w-100\" appearance=\"fill\">\n                    <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\n                      (selectionChange)=\"onFilterPerson()\" \n                      disableOptionCentering>\n                      <mat-select-trigger>\n                        {{personForm.controls['userGroup'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"userGroupFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\n                          noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option mode=\"dark\" class=\"opt-check-icon\"\n                        *ngFor=\"let item of filteredSearchTextBox.userGroup.value\" [value]=\"item\">\n                        <span qms-elipsify position=\"top\" mode=\"dark\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['userGroup'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span [@inOutAnimation] (click)=\"personForm.get('userGroup').setValue(''); onFilterPerson()\" class=\"pointer \" \n                    matSuffix aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                  <!-- input field department filter person -->\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n                    class=\"w-100 input-select-option\" qms-form qms-select-input>\n                    <mat-label>{{LANG.DEPARTMENT_UNIT}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\n                      (selectionChange)=\"onFilterPerson()\" \n                      formControlName=\"department\">\n                      <mat-select-trigger>\n                        {{personForm.controls['department'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"departmentFilter\"\n                          [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\" noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option class=\"opt-check-icon\" *ngFor=\"let item of filteredSearchTextBox.department.value\"\n                        [value]=\"item\">\n                        <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['department'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span (click)=\"setFormControlValue(['recursive','department'], [false,'']); onFilterPerson()\" [@inOutAnimation]\n                      class=\"pointer\" matSuffix aria-label=\"Clear\"\n                      *ngIf=\"personForm.get('department').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                </div>\n\n                <mat-slide-toggle [@inOutAnimation] *ngIf=\"personForm.controls['department'].value\"\n                  class=\"w-100 slide-toggle\" formControlName=\"recursive\" color=\"default\" qms-group-options>\n                  <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"w-100\" appearance=\"fill\" qms-form qms-search-field>\n                  <input matInput appearance=\"off\" [placeholder]=\"LANG.SEARCH_WITH_NAME\" formControlName=\"keyword\"\n                    type=\"text\" autocomplete=\"off\" />\n                  <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\n                    (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                  <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                    diameter=\"20\"></mat-progress-spinner>\n                  <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\n                    class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\n                    aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n                    <button qms-btn-icon color=\"light\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </span>\n                </mat-form-field>\n                <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\n                  {{LANG.FILTER}}\n                </button>\n              </mat-dialog-content>\n\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && personFiltered.length && !dialogData.modeSelectOnePerson\"\n                      [disabled]=\"isDisabledSelectAll(OPTION_ENUM.PERSON)\" #checkPerson class=\"w-100 mb-1 checkbox-all\"\n                      (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\n                      [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\n                      color=\"default\" qms-group-options>\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} </span>\n                      <span>(<b>{{personFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value; then loading\">\n                  </ng-container>\n                  <div [@inOutAnimation] *ngIf=\"personFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div class=\"item  mt-1\" [@inOutAnimation]\n                      *ngFor=\"let employee of personFiltered; trackBy: trackByFn\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!personFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingPerson\n                    *ngIf=\"getPerson$.value.length > 10\" [length]=\"getPerson$.value.length\" [numHidden]=\"0\"\n                    [pageSize]=\"getPerson$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)' [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </form>\n          </ng-container>\n\n          <!-- UserGroup Access -->\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n            <div>\n              <mat-dialog-content>\n                <form (submit)=\"onFilterUserGroup()\">\n                  <mat-form-field class=\"w-100\" qms-form qms-search-field>\n                    <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n                      [placeholder]=\"dialogData.userGroupConfig?.searchName || LANG.USER_GROUP\" />\n                    <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n                      matSuffix>\n                      <mat-icon>search</mat-icon>\n                    </button>\n                    <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                      diameter=\"20\"></mat-progress-spinner>\n                    <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value && !getLoading$.value\" matSuffix\n                      qms-input-clear>\n                      <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </div>\n                  </mat-form-field>\n                </form>\n              </mat-dialog-content>\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && (userGroupFiltered.length && !dialogData.modeSelectOneUserGroup)\"\n                      [disabled]=\"isDisabledSelectAll(OPTION_ENUM.USER_GROUP)\" #checkUserGroup\n                      class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\n                      [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\n                      (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\n                      qms-group-options>\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n                      <span>(<b>{{userGroupFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value;then loading\">\n                  </ng-container>\n                  <div *ngIf=\"userGroupFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of userGroupFiltered\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ? itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!userGroupFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingUserGroup class=\"my-1\"\n                    *ngIf=\"getUserGroup$.value.length > 10 \" [length]=\"getUserGroup$.value.length\" [numHidden]=\"0\"\n                    [pageSize]=\"getUserGroup$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.USER_GROUP)' [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </div>\n          </ng-container>\n\n          <!-- Department Access -->\n          <ng-container\n            *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && getLoading$.value; then loading\"></ng-container>\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && !getLoading$.value\"\n            class=\"person-access\">\n            <qms-select-department-tree #tree [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\"\n              [maxWidthNode]=\"dialogData.maxWidthNode\" (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\n              (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n              (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\n              (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\n            </qms-select-department-tree>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"optionSelect.value !== null\" class=\"result-wrapper\">\n      <div class=\"result-selected-container\">\n        <div [@inOutAnimation] *ngIf=\"(options.length === 1) || (options.length > 1 && optionSelect.value !== null)\"\n          class=\"header-title result-header\">\n          <span>\n            {{\n            dialogData.titleResult || LANG.RESULTS}}\n            <span *ngIf=\"options.length === 1 && hasItemSelected()\">\n              ({{getResultTabActive().length}})\n            </span>\n          </span>\n        </div>\n        <div class=\"result-body\">\n          <!-- Result Person  -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\n          </ng-container>\n          <!-- Result User group -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title: dialogData.userGroupConfig?.searchName || LANG.USER_GROUP}\">\n          </ng-container>\n          <!-- Result Department -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data: resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"dialogData.treeDepartmentConfig.isMobile\">\n    <mat-tab-group (selectedTabChange)=\"onSelectionTabChange($event)\" [selectedIndex]=\"OPTION_ENUM.DEPARTMENT\">\n      <!-- Tab person -->\n      <mat-tab label=\"{{LANG.PERSON}}\" class=\"tab-body-container\">\n        <ng-container [ngTemplateOutlet]=\"viewContentTabMobile\"\n          [ngTemplateOutletContext]=\"{form: personForm, type: OPTION_ENUM.PERSON, text: LANG.SEARCH_WITH_NAME, id: 'checkPerson', filter: personFiltered}\"></ng-container>\n        <!-- Result selected -->\n        <mat-accordion>\n          <mat-expansion-panel>\n            <mat-expansion-panel-header>\n              <mat-panel-title>{{LANG.SELECTED}} ({{resultAccess.persons?.length}})</mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class=\"result-body selected-containter\" qms-scrollbar>\n              <!-- Result Person  -->\n              <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\" [ngTemplateOutlet]=\"listChip\"\n                [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\n              </ng-container>\n            </div>\n          </mat-expansion-panel>\n        </mat-accordion>\n      </mat-tab>\n      <!-- Tab user group -->\n      <mat-tab label=\"{{LANG.USER_GROUP}}\" class=\"tab-body-container\">\n        <ng-container [ngTemplateOutlet]=\"viewContentTabMobile\"\n          [ngTemplateOutletContext]=\"{form: userGroupForm, type: OPTION_ENUM.USER_GROUP, text: LANG.ROLE, id: 'checkUserGroup', filter: userGroupFiltered}\"></ng-container>\n        <!-- Result selected -->\n        <mat-accordion>\n          <mat-expansion-panel>\n            <mat-expansion-panel-header>\n              <mat-panel-title>{{LANG.SELECTED}} ({{resultAccess.userGroups?.length}})</mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class=\"result-body selected-containter\" qms-scrollbar>\n              <!-- Result user group  -->\n              <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\" [ngTemplateOutlet]=\"listChip\"\n                [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\n              </ng-container>\n            </div>\n          </mat-expansion-panel>\n        </mat-accordion>\n      </mat-tab>\n      <!-- Tab department -->\n      <mat-tab label=\"{{LANG.DEPARTMENT}}\" class=\"tab-body-container\">\n        <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\n        <ng-container *ngIf=\"!getLoading$.value\" class=\"person-access\">\n          <qms-select-department-tree #tree [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\"\n            [height]=\"'40vh'\" [maxWidthNode]=\"dialogData.maxWidthNode\"\n            (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\n            (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n            (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\n            (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\n          </qms-select-department-tree>\n        </ng-container>\n        <!-- Result selected -->\n        <mat-accordion>\n          <mat-expansion-panel>\n            <mat-expansion-panel-header>\n              <mat-panel-title>{{LANG.SELECTED}} ({{resultAccess.departments?.length}})</mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class=\"result-body selected-containter\" qms-scrollbar>\n              <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\" [ngTemplateOutlet]=\"listChip\"\n                [ngTemplateOutletContext]=\"{data:resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT_UNIT}\">\n              </ng-container>\n            </div>\n          </mat-expansion-panel>\n        </mat-accordion>\n      </mat-tab>\n    </mat-tab-group>\n  </ng-container>\n\n  <mat-divider class=\"mx-auto\"></mat-divider>\n  <div qms-dialog-footer class=\"confirm__button__groups\" [class.none-option]=\"optionSelect.value === null\">\n    <button *ngIf=\"optionSelect.value !== null\"\n      [disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\" class=\"btn-add\"\n      [class.qms-btn-disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\"\n      [mat-dialog-close]=\"resultAccess\" qms-btn>\n      <span>{{dialogData.confirmTitle || LANG.ADD}}</span>\n    </button>\n    <button qms-btn-text mat-dialog-close>\n      {{dialogData.cancelTitle || LANG.CANCEL}}\n    </button>\n  </div>\n</div>\n\n<!-- Template -->\n<ng-template #noResult>\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n    <path\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\"\n      fill=\"#0163B3\" />\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n  </svg>\n</ng-template>\n\n<!-- Template list chip -->\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\n  <mat-chip-list [@inOutAnimation] *ngIf=\"data?.length\" class=\"panel__item qms-scrollbar\">\n    <div [@inOutAnimation_2] *ngFor=\"let item of data; let i = index\">\n      <mat-chip (click)=\"onScollToNodeTreeDepartment(item)\" [@updateItemAnimation]\n        *qmsContentChanges=\"item.children?.length\" class=\"chip-item-result\" qms-chip [removable]=\"true\">\n        <span qms-chip-body>\n          <span [qms-tool-tip]=\"generateTooltip(item)\" position=\"top\" mode=\"dark\" class=\"text-label\" [ngClass]=\"{'content-break': dialogData.treeDepartmentConfig.isMobile}\">\n            {{item.name}}\n            <span *ngIf=\"item.subName\">({{ item.subName }})</span>\n          </span>\n          <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children && item?.isGroup\">\n            {{item.children.length}}/{{item.childCount}}\n          </span>\n        </span>\n        <mat-icon *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\"\n          class=\"remove-chip-icon\">cancel</mat-icon>\n        <mat-icon *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\"\n          [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n      </mat-chip>\n    </div>\n  </mat-chip-list>\n</ng-template>\n\n<!-- Template result with collapse -->\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\n  <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\n    <mat-expansion-panel-header>\n      <div class=\"title-content\">\n        <div class=\"qms-list-text\">\n          <div qms-line color=\"default-subtitle\">{{title}}\n            <span class=\"fw-600\">\n              ({{data?.length}})\n            </span>\n          </div>\n        </div>\n      </div>\n    </mat-expansion-panel-header>\n    <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\n    </ng-container>\n  </mat-expansion-panel>\n</ng-template>\n\n<!-- Template row without checkbox -->\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\n    <div class=\"item-content\">\n      <div class=\"text-label\">\n        <span class=\"text-label label-item fs-14 \">\n          {{ item.name }}\n        </span>\n        <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n      </div>\n      <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n    </div>\n    <div class=\"item-state\">\n      <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template checkbox  -->\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <mat-checkbox [disabled]=\"!allowRemove(type, item)\" [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\"\n    class=\"w-100\" color=\"default\" qms-group-options>\n    <div class=\"text-label\">\n      <span class=\"text-label label-item fs-14 \">\n        {{ item.name }}\n      </span>\n      <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n    </div>\n    <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n  </mat-checkbox>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n  <div class=\"qms-loading-container\">\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n      <div class=\"qms-loader__wrapper\">\n        <div class=\"row-loader\">\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template checkbox mobile  -->\n<ng-template #itemCheckboxMobileTemplate let-item=\"item\" let-type=\"type\">\n  <mat-checkbox [disabled]=\"!allowRemove(type, item)\" [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\"\n    class=\"w-100\" color=\"default\" qms-group-options>\n    <div class=\"text-label\">\n      <span class=\"text-label label-item fs-14 content-break\">\n        {{ item.name }}\n      </span>\n    </div>\n  </mat-checkbox>\n</ng-template>\n\n<ng-template #viewContentTabMobile let-form=\"form\" let-type=\"type\" let-text=\"text\" let-id=\"id\" let-filter=\"filter\">\n  <form *ngIf=\"form\" [formGroup]=\"form\" class=\"mobile-view\">\n    <mat-dialog-content class=\"items-list\">\n      <div>\n        <div class=\"item\">\n          <mat-checkbox [@inOutAnimation] \n            [disabled]=\"isDisabledSelectAll(type)\" #id class=\"w-100 mb-1 checkbox-all\"\n            (click)=\"filter.length && onCheckAll(type, id)\" [checked]=\"isCheckAll(type)\"\n            [indeterminate]=\"isIndeterminate(type)\" color=\"default\" qms-group-options>\n            <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} </span>\n            <span>(<b>{{filter.length}}</b>)</span>\n          </mat-checkbox>\n          <mat-divider class=\"mx-auto\"></mat-divider>\n          <!-- Search -->\n          <div class=\"d-flex align-items-center justify-content-between\" [ngClass]=\"{'flex-col': isShowSearchControl}\">\n            <span class=\"text-label fs-base fw500\" *ngIf=\"!isShowSearchControl\">{{LANG.PROJECT}}</span>\n            <div [ngClass]=\"{'w100': isShowSearchControl}\">\n              <button qms-btn-icon color=\"light\" matSuffix (click)=\"setShowSearchControl(true)\" *ngIf=\"!isShowSearchControl\">\n                <mat-icon>search</mat-icon>\n              </button>\n              <form [formGroup]=\"personForm\" *ngIf=\"isShowSearchControl && (type == OPTION_ENUM.PERSON)\">\n                <mat-form-field class=\"w-100\" qms-form qms-search-field>\n                  <input formControlName=\"keyword\" matInput type=\"text\" autocomplete=\"off\"\n                    [placeholder]=\"LANG.SEARCH_WITH_NAME\" (blur)=\"setShowSearchControl(false)\" />\n                  <button qms-btn-icon color=\"light\" [@inOutAnimation] (click)=\"onSearchPersonFreeText()\"\n                    class=\"pointer me-1\" matSuffix aria-label=\"Search\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                  <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\" diameter=\"20\"></mat-progress-spinner>\n                  <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\n                    class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\n                    aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value\">\n                    <button qms-btn-icon color=\"light\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </span>\n                </mat-form-field>\n              </form>\n              <form (submit)=\"onFilterUserGroup()\" *ngIf=\"isShowSearchControl && (type === OPTION_ENUM.USER_GROUP)\">\n                <mat-form-field class=\"w-100\" qms-form qms-search-field>\n                  <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n                    [placeholder]=\"dialogData.userGroupConfig?.searchName || LANG.ROLE\"\n                    (blur)=\"setShowSearchControl(false)\">\n                  <button [@inOutAnimation] type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\n                    <mat-icon>search</mat-icon>\n                  </button>\n                  <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                    diameter=\"20\"></mat-progress-spinner>\n                  <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value\" matSuffix qms-input-clear>\n                    <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </div>\n                </mat-form-field>\n              </form>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"type == OPTION_ENUM.PERSON\" >\n          <cdk-virtual-scroll-viewport #cdkVirtualScrollViewportPerson [itemSize]=\"ITEM_SIZE\" class=\"height-360\" (scrolledIndexChange)=\"onScroll()\">\n            <div *cdkVirtualFor=\"let employee of personFiltered; let i = index; trackBy: trackByFn\">\n              <div class=\"item mt-1\">\n                <mat-checkbox [disabled]=\"!allowRemove(type, employee)\" [checked]=\"employee.selected\"\n                  (click)=\"onSelectItem(type, employee)\" class=\"w-100\" color=\"default\" qms-group-options>\n                  <div class=\"text-label\">\n                    <span class=\"text-label label-item fs-14 content-break\">\n                      {{ employee.name }}\n                    </span>\n                  </div>\n                </mat-checkbox>\n              </div>\n            </div>\n          </cdk-virtual-scroll-viewport>\n        </div>\n        <div *ngIf=\"type == OPTION_ENUM.USER_GROUP\" >\n          <cdk-virtual-scroll-viewport #cdkVirtualScrollViewportUserGroup [itemSize]=\"ITEM_SIZE\" class=\"height-360\" (scrolledIndexChange)=\"onScroll()\">\n            <div *cdkVirtualFor=\"let employee of userGroupFiltered; let i = index; trackBy: trackByFn\">\n              <div class=\"item mt-1\">\n                <mat-checkbox [disabled]=\"!allowRemove(type, employee)\" [checked]=\"employee.selected\"\n                  (click)=\"onSelectItem(type, employee)\" class=\"w-100\" color=\"default\" qms-group-options>\n                  <div class=\"text-label\">\n                    <span class=\"text-label label-item fs-14 content-break\">\n                      {{ employee.name }}\n                    </span>\n                  </div>\n                </mat-checkbox>\n              </div>\n            </div>\n          </cdk-virtual-scroll-viewport>\n        </div>\n        <div *ngIf=\"!filter.length && !getLoading$.value\" class=\"item-list-wrapper no-result\">\n          <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n        </div>\n        <mat-divider class=\"mx-auto\"></mat-divider>\n      </div>\n    </mat-dialog-content>\n  </form>\n</ng-template>",
+                    template: "<div qms-dialog-container-v2 class=\"select-access-dialog-container\" [ngClass]=\"{'h-100 fw-600': dialogData.treeDepartmentConfig.isMobile}\">\n  <div qms-dialog-header>\n    <div class=\"access-dialog-header mb-2\">\n      <span class=\"header-title\">{{dialogData.titleDialog || LANG.SELECT_ACCESS}}</span>\n      <button matDialogClose class=\"btn-close-dialog\" qms-btn-icon color=\"light\" *ngIf=\"!dialogData.treeDepartmentConfig.isMobile\">\n        <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div *ngIf=\"!dialogData.treeDepartmentConfig.isMobile\" [class.active]=\"optionSelect.value !== null\" qms-dialog-content class=\"qms-dialog-content\">\n    <div class=\"access-dialog-wraper\">\n      <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option  w-100\"\n        appearance=\"fill\">\n        <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\n        <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\n          disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\n\n          <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\n            {{ LANG[item.displayName] }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"body-dialog-container\">\n        <!-- Person Access -->\n        <div class=\"option-selected-content\">\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n            <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n              <mat-dialog-content>\n                <div class=\"group-filter-person-option\">\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n                    class=\"w-100\" appearance=\"fill\">\n                    <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\n                      (selectionChange)=\"onFilterPerson()\" \n                      disableOptionCentering>\n                      <mat-select-trigger>\n                        {{personForm.controls['userGroup'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"userGroupFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\n                          noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option mode=\"dark\" class=\"opt-check-icon\"\n                        *ngFor=\"let item of filteredSearchTextBox.userGroup.value\" [value]=\"item\">\n                        <span qms-elipsify position=\"top\" mode=\"dark\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['userGroup'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span [@inOutAnimation] (click)=\"personForm.get('userGroup').setValue(''); onFilterPerson()\" class=\"pointer \" \n                    matSuffix aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                  <!-- input field department filter person -->\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n                    class=\"w-100 input-select-option\" qms-form qms-select-input>\n                    <mat-label>{{LANG.DEPARTMENT_UNIT}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\n                      (selectionChange)=\"onFilterPerson()\" \n                      formControlName=\"department\">\n                      <mat-select-trigger>\n                        {{personForm.controls['department'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"departmentFilter\"\n                          [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\" noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option class=\"opt-check-icon\" *ngFor=\"let item of filteredSearchTextBox.department.value\"\n                        [value]=\"item\">\n                        <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['department'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span (click)=\"setFormControlValue(['recursive','department'], [false,'']); onFilterPerson()\" [@inOutAnimation]\n                      class=\"pointer\" matSuffix aria-label=\"Clear\"\n                      *ngIf=\"personForm.get('department').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                </div>\n\n                <mat-slide-toggle [@inOutAnimation] *ngIf=\"personForm.controls['department'].value\"\n                  class=\"w-100 slide-toggle\" formControlName=\"recursive\" color=\"default\" qms-group-options>\n                  <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"w-100\" appearance=\"fill\" qms-form qms-search-field>\n                  <input matInput appearance=\"off\" [placeholder]=\"LANG.SEARCH_WITH_NAME\" formControlName=\"keyword\"\n                    type=\"text\" autocomplete=\"off\" />\n                  <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\n                    (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                  <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                    diameter=\"20\"></mat-progress-spinner>\n                  <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\n                    class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\n                    aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n                    <button qms-btn-icon color=\"light\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </span>\n                </mat-form-field>\n                <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\n                  {{LANG.FILTER}}\n                </button>\n              </mat-dialog-content>\n\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && personFiltered.length && !dialogData.modeSelectOnePerson\"\n                      [disabled]=\"isDisabledSelectAll(OPTION_ENUM.PERSON)\" #checkPerson class=\"w-100 mb-1 checkbox-all\"\n                      (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\n                      [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\n                      color=\"default\" qms-group-options>\n                      <span class=\"text-label fs-12\">{{LANG.CHOOSE_ALL}} </span>\n                      <span>(<b>{{personFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value; then loading\">\n                  </ng-container>\n                  <div [@inOutAnimation] *ngIf=\"personFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div class=\"item  mt-1\" [@inOutAnimation]\n                      *ngFor=\"let employee of personFiltered; trackBy: trackByFn\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!personFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingPerson\n                    *ngIf=\"getPerson$.value.length > 10\" [length]=\"getPerson$.value.length\" [numHidden]=\"0\"\n                    [pageSize]=\"getPerson$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)' [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </form>\n          </ng-container>\n\n          <!-- UserGroup Access -->\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n            <div>\n              <mat-dialog-content>\n                <form (submit)=\"onFilterUserGroup()\">\n                  <mat-form-field class=\"w-100\" qms-form qms-search-field>\n                    <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n                      [placeholder]=\"dialogData.userGroupConfig?.searchName || LANG.USER_GROUP\" />\n                    <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n                      matSuffix>\n                      <mat-icon>search</mat-icon>\n                    </button>\n                    <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                      diameter=\"20\"></mat-progress-spinner>\n                    <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value && !getLoading$.value\" matSuffix\n                      qms-input-clear>\n                      <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </div>\n                  </mat-form-field>\n                </form>\n              </mat-dialog-content>\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && (userGroupFiltered.length && !dialogData.modeSelectOneUserGroup)\"\n                      [disabled]=\"isDisabledSelectAll(OPTION_ENUM.USER_GROUP)\" #checkUserGroup\n                      class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\n                      [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\n                      (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\n                      qms-group-options>\n                      <span class=\"text-label\">{{LANG.CHOOSE_ALL}}</span>\n                      <span>(<b>{{userGroupFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value;then loading\">\n                  </ng-container>\n                  <div *ngIf=\"userGroupFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of userGroupFiltered\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ? itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!userGroupFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingUserGroup class=\"my-1\"\n                    *ngIf=\"getUserGroup$.value.length > 10 \" [length]=\"getUserGroup$.value.length\" [numHidden]=\"0\"\n                    [pageSize]=\"getUserGroup$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.USER_GROUP)' [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </div>\n          </ng-container>\n\n          <!-- Department Access -->\n          <ng-container\n            *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && getLoading$.value; then loading\"></ng-container>\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && !getLoading$.value\"\n            class=\"person-access\">\n            <qms-select-department-tree #tree [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\"\n              [maxWidthNode]=\"dialogData.maxWidthNode\" (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\n              (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n              (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\n              (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\n            </qms-select-department-tree>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"optionSelect.value !== null\" class=\"result-wrapper\">\n      <div class=\"result-selected-container\">\n        <div [@inOutAnimation] *ngIf=\"(options.length === 1) || (options.length > 1 && optionSelect.value !== null)\"\n          class=\"header-title result-header\">\n          <span>\n            {{\n            dialogData.titleResult || LANG.RESULTS}}\n            <span *ngIf=\"options.length === 1 && hasItemSelected()\">\n              ({{getResultTabActive().length}})\n            </span>\n          </span>\n        </div>\n        <div class=\"result-body\">\n          <!-- Result Person  -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\n          </ng-container>\n          <!-- Result User group -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title: dialogData.userGroupConfig?.searchName || LANG.USER_GROUP}\">\n          </ng-container>\n          <!-- Result Department -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data: resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"dialogData.treeDepartmentConfig.isMobile\">\n    <mat-tab-group (selectedTabChange)=\"onSelectionTabChange($event)\" [selectedIndex]=\"OPTION_ENUM.DEPARTMENT\">\n      <!-- Tab person -->\n      <mat-tab label=\"{{LANG.PERSON}}\" class=\"tab-body-container\">\n        <ng-container [ngTemplateOutlet]=\"viewContentTabMobile\"\n          [ngTemplateOutletContext]=\"{form: personForm, type: OPTION_ENUM.PERSON, text: LANG.SEARCH_WITH_NAME, id: 'checkPerson', filter: personFiltered}\"></ng-container>\n        <!-- Result selected -->\n        <div class=\"d-flex flex-column\">\n          <span class=\"text-label fs-12 py-10 fw-500\">{{LANG.SELECTED}} ({{resultAccess.persons?.length}})</span>\n          <div class=\"result-body selected-containter\" qms-scrollbar>\n            <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\" [ngTemplateOutlet]=\"listChip\"\n              [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\n            </ng-container>\n          </div>\n        </div>\n      </mat-tab>\n      <!-- Tab user group -->\n      <mat-tab label=\"{{LANG.USER_GROUP}}\" class=\"tab-body-container\">\n        <ng-container [ngTemplateOutlet]=\"viewContentTabMobile\"\n          [ngTemplateOutletContext]=\"{form: userGroupForm, type: OPTION_ENUM.USER_GROUP, text: LANG.ROLE, id: 'checkUserGroup', filter: userGroupFiltered}\"></ng-container>\n        <!-- Result selected -->\n        <div class=\"d-flex flex-column\">\n          <span class=\"text-label fs-12 py-10 fw-500\">{{LANG.SELECTED}} ({{resultAccess.userGroups?.length}})</span>\n          <div class=\"result-body selected-containter\" qms-scrollbar>\n            <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\" [ngTemplateOutlet]=\"listChip\"\n              [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\n            </ng-container>\n          </div>\n        </div>\n      </mat-tab>\n      <!-- Tab department -->\n      <mat-tab label=\"{{LANG.DEPARTMENT}}\" class=\"tab-body-container\">\n        <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\n        <ng-container *ngIf=\"!getLoading$.value\" class=\"person-access\">\n          <qms-select-department-tree #tree [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\"\n            [height]=\"'40vh'\" [maxWidthNode]=\"dialogData.maxWidthNode\"\n            (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\n            (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n            (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\n            (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\n          </qms-select-department-tree>\n        </ng-container>\n        <!-- Result selected -->\n        <div class=\"d-flex flex-column\">\n          <span class=\"text-label fs-12 py-10 fw-500\">{{LANG.SELECTED}} ({{resultAccess.departments?.length}})</span>\n          <div class=\"result-body selected-containter\" qms-scrollbar>\n            <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\" [ngTemplateOutlet]=\"listChip\"\n              [ngTemplateOutletContext]=\"{data:resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT_UNIT}\">\n            </ng-container>\n          </div>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </ng-container>\n\n  <mat-divider class=\"mx-auto\"></mat-divider>\n  <div qms-dialog-footer class=\"confirm__button__groups\" [class.none-option]=\"optionSelect.value === null\">\n    <button *ngIf=\"optionSelect.value !== null\"\n      [disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\" class=\"btn-add\"\n      [class.qms-btn-disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\"\n      [mat-dialog-close]=\"resultAccess\" qms-btn>\n      <span>{{dialogData.confirmTitle || LANG.ADD}}</span>\n    </button>\n    <button qms-btn-text mat-dialog-close>\n      {{dialogData.cancelTitle || LANG.CANCEL}}\n    </button>\n  </div>\n</div>\n\n<!-- Template -->\n<ng-template #noResult>\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n    <path\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\"\n      fill=\"#0163B3\" />\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n  </svg>\n</ng-template>\n\n<!-- Template list chip -->\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\n  <mat-chip-list [@inOutAnimation] *ngIf=\"data?.length\" class=\"panel__item qms-scrollbar\">\n    <div [@inOutAnimation_2] *ngFor=\"let item of data; let i = index\">\n      <mat-chip (click)=\"onScollToNodeTreeDepartment(item)\" [@updateItemAnimation]\n        *qmsContentChanges=\"item.children?.length\" class=\"chip-item-result\" qms-chip [removable]=\"true\">\n        <span qms-chip-body>\n          <span [qms-tool-tip]=\"generateTooltip(item)\" position=\"top\" mode=\"dark\" class=\"text-label\">\n            {{item.name}}\n            <span *ngIf=\"item.subName\">({{ item.subName }})</span>\n          </span>\n          <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children && item?.isGroup\">\n            {{item.children.length}}/{{item.childCount}}\n          </span>\n        </span>\n        <mat-icon *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\"\n          class=\"remove-chip-icon\">cancel</mat-icon>\n        <mat-icon *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\"\n          [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n      </mat-chip>\n    </div>\n  </mat-chip-list>\n</ng-template>\n\n<!-- Template result with collapse -->\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\n  <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\n    <mat-expansion-panel-header>\n      <div class=\"title-content\">\n        <div class=\"qms-list-text\">\n          <div qms-line color=\"default-subtitle\">{{title}}\n            <span class=\"fw-600\">\n              ({{data?.length}})\n            </span>\n          </div>\n        </div>\n      </div>\n    </mat-expansion-panel-header>\n    <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\n    </ng-container>\n  </mat-expansion-panel>\n</ng-template>\n\n<!-- Template row without checkbox -->\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\n    <div class=\"item-content\">\n      <div class=\"text-label\">\n        <span class=\"text-label label-item fs-14 \">\n          {{ item.name }}\n        </span>\n        <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n      </div>\n      <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n    </div>\n    <div class=\"item-state\">\n      <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template checkbox  -->\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <mat-checkbox [disabled]=\"!allowRemove(type, item)\" [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\"\n    class=\"w-100\" color=\"default\" qms-group-options>\n    <div class=\"text-label\">\n      <span class=\"text-label label-item fs-14 \">\n        {{ item.name }}\n      </span>\n      <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n    </div>\n    <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n  </mat-checkbox>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n  <div class=\"qms-loading-container\">\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n      <div class=\"qms-loader__wrapper\">\n        <div class=\"row-loader\">\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template checkbox mobile  -->\n<ng-template #itemCheckboxMobileTemplate let-item=\"item\" let-type=\"type\">\n  <mat-checkbox [disabled]=\"!allowRemove(type, item)\" [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\"\n    class=\"w-100\" color=\"default\" qms-group-options>\n    <div class=\"text-label\">\n      <span class=\"text-label label-item fs-14 content-break\">\n        {{ item.name }}\n      </span>\n    </div>\n  </mat-checkbox>\n</ng-template>\n\n<ng-template #viewContentTabMobile let-form=\"form\" let-type=\"type\" let-text=\"text\" let-id=\"id\" let-filter=\"filter\">\n  <form *ngIf=\"form\" [formGroup]=\"form\" class=\"mobile-view\">\n    <mat-dialog-content class=\"items-list\">\n      <div>\n        <div class=\"item\">\n          <mat-checkbox [@inOutAnimation] \n          [disabled]=\"isDisabledSelectAll(type)\" #id class=\"w-100 mb-1 checkbox-all\"\n            (click)=\"filter.length && onCheckAll(type, id)\" [checked]=\"isCheckAll(type)\"\n            [indeterminate]=\"isIndeterminate(type)\" color=\"default\" qms-group-options>\n            <span class=\"text-label fs-12\">{{LANG.CHOOSE_ALL}} </span>\n            <span>(<b>{{filter.length}}</b>)</span>\n          </mat-checkbox>\n          <mat-divider class=\"mx-auto\"></mat-divider>\n          <!-- Search -->\n          <div class=\"d-flex align-items-center justify-content-between\" [ngClass]=\"{'flex-col': isShowSearchControl}\">\n            <span class=\"text-label fs-base fw500\" *ngIf=\"!isShowSearchControl\">{{LANG.PROJECT}}</span>\n            <div [ngClass]=\"{'w100': isShowSearchControl}\">\n              <button qms-btn-icon color=\"light\" matSuffix (click)=\"setShowSearchControl(true)\" *ngIf=\"!isShowSearchControl\">\n                <mat-icon>search</mat-icon>\n              </button>\n              <form [formGroup]=\"personForm\" *ngIf=\"isShowSearchControl && (type == OPTION_ENUM.PERSON)\">\n                <mat-form-field class=\"w-100\" qms-form qms-search-field>\n                  <input formControlName=\"keyword\" matInput type=\"text\" autocomplete=\"off\"\n                    [placeholder]=\"LANG.SEARCH_WITH_NAME\" />\n                  <button qms-btn-icon color=\"light\" [@inOutAnimation] (click)=\"onSearchPersonFreeText()\"\n                    class=\"pointer me-1\" matSuffix aria-label=\"Search\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                  <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\" diameter=\"20\"></mat-progress-spinner>\n                  <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\n                    class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\n                    aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value\">\n                    <button qms-btn-icon color=\"light\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </span>\n                </mat-form-field>\n              </form>\n              <form (submit)=\"onFilterUserGroup()\" *ngIf=\"isShowSearchControl && (type === OPTION_ENUM.USER_GROUP)\">\n                <mat-form-field class=\"w-100\" qms-form qms-search-field>\n                  <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n                    [placeholder]=\"dialogData.userGroupConfig?.searchName || LANG.ROLE\"\n                    (blur)=\"setShowSearchControl(false)\">\n                  <button [@inOutAnimation] type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\n                    <mat-icon>search</mat-icon>\n                  </button>\n                  <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value\" matSuffix qms-input-clear>\n                    <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </div>\n                </mat-form-field>\n              </form>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"type == OPTION_ENUM.PERSON\">\n          <cdk-virtual-scroll-viewport #cdkVirtualScrollViewportPerson [itemSize]=\"ITEM_SIZE\" class=\"scroll-view\" (scrolledIndexChange)=\"onScroll()\">\n            <div *cdkVirtualFor=\"let employee of personFiltered; let i = index; trackBy: trackByFn\">\n              <div class=\"item mt-1\">\n                <mat-checkbox [disabled]=\"!allowRemove(type, employee)\" [checked]=\"employee.selected\"\n                  (click)=\"onSelectItem(type, employee)\" class=\"w-100\" color=\"default\" qms-group-options>\n                  <span class=\"text-name label-item fs-12 content-break\">\n                    {{ employee.name }}\n                  </span>\n                </mat-checkbox>\n              </div>\n            </div>\n          </cdk-virtual-scroll-viewport>\n        </div>\n        <div *ngIf=\"type == OPTION_ENUM.USER_GROUP\">\n          <cdk-virtual-scroll-viewport #cdkVirtualScrollViewportUserGroup [itemSize]=\"ITEM_SIZE\" class=\"scroll-view\" (scrolledIndexChange)=\"onScroll()\">\n            <div *cdkVirtualFor=\"let employee of userGroupFiltered; let i = index; trackBy: trackByFn\">\n              <div class=\"item mt-1\">\n                <mat-checkbox [disabled]=\"!allowRemove(type, employee)\" [checked]=\"employee.selected\"\n                  (click)=\"onSelectItem(type, employee)\" class=\"w-100\" color=\"default\" qms-group-options>\n                  <span class=\"text-name label-item fs-12 content-break\">\n                    {{ employee.name }}\n                  </span>\n                </mat-checkbox>\n              </div>\n            </div>\n          </cdk-virtual-scroll-viewport>\n        </div>\n        <div *ngIf=\"!filter.length && !getLoading$.value\" class=\"item-list-wrapper no-result\">\n          <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n        </div>\n        <mat-divider class=\"mx-auto\"></mat-divider>\n      </div>\n    </mat-dialog-content>\n  </form>\n</ng-template>",
                     animations: [SelectAccessAnimationTrigger],
                     providers: [
                         {
@@ -39386,7 +39404,7 @@
                         }
                     ],
                     encapsulation: i0.ViewEncapsulation.None,
-                    styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.select-access-paginator{max-height:150px!important}.select-access-dialog-container{font-family:Open Sans}.select-access-dialog-container.h-75{height:75vh}.select-access-dialog-container .mat-expansion-panel .mat-expansion-panel-body{padding-top:0!important}.select-access-dialog-container .mat-expansion-panel-header{font-size:12px!important;font-weight:800!important}.select-access-dialog-container .w-100{width:100%}.select-access-dialog-container .h-100{height:100%}.select-access-dialog-container .pointer{cursor:pointer}.select-access-dialog-container .fw-600{font-weight:600}.select-access-dialog-container .label-item{font-weight:600;color:var(--ws-text-primary)}.select-access-dialog-container .sub-label{color:var(--ws-text-secondary)}.select-access-dialog-container .fs-14{font-size:14px}.select-access-dialog-container .fs-12{font-size:12px}.select-access-dialog-container .color-primary{color:var(--primary-light)!important}.select-access-dialog-container .header-title{font-weight:600;color:var(--ws-text-primary);font-size:16px}.select-access-dialog-container .chip-item-result{max-width:250px}.select-access-dialog-container .chip-item-result.item-department .qms-chip-body{display:flex;justify-content:center;align-items:center}.select-access-dialog-container .remove-chip-icon{color:rgba(0,0,0,.3);cursor:pointer}.select-access-dialog-container .remove-chip-icon:hover{color:rgba(0,0,0,.7)}.select-access-dialog-container .mat-form-field-wrapper{padding-bottom:8px!important}.select-access-dialog-container .mat-expansion-panel{border-radius:unset!important}.select-access-dialog-container .mat-expansion-panel-header:not([aria-disabled=true]){background:unset}.select-access-dialog-container .mat-expansion-panel.mat-expanded .mat-expansion-panel-header{background:#e5eefb}.select-access-dialog-container .mat-expansion-panel.mat-expanded .mat-expansion-panel-header .qms-line{color:var(--primary-light)!important}.select-access-dialog-container .access-dialog-header{display:flex;justify-content:space-between;align-items:center}.select-access-dialog-container .mat-chip-list-wrapper{margin:unset!important}.select-access-dialog-container .item-list-wrapper{height:40vh;padding:4px 4px 4px 0;overflow-y:auto}.select-access-dialog-container .item-list-wrapper.no-result{height:50vh;display:flex;justify-content:center;align-items:center}.select-access-dialog-container .item-list-wrapper .item{min-height:40px}.select-access-dialog-container .item-list-wrapper .item-without-checkbox{min-height:45px;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:4px;transition:background .3s ease}.select-access-dialog-container .item-list-wrapper .item-without-checkbox.active{background:var(--primary-light-12-opacity)}.select-access-dialog-container .item-list-wrapper .item-without-checkbox:hover{background:var(--primary-light-6-opacity)}.select-access-dialog-container .item-list-wrapper .item-without-checkbox .mat-icon{color:var(--primary-light)!important}.select-access-dialog-container .confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.select-access-dialog-container .qms-dialog-content{display:grid;grid-column-gap:8px;-moz-column-gap:8px;column-gap:8px}.select-access-dialog-container .qms-dialog-content.active{grid-template-columns:2fr 1fr;min-height:50vh}.select-access-dialog-container .qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-wrapper{padding-bottom:16px!important}.select-access-dialog-container .qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-underline{bottom:16px!important}.select-access-dialog-container .qms-dialog-content .result-wrapper{position:relative;width:100%;margin-left:8px}.select-access-dialog-container .qms-dialog-content .result-wrapper:after{position:absolute;content:\"\";top:0;left:0;background-color:#0000001f;height:100%;width:1px}.select-access-dialog-container .qms-dialog-content .result-selected-container{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;padding:0 8px}.select-access-dialog-container .qms-dialog-content .result-selected-container .result-header{height:51px;display:flex;align-items:center;position:sticky;top:0;z-index:10;padding:0!important;background:#fff;margin-bottom:12px}.select-access-dialog-container .qms-dialog-content .result-selected-container .result-header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background:rgba(0,0,0,.04)}.select-access-dialog-container .qms-dialog-content .result-selected-container .result-header .mat-card-content{height:51px;width:100%;padding-left:4px;display:flex;align-items:center;background-color:rgba(0,0,0,.04)}.select-access-dialog-container .option-selected-content .group-filter-person-option{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;grid-gap:8px;gap:8px}.select-access-dialog-container span.chip-item__content_name{display:inline-block;max-width:175px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-access-dialog-container span.chip-item-children__count{font-size:.75rem;color:rgba(0,0,0,.5);font-weight:600}.select-access-dialog-container .mat-slide-toggle.qms-group-options{padding:unset!important}.select-access-dialog-container .input-option-filter .mat-form-field-wrapper{padding-bottom:8px!important}.select-access-dialog-container .input-option-filter .mat-form-field-underline{bottom:8px!important}.select-access-dialog-container .slide-toggle{margin-bottom:8px}.select-access-dialog-container .confirm__button__groups.none-option{margin-top:85px}.select-access-dialog-container .btn-icon-clear{position:relative;padding:0 1rem}.select-access-dialog-container .btn-icon-clear .qms-btn-icon{margin-right:unset!important}.select-access-dialog-container .btn-icon-clear:after{position:absolute;content:\"\";left:0;top:0;height:100%;width:1px;background:rgba(0,0,0,.3)}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:600;color:rgba(0,0,0,.8)}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-paginator-range-actions{margin-bottom:0;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.select-access-dialog-container .qms-paginator .qms-paginator-page-size{align-items:center}.select-access-dialog-container .qms-paginator .mat-form-field-wrapper{padding-bottom:0!important}.select-access-dialog-container .mat-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row!important;align-items:center!important;grid-column-gap:4px!important;-moz-column-gap:4px!important;column-gap:4px!important}.select-access-dialog-container .mat-expansion-panel.qms-expansion{margin:0!important}.select-access-dialog-container .access-department .qms-view-search-result{height:100%!important}.select-access-dialog-container .access-department .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.select-access-dialog-container .access-department .loading-container{height:calc(100% - 40px)!important}.select-access-dialog-container .qms-loading-container{height:45vh;overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.select-access-dialog-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.select-access-dialog-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));animation:animate-loading 1.2s linear infinite}.select-access-dialog-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.select-access-dialog-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px;overflow:hidden}@keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.select-access-dialog-container .btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}.select-access-dialog-container .d-flex{display:flex}.select-access-dialog-container .align-items-center{align-items:center}.select-access-dialog-container .justify-content-between{justify-content:space-between}.select-access-dialog-container .mobile-view{overflow-x:hidden}.select-access-dialog-container .mobile-view ::ng-deep .mat-expansion-panel-header-title{font-family:Open sans}.select-access-dialog-container .mobile-view ::ng-deep .mat-tab-body-wrapper{overflow-x:hidden;overflow-y:scroll}.select-access-dialog-container .mobile-view ::ng-deep .mat-dialog-content{min-height:50vh}.select-access-dialog-container .mobile-view .height-360{height:360px}.select-access-dialog-container .result-body ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{height:80px!important;overflow-y:scroll;padding:0 12px 16px}.select-access-dialog-container .content-break{display:inline-block!important;word-wrap:break-word!important;word-break:break-word!important;white-space:normal!important}.select-access-dialog-container .selected-containter{font-family:Open Sans;height:127px!important;overflow-y:scroll;overflow-x:hidden;padding:0 12px 16px}.select-access-dialog-container .selected-containter .mat-chip.qms-chip{height:auto!important}.select-access-dialog-container ::ng-deep .tab-body-container{overflow-x:hidden;overflow-y:scroll}.select-access-dialog-container ::ng-deep .tab-body-container .mat-expansion-panel-header{font-family:Open Sans}.select-access-dialog-container ::ng-deep .mat-tab-body{height:466px!important}@media screen and (max-width:1100px){.select-access-dialog-container .chip-item-result{max-width:200px}}@media screen and (max-width:900px){.select-access-dialog-container .chip-item-result{max-width:150px}}"]
+                    styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.select-access-paginator{max-height:150px!important}.select-access-dialog-container{font-family:Open Sans}.select-access-dialog-container .mat-expansion-panel .mat-expansion-panel-body{padding-top:0!important}.select-access-dialog-container .mat-expansion-panel-header{font-size:12px!important;font-weight:800!important}.select-access-dialog-container .w-100{width:100%}.select-access-dialog-container .h-100{height:100%}.select-access-dialog-container .pointer{cursor:pointer}.select-access-dialog-container .fw-600{font-weight:600}.select-access-dialog-container .label-item{font-weight:600;color:var(--ws-text-primary)}.select-access-dialog-container .sub-label{color:var(--ws-text-secondary)}.select-access-dialog-container .fs-14{font-size:14px}.select-access-dialog-container .fs-12{font-size:12px!important}.select-access-dialog-container .color-primary{color:var(--primary-light)!important}.select-access-dialog-container .header-title{font-weight:600;color:var(--ws-text-primary);font-size:16px}.select-access-dialog-container .chip-item-result{max-width:250px}.select-access-dialog-container .chip-item-result.item-department .qms-chip-body{display:flex;justify-content:center;align-items:center}.select-access-dialog-container .remove-chip-icon{color:rgba(0,0,0,.3);cursor:pointer}.select-access-dialog-container .remove-chip-icon:hover{color:rgba(0,0,0,.7)}.select-access-dialog-container .mat-form-field-wrapper{padding-bottom:8px!important}.select-access-dialog-container .mat-expansion-panel{border-radius:unset!important}.select-access-dialog-container .mat-expansion-panel-header:not([aria-disabled=true]){background:unset}.select-access-dialog-container .mat-expansion-panel.mat-expanded .mat-expansion-panel-header{background:#e5eefb}.select-access-dialog-container .mat-expansion-panel.mat-expanded .mat-expansion-panel-header .qms-line{color:var(--primary-light)!important}.select-access-dialog-container .access-dialog-header{display:flex;justify-content:space-between;align-items:center}.select-access-dialog-container .mat-chip-list-wrapper{margin:unset!important}.select-access-dialog-container .item-list-wrapper{height:40vh;padding:4px 4px 4px 0;overflow-y:auto}.select-access-dialog-container .item-list-wrapper.no-result{height:50vh;display:flex;justify-content:center;align-items:center}.select-access-dialog-container .item-list-wrapper .item{min-height:40px}.select-access-dialog-container .item-list-wrapper .item-without-checkbox{min-height:45px;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:4px;transition:background .3s ease}.select-access-dialog-container .item-list-wrapper .item-without-checkbox.active{background:var(--primary-light-12-opacity)}.select-access-dialog-container .item-list-wrapper .item-without-checkbox:hover{background:var(--primary-light-6-opacity)}.select-access-dialog-container .item-list-wrapper .item-without-checkbox .mat-icon{color:var(--primary-light)!important}.select-access-dialog-container .confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.select-access-dialog-container .qms-dialog-content{display:grid;grid-column-gap:8px;-moz-column-gap:8px;column-gap:8px}.select-access-dialog-container .qms-dialog-content.active{grid-template-columns:2fr 1fr;min-height:50vh}.select-access-dialog-container .qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-wrapper{padding-bottom:16px!important}.select-access-dialog-container .qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-underline{bottom:16px!important}.select-access-dialog-container .qms-dialog-content .result-wrapper{position:relative;width:100%;margin-left:8px}.select-access-dialog-container .qms-dialog-content .result-wrapper:after{position:absolute;content:\"\";top:0;left:0;background-color:#0000001f;height:100%;width:1px}.select-access-dialog-container .qms-dialog-content .result-selected-container{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;padding:0 8px}.select-access-dialog-container .qms-dialog-content .result-selected-container .result-header{height:51px;display:flex;align-items:center;position:sticky;top:0;z-index:10;padding:0!important;background:#fff;margin-bottom:12px}.select-access-dialog-container .qms-dialog-content .result-selected-container .result-header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background:rgba(0,0,0,.04)}.select-access-dialog-container .qms-dialog-content .result-selected-container .result-header .mat-card-content{height:51px;width:100%;padding-left:4px;display:flex;align-items:center;background-color:rgba(0,0,0,.04)}.select-access-dialog-container .option-selected-content .group-filter-person-option{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;grid-gap:8px;gap:8px}.select-access-dialog-container span.chip-item__content_name{display:inline-block;max-width:175px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-access-dialog-container span.chip-item-children__count{font-size:.75rem;color:rgba(0,0,0,.5);font-weight:600}.select-access-dialog-container .mat-slide-toggle.qms-group-options{padding:unset!important}.select-access-dialog-container .input-option-filter .mat-form-field-wrapper{padding-bottom:8px!important}.select-access-dialog-container .input-option-filter .mat-form-field-underline{bottom:8px!important}.select-access-dialog-container .slide-toggle{margin-bottom:8px}.select-access-dialog-container .confirm__button__groups.none-option{margin-top:85px}.select-access-dialog-container .btn-icon-clear{position:relative;padding:0 1rem}.select-access-dialog-container .btn-icon-clear .qms-btn-icon{margin-right:unset!important}.select-access-dialog-container .btn-icon-clear:after{position:absolute;content:\"\";left:0;top:0;height:100%;width:1px;background:rgba(0,0,0,.3)}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:600;color:rgba(0,0,0,.8)}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-paginator-range-actions{margin-bottom:0;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.select-access-dialog-container .qms-paginator .qms-paginator-page-size{align-items:center}.select-access-dialog-container .qms-paginator .mat-form-field-wrapper{padding-bottom:0!important}.select-access-dialog-container .mat-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row!important;align-items:center!important;grid-column-gap:4px!important;-moz-column-gap:4px!important;column-gap:4px!important}.select-access-dialog-container .mat-expansion-panel.qms-expansion{margin:0!important}.select-access-dialog-container .access-department .qms-view-search-result{height:100%!important}.select-access-dialog-container .access-department .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.select-access-dialog-container .access-department .loading-container{height:calc(100% - 40px)!important}.select-access-dialog-container .qms-loading-container{height:45vh;overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.select-access-dialog-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.select-access-dialog-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));animation:animate-loading 1.2s linear infinite}.select-access-dialog-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.select-access-dialog-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px;overflow:hidden}@keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.select-access-dialog-container .btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}.select-access-dialog-container .d-flex{display:flex}.select-access-dialog-container .align-items-center{align-items:center}.select-access-dialog-container .justify-content-between{justify-content:space-between}.select-access-dialog-container .mobile-view{overflow-x:hidden}.select-access-dialog-container .mobile-view ::ng-deep .mat-expansion-panel-header-title{font-family:Open sans}.select-access-dialog-container .mobile-view ::ng-deep .mat-tab-body-wrapper{overflow-x:hidden;overflow-y:scroll}.select-access-dialog-container .mobile-view ::ng-deep .mat-dialog-content{min-height:50vh}.select-access-dialog-container .mobile-view .scroll-view{height:40vh}.select-access-dialog-container .result-body ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{height:80px!important;overflow-y:scroll;padding:0 12px 16px}.select-access-dialog-container .content-break{display:inline-block!important;word-wrap:break-word!important;word-break:break-word!important;white-space:normal!important}.select-access-dialog-container .selected-containter{font-family:Open Sans;max-height:calc((100vh - 300px) * .25)!important;overflow-y:scroll;overflow-x:hidden;padding:0 12px 16px}.select-access-dialog-container .selected-containter .mat-chip.qms-chip{height:auto!important}.select-access-dialog-container ::ng-deep .tab-body-container{overflow-x:hidden;overflow-y:scroll}.select-access-dialog-container ::ng-deep .tab-body-container .mat-expansion-panel-header{font-family:Open Sans}.select-access-dialog-container .text-label,.select-access-dialog-container .text-label+span,.select-access-dialog-container .text-name{font-size:12px!important;font-weight:500!important}.select-access-dialog-container .py-10{padding:10px 0}.select-access-dialog-container .fw-500{font-weight:500}.select-access-dialog-container .qms-dialog-footer{min-height:36px}@media screen and (max-width:1100px){.select-access-dialog-container .chip-item-result{max-width:200px}}@media screen and (max-width:900px){.select-access-dialog-container .chip-item-result{max-width:150px}}"]
                 },] }
     ];
     QMSSelectAccessDialogComponent.ctorParameters = function () { return [