qms-angular 1.1.48 → 1.1.49

package/fesm2015/qms-angular.js

@@ -568,6 +568,8 @@ const en = {
         "CONFIRM_DELETE_EXISTING_CONNECTION": "You must remove existing connection before you do this action.",
         "CONFIRM_DELETE_ATTACHMENT": "Are you sure you want to delete this link?",
         "CONFIRM_DELETE_DOCUMENT_OR_PROCESS": "Are you sure you want to delete this document / process?",
+        "CONFIRM_DELETE_DEVIATION": "Are you sure you want to delete this deviation?",
+        "CONFIRM_DELETE_CHECKLIST": "Are you sure you want to delete this checklist?",
     },
     "FLOWCHART": {
         "REMOVE_ELEMENT": 'Click to remove the object',
@@ -1128,6 +1130,8 @@ const no = {
         "CONFIRM_DELETE_EXISTING_CONNECTION": "Du må fjerne den eksisterende tilkoblingen før du utfører denne handlingen.",
         "CONFIRM_DELETE_ATTACHMENT": "Er du sikker på at du vil slette denne linken?",
         "CONFIRM_DELETE_DOCUMENT_OR_PROCESS": "Er du sikker på at du vil slette dette dokumentet / prosessen?",
+        "CONFIRM_DELETE_DEVIATION": "Er du sikker på at du vil slette dette avvik?",
+        "CONFIRM_DELETE_CHECKLIST": "Er du sikker på at du vil slette dette sjekklisten?",
     },
     "FLOWCHART": {
         "REMOVE_ELEMENT": 'Klikk for å fjerne objektet',
@@ -13065,8 +13069,8 @@ function getCKEditorConfiguration(itemToolbar, LANG = null, language = 'en') {
                 '|',
                 'imageMap',
                 '|',
-                // 'qmsFlowchart',
-                // '|',
+                'qmsFlowchart',
+                '|',
                 'qmsBpmn'
             ],
             resizeOptions: [
@@ -15901,15 +15905,14 @@ class BpmnService {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
     }
-    buildDiagram(diagramTemplates, diagramTemplate, bpmnTheme, jsonContent, editMode, shapeImages, toolbarConfiguration) {
-        this.translate.getLanguageSubject$.pipe(takeUntil(this.ngUnsubscribe)).subscribe((res) => {
-            if (res) {
-                this.LANG = this.translate.getObjectLang(res);
-            }
-            if (this.LANG) {
-                this.excutedBuildDiagram(diagramTemplates, diagramTemplate, bpmnTheme, jsonContent, editMode, this.LANG, shapeImages, toolbarConfiguration);
-            }
-        });
+    buildDiagram(diagramTemplates, diagramTemplate, bpmnTheme, jsonContent, editMode, shapeImages, toolbarConfiguration, language) {
+        if (!language) {
+            this.LANG = this.translate.getObjectLang('en');
+        }
+        else {
+            this.LANG = this.translate.getObjectLang(language);
+        }
+        this.excutedBuildDiagram(diagramTemplates, diagramTemplate, bpmnTheme, jsonContent, editMode, this.LANG, shapeImages, toolbarConfiguration);
     }
     excutedBuildDiagram(diagramTemplates, diagramTemplate, bpmnTheme, jsonContent, editMode, LANG, shapeImages, toolbarConfiguration) {
         window[FlowChartConst.IS_NOT_SHOW_AGAIN] = false;
@@ -17992,6 +17995,7 @@ class QMSCKEditorBpmnComponent extends QMSCKEditorBaseComponent {
         this.shapeModel = new ShapeModel();
         this.targets = [];
         this.anchors = [];
+        this.language = 'en';
         this.id = data.id;
         this.module = data.module;
         this.entityId = data.entityId;
@@ -18005,6 +18009,7 @@ class QMSCKEditorBpmnComponent extends QMSCKEditorBaseComponent {
             this.QMSBPMNConfig.editMode = FlowchartViewMode.Edit;
             this.translate.getLanguageSubject$.pipe(takeUntil(this.ngUnsubcribe)).subscribe((res) => {
                 if (res) {
+                    this.language = res;
                     this.LANG = this.translate.getObjectLang(res);
                     this.QMSBPMNConfig.changeTemplatePopupContent = this.LANG.BPMN.CHANGE_TEMPLATE_NOTE;
                 }
@@ -18022,7 +18027,7 @@ class QMSCKEditorBpmnComponent extends QMSCKEditorBaseComponent {
             if (this.id) {
                 this.jsonContent = yield this.getJsonContent(this.id);
             }
-            this.bpmnService.buildDiagram(temlates, this.template, 'default joint-theme-bpmn', this.jsonContent, this.QMSBPMNConfig.editMode, null, ToolbarFunction$1.getToolbarConfiguration(this.LANG));
+            this.bpmnService.buildDiagram(temlates, this.template, 'default joint-theme-bpmn', this.jsonContent, this.QMSBPMNConfig.editMode, null, ToolbarFunction$1.getToolbarConfiguration(this.LANG), this.language);
             this.splitView = this.QMSBPMNConfig.showProcessDocumentTreeDataInSplitView;
             this.initConnectionTypes();
             this.initTarget();
@@ -18846,7 +18851,7 @@ QMSCKEditorBpmnComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-ckeditor-bpmn',
                 template: "<div id=\"qmsckeditor-bpmn\" class=\"qmsckeditor qmsckeditor__bpmn__container\">\n  <div id=\"qmsckeditor-load-template-header\">\n    <span id=\"qmsckeditor-bpmn-header_001\" mat-icon-button class=\"qmsckeditor button__close\" (click)=\"onCloseDialog()\">\n      <mat-icon>close</mat-icon>\n    </span>\n    <span id=\"qmsckeditor-bpmn-header_002\" mat-icon-button class=\"qmsckeditor button__done\" (click)=\"onInsertImage()\">\n      <mat-icon>done</mat-icon>\n    </span>\n    <div id=\"qmsckeditor-load-template-header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.BPMN.BUSINESS_PROCESS_MODEL_AND_NOTATION }}\n      </h2>\n    </div>\n  </div>\n  <div class=\"mask-overlay\" *ngIf=\"loadingRelatedData\">\n    <mat-spinner class=\"spinner\" diameter=\"65\"></mat-spinner>\n  </div>\n  <qms-bpmn [QMSBPMNConfig]=\"QMSBPMNConfig\" [shapeModel]=\"shapeModel\" [targets]=\"targets\" [anchors]=\"anchors\"\n    (onSelectConnectType)=\"selectConnectType($event)\" (onSaveAsTemplate)=\"saveAsTemplate($event)\"\n    (onDeleteTemplate)=\"deleteTemplate()\" (onSelectTemplate)=\"selectTemplate()\" (onResetTemplate)=\"resetTemplate()\"\n    (onGetShapeActivity)=\"getShapeActivity($event)\" (onChangeShapeTarget)=\"saveShapeTarget($event)\"\n    (onChangeShapeAnchor)=\"saveShapeAnchor($event)\" (onReloadAnchorDocumentClick)=\"reloadAnchorDocument()\"\n    (onDeleteConnection)=\"deleteConnection($event)\"></qms-bpmn>\n</div>",
-                styles: [":host ::ng-deep .qmsckeditor__bpmn__container ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .qmsckeditor__bpmn__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}"]
+                styles: [":host ::ng-deep .qmsckeditor__bpmn__container ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .qmsckeditor__bpmn__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}:host ::ng-deep .qmsckeditor__bpmn__container .joint-widget.joint-theme-default[data-type=zoomToFit]:after{display:block;content:\" \";background-color:transparent;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggc3R5bGU9InN0cm9rZTpub25lO2ZpbGwtcnVsZTpub256ZXJvO2ZpbGw6IzAwMDtmaWxsLW9wYWNpdHk6MSIgZD0iTTMgMjF2LTUuNzVoMS41djMuMTc2bDMuNy0zLjcgMS4wNzMgMS4wNzVMNS41NzQgMTkuNUg4Ljc1VjIxWm0xMi4yNSAwdi0xLjVoMy4xNzZsLTMuNjc2LTMuNjc2IDEuMDc0LTEuMDc0IDMuNjc2IDMuNjc2VjE1LjI1SDIxVjIxWk04LjE3NiA5LjI1IDQuNSA1LjU3NFY4Ljc1SDNWM2g1Ljc1djEuNUg1LjU3NEw5LjI1IDguMTc2Wm03LjY0OCAwTDE0Ljc1IDguMTc2IDE4LjQyNiA0LjVIMTUuMjVWM0gyMXY1Ljc1aC0xLjVWNS41NzRabTAgMCIvPjwvc3ZnPg==\")!important;width:50px;height:50px;background-position:7px 7px}"]
             },] }
 ];
 QMSCKEditorBpmnComponent.ctorParameters = () => [
@@ -28274,7 +28279,8 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         });
         let toolbarItems = this.qmsckPlugin.itemToolbar;
         if (this.isEnabledToggleToolbar() && this.qmsckData.toggledToolbarItems) {
-            let strToolbars = this.qmsckData.toggledToolbarItems.replace(/qmsFlowchart,/g, "");
+            // let strToolbars = this.qmsckData.toggledToolbarItems.replace(/qmsFlowchart,/g, "");
+            let strToolbars = this.qmsckData.toggledToolbarItems;
             if (!this.qmsckData.enableTemplate) {
                 strToolbars = strToolbars.replace(/qmsTemplate,/g, ""); // disable qmsTemplate if user don't have handbookAdmin Role
             }
@@ -33743,7 +33749,7 @@ 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=\"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                        }\">\n              <div class=\"node-expand-area\">\n                <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\"\n                  *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\" [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 *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\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>\n",
+                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                        }\">\n              <div class=\"node-expand-area\">\n                <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\"\n                  *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\" [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 *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\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>\n",
                 animations: [
                     AnimationTreeDepartment
                 ],
@@ -33830,6 +33836,7 @@ class SelectDepartmentPopupData {
         this.headerName = '';
         this.config = new QMSSelectDepartmentTreeConfig;
         this.hidePanelResult = false;
+        this.resultTitle = '';
     }
 }
 
@@ -34122,7 +34129,7 @@ class SelectDepartmentComponent {
 SelectDepartmentComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-select-department',
-                template: "<div class=\"qms-select-department\">\n  <div class=\"header-dialog mb-2\">\n    <span>{{popupData.headerName}}</span>\n    <button matDialogClose class=\"btn-close-dialog\" color=\"light\" qms-btn-icon>\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <div>\n    <div class=\"qms-scrollbar\">\n      <div>\n        <qms-select-department-tree #treeDepartment customClass=\"custom-department-tree\"\n          [height]=\"popupData.config.isMobile ? '38vh' : '50vh'\" [rowsSkeleton]=\"9\" [config]=\"popupData.config\"\n          (onSearchEvent)=\"onSearchEvent.emit($event)\" (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n          (onPagingSearchEvent)=\"onPagingEvent.emit($event)\" (onCheckNodeEvent)=\"onCheckNodeEvent.emit($event)\"\n          (onExpandNodeEvent)=\"onExpandNodeEvent.emit($event)\" (onLoadMoreEvent)=\"onLoadMoreEvent.emit()\"\n          (onCheckAllItemSearchEvent)=\"onCheckAllItemSearchEvent.emit($event)\"\n          (onCheckItemSearchEvent)=\"onCheckItemSearchEvent.emit($event)\"\n          (toggleIncludeChildEvent)=\"toggleIncludeChildEvent.emit($event)\">\n        </qms-select-department-tree>\n      </div>\n    </div>\n    <div class=\"line__divider\"></div>\n    <div [@heightAnimation] *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length && !popupData.hidePanelResult\" class=\" pr-0 pe-0\">\n      <div class=\"header-title\">{{LANG.RESULTS}}</div>\n      <div class=\"result-content pr-0 pe-0\">\n        <mat-chip-list class=\"panel__item qms-scrollbar\">\n          <div [@inOutAnimation_2] [id]=\"'item-result-'+item.id\" *ngFor=\"let item of treeDepartment.resultSelected\">\n            <mat-chip [@updateItemAnimation] *qmsContentChanges=\"item.children?.length\"\n              [qms-tool-tip]=\"generateTootip(item)\" position=\"top\" mode=\"dark\" qms-chip [removable]=\"true\">\n              <span (click)=\"onScrollToNode(item)\" qms-chip-body>\n                <span class=\"related__item__content_name\" #itemName>\n                  <span>{{item.name}}</span>\n                  <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && !popupData.config.lazy\">\n                    {{item.children.length}}/{{item.childCount}}\n                  </span>\n                  <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && popupData.config.lazy\">\n                    {{item.selectedChildCount || item.children.length}}/{{item.childCount}}\n                  </span>\n                </span>\n              </span>\n              <ng-container *ngIf=\"isNodeLoading(item.id)\" [ngTemplateOutlet]=\"loadingSpinner\"></ng-container>\n              <mat-icon *ngIf=\"!treeDepartment.isDisabledNode(item.id) && !isNodeLoading(item.id)\"\n                (click)=\"onRemoveNode(item)\">cancel</mat-icon>\n            </mat-chip>\n          </div>\n        </mat-chip-list>\n      </div>\n    </div>\n    <mat-divider *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length && !popupData.hidePanelResult\" class=\"mx-auto\"></mat-divider>\n    <div class=\"confirm__button__groups\">\n      <button (click)=\"onCloseDialog()\" class=\"btn-add\"\n        [disabled]=\"!resultSelected.length && !popupData.config.canAddNullResult\"\n        [class.qms-btn-disabled]=\"!resultSelected.length && !popupData.config.canAddNullResult\" qms-btn>\n        <span>{{LANG.ADD}}</span>\n        <span>\n          ({{treeDepartment.resultSelected.length}})\n        </span>\n      </button>\n      <button qms-btn-text mat-dialog-close>\n        Cancel\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Loading spinner -->\n<ng-template #loadingSpinner>\n  <div class=\"qms-spinner-wrapper\">\n    <div class=\"qms-spinner center\">\n      <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\" color=\"primary\"></mat-spinner>\n    </div>\n  </div>\n</ng-template>\n",
+                template: "<div class=\"qms-select-department\">\n  <div class=\"header-dialog mb-2\">\n    <span>{{popupData.headerName}}</span>\n    <button matDialogClose class=\"btn-close-dialog\" color=\"light\" qms-btn-icon>\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <div>\n    <div class=\"qms-scrollbar\">\n      <div>\n        <qms-select-department-tree #treeDepartment customClass=\"custom-department-tree\"\n          [height]=\"popupData.config.isMobile ? '38vh' : '50vh'\" [rowsSkeleton]=\"9\" [config]=\"popupData.config\"\n          (onSearchEvent)=\"onSearchEvent.emit($event)\" (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n          (onPagingSearchEvent)=\"onPagingEvent.emit($event)\" (onCheckNodeEvent)=\"onCheckNodeEvent.emit($event)\"\n          (onExpandNodeEvent)=\"onExpandNodeEvent.emit($event)\" (onLoadMoreEvent)=\"onLoadMoreEvent.emit()\"\n          (onCheckAllItemSearchEvent)=\"onCheckAllItemSearchEvent.emit($event)\"\n          (onCheckItemSearchEvent)=\"onCheckItemSearchEvent.emit($event)\"\n          (toggleIncludeChildEvent)=\"toggleIncludeChildEvent.emit($event)\">\n        </qms-select-department-tree>\n      </div>\n    </div>\n    <div class=\"line__divider\"></div>\n    <div [@heightAnimation]\n      *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length && !popupData.hidePanelResult\" class=\" pr-0 pe-0\">\n      <div class=\"header-title\">{{popupData.resultTitle || LANG.RESULT}}</div>\n      <div class=\"result-content pr-0 pe-0\">\n        <mat-chip-list class=\"panel__item qms-scrollbar\">\n          <div [@inOutAnimation_2] [id]=\"'item-result-'+item.id\" *ngFor=\"let item of treeDepartment.resultSelected\">\n            <mat-chip [@updateItemAnimation] *qmsContentChanges=\"item.children?.length\"\n              [qms-tool-tip]=\"generateTootip(item)\" position=\"top\" mode=\"dark\" qms-chip [removable]=\"true\">\n              <span (click)=\"onScrollToNode(item)\" qms-chip-body>\n                <span class=\"related__item__content_name\" #itemName>\n                  <span>{{item.name}}</span>\n                  <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && !popupData.config.lazy\">\n                    {{item.children.length}}/{{item.childCount}}\n                  </span>\n                  <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && popupData.config.lazy\">\n                    {{item.selectedChildCount || item.children.length}}/{{item.childCount}}\n                  </span>\n                </span>\n              </span>\n              <ng-container *ngIf=\"isNodeLoading(item.id)\" [ngTemplateOutlet]=\"loadingSpinner\"></ng-container>\n              <mat-icon *ngIf=\"!treeDepartment.isDisabledNode(item.id) && !isNodeLoading(item.id)\"\n                (click)=\"onRemoveNode(item)\">cancel</mat-icon>\n            </mat-chip>\n          </div>\n        </mat-chip-list>\n      </div>\n    </div>\n    <mat-divider *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length && !popupData.hidePanelResult\"\n      class=\"mx-auto\"></mat-divider>\n    <div class=\"confirm__button__groups\">\n      <button (click)=\"onCloseDialog()\" class=\"btn-add\"\n        [disabled]=\"!resultSelected.length && !popupData.config.canAddNullResult\"\n        [class.qms-btn-disabled]=\"!resultSelected.length && !popupData.config.canAddNullResult\" qms-btn>\n        <span>{{LANG.ADD}}</span>\n        <span>\n          ({{treeDepartment.resultSelected.length}})\n        </span>\n      </button>\n      <button qms-btn-text mat-dialog-close>\n        {{LANG.CANCEL}}\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Loading spinner -->\n<ng-template #loadingSpinner>\n  <div class=\"qms-spinner-wrapper\">\n    <div class=\"qms-spinner center\">\n      <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\" color=\"primary\"></mat-spinner>\n    </div>\n  </div>\n</ng-template>",
                 providers: [
                     {
                         provide: MAT_CHECKBOX_DEFAULT_OPTIONS,