qms-angular 1.0.60 → 1.0.64

package/fesm2015/qms-angular.js

@@ -639,21 +639,17 @@ class QMSComment {
             const changedProp = changes[propName];
             const to = JSON.stringify(changedProp.currentValue);
             if (changedProp.isFirstChange()) {
-                console.log('Initial value of');
             }
             else {
                 const from = JSON.stringify(changedProp.previousValue);
-                console.log('changed from');
             }
         }
-        console.log('value changed', changes.sourceLog.currentValue);
         // this.sourceLog = changes.sourceLog.currentValue;
     }
     ngOnInit() {
         this.trans.getLanguageSubject$.pipe().subscribe((res) => {
             if (res) {
                 this.LANG = this.trans.getObjectLang(res);
-                console.log(this.LANG);
             }
         });
     }
@@ -3609,6 +3605,14 @@ class QMSBreadcrumbItemDirective {
             }
         }
     }
+    ngOnChanges() {
+        if (this.isLastItem) {
+            this.ele.nativeElement.classList.add('qms-breadcrumb-last-item');
+        }
+        else {
+            this.ele.nativeElement.classList.remove('qms-breadcrumb-last-item');
+        }
+    }
     ngOnInit() {
         if (this.ele) {
             this.ele.nativeElement.classList.add('qms-breadcrumb-item');
@@ -3657,34 +3661,7 @@ class QMSBreadcrumb {
         iconRegistry.addSvgIconLiteral('breadcrumb_dropdown', sanitizer.bypassSecurityTrustHtml(BREADCRUMB_DROPDOWN_ICON));
     }
     ngAfterViewInit() {
-        if (!this.isMobileType && this.ele.nativeElement.offsetWidth) {
-            if (!this.maxLine || this.maxLine < 2) {
-                this.checkOverflow(this.ele.nativeElement.offsetWidth);
-            }
-            else {
-                this.checkOverflow(this.ele.nativeElement.offsetWidth * 1.7);
-            }
-        }
-        //show number Items after 3 dot icon
-        if (+this.numDisplayItem > 0 && this.itemNodes.length >= 2) {
-            this.dropdownNodes = [];
-            this.dropdownNodes = this.itemNodes.slice(0, -this.numDisplayItem).reverse();
-            this.itemNodes = [...[], ...this.itemNodes.slice(-this.numDisplayItem)];
-            this.isOverflow = true;
-            this.cdRef.detectChanges();
-        }
-        //just show 1 item for mobile
-        if (this.onlyItem) {
-            this.isOverflow = true;
-            this.dropdownNodes = [];
-            let itemNodes = [...this.itemNodes];
-            let lastItem = itemNodes.pop();
-            this.dropdownNodes = [...itemNodes].reverse();
-            this.dropdownNodes.push(this.homeNode);
-            this.itemNodes = [];
-            this.itemNodes = [lastItem];
-            this.cdRef.detectChanges();
-        }
+        this.buildBreadcrumb();
     }
     checkOverflow(width) {
         const nodeWidths = this.breadCrumbNodes.map(x => x.ele.nativeElement.offsetWidth);
@@ -3718,8 +3695,18 @@ class QMSBreadcrumb {
             this.dropdownNodes = this.dropdownNodes.reverse();
         }
     }
+    ngOnChanges(changes) {
+        if (changes.nodes && this.breadCrumbNodes && JSON.stringify(changes.nodes.currentValue) !== JSON.stringify(changes.nodes.previousValue)) {
+            this.nodes = [...changes.nodes.currentValue];
+            this.initBreadCrumb();
+            this.buildBreadcrumb();
+        }
+    }
     ngOnInit() {
         this.itemIconType = ItemIconType;
+        this.initBreadCrumb();
+    }
+    initBreadCrumb() {
         if (this.nodes && this.nodes.length > 0) {
             this.nodes.forEach(ele => {
                 ele.isOverflow = ele.isOverflow ? ele.isOverflow : false;
@@ -3743,6 +3730,37 @@ class QMSBreadcrumb {
             this.ele.nativeElement.classList.add('qms-breadcrumb__multi-line');
         }
     }
+    buildBreadcrumb() {
+        if (!this.isMobileType && this.ele.nativeElement.offsetWidth) {
+            this.dropdownNodes = [];
+            if (!this.maxLine || this.maxLine < 2) {
+                this.checkOverflow(this.ele.nativeElement.offsetWidth);
+            }
+            else {
+                this.checkOverflow(this.ele.nativeElement.offsetWidth * 1.7);
+            }
+        }
+        //show number Items after 3 dot icon
+        if (+this.numDisplayItem > 0 && this.itemNodes.length >= 2) {
+            this.dropdownNodes = [];
+            this.dropdownNodes = this.itemNodes.slice(0, -this.numDisplayItem).reverse();
+            this.itemNodes = [...[], ...this.itemNodes.slice(-this.numDisplayItem)];
+            this.isOverflow = true;
+            this.cdRef.detectChanges();
+        }
+        //just show 1 item for mobile
+        if (this.onlyItem) {
+            this.isOverflow = true;
+            this.dropdownNodes = [];
+            let itemNodes = [...this.itemNodes];
+            let lastItem = itemNodes.pop();
+            this.dropdownNodes = [...itemNodes].reverse();
+            this.dropdownNodes.push(this.homeNode);
+            this.itemNodes = [];
+            this.itemNodes = [lastItem];
+            this.cdRef.detectChanges();
+        }
+    }
     getItemIconType(treeConfig) {
         if (treeConfig.itemIcon)
             return ItemIconType.name;
@@ -3969,6 +3987,9 @@ const TreeFunctions = {
     findChild: findChild$1
 };
 
+class TreeFlatNode {
+}
+
 class TreeComponent {
     constructor(cdRef, domSanitizer, iconRegistry, appIconService) {
         this.cdRef = cdRef;
@@ -3986,6 +4007,7 @@ class TreeComponent {
         this.childCheckedEvent = new EventEmitter();
         this.nodeExpandEvent = new EventEmitter();
         this.getChildNodeSelectOne = new EventEmitter();
+        this.treeControlNodes = new EventEmitter();
         this.listParentObj = {};
         this.filterData = [];
         this.arrIndex = [];
@@ -4156,13 +4178,22 @@ class TreeComponent {
             this.checkSelected(selectedData);
             this.checkBoxEvent.emit(selectedData);
         }
-        if (this.parentNodeOnClick) {
+        // keep expand
+        if (this.parentNodeOnClick && Object.keys(this.parentNodeOnClick).length) {
+            let tempParent = [];
+            let root = new TreeFlatNode();
             for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
                 const tree = this.treeControl.dataNodes[i];
-                if (this.parentNodeOnClick.parentId === tree.id || this.parentNodeOnClick.id === tree.id) {
-                    this.getParent(tree);
+                if (this.parentNodeOnClick.parentId === tree.parentId && this.parentNodeOnClick.id === tree.id
+                    || this.parentNodeOnClick.parentId === tree.id) {
+                    tempParent = [...tempParent, this.getParent(tree)];
+                    root = tree;
                 }
             }
+            tempParent.push(root);
+            tempParent.forEach(x => {
+                this.treeControl.expand(x);
+            });
         }
     }
     getParent(node) {
@@ -4175,7 +4206,6 @@ class TreeComponent {
         for (let i = index; i >= 0; i--) {
             const currentNode = treeControl.dataNodes[i];
             if (treeControl.getLevel(currentNode) < currentLevel) {
-                treeControl.expand(currentNode);
                 return currentNode;
             }
         }
@@ -4413,6 +4443,19 @@ class TreeComponent {
         this.checkBoxEvent.emit(this.checklistSelection.selected);
     }
     todoItemSelection(nodes) {
+        nodes.forEach(node => {
+            for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
+                if (this.treeControl.dataNodes[i].id === node.id &&
+                    this.treeControl.dataNodes[i].parentId === node.parentId &&
+                    !this.treeControl.dataNodes[i].disabled && !this.treeControl.dataNodes[i].expandable) {
+                    if (!this.checklistSelection.isSelected(this.treeControl.dataNodes[i]))
+                        this.checklistSelection.toggle(this.treeControl.dataNodes[i]);
+                }
+            }
+        });
+        this.checkBoxEvent.emit(this.checklistSelection.selected);
+    }
+    todoItemSelectionProcessDocument(nodes) {
         nodes.forEach(node => {
             for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
                 if (this.treeControl.dataNodes[i].id === node.id &&
@@ -4425,6 +4468,7 @@ class TreeComponent {
         });
         setTimeout(() => {
             this.checkBoxEvent.emit(this.checklistSelection.selected);
+            this.treeControlNodes.emit(this.treeControl);
         }, 500);
     }
     todoFolderSelection(nodes) {
@@ -4711,7 +4755,8 @@ TreeComponent.propDecorators = {
     checkBoxEvent: [{ type: Output }],
     childCheckedEvent: [{ type: Output }],
     nodeExpandEvent: [{ type: Output }],
-    getChildNodeSelectOne: [{ type: Output }]
+    getChildNodeSelectOne: [{ type: Output }],
+    treeControlNodes: [{ type: Output }]
 };
 
 class QMSTreeModule {
@@ -4886,7 +4931,7 @@ class RelatedListComponent {
 RelatedListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-related-list',
-                template: "<div class=\"container list-related\">\r\n  <div class=\"list-related__title\">\r\n    <strong>{{ title }}</strong>\r\n  </div>\r\n  <div\r\n    class=\"list-related__body\"\r\n    *ngFor=\"let item of relatedData; let i = index\"\r\n  >\r\n    <div class=\"list-related__body-parent\">\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(item)\"\r\n        ></mat-icon>\r\n        <div qms-list-header>\r\n          <div\r\n            qms-line\r\n            type=\"subtitle\"\r\n            class=\"search__option-name\"\r\n            (click)=\"onItemClick(item)\"\r\n          >\r\n            <div class=\"caption\" *ngIf=\"canShowParent(item)\">\r\n              {{ item?.parentName }}\r\n            </div>\r\n            <span class=\"cursor\">{{ item.itemName }}</span>\r\n          </div>\r\n          <div\r\n            class=\"caption\"\r\n            *ngIf=\"item.breadcumbs && item.breadcumbs.length\"\r\n          >\r\n            <qms-breadcrumb\r\n              class=\"breadcrumb-containe\"\r\n              type=\"table\"\r\n              numDisplayItem=\"1\"\r\n              [nodes]=\"item.breadcumbs\"\r\n            >\r\n            </qms-breadcrumb>\r\n          </div>\r\n        </div>\r\n        <div qms-line color=\"default-subtitle\" *ngIf=\"item?.displayId\">\r\n          <span class=\"material-icons-outlined\"> local_offer </span> ID:\r\n          {{ item?.displayId }} {{ getItemStatus(item) }}\r\n        </div>\r\n      </qms-list-item>\r\n      <div class=\"block\" *ngIf=\"!isNotEditedItem\">\r\n        <button qms-btn-icon color=\"light\" mode=\"dark\" (click)=\"removeItem(i)\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"container list-related\">\r\n  <div class=\"list-related__title\">\r\n    <strong>{{ title }}</strong>\r\n  </div>\r\n  <div\r\n    class=\"list-related__body\"\r\n    *ngFor=\"let item of relatedData; let i = index\"\r\n  >\r\n    <div class=\"list-related__body-parent\">\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(item)\"\r\n        ></mat-icon>\r\n        <div qms-list-header>\r\n          <div\r\n            qms-line\r\n            type=\"subtitle\"\r\n            class=\"search__option-name\"\r\n            (click)=\"onItemClick(item)\"\r\n          >\r\n            <div class=\"caption\" *ngIf=\"canShowParent(item)\">\r\n              {{ item?.parentName }}\r\n            </div>\r\n            <span class=\"cursor\">{{ item.itemName }}</span>\r\n          </div>\r\n          <div\r\n            class=\"caption\"\r\n            *ngIf=\"item.breadcumbs && item.breadcumbs.length\"\r\n          >\r\n            <qms-breadcrumb\r\n              class=\"breadcrumb-containe\"\r\n              type=\"table\"\r\n              numDisplayItem=\"1\"\r\n              [nodes]=\"item.breadcumbs\"\r\n            >\r\n            </qms-breadcrumb>\r\n          </div>\r\n        </div>\r\n        <div qms-line color=\"default-subtitle\" *ngIf=\"item?.displayId\">\r\n          <ng-container *ngIf=\"item?.displayId\">\r\n            <span class=\"material-icons-outlined\"> local_offer </span> ID:\r\n            {{ item?.displayId }}\r\n          </ng-container>\r\n          <ng-container *ngIf=\"item.statusName\">\r\n            {{ getItemStatus(item) }}</ng-container\r\n          >\r\n        </div>\r\n      </qms-list-item>\r\n      <div class=\"block\" *ngIf=\"!isNotEditedItem\">\r\n        <button qms-btn-icon color=\"light\" mode=\"dark\" (click)=\"removeItem(i)\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 encapsulation: ViewEncapsulation.None,
                 styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.list-related{font-family:Open Sans;font-style:normal;font-weight:400;color:#323232}.list-related .list-related__title{font-weight:600;font-size:.875rem;line-height:22px;margin-bottom:1rem}.list-related .list-related__body .list-related__body-parent{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-parent .qms-list-item.mat-2-line.image-item{height:auto}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-item-content{margin:0}.list-related .list-related__body .list-related__body-parent .wrap-image.image-square,.list-related .list-related__body .list-related__body-parent .wrap-image.image-square img{background:transparent;margin:auto;height:24px;width:24px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box{margin-left:1.5rem;border-bottom:none;padding-bottom:7px;padding-top:7px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text .material-icons-outlined,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box .material-icons-outlined{font-size:13px}.list-related .list-related__body .list-related__body-parent .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}.list-related .list-related__body .list-related__body-parent .block{font-weight:400;font-size:1rem;line-height:28px;display:flex;align-items:center}.list-related .list-related__body .list-related__body-parent .block .title{margin-left:1.5rem;padding-top:5px;padding-bottom:5px}.list-related .list-related__body .list-related__body-parent .block .title .caption{color:rgba(0,0,0,.6);font-size:.75rem;line-height:22px}.list-related .list-related__body .list-related__body-parent .block mat-icon{color:rgba(0,0,0,.6);padding:0}.list-related .list-related__body .list-related__body-parent .block button.qms-btn-icon{width:40px;height:40px;line-height:40px}.list-related .list-related__body .list-related__body-child{font-weight:400;font-size:.875rem;line-height:22px}.list-related .list-related__body .list-related__body-child .default{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-child .default .title{margin-left:3rem}.list-related .list-related__body .list-related__body-child .default .group-button{margin-right:2rem;display:flex}.list-related .list-related__body .remain{font-weight:600;font-size:.875rem;line-height:22px;display:flex;align-items:center;justify-content:space-between;background-color:#fafafa;color:#1954a9;min-height:48px;border-bottom:1px solid #ddd}.list-related .list-related__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:#9e360f;color:#fff}.label-yellow{background-color:#e4cf53;color:rgba(0,0,0,.87)}.label-green{background-color:#00804c;color:#fff}.cursor{cursor:pointer}"]
             },] }
@@ -4904,6 +4949,9 @@ RelatedListComponent.propDecorators = {
     onItemSelect: [{ type: Output }]
 };
 
+class TreeModel {
+}
+
 var ModuleType$1;
 (function (ModuleType) {
     ModuleType[ModuleType["documentProcess"] = 1] = "documentProcess";
@@ -4944,9 +4992,6 @@ class SearchRelatedItemsToChecklist {
 class SearchRelatedItemsToRisk {
 }
 
-class TreeModel {
-}
-
 class QMSRelatedGlobalService {
     constructor() {
         this.searchRelated = new BehaviorSubject([]);
@@ -4965,9 +5010,6 @@ QMSRelatedGlobalService.decorators = [
 ];
 QMSRelatedGlobalService.ctorParameters = () => [];
 
-class TreeFlatNode {
-}
-
 class RelatedPopupComponent {
     constructor(cdRef, translate, dialogRef, globalService, iconRegistry, sanitizer, appIconService, elem, data) {
         this.cdRef = cdRef;
@@ -5042,7 +5084,7 @@ class RelatedPopupComponent {
     }
     onMessage(event) {
         if (event.data === RelatedConst.HIDE_SEARCH_RESULT) {
-            this.autoComplete.closePanel();
+            // this.autoComplete.closePanel();
         }
     }
     ngOnInit() {
@@ -5084,6 +5126,7 @@ class RelatedPopupComponent {
                         newNodeDocs.rootName = item === null || item === void 0 ? void 0 : item.parentName;
                         newNodeDocs.subName = null;
                         newNodeDocs.statusId = item.status;
+                        newNodeDocs.statusName = item.statusName;
                         listNodeDocs.push(newNodeDocs);
                     }
                 });
@@ -5143,14 +5186,13 @@ class RelatedPopupComponent {
         this.searchOrder = this.getSearchOrder();
     }
     ngAfterViewChecked() {
-        this.cdRef.detectChanges();
-        if (this.filteredOptions && this.filteredOptions.length) {
-            this.autoComplete.openPanel();
-            this.setResultHeight();
-        }
-        else if (this.autoComplete) {
-            this.autoComplete.closePanel();
-        }
+        // this.cdRef.detectChanges();
+        // if (this.filteredOptions && this.filteredOptions.length) {
+        //   this.autoComplete.openPanel();
+        //   this.setResultHeight();
+        // } else if (this.autoComplete) {
+        //   this.autoComplete.closePanel();
+        // }
     }
     getDataTypeId(moduleId) {
         let itemType;
@@ -5241,6 +5283,7 @@ class RelatedPopupComponent {
         this.filteredOptions = [];
         if (typeof (_val) === 'object') {
             this.myControl.setValue('');
+            this.isInputValue = false;
         }
         else if (typeof (_val) === 'string') {
             if (!!_val) {
@@ -5263,7 +5306,7 @@ class RelatedPopupComponent {
         return this.filteredOptions.filter(x => x.itemType === moduleId);
     }
     showSearchResult() {
-        this.autoComplete.openPanel();
+        // this.autoComplete.openPanel();
     }
     displayRelated(related) {
         return related ? related.itemName : undefined;
@@ -5286,7 +5329,13 @@ class RelatedPopupComponent {
             let node;
             let typeId;
             if (item.itemType === this.dataType.document) {
-                // document
+                // document  
+                const isExistInDisabled = this.disabledList2.findIndex(x => {
+                    return x.id && x.id.toLowerCase() === item.id.toLowerCase();
+                });
+                if (isExistInDisabled >= 0) {
+                    return;
+                }
                 position = this.treeData2.findIndex(x => {
                     return x.childId === item.id;
                 });
@@ -5299,7 +5348,7 @@ class RelatedPopupComponent {
                         children: [],
                         parentId: node.rootId
                     };
-                    this.dataTrees.toArray()[1].todoItemSelection([treeNode]);
+                    this.dataTrees.toArray()[1].todoItemSelectionProcessDocument([treeNode]);
                 }
                 else {
                     let newNodeDocs = new TreeModel();
@@ -5310,6 +5359,7 @@ class RelatedPopupComponent {
                     newNodeDocs.childId = item.id;
                     newNodeDocs.childName = item.itemName;
                     newNodeDocs.statusId = item === null || item === void 0 ? void 0 : item['itemStatus'];
+                    newNodeDocs.statusName = item === null || item === void 0 ? void 0 : item['statusName'];
                     newNodeDocs.displayId = +item.itemNumberId;
                     this.treeData2 = [...this.treeData2, newNodeDocs];
                     let newSelectedDocs = new TreeFlatNode();
@@ -5370,7 +5420,7 @@ class RelatedPopupComponent {
                             children: [],
                             parentId: newNodeDocs.rootId
                         };
-                        this.dataTrees.toArray()[1].todoItemSelection([treeNode]);
+                        this.dataTrees.toArray()[1].todoItemSelectionProcessDocument([treeNode]);
                     }, 500);
                 }
             }
@@ -5478,6 +5528,12 @@ class RelatedPopupComponent {
                 }
             }
             else {
+                const isExistInDisabled = this.disabledList.findIndex(x => {
+                    return x.id && x.id.toLowerCase() === item.id.toLowerCase();
+                });
+                if (isExistInDisabled >= 0) {
+                    return;
+                }
                 position = this.treeData1.findIndex(x => {
                     return x.childId && x.childId.toLowerCase() === item.id.toLowerCase();
                 });
@@ -5490,7 +5546,7 @@ class RelatedPopupComponent {
                         children: [],
                         parentId: node.rootId
                     };
-                    this.dataTrees.toArray()[0].todoItemSelection([treeNode]);
+                    this.dataTrees.toArray()[0].todoItemSelectionProcessDocument([treeNode]);
                 }
                 else {
                     let newNodeProcess = new TreeModel();
@@ -5561,7 +5617,7 @@ class RelatedPopupComponent {
                             children: [],
                             parentId: newNodeProcess.rootId
                         };
-                        this.dataTrees.toArray()[0].todoItemSelection([treeNode]);
+                        this.dataTrees.toArray()[0].todoItemSelectionProcessDocument([treeNode]);
                     }, 500);
                 }
             }
@@ -5775,12 +5831,90 @@ class RelatedPopupComponent {
         // if (this.treeConfig1.showCheckBox) {
         this.selectedFolder = null;
         this.itemInSplitview = [];
+        this.checkedNodeList.forEach(element => {
+            if (element.itemType === DataType$1.document) {
+                element.status = this.getStatusDocs(element.id);
+                element.breadcumbs = this.getBreadcumbAllParentDocs(element.id).slice(1).reverse();
+                element.statusName = this.getStatusName(element.id);
+            }
+            if (element.itemType === DataType$1.process) {
+                element.status = this.getStatusProcess(element.id);
+                element.breadcumbs = this.getBreadcumbAllParentProcess(element.id).slice(1).reverse();
+            }
+        });
         this.dialogRef.close(this.checkedNodeList);
         // }
         // else {
         //   this.dialogRef.close(this.selectedNode);
         // }
     }
+    getStatusName(id) {
+        let statusName = '';
+        this.treeData2.forEach(x => {
+            if (id.toString() === x.childId) {
+                statusName = x.statusName;
+            }
+        });
+        return statusName;
+    }
+    getBreadcumbAllParentProcess(id) {
+        let tempParent = [];
+        this.checkBreadcumbProcess(id, tempParent, function (arr) {
+            tempParent = [...arr];
+        });
+        return tempParent;
+    }
+    getBreadcumbAllParentDocs(id) {
+        let tempParent = [];
+        this.checkBreadcumbDocument(id, tempParent, function (arr) {
+            tempParent = [...arr];
+        });
+        return tempParent;
+    }
+    checkBreadcumbProcess(id, breadcumbs, callback) {
+        for (let i = 0; i < this.treeControlNodeProcess.dataNodes.length; i++) {
+            const tree = this.treeControlNodeProcess.dataNodes[i];
+            if (id == tree.id) {
+                breadcumbs = [...breadcumbs, tree];
+                if (tree.parentId) {
+                    this.checkBreadcumbProcess(tree.parentId, breadcumbs, callback);
+                }
+                else {
+                    callback(breadcumbs);
+                }
+            }
+        }
+    }
+    checkBreadcumbDocument(id, breadcumbs, callback) {
+        for (let i = 0; i < this.treeControlNodeDocument.dataNodes.length; i++) {
+            const tree = this.treeControlNodeDocument.dataNodes[i];
+            if (id == tree.id) {
+                breadcumbs = [...breadcumbs, tree];
+                if (tree.parentId) {
+                    this.checkBreadcumbDocument(tree.parentId, breadcumbs, callback);
+                }
+                else {
+                    callback(breadcumbs);
+                }
+            }
+        }
+    }
+    selectTreeControlNodeDocument(treeNodes) {
+        this.treeControlNodeDocument = null;
+        this.treeControlNodeDocument = treeNodes;
+        this.treeControlNodeDocument.dataNodes = this.treeControlNodeDocument.dataNodes.filter(x => x.name !== null && x.name !== '');
+    }
+    selectTreeControlNodeProcess(treeNodes) {
+        this.treeControlNodeProcess = null;
+        this.treeControlNodeProcess = treeNodes;
+        this.treeControlNodeProcess.dataNodes = this.treeControlNodeProcess.dataNodes.filter(x => x.name !== null && x.name !== '');
+    }
+    getStatusDocs(id) {
+        return this.treeData2.filter(x => x.childId === id)[0].statusId;
+    }
+    getStatusProcess(id) {
+        return this.treeData1.filter(x => x.childId === id)[0].statusId;
+    }
     getOffsetHeight(element, includeMargin) {
         let elmHeight = 0, elmMargin = 0;
         elmHeight = element.offsetHeight;
@@ -5986,7 +6120,7 @@ class RelatedPopupComponent {
 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      <span>{{ moduleName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    id=\"qmslib_related_popup_search\"\r\n    class=\"input__field\"\r\n    (click)=\"showSearchResult()\"\r\n  >\r\n    <input\r\n      #name\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n      #autoCompleteInputSearch\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    [displayWith]=\"displayRelated\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      class=\"related-viewport\"\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            (click)=\"selectRelated(option)\"\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-containe\"\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 class=\"material-icons-outlined search__description-icon\">\r\n                  local_offer\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      <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          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\r\n\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> {{ LANG.DOCUMENTS | uppercase }} </mat-panel-title>\r\n          <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n            <mat-icon>\r\n              {{\r\n                isDocumentExpanded ? \"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_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)=\"selectNodeTreeEvent($event)\"\r\n            (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n            [expandOnTitleClick]=\"!splitView\"\r\n            [parentNodeOnClick]=\"parentNodeSelected\"\r\n          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\r\n    </div>\r\n    <div\r\n      *ngIf=\"splitView\"\r\n      class=\"\r\n        qms-scrollbar\r\n        qmslib-related-popup-splitview qmslib_related_popup_content\r\n        col-6\r\n      \"\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 *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\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\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  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      [class.related-viewport]=\"isInputValue\"\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            (click)=\"selectRelated(option)\"\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-containe\"\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 class=\"material-icons-outlined search__description-icon\">\r\n                  local_offer\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      <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\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> {{ LANG.DOCUMENTS | uppercase }} </mat-panel-title>\r\n          <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n            <mat-icon>\r\n              {{\r\n                isDocumentExpanded ? \"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_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)=\"selectNodeTreeEvent($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    </div>\r\n    <div\r\n      *ngIf=\"splitView\"\r\n      class=\"\r\n        qms-scrollbar\r\n        qmslib-related-popup-splitview qmslib_related_popup_content\r\n        col-6\r\n      \"\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 *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\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",
                 encapsulation: ViewEncapsulation.None,
                 styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-scrollbar.none-scroll-bg::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;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:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;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:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.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:#eee}.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 .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:#e5e5e5;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:#8e8e8e;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{height:30px;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-containe .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:10.25rem}"]
             },] }