qms-angular 1.0.19 → 1.0.23

package/bundles/qms-angular.umd.js

@@ -80,6 +80,8 @@
         "NOT_ACCEPTED": "Not accepted",
         "MUST_BE_EVALUATED": "Must be evaluated",
         "ACCEPTED": "Accepted",
+        "ARCHIVED": "Archived",
+        "CAUSE": "Cause",
         "ERROR": {
             "SELECT_DANGER": "You must select one or more events"
         },
@@ -187,6 +189,8 @@
         "NOT_ACCEPTED": "Ikke akseptert",
         "MUST_BE_EVALUATED": "Må vurderes",
         "ACCEPTED": "Akseptert",
+        "ARCHIVED": "Arkivert",
+        "CAUSE": "Årsak",
         "ERROR": {
             "SELECT_DANGER": "Du må velge en eller flere hendelser"
         },
@@ -1742,7 +1746,7 @@
          */
         QMSToolTipRendererDirective.prototype.show = function () {
             //attach the component if it has not already attached to the overlay
-            if (this._overlayRef && !this._overlayRef.hasAttached()) {
+            if (this.text && this._overlayRef && !this._overlayRef.hasAttached()) {
                 var tooltipRef = this._overlayRef.attach(new portal.ComponentPortal(QMSToolTipComponent));
                 tooltipRef.instance.text = this.text;
                 if (this.mode) {
@@ -3611,15 +3615,16 @@
     }());
 
     var objData$1 = {};
+    var json = JSON;
     function buildArrayTree$1(obj, level) {
         var _this = this;
         return Object.keys(obj).reduce(function (accumulator, key) {
             var value = obj[key];
             var node = new TreeNode$1();
-            var substrings = key.split('_');
-            node.id = substrings[0];
-            node.name = substrings[1];
-            node.parentId = substrings[2];
+            var keyObj = json.parse(key);
+            node.id = keyObj["id"];
+            node.name = keyObj["name"];
+            node.parentId = keyObj["parentId"];
             if (value != null) {
                 if (typeof value === 'object') {
                     node.children = _this.buildArrayTree(value, level + 1);
@@ -3649,7 +3654,12 @@
             return x.rootId === id;
         });
         parent.forEach(function (item) {
-            objParent[item.childId + "_" + item.childName + "_" + item.rootId] = null;
+            var parentKey = {
+                id: item.childId,
+                name: item.childName,
+                parentId: item.rootId
+            };
+            objParent[json.stringify(parentKey)] = null;
         });
         // find child
         var child = array.filter(function (x) {
@@ -3658,8 +3668,13 @@
         if (child.length > 0) {
             this.findChild(id, objParent, array);
         }
+        var key = {
+            id: parent[0].rootId,
+            name: parent[0].rootName,
+            parentId: ""
+        };
         // add node to tree
-        objData$1[parent[0].rootId + "_" + parent[0].rootName + "_"] = objParent;
+        objData$1[json.stringify(key)] = objParent;
         return objData$1;
     }
     function findChild$1(id, objParent, array) {
@@ -3669,9 +3684,19 @@
         });
         subNode.forEach(function (item) {
             var processNode = {};
-            processNode[item.childId + "_" + item.childName + "_" + id] = null;
+            var nodeKey = {
+                id: item.childId,
+                name: item.childName,
+                parentId: id
+            };
+            processNode[json.stringify(nodeKey)] = null;
             _this.findChild(item.rootId, processNode, array);
-            objParent[item.rootId + "_" + item.subName + "_" + id] = Object.assign(Object.assign({}, objParent[item.rootId + "_" + item.subName + "_" + id]), processNode);
+            var key = {
+                id: item.rootId,
+                name: item.subName,
+                parentId: id
+            };
+            objParent[json.stringify(key)] = Object.assign(Object.assign({}, objParent[json.stringify(key)]), processNode);
         });
     }
     var TreeFunctions = {
@@ -3787,7 +3812,10 @@
                 this.treeData = __spreadArray(__spreadArray([], __read(this.treeData)), [changes.treeData.currentValue]);
                 this.initTreeData();
             }
-            if (changes.selectedData && JSON.stringify(changes.selectedData.currentValue) !== JSON.stringify(changes.selectedData.previousValue)) {
+            if (changes.selectedData &&
+                (changes.selectedData.currentValue.length > 0 ||
+                    JSON.stringify(changes.selectedData.currentValue) !==
+                        JSON.stringify(changes.selectedData.previousValue))) {
                 this.checkSelected(changes.selectedData.currentValue);
             }
             else {
@@ -3987,8 +4015,8 @@
             }
             else {
                 var descendants = this.treeControl.getDescendants(node).filter(function (item) { return !item.disabled; });
-                this.checkSelectedSameNode(descendants, this.checklistSelection.isSelected(node));
-                this.checklistSelection.isSelected(node)
+                this.checkSelectedSameNode(descendants, this.descendantsAllSelected(node));
+                !this.descendantsAllSelected(node)
                     ? (_a = this.checklistSelection).select.apply(_a, __spreadArray([], __read(descendants))) : (_b = this.checklistSelection).deselect.apply(_b, __spreadArray([], __read(descendants)));
                 this.cdRef.markForCheck();
                 var allNodeIsParent = this.checklistSelection.selected.every(function (child) { return child.expandable; });
@@ -4390,6 +4418,8 @@
             this.checkedNodeList = this.checkedNodeList.filter(function (x) { return (x.id !== item.id || x.parentId !== item.parentId); });
             var tempArr = [];
             var tempArrDocument = [];
+            var newSelectProcessList = [];
+            var newSelectDocumentList = [];
             this.commonCheckedList.forEach(function (element) {
                 _this.checkedNodeList.forEach(function (x) {
                     if (element.id === x.id && element.parentId === x.parentId) {
@@ -4397,6 +4427,14 @@
                     }
                 });
             });
+            this.singleProcessList.forEach(function (element) {
+                _this.checkedNodeList.forEach(function (x) {
+                    if (element.id === x.id && element.parentId === x.parentId) {
+                        newSelectProcessList.push(element);
+                    }
+                });
+            });
+            this.singleProcessList = newSelectProcessList;
             this.selectedData = __spreadArray([], __read(tempArr));
             this.documentCheckedList.forEach(function (element) {
                 _this.checkedNodeList.forEach(function (x) {
@@ -4405,6 +4443,14 @@
                     }
                 });
             });
+            this.singleDocumentList.forEach(function (element) {
+                _this.checkedNodeList.forEach(function (x) {
+                    if (element.id === x.id && element.parentId === x.parentId) {
+                        newSelectDocumentList.push(element);
+                    }
+                });
+            });
+            this.singleDocumentList = newSelectDocumentList;
             this.selectedData2 = __spreadArray([], __read(tempArrDocument));
         };
         RelatedPopupComponent.prototype.isMatchTrue = function (arr, arr2) {
@@ -4455,7 +4501,7 @@
             this.selectedNode = [];
             if (this.treeConfig1.showCheckBox) {
                 index = this.checkedNodeList.findIndex(function (x) {
-                    return x.id === item.id;
+                    return x.id === item.id && x.parentId === item.parentId;
                 });
             }
             if (index < 0) {
@@ -4484,6 +4530,7 @@
                                 id: item.id,
                                 itemName: item.itemName,
                                 itemType: typeId,
+                                itemNumberId: item.itemNumberId
                             });
                         }
                         else {
@@ -4492,6 +4539,7 @@
                                 id: item.id,
                                 itemName: item.itemName,
                                 itemType: typeId,
+                                itemNumberId: item.itemNumberId
                             });
                         }
                         this.dataTrees.toArray()[1].todoItemSelectionById([item.id]);
@@ -4519,6 +4567,7 @@
                                 id: node.rootId,
                                 itemName: node.rootName,
                                 itemType: typeId,
+                                itemNumberId: item.itemNumberId
                             });
                         }
                         else {
@@ -4527,6 +4576,7 @@
                                 id: node.rootId,
                                 itemName: node.rootName,
                                 itemType: typeId,
+                                itemNumberId: item.itemNumberId
                             });
                         }
                     }
