qms-angular 1.0.20 → 1.0.24

package/fesm2015/qms-angular.js

@@ -90,6 +90,8 @@ const en = {
     "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"
     },
@@ -197,6 +199,8 @@ const no = {
     "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"
     },
@@ -1690,9 +1694,10 @@ class QMSToolTipRendererDirective {
      */
     show() {
         //attach the component if it has not already attached to the overlay
-        if (this._overlayRef && !this._overlayRef.hasAttached()) {
+        if ((this.text || this.contentTemplate) && this._overlayRef && !this._overlayRef.hasAttached()) {
             const tooltipRef = this._overlayRef.attach(new ComponentPortal(QMSToolTipComponent));
-            tooltipRef.instance.text = this.text;
+            if (this.text)
+                tooltipRef.instance.text = this.text;
             if (this.mode) {
                 tooltipRef.instance.mode = this.mode;
             }
@@ -3242,7 +3247,7 @@ function findChild$1(id, objParent, array) {
             name: item.subName,
             parentId: id
         };
-        objParent[json.stringify(key)] = Object.assign(Object.assign({}, objParent[`${item.rootId}_${item.subName}_${id}`]), processNode);
+        objParent[json.stringify(key)] = Object.assign(Object.assign({}, objParent[json.stringify(key)]), processNode);
     });
 }
 const TreeFunctions = {
@@ -3357,7 +3362,10 @@ class TreeComponent {
             this.treeData = [...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 {
@@ -3542,8 +3550,8 @@ class TreeComponent {
         }
         else {
             const descendants = this.treeControl.getDescendants(node).filter(item => !item.disabled);
-            this.checkSelectedSameNode(descendants, this.checklistSelection.isSelected(node));
-            this.checklistSelection.isSelected(node)
+            this.checkSelectedSameNode(descendants, this.descendantsAllSelected(node));
+            !this.descendantsAllSelected(node)
                 ? this.checklistSelection.select(...descendants)
                 : this.checklistSelection.deselect(...descendants);
             this.cdRef.markForCheck();
@@ -3919,6 +3927,8 @@ class RelatedPopupComponent {
         this.checkedNodeList = this.checkedNodeList.filter(x => (x.id !== item.id || x.parentId !== item.parentId));
         const tempArr = [];
         const tempArrDocument = [];
+        const newSelectProcessList = [];
+        const newSelectDocumentList = [];
         this.commonCheckedList.forEach(element => {
             this.checkedNodeList.forEach(x => {
                 if (element.id === x.id && element.parentId === x.parentId) {
@@ -3926,6 +3936,14 @@ class RelatedPopupComponent {
                 }
             });
         });
+        this.singleProcessList.forEach(element => {
+            this.checkedNodeList.forEach(x => {
+                if (element.id === x.id && element.parentId === x.parentId) {
+                    newSelectProcessList.push(element);
+                }
+            });
+        });
+        this.singleProcessList = newSelectProcessList;
         this.selectedData = [...tempArr];
         this.documentCheckedList.forEach(element => {
             this.checkedNodeList.forEach(x => {
@@ -3934,6 +3952,14 @@ class RelatedPopupComponent {
                 }
             });
         });
+        this.singleDocumentList.forEach(element => {
+            this.checkedNodeList.forEach(x => {
+                if (element.id === x.id && element.parentId === x.parentId) {
+                    newSelectDocumentList.push(element);
+                }
+            });
+        });
+        this.singleDocumentList = newSelectDocumentList;
         this.selectedData2 = [...tempArrDocument];
     }
     isMatchTrue(arr, arr2) {
@@ -3962,7 +3988,7 @@ class RelatedPopupComponent {
     onSearchRelated(_val) {
         this.filteredOptions = [];
         if (typeof (_val) === 'object') {
-            return;
+            this.myControl.setValue('');
         }
         else if (typeof (_val) === 'string') {
             if (!!_val) {
@@ -3984,7 +4010,7 @@ class RelatedPopupComponent {
         this.selectedNode = [];
         if (this.treeConfig1.showCheckBox) {
             index = this.checkedNodeList.findIndex(x => {
-                return x.id === item.id;
+                return x.id === item.id && x.parentId === item.parentId;
             });
         }
         if (index < 0) {
@@ -4013,6 +4039,7 @@ class RelatedPopupComponent {
                             id: item.id,
                             itemName: item.itemName,
                             itemType: typeId,
+                            itemNumberId: item.itemNumberId
                         });
                     }
                     else {
@@ -4021,6 +4048,7 @@ class RelatedPopupComponent {
                             id: item.id,
                             itemName: item.itemName,
                             itemType: typeId,
+                            itemNumberId: item.itemNumberId
                         });
                     }
                     this.dataTrees.toArray()[1].todoItemSelectionById([item.id]);
@@ -4048,6 +4076,7 @@ class RelatedPopupComponent {
                             id: node.rootId,
                             itemName: node.rootName,
                             itemType: typeId,
+                            itemNumberId: item.itemNumberId
                         });
                     }
                     else {
@@ -4056,6 +4085,7 @@ class RelatedPopupComponent {
                             id: node.rootId,
                             itemName: node.rootName,
                             itemType: typeId,
+                            itemNumberId: item.itemNumberId
                         });
                     }
                 }
@@ -4117,6 +4147,7 @@ class RelatedPopupComponent {
                         id: x.id,
                         itemName: x.name,
                         itemType: itemType,
+                        itemNumberId: item.displayId.toString()
                     });
                 });
             }
@@ -4127,6 +4158,7 @@ class RelatedPopupComponent {
                         id: x.id,
                         itemName: x.name,
                         itemType: itemType,
+                        itemNumberId: item.displayId.toString()
                     });
                 });
             }
