qms-angular 1.1.35 → 1.1.37

package/fesm2015/qms-angular.js

@@ -238,7 +238,10 @@ const en = {
         "SELECT_VIDEO_IMAGE": "Select video image",
         "DOCUMENT_HEADER": "Document information",
         "ADD_IMAGE": "Add image",
-        "IMAGE_INFO": "Image Info"
+        "IMAGE_INFO": "Image Info",
+        "ADD_A_FILE": "Add a file",
+        "EXTENSION_IS_NOT_SUPPORTED": "The extension is not supported.",
+        "ACCEPT_MP4_ONLY": "Not support this video type. Accept MP4 only."
     },
     "ABOUT": {
         "ABOUT_CKEDITOR": "About CKEditor",
@@ -631,7 +634,10 @@ const no = {
         "SELECT_VIDEO_IMAGE": "Velg videobilde",
         "DOCUMENT_HEADER": "Dokumentinformasjon",
         "ADD_IMAGE": "Legg til et bilde",
-        "IMAGE_INFO": "Bilde Info"
+        "IMAGE_INFO": "Bilde Info",
+        "ADD_A_FILE": "Legg til en fil",
+        "EXTENSION_IS_NOT_SUPPORTED": "Utvidelsen støttes ikke.",
+        "ACCEPT_MP4_ONLY": "Støtter ikke denne videotypen.Godta kun MP4."
     },
     "ABOUT": {
         "ABOUT_CKEDITOR": "Om CKEditor",
@@ -962,7 +968,7 @@ class QMSComment {
 QMSComment.decorators = [
     { type: Component, args: [{
                 selector: 'qms-comment',
-                template: "<div class=\"qms-comment\" *ngFor=\"let item of sourceLog; let i = index\">\r\n  <mat-card-header *ngIf=\"!item.isDelete\">\r\n    <mat-card-subtitle>{{ item.user }} {{ item.date }} </mat-card-subtitle>\r\n  </mat-card-header>\r\n  <mat-card-content>\r\n    <div\r\n      qms-scrollbar\r\n      *ngIf=\"!item.isEdit && !item.isDelete\"\r\n      class=\"content\"\r\n      [ngClass]=\"{ secondary: 0 != i % 2 }\"\r\n      [innerHTML]=\"showContent(item.content)\"\r\n    ></div>\r\n    <div class=\"content delete-action-wrap\" *ngIf=\"item.isDelete\">\r\n      <i>{{ LANG.DELETE_MESSAGE_COMMENT }}</i>\r\n      <button qms-btn-text class=\"btn-action\" (click)=\"regretItem(item)\" *ngIf=\"item.isDraft\">\r\n        {{ LANG.REGRET }}\r\n      </button>\r\n    </div>\r\n    <mat-form-field *ngIf=\"item.isEdit && !item.isDelete\" qms-form-textarea>\r\n      <textarea\r\n        qms-scrollbar\r\n        class=\"textarea-comment\"\r\n        matInput\r\n        cdkTextareaAutosize\r\n        cdkAutosizeMinRows=\"1\"\r\n        cdkAutosizeMaxRows=\"5\"\r\n        [(ngModel)]=\"item.editedContent\"\r\n      ></textarea>\r\n    </mat-form-field>\r\n  </mat-card-content>\r\n  <mat-card-actions *ngIf=\"item.isDraft && !item.isEdit && !item.isDelete\">\r\n    <a class=\"btn-action\" (click)=\"editContent(item)\"> {{ LANG.EDIT }} </a>\r\n    <a class=\"btn-action ml-20\" (click)=\"removeItem(item)\">{{ LANG.DELETE }}</a>\r\n  </mat-card-actions>\r\n  <mat-card-actions *ngIf=\"item.isEdit\" class=\"edit-action-wrap\">\r\n    <button qms-btn (click)=\"checkInvalidContent(item) || saveEditedContent(item)\" [disabled]=\"checkInvalidContent(item)\">{{ LANG.SAVE }}</button>\r\n    <button qms-btn-text (click)=\"item.isEdit = false\" class=\"ml-10\">\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </mat-card-actions>\r\n</div>\r\n",
+                template: "<div class=\"qms-comment\" *ngFor=\"let item of sourceLog; let i = index\">\r\n  <mat-card-header *ngIf=\"!item.isDelete\">\r\n    <mat-card-subtitle>{{ item.user }} {{ item.date }} </mat-card-subtitle>\r\n  </mat-card-header>\r\n  <mat-card-content>\r\n    <div\r\n      qms-scrollbar\r\n      *ngIf=\"!item.isEdit && !item.isDelete\"\r\n      class=\"content\"\r\n      [ngClass]=\"{ secondary: userId !== null ? userId === item.userId : 0 !== i % 2   }\"\r\n      [innerHTML]=\"showContent(item.content)\"\r\n    ></div>\r\n    <div class=\"content delete-action-wrap\" *ngIf=\"item.isDelete\">\r\n      <i>{{ LANG.DELETE_MESSAGE_COMMENT }}</i>\r\n      <button qms-btn-text class=\"btn-action\" (click)=\"regretItem(item)\" *ngIf=\"item.isDraft\">\r\n        {{ LANG.REGRET }}\r\n      </button>\r\n    </div>\r\n    <mat-form-field *ngIf=\"item.isEdit && !item.isDelete\" qms-form-textarea>\r\n      <textarea\r\n        qms-scrollbar\r\n        class=\"textarea-comment\"\r\n        matInput\r\n        cdkTextareaAutosize\r\n        cdkAutosizeMinRows=\"1\"\r\n        cdkAutosizeMaxRows=\"5\"\r\n        [(ngModel)]=\"item.editedContent\"\r\n      ></textarea>\r\n    </mat-form-field>\r\n  </mat-card-content>\r\n  <mat-card-actions *ngIf=\"item.isDraft && !item.isEdit && !item.isDelete\">\r\n    <a class=\"btn-action\" (click)=\"editContent(item)\"> {{ LANG.EDIT }} </a>\r\n    <a class=\"btn-action ml-20\" (click)=\"removeItem(item)\">{{ LANG.DELETE }}</a>\r\n  </mat-card-actions>\r\n  <mat-card-actions *ngIf=\"item.isEdit\" class=\"edit-action-wrap\">\r\n    <button qms-btn (click)=\"checkInvalidContent(item) || saveEditedContent(item)\" [disabled]=\"checkInvalidContent(item)\">{{ LANG.SAVE }}</button>\r\n    <button qms-btn-text (click)=\"item.isEdit = false\" class=\"ml-10\">\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </mat-card-actions>\r\n</div>\r\n",
                 host: { 'class': 'qms-comment' },
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".qms-comment{font-family:Open Sans;margin-bottom:1rem;display:block}.qms-comment .mat-card-subtitle{font-size:.75rem;color:rgba(0,0,0,.6)}.qms-comment .mat-card-content .content{padding:10px 16px;background-color:rgba(0,0,0,.04);display:block;border-radius:4px;font-size:.875rem;max-height:125px;overflow-y:auto}.qms-comment .mat-card-content .content.delete-action-wrap{display:flex;justify-content:space-between;align-items:center;height:56px}.qms-comment .mat-card-content .content.secondary{background-color:rgba(62,87,183,.12)}.qms-comment .mat-card-content .qms-form{width:100%}.qms-comment .btn-action{color:var(--primary);font-weight:600;font-size:13px;cursor:pointer}.qms-comment .textarea-comment{font-size:.875rem}.ml-10{margin-left:10px}.mt-15{margin-top:15px}.ml-20{margin-left:20px}.edit-action-wrap{display:block;margin-top:-10px}"]
@@ -973,7 +979,8 @@ QMSComment.ctorParameters = () => [
 ];
 QMSComment.propDecorators = {
     sourceLog: [{ type: Input }],
-    updateLog: [{ type: Output }]
+    updateLog: [{ type: Output }],
+    userId: [{ type: Input }]
 };
 
 class SelectDialog {
@@ -5510,7 +5517,6 @@ class TreeComponent {
                 for (let j = 0; j < itemSelected.length; j++) {
                     const element = itemSelected[j];
                     if (tree.id === element.id && (!tree.parentId || tree.parentId === element.parentId)) {
-                        console.log(tree);
                         this.checklistSelection.select(tree);
                     }
                 }
@@ -6157,6 +6163,15 @@ class QMSCKEditorUploadService extends QMSCKEditorBaseService {
         }
         return this.post('ckeditorUpload/UploadImage', formData);
     }
+    uploadSingleFile(file, location, folderId, entityId) {
+        const formData = new FormData();
+        formData.append('name', file.name);
+        formData.append('file', file);
+        formData.append('location', location);
+        formData.append('folderId', folderId);
+        formData.append('entityId', entityId);
+        return this.post('file/UploadSingleFile', formData);
+    }
 }
 QMSCKEditorUploadService.ɵprov = i0.ɵɵdefineInjectable({ factory: function QMSCKEditorUploadService_Factory() { return new QMSCKEditorUploadService(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(QMSCKEditorGlobalService)); }, token: QMSCKEditorUploadService, providedIn: "root" });
 QMSCKEditorUploadService.decorators = [
@@ -6187,6 +6202,8 @@ class PopupData {
         this.disabledList = [];
         this.disabledList2 = [];
         this.splitView = false;
+        this.moduleUploadFileName = '';
+        this.entityId = '';
     }
 }
 
@@ -6259,6 +6276,7 @@ class RelatedPopupComponent {
         this.moduleId = 0;
         this.moduleName = '';
         this.moduleUploadImageName = '';
+        this.moduleUploadFileName = '';
         this.treeData1 = [];
         this.treeData2 = [];
         this.checkedNodeList = [];
@@ -6290,15 +6308,22 @@ class RelatedPopupComponent {
         this.onExpandFolder = new EventEmitter();
         this.parentNodeSelected = new TreeFlatNode();
         this.acceptExtensions = ['pjp', 'jpg', 'pjpeg', 'jpeg', 'jfif', 'png', 'gif', 'bmp', 'webp', 'tif', 'tiff'];
+        this.acceptExtensionsForVideo = ['mp4'];
         this.qmsInputImageType = new FormControl('', [
             requiredFileType(this.acceptExtensions)
         ]);
+        this.qmsInputVideoType = new FormControl('', [
+            requiredFileType(this.acceptExtensionsForVideo)
+        ]);
         this.qmsInputImageFile = null;
+        this.qmsInputVideoFile = null;
         this.isLoadingImageFile = false;
+        this.isLoadingVideoFile = false;
         this.imageUpload = new Image();
         this.moduleId = data.moduleId;
         this.moduleName = data.moduleName;
         this.moduleUploadImageName = data.moduleUploadImageName;
+        this.moduleUploadFileName = data.moduleUploadFileName;
         this.treeData1 = data.treeData1;
         this.treeData2 = data.treeData2;
         this.treeConfig1 = data.treeConfig1;
@@ -6311,7 +6336,9 @@ class RelatedPopupComponent {
         this.maxSelectItemCount = data.maxSelectItemCount;
         this.canOnlySelectItem = data.canOnlySelectItem;
         this.canUploadImage = data.canUploadImage;
+        this.canUploadVideo = data.canUploadVideo;
         this.maxVideoThumbnailSizeKB = (data.maxVideoThumbnailSizeKB || VideoConst.DEFAUL_MAX_VIDEO_THUMBNAIL_SIZE_KB) * 1024;
+        this.entityId = data.entityId;
         appIconService.registerProcessIcon(iconRegistry, sanitizer);
         appIconService.registerProcessAreaIcon(iconRegistry, sanitizer);
         appIconService.registerDocumentIcon(iconRegistry, sanitizer);
@@ -6334,6 +6361,7 @@ class RelatedPopupComponent {
         }
     }
     ngOnInit() {
+        this.disabledList = this.treeData1;
         this.translate.getLanguageSubject$.pipe(takeUntil(this.ngUnsubscribe)).subscribe((res) => {
             if (res) {
                 this.LANG = this.translate.getObjectLang(res);
@@ -7070,6 +7098,8 @@ class RelatedPopupComponent {
         return __awaiter(this, void 0, void 0, function* () {
             this.selectedFolder = null;
             this.itemInSplitview = [];
+            let imageRelativeUrl = "";
+            let requestUploadVideoUrl = "";
             this.checkedNodeList.forEach(element => {
                 if (element.itemType === DataType$2.document) {
                     element.status = this.getStatusDocs(element.id);
@@ -7081,13 +7111,16 @@ class RelatedPopupComponent {
                     element.breadcumbs = this.getBreadcumbAllParentProcess(element.id).slice(1).reverse();
                 }
             });
-            if (!this.canUploadImage)
+            if (!this.canUploadImage && !this.canUploadVideo)
                 return this.dialogRef.close(this.checkedNodeList);
-            let imageRelativeUrl = "";
-            if (!(this.checkedNodeList.length && this.qmsInputImageFile && this.canUploadImage))
-                return this.dialogRef.close({ checkedNodeList: this.checkedNodeList, imageRelativeUrl: imageRelativeUrl });
-            imageRelativeUrl = yield this.uploadService.uploadImage(this.qmsInputImageFile.file, this.imageUpload.height, this.imageUpload.width).toPromise();
-            this.dialogRef.close({ checkedNodeList: this.checkedNodeList, imageRelativeUrl: imageRelativeUrl });
+            if (this.canUploadImage && this.qmsInputImageFile) {
+                imageRelativeUrl = yield this.uploadService.uploadImage(this.qmsInputImageFile.file, this.imageUpload.height, this.imageUpload.width).toPromise();
+            }
+            if (this.canUploadVideo && this.qmsInputVideoFile) {
+                const resUploadVideo = yield this.uploadService.uploadSingleFile(this.qmsInputVideoFile.file, '', '1', this.entityId).toPromise();
+                requestUploadVideoUrl = resUploadVideo.url;
+            }
+            this.dialogRef.close({ checkedNodeList: this.checkedNodeList, imageRelativeUrl: imageRelativeUrl, requestUploadVideoUrl: requestUploadVideoUrl });
         });
     }
     getStatusName(id) {
@@ -7374,6 +7407,10 @@ class RelatedPopupComponent {
     clearQMSInputImageFile() {
         this.qmsInputImageFile = null;
     }
+    clearQMSInputVideoFile() {
+        this.qmsInputVideoFile = null;
+        this.dataTrees.toArray()[0].treeControl.dataNodes.map(x => x.disabled = false);
+    }
     onChangeImage(event) {
         var _a;
         if (!((_a = this.qmsInputImageFile) === null || _a === void 0 ? void 0 : _a.isSuccessful) && this.maxVideoThumbnailSizeKB) {
@@ -7397,13 +7434,18 @@ class RelatedPopupComponent {
             this.imageUpload.src = event.target.result.toString();
         });
     }
+    onChangeFile(event) {
+        this.checkedNodeList = [];
+        this.dataTrees.toArray()[0].checklistSelection.clear();
+        this.dataTrees.toArray()[0].treeControl.dataNodes.map(x => x.disabled = true);
+    }
 }
 RelatedPopupComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-related-popup',
-                template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <div *ngIf=\"canUploadImage\" class=\"selected-image\">\r\n        <span>{{ moduleUploadImageName | uppercase }}</span>\r\n        <form>\r\n          <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\r\n            <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\r\n            <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputImageType\" [readOnly]=\"true\"\r\n              qms-file-upload-display  #fileDisplay \r\n              value=\"{{qmsInputImageFile? qmsInputImageFile.fileName : ''}}\"\r\n              [attr.disabled]=\"isLoadingImageFile ? 'disabled' : null\">\r\n            <input hidden type=\"file\" [(inputFile)]=\"qmsInputImageFile\" \r\n              qms-file-upload-selector #fileSelector\r\n              accept=\".pjp, .jpg, .pjpeg, .jpeg, .jfif, .png, .gif, .bmp, .webp, .tif, .tiff\" \r\n              [maxSize]=\"maxVideoThumbnailSizeKB\" (change)=\"onChangeImage($event)\">\r\n\r\n            <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\r\n              *ngIf=\"isLoadingImageFile\"></mat-progress-spinner>\r\n            <div matSuffix qms-input-clear *ngIf=\"qmsInputImageFile && qmsInputImageFile.fileName\">\r\n              <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputImageFile()\" [disabled]=\"isLoadingImageFile\">\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            </div>\r\n\r\n            <mat-error *ngIf=\"qmsInputImageFile && qmsInputImageFile.typeError == 1\">\r\n              The extension is not supported.\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </form>\r\n      </div>\r\n      <span>{{ moduleName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n    (optionSelected)=\"selectRelated($event.option.value)\"\r\n    [displayWith]=\"displayWhenSelectRelatedOption\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      [class.related-viewport]=\"isInputValue\"\r\n      *ngIf=\"filteredOptions.length\"\r\n    >\r\n      <ng-container *ngFor=\"let type of searchOrder\">\r\n        <div\r\n          class=\"search__module-result\"\r\n          *ngIf=\"canShowSearchOption(type.value)\"\r\n        >\r\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n          <mat-option\r\n            class=\"search__option\"\r\n            *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n            [value]=\"option\"\r\n            [disabled]=\"option.disabled\"\r\n          >\r\n            <qms-list-item type=\"image-square\">\r\n              <mat-icon\r\n                leading-icon\r\n                type=\"image-square\"\r\n                [svgIcon]=\"getNodeIcon(option)\"\r\n              ></mat-icon>\r\n              <div qms-list-header>\r\n                <div\r\n                  qms-line\r\n                  type=\"caption\"\r\n                  qms-tool-tip=\"{{\r\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                  }}\"\r\n                  mode=\"dark\"\r\n                  *ngIf=\"getParentName(option)\"\r\n                >\r\n                  <span #searchItemResult class=\"search__result__parent-name\">\r\n                    {{ option.parentName }}\r\n                  </span>\r\n                </div>\r\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                  {{ option.itemName }}\r\n                </div>\r\n                <div\r\n                  class=\"caption\"\r\n                  *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n                >\r\n                  <qms-breadcrumb\r\n                    class=\"breadcrumb-container\"\r\n                    type=\"table\"\r\n                    numDisplayItem=\"1\"\r\n                    [nodes]=\"option.breadcumbs\"\r\n                  >\r\n                  </qms-breadcrumb>\r\n                </div>\r\n              </div>\r\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n                <span>\r\n                  <mat-icon\r\n                    class=\"material-icons-outlined search__description-icon\"\r\n                    >local_offer</mat-icon\r\n                  >\r\n                </span>\r\n                {{ getItemId(option) }}\r\n              </div>\r\n            </qms-list-item>\r\n          </mat-option>\r\n        </div>\r\n      </ng-container>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar qmslib_related_popup_content\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length,\r\n        panel__content_height_with_upload: canUploadImage && !checkedNodeList.length,\r\n        panel__content_item_height_with_upload: canUploadImage && checkedNodeList.length,\r\n        'col-6': splitView,\r\n        'col-12': !splitView\r\n      }\"\r\n    >\r\n      <ng-container *ngIf=\"treeData1.length > 0\">\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          id=\"qmslib_related_popup_common_001\"\r\n          [expanded]=\"isCommonExpanded\"\r\n          (opened)=\"isCommonExpanded = true\"\r\n          (closed)=\"isCommonExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n              {{ LANG.PROCESSES | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.deviation\">\r\n              {{ LANG.DEVIATION | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.checklist\">\r\n              {{ LANG.CHECKLIST | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.risk\">\r\n              {{ LANG.ASSESSMENT | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_common_002\">\r\n            <qms-tree\r\n              [treeData]=\"treeData1\"\r\n              [treeConfig]=\"treeConfig1\"\r\n              [selectedData]=\"selectedData\"\r\n              [selectedRiskData]=\"selectedRiskData\"\r\n              [disabledList]=\"disabledList\"\r\n              (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n            ></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"treeData2.length > 0\">\r\n        <div\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          class=\"line__divider\"\r\n        ></div>\r\n\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          id=\"qmslib_related_popup_document_001\"\r\n          [expanded]=\"isDocumentExpanded\"\r\n          (opened)=\"isDocumentExpanded = true\"\r\n          (closed)=\"isDocumentExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title>\r\n              {{ LANG.DOCUMENTS | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isDocumentExpanded\r\n                    ? \"keyboard_arrow_up\"\r\n                    : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_document_002\">\r\n            <qms-tree\r\n              [treeData]=\"treeData2\"\r\n              [treeConfig]=\"treeConfig2\"\r\n              [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\"\r\n              (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTree2Event($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n            ></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n    </div>\r\n    <div\r\n      *ngIf=\"splitView\"\r\n      class=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n        {{ splitViewTitle }}\r\n      </div>\r\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n        <mat-checkbox\r\n          qms-group-options\r\n          [disabled]=\"node.disabled\"\r\n          color=\"default\"\r\n          [checked]=\"isNodeSelected(node)\"\r\n          (change)=\"toggleSelectItem(node)\"\r\n        ></mat-checkbox>\r\n        <mat-icon\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getNodeIcon(node)\"\r\n        ></mat-icon>\r\n        <span class=\"text-node\">{{ node.itemName }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div class=\"row\">\r\n    <div class=\"col-12 pr-0 pe-0\">\r\n      <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n        <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n          <button\r\n            *ngIf=\"item.itemName\"\r\n            mat-button\r\n            class=\"related__item__content\"\r\n            qms-tool-tip=\"{{\r\n              isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n            }}\"\r\n            mode=\"dark\"\r\n          >\r\n            <span class=\"related__item__content_name\" #itemName>{{\r\n              getItemChipName(item)\r\n            }}</span>\r\n            <mat-icon\r\n              *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n              (click)=\"removeCheckedNodeList(item)\"\r\n              >cancel</mat-icon\r\n            >\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button\r\n      *ngIf=\"!checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 7px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 0px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button\r\n      qms-btn-text\r\n      [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
+                template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <div *ngIf=\"canUploadImage\" class=\"selected-image\">\r\n        <span class=\"module-title\">{{ moduleUploadImageName | uppercase }}</span>\r\n        <form>\r\n          <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\r\n            <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\r\n            <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputImageType\" qms-file-upload-display\r\n              #fileDisplay value=\"{{qmsInputImageFile? qmsInputImageFile.fileName : ''}}\"\r\n              [attr.disabled]=\"isLoadingImageFile ? 'disabled' : null\" readonly>\r\n            <input hidden type=\"file\" [(inputFile)]=\"qmsInputImageFile\" qms-file-upload-selector #fileSelector\r\n              [acceptExtensions]=\"acceptExtensions\"\r\n              accept=\".pjp, .jpg, .pjpeg, .jpeg, .jfif, .png, .gif, .bmp, .webp, .tif, .tiff\"\r\n              [maxSize]=\"maxVideoThumbnailSizeKB\" (change)=\"onChangeImage($event)\">\r\n\r\n            <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\r\n              *ngIf=\"isLoadingImageFile\"></mat-progress-spinner>\r\n            <div matSuffix qms-input-clear *ngIf=\"qmsInputImageFile && qmsInputImageFile.fileName\">\r\n              <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputImageFile()\" [disabled]=\"isLoadingImageFile\">\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            </div>\r\n\r\n            <mat-error *ngIf=\"qmsInputImageFile && qmsInputImageFile.typeError == 1\">\r\n              {{ LANG.QMSCKEDITOR.EXTENSION_IS_NOT_SUPPORTED }}\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </form>\r\n      </div>\r\n      <div *ngIf=\"canUploadVideo\" class=\"selected-image\">\r\n        <span class=\"module-title\">{{ moduleUploadFileName | uppercase }}</span>\r\n        <form>\r\n          <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\r\n            <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\r\n            <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputVideoType\" qms-file-upload-display\r\n              #fileDisplay value=\"{{qmsInputVideoFile? qmsInputVideoFile.fileName : ''}}\"\r\n              [attr.disabled]=\"isLoadingVideoFile ? 'disabled' : null\" readonly>\r\n            <input hidden type=\"file\" [(inputFile)]=\"qmsInputVideoFile\" qms-file-upload-selector #fileSelector\r\n              [acceptExtensions]=\"acceptExtensionsForVideo\" accept=\".mp4\" (change)=\"onChangeFile($event)\">\r\n\r\n            <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\r\n              *ngIf=\"isLoadingVideoFile\"></mat-progress-spinner>\r\n            <div matSuffix qms-input-clear *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.fileName\">\r\n              <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputVideoFile()\" [disabled]=\"isLoadingVideoFile\">\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            </div>\r\n\r\n            <mat-error *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.typeError == 1\">\r\n              {{ LANG.QMSCKEDITOR.ACCEPT_MP4_ONLY }}\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </form>\r\n      </div>\r\n      <span class=\"module-name\">{{ moduleName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n    <input type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput [formControl]=\"myControl\" [matAutocomplete]=\"auto\" />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete #auto=\"matAutocomplete\" class=\"mat-autocomplete_related-viewport\"\r\n    (optionSelected)=\"selectRelated($event.option.value)\" [displayWith]=\"displayWhenSelectRelatedOption\">\r\n    <cdk-virtual-scroll-viewport qms-scrollbar itemSize=\"10\" [class.related-viewport]=\"isInputValue\"\r\n      *ngIf=\"filteredOptions.length\">\r\n      <ng-container *ngFor=\"let type of searchOrder\">\r\n        <div class=\"search__module-result\" *ngIf=\"canShowSearchOption(type.value)\">\r\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n          <mat-option class=\"search__option\" *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n            [value]=\"option\" [disabled]=\"option.disabled\">\r\n            <qms-list-item type=\"image-square\">\r\n              <mat-icon leading-icon type=\"image-square\" [svgIcon]=\"getNodeIcon(option)\"></mat-icon>\r\n              <div qms-list-header>\r\n                <div qms-line type=\"caption\" qms-tool-tip=\"{{\r\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                  }}\" mode=\"dark\" *ngIf=\"getParentName(option)\">\r\n                  <span #searchItemResult class=\"search__result__parent-name\">\r\n                    {{ option.parentName }}\r\n                  </span>\r\n                </div>\r\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                  {{ option.itemName }}\r\n                </div>\r\n                <div class=\"caption\" *ngIf=\"option.breadcumbs && option.breadcumbs.length\">\r\n                  <qms-breadcrumb class=\"breadcrumb-container\" type=\"table\" numDisplayItem=\"1\"\r\n                    [nodes]=\"option.breadcumbs\">\r\n                  </qms-breadcrumb>\r\n                </div>\r\n              </div>\r\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n                <span>\r\n                  <mat-icon class=\"material-icons-outlined search__description-icon\">local_offer</mat-icon>\r\n                </span>\r\n                {{ getItemId(option) }}\r\n              </div>\r\n            </qms-list-item>\r\n          </mat-option>\r\n        </div>\r\n      </ng-container>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div class=\"qms-scrollbar qmslib_related_popup_content\" [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length,\r\n        panel__content_height_with_upload: canUploadImage && !checkedNodeList.length,\r\n        panel__content_item_height_with_upload: canUploadImage && checkedNodeList.length,\r\n        'col-6': splitView,\r\n        'col-12': !splitView\r\n      }\">\r\n      <ng-container *ngIf=\"treeData1.length > 0\">\r\n        <mat-expansion-panel hideToggle id=\"qmslib_related_popup_common_001\" [expanded]=\"isCommonExpanded\"\r\n          (opened)=\"isCommonExpanded = true\" (closed)=\"isCommonExpanded = false\" class=\"panel-tree\">\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n              {{ LANG.PROCESSES | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.deviation\">\r\n              {{ LANG.DEVIATION | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.checklist\">\r\n              {{ LANG.CHECKLIST | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.risk\">\r\n              {{ LANG.ASSESSMENT | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_common_002\">\r\n            <qms-tree [treeData]=\"treeData1\" [treeConfig]=\"treeConfig1\" [selectedData]=\"selectedData\"\r\n              [selectedRiskData]=\"selectedRiskData\" [disabledList]=\"disabledList\"\r\n              (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"treeData2.length > 0\">\r\n        <div *ngIf=\"moduleId === module.documentProcess\" class=\"line__divider\"></div>\r\n\r\n        <mat-expansion-panel hideToggle *ngIf=\"moduleId === module.documentProcess\"\r\n          id=\"qmslib_related_popup_document_001\" [expanded]=\"isDocumentExpanded\" (opened)=\"isDocumentExpanded = true\"\r\n          (closed)=\"isDocumentExpanded = false\" class=\"panel-tree\">\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title>\r\n              {{ LANG.DOCUMENTS | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                isDocumentExpanded\r\n                ? \"keyboard_arrow_up\"\r\n                : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_document_002\">\r\n            <qms-tree [treeData]=\"treeData2\" [treeConfig]=\"treeConfig2\" [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\" (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTree2Event($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n    </div>\r\n    <div *ngIf=\"splitView\" class=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\">\r\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n        {{ splitViewTitle }}\r\n      </div>\r\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n        <mat-checkbox qms-group-options [disabled]=\"node.disabled\" color=\"default\" [checked]=\"isNodeSelected(node)\"\r\n          (change)=\"toggleSelectItem(node)\"></mat-checkbox>\r\n        <mat-icon class=\"mat-icon-rtl-mirror material-icons-outlined\" [svgIcon]=\"getNodeIcon(node)\"></mat-icon>\r\n        <span class=\"text-node\">{{ node.itemName }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div class=\"row\">\r\n    <div class=\"col-12 pr-0 pe-0\">\r\n      <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n        <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n          <button *ngIf=\"item.itemName\" mat-button class=\"related__item__content\" qms-tool-tip=\"{{\r\n              isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n            }}\" mode=\"dark\">\r\n            <span class=\"related__item__content_name\" #itemName>{{\r\n              getItemChipName(item)\r\n              }}</span>\r\n            <mat-icon *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n              (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button *ngIf=\"!checkedNodeList.length\" qms-btn style=\"margin-top: 7px\" (click)=\"onAddClick()\">\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button *ngIf=\"checkedNodeList.length\" qms-btn style=\"margin-top: 0px\" (click)=\"onAddClick()\">\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button qms-btn-text [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\" (click)=\"onCloseClick()\">\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>",
                 encapsulation: ViewEncapsulation.None,
-                styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_height_with_upload{height:380px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item_height_with_upload{height:257px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-container .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .breadcrumb-container .qms-breadcrumb-item .mat-icon,cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .breadcrumb-container .qms-breadcrumb-item-text,cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}#qmslib_related_popup_header_001 .selected-image{display:flex;align-items:center;padding-bottom:10px}#qmslib_related_popup_header_001 .selected-image .input-upload{height:60px;padding-left:30px}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:300px}"]
+                styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_height_with_upload{height:380px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item_height_with_upload{height:257px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .module-name{margin-top:10px;display:block}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-container .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .breadcrumb-container .qms-breadcrumb-item .mat-icon,cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .breadcrumb-container .qms-breadcrumb-item-text,cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}#qmslib_related_popup_header_001 .module-title{width:200px}#qmslib_related_popup_header_001 .selected-image{display:flex;align-items:center;padding-bottom:10px}#qmslib_related_popup_header_001 .selected-image .input-upload{height:60px;padding-left:30px;max-width:260px}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:300px}"]
             },] }
 ];
 RelatedPopupComponent.ctorParameters = () => [
@@ -7559,13 +7601,14 @@ class RiskListComponent {
         this.updateData = new EventEmitter();
     }
     ngOnChanges(changes) {
-        var _a, _b;
+        var _a, _b, _c;
         if (changes.data && JSON.stringify(changes.data.currentValue) !== JSON.stringify(changes.data.previousValue)) {
             this.dangers = [];
             this.title = changes.data.currentValue.title;
             this.isNotEditedItem = (_a = changes.data.currentValue['isNotEditedItem']) !== null && _a !== void 0 ? _a : false;
             this.dangers = [...changes.data.currentValue.data];
             this.show = ((_b = changes.data.currentValue) === null || _b === void 0 ? void 0 : _b.numRow) || 5;
+            this.enableArchive = (_c = changes.data.currentValue) === null || _c === void 0 ? void 0 : _c.enableArchive;
             this.analysisDanger = [];
             this.groupByDanger(changes.data.currentValue.data, 0);
         }
@@ -7689,7 +7732,7 @@ class RiskListComponent {
 RiskListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-risk-list',
-                template: "<div class=\"container list-risk\">\r\n  <div class=\"list-risk__title\">\r\n    <strong>{{ title }}</strong>\r\n  </div>\r\n  <div class=\"list-risk__body\" *ngFor=\"let analysis of analysisDanger\">\r\n    <div class=\"list-risk__body-parent\">\r\n      <div class=\"block\">\r\n        <mat-icon class=\"material-icons-outlined mat-icon\">border_all</mat-icon>\r\n        <div class=\"title\">{{ analysis.name }}</div>\r\n      </div>\r\n      <div class=\"block\" *ngIf=\"!isNotEditedItem\">\r\n        <span class=\"label-archived\" *ngIf=\"analysis.folderId == -1\">\r\n          {{ LANG.ARCHIVED }}</span\r\n        >\r\n        <button\r\n          *ngIf=\"analysis.folderId !== -1\"\r\n          qms-btn-icon\r\n          color=\"light\"\r\n          qms-tool-tip=\"Caption\"\r\n          mode=\"dark\"\r\n          (click)=\"editDanger(analysis)\"\r\n        >\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n        <button\r\n          qms-btn-icon\r\n          color=\"light\"\r\n          qms-tool-tip=\"Caption\"\r\n          mode=\"dark\"\r\n          (click)=\"removeDanger(analysis.id)\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"list-risk__body-child\"\r\n      *ngFor=\"let danger of analysis.dangers | slice: 0:analysis.show\"\r\n    >\r\n      <div class=\"default\">\r\n        <div class=\"title\">{{ danger.dangerName }}</div>\r\n        <div class=\"group-button\">\r\n          <label\r\n            class=\"label-red cursor\"\r\n            *ngIf=\"danger.red > 0\"\r\n            (click)=\"dangerDetail(danger)\"\r\n            >{{ danger.red }}</label\r\n          >\r\n          <label\r\n            class=\"label-yellow cursor\"\r\n            *ngIf=\"danger.yellow > 0\"\r\n            (click)=\"dangerDetail(danger)\"\r\n            >{{ danger.yellow }}</label\r\n          >\r\n          <label\r\n            class=\"label-green cursor\"\r\n            *ngIf=\"danger.green > 0\"\r\n            (click)=\"dangerDetail(danger)\"\r\n            >{{ danger.green }}</label\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"remain\" *ngIf=\"analysis.remain > 0\">\r\n      <span class=\"title cursor\" (click)=\"increaseShow(analysis.id)\"\r\n        >+ {{ analysis.remain }}</span\r\n      >\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"container list-risk\">\r\n  <div class=\"list-risk__title\">\r\n    <strong>{{ title }}</strong>\r\n  </div>\r\n  <div class=\"list-risk__body\" *ngFor=\"let analysis of analysisDanger\">\r\n    <div class=\"list-risk__body-parent\">\r\n      <div class=\"block\">\r\n        <mat-icon class=\"material-icons-outlined mat-icon\">border_all</mat-icon>\r\n        <div class=\"title\">{{ analysis.name }}</div>\r\n      </div>\r\n      <div class=\"block\">\r\n        <span class=\"label-archived\" *ngIf=\"analysis.folderId == -1 && (!isNotEditedItem || enableArchive)\">\r\n          {{ LANG.ARCHIVED }}</span\r\n        >\r\n        <button\r\n          *ngIf=\"analysis.folderId !== -1 && !isNotEditedItem\"\r\n          qms-btn-icon\r\n          color=\"light\"\r\n          qms-tool-tip=\"Caption\"\r\n          mode=\"dark\"\r\n          (click)=\"editDanger(analysis)\"\r\n        >\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n        <button\r\n          *ngIf=\"!isNotEditedItem\"\r\n          qms-btn-icon\r\n          color=\"light\"\r\n          qms-tool-tip=\"Caption\"\r\n          mode=\"dark\"\r\n          (click)=\"removeDanger(analysis.id)\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"list-risk__body-child\"\r\n      *ngFor=\"let danger of analysis.dangers | slice: 0:analysis.show\"\r\n    >\r\n      <div class=\"default\">\r\n        <div class=\"title\">{{ danger.dangerName }}</div>\r\n        <div class=\"group-button\">\r\n          <label\r\n            class=\"label-red cursor\"\r\n            *ngIf=\"danger.red > 0\"\r\n            (click)=\"dangerDetail(danger)\"\r\n            >{{ danger.red }}</label\r\n          >\r\n          <label\r\n            class=\"label-yellow cursor\"\r\n            *ngIf=\"danger.yellow > 0\"\r\n            (click)=\"dangerDetail(danger)\"\r\n            >{{ danger.yellow }}</label\r\n          >\r\n          <label\r\n            class=\"label-green cursor\"\r\n            *ngIf=\"danger.green > 0\"\r\n            (click)=\"dangerDetail(danger)\"\r\n            >{{ danger.green }}</label\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"remain\" *ngIf=\"analysis.remain > 0\">\r\n      <span class=\"title cursor\" (click)=\"increaseShow(analysis.id)\"\r\n        >+ {{ analysis.remain }}</span\r\n      >\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 styles: [".list-risk{font-family:Open Sans;font-style:normal;font-weight:400;color:var(--default-color)}.list-risk .list-risk__title{font-weight:600;font-size:.875rem;line-height:22px;margin-bottom:1rem}.list-risk .list-risk__body .list-risk__body-parent{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-risk .list-risk__body .list-risk__body-parent .block{font-weight:400;font-size:1rem;line-height:28px;display:flex;align-items:center}.list-risk .list-risk__body .list-risk__body-parent .block .title{margin-left:1.5rem;padding-top:5px;padding-bottom:5px}.list-risk .list-risk__body .list-risk__body-parent .block mat-icon{color:rgba(0,0,0,.6)}.list-risk .list-risk__body .list-risk__body-parent .block button.qms-btn-icon{width:40px;height:40px;line-height:40px}.list-risk .list-risk__body .list-risk__body-parent .block .label-archived{font-weight:600;font-size:.875rem;line-height:1rem;color:#525252;padding:5px;background:linear-gradient(0deg,rgba(0,0,0,.1),rgba(0,0,0,.1)),#fff;border-radius:2px}.list-risk .list-risk__body .list-risk__body-child{font-weight:400;font-size:.875rem;line-height:22px}.list-risk .list-risk__body .list-risk__body-child .default{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-risk .list-risk__body .list-risk__body-child .default .title{margin-left:3rem}.list-risk .list-risk__body .list-risk__body-child .default .group-button{margin-right:2rem;display:flex}.list-risk .list-risk__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-risk .list-risk__body .remain .title{margin-left:3rem}.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}"]
             },] }
 ];
@@ -7860,6 +7903,7 @@ class RiskDanger {
         this.data = [];
         this.numRow = 5;
         this.isNotEditedItem = false;
+        this.enableArchive = false;
     }
 }
 
@@ -9787,8 +9831,8 @@ function getCKEditorConfiguration(itemToolbar) {
                 '|',
                 'imageMap',
                 '|',
-                // 'qmsFlowchart', // disable qmsFlowchart until NK-440 done
-                // '|',
+                'qmsFlowchart',
+                '|',
                 'qmsBpmn'
             ],
             resizeOptions: [
@@ -18890,34 +18934,35 @@ function getToolbarConfiguration(LANG) {
                     }
                 }
             },
-            {
-                type: 'button',
-                name: 'svg',
-                group: 'export',
-                text: 'Export SVG',
-                attrs: {
-                    button: {
-                        id: 'btn-svg',
-                        'data-tooltip': `${LANG.FLOWCHART.EXPORT_SVG}`,
-                        'data-tooltip-position': 'top',
-                        'data-tooltip-position-selector': '.toolbar-container'
-                    }
-                }
-            },
-            {
-                type: 'button',
-                name: 'png',
-                group: 'export',
-                text: 'Export PNG',
-                attrs: {
-                    button: {
-                        id: 'btn-png',
-                        'data-tooltip': `${LANG.FLOWCHART.EXPORT_PNG}`,
-                        'data-tooltip-position': 'top',
-                        'data-tooltip-position-selector': '.toolbar-container'
-                    }
-                }
-            },
+            /**Hide export button in flowchart for task NK-440 */
+            // {
+            //     type: 'button',
+            //     name: 'svg',
+            //     group: 'export',
+            //     text: 'Export SVG',
+            //     attrs: {
+            //         button: {
+            //             id: 'btn-svg',
+            //             'data-tooltip': `${LANG.FLOWCHART.EXPORT_SVG}`,
+            //             'data-tooltip-position': 'top',
+            //             'data-tooltip-position-selector': '.toolbar-container'
+            //         }
+            //     }
+            // },
+            // {
+            //     type: 'button',
+            //     name: 'png',
+            //     group: 'export',
+            //     text: 'Export PNG',
+            //     attrs: {
+            //         button: {
+            //             id: 'btn-png',
+            //             'data-tooltip': `${LANG.FLOWCHART.EXPORT_PNG}`,
+            //             'data-tooltip-position': 'top',
+            //             'data-tooltip-position-selector': '.toolbar-container'
+            //         }
+            //     }
+            // },
             {
                 type: 'button',
                 name: 'print',
@@ -19068,7 +19113,7 @@ function getToolbarConfiguration(LANG) {
                 }
             },
             {
-                type: 'fullscreen',
+                type: 'button',
                 name: 'fullscreen',
                 group: 'fullscreen',
                 attrs: {
@@ -22917,6 +22962,7 @@ file, You can obtain one at http://jointjs.com/license/rappid_v2.txt
  or from the Rappid archive as was distributed by client IO. See the LICENSE file.*/
 class KitchenSinkService {
     constructor(el, keyboardService, LANG) {
+        this.isFullscreen = false;
         // backwards compatibility for older shapes
         this.exportStylesheet = '.scalable * { vector-effect: non-scaling-stroke }';
         this.el = el;
@@ -23200,7 +23246,8 @@ class KitchenSinkService {
             'selectTemplate:option:select': this.onChangeTemplate,
             'deleteTemplate:pointerclick': this.onDeleteTemplate,
             'saveAsTemplate:pointerclick': this.onSaveAsTemplate,
-            'resetTemplate:pointerclick': this.onResetTemplate
+            'resetTemplate:pointerclick': this.onResetTemplate,
+            'fullscreen:pointerclick': this.toggleFullscreen,
         });
         this.renderPlugin('.toolbar-container', this.toolbar);
     }
@@ -23230,6 +23277,25 @@ class KitchenSinkService {
             padding: 10
         });
     }
+    toggleFullscreen() {
+        var _a, _b, _c, _d, _e, _f;
+        this.isFullscreen = !this.isFullscreen;
+        let cdkOverlayPane = document.querySelectorAll(`[id*="cdk-overlay-"]`)[0];
+        if (!cdkOverlayPane)
+            return;
+        if (this.isFullscreen) {
+            cdkOverlayPane.classList.add('full-screen-ckeditor-flowchart_cdk-overlay-pane');
+            (_a = cdkOverlayPane.querySelector('#stencilpanel')) === null || _a === void 0 ? void 0 : _a.classList.add('full-height-ckeditor-flowchart_container');
+            (_b = cdkOverlayPane.querySelector('#paperpanel')) === null || _b === void 0 ? void 0 : _b.classList.add('full-height-ckeditor-flowchart_container');
+            (_c = cdkOverlayPane.querySelector('#rightpanel')) === null || _c === void 0 ? void 0 : _c.classList.add('full-height-ckeditor-flowchart_container');
+        }
+        else {
+            cdkOverlayPane.classList.remove('full-screen-ckeditor-flowchart_cdk-overlay-pane');
+            (_d = cdkOverlayPane.querySelector('#stencilpanel')) === null || _d === void 0 ? void 0 : _d.classList.remove('full-height-ckeditor-flowchart_container');
+            (_e = cdkOverlayPane.querySelector('#paperpanel')) === null || _e === void 0 ? void 0 : _e.classList.remove('full-height-ckeditor-flowchart_container');
+            (_f = cdkOverlayPane.querySelector('#rightpanel')) === null || _f === void 0 ? void 0 : _f.classList.remove('full-height-ckeditor-flowchart_container');
+        }
+    }
     openAsSVG() {
         this.paper.hideTools().toSVG((svg) => {
             new joint.ui.Lightbox({
@@ -23755,6 +23821,13 @@ class CKEditorImageUploadTypeConst {
 }
 CKEditorImageUploadTypeConst.QMSCK_IMAGE_TYPES_SUPPORT_DEFAULT = 'pjp,jpg,pjpeg,jpeg,jfif,png,gif,bmp,webp,tif,tiff';
 
+var VideoUploadMode;
+(function (VideoUploadMode) {
+    VideoUploadMode[VideoUploadMode["DoNotAllow"] = 0] = "DoNotAllow";
+    VideoUploadMode[VideoUploadMode["AllowUpload"] = 1] = "AllowUpload";
+    VideoUploadMode[VideoUploadMode["OnlyPickFromArchive"] = 2] = "OnlyPickFromArchive";
+})(VideoUploadMode || (VideoUploadMode = {}));
+
 class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
     /**
      * Constructor
@@ -23822,16 +23895,18 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         });
         let toolbarItems = this.qmsckPlugin.itemToolbar;
         if (this.isEnabledToggleToolbar() && this.qmsckData.toggledToolbarItems) {
-            let strToolbars = this.qmsckData.toggledToolbarItems.replace(/qmsFlowchart,/g, "");
+            let strToolbars = this.qmsckData.toggledToolbarItems; //.replace(/qmsFlowchart,/g, "");
             if (!this.qmsckData.enableTemplate) {
                 strToolbars = strToolbars.replace(/qmsTemplate,/g, ""); // disable qmsTemplate if user don't have handbookAdmin Role
             }
+            if (!this.qmsckData.videoUploadMode) {
+                strToolbars = strToolbars.replace(/videoUpload,/g, "");
+            }
             toolbarItems += ',' + strToolbars; // disable qmsFlowchart until NK-440 done
         }
         this.ckeditorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(toolbarItems);
         if (this.ckeditorConfig)
             this.ckeditorConfig.containerId = this.editorId;
-        this.ckeditorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(toolbarItems);
         if (this.qmsckData.hideImgOptions) {
             this.ckeditorConfig = this.hideImageOptions(this.ckeditorConfig, this.qmsckData.hideImgOptions);
         }
@@ -24322,6 +24397,7 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
             data.moduleId = 2;
             data.moduleName = this.LANG.QMSCKEDITOR.SELECT_VIDEO_FROM_ARCHIVE;
             data.moduleUploadImageName = this.LANG.QMSCKEDITOR.SELECT_VIDEO_IMAGE;
+            data.moduleUploadFileName = this.LANG.QMSCKEDITOR.ADD_A_FILE;
             data.treeData1 = videos.map((item) => {
                 return {
                     rootId: item.rootId,
@@ -24339,7 +24415,9 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
             data.treeData2 = [];
             data.treeConfig1 = config;
             data.canUploadImage = videos.length ? true : false;
+            data.canUploadVideo = this.qmsckData.videoUploadMode === VideoUploadMode.AllowUpload;
             data.maxVideoThumbnailSizeKB = this.qmsckData.maxVideoThumbnailSizeKB;
+            data.entityId = this.qmsckData.entityId;
             const dialogRef = this.dialog.open(RelatedPopupComponent, {
                 minWidth: "450px",
                 maxWidth: "800px",
@@ -24355,13 +24433,19 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
             }, 100);
             dialogRef.afterClosed().subscribe((result) => {
                 if (result) {
-                    const ids = result.checkedNodeList.reduce((result, item) => {
-                        result[item.id.toString()] = item.id;
-                        return result;
-                    }, {});
-                    const urls = videos
-                        .filter((i) => i.childId && !!ids[i.childId.toString()])
-                        .map((i) => i.url);
+                    let urls = [];
+                    if (result.requestUploadVideoUrl) {
+                        urls.push(result.requestUploadVideoUrl);
+                    }
+                    else {
+                        const ids = result.checkedNodeList.reduce((result, item) => {
+                            result[item.id.toString()] = item.id;
+                            return result;
+                        }, {});
+                        urls = videos
+                            .filter((i) => i.childId && !!ids[i.childId.toString()])
+                            .map((i) => i.url);
+                    }
                     const evt = new CustomEvent(this.ckEditorEventConst.QMSCK_BROWSE_VIDEO_RESP, { detail: { urls: urls, thumbnailUrl: result.imageRelativeUrl } });
                     window.dispatchEvent(evt);
                 }
@@ -25262,13 +25346,6 @@ class QMSTreeModel {
     }
 }
 
-var DocumentFieldStatus;
-(function (DocumentFieldStatus) {
-    DocumentFieldStatus[DocumentFieldStatus["Normal"] = 1] = "Normal";
-    DocumentFieldStatus[DocumentFieldStatus["Mandatory"] = 2] = "Mandatory";
-    DocumentFieldStatus[DocumentFieldStatus["Deleted"] = 3] = "Deleted";
-})(DocumentFieldStatus || (DocumentFieldStatus = {}));
-
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 class QmsStepperComponent {
     constructor(changeDetector) {
@@ -25278,7 +25355,6 @@ class QmsStepperComponent {
         this.currentStep = 0;
         this.labelPosition = 'end';
         this.selectionChangeEvent = new EventEmitter();
-        this.documentFieldStatus = DocumentFieldStatus;
     }
     ngOnInit() {
     }
@@ -25291,7 +25367,7 @@ QmsStepperComponent.decorators = [
     { type: Component, args: [{
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 selector: 'app-qms-stepper',
-                template: "<div class=\"qms-stepper-container\">\r\n    <div *ngIf=\"isHorizontal\">\r\n        <mat-horizontal-stepper [style.width.px]=\"width\" labelPosition=\"{{labelPosition}}\" #stepper\r\n            (selectionChange)=\"changeStep($event.selectedIndex)\" class=\"overflow-auto\" [selectedIndex]=\"currentStep\">\r\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\r\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\r\n                <ng-template matStepLabel>\r\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\" \r\n                        [ngClass]=\"{ 'is-deleted-field': step.documentFieldStatus === documentFieldStatus.Deleted }\"\r\n                        >{{step.name}}<span *ngIf=\"step.documentFieldStatus === documentFieldStatus.Mandatory\" class=\"is-mandatory-field\"> *</span></span>\r\n                </ng-template>\r\n                <ng-template matStepContent>\r\n                </ng-template>\r\n            </mat-step>\r\n            <ng-template matStepperIcon=\"edit\">\r\n                {{stepper.selectedIndex + 1}}\r\n            </ng-template>\r\n        </mat-horizontal-stepper>\r\n    </div>\r\n    <div *ngIf=\"!isHorizontal\">\r\n        <mat-vertical-stepper [style.height.px]=\"height\" #stepper (selectionChange)=\"changeStep($event.selectedIndex)\"\r\n            [selectedIndex]=\"currentStep\" class=\"overflow-auto\">\r\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\r\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\r\n                <ng-template matStepLabel>\r\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\"\r\n                        [ngClass]=\"{ 'is-deleted-field': step.documentFieldStatus === documentFieldStatus.Deleted }\"\r\n                        >{{step.name}}<span *ngIf=\"step.documentFieldStatus === documentFieldStatus.Mandatory\" class=\"is-mandatory-field\"> *</span></span>\r\n                </ng-template>\r\n                <ng-template matStepContent>\r\n                </ng-template>\r\n            </mat-step>\r\n            <ng-template matStepperIcon=\"edit\">\r\n                <span>{{stepper.selectedIndex + 1}}</span>\r\n            </ng-template>\r\n        </mat-vertical-stepper>\r\n    </div>\r\n</div>",
+                template: "<div class=\"qms-stepper-container\">\r\n    <div *ngIf=\"isHorizontal\">\r\n        <mat-horizontal-stepper [style.width.px]=\"width\" labelPosition=\"{{labelPosition}}\" #stepper\r\n            (selectionChange)=\"changeStep($event.selectedIndex)\" class=\"overflow-auto\" [selectedIndex]=\"currentStep\">\r\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\r\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\r\n                <ng-template matStepLabel>\r\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\" \r\n                        [ngClass]=\"{ 'is-deleted-field': step.isDeleted }\"\r\n                        >{{step.name}}<span *ngIf=\"step.isMandatory && !step.isDeleted\" class=\"is-mandatory-field\"> *</span></span>\r\n                </ng-template>\r\n                <ng-template matStepContent>\r\n                </ng-template>\r\n            </mat-step>\r\n            <ng-template matStepperIcon=\"edit\">\r\n                {{stepper.selectedIndex + 1}}\r\n            </ng-template>\r\n        </mat-horizontal-stepper>\r\n    </div>\r\n    <div *ngIf=\"!isHorizontal\">\r\n        <mat-vertical-stepper [style.height.px]=\"height\" #stepper (selectionChange)=\"changeStep($event.selectedIndex)\"\r\n            [selectedIndex]=\"currentStep\" class=\"overflow-auto\">\r\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\r\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\r\n                <ng-template matStepLabel>\r\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\"\r\n                        [ngClass]=\"{ 'is-deleted-field': step.isDeleted }\"\r\n                        >{{step.name}}<span *ngIf=\"step.isMandatory && !step.isDeleted\" class=\"is-mandatory-field\"> *</span></span>\r\n                </ng-template>\r\n                <ng-template matStepContent>\r\n                </ng-template>\r\n            </mat-step>\r\n            <ng-template matStepperIcon=\"edit\">\r\n                <span>{{stepper.selectedIndex + 1}}</span>\r\n            </ng-template>\r\n        </mat-vertical-stepper>\r\n    </div>\r\n</div>",
                 styles: [".qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item]{height:22px!important;padding:8px 12px;left:0;top:0;border-radius:4px;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-horizontal-stepper-header{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-vertical-stepper-header{width:156px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon{background:rgba(0,0,0,.6);margin-right:14px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon-selected{background-color:#1954a9!important;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-selected=true] .title-step{font-weight:600!important;outline:none!important;-webkit-font-smoothing:antialiased!important}.qms-stepper-container ::ng-deep mat-step-header:active{background:#e5eefb}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep mat-step-header .mat-ripple-element{background-color:rgba(229,238,251,.3)}.qms-stepper-container ::ng-deep mat-step-header:hover{background:#f2f7fd}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=disabled]{pointer-events:none!important;cursor:not-allowed;opacity:.6;height:22px!important;width:156px;left:0;top:0;border-radius:4px;padding:8px 12px}.qms-stepper-container ::ng-deep mat-step-header:focus{border:2px solid #1954a9}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-keyboard-focused,.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-program-focused{border:3px solid #1954a9;background:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus:not(:focus-visible){border:none}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=active]{pointer-events:none!important;cursor:not-allowed;opacity:.6}.qms-stepper-container .title-step{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0;text-align:center;color:#323232;outline:none!important}.qms-stepper-container ::ng-deep .mat-step-icon{width:24px;height:24px}.qms-stepper-container ::ng-deep .mat-step-icon .mat-step-icon-content{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0;text-align:center;color:#fff;padding-top:1px}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line:before{border-left-width:0;border-right-width:0}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line{margin-left:23px;background:#0000001f;height:30px;width:1px}.qms-stepper-container ::ng-deep .mat-stepper-horizontal-line{height:1px;width:22px!important;left:0;top:18px;border-radius:0;margin:8px;background:#0000001f;max-width:22px!important}.qms-stepper-container .is-mandatory-field{color:#002e68!important}.qms-stepper-container .is-deleted-field{color:#ef1d34!important}"]
             },] }
 ];
@@ -28673,9 +28749,9 @@ class SelectProcessDocumentPopupComponent {
 SelectProcessDocumentPopupComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-select-process-document',
-                template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n    (optionSelected)=\"selectRelated($event.option.value)\"\r\n    [displayWith]=\"displayWhenSelectRelatedOption\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      [class.related-viewport]=\"isInputValue\"\r\n      *ngIf=\"filteredOptions.length\"\r\n    >\r\n      <ng-container *ngFor=\"let type of searchOrder\">\r\n        <div\r\n          class=\"search__module-result\"\r\n          *ngIf=\"canShowSearchOption(type.value)\"\r\n        >\r\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n          <mat-option\r\n            class=\"search__option\"\r\n            *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n            [value]=\"option\"\r\n            [disabled]=\"option.disabled\"\r\n          >\r\n            <qms-list-item type=\"image-square\">\r\n              <mat-icon\r\n                leading-icon\r\n                type=\"image-square\"\r\n                [svgIcon]=\"getNodeIcon(option)\"\r\n              ></mat-icon>\r\n              <div qms-list-header>\r\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                  {{ option.itemName }}\r\n                </div>\r\n                <div\r\n                  class=\"caption\"\r\n                  *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n                >\r\n                  <qms-breadcrumb\r\n                    class=\"breadcrumb-container\"\r\n                    type=\"table\"\r\n                    numDisplayItem=\"1\"\r\n                    [nodes]=\"option.breadcumbs\"\r\n                  >\r\n                  </qms-breadcrumb>\r\n                </div>\r\n              </div>\r\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n                <span>\r\n                  <mat-icon\r\n                    class=\"material-icons-outlined search__description-icon\"\r\n                    >local_offer</mat-icon\r\n                  >\r\n                </span>\r\n                {{ getItemId(option) }}\r\n              </div>\r\n            </qms-list-item>\r\n          </mat-option>\r\n        </div>\r\n      </ng-container>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar qmslib_related_popup_content\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length,\r\n        'col-6': splitView,\r\n        'col-12': !splitView\r\n      }\"\r\n    >\r\n      <ng-container *ngIf=\"treeData1.length > 0\">\r\n        <div\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          class=\"line__divider\"\r\n        ></div>\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          id=\"qmslib_related_popup_common_001\"\r\n          [expanded]=\"isCommonExpanded\"\r\n          (opened)=\"isCommonExpanded = true\"\r\n          (closed)=\"isCommonExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n              {{ LANG.PROCESSES | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_common_002\">\r\n            <qms-tree-new\r\n              [treeData]=\"treeData1\"\r\n              [treeConfig]=\"treeConfig1\"\r\n              [selectedData]=\"selectedData\"\r\n              [selectedRiskData]=\"selectedRiskData\"\r\n              [disabledList]=\"disabledList\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              (selectFolderEvent)=\"getItemOfFolder($event, dataType.area)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n            >\r\n            </qms-tree-new>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"treeData2.length > 0\">\r\n        <div\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          class=\"line__divider\"\r\n        ></div>\r\n\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          id=\"qmslib_related_popup_document_001\"\r\n          [expanded]=\"isDocumentExpanded\"\r\n          (opened)=\"isDocumentExpanded = true\"\r\n          (closed)=\"isDocumentExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title>\r\n              {{ LANG.DOCUMENTS | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isDocumentExpanded\r\n                    ? \"keyboard_arrow_up\"\r\n                    : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_document_002\">\r\n            <qms-tree-new\r\n              [treeData]=\"treeData2\"\r\n              [treeConfig]=\"treeConfig2\"\r\n              [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              (selectFolderEvent)=\"getItemOfFolder($event, dataType.folder)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n            >\r\n            </qms-tree-new>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n    </div>\r\n    <div\r\n      *ngIf=\"splitView\"\r\n      class=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n        {{ splitViewTitle }}\r\n      </div>\r\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n        <mat-checkbox\r\n          qms-group-options\r\n          [disabled]=\"node.disabled\"\r\n          color=\"default\"\r\n          [checked]=\"isNodeSelected(node)\"\r\n          (change)=\"toggleSelectItem(node)\"\r\n          *ngIf=\"!hideSplitviewCheckbox\"\r\n        >\r\n        </mat-checkbox>\r\n        <button\r\n          class=\"button-boder\"\r\n          mat-icon-button\r\n          [disableRipple]=\"true\"\r\n          (click)=\"toggleSelectItem(node)\"\r\n          *ngIf=\"node.itemName\"\r\n        >\r\n          <mat-icon\r\n            class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n            [svgIcon]=\"getNodeIcon(node)\"\r\n          >\r\n          </mat-icon>\r\n        </button>\r\n        <span\r\n          class=\"text-node-item\"\r\n          style=\"cursor: pointer\"\r\n          (click)=\"toggleSelectItem(node)\"\r\n          [class.bgSelected]=\"\r\n            isSelectOne &&\r\n            idCheckIconSplitView == idToCheckSelectOne(node.id, node.parentId)\r\n          \"\r\n        >\r\n          <span\r\n            class=\"text-node\"\r\n            [class.select-one-checked]=\"\r\n              isSelectOne &&\r\n              idCheckIconSplitView == idToCheckSelectOne(node.id, node.parentId)\r\n            \"\r\n            >{{ node.itemName }}</span\r\n          >\r\n          <mat-icon\r\n            class=\"select-one-checked\"\r\n            *ngIf=\"\r\n              isSelectOne &&\r\n              idCheckIconSplitView == idToCheckSelectOne(node.id, node.parentId)\r\n            \"\r\n          >\r\n            done\r\n          </mat-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div class=\"row\">\r\n    <div class=\"col-12\">\r\n      <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n        <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n          <button\r\n            *ngIf=\"item.itemName\"\r\n            mat-button\r\n            class=\"related__item__content\"\r\n            qms-tool-tip=\"{{\r\n              isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n            }}\"\r\n            mode=\"dark\"\r\n          >\r\n            <span class=\"related__item__content_name\" #itemName>{{\r\n              getItemChipName(item)\r\n            }}</span>\r\n            <mat-icon\r\n              *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n              (click)=\"removeCheckedNodeList(item)\"\r\n            >\r\n              cancel</mat-icon\r\n            >\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button\r\n      *ngIf=\"!checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 7px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 0px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button\r\n      qms-btn-text\r\n      [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
+                template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n    <input type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput [formControl]=\"myControl\" [matAutocomplete]=\"auto\" />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <mat-autocomplete #auto=\"matAutocomplete\" class=\"mat-autocomplete_related-viewport\"\r\n    (optionSelected)=\"selectRelated($event.option.value)\" [displayWith]=\"displayWhenSelectRelatedOption\">\r\n    <cdk-virtual-scroll-viewport qms-scrollbar itemSize=\"10\" [class.related-viewport]=\"isInputValue\"\r\n      *ngIf=\"filteredOptions.length\">\r\n      <ng-container *ngFor=\"let type of searchOrder\">\r\n        <div class=\"search__module-result\" *ngIf=\"canShowSearchOption(type.value)\">\r\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n          <mat-option class=\"search__option\" *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n            [value]=\"option\" [disabled]=\"option.disabled\">\r\n            <qms-list-item type=\"image-square\">\r\n              <mat-icon leading-icon type=\"image-square\" [svgIcon]=\"getNodeIcon(option)\"></mat-icon>\r\n              <div qms-list-header>\r\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                  {{ option.itemName }}\r\n                </div>\r\n                <div class=\"caption\" *ngIf=\"option.breadcumbs && option.breadcumbs.length\">\r\n                  <qms-breadcrumb class=\"breadcrumb-container\" type=\"table\" numDisplayItem=\"1\"\r\n                    [nodes]=\"option.breadcumbs\">\r\n                  </qms-breadcrumb>\r\n                </div>\r\n              </div>\r\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n                <span>\r\n                  <mat-icon class=\"material-icons-outlined search__description-icon\">local_offer</mat-icon>\r\n                </span>\r\n                {{ getItemId(option) }}\r\n              </div>\r\n            </qms-list-item>\r\n          </mat-option>\r\n        </div>\r\n      </ng-container>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div class=\"qms-scrollbar qmslib_related_popup_content\" [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length,\r\n        'col-6': splitView,\r\n        'col-12': !splitView\r\n      }\">\r\n      <ng-container *ngIf=\"treeData1.length > 0\">\r\n        <div *ngIf=\"moduleId === module.documentProcess\" class=\"line__divider\"></div>\r\n        <mat-expansion-panel hideToggle id=\"qmslib_related_popup_common_001\" [expanded]=\"isCommonExpanded\"\r\n          class=\"panel-tree-min-width\" (opened)=\"isCommonExpanded = true\" (closed)=\"isCommonExpanded = false\"\r\n          [class.panel-tree]=\"isCommonExpanded\">\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n              {{ LANG.PROCESSES | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_common_002\">\r\n            <qms-tree-new [treeData]=\"treeData1\" [treeConfig]=\"treeConfig1\" [selectedData]=\"selectedData\"\r\n              [selectedRiskData]=\"selectedRiskData\" [disabledList]=\"disabledList\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              (selectFolderEvent)=\"getItemOfFolder($event, dataType.area)\" [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\" (treeControlNodes)=\"selectTreeControlNodeProcess($event)\">\r\n            </qms-tree-new>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"treeData2.length > 0\">\r\n        <div *ngIf=\"moduleId === module.documentProcess\" class=\"line__divider\"></div>\r\n\r\n        <mat-expansion-panel hideToggle *ngIf=\"moduleId === module.documentProcess\" class=\"panel-tree-min-width\"\r\n          id=\"qmslib_related_popup_document_001\" [expanded]=\"isDocumentExpanded\" (opened)=\"isDocumentExpanded = true\"\r\n          (closed)=\"isDocumentExpanded = false\" [class.panel-tree]=\"isDocumentExpanded\">\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title>\r\n              {{ LANG.DOCUMENTS | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                isDocumentExpanded\r\n                ? \"keyboard_arrow_up\"\r\n                : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_document_002\">\r\n            <qms-tree-new [treeData]=\"treeData2\" [treeConfig]=\"treeConfig2\" [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\" (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              (selectFolderEvent)=\"getItemOfFolder($event, dataType.folder)\" [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\" (treeControlNodes)=\"selectTreeControlNodeDocument($event)\">\r\n            </qms-tree-new>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n    </div>\r\n    <div *ngIf=\"splitView\" class=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\">\r\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n        {{ splitViewTitle }}\r\n      </div>\r\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n        <mat-checkbox qms-group-options [disabled]=\"node.disabled\" color=\"default\" [checked]=\"isNodeSelected(node)\"\r\n          (change)=\"toggleSelectItem(node)\" *ngIf=\"!hideSplitviewCheckbox\">\r\n        </mat-checkbox>\r\n        <button class=\"button-boder\" mat-icon-button [disableRipple]=\"true\" (click)=\"toggleSelectItem(node)\"\r\n          *ngIf=\"node.itemName\">\r\n          <mat-icon class=\"mat-icon-rtl-mirror material-icons-outlined\" [svgIcon]=\"getNodeIcon(node)\">\r\n          </mat-icon>\r\n        </button>\r\n        <span class=\"text-node-item\" style=\"cursor: pointer\" (click)=\"toggleSelectItem(node)\" [class.bgSelected]=\"\r\n            isSelectOne &&\r\n            idCheckIconSplitView == idToCheckSelectOne(node.id, node.parentId)\r\n          \">\r\n          <span class=\"text-node\" [class.select-one-checked]=\"\r\n              isSelectOne &&\r\n              idCheckIconSplitView == idToCheckSelectOne(node.id, node.parentId)\r\n            \">{{ node.itemName }}</span>\r\n          <mat-icon class=\"select-one-checked\" *ngIf=\"\r\n              isSelectOne &&\r\n              idCheckIconSplitView == idToCheckSelectOne(node.id, node.parentId)\r\n            \">\r\n            done\r\n          </mat-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div class=\"row\">\r\n    <div class=\"col-12\">\r\n      <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n        <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n          <button *ngIf=\"item.itemName\" mat-button class=\"related__item__content\" qms-tool-tip=\"{{\r\n              isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n            }}\" mode=\"dark\">\r\n            <span class=\"related__item__content_name\" #itemName>{{\r\n              getItemChipName(item)\r\n              }}</span>\r\n            <mat-icon *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\" (click)=\"removeCheckedNodeList(item)\">\r\n              cancel</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button *ngIf=\"!checkedNodeList.length\" qms-btn style=\"margin-top: 7px\" (click)=\"onAddClick()\">\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button *ngIf=\"checkedNodeList.length\" qms-btn style=\"margin-top: 0px\" (click)=\"onAddClick()\">\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button qms-btn-text [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\" (click)=\"onCloseClick()\">\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>",
                 encapsulation: ViewEncapsulation.None,
-                styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree{overflow:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .text-node-item{margin-left:8px;display:flex;align-items:center;min-height:32px;justify-content:space-between;width:100%}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .text-node-item .select-one-checked{color:var(--primary)}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-container .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:300px}"]
+                styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree-min-width{min-width:-webkit-fill-available}.qmslib__related__popup__container .panel-tree{overflow:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .text-node-item{margin-left:8px;display:flex;align-items:center;min-height:32px;justify-content:space-between;width:100%}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .text-node-item .select-one-checked{color:var(--primary)}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-container .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:300px}"]
             },] }
 ];
 SelectProcessDocumentPopupComponent.ctorParameters = () => [
@@ -29193,7 +29269,7 @@ class QMSPaginatorComponent {
             this.numberOfPages.push(index);
         }
         this.minPage = 1;
-        this.maxpage = this.numberOfPages.length;
+        this.maxpage = this.numberOfPages.length ? this.numberOfPages.length : 1;
         this.renderDisplayNumberOfpages();
     }
     renderDisplayNumberOfpages() {
@@ -29573,6 +29649,10 @@ class QMSSelectDepartmentTreeConfig {
         this.resetToggleIncludeChildWhenChangeView = true;
         this.isIncludeChildren = false;
         this.tooltipIncludeLabel = '';
+        this.canAddNullResult = false;
+        this.handleCheckAllItemSearch = true;
+        this.spinnerWhenGetMore = true;
+        this.disableToggleIncludeChildWhenChangeView = true;
     }
 }
 
@@ -30128,6 +30208,7 @@ class SelectDepartmentTreeComponent {
                         ], isLoading: false }));
                 });
                 this.textSearchSubject$.next(this.formSearchControl.value);
+                this.checkListSelectionSearch.clear();
                 this._mapToResultSearch();
                 this.setIndexView(1);
             }
@@ -30419,6 +30500,9 @@ class SelectDepartmentTreeComponent {
         this.getActiveNodeEvent$.next(nodeId);
     }
     onSearch() {
+        var _a;
+        if (!this.formSearchControl.value || ((_a = this.formSearchControl.value) === null || _a === void 0 ? void 0 : _a.trim()) === '')
+            return;
         this.getLoading$.next(true);
         this.setIndexView(1);
         this.onSearchEvent.emit(this.formSearchControl.value);
@@ -30549,19 +30633,21 @@ class SelectDepartmentTreeComponent {
         checked = !checked;
         if (!this.resultSearch.length)
             return;
-        for (let i = 0; i < this.resultSearch.length; i++) {
-            const item = this.resultSearch[i];
-            if (checked) {
-                const canSelect = this.treeControl.dataNodes.some(node => node.id === item.id) || this.config.lazy;
-                !this.checkListSelectionSearch.isSelected(item) && canSelect && this.checkListSelectionSearch.select(item);
-                continue;
+        if (this.config.handleCheckAllItemSearch) {
+            for (let i = 0; i < this.resultSearch.length; i++) {
+                const item = this.resultSearch[i];
+                if (checked) {
+                    const canSelect = this.treeControl.dataNodes.some(node => node.id === item.id) || this.config.lazy;
+                    !this.checkListSelectionSearch.isSelected(item) && canSelect && this.checkListSelectionSearch.select(item);
+                    continue;
+                }
+                const _itemSelection = this.checkListSelectionSearch.selected.find(x => x.id === item.id);
+                if (!!_itemSelection)
+                    this.checkListSelectionSearch.deselect(_itemSelection);
             }
-            const _itemSelection = this.checkListSelectionSearch.selected.find(x => x.id === item.id);
-            if (!!_itemSelection)
-                this.checkListSelectionSearch.deselect(_itemSelection);
+            if (!this.config.lazy || !this._handlingLazyObject.checkAllSearch)
+                this.resultSearch.forEach(item => this._handleCheckResutlSearch(item));
         }
-        if (!this.config.lazy || !this._handlingLazyObject.checkAllSearch)
-            this.resultSearch.forEach(item => this._handleCheckResutlSearch(item));
         this.onCheckAllItemSearchEvent.emit(checked);
         this.onValueChangeEvent.emit(this.resultSelected);
     }
@@ -30719,7 +30805,7 @@ class SelectDepartmentTreeComponent {
 SelectDepartmentTreeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-select-department-tree',
-                template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\r\n  <div class=\"input-select-department\">\r\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\r\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\r\n        <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"Search\" matInput />\r\n        <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\r\n          <mat-icon>search</mat-icon>\r\n        </button>\r\n        <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\r\n          *ngIf=\"getLoading$.value\"></mat-progress-spinner>\r\n        <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\r\n          <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </mat-form-field>\r\n    </form>\r\n    <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\r\n      class=\"sub-text ms-1 fw500\">\r\n      {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\r\n    </div>\r\n    <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\r\n      class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end  align-items-center\">\r\n      <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\r\n        [disabled]=\"(getIndexView$ | async) === 1\" [(ngModel)]=\"isIncludeChildren\"\r\n        (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\" qms-group-options>\r\n        <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n      </mat-slide-toggle>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\r\n        (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n      <button class=\"btn-arrow\" [@inOutAnimation]\r\n        *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\r\n        (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_forward</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div [@inOutAnimation]\r\n    *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\r\n    class=\"header-view-tree\">\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.treeName}}\r\n    </div>\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.externalName}}\r\n    </div>\r\n  </div>\r\n  <mat-divider class=\"mx-auto\"></mat-divider>\r\n  <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\r\n    minHeight: height\r\n  }\" class=\"tree-department-wrapper\">\r\n    <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\r\n      <div class=\"tree-view-main h100\">\r\n        <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\r\n          class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\r\n          <!-- Checkbox all root node -->\r\n          <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\r\n            [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\">\r\n            <span class=\"text-label \">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{treeControl.dataNodes.length}}</b>)</span>\r\n          </mat-checkbox>\r\n          <mat-divider class=\"mx-auto\"></mat-divider>\r\n        </div>\r\n        <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\r\n                    'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\r\n                    'select-department-tree': true\r\n                  }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\r\n          <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\r\n            <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\r\n              [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\r\n                              'mat-tree-node-disabled-all': node.disabled,\r\n                              'w-100': config.isSelectOne,\r\n                              'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\r\n                              'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\r\n                              'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\r\n                              'node-loading': node.isLoading\r\n                        }\">\r\n              <div class=\"node-expand-area\">\r\n                <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\"\r\n                  *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\r\n                  <mat-icon>\r\n                    {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n                  </mat-icon>\r\n                </button>\r\n                <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\r\n              </div>\r\n              <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n                [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\r\n                <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\r\n                  {{node.externalName || ''}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </cdk-virtual-scroll-viewport>\r\n        <ng-container [@inOutAnimation] *ngIf=\"getLoadingMore$| async ;then maskOverlay\">\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\r\n      height: height\r\n    }\" class=\"qms-view-search-result\">\r\n      <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n        class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.resultSearchName}}\r\n          </span>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.externalName}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\r\n      <div class=\"qms-view-search-result__wrapper\"\r\n        [class.active-external]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n        *ngIf=\"!!resultSearch.length && !getLoading$.value\">\r\n        <div class=\"\">\r\n          <mat-checkbox [@inOutAnimation]\r\n            [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n            [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n            (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n            <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{resultSearch.length}}</b>)</span>\r\n          </mat-checkbox>\r\n        </div>\r\n        <div [@inOutAnimation] [@listAnimation]\r\n          [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\r\n          <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\r\n            position=\"top\" *ngFor=\"let item of resultSearch\"\r\n            (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n            [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\r\n            <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading\" [disabled]=\"item.disabled\"\r\n              (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n              [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\r\n            </mat-checkbox>\r\n            <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\r\n              <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\r\n            </div>\r\n            <div class=\"result-item__content\">\r\n              <div class=\"item-result-content-wraper\">\r\n                <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\r\n                <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\r\n                  [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\r\n                  [nodes]=\"item.location\">\r\n                </qms-breadcrumb>\r\n                <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\r\n                  <span qms-elipsify mode=\"dark\" position=\"top\"\r\n                    class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\r\n                </div>\r\n              </div>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\r\n                <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n        <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n      </div>\r\n      <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\r\n        class=\"mx-auto\"></mat-divider>\r\n      <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\r\n        [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\r\n        [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\r\n        [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\r\n      </qms-paginator>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Template for Checkbox -->\r\n  <ng-template #showCheckboxTemplate let-node=\"node\">\r\n    <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\r\n      [disabled]=\"node.isLoading\" [checked]=\"checkListSelection.isSelected(node)\"\r\n      (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\r\n      <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\r\n        [src]=\"node.itemIconSvg\" />\r\n      <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n        class=\"material-icons-outlined type-icon\"></span>\r\n      <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n        node.itemMatIcon }}\r\n      </span>\r\n      <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name}}\r\n      </span>\r\n    </mat-checkbox>\r\n  </ng-template>\r\n\r\n  <!-- Template node without checkbox -->\r\n  <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\r\n    <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\r\n      <div class=\"node-info\">\r\n        <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n          class=\"material-icons-outlined type-icon\"></span>\r\n        <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n          node.itemMatIcon }}\r\n        </span>\r\n        <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\r\n      </div>\r\n      <div class=\"node-state\">\r\n        <mat-icon *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #noResult>\r\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n    <path\r\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\r\n      fill=\"#0163B3\" />\r\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\r\n  </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div [ngStyle]=\"{\r\n    'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\r\n  }\" class=\"qms-loading-container\">\r\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\r\n      <div class=\"qms-loader__wrapper\">\r\n        <div class=\"row-loader\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Template mask overlay -->\r\n<ng-template #maskOverlay>\r\n  <div class=\"mask-overlay\">\r\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\"></mat-spinner>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Loading spinner -->\r\n<ng-template #loadingSpinner>\r\n  <div class=\"qms-spinner center\">\r\n    <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\r\n  </div>\r\n</ng-template>",
+                template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\r\n  <div class=\"input-select-department\">\r\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\r\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\r\n        <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"Search\" matInput />\r\n        <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\r\n          <mat-icon>search</mat-icon>\r\n        </button>\r\n        <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\r\n          *ngIf=\"getLoading$.value\"></mat-progress-spinner>\r\n        <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\r\n          <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </mat-form-field>\r\n    </form>\r\n    <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\r\n      class=\"sub-text ms-1 fw500\">\r\n      {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\r\n    </div>\r\n    <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\r\n      class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end  align-items-center\">\r\n      <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\r\n        [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\r\n        [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\r\n        qms-group-options>\r\n        <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n      </mat-slide-toggle>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\r\n        (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n      <button class=\"btn-arrow\" [@inOutAnimation]\r\n        *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\r\n        (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_forward</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div [@inOutAnimation]\r\n    *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\r\n    class=\"header-view-tree\">\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.treeName}}\r\n    </div>\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.externalName}}\r\n    </div>\r\n  </div>\r\n  <mat-divider class=\"mx-auto\"></mat-divider>\r\n  <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\r\n    minHeight: height\r\n  }\" class=\"tree-department-wrapper\">\r\n    <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\r\n      <div class=\"tree-view-main h100\">\r\n        <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\r\n          class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\r\n          <!-- Checkbox all root node -->\r\n          <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\r\n            [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\">\r\n            <span class=\"text-label \">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{treeControl.dataNodes.length}}</b>)</span>\r\n          </mat-checkbox>\r\n          <mat-divider class=\"mx-auto\"></mat-divider>\r\n        </div>\r\n        <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\r\n                    'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\r\n                    'select-department-tree': true\r\n                  }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\r\n          <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\r\n            <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\r\n              [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\r\n                              'mat-tree-node-disabled-all': node.disabled,\r\n                              'w-100': config.isSelectOne,\r\n                              'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\r\n                              'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\r\n                              'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\r\n                              'node-loading': node.isLoading\r\n                        }\">\r\n              <div class=\"node-expand-area\">\r\n                <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\"\r\n                  *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\r\n                  <mat-icon>\r\n                    {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n                  </mat-icon>\r\n                </button>\r\n                <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\r\n              </div>\r\n              <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n                [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\r\n                <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\r\n                  {{node.externalName || ''}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </cdk-virtual-scroll-viewport>\r\n        <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\r\n      height: height\r\n    }\" class=\"qms-view-search-result\">\r\n      <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n        class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.resultSearchName}}\r\n          </span>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.externalName}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\r\n      <div class=\"qms-view-search-result__wrapper\"\r\n        [class.active-external]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n        *ngIf=\"!!resultSearch.length && !getLoading$.value\">\r\n        <div class=\"\">\r\n          <mat-checkbox [@inOutAnimation]\r\n            [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n            [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n            (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n            <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{resultSearch.length}}</b>)</span>\r\n          </mat-checkbox>\r\n        </div>\r\n        <div [@inOutAnimation] [@listAnimation]\r\n          [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\r\n          <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\r\n            position=\"top\" *ngFor=\"let item of resultSearch\"\r\n            (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n            [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\r\n            <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading\" [disabled]=\"item.disabled\"\r\n              (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n              [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\r\n            </mat-checkbox>\r\n            <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\r\n              <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\r\n            </div>\r\n            <div class=\"result-item__content\">\r\n              <div class=\"item-result-content-wraper\">\r\n                <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\r\n                <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\r\n                  [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\r\n                  [nodes]=\"item.location\">\r\n                </qms-breadcrumb>\r\n                <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\r\n                  <span qms-elipsify mode=\"dark\" position=\"top\"\r\n                    class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\r\n                </div>\r\n              </div>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\r\n                <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n        <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n      </div>\r\n      <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\r\n        class=\"mx-auto\"></mat-divider>\r\n      <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\r\n        [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\r\n        [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\r\n        [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\r\n      </qms-paginator>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Template for Checkbox -->\r\n  <ng-template #showCheckboxTemplate let-node=\"node\">\r\n    <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\r\n      [disabled]=\"node.isLoading\" [checked]=\"checkListSelection.isSelected(node)\"\r\n      (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\r\n      <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\r\n        [src]=\"node.itemIconSvg\" />\r\n      <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n        class=\"material-icons-outlined type-icon\"></span>\r\n      <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n        node.itemMatIcon }}\r\n      </span>\r\n      <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name}}\r\n      </span>\r\n    </mat-checkbox>\r\n  </ng-template>\r\n\r\n  <!-- Template node without checkbox -->\r\n  <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\r\n    <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\r\n      <div class=\"node-info\">\r\n        <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n          class=\"material-icons-outlined type-icon\"></span>\r\n        <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n          node.itemMatIcon }}\r\n        </span>\r\n        <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\r\n      </div>\r\n      <div class=\"node-state\">\r\n        <mat-icon *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #noResult>\r\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n    <path\r\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\r\n      fill=\"#0163B3\" />\r\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\r\n  </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div [ngStyle]=\"{\r\n    'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\r\n  }\" class=\"qms-loading-container\">\r\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\r\n      <div class=\"qms-loader__wrapper\">\r\n        <div class=\"row-loader\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Template mask overlay -->\r\n<ng-template #maskOverlay>\r\n  <div class=\"mask-overlay\">\r\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\"></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
                 ],
@@ -31014,7 +31100,7 @@ class SelectDepartmentComponent {
   * @returns
   */
     onBeforeCheckItemSearch(item, callback) {
-        this.treeDepartment.onBeforeCheckItemSearch(item, callback);
+        return this.treeDepartment.onBeforeCheckItemSearch(item, callback);
     }
     setLoadingStateNode(isLoading, nodeId) {
         !!this.treeDepartment && this.treeDepartment.setLoadingStateNode(isLoading, nodeId);
@@ -31094,7 +31180,7 @@ class SelectDepartmentComponent {
 SelectDepartmentComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-select-department',
-                template: "<div class=\"qms-select-department\">\r\n  <div class=\"header-dialog mb-2\">\r\n    <span>{{popupData.headerName}}</span>\r\n    <button matDialogClose class=\"btn-close-dialog\" color=\"light\" qms-btn-icon>\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n  <div>\r\n    <div class=\"qms-scrollbar\">\r\n      <div>\r\n        <qms-select-department-tree #treeDepartment customClass=\"custom-department-tree\"\r\n          [height]=\"popupData.config.isMobile ? '38vh' : '50vh'\" [rowsSkeleton]=\"9\" [config]=\"popupData.config\"\r\n          (onSearchEvent)=\"onSearchEvent.emit($event)\" (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\r\n          (onPagingSearchEvent)=\"onPagingEvent.emit($event)\" (onCheckNodeEvent)=\"onCheckNodeEvent.emit($event)\"\r\n          (onExpandNodeEvent)=\"onExpandNodeEvent.emit($event)\" (onLoadMoreEvent)=\"onLoadMoreEvent.emit()\"\r\n          (onCheckAllItemSearchEvent)=\"onCheckAllItemSearchEvent.emit($event)\"\r\n          (onCheckItemSearchEvent)=\"onCheckItemSearchEvent.emit($event)\"\r\n          (toggleIncludeChildEvent)=\"toggleIncludeChildEvent.emit($event)\">\r\n        </qms-select-department-tree>\r\n      </div>\r\n    </div>\r\n    <div class=\"line__divider\"></div>\r\n    <div [@heightAnimation] *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length\" class=\" pr-0 pe-0\">\r\n      <div class=\"header-title\">{{LANG.RESULTS}}</div>\r\n      <div class=\"result-content pr-0 pe-0\">\r\n        <mat-chip-list class=\"panel__item qms-scrollbar\">\r\n          <div [@inOutAnimation_2] [id]=\"'item-result-'+item.id\" *ngFor=\"let item of treeDepartment.resultSelected\">\r\n            <mat-chip [@updateItemAnimation] *qmsContentChanges=\"item.children?.length\"\r\n              [qms-tool-tip]=\"generateTootip(item)\" position=\"top\" mode=\"dark\" qms-chip [removable]=\"true\">\r\n              <span (click)=\"onScrollToNode(item)\" qms-chip-body>\r\n                <span class=\"related__item__content_name\" #itemName>\r\n                  <span>{{item.name}}</span>\r\n                  <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && !popupData.config.lazy\">\r\n                    {{item.children.length}}/{{item.childCount}}\r\n                  </span>\r\n                  <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && popupData.config.lazy\">\r\n                    {{item.selectedChildCount}}/{{item.childCount}}\r\n                  </span>\r\n                </span>\r\n              </span>\r\n              <mat-icon *ngIf=\"!isNodeLoading(item.id); else loadingSpinner\"\r\n                (click)=\"onRemoveNode(item)\">cancel</mat-icon>\r\n            </mat-chip>\r\n          </div>\r\n        </mat-chip-list>\r\n      </div>\r\n    </div>\r\n    <mat-divider *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length\" class=\"mx-auto\"></mat-divider>\r\n    <div class=\"confirm__button__groups\">\r\n      <button (click)=\"onCloseDialog()\" class=\"btn-add\" [disabled]=\"!resultSelected.length\"\r\n        [class.qms-btn-disabled]=\"!resultSelected.length\" qms-btn>\r\n        <span>{{LANG.ADD}}</span>\r\n        <span>\r\n          ({{treeDepartment.resultSelected.length}})\r\n        </span>\r\n      </button>\r\n      <button qms-btn-text mat-dialog-close>\r\n        Cancel\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Loading spinner -->\r\n<ng-template #loadingSpinner>\r\n  <div class=\"qms-spinner-wrapper\">\r\n    <div class=\"qms-spinner center\">\r\n      <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\r\n    </div>\r\n  </div>\r\n</ng-template>",
+                template: "<div class=\"qms-select-department\">\r\n  <div class=\"header-dialog mb-2\">\r\n    <span>{{popupData.headerName}}</span>\r\n    <button matDialogClose class=\"btn-close-dialog\" color=\"light\" qms-btn-icon>\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n  <div>\r\n    <div class=\"qms-scrollbar\">\r\n      <div>\r\n        <qms-select-department-tree #treeDepartment customClass=\"custom-department-tree\"\r\n          [height]=\"popupData.config.isMobile ? '38vh' : '50vh'\" [rowsSkeleton]=\"9\" [config]=\"popupData.config\"\r\n          (onSearchEvent)=\"onSearchEvent.emit($event)\" (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\r\n          (onPagingSearchEvent)=\"onPagingEvent.emit($event)\" (onCheckNodeEvent)=\"onCheckNodeEvent.emit($event)\"\r\n          (onExpandNodeEvent)=\"onExpandNodeEvent.emit($event)\" (onLoadMoreEvent)=\"onLoadMoreEvent.emit()\"\r\n          (onCheckAllItemSearchEvent)=\"onCheckAllItemSearchEvent.emit($event)\"\r\n          (onCheckItemSearchEvent)=\"onCheckItemSearchEvent.emit($event)\"\r\n          (toggleIncludeChildEvent)=\"toggleIncludeChildEvent.emit($event)\">\r\n        </qms-select-department-tree>\r\n      </div>\r\n    </div>\r\n    <div class=\"line__divider\"></div>\r\n    <div [@heightAnimation] *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length\" class=\" pr-0 pe-0\">\r\n      <div class=\"header-title\">{{LANG.RESULTS}}</div>\r\n      <div class=\"result-content pr-0 pe-0\">\r\n        <mat-chip-list class=\"panel__item qms-scrollbar\">\r\n          <div [@inOutAnimation_2] [id]=\"'item-result-'+item.id\" *ngFor=\"let item of treeDepartment.resultSelected\">\r\n            <mat-chip [@updateItemAnimation] *qmsContentChanges=\"item.children?.length\"\r\n              [qms-tool-tip]=\"generateTootip(item)\" position=\"top\" mode=\"dark\" qms-chip [removable]=\"true\">\r\n              <span (click)=\"onScrollToNode(item)\" qms-chip-body>\r\n                <span class=\"related__item__content_name\" #itemName>\r\n                  <span>{{item.name}}</span>\r\n                  <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && !popupData.config.lazy\">\r\n                    {{item.children.length}}/{{item.childCount}}\r\n                  </span>\r\n                  <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && popupData.config.lazy\">\r\n                    {{item.selectedChildCount}}/{{item.childCount}}\r\n                  </span>\r\n                </span>\r\n              </span>\r\n              <mat-icon *ngIf=\"!isNodeLoading(item.id); else loadingSpinner\"\r\n                (click)=\"onRemoveNode(item)\">cancel</mat-icon>\r\n            </mat-chip>\r\n          </div>\r\n        </mat-chip-list>\r\n      </div>\r\n    </div>\r\n    <mat-divider *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length\" class=\"mx-auto\"></mat-divider>\r\n    <div class=\"confirm__button__groups\">\r\n      <button (click)=\"onCloseDialog()\" class=\"btn-add\"\r\n        [disabled]=\"!resultSelected.length && !popupData.config.canAddNullResult\"\r\n        [class.qms-btn-disabled]=\"!resultSelected.length && !popupData.config.canAddNullResult\" qms-btn>\r\n        <span>{{LANG.ADD}}</span>\r\n        <span>\r\n          ({{treeDepartment.resultSelected.length}})\r\n        </span>\r\n      </button>\r\n      <button qms-btn-text mat-dialog-close>\r\n        Cancel\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Loading spinner -->\r\n<ng-template #loadingSpinner>\r\n  <div class=\"qms-spinner-wrapper\">\r\n    <div class=\"qms-spinner center\">\r\n      <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\r\n    </div>\r\n  </div>\r\n</ng-template>",
                 providers: [
                     {
                         provide: MAT_CHECKBOX_DEFAULT_OPTIONS,