@@ -4589,6 +4639,7 @@
                             id: x.id,
                             itemName: x.name,
                             itemType: itemType,
+                            itemNumberId: item.displayId.toString()
                         });
                     });
                 }
@@ -4599,6 +4650,7 @@
                             id: x.id,
                             itemName: x.name,
                             itemType: itemType,
+                            itemNumberId: item.displayId.toString()
                         });
                     });
                 }
@@ -4627,13 +4679,23 @@
                         _this.commonCheckedList.push(item);
                     }
                     if (_this.singleSelectedNode) {
-                        var position = _this.treeData1.findIndex(function (p) { return p.childId === item.id; });
-                        _this.singleProcessList.push({
-                            moduleId: _this.moduleId,
-                            id: item.id,
-                            itemName: item.name,
-                            itemType: (_this.itemType === 2) ? _this.setTypeProcess(item.expandable) : _this.itemType
-                        });
+                        var position = void 0;
+                        if (item.expandable) {
+                            position = _this.treeData1.findIndex(function (p) { return p.rootId === item.id; });
+                        }
+                        else {
+                            position = _this.treeData1.findIndex(function (p) { return p.childId === item.id; });
+                        }
+                        if (position > -1) {
+                            _this.singleProcessList.push({
+                                moduleId: _this.moduleId,
+                                id: item.id,
+                                itemName: item.name,
+                                itemType: (_this.itemType === 2) ? _this.setTypeProcess(item.expandable) : _this.itemType,
+                                itemNumberId: _this.treeData1[position].displayId.toString(),
+                                parentId: item.parentId
+                            });
+                        }
                     }
                     if (item.id && index < 0 && !item.expandable && !_this.singleSelectedNode) {
                         var position = _this.treeData1.findIndex(function (p) { return p.childId === item.id && p.rootId === item.parentId; });
@@ -4644,7 +4706,8 @@
                                 itemName: item.name,
                                 itemType: _this.itemType,
                                 parentId: item.parentId,
-                                parentName: _this.treeData1[position].rootName
+                                parentName: _this.treeData1[position].rootName,
+                                itemNumberId: _this.treeData1[position].displayId.toString()
                             });
                         }
                     }
