qms-angular 1.1.20 → 1.1.21

package/fesm2015/qms-angular.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, ChangeDetectionStrategy, Input, Output, ViewEncapsulation, Inject, ElementRef, ViewChild, HostListener, Directive, ContentChild, Optional, Renderer2, InjectionToken, forwardRef, ChangeDetectorRef, ContentChildren, Attribute, NgModule, CUSTOM_ELEMENTS_SCHEMA, Pipe, ViewContainerRef, HostBinding, NO_ERRORS_SCHEMA, ViewChildren, Injector } from '@angular/core';
+import { Injectable, Component, EventEmitter, ChangeDetectionStrategy, Input, Output, ViewEncapsulation, Inject, ElementRef, ViewChild, HostListener, Directive, ContentChild, Optional, Renderer2, InjectionToken, forwardRef, ChangeDetectorRef, ContentChildren, Attribute, NgModule, CUSTOM_ELEMENTS_SCHEMA, Pipe, ViewContainerRef, HostBinding, TemplateRef, NO_ERRORS_SCHEMA, ViewChildren, Injector } from '@angular/core';
 import { BehaviorSubject, ReplaySubject, Subject, forkJoin, of, timer } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
@@ -53,9 +53,9 @@ import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import { query, style, group, animate, trigger, transition, state, stagger } from '@angular/animations';
+import { query, style, group, animate, trigger, transition, state, stagger, keyframes } from '@angular/animations';
+import { PageEvent, MatPaginatorModule } from '@angular/material/paginator';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatPaginatorModule } from '@angular/material/paginator';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 
 class QmsAngularService {
@@ -138,7 +138,8 @@ const en = {
     "TYPE": "Type",
     "SEARCH_WITH_NAME": "Search first and last name",
     "RESULT_SEARCH_FOR": "Results search for ",
-    "TOOLTIP_INCLUDE_CHILD": "{0} - includes {1} children",
+    "TOOLTIP_INCLUDE_SUB_DEPARTMENT": "{0} - include {1} sub-departments",
+    "NO_RESULT": "No Result",
     "ERROR": {
         "SELECT_DANGER": "You must select one or more events"
     },
@@ -523,7 +524,8 @@ const no = {
     "TYPE": "Type",
     "SEARCH_WITH_NAME": "Søk for- og etternavn",
     "RESULT_SEARCH_FOR": "Resultater søk etter ",
-    "TOOLTIP_INCLUDE_CHILD": "{0} – inkluderer {1} barn",
+    "TOOLTIP_INCLUDE_SUB_DEPARTMENT": "{0} – inkluderer {1} barn",
+    "NO_RESULT": "Inget resultat",
     "ERROR": {
         "SELECT_DANGER": "Du må velge en eller flere hendelser"
     },
@@ -3351,6 +3353,83 @@ QMSMultiIconDirective.propDecorators = {
     qmsTransformIcon: [{ type: Input }]
 };
 
+class EllipsifyDirective extends QMSToolTipRendererDirective {
+    constructor(renderer, elementRef, overlay, overlayPositionBuilder) {
+        super(overlay, overlayPositionBuilder, elementRef);
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.overlay = overlay;
+        this.overlayPositionBuilder = overlayPositionBuilder;
+        this.domElement = this.elementRef.nativeElement;
+        const elipsify = {
+            'text-overflow': 'ellipsis',
+            'overflow': 'hidden',
+            'white-space': 'nowrap',
+        };
+        Object.keys(elipsify).forEach(newStyle => {
+            this.renderer.setStyle(this.domElement, `${newStyle}`, elipsify[newStyle]);
+        });
+    }
+    ngAfterViewInit() {
+        this.renderer.setProperty(this.domElement, 'scrollTop', 1);
+        this.isTitleAttribute();
+    }
+    isTitleAttribute() {
+        if (this._overlayRef.hasAttached())
+            return;
+        if (this.domElement.offsetWidth < this.domElement.scrollWidth) {
+            const tooltipRef = this._overlayRef.attach(new ComponentPortal(QMSToolTipComponent));
+            tooltipRef.instance.text = this.domElement.textContent;
+            tooltipRef.instance.mode = this.mode;
+        }
+    }
+}
+EllipsifyDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-elipsify]'
+            },] }
+];
+EllipsifyDirective.ctorParameters = () => [
+    { type: Renderer2 },
+    { type: ElementRef },
+    { type: Overlay },
+    { type: OverlayPositionBuilder }
+];
+EllipsifyDirective.propDecorators = {
+    isTitleAttribute: [{ type: HostListener, args: ['focus',] }, { type: HostListener, args: ['mouseenter',] }]
+};
+
+class QMSContentChangesDirective {
+    constructor(viewContainer, templateRef) {
+        this.viewContainer = viewContainer;
+        this.templateRef = templateRef;
+        this.existView = false;
+    }
+    set qmsContentChanges(val) {
+        if (!this.existView) {
+            this.viewContainer.createEmbeddedView(this.templateRef);
+            this.existView = true;
+        }
+        else if (val !== this.currentValue) {
+            this.viewContainer.clear();
+            this.viewContainer.createEmbeddedView(this.templateRef);
+            this.currentValue = val;
+        }
+    }
+}
+QMSContentChangesDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qmsContentChanges]'
+            },] }
+];
+QMSContentChangesDirective.ctorParameters = () => [
+    { type: ViewContainerRef },
+    { type: TemplateRef }
+];
+QMSContentChangesDirective.propDecorators = {
+    qmsContentChanges: [{ type: Input }]
+};
+
 const ɵ0$6 = { appearance: 'fill' }, ɵ1$1 = { color: 'none' };
 class QmsAngularModule {
 }
@@ -3409,7 +3488,9 @@ QmsAngularModule.decorators = [
                     QMSDialogHeader,
                     QMSDialogContent,
                     QMSDialogFooter,
-                    QMSMultiIconDirective
+                    QMSMultiIconDirective,
+                    EllipsifyDirective,
+                    QMSContentChangesDirective
                 ],
                 imports: [
                     CommonModule,
@@ -3470,7 +3551,9 @@ QmsAngularModule.decorators = [
                     QMSDialogHeader,
                     QMSDialogContent,
                     QMSDialogFooter,
-                    QMSMultiIconDirective
+                    QMSMultiIconDirective,
+                    EllipsifyDirective,
+                    QMSContentChangesDirective
                 ],
                 providers: [
                     { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: ɵ0$6 },
@@ -23203,8 +23286,10 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         this.renderer = renderer;
         this.elRef = elRef;
         this.required = false;
+        this.editorId = 'qmsckeditor';
         this.qmsckContentOutput = new EventEmitter();
         this.ckEditorEventConst = CKEditorEventConst;
+        this.isToolbarItemsIdSet = false;
         this.ckTagname = 'div';
     }
     onMessage(event) {
@@ -23244,6 +23329,7 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         }
     }
     ngOnInit() {
+        this.toolbarItemPrefixId = `${this.editorId}_toolbar_item_`;
         this.name = 'CKEditor custom build';
         this.ckEditor = this.qmsckPlugin.pluginObject;
         this.translate.getLanguageSubject$.pipe(takeUntil(this.ngUnsubcribe)).subscribe((res) => {
@@ -23251,7 +23337,11 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
                 this.LANG = this.translate.getObjectLang(res);
             }
         });
-        this.ckeditorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(this.qmsckPlugin.itemToolbar);
+        let toolbarItems = this.qmsckPlugin.itemToolbar;
+        if (this.isEnabledToggleToolbar() && this.qmsckData.toggledToolbarItems) {
+            toolbarItems += ',' + this.qmsckData.toggledToolbarItems;
+        }
+        this.ckeditorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(toolbarItems);
         this.globalService.setApiUrl(this.qmsckData.apiUrl);
         if (this.isEnabledMathtypeConfig()) {
             this.addMathTypeConfig();
@@ -23259,9 +23349,6 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         if (this.isEnabledTimestampConfig()) {
             this.addTimestampConfig();
         }
-        if (this.isEnabledToggleToolbar()) {
-            this.addToggleToolbarConfig();
-        }
         if (this.isEnabledWProofreader()) {
             this.addWProofreaderConfig();
         }
@@ -23276,6 +23363,7 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         if (this.editorInstance) {
             this.editorInstance.destroy();
         }
+        $(document).off();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -23307,12 +23395,12 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
     }
     isEnabledToggleToolbar() {
         const pattern = /(toggleToolbar)/gmi;
-        return !!this.qmsckData.toggleToolbar
+        return !!this.qmsckData.toggledToolbarItems
             && !!this.qmsckPlugin.itemToolbar
             && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
     }
     addToggleToolbarConfig() {
-        const items = this.qmsckData.toggleToolbar.split(',');
+        const items = this.qmsckData.toggledToolbarItems.split(',');
         const toggleToolbarConfig = {
             toggleToolbarConfig: {
                 toolbar: items
@@ -23427,6 +23515,7 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
                 wordsBox.textContent = `${this.LANG.QMSCKEDITOR.WORDS}: ${stats.words} / ${this.LANG.QMSCKEDITOR.CHARACTERS}: ${stats.characters}`;
             }
         });
+        this._setEditorInstanceObserver(this.editorId);
     }
     /**
      * Add template - Load template
@@ -23614,62 +23703,48 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
     }
     /*
       Toolbar toggle
+  
+      This is a temporary workaround.
+      Tracking status and progress of the issue https://github.com/ckeditor/ckeditor5/issues/7383
+  
+      - Render both default toolbar and toggle toolbar at init time
+      - Set ID for toolbar items using index:
+        + From index 0 to toolbarLength - 1 is the default toolbar
+        + From index toolbarLength on is the toggle toolbar
+      - Show/hide default and toggle toolbar by set display none to corresponding toolbar items based on ID
     */
     toggleToolbarEventHandling() {
-        const qmsckeditor = window.document.getElementById('qmsckeditor');
+        const qmsckeditor = window.document.getElementById(this.editorId);
         const toggleAttribute = 'isToggleToolbar';
         const ckeditorTag = 'ckeditor';
         if (qmsckeditor) {
             const isToggleToolbar = qmsckeditor.getAttribute(toggleAttribute) == 'true';
             if (isToggleToolbar) {
-                this.ckeditorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(this.qmsckPlugin.itemToolbar);
+                this._setToolbarViewMode(true);
                 qmsckeditor.setAttribute(toggleAttribute, 'false');
             }
             else {
-                this.ckeditorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(this.qmsckData.toggleToolbar);
+                this._setToolbarViewMode(false);
                 qmsckeditor.setAttribute(toggleAttribute, 'true');
             }
-            const onChanged = this.onChanged.bind(this);
-            const onBlur = this.onBlur.bind(this);
-            if (this.editorInstance) {
-                try {
-                    this.editorInstance.destroy();
-                }
-                catch (err) {
-                    console.log(err);
-                }
-            }
-            //This is a temporary workaround.
-            //Tracking status and progress of the issue https://github.com/ckeditor/ckeditor5/issues/7383
-            const root = window.document.querySelector(ckeditorTag);
-            if (!!root) {
-                let editorElement = null;
-                if (root.childElementCount > 0) {
-                    editorElement = Array.from(root.children).find(i => i.nodeName.toLowerCase() == this.ckTagname.toLowerCase());
-                }
-                else {
-                    editorElement = window.document.createElement(this.ckTagname);
-                    editorElement.style = 'display: none;';
-                    root.appendChild(editorElement);
-                }
-                this.ckEditor.create(editorElement, this.ckeditorConfig).then(editor => {
-                    this.initEditor(editor);
-                    this.editorInstance = editor;
-                    //Delete cache content
-                    editorElement.innerHTML = '';
-                    //setup editor events
-                    const modelDocument = editor.model.document;
-                    const viewDocument = editor.editing.view.document;
-                    modelDocument.on('change:data', () => {
-                        onChanged({ editor });
-                    });
-                    viewDocument.on('blur', () => {
-                        onBlur({ editor });
-                    });
-                });
-            }
         }
     }
+    _setToolbarViewMode(showToggleToolbar) {
+        var _a, _b, _c, _d;
+        const toolbarLength = ((_a = this.qmsckPlugin.itemToolbar) === null || _a === void 0 ? void 0 : _a.split(',').length) || 0;
+        /*
+          Items in toolbar are indexed:
+          - From index 0 to toolbarLength - 1 is the default toolbar
+          - From index toolbarLength on is the toggle toolbar
+        */
+        (_b = $(`#${this.toolbarItemPrefixId}${toolbarLength - 1}`)) === null || _b === void 0 ? void 0 : _b.prevAll().each((index, element) => {
+            element.style.display = showToggleToolbar ? 'none' : '';
+        });
+        (_c = $(`#${this.toolbarItemPrefixId}${toolbarLength - 1}`)) === null || _c === void 0 ? void 0 : _c.css('display', showToggleToolbar ? 'none' : '');
+        (_d = $(`#${this.toolbarItemPrefixId}${toolbarLength - 1}`)) === null || _d === void 0 ? void 0 : _d.nextAll().each((index, element) => {
+            element.style.display = showToggleToolbar ? '' : 'none';
+        });
+    }
     /**
    * Flowchart
    */
@@ -23769,11 +23844,30 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
             });
         });
     }
+    _setEditorInstanceObserver(editorId) {
+        $(document).off('DOMNodeInserted').on('DOMNodeInserted', (e) => {
+            if (!this.isToolbarItemsIdSet && $(e.target).has('#' + editorId)) {
+                this._setIdForToolbarItems();
+            }
+        });
+    }
+    _setIdForToolbarItems() {
+        var _a;
+        const toolbarItems = ((_a = document.querySelector(`${this.editorId ? '#' + this.editorId : ''} .ck-toolbar__items`)) === null || _a === void 0 ? void 0 : _a.children) || [];
+        if (!toolbarItems.length) {
+            return;
+        }
+        this.isToolbarItemsIdSet = true;
+        Array.from(toolbarItems).forEach((item, index) => {
+            item.id = `${this.toolbarItemPrefixId}${index}`;
+        });
+        this.toggleToolbarEventHandling();
+    }
 }
 QMSCKEditorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-ckeditor',
