qms-angular 1.0.58 → 1.0.59

package/bundles/qms-angular.umd.js

@@ -4470,7 +4470,7 @@
                 else if (!!node.children &&
                     node.children.length &&
                     node.children.length === 1 &&
-                    !node.children[0].name.length &&
+                    !node.children[0].name &&
                     node.id.toString() === _this.areaOfCurrentProcess) {
                     checkHasChild = false;
                 }
@@ -4518,11 +4518,13 @@
                 (changes.selectedData.currentValue.length > 0 ||
                     JSON.stringify(changes.selectedData.currentValue) !==
                         JSON.stringify(changes.selectedData.previousValue))) {
-                this.checkSelected(changes.selectedData.currentValue);
-            }
-            else {
-                for (var i = 0; i < this.treeControl.dataNodes.length; i++) {
-                    this.checklistSelection.deselect(this.treeControl.dataNodes[i]);
+                if (changes.selectedData.currentValue) {
+                    this.checkSelected(changes.selectedData.currentValue);
+                }
+                else {
+                    for (var i = 0; i < this.treeControl.dataNodes.length; i++) {
+                        this.checklistSelection.deselect(this.treeControl.dataNodes[i]);
+                    }
                 }
             }
             if (changes.disabledList && JSON.stringify(changes.disabledList.currentValue) !== JSON.stringify(changes.disabledList.previousValue)) {
@@ -4534,7 +4536,7 @@
             }
         };
         TreeComponent.prototype.ngOnInit = function () {
-            this.initTreeData();
+            // this.initTreeData();
         };
         TreeComponent.prototype.initTreeData = function () {
             var _this = this;
@@ -4596,10 +4598,29 @@
                 this.checkSelected(selectedData_1);
                 this.checkBoxEvent.emit(selectedData_1);
             }
-            //check disabled list
-            this.checkDisabledList();
-            // expand to child node
-            this.openExpandToChildNode();
+            if (this.parentNodeOnClick) {
+                for (var i = 0; i < this.treeControl.dataNodes.length; i++) {
+                    var tree = this.treeControl.dataNodes[i];
+                    if (this.parentNodeOnClick.parentId === tree.id || this.parentNodeOnClick.id === tree.id) {
+                        this.getParent(tree);
+                    }
+                }
+            }
+        };
+        TreeComponent.prototype.getParent = function (node) {
+            var treeControl = this.treeControl;
+            var currentLevel = treeControl.getLevel(node);
+            if (currentLevel < 1) {
+                return null;
+            }
+            var index = treeControl.dataNodes.indexOf(node) - 1;
+            for (var i = index; i >= 0; i--) {
+                var currentNode = treeControl.dataNodes[i];
+                if (treeControl.getLevel(currentNode) < currentLevel) {
+                    treeControl.expand(currentNode);
+                    return currentNode;
+                }
+            }
         };
         TreeComponent.prototype.openExpandToChildNode = function () {
             var _this = this;
@@ -4865,7 +4886,9 @@
                     }
                 }
             });