@@ -4667,22 +4730,37 @@
                         _this.documentCheckedList.push(item);
                     }
                     if (_this.singleSelectedNode) {
-                        var position = _this.treeData2.findIndex(function (p) { return p.childId === item.id; });
-                        _this.singleDocumentList.push({
-                            moduleId: _this.moduleId,
-                            id: item.id,
-                            itemName: item.name,
-                            itemType: item.expandable ? _this.dataType.folder : _this.dataType.document
-                        });
+                        var position = void 0;
+                        if (item.expandable) {
+                            position = _this.treeData2.findIndex(function (p) { return p.rootId === item.id; });
+                        }
+                        else {
+                            position = _this.treeData2.findIndex(function (p) { return p.childId === item.id; });
+                        }
+                        if (position > -1) {
+                            _this.singleDocumentList.push({
+                                moduleId: _this.moduleId,
+                                id: item.id,
+                                itemName: item.name,
+                                itemType: item.expandable ? _this.dataType.folder : _this.dataType.document,
+                                itemNumberId: _this.treeData2[position].displayId.toString(),
+                                parentId: item.parentId
+                            });
+                        }
                     }
                     if (index < 0 && !item.expandable && !_this.singleSelectedNode) {
                         var position = _this.treeData2.findIndex(function (p) { return p.childId === item.id; });
-                        _this.checkedNodeList.push({
-                            moduleId: _this.moduleId,
-                            id: item.id,
-                            itemName: item.name,
-                            itemType: _this.dataType.document
-                        });
+                        if (position > -1) {
+                            _this.checkedNodeList.push({
+                                moduleId: _this.moduleId,
+                                id: item.id,
+                                itemName: item.name,
+                                itemType: _this.dataType.document,
+                                itemNumberId: _this.treeData2[position].displayId.toString(),
+                                parentId: item.parentId,
+                                parentName: _this.treeData2[position].rootName,
+                            });
+                        }
                     }
                 });
                 if (this.singleSelectedNode) {
@@ -4712,16 +4790,22 @@
             return (elmHeight + elmMargin);
         };
         RelatedPopupComponent.prototype.getItemChipName = function (item) {
-            return item.parentName ? item.parentName + "/" + item.itemName : item.itemName;
+            if (item.itemType === DataType.checklist || item.itemType === DataType.deviation) {
+                return item.parentName ? item.parentName + "/" + item.itemName : item.itemName;
+            }
+            return item.itemName;
+        };
+        RelatedPopupComponent.prototype.isEllipsisActive = function (e) {
+            return e ? (e.clientWidth < e.scrollWidth) : false;
         };
         return RelatedPopupComponent;
     }());
     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      <!-- Process -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.process).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.PROCESSES }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.process)\"\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=\"process\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                {{ option.itemName }}\r\n              </div>\r\n            </div>\r\n            <div qms-line color=\"default-subtitle\">\r\n              <span class=\"material-icons-outlined search__description-icon\">\r\n                local_offer\r\n              </span>\r\n              {{ LANG.PROCESS_ID }}: {{ option.itemNumberId }};\r\n              {{ option.statusName }}\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Document -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.document).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.DOCUMENTS }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.document)\"\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=\"document\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n            <div qms-line color=\"default-subtitle\">\r\n              <span class=\"material-icons-outlined search__description-icon\">\r\n                local_offer\r\n              </span>\r\n              {{ LANG.DOCUMENT_ID }}: {{ option.itemNumberId }};\r\n              {{ option.statusName }}\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Process Area -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.area).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.PROCESS_AREA }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.area)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              svgIcon=\"process_area_outlined\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Document Folder -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.folder).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.FOLDER }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.folder)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon leading-icon>folder_open</mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Categories -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.deviation).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.DEVIATION }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.deviation)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              svgIcon=\"deviation\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"caption\">{{ option.parentName }}</div>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n\r\n      <!-- Deviation types -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.deviationType).length > 0\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.DEVIATION_TYPE }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"\r\n            let option of getModuleFilteredOptions(dataType.deviationType)\r\n          \"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon leading-icon>folder_open</mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Checklist -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.checklist).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.CHECKLIST }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.checklist)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              svgIcon=\"checklist\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Checklist category -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.checklistCategory).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.CHECKLIST_CATEGORY }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"\r\n            let option of getModuleFilteredOptions(dataType.checklistCategory)\r\n          \"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon leading-icon type=\"image-square\">folder_open</mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Risk -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.risk).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.ASSESSMENT }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.risk)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              svgIcon=\"risk\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Risk folder -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.riskFolder).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.FOLDER }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.riskFolder)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon leading-icon type=\"image-square\">folder_open</mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\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    }\"\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    >\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            {{ isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\" }}\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        ></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    >\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        ></qms-tree>\r\n      </div>\r\n    </mat-expansion-panel>\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      <div *ngIf=\"item.itemName\" class=\"related__item__content\">\r\n        <span class=\"related__item__content_name\"\r\n          >{{ getItemChipName(item) }}\r\n          <mat-icon (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\r\n        </span>\r\n      </div>\r\n      <!-- <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        title=\"{{ getItemChipName(item) }}\"\r\n      >\r\n        <span class=\"related__item__content_name\">{{ getItemChipName(item) }}</span>\r\n        <mat-icon (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\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      <!-- Process -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.process).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.PROCESSES }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.process)\"\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=\"process\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                {{ option.itemName }}\r\n              </div>\r\n            </div>\r\n            <div qms-line color=\"default-subtitle\">\r\n              <span class=\"material-icons-outlined search__description-icon\">\r\n                local_offer\r\n              </span>\r\n              {{ LANG.PROCESS_ID }}: {{ option.itemNumberId }};\r\n              {{ option.statusName }}\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Document -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.document).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.DOCUMENTS }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.document)\"\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=\"document\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n            <div qms-line color=\"default-subtitle\">\r\n              <span class=\"material-icons-outlined search__description-icon\">\r\n                local_offer\r\n              </span>\r\n              {{ LANG.DOCUMENT_ID }}: {{ option.itemNumberId }};\r\n              {{ option.statusName }}\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Process Area -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.area).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.PROCESS_AREA }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.area)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              svgIcon=\"process_area_outlined\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Document Folder -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.folder).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.FOLDER }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.folder)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon leading-icon>folder_open</mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Categories -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.deviation).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.DEVIATION }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.deviation)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              svgIcon=\"deviation\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"caption\">{{ option.parentName }}</div>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n\r\n      <!-- Deviation types -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.deviationType).length > 0\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.DEVIATION_TYPE }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"\r\n            let option of getModuleFilteredOptions(dataType.deviationType)\r\n          \"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon leading-icon>folder_open</mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Checklist -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.checklist).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.CHECKLIST }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.checklist)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              svgIcon=\"checklist\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"caption\">{{ option.parentName }}</div>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Checklist category -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.checklistCategory).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.CHECKLIST_CATEGORY }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"\r\n            let option of getModuleFilteredOptions(dataType.checklistCategory)\r\n          \"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon leading-icon type=\"image-square\">folder_open</mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Risk -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.risk).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.ASSESSMENT }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.risk)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              svgIcon=\"risk\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Risk folder -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.riskFolder).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.FOLDER }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.riskFolder)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon leading-icon type=\"image-square\">folder_open</mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\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    }\"\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    >\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            {{ isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\" }}\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        ></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    >\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        ></qms-tree>\r\n      </div>\r\n    </mat-expansion-panel>\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=\"{{ isEllipsisActive(itemName) ? getItemChipName(item) : '' }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)}}</span>\r\n        <mat-icon (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\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__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 .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center}.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;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__item .related__item__inline{display:inline;width:auto}.qmslib__related__popup__container .panel__item .related__item__content{background-color:rgba(0,0,0,.04);border:1px solid #e0e0e0;border-radius:4px;display:inline-block;padding:2px 4px;margin-left:5px;margin-bottom:5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:22px;vertical-align:middle;margin-left:7px;cursor:pointer}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .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 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}"]
+                    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__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 .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center}.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;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}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 .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 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}"]
                 },] }
     ];
     RelatedPopupComponent.ctorParameters = function () { return [
@@ -4865,6 +4949,7 @@
         function RiskResult() {
             this.title = '';
             this.results = [];
+            this.isSimple = 0;
         }
         return RiskResult;
     }());
@@ -4881,8 +4966,10 @@
             this.data = data;
             this.results = [];
             this.color = Color;
+            this.isSimple = 0;
             this.title = data.title;
             this.results = data.results;
+            this.isSimple = data.isSimple || 0;
         }
         RiskResultComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -4900,7 +4987,7 @@
     RiskResultComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-risk-result',