@@ -4154,13 +4186,23 @@ class RelatedPopupComponent {
                     this.commonCheckedList.push(item);
                 }
                 if (this.singleSelectedNode) {
-                    const position = this.treeData1.findIndex(p => 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
-                    });
+                    let position;
+                    if (item.expandable) {
+                        position = this.treeData1.findIndex(p => p.rootId === item.id);
+                    }
+                    else {
+                        position = this.treeData1.findIndex(p => 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) {
                     const position = this.treeData1.findIndex(p => p.childId === item.id && p.rootId === item.parentId);
@@ -4171,7 +4213,8 @@ class RelatedPopupComponent {
                             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()
                         });
                     }
                 }
@@ -4193,22 +4236,37 @@ class RelatedPopupComponent {
                     this.documentCheckedList.push(item);
                 }
                 if (this.singleSelectedNode) {
-                    const position = this.treeData2.findIndex(p => 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
-                    });
+                    let position;
+                    if (item.expandable) {
+                        position = this.treeData2.findIndex(p => p.rootId === item.id);
+                    }
+                    else {
+                        position = this.treeData2.findIndex(p => 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) {
                     const position = this.treeData2.findIndex(p => 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) {
@@ -4238,15 +4296,21 @@ class RelatedPopupComponent {
         return (elmHeight + elmMargin);
     }
     getItemChipName(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;
+    }
+    isEllipsisActive(e) {
+        return e ? (e.clientWidth < e.scrollWidth) : false;
     }
 }
 RelatedPopupComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-related-popup',
-                template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    id=\"qmslib_related_popup_search\"\r\n    class=\"input__field\"\r\n    (click)=\"showSearchResult()\"\r\n  >\r\n    <input\r\n      #name\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n      #autoCompleteInputSearch\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"displayRelated\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      class=\"related-viewport\"\r\n    >\r\n      <!-- 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      <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: 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 = () => [
@@ -4386,6 +4450,7 @@ class RiskResult {
     constructor() {
         this.title = '';
         this.results = [];
+        this.isSimple = 0;
     }
 }
 class Result {
@@ -4398,8 +4463,10 @@ class RiskResultComponent {
         this.data = data;
         this.results = [];
         this.color = Color;
+        this.isSimple = 0;
         this.title = data.title;
         this.results = data.results;
+        this.isSimple = data.isSimple || 0;
     }
     ngOnInit() {
         this.translate.getLanguageSubject$.pipe().subscribe((res) => {
@@ -4415,7 +4482,7 @@ class RiskResultComponent {
 RiskResultComponent.decorators = [
     { type: 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}"]
             },] }
 ];
@@ -4532,7 +4599,10 @@ class RiskListComponent {
                     childNumber: 0,
                     show: this.show,
                     remain: 0,
-                    dangers: []
+                    dangers: [],
+                    folderId: d.folderId,
+                    statusId: d.statusId,
+                    simple: d.simple
                 });
                 dangers.forEach(d => {
                     const index = this.analysisDanger[i].dangers.findIndex(x => {
@@ -4616,8 +4686,8 @@ class RiskListComponent {
 RiskListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-risk-list',
-                template: "<div class=\"container list-risk\">\r\n  <div class=\"list-risk__title\">\r\n    <strong>{{ title }}</strong>\r\n  </div>\r\n  <div class=\"list-risk__body\" *ngFor=\"let analysis of analysisDanger\">\r\n    <div class=\"list-risk__body-parent\">\r\n      <div class=\"block\">\r\n        <mat-icon class=\"material-icons-outlined mat-icon\">border_all</mat-icon>\r\n        <div class=\"title\">{{ analysis.name }}</div>\r\n      </div>\r\n      <div class=\"block\" *ngIf=\"!isNotEditedItem\">\r\n        <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 = () => [
@@ -4639,6 +4709,7 @@ class RelatedListComponent {
         // imageProcess = '../qms-angular/src/assets/images/union.svg';
         this.imageProcess = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAwLjVWNi41SDJWMTYuNUgxMlYxOC41SDE4VjEyLjVIMTJWMTQuNUg0VjYuNUg2VjQuNUgxMlY2LjVIMThWMC41SDEyVjIuNUg2VjAuNUgwWk00IDIuNVY0LjVIMlYyLjVINFpNMTYgMi41VjQuNUgxNFYyLjVIMTZaTTE2IDE2LjVWMTQuNUgxNFYxNi41SDE2WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC42Ii8+DQo8L3N2Zz4NCg==';
         this.updateData = new EventEmitter();
+        this.onItemSelect = new EventEmitter();
         iconRegistry.addSvgIconLiteral('process_area', domSanitizer.bypassSecurityTrustHtml(PROCESS_AREA_ICON));
     }
     ngOnChanges(changes) {
@@ -4669,11 +4740,15 @@ class RelatedListComponent {
     }
     onCloseClick() {
     }
+    onItemClick(item) {
+        if (this.onItemSelect)
+            this.onItemSelect.emit(item);
+    }
 }
 RelatedListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-related-list',
-                template: "<div class=\"container list-related\">\r\n  <div class=\"list-related__title\">\r\n    <strong>{{ title }}</strong>\r\n  </div>\r\n  <div\r\n    class=\"list-related__body\"\r\n    *ngFor=\"let item of relatedData; let i = index\"\r\n  >\r\n    <div class=\"list-related__body-parent\">\r\n      <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}"]
             },] }
 ];
@@ -4684,7 +4759,8 @@ RelatedListComponent.ctorParameters = () => [
 ];
 RelatedListComponent.propDecorators = {
     data: [{ type: Input }],
-    updateData: [{ type: Output }]
+    updateData: [{ type: Output }],
+    onItemSelect: [{ type: Output }]
 };
 
 class QMSRelatedModule {
@@ -5165,6 +5241,16 @@ QMSCKEditorLinkService.decorators = [
 class QMSCKEditorParamter {
 }
 
+var CKEditorModule;
+(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";
+})(CKEditorModule || (CKEditorModule = {}));
+
 class LinkAttachmentComponent extends QMSCKEditorBaseComponent {
     constructor(dialog, translate, linkService, dialogRef, data) {
         super();
@@ -5204,7 +5290,12 @@ class LinkAttachmentComponent extends QMSCKEditorBaseComponent {
     onSelectedAttachment(extraId, fileName) {
         this.linkUrl = { url: '', title: '' };
         if (extraId) {
-            this.linkUrl.url = `/api/File/GetFile?entityId=${extraId}`;
+            if (this.module === CKEditorModule.document) {
+                this.linkUrl.url = `/api/File/GetFile?entityId=${extraId}`;
+            }
+            else if (this.module === CKEditorModule.process) {
+                this.linkUrl.url = `/api/processes/GetFileContents?fileId=${extraId}`;
+            }
             this.linkUrl.title = fileName;
         }
         this.dialogRef.close(this.linkUrl);
@@ -5781,7 +5872,7 @@ class QMSCKEditorLinkComponent extends QMSCKEditorBaseComponent {
             const p1 = url.indexOf('mailto:');
             const p2 = url.indexOf('?subject=');
             const 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);
         }
@@ -5982,7 +6073,7 @@ class QMSCKEditorLinkComponent extends QMSCKEditorBaseComponent {
 QMSCKEditorLinkComponent.decorators = [
     { type: 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}"]
             },] }
 ];
@@ -6668,7 +6759,8 @@ function getCKEditorConfiguration(itemToolbar) {
                     label: 'New window',
                     attributes: {
                         target: '_blank',
-                        manualTarget: true
+                        manualTarget: true,
+                        url: 'url'
                     }
                 },
                 {
@@ -6676,7 +6768,8 @@ function getCKEditorConfiguration(itemToolbar) {
                     label: 'Topmost window',
                     attributes: {
                         target: '_top',
-                        manualTarget: true
+                        manualTarget: true,
+                        url: 'url'
                     }
                 },
                 {
@@ -6684,7 +6777,8 @@ function getCKEditorConfiguration(itemToolbar) {
                     label: 'Same window',
                     attributes: {
                         target: '_self',
-                        manualTarget: true
+                        manualTarget: true,
+                        url: 'url'
                     }
                 },
                 {
@@ -6692,7 +6786,8 @@ function getCKEditorConfiguration(itemToolbar) {
                     label: 'Parent window',
                     attributes: {
                         target: '_parent',
-                        manualTarget: true
+                        manualTarget: true,
+                        url: 'url'
                     }
                 },
                 {
@@ -6879,7 +6974,7 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         data.entityId = this.qmsckData.entityId;
         const dialogTemplate = this.dialog.open(QMSCKEditorLinkComponent, {
             width: '650px',
-            height: '670px',
+            height: '660px',
             data,
             disableClose: true
         });
@@ -6987,16 +7082,6 @@ QMSCKEditorModule.ctorParameters = () => [
     { type: Injector }
 ];
 
-var CKEditorModule;
-(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";
-})(CKEditorModule || (CKEditorModule = {}));
-
 class QMSCKEditorData {
     constructor() {
         this.apiUrl = '';