-                template: "<div id=\"qmsckeditor\" class=\"qmsckeditor_container\">\r\n  <ckeditor class=\"qms-ckeditor\" [tagName]=\"ckTagname\" [(editor)]=\"ckEditor\" [config]=\"ckeditorConfig\"\r\n    (ready)=\"onReady($event)\" [(ngModel)]=\"qmsckContentInput\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\r\n    [disabled]=\"isDisabled\">\r\n  </ckeditor>\r\n  <div class=\"sub-container\">\r\n    <div class=\"\">\r\n      <span>{{LANG.QMSCKEDITOR.ASSISTIVE_TEXT}}</span>\r\n    </div>\r\n    <div class=\"wordcount-content\"></div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"qmsckeditor_container\" [id]=\"editorId\">\r\n  <ckeditor class=\"qms-ckeditor\" [tagName]=\"ckTagname\" [(editor)]=\"ckEditor\" [config]=\"ckeditorConfig\"\r\n    (ready)=\"onReady($event)\" [(ngModel)]=\"qmsckContentInput\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\r\n    [disabled]=\"isDisabled\">\r\n  </ckeditor>\r\n  <div class=\"sub-container\">\r\n    <div class=\"\">\r\n      <span>{{LANG.QMSCKEDITOR.ASSISTIVE_TEXT}}</span>\r\n    </div>\r\n    <div class=\"wordcount-content\"></div>\r\n  </div>\r\n</div>",
                 providers: [
                     QMSCKEditorFullscreenComponent,
                     {
@@ -23807,6 +23901,7 @@ QMSCKEditorComponent.propDecorators = {
     qmsckContentInput: [{ type: Input }],
     isDisabled: [{ type: Input, args: ['disabled',] }],
     required: [{ type: Input, args: ['required',] }],
+    editorId: [{ type: Input }],
     qmsckContentOutput: [{ type: Output }],
     onMessage: [{ type: HostListener, args: ['window:message', ['$event'],] }]
 };
@@ -28973,7 +29068,7 @@ const AnimationTreeDepartment = [
         transition('* => *', [
             query(':enter', [
                 style({ opacity: 0, transform: 'translateY(-100%)' }),
-                stagger(25, [
+                stagger(30, [
                     animate('0.4s cubic-bezier(0.23, 1, 0.320, 1)', style({ opacity: 1, transform: 'none' }))
                 ])
             ], { optional: true })
@@ -28981,34 +29076,44 @@ const AnimationTreeDepartment = [
     ])
 ];
 
+class QMSDepartmentPagingModel extends PageEvent {
+    constructor() {
+        super();
+        this.data = [];
+        this.data = [];
+    }
+}
+
 class SelectDepartmentTreeComponent {
-    constructor(cdRef, domSanitizer, appIconService, iconRegistry, eleRef, trans) {
+    constructor(cdRef, domSanitizer, appIconService, iconRegistry, eleRef, trans, treeDepartmentGlobalService) {
         this.cdRef = cdRef;
         this.domSanitizer = domSanitizer;
         this.appIconService = appIconService;
         this.iconRegistry = iconRegistry;
         this.eleRef = eleRef;
         this.trans = trans;
+        this.treeDepartmentGlobalService = treeDepartmentGlobalService;
         this.enableIncludeChild = false;
         this.enableTreeSearch = false;
         this.isSelectOne = false;
         this.activeViewSearch = false;
+        this.customClass = '';
+        this.arrSkeleton = new Array(6).fill(0);
         this.treeDataSourceConfig = new QMSSelectDepartmentTreeConfig();
+        this.isIncludeChildren = false;
         this.checkSearchMappingTree = true;
         this.enablePagingSearch = true;
         this.onSearchEvent = new EventEmitter();
         this.onPagingSearchEvent = new EventEmitter();
         this.ngUnsubscribe = new Subject();
         this.isLoaded = false;
-        this.resultGroupSelected = [];
-        this.resultSingleSelected = [];
         this.resultSearchSelected = [];
         this.resultSelected = [];
         this.getDataTree$ = new BehaviorSubject([]);
         this.onValueChangeEvent = new EventEmitter();
-        this.searchDepartment$ = new Subject();
+        this.selectionNodeChangeEvent = new EventEmitter();
+        this.searchDepartment$ = new BehaviorSubject(new QMSDepartmentPagingModel());
         this.resultSearch = [];
-        this.pagingResultSearch = [];
         this.isSelectAllResultSearch = false;
         this.indeterminateSearchResult = false;
         this.currentPaginationConfig = {
@@ -29043,6 +29148,8 @@ class SelectDepartmentTreeComponent {
             flatNode.itemIconSvg = node.itemIconSvg;
             flatNode.isFile = node.isFile;
             flatNode.disabled = node.disabled;
+            flatNode.isGroup = node.isGroup;
+            flatNode.groupId = node.groupId;
             this.flatTreeNodeMap.set(flatNode, node);
             this.nestedTreeNodeMap.set(node, flatNode);
             return flatNode;
@@ -29051,13 +29158,12 @@ class SelectDepartmentTreeComponent {
         this._getChild = (node) => node.children;
         this.isExpandable = (node) => node.expandable;
         this.hasChild = (_, node) => node.expandable;
-        this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
-        this.treeFlattener = new MatTreeFlattener(this._transformer, this.getLevel, this.isExpandable, this._getChild);
-        this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
         // Init tree data
         this.getDataTree$
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe(data => {
+            if (!this.dataSource)
+                return;
             this.dataSource.data = data;
         });
         // Register icon
@@ -29073,58 +29179,23 @@ class SelectDepartmentTreeComponent {
                 this.LANG = this.trans.getObjectLang(res);
             }
         });
-        this.searchDepartment$
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(result => {
-            this.resultSearch = [];
-            if (result && result.length) {
-                result.forEach(item => {
-                    const node = this.treeControl.dataNodes.find(node => node.id === item.id);
-                    const parents = node ? this._getAllParentNode(node) : [];
-                    this.resultSearch.push(Object.assign(Object.assign({}, item), { disabled: this.checkSearchMappingTree && !node, path: [
-                            ...(parents.map((x, index) => ({
-                                id: x.id,
-                                name: x.name,
-                            })).reverse() || []),
-                            {
-                                id: item.id,
-                                name: item.name,
-                            }
-                        ] }));
-                });
-            }
-            this.currentPaginationConfig.pageIndex = 0;
-            this.currentPaginationConfig.pageSize = 10;
-            this.getLoading$.next(false);
-            this.textResultSearch = this.formSearchControl.value;
-            this.onPagingSearchResult(this.currentPaginationConfig);
-            this._mapToResultSearch();
-            this._checkStateCheckboxAllSearch();
-            this.setIndexView(1);
-            this.cdRef.detectChanges();
-        });
-        this.scrollToNodeEvent$.pipe(takeUntil(this.ngUnsubscribe), switchMap((val) => {
-            const delayTiming = this.indexView === 1 ? 700 : 0;
-            this.setIndexView(0);
-            return of(val).pipe(delay(delayTiming));
-        })).subscribe(res => {
-            this.onScrollIntoNode(res);
-        });
-        this.getActiveNodeEvent$.pipe(takeUntil(this.ngUnsubscribe), switchMap(val => {
-            this.activeNode = val;
-            return timer(1500);
-        })).subscribe(_ => {
-            this.activeNode = '';
-        });
+        this._handleSearchEvent();
+        this._handleActiveNodeEvent();
+        this._handleItemSelectionChanged();
         this.getLoading$.pipe(takeUntil(this.ngUnsubscribe))
             .subscribe(res => {
             res ? this.formSearchControl.disable() : this.formSearchControl.enable();
         });
     }
+    set rowsSkeleton(value) {
+        this.arrSkeleton = new Array(value).fill(0);
+    }
     set treeData(value) {
+        this.updateDataTree([]);
         this.treeDataSourceConfig.treeData = value || [];
-        this.updateDataTree(this.treeDataSourceConfig.treeData);
+        this._initTreeData();
     }
+    ;
     set selectedList(value) {
         this.treeDataSourceConfig.selectedList = value || [];
     }
@@ -29132,10 +29203,15 @@ class SelectDepartmentTreeComponent {
         this.treeDataSourceConfig.selectIncludeLabel = label;
     }
     get currentTreeData() {
-        return this.getDataTree$.value;
+        return this.getDataTree$.getValue();
+    }
+    ngAfterContentInit() {
+        this.cdRef.detectChanges();
+    }
+    ngAfterViewInit() {
+        this.cdRef.detectChanges();
     }
     ngOnInit() {
-        this._initTreeData();
         this._initCheckListSelected();
     }
     ngOnDestroy() {
@@ -29143,84 +29219,248 @@ class SelectDepartmentTreeComponent {
         this.ngUnsubscribe.complete();
     }
     _initTreeData() {
-        if (this.treeDataSourceConfig.treeData.length) {
-            const rootNode = this.treeDataSourceConfig.treeData.filter(item => !item.parentId)
-                .map((item, _index) => {
-                const node = {
-                    id: item.id,
-                    name: item.name,
-                    markedGetChildren: item.markedGetChildren,
-                    children: [],
-                    disabled: this.treeDataSourceConfig.disabledList.includes(item.id),
-                    itemIcon: item.itemIcon,
-                    itemMatIcon: item.itemMatIcon,
-                    itemIconSvg: item.itemIconSvg
-                };
-                return node;
-            });
-            if (!rootNode.length)
-                throw ('Data invalid.');
-            this.updateDataTree(rootNode);
-            const groupResult = this.treeDataSourceConfig.treeData.filter(x => x.parentId).reduce((result, currentValue) => {
-                (result[currentValue['parentId']] = result[currentValue['parentId']] || []).push(currentValue);
-                return result;
-            }, {});
-            const getAllParent = (parentId) => {
-                const parents = [];
-                let parent = this.treeDataSourceConfig.treeData.find(x => x.id == parentId);
-                while (parent) {
-                    parents.push(parent);
-                    parent = this.treeDataSourceConfig.treeData.find(x => x.id == parent.parentId);
-                }
-                return parents;
+        this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
+        this.treeFlattener = new MatTreeFlattener(this._transformer, this.getLevel, this.isExpandable, this._getChild);
+        this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+        const _treeDataInput = _.cloneDeep(this.treeDataSourceConfig.treeData);
+        if (!_treeDataInput.length)
+            return;
+        const rootNode = _treeDataInput.filter(item => !item.parentId)
+            .map((item, _index) => {
+            const node = {
+                id: item.id,
+                name: item.name,
+                markedGetChildren: item.markedGetChildren,
+                children: [],
+                isFile: false,
+                itemIcon: item.itemIcon,
+                itemMatIcon: item.itemMatIcon,
+                itemIconSvg: item.itemIconSvg,
+                parentId: item.parentId,
+                isGroup: false
             };
-            if (!(rootNode && !!rootNode.length))
-                return;
-            let groupResultKey = Object.keys(groupResult).filter(x => getAllParent(x).length);
-            while (groupResultKey.length) {
-                groupResultKey = groupResultKey.filter((key) => {
-                    const parentFlatNode = this.treeControl.dataNodes.find(node => node.id === key);
-                    if (parentFlatNode) {
-                        const parentNestedNode = this.convertToNestedNode(parentFlatNode);
-                        parentNestedNode.markedGetChildren = true;
-                        parentNestedNode.children = _.cloneDeep(groupResult[key]);
-                        parentNestedNode.childCount = parentNestedNode.children.length;
-                        this.updateDataTree(this.currentTreeData);
-                        groupResult[key] = [];
-                        return false;
-                    }
-                    return true;
-                });
-            }
+            return node;
+        });
+        if (!rootNode.length)
+            throw ('Data invalid.');
+        const invalidItems = _treeDataInput.filter(item => item.id == item.parentId) || [];
+        if (invalidItems.length) {
+            throw (`data ${JSON.stringify(invalidItems)} invalid`);
+        }
+        this.updateDataTree(rootNode);
+        const groupResult = _treeDataInput.filter(x => x.parentId).reduce((result, currentValue) => {
+            (result[currentValue['parentId']] = result[currentValue['parentId']] || []).push(currentValue);
+            return result;
+        }, {});
+        const checkValidGroup = (id) => {
+            const parents = [];
+            let parent = _treeDataInput.find(x => x.id == id);
+            while (parent === null || parent === void 0 ? void 0 : parent.id) {
+                parents.push(parent);
+                parent = _treeDataInput.find(x => x.id == (parent === null || parent === void 0 ? void 0 : parent.parentId));
+            }
+            return parents.some(x => !x.parentId);
+        };
+        if (!(rootNode && !!rootNode.length))
+            return;
+        let groupResultKey = Object.keys(groupResult).filter(checkValidGroup);
+        while (groupResultKey.length) {
+            groupResultKey = groupResultKey.filter((key) => {
+                const parentFlatNode = this.treeControl.dataNodes.find(node => node.id === key);
+                if (parentFlatNode) {
+                    const parentNestedNode = this.convertToNestedNode(parentFlatNode);
+                    parentNestedNode.markedGetChildren = true;
+                    parentNestedNode.children = _.cloneDeep(groupResult[key]);
+                    parentNestedNode.childCount = parentNestedNode.children.length;
+                    parentNestedNode.isGroup = false;
+                    this.updateDataTree(this.currentTreeData);
+                    groupResult[key] = [];
+                    return false;
+                }
+                return true;
+            });
         }
+        this.getLoading$.next(false);
+        this._initCheckListSelected();
     }
     _initCheckListSelected() {
         if (!this.treeDataSourceConfig.selectedList.length)
             return;
-        this.resultGroupSelected = this.treeDataSourceConfig.selectedList.filter(item => item.children);
-        this.resultSingleSelected = this.treeDataSourceConfig.selectedList.filter(item => item.children === null);
-        this.treeDataSourceConfig.selectedList.forEach(item => {
+        const selectedList = this.treeDataSourceConfig.selectedList;
+        selectedList.forEach(item => {
             var _a;
-            const flatNode = this.treeControl.dataNodes.find(node => node.id === item.id);
-            if (flatNode) {
-                this.checkListSelection.select(flatNode);
+            const node = this.treeControl.dataNodes.find(x => x.id === item.id);
+            if (node) {
+                const nestedNode = this.convertToNestedNode(node);
+                nestedNode.isGroup = item.isGroup;
+                nestedNode.groupId = item.groupId;
+                this.checkListSelection.select(node);
+                this._handleCheckNode(node);
                 ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) && item.children.forEach(child => {
                     const node = this.treeControl.dataNodes.find(_x => _x.id === child.id);
                     if (node) {
-                        this.checkListSelection.select(node);
                         this.onExpandAllParent(node);
                     }
                 });
-                this.onExpandAllParent(flatNode);
+                this.onExpandAllParent(node);
+            }
+        });
+        this.cdRef.detectChanges();
+    }
+    //Handle item selection changed
+    _handleItemSelectionChanged() {
+        this.checkListSelection.changed
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(({ added, removed }) => {
+            const checkExistInResult = (node) => this.resultSelected.findIndex(x => x.id === node.id) > -1;
+            if (added.length) {
+                added.forEach(node => {
+                    const nestedNode = this.convertToNestedNode(node);
+                    nestedNode.children = [];
+                    nestedNode.childCount = this.getListChildrenOfNode(node).length;
+                    const existGroup = this._getAllParentNode(node).map(item => this.convertToNestedNode(item)).find(x => x.isGroup);
+                    if (!!existGroup) {
+                        nestedNode.groupId = existGroup.id;
+                        if (!existGroup.children.some(x => x.id === nestedNode.id)) {
+                            existGroup.children.push(nestedNode);
+                            this._onSelectionNodeChangeEvent('updated', [existGroup]);
+                        }
+                        if (!checkExistInResult(existGroup)) {
+                            this.resultSelected.push(existGroup);
+                            this._onSelectionNodeChangeEvent('added', [existGroup]);
+                        }
+                        this.resultSelected.forEach((item, index) => {
+                            if (item.groupId === existGroup.id) {
+                                this.resultSelected.splice(index, 1);
+                                this._onSelectionNodeChangeEvent('removed', [item]);
+                            }
+                        });
+                        return;
+                    }
+                    if (checkExistInResult(node))
+                        return;
+                    this.resultSelected.push(nestedNode);
+                    this._onSelectionNodeChangeEvent('added', [nestedNode]);
+                });
+            }
+            if (removed.length) {
+                removed.forEach(node => {
+                    const nestedNode = this.convertToNestedNode(node);
+                    const children = this.getListChildrenOfNode(node);
+                    if (nestedNode.isGroup) {
+                        const _item = this.resultSelected.find(x => x.id === node.id);
+                        if (!_item)
+                            return;
+                        children.forEach(item => {
+                            item.groupId = null;
+                        });
+                        this.resultSelected.splice(this.resultSelected.indexOf(_item), 1);
+                        this._onSelectionNodeChangeEvent('removed', [_item]);
+                        return;
+                    }
+                    const group = this.resultSelected.find(x => x.id === nestedNode.groupId);
+                    if (!group) {
+                        const _item = this.resultSelected.find(x => x.id === node.id);
+                        if (!_item)
+                            return;
+                        this.resultSelected.splice(this.resultSelected.indexOf(_item), 1);
+                        this._onSelectionNodeChangeEvent('removed', [_item]);
+                        return;
+                    }
+                    const arrCheck = this.getListChildrenOfNode(node).concat(node);
+                    arrCheck.forEach(item => {
+                        const _node = this.treeControl.dataNodes.find(x => x.id === item.id);
+                        if (group.children.some(x => x.id === _node.id && !this.checkListSelection.isSelected(_node))) {
+                            const _item = group.children.find(x => x.id === item.id);
+                            if (!_item)
+                                return;
+                            group.children.splice(group.children.indexOf(_item), 1);
+                            this._onSelectionNodeChangeEvent('updated', [group]);
+                        }
+                    });
+                });
             }
-            this.resultSelected = [...this.resultSingleSelected, ...this.resultGroupSelected];
             this.onValueChangeEvent.emit(this.resultSelected);
         });
     }
+    _onSelectionNodeChangeEvent(state, data) {
+        switch (state) {
+            case 'removed':
+                this.selectionNodeChangeEvent.emit({
+                    removed: data,
+                    added: [],
+                    updated: [],
+                    source: new SelectionModel(true, this.resultSelected)
+                });
+                break;
+            case 'updated':
+                this.selectionNodeChangeEvent.emit({
+                    removed: [],
+                    added: [],
+                    updated: data,
+                    source: new SelectionModel(true, this.resultSelected)
+                });
+                break;
+            case 'added':
+                this.selectionNodeChangeEvent.emit({
+                    removed: [],
+                    added: data,
+                    updated: [],
+                    source: new SelectionModel(true, this.resultSelected)
+                });
+                break;
+            default:
+                return;
+        }
+    }
+    _handleSearchEvent() {
+        this.searchDepartment$
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(result => {
+            this.resultSearch = [];
+            if (result && result.length) {
+                result.data.forEach(item => {
+                    const node = this.treeControl.dataNodes.find(node => node.id === item.id);
+                    const parents = node ? this._getAllParentNode(node) : [];
+                    this.resultSearch.push(Object.assign(Object.assign({}, item), { disabled: this.checkSearchMappingTree && !node, path: [
+                            ...(parents.map((x, index) => ({
+                                id: x.id,
+                                name: x.name,
+                            })).reverse() || []),
+                            {
+                                id: item.id,
+                                name: item.name,
+                            }
+                        ] }));
+                });
+                this.getLoading$.next(false);
+                this.textResultSearch = this.formSearchControl.value;
+                this._mapToResultSearch();
+                this._checkStateCheckboxAllSearch();
+                this.setIndexView(1);
+            }
+        });
+    }
+    _handleActiveNodeEvent() {
+        this.scrollToNodeEvent$.pipe(takeUntil(this.ngUnsubscribe), switchMap((val) => {
+            const delayTiming = this.indexView === 1 ? 700 : 0;
+            this.setIndexView(0);
+            return of(val).pipe(delay(delayTiming));
+        })).subscribe(res => {
+            this.onScrollIntoNode(res);
+        });
+        this.getActiveNodeEvent$.pipe(takeUntil(this.ngUnsubscribe), switchMap(val => {
+            this.activeNode = val;
+            return timer(1500);
+        })).subscribe(_ => {
+            this.activeNode = '';
+        });
+    }
     updateDataTree(data) {
         this.getDataTree$.next(data);
     }
     setResultSearch(data) {
+        this.getLoading$.next(false);
         this.searchDepartment$.next(data);
     }
     onExpandNode(node) {
@@ -29233,8 +29473,6 @@ class SelectDepartmentTreeComponent {
         this._handleCheckNode(flatNode);
         this.onScrollIntoNode(flatNode.id);
     }
-    onSlideToggleChange() {
-    }
     displayWhenSelectDepartmentOption($event) {
         return '';
     }
@@ -29246,8 +29484,6 @@ class SelectDepartmentTreeComponent {
         else {
             this._handleCheckNode(node);
         }
-        this.onValueChangeEvent.emit(this.resultSelected);
-        this._mapToResultSearch();
         this._checkStateCheckboxAllSearch();
     }
     _handleSelectOne(node) {
@@ -29274,7 +29510,6 @@ class SelectDepartmentTreeComponent {
         this.checkListSelection.deselect(flatNode);
         flatNode && this._handleCheckNode(flatNode);
         this._checkStateCheckboxAllSearch();
-        this.onValueChangeEvent.emit(this.resultSelected);
     }
     isIndeterminate(node) {
         const childSelected = this.getListChildrenOfNode(node).filter(item => this.checkListSelection.isSelected(item));
@@ -29285,73 +29520,37 @@ class SelectDepartmentTreeComponent {
         return listCheck.every(item => this.checkListSelection.isSelected(item));
     }
     _handleCheckNode(node) {
-        const isSelectedNode = this.checkListSelection.isSelected(node);
-        const isOwnerGroup = !!this.resultGroupSelected.find(gr => (gr === null || gr === void 0 ? void 0 : gr.id) === node.id);
-        if (isSelectedNode) {
-            const children = this.treeDataSourceConfig.includeChildren && this.getListChildrenOfNode(node);
-            children && this.checkListSelection.select(...children);
-        }
-        else {
-            const childSelected = this.getChildrenSelected(node);
-            // check node is owner group or mode is 'include children' and remove all children
-            (isOwnerGroup || this.treeDataSourceConfig.includeChildren) && this.checkListSelection.deselect(...childSelected);
-        }
-        this._updateGroupResult(node);
-        this._updateSingleResult();
-        this.resultSelected = [...this.resultSingleSelected, ...this.resultGroupSelected];
-        this._mapToResultSearch();
-    }
-    // Check group root contain node and re-update chilren
-    _updateGroupResult(node) {
+        const isSelected = this.checkListSelection.isSelected(node);
+        const childSelected = this.getChildrenSelected(node);
         const nestedNode = this.convertToNestedNode(node);
-        const existedGroup = this._getExistedGroup(node);
-        const childrenSelected = this._mapToNestedListNode(this.getChildrenSelected(this.convertToFlatNode(existedGroup) || node));
-        const item = this.resultGroupSelected.find(gr => gr.id == nestedNode.id || gr.id === (existedGroup === null || existedGroup === void 0 ? void 0 : existedGroup.id));
-        if (!!item) {
-            item.children = childrenSelected;
-        }
-        else {
-            this.treeDataSourceConfig.includeChildren && this.resultGroupSelected.push(Object.assign(Object.assign({}, nestedNode), { children: childrenSelected }));
+        if (isSelected) {
+            // Check existed group
+            const existedGroup = this._getAllParentNode(node).find(x => this.convertToNestedNode(x).isGroup);
+            if (!this.isIncludeChildren) {
+                // nestedNode.isGroup = false;
+                nestedNode.groupId = existedGroup === null || existedGroup === void 0 ? void 0 : existedGroup.id;
+                return;
+            }
+            const children = this.getListChildrenOfNode(node);
+            nestedNode.isGroup = !existedGroup && !!children.length;
+            if (!children.length)
+                return;
+            children.forEach(x => {
+                const _node = this.convertToNestedNode(x);
+                _node.groupId = existedGroup ? existedGroup.id : node.id;
+                _node.isGroup = false;
+            });
+            this.checkListSelection.deselect(...childSelected.map(this.resetNode));
+            this.checkListSelection.select(...children.map(this.resetNode));
+            return;
         }
-        this._checkGroupSelected(childrenSelected);
+        const deselectNodes = (this.isIncludeChildren || nestedNode.isGroup) ? childSelected : [node];
+        this.checkListSelection.deselect(...deselectNodes);
+        nestedNode.isGroup = false;
     }
-    // Check single selected result
-    _updateSingleResult() {
-        let excludeChildOfGroup = [];
-        this.resultGroupSelected.forEach(gr => {
-            excludeChildOfGroup = [...excludeChildOfGroup, ...gr.children.map(x => x.id)];
-        });
-        this.resultSingleSelected = this.treeControl.dataNodes.filter(item => {
-            const isSelected = this.checkListSelection.isSelected(item);
-            const existedGroup = this._getExistedGroup(item);
-            const isOwnerGroup = !!this.resultGroupSelected.find(x => (x === null || x === void 0 ? void 0 : x.id) === item.id);
-            return isSelected && !existedGroup && !isOwnerGroup && !excludeChildOfGroup.includes(item.id);
-        }).map(item => {
-            const nestedNode = this.convertToNestedNode(item);
-            nestedNode.children = null;
-            return nestedNode;
-        });
-    }
-    _checkGroupSelected(childSelected) {
-        this.resultGroupSelected = this.resultGroupSelected.filter(gr => {
-            const flatNode = this.treeControl.dataNodes.find(node => node.id === gr.id);
-            const childSelectedInGroup = gr.children.filter(x => childSelected.includes(x));
-            gr.childCount = this.getListChildrenOfNode(flatNode).length;
-            // if Mode is 'include child' the group list will filter exclude all child selected , ortherwise filter exclude all child in group that node is contained
-            const arrChild = this.treeDataSourceConfig.includeChildren ? childSelected : childSelectedInGroup;
-            return gr.childCount > 0 && this.checkListSelection.isSelected(flatNode) && !arrChild.find(_x => _x.id === gr.id);
-        });
-    }
-    _getExistedGroup(node) {
-        const allParent = this._getAllParentNode(node);
-        const listGroupIds = this.resultGroupSelected.map(gr => gr.id);
-        let existedGroup;
-        allParent.forEach(item => {
-            if (listGroupIds.includes(item.id)) {
-                existedGroup = this.convertToNestedNode(item);
-            }
-        });
-        return existedGroup;
+    resetNode(node) {
+        node.isGroup = false;
+        return node;
     }
     getChildrenSelected(node) {
         return this.getListChildrenOfNode(node).filter(x => this.checkListSelection.isSelected(x));
@@ -29363,23 +29562,11 @@ class SelectDepartmentTreeComponent {
         return flatNodeList.map(item => this.convertToNestedNode(item));
     }
     convertToNestedNode(node) {
-        return this.flatTreeNodeMap.get(node);
+        return this.flatTreeNodeMap.get(node) || {};
     }
     convertToFlatNode(node) {
         return this.nestedTreeNodeMap.get(node);
     }
-    _getRootSelected(node) {
-        const parentList = this._getAllParentNode(node);
-        let groupExist;
-        if (parentList.length) {
-            parentList.forEach(item => {
-                if (this.checkListSelection.isSelected(item)) {
-                    groupExist = item;
-                }
-            });
-        }
-        return groupExist;
-    }
     _getAllParentNode(node) {
         const listParent = [];
         let parent = this._getParentNode(node);
@@ -29425,12 +29612,13 @@ class SelectDepartmentTreeComponent {
         this.getActiveNodeEvent$.next(nodeId);
     }
     onSearch() {
-        if (this.formSearchControl.value) {
-            this.getLoading$.next(true);
-            this.setIndexView(1);
-            this.onSearchEvent.emit(this.formSearchControl.value);
+        this.getLoading$.next(true);
+        this.setIndexView(1);
+        this.onSearchEvent.emit(this.formSearchControl.value);
+        if (!this.paginatorSearch)
             return;
-        }
+        this.paginatorSearch.changePage(0);
+        this.paginatorSearch.renderDisplayNumberOfpages();
     }
     onClickResultItem(item) {
         const node = this.treeControl.dataNodes.find(x => item.id === x.id);
@@ -29454,7 +29642,6 @@ class SelectDepartmentTreeComponent {
         }
         this._handleCheckResutlSearch(item);
         this._checkStateCheckboxAllSearch();
-        this.onValueChangeEvent.emit(this.resultSelected);
     }
     _mapToResultSearch() {
         if (!!this.resultSearch.length)
@@ -29472,43 +29659,27 @@ class SelectDepartmentTreeComponent {
     }
     onSelectAllSearchResult(checked) {
         this.isSelectAllResultSearch = !checked;
-        const handle = (arr) => {
-            arr.length && arr.forEach(item => {
-                if (this.isSelectAllResultSearch) {
-                    !this.checkListSelectionSearch.isSelected(item) && this.checkListSelectionSearch.select(item);
-                }
-                else {
-                    this.checkListSelectionSearch.deselect(item);
-                }
-                this._handleCheckResutlSearch(item);
-            });
-        };
-        if (this.treeDataSourceConfig.includeChildren) {
-            const mainGroup = this.pagingResultSearch.filter((item) => {
-                const mainGroup = this.pagingResultSearch.filter((item) => {
-                    const node = this.treeControl.dataNodes.find(x => x.id === item.id);
-                    const existItemGroup = this._getAllParentNode(node).filter(x => this.pagingResultSearch.some(x1 => x1.id === x.id));
-                    return existItemGroup.length === 0;
-                });
-                handle(mainGroup);
-            });
-        }
-        else {
-            handle(this.pagingResultSearch);
-        }
+        this.resultSearch.length && this.resultSearch.forEach(item => {
+            if (this.isSelectAllResultSearch) {
+                !this.checkListSelectionSearch.isSelected(item) && this.checkListSelectionSearch.select(item);
+            }
+            else {
+                this.checkListSelectionSearch.deselect(item);
+            }
+            this._handleCheckResutlSearch(item);
+        });
         this._checkStateCheckboxAllSearch();
         this.onValueChangeEvent.emit(this.resultSelected);
     }
     _checkStateCheckboxAllSearch() {
-        this.isSelectAllResultSearch = !!this.pagingResultSearch.length && this.pagingResultSearch.every(x => this.checkListSelectionSearch.isSelected(x));
-        this.indeterminateSearchResult = !this.isSelectAllResultSearch && !!this.pagingResultSearch.length && this.pagingResultSearch.some(x => this.checkListSelectionSearch.isSelected(x));
+        this.isSelectAllResultSearch = !!this.resultSearch.length && this.resultSearch.every(x => this.checkListSelectionSearch.isSelected(x));
+        this.indeterminateSearchResult = !this.isSelectAllResultSearch && !!this.resultSearch.length && this.resultSearch.some(x => this.checkListSelectionSearch.isSelected(x));
     }
     isDisableChecboxAllSearch() {
-        return this.pagingResultSearch.length && this.pagingResultSearch.every(x => x.disabled);
+        return this.resultSearch && this.resultSearch.every(x => x.disabled);
     }
     onPagingSearchResult(val) {
-        this.currentPaginationConfig = val;
-        this.pagingResultSearch = this.enablePagingSearch ? this.resultSearch.slice(val.pageIndex * val.pageSize, (val.pageIndex * val.pageSize) + val.pageSize) : this.resultSearch;
+        this.getLoading$.next(true);
         this._checkStateCheckboxAllSearch();
         this.onPagingSearchEvent.emit(val);
     }
@@ -29517,7 +29688,7 @@ class SelectDepartmentTreeComponent {
     }
     setIndexView(index) {
         if (index === 1) {
-            this.treeDataSourceConfig.includeChildren = false;
+            this.isIncludeChildren = false;
         }
         this.indexView = index;
     }
@@ -29525,17 +29696,17 @@ class SelectDepartmentTreeComponent {
         return JSON.parse(localStorage.getItem('selectedNode'));
     }
     setSelectedNodeStorage(node) {
-        this.treeDataSourceConfig.includeChildren && localStorage.setItem('selectedNode', JSON.stringify(node));
+        this.isIncludeChildren && localStorage.setItem('selectedNode', JSON.stringify(node));
     }
 }
 SelectDepartmentTreeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-select-department-tree',
-                template: "<div class=\"qms-select-department-tree-container\">\r\n  <div class=\"input-select-department\">\r\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"enableTreeSearch\" class=\"input-field\">\r\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\r\n        <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"Search\" matInput />\r\n        <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\r\n          <mat-icon>search</mat-icon>\r\n        </button>\r\n        <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\r\n          *ngIf=\"getLoading$.value\"></mat-progress-spinner>\r\n        <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\r\n          <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </mat-form-field>\r\n    </form>\r\n    <div [@inOutAnimation] *ngIf=\"indexView === 1 && textResultSearch\" class=\"sub-text ms-1 fw500\">\r\n      {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textResultSearch}}\"</b></i>\r\n    </div>\r\n    <div [class.justify-content-between]=\"enableIncludeChild && !isSelectOne\"\r\n      class=\"select__toggle-include toggle-include-child mt-1 d-flex justify-content-end  align-items-center\">\r\n      <mat-slide-toggle *ngIf=\"enableIncludeChild && !isSelectOne\" [disabled]=\"indexView === 1\"\r\n        [(ngModel)]=\"treeDataSourceConfig.includeChildren\" (ngModelChange)=\"onSlideToggleChange()\" color=\"default\"\r\n        qms-group-options>\r\n        <span class=\"text-label\">{{treeDataSourceConfig.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n      </mat-slide-toggle>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"indexView === 1 && enableTreeSearch\" (click)=\"setIndexView(0)\"\r\n        qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\" position=\"top\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"indexView === 0 && enableTreeSearch && textResultSearch\"\r\n        (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_forward</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <mat-divider class=\"mx-auto\"></mat-divider>\r\n  <div [@animateSlideView]=\"indexView\" class=\"tree-department-wrapper\">\r\n    <mat-tree [@listAnimation] *ngIf=\"indexView === 0\" class=\"select-department-tree\" [dataSource]=\"dataSource\"\r\n      [treeControl]=\"treeControl\">\r\n      <!-- This is the tree node template for leaf nodes -->\r\n      <mat-tree-node\r\n        [ngClass]=\"{'w-100': isSelectOne, 'selected-theme': this.checkListSelection.isSelected(node) && isSelectOne}\"\r\n        [@triggerColor]=\"activeNode == node.id\" *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\r\n        [ngClass]=\"{\r\n                  'mat-tree-node-disabled-all': node.disabled\r\n                }\">\r\n        <button class=\"btn-toggle\" qms-btn-icon color=\"light\" disabled></button>\r\n        <ng-container [ngTemplateOutlet]=\"isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n          [ngTemplateOutletContext]=\"{ node: node }\">\r\n        </ng-container>\r\n      </mat-tree-node>\r\n      <!-- This is the tree node template for expandable nodes -->\r\n      <mat-tree-node [@triggerColor]=\"activeNode == node.id\" *matTreeNodeDef=\"let node; when: hasChild\"\r\n        [class.selected-theme]=\"this.checkListSelection.isSelected(node) && isSelectOne\" matTreeNodePadding [ngClass]=\"{\r\n                  'expand-node': treeControl.isExpanded(node),\r\n                  'collapse-node': !treeControl.isExpanded(node),\r\n                  'mat-tree-node-disabled': node.disabled\r\n                }\">\r\n        <div class=\"node-content-wraper\" [ngClass]=\"{'w-100': isSelectOne}\">\r\n          <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\" matTreeNodeToggle>\r\n            <mat-icon>\r\n              {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n            </mat-icon>\r\n          </button>\r\n          <ng-container [ngTemplateOutlet]=\"isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n            [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n          <mat-progress-bar *ngIf=\"false\" mode=\"indeterminate\" class=\"example-tree-progress-bar\">\r\n          </mat-progress-bar>\r\n        </div>\r\n      </mat-tree-node>\r\n    </mat-tree>\r\n    <div *ngIf=\"indexView === 1\" class=\"qms-view-search-result\">\r\n      <div class=\"\">\r\n        <mat-checkbox [@inOutAnimation] *ngIf=\"!!resultSearch.length && !getLoading$.value\"\r\n          [disabled]=\"!resultSearch.length || isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n          [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n          color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n          (click)=\"!isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n          <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n          <span>(<b>{{pagingResultSearch.length}}</b>)</span>\r\n        </mat-checkbox>\r\n      </div>\r\n      <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\r\n      <div [@inOutAnimation] *ngIf=\"pagingResultSearch.length && !getLoading$.value\"\r\n        [class.active-paging]=\"resultSearch.length > 10 && enablePagingSearch\" class=\"result\">\r\n        <div *ngFor=\"let item of pagingResultSearch\" (click)=\"$event.stopPropagation();onClickResultItem(item)\"\r\n          [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\r\n          <mat-checkbox [disabled]=\"item.disabled\"\r\n            (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n            [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\r\n          </mat-checkbox>\r\n          <div class=\"item-result-content-wraper\">\r\n            <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\r\n            <qms-breadcrumb [numDisplayItem]=\"6\" (onItemClick)=\"onBreadCrumbItemClick($event)\"\r\n              *ngIf=\"item.path.length > 1\" class=\"breadcrumb-container\" [nodes]=\"item.path\">\r\n            </qms-breadcrumb>\r\n\r\n            <div *ngIf=\"item.path.length === 1\" class=\"d-flex align-items-center\">\r\n              <!-- <mat-icon class=\"me-1\">arrow_right</mat-icon> -->\r\n              <span class=\"item-breadcrumb-disable\">{{item.path[0].name}}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [@inOutAnimation] *ngIf=\"!pagingResultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n        <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n      </div>\r\n      <mat-divider *ngIf=\"resultSearch.length > 10 && enablePagingSearch\" class=\"mx-auto\"></mat-divider>\r\n      <qms-paginator *ngIf=\"resultSearch.length > 10 && enablePagingSearch && !getLoading$.value\"\r\n        [length]=\"resultSearch.length\" [numHidden]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 100]\"\r\n        (page)='onPagingSearchResult($event)' [size]='PAGINATION_SIZE.medium'>\r\n      </qms-paginator>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Template for Checkbox -->\r\n  <ng-template #showCheckboxTemplate let-node=\"node\">\r\n    <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\r\n      [checked]=\"checkListSelection.isSelected(node)\" (click)=\"onCheckNode(node)\" [attr.disabled]=\"node.disabled\">\r\n      <img *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\" [src]=\"node.itemIconSvg\" />\r\n      <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n        class=\"material-icons-outlined type-icon\"></span>\r\n      <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n        node.itemMatIcon }}\r\n      </span>\r\n      <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name\r\n        }}\r\n      </span>\r\n    </mat-checkbox>\r\n  </ng-template>\r\n\r\n  <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\r\n    <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\r\n      <div class=\"node-info\">\r\n        <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n          class=\"material-icons-outlined type-icon\"></span>\r\n        <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n          node.itemMatIcon }}\r\n        </span>\r\n        <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name\r\n          }}\r\n        </span>\r\n      </div>\r\n      <div class=\"node-state\">\r\n        <mat-icon *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #noResult>\r\n  <svg width=\"89\" height=\"88\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n    <path\r\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\r\n      fill=\"#0163B3\" />\r\n  </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div class=\"loading-container\">\r\n    <div class=\"loader\" *ngFor=\"let item of [1,1,1,1,1,1]\">\r\n      <div class=\"loader__wrapper\">\r\n        <div class=\"row-loader\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
+                template: "<div [ngClass]=\"['qms-select-department-tree-container', customClass]\">\r\n  <div class=\"input-select-department\">\r\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"enableTreeSearch\" class=\"input-field\">\r\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\r\n        <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"Search\" matInput />\r\n        <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\r\n          <mat-icon>search</mat-icon>\r\n        </button>\r\n        <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\r\n          *ngIf=\"getLoading$.value\"></mat-progress-spinner>\r\n        <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\r\n          <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </mat-form-field>\r\n    </form>\r\n    <div [@inOutAnimation] *ngIf=\"indexView === 1 && textResultSearch\" class=\"sub-text ms-1 fw500\">\r\n      {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textResultSearch}}\"</b></i>\r\n    </div>\r\n    <div [class.justify-content-between]=\"enableIncludeChild && !isSelectOne\"\r\n      class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end  align-items-center\">\r\n      <mat-slide-toggle *ngIf=\"enableIncludeChild && !isSelectOne\" [disabled]=\"indexView === 1\"\r\n        [(ngModel)]=\"isIncludeChildren\" color=\"default\" qms-group-options>\r\n        <span class=\"text-label\">{{treeDataSourceConfig.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n      </mat-slide-toggle>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"indexView === 1 && enableTreeSearch\" (click)=\"setIndexView(0)\"\r\n        qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\" position=\"top\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"indexView === 0 && enableTreeSearch && textResultSearch\"\r\n        (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_forward</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <mat-divider class=\"mx-auto\"></mat-divider>\r\n  <div [@animateSlideView]=\"indexView\" [ngStyle]=\"{height: height || '50vh'}\" class=\"tree-department-wrapper\">\r\n    <mat-tree [@listAnimation] *ngIf=\"indexView === 0 && !!treeControl\" class=\"select-department-tree\"\r\n      [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n      <!-- This is the tree node template for leaf nodes -->\r\n      <mat-tree-node\r\n        [ngClass]=\"{'w-100': isSelectOne, 'selected-theme': this.checkListSelection.isSelected(node) && isSelectOne}\"\r\n        [@triggerColor]=\"activeNode == node.id\" *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\r\n        [ngClass]=\"{\r\n                  'mat-tree-node-disabled-all': node.disabled\r\n                }\">\r\n        <button class=\"btn-toggle\" qms-btn-icon color=\"light\" disabled></button>\r\n        <ng-container [ngTemplateOutlet]=\"isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n          [ngTemplateOutletContext]=\"{ node: node }\">\r\n        </ng-container>\r\n      </mat-tree-node>\r\n      <!-- This is the tree node template for expandable nodes -->\r\n      <mat-tree-node [@triggerColor]=\"activeNode == node.id\" *matTreeNodeDef=\"let node; when: hasChild\"\r\n        [class.selected-theme]=\"this.checkListSelection.isSelected(node) && isSelectOne\" matTreeNodePadding [ngClass]=\"{\r\n                  'expand-node': treeControl.isExpanded(node),\r\n                  'collapse-node': !treeControl.isExpanded(node),\r\n                  'mat-tree-node-disabled': node.disabled\r\n                }\">\r\n        <div class=\"node-content-wraper\" [ngClass]=\"{'w-100': isSelectOne}\">\r\n          <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\" matTreeNodeToggle>\r\n            <mat-icon>\r\n              {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n            </mat-icon>\r\n          </button>\r\n          <ng-container [ngTemplateOutlet]=\"isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n            [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n          <mat-progress-bar *ngIf=\"false\" mode=\"indeterminate\" class=\"example-tree-progress-bar\">\r\n          </mat-progress-bar>\r\n        </div>\r\n      </mat-tree-node>\r\n    </mat-tree>\r\n    <div *ngIf=\"indexView === 1\" class=\"qms-view-search-result\">\r\n      <div class=\"\">\r\n        <mat-checkbox [@inOutAnimation] *ngIf=\"!!resultSearch.length && !getLoading$.value\"\r\n          [disabled]=\"!resultSearch.length || isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n          [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n          color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n          (click)=\"!isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n          <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n          <span>(<b>{{resultSearch.length}}</b>)</span>\r\n        </mat-checkbox>\r\n      </div>\r\n      <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\r\n      <div [@inOutAnimation] [@listAnimation] *ngIf=\"resultSearch.length && !getLoading$.value\"\r\n        [class.active-paging]=\"resultSearch.length > 10 && enablePagingSearch\" class=\"result\">\r\n        <div *ngFor=\"let item of resultSearch\" (click)=\"$event.stopPropagation();onClickResultItem(item)\"\r\n          [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\r\n          <mat-checkbox [disabled]=\"item.disabled\"\r\n            (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n            [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\r\n          </mat-checkbox>\r\n          <div class=\"item-result-content-wraper\">\r\n            <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\r\n            <qms-breadcrumb [numDisplayItem]=\"6\" (onItemClick)=\"onBreadCrumbItemClick($event)\"\r\n              *ngIf=\"item.path.length > 1\" class=\"breadcrumb-container\" [nodes]=\"item.path\">\r\n            </qms-breadcrumb>\r\n\r\n            <div *ngIf=\"item.path.length === 1\" class=\"d-flex align-items-center\">\r\n              <!-- <mat-icon class=\"me-1\">arrow_right</mat-icon> -->\r\n              <span class=\"item-breadcrumb-disable\">{{item.path[0].name}}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n        <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n      </div>\r\n      <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && enablePagingSearch\" class=\"mx-auto\"></mat-divider>\r\n      <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && enablePagingSearch \"\r\n        [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 100]\"\r\n        (page)='onPagingSearchResult($event)' [size]='PAGINATION_SIZE.medium'>\r\n      </qms-paginator>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Template for Checkbox -->\r\n  <ng-template #showCheckboxTemplate let-node=\"node\">\r\n    <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\r\n      [checked]=\"checkListSelection.isSelected(node)\" (click)=\"onCheckNode(node)\" [attr.disabled]=\"node.disabled\">\r\n      <img *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\" [src]=\"node.itemIconSvg\" />\r\n      <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n        class=\"material-icons-outlined type-icon\"></span>\r\n      <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n        node.itemMatIcon }}\r\n      </span>\r\n      <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name\r\n        }}\r\n      </span>\r\n    </mat-checkbox>\r\n  </ng-template>\r\n\r\n  <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\r\n    <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\r\n      <div class=\"node-info\">\r\n        <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n          class=\"material-icons-outlined type-icon\"></span>\r\n        <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n          node.itemMatIcon }}\r\n        </span>\r\n        <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name\r\n          }}\r\n        </span>\r\n      </div>\r\n      <div class=\"node-state\">\r\n        <mat-icon *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #noResult>\r\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n    <path\r\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\r\n      fill=\"#0163B3\" />\r\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\r\n  </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div class=\"loading-container\">\r\n    <div class=\"loader\" *ngFor=\"let item of arrSkeleton\">\r\n      <div class=\"loader__wrapper\">\r\n        <div class=\"row-loader\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
                 animations: [
                     AnimationTreeDepartment
                 ],
-                styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .text-selected{color:rgba(0,0,0,.6);font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .tree-department-wrapper{height:375px;padding-right:4px;overflow-y:auto;overflow-x:hidden;position:relative}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node{border-radius:4px}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node:hover{background:rgba(0,0,0,.08)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node:active{background:rgba(0,0,0,.12)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active{color:var(--primary);background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active .mat-icon-rtl-mirror,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active .text-name,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active .type-icon,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active button,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active .mat-icon-rtl-mirror,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active .text-name,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active .type-icon,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active button{color:var(--primary)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active:active,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node .mat-icon-rtl-mirror,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node .text-name,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node .type-icon,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node button{color:var(--primary)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .type-icon{margin-right:5px;color:var(--ws-action-active)}.qms-select-department-tree-container .mat-tree.select-department-tree .text-name{color:var(--default-color)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-icon-rtl-mirror{color:rgba(0,0,0,.6)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-icon-button.btn-toggle{width:35px;height:35px;line-height:35px}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all .type-icon,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all button.mat-button-disabled{color:rgba(0,0,0,.38)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:rgba(0,0,0,.38);cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled .type-icon,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled button.mat-button-disabled{color:rgba(0,0,0,.38)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled .text-name.disabled{color:rgba(0,0,0,.38);cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled.active,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled.expand-node:active,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled.expand-node:hover,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled:active,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled:hover{background-color:transparent}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node>.node-content-wraper{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node>.node-content-wraper>.mat-progress-bar{height:3px;width:100%;position:absolute;bottom:0;left:10px}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node>.node-content-wraper>.mat-progress-bar .mat-progress-bar-fill:after{background:var(--primary)}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:10px!important}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{height:375px;width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result .result{max-height:calc(100% - 44px);overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result .result.active-paging{max-height:calc(100% - 80px)}.qms-select-department-tree-container .qms-view-search-result .result.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease}.qms-select-department-tree-container .qms-view-search-result .result-item:not(:first-child){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result .result-item.active,.qms-select-department-tree-container .qms-view-search-result .result-item:hover{background:linear-gradient(0deg,rgba(1,99,178,.12),rgba(1,99,178,.12)),#fff}.qms-select-department-tree-container .qms-view-search-result .result-item .item-result-content-wraper{padding:5px 15px}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child):hover{color:var(--primary)}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-icon{display:flex;align-items:center;justify-content:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container{min-height:40px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:600;font-size:13px;color:rgba(0,0,0,.8)}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions{margin-bottom:0;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions>.qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container ::ng-deep .qms-paginator>.qms-btn-icon-wrapper{width:30px;height:30px;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{margin-right:12px;height:100%;display:flex;align-items:center;justify-content:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size>.qms-form-page-size .mat-form-field-flex{width:60px;height:30px;display:flex;align-items:center;padding:0 4px}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size>.qms-form-page-size .mat-form-field-flex .mat-form-field-infix{height:30px}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size>.qms-pagesize-label{display:none}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field.qms-form .mat-select-min-line,.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field.qms-form mat-select-trigger{font-size:14px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-select-value{text-align:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:rgba(0,0,0,.6);font-weight:400;font-size:14px}.qms-select-department-tree-container ::ng-deep .mat-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;grid-column-gap:4px;-moz-column-gap:4px;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .loading-container{overflow:hidden;height:100%;display:grid;grid-template-rows:repeat(auto-fill,minmax(60px,60px))}.qms-select-department-tree-container .loading-container .loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .loading-container .loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,hsla(0,0%,91%,0),hsla(0,0%,89%,0) 40%,hsla(0,0%,89%,.5) 50%,hsla(0,0%,89%,0) 60%,hsla(0,0%,89%,0));-webkit-animation:animate-loading 1.2s linear infinite;animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .loading-container .loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .loading-container .loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@-webkit-keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}"]
+                styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .text-selected{color:rgba(0,0,0,.6);font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .tree-department-wrapper{height:375px;padding-right:4px;overflow-y:auto;overflow-x:hidden;position:relative}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node{border-radius:4px}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node:hover{background:rgba(0,0,0,.08)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node:active{background:rgba(0,0,0,.12)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active{color:var(--primary);background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active .mat-icon-rtl-mirror,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active .text-name,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active .type-icon,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.active button,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active .mat-icon-rtl-mirror,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active .text-name,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active .type-icon,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active button{color:var(--primary)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.collapse-node:not(.selected-theme).active:active,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node .mat-icon-rtl-mirror,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node .text-name,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node .type-icon,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node button{color:var(--primary)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .mat-tree.select-department-tree .type-icon{margin-right:5px;color:var(--ws-action-active)}.qms-select-department-tree-container .mat-tree.select-department-tree .text-name{color:var(--default-color)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-icon-rtl-mirror{color:rgba(0,0,0,.6)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-icon-button.btn-toggle{width:35px;height:35px;line-height:35px}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all .type-icon,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all button.mat-button-disabled{color:rgba(0,0,0,.38)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:rgba(0,0,0,.38);cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled .type-icon,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled button.mat-button-disabled{color:rgba(0,0,0,.38)}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled .text-name.disabled{color:rgba(0,0,0,.38);cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled.active,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled.expand-node:active,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled.expand-node:hover,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled:active,.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node.mat-tree-node-disabled:hover{background-color:transparent}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node>.node-content-wraper{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node>.node-content-wraper>.mat-progress-bar{height:3px;width:100%;position:absolute;bottom:0;left:10px}.qms-select-department-tree-container .mat-tree.select-department-tree .mat-tree-node>.node-content-wraper>.mat-progress-bar .mat-progress-bar-fill:after{background:var(--primary)}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:10px!important}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{height:375px;width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result .result{max-height:calc(100% - 44px);overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result .result.active-paging{max-height:calc(100% - 80px)}.qms-select-department-tree-container .qms-view-search-result .result.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease}.qms-select-department-tree-container .qms-view-search-result .result-item:not(:first-child){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result .result-item.active,.qms-select-department-tree-container .qms-view-search-result .result-item:hover{background:linear-gradient(0deg,rgba(1,99,178,.12),rgba(1,99,178,.12)),#fff}.qms-select-department-tree-container .qms-view-search-result .result-item .item-result-content-wraper{padding:5px 15px}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child):hover{color:var(--primary)}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-icon{display:flex;align-items:center;justify-content:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container{min-height:40px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:600;font-size:13px;color:rgba(0,0,0,.8)}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions{margin-bottom:0;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions>.qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container ::ng-deep .qms-paginator>.qms-btn-icon-wrapper{width:30px;height:30px;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{margin-right:12px;height:100%;display:flex;align-items:center;justify-content:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size>.qms-form-page-size .mat-form-field-flex{width:60px;height:30px;display:flex;align-items:center;padding:0 4px}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size>.qms-form-page-size .mat-form-field-flex .mat-form-field-infix{height:30px}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size>.qms-pagesize-label{display:none}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field.qms-form .mat-select-min-line,.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field.qms-form mat-select-trigger{font-size:14px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-select-value{text-align:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:rgba(0,0,0,.6);font-weight:400;font-size:14px}.qms-select-department-tree-container ::ng-deep .mat-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;grid-column-gap:4px;-moz-column-gap:4px;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .loading-container{overflow:hidden;height:100%;display:grid;grid-template-rows:repeat(auto-fit,minmax(60px,60px))}.qms-select-department-tree-container .loading-container .loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .loading-container .loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,hsla(0,0%,91%,0),hsla(0,0%,89%,0) 40%,hsla(0,0%,89%,.5) 50%,hsla(0,0%,89%,0) 60%,hsla(0,0%,89%,0));-webkit-animation:animate-loading 1.2s linear infinite;animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .loading-container .loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .loading-container .loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@-webkit-keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}"]
             },] }
 ];
 SelectDepartmentTreeComponent.ctorParameters = () => [
@@ -29544,13 +29715,17 @@ SelectDepartmentTreeComponent.ctorParameters = () => [
     { type: QMSIconRegistryService },
     { type: MatIconRegistry },
     { type: ElementRef },
-    { type: TranslateLibraryService }
+    { type: TranslateLibraryService },
+    { type: QMSSelectDepartmentTreeGlobalService }
 ];
 SelectDepartmentTreeComponent.propDecorators = {
     enableIncludeChild: [{ type: Input }],
     enableTreeSearch: [{ type: Input }],
     isSelectOne: [{ type: Input }],
     activeViewSearch: [{ type: Input }],
+    height: [{ type: Input }],
+    customClass: [{ type: Input }],
+    rowsSkeleton: [{ type: Input }],
     treeData: [{ type: Input }],
     selectedList: [{ type: Input }],
     selectIncludeLabel: [{ type: Input }],
@@ -29558,7 +29733,9 @@ SelectDepartmentTreeComponent.propDecorators = {
     enablePagingSearch: [{ type: Input }],
     onSearchEvent: [{ type: Output }],
     onPagingSearchEvent: [{ type: Output }],
-    onValueChangeEvent: [{ type: Output }]
+    onValueChangeEvent: [{ type: Output }],
+    selectionNodeChangeEvent: [{ type: Output }],
+    paginatorSearch: [{ type: ViewChild, args: ['paginatorSearch',] }]
 };
 
 class QMSSelectDepartmentTreeModule {
@@ -29625,6 +29802,16 @@ const SelectDepartmentAnimationTrigger = [
             animate('0.3s ease-out', style({ opacity: 1 }))
         ]),
     ]),
+    trigger('inOutAnimation_2', [
+        transition(':enter', [
+            style({ opacity: 0, transform: 'translateX(-10px)' }),
+            animate('0.3s ease-out', style({ opacity: 1, transform: 'none' }))
+        ]),
+        transition(':leave', [
+            style({ opacity: 1, filter: 'blur(5px)' }),
+            animate('0.3s ease-out', style({ opacity: 0 }))
+        ]),
+    ]),
     trigger('rotateAnimation', [
         transition(':enter', [
             style({ transform: 'scale(0)  rotate(-180deg)' }),
@@ -29644,42 +29831,36 @@ const SelectDepartmentAnimationTrigger = [
             style({ maxHeight: '175px', minHeight: '40px', opacity: 1 }),
             animate('0.1s ease-out', style({ minHeight: 0, maxHeight: 0, opacity: 0 }))
         ])
+    ]),
+    trigger('updateItemAnimation', [
+        transition('void => *', [animate('0.3s', keyframes([
+                style({
+                    boxShadow: 'rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px',
+                    background: '#c8d6ea',
+                    offset: 0
+                }),
+                style({
+                    boxShadow: `*`,
+                    background: '*',
+                    offset: 1
+                })
+            ]))]),
     ])
 ];
 
-class QMSSelectDepartmentGlobalService {
-    constructor() {
-        this.getDataTree$ = new BehaviorSubject([]);
-        this.searchDepartment$ = new Subject();
-    }
-    updateDataTree(data) {
-        this.getDataTree$.next(data);
-    }
-    setResultSearch(data) {
-        this.searchDepartment$.next(data);
-    }
-}
-QMSSelectDepartmentGlobalService.ɵprov = i0.ɵɵdefineInjectable({ factory: function QMSSelectDepartmentGlobalService_Factory() { return new QMSSelectDepartmentGlobalService(); }, token: QMSSelectDepartmentGlobalService, providedIn: "root" });
-QMSSelectDepartmentGlobalService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-
 const ɵ0$1 = {
     clickAction: 'noop'
 };
 class SelectDepartmentComponent {
-    constructor(selectDepartmentService, cdRef, dialogRef, data, trans) {
-        this.selectDepartmentService = selectDepartmentService;
+    constructor(cdRef, dialogRef, data, trans) {
         this.cdRef = cdRef;
         this.dialogRef = dialogRef;
         this.data = data;
         this.trans = trans;
         this.ngUnsubscribe = new Subject();
+        this.onPagingEvent = new EventEmitter();
         this.popupData = new SelectDepartmentPopupData();
         this.groupIncludeChild = [];
-        this.singleItem = [];
         this.resultSelected = [];
         this.onSearchEvent = new EventEmitter();
         this.resultSearch = [];
@@ -29690,12 +29871,7 @@ class SelectDepartmentComponent {
             }
         });
         // Init popup data
-        this.popupData = _.cloneDeep(data);
-        this.selectDepartmentService.searchDepartment$
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(result => {
-            this.treeDepartment.setResultSearch(result);
-        });
+        this.popupData = _.cloneDeep(this.data);
     }
     ngAfterViewInit() {
         this.cdRef.detectChanges();
@@ -29724,9 +29900,17 @@ class SelectDepartmentComponent {
     onResultDepartmentChange(data) {
         this.resultSelected = data.map(item => {
             var _a;
-            return Object.assign(Object.assign({}, item), { tooltip: ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) ? this.formatString(this.LANG.TOOLTIP_INCLUDE_CHILD, item.name, item.children.length.toString()) : item.name });
+            return Object.assign(Object.assign({}, item), { tooltip: ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) ? this.formatString(this.LANG.TOOLTIP_INCLUDE_SUB_DEPARTMENT, item.name, item.children.length.toString()) : item.name });
         });
     }
+    generateTootip(node) {
+        return node.isGroup ? this.formatString(this.LANG.TOOLTIP_INCLUDE_SUB_DEPARTMENT, node.name, node.children.length.toString()) : node.name;
+    }
+    updateResultSearch(data) {
+        if (!this.treeDepartment)
+            return;
+        this.treeDepartment.setResultSearch(data);
+    }
     formatString(...replacements) {
         let result = arguments[0];
         for (let i = 0; i < arguments.length - 1; i++) {
@@ -29739,26 +29923,26 @@ class SelectDepartmentComponent {
 SelectDepartmentComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-select-department',
-                template: "<div class=\"qms-select-department\">\r\n  <div class=\"header-dialog mb-2\">\r\n    <span>{{popupData.headerName}}</span>\r\n    <button matDialogClose qms-btn-icon>\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n  <div>\r\n    <div class=\"qms-scrollbar\">\r\n      <div>\r\n        <qms-select-department-tree #treeDepartment [treeData]=\"popupData.treeData\"\r\n          [isSelectOne]=\"popupData.isSelectOne\"\r\n          [enableIncludeChild]=\"popupData.includeChildren && !popupData.isSelectOne\"\r\n          [selectIncludeLabel]=\"popupData.selectIncludeLabel\" [enableTreeSearch]=\"popupData.enableSearch\"\r\n          [enablePagingSearch]=\"popupData.enablePagingSearch\" [activeViewSearch]=\"isActiveViewSearch\"\r\n          [selectedList]=\"popupData.selectedList\" [checkSearchMappingTree]=\"true\"\r\n          (onSearchEvent)=\"onSearchEvent.emit($event)\" (onValueChangeEvent)=\"onResultDepartmentChange($event)\">\r\n        </qms-select-department-tree>\r\n      </div>\r\n    </div>\r\n    <mat-divider class=\"mx-auto\"></mat-divider>\r\n    <div *ngIf=\"!!resultSelected.length\" class=\"line__divider\"></div>\r\n    <div [@heightAnimation] *ngIf=\"!!resultSelected.length\" class=\" pr-0 pe-0\">\r\n      <div class=\"header-title\">{{LANG.RESULTS}}</div>\r\n      <div class=\"result-content pr-0 pe-0\">\r\n        <mat-chip-list class=\"panel__item qms-scrollbar\">\r\n          <mat-chip [qms-tool-tip]=\"item?.tooltip || item.name\" position=\"top\" mode=\"dark\"\r\n            *ngFor=\"let item of resultSelected\" qms-chip [removable]=\"true\">\r\n            <span (click)=\"onScrollToNode(item)\" qms-chip-body>\r\n              <span class=\"related__item__content_name\" #itemName>\r\n                {{item.name}}\r\n                <span class=\"select__include-children__count\" *ngIf=\"item?.children\">\r\n                  {{item.children.length}}/{{item.childCount}}\r\n                </span>\r\n              </span>\r\n            </span>\r\n            <mat-icon (click)=\"onRemoveNode(item)\">cancel</mat-icon>\r\n          </mat-chip>\r\n        </mat-chip-list>\r\n      </div>\r\n    </div>\r\n    <mat-divider *ngIf=\"!!resultSelected.length\" class=\"mx-auto\"></mat-divider>\r\n    <div class=\"confirm__button__groups\">\r\n      <button (click)=\"onCloseDialog()\" class=\"btn-add\" [disabled]=\"!resultSelected.length\"\r\n        [class.qms-btn-disabled]=\"!resultSelected.length\" qms-btn>\r\n        <span>{{LANG.ADD}}</span>\r\n        <span *ngIf=\"!!resultSelected\">\r\n          ({{resultSelected.length}})\r\n        </span>\r\n      </button>\r\n      <button qms-btn-text mat-dialog-close>\r\n        Cancel\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"qms-select-department\">\r\n  <div class=\"header-dialog mb-2\">\r\n    <span>{{popupData.headerName}}</span>\r\n    <button matDialogClose qms-btn-icon>\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n  <div>\r\n    <div class=\"qms-scrollbar\">\r\n      <div>\r\n        <qms-select-department-tree #treeDepartment [selectedList]=\"popupData.selectedList\"\r\n          [treeData]=\"popupData.treeData\" customClass=\"custom-department-tree\" height=\"45vh\"\r\n          [isSelectOne]=\"popupData.isSelectOne\"\r\n          [enableIncludeChild]=\"popupData.includeChildren && !popupData.isSelectOne\"\r\n          [selectIncludeLabel]=\"popupData.selectIncludeLabel\" [enableTreeSearch]=\"popupData.enableSearch\"\r\n          [enablePagingSearch]=\"popupData.enablePagingSearch\" [activeViewSearch]=\"isActiveViewSearch\"\r\n          [checkSearchMappingTree]=\"true\" (onSearchEvent)=\"onSearchEvent.emit($event)\"\r\n          (onValueChangeEvent)=\"onResultDepartmentChange($event)\" (onPagingSearchEvent)=\"onPagingEvent.emit($event)\">\r\n        </qms-select-department-tree>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length\" class=\"line__divider\"></div>\r\n    <div [@heightAnimation] *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length\" class=\" pr-0 pe-0\">\r\n      <div class=\"header-title\">{{LANG.RESULTS}}</div>\r\n      <div class=\"result-content pr-0 pe-0\">\r\n        <mat-chip-list class=\"panel__item qms-scrollbar\">\r\n          <div [@inOutAnimation_2] [id]=\"'item-result-'+item.id\" *ngFor=\"let item of treeDepartment.resultSelected\">\r\n            <mat-chip [@updateItemAnimation] *qmsContentChanges=\"item.children?.length\"\r\n              [qms-tool-tip]=\"generateTootip(item)\" position=\"top\" mode=\"dark\" qms-chip [removable]=\"true\">\r\n              <span (click)=\"onScrollToNode(item)\" qms-chip-body>\r\n                <span class=\"related__item__content_name\" #itemName>\r\n                  {{item.name}}\r\n                  <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup\">\r\n                    {{item.children.length}}/{{item.childCount}}\r\n                  </span>\r\n                </span>\r\n              </span>\r\n              <mat-icon (click)=\"onRemoveNode(item)\">cancel</mat-icon>\r\n            </mat-chip>\r\n          </div>\r\n        </mat-chip-list>\r\n      </div>\r\n    </div>\r\n    <mat-divider *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length\" class=\"mx-auto\"></mat-divider>\r\n    <div class=\"confirm__button__groups\">\r\n      <button (click)=\"onCloseDialog()\" class=\"btn-add\" [disabled]=\"!resultSelected.length\"\r\n        [class.qms-btn-disabled]=\"!resultSelected.length\" qms-btn>\r\n        <span>{{LANG.ADD}}</span>\r\n        <span>\r\n          ({{treeDepartment.resultSelected.length}})\r\n        </span>\r\n      </button>\r\n      <button qms-btn-text mat-dialog-close>\r\n        Cancel\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 providers: [
                     {
                         provide: MAT_CHECKBOX_DEFAULT_OPTIONS,
                         useValue: ɵ0$1
                     }
                 ],
-                animations: SelectDepartmentAnimationTrigger,
-                styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.qms-select-department .cursor-pointer{cursor:pointer}.qms-select-department .ml-5{margin-left:10px}.qms-select-department .padding-5{padding:5px}.qms-select-department .header-dialog{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px}.qms-select-department .input__field{display:flex;align-items:center;position:relative}.qms-select-department .input__field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department .input__field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qms-select-department .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qms-select-department .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qms-select-department .panel__item{max-height:175px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qms-select-department .panel__item .related__item__inline{max-width:100%}.qms-select-department .panel__item .select__toggle-include{width:100%}.qms-select-department .panel__item .select__toggle-include.toggle-include-child .mat-slide-toggle.qms-group-options .mat-slide-toggle-thumb{background-color:#5a5a5a!important}.qms-select-department .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qms-select-department .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qms-select-department .header-title{font-weight:600;color:rgba(0,0,0,.87)}.qms-select-department .result-content{padding-right:0!important}.qms-select-department .result-content .mat-chip-list{min-height:40px}.qms-select-department .result-content .mat-chip-list .mat-icon{color:rgba(0,0,0,.3)!important;cursor:pointer}.qms-select-department .result-content .mat-chip-list .mat-icon:hover{color:#000!important}.qms-select-department .result-content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.qms-select-department .result-content span.related__item__content_name .select__include-children__count{font-size:.75rem;color:rgba(0,0,0,.5);font-weight:600}.qms-select-department .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department .confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}"]
+                animations: [SelectDepartmentAnimationTrigger],
+                styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.qms-select-department .cursor-pointer{cursor:pointer}.qms-select-department .ml-5{margin-left:10px}.qms-select-department .padding-5{padding:5px}.qms-select-department .header-dialog{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px}.qms-select-department .input__field{display:flex;align-items:center;position:relative}.qms-select-department .input__field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department .input__field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qms-select-department .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qms-select-department .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qms-select-department .panel__item{max-height:175px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qms-select-department .panel__item .related__item__inline{max-width:100%}.qms-select-department .panel__item .select__toggle-include{width:100%}.qms-select-department .panel__item .select__toggle-include.toggle-include-child .mat-slide-toggle.qms-group-options .mat-slide-toggle-thumb{background-color:#5a5a5a!important}.qms-select-department .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qms-select-department .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qms-select-department .header-title{font-weight:600;color:rgba(0,0,0,.87)}.qms-select-department .result-content{padding-right:0!important}.qms-select-department .result-content .mat-chip-list{min-height:40px}.qms-select-department .result-content .mat-chip-list .mat-icon{color:rgba(0,0,0,.3)!important;cursor:pointer}.qms-select-department .result-content .mat-chip-list .mat-icon:hover{color:#000!important}.qms-select-department .result-content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.qms-select-department .result-content span.related__item__content_name .select__include-children__count{font-size:.75rem;color:rgba(0,0,0,.5);font-weight:600}.qms-select-department .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department .confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result{height:100%!important}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.qms-select-department ::ng-deep .custom-department-tree .loading-container{height:calc(100% - 40px)!important}"]
             },] }
 ];
 SelectDepartmentComponent.ctorParameters = () => [
-    { type: QMSSelectDepartmentGlobalService },
     { type: ChangeDetectorRef },
     { type: MatDialogRef },
     { type: SelectDepartmentPopupData, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] },
     { type: TranslateLibraryService }
 ];
 SelectDepartmentComponent.propDecorators = {
-    treeDepartment: [{ type: ViewChild, args: ['treeDepartment',] }]
+    treeDepartment: [{ type: ViewChild, args: ['treeDepartment',] }],
+    onPagingEvent: [{ type: Output }]
 };
 
 class QMSSelectDepartmentModule {
@@ -29766,7 +29950,7 @@ class QMSSelectDepartmentModule {
 QMSSelectDepartmentModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [
-                    SelectDepartmentComponent
+                    SelectDepartmentComponent,
                 ],
                 imports: [
                     CommonModule,
@@ -29801,6 +29985,25 @@ QMSSelectDepartmentModule.decorators = [
             },] }
 ];
 
+class QMSSelectDepartmentGlobalService {
+    constructor() {
+        this.getDataTree$ = new BehaviorSubject([]);
+        this.searchDepartment$ = new Subject();
+    }
+    updateDataTree(data) {
+        this.getDataTree$.next(data);
+    }
+    setResultSearch(data) {
+        this.searchDepartment$.next(data);
+    }
+}
+QMSSelectDepartmentGlobalService.ɵprov = i0.ɵɵdefineInjectable({ factory: function QMSSelectDepartmentGlobalService_Factory() { return new QMSSelectDepartmentGlobalService(); }, token: QMSSelectDepartmentGlobalService, providedIn: "root" });
+QMSSelectDepartmentGlobalService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+
 var OptionSelectAccessEnum;
 (function (OptionSelectAccessEnum) {
     OptionSelectAccessEnum[OptionSelectAccessEnum["PERSON"] = 0] = "PERSON";
@@ -29808,6 +30011,60 @@ var OptionSelectAccessEnum;
     OptionSelectAccessEnum[OptionSelectAccessEnum["DEPARTMENT"] = 2] = "DEPARTMENT";
 })(OptionSelectAccessEnum || (OptionSelectAccessEnum = {}));
 
+const SelectAccessAnimationTrigger = [
+    trigger('inOutAnimation', [
+        transition(':enter', [
+            style({ opacity: 0 }),
+            animate('0.3s ease-out', style({ opacity: 1 }))
+        ])
+    ]),
+    trigger('inOutAnimation_2', [
+        transition(':enter', [
+            style({ opacity: 0, transform: 'translateY(-5px)' }),
+            animate('0.2s 0.15s ease-in', style({ opacity: 1, transform: 'none' }))
+        ]),
+        transition(':leave', [
+            style({ opacity: 1, filter: 'blur(5px)', transform: 'none' }),
+            animate('0.15s ease-out', style({ opacity: 0, transform: 'translateX(-10px)' }))
+        ]),
+    ]),
+    trigger('listAnimation', [
+        transition('* => *', [
+            query(':enter', [
+                style({ opacity: 0, transform: 'translateY(-100%)' }),
+                stagger(30, [
+                    animate('0.4s cubic-bezier(0.23, 1, 0.320, 1)', style({ opacity: 1, transform: 'none' }))
+                ])
+            ], { optional: true })
+        ])
+    ]),
+    trigger('updateItemAnimation', [
+        transition('void => *', [animate('0.3s', keyframes([
+                style({
+                    boxShadow: 'rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px',
+                    background: '#c8d6ea',
+                    offset: 0
+                }),
+                style({
+                    boxShadow: `*`,
+                    background: '*',
+                    offset: 1
+                })
+            ]))]),
+    ])
+];
+
+class QMSAccessPagingChangeModel extends PageEvent {
+}
+class QMSAccessPagingModel extends PageEvent {
+    constructor() {
+        super();
+        this.data = [];
+        this.pageSize = 10;
+        this.pageIndex = 0;
+    }
+}
+
 class QMSSelectAccessResult {
     constructor() {
         this.userGroups = [];
@@ -29817,11 +30074,11 @@ class QMSSelectAccessResult {
 }
 class QMSSelectAccessData {
     constructor() {
-        this.accessUserGroups = [];
         this.accessDepartments = [];
-        this.accessPersons = [];
         this.selectedData = new QMSSelectAccessResult();
         this.selectIncludeChildTreeLabel = '';
+        this.accessPersons = new QMSAccessPagingModel();
+        this.accessUserGroups = new QMSAccessPagingModel();
     }
 }
 
@@ -29843,25 +30100,6 @@ QMSSelectAccessGlobalService.decorators = [
             },] }
 ];
 
-const SelectAccessAnimationTrigger = [
-    trigger('inOutAnimation', [
-        transition(':enter', [
-            style({ opacity: 0 }),
-            animate('0.3s ease-out', style({ opacity: 1 }))
-        ]),
-    ]),
-    trigger('listAnimation', [
-        transition('* => *', [
-            query(':enter', [
-                style({ opacity: 0, transform: 'translateY(-100%)' }),
-                stagger(25, [
-                    animate('0.4s cubic-bezier(0.23, 1, 0.320, 1)', style({ opacity: 1, transform: 'none' }))
-                ])
-            ], { optional: true })
-        ])
-    ])
-];
-
 class QMSSelectAccessDialog {
     constructor() {
         this.enableSelectPerson = true;
@@ -29878,6 +30116,7 @@ class QMSSelectAccessDialog {
         };
         this.titleDialog = '';
         this.titleResult = '';
+        this.sizeUpdateDefault = '1024px';
     }
 }
 
@@ -29895,57 +30134,75 @@ class QMSSelectAccessDialogComponent {
         this.optionSelect = new FormControl();
         this.OPTION_ENUM = OptionSelectAccessEnum;
         this.options = [];
+        this._departmentSelected = [];
         this.userGroupForm = new FormControl('');
         this.getLoading$ = new BehaviorSubject(false);
         this.onSearchPersonEvent = new EventEmitter();
         this.onSearchPersonFreeTextEvent = new EventEmitter();
         this.onSearchUserGroupEvent = new EventEmitter();
         this.onSearchDepartmentEvent = new EventEmitter();
+        this.onPagingEvent = new EventEmitter();
+        this.onSelectOptionChange$ = new Subject();
+        this.departmentResultClone = [];
         /** list filtered by search keyword */
+        this.optionFilterPersonDataGlobal = {
+            departments: [],
+            userGroups: []
+        };
         this.filteredSearchTextBox = {
-            department: new ReplaySubject(1),
-            role: new ReplaySubject(1),
+            department: new BehaviorSubject([]),
+            userGroup: new BehaviorSubject([]),
         };
-        this.getPerson$ = new BehaviorSubject([]);
-        this.getUserGroup$ = new BehaviorSubject([]);
+        this.getPerson$ = new BehaviorSubject(new QMSAccessPagingModel());
+        this.getUserGroup$ = new BehaviorSubject(new QMSAccessPagingModel());
         this.PAGINATION_SIZE = PaginationSize;
+        this.PAGE_SIZE_OPTION = [5, 10, 15, 20, 25, 100];
         this.resultAccess = new QMSSelectAccessResult();
-        this.currentPaginationConfig = {
-            pageIndex: 0,
-            pageSize: 10,
-            length: 0
-        };
-        this.resultAccess = _.cloneDeep(this.dialogData.data.selectedData);
-        this.optionSelect.valueChanges
-            .pipe(takeUntil(this.ngUnsubcribe))
-            .subscribe(_ => {
-            this.resetPagingConfig();
+        this.arrSkeleton = new Array(8).fill(0);
+        this.resultAccess = _.cloneDeep(Object.assign(Object.assign({}, this.dialogData.data.selectedData), { departments: [] }));
+        this._departmentSelected = _.cloneDeep(this.dialogData.data.selectedData.departments);
+    }
+    get selectedDepartments() {
+        const departmentSelected = [];
+        this._departmentSelected.forEach(x => {
+            var _a;
+            departmentSelected.push({
+                id: x.id,
+                groupId: x.groupId,
+                isGroup: x.isGroup
+            });
+            if (!((_a = x.children) === null || _a === void 0 ? void 0 : _a.length))
+                return;
+            departmentSelected.push(...(x.children.map(item => ({
+                id: item.id,
+                groupId: item.groupId,
+                isGroup: item.isGroup
+            }))));
         });
-        // Filtered Option select person
-        this.filteredSearchTextBox.role.next(this.dialogData.data.accessUserGroups);
-        this.filteredSearchTextBox.department.next(this.dialogData.data.accessDepartments);
-        this.updatePersonFilter(this.dialogData.data.accessPersons);
-        this.updateUserGroupFilter(this.dialogData.data.accessUserGroups);
+        return departmentSelected || [];
     }
     set tree(data) {
-        if (data) {
-            this.treeDepartment = data;
-        }
+        this.treeDepartment = data;
     }
     get personFiltered() {
+        var _a;
         const persons = this.getPerson$.value;
         const ids = this.resultAccess.persons.map(x => x.id);
-        persons.forEach(x => x.selected = ids.includes(x.id));
-        return persons;
+        (_a = persons.data) === null || _a === void 0 ? void 0 : _a.forEach(x => x.selected = ids.includes(x.id));
+        return persons.data || [];
     }
     get userGroupFiltered() {
+        var _a;
         const userGroups = this.getUserGroup$.value;
         const ids = this.resultAccess.userGroups.map(x => x.id);
-        userGroups.forEach(x => x.selected = ids.includes(x.id));
-        return userGroups;
+        (_a = userGroups.data) === null || _a === void 0 ? void 0 : _a.forEach(x => x.selected = ids.includes(x.id));
+        return userGroups.data || [];
     }
-    ngAfterViewInit() {
+    ;
+    ngAfterContentInit() {
         this.cdRef.detectChanges();
+    }
+    ngAfterViewInit() {
         this.cdRef.detectChanges();
     }
     ngOnInit() {
@@ -29955,46 +30212,15 @@ class QMSSelectAccessDialogComponent {
             }
         });
         this._buildOptionSelect();
-        this.buildPersonForm();
-        // Filter person by roles
-        this.personForm.get('roleFilter').valueChanges
-            .pipe(takeUntil(this.ngUnsubcribe), debounceTime(500))
-            .subscribe(keyword => {
-            if (!this.dialogData.data.accessUserGroups) {
-                return;
-            }
-            if (!keyword) {
-                this.filteredSearchTextBox.role.next(this.dialogData.data.accessUserGroups);
-                return;
-            }
-            this.filteredSearchTextBox.role.next(this.dialogData.data.accessUserGroups.filter(role => role.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase())));
-        });
-        // Filter person by departments
-        this.personForm.get('departmentFilter').valueChanges
-            .pipe(takeUntil(this.ngUnsubcribe))
-            .subscribe(() => {
-            if (!this.dialogData.data.accessDepartments) {
-                return;
-            }
-            let search = this.personForm.get('departmentFilter').value;
-            if (!search) {
-                this.filteredSearchTextBox.department.next(this.dialogData.data.accessDepartments.slice());
-            }
-            else {
-                search = search.toLowerCase();
-                this.filteredSearchTextBox.department.next(this.dialogData.data.accessDepartments.filter(x => x.name.toLowerCase().indexOf(search) > -1));
-            }
-        });
         this.getLoading$.pipe(takeUntil(this.ngUnsubcribe))
             .subscribe(response => {
             if (response) {
-                this.personForm.disable();
-                this.userGroupForm.disable();
-            }
-            else {
-                this.personForm.enable();
-                this.userGroupForm.enable();
+                this.personForm && this.personForm.disable();
+                this.userGroupForm && this.userGroupForm.disable();
+                return;
             }
+            this.personForm && this.personForm.enable();
+            this.userGroupForm && this.userGroupForm.enable();
         });
     }
     ngOnDestroy() {
@@ -30022,10 +30248,41 @@ class QMSSelectAccessDialogComponent {
             }
         }
         if (this.options.length === 1) {
-            this.dialogRef.updateSize('732px');
+            this.dialogRef.updateSize(this.dialogData.sizeUpdateDefault);
             this.optionSelect.setValue(this.options[0].type);
         }
     }
+    _filterOptionPersonChange() {
+        // Filter person by roles
+        this.personForm.get('userGroupFilter').valueChanges
+            .pipe(takeUntil(this.ngUnsubcribe), debounceTime(500))
+            .subscribe(keyword => {
+            if (!this.optionFilterPersonDataGlobal.userGroups.length) {
+                return;
+            }
+            if (!keyword) {
+                this.filteredSearchTextBox.userGroup.next(this.optionFilterPersonDataGlobal.userGroups);
+                return;
+            }
+            const resultFilter = this.optionFilterPersonDataGlobal.userGroups.filter(userGroup => userGroup.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase()));
+            this.filteredSearchTextBox.userGroup.next(resultFilter);
+        });
+        // Filter person by departments
+        this.personForm.get('departmentFilter').valueChanges
+            .pipe(takeUntil(this.ngUnsubcribe))
+            .subscribe(() => {
+            if (!this.optionFilterPersonDataGlobal.departments) {
+                return;
+            }
+            let search = this.personForm.get('departmentFilter').value;
+            if (!search) {
+                this.filteredSearchTextBox.department.next(this.optionFilterPersonDataGlobal.departments.slice());
+                return;
+            }
+            search = search.toLowerCase();
+            this.filteredSearchTextBox.department.next(this.optionFilterPersonDataGlobal.departments.filter(x => x.name.toLowerCase().indexOf(search) > -1));
+        });
+    }
     getResultTabActive() {
         const resultObj = {
             0: this.resultAccess.persons,
@@ -30039,34 +30296,44 @@ class QMSSelectAccessDialogComponent {
     }
     buildPersonForm() {
         this.personForm = this._fb.group({
-            roleId: new FormControl(''),
-            departmentId: new FormControl(),
-            departmentFilter: new FormControl(''),
-            recursive: new FormControl({ value: false, disabled: true }),
-            keyword: new FormControl(''),
-            roleFilter: new FormControl(''),
-            excludedQuitDepartmentId: true
+            userGroup: [],
+            department: [],
+            departmentFilter: [''],
+            recursive: [{
+                    value: false, disabled: true
+                }],
+            keyword: [''],
+            userGroupFilter: [''],
+            excludedQuitDepartmentId: [true]
         });
     }
-    resetPagingConfig() {
-        this.currentPaginationConfig = {
-            pageIndex: 0,
-            pageSize: 10,
-            length: 0
-        };
-    }
     onFilterPerson() {
+        var _a, _b;
         this.getLoading$.next(true);
-        this.onSearchPersonEvent.emit(this.personForm.value);
-        this.getLoading$.next(true);
+        const formValue = this.personForm.getRawValue();
+        const filterData = {
+            departmentId: (_a = formValue.department) === null || _a === void 0 ? void 0 : _a.id,
+            userGroupId: (_b = formValue.userGroup) === null || _b === void 0 ? void 0 : _b.id,
+            keyword: formValue.keyword,
+            recursive: formValue.recursive
+        };
+        this.onSearchPersonEvent.emit(filterData);
+        this._resetPagingator(this.pagingPerson);
+    }
+    _resetPagingator(paginator) {
+        if (!paginator)
+            return;
+        paginator.changePage(0);
+        paginator.renderDisplayNumberOfpages();
     }
     onSearchPersonFreeText() {
-        this.getLoading$.next(true);
         this.getLoading$.next(true);
         this.onSearchPersonFreeTextEvent.emit(this.personForm.get('keyword').value);
+        this._resetPagingator(this.pagingPerson);
     }
     onFilterUserGroup() {
         this.getLoading$.next(true);
+        this._resetPagingator(this.pagingUserGroup);
         this.onSearchUserGroupEvent.emit(this.userGroupForm.value);
     }
     onSelectItem(type, item) {
@@ -30130,13 +30397,26 @@ class QMSSelectAccessDialogComponent {
                 break;
             case this.OPTION_ENUM.DEPARTMENT:
                 this.resultAccess.departments.splice(index, 1);
+                this.departmentResultClone.splice(index, 1);
+                if (!this.treeDepartment)
+                    return;
                 this.treeDepartment.onRemoveNode(item.id);
+                break;
             default:
                 return;
         }
     }
     onSelectionTypeChange(event) {
-        this.dialogRef.updateSize('732px');
+        switch (event.value) {
+            case OptionSelectAccessEnum.PERSON:
+                this.buildPersonForm();
+                this._filterOptionPersonChange();
+                break;
+        }
+        this.getLoading$.next(true);
+        this.dialogRef.updateSize(this.dialogData.sizeUpdateDefault);
+        this.onSelectOptionChange$.next(event);
+        this.cdRef.detectChanges();
     }
     setFormControlValue(formControlNames, values) {
         formControlNames.forEach((controlName, _index) => {
@@ -30147,9 +30427,9 @@ class QMSSelectAccessDialogComponent {
     isCheckAll(type) {
         switch (type) {
             case this.OPTION_ENUM.PERSON:
-                return !this.dialogData.modeSelectOnePerson && this.personFiltered.length && this.getPaging(this.personFiltered).every(x => x.selected);
+                return !this.dialogData.modeSelectOnePerson && this.personFiltered.length && this.personFiltered.every(x => x.selected);
             case this.OPTION_ENUM.USER_GROUP:
-                return !this.dialogData.modeSelectOneUserGroup && this.userGroupFiltered.length && this.getPaging(this.userGroupFiltered).every(x => x.selected);
+                return !this.dialogData.modeSelectOneUserGroup && this.userGroupFiltered.length && this.userGroupFiltered.every(x => x.selected);
             default:
                 return false;
         }
@@ -30158,9 +30438,9 @@ class QMSSelectAccessDialogComponent {
         var _a, _b;
         switch (type) {
             case this.OPTION_ENUM.PERSON:
-                return !this.dialogData.modeSelectOnePerson && !this.isCheckAll(type) && ((_a = this.getPaging(this.personFiltered)) === null || _a === void 0 ? void 0 : _a.some(x => x.selected));
+                return !this.dialogData.modeSelectOnePerson && !this.isCheckAll(type) && ((_a = this.personFiltered) === null || _a === void 0 ? void 0 : _a.some(x => x.selected));
             case this.OPTION_ENUM.USER_GROUP:
-                return !this.dialogData.modeSelectOneUserGroup && !this.isCheckAll(type) && ((_b = this.getPaging(this.userGroupFiltered)) === null || _b === void 0 ? void 0 : _b.some(x => x.selected));
+                return !this.dialogData.modeSelectOneUserGroup && !this.isCheckAll(type) && ((_b = this.userGroupFiltered) === null || _b === void 0 ? void 0 : _b.some(x => x.selected));
             default:
                 return false;
         }
@@ -30173,18 +30453,16 @@ class QMSSelectAccessDialogComponent {
                     $event.checked = false;
                     return;
                 }
-                const userPaging = this.getPaging(this.personFiltered) || [];
-                if (!userPaging.length)
+                if (!this.personFiltered.length)
                     return;
-                userPaging.forEach(x => x.selected = $event.checked);
-                const idFiltered = userPaging.map(x => x.id);
+                this.personFiltered.forEach(x => x.selected = $event.checked);
+                const idFiltered = this.personFiltered.map(x => x.id);
                 if ($event.checked) {
                     const idPersonSelected = this.resultAccess.persons.map(x => x.id);
-                    this.resultAccess.persons = [...this.resultAccess.persons, ...userPaging.filter(x => !idPersonSelected.includes(x.id))];
-                }
-                else {
-                    this.resultAccess.persons = this.resultAccess.persons.filter(x => !idFiltered.includes(x.id));
+                    this.resultAccess.persons = [...this.resultAccess.persons, ...this.personFiltered.filter(x => !idPersonSelected.includes(x.id))];
+                    return;
                 }
+                this.resultAccess.persons = this.resultAccess.persons.filter(x => !idFiltered.includes(x.id));
                 break;
             }
             case this.OPTION_ENUM.USER_GROUP: {
@@ -30192,59 +30470,79 @@ class QMSSelectAccessDialogComponent {
                     $event.checked = false;
                     return;
                 }
-                const userGroupPaging = this.getPaging(this.userGroupFiltered);
+                const userGroupPaging = this.userGroupFiltered;
                 userGroupPaging.forEach(x => x.selected = $event.checked);
                 const idFiltered = userGroupPaging.map(x => x.id);
                 if ($event.checked) {
                     const idSelected = this.resultAccess.userGroups.map(x => x.id);
                     this.resultAccess.userGroups = [...this.resultAccess.userGroups, ...userGroupPaging.filter(x => !idSelected.includes(x.id))];
+                    return;
                 }
-                else {
-                    this.resultAccess.userGroups = this.resultAccess.userGroups.filter(x => !idFiltered.includes(x.id));
-                }
+                this.resultAccess.userGroups = this.resultAccess.userGroups.filter(x => !idFiltered.includes(x.id));
                 break;
             }
             default:
                 return;
         }
     }
+    onSelectionNodeDepartmentChange({ added, removed, updated }) {
+        if (added.length) {
+            added.forEach(item => {
+                if (this.resultAccess.departments.some(x => x.id === item.id))
+                    return;
+                this.resultAccess.departments.push(item);
+            });
+        }
+        if (removed.length) {
+            removed.forEach(x => {
+                const index = this.resultAccess.departments.findIndex(item => item.id === x.id);
+                if (index < 0)
+                    return;
+                this.resultAccess.departments.splice(index, 1);
+            });
+        }
+        if (updated.length) {
+            updated.forEach(x => {
+                const index = this.resultAccess.departments.findIndex(item => item.id == x.id);
+                if (index < 0)
+                    return;
+                const deparment = this.resultAccess.departments.find(item => item.id == x.id);
+                if (!!deparment)
+                    deparment.children = x.children;
+            });
+        }
+        this._departmentSelected = _.cloneDeep(this.resultAccess.departments);
+    }
     onScollToNodeTreeDepartment(node) {
         this.optionSelect.value === this.OPTION_ENUM.DEPARTMENT && this.treeDepartment.scrollToNode(node.id);
     }
-    onRemoveTreeNodeDepartment(node) {
-        if (this.optionSelect.value === this.OPTION_ENUM.DEPARTMENT) {
-            this.treeDepartment.onRemoveNode(node.id);
-        }
-        this.resultAccess.departments = this.resultAccess.departments.filter(item => item.id !== node.id);
-    }
     trackByFn(index, item) {
         return index;
     }
     updatePersonFilter(data) {
-        this.resetPagingConfig();
         this.getPerson$.next(data);
         this.getLoading$.next(false);
-        this.getLoading$.next(false);
     }
     updateUserGroupFilter(data) {
-        this.resetPagingConfig();
         this.getUserGroup$.next(data);
         this.getLoading$.next(false);
-        this.getLoading$.next(false);
     }
-    onPagingEvent(val) {
-        this.currentPaginationConfig = val;
-    }
-    getPaging(source) {
-        if (!source.length)
-            return [];
-        return source.slice(this.currentPaginationConfig.pageIndex * this.currentPaginationConfig.pageSize, (this.currentPaginationConfig.pageIndex * this.currentPaginationConfig.pageSize) + this.currentPaginationConfig.pageSize);
+    onPaginatorEvent(val, type) {
+        this.getLoading$.next(this.optionSelect.value !== this.OPTION_ENUM.DEPARTMENT);
+        this.onPagingEvent.emit(Object.assign(Object.assign({}, val), { type: type }));
     }
     onResultDepartmentChange(event) {
-        this.resultAccess.departments = event.map(item => {
-            var _a;
-            return Object.assign(Object.assign({}, item), { tooltip: ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) ? this.formatString(this.LANG.TOOLTIP_INCLUDE_CHILD, item.name, item.children.length.toString()) : item.name });
-        });
+        // this.resultAccess.departments = event;
+    }
+    updateResultSearchDepartment(data = new QMSAccessPagingModel()) {
+        if (!this.treeDepartment)
+            return;
+        data = data;
+        this.treeDepartment.setResultSearch(data);
+    }
+    generateTootip(node) {
+        var _a;
+        return (node === null || node === void 0 ? void 0 : node.isGroup) ? this.formatString(this.LANG.TOOLTIP_INCLUDE_SUB_DEPARTMENT, node.name, (_a = node.children) === null || _a === void 0 ? void 0 : _a.length.toString()) : (`${node.name} ${(node === null || node === void 0 ? void 0 : node.subName) ? `- (${node.subName})` : ''}`);
     }
     formatString(...replacements) {
         let result = arguments[0];
@@ -30257,11 +30555,25 @@ class QMSSelectAccessDialogComponent {
     hasItemSelected() {
         return Object.keys(this.resultAccess).some(key => { var _a; return !!((_a = this.resultAccess[key]) === null || _a === void 0 ? void 0 : _a.length); });
     }
+    updateDepartment(data = []) {
+        this.getLoading$.next(false);
+        this.dialogData.data.accessDepartments = [];
+        this.dialogData.data.accessDepartments = _.cloneDeep(data);
+    }
+    updateOptionPersonFilter(departmentFilter = [], userGroupFilter = []) {
+        this.optionFilterPersonDataGlobal.departments = departmentFilter;
+        this.optionFilterPersonDataGlobal.userGroups = userGroupFilter;
+        this.filteredSearchTextBox.department.next(departmentFilter);
+        this.filteredSearchTextBox.userGroup.next(userGroupFilter);
+    }
+    setDefaultPageSizeOption(data) {
+        this.PAGE_SIZE_OPTION = data;
+    }
 }
 QMSSelectAccessDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-select-access-dialog',
-                template: "<div qms-dialog-container-v2 class=\"select-access-dialog-container\">\r\n  <div qms-dialog-header>\r\n    <div class=\"access-dialog-header mb-2\">\r\n      <span class=\"header-title\">{{dialogData.titleDialog || LANG.SELECT_ACCESS}}</span>\r\n      <button matDialogClose qms-btn-icon>\r\n        <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\r\n      </button>\r\n    </div>\r\n    <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option  w-100\"\r\n      appearance=\"fill\">\r\n      <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\r\n      <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\r\n        disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\r\n\r\n        <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\r\n          {{ LANG[item.displayName] }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n  <div qms-dialog-content class=\"access-dialog-wraper\">\r\n    <!-- Person Access -->\r\n    <div class=\"option-selected-content\">\r\n      <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\r\n        <form [formGroup]=\"personForm\">\r\n          <mat-dialog-content>\r\n            <div class=\"group-filter-person-option\">\r\n              <mat-form-field class=\"w-100 input-option-filter\" qms-form>\r\n                <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\r\n                <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering formControlName=\"roleId\">\r\n                  <mat-option>\r\n                    <ngx-mat-select-search formControlName=\"roleFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\r\n                      noEntriesFoundLabel=\"\">\r\n                    </ngx-mat-select-search>\r\n                  </mat-option>\r\n                  <mat-option *ngFor=\"let item of filteredSearchTextBox.role | async\" [value]=\"item.id\">\r\n                    {{ item.name }}\r\n                  </mat-option>\r\n                </mat-select>\r\n                <!-- <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\" diameter=\"20\"></mat-progress-spinner> -->\r\n                <span [@inOutAnimation] (click)=\"personForm.get('roleId').setValue('')\" class=\"pointer \" matSuffix\r\n                  aria-label=\"Clear\" *ngIf=\"personForm.get('roleId').value && !getLoading$.value\">\r\n                  <mat-icon>close</mat-icon>\r\n                </span>\r\n              </mat-form-field>\r\n\r\n              <mat-form-field class=\"w-100 input-select-option\" qms-form qms-select-input>\r\n                <mat-label>{{LANG.DEPARTMENT_UNIT}}</mat-label>\r\n                <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\r\n                  formControlName=\"departmentId\">\r\n                  <mat-option>\r\n                    <ngx-mat-select-search formControlName=\"departmentFilter\" [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\"\r\n                      noEntriesFoundLabel=\"\">\r\n                    </ngx-mat-select-search>\r\n                  </mat-option>\r\n                  <mat-option *ngFor=\"let item of filteredSearchTextBox.department | async\" [value]=\"item.id\">\r\n                    {{item.name}}\r\n                  </mat-option>\r\n                </mat-select>\r\n                <span (click)=\"setFormControlValue(['recursive','departmentId'], [false,''])\" [@inOutAnimation]\r\n                  class=\"pointer\" matSuffix aria-label=\"Clear\"\r\n                  *ngIf=\"personForm.get('departmentId').value && !getLoading$.value\">\r\n                  <mat-icon>close</mat-icon>\r\n                </span>\r\n              </mat-form-field>\r\n            </div>\r\n\r\n            <mat-slide-toggle class=\"w-100 slide-toggle\" formControlName=\"recursive\"\r\n              [disabled]=\"!this.personForm.controls['departmentId'].value\" color=\"default\" qms-group-options>\r\n              <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\r\n            </mat-slide-toggle>\r\n\r\n            <mat-form-field class=\"w-100\" appearance=\"fill\" qms-form qms-search-field>\r\n              <input matInput appearance=\"off\" [placeholder]=\"LANG.SEARCH_WITH_NAME\" formControlName=\"keyword\"\r\n                type=\"text\" autocomplete=\"off\" />\r\n              <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\r\n                (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\r\n                <mat-icon>search</mat-icon>\r\n              </button>\r\n              <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\r\n                diameter=\"20\"></mat-progress-spinner>\r\n              <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\r\n                class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\r\n                aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\r\n                <button qms-btn-icon color=\"light\">\r\n                  <mat-icon>close</mat-icon>\r\n                </button>\r\n              </span>\r\n            </mat-form-field>\r\n            <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\r\n              {{LANG.FILTER}}\r\n            </button>\r\n          </mat-dialog-content>\r\n\r\n          <mat-dialog-content class=\"items-list\">\r\n            <div qms-scrollbar>\r\n              <div class=\"item\">\r\n                <mat-checkbox [@inOutAnimation] *ngIf=\"!getLoading$.value\"\r\n                  [disabled]=\"!personFiltered.length || dialogData.modeSelectOnePerson\" #checkPerson\r\n                  class=\"w-100 mb-1 checkbox-all\"\r\n                  (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\r\n                  [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\r\n                  color=\"default\" qms-group-options>\r\n                  <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} </span>\r\n                  <span>(<b>{{getPaging(personFiltered).length}}</b>)</span>\r\n                </mat-checkbox>\r\n              </div>\r\n              <mat-divider class=\"mx-auto\"></mat-divider>\r\n              <ng-container *ngIf=\"getLoading$.value; then loading\">\r\n              </ng-container>\r\n              <div [@inOutAnimation] *ngIf=\"getPaging(personFiltered).length && !getLoading$.value\" [@listAnimation]\r\n                class=\"item-list-wrapper\">\r\n                <div class=\"item  mt-1\" [@inOutAnimation]\r\n                  *ngFor=\"let employee of getPaging(personFiltered); trackBy: trackByFn\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\r\n                    [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n              <div [@inOutAnimation] *ngIf=\"!getPaging(personFiltered).length && !getLoading$.value\"\r\n                class=\"item-list-wrapper no-result\">\r\n                <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n              </div>\r\n              <mat-divider class=\"mx-auto\"></mat-divider>\r\n              <qms-paginator class=\"my-1\" *ngIf=\"personFiltered.length > 10 && !getLoading$.value\"\r\n                [length]=\"personFiltered.length\" [numHidden]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 100]\"\r\n                (page)='onPagingEvent($event)' [size]='PAGINATION_SIZE.medium'>\r\n              </qms-paginator>\r\n            </div>\r\n          </mat-dialog-content>\r\n        </form>\r\n      </ng-container>\r\n\r\n      <!-- UserGroup Access -->\r\n      <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\r\n        <form>\r\n          <mat-dialog-content>\r\n            <mat-form-field class=\"w-100\" qms-form qms-search-field>\r\n              <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\" placeholder=\"User group\" />\r\n              <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" (click)=\"onFilterUserGroup()\" qms-btn-icon\r\n                color=\"light\" matSuffix>\r\n                <mat-icon>search</mat-icon>\r\n              </button>\r\n              <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\r\n                diameter=\"20\"></mat-progress-spinner>\r\n              <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value && !getLoading$.value\" matSuffix qms-input-clear>\r\n                <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\r\n                  <mat-icon>close</mat-icon>\r\n                </button>\r\n              </div>\r\n            </mat-form-field>\r\n          </mat-dialog-content>\r\n          <mat-dialog-content class=\"items-list\">\r\n            <div qms-scrollbar>\r\n              <div class=\"item\">\r\n                <mat-checkbox [@inOutAnimation] *ngIf=\"!getLoading$.value\"\r\n                  [disabled]=\"!userGroupFiltered.length || dialogData.modeSelectOneUserGroup\" #checkUserGroup\r\n                  class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\r\n                  [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\r\n                  (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\r\n                  qms-group-options>\r\n                  <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n                  <span>(<b>{{getPaging(userGroupFiltered).length}}</b>)</span>\r\n                </mat-checkbox>\r\n              </div>\r\n              <mat-divider class=\"mx-auto\"></mat-divider>\r\n              <ng-container *ngIf=\"getLoading$.value;then loading\">\r\n              </ng-container>\r\n              <div *ngIf=\"getPaging(userGroupFiltered).length && !getLoading$.value\" [@listAnimation]\r\n                class=\"item-list-wrapper\">\r\n                <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of getPaging(userGroupFiltered)\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\r\n                    [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n              <div [@inOutAnimation] *ngIf=\"!getPaging(userGroupFiltered).length && !getLoading$.value\"\r\n                class=\"item-list-wrapper no-result\">\r\n                <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n              </div>\r\n              <mat-divider class=\"mx-auto\"></mat-divider>\r\n              <qms-paginator class=\"my-1\" *ngIf=\"userGroupFiltered.length > 10 && !getLoading$.value\"\r\n                [length]=\"userGroupFiltered.length\" [numHidden]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 100]\"\r\n                (page)='onPagingEvent($event)' [size]='PAGINATION_SIZE.medium'>\r\n              </qms-paginator>\r\n            </div>\r\n          </mat-dialog-content>\r\n        </form>\r\n      </ng-container>\r\n\r\n      <!-- Department Access -->\r\n      <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT\" class=\"person-access\">\r\n        <qms-select-department-tree #treeDepartment [treeData]=\"dialogData.data.accessDepartments\"\r\n          [selectIncludeLabel]=\"dialogData.treeDepartmentConfig.selectIncludeChildLabel\"\r\n          [enableIncludeChild]=\"dialogData.treeDepartmentConfig.enableIncludeChild\"\r\n          [enableTreeSearch]=\"dialogData.treeDepartmentConfig.enableTreeSearch\"\r\n          [isSelectOne]=\"dialogData.modeSelectOneDepartment\" [selectedList]=\"resultAccess.departments\"\r\n          (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\r\n          (onValueChangeEvent)=\"onResultDepartmentChange($event)\">\r\n        </qms-select-department-tree>\r\n      </ng-container>\r\n    </div>\r\n    <mat-divider *ngIf=\"optionSelect.value !== null\" class=\"mx-auto\"></mat-divider>\r\n    <div [@inOutAnimation]\r\n      *ngIf=\"(options.length === 1 && hasItemSelected()) || (options.length > 1 && optionSelect.value !== null)\"\r\n      class=\"header-title my-1\">\r\n      {{\r\n      dialogData.titleResult || LANG.RESULTS}}\r\n      <span *ngIf=\"options.length === 1 && hasItemSelected()\">\r\n        ({{getResultTabActive().length}})\r\n      </span>\r\n    </div>\r\n    <div *ngIf=\"optionSelect.value !== null\" class=\"result-selected-container\">\r\n      <!-- Result Person  -->\r\n      <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\r\n        [ngTemplateOutlet]=\"options.length == 1 ? listChip : viewResultCollapse\"\r\n        [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\r\n      </ng-container>\r\n      <!-- Result User group -->\r\n      <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\r\n        [ngTemplateOutlet]=\"options.length == 1 ? listChip : viewResultCollapse\"\r\n        [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\r\n      </ng-container>\r\n      <!-- Result Department -->\r\n      <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\r\n        [ngTemplateOutlet]=\"options.length == 1 ? listChip : viewResultCollapse\"\r\n        [ngTemplateOutletContext]=\"{data:resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\r\n      </ng-container>\r\n    </div>\r\n    <mat-divider class=\"mx-auto\"></mat-divider>\r\n  </div>\r\n  <div qms-dialog-footer class=\"confirm__button__groups\" [class.none-option]=\"optionSelect.value === null\">\r\n    <button *ngIf=\"optionSelect.value !== null\" [disabled]=\"!hasItemSelected()\" class=\"btn-add\"\r\n      [class.qms-btn-disabled]=\"!hasItemSelected()\" [mat-dialog-close]=\"resultAccess\" qms-btn>\r\n      <span>{{LANG.ADD}}</span>\r\n    </button>\r\n    <button qms-btn-text mat-dialog-close>\r\n      {{LANG.CANCEL}}\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<!-- Template -->\r\n<ng-template #noResult>\r\n  <svg width=\"89\" height=\"88\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n    <path\r\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\r\n      fill=\"#0163B3\" />\r\n  </svg>\r\n</ng-template>\r\n\r\n<!-- Template list chip -->\r\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\r\n  <mat-chip-list class=\"panel__item qms-scrollbar\">\r\n    <mat-chip class=\"chip-item-result\" [qms-tool-tip]=\"item?.tooltip || item.name\" position=\"top\" mode=\"dark\"\r\n      *ngFor=\"let item of data; let i = index\" qms-chip [removable]=\"true\">\r\n      <span qms-chip-body>\r\n        <span class=\"text-label\">\r\n          {{item.name}}\r\n          <span *ngIf=\"item.subName\">({{ item.subName }})</span>\r\n        </span>\r\n        <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children\">\r\n          {{item.children.length}}/{{item.childCount}}\r\n        </span>\r\n      </span>\r\n      <mat-icon (click)=\"onRemoveChip(type,item, i)\" class=\"remove-chip-icon\">cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-list>\r\n</ng-template>\r\n\r\n<!-- Template result with collapse -->\r\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\r\n  <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\r\n    <mat-expansion-panel-header>\r\n      <div class=\"title-content\">\r\n        <div class=\"qms-list-text\">\r\n          <div qms-line color=\"default-subtitle\">{{title}}\r\n            <span class=\"fw-600\">\r\n              ({{data.length}})\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </mat-expansion-panel-header>\r\n    <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\r\n    </ng-container>\r\n  </mat-expansion-panel>\r\n</ng-template>\r\n\r\n<!-- Template row without checkbox -->\r\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\r\n  <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\r\n    <div class=\"item-content\">\r\n      <div class=\"text-label\">\r\n        <span class=\"text-label label-item fs-14 \">\r\n          {{ item.name }}\r\n        </span>\r\n        <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\r\n      </div>\r\n      <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\r\n    </div>\r\n    <div class=\"item-state\">\r\n      <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Template checkbox  -->\r\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\r\n  <mat-checkbox [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\" class=\"w-100\" color=\"default\"\r\n    qms-group-options>\r\n    <div class=\"text-label\">\r\n      <span class=\"text-label label-item fs-14 \">\r\n        {{ item.name }}\r\n      </span>\r\n      <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\r\n    </div>\r\n    <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\r\n  </mat-checkbox>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div class=\"loading-container\">\r\n    <div class=\"loader\" *ngFor=\"let item of [1,1,1,1]\">\r\n      <div class=\"loader__wrapper\">\r\n        <div class=\"row-loader\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
+                template: "<div qms-dialog-container-v2 class=\"select-access-dialog-container\">\r\n  <div qms-dialog-header>\r\n    <div class=\"access-dialog-header mb-2\">\r\n      <span class=\"header-title\">{{dialogData.titleDialog || LANG.SELECT_ACCESS}}</span>\r\n      <button matDialogClose qms-btn-icon>\r\n        <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div [class.active]=\"optionSelect.value !== null\" qms-dialog-content class=\"qms-dialog-content\">\r\n    <div class=\"access-dialog-wraper\">\r\n      <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option  w-100\"\r\n        appearance=\"fill\">\r\n        <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\r\n        <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\r\n          disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\r\n\r\n          <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\r\n            {{ LANG[item.displayName] }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <div class=\"body-dialog-container\">\r\n        <!-- Person Access -->\r\n        <div class=\"option-selected-content\">\r\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\r\n            <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\r\n              <mat-dialog-content>\r\n                <div class=\"group-filter-person-option\">\r\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\r\n                    class=\"w-100\" appearance=\"fill\">\r\n                    <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\r\n                    <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\r\n                      disableOptionCentering>\r\n                      <mat-select-trigger>\r\n                        {{personForm.controls['userGroup'].value?.name || ''}}\r\n                      </mat-select-trigger>\r\n                      <mat-option>\r\n                        <ngx-mat-select-search formControlName=\"userGroupFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\r\n                          noEntriesFoundLabel=\"\">\r\n                        </ngx-mat-select-search>\r\n                      </mat-option>\r\n                      <mat-option mode=\"dark\" class=\"opt-check-icon\"\r\n                        *ngFor=\"let item of filteredSearchTextBox.userGroup.value\" [value]=\"item\">\r\n                        <span qms-elipsify position=\"top\" mode=\"dark\" class=\"text-option-content\">{{ item.name }}</span>\r\n                        <mat-icon class=\"check-icon\"\r\n                          *ngIf=\"personForm.controls['userGroup'].value?.id == item.id\">check</mat-icon>\r\n                      </mat-option>\r\n                    </mat-select>\r\n                    <span [@inOutAnimation] (click)=\"personForm.get('userGroup').setValue('')\" class=\"pointer \"\r\n                      matSuffix aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\r\n                      <mat-icon>close</mat-icon>\r\n                    </span>\r\n                  </mat-form-field>\r\n                  <!-- input field department filter person -->\r\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\r\n                    class=\"w-100 input-select-option\" qms-form qms-select-input>\r\n                    <mat-label>{{LANG.DEPARTMENT_UNIT}}</mat-label>\r\n                    <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\r\n                      formControlName=\"department\">\r\n                      <mat-select-trigger>\r\n                        {{personForm.controls['department'].value?.name || ''}}\r\n                      </mat-select-trigger>\r\n                      <mat-option>\r\n                        <ngx-mat-select-search formControlName=\"departmentFilter\"\r\n                          [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\" noEntriesFoundLabel=\"\">\r\n                        </ngx-mat-select-search>\r\n                      </mat-option>\r\n                      <mat-option class=\"opt-check-icon\" *ngFor=\"let item of filteredSearchTextBox.department.value\"\r\n                        [value]=\"item\">\r\n                        <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-option-content\">{{ item.name }}</span>\r\n                        <mat-icon class=\"check-icon\"\r\n                          *ngIf=\"personForm.controls['department'].value?.id == item.id\">check</mat-icon>\r\n                      </mat-option>\r\n                    </mat-select>\r\n                    <span (click)=\"setFormControlValue(['recursive','department'], [false,''])\" [@inOutAnimation]\r\n                      class=\"pointer\" matSuffix aria-label=\"Clear\"\r\n                      *ngIf=\"personForm.get('department').value && !getLoading$.value\">\r\n                      <mat-icon>close</mat-icon>\r\n                    </span>\r\n                  </mat-form-field>\r\n                </div>\r\n\r\n                <mat-slide-toggle [@inOutAnimation] *ngIf=\"personForm.controls['department'].value\"\r\n                  class=\"w-100 slide-toggle\" formControlName=\"recursive\" color=\"default\" qms-group-options>\r\n                  <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\r\n                </mat-slide-toggle>\r\n\r\n                <mat-form-field class=\"w-100\" appearance=\"fill\" qms-form qms-search-field>\r\n                  <input matInput appearance=\"off\" [placeholder]=\"LANG.SEARCH_WITH_NAME\" formControlName=\"keyword\"\r\n                    type=\"text\" autocomplete=\"off\" />\r\n                  <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\r\n                    (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\r\n                    <mat-icon>search</mat-icon>\r\n                  </button>\r\n                  <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\r\n                    diameter=\"20\"></mat-progress-spinner>\r\n                  <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\r\n                    class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\r\n                    aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\r\n                    <button qms-btn-icon color=\"light\">\r\n                      <mat-icon>close</mat-icon>\r\n                    </button>\r\n                  </span>\r\n                </mat-form-field>\r\n                <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\r\n                  {{LANG.FILTER}}\r\n                </button>\r\n              </mat-dialog-content>\r\n\r\n              <mat-dialog-content class=\"items-list\">\r\n                <div qms-scrollbar>\r\n                  <div class=\"item\">\r\n                    <mat-checkbox [@inOutAnimation]\r\n                      *ngIf=\"!getLoading$.value && personFiltered.length && !dialogData.modeSelectOnePerson\"\r\n                      #checkPerson class=\"w-100 mb-1 checkbox-all\"\r\n                      (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\r\n                      [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\r\n                      color=\"default\" qms-group-options>\r\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} </span>\r\n                      <span>(<b>{{personFiltered.length}}</b>)</span>\r\n                    </mat-checkbox>\r\n                  </div>\r\n                  <mat-divider class=\"mx-auto\"></mat-divider>\r\n                  <ng-container *ngIf=\"getLoading$.value; then loading\">\r\n                  </ng-container>\r\n                  <div [@inOutAnimation] *ngIf=\"personFiltered.length && !getLoading$.value\" [@listAnimation]\r\n                    class=\"item-list-wrapper\">\r\n                    <div class=\"item  mt-1\" [@inOutAnimation]\r\n                      *ngFor=\"let employee of personFiltered; trackBy: trackByFn\">\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\r\n                        [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                  <div [@inOutAnimation] *ngIf=\"!personFiltered.length && !getLoading$.value\"\r\n                    class=\"item-list-wrapper no-result\">\r\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n                  </div>\r\n                  <mat-divider class=\"mx-auto\"></mat-divider>\r\n                  <qms-paginator #pagingPerson class=\"my-1\" *ngIf=\"getPerson$.value.length > 10\"\r\n                    [length]=\"getPerson$.value.length\" [numHidden]=\"0\" [pageSize]=\"getPerson$.value.pageSize\"\r\n                    [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)'\r\n                    [size]='PAGINATION_SIZE.medium'>\r\n                  </qms-paginator>\r\n                </div>\r\n              </mat-dialog-content>\r\n            </form>\r\n          </ng-container>\r\n\r\n          <!-- UserGroup Access -->\r\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\r\n            <form (submit)=\"onFilterUserGroup()\">\r\n              <mat-dialog-content>\r\n                <mat-form-field class=\"w-100\" qms-form qms-search-field>\r\n                  <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\r\n                    placeholder=\"User group\" />\r\n                  <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\r\n                    matSuffix>\r\n                    <mat-icon>search</mat-icon>\r\n                  </button>\r\n                  <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\r\n                    diameter=\"20\"></mat-progress-spinner>\r\n                  <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value && !getLoading$.value\" matSuffix qms-input-clear>\r\n                    <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\r\n                      <mat-icon>close</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </mat-form-field>\r\n              </mat-dialog-content>\r\n              <mat-dialog-content class=\"items-list\">\r\n                <div qms-scrollbar>\r\n                  <div class=\"item\">\r\n                    <mat-checkbox [@inOutAnimation]\r\n                      *ngIf=\"!getLoading$.value && (userGroupFiltered.length && !dialogData.modeSelectOneUserGroup)\"\r\n                      #checkUserGroup class=\"w-100 checkbox-all mb-1\" color=\"default\"\r\n                      [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\r\n                      [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\r\n                      (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\r\n                      qms-group-options>\r\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n                      <span>(<b>{{userGroupFiltered.length}}</b>)</span>\r\n                    </mat-checkbox>\r\n                  </div>\r\n                  <mat-divider class=\"mx-auto\"></mat-divider>\r\n                  <ng-container *ngIf=\"getLoading$.value;then loading\">\r\n                  </ng-container>\r\n                  <div *ngIf=\"userGroupFiltered.length && !getLoading$.value\" [@listAnimation]\r\n                    class=\"item-list-wrapper\">\r\n                    <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of userGroupFiltered\">\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ? itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\r\n                        [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                  <div [@inOutAnimation] *ngIf=\"!userGroupFiltered.length && !getLoading$.value\"\r\n                    class=\"item-list-wrapper no-result\">\r\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n                  </div>\r\n                  <mat-divider class=\"mx-auto\"></mat-divider>\r\n                  <qms-paginator #pagingUserGroup class=\"my-1\" *ngIf=\"getUserGroup$.value.length > 10 \"\r\n                    [length]=\"getUserGroup$.value.length\" [numHidden]=\"0\" [pageSize]=\"getUserGroup$.value.pageSize\"\r\n                    [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPaginatorEvent($event, OPTION_ENUM.USER_GROUP)'\r\n                    [size]='PAGINATION_SIZE.medium'>\r\n                  </qms-paginator>\r\n                </div>\r\n              </mat-dialog-content>\r\n            </form>\r\n          </ng-container>\r\n\r\n          <!-- Department Access -->\r\n          <ng-container\r\n            *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && getLoading$.value; then loading\"></ng-container>\r\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && !getLoading$.value\"\r\n            class=\"person-access\">\r\n            <qms-select-department-tree #tree [height]=\"'60vh'\" [treeData]=\"this.dialogData.data.accessDepartments\"\r\n              [customClass]=\"'access-department'\" [rowsSkeleton]=\"9\"\r\n              [selectIncludeLabel]=\"dialogData.treeDepartmentConfig.selectIncludeChildLabel\"\r\n              [enableIncludeChild]=\"dialogData.treeDepartmentConfig.enableIncludeChild\"\r\n              [enableTreeSearch]=\"dialogData.treeDepartmentConfig.enableTreeSearch\" [enablePagingSearch]=\"true\"\r\n              [isSelectOne]=\"dialogData.modeSelectOneDepartment\" [selectedList]=\"selectedDepartments\"\r\n              (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\r\n              (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\r\n              (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\r\n              (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\r\n            </qms-select-department-tree>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"optionSelect.value !== null\" class=\"result-wrapper\">\r\n      <div class=\"result-selected-container\">\r\n        <div [@inOutAnimation] *ngIf=\"(options.length === 1) || (options.length > 1 && optionSelect.value !== null)\"\r\n          class=\"header-title result-header\">\r\n          <span>\r\n            {{\r\n            dialogData.titleResult || LANG.RESULTS}}\r\n            <span *ngIf=\"options.length === 1 && hasItemSelected()\">\r\n              ({{getResultTabActive().length}})\r\n            </span>\r\n          </span>\r\n        </div>\r\n        <div class=\"result-body\">\r\n          <!-- Result Person  -->\r\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\r\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\r\n            [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\r\n          </ng-container>\r\n          <!-- Result User group -->\r\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\r\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\r\n            [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\r\n          </ng-container>\r\n          <!-- Result Department -->\r\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\r\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\r\n            [ngTemplateOutletContext]=\"{data: resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <mat-divider class=\"mx-auto\"></mat-divider>\r\n  <div qms-dialog-footer class=\"confirm__button__groups\" [class.none-option]=\"optionSelect.value === null\">\r\n    <button *ngIf=\"optionSelect.value !== null\" [disabled]=\"!hasItemSelected()\" class=\"btn-add\"\r\n      [class.qms-btn-disabled]=\"!hasItemSelected()\" [mat-dialog-close]=\"resultAccess\" qms-btn>\r\n      <span>{{LANG.ADD}}</span>\r\n    </button>\r\n    <button qms-btn-text mat-dialog-close>\r\n      {{LANG.CANCEL}}\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<!-- Template -->\r\n<ng-template #noResult>\r\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n    <path\r\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\r\n      fill=\"#0163B3\" />\r\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\r\n  </svg>\r\n</ng-template>\r\n\r\n<!-- Template list chip -->\r\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\r\n  <mat-chip-list [@inOutAnimation] *ngIf=\"data?.length\" lass=\"panel__item qms-scrollbar\">\r\n    <div [@inOutAnimation_2] *ngFor=\"let item of data; let i = index\">\r\n      <mat-chip (click)=\"onScollToNodeTreeDepartment(item)\" [@updateItemAnimation]\r\n        *qmsContentChanges=\"item.children?.length\" class=\"chip-item-result\" [qms-tool-tip]=\"generateTootip(item)\"\r\n        position=\"top\" mode=\"dark\" qms-chip [removable]=\"true\">\r\n        <span qms-chip-body>\r\n          <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-label\">\r\n            {{item.name}}\r\n            <span *ngIf=\"item.subName\">({{ item.subName }})</span>\r\n          </span>\r\n          <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children && item?.isGroup\">\r\n            {{item.children.length}}/{{item.childCount}}\r\n          </span>\r\n        </span>\r\n        <mat-icon (click)=\"onRemoveChip(type,item, i)\" class=\"remove-chip-icon\">cancel</mat-icon>\r\n      </mat-chip>\r\n    </div>\r\n  </mat-chip-list>\r\n</ng-template>\r\n\r\n<!-- Template result with collapse -->\r\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\r\n  <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\r\n    <mat-expansion-panel-header>\r\n      <div class=\"title-content\">\r\n        <div class=\"qms-list-text\">\r\n          <div qms-line color=\"default-subtitle\">{{title}}\r\n            <span class=\"fw-600\">\r\n              ({{data?.length}})\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </mat-expansion-panel-header>\r\n    <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\r\n    </ng-container>\r\n  </mat-expansion-panel>\r\n</ng-template>\r\n\r\n<!-- Template row without checkbox -->\r\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\r\n  <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\r\n    <div class=\"item-content\">\r\n      <div class=\"text-label\">\r\n        <span class=\"text-label label-item fs-14 \">\r\n          {{ item.name }}\r\n        </span>\r\n        <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\r\n      </div>\r\n      <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\r\n    </div>\r\n    <div class=\"item-state\">\r\n      <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Template checkbox  -->\r\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\r\n  <mat-checkbox [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\" class=\"w-100\" color=\"default\"\r\n    qms-group-options>\r\n    <div class=\"text-label\">\r\n      <span class=\"text-label label-item fs-14 \">\r\n        {{ item.name }}\r\n      </span>\r\n      <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\r\n    </div>\r\n    <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\r\n  </mat-checkbox>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div class=\"loading-container\">\r\n    <div class=\"loader\" *ngFor=\"let item of arrSkeleton\">\r\n      <div class=\"loader__wrapper\">\r\n        <div class=\"row-loader\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
                 animations: [SelectAccessAnimationTrigger],
                 providers: [
                     {
@@ -30270,7 +30582,7 @@ QMSSelectAccessDialogComponent.decorators = [
                     }
                 ],
                 encapsulation: ViewEncapsulation.None,
-                styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.select-access-dialog-container{font-family:Open Sans}.select-access-dialog-container .mat-expansion-panel .mat-expansion-panel-body{padding-top:0!important}.select-access-dialog-container .mat-expansion-panel-header{font-size:12px!important;font-weight:800!important}.select-access-dialog-container .w-100{width:100%}.select-access-dialog-container .h-100{height:100%}.select-access-dialog-container .pointer{cursor:pointer}.select-access-dialog-container .fw-600{font-weight:600}.select-access-dialog-container .label-item{font-weight:600;color:var(--ws-text-primary)}.select-access-dialog-container .sub-label{color:var(--ws-text-secondary)}.select-access-dialog-container .fs-14{font-size:14px}.select-access-dialog-container .fs-12{font-size:12px}.select-access-dialog-container .color-primary{color:var(--primary-light)!important}.select-access-dialog-container .header-title{font-weight:600;color:var(--ws-text-primary);font-size:16px}.select-access-dialog-container .chip-item-result{max-width:250px}.select-access-dialog-container .chip-item-result.item-department .qms-chip-body{display:flex;justify-content:center;align-items:center}.select-access-dialog-container .remove-chip-icon{color:rgba(0,0,0,.3);cursor:pointer}.select-access-dialog-container .remove-chip-icon:hover{color:rgba(0,0,0,.7)}.select-access-dialog-container .mat-form-field-wrapper{padding-bottom:5px!important}.select-access-dialog-container .mat-expansion-panel{border-radius:unset!important}.select-access-dialog-container .mat-expansion-panel-header:not([aria-disabled=true]){background:unset}.select-access-dialog-container .mat-expansion-panel.mat-expanded .mat-expansion-panel-header{background:#e5eefb}.select-access-dialog-container .mat-expansion-panel.mat-expanded .mat-expansion-panel-header .qms-line{color:var(--primary-light)!important}.select-access-dialog-container .access-dialog-header{display:flex;justify-content:space-between;align-items:center}.select-access-dialog-container .access-dialog-wraper{width:100%}.select-access-dialog-container .access-dialog-wraper .field-select-option .mat-form-field-wrapper{padding-bottom:16px!important}.select-access-dialog-container .access-dialog-wraper .field-select-option .mat-form-field-underline{bottom:16px!important}.select-access-dialog-container .mat-chip-list-wrapper{margin:unset!important}.select-access-dialog-container .result-selected-container{max-height:175px;overflow-y:auto;padding-right:4px}.select-access-dialog-container .item-list-wrapper{max-height:28vh;padding:4px 4px 4px 0;overflow-y:auto}.select-access-dialog-container .item-list-wrapper.no-result{height:28vh;display:flex;justify-content:center;align-items:center}.select-access-dialog-container .item-list-wrapper .item{min-height:40px}.select-access-dialog-container .item-list-wrapper .item-without-checkbox{min-height:45px;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:4px;transition:background .3s ease}.select-access-dialog-container .item-list-wrapper .item-without-checkbox.active{background:var(--primary-light-12-opacity)}.select-access-dialog-container .item-list-wrapper .item-without-checkbox:hover{background:var(--primary-light-6-opacity)}.select-access-dialog-container .item-list-wrapper .item-without-checkbox .mat-icon{color:var(--primary-light)!important}.select-access-dialog-container .confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.select-access-dialog-container .option-selected-content .group-filter-person-option{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;grid-gap:8px;gap:8px}.select-access-dialog-container span.chip-item__content_name{display:inline-block;max-width:175px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-access-dialog-container span.chip-item-children__count{font-size:.75rem;color:rgba(0,0,0,.5);font-weight:600}.select-access-dialog-container .mat-slide-toggle.qms-group-options{padding:unset!important}.select-access-dialog-container .input-option-filter .mat-form-field-wrapper{padding-bottom:8px!important}.select-access-dialog-container .input-option-filter .mat-form-field-underline{bottom:8px!important}.select-access-dialog-container .slide-toggle{margin-bottom:8px}.select-access-dialog-container .confirm__button__groups.none-option{margin-top:85px}.select-access-dialog-container .btn-icon-clear{position:relative;padding:0 1rem}.select-access-dialog-container .btn-icon-clear .qms-btn-icon{margin-right:unset!important}.select-access-dialog-container .btn-icon-clear:after{position:absolute;content:\"\";left:0;top:0;height:100%;width:1px;background:rgba(0,0,0,.3)}.select-access-dialog-container .qms-paginator .mat-icon{display:flex;align-items:center;justify-content:center}.select-access-dialog-container .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.select-access-dialog-container .qms-paginator .mat-paginator-container{min-height:40px}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-total-result{margin-bottom:2px;margin-right:12px;height:30px}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:600;font-size:13px;color:rgba(0,0,0,.8)}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-paginator-range-actions{margin-bottom:0;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.select-access-dialog-container .qms-paginator>.qms-btn-icon-wrapper{width:30px;height:30px;display:flex;justify-content:center;align-items:center}.select-access-dialog-container .qms-paginator .qms-paginator-page-size{margin-right:12px}.select-access-dialog-container .qms-paginator .qms-paginator-page-size>.qms-pagesize-label{display:none}.select-access-dialog-container .qms-paginator .qms-paginator-page-size>.qms-form-page-size .mat-form-field-flex{width:60px!important;height:30px;display:flex;align-items:center;padding:0 4px}.select-access-dialog-container .qms-paginator .qms-paginator-page-size>.qms-form-page-size .mat-form-field-flex .mat-form-field-infix{height:30px}.select-access-dialog-container .qms-paginator .mat-form-field.qms-form .mat-select-min-line,.select-access-dialog-container .qms-paginator .mat-form-field.qms-form mat-select-trigger{font-size:14px}.select-access-dialog-container .qms-paginator .mat-select-value{text-align:center}.select-access-dialog-container .mat-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row!important;align-items:center!important;grid-column-gap:4px!important;-moz-column-gap:4px!important;column-gap:4px!important}.select-access-dialog-container .mat-expansion-panel.qms-expansion{margin:0!important}.select-access-dialog-container .qms-btn-icon{width:30px!important;height:30px!important;line-height:30px!important}.select-access-dialog-container .loading-container{height:25vh;display:grid;grid-template-rows:repeat(auto-fill,minmax(60px,60px))}.select-access-dialog-container .loading-container .loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.select-access-dialog-container .loading-container .loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,hsla(0,0%,91%,0),hsla(0,0%,89%,0) 40%,hsla(0,0%,89%,.5) 50%,hsla(0,0%,89%,0) 60%,hsla(0,0%,89%,0));-webkit-animation:animate-loading 1.2s linear infinite;animation:animate-loading 1.2s linear infinite}.select-access-dialog-container .loading-container .loader__wrapper{position:relative;width:100%;height:100%}.select-access-dialog-container .loading-container .loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px;overflow:hidden}@-webkit-keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}"]
+                styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.select-access-dialog-container{font-family:Open Sans}.select-access-dialog-container .mat-expansion-panel .mat-expansion-panel-body{padding-top:0!important}.select-access-dialog-container .mat-expansion-panel-header{font-size:12px!important;font-weight:800!important}.select-access-dialog-container .w-100{width:100%}.select-access-dialog-container .h-100{height:100%}.select-access-dialog-container .pointer{cursor:pointer}.select-access-dialog-container .fw-600{font-weight:600}.select-access-dialog-container .label-item{font-weight:600;color:var(--ws-text-primary)}.select-access-dialog-container .sub-label{color:var(--ws-text-secondary)}.select-access-dialog-container .fs-14{font-size:14px}.select-access-dialog-container .fs-12{font-size:12px}.select-access-dialog-container .color-primary{color:var(--primary-light)!important}.select-access-dialog-container .header-title{font-weight:600;color:var(--ws-text-primary);font-size:16px}.select-access-dialog-container .chip-item-result{max-width:250px}.select-access-dialog-container .chip-item-result.item-department .qms-chip-body{display:flex;justify-content:center;align-items:center}.select-access-dialog-container .remove-chip-icon{color:rgba(0,0,0,.3);cursor:pointer}.select-access-dialog-container .remove-chip-icon:hover{color:rgba(0,0,0,.7)}.select-access-dialog-container .mat-form-field-wrapper{padding-bottom:5px!important}.select-access-dialog-container .mat-expansion-panel{border-radius:unset!important}.select-access-dialog-container .mat-expansion-panel-header:not([aria-disabled=true]){background:unset}.select-access-dialog-container .mat-expansion-panel.mat-expanded .mat-expansion-panel-header{background:#e5eefb}.select-access-dialog-container .mat-expansion-panel.mat-expanded .mat-expansion-panel-header .qms-line{color:var(--primary-light)!important}.select-access-dialog-container .access-dialog-header{display:flex;justify-content:space-between;align-items:center}.select-access-dialog-container .mat-chip-list-wrapper{margin:unset!important}.select-access-dialog-container .item-list-wrapper{max-height:45vh;padding:4px 4px 4px 0;overflow-y:auto}.select-access-dialog-container .item-list-wrapper.no-result{height:50vh;display:flex;justify-content:center;align-items:center}.select-access-dialog-container .item-list-wrapper .item{min-height:40px}.select-access-dialog-container .item-list-wrapper .item-without-checkbox{min-height:45px;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:4px;transition:background .3s ease}.select-access-dialog-container .item-list-wrapper .item-without-checkbox.active{background:var(--primary-light-12-opacity)}.select-access-dialog-container .item-list-wrapper .item-without-checkbox:hover{background:var(--primary-light-6-opacity)}.select-access-dialog-container .item-list-wrapper .item-without-checkbox .mat-icon{color:var(--primary-light)!important}.select-access-dialog-container .confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.select-access-dialog-container .qms-dialog-content{display:grid;grid-column-gap:8px;-moz-column-gap:8px;column-gap:8px}.select-access-dialog-container .qms-dialog-content.active{grid-template-columns:2fr 1fr}.select-access-dialog-container .qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-wrapper{padding-bottom:16px!important}.select-access-dialog-container .qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-underline{bottom:16px!important}.select-access-dialog-container .qms-dialog-content .result-wrapper{position:relative;width:100%;margin-left:8px}.select-access-dialog-container .qms-dialog-content .result-wrapper:after{position:absolute;content:\"\";top:0;left:0;background-color:#0000001f;height:100%;width:1px}.select-access-dialog-container .qms-dialog-content .result-selected-container{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;padding:0 8px}.select-access-dialog-container .qms-dialog-content .result-selected-container .result-header{height:51px;display:flex;align-items:center;position:-webkit-sticky;position:sticky;top:0;z-index:10;padding:0!important;background:#fff;margin-bottom:12px}.select-access-dialog-container .qms-dialog-content .result-selected-container .result-header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background:rgba(0,0,0,.04)}.select-access-dialog-container .qms-dialog-content .result-selected-container .result-header .mat-card-content{height:51px;width:100%;padding-left:4px;display:flex;align-items:center;background-color:rgba(0,0,0,.04)}.select-access-dialog-container .option-selected-content .group-filter-person-option{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;grid-gap:8px;gap:8px}.select-access-dialog-container span.chip-item__content_name{display:inline-block;max-width:175px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-access-dialog-container span.chip-item-children__count{font-size:.75rem;color:rgba(0,0,0,.5);font-weight:600}.select-access-dialog-container .mat-slide-toggle.qms-group-options{padding:unset!important}.select-access-dialog-container .input-option-filter .mat-form-field-wrapper{padding-bottom:8px!important}.select-access-dialog-container .input-option-filter .mat-form-field-underline{bottom:8px!important}.select-access-dialog-container .slide-toggle{margin-bottom:8px}.select-access-dialog-container .confirm__button__groups.none-option{margin-top:85px}.select-access-dialog-container .btn-icon-clear{position:relative;padding:0 1rem}.select-access-dialog-container .btn-icon-clear .qms-btn-icon{margin-right:unset!important}.select-access-dialog-container .btn-icon-clear:after{position:absolute;content:\"\";left:0;top:0;height:100%;width:1px;background:rgba(0,0,0,.3)}.select-access-dialog-container .qms-paginator .mat-icon{display:flex;align-items:center;justify-content:center}.select-access-dialog-container .qms-paginator .qms-btn-icon{width:30px!important;height:30px!important;line-height:30px!important}.select-access-dialog-container .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.select-access-dialog-container .qms-paginator .mat-paginator-container{min-height:40px}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-total-result{margin-bottom:2px;margin-right:12px;height:30px}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:600;font-size:13px;color:rgba(0,0,0,.8)}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-paginator-range-actions{margin-bottom:0;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.select-access-dialog-container .qms-paginator .mat-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.select-access-dialog-container .qms-paginator>.qms-btn-icon-wrapper{width:30px!important;height:30px!important;display:flex;justify-content:center;align-items:center}.select-access-dialog-container .qms-paginator .qms-paginator-page-size{margin-right:12px}.select-access-dialog-container .qms-paginator .qms-paginator-page-size>.qms-pagesize-label{display:none}.select-access-dialog-container .qms-paginator .qms-paginator-page-size>.qms-form-page-size .mat-form-field-flex{width:60px!important;height:30px;display:flex;align-items:center;padding:0 4px}.select-access-dialog-container .qms-paginator .qms-paginator-page-size>.qms-form-page-size .mat-form-field-flex .mat-form-field-infix{height:30px}.select-access-dialog-container .qms-paginator .mat-form-field.qms-form .mat-select-min-line,.select-access-dialog-container .qms-paginator .mat-form-field.qms-form mat-select-trigger{font-size:14px}.select-access-dialog-container .qms-paginator .mat-select-value{text-align:center}.select-access-dialog-container .mat-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row!important;align-items:center!important;grid-column-gap:4px!important;-moz-column-gap:4px!important;column-gap:4px!important}.select-access-dialog-container .mat-expansion-panel.qms-expansion{margin:0!important}.select-access-dialog-container .access-department .qms-view-search-result{height:100%!important}.select-access-dialog-container .access-department .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.select-access-dialog-container .access-department .loading-container{height:calc(100% - 40px)!important}.select-access-dialog-container .loading-container{height:50vh;overflow:hidden;display:grid;grid-template-rows:repeat(auto-fill,minmax(60px,60px))}.select-access-dialog-container .loading-container .loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.select-access-dialog-container .loading-container .loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,hsla(0,0%,91%,0),hsla(0,0%,89%,0) 40%,hsla(0,0%,89%,.5) 50%,hsla(0,0%,89%,0) 60%,hsla(0,0%,89%,0));-webkit-animation:animate-loading 1.2s linear infinite;animation:animate-loading 1.2s linear infinite}.select-access-dialog-container .loading-container .loader__wrapper{position:relative;width:100%;height:100%}.select-access-dialog-container .loading-container .loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px;overflow:hidden}@-webkit-keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}"]
             },] }
 ];
 QMSSelectAccessDialogComponent.ctorParameters = () => [
@@ -30281,9 +30593,11 @@ QMSSelectAccessDialogComponent.ctorParameters = () => [
     { type: ChangeDetectorRef }
 ];
 QMSSelectAccessDialogComponent.propDecorators = {
-    tree: [{ type: ViewChild, args: ['treeDepartment', {
+    tree: [{ type: ViewChild, args: ['tree', {
                     read: SelectDepartmentTreeComponent
-                },] }]
+                },] }],
+    pagingPerson: [{ type: ViewChild, args: ['pagingPerson',] }],
+    pagingUserGroup: [{ type: ViewChild, args: ['pagingUserGroup',] }]
 };
 
 class QMSSelectAccessDialogModule {
@@ -30315,7 +30629,8 @@ QMSSelectAccessDialogModule.decorators = [
                     MatSlideToggleModule,
                     QMSListModule,
                     QmsPaginatorModule,
-                    MatPaginatorModule
+                    MatPaginatorModule,
+                    MatCardModule
                 ],
                 exports: [
                     QMSSelectAccessDialogComponent
@@ -30323,6 +30638,9 @@ QMSSelectAccessDialogModule.decorators = [
             },] }
 ];
 
+class FilterPersonModel {
+}
+
 /*
  * Public API Surface of qms-angular
  */
@@ -30331,5 +30649,5 @@ QMSSelectAccessDialogModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AnimationTreeDepartment, AutocompleteOffDirective, BREADCRUMB_DROPDOWN_ICON, BUTTON_TOGGLE_DEFAULT_OPTIONS, BUTTON_TOGGLE_GROUP, BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, BannerType, BpmnService, BreadcrumbNode, BreadcrumbType, ButtonToggleChange, CHECKLIST_ICON, CKEditorEventConst, CKEditorModule, CdkDetailRowDirective, ConfirmDialog, DEPARTMENT_FOLDER_ICON, DEPARTMENT_FOLDER_OUTLINED_ICON, DEVIATION_ICON, DOCUMENT_DEPARTMENT_ICON, DOCUMENT_ENTERPRISE_ICON, DOCUMENT_ICON, DOCUMENT_LOCAL_ICON, DOCUMENT_REGIONAL_ICON, DataType$1 as DataType, DateFormatPipe, DepartmentLocationBreadCrumb, DepartmentSearchResultModel, DocumentNodeType$1 as DocumentNodeType, ENTERPRISE_FOLDER_ICON, ENTERPRISE_FOLDER_OUTLINED_ICON, FileErrorType, FileType, FlatNodeNavDrawer, FlowChartConst, FlowchartViewMode, ISelectOneItem, InformationCoverItem, KEYBOARD_DOWN_ICON, KEYBOARD_UP_ICON, LOCAL_FOLDER_ICON, LOCAL_FOLDER_OUTLINED_ICON, LinkAnchor, LinkType, MarginDirective, MfeUtil, ModuleType$1 as ModuleType, NORMAL_FOLDER_ICON, NORMAL_FOLDER_OUTLINED_ICON, NavigatorElementView, NavigatorLinkView, NewTreeComponent, NewTreeModel, OptionSelectAccessEnum, OptionSelectAccessModel, PROCESS_AREA_ICON, PROCESS_AREA_OUTLINED_ICON, PROCESS_ICON, PaginationSize, PopupData, ProtocolType, ProtocolTypeName, QMSAccessItem, QMSAnchor, QMSAppBar, QMSAppIconModule, QMSAttachmentListDirective, QMSBasicTreeComponent, QMSBreadcrumb, QMSBreadcrumbDirectionIconDirective, QMSBreadcrumbItemDirective, QMSBreadcrumbModule, QMSButton, QMSButtonIcon, QMSButtonModule, QMSButtonToggle, QMSButtonToggleGroup, QMSCKEditorBaseComponent, QMSCKEditorBaseService, QMSCKEditorBpmn, QMSCKEditorBpmnApiService, QMSCKEditorBpmnComponent, QMSCKEditorBpmnTemplate, QMSCKEditorComponent, QMSCKEditorConfirmComponent, QMSCKEditorData, QMSCKEditorDialogData, QMSCKEditorDocumentType, QMSCKEditorFlowchart, QMSCKEditorFlowchartService, QMSCKEditorFullscreenComponent, QMSCKEditorGlobalService, QMSCKEditorInjector, QMSCKEditorLinkAnchorDocument, QMSCKEditorLinkComponent, QMSCKEditorLinkService, QMSCKEditorLoadTemplateComponent, QMSCKEditorModule, QMSCKEditorPlugin, QMSCKEditorRelatedComponent, QMSCKEditorRelation, QMSCKEditorSaveAsTemplate, QMSCKEditorTemplate, QMSCKEditorTemplateService, QMSCKEditorToastService, QMSCKEditorTreeComponent, QMSCKEdtiorInputData, QMSChipBodyDirective, QMSChipInputChipListDirective, QMSChipInputDirective, QMSChipInputSelectDropDownDirective, QMSChipInputSelectFieldDirective, QMSChipInputSelectTriggerDirective, QMSCollapseGroupDirective, QMSComment, QMSConfirmDialog, QMSDialogConfig, QMSDialogContainer, QMSDialogContainerV2, QMSDialogContent, QMSDialogFooter, QMSDialogHeader, QMSDrawerContentDirective, QMSDrawerDirective, QMSDrawerHeaderActionDirective, QMSDrawerHeaderDirective, QMSDropdownMenuItem, QMSEditFileNameDialog, QMSEditFileNameDialogModule, QMSFileAttachment, QMSFileUploadDirective, QMSFileUploadDisplayDirective, QMSFileUploadMultipleDirective, QMSFileUploadMultipleDisplayDirective, QMSFileUploadMultipleSelectorDirective, QMSFileUploadSelectorDirective, QMSFlatNodeTree, QMSFormDialog, QMSFormFieldDatePickerDirective, QMSFormFieldDirective, QMSFormFieldTextareaDirective, QMSGroupOptionDirective, QMSIconRegistryService, QMSInputChipDirective, QMSInputClearDirective, QMSList, QMSListExpansion, QMSListExpansionHeader, QMSListHeader, QMSListItem, QMSListLeadingIcon, QMSListLine, QMSListModule, QMSMultiIconDirective, QMSNavDrawerComponent, QMSNavDrawerModule, QMSNavigationDrawerComponent, QMSNavigationDrawerModule, QMSNewTreeModule, QMSPaginatorComponent, QMSProcessDocumentItem, QMSRangeSliderDirective, QMSRangeSliderLockUpDirective, QMSRangeSliderModule, QMSRelatedGlobalService, QMSRelatedModule, QMSRichText, QMSRichTextModule, QMSRowDetailDirective, QMSScrolableAttachmentListDirective, QMSScrollbarDirective, QMSSearchFieldDirective, QMSSelectAccessData, QMSSelectAccessDialog, QMSSelectAccessDialogComponent, QMSSelectAccessDialogModule, QMSSelectAccessGlobalService, QMSSelectAccessResult, QMSSelectDepartmentGlobalService, QMSSelectDepartmentModule, QMSSelectDepartmentTreeConfig, QMSSelectDepartmentTreeGlobalService, QMSSelectDepartmentTreeModule, QMSSelectIncludeChildrenGlobalService, QMSSelectIncludeChildrenModule, QMSSelectOneGlobalService, QMSSelectOneModule, QMSSelectProcessDocumentGlobalService, QMSSelectProcessDocumentModule, QMSSideSheetModule, QMSSnackbarConfig, QMSSuffixDirective, QMSSuffixFieldDirective, QMSTabGroupAdvancedDirective, QMSTabGroupDirective, QMSTabLabelDirective, QMSTabModule, QMSTableAction, QMSTableActionBlock, QMSTableChildrenDirective, QMSTableDirective, QMSTableModule, QMSTableRowDirective, QMSTextBlockDirective, QMSTextBlockLine, QMSTextTruncateDirective, QMSThemingLibraryService, QMSToolTipComponent, QMSToolTipRendererDirective, QMSTooltipImageDirective, QMSTooltipModule, QMSTreeConfig, QMSTreeGlobalService, QMSTreeModel, QMSTreeModule, QMSUploadFileErrorDialog, QMSUploadFileErrorDialogModule, QMSUploadingFileGuard, QMS_THEMES, QMS_THEME_DEFAULT, QmsAngularComponent, QmsAngularModule, QmsAngularService, QmsAppBarComponent, QmsAppBarModule, QmsBadgesComponent, QmsBadgesModule, QmsBannerButtonType, QmsBannerComponent, QmsBannerConfirmButton, QmsBannerConfirmButtonClick, QmsBannerConfirmComponent, QmsBannerConfirmModule, QmsBannerContent, QmsBannerLoadingComponent, QmsBannerLoadingModule, QmsBannerModule, QmsCkeditorLinkSimpleComponent, QmsPaginatorModule, QmsReportContentPortraitComponent, QmsReportCoverPortraitComponent, QmsReportModule, QmsStatusDropdownComponent, QmsStatusDropdownModule, QmsStatusDropdownOption, QmsStatusDropdownType, QmsStepperComponent, QmsStepperModule, REGIONAL_FOLDER_ICON, REGIONAL_FOLDER_OUTLINED_ICON, RISK_ICON, RelatedConst, RelatedContentComponent, RelatedItemType, RelatedListComponent, RelatedPopupComponent, Result, RiskAnalysis, RiskAnalysisComponent, RiskDanger, RiskListComponent, RiskResult, RiskResultComponent, SaveTemplateComponent, ScrollToSelectedDirective, SelectConst, SelectDepartmentComponent, SelectDepartmentPopupData, SelectDepartmentTreeComponent, SelectDialog, SelectIncludeChildrenPopUpComponent, SelectOneDialog, SelectOneNextData, SelectOneNextDialog, SelectOnePopupData, SelectOption, SelectOptionTypes, SelectPopupData, SelectProcessDocumentPopupComponent, SelectProcessDocumentPopupData, SelectedOption, SelectedProcessDocumentItem, SharedModule, ShowHideSearchResultConst, SideNav, SideNavItem, SidenavComponent, TargetType, TargetTypeName, TranslateLibraryService, TreeComponent, TreeConfig, TreeFlatNode, TreeModel, TreeModelNavDrawer, TreeNode$1 as TreeNode, UploadErrorData, app, basic, en, erd, fsa, mixinColor, no, notExceedSize, org, pn, requiredFileType, standard, uml, ɵ2, SharedMaterialModule as ɵa, TreeComponent as ɵb, QMSTreeModule as ɵc, QMSBasicTreeComponent as ɵd, QMSCKEditorTreeService as ɵe, QMSCKEditorTemplateComponent as ɵf, LinkAttachmentComponent as ɵg, QMSCKEditorTooltipComponent as ɵh, QMSCKEditorTooltip as ɵi, QMSCKEditorImageMapComponent as ɵj, QMSCKEditorImageMap as ɵk, QMSCKEditorUploadService as ɵl, QMSCKEditorBpmnData as ɵm, QMSCKEditorAboutComponent as ɵn, QMSCKEditorFlowchartComponent as ɵo };
+export { AnimationTreeDepartment, AutocompleteOffDirective, BREADCRUMB_DROPDOWN_ICON, BUTTON_TOGGLE_DEFAULT_OPTIONS, BUTTON_TOGGLE_GROUP, BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, BannerType, BpmnService, BreadcrumbNode, BreadcrumbType, ButtonToggleChange, CHECKLIST_ICON, CKEditorEventConst, CKEditorModule, CdkDetailRowDirective, ConfirmDialog, DEPARTMENT_FOLDER_ICON, DEPARTMENT_FOLDER_OUTLINED_ICON, DEVIATION_ICON, DOCUMENT_DEPARTMENT_ICON, DOCUMENT_ENTERPRISE_ICON, DOCUMENT_ICON, DOCUMENT_LOCAL_ICON, DOCUMENT_REGIONAL_ICON, DataType$1 as DataType, DateFormatPipe, DepartmentLocationBreadCrumb, DepartmentSearchResultModel, DocumentNodeType$1 as DocumentNodeType, ENTERPRISE_FOLDER_ICON, ENTERPRISE_FOLDER_OUTLINED_ICON, EllipsifyDirective, FileErrorType, FileType, FilterPersonModel, FlatNodeNavDrawer, FlowChartConst, FlowchartViewMode, ISelectOneItem, InformationCoverItem, KEYBOARD_DOWN_ICON, KEYBOARD_UP_ICON, LOCAL_FOLDER_ICON, LOCAL_FOLDER_OUTLINED_ICON, LinkAnchor, LinkType, MarginDirective, MfeUtil, ModuleType$1 as ModuleType, NORMAL_FOLDER_ICON, NORMAL_FOLDER_OUTLINED_ICON, NavigatorElementView, NavigatorLinkView, NewTreeComponent, NewTreeModel, OptionSelectAccessEnum, OptionSelectAccessModel, PROCESS_AREA_ICON, PROCESS_AREA_OUTLINED_ICON, PROCESS_ICON, PaginationSize, PopupData, ProtocolType, ProtocolTypeName, QMSAccessItem, QMSAccessPagingChangeModel, QMSAccessPagingModel, QMSAnchor, QMSAppBar, QMSAppIconModule, QMSAttachmentListDirective, QMSBasicTreeComponent, QMSBreadcrumb, QMSBreadcrumbDirectionIconDirective, QMSBreadcrumbItemDirective, QMSBreadcrumbModule, QMSButton, QMSButtonIcon, QMSButtonModule, QMSButtonToggle, QMSButtonToggleGroup, QMSCKEditorBaseComponent, QMSCKEditorBaseService, QMSCKEditorBpmn, QMSCKEditorBpmnApiService, QMSCKEditorBpmnComponent, QMSCKEditorBpmnTemplate, QMSCKEditorComponent, QMSCKEditorConfirmComponent, QMSCKEditorData, QMSCKEditorDialogData, QMSCKEditorDocumentType, QMSCKEditorFlowchart, QMSCKEditorFlowchartService, QMSCKEditorFullscreenComponent, QMSCKEditorGlobalService, QMSCKEditorInjector, QMSCKEditorLinkAnchorDocument, QMSCKEditorLinkComponent, QMSCKEditorLinkService, QMSCKEditorLoadTemplateComponent, QMSCKEditorModule, QMSCKEditorPlugin, QMSCKEditorRelatedComponent, QMSCKEditorRelation, QMSCKEditorSaveAsTemplate, QMSCKEditorTemplate, QMSCKEditorTemplateService, QMSCKEditorToastService, QMSCKEditorTreeComponent, QMSCKEdtiorInputData, QMSChipBodyDirective, QMSChipInputChipListDirective, QMSChipInputDirective, QMSChipInputSelectDropDownDirective, QMSChipInputSelectFieldDirective, QMSChipInputSelectTriggerDirective, QMSCollapseGroupDirective, QMSComment, QMSConfirmDialog, QMSContentChangesDirective, QMSDepartmentPagingModel, QMSDialogConfig, QMSDialogContainer, QMSDialogContainerV2, QMSDialogContent, QMSDialogFooter, QMSDialogHeader, QMSDrawerContentDirective, QMSDrawerDirective, QMSDrawerHeaderActionDirective, QMSDrawerHeaderDirective, QMSDropdownMenuItem, QMSEditFileNameDialog, QMSEditFileNameDialogModule, QMSFileAttachment, QMSFileUploadDirective, QMSFileUploadDisplayDirective, QMSFileUploadMultipleDirective, QMSFileUploadMultipleDisplayDirective, QMSFileUploadMultipleSelectorDirective, QMSFileUploadSelectorDirective, QMSFlatNodeTree, QMSFormDialog, QMSFormFieldDatePickerDirective, QMSFormFieldDirective, QMSFormFieldTextareaDirective, QMSGroupOptionDirective, QMSIconRegistryService, QMSInputChipDirective, QMSInputClearDirective, QMSList, QMSListExpansion, QMSListExpansionHeader, QMSListHeader, QMSListItem, QMSListLeadingIcon, QMSListLine, QMSListModule, QMSMultiIconDirective, QMSNavDrawerComponent, QMSNavDrawerModule, QMSNavigationDrawerComponent, QMSNavigationDrawerModule, QMSNewTreeModule, QMSPaginatorComponent, QMSProcessDocumentItem, QMSRangeSliderDirective, QMSRangeSliderLockUpDirective, QMSRangeSliderModule, QMSRelatedGlobalService, QMSRelatedModule, QMSRichText, QMSRichTextModule, QMSRowDetailDirective, QMSScrolableAttachmentListDirective, QMSScrollbarDirective, QMSSearchFieldDirective, QMSSelectAccessData, QMSSelectAccessDialog, QMSSelectAccessDialogComponent, QMSSelectAccessDialogModule, QMSSelectAccessGlobalService, QMSSelectAccessResult, QMSSelectDepartmentGlobalService, QMSSelectDepartmentModule, QMSSelectDepartmentTreeConfig, QMSSelectDepartmentTreeGlobalService, QMSSelectDepartmentTreeModule, QMSSelectIncludeChildrenGlobalService, QMSSelectIncludeChildrenModule, QMSSelectOneGlobalService, QMSSelectOneModule, QMSSelectProcessDocumentGlobalService, QMSSelectProcessDocumentModule, QMSSideSheetModule, QMSSnackbarConfig, QMSSuffixDirective, QMSSuffixFieldDirective, QMSTabGroupAdvancedDirective, QMSTabGroupDirective, QMSTabLabelDirective, QMSTabModule, QMSTableAction, QMSTableActionBlock, QMSTableChildrenDirective, QMSTableDirective, QMSTableModule, QMSTableRowDirective, QMSTextBlockDirective, QMSTextBlockLine, QMSTextTruncateDirective, QMSThemingLibraryService, QMSToolTipComponent, QMSToolTipRendererDirective, QMSTooltipImageDirective, QMSTooltipModule, QMSTreeConfig, QMSTreeGlobalService, QMSTreeModel, QMSTreeModule, QMSUploadFileErrorDialog, QMSUploadFileErrorDialogModule, QMSUploadingFileGuard, QMS_THEMES, QMS_THEME_DEFAULT, QmsAngularComponent, QmsAngularModule, QmsAngularService, QmsAppBarComponent, QmsAppBarModule, QmsBadgesComponent, QmsBadgesModule, QmsBannerButtonType, QmsBannerComponent, QmsBannerConfirmButton, QmsBannerConfirmButtonClick, QmsBannerConfirmComponent, QmsBannerConfirmModule, QmsBannerContent, QmsBannerLoadingComponent, QmsBannerLoadingModule, QmsBannerModule, QmsCkeditorLinkSimpleComponent, QmsPaginatorModule, QmsReportContentPortraitComponent, QmsReportCoverPortraitComponent, QmsReportModule, QmsStatusDropdownComponent, QmsStatusDropdownModule, QmsStatusDropdownOption, QmsStatusDropdownType, QmsStepperComponent, QmsStepperModule, REGIONAL_FOLDER_ICON, REGIONAL_FOLDER_OUTLINED_ICON, RISK_ICON, RelatedConst, RelatedContentComponent, RelatedItemType, RelatedListComponent, RelatedPopupComponent, Result, RiskAnalysis, RiskAnalysisComponent, RiskDanger, RiskListComponent, RiskResult, RiskResultComponent, SaveTemplateComponent, ScrollToSelectedDirective, SelectAccessAnimationTrigger, SelectConst, SelectDepartmentComponent, SelectDepartmentPopupData, SelectDepartmentTreeComponent, SelectDialog, SelectIncludeChildrenPopUpComponent, SelectOneDialog, SelectOneNextData, SelectOneNextDialog, SelectOnePopupData, SelectOption, SelectOptionTypes, SelectPopupData, SelectProcessDocumentPopupComponent, SelectProcessDocumentPopupData, SelectedOption, SelectedProcessDocumentItem, SharedModule, ShowHideSearchResultConst, SideNav, SideNavItem, SidenavComponent, TargetType, TargetTypeName, TranslateLibraryService, TreeComponent, TreeConfig, TreeFlatNode, TreeModel, TreeModelNavDrawer, TreeNode$1 as TreeNode, UploadErrorData, app, basic, en, erd, fsa, mixinColor, no, notExceedSize, org, pn, requiredFileType, standard, uml, ɵ2, SharedMaterialModule as ɵa, TreeComponent as ɵb, QMSTreeModule as ɵc, QMSBasicTreeComponent as ɵd, QMSCKEditorTreeService as ɵe, QMSCKEditorTemplateComponent as ɵf, LinkAttachmentComponent as ɵg, QMSCKEditorTooltipComponent as ɵh, QMSCKEditorTooltip as ɵi, QMSCKEditorImageMapComponent as ɵj, QMSCKEditorImageMap as ɵk, QMSCKEditorUploadService as ɵl, QMSCKEditorBpmnData as ɵm, QMSCKEditorAboutComponent as ɵn, QMSCKEditorFlowchartComponent as ɵo };
 //# sourceMappingURL=qms-angular.js.map