-                    template: "<div class=\"dialog-container\">\r\n  <div mat-dialog-title class=\"dialog-title\">\r\n    <h3 class=\"title\">{{ title }}</h3>\r\n    <button\r\n      qms-btn-icon\r\n      color=\"light\"\r\n      qms-tool-tip=\"Caption\"\r\n      mode=\"dark\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <mat-dialog-content>\r\n    <div class=\"flex-container-header\">\r\n      <div class=\"first\">{{ LANG.EVENT }}</div>\r\n      <div class=\"second\">{{ LANG.AREA_OF_IMPACT }}</div>\r\n      <div class=\"third\">{{ LANG.RESULT }}</div>\r\n    </div>\r\n    <div class=\"flex-container\" *ngFor=\"let item of results\">\r\n      <!-- g y r 1 2 3   done -->\r\n      <div class=\"first\" [ngSwitch]=\"item.color\">\r\n        <label *ngSwitchCase=\"3\" class=\"label-red\"></label>\r\n        <label *ngSwitchCase=\"1\" class=\"label-green\"></label>\r\n        <label *ngSwitchCase=\"2\" class=\"label-yellow\"></label>\r\n        {{ item.cause }}\r\n      </div>\r\n      <div class=\"second\">{{ item.consequenceArea }}</div>\r\n      <ng-container [ngSwitch]=\"item.color\">\r\n        <div class=\"third text-red\" *ngSwitchCase=\"3\">\r\n          <span class=\"material-icons-outlined\">report_problem</span>\r\n          {{ LANG.NOT_ACCEPTED }}\r\n        </div>\r\n        <div class=\"third text-yellow\" *ngSwitchCase=\"2\">\r\n          <mat-icon>error_outline</mat-icon>\r\n          {{ LANG.MUST_BE_EVALUATED }}\r\n        </div>\r\n        <div class=\"third text-green\" *ngSwitchCase=\"1\">\r\n          <mat-icon>done</mat-icon>\r\n          {{ LANG.ACCEPTED }}\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </mat-dialog-content>\r\n</div>\r\n",
+                    template: "<div class=\"dialog-container\">\r\n  <div mat-dialog-title class=\"dialog-title\">\r\n    <h3 class=\"title\">{{ title }}</h3>\r\n    <button\r\n      qms-btn-icon\r\n      color=\"light\"\r\n      qms-tool-tip=\"Caption\"\r\n      mode=\"dark\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <mat-dialog-content>\r\n    <div class=\"flex-container-header\">\r\n      <div class=\"first\">{{ isSimple ? LANG.EVENT : LANG.CAUSE }}</div>\r\n      <div class=\"second\">{{ LANG.AREA_OF_IMPACT }}</div>\r\n      <div class=\"third\">{{ LANG.RESULT }}</div>\r\n    </div>\r\n    <div class=\"flex-container\" *ngFor=\"let item of results\">\r\n      <!-- g y r 1 2 3   done -->\r\n      <div class=\"first\" [ngSwitch]=\"item.color\">\r\n        <label *ngSwitchCase=\"3\" class=\"label-red\"></label>\r\n        <label *ngSwitchCase=\"1\" class=\"label-green\"></label>\r\n        <label *ngSwitchCase=\"2\" class=\"label-yellow\"></label>\r\n        {{ item.cause }}\r\n      </div>\r\n      <div class=\"second\">{{ item.consequenceArea }}</div>\r\n      <ng-container [ngSwitch]=\"item.color\">\r\n        <div class=\"third text-red\" *ngSwitchCase=\"3\">\r\n          <span class=\"material-icons-outlined\">report_problem</span>\r\n          {{ LANG.NOT_ACCEPTED }}\r\n        </div>\r\n        <div class=\"third text-yellow\" *ngSwitchCase=\"2\">\r\n          <mat-icon>error_outline</mat-icon>\r\n          {{ LANG.MUST_BE_EVALUATED }}\r\n        </div>\r\n        <div class=\"third text-green\" *ngSwitchCase=\"1\">\r\n          <mat-icon>done</mat-icon>\r\n          {{ LANG.ACCEPTED }}\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </mat-dialog-content>\r\n</div>\r\n",
                     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}.dialog-title{display:flex;justify-content:space-between}.dialog-title h3.title{font-family:Raleway;font-style:normal;font-weight:500;font-size:22px;line-height:26px}.flex-container-header{display:flex;align-items:center;font-size:.75rem;border-radius:4px;line-height:16px}.flex-container-header>div{font-family:Open Sans;font-style:normal;font-weight:600;text-align:left;padding:10px 25px;color:rgba(0,0,0,.6)}.flex-container-header .first{flex:0 1 40%}.flex-container-header .second,.flex-container-header .third{flex:0 1 30%}.flex-container{display:flex;align-items:center;font-size:.875rem;line-height:22px;border-radius:4px;border:1px solid #ddd;min-height:48px;margin-bottom:10px}.flex-container>div{font-family:Open Sans;font-style:normal;text-align:left;padding:10px 25px;color:#323232}.flex-container .first{display:flex;flex:0 1 40%;align-items:center;font-weight:600}.flex-container .second{flex:0 1 30%;font-weight:400}.flex-container .third{display:flex;flex:0 1 30%;align-items:center;font-weight:600;font-size:.75rem}.flex-container .third.text-green,.flex-container .third.text-red,.flex-container .third.text-yellow{font-size:.75rem}.flex-container .third.text-green .mat-icon,.flex-container .third.text-green .material-icons-outlined,.flex-container .third.text-red .mat-icon,.flex-container .third.text-red .material-icons-outlined,.flex-container .third.text-yellow .mat-icon,.flex-container .third.text-yellow .material-icons-outlined{margin-right:1rem}.flex-container .third.text-red{color:#b00020}.flex-container .third.text-yellow{color:#726729}.flex-container .third.text-green{color:#005935}.label-green,.label-red,.label-yellow{font-family:Open Sans;font-style:normal;font-weight:600;display:flex;text-align:center;margin-right:1rem;width:24px;height:24px;flex:0 0 24px;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}"]
                 },] }
     ];
@@ -5024,7 +5111,10 @@
                         childNumber: 0,
                         show: _this.show,
                         remain: 0,
