qms-angular 1.1.56 → 1.1.58

package/fesm2015/qms-angular.js

@@ -36,7 +36,7 @@ import { FlatTreeControl } from '@angular/cdk/tree';
 import * as i1$1 from '@angular/common/http';
 import { HttpHeaders, HttpClient, HttpParams, HttpClientModule } from '@angular/common/http';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatSelectModule, MAT_SELECT_CONFIG } from '@angular/material/select';
+import { MatSelectModule, MAT_SELECT_CONFIG, MatSelectChange } from '@angular/material/select';
 import { MatSnackBarConfig, MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { CKEditorModule as CKEditorModule$1 } from '@ckeditor/ckeditor5-angular';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
@@ -137,7 +137,7 @@ const en = {
     "SEARCH_DEPARTMENT_UNIT": "Search department / unit",
     "FILTER": "Filter",
     "TYPE": "Type",
-    "SEARCH_WITH_NAME": "Search first and last name",
+    "SEARCH_WITH_NAME": "Search name and username",
     "RESULT_SEARCH_FOR": "Results search for ",
     "TOOLTIP_INCLUDE_SUB_DEPARTMENT": "{0} - include {1} sub-departments",
     "TOOLTIP_INCLUDE_SUB_ITEM": "{0} - include {1} sub-items",
@@ -560,7 +560,8 @@ const en = {
         "LINK_TO_FOLDER": "Link to folder",
         "LINK_TO_DEVIATION": "Link to deviation",
         "LINK_TO_CHECKLIST": "Link to checklist",
-        "LINK_TO_INTERCONNECTED_PROCESS": "Link to Interconnected Process"
+        "LINK_TO_INTERCONNECTED_PROCESS": "Link to Interconnected Process",
+        "LINK_TO_COMPLIANCE_REQUIREMENT": "Link to compliance requirement"
     },
     "QMSCKEDITOR_MESSAGE": {
         "CONFIRM_DELETE_TEMPLATE": "Are you sure you want to delete this template?",
@@ -701,7 +702,7 @@ const no = {
     "SEARCH_DEPARTMENT_UNIT": "Søk avdeling/enhet",
     "FILTER": "Bruk filter",
     "TYPE": "Type",
-    "SEARCH_WITH_NAME": "Søk for- og etternavn",
+    "SEARCH_WITH_NAME": "Søk navn og brukernavn",
     "RESULT_SEARCH_FOR": "Resultater søk etter ",
     "TOOLTIP_INCLUDE_SUB_DEPARTMENT": "{0} – inkluderer {1} barn",
     "TOOLTIP_INCLUDE_SUB_ITEM": "{0} - inkluderer {1} underelementer",
@@ -1124,7 +1125,8 @@ const no = {
         "LINK_TO_FOLDER": "Lenke til mappe",
         "LINK_TO_DEVIATION": "Link to avvik",
         "LINK_TO_CHECKLIST": "Link to sjekkliste",
-        "LINK_TO_INTERCONNECTED_PROCESS": " Lenke til Sammenkoblet Prosess"
+        "LINK_TO_INTERCONNECTED_PROCESS": " Lenke til Sammenkoblet Prosess",
+        "LINK_TO_COMPLIANCE_REQUIREMENT": "Lenke til samsvar"
     },
     "QMSCKEDITOR_MESSAGE": {
         "CONFIRM_DELETE_TEMPLATE": "Er du sikker på at du vil slette denne malen?",
@@ -1265,7 +1267,7 @@ const sv = {
     "SEARCH_DEPARTMENT_UNIT": "Sökavdelning/enhet",
     "FILTER": "Använd filter",
     "TYPE": "Typ",
-    "SEARCH_WITH_NAME": "Sök efter för- och efternamn",
+    "SEARCH_WITH_NAME": "Sök namn och användarnamn",
     "RESULT_SEARCH_FOR": "Sök resultat efter",
     "TOOLTIP_INCLUDE_SUB_DEPARTMENT": "{0} – inkluderar {1} barn",
     "TOOLTIP_INCLUDE_SUB_ITEM": "{0} – innehåller {1} underelement",
@@ -5206,6 +5208,10 @@ const PROCESS_INTERCONNECTED_ICON = `<svg width="24" height="24" viewBox="0 0 24
 <path d="M9.995 4C12.2064 4 14.1976 4.9 15.6485 6.35L18 4V11H10.9956L14.2176 7.78C13.137 6.69 11.656 6 9.995 6C6.68293 6 3.99124 8.69 3.99124 12C3.99124 15.31 6.68293 18 9.995 18C10.3375 18 10.6732 17.9713 11 17.9161V19.9376C10.671 19.9788 10.3356 20 9.995 20C5.57223 20 2 16.42 2 12C2 7.58 5.57223 4 9.995 4Z" fill="black" fill-opacity="0.6"/>
 <path d="M13.5 17V13.5H17V14.6667H20.5V13.5H24V17H20.5V15.8333H17V17H15.8333V21.6667H20.5V20.5H24V24H20.5V22.8333H14.6667V17H13.5Z" fill="black" fill-opacity="0.6"/>
 </svg>
+`;
+const COMPLIANCE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M160-120q-33 0-56.5-23.5T80-200v-560q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v560q0 33-23.5 56.5T800-120H160Zm0-80h640v-560H160v560Zm40-80h200v-80H200v80Zm382-80 198-198-57-57-141 142-57-57-56 57 113 113Zm-382-80h200v-80H200v80Zm0-160h200v-80H200v80Zm-40 400v-560 560Z"/>
+</svg>
 `;
 
 class QMSIconRegistryService {
@@ -5247,6 +5253,9 @@ class QMSIconRegistryService {
     registerProcessInterconnectedIcon(_iconRegistry, _sanitizer) {
         _iconRegistry.addSvgIconLiteral('process_interconnected', _sanitizer.bypassSecurityTrustHtml(PROCESS_INTERCONNECTED_ICON));
     }
+    registerComplianceIcon(_iconRegistry, _sanitizer) {
+        _iconRegistry.addSvgIconLiteral('compliance', _sanitizer.bypassSecurityTrustHtml(COMPLIANCE_ICON));
+    }
 }
 QMSIconRegistryService.ɵprov = i0.ɵɵdefineInjectable({ factory: function QMSIconRegistryService_Factory() { return new QMSIconRegistryService(); }, token: QMSIconRegistryService, providedIn: "root" });
 QMSIconRegistryService.decorators = [
@@ -5943,6 +5952,7 @@ var DataType;
     DataType[DataType["checklistCategory"] = 9] = "checklistCategory";
     DataType[DataType["riskFolder"] = 10] = "riskFolder";
     DataType[DataType["processInterconnected"] = 11] = "processInterconnected";
+    DataType[DataType["compliance"] = 12] = "compliance";
     DataType[DataType["other"] = 0] = "other";
 })(DataType || (DataType = {}));
 
@@ -6796,6 +6806,7 @@ class RelatedListComponent {
         appIconService.registerChecklistIcon(iconRegistry, domSanitizer);
         appIconService.registerRiskIcon(iconRegistry, domSanitizer);
         appIconService.registerProcessInterconnectedIcon(iconRegistry, domSanitizer);
+        appIconService.registerComplianceIcon(iconRegistry, domSanitizer);
     }
     ngOnChanges(changes) {
         var _a;
@@ -6882,6 +6893,8 @@ class RelatedListComponent {
                 return 'risk';
             case DataType.processInterconnected:
                 return 'process_interconnected';
+            case DataType.compliance:
+                return 'compliance';
             default:
                 return 'folder_outlined';
         }
@@ -6893,7 +6906,7 @@ class RelatedListComponent {
 RelatedListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-related-list',
-                template: "<div class=\"container list-related\">\n  <div class=\"list-related__title\">\n    <strong>{{ title }}</strong>\n  </div>\n  <div\n    class=\"list-related__body\"\n    *ngFor=\"let item of relatedData; let i = index\"\n  >\n    <div class=\"list-related__body-parent\">\n      <qms-list-item type=\"image-square\">\n        <mat-icon\n          type=\"image-square\"\n          leading-icon\n          [svgIcon]=\"getNodeIcon(item)\"\n        ></mat-icon>\n        <div qms-list-header>\n          <div\n            qms-line\n            (click)=\"onItemClick(item)\"\n            type=\"caption\"\n            *ngIf=\"canShowParent(item)\"\n          >\n            {{ item?.parentName }}\n          </div>\n          <div qms-line (click)=\"onItemClick(item)\" type=\"subtitle\">\n            {{ item.itemName }}\n          </div>\n        </div>\n        <div qms-line *ngIf=\"item.breadcumbs && item.breadcumbs.length\">\n          <qms-breadcrumb\n            class=\"breadcrumb-container\"\n            type=\"table\"\n            numDisplayItem=\"1\"\n            [nodes]=\"item.breadcumbs\"\n          >\n          </qms-breadcrumb>\n        </div>\n        <div qms-line color=\"default-subtitle\" *ngIf=\"item?.displayId\">\n          <ng-container *ngIf=\"item?.displayId\">\n            <span>\n              <mat-icon class=\"material-icons-outlined\"> local_offer </mat-icon>\n            </span>\n            &nbsp;ID:\n            {{ item?.displayId }}\n          </ng-container>\n          <ng-container *ngIf=\"item.statusName\">\n            {{ getItemStatus(item) }}\n          </ng-container>\n        </div>\n        <button\n          qms-btn-icon\n          color=\"light\"\n          mode=\"dark\"\n          *ngIf=\"!isNotEditedItem\"\n          (click)=\"removeItem(i)\"\n          >\n            <mat-icon>close</mat-icon>\n        </button>\n      </qms-list-item>\n    </div>\n  </div>\n</div>\n",
+                template: "<div class=\"container list-related\">\n  <div class=\"list-related__title\">\n    <strong>{{ title }}</strong>\n  </div>\n  <div\n    class=\"list-related__body\"\n    *ngFor=\"let item of relatedData; let i = index\"\n  >\n    <div class=\"list-related__body-parent\">\n      <qms-list-item type=\"image-square\">\n        <mat-icon\n          type=\"image-square\"\n          leading-icon\n          [svgIcon]=\"getNodeIcon(item)\"\n        ></mat-icon>\n        <div qms-list-header>\n          <div\n            qms-line\n            (click)=\"onItemClick(item)\"\n            type=\"caption\"\n            *ngIf=\"canShowParent(item)\"\n          >\n            {{ item?.parentName }}\n          </div>\n          <div qms-line (click)=\"onItemClick(item)\" type=\"subtitle\">\n            {{ item.itemName }}\n          </div>\n        </div>\n        <div qms-line *ngIf=\"item.breadcumbs && item.breadcumbs.length\">\n          <qms-breadcrumb\n            class=\"breadcrumb-container\"\n            type=\"table\"\n            numDisplayItem=\"1\"\n            [nodes]=\"item.breadcumbs\"\n          >\n          </qms-breadcrumb>\n        </div>\n        <div qms-line color=\"default-subtitle\" *ngIf=\"item?.displayId\">\n          <ng-container *ngIf=\"item?.displayId\">\n            <span>\n              <mat-icon class=\"material-icons-outlined\"> local_offer </mat-icon>\n            </span>\n            &nbsp;ID:\n            {{ item?.displayId }}\n          </ng-container>\n          <ng-container *ngIf=\"item.statusName\">\n            {{ getItemStatus(item) }}\n          </ng-container>\n        </div>\n        <button\n          qms-btn-icon\n          color=\"light\"\n          mode=\"dark\"\n          *ngIf=\"!isNotEditedItem && (item.canRemove === null || item.canRemove)\"\n          (click)=\"removeItem(i)\"\n          >\n            <mat-icon>close</mat-icon>\n        </button>\n      </qms-list-item>\n    </div>\n  </div>\n</div>\n",
                 encapsulation: ViewEncapsulation.None,
                 styles: [".list-related{font-family:Open Sans;font-style:normal;font-weight:400;color:var(--default-color)}.list-related .list-related__title{font-weight:600;font-size:.875rem;line-height:22px;margin-bottom:1rem}.list-related .list-related__body .list-related__body-parent{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-parent .qms-list-item{height:unset!important}.list-related .list-related__body .list-related__body-parent .qms-list-item.mat-2-line.image-item{height:auto}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-item-content{margin:0}.list-related .list-related__body .list-related__body-parent .wrap-image.image-square,.list-related .list-related__body .list-related__body-parent .wrap-image.image-square img{background:transparent;margin:auto;height:24px;width:24px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box{margin-left:1.5rem;border-bottom:none;padding-bottom:7px;padding-top:7px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text .material-icons-outlined,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box .material-icons-outlined{font-size:13px;height:13px;width:13px}.list-related .list-related__body .list-related__body-parent .block{font-weight:400;font-size:1rem;line-height:28px;display:flex;align-items:center}.list-related .list-related__body .list-related__body-parent .block .title{margin-left:1.5rem;padding-top:5px;padding-bottom:5px}.list-related .list-related__body .list-related__body-parent .block .title .caption{color:rgba(0,0,0,.6);font-size:.75rem;line-height:22px}.list-related .list-related__body .list-related__body-parent .block mat-icon{color:rgba(0,0,0,.6);padding:0}.list-related .list-related__body .list-related__body-parent .block button.qms-btn-icon{width:40px;height:40px;line-height:40px}.list-related .list-related__body .list-related__body-child{font-weight:400;font-size:.875rem;line-height:22px}.list-related .list-related__body .list-related__body-child .default{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-child .default .title{margin-left:3rem}.list-related .list-related__body .list-related__body-child .default .group-button{margin-right:2rem;display:flex}.list-related .list-related__body .remain{font-weight:600;font-size:.875rem;line-height:22px;display:flex;align-items:center;justify-content:space-between;background-color:#fafafa;color:var(--primary);min-height:48px;border-bottom:1px solid #ddd}.list-related .list-related__body .remain .title{margin-left:3rem}.list-related .list-related__body .qms-line{display:flex;align-items:center}.list-related .list-related__body .breadcrumb-container .qms-breadcrumb-item{cursor:inherit;line-height:16px;font-size:.75rem;color:rgba(0,0,0,.6);font-weight:400;line-height:22px;margin:0}.list-related .list-related__body .trailing-box{display:flex;align-items:center}.list-related .list-related__body .trailing-box button{height:24px;width:24px;line-height:24px}.label-green,.label-red,.label-yellow{font-family:Open Sans;font-style:normal;font-weight:600;display:inline-block;text-align:center;margin-left:1rem;width:24px;height:24px;font-size:.75rem;border-radius:1px}.label-red{background-color:var(--secondary);color:#fff}.label-yellow{background-color:var(--risk-yellow);color:rgba(0,0,0,.87)}.label-green{background-color:var(--risk-green);color:#fff}.cursor{cursor:pointer}"]
             },] }
@@ -7323,7 +7336,9 @@ class RelatedPopupComponent {
         return itemType;
     }
     removeCheckedNodeList(item) {
-        this.videoData.src = this.originVideoDataSrc;
+        if (this.videoData) {
+            this.videoData.src = this.originVideoDataSrc;
+        }
         this.selectedData = [];
         this.selectedData2 = [];
         this.checkedNodeList = this.checkedNodeList.filter(x => { var _a, _b; return (x.id.toLowerCase() !== item.id.toLowerCase() || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== ((_b = item.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())); });
@@ -7946,7 +7961,7 @@ class RelatedPopupComponent {
             });
             if (!this.canUploadImage && !this.canUploadVideo)
                 return this.dialogRef.close(this.checkedNodeList);
-            if (this.originVideoDataSrc && !this.videoData.src) {
+            if (this.originVideoDataSrc && this.videoData && !this.videoData.src) {
                 this.videoData.src = this.originVideoDataSrc;
             }
             this.dialogRef.close(this.videoData);
@@ -8192,10 +8207,14 @@ class RelatedPopupComponent {
         });
         if (index >= 0) {
             this.commonCheckedList = this.commonCheckedList.filter((_, ind) => ind !== index);
-            this.videoData.src = this.originVideoDataSrc;
+            if (this.videoData) {
+                this.videoData.src = this.originVideoDataSrc;
+            }
         }
         else {
-            this.videoData.src = `/video?id=${node.id}`;
+            if (this.videoData) {
+                this.videoData.src = `/video?id=${node.id}`;
+            }
             this.commonCheckedList = [...this.commonCheckedList, node];
         }
         this.selectedData = this.commonCheckedList;
@@ -8262,7 +8281,9 @@ class RelatedPopupComponent {
                 });
             }
             else {
-                this.videoData.poster = yield this.uploadService.uploadImage(this.qmsInputImageFile.file, this.imageUpload.height, this.imageUpload.width).toPromise();
+                if (this.videoData) {
+                    this.videoData.poster = yield this.uploadService.uploadImage(this.qmsInputImageFile.file, this.imageUpload.height, this.imageUpload.width).toPromise();
+                }
             }
             const readerImage = new FileReader();
             readerImage.readAsDataURL(this.qmsInputImageFile.file);
@@ -8279,7 +8300,9 @@ class RelatedPopupComponent {
             this.dataTrees.toArray()[0].checklistSelection.clear();
             this.dataTrees.toArray()[0].treeControl.dataNodes.map(x => x.disabled = true);
             const resUploadVideo = yield this.uploadService.uploadSingleFile(this.qmsInputVideoFile.file, '', '1', this.entityId).toPromise();
-            this.videoData.src = resUploadVideo.url;
+            if (this.videoData) {
+                this.videoData.src = resUploadVideo.url;
+            }
             this.isLoadingVideoFile = false;
         });
     }
@@ -13457,6 +13480,7 @@ var ShapeFlowChartConnectionType;
     ShapeFlowChartConnectionType[ShapeFlowChartConnectionType["Deviation"] = 4] = "Deviation";
     ShapeFlowChartConnectionType[ShapeFlowChartConnectionType["Checklist"] = 5] = "Checklist";
     ShapeFlowChartConnectionType[ShapeFlowChartConnectionType["Attachment"] = 6] = "Attachment";
+    ShapeFlowChartConnectionType[ShapeFlowChartConnectionType["Compliance"] = 7] = "Compliance";
 })(ShapeFlowChartConnectionType || (ShapeFlowChartConnectionType = {}));
 
 function getOptions(icons) {
@@ -15911,6 +15935,7 @@ var RelatedItemType;
     RelatedItemType[RelatedItemType["checklist"] = 6] = "checklist";
     RelatedItemType[RelatedItemType["risk"] = 7] = "risk";
     RelatedItemType[RelatedItemType["processInterconnected"] = 11] = "processInterconnected";
+    RelatedItemType[RelatedItemType["compliance"] = 12] = "compliance";
 })(RelatedItemType || (RelatedItemType = {}));
 
 /* eslint-disable no-use-before-define */
@@ -16843,6 +16868,9 @@ class BpmnService {
                         else if (shapeDetail.connectionTypeId === ShapeFlowChartConnectionType.Checklist) {
                             connectionName = LANG.BPMN.LINK_TO_CHECKLIST;
                         }
+                        else if (shapeDetail.connectionTypeId === ShapeFlowChartConnectionType.Compliance) {
+                            connectionName = LANG.BPMN.LINK_TO_COMPLIANCE_REQUIREMENT;
+                        }
                         if (shapeDetail.connectionTypeId !== ShapeFlowChartConnectionType.Activity) {
                             list[i][`style`].cursor = 'pointer';
                         }
@@ -29176,9 +29204,6 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         }
     }
     ngOnDestroy() {
-        if (this.editorInstance) {
-            this.editorInstance.destroy();
-        }
         $(document).off();
     }
     registerOnChange(fn) {
@@ -30033,8 +30058,8 @@ class QMSBPMNComponent {
 QMSBPMNComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-bpmn',
-                template: "<div class=\"qms-bpmn-container\">\n  <div id=\"bpmn\" class=\"bpmn__editor\">\n    <div id=\"toolbarpanel\">\n      <div *ngIf=\"editMode !== flowchartViewMode.View\" id=\"toolbar-container\" [class.disabled]=\"isDisableToolbar()\">\n      </div>\n    </div>\n    <div id=\"leftpanel\" class=\"full-screen-bpmn-editor_panel\">\n      <div id=\"paperpanel\" class=\"full-screen-bpmn-editor_paperpanel\">\n        <div id=\"paper-container\"></div>\n      </div>\n      <div id=\"stencilpanel\">\n        <mat-expansion-panel *ngIf=\"editMode !== flowchartViewMode.View\" id=\"panel-stencil-container\"\n          [expanded]=\"expandedPanel\" (click)=\"expandPanel()\">\n          <mat-expansion-panel-header>\n            <mat-panel-title> </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"stencil-container\"></div>\n        </mat-expansion-panel>\n      </div>\n    </div>\n    <div id=\"rightpanel\" class=\"full-screen-bpmn-editor_panel\">\n      <mat-tab-group mat-stretch-tabs mat-align-tabs=\"center\" (selectedTabChange)=\"onTabChange($event)\"\n        [(selectedIndex)]=\"selectedTabIndex\">\n        <mat-tab [label]=\"LANG.BPMN.PROPERTIES\" id=\"qmsckeditor_bpmn_properties\">\n          <div id=\"inspector-container\"></div>\n        </mat-tab>\n        <mat-tab [label]=\"LANG.BPMN.CONNECTION\" id=\"qmsckeditor_bpmn_connection\" [disabled]=\"disabledConnectionTab\">\n          <mat-expansion-panel id=\"qmsckeditor_bpmn_connection_panel\" [expanded]=\"true\" (opened)=\"(true)\"\n            (closed)=\"(false)\" hideToggle style=\"position: relative;height: 100%;\" *ngIf=\"isSelectedView()\">\n            <div id=\"connection-container\" *ngIf=\"isShowConnectType()\">\n              <!--Connection to shape properties-->\n              <div class=\"shape__connect-type\" *ngIf=\"!QMSBPMNConfig.showShapeConnectionValue\">\n                <h3 class=\"shape-connect__select-label\">{{ LANG.BPMN.CHOOSE_CONNECTION_TYPE }}</h3>\n                <mat-radio-group [(ngModel)]=\"selectedValue\" name=\"connectType\"\n                  (ngModelChange)=\"selectConnectType($event)\" aria-label=\"Select an option\" class=\"mt-3\">\n                  <div *ngFor=\"let type of QMSBPMNConfig.connectTypes\">\n                    <mat-radio-button [value]=\"type.value\" qms-group-options color=\"default\" *ngIf=\"type.canConnect\">\n                      <span class=\"text-label title\">{{ type.viewValue }}</span>\n                      <small class=\"text-help\">{{ type.description }}</small>\n                    </mat-radio-button>\n                  </div>\n                </mat-radio-group>\n              </div>\n              <!--Shape selected value-->\n              <div *ngIf=\"shapeModel && QMSBPMNConfig.showShapeConnectionValue && editMode !== flowchartViewMode.View\"\n                class=\"ml-4 mr-4 mt-2\">\n                <ng-container *ngIf=\"shapeModel.shape?.connectionTypeId === shapeFlowChartConnectionType.Activity\">\n                  <span class=\"shape-connect__label\"> {{ LANG.BPMN.CONNECTION_TYPE.CONNECTED_ACTIVITY }}</span>\n                  <mat-card class=\"col-12 col-md-12 mt-2\">\n                    <div class=\"row\">\n                      <div class=\"col-9 title\" style=\"word-wrap: break-word\">\n                        {{ shapeModel.description.title }}\n                      </div>\n                      <div class=\"col-1\" style=\"cursor: pointer\">\n                        <mat-icon (click)=\"openActivity()\">edit</mat-icon>\n                      </div>\n                      <div class=\"col-1\" style=\"cursor: pointer\">\n                        <mat-icon (click)=\"deleteConnection(shapeModel.shape.connectionTypeId)\">close</mat-icon>\n                      </div>\n                    </div>\n                  </mat-card>\n                </ng-container>\n                <ng-container *ngIf=\"shapeModel.shape?.connectionTypeId !== shapeFlowChartConnectionType.Activity\">\n                  <span class=\"shape-connect__label\"> {{ QMSBPMNConfig.shapeConnectLabel }}</span>\n                  <mat-form-field appearance=\"fill\" class=\"mt-3 connect-link\"\n                    *ngIf=\"shapeModel.relatedItem.itemType == relatedItemType.document\" qms-form qms-select-input>\n                    <mat-label *ngIf=\"!QMSBPMNConfig.isAnchorLoading\">{{\n                      LANG.BPMN.CHOOSE_ANCHOR_IN_TEXT\n                      }}</mat-label>\n                    <mat-label *ngIf=\"QMSBPMNConfig.isAnchorLoading\">\n                      <div class=\"d-flex align-items-center\">\n                        <span>{{ LANG.LOADING }}</span>\n                        <mat-spinner class=\"spinner\" diameter=\"20\"></mat-spinner>\n                      </div>\n                    </mat-label>\n                    <mat-select [(ngModel)]=\"anchorValue\" name=\"anchorType\" qms-select\n                      (ngModelChange)=\"changeShapeAnchor($event)\" panelClass=\"connection-size select-tiny-margin\"\n                      disableOptionCentering>\n                      <mat-option *ngFor=\"let anchor of anchors\" [value]=\"anchor.anchorValue\">\n                        {{ anchor.viewValue }}\n                      </mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                  <button *ngIf=\"shapeModel.relatedItem.itemType == relatedItemType.document\"\n                    (click)=\"reloadAnchorDocument()\" type=\"button\" qms-btn-text class=\"reload-anchor\"\n                    [class.disabled]=\"QMSBPMNConfig.isAnchorLoading\">\n                    <mat-icon>refresh</mat-icon> {{ LANG.BPMN.RELOAD_ANCHORS }}\n                  </button>\n                  <mat-form-field class=\"connect-link\" appearance=\"fill\" style=\"margin-left: 0px;\"\n                    [ngStyle]=\"{ 'margin-top': shapeModel.relatedItem.itemType != relatedItemType.document ? '0px' : '15px' }\"\n                    qms-form qms-select-input>\n                    <mat-label>{{ LANG.BPMN.CONNECTION_TYPE.OPTION_FOR_OPENING }}</mat-label>\n                    <mat-select [(ngModel)]=\"targetValue\" name=\"processTargetType\" qms-select\n                      (ngModelChange)=\"changeShapeTartget($event)\" panelClass=\"connection-size select-tiny-margin\"\n                      disableOptionCentering>\n                      <mat-option *ngFor=\"let target of targets\" [value]=\"target.value\">\n                        {{ target.viewValue }}\n                      </mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                  <div class=\"shape-connect__item-card mt-2\">\n                    <ng-container\n                      *ngIf=\"shapeModel.shape?.connectionTypeId === shapeFlowChartConnectionType.Link, else notLinkConnection\">\n                      <div>\n                        <mat-icon>link</mat-icon>\n                      </div>\n                      <div class=\"shape-connect__content\">\n                        <div class=\"col-12 title link-title\">\n                          {{ shapeModel.link.link }}\n                        </div>\n                      </div>\n                    </ng-container>\n                    <ng-template #notLinkConnection>\n                      <qms-list-item type=\"image-square\">\n                        <mat-icon *ngIf=\"shapeModel.relatedItem.SVGIcon\" leading-icon type=\"image-square\"\n                          [svgIcon]=\"shapeModel.relatedItem.SVGIcon\"></mat-icon>\n                        <mat-icon *ngIf=\"shapeModel.relatedItem.matIcon\" leading-icon\n                          type=\"image-square\">{{shapeModel.relatedItem.matIcon}}</mat-icon>\n                        <div qms-list-header>\n                          <div qms-line type=\"subtitle\" class=\"search__option-name\">\n                            <div *ngIf=\"shapeModel.relatedItem.parentName\" class=\"caption\">\n                              {{ shapeModel.relatedItem.parentName }}\n                            </div>\n                            <span class=\"cursor\">{{ shapeModel.relatedItem.itemName }}</span>\n                          </div>\n                        </div>\n                        <div qms-line color=\"default-subtitle\"\n                          *ngIf=\"\n                                                          (shapeModel.relatedItem.itemType === relatedItemType.document ||\n                                                          shapeModel.relatedItem.itemType === relatedItemType.process || \n                                                          shapeModel.relatedItem.itemType === relatedItemType.processInterconnected)\">\n                          <ng-container *ngIf=\"shapeModel.relatedItem.displayId\">\n                            ID: {{ shapeModel.relatedItem.displayId }}\n                            {{ shapeModel.relatedItem.statusName ? ', ' + shapeModel.relatedItem.statusName : ''}}\n                          </ng-container>\n                        </div>\n                      </qms-list-item>\n                    </ng-template>\n                    <button type=\"button\" qms-btn-icon color=\"light\" class=\"item-card__delete-btn\"\n                      (click)=\"deleteConnection(shapeModel.shape.connectionTypeId)\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </mat-expansion-panel>\n        </mat-tab>\n      </mat-tab-group>\n    </div>\n  </div>\n</div>",
-                styles: [":host ::ng-deep .qms-bpmn-container .bpmn__editor{width:100%;height:100%}:host ::ng-deep .qms-bpmn-container #leftpanel{float:left;width:calc(100% - 400px);height:550px}:host ::ng-deep .qms-bpmn-container #rightpanel{float:right;width:400px;height:550px;border:solid;border-width:0 1px 1px 0}:host ::ng-deep .qms-bpmn-container #rightpanel .units{font-size:12px}:host ::ng-deep .qms-bpmn-container #rightpanel .connection-wrapper{padding-bottom:1.34375em}:host ::ng-deep .qms-bpmn-container #rightpanel .connection-wrapper .mat-card-wrapper{padding-right:0}:host ::ng-deep .qms-bpmn-container #rightpanel .connection-wrapper .connection-content{display:flex;justify-content:space-between}:host ::ng-deep .qms-bpmn-container #rightpanel ::ng-deep .mat-tab-group{height:100%}:host ::ng-deep .qms-bpmn-container #rightpanel ::ng-deep .mat-tab-disabled{cursor:not-allowed}:host ::ng-deep .qms-bpmn-container #connection-container{position:absolute;top:0;right:0;bottom:0;width:398px;background:#fff;overflow-y:auto;padding:0 1rem}:host ::ng-deep .qms-bpmn-container #connection-container .shape__connect-type{padding:1rem 0}:host ::ng-deep .qms-bpmn-container #connection-container .shape__connect-type .mat-radio-button.qms-group-options{margin-bottom:1rem;border:1px solid #e0e0e0;width:100%}:host ::ng-deep .qms-bpmn-container #connection-container .mat-form-field{margin-left:8px}:host ::ng-deep .qms-bpmn-container #connection-container .mat-expansion-panel-header.mat-expanded{background-color:#eceff7;height:40px!important}:host ::ng-deep .qms-bpmn-container #connection-container .connect-link{margin-left:0;width:100%}:host ::ng-deep .qms-bpmn-container #connection-container .reload-anchor{float:right;color:gray;height:auto;margin:0;font-size:12px}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__select-label{font-size:16px;font-family:Open Sans;font-weight:600}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__label{font-size:14px;font-family:Open Sans;font-weight:600}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__item-card{border:1px solid #e0e0e0;padding:10px 0;display:flex;align-items:center;border-radius:4px}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__item-card .qms-list-item.mat-2-line.image-item{height:auto}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__item-card .qms-list-item-content{padding:0!important;margin:0}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__item-card .qms-list-item-content .wrap-image{background:transparent;margin-right:0}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__item-card .connection-icon{height:1.5rem}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__item-card .shape-connect__content{width:80%}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__item-card .item-card__delete-btn{margin-left:auto}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__item-card .link-title{word-break:break-word}:host ::ng-deep .qms-bpmn-container .mat-icon{color:#000}:host ::ng-deep .qms-bpmn-container .title{font-size:16px;font-weight:700}:host ::ng-deep .qms-bpmn-container #toolbarpanel{position:relative;top:0;bottom:0;left:0;right:0;margin-bottom:16px;height:50px;width:100%}:host ::ng-deep .qms-bpmn-container #paperpanel{position:relative;top:0;bottom:0;left:0;right:0;height:400px;width:100%}:host ::ng-deep .qms-bpmn-container #stencilpanel{position:relative;top:0;bottom:0;left:0;right:0;height:150px;width:100%}:host ::ng-deep .qms-bpmn-container #toolbar-container{position:relative;top:0;bottom:0;right:0;width:100%;height:100%}:host ::ng-deep .qms-bpmn-container #paper-container{position:relative;top:0;bottom:0;left:0;right:0;width:100%;height:inherit}:host ::ng-deep .qms-bpmn-container #inspector-container{position:relative;top:0;right:0;bottom:0;width:100%;background:#fff}:host ::ng-deep .qms-bpmn-container #stencil-container{position:absolute;top:0;bottom:0;left:0;right:0;width:1174px;height:inherit}:host ::ng-deep .qms-bpmn-container #statusbar-container{position:absolute;left:0;right:0;bottom:0;height:25px}:host ::ng-deep .qms-bpmn-container #panel-stencil-container{position:absolute;left:0;right:0;bottom:0;height:150px;overflow-x:auto;overflow-y:hidden;background-image:url(\"data:image/png;base64,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\");background-repeat:repeat;transition:all .5s ease-in-out 0s}:host ::ng-deep .qms-bpmn-container #panel-stencil-container .mat-expansion-panel-header-title{color:#fff}:host ::ng-deep .qms-bpmn-container #panel-stencil-container .joint-theme-default{background:none}:host ::ng-deep .qms-bpmn-container #panel-stencil-container .mat-expansion-indicator:after{color:#fff;transform:rotate(-135deg)}:host ::ng-deep .qms-bpmn-container #panel-stencil-container .mat-expansion-panel-header{min-width:1224px;max-width:100%}:host ::ng-deep .qms-bpmn-container #panel-stencil-container .joint-stencil>.content{width:1200px}:host ::ng-deep .qms-bpmn-container #toolbar-container{left:0;color:#fff;position:absolute}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .group>.group-label{font-size:15px;text-align:center;border:none;background:#eceff7;height:40px;line-height:40px;color:#303046;box-shadow:0 2px 0 0 rgba(0,0,0,.2);margin-bottom:10px;left:0;padding:5px 0}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .group.closed>.group-label{background:#eceff7;height:40px;line-height:40px}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list-item:nth-child(odd){background:#ecefff;background:-webkit-gradient(left,#ecefff 0,#fafafa 100%);background:linear-gradient(270deg,#91a1c9 0,#fafafa);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#ECEFFF\",endColorstr=\"#3571b0\",GradientType=0)}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list-item:nth-child(2n){background:#ecefff;background:-webkit-gradient(left,#ecefff 0,#fafafa 100%);background:linear-gradient(270deg,#91a1c9 0,#fafafa);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#ECEFFF\",endColorstr=\"#3571b0\",GradientType=0)}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list-item .list-item:nth-child(odd){background:#eceff7;background:-webkit-gradient(left,#eceff7 0,#eceff7 100%);background:linear-gradient(270deg,#eceff7 0,#eceff7);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#eceff7\",endColorstr=\"#eceff7\",GradientType=0)}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list-item .list-item:nth-child(2n){background:#eceff7;background:-webkit-gradient(left,#eceff7 0,#eceff7 100%);background:linear-gradient(270deg,#eceff7 0,#eceff7);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#eceff7\",endColorstr=\"#eceff7\",GradientType=0)}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list-item{border-radius:10px;box-shadow:0 1px 1px 1px rgba(0,0,0,.2)}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn label{color:#7f8c8d}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .btn-list-add{position:relative;left:110px;background:#5799da;border:2px solid #0a468e}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .btn-list-add,:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .btn-list-del{background:#5799da;height:25px}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn textarea{width:350px;max-width:350px}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn input[type=color],:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn input[type=range]{width:171px}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list{line-height:.5}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list .select{margin-top:5px}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list .units,:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list label,:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list output{text-align:end;margin-right:4px;margin-top:16px}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list-item input{width:50%;float:right}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list-item .input-wrapper input{width:70%;float:none}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn input{width:55%}:host ::ng-deep .qms-bpmn-container .range-field{height:40px;margin-bottom:15px}:host ::ng-deep .qms-bpmn-container .joint-paper-scroller{overflow:hidden}"]
+                template: "<div class=\"qms-bpmn-container\">\n  <div id=\"bpmn\" class=\"bpmn__editor\">\n    <div id=\"toolbarpanel\">\n      <div *ngIf=\"editMode !== flowchartViewMode.View\" id=\"toolbar-container\" [class.disabled]=\"isDisableToolbar()\">\n      </div>\n    </div>\n    <div id=\"leftpanel\" class=\"full-screen-bpmn-editor_panel\">\n      <div id=\"paperpanel\" class=\"full-screen-bpmn-editor_paperpanel\">\n        <div id=\"paper-container\"></div>\n      </div>\n      <div id=\"stencilpanel\">\n        <mat-expansion-panel *ngIf=\"editMode !== flowchartViewMode.View\" id=\"panel-stencil-container\"\n          [expanded]=\"expandedPanel\" (click)=\"expandPanel()\">\n          <mat-expansion-panel-header>\n            <mat-panel-title> </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"stencil-container\"></div>\n        </mat-expansion-panel>\n      </div>\n    </div>\n    <div id=\"rightpanel\" class=\"full-screen-bpmn-editor_panel\">\n      <mat-tab-group mat-stretch-tabs mat-align-tabs=\"center\" (selectedTabChange)=\"onTabChange($event)\"\n        [(selectedIndex)]=\"selectedTabIndex\">\n        <mat-tab [label]=\"LANG.BPMN.PROPERTIES\" id=\"qmsckeditor_bpmn_properties\">\n          <div id=\"inspector-container\"></div>\n        </mat-tab>\n        <mat-tab [label]=\"LANG.BPMN.CONNECTION\" id=\"qmsckeditor_bpmn_connection\" [disabled]=\"disabledConnectionTab\">\n          <mat-expansion-panel id=\"qmsckeditor_bpmn_connection_panel\" [expanded]=\"true\" (opened)=\"(true)\"\n            (closed)=\"(false)\" hideToggle style=\"position: relative;height: 100%;\" *ngIf=\"isSelectedView()\">\n            <div id=\"connection-container\" *ngIf=\"isShowConnectType()\">\n              <!--Connection to shape properties-->\n              <div class=\"shape__connect-type\" *ngIf=\"!QMSBPMNConfig.showShapeConnectionValue\">\n                <h3 class=\"shape-connect__select-label\">{{ LANG.BPMN.CHOOSE_CONNECTION_TYPE }}</h3>\n                <mat-radio-group [(ngModel)]=\"selectedValue\" name=\"connectType\"\n                  (ngModelChange)=\"selectConnectType($event)\" aria-label=\"Select an option\" class=\"mt-3\">\n                  <div *ngFor=\"let type of QMSBPMNConfig.connectTypes\">\n                    <mat-radio-button [value]=\"type.value\" qms-group-options color=\"default\" *ngIf=\"type.canConnect\">\n                      <span class=\"text-label title\">{{ type.viewValue }}</span>\n                      <small class=\"text-help\">{{ type.description }}</small>\n                    </mat-radio-button>\n                  </div>\n                </mat-radio-group>\n              </div>\n              <!--Shape selected value-->\n              <div *ngIf=\"shapeModel && QMSBPMNConfig.showShapeConnectionValue && editMode !== flowchartViewMode.View\"\n                class=\"ml-4 mr-4 mt-2\">\n                <ng-container *ngIf=\"shapeModel.shape?.connectionTypeId === shapeFlowChartConnectionType.Activity\">\n                  <span class=\"shape-connect__label\"> {{ LANG.BPMN.CONNECTION_TYPE.CONNECTED_ACTIVITY }}</span>\n                  <mat-card class=\"col-12 col-md-12 mt-2\">\n                    <div class=\"row\">\n                      <div class=\"col-9 title\" style=\"word-wrap: break-word\">\n                        {{ shapeModel.description.title }}\n                      </div>\n                      <div class=\"col-1\" style=\"cursor: pointer\">\n                        <mat-icon (click)=\"openActivity()\">edit</mat-icon>\n                      </div>\n                      <div class=\"col-1\" style=\"cursor: pointer\">\n                        <mat-icon (click)=\"deleteConnection(shapeModel.shape.connectionTypeId)\">close</mat-icon>\n                      </div>\n                    </div>\n                  </mat-card>\n                </ng-container>\n                <ng-container *ngIf=\"shapeModel.shape?.connectionTypeId !== shapeFlowChartConnectionType.Activity\">\n                  <span class=\"shape-connect__label\"> {{ QMSBPMNConfig.shapeConnectLabel }}</span>\n                  <mat-form-field appearance=\"fill\" class=\"mt-3 connect-link\"\n                    *ngIf=\"shapeModel.relatedItem.itemType == relatedItemType.document\" qms-form qms-select-input>\n                    <mat-label *ngIf=\"!QMSBPMNConfig.isAnchorLoading\">{{\n                      LANG.BPMN.CHOOSE_ANCHOR_IN_TEXT\n                      }}</mat-label>\n                    <mat-label *ngIf=\"QMSBPMNConfig.isAnchorLoading\">\n                      <div class=\"d-flex align-items-center\">\n                        <span>{{ LANG.LOADING }}</span>\n                        <mat-spinner class=\"spinner\" diameter=\"20\"></mat-spinner>\n                      </div>\n                    </mat-label>\n                    <mat-select [(ngModel)]=\"anchorValue\" name=\"anchorType\" qms-select\n                      (ngModelChange)=\"changeShapeAnchor($event)\" panelClass=\"connection-size select-tiny-margin\"\n                      disableOptionCentering>\n                      <mat-option *ngFor=\"let anchor of anchors\" [value]=\"anchor.anchorValue\">\n                        {{ anchor.viewValue }}\n                      </mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                  <button *ngIf=\"shapeModel.relatedItem.itemType == relatedItemType.document\"\n                    (click)=\"reloadAnchorDocument()\" type=\"button\" qms-btn-text class=\"reload-anchor\"\n                    [class.disabled]=\"QMSBPMNConfig.isAnchorLoading\">\n                    <mat-icon>refresh</mat-icon> {{ LANG.BPMN.RELOAD_ANCHORS }}\n                  </button>\n                  <mat-form-field class=\"connect-link\" appearance=\"fill\" style=\"margin-left: 0px;\"\n                    [ngStyle]=\"{ 'margin-top': shapeModel.relatedItem.itemType != relatedItemType.document ? '0px' : '15px' }\"\n                    qms-form qms-select-input>\n                    <mat-label>{{ LANG.BPMN.CONNECTION_TYPE.OPTION_FOR_OPENING }}</mat-label>\n                    <mat-select [(ngModel)]=\"targetValue\" name=\"processTargetType\" qms-select\n                      (ngModelChange)=\"changeShapeTartget($event)\" panelClass=\"connection-size select-tiny-margin\"\n                      disableOptionCentering>\n                      <mat-option *ngFor=\"let target of targets\" [value]=\"target.value\">\n                        {{ target.viewValue }}\n                      </mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                  <div class=\"shape-connect__item-card mt-2\">\n                    <ng-container\n                      *ngIf=\"shapeModel.shape?.connectionTypeId === shapeFlowChartConnectionType.Link, else notLinkConnection\">\n                      <div>\n                        <mat-icon>link</mat-icon>\n                      </div>\n                      <div class=\"shape-connect__content\">\n                        <div class=\"col-12 title link-title\">\n                          {{ shapeModel.link.link }}\n                        </div>\n                      </div>\n                    </ng-container>\n                    <ng-template #notLinkConnection>\n                      <qms-list-item type=\"image-square\">\n                        <mat-icon *ngIf=\"shapeModel.relatedItem.SVGIcon\" leading-icon type=\"image-square\"\n                          [svgIcon]=\"shapeModel.relatedItem.SVGIcon\"></mat-icon>\n                        <mat-icon *ngIf=\"shapeModel.relatedItem.matIcon\" leading-icon \n                          type=\"image-square\">{{shapeModel.relatedItem.matIcon}}</mat-icon>\n                        <div qms-list-header>\n                          <div qms-line type=\"subtitle\" class=\"search__option-name\">\n                            <div *ngIf=\"shapeModel.relatedItem.parentName\" class=\"caption\">\n                              {{ shapeModel.relatedItem.parentName }}\n                            </div>\n                            <span class=\"cursor\">{{ shapeModel.relatedItem.itemName }}</span>\n                          </div>\n                        </div>\n                        <div qms-line color=\"default-subtitle\"\n                          *ngIf=\"\n                                                          (shapeModel.relatedItem.itemType === relatedItemType.document ||\n                                                          shapeModel.relatedItem.itemType === relatedItemType.process || \n                                                          shapeModel.relatedItem.itemType === relatedItemType.processInterconnected)\">\n                          <ng-container *ngIf=\"shapeModel.relatedItem.displayId\">\n                            ID: {{ shapeModel.relatedItem.displayId }}\n                            {{ shapeModel.relatedItem.statusName ? ', ' + shapeModel.relatedItem.statusName : ''}}\n                          </ng-container>\n                        </div>\n                        <div qms-line color=\"default-subtitle\"\n                          *ngIf=\"shapeModel.relatedItem.itemType === relatedItemType.compliance && \n                            shapeModel.relatedItem.breadcrumbs && \n                            shapeModel.relatedItem.breadcrumbs.length > 0\">\n                          <qms-breadcrumb\n                              class=\"breadcrumb-container\"\n                              type=\"table\"\n                              numDisplayItem=\"2\"\n                              [nodes]=\"shapeModel.relatedItem.breadcrumbs\">\n                          </qms-breadcrumb>\n                        </div>\n                      </qms-list-item>\n                    </ng-template>\n                    <button type=\"button\" qms-btn-icon color=\"light\" class=\"item-card__delete-btn\"\n                      (click)=\"deleteConnection(shapeModel.shape.connectionTypeId)\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </mat-expansion-panel>\n        </mat-tab>\n      </mat-tab-group>\n    </div>\n  </div>\n</div>",
+                styles: [":host ::ng-deep .qms-bpmn-container .bpmn__editor{width:100%;height:100%}:host ::ng-deep .qms-bpmn-container #leftpanel{float:left;width:calc(100% - 400px);height:550px}:host ::ng-deep .qms-bpmn-container #rightpanel{float:right;width:400px;height:550px;border:solid;border-width:0 1px 1px 0}:host ::ng-deep .qms-bpmn-container #rightpanel .units{font-size:12px}:host ::ng-deep .qms-bpmn-container #rightpanel .connection-wrapper{padding-bottom:1.34375em}:host ::ng-deep .qms-bpmn-container #rightpanel .connection-wrapper .mat-card-wrapper{padding-right:0}:host ::ng-deep .qms-bpmn-container #rightpanel .connection-wrapper .connection-content{display:flex;justify-content:space-between}:host ::ng-deep .qms-bpmn-container #rightpanel ::ng-deep .mat-tab-group{height:100%}:host ::ng-deep .qms-bpmn-container #rightpanel ::ng-deep .mat-tab-disabled{cursor:not-allowed}:host ::ng-deep .qms-bpmn-container #connection-container{position:absolute;top:0;right:0;bottom:0;width:398px;background:#fff;overflow-y:auto;padding:0 1rem}:host ::ng-deep .qms-bpmn-container #connection-container .shape__connect-type{padding:1rem 0}:host ::ng-deep .qms-bpmn-container #connection-container .shape__connect-type .mat-radio-button.qms-group-options{margin-bottom:1rem;border:1px solid #e0e0e0;width:100%}:host ::ng-deep .qms-bpmn-container #connection-container .mat-form-field{margin-left:8px}:host ::ng-deep .qms-bpmn-container #connection-container .mat-expansion-panel-header.mat-expanded{background-color:#eceff7;height:40px!important}:host ::ng-deep .qms-bpmn-container #connection-container .connect-link{margin-left:0;width:100%}:host ::ng-deep .qms-bpmn-container #connection-container .reload-anchor{float:right;color:gray;height:auto;margin:0;font-size:12px}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__select-label{font-size:16px;font-family:Open Sans;font-weight:600}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__label{font-size:14px;font-family:Open Sans;font-weight:600}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__item-card{border:1px solid #e0e0e0;padding:10px 0;display:flex;align-items:center;border-radius:4px}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__item-card .qms-list-item.mat-2-line.image-item{height:auto}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__item-card .qms-list-item-content{padding:0!important;margin:0}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__item-card .qms-list-item-content .wrap-image{background:transparent;margin-right:0}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__item-card .connection-icon{height:1.5rem}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__item-card .shape-connect__content{width:80%}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__item-card .item-card__delete-btn{margin-left:auto}:host ::ng-deep .qms-bpmn-container #connection-container .shape-connect__item-card .link-title{word-break:break-word}:host ::ng-deep .qms-bpmn-container .mat-icon{color:#000}:host ::ng-deep .qms-bpmn-container .title{font-size:16px;font-weight:700}:host ::ng-deep .qms-bpmn-container #toolbarpanel{position:relative;top:0;bottom:0;left:0;right:0;margin-bottom:16px;height:50px;width:100%}:host ::ng-deep .qms-bpmn-container #paperpanel{position:relative;top:0;bottom:0;left:0;right:0;height:400px;width:100%}:host ::ng-deep .qms-bpmn-container #stencilpanel{position:relative;top:0;bottom:0;left:0;right:0;height:150px;width:100%}:host ::ng-deep .qms-bpmn-container #toolbar-container{position:relative;top:0;bottom:0;right:0;width:100%;height:100%}:host ::ng-deep .qms-bpmn-container #paper-container{position:relative;top:0;bottom:0;left:0;right:0;width:100%;height:inherit}:host ::ng-deep .qms-bpmn-container #inspector-container{position:relative;top:0;right:0;bottom:0;width:100%;background:#fff}:host ::ng-deep .qms-bpmn-container #stencil-container{position:absolute;top:0;bottom:0;left:0;right:0;width:1174px;height:inherit}:host ::ng-deep .qms-bpmn-container #statusbar-container{position:absolute;left:0;right:0;bottom:0;height:25px}:host ::ng-deep .qms-bpmn-container #panel-stencil-container{position:absolute;left:0;right:0;bottom:0;height:150px;overflow-x:auto;overflow-y:hidden;background-image:url(\"data:image/png;base64,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\");background-repeat:repeat;transition:all .5s ease-in-out 0s}:host ::ng-deep .qms-bpmn-container #panel-stencil-container .mat-expansion-panel-header-title{color:#fff}:host ::ng-deep .qms-bpmn-container #panel-stencil-container .joint-theme-default{background:none}:host ::ng-deep .qms-bpmn-container #panel-stencil-container .mat-expansion-indicator:after{color:#fff;transform:rotate(-135deg)}:host ::ng-deep .qms-bpmn-container #panel-stencil-container .mat-expansion-panel-header{min-width:1224px;max-width:100%}:host ::ng-deep .qms-bpmn-container #panel-stencil-container .joint-stencil>.content{width:1200px}:host ::ng-deep .qms-bpmn-container #toolbar-container{left:0;color:#fff;position:absolute}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .group>.group-label{font-size:15px;text-align:center;border:none;background:#eceff7;height:40px;line-height:40px;color:#303046;box-shadow:0 2px 0 0 rgba(0,0,0,.2);margin-bottom:10px;left:0;padding:5px 0}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .group.closed>.group-label{background:#eceff7;height:40px;line-height:40px}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list-item:nth-child(odd){background:#ecefff;background:-webkit-gradient(left,#ecefff 0,#fafafa 100%);background:linear-gradient(270deg,#91a1c9 0,#fafafa);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#ECEFFF\",endColorstr=\"#3571b0\",GradientType=0)}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list-item:nth-child(2n){background:#ecefff;background:-webkit-gradient(left,#ecefff 0,#fafafa 100%);background:linear-gradient(270deg,#91a1c9 0,#fafafa);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#ECEFFF\",endColorstr=\"#3571b0\",GradientType=0)}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list-item .list-item:nth-child(odd){background:#eceff7;background:-webkit-gradient(left,#eceff7 0,#eceff7 100%);background:linear-gradient(270deg,#eceff7 0,#eceff7);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#eceff7\",endColorstr=\"#eceff7\",GradientType=0)}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list-item .list-item:nth-child(2n){background:#eceff7;background:-webkit-gradient(left,#eceff7 0,#eceff7 100%);background:linear-gradient(270deg,#eceff7 0,#eceff7);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#eceff7\",endColorstr=\"#eceff7\",GradientType=0)}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list-item{border-radius:10px;box-shadow:0 1px 1px 1px rgba(0,0,0,.2)}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn label{color:#7f8c8d}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .btn-list-add{position:relative;left:110px;background:#5799da;border:2px solid #0a468e}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .btn-list-add,:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .btn-list-del{background:#5799da;height:25px}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn textarea{width:350px;max-width:350px}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn input[type=color],:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn input[type=range]{width:171px}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list{line-height:.5}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list .select{margin-top:5px}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list .units,:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list label,:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list output{text-align:end;margin-right:4px;margin-top:16px}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list-item input{width:50%;float:right}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn .list-item .input-wrapper input{width:70%;float:none}:host ::ng-deep .qms-bpmn-container .joint-inspector.joint-theme-bpmn input{width:55%}:host ::ng-deep .qms-bpmn-container .range-field{height:40px;margin-bottom:15px}:host ::ng-deep .qms-bpmn-container .joint-paper-scroller{overflow:hidden}:host ::ng-deep .qms-bpmn-container .breadcrumb-container .qms-breadcrumb-item{cursor:inherit;line-height:16px;font-size:.75rem;color:black(.6);font-weight:400;line-height:22px;margin:0}"]
             },] }
 ];
 QMSBPMNComponent.ctorParameters = () => [
@@ -30082,7 +30107,8 @@ QmsBPMNModule.decorators = [
                     MatInputModule,
                     MatSelectModule,
                     QMSListModule,
-                    MatCardModule
+                    MatCardModule,
+                    QMSBreadcrumbModule
                 ],
                 exports: [
                     QMSBPMNComponent
@@ -33570,6 +33596,10 @@ class SelectDepartmentTreeComponent {
         this.resultSelected = newLocation;
         this.onValueChangeEvent.emit(this.resultSelected);
     }
+    setDestinationLocation(node, type) {
+        const treeNode = this.treeControl.dataNodes.find(item => item.id === node.id && item.parentId === node.parentId);
+        this.moveToLocation(treeNode, type);
+    }
     onCheckNode(node, fireEventCheckNode = true) {
         if (this.config.moveLocationMode)
             return;
@@ -33839,8 +33869,9 @@ class SelectDepartmentTreeComponent {
         }
     }
     onCheckItemSearchResult(item) {
-        if (item.disabled)
+        if (item.disabled || this.config.moveLocationMode) {
             return;
+        }
         this.checkListSelectionSearch.toggle(item);
         if (this.config.isSelectOne) {
             this.checkListSelectionSearch.deselect(...this.checkListSelectionSearch.selected.filter(x => x.id != item.id));
@@ -34150,12 +34181,12 @@ class SelectDepartmentTreeComponent {
 SelectDepartmentTreeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-select-department-tree',
-                template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\n  <div class=\"input-select-department\">\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\n        <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\n        <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\n          <mat-icon>search</mat-icon>\n        </button>\n        <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\n          *ngIf=\"getLoading$.value\"></mat-progress-spinner>\n        <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\n          <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </mat-form-field>\n    </form>\n    <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\n      class=\"sub-text ms-1 fw500\">\n      {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\n    </div>\n    <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\n      class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end  align-items-center\">\n      <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\n        [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\n        [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\n        qms-group-options>\n        <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\n      </mat-slide-toggle>\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\n        (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\n        position=\"top\">\n        <mat-icon>arrow_back</mat-icon>\n      </button>\n      <button class=\"btn-arrow\" [@inOutAnimation]\n        *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\n        (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\n        position=\"top\">\n        <mat-icon>arrow_forward</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div [@inOutAnimation]\n    *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\n    class=\"header-view-tree\">\n    <div class=\"header-view header-title\">\n      {{config.headerName.treeName}}\n    </div>\n    <div class=\"header-view header-title\">\n      {{config.headerName.externalName}}\n    </div>\n  </div>\n  <mat-divider class=\"mx-auto\"></mat-divider>\n  <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\n    minHeight: height\n  }\" class=\"tree-department-wrapper\">\n    <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\n      <div class=\"tree-view-main h100\">\n        <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\n          class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\n          <!-- Checkbox all root node -->\n          <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\n            [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\n            color=\"default\" label=\"none\" class=\"checkbox-all\">\n            <span class=\"text-label \">{{LANG.CHOOSE_ALL}}</span>\n            <span>(<b>{{treeControl.dataNodes.length}}</b>)</span>\n          </mat-checkbox>\n          <mat-divider class=\"mx-auto\"></mat-divider>\n        </div>\n        <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\n                    'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\n                    'select-department-tree': true\n                  }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\n          <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\n            <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\n              [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\n                              'w-100': config.isSelectOne,\n                              'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\n                              'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\n                              'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\n                              'node-loading': node.isLoading,\n                              'move-location-mode': config.moveLocationMode\n                        }\">\n              <div class=\"node-expand-area\">\n                <button class=\"btn-toggle\" qms-btn-icon color=\"light\"\n                  [disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\n                  (click)=\"onExpandNode(node)\" *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\n                  <mat-icon>\n                    {{ treeControl.isExpanded(node) ? node?.expandIcon?.collapse : node?.expandIcon?.expand }}\n                  </mat-icon>\n                </button>\n                <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\n              </div>\n              <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\n                [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\n                <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\n                  {{node.externalName || ''}}\n                </span>\n              </div>\n            </div>\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n        <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\n        </ng-container>\n      </div>\n    </div>\n    <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\n      height: height\n    }\" class=\"qms-view-search-result\">\n      <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n        class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\n        <div class=\"header-title\">\n          <span qms-elipsify mode=\"dark\" position=\"top\">\n            {{config.headerName.resultSearchName}}\n          </span>\n        </div>\n        <div class=\"header-title\">\n          <span qms-elipsify mode=\"dark\" position=\"top\">\n            {{config.headerName.externalName}}\n          </span>\n        </div>\n      </div>\n      <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\n      <div class=\"qms-view-search-result__wrapper\"\n        [class.active-external]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n        *ngIf=\"!!resultSearch.length && !getLoading$.value\">\n        <div class=\"\">\n          <mat-checkbox [@inOutAnimation]\n            [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\n            [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\n            color=\"default\" label=\"none\" class=\"checkbox-all\"\n            (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\n            <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n            <span>(<b>{{resultSearch.length}}</b>)</span>\n          </mat-checkbox>\n        </div>\n        <div [@inOutAnimation] [@listAnimation]\n          [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\n          <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\n            position=\"top\" *ngFor=\"let item of resultSearch\"\n            (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n            [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\n            <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading\" [disabled]=\"item.disabled\"\n              (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n              [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\n            </mat-checkbox>\n            <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\n              <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\n            </div>\n            <div class=\"result-item__content\">\n              <div class=\"item-result-content-wraper\">\n                <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\n                <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\n                  [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\n                  [nodes]=\"item.location\">\n                </qms-breadcrumb>\n                <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\n                  <span qms-elipsify mode=\"dark\" position=\"top\"\n                    class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\n                </div>\n              </div>\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\n                <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\n        <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n      </div>\n      <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\n        class=\"mx-auto\"></mat-divider>\n      <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\n        [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\n        [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\n        [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\n      </qms-paginator>\n    </div>\n  </div>\n\n  <!-- Template for Checkbox -->\n  <ng-template #showCheckboxTemplate let-node=\"node\">\n    <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\n      [disabled]=\"node.isLoading || node.disabled\" [checked]=\"checkListSelection.isSelected(node)\"\n      (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\n      <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\n        [src]=\"node.itemIconSvg\" />\n      <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n        class=\"material-icons-outlined type-icon\"></span>\n      <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n        node.itemMatIcon }}\n      </span>\n      <div class=\"node-text\" [ngStyle]=\"{\n        maxWidth: (maxWidthNode - 20*node.level)+ 'px'\n      }\">\n        <span qms-elipsify [mode]=\"'dark'\" position=\"top\" class=\"text-name cursor-pointer ml5 123\"\n          [ngClass]=\"{ disabled: node.disabled}\">{{ node.name}}\n        </span>\n      </div>\n    </mat-checkbox>\n  </ng-template>\n\n  <!-- Template node without checkbox -->\n  <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\n    <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\n      <div class=\"node-info\">\n        <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n          class=\"material-icons-outlined type-icon\"></span>\n        <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n          node.itemMatIcon }}\n        </span>\n        <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\n      </div>\n      <div class=\"node-state\">\n        <mat-icon [class.disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\n          *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\n        <button class=\"move-location-btn\" *ngIf=\"config.moveLocationMode && !checkListSelection.isSelected(node)\"\n          qms-btn-icon [matMenuTriggerFor]=\"menu\">\n          <mat-icon>swap_vert</mat-icon>\n        </button>\n        <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\n          <button (click)=\"moveToLocation(node, 'sibling')\" mat-menu-item>\n            <span>{{LANG.PLACE_NEXT_TO}}</span>\n          </button>\n          <button (click)=\"moveToLocation(node, 'child')\" mat-menu-item>\n            <span>{{LANG.PLACE_UNDER}}</span>\n          </button>\n        </mat-menu>\n      </div>\n    </div>\n  </ng-template>\n</div>\n\n<ng-template #noResult>\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n    <path\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n      fill=\"#0163B3\" />\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n  </svg>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n  <div [ngStyle]=\"{\n    'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\n  }\" class=\"qms-loading-container\">\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n      <div class=\"qms-loader__wrapper\">\n        <div class=\"row-loader\">\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template mask overlay -->\n<ng-template #maskOverlay>\n  <div class=\"mask-overlay\">\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\" color=\"primary\"></mat-spinner>\n  </div>\n</ng-template>\n\n<!-- Loading spinner -->\n<ng-template #loadingSpinner>\n  <div class=\"qms-spinner center\">\n    <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\n  </div>\n</ng-template>",
+                template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\r\n  <div class=\"input-select-department\">\r\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\r\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\r\n        <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\r\n        <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\r\n          <mat-icon>search</mat-icon>\r\n        </button>\r\n        <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\r\n          *ngIf=\"getLoading$.value\"></mat-progress-spinner>\r\n        <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\r\n          <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </mat-form-field>\r\n    </form>\r\n    <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\r\n      class=\"sub-text ms-1 fw500\">\r\n      {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\r\n    </div>\r\n    <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\r\n      class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end  align-items-center\">\r\n      <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\r\n        [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\r\n        [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\r\n        qms-group-options>\r\n        <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n      </mat-slide-toggle>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\r\n        (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n      <button class=\"btn-arrow\" [@inOutAnimation]\r\n        *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\r\n        (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_forward</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div [@inOutAnimation]\r\n    *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\r\n    class=\"header-view-tree\">\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.treeName}}\r\n    </div>\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.externalName}}\r\n    </div>\r\n  </div>\r\n  <mat-divider class=\"mx-auto\"></mat-divider>\r\n  <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\r\n    minHeight: height\r\n  }\" class=\"tree-department-wrapper\">\r\n    <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\r\n      <div class=\"tree-view-main h100\">\r\n        <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\r\n          class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\r\n          <!-- Checkbox all root node -->\r\n          <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\r\n            [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\">\r\n            <span class=\"text-label \">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{treeControl.dataNodes.length}}</b>)</span>\r\n          </mat-checkbox>\r\n          <mat-divider class=\"mx-auto\"></mat-divider>\r\n        </div>\r\n        <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\r\n                    'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\r\n                    'select-department-tree': true\r\n                  }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\r\n          <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\r\n            <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\r\n              [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\r\n                              'w-100': config.isSelectOne,\r\n                              'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\r\n                              'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\r\n                              'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\r\n                              'node-loading': node.isLoading,\r\n                              'move-location-mode': config.moveLocationMode\r\n                        }\">\r\n              <div class=\"node-expand-area\">\r\n                <button class=\"btn-toggle\" qms-btn-icon color=\"light\"\r\n                  [disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n                  (click)=\"onExpandNode(node)\" *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\r\n                  <mat-icon>\r\n                    {{ treeControl.isExpanded(node) ? node?.expandIcon?.collapse : node?.expandIcon?.expand }}\r\n                  </mat-icon>\r\n                </button>\r\n                <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\r\n              </div>\r\n              <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n                [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\r\n                <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\r\n                  {{node.externalName || ''}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </cdk-virtual-scroll-viewport>\r\n        <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\r\n      height: height\r\n    }\" class=\"qms-view-search-result\">\r\n      <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n        class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.resultSearchName}}\r\n          </span>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.externalName}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\r\n      <div class=\"qms-view-search-result__wrapper\" [ngClass]=\"{\r\n        'active-external': config.modeView === MODE_VIEW_ENUM.ExternalView}\"\r\n        *ngIf=\"!!resultSearch.length && !getLoading$.value\">\r\n        <div *ngIf=\"!config.moveLocationMode\">\r\n          <mat-checkbox [@inOutAnimation]\r\n            [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n            [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n            (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n            <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{resultSearch.length}}</b>)</span>\r\n          </mat-checkbox>\r\n        </div>\r\n        <div [@inOutAnimation] [@listAnimation]\r\n          [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\r\n          <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\r\n            position=\"top\" *ngFor=\"let item of resultSearch\"\r\n            (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n            [ngClass]=\"{'active': checkListSelectionSearch.isSelected(item), 'no-checkbox': config.moveLocationMode}\"\r\n            class=\"result-item user-select-none\" matRipple>\r\n            <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading && !config.moveLocationMode\"\r\n              [disabled]=\"item.disabled\"\r\n              (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n              [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\r\n            </mat-checkbox>\r\n            <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\r\n              <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\r\n            </div>\r\n            <div class=\"result-item__content\">\r\n              <div class=\"item-result-content-wraper\">\r\n                <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\r\n                <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\r\n                  [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\r\n                  [nodes]=\"item.location\">\r\n                </qms-breadcrumb>\r\n                <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\r\n                  <span qms-elipsify mode=\"dark\" position=\"top\"\r\n                    class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\r\n                </div>\r\n              </div>\r\n              <div *ngIf=\"config.moveLocationMode\">\r\n                <button class=\"move-location-btn\" qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n                  <mat-icon>swap_vert</mat-icon>\r\n                </button>\r\n                <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n                  <button (click)=\"setDestinationLocation(item, 'sibling')\" mat-menu-item>\r\n                    <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n                  </button>\r\n                  <button (click)=\"setDestinationLocation(item, 'child')\" mat-menu-item>\r\n                    <span>{{LANG.PLACE_UNDER}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n              </div>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\r\n                <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n        <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n      </div>\r\n      <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\r\n        class=\"mx-auto\"></mat-divider>\r\n      <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\r\n        [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\r\n        [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\r\n        [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\r\n      </qms-paginator>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Template for Checkbox -->\r\n  <ng-template #showCheckboxTemplate let-node=\"node\">\r\n    <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\r\n      [disabled]=\"node.isLoading || node.disabled\" [checked]=\"checkListSelection.isSelected(node)\"\r\n      (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\r\n      <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\r\n        [src]=\"node.itemIconSvg\" />\r\n      <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n        class=\"material-icons-outlined type-icon\"></span>\r\n      <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n        node.itemMatIcon }}\r\n      </span>\r\n      <div class=\"node-text\" [ngStyle]=\"{\r\n        maxWidth: (maxWidthNode - 20*node.level)+ 'px'\r\n      }\">\r\n        <span qms-elipsify [mode]=\"'dark'\" position=\"top\" class=\"text-name cursor-pointer ml5 123\"\r\n          [ngClass]=\"{ disabled: node.disabled}\">{{ node.name}}\r\n        </span>\r\n      </div>\r\n    </mat-checkbox>\r\n  </ng-template>\r\n\r\n  <!-- Template node without checkbox -->\r\n  <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\r\n    <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\r\n      <div class=\"node-info\">\r\n        <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n          class=\"material-icons-outlined type-icon\"></span>\r\n        <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n          node.itemMatIcon }}\r\n        </span>\r\n        <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\r\n      </div>\r\n      <div class=\"node-state\">\r\n        <mat-icon [class.disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n          *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\r\n        <button class=\"move-location-btn\" *ngIf=\"config.moveLocationMode && !checkListSelection.isSelected(node)\"\r\n          qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n          <mat-icon>swap_vert</mat-icon>\r\n        </button>\r\n        <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n          <button (click)=\"moveToLocation(node, 'sibling')\" mat-menu-item>\r\n            <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n          </button>\r\n          <button (click)=\"moveToLocation(node, 'child')\" mat-menu-item>\r\n            <span>{{LANG.PLACE_UNDER}}</span>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #noResult>\r\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n    <path\r\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\r\n      fill=\"#0163B3\" />\r\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\r\n  </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div [ngStyle]=\"{\r\n    'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\r\n  }\" class=\"qms-loading-container\">\r\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\r\n      <div class=\"qms-loader__wrapper\">\r\n        <div class=\"row-loader\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Template mask overlay -->\r\n<ng-template #maskOverlay>\r\n  <div class=\"mask-overlay\">\r\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\" color=\"primary\"></mat-spinner>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Loading spinner -->\r\n<ng-template #loadingSpinner>\r\n  <div class=\"qms-spinner center\">\r\n    <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\r\n  </div>\r\n</ng-template>",
                 animations: [
                     AnimationTreeDepartment
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:rgba(0,0,0,.6);font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:first-child{padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:rgba(0,0,0,.12)}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:rgba(34,33,33,.1);position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:rgba(0,0,0,.08)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled{color:rgba(0,0,0,.38)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:rgba(0,0,0,.38);cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:active .move-location-btn,.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:hover .move-location-btn{display:block}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:rgba(0,0,0,.1)}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:first-child{padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:calc(100% - 44px);overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:first-child){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active,.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover{background:linear-gradient(0deg,rgba(1,99,178,.12),rgba(1,99,178,.12)),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:600;color:rgba(0,0,0,.8)}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions{margin-bottom:0;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:rgba(0,0,0,.6);font-weight:400;font-size:14px;max-width:250px}.qms-select-department-tree-container ::ng-deep .mat-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;grid-column-gap:4px;-moz-column-gap:4px;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,hsla(0,0%,91%,0),hsla(0,0%,89%,0) 40%,hsla(0,0%,89%,.5) 50%,hsla(0,0%,89%,0) 60%,hsla(0,0%,89%,0));animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}.qms-select-department-tree-container .mat-spinner circle,.qms-select-department-tree-container ::ng-deep .mat-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width:600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span,.qms-select-department-tree-container .text-name{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}.qms-select-department-tree-container ::ng-deep .qms-paginator{margin-top:0}.move-location-btn{display:none;color:var(--primary)}::ng-deep .move-location-menu .mat-menu-item:hover{color:var(--primary)}"]
+                styles: ["@charset \"UTF-8\";@font-face{font-family:icomoon;src:url(../assets/fonts/icomoon.eot?aghldx);src:url(../assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(../assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(../assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(../assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\uE91B\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\uE922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\uE923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\uE924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\uE925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\uE926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\uE927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\uE928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\uE929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\uE92A\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\uE92B\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\uE92C\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\uE92D\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\uE92E\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\uE92F\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\uE930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\uE931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\uE932\"}.icon-add-tooltip:before{content:\"\uE933\"}.icon-admin:before{content:\"\uE934\"}.icon-annual-cycle:before{content:\"\uE935\"}.icon-assignment-repete:before{content:\"\uE936\"}.icon-barrier-add:before{content:\"\uE937\"}.icon-barrier-edit:before{content:\"\uE938\"}.icon-barrier-view:before{content:\"\uE939\"}.icon-button-group:before{content:\"\uE93A\"}.icon-chemical-manager:before{content:\"\uE93B\"}.icon-chronic-health-hazard .path1:before{content:\"\uE93C\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\uE93D\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\uE93E\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\uE93F\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\uE940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\uE941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\uE942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\uE943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\uE944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\uE945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\uE946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\uE947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\uE948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\uE949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\uE94A\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\uE94B\"}.icon-corrosive .path1:before{content:\"\uE94C\";color:#323232}.icon-corrosive .path2:before{content:\"\uE94D\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\uE94E\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\uE94F\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\uE950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\uE951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\uE952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\uE953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\uE954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\uE955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\uE956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\uE957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\uE958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\uE959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\uE95A\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\uE95B\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\uE95C\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\uE95D\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\uE95E\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\uE95F\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\uE960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\uE961\"}.icon-database-sds:before{content:\"\uE962\"}.icon-description-add:before{content:\"\uE963\"}.icon-description-edit:before{content:\"\uE964\"}.icon-description-view:before{content:\"\uE965\";color:#666}.icon-document-read .path1:before{content:\"\uE966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\uE967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\uE968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\uE969\"}.icon-expired-off:before{content:\"\uE96A\"}.icon-expired-on:before{content:\"\uE96B\"}.icon-explosive .path1:before{content:\"\uE96C\";color:#e32730}.icon-explosive .path2:before{content:\"\uE96D\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\uE96E\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\uE96F\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\uE970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\uE971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\uE972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\uE973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\uE974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\uE975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\uE976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\uE977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\uE978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\uE979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\uE97A\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\uE97B\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\uE97C\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\uE97D\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\uE97E\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\uE97F\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\uE980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\uE981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\uE982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\uE983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\uE984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\uE985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\uE986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\uE987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\uE988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\uE989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\uE98A\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\uE98B\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\uE98C\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\uE98D\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\uE98E\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\uE98F\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\uE990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\uE991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\uE992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\uE993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\uE994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\uE995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\uE996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\uE997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\uE998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\uE999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\uE99A\"}.icon-file-pdf:before{content:\"\uE99B\"}.icon-file-pdf-verified .path1:before{content:\"\uE99C\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\uE99D\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\uE99E\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\uE99F\"}.icon-filter-alt:before{content:\"\uE9A0\"}.icon-flammable .path1:before{content:\"\uE9A1\";color:#323232}.icon-flammable .path2:before{content:\"\uE9A2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\uE9A3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\uE9A4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\uE9A5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\uE9A6\";color:#323232}.icon-health-hazard .path2:before{content:\"\uE9A7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\uE9A8\"}.icon-location:before{content:\"\uE9A9\"}.icon-measure-add:before{content:\"\uE9AA\"}.icon-measure-edit:before{content:\"\uE9AB\"}.icon-measure-view:before{content:\"\uE9AC\";color:#666}.icon-messages:before{content:\"\uE9AD\"}.icon-monitoring:before{content:\"\uE9AE\";color:#666}.icon-move:before{content:\"\uE9AF\"}.icon-oxidizing .path1:before{content:\"\uE9B0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\uE9B1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\uE9B2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\uE9B3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\uE9B4\"}.icon-process-area-open:before{content:\"\uE9B5\"}.icon-process-linked .path1:before{content:\"\uE9B6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\uE9B7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\uE9B8\"}.icon-search-in-file:before{content:\"\uE9B9\"}.icon-sort-ascending:before{content:\"\uE9BA\"}.icon-sort-descending:before{content:\"\uE9BB\"}.icon-subscript:before{content:\"\uE9BC\"}.icon-superscript:before{content:\"\uE9BD\"}.icon-syncronice-favorites:before{content:\"\uE9BE\"}.icon-system-settings:before{content:\"\uE9BF\"}.icon-view-three-outlined:before{content:\"\uE9C0\"}.icon-workplace-safety:before{content:\"\uE9C1\"}.icon-checklist:before{content:\"\uE900\"}.icon-department-document .path1:before{content:\"\uE901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\uE902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\uE903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\uE904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\uE905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\uE906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\uE907\"}.icon-dropdown-folder .path1:before{content:\"\uE908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\uE909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\uE90A\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\uE90B\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\uE90C\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\uE90D\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\uE90E\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\uE90F\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\uE910\"}.icon-folder-open:before{content:\"\uE911\"}.icon-keyboard_arrow_down:before{content:\"\uE912\"}.icon-keyboard_arrow_up:before{content:\"\uE913\"}.icon-local-document .path1:before{content:\"\uE914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\uE915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\uE916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\uE917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\uE918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\uE919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\uE91A\"}.icon-regional-document .path1:before{content:\"\uE91C\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\uE91D\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\uE91E\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\uE91F\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\uE920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\uE921\";margin-left:-1em;color:#662e0d}.qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:rgba(0,0,0,.6);font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:first-child{padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:rgba(0,0,0,.12)}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:rgba(34,33,33,.1);position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:rgba(0,0,0,.08)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled{color:rgba(0,0,0,.38)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:rgba(0,0,0,.38);cursor:default!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:active .move-location-btn,.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:hover .move-location-btn{display:block}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:rgba(0,0,0,.1)}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:first-child{padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:100%;overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:first-child){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover{background:linear-gradient(0deg,rgba(1,99,178,.12),rgba(1,99,178,.12)),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover .move-location-btn{display:block}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active{background:linear-gradient(0deg,rgba(1,99,178,.12),rgba(1,99,178,.12)),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.no-checkbox{grid-template-columns:1fr}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:600;color:rgba(0,0,0,.8)}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions{margin-bottom:0;grid-column-gap:2px;-moz-column-gap:2px;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:rgba(0,0,0,.6);font-weight:400;font-size:14px;max-width:250px}.qms-select-department-tree-container ::ng-deep .mat-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;grid-column-gap:4px;-moz-column-gap:4px;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,hsla(0,0%,91%,0),hsla(0,0%,89%,0) 40%,hsla(0,0%,89%,.5) 50%,hsla(0,0%,89%,0) 60%,hsla(0,0%,89%,0));animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}.qms-select-department-tree-container .mat-spinner circle,.qms-select-department-tree-container ::ng-deep .mat-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width:600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span,.qms-select-department-tree-container .text-name{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}.qms-select-department-tree-container ::ng-deep .qms-paginator{margin-top:0}.move-location-btn{display:none;color:var(--primary)}::ng-deep .move-location-menu .mat-menu-item:hover{color:var(--primary)}"]
             },] }
 ];
 SelectDepartmentTreeComponent.ctorParameters = () => [
@@ -34890,6 +34921,8 @@ class QMSSelectAccessDialogComponent {
         if (this.options.length === 1) {
             this.dialogRef.updateSize(this.dialogData.sizeUpdateDefault);
             this.optionSelect.setValue(this.options[0].type);
+            const event$ = new MatSelectChange(null, this.options[0].type);
+            this.onSelectionTypeChange(event$);
         }
     }
     _initResultAccess() {
@@ -35282,7 +35315,7 @@ class QMSSelectAccessDialogComponent {
 QMSSelectAccessDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-select-access-dialog',
-                template: "<div qms-dialog-container-v2 class=\"select-access-dialog-container\">\n  <div qms-dialog-header>\n    <div class=\"access-dialog-header mb-2\">\n      <span class=\"header-title\">{{dialogData.titleDialog || LANG.SELECT_ACCESS}}</span>\n      <button matDialogClose class=\"btn-close-dialog\" qms-btn-icon color=\"light\">\n        <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div [class.active]=\"optionSelect.value !== null\" qms-dialog-content class=\"qms-dialog-content\">\n    <div class=\"access-dialog-wraper\">\n      <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option  w-100\"\n        appearance=\"fill\">\n        <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\n        <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\n          disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\n\n          <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\n            {{ LANG[item.displayName] }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"body-dialog-container\">\n        <!-- Person Access -->\n        <div class=\"option-selected-content\">\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n            <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n              <mat-dialog-content>\n                <div class=\"group-filter-person-option\">\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n                    class=\"w-100\" appearance=\"fill\">\n                    <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\n                      disableOptionCentering>\n                      <mat-select-trigger>\n                        {{personForm.controls['userGroup'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"userGroupFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\n                          noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option mode=\"dark\" class=\"opt-check-icon\"\n                        *ngFor=\"let item of filteredSearchTextBox.userGroup.value\" [value]=\"item\">\n                        <span qms-elipsify position=\"top\" mode=\"dark\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['userGroup'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span [@inOutAnimation] (click)=\"personForm.get('userGroup').setValue('')\" class=\"pointer \"\n                      matSuffix aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                  <!-- input field department filter person -->\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n                    class=\"w-100 input-select-option\" qms-form qms-select-input>\n                    <mat-label>{{LANG.DEPARTMENT_UNIT}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\n                      formControlName=\"department\">\n                      <mat-select-trigger>\n                        {{personForm.controls['department'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"departmentFilter\"\n                          [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\" noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option class=\"opt-check-icon\" *ngFor=\"let item of filteredSearchTextBox.department.value\"\n                        [value]=\"item\">\n                        <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['department'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span (click)=\"setFormControlValue(['recursive','department'], [false,''])\" [@inOutAnimation]\n                      class=\"pointer\" matSuffix aria-label=\"Clear\"\n                      *ngIf=\"personForm.get('department').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                </div>\n\n                <mat-slide-toggle [@inOutAnimation] *ngIf=\"personForm.controls['department'].value\"\n                  class=\"w-100 slide-toggle\" formControlName=\"recursive\" color=\"default\" qms-group-options>\n                  <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"w-100\" appearance=\"fill\" qms-form qms-search-field>\n                  <input matInput appearance=\"off\" [placeholder]=\"LANG.SEARCH_WITH_NAME\" formControlName=\"keyword\"\n                    type=\"text\" autocomplete=\"off\" />\n                  <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\n                    (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                  <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                    diameter=\"20\"></mat-progress-spinner>\n                  <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\n                    class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\n                    aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n                    <button qms-btn-icon color=\"light\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </span>\n                </mat-form-field>\n                <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\n                  {{LANG.FILTER}}\n                </button>\n              </mat-dialog-content>\n\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && personFiltered.length && !dialogData.modeSelectOnePerson\"\n                                  [disabled]=\"isDisabledSelectAll(OPTION_ENUM.PERSON)\"\n                      #checkPerson class=\"w-100 mb-1 checkbox-all\"\n                      (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\n                      [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\n                      color=\"default\" qms-group-options>\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} </span>\n                      <span>(<b>{{personFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value; then loading\">\n                  </ng-container>\n                  <div [@inOutAnimation] *ngIf=\"personFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div class=\"item  mt-1\" [@inOutAnimation]\n                      *ngFor=\"let employee of personFiltered; trackBy: trackByFn\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!personFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingPerson *ngIf=\"getPerson$.value.length > 10\" [length]=\"getPerson$.value.length\"\n                    [numHidden]=\"0\" [pageSize]=\"getPerson$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)' [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </form>\n          </ng-container>\n\n          <!-- UserGroup Access -->\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n            <div>\n              <mat-dialog-content>\n                <form (submit)=\"onFilterUserGroup()\">\n                  <mat-form-field class=\"w-100\" qms-form qms-search-field>\n                    <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n                           placeholder=\"User group\" />\n                    <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n                            matSuffix>\n                      <mat-icon>search</mat-icon>\n                    </button>\n                    <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                                          diameter=\"20\"></mat-progress-spinner>\n                    <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value && !getLoading$.value\" matSuffix qms-input-clear>\n                      <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </div>\n                  </mat-form-field>\n                </form>\n              </mat-dialog-content>\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && (userGroupFiltered.length && !dialogData.modeSelectOneUserGroup)\"\n                                  [disabled]=\"isDisabledSelectAll(OPTION_ENUM.USER_GROUP)\"\n                      #checkUserGroup class=\"w-100 checkbox-all mb-1\" color=\"default\"\n                      [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\n                      [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\n                      (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\n                      qms-group-options>\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n                      <span>(<b>{{userGroupFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value;then loading\">\n                  </ng-container>\n                  <div *ngIf=\"userGroupFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of userGroupFiltered\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ? itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!userGroupFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingUserGroup class=\"my-1\" *ngIf=\"getUserGroup$.value.length > 10 \"\n                    [length]=\"getUserGroup$.value.length\" [numHidden]=\"0\" [pageSize]=\"getUserGroup$.value.pageSize\"\n                    [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPaginatorEvent($event, OPTION_ENUM.USER_GROUP)'\n                    [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </div>\n          </ng-container>\n\n          <!-- Department Access -->\n          <ng-container\n            *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && getLoading$.value; then loading\"></ng-container>\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && !getLoading$.value\"\n            class=\"person-access\">\n            <qms-select-department-tree #tree [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\" [maxWidthNode]=\"dialogData.maxWidthNode\"\n              (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\n              (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n              (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\n              (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\n            </qms-select-department-tree>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"optionSelect.value !== null\" class=\"result-wrapper\">\n      <div class=\"result-selected-container\">\n        <div [@inOutAnimation] *ngIf=\"(options.length === 1) || (options.length > 1 && optionSelect.value !== null)\"\n          class=\"header-title result-header\">\n          <span>\n            {{\n            dialogData.titleResult || LANG.RESULTS}}\n            <span *ngIf=\"options.length === 1 && hasItemSelected()\">\n              ({{getResultTabActive().length}})\n            </span>\n          </span>\n        </div>\n        <div class=\"result-body\">\n          <!-- Result Person  -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\n          </ng-container>\n          <!-- Result User group -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\n          </ng-container>\n          <!-- Result Department -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data: resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n  <mat-divider class=\"mx-auto\"></mat-divider>\n  <div qms-dialog-footer class=\"confirm__button__groups\" [class.none-option]=\"optionSelect.value === null\">\n    <button *ngIf=\"optionSelect.value !== null\" [disabled]=\"!hasItemSelected()\" class=\"btn-add\"\n      [class.qms-btn-disabled]=\"!hasItemSelected()\" [mat-dialog-close]=\"resultAccess\" qms-btn>\n      <span>{{LANG.ADD}}</span>\n    </button>\n    <button qms-btn-text mat-dialog-close>\n      {{LANG.CANCEL}}\n    </button>\n  </div>\n</div>\n\n<!-- Template -->\n<ng-template #noResult>\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n    <path\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n      fill=\"#0163B3\" />\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n  </svg>\n</ng-template>\n\n<!-- Template list chip -->\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\n  <mat-chip-list [@inOutAnimation] *ngIf=\"data?.length\" class=\"panel__item qms-scrollbar\">\n    <div [@inOutAnimation_2] *ngFor=\"let item of data; let i = index\">\n      <mat-chip (click)=\"onScollToNodeTreeDepartment(item)\" [@updateItemAnimation]\n        *qmsContentChanges=\"item.children?.length\" class=\"chip-item-result\"  qms-chip [removable]=\"true\">\n        <span qms-chip-body>\n          <span [qms-tool-tip]=\"generateTooltip(item)\"\n                position=\"top\" mode=\"dark\" class=\"text-label\">\n            {{item.name}}\n            <span *ngIf=\"item.subName\">({{ item.subName }})</span>\n          </span>\n          <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children && item?.isGroup\">\n            {{item.children.length}}/{{item.childCount}}\n          </span>\n        </span>\n        <mat-icon *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\" class=\"remove-chip-icon\">cancel</mat-icon>\n        <mat-icon *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\" [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n      </mat-chip>\n    </div>\n  </mat-chip-list>\n</ng-template>\n\n<!-- Template result with collapse -->\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\n  <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\n    <mat-expansion-panel-header>\n      <div class=\"title-content\">\n        <div class=\"qms-list-text\">\n          <div qms-line color=\"default-subtitle\">{{title}}\n            <span class=\"fw-600\">\n              ({{data?.length}})\n            </span>\n          </div>\n        </div>\n      </div>\n    </mat-expansion-panel-header>\n    <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\n    </ng-container>\n  </mat-expansion-panel>\n</ng-template>\n\n<!-- Template row without checkbox -->\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\n    <div class=\"item-content\">\n      <div class=\"text-label\">\n        <span class=\"text-label label-item fs-14 \">\n          {{ item.name }}\n        </span>\n        <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n      </div>\n      <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n    </div>\n    <div class=\"item-state\">\n      <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template checkbox  -->\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <mat-checkbox [disabled]=\"!allowRemove(type, item)\" [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\" class=\"w-100\" color=\"default\"\n    qms-group-options>\n    <div class=\"text-label\">\n      <span class=\"text-label label-item fs-14 \">\n        {{ item.name }}\n      </span>\n      <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n    </div>\n    <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n  </mat-checkbox>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n  <div class=\"qms-loading-container\">\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n      <div class=\"qms-loader__wrapper\">\n        <div class=\"row-loader\">\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n",
+                template: "<div qms-dialog-container-v2 class=\"select-access-dialog-container\">\n  <div qms-dialog-header>\n    <div class=\"access-dialog-header mb-2\">\n      <span class=\"header-title\">{{dialogData.titleDialog || LANG.SELECT_ACCESS}}</span>\n      <button matDialogClose class=\"btn-close-dialog\" qms-btn-icon color=\"light\">\n        <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div [class.active]=\"optionSelect.value !== null\" qms-dialog-content class=\"qms-dialog-content\">\n    <div class=\"access-dialog-wraper\">\n      <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option  w-100\"\n        appearance=\"fill\">\n        <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\n        <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\n          disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\n\n          <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\n            {{ LANG[item.displayName] }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"body-dialog-container\">\n        <!-- Person Access -->\n        <div class=\"option-selected-content\">\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n            <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n              <mat-dialog-content>\n                <div class=\"group-filter-person-option\">\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n                    class=\"w-100\" appearance=\"fill\">\n                    <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\n                      disableOptionCentering>\n                      <mat-select-trigger>\n                        {{personForm.controls['userGroup'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"userGroupFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\n                          noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option mode=\"dark\" class=\"opt-check-icon\"\n                        *ngFor=\"let item of filteredSearchTextBox.userGroup.value\" [value]=\"item\">\n                        <span qms-elipsify position=\"top\" mode=\"dark\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['userGroup'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span [@inOutAnimation] (click)=\"personForm.get('userGroup').setValue('')\" class=\"pointer \"\n                      matSuffix aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                  <!-- input field department filter person -->\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n                    class=\"w-100 input-select-option\" qms-form qms-select-input>\n                    <mat-label>{{LANG.DEPARTMENT_UNIT}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\n                      formControlName=\"department\">\n                      <mat-select-trigger>\n                        {{personForm.controls['department'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"departmentFilter\"\n                          [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\" noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option class=\"opt-check-icon\" *ngFor=\"let item of filteredSearchTextBox.department.value\"\n                        [value]=\"item\">\n                        <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['department'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span (click)=\"setFormControlValue(['recursive','department'], [false,''])\" [@inOutAnimation]\n                      class=\"pointer\" matSuffix aria-label=\"Clear\"\n                      *ngIf=\"personForm.get('department').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                </div>\n\n                <mat-slide-toggle [@inOutAnimation] *ngIf=\"personForm.controls['department'].value\"\n                  class=\"w-100 slide-toggle\" formControlName=\"recursive\" color=\"default\" qms-group-options>\n                  <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"w-100\" appearance=\"fill\" qms-form qms-search-field>\n                  <input matInput appearance=\"off\" [placeholder]=\"LANG.SEARCH_WITH_NAME\" formControlName=\"keyword\"\n                    type=\"text\" autocomplete=\"off\" />\n                  <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\n                    (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                  <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                    diameter=\"20\"></mat-progress-spinner>\n                  <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\n                    class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\n                    aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n                    <button qms-btn-icon color=\"light\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </span>\n                </mat-form-field>\n                <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\n                  {{LANG.FILTER}}\n                </button>\n              </mat-dialog-content>\n\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && personFiltered.length && !dialogData.modeSelectOnePerson\"\n                      [disabled]=\"isDisabledSelectAll(OPTION_ENUM.PERSON)\" #checkPerson class=\"w-100 mb-1 checkbox-all\"\n                      (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\n                      [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\n                      color=\"default\" qms-group-options>\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} </span>\n                      <span>(<b>{{personFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value; then loading\">\n                  </ng-container>\n                  <div [@inOutAnimation] *ngIf=\"personFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div class=\"item  mt-1\" [@inOutAnimation]\n                      *ngFor=\"let employee of personFiltered; trackBy: trackByFn\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!personFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingPerson\n                    *ngIf=\"getPerson$.value.length > 10\" [length]=\"getPerson$.value.length\" [numHidden]=\"0\"\n                    [pageSize]=\"getPerson$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)' [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </form>\n          </ng-container>\n\n          <!-- UserGroup Access -->\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n            <div>\n              <mat-dialog-content>\n                <form (submit)=\"onFilterUserGroup()\">\n                  <mat-form-field class=\"w-100\" qms-form qms-search-field>\n                    <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n                      placeholder=\"User group\" />\n                    <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n                      matSuffix>\n                      <mat-icon>search</mat-icon>\n                    </button>\n                    <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                      diameter=\"20\"></mat-progress-spinner>\n                    <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value && !getLoading$.value\" matSuffix\n                      qms-input-clear>\n                      <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </div>\n                  </mat-form-field>\n                </form>\n              </mat-dialog-content>\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && (userGroupFiltered.length && !dialogData.modeSelectOneUserGroup)\"\n                      [disabled]=\"isDisabledSelectAll(OPTION_ENUM.USER_GROUP)\" #checkUserGroup\n                      class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\n                      [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\n                      (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\n                      qms-group-options>\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n                      <span>(<b>{{userGroupFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value;then loading\">\n                  </ng-container>\n                  <div *ngIf=\"userGroupFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of userGroupFiltered\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ? itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!userGroupFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingUserGroup class=\"my-1\"\n                    *ngIf=\"getUserGroup$.value.length > 10 \" [length]=\"getUserGroup$.value.length\" [numHidden]=\"0\"\n                    [pageSize]=\"getUserGroup$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.USER_GROUP)' [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </div>\n          </ng-container>\n\n          <!-- Department Access -->\n          <ng-container\n            *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && getLoading$.value; then loading\"></ng-container>\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && !getLoading$.value\"\n            class=\"person-access\">\n            <qms-select-department-tree #tree [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\"\n              [maxWidthNode]=\"dialogData.maxWidthNode\" (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\n              (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n              (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\n              (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\n            </qms-select-department-tree>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"optionSelect.value !== null\" class=\"result-wrapper\">\n      <div class=\"result-selected-container\">\n        <div [@inOutAnimation] *ngIf=\"(options.length === 1) || (options.length > 1 && optionSelect.value !== null)\"\n          class=\"header-title result-header\">\n          <span>\n            {{\n            dialogData.titleResult || LANG.RESULTS}}\n            <span *ngIf=\"options.length === 1 && hasItemSelected()\">\n              ({{getResultTabActive().length}})\n            </span>\n          </span>\n        </div>\n        <div class=\"result-body\">\n          <!-- Result Person  -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\n          </ng-container>\n          <!-- Result User group -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\n          </ng-container>\n          <!-- Result Department -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data: resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n  <mat-divider class=\"mx-auto\"></mat-divider>\n  <div qms-dialog-footer class=\"confirm__button__groups\" [class.none-option]=\"optionSelect.value === null\">\n    <button *ngIf=\"optionSelect.value !== null\" [disabled]=\"!hasItemSelected()\" class=\"btn-add\"\n      [class.qms-btn-disabled]=\"!hasItemSelected()\" [mat-dialog-close]=\"resultAccess\" qms-btn>\n      <span>{{LANG.ADD}}</span>\n    </button>\n    <button qms-btn-text mat-dialog-close>\n      {{LANG.CANCEL}}\n    </button>\n  </div>\n</div>\n\n<!-- Template -->\n<ng-template #noResult>\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n    <path\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n      fill=\"#0163B3\" />\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n  </svg>\n</ng-template>\n\n<!-- Template list chip -->\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\n  <mat-chip-list [@inOutAnimation] *ngIf=\"data?.length\" class=\"panel__item qms-scrollbar\">\n    <div [@inOutAnimation_2] *ngFor=\"let item of data; let i = index\">\n      <mat-chip (click)=\"onScollToNodeTreeDepartment(item)\" [@updateItemAnimation]\n        *qmsContentChanges=\"item.children?.length\" class=\"chip-item-result\" qms-chip [removable]=\"true\">\n        <span qms-chip-body>\n          <span [qms-tool-tip]=\"generateTooltip(item)\" position=\"top\" mode=\"dark\" class=\"text-label\">\n            {{item.name}}\n            <span *ngIf=\"item.subName\">({{ item.subName }})</span>\n          </span>\n          <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children && item?.isGroup\">\n            {{item.children.length}}/{{item.childCount}}\n          </span>\n        </span>\n        <mat-icon *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\"\n          class=\"remove-chip-icon\">cancel</mat-icon>\n        <mat-icon *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\"\n          [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n      </mat-chip>\n    </div>\n  </mat-chip-list>\n</ng-template>\n\n<!-- Template result with collapse -->\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\n  <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\n    <mat-expansion-panel-header>\n      <div class=\"title-content\">\n        <div class=\"qms-list-text\">\n          <div qms-line color=\"default-subtitle\">{{title}}\n            <span class=\"fw-600\">\n              ({{data?.length}})\n            </span>\n          </div>\n        </div>\n      </div>\n    </mat-expansion-panel-header>\n    <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\n    </ng-container>\n  </mat-expansion-panel>\n</ng-template>\n\n<!-- Template row without checkbox -->\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\n    <div class=\"item-content\">\n      <div class=\"text-label\">\n        <span class=\"text-label label-item fs-14 \">\n          {{ item.name }}\n        </span>\n        <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n      </div>\n      <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n    </div>\n    <div class=\"item-state\">\n      <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template checkbox  -->\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <mat-checkbox [disabled]=\"!allowRemove(type, item)\" [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\"\n    class=\"w-100\" color=\"default\" qms-group-options>\n    <div class=\"text-label\">\n      <span class=\"text-label label-item fs-14 \">\n        {{ item.name }}\n      </span>\n      <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n    </div>\n    <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n  </mat-checkbox>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n  <div class=\"qms-loading-container\">\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n      <div class=\"qms-loader__wrapper\">\n        <div class=\"row-loader\">\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>",
                 animations: [SelectAccessAnimationTrigger],
                 providers: [
                     {
@@ -36817,5 +36850,5 @@ QMSSelectProcessDataModule.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, 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, ModeDepartmentTreeeViewEnum, 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, PROCESS_INTERCONNECTED_ICON, PaginationSize, PopupData, ProtocolType, ProtocolTypeName, QMSAccessItem, QMSAccessPagingChangeModel, QMSAccessPagingModel, QMSAnchor, QMSAppBar, QMSAppIconModule, QMSAttachmentListDirective, QMSBPMNComponent, QMSBPMNConfig, QMSBasicTreeComponent, QMSBreadcrumb, QMSBreadcrumbDirectionIconDirective, QMSBreadcrumbItemDirective, QMSBreadcrumbModule, QMSButton, QMSButtonIcon, QMSButtonModule, QMSButtonToggle, QMSButtonToggleGroup, QMSCKEditorBaseComponent, QMSCKEditorBaseService, QMSCKEditorBpmn, QMSCKEditorBpmnApiService, QMSCKEditorBpmnComponent, QMSCKEditorBpmnTemplate, QMSCKEditorComponent, QMSCKEditorConfirmComponent, QMSCKEditorData, QMSCKEditorDialogData, 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, QMSSelectProcessDataModule, QMSSelectProcessDataTreeModule, 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_LANGUAGES, QMS_THEMES, QMS_THEME_DEFAULT, QmsAngularComponent, QmsAngularModule, QmsAngularService, QmsAppBarComponent, QmsAppBarModule, QmsBPMNModule, 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, SelectProcessDataComponent, SelectProcessDataTreeComponent, 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, SafeHtmlPipe as ɵa, SharedMaterialModule as ɵb, TreeComponent as ɵc, QMSCKEditorUploadService as ɵd, QMSTreeModule as ɵe, QMSBasicTreeComponent as ɵf, QMSCKEditorTreeService as ɵg, QMSCKEditorTemplateComponent as ɵh, QMSCKEditorCommonService as ɵi, QMSSelectProcessDocumentGlobalService as ɵj, LinkAttachmentComponent as ɵk, QMSCKEditorTooltipComponent as ɵl, QMSCKEditorTooltip as ɵm, QMSCKEditorImageMapComponent as ɵn, QMSCKEditorImageMap as ɵo, QMSCKEditorBPMNConnectionService as ɵp, QMSSelectOneGlobalService as ɵq, QMSCKEditorBpmnData as ɵr, QMSCKEditorAboutComponent as ɵs, QMSCKEditorFlowchartComponent as ɵt, BPMNLinkComponent as ɵu, ShapeLink as ɵv };
+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, COMPLIANCE_ICON, 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, 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, ModeDepartmentTreeeViewEnum, 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, PROCESS_INTERCONNECTED_ICON, PaginationSize, PopupData, ProtocolType, ProtocolTypeName, QMSAccessItem, QMSAccessPagingChangeModel, QMSAccessPagingModel, QMSAnchor, QMSAppBar, QMSAppIconModule, QMSAttachmentListDirective, QMSBPMNComponent, QMSBPMNConfig, QMSBasicTreeComponent, QMSBreadcrumb, QMSBreadcrumbDirectionIconDirective, QMSBreadcrumbItemDirective, QMSBreadcrumbModule, QMSButton, QMSButtonIcon, QMSButtonModule, QMSButtonToggle, QMSButtonToggleGroup, QMSCKEditorBaseComponent, QMSCKEditorBaseService, QMSCKEditorBpmn, QMSCKEditorBpmnApiService, QMSCKEditorBpmnComponent, QMSCKEditorBpmnTemplate, QMSCKEditorComponent, QMSCKEditorConfirmComponent, QMSCKEditorData, QMSCKEditorDialogData, 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, QMSSelectProcessDataModule, QMSSelectProcessDataTreeModule, 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_LANGUAGES, QMS_THEMES, QMS_THEME_DEFAULT, QmsAngularComponent, QmsAngularModule, QmsAngularService, QmsAppBarComponent, QmsAppBarModule, QmsBPMNModule, 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, SelectProcessDataComponent, SelectProcessDataTreeComponent, 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, SafeHtmlPipe as ɵa, SharedMaterialModule as ɵb, TreeComponent as ɵc, QMSCKEditorUploadService as ɵd, QMSTreeModule as ɵe, QMSBasicTreeComponent as ɵf, QMSCKEditorTreeService as ɵg, QMSCKEditorTemplateComponent as ɵh, QMSCKEditorCommonService as ɵi, QMSSelectProcessDocumentGlobalService as ɵj, LinkAttachmentComponent as ɵk, QMSCKEditorTooltipComponent as ɵl, QMSCKEditorTooltip as ɵm, QMSCKEditorImageMapComponent as ɵn, QMSCKEditorImageMap as ɵo, QMSCKEditorBPMNConnectionService as ɵp, QMSSelectOneGlobalService as ɵq, QMSCKEditorBpmnData as ɵr, QMSCKEditorAboutComponent as ɵs, QMSCKEditorFlowchartComponent as ɵt, BPMNLinkComponent as ɵu, ShapeLink as ɵv };
 //# sourceMappingURL=qms-angular.js.map