-            this.checkBoxEvent.emit(this.checklistSelection.selected);
+            setTimeout(function () {
+                _this.checkBoxEvent.emit(_this.checklistSelection.selected);
+            }, 500);
         };
         TreeComponent.prototype.todoFolderSelection = function (nodes) {
             var _this = this;
@@ -5150,7 +5173,7 @@
     TreeComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-tree',
-                    template: "<mat-tree\r\n  [dataSource]=\"dataSource\"\r\n  [treeControl]=\"treeControl\"\r\n  class=\"tree__container\"\r\n>\r\n  <mat-tree-node\r\n    class=\"tree-branch\"\r\n    *matTreeNodeDef=\"let node\"\r\n    matTreeNodeToggle\r\n    matTreeNodePadding\r\n  >\r\n    <!-- form thu 1 - child -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    >\r\n    </mat-checkbox>\r\n\r\n    <!-- form thu 2 -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"ml-10 checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <div\r\n      class=\"expand-node\"\r\n      *ngIf=\"node.name && !onlyFolder\"\r\n      [class.bgSelected]=\"treeConfig.selectOne && idCheckIcon == node.id\"\r\n      (click)=\"selectNode(node)\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <div class=\"expand-node__text\">\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.name && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n        >\r\n          {{ itemIcon }}\r\n        </mat-icon>\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.svg && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"itemIconSvg\"\r\n        >\r\n        </mat-icon>\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.path && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon\"\r\n          [src]=\"itemIconPath\"\r\n        />\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.base64 && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon image-base64\"\r\n          [src]=\"getImagePath()\"\r\n        />\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.none && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getItemIcon(node)\"\r\n        ></mat-icon>\r\n        <span class=\"text-node\">{{ node.name }}</span>\r\n      </div>\r\n      <mat-icon\r\n        class=\"icon-check\"\r\n        *ngIf=\"treeConfig.selectOne && idCheckIcon == node.id\"\r\n        >done</mat-icon\r\n      >\r\n    </div>\r\n  </mat-tree-node>\r\n\r\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n    <!-- form thu 1 - parent -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"showCheckBox && !onlyCheckBoxForChild\"\r\n      [checked]=\"descendantsAllSelected(node)\"\r\n      [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <button\r\n      class=\"button-boder\"\r\n      mat-icon-button\r\n      matTreeNodeToggle\r\n      [disableRipple]=\"!node.hasChild\"\r\n      [attr.aria-label]=\"'toggle ' + node.filename\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"openIcon && closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngStyle]=\"{\r\n          color: treeControl.isExpanded(node) ? openIconColor : closeIconColor\r\n        }\"\r\n        >{{ getNodeIcon(node) }}</mat-icon\r\n      >\r\n      <mat-icon\r\n        *ngIf=\"!openIcon || !closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngClass]=\"{\r\n          'open-icon': treeControl.isExpanded(node),\r\n          'not-department-icon': moduleId !== dataType.document\r\n        }\"\r\n        [svgIcon]=\"getNodeIcon(node)\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <span\r\n      *ngIf=\"expandOnTitleClick\"\r\n      matTreeNodeToggle\r\n      class=\"text-node-parent\"\r\n      style=\"cursor: pointer\"\r\n      (click)=\"onExpandNode(node)\"\r\n      [ngStyle]=\"{\r\n        color: treeControl.isExpanded(node) ? openIconColor : '#000000'\r\n      }\"\r\n    >\r\n      <span>{{ node.name }}</span>\r\n      <mat-icon\r\n        class=\"icon-check\"\r\n        *ngIf=\"treeConfig.selectOne && idCheckIcon == node.id\"\r\n        >done</mat-icon\r\n      >\r\n    </span>\r\n    <span\r\n      *ngIf=\"!expandOnTitleClick\"\r\n      class=\"text-node-parent\"\r\n      (click)=\"selectFolderNode(node)\"\r\n      style=\"cursor: pointer\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <span>{{ node.name }}</span>\r\n      <mat-icon\r\n        class=\"icon-check\"\r\n        *ngIf=\"treeConfig.selectOne && idCheckIcon == node.id\"\r\n        >done</mat-icon\r\n      >\r\n    </span>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n",
+                    template: "<mat-tree\r\n  [dataSource]=\"dataSource\"\r\n  [treeControl]=\"treeControl\"\r\n  class=\"tree__container\"\r\n>\r\n  <mat-tree-node\r\n    class=\"tree-branch\"\r\n    *matTreeNodeDef=\"let node\"\r\n    matTreeNodeToggle\r\n    matTreeNodePadding\r\n  >\r\n    <!-- form thu 1 - child -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    >\r\n    </mat-checkbox>\r\n\r\n    <!-- form thu 2 -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"ml-10 checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <div\r\n      class=\"expand-node\"\r\n      *ngIf=\"node.name && !onlyFolder\"\r\n      [class.bgSelected]=\"treeConfig.selectOne && idCheckIcon == node.id\"\r\n      (click)=\"selectNode(node)\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <div class=\"expand-node__text\">\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.name && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n        >\r\n          {{ itemIcon }}\r\n        </mat-icon>\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.svg && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"itemIconSvg\"\r\n        >\r\n        </mat-icon>\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.path && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon\"\r\n          [src]=\"itemIconPath\"\r\n        />\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.base64 && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon image-base64\"\r\n          [src]=\"getImagePath()\"\r\n        />\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.none && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getItemIcon(node)\"\r\n        ></mat-icon>\r\n        <span class=\"text-node\">{{ node.name }}</span>\r\n      </div>\r\n      <mat-icon\r\n        class=\"icon-check\"\r\n        *ngIf=\"treeConfig.selectOne && idCheckIcon == node.id\"\r\n        >done</mat-icon\r\n      >\r\n    </div>\r\n  </mat-tree-node>\r\n\r\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n    <!-- form thu 1 - parent -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild\"\r\n      [checked]=\"descendantsAllSelected(node)\"\r\n      [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <button\r\n      class=\"button-boder\"\r\n      mat-icon-button\r\n      matTreeNodeToggle\r\n      [disableRipple]=\"!node.hasChild\"\r\n      [attr.aria-label]=\"'toggle ' + node.filename\"\r\n      *ngIf=\"node.name\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"openIcon && closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngStyle]=\"{\r\n          color: treeControl.isExpanded(node) ? openIconColor : closeIconColor\r\n        }\"\r\n        >{{ getNodeIcon(node) }}</mat-icon\r\n      >\r\n      <mat-icon\r\n        *ngIf=\"!openIcon || !closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngClass]=\"{\r\n          'open-icon': treeControl.isExpanded(node),\r\n          'not-department-icon': moduleId !== dataType.document\r\n        }\"\r\n        [svgIcon]=\"getNodeIcon(node)\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <span\r\n      *ngIf=\"expandOnTitleClick\"\r\n      matTreeNodeToggle\r\n      class=\"text-node-parent\"\r\n      style=\"cursor: pointer\"\r\n      (click)=\"onExpandNode(node)\"\r\n      [ngStyle]=\"{\r\n        color: treeControl.isExpanded(node) ? openIconColor : '#000000'\r\n      }\"\r\n    >\r\n      <span>{{ node.name }}</span>\r\n      <mat-icon\r\n        class=\"icon-check\"\r\n        *ngIf=\"treeConfig.selectOne && idCheckIcon == node.id\"\r\n        >done</mat-icon\r\n      >\r\n    </span>\r\n    <span\r\n      *ngIf=\"!expandOnTitleClick\"\r\n      class=\"text-node-parent\"\r\n      (click)=\"selectFolderNode(node)\"\r\n      style=\"cursor: pointer\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <span>{{ node.name }}</span>\r\n      <mat-icon\r\n        class=\"icon-check\"\r\n        *ngIf=\"treeConfig.selectOne && idCheckIcon == node.id\"\r\n        >done</mat-icon\r\n      >\r\n    </span>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n",
                     encapsulation: i0.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}.tree__container{font-family:Open Sans;font-style:normal;font-weight:400;font-size:.875rem;line-height:19px;color:#323232}.tree__container .mat-tree-node{color:#000;min-height:0}.tree__container .mat-tree-node .mat-checkbox.qms-group-options{padding:0}.tree__container .mat-tree-node .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.tree__container .button{margin-left:6px}.tree__container .button:focus,.tree__container .button:hover{background-color:#009ef2;border-radius:2px;width:auto}.tree__container .button-boder:focus,.tree__container .button:focus{outline:0}.tree__container .button-folder-boder:focus{outline:0}.tree__container .button-folder-boder:focus,.tree__container .button-folder-boder:hover{background-color:#009ef2;border-radius:2px;width:auto}.tree__container .expand-node{margin-left:8px;min-height:32px;justify-content:space-between;width:100%}.tree__container .expand-node,.tree__container .expand-node .expand-node__text{display:flex;align-items:center}.tree__container .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}.tree__container .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.tree__container .expand-node.bgSelected .icon-check{color:#1954a9}.tree__container .text-node-parent{width:100%;display:flex;align-items:center;justify-content:space-between;margin-left:10px;cursor:pointer}.tree__container .text-node-parent.active-item{color:#1954a9!important}.tree__container .text-node-parent.bgSelected .icon-check{color:#1954a9}.tree__container .mr-11{margin-right:11px}.tree__container .ml-10{margin-left:10px}.tree__container .tree-branch:hover{background-color:#e5eefb}.tree__container .image-base64{width:20px;height:20px}.tree__container .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}::ng-deep .mat-tree .mat-checkbox.qms-group-options{padding:0}::ng-deep .mat-tree .mat-checkbox.qms-group-options.mat-checkbox-checked{background-color:transparent}::ng-deep .mat-tree .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:0}svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.open-icon.not-department-icon svg path,.open-icon svg path:first-child{fill:#1954a9}"]
                 },] }