-                        dangers: []
+                        dangers: [],
+                        folderId: d.folderId,
+                        statusId: d.statusId,
+                        simple: d.simple
                     });
                     dangers.forEach(function (d) {
                         var index = _this.analysisDanger[i].dangers.findIndex(function (x) {
@@ -5109,8 +5199,8 @@
     RiskListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-risk-list',
-                    template: "<div class=\"container list-risk\">\r\n  <div class=\"list-risk__title\">\r\n    <strong>{{ title }}</strong>\r\n  </div>\r\n  <div class=\"list-risk__body\" *ngFor=\"let analysis of analysisDanger\">\r\n    <div class=\"list-risk__body-parent\">\r\n      <div class=\"block\">\r\n        <mat-icon class=\"material-icons-outlined mat-icon\">border_all</mat-icon>\r\n        <div class=\"title\">{{ analysis.name }}</div>\r\n      </div>\r\n      <div class=\"block\" *ngIf=\"!isNotEditedItem\">\r\n        <button\r\n          qms-btn-icon\r\n          color=\"light\"\r\n          qms-tool-tip=\"Caption\"\r\n          mode=\"dark\"\r\n          (click)=\"editDanger(analysis)\"\r\n        >\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n        <button\r\n          qms-btn-icon\r\n          color=\"light\"\r\n          qms-tool-tip=\"Caption\"\r\n          mode=\"dark\"\r\n          (click)=\"removeDanger(analysis.id)\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"list-risk__body-child\"\r\n      *ngFor=\"let danger of analysis.dangers | slice: 0:analysis.show\"\r\n    >\r\n      <div class=\"default\">\r\n        <div class=\"title\">{{ danger.dangerName }}</div>\r\n        <div class=\"group-button\">\r\n          <label\r\n            class=\"label-red cursor\"\r\n            *ngIf=\"danger.red > 0\"\r\n            (click)=\"dangerDetail(danger)\"\r\n            >{{ danger.red }}</label\r\n          >\r\n          <label\r\n            class=\"label-yellow cursor\"\r\n            *ngIf=\"danger.yellow > 0\"\r\n            (click)=\"dangerDetail(danger)\"\r\n            >{{ danger.yellow }}</label\r\n          >\r\n          <label\r\n            class=\"label-green cursor\"\r\n            *ngIf=\"danger.green > 0\"\r\n            (click)=\"dangerDetail(danger)\"\r\n            >{{ danger.green }}</label\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"remain\" *ngIf=\"analysis.remain > 0\">\r\n      <span class=\"title cursor\" (click)=\"increaseShow(analysis.id)\"\r\n        >+ {{ analysis.remain }}</span\r\n      >\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    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-risk{font-family:Open Sans;font-style:normal;font-weight:400;color:#323232}.list-risk .list-risk__title{font-weight:600;font-size:.875rem;line-height:22px;margin-bottom:1rem}.list-risk .list-risk__body .list-risk__body-parent{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-risk .list-risk__body .list-risk__body-parent .block{font-weight:400;font-size:1rem;line-height:28px;display:flex;align-items:center}.list-risk .list-risk__body .list-risk__body-parent .block .title{margin-left:1.5rem;padding-top:5px;padding-bottom:5px}.list-risk .list-risk__body .list-risk__body-parent .block mat-icon{color:rgba(0,0,0,.6)}.list-risk .list-risk__body .list-risk__body-parent .block button.qms-btn-icon{width:40px;height:40px;line-height:40px}.list-risk .list-risk__body .list-risk__body-child{font-weight:400;font-size:.875rem;line-height:22px}.list-risk .list-risk__body .list-risk__body-child .default{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-risk .list-risk__body .list-risk__body-child .default .title{margin-left:3rem}.list-risk .list-risk__body .list-risk__body-child .default .group-button{margin-right:2rem;display:flex}.list-risk .list-risk__body .remain{font-weight:600;font-size:.875rem;line-height:22px;display:flex;align-items:center;justify-content:space-between;background-color:#fafafa;color:#1954a9;min-height:48px;border-bottom:1px solid #ddd}.list-risk .list-risk__body .remain .title{margin-left:3rem}.label-green,.label-red,.label-yellow{font-family:Open Sans;font-style:normal;font-weight:600;display:inline-block;text-align:center;margin-left:1rem;width:24px;height:24px;font-size:.75rem;border-radius:1px}.label-red{background-color:#9e360f;color:#fff}.label-yellow{background-color:#e4cf53;color:rgba(0,0,0,.87)}.label-green{background-color:#00804c;color:#fff}.cursor{cursor:pointer}"]
+                    template: "<div class=\"container list-risk\">\r\n  <div class=\"list-risk__title\">\r\n    <strong>{{ title }}</strong>\r\n  </div>\r\n  <div class=\"list-risk__body\" *ngFor=\"let analysis of analysisDanger\">\r\n    <div class=\"list-risk__body-parent\">\r\n      <div class=\"block\">\r\n        <mat-icon class=\"material-icons-outlined mat-icon\">border_all</mat-icon>\r\n        <div class=\"title\">{{ analysis.name }}</div>\r\n      </div>\r\n      <div class=\"block\" *ngIf=\"!isNotEditedItem\">\r\n        <span class=\"label-archived\" *ngIf=\"analysis.folderId == -1\">\r\n          {{ LANG.ARCHIVED }}</span\r\n        >\r\n        <button\r\n          *ngIf=\"analysis.folderId !== -1\"\r\n          qms-btn-icon\r\n          color=\"light\"\r\n          qms-tool-tip=\"Caption\"\r\n          mode=\"dark\"\r\n          (click)=\"editDanger(analysis)\"\r\n        >\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n        <button\r\n          qms-btn-icon\r\n          color=\"light\"\r\n          qms-tool-tip=\"Caption\"\r\n          mode=\"dark\"\r\n          (click)=\"removeDanger(analysis.id)\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"list-risk__body-child\"\r\n      *ngFor=\"let danger of analysis.dangers | slice: 0:analysis.show\"\r\n    >\r\n      <div class=\"default\">\r\n        <div class=\"title\">{{ danger.dangerName }}</div>\r\n        <div class=\"group-button\">\r\n          <label\r\n            class=\"label-red cursor\"\r\n            *ngIf=\"danger.red > 0\"\r\n            (click)=\"dangerDetail(danger)\"\r\n            >{{ danger.red }}</label\r\n          >\r\n          <label\r\n            class=\"label-yellow cursor\"\r\n            *ngIf=\"danger.yellow > 0\"\r\n            (click)=\"dangerDetail(danger)\"\r\n            >{{ danger.yellow }}</label\r\n          >\r\n          <label\r\n            class=\"label-green cursor\"\r\n            *ngIf=\"danger.green > 0\"\r\n            (click)=\"dangerDetail(danger)\"\r\n            >{{ danger.green }}</label\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"remain\" *ngIf=\"analysis.remain > 0\">\r\n      <span class=\"title cursor\" (click)=\"increaseShow(analysis.id)\"\r\n        >+ {{ analysis.remain }}</span\r\n      >\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    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-risk{font-family:Open Sans;font-style:normal;font-weight:400;color:#323232}.list-risk .list-risk__title{font-weight:600;font-size:.875rem;line-height:22px;margin-bottom:1rem}.list-risk .list-risk__body .list-risk__body-parent{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-risk .list-risk__body .list-risk__body-parent .block{font-weight:400;font-size:1rem;line-height:28px;display:flex;align-items:center}.list-risk .list-risk__body .list-risk__body-parent .block .title{margin-left:1.5rem;padding-top:5px;padding-bottom:5px}.list-risk .list-risk__body .list-risk__body-parent .block mat-icon{color:rgba(0,0,0,.6)}.list-risk .list-risk__body .list-risk__body-parent .block button.qms-btn-icon{width:40px;height:40px;line-height:40px}.list-risk .list-risk__body .list-risk__body-parent .block .label-archived{font-weight:600;font-size:.875rem;line-height:1rem;color:#525252;padding:5px;background:linear-gradient(0deg,rgba(0,0,0,.1),rgba(0,0,0,.1)),#fff;border-radius:2px}.list-risk .list-risk__body .list-risk__body-child{font-weight:400;font-size:.875rem;line-height:22px}.list-risk .list-risk__body .list-risk__body-child .default{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-risk .list-risk__body .list-risk__body-child .default .title{margin-left:3rem}.list-risk .list-risk__body .list-risk__body-child .default .group-button{margin-right:2rem;display:flex}.list-risk .list-risk__body .remain{font-weight:600;font-size:.875rem;line-height:22px;display:flex;align-items:center;justify-content:space-between;background-color:#fafafa;color:#1954a9;min-height:48px;border-bottom:1px solid #ddd}.list-risk .list-risk__body .remain .title{margin-left:3rem}.label-green,.label-red,.label-yellow{font-family:Open Sans;font-style:normal;font-weight:600;display:inline-block;text-align:center;margin-left:1rem;width:24px;height:24px;font-size:.75rem;border-radius:1px}.label-red{background-color:#9e360f;color:#fff}.label-yellow{background-color:#e4cf53;color:rgba(0,0,0,.87)}.label-green{background-color:#00804c;color:#fff}.cursor{cursor:pointer}"]
                 },] }
     ];
     RiskListComponent.ctorParameters = function () { return [
@@ -5132,6 +5222,7 @@
             // imageProcess = '../qms-angular/src/assets/images/union.svg';
             this.imageProcess = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAwLjVWNi41SDJWMTYuNUgxMlYxOC41SDE4VjEyLjVIMTJWMTQuNUg0VjYuNUg2VjQuNUgxMlY2LjVIMThWMC41SDEyVjIuNUg2VjAuNUgwWk00IDIuNVY0LjVIMlYyLjVINFpNMTYgMi41VjQuNUgxNFYyLjVIMTZaTTE2IDE2LjVWMTQuNUgxNFYxNi41SDE2WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC42Ii8+DQo8L3N2Zz4NCg==';
             this.updateData = new i0.EventEmitter();
+            this.onItemSelect = new i0.EventEmitter();
             iconRegistry.addSvgIconLiteral('process_area', domSanitizer.bypassSecurityTrustHtml(PROCESS_AREA_ICON));
         }
         RelatedListComponent.prototype.ngOnChanges = function (changes) {
@@ -5163,12 +5254,16 @@
         };
         RelatedListComponent.prototype.onCloseClick = function () {
         };
+        RelatedListComponent.prototype.onItemClick = function (item) {
+            if (this.onItemSelect)
+                this.onItemSelect.emit(item);
+        };
         return RelatedListComponent;
     }());
     RelatedListComponent.decorators = [
         { type: i0.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      <div class=\"block\">\r\n        <ng-container [ngSwitch]=\"item.itemType\">\r\n          <ng-container *ngSwitchCase=\"dataType.document\">\r\n            <mat-icon class=\"material-icons-outlined\"\r\n              >insert_drive_file</mat-icon\r\n            >\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"dataType.folder\">\r\n            <mat-icon class=\"material-icons-outlined\" leading-icon\r\n              >folder</mat-icon\r\n            >\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"dataType.process\">\r\n            <img class=\"mat-icon\" [src]=\"getImagePath()\" />\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"dataType.area\">\r\n            <mat-icon svgIcon=\"process_area\"></mat-icon>\r\n          </ng-container>\r\n\r\n          <mat-icon\r\n            *ngSwitchCase=\"dataType.deviation\"\r\n            class=\"material-icons-outlined\"\r\n            >report_problem</mat-icon\r\n          >\r\n          <mat-icon *ngSwitchCase=\"dataType.checklist\"\r\n            >format_list_bulleted</mat-icon\r\n          >\r\n        </ng-container>\r\n        <div class=\"title\">\r\n          <div class=\"caption\" *ngIf=\"item?.parentName\">{{ item?.parentName }}</div>\r\n          {{ item.itemName }}\r\n          <div class=\"caption\" *ngIf=\"item?.displayId || item?.statusName\">\r\n            <span class=\"material-icons-outlined\"> local_offer </span> ID:\r\n            {{ item?.displayId }}, {{ item?.statusName }}\r\n          </div>\r\n        </div>\r\n      </div>\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      <div class=\"block\">\r\n        <ng-container [ngSwitch]=\"item.itemType\">\r\n          <ng-container *ngSwitchCase=\"dataType.document\">\r\n            <mat-icon class=\"material-icons-outlined\"\r\n              >insert_drive_file</mat-icon\r\n            >\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"dataType.folder\">\r\n            <mat-icon class=\"material-icons-outlined\" leading-icon\r\n              >folder</mat-icon\r\n            >\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"dataType.process\">\r\n            <img class=\"mat-icon\" [src]=\"getImagePath()\" />\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"dataType.area\">\r\n            <mat-icon svgIcon=\"process_area\"></mat-icon>\r\n          </ng-container>\r\n\r\n          <mat-icon\r\n            *ngSwitchCase=\"dataType.deviation\"\r\n            class=\"material-icons-outlined\"\r\n            >report_problem</mat-icon\r\n          >\r\n          <mat-icon *ngSwitchCase=\"dataType.checklist\"\r\n            >format_list_bulleted</mat-icon\r\n          >\r\n        </ng-container>\r\n        <div class=\"title\" (click)=\"onItemClick(item)\">\r\n          <div class=\"caption\" *ngIf=\"item?.parentName\">{{ item?.parentName }}</div>\r\n          {{ item.itemName }}\r\n          <div class=\"caption\" *ngIf=\"item?.displayId || item?.statusName\">\r\n            <span class=\"material-icons-outlined\"> local_offer </span> ID:\r\n            {{ item?.displayId }}, {{ item?.statusName }}\r\n          </div>\r\n        </div>\r\n      </div>\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",
                     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 .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}"]
                 },] }
     ];
@@ -5179,7 +5274,8 @@
     ]; };
     RelatedListComponent.propDecorators = {
         data: [{ type: i0.Input }],
-        updateData: [{ type: i0.Output }]
+        updateData: [{ type: i0.Output }],
+        onItemSelect: [{ type: i0.Output }]
     };
 
     var QMSRelatedModule = /** @class */ (function () {
@@ -5718,6 +5814,16 @@
         return QMSCKEditorParamter;
     }());
 
+    exports.CKEditorModule = void 0;
+    (function (CKEditorModule) {
+        CKEditorModule[CKEditorModule["document"] = 1] = "document";
+        CKEditorModule[CKEditorModule["process"] = 2] = "process";
+        CKEditorModule[CKEditorModule["deviation"] = 3] = "deviation";
+        CKEditorModule[CKEditorModule["risk"] = 4] = "risk";
+        CKEditorModule[CKEditorModule["checklist"] = 5] = "checklist";
+        CKEditorModule[CKEditorModule["dashboard"] = 6] = "dashboard";
+    })(exports.CKEditorModule || (exports.CKEditorModule = {}));
+
     var LinkAttachmentComponent = /** @class */ (function (_super) {
         __extends(LinkAttachmentComponent, _super);
         function LinkAttachmentComponent(dialog, translate, linkService, dialogRef, data) {
@@ -5761,7 +5867,12 @@
         LinkAttachmentComponent.prototype.onSelectedAttachment = function (extraId, fileName) {
             this.linkUrl = { url: '', title: '' };
             if (extraId) {
-                this.linkUrl.url = "/api/File/GetFile?entityId=" + extraId;
+                if (this.module === exports.CKEditorModule.document) {
+                    this.linkUrl.url = "/api/File/GetFile?entityId=" + extraId;
+                }
+                else if (this.module === exports.CKEditorModule.process) {
+                    this.linkUrl.url = "/api/processes/GetFileContents?fileId=" + extraId;
+                }
                 this.linkUrl.title = fileName;
             }
             this.dialogRef.close(this.linkUrl);
@@ -6362,7 +6473,7 @@
                 var p1 = url.indexOf('mailto:');
                 var p2 = url.indexOf('?subject=');
                 var p3 = url.indexOf('&body=');
-                this.emailAddress = url.substr(p1 + 7, p2 - 6);
+                this.emailAddress = url.substr(p1 + 7, p2 - 7);
                 this.emailSubject = url.substr(p2 + 9, p3 - p2 - 9);
                 this.emailBody = url.substr(p3 + 6, url.length - p3 - 6);
             }
@@ -6571,7 +6682,7 @@
     QMSCKEditorLinkComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-ckeditor-link',
-                    template: "<div id=\"qmsckeditor_link\" class=\"qmsckeditor qmsckeditor__link__container\">\r\n  <div id=\"qmsckeditor_link_header\">\r\n    <span\r\n      id=\"qmsckeditor_link_header_001\"\r\n      mat-icon-button\r\n      class=\"qmsckeditor button__close\"\r\n      (click)=\"onCloseDialog()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmsckeditor_link_header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor_link_header_001\">\r\n        {{ LANG.QMSCKEDITOR.LINK }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <div id=\"qmsckeditor_link_type\" class=\"row\">\r\n    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3\">\r\n      <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\r\n      <mat-select\r\n        name=\"linkTypeList\"\r\n        [(ngModel)]=\"selectedLink\"\r\n        (ngModelChange)=\"onSelectedLinkType()\"\r\n      >\r\n        <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\r\n          {{ link.name }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div id=\"qmsckeditor_link_content\">\r\n    <form\r\n      [formGroup]=\"linkFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 0\"\r\n    >\r\n      <div id=\"qmsckeditor_link_url\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_url_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.URL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_url_001\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\r\n              <mat-select\r\n                [(ngModel)]=\"selectedTarget\"\r\n                formControlName=\"targetList\"\r\n              >\r\n                <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\r\n                  {{ target.name }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_002\" class=\"row\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\r\n              <mat-select\r\n                [(ngModel)]=\"selectedProtocol\"\r\n                formControlName=\"protocolList\"\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"let protocol of protocols\"\r\n                  [value]=\"protocol.id\"\r\n                >\r\n                  {{ protocol.name }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_003\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\r\n              <input matInput [(ngModel)]=\"url\" formControlName=\"url\" />\r\n              <mat-error\r\n                *ngIf=\"linkFormGroup.get('url').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_004\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ADVISORY_TITLE }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"advisoryTitle\"\r\n                formControlName=\"advisoryTitle\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"linkFormGroup.get('advisoryTitle').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div\r\n            id=\"qmsckeditor_link_url_005\"\r\n            class=\"qmsckeditor button__groups row\"\r\n          >\r\n            <div class=\"col-6 pl-3\">\r\n              <button\r\n                class=\"save\"\r\n                mat-flat-button\r\n                (click)=\"eHandbook(false, false)\"\r\n              >\r\n                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n              </button>\r\n            </div>\r\n            <div class=\"col-6 pr-3\">\r\n              <button class=\"save\" mat-flat-button (click)=\"attachment()\">\r\n                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form\r\n      [formGroup]=\"anchorTextFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 1\"\r\n    >\r\n      <div id=\"qmsckeditor_link_anchor_text\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_anchor_text_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.ANCHOR_TEXT_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_anchor_text_001\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n              <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorText\">\r\n                <mat-option\r\n                  *ngFor=\"let editorAnchor of editorAnchors\"\r\n                  [value]=\"editorAnchor.anchorValue\"\r\n                >\r\n                  {{ editorAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error\r\n                *ngIf=\"\r\n                  anchorTextFormGroup.get('anchorText').hasError('required')\r\n                \"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form\r\n      [formGroup]=\"emailFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 2\"\r\n    >\r\n      <div id=\"qmsckeditor_link_email\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_email_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_email_001\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_ADDRESS }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"emailAddress\"\r\n                formControlName=\"emailAddress\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"emailFormGroup.get('emailAddress').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_email_002\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_SUBJECT }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"emailSubject\"\r\n                formControlName=\"emailSubject\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"emailFormGroup.get('emailSubject').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_email_003\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_BODY }}</mat-label>\r\n              <textarea\r\n                matInput\r\n                [(ngModel)]=\"emailBody\"\r\n                formControlName=\"emailBody\"\r\n              ></textarea>\r\n              <mat-error\r\n                *ngIf=\"emailFormGroup.get('emailBody').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form\r\n      [formGroup]=\"anchorDocFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 3\"\r\n    >\r\n      <div id=\"qmsckeditor_link_anchor_doc\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_email_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div\r\n            id=\"qmsckeditor_link_anchor_doc_001\"\r\n            class=\"qmsckeditor button__groups row\"\r\n          >\r\n            <div class=\"col-6 pl-3\">\r\n              <button\r\n                class=\"cancel\"\r\n                mat-flat-button\r\n                (click)=\"eHandbook(true, true)\"\r\n              >\r\n                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_anchor_doc_002\" class=\"row mt-4\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.DOCUMENT }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"anchorTitle\"\r\n                formControlName=\"anchorTitle\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorTitle').hasError('required')\r\n                \"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_anchor_doc_003\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n              <mat-select\r\n                [(ngModel)]=\"anchorByName\"\r\n                formControlName=\"anchorByName\"\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"let docAnchor of documentAnchors\"\r\n                  [value]=\"docAnchor.anchorValue\"\r\n                >\r\n                  {{ docAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error\r\n                *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorByName').hasError('required')\r\n                \"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n  </div>\r\n\r\n  <div id=\"qmsckeditor_link_footer\" class=\"qmsckeditor button__groups row\">\r\n    <div class=\"col-12 mt-5 pl-3 pr-3\">\r\n      <button\r\n        class=\"save\"\r\n        mat-flat-button\r\n        (click)=\"setLink()\"\r\n        [disabled]=\"disableOkButton()\"\r\n      >\r\n        {{ LANG.QMSCKEDITOR.OK }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div id=\"qmsckeditor_link\" class=\"qmsckeditor qmsckeditor__link__container\">\r\n  <div id=\"qmsckeditor_link_header\">\r\n    <span\r\n      id=\"qmsckeditor_link_header_001\"\r\n      mat-icon-button\r\n      class=\"qmsckeditor button__close\"\r\n      (click)=\"onCloseDialog()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmsckeditor_link_header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor_link_header_001\">\r\n        {{ LANG.QMSCKEDITOR.LINK }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <div id=\"qmsckeditor_link_type\" class=\"row\">\r\n    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3\">\r\n      <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\r\n      <mat-select\r\n        name=\"linkTypeList\"\r\n        [(ngModel)]=\"selectedLink\"\r\n        (ngModelChange)=\"onSelectedLinkType()\"\r\n      >\r\n        <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\r\n          {{ link.name }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div id=\"qmsckeditor_link_content\">\r\n    <form\r\n      [formGroup]=\"linkFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 0\"\r\n    >\r\n      <div id=\"qmsckeditor_link_url\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_url_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.URL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_url_001\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\r\n              <mat-select\r\n                [(ngModel)]=\"selectedTarget\"\r\n                formControlName=\"targetList\"\r\n              >\r\n                <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\r\n                  {{ target.name }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_002\" class=\"row\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\r\n              <mat-select\r\n                [(ngModel)]=\"selectedProtocol\"\r\n                formControlName=\"protocolList\"\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"let protocol of protocols\"\r\n                  [value]=\"protocol.id\"\r\n                >\r\n                  {{ protocol.name }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_003\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\r\n              <input matInput [(ngModel)]=\"url\" formControlName=\"url\" />\r\n              <mat-error\r\n                *ngIf=\"linkFormGroup.get('url').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_004\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ADVISORY_TITLE }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"advisoryTitle\"\r\n                formControlName=\"advisoryTitle\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"linkFormGroup.get('advisoryTitle').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div\r\n            id=\"qmsckeditor_link_url_005\"\r\n            class=\"qmsckeditor button__groups row\"\r\n          >\r\n            <div class=\"col-6 pl-3\">\r\n              <button\r\n                class=\"save\"\r\n                mat-flat-button\r\n                (click)=\"eHandbook(false, false)\"\r\n              >\r\n                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n              </button>\r\n            </div>\r\n            <div class=\"col-6 pr-3\">\r\n              <button class=\"save\" mat-flat-button (click)=\"attachment()\">\r\n                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form\r\n      [formGroup]=\"anchorTextFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 1\"\r\n    >\r\n      <div id=\"qmsckeditor_link_anchor_text\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_anchor_text_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.ANCHOR_TEXT_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_anchor_text_001\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n              <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorText\">\r\n                <mat-option\r\n                  *ngFor=\"let editorAnchor of editorAnchors\"\r\n                  [value]=\"editorAnchor.anchorValue\"\r\n                >\r\n                  {{ editorAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error\r\n                *ngIf=\"\r\n                  anchorTextFormGroup.get('anchorText').hasError('required')\r\n                \"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form\r\n      [formGroup]=\"emailFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 2\"\r\n    >\r\n      <div id=\"qmsckeditor_link_email\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_email_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_email_001\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_ADDRESS }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"emailAddress\"\r\n                formControlName=\"emailAddress\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"emailFormGroup.get('emailAddress').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_email_002\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_SUBJECT }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"emailSubject\"\r\n                formControlName=\"emailSubject\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"emailFormGroup.get('emailSubject').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_email_003\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_BODY }}</mat-label>\r\n              <textarea\r\n                matInput\r\n                [(ngModel)]=\"emailBody\"\r\n                formControlName=\"emailBody\"\r\n              ></textarea>\r\n              <mat-error\r\n                *ngIf=\"emailFormGroup.get('emailBody').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form\r\n      [formGroup]=\"anchorDocFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 3\"\r\n    >\r\n      <div id=\"qmsckeditor_link_anchor_doc\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_email_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div\r\n            id=\"qmsckeditor_link_anchor_doc_001\"\r\n            class=\"qmsckeditor button__groups row\"\r\n          >\r\n            <div class=\"col-6 pl-3\">\r\n              <button\r\n                class=\"cancel\"\r\n                mat-flat-button\r\n                (click)=\"eHandbook(true, true)\"\r\n              >\r\n                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_anchor_doc_002\" class=\"row mt-4\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.DOCUMENT }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"anchorTitle\"\r\n                formControlName=\"anchorTitle\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorTitle').hasError('required')\r\n                \"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_anchor_doc_003\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n              <mat-select\r\n                [(ngModel)]=\"anchorByName\"\r\n                formControlName=\"anchorByName\"\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"let docAnchor of documentAnchors\"\r\n                  [value]=\"docAnchor.anchorValue\"\r\n                >\r\n                  {{ docAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error\r\n                *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorByName').hasError('required')\r\n                \"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n  </div>\r\n\r\n  <div id=\"qmsckeditor_link_footer\" class=\"qmsckeditor button__groups row\">\r\n    <div class=\"col-12 mt-3 pl-3 pr-3\">\r\n      <button\r\n        class=\"save\"\r\n        mat-flat-button\r\n        (click)=\"setLink()\"\r\n        [disabled]=\"disableOkButton()\"\r\n      >\r\n        {{ LANG.QMSCKEDITOR.OK }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor__link__container textarea.mat-input-element{min-height:130px}"]
                 },] }
     ];