@@ -5169,6 +5192,7 @@
         disabledList: [{ type: i0.Input }],
         expandOnTitleClick: [{ type: i0.Input }],
         expandToChildNode: [{ type: i0.Input }],
+        parentNodeOnClick: [{ type: i0.Input }],
         selectNodeEvent: [{ type: i0.Output }],
         selectFolderEvent: [{ type: i0.Output }],
         checkBoxEvent: [{ type: i0.Output }],
@@ -5433,6 +5457,12 @@
         return SearchRelatedItemsToRisk;
     }());
 
+    var TreeModel = /** @class */ (function () {
+        function TreeModel() {
+        }
+        return TreeModel;
+    }());
+
     var QMSRelatedGlobalService = /** @class */ (function () {
         function QMSRelatedGlobalService() {
             this.searchRelated = new rxjs.BehaviorSubject([]);
@@ -5452,6 +5482,12 @@
     ];
     QMSRelatedGlobalService.ctorParameters = function () { return []; };
 
+    var TreeFlatNode = /** @class */ (function () {
+        function TreeFlatNode() {
+        }
+        return TreeFlatNode;
+    }());
+
     var RelatedPopupComponent = /** @class */ (function () {
         function RelatedPopupComponent(cdRef, translate, dialogRef, globalService, iconRegistry, sanitizer, appIconService, elem, data) {
             this.cdRef = cdRef;
@@ -5495,6 +5531,7 @@
             this.listChildrenSelectOne = [];
             this.onSearch = new i0.EventEmitter();
             this.onExpandFolder = new i0.EventEmitter();
+            this.parentNodeSelected = new TreeFlatNode();
             this.moduleId = data.moduleId;
             this.moduleName = data.moduleName;
             this.treeData1 = data.treeData1;
@@ -5541,8 +5578,82 @@
                 }
             });
             this.globalService.splitViewValue.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
-                if (res) {
-                    _this.itemInSplitview = res;
+                _this.itemInSplitview = res;
+                if (res.length) {
+                    var listNodeProcess_1 = [];
+                    var listNodeDocs_1 = [];
+                    res.forEach(function (item) {
+                        if (item.itemType === DataType$1.process) {
+                            var newNodeProcess = new TreeModel();
+                            newNodeProcess.childId = item.id;
+                            newNodeProcess.childName = item.itemName;
+                            newNodeProcess.displayId = +item.itemNumberId;
+                            newNodeProcess.parentId = "";
+                            newNodeProcess.rootId = item.parentId;
+                            newNodeProcess.rootName = item === null || item === void 0 ? void 0 : item.parentName;
+                            newNodeProcess.subName = null;
+                            newNodeProcess.statusId = item.status;
+                            listNodeProcess_1.push(newNodeProcess);
+                        }
+                        else {
+                            var newNodeDocs = new TreeModel();
+                            newNodeDocs.childId = item.id;
+                            newNodeDocs.childName = item.itemName;
+                            newNodeDocs.displayId = +item.itemNumberId;
+                            newNodeDocs.parentId = "";
+                            newNodeDocs.rootId = item.parentId;
+                            newNodeDocs.rootName = item === null || item === void 0 ? void 0 : item.parentName;
+                            newNodeDocs.subName = null;
+                            newNodeDocs.statusId = item.status;
+                            listNodeDocs_1.push(newNodeDocs);
+                        }
+                    });
+                    var idsProcess_1 = new Set(_this.treeData1.map(function (d) { return d.childId; }));
+                    _this.treeData1 = __spreadArray(__spreadArray([], __read(_this.treeData1)), __read(listNodeProcess_1.filter(function (d) { return !idsProcess_1.has(d.childId); })));
+                    var idsDocs_1 = new Set(_this.treeData2.map(function (d) { return d.childId; }));
+                    _this.treeData2 = __spreadArray(__spreadArray([], __read(_this.treeData2)), __read(listNodeDocs_1.filter(function (d) { return !idsDocs_1.has(d.childId); })));
+                    if (_this.checkedNodeList.length) {
+                        _this.selectedData = [];
+                        _this.selectedData2 = [];
+                        var selectProcess_1 = [];
+                        var selectDocument_1 = [];
+                        _this.checkedNodeList.forEach(function (x) {
+                            if (x.itemType === DataType$1.area || x.itemType === DataType$1.process) {
+                                _this.treeData1.forEach(function (item) {
+                                    if (item.childId && x.id === item.childId || !item.childId && (x.id === item.rootId)) {
+                                        selectProcess_1.push({
+                                            disabled: false,
+                                            expandable: x.itemType == DataType$1.area ? true : false,
+                                            hasChild: x.itemType == DataType$1.area ? true : false,
+                                            id: x.id,
+                                            level: 0,
+                                            levelType: undefined,
+                                            name: x.itemName,
+                                            parentId: x.parentId
+                                        });
+                                    }
+                                });
+                            }
+                            else {
+                                _this.treeData2.forEach(function (item) {
+                                    if (item.childId && x.id === item.childId || !item.childId && (x.id === item.rootId)) {
+                                        selectDocument_1.push({
+                                            disabled: false,
+                                            expandable: x.itemType == DataType$1.folder ? true : false,
+                                            hasChild: x.itemType == DataType$1.folder ? true : false,
+                                            id: x.id,
+                                            level: 0,
+                                            levelType: undefined,
+                                            name: x.itemName,
+                                            parentId: x.parentId
+                                        });
+                                    }
+                                });
+                            }
+                        });
+                        _this.selectedData = __spreadArray(__spreadArray([], __read(_this.selectedData)), __read(selectProcess_1));
+                        _this.selectedData2 = __spreadArray(__spreadArray([], __read(_this.selectedData2)), __read(selectDocument_1));
+                    }
                 }
             });
             this.myControl.valueChanges.pipe(operators.debounceTime(1000)).subscribe(function (val) {
@@ -5680,7 +5791,8 @@
             return related ? related.itemName : undefined;
         };
         RelatedPopupComponent.prototype.selectRelated = function (item) {
-            var _a, _b;
+            var _this = this;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             if (((_a = this.treeConfig1) === null || _a === void 0 ? void 0 : _a.selectOne) || ((_b = this.treeConfig2) === null || _b === void 0 ? void 0 : _b.selectOne)) {
                 this.disabledList = [];
                 this.disabledList2 = [];
@@ -5712,6 +5824,78 @@
                         };
                         this.dataTrees.toArray()[1].todoItemSelection([treeNode]);
                     }
+                    else {
+                        var newNodeDocs_1 = new TreeModel();
+                        newNodeDocs_1.rootId = (_c = item.breadcumbs[item.breadcumbs.length - 1]) === null || _c === void 0 ? void 0 : _c['id'];
+                        newNodeDocs_1.rootName = (_d = item.breadcumbs[item.breadcumbs.length - 1]) === null || _d === void 0 ? void 0 : _d['name'];
+                        newNodeDocs_1.parentId = '';
+                        newNodeDocs_1.subName = null;
+                        newNodeDocs_1.childId = item.id;
+                        newNodeDocs_1.childName = item.itemName;
+                        newNodeDocs_1.statusId = item === null || item === void 0 ? void 0 : item['itemStatus'];
+                        newNodeDocs_1.displayId = +item.itemNumberId;
+                        this.treeData2 = __spreadArray(__spreadArray([], __read(this.treeData2)), [newNodeDocs_1]);
+                        var newSelectedDocs = new TreeFlatNode();
+                        newSelectedDocs.disabled = false;
+                        newSelectedDocs.expandable = false;
+                        newSelectedDocs.hasChild = false;
+                        newSelectedDocs.id = item.id;
+                        newSelectedDocs.level = 0;
+                        newSelectedDocs.levelType = undefined;
+                        newSelectedDocs.name = item.itemName;
+                        newSelectedDocs.parentId = (_e = item.breadcumbs[item.breadcumbs.length - 1]) === null || _e === void 0 ? void 0 : _e['id'];
+                        this.selectedData2 = [];
+                        this.selectedData = [];
+                        var selectProcess_2 = [];
+                        var selectDocument_2 = [];
+                        if (this.checkedNodeList.length) {
+                            this.checkedNodeList.forEach(function (x) {
+                                if (x.itemType === DataType$1.area || x.itemType === DataType$1.process) {
+                                    _this.treeData1.forEach(function (item) {
+                                        if (item.childId && x.id === item.childId || !item.childId && (x.id === item.rootId)) {
+                                            selectProcess_2.push({
+                                                disabled: false,
+                                                expandable: x.itemType == DataType$1.area ? true : false,
+                                                hasChild: x.itemType == DataType$1.area ? true : false,
+                                                id: x.id,
+                                                level: 0,
+                                                levelType: undefined,
+                                                name: x.itemName,
+                                                parentId: x.parentId
+                                            });
+                                        }
+                                    });
+                                }
+                                else {
+                                    _this.treeData2.forEach(function (item) {
+                                        if (item.childId && x.id === item.childId || !item.childId && (x.id === item.rootId)) {
+                                            selectDocument_2.push({
+                                                disabled: false,
+                                                expandable: x.itemType == DataType$1.folder ? true : false,
+                                                hasChild: x.itemType == DataType$1.folder ? true : false,
+                                                id: x.id,
+                                                level: 0,
+                                                levelType: undefined,
+                                                name: x.itemName,
+                                                parentId: x.parentId
+                                            });
+                                        }
+                                    });
+                                }
+                            });
+                        }
+                        this.selectedData = __spreadArray(__spreadArray([], __read(this.selectedData)), __read(selectProcess_2));
+                        this.selectedData2 = __spreadArray(__spreadArray(__spreadArray([], __read(this.selectedData2)), __read(selectDocument_2)), [newSelectedDocs]);
+                        setTimeout(function () {
+                            var treeNode = {
+                                id: newNodeDocs_1.childId,
+                                name: newNodeDocs_1.childName,
+                                children: [],
+                                parentId: newNodeDocs_1.rootId
+                            };
+                            _this.dataTrees.toArray()[1].todoItemSelection([treeNode]);
+                        }, 500);
+                    }
                 }
                 else if (item.itemType === this.dataType.folder) {
                     position = this.treeData2.findIndex(function (x) {
@@ -5727,7 +5911,9 @@
                                 itemName: item.itemName,
                                 itemType: typeId,
                                 itemNumberId: item.itemNumberId,
-                                levelType: item.levelType
+                                levelType: item.levelType,
+                                parentId: item.parentId,
+                                parentName: item.parentName
                             });
                         }
                         else {
@@ -5772,7 +5958,9 @@
                                 itemName: node.rootName,
                                 itemType: typeId,
                                 itemNumberId: item.itemNumberId,
-                                levelType: item.levelType
+                                levelType: item.levelType,
+                                parentId: item.parentId,
+                                parentName: item.parentName
                             });
                         }
                         else {
@@ -5798,7 +5986,7 @@
                 else if (item.itemType === this.dataType.deviation ||
                     item.itemType === this.dataType.checklist) {
                     position = this.treeData1.findIndex(function (x) {
-                        return x.childId.toLowerCase() === item.id.toLowerCase();
+                        return x.childId && x.childId.toLowerCase() === item.id.toLowerCase();
                     });
                     if (position >= 0) {
                         node = this.treeData1[position];
@@ -5814,17 +6002,91 @@
                 }
                 else {
                     position = this.treeData1.findIndex(function (x) {
-                        return x.childId.toLowerCase() === item.id.toLowerCase();
+                        return x.childId && x.childId.toLowerCase() === item.id.toLowerCase();
                     });
-                    node = this.treeData1[position];
-                    typeId = this.itemType;
-                    var treeNode = {
-                        id: node.childId,
-                        name: node.childName,
-                        children: [],
-                        parentId: node.rootId
-                    };
-                    this.dataTrees.toArray()[0].todoItemSelection([treeNode]);
+                    if (position >= 0) {
+                        node = this.treeData1[position];
+                        typeId = this.itemType;
+                        var treeNode = {
+                            id: node.childId,
+                            name: node.childName,
+                            children: [],
+                            parentId: node.rootId
+                        };
+                        this.dataTrees.toArray()[0].todoItemSelection([treeNode]);
+                    }
+                    else {
+                        var newNodeProcess_1 = new TreeModel();
+                        newNodeProcess_1.rootId = (_f = item.breadcumbs[item.breadcumbs.length - 1]) === null || _f === void 0 ? void 0 : _f['id'];
+                        newNodeProcess_1.rootName = (_g = item.breadcumbs[item.breadcumbs.length - 1]) === null || _g === void 0 ? void 0 : _g['name'];
+                        newNodeProcess_1.parentId = '';
+                        newNodeProcess_1.subName = null;
+                        newNodeProcess_1.childId = item.id;
+                        newNodeProcess_1.childName = item.itemName;
+                        newNodeProcess_1.statusId = item === null || item === void 0 ? void 0 : item['itemStatus'];
+                        newNodeProcess_1.displayId = +item.itemNumberId;
+                        this.treeData1 = __spreadArray(__spreadArray([], __read(this.treeData1)), [newNodeProcess_1]);
+                        var newSelectedProcess = new TreeFlatNode();
+                        newSelectedProcess.disabled = false;
+                        newSelectedProcess.expandable = false;
+                        newSelectedProcess.hasChild = false;
+                        newSelectedProcess.id = item.id;
+                        newSelectedProcess.level = 0;
+                        newSelectedProcess.levelType = undefined;
+                        newSelectedProcess.name = item.itemName;
+                        newSelectedProcess.parentId = (_h = item.breadcumbs[item.breadcumbs.length - 1]) === null || _h === void 0 ? void 0 : _h['id'];
+                        this.selectedData = [];
+                        this.selectedData2 = [];
+                        var selectProcess_3 = [];
+                        var selectDocument_3 = [];
+                        if (this.checkedNodeList.length) {
+                            this.checkedNodeList.forEach(function (x) {
+                                if (x.itemType === DataType$1.area || x.itemType === DataType$1.process) {
+                                    _this.treeData1.forEach(function (item) {
+                                        if (item.childId && x.id === item.childId || !item.childId && (x.id === item.rootId)) {
+                                            selectProcess_3.push({
+                                                disabled: false,
+                                                expandable: x.itemType == DataType$1.area ? true : false,
+                                                hasChild: x.itemType == DataType$1.area ? true : false,
+                                                id: x.id,
+                                                level: 0,
+                                                levelType: undefined,
+                                                name: x.itemName,
+                                                parentId: x.parentId
+                                            });
+                                        }
+                                    });
+                                }
+                                else {
+                                    _this.treeData2.forEach(function (item) {
+                                        if (item.childId && x.id === item.childId || !item.childId && (x.id === item.rootId)) {
+                                            selectDocument_3.push({
+                                                disabled: false,
+                                                expandable: x.itemType == DataType$1.folder ? true : false,
+                                                hasChild: x.itemType == DataType$1.folder ? true : false,
+                                                id: x.id,
+                                                level: 0,
+                                                levelType: undefined,
+                                                name: x.itemName,
+                                                parentId: x.parentId
+                                            });
+                                        }
+                                    });
+                                }
+                            });
+                        }
+                        this.selectedData = __spreadArray(__spreadArray(__spreadArray([], __read(this.selectedData)), __read(selectProcess_3)), [newSelectedProcess]);
+                        this.selectedData2 = __spreadArray(__spreadArray([], __read(this.selectedData2)), __read(selectDocument_3));
+                        setTimeout(function () {
+                            var treeNode = {
+                                id: newNodeProcess_1.childId,
+                                name: newNodeProcess_1.childName,
+                                children: [],
+                                parentId: newNodeProcess_1.rootId
+                            };
+                            _this.dataTrees.toArray()[0].todoItemSelection([treeNode]);
+                        }, 500);
+                    }
                 }
             }
         };
@@ -5860,7 +6122,8 @@
                             itemName: x.name,
                             itemType: itemType,
                             itemNumberId: item.displayId.toString(),
-                            parentId: item.rootId
+                            parentId: item.rootId,
+                            parentName: item.rootName
                         });
                     });
                 }
@@ -6182,18 +6445,20 @@
                 [].forEach.call(itemElement, function (el) {
                     el.classList.add('active-item');
                 });
-                var item = new IRelated();
-                item.id = node.id;
-                item.itemType = type;
-                item.itemName = node.name;
-                item.levelType = node.levelType;
-                this.selectedFolder = node;
                 if (type === this.dataType.folder) {
                     this.splitViewTitle = this.LANG.MESSAGE.DOCUMENTS_IN.toUpperCase() + " \"" + node.name + "\"";
                 }
                 else if (type === this.dataType.area) {
                     this.splitViewTitle = this.LANG.MESSAGE.PROCESSES_IN.toUpperCase() + " \"" + node.name + "\"";
                 }
+                var item = new IRelated();
+                item.id = node.id;
+                item.itemType = type;
+                item.itemName = node.name;
+                item.levelType = node.levelType;
+                this.selectedFolder = node;
+                this.parentNodeSelected = new TreeFlatNode();
+                this.parentNodeSelected = Object.assign({}, node);
                 this.onExpandFolder.emit(item);
             }
         };
@@ -6246,7 +6511,7 @@
     RelatedPopupComponent.decorators = [
         { type: i0.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          ></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          ></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\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",
                     encapsulation: i0.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}"]
                 },] }
@@ -6705,18 +6970,6 @@
                 },] }
     ];
 
-    var TreeFlatNode = /** @class */ (function () {
-        function TreeFlatNode() {
-        }
-        return TreeFlatNode;
-    }());
-
-    var TreeModel = /** @class */ (function () {
-        function TreeModel() {
-        }
-        return TreeModel;
-    }());
-
     var TreeConfig = /** @class */ (function () {
         function TreeConfig() {
         }