@@ -7290,7 +7401,8 @@
                         label: 'New window',
                         attributes: {
                             target: '_blank',
-                            manualTarget: true
+                            manualTarget: true,
+                            url: 'url'
                         }
                     },
                     {
@@ -7298,7 +7410,8 @@
                         label: 'Topmost window',
                         attributes: {
                             target: '_top',
-                            manualTarget: true
+                            manualTarget: true,
+                            url: 'url'
                         }
                     },
                     {
@@ -7306,7 +7419,8 @@
                         label: 'Same window',
                         attributes: {
                             target: '_self',
-                            manualTarget: true
+                            manualTarget: true,
+                            url: 'url'
                         }
                     },
                     {
@@ -7314,7 +7428,8 @@
                         label: 'Parent window',
                         attributes: {
                             target: '_parent',
-                            manualTarget: true
+                            manualTarget: true,
+                            url: 'url'
                         }
                     },
                     {
@@ -7507,7 +7622,7 @@
             data.entityId = this.qmsckData.entityId;
             var dialogTemplate = this.dialog.open(QMSCKEditorLinkComponent, {
                 width: '650px',
-                height: '670px',
+                height: '660px',
                 data: data,
                 disableClose: true
             });
@@ -7617,16 +7732,6 @@
         { type: i0.Injector }
     ]; };
 
-    exports.CKEditorModule = void 0;
-    (function (CKEditorModule) {
-        CKEditorModule[CKEditorModule["document"] = 1] = "document";
-        CKEditorModule[CKEditorModule["process"] = 2] = "process";
-        CKEditorModule[CKEditorModule["deviation"] = 3] = "deviation";
-        CKEditorModule[CKEditorModule["risk"] = 4] = "risk";
-        CKEditorModule[CKEditorModule["checklist"] = 5] = "checklist";
-        CKEditorModule[CKEditorModule["dashboard"] = 6] = "dashboard";
-    })(exports.CKEditorModule || (exports.CKEditorModule = {}));
-
     var QMSCKEditorData = /** @class */ (function () {
         function QMSCKEditorData() {
             this.apiUrl = '';