qms-angular 1.0.64 → 1.0.69

package/fesm2015/qms-angular.js

@@ -16,7 +16,7 @@ import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatButtonModule } from '@angular/material/button';
-import { mixinDisableRipple, mixinDisabled, MatCommonModule, setLines } from '@angular/material/core';
+import { mixinDisableRipple, mixinDisabled, MatCommonModule, setLines, MatOptionModule } from '@angular/material/core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -85,8 +85,8 @@ const en = {
     "CAPTION_TITLE": "In causal assessments, all causes related to the event are automatically added.",
     "CAUSAL_ANALYZES": "Selected Assessments",
     "FINISHED": "Finished",
-    "PROCESS_ID": "Process ID",
-    "DOCUMENT_ID": "Document ID",
+    "PROCESS_ID": "ID",
+    "DOCUMENT_ID": "ID",
     "PROCESS_AREA": "Process area",
     "FOLDER": "Folder",
     "DEVIATION_TYPE": "Deviation type",
@@ -347,8 +347,8 @@ const no = {
     "CAPTION_TITLE": "I årsaksanalyser blir automatisk alle årsaker knyttet til hendelsen lagt til.",
     "CAUSAL_ANALYZES": "Valgte Analyser",
     "FINISHED": "Ferdig",
-    "PROCESS_ID": "Prosess ID",
-    "DOCUMENT_ID": "Dokument ID",
+    "PROCESS_ID": "ID",
+    "DOCUMENT_ID": "ID",
     "PROCESS_AREA": "Prosessområder",
     "FOLDER": "Mappe",
     "DEVIATION_TYPE": "Sakstype",
@@ -669,11 +669,15 @@ class QMSComment {
         item.isDelete = true;
         this.updateLog.emit(item);
     }
+    regretItem(item) {
+        item.isDelete = false;
+        this.updateLog.emit(item);
+    }
 }
 QMSComment.decorators = [
     { type: Component, args: [{
                 selector: 'qms-comment',
-                template: "<div class=\"qms-comment\" *ngFor=\"let item of sourceLog; let i = index\">\r\n  <mat-card-header *ngIf=\"!item.isDelete\">\r\n    <mat-card-subtitle\r\n      >{{ item.user }} {{ item.date | dateFormat }}\r\n    </mat-card-subtitle>\r\n  </mat-card-header>\r\n  <mat-card-content>\r\n    <div\r\n      qms-scrollbar\r\n      *ngIf=\"!item.isEdit && !item.isDelete\"\r\n      class=\"content\"\r\n      [ngClass]=\"{ secondary: 0 != i % 2 }\"\r\n      [innerHTML]=\"showContent(item.content)\"\r\n    ></div>\r\n    <div class=\"content delete-action-wrap\" *ngIf=\"item.isDelete\">\r\n      <i>{{ LANG.DELETE_MESSAGE_COMMENT }}</i>\r\n      <button qms-btn-text class=\"btn-action\" (click)=\"item.isDelete = false\">\r\n        {{ LANG.REGRET }}\r\n      </button>\r\n    </div>\r\n    <mat-form-field *ngIf=\"item.isEdit && !item.isDelete\" qms-form-textarea>\r\n      <textarea\r\n        qms-scrollbar\r\n        class=\"textarea-comment\"\r\n        matInput\r\n        cdkTextareaAutosize\r\n        cdkAutosizeMinRows=\"1\"\r\n        cdkAutosizeMaxRows=\"5\"\r\n        [(ngModel)]=\"item.editedContent\"\r\n      ></textarea>\r\n    </mat-form-field>\r\n  </mat-card-content>\r\n  <mat-card-actions *ngIf=\"item.isDraft && !item.isEdit && !item.isDelete\">\r\n    <a class=\"btn-action\" (click)=\"editContent(item)\"> {{ LANG.EDIT }} </a>\r\n    <a class=\"btn-action ml-20\" (click)=\"removeItem(item)\">{{ LANG.DELETE }}</a>\r\n  </mat-card-actions>\r\n  <mat-card-actions *ngIf=\"item.isEdit\" class=\"edit-action-wrap\">\r\n    <button qms-btn (click)=\"saveEditedContent(item)\">{{ LANG.SAVE }}</button>\r\n    <button qms-btn-text (click)=\"item.isEdit = false\" class=\"ml-10\">\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </mat-card-actions>\r\n</div>\r\n",
+                template: "<div class=\"qms-comment\" *ngFor=\"let item of sourceLog; let i = index\">\r\n  <mat-card-header *ngIf=\"!item.isDelete\">\r\n    <mat-card-subtitle\r\n      >{{ item.user }} {{ item.date | dateFormat }}\r\n    </mat-card-subtitle>\r\n  </mat-card-header>\r\n  <mat-card-content>\r\n    <div\r\n      qms-scrollbar\r\n      *ngIf=\"!item.isEdit && !item.isDelete\"\r\n      class=\"content\"\r\n      [ngClass]=\"{ secondary: 0 != i % 2 }\"\r\n      [innerHTML]=\"showContent(item.content)\"\r\n    ></div>\r\n    <div class=\"content delete-action-wrap\" *ngIf=\"item.isDelete\">\r\n      <i>{{ LANG.DELETE_MESSAGE_COMMENT }}</i>\r\n      <button qms-btn-text class=\"btn-action\" (click)=\"regretItem(item)\">\r\n        {{ LANG.REGRET }}\r\n      </button>\r\n    </div>\r\n    <mat-form-field *ngIf=\"item.isEdit && !item.isDelete\" qms-form-textarea>\r\n      <textarea\r\n        qms-scrollbar\r\n        class=\"textarea-comment\"\r\n        matInput\r\n        cdkTextareaAutosize\r\n        cdkAutosizeMinRows=\"1\"\r\n        cdkAutosizeMaxRows=\"5\"\r\n        [(ngModel)]=\"item.editedContent\"\r\n      ></textarea>\r\n    </mat-form-field>\r\n  </mat-card-content>\r\n  <mat-card-actions *ngIf=\"item.isDraft && !item.isEdit && !item.isDelete\">\r\n    <a class=\"btn-action\" (click)=\"editContent(item)\"> {{ LANG.EDIT }} </a>\r\n    <a class=\"btn-action ml-20\" (click)=\"removeItem(item)\">{{ LANG.DELETE }}</a>\r\n  </mat-card-actions>\r\n  <mat-card-actions *ngIf=\"item.isEdit\" class=\"edit-action-wrap\">\r\n    <button qms-btn (click)=\"saveEditedContent(item)\">{{ LANG.SAVE }}</button>\r\n    <button qms-btn-text (click)=\"item.isEdit = false\" class=\"ml-10\">\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </mat-card-actions>\r\n</div>\r\n",
                 host: { 'class': 'qms-comment' },
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: ["@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}.qms-comment{font-family:Open Sans;margin-bottom:1rem;display:block}.qms-comment .mat-card-subtitle{font-size:.75rem;color:rgba(0,0,0,.6)}.qms-comment .mat-card-content .content{padding:10px 16px;background-color:rgba(0,0,0,.04);display:block;border-radius:4px;font-size:.875rem;max-height:125px;overflow-y:auto}.qms-comment .mat-card-content .content.delete-action-wrap{display:flex;justify-content:space-between;align-items:center}.qms-comment .mat-card-content .content.secondary{background-color:rgba(62,87,183,.12)}.qms-comment .mat-card-content .qms-form{width:100%}.qms-comment .btn-action{color:#1954a9;font-weight:600;font-size:13px;cursor:pointer}.qms-comment .textarea-comment{font-size:.875rem}.ml-10{margin-left:10px}.mt-15{margin-top:15px}.ml-20{margin-left:20px}.edit-action-wrap{display:block;margin-top:-10px}"]
@@ -880,22 +884,6 @@ QMSSuffixFieldDirective.propDecorators = {
     qmsSuffix: [{ type: ContentChild, args: [QMSSuffixDirective, { static: false },] }]
 };
 
-class TestOnlyComponent {
-    constructor() {
-        this.text = "";
-    }
-}
-TestOnlyComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'qms-test-only',
-                template: "<div class=\"test-container\">\r\n    <h1 class=\"content\">{{ text }}</h1>\r\n</div>",
-                styles: [".test-container .content{background-color:#f4e9e5;max-height:36vw;overflow-y:scroll;overflow-x:hidden}"]
-            },] }
-];
-TestOnlyComponent.propDecorators = {
-    text: [{ type: Input }]
-};
-
 class QMSChipInputChipListDirective {
     constructor(ele) {
         this.ele = ele;
@@ -2668,7 +2656,7 @@ class QMSButtonIcon extends _QMSButtonMixinBase {
         return attributes.some(attribute => this._getHostElement().hasAttribute(attribute));
     }
     ngAfterViewInit() {
-        if (this.type) {
+        if (this.active) {
             this.renderer.addClass(this._elementRef.nativeElement, 'active-icon');
         }
         this._focusMonitor.monitor(this._elementRef, true);
@@ -2686,10 +2674,10 @@ QMSButtonIcon.decorators = [
                     '[attr.disabled]': 'disabled || null',
                     '[class._qms-animation-noopable]': '_animationMode === "NoopAnimations"',
                     '[class.qms-btn-disabled]': 'disabled',
-                    '[class.active-icon]': 'type',
+                    '[class.active-icon]': 'active',
                 },
                 template: "<span class=\"qms-btn-icon-wrapper\"><ng-content></ng-content></span>\r\n<span class=\"qms-button-focus-overlay\"></span>\r\n",
-                inputs: ['disabled', 'color', 'type'],
+                inputs: ['disabled', 'color', 'active'],
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 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}.qms-btn{height:36px;line-height:34px;padding:0 10px;background-color:#1954a9;color:#fff}.qms-btn:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn.qms-primary{background-color:#1954a9;color:#fff}.qms-btn.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn.qms-primary:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn.qms-primary:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn.qms-secondary{background-color:#9e360f;color:#fff}.qms-btn.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn.qms-secondary:not([disabled]):focus{background-color:#9e360f;box-shadow:0 0 0 2px #cf9b87}.qms-btn.qms-secondary:not([disabled]):hover{background-color:#b63e11;color:#fff}.qms-btn-lg{height:48px;line-height:38px;padding:4px 14px;background-color:#1954a9;color:#fff}.qms-btn-lg:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-lg:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-lg:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-lg.qms-primary{background-color:#1954a9;color:#fff}.qms-btn-lg.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-lg.qms-primary:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-lg.qms-primary:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-lg.qms-secondary{background-color:#9e360f;color:#fff}.qms-btn-lg.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-lg.qms-secondary:not([disabled]):focus{background-color:#9e360f;box-shadow:0 0 0 2px #cf9b87}.qms-btn-lg.qms-secondary:not([disabled]):hover{background-color:#b63e11;color:#fff}.qms-btn-outlined{height:36px;line-height:34px;padding:0 9px;background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-outlined:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-outlined:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-outlined.qms-primary{background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-outlined.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined.qms-primary:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-outlined.qms-primary:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-outlined.qms-secondary{background-color:#fff;color:#9e360f;border:1px solid #9e360f}.qms-btn-outlined.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined.qms-secondary:not([disabled]):focus{background-color:#fff;color:#b63e11;box-shadow:0 0 0 2px #872e0d}.qms-btn-outlined.qms-secondary:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11;border:1px solid #b63e11}.qms-btn-outlined-lg{height:48px;line-height:38px;padding:4px 13px;background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-outlined-lg:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined-lg:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-outlined-lg:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-outlined-lg.qms-primary{background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-outlined-lg.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined-lg.qms-primary:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-outlined-lg.qms-primary:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-outlined-lg.qms-secondary{background-color:#fff;color:#9e360f;border:1px solid #9e360f}.qms-btn-outlined-lg.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined-lg.qms-secondary:not([disabled]):focus{background-color:#fff;color:#b63e11;box-shadow:0 0 0 2px #872e0d}.qms-btn-outlined-lg.qms-secondary:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11;border:1px solid #b63e11}.qms-btn-text{height:36px;line-height:34px;padding:0 10px;background-color:transparent;color:#1954a9}.qms-btn-text:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text:not([disabled]):focus{background-color:transparent;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-text:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-text.qms-primary{background-color:transparent;color:#1954a9}.qms-btn-text.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text.qms-primary:not([disabled]):focus{background-color:transparent;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-text.qms-primary:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-text.qms-secondary{background-color:transparent;color:#9e360f}.qms-btn-text.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text.qms-secondary:not([disabled]):focus{background-color:transparent;color:#b63e11;box-shadow:0 0 0 2px #872e0d}.qms-btn-text.qms-secondary:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11}.qms-btn-text-lg{height:48px;line-height:38px;padding:4px 14px;background-color:transparent;color:#1954a9}.qms-btn-text-lg:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text-lg:not([disabled]):focus{background-color:transparent;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-text-lg:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-text-lg.qms-primary{background-color:transparent;color:#1954a9}.qms-btn-text-lg.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text-lg.qms-primary:not([disabled]):focus{background-color:transparent;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-text-lg.qms-primary:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-text-lg.qms-secondary{background-color:transparent;color:#9e360f}.qms-btn-text-lg.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text-lg.qms-secondary:not([disabled]):focus{background-color:transparent;color:#b63e11;box-shadow:0 0 0 2px #872e0d}.qms-btn-text-lg.qms-secondary:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11}.qms-btn-fab,.qms-btn-fab-sm{min-width:0;width:56px;height:56px;padding:0;flex-shrink:0;box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2);background-color:#1954a9;color:#fff}.qms-btn-fab-sm .qms-btn-wrapper,.qms-btn-fab .qms-btn-wrapper{padding:16px 0;display:inline-block;line-height:24px}.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible),.qms-btn-fab:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab-sm:not([disabled]):focus,.qms-btn-fab:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-fab-sm:not([disabled]):hover,.qms-btn-fab:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible),.qms-btn-fab:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-sm:not([disabled]):focus,.qms-btn-fab:not([disabled]):focus{box-shadow:0 0 0 2px #8caad4,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab.qms-primary,.qms-primary.qms-btn-fab-sm{background-color:#1954a9;color:#fff}.qms-btn-fab.qms-primary:not([disabled]):focus:not(:focus-visible),.qms-primary.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab.qms-primary:not([disabled]):focus,.qms-primary.qms-btn-fab-sm:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-fab.qms-primary:not([disabled]):hover,.qms-primary.qms-btn-fab-sm:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-fab.qms-primary:not([disabled]):focus:not(:focus-visible),.qms-primary.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab.qms-primary:not([disabled]):focus,.qms-primary.qms-btn-fab-sm:not([disabled]):focus{box-shadow:0 0 0 2px #8caad4,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab.qms-secondary,.qms-secondary.qms-btn-fab-sm{background-color:#9e360f;color:#fff}.qms-btn-fab.qms-secondary:not([disabled]):focus:not(:focus-visible),.qms-secondary.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab.qms-secondary:not([disabled]):focus,.qms-secondary.qms-btn-fab-sm:not([disabled]):focus{background-color:#9e360f;box-shadow:0 0 0 2px #cf9b87}.qms-btn-fab.qms-secondary:not([disabled]):hover,.qms-secondary.qms-btn-fab-sm:not([disabled]):hover{background-color:#b63e11;color:#fff}.qms-btn-fab.qms-secondary:not([disabled]):focus:not(:focus-visible),.qms-secondary.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab.qms-secondary:not([disabled]):focus,.qms-secondary.qms-btn-fab-sm:not([disabled]):focus{box-shadow:0 0 0 2px #cf9b87,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-sm{min-width:0;width:40px;height:40px;padding:0;flex-shrink:0;box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-sm .qms-btn-wrapper{padding:8px 0;display:inline-block;line-height:24px}.qms-btn-fab-outlined,.qms-btn-fab-outlined-sm{min-width:0;width:56px;height:56px;padding:0;flex-shrink:0;box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2);background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined-sm .qms-btn-wrapper,.qms-btn-fab-outlined .qms-btn-wrapper{padding:16px 0;display:inline-block;line-height:24px}.qms-btn-fab-outlined-sm:not([disabled]):focus:not(:focus-visible),.qms-btn-fab-outlined:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-sm:not([disabled]):focus,.qms-btn-fab-outlined:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-sm:not([disabled]):hover,.qms-btn-fab-outlined:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-fab-outlined.qms-primary,.qms-primary.qms-btn-fab-outlined-sm{background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined.qms-primary:not([disabled]):focus:not(:focus-visible),.qms-primary.qms-btn-fab-outlined-sm:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined.qms-primary:not([disabled]):focus,.qms-primary.qms-btn-fab-outlined-sm:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined.qms-primary:not([disabled]):hover,.qms-primary.qms-btn-fab-outlined-sm:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-fab-outlined.qms-secondary,.qms-secondary.qms-btn-fab-outlined-sm{background-color:#fff;color:#9e360f;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined.qms-secondary:not([disabled]):focus:not(:focus-visible),.qms-secondary.qms-btn-fab-outlined-sm:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined.qms-secondary:not([disabled]):focus,.qms-secondary.qms-btn-fab-outlined-sm:not([disabled]):focus{background-color:#fff;color:#b63e11;box-shadow:0 0 0 2px #872e0d,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined.qms-secondary:not([disabled]):hover,.qms-secondary.qms-btn-fab-outlined-sm:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11}.qms-btn-fab-outlined-sm{min-width:0;width:40px;height:40px;padding:0;flex-shrink:0;box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-sm .qms-btn-wrapper{padding:8px 0;display:inline-block;line-height:24px}.qms-btn-fab-ext{box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2);padding:0 16px;border-radius:30px;line-height:54px;height:56px;background-color:#1954a9;color:#fff}.qms-btn-fab-ext:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab-ext:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-fab-ext:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-fab-ext:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-ext:not([disabled]):focus{box-shadow:0 0 0 2px #8caad4,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-ext.qms-primary{background-color:#1954a9;color:#fff}.qms-btn-fab-ext.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab-ext.qms-primary:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-fab-ext.qms-primary:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-fab-ext.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-ext.qms-primary:not([disabled]):focus{box-shadow:0 0 0 2px #8caad4,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-ext.qms-secondary{background-color:#9e360f;color:#fff}.qms-btn-fab-ext.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab-ext.qms-secondary:not([disabled]):focus{background-color:#9e360f;box-shadow:0 0 0 2px #cf9b87}.qms-btn-fab-ext.qms-secondary:not([disabled]):hover{background-color:#b63e11;color:#fff}.qms-btn-fab-ext.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-ext.qms-secondary:not([disabled]):focus{box-shadow:0 0 0 2px #cf9b87,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext{box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2);padding:0 16px;border-radius:30px;line-height:54px;height:56px;background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined-ext:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-fab-outlined-ext.qms-primary{background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined-ext.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext.qms-primary:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext.qms-primary:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-fab-outlined-ext.qms-secondary{background-color:#fff;color:#9e360f;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined-ext.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext.qms-secondary:not([disabled]):focus{background-color:#fff;color:#b63e11;box-shadow:0 0 0 2px #872e0d,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext.qms-secondary:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11}.qms-btn-icon{box-sizing:border-box;position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;font-style:normal}.qms-btn-icon.qms-btn-disabled{cursor:default;background:#e4e4e4;color:rgba(0,0,0,.38)}.qms-btn-icon .mat-icon{font-size:24px!important;padding-bottom:1px}.qms-btn-icon::-moz-focus-inner{border:0}.qms-btn-icon:not([disabled]):hover{text-decoration:none}.qms-btn-icon .qms-btn-icon-wrapper>*{vertical-align:middle}.qms-btn-icon:after{content:\"\";position:absolute;top:50%;left:50%;width:10px;height:10px;background:hsla(0,0%,100%,.5);opacity:0;border-radius:100%;transform:scale(1) translate(-50%);transform-origin:50% 50%}.qms-btn-icon{padding:0;min-width:0;width:48px;height:48px;line-height:48px;border-radius:50%;flex-shrink:0;border:none;background:transparent}.qms-btn-icon:focus{outline:0}.qms-btn-icon:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-icon.qms-light{color:rgba(0,0,0,.6)}.qms-btn-icon.qms-light:not([disabled]):focus,.qms-btn-icon.qms-light:not([disabled]):hover{background-color:rgba(0,0,0,.08);color:#323232}.qms-btn-icon.qms-light:not([disabled]):active{background-color:rgba(0,0,0,.24);color:#323232}.qms-btn-icon.qms-light.qms-btn-disabled{color:rgba(0,0,0,.24);background-color:transparent}.qms-btn-icon.qms-light:not(.qms-btn-disabled).active-icon{color:#1954a9}.qms-btn-icon.qms-light:not(.qms-btn-disabled).active-icon:not([disabled]):active,.qms-btn-icon.qms-light:not(.qms-btn-disabled).active-icon:not([disabled]):focus,.qms-btn-icon.qms-light:not(.qms-btn-disabled).active-icon:not([disabled]):hover{background-color:#e5eefb;color:#1954a9}.qms-btn-icon.qms-dark{color:#fff}.qms-btn-icon.qms-dark:not([disabled]):focus,.qms-btn-icon.qms-dark:not([disabled]):hover{background-color:hsla(0,0%,100%,.08)}.qms-btn-icon.qms-dark:not([disabled]):active{background-color:hsla(0,0%,100%,.24)}.qms-btn-icon.qms-dark.qms-btn-disabled{color:hsla(0,0%,100%,.24);background-color:transparent}.qms-btn-icon.qms-dark.active-icon{color:#f6b59d}.qms-btn-icon.qms-dark.active-icon:not([disabled]):focus,.qms-btn-icon.qms-dark.active-icon:not([disabled]):hover{background-color:hsla(0,0%,100%,.08)}.qms-btn-icon.qms-dark.active-icon:not([disabled]):active{background-color:hsla(0,0%,100%,.24)}.qms-btn-icon .qms-button-focus-overlay{opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1);top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.qms-btn-icon .qms-btn-icon-wrapper .mat-icon{vertical-align:middle;line-height:24px}.icon-wrapper{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center}.icon-wrapper.light.disabled .caption{color:rgba(0,0,0,.24);cursor:default;background-color:transparent}.icon-wrapper.light.active .caption{color:#1954a9}.icon-wrapper.light:not(.disabled):hover .caption{color:#323232}.icon-wrapper.light:not(.disabled):focus .caption{color:rgba(0,0,0,.6)}.icon-wrapper.light:not(.disabled):active .caption{color:#323232}.icon-wrapper.light .caption{color:rgba(0,0,0,.6)}.icon-wrapper.dark.disabled .caption{color:hsla(0,0%,100%,.24);cursor:default;background-color:transparent}.icon-wrapper.dark.active .caption{color:#f6b59d}.icon-wrapper.dark .caption{color:#fff}.icon-wrapper .caption{font-size:.75rem;line-height:16px;font-family:Open Sans;font-weight:400}@-webkit-keyframes ripple{0%{transform:scale(0);opacity:1}20%{transform:scale(25);opacity:1}to{opacity:0;transform:scale(40)}}@keyframes ripple{0%{transform:scale(0);opacity:1}20%{transform:scale(25);opacity:1}to{opacity:0;transform:scale(40)}}"]
@@ -2702,7 +2690,7 @@ QMSButtonIcon.ctorParameters = () => [
     { type: String, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATION_MODULE_TYPE,] }] }
 ];
 QMSButtonIcon.propDecorators = {
-    type: [{ type: Input, args: ['type',] }]
+    active: [{ type: Input, args: ['active',] }]
 };
 
 class QMSButtonModule {
@@ -2801,6 +2789,29 @@ SharedModule.decorators = [
     { type: NgModule, args: [{},] }
 ];
 
+class QMSAppBar {
+    constructor(elRef) {
+        this.elRef = elRef;
+        this.mode = "dark";
+    }
+    ngOnInit() {
+    }
+    ngAfterViewChecked() {
+        this.elRef.nativeElement.classList.add(`qms-app-bar-${this.mode}`);
+    }
+}
+QMSAppBar.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-app-bar]'
+            },] }
+];
+QMSAppBar.ctorParameters = () => [
+    { type: ElementRef }
+];
+QMSAppBar.propDecorators = {
+    mode: [{ type: Input, args: ['mode',] }]
+};
+
 const ɵ0$2 = { appearance: 'fill' }, ɵ1 = { color: 'none' };
 class QmsAngularModule {
 }
@@ -2808,7 +2819,6 @@ QmsAngularModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [
                     QmsAngularComponent,
-                    TestOnlyComponent,
                     MarginDirective,
                     QMSSearchFieldDirective,
                     QMSInputClearDirective,
@@ -2855,7 +2865,8 @@ QmsAngularModule.decorators = [
                     QMSChipInputChipListDirective,
                     ScrollToSelectedDirective,
                     QMSTooltipImageDirective,
-                    SelectDialog
+                    SelectDialog,
+                    QMSAppBar
                 ],
                 imports: [
                     CommonModule,
@@ -2867,7 +2878,6 @@ QmsAngularModule.decorators = [
                 exports: [
                     QmsAngularComponent,
                     MarginDirective,
-                    TestOnlyComponent,
                     QMSSearchFieldDirective,
                     QMSInputClearDirective,
                     QMSFormFieldDirective,
@@ -2912,7 +2922,8 @@ QmsAngularModule.decorators = [
                     QMSChipInputChipListDirective,
                     ScrollToSelectedDirective,
                     QMSTooltipImageDirective,
-                    SelectDialog
+                    SelectDialog,
+                    QMSAppBar
                 ],
                 providers: [
                     { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: ɵ0$2 },
@@ -3791,7 +3802,7 @@ QMSBreadcrumb.decorators = [
                 selector: 'qms-breadcrumb',
                 template: "<div>\r\n  <div class=\"breadcrumb-container\" *ngIf=\"!isMobileType\">\r\n    <!-- Home -->\r\n    <span\r\n      qms-breadcrumb-item\r\n      *ngIf=\"!isOverflow || type=='table'\"\r\n      [(showTooltip)]=\"homeNode.isOverflow\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"homeNode.displayType === itemIconType.name\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n      >\r\n        {{ homeNode.itemIcon }}\r\n      </mat-icon>\r\n      <mat-icon\r\n        *ngIf=\"homeNode.displayType === itemIconType.svg\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n        [svgIcon]=\"homeNode.itemIconSvg\"\r\n      >\r\n      </mat-icon>\r\n      <img\r\n        *ngIf=\"homeNode.displayType === itemIconType.path\"\r\n        class=\"mat-icon item-icon\"\r\n        [src]=\"homeNode.itemIconPath\"\r\n      />\r\n      <img\r\n        *ngIf=\"homeNode.displayType === itemIconType.base64\"\r\n        class=\"mat-icon image-base64 item-icon\"\r\n        [src]=\"getImagePath(homeNode)\"\r\n      />\r\n      <div\r\n        [qms-tool-tip]=\"homeNode.name\"\r\n        [showToolTip]=\"homeNode.isOverflow\"\r\n        #breadcrumbItemText\r\n        mode=\"dark\"\r\n        (click)=\"onItemSelect(homeNode)\"\r\n      >\r\n        {{homeNode.name}}\r\n      </div>\r\n      <mat-icon *ngIf=\"!isOverflow && type !=='table'\">keyboard_arrow_right</mat-icon>\r\n      <span\r\n        *ngIf=\"itemNodes.length && type=='table'\"\r\n        qms-breadcrumb-direction-icon\r\n      >\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </span>\r\n    </span>\r\n\r\n    <!-- Dropdown not table -->\r\n    <span qms-breadcrumb-item *ngIf=\"isOverflow && type!='table'\">\r\n      <button\r\n        qms-btn-icon\r\n        color=\"light\"\r\n        class=\"breadcrumb__dropdown-btn\"\r\n        [matMenuTriggerFor]=\"bodyMediumMenu\"\r\n      >\r\n        <mat-icon svgIcon=\"breadcrumb_dropdown\"></mat-icon>\r\n      </button>\r\n      <mat-menu\r\n        #bodyMediumMenu=\"matMenu\"\r\n        yPosition=\"below\"\r\n        class=\"qms-breadcrumb-menu\"\r\n      >\r\n        <div (click)=\"$event.stopPropagation()\">\r\n          <div\r\n            qms-menu-item\r\n            mat-menu-item\r\n            disableRipple\r\n            *ngFor=\"let item of dropdownNodes\"\r\n            (keydown.enter)=\"onKeyPressed($event)\"\r\n            (click)=\"onItemSelect(item)\"\r\n          >\r\n            <div #menuItemContent qms-expansion-header>\r\n              <div qms-list-header>\r\n                <div qms-line color=\"default-subtitle\">{{item.name}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </mat-menu>\r\n\r\n      <span qms-breadcrumb-direction-icon>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </span>\r\n    </span>\r\n\r\n    <!-- Dropdown table -->\r\n    <span qms-breadcrumb-item *ngIf=\"isOverflow && type=='table'\">\r\n      <button qms-btn-icon color=\"light\" [matMenuTriggerFor]=\"bodyMediumMenu\">\r\n        <mat-icon>more_horiz</mat-icon>\r\n      </button>\r\n      <mat-menu\r\n        #bodyMediumMenu=\"matMenu\"\r\n        yPosition=\"below\"\r\n        class=\"qms-breadcrumb-menu\"\r\n      >\r\n        <div (click)=\"$event.stopPropagation()\">\r\n          <div\r\n            qms-menu-item\r\n            mat-menu-item\r\n            disableRipple\r\n            *ngFor=\"let item of dropdownNodes\"\r\n            (keydown.enter)=\"onKeyPressed($event)\"\r\n            (click)=\"onItemSelect(item)\"\r\n          >\r\n            <div #menuItemContent qms-expansion-header>\r\n              <div qms-list-header>\r\n                <div qms-line color=\"default-subtitle\">{{item.name}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </mat-menu>\r\n\r\n      <span qms-breadcrumb-direction-icon>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </span>\r\n    </span>\r\n    <!-- Item list -->\r\n    <span\r\n      qms-breadcrumb-item\r\n      *ngFor=\"let item of itemNodes;let i=index\"\r\n      [isLastItem]=\"i === itemNodes.length - 1\"\r\n      [(showTooltip)]=\"item.isOverflow\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"item.displayType === itemIconType.name && item.isShow\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n      >\r\n        {{ item.itemIcon }}\r\n      </mat-icon>\r\n      <mat-icon\r\n        *ngIf=\"item.displayType === itemIconType.svg && item.isShow\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n        [svgIcon]=\"item.itemIconSvg\"\r\n      >\r\n      </mat-icon>\r\n      <img\r\n        *ngIf=\"item.displayType === itemIconType.path && item.isShow\"\r\n        class=\"mat-icon item-icon\"\r\n        [src]=\"item.itemIconPath\"\r\n      />\r\n      <img\r\n        *ngIf=\"item.displayType === itemIconType.base64 && item.isShow\"\r\n        class=\"mat-icon image-base64 item-icon\"\r\n        [src]=\"getImagePath(item)\"\r\n      />\r\n      <div\r\n        [qms-tool-tip]=\"item.name\"\r\n        [showToolTip]=\"item.isOverflow\"\r\n        #breadcrumbItemText\r\n        mode=\"dark\"\r\n        *ngIf=\"item.isShow\"\r\n        (click)=\"onItemSelect(item, i == itemNodes.length - 1);\"\r\n      >\r\n        {{item.name}}\r\n      </div>\r\n      <span\r\n        qms-breadcrumb-direction-icon\r\n        *ngIf=\"item.isShow && i !== itemNodes.length - 1\"\r\n      >\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </span>\r\n    </span>\r\n  </div>\r\n\r\n  <div class=\"breadcrumb-container\" *ngIf=\"isMobileType\">\r\n    <!-- Home -->\r\n    <span qms-breadcrumb-item [(showTooltip)]=\"previousNode.isOverflow\">\r\n      <span qms-breadcrumb-direction-icon>\r\n        <mat-icon>keyboard_backspace</mat-icon>\r\n      </span>\r\n      <mat-icon\r\n        *ngIf=\"previousNode.displayType === itemIconType.name\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n      >\r\n        {{ previousNode.itemIcon }}\r\n      </mat-icon>\r\n      <mat-icon\r\n        *ngIf=\"previousNode.displayType === itemIconType.svg\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n        [svgIcon]=\"previousNode.itemIconSvg\"\r\n      >\r\n      </mat-icon>\r\n      <img\r\n        *ngIf=\"previousNode.displayType === itemIconType.path\"\r\n        class=\"mat-icon item-icon\"\r\n        [src]=\"previousNode.itemIconPath\"\r\n      />\r\n      <img\r\n        *ngIf=\"previousNode.displayType === itemIconType.base64\"\r\n        class=\"mat-icon image-base64 item-icon\"\r\n        [src]=\"getImagePath(previousNode)\"\r\n      />\r\n      <div\r\n        [qms-tool-tip]=\"previousNode.name\"\r\n        [showToolTip]=\"previousNode.isOverflow\"\r\n        #breadcrumbItemText\r\n        mode=\"dark\"\r\n        (click)=\"onItemSelect(previousNode)\"\r\n      >\r\n        {{previousNode.name}}\r\n      </div>\r\n    </span>\r\n  </div>\r\n</div>\r\n",
                 encapsulation: ViewEncapsulation.None,
-                styles: [".breadcrumb-container{display:flex;font-family:Open Sans;font-size:14px;font-weight:600;color:#323232}.breadcrumb-container .qms-breadcrumb-direction-icon,.breadcrumb-container .qms-breadcrumb-item{display:flex;align-items:center;padding:3px 0 2px}.breadcrumb-container .qms-breadcrumb-direction-icon .mat-icon{width:18px;height:18px;font-size:18px;margin-left:.5rem;margin-right:.5rem}.breadcrumb-container .item-icon{margin-right:2px}.breadcrumb-container .qms-breadcrumb-item{cursor:pointer}.breadcrumb-container .qms-breadcrumb-item .qms-btn-icon{width:1.5rem;height:1.5rem;line-height:2rem}.breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-text{max-width:240px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.breadcrumb-container .qms-breadcrumb-item .breadcrumb__dropdown-btn{width:2rem;height:2rem}.breadcrumb-container .qms-breadcrumb-item .breadcrumb__dropdown-btn svg{display:block}.breadcrumb-container .qms-breadcrumb-last-item{color:rgba(0,0,0,.6);font-weight:400;cursor:not-allowed}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-direction-icon .mat-icon{width:12px;height:12px;font-size:12px;margin-left:.25rem;margin-right:.25rem;color:rgba(0,0,0,.6)}.qms-breadcrumb-table .breadcrumb-container .item-icon{margin-right:1px}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-text{max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:12px;font-weight:400;color:rgba(0,0,0,.6)}.qms-breadcrumb__multi-line .breadcrumb-container{flex-wrap:wrap}.qms-breadcrumb-menu .qms-dropdown-menu-item{border:none}"]
+                styles: [".breadcrumb-container{display:flex;font-family:Open Sans;font-size:14px;font-weight:600;color:#323232}.breadcrumb-container .qms-breadcrumb-direction-icon,.breadcrumb-container .qms-breadcrumb-item{display:flex;align-items:center;padding:3px 0 2px}.breadcrumb-container .qms-breadcrumb-direction-icon .mat-icon{width:18px;height:18px;font-size:18px;margin-left:.5rem;margin-right:.5rem}.breadcrumb-container .item-icon{margin-right:2px}.breadcrumb-container .qms-breadcrumb-item{cursor:inherit}.breadcrumb-container .qms-breadcrumb-item .qms-btn-icon{width:1.5rem;height:1.5rem;line-height:2rem}.breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-text{max-width:240px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.breadcrumb-container .qms-breadcrumb-item .breadcrumb__dropdown-btn{width:2rem;height:2rem}.breadcrumb-container .qms-breadcrumb-item .breadcrumb__dropdown-btn svg{display:block}.breadcrumb-container .qms-breadcrumb-last-item{color:rgba(0,0,0,.6);font-weight:400;cursor:not-allowed}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-direction-icon .mat-icon{width:12px;height:12px;font-size:12px;margin-left:.25rem;margin-right:.25rem;color:rgba(0,0,0,.6)}.qms-breadcrumb-table .breadcrumb-container .item-icon{margin-right:1px}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-text{max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:12px;font-weight:400;color:rgba(0,0,0,.6)}.qms-breadcrumb__multi-line .breadcrumb-container{flex-wrap:wrap}.qms-breadcrumb-menu .qms-dropdown-menu-item{border:none}"]
             },] }
 ];
 QMSBreadcrumb.ctorParameters = () => [
@@ -3858,7 +3869,7 @@ QMSBreadcrumbModule.decorators = [
             },] }
 ];
 
-var DataType$1;
+var DataType$2;
 (function (DataType) {
     DataType[DataType["process"] = 2] = "process";
     DataType[DataType["document"] = 1] = "document";
@@ -3870,9 +3881,9 @@ var DataType$1;
     DataType[DataType["deviationType"] = 8] = "deviationType";
     DataType[DataType["checklistCategory"] = 9] = "checklistCategory";
     DataType[DataType["riskFolder"] = 10] = "riskFolder";
-})(DataType$1 || (DataType$1 = {}));
+})(DataType$2 || (DataType$2 = {}));
 
-var DocumentNodeType$1;
+var DocumentNodeType$2;
 (function (DocumentNodeType) {
     DocumentNodeType[DocumentNodeType["Document"] = 1] = "Document";
     DocumentNodeType[DocumentNodeType["LinkDocument"] = 2] = "LinkDocument";
@@ -3882,24 +3893,24 @@ var DocumentNodeType$1;
     DocumentNodeType[DocumentNodeType["TopFolder"] = 6] = "TopFolder";
     DocumentNodeType[DocumentNodeType["DepartmentFolder"] = 7] = "DepartmentFolder";
     DocumentNodeType[DocumentNodeType["RegionalFolder"] = 8] = "RegionalFolder";
-})(DocumentNodeType$1 || (DocumentNodeType$1 = {}));
+})(DocumentNodeType$2 || (DocumentNodeType$2 = {}));
 
-class RelatedConst {
+class RelatedConst$1 {
 }
-RelatedConst.IS_DISPLAY_SEARCH_RESULT = 'IS_DISPLAY_SEARCH_RESULT';
-RelatedConst.HIDE_SEARCH_RESULT = 'HIDE_SEARCH_RESULT';
-RelatedConst.SHOW_SEARCH_RESULT = 'SHOW_SEARCH_RESULT';
+RelatedConst$1.IS_DISPLAY_SEARCH_RESULT = 'IS_DISPLAY_SEARCH_RESULT';
+RelatedConst$1.HIDE_SEARCH_RESULT = 'HIDE_SEARCH_RESULT';
+RelatedConst$1.SHOW_SEARCH_RESULT = 'SHOW_SEARCH_RESULT';
 
 class TreeNode$1 {
 }
 
-let objData$1 = {};
-let json = JSON;
-function buildArrayTree$1(obj, level) {
+let objData$2 = {};
+let json$1 = JSON;
+function buildArrayTree$2(obj, level) {
     return Object.keys(obj).reduce((accumulator, key) => {
         const value = obj[key];
         const node = new TreeNode$1();
-        const keyObj = json.parse(key);
+        const keyObj = json$1.parse(key);
         node.id = keyObj["id"];
         node.name = keyObj["name"];
         node.parentId = keyObj["parentId"];
@@ -3915,8 +3926,8 @@ function buildArrayTree$1(obj, level) {
         return accumulator.concat(node);
     }, []);
 }
-function buildObjectTree$1(arr) {
-    objData$1 = {};
+function buildObjectTree$2(arr) {
+    objData$2 = {};
     let objTreeData;
     const root = arr.filter((x) => {
         return x.parentId === '';
@@ -3926,7 +3937,7 @@ function buildObjectTree$1(arr) {
     });
     return objTreeData;
 }
-function findParent$1(id, array) {
+function findParent$2(id, array) {
     const objParent = {};
     const parent = array.filter((x) => {
         return x.rootId === id;
@@ -3938,7 +3949,7 @@ function findParent$1(id, array) {
             parentId: item.rootId,
             levelType: item.levelType
         };
-        objParent[json.stringify(parentKey)] = null;
+        objParent[json$1.stringify(parentKey)] = null;
     });
     // find child
     const child = array.filter((x) => {
@@ -3954,10 +3965,10 @@ function findParent$1(id, array) {
         levelType: parent[0].levelType
     };
     // add node to tree
-    objData$1[json.stringify(key)] = objParent;
-    return objData$1;
+    objData$2[json$1.stringify(key)] = objParent;
+    return objData$2;
 }
-function findChild$1(id, objParent, array) {
+function findChild$2(id, objParent, array) {
     const subNode = array.filter((x) => {
         return x.parentId === id;
     });
@@ -3969,7 +3980,7 @@ function findChild$1(id, objParent, array) {
             parentId: item.rootId,
             levelType: item.levelType
         };
-        processNode[json.stringify(nodeKey)] = null;
+        processNode[json$1.stringify(nodeKey)] = null;
         this.findChild(item.rootId, processNode, array);
         let key = {
             id: item.rootId,
@@ -3977,14 +3988,14 @@ function findChild$1(id, objParent, array) {
             parentId: id,
             levelType: item.levelType
         };
-        objParent[json.stringify(key)] = Object.assign(Object.assign({}, objParent[json.stringify(key)]), processNode);
+        objParent[json$1.stringify(key)] = Object.assign(Object.assign({}, objParent[json$1.stringify(key)]), processNode);
     });
 }
-const TreeFunctions = {
-    buildArrayTree: buildArrayTree$1,
-    buildObjectTree: buildObjectTree$1,
-    findParent: findParent$1,
-    findChild: findChild$1
+const TreeFunctions$1 = {
+    buildArrayTree: buildArrayTree$2,
+    buildObjectTree: buildObjectTree$2,
+    findParent: findParent$2,
+    findChild: findChild$2
 };
 
 class TreeFlatNode {
@@ -4013,8 +4024,6 @@ class TreeComponent {
         this.arrIndex = [];
         this.checkedNodeList = [];
         this.useExpandFeature = true;
-        this.allowSelectFolder = false;
-        this.areaOfCurrentProcess = '';
         this.showCheckBox = false;
         this.allowMultipleCheck = true;
         this.singleSelectedNode = false;
@@ -4038,7 +4047,7 @@ class TreeComponent {
         this.isChecked = false;
         this.idCheckIcon = '';
         this.listChildNode = [];
-        this.dataType = DataType$1;
+        this.dataType = DataType$2;
         this.transformer = (node, level) => {
             let checkHasChild = true;
             if (!node.children) {
@@ -4052,7 +4061,7 @@ class TreeComponent {
                 node.children.length &&
                 node.children.length === 1 &&
                 !node.children[0].name &&
-                node.id.toString() === this.areaOfCurrentProcess) {
+                node.id.toString() === '') {
                 checkHasChild = false;
             }
             if (!(this.listParentObj[node.id] === 1)) {
@@ -4099,10 +4108,11 @@ class TreeComponent {
             (changes.selectedData.currentValue.length > 0 ||
                 JSON.stringify(changes.selectedData.currentValue) !==
                     JSON.stringify(changes.selectedData.previousValue))) {
-            if (changes.selectedData.currentValue) {
+            if (changes.selectedData.currentValue && changes.selectedData.currentValue[0] !== null) {
                 this.checkSelected(changes.selectedData.currentValue);
             }
             else {
+                this.idCheckIcon = '';
                 for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
                     this.checklistSelection.deselect(this.treeControl.dataNodes[i]);
                 }
@@ -4120,7 +4130,7 @@ class TreeComponent {
         // this.initTreeData();
     }
     initTreeData() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
         this.treeData.forEach(item => {
             if (!!item.parentId && item.parentId.length > 0) {
                 this.listParentObj[item.parentId] = 1;
@@ -4130,30 +4140,28 @@ class TreeComponent {
             }
         });
         this.filterData = this.treeData;
-        this.treeObject = TreeFunctions.buildObjectTree(this.filterData);
-        this.dataSource.data = TreeFunctions.buildArrayTree(this.treeObject || {}, 0).map(element => {
+        this.treeObject = TreeFunctions$1.buildObjectTree(this.filterData);
+        this.dataSource.data = TreeFunctions$1.buildArrayTree(this.treeObject || {}, 0).map(element => {
             const item = this.sortDataTree(element);
             element = null;
             element = Object.assign({}, item);
             return element;
         });
         this.useExpandFeature = !((_a = this.treeConfig) === null || _a === void 0 ? void 0 : _a.showCheckBox);
-        this.allowSelectFolder = (_b = this.treeConfig) === null || _b === void 0 ? void 0 : _b.allowSelectFolder;
-        this.areaOfCurrentProcess = (_c = this.treeConfig) === null || _c === void 0 ? void 0 : _c.areaOfCurrentProcess;
-        this.showCheckBox = (_d = this.treeConfig) === null || _d === void 0 ? void 0 : _d.showCheckBox;
-        this.onlyCheckBoxForChild = (_e = this.treeConfig) === null || _e === void 0 ? void 0 : _e.onlyCheckBoxForChild;
-        this.moduleId = (_f = this.treeConfig) === null || _f === void 0 ? void 0 : _f.moduleId;
-        this.openIcon = (_g = this.treeConfig) === null || _g === void 0 ? void 0 : _g.openIcon;
-        this.openIconColor = ((_h = this.treeConfig) === null || _h === void 0 ? void 0 : _h.openIconColor) ? (_j = this.treeConfig) === null || _j === void 0 ? void 0 : _j.openIconColor : this.openIconColor;
-        this.closeIcon = (_k = this.treeConfig) === null || _k === void 0 ? void 0 : _k.closeIcon;
-        this.closeIconColor = ((_l = this.treeConfig) === null || _l === void 0 ? void 0 : _l.closeIconColor) ? (_m = this.treeConfig) === null || _m === void 0 ? void 0 : _m.closeIconColor : this.closeIconColor;
-        this.itemIcon = (_o = this.treeConfig) === null || _o === void 0 ? void 0 : _o.itemIcon;
-        this.itemIconSvg = (_p = this.treeConfig) === null || _p === void 0 ? void 0 : _p.itemIconSvg;
-        this.itemIconPath = (_q = this.treeConfig) === null || _q === void 0 ? void 0 : _q.itemIconPath;
-        this.itemIconBase64 = this.domSanitizer.bypassSecurityTrustResourceUrl((_r = this.treeConfig) === null || _r === void 0 ? void 0 : _r.itemIconBase64);
-        this.allowMultipleCheck = (_s = this.treeConfig) === null || _s === void 0 ? void 0 : _s.allowMultipleCheck;
-        this.singleSelectedNode = (_t = this.treeConfig) === null || _t === void 0 ? void 0 : _t.singleSelectedNode;
-        this.onlyFolder = (_u = this.treeConfig) === null || _u === void 0 ? void 0 : _u.onlyFolder;
+        this.showCheckBox = (_b = this.treeConfig) === null || _b === void 0 ? void 0 : _b.showCheckBox;
+        this.onlyCheckBoxForChild = (_c = this.treeConfig) === null || _c === void 0 ? void 0 : _c.onlyCheckBoxForChild;
+        this.moduleId = (_d = this.treeConfig) === null || _d === void 0 ? void 0 : _d.moduleId;
+        this.openIcon = (_e = this.treeConfig) === null || _e === void 0 ? void 0 : _e.openIcon;
+        this.openIconColor = ((_f = this.treeConfig) === null || _f === void 0 ? void 0 : _f.openIconColor) ? (_g = this.treeConfig) === null || _g === void 0 ? void 0 : _g.openIconColor : this.openIconColor;
+        this.closeIcon = (_h = this.treeConfig) === null || _h === void 0 ? void 0 : _h.closeIcon;
+        this.closeIconColor = ((_j = this.treeConfig) === null || _j === void 0 ? void 0 : _j.closeIconColor) ? (_k = this.treeConfig) === null || _k === void 0 ? void 0 : _k.closeIconColor : this.closeIconColor;
+        this.itemIcon = (_l = this.treeConfig) === null || _l === void 0 ? void 0 : _l.itemIcon;
+        this.itemIconSvg = (_m = this.treeConfig) === null || _m === void 0 ? void 0 : _m.itemIconSvg;
+        this.itemIconPath = (_o = this.treeConfig) === null || _o === void 0 ? void 0 : _o.itemIconPath;
+        this.itemIconBase64 = this.domSanitizer.bypassSecurityTrustResourceUrl((_p = this.treeConfig) === null || _p === void 0 ? void 0 : _p.itemIconBase64);
+        this.allowMultipleCheck = (_q = this.treeConfig) === null || _q === void 0 ? void 0 : _q.allowMultipleCheck;
+        this.singleSelectedNode = (_r = this.treeConfig) === null || _r === void 0 ? void 0 : _r.singleSelectedNode;
+        this.onlyFolder = (_s = this.treeConfig) === null || _s === void 0 ? void 0 : _s.onlyFolder;
         this.checklistSelection = new SelectionModel(this.allowMultipleCheck); /* true: multiple */
         this.displayType = this.getItemIconType(this.treeConfig);
         // Expand child node tree
@@ -4219,7 +4227,7 @@ class TreeComponent {
                 return;
             }
             let itemMarkChecked = this.expandToChildNode[this.expandToChildNode.length - 1].toUpperCase();
-            this.idCheckIcon = itemMarkChecked;
+            let parentItem = '';
             // get all children nodes on same level
             let listChildNodeSameLevel = this.findChildNode(itemMarkChecked, this.dataSource.data);
             // get all children in all level
@@ -4228,6 +4236,7 @@ class TreeComponent {
             this.getChildNodeSelectOne.emit(this.listChildNode);
             for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
                 if (itemMarkChecked === this.treeControl.dataNodes[i].id) {
+                    parentItem = this.treeControl.dataNodes[i].parentId;
                     this.selectNodeEvent.emit(this.treeControl.dataNodes[i]);
                 }
                 this.expandToChildNode.forEach(el => {
@@ -4236,6 +4245,7 @@ class TreeComponent {
                     }
                 });
             }
+            this.idCheckIcon = this.idToCheckSelectOne(itemMarkChecked, parentItem);
         }
     }
     checkDisabledList() {
@@ -4254,7 +4264,7 @@ class TreeComponent {
         //Selected node with select one
         if (this.disabledList.length && this.treeConfig.selectOne) {
             let itemMarkChecked = this.disabledList[this.disabledList.length - 1].toUpperCase();
-            this.idCheckIcon = itemMarkChecked;
+            let parentItem = '';
             // get all children nodes on same level
             let listChildNodeSameLevel = this.findChildNode(itemMarkChecked, this.dataSource.data);
             // get all children in all level
@@ -4263,6 +4273,7 @@ class TreeComponent {
             this.getChildNodeSelectOne.emit(this.listChildNode);
             for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
                 if (itemMarkChecked === this.treeControl.dataNodes[i].id) {
+                    parentItem = this.treeControl.dataNodes[i].parentId;
                     this.selectNodeEvent.emit(this.treeControl.dataNodes[i]);
                 }
                 this.disabledList.forEach(el => {
@@ -4278,6 +4289,7 @@ class TreeComponent {
                     }
                 });
             }
+            this.idCheckIcon = this.idToCheckSelectOne(itemMarkChecked, parentItem);
         }
         else {
             this.idCheckIcon = '';
@@ -4485,23 +4497,23 @@ class TreeComponent {
         this.checkBoxEvent.emit(this.checklistSelection.selected);
     }
     selectNode(node) {
-        if (window[RelatedConst.IS_DISPLAY_SEARCH_RESULT]) {
-            window.postMessage(RelatedConst.HIDE_SEARCH_RESULT, '*');
+        if (window[RelatedConst$1.IS_DISPLAY_SEARCH_RESULT]) {
+            window.postMessage(RelatedConst$1.HIDE_SEARCH_RESULT, '*');
         }
         if (this.treeConfig.selectOne) {
             node.itemType = this.checkDataTypeSelectNode(node);
-            this.idCheckIcon = node.id;
+            this.idCheckIcon = this.idToCheckSelectOne(node.id, node.parentId);
             this.selectNodeEvent.emit(node);
         }
     }
     checkDataTypeSelectNode(node) {
         let itemType = -1;
         switch (this.moduleId) {
-            case DataType$1.process:
-                itemType = node.expandable ? DataType$1.area : DataType$1.process;
+            case DataType$2.process:
+                itemType = node.expandable ? DataType$2.area : DataType$2.process;
                 break;
-            case DataType$1.document:
-                itemType = node.expandable ? DataType$1.folder : DataType$1.document;
+            case DataType$2.document:
+                itemType = node.expandable ? DataType$2.folder : DataType$2.document;
                 break;
             default:
                 itemType = this.moduleId;
@@ -4519,12 +4531,13 @@ class TreeComponent {
             //     node.parentId === this.disabledList[this.disabledList.length - 1].toUpperCase())) {
             //   return;
             // }
-            this.idCheckIcon = node.id;
+            this.idCheckIcon = this.idToCheckSelectOne(node.id, node.parentId);
             node.itemType = this.checkDataTypeSelectNode(node);
             this.selectNodeEvent.emit(node);
+            return;
         }
-        if (window[RelatedConst.IS_DISPLAY_SEARCH_RESULT]) {
-            window.postMessage(RelatedConst.HIDE_SEARCH_RESULT, '*');
+        if (window[RelatedConst$1.IS_DISPLAY_SEARCH_RESULT]) {
+            window.postMessage(RelatedConst$1.HIDE_SEARCH_RESULT, '*');
         }
         // set useExpandFeature = true to improve performance of tree loading
         if (!isExpandNode || !this.useExpandFeature) {
@@ -4659,17 +4672,17 @@ class TreeComponent {
             return this.treeControl.isExpanded(node) ? this.openIcon : this.closeIcon;
         }
         switch (this.moduleId) {
-            case DataType$1.document: {
+            case DataType$2.document: {
                 const nodeData = this.treeData.filter(x => { return x.rootId === node.id; });
                 if (nodeData.length > 0) {
                     switch (nodeData[0].levelType) {
-                        case DocumentNodeType$1.DepartmentFolder:
+                        case DocumentNodeType$2.DepartmentFolder:
                             return this.treeControl.isExpanded(node) ? 'department_folder_outlined' : 'department_folder';
-                        case DocumentNodeType$1.RegionalFolder:
+                        case DocumentNodeType$2.RegionalFolder:
                             return this.treeControl.isExpanded(node) ? 'regional_folder_outlined' : 'regional_folder';
-                        case DocumentNodeType$1.TopFolder:
+                        case DocumentNodeType$2.TopFolder:
                             return this.treeControl.isExpanded(node) ? 'enterprise_folder_outlined' : 'enterprise_folder';
-                        case DocumentNodeType$1.Folder:
+                        case DocumentNodeType$2.Folder:
                             return this.treeControl.isExpanded(node) ? 'local_folder_outlined' : 'local_folder';
                         default:
                             return this.treeControl.isExpanded(node) ? 'folder_outlined' : 'folder';
@@ -4677,7 +4690,7 @@ class TreeComponent {
                 }
                 return this.treeControl.isExpanded(node) ? 'keyboard_up' : 'keyboard_down';
             }
-            case DataType$1.process:
+            case DataType$2.process:
                 return this.treeControl.isExpanded(node) ? 'process_area_outlined' : 'process_area';
             default:
                 return this.treeControl.isExpanded(node) ? 'keyboard_up' : 'keyboard_down';
@@ -4685,26 +4698,26 @@ class TreeComponent {
     }
     getItemIcon(node) {
         switch (this.moduleId) {
-            case DataType$1.document:
+            case DataType$2.document:
                 switch (node.levelType) {
-                    case DocumentNodeType$1.DepartmentFolder:
+                    case DocumentNodeType$2.DepartmentFolder:
                         return 'document_department';
-                    case DocumentNodeType$1.RegionalFolder:
+                    case DocumentNodeType$2.RegionalFolder:
                         return 'document_regional';
-                    case DocumentNodeType$1.TopFolder:
+                    case DocumentNodeType$2.TopFolder:
                         return 'document_enterprise';
-                    case DocumentNodeType$1.Folder:
+                    case DocumentNodeType$2.Folder:
                         return 'document_local';
                     default:
                         return 'document';
                 }
-            case DataType$1.process:
+            case DataType$2.process:
                 return 'process';
-            case DataType$1.checklist:
+            case DataType$2.checklist:
                 return 'checklist';
-            case DataType$1.deviation:
+            case DataType$2.deviation:
                 return 'deviation';
-            case DataType$1.risk:
+            case DataType$2.risk:
                 return 'risk';
             default:
                 return 'document';
@@ -4726,13 +4739,16 @@ class TreeComponent {
     expandNode(node) {
         this.treeControl.expand(node);
     }
+    idToCheckSelectOne(id, parentId) {
+        return `${id}-${parentId}`;
+    }
 }
 TreeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-tree',
-                template: "<mat-tree\r\n  [dataSource]=\"dataSource\"\r\n  [treeControl]=\"treeControl\"\r\n  class=\"tree__container\"\r\n>\r\n  <mat-tree-node\r\n    class=\"tree-branch\"\r\n    *matTreeNodeDef=\"let node\"\r\n    matTreeNodeToggle\r\n    matTreeNodePadding\r\n  >\r\n    <!-- form thu 1 - child -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    >\r\n    </mat-checkbox>\r\n\r\n    <!-- form thu 2 -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"ml-10 checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <div\r\n      class=\"expand-node\"\r\n      *ngIf=\"node.name && !onlyFolder\"\r\n      [class.bgSelected]=\"treeConfig.selectOne && idCheckIcon == node.id\"\r\n      (click)=\"selectNode(node)\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <div class=\"expand-node__text\">\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.name && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n        >\r\n          {{ itemIcon }}\r\n        </mat-icon>\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.svg && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"itemIconSvg\"\r\n        >\r\n        </mat-icon>\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.path && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon\"\r\n          [src]=\"itemIconPath\"\r\n        />\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.base64 && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon image-base64\"\r\n          [src]=\"getImagePath()\"\r\n        />\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.none && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getItemIcon(node)\"\r\n        ></mat-icon>\r\n        <span class=\"text-node\">{{ node.name }}</span>\r\n      </div>\r\n      <mat-icon\r\n        class=\"icon-check\"\r\n        *ngIf=\"treeConfig.selectOne && idCheckIcon == node.id\"\r\n        >done</mat-icon\r\n      >\r\n    </div>\r\n  </mat-tree-node>\r\n\r\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n    <!-- form thu 1 - parent -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild\"\r\n      [checked]=\"descendantsAllSelected(node)\"\r\n      [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <button\r\n      class=\"button-boder\"\r\n      mat-icon-button\r\n      matTreeNodeToggle\r\n      [disableRipple]=\"!node.hasChild\"\r\n      [attr.aria-label]=\"'toggle ' + node.filename\"\r\n      *ngIf=\"node.name\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"openIcon && closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngStyle]=\"{\r\n          color: treeControl.isExpanded(node) ? openIconColor : closeIconColor\r\n        }\"\r\n        >{{ getNodeIcon(node) }}</mat-icon\r\n      >\r\n      <mat-icon\r\n        *ngIf=\"!openIcon || !closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngClass]=\"{\r\n          'open-icon': treeControl.isExpanded(node),\r\n          'not-department-icon': moduleId !== dataType.document\r\n        }\"\r\n        [svgIcon]=\"getNodeIcon(node)\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <span\r\n      *ngIf=\"expandOnTitleClick\"\r\n      matTreeNodeToggle\r\n      class=\"text-node-parent\"\r\n      style=\"cursor: pointer\"\r\n      (click)=\"onExpandNode(node)\"\r\n      [ngStyle]=\"{\r\n        color: treeControl.isExpanded(node) ? openIconColor : '#000000'\r\n      }\"\r\n    >\r\n      <span>{{ node.name }}</span>\r\n      <mat-icon\r\n        class=\"icon-check\"\r\n        *ngIf=\"treeConfig.selectOne && idCheckIcon == node.id\"\r\n        >done</mat-icon\r\n      >\r\n    </span>\r\n    <span\r\n      *ngIf=\"!expandOnTitleClick\"\r\n      class=\"text-node-parent\"\r\n      (click)=\"selectFolderNode(node)\"\r\n      style=\"cursor: pointer\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <span>{{ node.name }}</span>\r\n      <mat-icon\r\n        class=\"icon-check\"\r\n        *ngIf=\"treeConfig.selectOne && idCheckIcon == node.id\"\r\n        >done</mat-icon\r\n      >\r\n    </span>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n",
+                template: "<mat-tree\r\n  [dataSource]=\"dataSource\"\r\n  [treeControl]=\"treeControl\"\r\n  class=\"tree__container\"\r\n>\r\n  <mat-tree-node\r\n    class=\"tree-branch\"\r\n    *matTreeNodeDef=\"let node\"\r\n    matTreeNodeToggle\r\n    matTreeNodePadding\r\n  >\r\n    <!-- form thu 1 - child -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    >\r\n    </mat-checkbox>\r\n\r\n    <!-- form thu 2 -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"ml-10 checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <div\r\n      class=\"expand-node\"\r\n      *ngIf=\"node.name && !onlyFolder\"\r\n      [class.bgSelected]=\"\r\n        treeConfig.selectOne &&\r\n        idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n      \"\r\n      (click)=\"selectNode(node)\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <div class=\"expand-node__text\">\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.name && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n        >\r\n          {{ itemIcon }}\r\n        </mat-icon>\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.svg && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"itemIconSvg\"\r\n        >\r\n        </mat-icon>\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.path && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon\"\r\n          [src]=\"itemIconPath\"\r\n        />\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.base64 && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon image-base64\"\r\n          [src]=\"getImagePath()\"\r\n        />\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.none && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getItemIcon(node)\"\r\n        ></mat-icon>\r\n        <span\r\n          class=\"text-node\"\r\n          [class.select-one-checked]=\"\r\n            treeConfig.selectOne &&\r\n            idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n          \"\r\n          >{{ node.name }}</span\r\n        >\r\n      </div>\r\n      <mat-icon\r\n        class=\"select-one-checked\"\r\n        *ngIf=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >done</mat-icon\r\n      >\r\n    </div>\r\n  </mat-tree-node>\r\n\r\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n    <!-- form thu 1 - parent -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild\"\r\n      [checked]=\"descendantsAllSelected(node)\"\r\n      [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <button\r\n      class=\"button-boder\"\r\n      mat-icon-button\r\n      matTreeNodeToggle\r\n      [disableRipple]=\"!node.hasChild\"\r\n      [attr.aria-label]=\"'toggle ' + node.filename\"\r\n      *ngIf=\"node.name\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"openIcon && closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngStyle]=\"{\r\n          color: treeControl.isExpanded(node) ? openIconColor : closeIconColor\r\n        }\"\r\n        >{{ getNodeIcon(node) }}</mat-icon\r\n      >\r\n      <mat-icon\r\n        *ngIf=\"!openIcon || !closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngClass]=\"{\r\n          'open-icon': treeControl.isExpanded(node),\r\n          'not-department-icon': moduleId !== dataType.document\r\n        }\"\r\n        [svgIcon]=\"getNodeIcon(node)\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <span\r\n      *ngIf=\"expandOnTitleClick\"\r\n      matTreeNodeToggle\r\n      class=\"text-node-parent\"\r\n      style=\"cursor: pointer\"\r\n      (click)=\"onExpandNode(node)\"\r\n      [ngStyle]=\"{\r\n        color: treeControl.isExpanded(node) ? openIconColor : '#000000'\r\n      }\"\r\n    >\r\n      <span>{{ node.name }}</span>\r\n    </span>\r\n    <span\r\n      *ngIf=\"!expandOnTitleClick\"\r\n      class=\"text-node-parent\"\r\n      (click)=\"selectFolderNode(node)\"\r\n      style=\"cursor: pointer\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <span\r\n        [class.select-one-checked]=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >{{ node.name }}</span\r\n      >\r\n      <mat-icon\r\n        class=\"select-one-checked\"\r\n        *ngIf=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >done</mat-icon\r\n      >\r\n    </span>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n",
                 encapsulation: ViewEncapsulation.None,
-                styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.tree__container{font-family:Open Sans;font-style:normal;font-weight:400;font-size:.875rem;line-height:19px;color:#323232}.tree__container .mat-tree-node{color:#000;min-height:0}.tree__container .mat-tree-node .mat-checkbox.qms-group-options{padding:0}.tree__container .mat-tree-node .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.tree__container .button{margin-left:6px}.tree__container .button:focus,.tree__container .button:hover{background-color:#009ef2;border-radius:2px;width:auto}.tree__container .button-boder:focus,.tree__container .button:focus{outline:0}.tree__container .button-folder-boder:focus{outline:0}.tree__container .button-folder-boder:focus,.tree__container .button-folder-boder:hover{background-color:#009ef2;border-radius:2px;width:auto}.tree__container .expand-node{margin-left:8px;min-height:32px;justify-content:space-between;width:100%}.tree__container .expand-node,.tree__container .expand-node .expand-node__text{display:flex;align-items:center}.tree__container .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.tree__container .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.tree__container .expand-node.bgSelected .icon-check{color:#1954a9}.tree__container .text-node-parent{width:100%;display:flex;align-items:center;justify-content:space-between;margin-left:10px;cursor:pointer}.tree__container .text-node-parent.active-item{color:#1954a9!important}.tree__container .text-node-parent.bgSelected .icon-check{color:#1954a9}.tree__container .mr-11{margin-right:11px}.tree__container .ml-10{margin-left:10px}.tree__container .tree-branch:hover{background-color:#e5eefb}.tree__container .image-base64{width:20px;height:20px}.tree__container .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}::ng-deep .mat-tree .mat-checkbox.qms-group-options{padding:0}::ng-deep .mat-tree .mat-checkbox.qms-group-options.mat-checkbox-checked{background-color:transparent}::ng-deep .mat-tree .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:0}svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.open-icon.not-department-icon svg path,.open-icon svg path:first-child{fill:#1954a9}"]
+                styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.tree__container{font-family:Open Sans;font-style:normal;font-weight:400;font-size:.875rem;line-height:19px;color:#323232}.tree__container .mat-tree-node{color:#000;min-height:0}.tree__container .mat-tree-node .mat-checkbox.qms-group-options{padding:0}.tree__container .mat-tree-node .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.tree__container .button{margin-left:6px}.tree__container .button:focus,.tree__container .button:hover{background-color:#009ef2;border-radius:2px;width:auto}.tree__container .button-boder:focus,.tree__container .button:focus{outline:0}.tree__container .button-folder-boder:focus{outline:0}.tree__container .button-folder-boder:focus,.tree__container .button-folder-boder:hover{background-color:#009ef2;border-radius:2px;width:auto}.tree__container .expand-node{margin-left:8px;min-height:32px;justify-content:space-between;width:100%}.tree__container .expand-node,.tree__container .expand-node .expand-node__text{display:flex;align-items:center}.tree__container .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.tree__container .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.tree__container .expand-node.bgSelected .select-one-checked{color:#1954a9}.tree__container .text-node-parent{width:100%;display:flex;align-items:center;justify-content:space-between;margin-left:10px;cursor:pointer}.tree__container .text-node-parent.active-item{color:#1954a9!important}.tree__container .text-node-parent .select-one-checked{color:#1954a9}.tree__container .mr-11{margin-right:11px}.tree__container .ml-10{margin-left:10px}.tree__container .tree-branch:hover{background-color:#e5eefb}.tree__container .image-base64{width:20px;height:20px}.tree__container .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}::ng-deep .mat-tree .mat-checkbox.qms-group-options{padding:0}::ng-deep .mat-tree .mat-checkbox.qms-group-options.mat-checkbox-checked{background-color:transparent}::ng-deep .mat-tree .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:0}svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.open-icon.not-department-icon svg path,.open-icon svg path:first-child{fill:#1954a9}"]
             },] }
 ];
 TreeComponent.ctorParameters = () => [
@@ -4794,7 +4810,7 @@ QMSTreeModule.decorators = [
 class RelatedContentComponent {
     constructor() {
         this.contents = [];
-        this.dataType = DataType$1;
+        this.dataType = DataType$2;
         this.imageProcess = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAwLjVWNi41SDJWMTYuNUgxMlYxOC41SDE4VjEyLjVIMTJWMTQuNUg0VjYuNUg2VjQuNUgxMlY2LjVIMThWMC41SDEyVjIuNUg2VjAuNUgwWk00IDIuNVY0LjVIMlYyLjVINFpNMTYgMi41VjQuNUgxNFYyLjVIMTZaTTE2IDE2LjVWMTQuNUgxNFYxNi41SDE2WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC42Ii8+DQo8L3N2Zz4NCg==';
     }
     ngOnInit() {
@@ -4828,7 +4844,7 @@ class RelatedListComponent {
         this.iconRegistry = iconRegistry;
         this.appIconService = appIconService;
         this.relatedData = [];
-        this.dataType = DataType$1;
+        this.dataType = DataType$2;
         // imageProcess = '../qms-angular/src/assets/images/union.svg';
         this.imageProcess = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAwLjVWNi41SDJWMTYuNUgxMlYxOC41SDE4VjEyLjVIMTJWMTQuNUg0VjYuNUg2VjQuNUgxMlY2LjVIMThWMC41SDEyVjIuNUg2VjAuNUgwWk00IDIuNVY0LjVIMlYyLjVINFpNMTYgMi41VjQuNUgxNFYyLjVIMTZaTTE2IDE2LjVWMTQuNUgxNFYxNi41SDE2WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC42Ii8+DQo8L3N2Zz4NCg==';
         this.updateData = new EventEmitter();
@@ -4882,43 +4898,43 @@ class RelatedListComponent {
     }
     getNodeIcon(item) {
         switch (item.itemType) {
-            case DataType$1.folder: {
+            case DataType$2.folder: {
                 switch (item.levelType) {
-                    case DocumentNodeType$1.DepartmentFolder:
+                    case DocumentNodeType$2.DepartmentFolder:
                         return 'department_folder_outlined';
-                    case DocumentNodeType$1.RegionalFolder:
+                    case DocumentNodeType$2.RegionalFolder:
                         return 'regional_folder_outlined';
-                    case DocumentNodeType$1.TopFolder:
+                    case DocumentNodeType$2.TopFolder:
                         return 'enterprise_folder_outlined';
-                    case DocumentNodeType$1.Folder:
+                    case DocumentNodeType$2.Folder:
                         return 'local_folder_outlined';
                     default:
                         return 'folder_outlined';
                 }
             }
-            case DataType$1.document: {
+            case DataType$2.document: {
                 switch (item.levelType) {
-                    case DocumentNodeType$1.DepartmentFolder:
+                    case DocumentNodeType$2.DepartmentFolder:
                         return 'document_department';
-                    case DocumentNodeType$1.RegionalFolder:
+                    case DocumentNodeType$2.RegionalFolder:
                         return 'document_regional';
-                    case DocumentNodeType$1.TopFolder:
+                    case DocumentNodeType$2.TopFolder:
                         return 'document_enterprise';
-                    case DocumentNodeType$1.Folder:
+                    case DocumentNodeType$2.Folder:
                         return 'document_local';
                     default:
                         return 'document';
                 }
             }
-            case DataType$1.area:
+            case DataType$2.area:
                 return 'process_area_outlined';
-            case DataType$1.process:
+            case DataType$2.process:
                 return 'process';
-            case DataType$1.deviation:
+            case DataType$2.deviation:
                 return 'deviation';
-            case DataType$1.checklist:
+            case DataType$2.checklist:
                 return 'checklist';
-            case DataType$1.risk:
+            case DataType$2.risk:
                 return 'risk';
             default:
                 return 'folder_outlined';
@@ -4952,13 +4968,13 @@ RelatedListComponent.propDecorators = {
 class TreeModel {
 }
 
-var ModuleType$1;
+var ModuleType$2;
 (function (ModuleType) {
     ModuleType[ModuleType["documentProcess"] = 1] = "documentProcess";
     ModuleType[ModuleType["deviation"] = 2] = "deviation";
     ModuleType[ModuleType["checklist"] = 3] = "checklist";
     ModuleType[ModuleType["risk"] = 4] = "risk";
-})(ModuleType$1 || (ModuleType$1 = {}));
+})(ModuleType$2 || (ModuleType$2 = {}));
 
 class PopupData {
     constructor() {
@@ -4977,6 +4993,8 @@ class RelatedItem {
 }
 class IRelated {
 }
+class RelatedOption extends IRelated {
+}
 class RelatedData {
     constructor() {
         this.title = '';
@@ -5034,8 +5052,8 @@ class RelatedPopupComponent {
         this.documentCheckedList = [];
         this.singleProcessList = [];
         this.singleDocumentList = [];
-        this.module = ModuleType$1;
-        this.dataType = DataType$1;
+        this.module = ModuleType$2;
+        this.dataType = DataType$2;
         this.itemType = 0;
         this.selectedRiskData = [];
         this.disabledList = [];
@@ -5083,7 +5101,7 @@ class RelatedPopupComponent {
         this.globalService.setSplitviewValue([]);
     }
     onMessage(event) {
-        if (event.data === RelatedConst.HIDE_SEARCH_RESULT) {
+        if (event.data === RelatedConst$1.HIDE_SEARCH_RESULT) {
             // this.autoComplete.closePanel();
         }
     }
@@ -5095,7 +5113,7 @@ class RelatedPopupComponent {
         });
         this.globalService.searchRelated.pipe(takeUntil(this.ngUnsubscribe)).subscribe((res) => {
             if (res && res.length) {
-                this.filteredOptions = res;
+                this.filteredOptions = this.toRelatedOptions(res);
             }
         });
         this.globalService.splitViewValue.pipe(takeUntil(this.ngUnsubscribe)).subscribe((res) => {
@@ -5104,7 +5122,7 @@ class RelatedPopupComponent {
                 let listNodeProcess = [];
                 let listNodeDocs = [];
                 res.forEach(item => {
-                    if (item.itemType === DataType$1.process) {
+                    if (item.itemType === DataType$2.process) {
                         let newNodeProcess = new TreeModel();
                         newNodeProcess.childId = item.id;
                         newNodeProcess.childName = item.itemName;
@@ -5140,13 +5158,13 @@ class RelatedPopupComponent {
                     let selectProcess = [];
                     let selectDocument = [];
                     this.checkedNodeList.forEach(x => {
-                        if (x.itemType === DataType$1.area || x.itemType === DataType$1.process) {
+                        if (x.itemType === DataType$2.area || x.itemType === DataType$2.process) {
                             this.treeData1.forEach(item => {
                                 if (item.childId && x.id === item.childId || !item.childId && (x.id === item.rootId)) {
                                     selectProcess.push({
                                         disabled: false,
-                                        expandable: x.itemType == DataType$1.area ? true : false,
-                                        hasChild: x.itemType == DataType$1.area ? true : false,
+                                        expandable: x.itemType == DataType$2.area ? true : false,
+                                        hasChild: x.itemType == DataType$2.area ? true : false,
                                         id: x.id,
                                         level: 0,
                                         levelType: undefined,
@@ -5161,8 +5179,8 @@ class RelatedPopupComponent {
                                 if (item.childId && x.id === item.childId || !item.childId && (x.id === item.rootId)) {
                                     selectDocument.push({
                                         disabled: false,
-                                        expandable: x.itemType == DataType$1.folder ? true : false,
-                                        hasChild: x.itemType == DataType$1.folder ? true : false,
+                                        expandable: x.itemType == DataType$2.folder ? true : false,
+                                        hasChild: x.itemType == DataType$2.folder ? true : false,
                                         id: x.id,
                                         level: 0,
                                         levelType: undefined,
@@ -5186,27 +5204,28 @@ class RelatedPopupComponent {
         this.searchOrder = this.getSearchOrder();
     }
     ngAfterViewChecked() {
-        // this.cdRef.detectChanges();
-        // if (this.filteredOptions && this.filteredOptions.length) {
-        //   this.autoComplete.openPanel();
-        //   this.setResultHeight();
-        // } else if (this.autoComplete) {
+        this.cdRef.detectChanges();
+        if (this.filteredOptions && this.filteredOptions.length) {
+            // this.autoComplete.openPanel();
+            this.setResultHeight();
+        }
+        // else if (this.autoComplete) {
         //   this.autoComplete.closePanel();
         // }
     }
     getDataTypeId(moduleId) {
         let itemType;
         switch (moduleId) {
-            case ModuleType$1.documentProcess:
+            case ModuleType$2.documentProcess:
                 itemType = this.dataType.process;
                 break;
-            case ModuleType$1.deviation:
+            case ModuleType$2.deviation:
                 itemType = this.dataType.deviation;
                 break;
-            case ModuleType$1.checklist:
+            case ModuleType$2.checklist:
                 itemType = this.dataType.checklist;
                 break;
-            case ModuleType$1.risk:
+            case ModuleType$2.risk:
                 itemType = this.dataType.risk;
                 break;
             default:
@@ -5255,6 +5274,8 @@ class RelatedPopupComponent {
         });
         this.singleDocumentList = newSelectDocumentList;
         this.selectedData2 = [...tempArrDocument];
+        // when remove check node list, related options need refresh disabled options
+        this.refreshRelatedOptions();
     }
     isMatchTrue(arr, arr2) {
         return arr.every((i) => {
@@ -5377,13 +5398,13 @@ class RelatedPopupComponent {
                     let selectDocument = [];
                     if (this.checkedNodeList.length) {
                         this.checkedNodeList.forEach(x => {
-                            if (x.itemType === DataType$1.area || x.itemType === DataType$1.process) {
+                            if (x.itemType === DataType$2.area || x.itemType === DataType$2.process) {
                                 this.treeData1.forEach(item => {
                                     if (item.childId && x.id === item.childId || !item.childId && (x.id === item.rootId)) {
                                         selectProcess.push({
                                             disabled: false,
-                                            expandable: x.itemType == DataType$1.area ? true : false,
-                                            hasChild: x.itemType == DataType$1.area ? true : false,
+                                            expandable: x.itemType == DataType$2.area ? true : false,
+                                            hasChild: x.itemType == DataType$2.area ? true : false,
                                             id: x.id,
                                             level: 0,
                                             levelType: undefined,
@@ -5398,8 +5419,8 @@ class RelatedPopupComponent {
                                     if (item.childId && x.id === item.childId || !item.childId && (x.id === item.rootId)) {
                                         selectDocument.push({
                                             disabled: false,
-                                            expandable: x.itemType == DataType$1.folder ? true : false,
-                                            hasChild: x.itemType == DataType$1.folder ? true : false,
+                                            expandable: x.itemType == DataType$2.folder ? true : false,
+                                            hasChild: x.itemType == DataType$2.folder ? true : false,
                                             id: x.id,
                                             level: 0,
                                             levelType: undefined,
@@ -5574,13 +5595,13 @@ class RelatedPopupComponent {
                     let selectDocument = [];
                     if (this.checkedNodeList.length) {
                         this.checkedNodeList.forEach(x => {
-                            if (x.itemType === DataType$1.area || x.itemType === DataType$1.process) {
+                            if (x.itemType === DataType$2.area || x.itemType === DataType$2.process) {
                                 this.treeData1.forEach(item => {
                                     if (item.childId && x.id === item.childId || !item.childId && (x.id === item.rootId)) {
                                         selectProcess.push({
                                             disabled: false,
-                                            expandable: x.itemType == DataType$1.area ? true : false,
-                                            hasChild: x.itemType == DataType$1.area ? true : false,
+                                            expandable: x.itemType == DataType$2.area ? true : false,
+                                            hasChild: x.itemType == DataType$2.area ? true : false,
                                             id: x.id,
                                             level: 0,
                                             levelType: undefined,
@@ -5595,8 +5616,8 @@ class RelatedPopupComponent {
                                     if (item.childId && x.id === item.childId || !item.childId && (x.id === item.rootId)) {
                                         selectDocument.push({
                                             disabled: false,
-                                            expandable: x.itemType == DataType$1.folder ? true : false,
-                                            hasChild: x.itemType == DataType$1.folder ? true : false,
+                                            expandable: x.itemType == DataType$2.folder ? true : false,
+                                            hasChild: x.itemType == DataType$2.folder ? true : false,
                                             id: x.id,
                                             level: 0,
                                             levelType: undefined,
@@ -5832,12 +5853,12 @@ class RelatedPopupComponent {
         this.selectedFolder = null;
         this.itemInSplitview = [];
         this.checkedNodeList.forEach(element => {
-            if (element.itemType === DataType$1.document) {
+            if (element.itemType === DataType$2.document) {
                 element.status = this.getStatusDocs(element.id);
                 element.breadcumbs = this.getBreadcumbAllParentDocs(element.id).slice(1).reverse();
                 element.statusName = this.getStatusName(element.id);
             }
-            if (element.itemType === DataType$1.process) {
+            if (element.itemType === DataType$2.process) {
                 element.status = this.getStatusProcess(element.id);
                 element.breadcumbs = this.getBreadcumbAllParentProcess(element.id).slice(1).reverse();
             }
@@ -5925,7 +5946,7 @@ class RelatedPopupComponent {
         return (elmHeight + elmMargin);
     }
     getItemChipName(item) {
-        if (item.itemType === DataType$1.checklist || item.itemType === DataType$1.deviation) {
+        if (item.itemType === DataType$2.checklist || item.itemType === DataType$2.deviation) {
             return (item.parentName && item.itemName !== item.parentName) ? `${item.parentName}/${item.itemName}` : item.itemName;
         }
         return item.itemName;
@@ -5935,43 +5956,43 @@ class RelatedPopupComponent {
     }
     getNodeIcon(item) {
         switch (item.itemType) {
-            case DataType$1.folder: {
+            case DataType$2.folder: {
                 switch (item.levelType) {
-                    case DocumentNodeType$1.DepartmentFolder:
+                    case DocumentNodeType$2.DepartmentFolder:
                         return 'department_folder_outlined';
-                    case DocumentNodeType$1.RegionalFolder:
+                    case DocumentNodeType$2.RegionalFolder:
                         return 'regional_folder_outlined';
-                    case DocumentNodeType$1.TopFolder:
+                    case DocumentNodeType$2.TopFolder:
                         return 'enterprise_folder_outlined';
-                    case DocumentNodeType$1.Folder:
+                    case DocumentNodeType$2.Folder:
                         return 'local_folder_outlined';
                     default:
                         return 'folder_outlined';
                 }
             }
-            case DataType$1.document: {
+            case DataType$2.document: {
                 switch (item.levelType) {
-                    case DocumentNodeType$1.DepartmentFolder:
+                    case DocumentNodeType$2.DepartmentFolder:
                         return 'document_department';
-                    case DocumentNodeType$1.RegionalFolder:
+                    case DocumentNodeType$2.RegionalFolder:
                         return 'document_regional';
-                    case DocumentNodeType$1.TopFolder:
+                    case DocumentNodeType$2.TopFolder:
                         return 'document_enterprise';
-                    case DocumentNodeType$1.Folder:
+                    case DocumentNodeType$2.Folder:
                         return 'document_local';
                     default:
                         return 'document';
                 }
             }
-            case DataType$1.area:
+            case DataType$2.area:
                 return 'process_area_outlined';
-            case DataType$1.process:
+            case DataType$2.process:
                 return 'process';
-            case DataType$1.deviation:
+            case DataType$2.deviation:
                 return 'deviation';
-            case DataType$1.checklist:
+            case DataType$2.checklist:
                 return 'checklist';
-            case DataType$1.risk:
+            case DataType$2.risk:
                 return 'risk';
             default:
                 return 'folder_outlined';
@@ -5985,25 +6006,25 @@ class RelatedPopupComponent {
     }
     getTitle(type) {
         switch (type) {
-            case DataType$1.process:
+            case DataType$2.process:
                 return this.LANG.PROCESSES;
-            case DataType$1.area:
+            case DataType$2.area:
                 return this.LANG.PROCESS_AREA;
-            case DataType$1.document:
+            case DataType$2.document:
                 return this.LANG.DOCUMENTS;
-            case DataType$1.folder:
+            case DataType$2.folder:
                 return this.LANG.FOLDER;
-            case DataType$1.deviation:
+            case DataType$2.deviation:
                 return this.LANG.DEVIATION;
-            case DataType$1.deviationType:
+            case DataType$2.deviationType:
                 return this.LANG.DEVIATION_TYPE;
-            case DataType$1.checklist:
+            case DataType$2.checklist:
                 return this.LANG.CHECKLIST;
-            case DataType$1.checklistCategory:
+            case DataType$2.checklistCategory:
                 return this.LANG.CHECKLIST_CATEGORY;
-            case DataType$1.risk:
+            case DataType$2.risk:
                 return this.LANG.ASSESSMENT;
-            case DataType$1.riskFolder:
+            case DataType$2.riskFolder:
                 return this.LANG.FOLDER;
         }
     }
@@ -6071,11 +6092,11 @@ class RelatedPopupComponent {
     }
     canShowSearchOption(moduleId) {
         if (this.canOnlySelectItem &&
-            (moduleId === DataType$1.checklistCategory
-                || moduleId === DataType$1.riskFolder
-                || moduleId === DataType$1.deviationType
-                || (moduleId === DataType$1.area && this.treeConfig1 && !this.treeConfig1.singleSelectedNode)
-                || (moduleId === DataType$1.folder && this.treeConfig2 && !this.treeConfig2.singleSelectedNode))) {
+            (moduleId === DataType$2.checklistCategory
+                || moduleId === DataType$2.riskFolder
+                || moduleId === DataType$2.deviationType
+                || (moduleId === DataType$2.area && this.treeConfig1 && !this.treeConfig1.singleSelectedNode)
+                || (moduleId === DataType$2.folder && this.treeConfig2 && !this.treeConfig2.singleSelectedNode))) {
             return false;
         }
         return this.getModuleFilteredOptions(moduleId).length > 0;
@@ -6088,7 +6109,7 @@ class RelatedPopupComponent {
         let position = -1;
         let parentName = '';
         let itemNumberId = '';
-        if (node.itemType == DataType$1.folder || node.itemType == DataType$1.document) {
+        if (node.itemType == DataType$2.folder || node.itemType == DataType$2.document) {
             position = !node.expandable ? this.treeData2.findIndex(p => p.childId === node.id && p.rootId === node.parentId) :
                 this.treeData2.findIndex(p => p.rootId === node.id);
             parentName = this.treeData2[position].parentId ? this.treeData2[position].subName : this.treeData2[position].rootName;
@@ -6116,13 +6137,30 @@ class RelatedPopupComponent {
         this.listChildrenSelectOne = [];
         this.listChildrenSelectOne = listChildren;
     }
+    hasSelected(related) {
+        const arrDisabledList = this.disabledList.concat(this.disabledList2);
+        return arrDisabledList.some(node => node.id.toUpperCase() === related.id.toUpperCase());
+    }
+    toRelatedOptions(relateds) {
+        const results = [];
+        for (const related of relateds) {
+            results.push(Object.assign(Object.assign({}, related), { disabled: this.hasSelected(related) }));
+        }
+        return results;
+    }
+    displayWhenSelectRelatedOption($event) {
+        return '';
+    }
+    refreshRelatedOptions() {
+        this.filteredOptions = this.toRelatedOptions(this.filteredOptions);
+    }
 }
 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 id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      [class.related-viewport]=\"isInputValue\"\r\n    >\r\n      <ng-container *ngFor=\"let type of searchOrder\">\r\n        <div\r\n          class=\"search__module-result\"\r\n          *ngIf=\"canShowSearchOption(type.value)\"\r\n        >\r\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n          <mat-option\r\n            class=\"search__option\"\r\n            *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n            [value]=\"option\"\r\n            (click)=\"selectRelated(option)\"\r\n          >\r\n            <qms-list-item type=\"image-square\">\r\n              <mat-icon\r\n                leading-icon\r\n                type=\"image-square\"\r\n                [svgIcon]=\"getNodeIcon(option)\"\r\n              ></mat-icon>\r\n              <div qms-list-header>\r\n                <div\r\n                  qms-line\r\n                  type=\"caption\"\r\n                  qms-tool-tip=\"{{\r\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                  }}\"\r\n                  mode=\"dark\"\r\n                  *ngIf=\"getParentName(option)\"\r\n                >\r\n                  <span #searchItemResult class=\"search__result__parent-name\">\r\n                    {{ option.parentName }}\r\n                  </span>\r\n                </div>\r\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                  {{ option.itemName }}\r\n                </div>\r\n                <div\r\n                  class=\"caption\"\r\n                  *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n                >\r\n                  <qms-breadcrumb\r\n                    class=\"breadcrumb-containe\"\r\n                    type=\"table\"\r\n                    numDisplayItem=\"1\"\r\n                    [nodes]=\"option.breadcumbs\"\r\n                  >\r\n                  </qms-breadcrumb>\r\n                </div>\r\n              </div>\r\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n                <span class=\"material-icons-outlined search__description-icon\">\r\n                  local_offer\r\n                </span>\r\n                {{ getItemId(option) }}\r\n              </div>\r\n            </qms-list-item>\r\n          </mat-option>\r\n        </div>\r\n      </ng-container>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar qmslib_related_popup_content\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length,\r\n        'col-6': splitView,\r\n        'col-12': !splitView\r\n      }\"\r\n    >\r\n      <mat-expansion-panel\r\n        hideToggle\r\n        id=\"qmslib_related_popup_common_001\"\r\n        [expanded]=\"isCommonExpanded\"\r\n        (opened)=\"isCommonExpanded = true\"\r\n        (closed)=\"isCommonExpanded = false\"\r\n        class=\"panel-tree\"\r\n      >\r\n        <mat-expansion-panel-header class=\"padding-5\">\r\n          <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n            {{ LANG.PROCESSES | uppercase }}\r\n          </mat-panel-title>\r\n          <mat-panel-title *ngIf=\"moduleId === module.deviation\">\r\n            {{ LANG.DEVIATION | uppercase }}\r\n          </mat-panel-title>\r\n          <mat-panel-title *ngIf=\"moduleId === module.checklist\">\r\n            {{ LANG.CHECKLIST | uppercase }}\r\n          </mat-panel-title>\r\n          <mat-panel-title *ngIf=\"moduleId === module.risk\">\r\n            {{ LANG.ASSESSMENT | uppercase }}\r\n          </mat-panel-title>\r\n          <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n            <mat-icon>\r\n              {{\r\n                isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n              }}\r\n            </mat-icon>\r\n          </button>\r\n        </mat-expansion-panel-header>\r\n        <div id=\"qmslib_related_popup_common_002\">\r\n          <qms-tree\r\n            [treeData]=\"treeData1\"\r\n            [treeConfig]=\"treeConfig1\"\r\n            [selectedData]=\"selectedData\"\r\n            [selectedRiskData]=\"selectedRiskData\"\r\n            [disabledList]=\"disabledList\"\r\n            (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n            (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n            (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n            [expandOnTitleClick]=\"!splitView\"\r\n            [parentNodeOnClick]=\"parentNodeSelected\"\r\n            (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\r\n\r\n      <div\r\n        *ngIf=\"moduleId === module.documentProcess\"\r\n        class=\"line__divider\"\r\n      ></div>\r\n\r\n      <mat-expansion-panel\r\n        hideToggle\r\n        *ngIf=\"moduleId === module.documentProcess\"\r\n        id=\"qmslib_related_popup_document_001\"\r\n        [expanded]=\"isDocumentExpanded\"\r\n        (opened)=\"isDocumentExpanded = true\"\r\n        (closed)=\"isDocumentExpanded = false\"\r\n        class=\"panel-tree\"\r\n      >\r\n        <mat-expansion-panel-header class=\"padding-5\">\r\n          <mat-panel-title> {{ LANG.DOCUMENTS | uppercase }} </mat-panel-title>\r\n          <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n            <mat-icon>\r\n              {{\r\n                isDocumentExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n              }}\r\n            </mat-icon>\r\n          </button>\r\n        </mat-expansion-panel-header>\r\n        <div id=\"qmslib_related_popup_document_002\">\r\n          <qms-tree\r\n            [treeData]=\"treeData2\"\r\n            [treeConfig]=\"treeConfig2\"\r\n            [selectedData]=\"selectedData2\"\r\n            [disabledList]=\"disabledList2\"\r\n            (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\r\n            (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n            (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n            [expandOnTitleClick]=\"!splitView\"\r\n            [parentNodeOnClick]=\"parentNodeSelected\"\r\n            (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\r\n    </div>\r\n    <div\r\n      *ngIf=\"splitView\"\r\n      class=\"\r\n        qms-scrollbar\r\n        qmslib-related-popup-splitview qmslib_related_popup_content\r\n        col-6\r\n      \"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n        {{ splitViewTitle }}\r\n      </div>\r\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n        <mat-checkbox\r\n          qms-group-options\r\n          [disabled]=\"node.disabled\"\r\n          color=\"default\"\r\n          [checked]=\"isNodeSelected(node)\"\r\n          (change)=\"toggleSelectItem(node)\"\r\n        ></mat-checkbox>\r\n        <mat-icon\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getNodeIcon(node)\"\r\n        ></mat-icon>\r\n        <span class=\"text-node\">{{ node.itemName }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n      <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        qms-tool-tip=\"{{\r\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n        }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)\r\n        }}</span>\r\n        <mat-icon\r\n          *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n          (click)=\"removeCheckedNodeList(item)\"\r\n          >cancel</mat-icon\r\n        >\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button\r\n      *ngIf=\"!checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 7px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 0px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button\r\n      qms-btn-text\r\n      [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
+                template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n    (optionSelected)=\"selectRelated($event.option.value)\"\r\n    [displayWith]=\"displayWhenSelectRelatedOption\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      [class.related-viewport]=\"isInputValue\"\r\n    >\r\n      <ng-container *ngFor=\"let type of searchOrder\">\r\n        <div\r\n          class=\"search__module-result\"\r\n          *ngIf=\"canShowSearchOption(type.value)\"\r\n        >\r\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n          <mat-option\r\n            class=\"search__option\"\r\n            *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n            [value]=\"option\"\r\n            [disabled]=\"option.disabled\"\r\n          >\r\n            <qms-list-item type=\"image-square\">\r\n              <mat-icon\r\n                leading-icon\r\n                type=\"image-square\"\r\n                [svgIcon]=\"getNodeIcon(option)\"\r\n              ></mat-icon>\r\n              <div qms-list-header>\r\n                <div\r\n                  qms-line\r\n                  type=\"caption\"\r\n                  qms-tool-tip=\"{{\r\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                  }}\"\r\n                  mode=\"dark\"\r\n                  *ngIf=\"getParentName(option)\"\r\n                >\r\n                  <span #searchItemResult class=\"search__result__parent-name\">\r\n                    {{ option.parentName }}\r\n                  </span>\r\n                </div>\r\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                  {{ option.itemName }}\r\n                </div>\r\n                <div\r\n                  class=\"caption\"\r\n                  *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n                >\r\n                  <qms-breadcrumb\r\n                    class=\"breadcrumb-containe\"\r\n                    type=\"table\"\r\n                    numDisplayItem=\"1\"\r\n                    [nodes]=\"option.breadcumbs\"\r\n                  >\r\n                  </qms-breadcrumb>\r\n                </div>\r\n              </div>\r\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n                <span class=\"material-icons-outlined search__description-icon\">\r\n                  local_offer\r\n                </span>\r\n                {{ getItemId(option) }}\r\n              </div>\r\n            </qms-list-item>\r\n          </mat-option>\r\n        </div>\r\n      </ng-container>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar qmslib_related_popup_content\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length,\r\n        'col-6': splitView,\r\n        'col-12': !splitView\r\n      }\"\r\n    >\r\n      <mat-expansion-panel\r\n        hideToggle\r\n        id=\"qmslib_related_popup_common_001\"\r\n        [expanded]=\"isCommonExpanded\"\r\n        (opened)=\"isCommonExpanded = true\"\r\n        (closed)=\"isCommonExpanded = false\"\r\n        class=\"panel-tree\"\r\n      >\r\n        <mat-expansion-panel-header class=\"padding-5\">\r\n          <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n            {{ LANG.PROCESSES | uppercase }}\r\n          </mat-panel-title>\r\n          <mat-panel-title *ngIf=\"moduleId === module.deviation\">\r\n            {{ LANG.DEVIATION | uppercase }}\r\n          </mat-panel-title>\r\n          <mat-panel-title *ngIf=\"moduleId === module.checklist\">\r\n            {{ LANG.CHECKLIST | uppercase }}\r\n          </mat-panel-title>\r\n          <mat-panel-title *ngIf=\"moduleId === module.risk\">\r\n            {{ LANG.ASSESSMENT | uppercase }}\r\n          </mat-panel-title>\r\n          <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n            <mat-icon>\r\n              {{\r\n                isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n              }}\r\n            </mat-icon>\r\n          </button>\r\n        </mat-expansion-panel-header>\r\n        <div id=\"qmslib_related_popup_common_002\">\r\n          <qms-tree\r\n            [treeData]=\"treeData1\"\r\n            [treeConfig]=\"treeConfig1\"\r\n            [selectedData]=\"selectedData\"\r\n            [selectedRiskData]=\"selectedRiskData\"\r\n            [disabledList]=\"disabledList\"\r\n            (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n            (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n            (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n            [expandOnTitleClick]=\"!splitView\"\r\n            [parentNodeOnClick]=\"parentNodeSelected\"\r\n            (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\r\n\r\n      <ng-container *ngIf=\"treeData2.length > 0\">\r\n        <div\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          class=\"line__divider\"\r\n        ></div>\r\n\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          id=\"qmslib_related_popup_document_001\"\r\n          [expanded]=\"isDocumentExpanded\"\r\n          (opened)=\"isDocumentExpanded = true\"\r\n          (closed)=\"isDocumentExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title>\r\n              {{ LANG.DOCUMENTS | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isDocumentExpanded\r\n                    ? \"keyboard_arrow_up\"\r\n                    : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_document_002\">\r\n            <qms-tree\r\n              [treeData]=\"treeData2\"\r\n              [treeConfig]=\"treeConfig2\"\r\n              [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\"\r\n              (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n            ></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n    </div>\r\n    <div\r\n      *ngIf=\"splitView\"\r\n      class=\"\r\n        qms-scrollbar\r\n        qmslib-related-popup-splitview qmslib_related_popup_content\r\n        col-6\r\n      \"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n        {{ splitViewTitle }}\r\n      </div>\r\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n        <mat-checkbox\r\n          qms-group-options\r\n          [disabled]=\"node.disabled\"\r\n          color=\"default\"\r\n          [checked]=\"isNodeSelected(node)\"\r\n          (change)=\"toggleSelectItem(node)\"\r\n        ></mat-checkbox>\r\n        <mat-icon\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getNodeIcon(node)\"\r\n        ></mat-icon>\r\n        <span class=\"text-node\">{{ node.itemName }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n      <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        qms-tool-tip=\"{{\r\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n        }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)\r\n        }}</span>\r\n        <mat-icon\r\n          *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n          (click)=\"removeCheckedNodeList(item)\"\r\n          >cancel</mat-icon\r\n        >\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button\r\n      *ngIf=\"!checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 7px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 0px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button\r\n      qms-btn-text\r\n      [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
                 encapsulation: ViewEncapsulation.None,
-                styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-scrollbar.none-scroll-bg::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:#eee}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:#e5e5e5;max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{height:30px;font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:10.25rem}"]
+                styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-scrollbar.none-scroll-bg::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:#eee}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:#e5e5e5;max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{height:30px;font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .breadcrumb-containe .qms-breadcrumb-item-text,cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .breadcrumb-containe .qms-breadcrumb-item .mat-icon,cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:300px}"]
             },] }
 ];
 RelatedPopupComponent.ctorParameters = () => [
@@ -6186,12 +6224,10 @@ class RiskAnalysisComponent {
             });
         }
         this.riskConfig = {
-            allowSelectFolder: false,
-            areaOfCurrentProcess: '',
             showCheckBox: true,
             allowMultipleCheck: true,
             onlyCheckBoxForChild: false,
-            moduleId: DataType$1.risk,
+            moduleId: DataType$2.risk,
             openIcon: 'keyboard_arrow_up',
             openIconColor: '#1954A9',
             closeIcon: 'keyboard_arrow_down',
@@ -7142,8 +7178,8 @@ var QMSCKEditorDocumentType;
 class TreeNode {
 }
 
-let objData = {};
-function buildArrayTree(obj, level) {
+let objData$1 = {};
+function buildArrayTree$1(obj, level) {
     return Object.keys(obj).reduce((accumulator, key) => {
         const value = obj[key];
         const node = new TreeNode();
@@ -7161,8 +7197,8 @@ function buildArrayTree(obj, level) {
         return accumulator.concat(node);
     }, []);
 }
-function buildObjectTree(arr) {
-    objData = {};
+function buildObjectTree$1(arr) {
+    objData$1 = {};
     let objTreeData;
     const root = arr.filter((x) => {
         return x.parentId === '';
@@ -7172,7 +7208,7 @@ function buildObjectTree(arr) {
     });
     return objTreeData;
 }
-function findParent(id, array) {
+function findParent$1(id, array) {
     const objParent = {};
     const parent = array.filter((x) => {
         return x.rootId === id;
@@ -7188,10 +7224,10 @@ function findParent(id, array) {
         this.findChild(id, objParent, array);
     }
     // add node to tree
-    objData[`${parent[0].rootId}_${parent[0].rootName}`] = objParent;
-    return objData;
+    objData$1[`${parent[0].rootId}_${parent[0].rootName}`] = objParent;
+    return objData$1;
 }
-function findChild(id, objParent, array) {
+function findChild$1(id, objParent, array) {
     const subNode = array.filter((x) => {
         return x.parentId === id;
     });
@@ -7199,14 +7235,14 @@ function findChild(id, objParent, array) {
         const processNode = {};
         processNode[`${item.childId}_${item.childName}`] = null;
         objParent[`${item.rootId}_${item.subName}`] = processNode;
-        findChild(item.rootId, processNode, array);
+        findChild$1(item.rootId, processNode, array);
     });
 }
 const QMSCKEditorTreeFunctions = {
-    buildArrayTree,
-    buildObjectTree,
-    findParent,
-    findChild
+    buildArrayTree: buildArrayTree$1,
+    buildObjectTree: buildObjectTree$1,
+    findParent: findParent$1,
+    findChild: findChild$1
 };
 
 class QMSCKEditorTreeService extends QMSCKEditorBaseService {
@@ -15612,8 +15648,8 @@ class QmsAppBarComponent {
 QmsAppBarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-qms-app-bar',
-                template: "<div class=\"qms-app-bar-container\">\r\n    <mat-toolbar class=\"bar-container\" *ngIf=\"!isNomalType\">\r\n        <span class=\"w-100\">\r\n            <span class=\"col-4 d-inline-flex align-items-lg-center\">\r\n                <div *ngIf=\"hideMenuDropdown\" class=\"border align-self-center\">\r\n                    <div *ngIf=\"logoSvgPath\" class=\"logo-container\">\r\n                        <img [src]=\"logoSvgPath\" alt=\"\" />\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"!hideMenuDropdown\">\r\n                    <button #menu class=\"collapse-icon\" mat-button>\r\n                        <mat-icon class=\"mat-icon-rtl-mirror\" (click)=\"onMenuClicked()\">\r\n                            menu\r\n                        </mat-icon>\r\n                    </button>\r\n                    <img [src]=\"logoSvgPath\" alt=\"\" />\r\n                </div>\r\n                <span class=\"p-3\">{{title}}</span>\r\n                <div class=\"spacer\"></div>\r\n            </span>\r\n            <span class=\"align-items-sm-center col-4 d-inline-flex justify-content-center\">\r\n                <div *ngIf=\"imgSvgPath\" class=\"img-container\" [class.bg-transparent]=\"isImgSvgTransparent\">\r\n                    <img [src]=\"imgSvgPath\" alt=\"\" />\r\n                </div>\r\n            </span>\r\n            <span class=\"col-4 d-inline-flex justify-content-end\">\r\n                <button (click)=\"onRightIconClicked(item.icon)\" *ngFor=\"let item of rightIcons\" class=\"menu-item-icon\"\r\n                    mat-button>\r\n                    <mat-icon *ngIf=\"item.icon == 'notifications_none'\" matBadge=\"{{notifications}}\"\r\n                        matBadgeColor=\"warn\">\r\n                        {{item.icon}}\r\n                    </mat-icon>\r\n                    <mat-icon *ngIf=\"item.icon != 'notifications_none'\"\r\n                        class=\"material-icons-outlined mat-icon-rtl-mirror\">\r\n                        {{item.icon}}\r\n                    </mat-icon>\r\n                    <span class=\"mg-l-3\">{{item.tooltip}}</span>\r\n                </button>\r\n            </span>\r\n        </span>\r\n    </mat-toolbar>\r\n    <mat-toolbar class=\"bar-prv-container\" *ngIf=\"isNomalType\">\r\n        <button class=\"icon-title\" #menu qms-btn-text (click)=\"onClickLeftFirstIcon()\">\r\n            <mat-icon class=\"cusor-pointer\">\r\n                {{leftFirstIcon}}\r\n            </mat-icon>\r\n        </button>\r\n        <span class=\"content-title\">{{title}}</span>\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"right-content\">\r\n            <button qms-btn-text (click)=\"onCancel()\" class=\"cusor-pointer mr-22\" *ngIf=\"cancelTitle\">\r\n                {{cancelTitle}}\r\n            </button>\r\n            <button qms-btn [disabled]=\"disabledConfirmAction\" class=\"cusor-pointer\" (click)=\"onConfirm()\" *ngIf=\"confirmTitle\">\r\n                {{confirmTitle}}\r\n            </button>\r\n        </div>\r\n    </mat-toolbar>\r\n</div>",
-                styles: [".qms-app-bar-container{height:56px}.qms-app-bar-container .spacer{flex:1 1 auto}.qms-app-bar-container .mat-toolbar{background:#00324e;color:#fff;height:56px}.qms-app-bar-container .bar-prv-container{background:#e4e4e4}.qms-app-bar-container .bar-prv-container .close-icon,.qms-app-bar-container .bar-prv-container .title-icon{color:#323232}.qms-app-bar-container .bar-prv-container .right-content .mr-22{margin-right:22px}.qms-app-bar-container .bar-prv-container button:first-child:hover{background-color:rgba(0,0,0,.08)}.qms-app-bar-container .bar-prv-container .icon-title{color:#666;padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.qms-app-bar-container .bar-prv-container .content-title{font-family:Raleway;font-size:18px;font-style:normal;font-weight:600;line-height:21px;letter-spacing:0;text-align:left;color:#323232}.qms-app-bar-container .bar-container{padding:0!important}.qms-app-bar-container .bar-container .logo-container{background:#fff;padding:12px;height:56px}.qms-app-bar-container .bar-container .img-container{height:40px;background:#fff;padding:2px}.qms-app-bar-container .bar-container .bg-transparent{background:transparent;height:40px;padding:2px}"]
+                template: "<div class=\"qms-app-bar-container\">\r\n    <mat-toolbar class=\"bar-container\" *ngIf=\"!isNomalType\">\r\n        <span class=\"w-100\">\r\n            <span class=\"col-4 d-inline-flex align-items-lg-center\">\r\n                <div *ngIf=\"hideMenuDropdown\" class=\"border align-self-center\">\r\n                    <div *ngIf=\"logoSvgPath\" class=\"logo-container\">\r\n                        <img [src]=\"logoSvgPath\" alt=\"\" />\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"!hideMenuDropdown\">\r\n                    <button #menu class=\"collapse-icon\" mat-button>\r\n                        <mat-icon class=\"mat-icon-rtl-mirror\" (click)=\"onMenuClicked()\">\r\n                            menu\r\n                        </mat-icon>\r\n                    </button>\r\n                    <img [src]=\"logoSvgPath\" alt=\"\" />\r\n                </div>\r\n                <div class=\"pr-8\"></div>\r\n                <span class=\"content-title\">{{title}}</span>\r\n                <div class=\"spacer\"></div>\r\n            </span>\r\n            <span class=\"align-items-sm-center col-4 d-inline-flex justify-content-center\">\r\n                <div *ngIf=\"imgSvgPath\" class=\"img-container\" [class.bg-transparent]=\"isImgSvgTransparent\">\r\n                    <img [src]=\"imgSvgPath\" alt=\"\" />\r\n                </div>\r\n            </span>\r\n            <span class=\"col-4 d-inline-flex justify-content-end right-icon\">\r\n                <button (click)=\"onRightIconClicked(item.icon)\" *ngFor=\"let item of rightIcons\" class=\"menu-item-icon\"\r\n                    mat-button>\r\n                    <mat-icon *ngIf=\"item.icon == 'notifications_none'\" matBadge=\"{{notifications}}\"\r\n                        matBadgeColor=\"warn\">\r\n                        {{item.icon}}\r\n                    </mat-icon>\r\n                    <mat-icon *ngIf=\"item.icon != 'notifications_none'\"\r\n                        class=\"material-icons-outlined mat-icon-rtl-mirror\">\r\n                        {{item.icon}}\r\n                    </mat-icon>\r\n                    <span class=\"mg-l-3\">{{item.tooltip}}</span>\r\n                </button>\r\n            </span>\r\n        </span>\r\n    </mat-toolbar>\r\n    <mat-toolbar class=\"bar-prv-container\" *ngIf=\"isNomalType\">\r\n        <button class=\"icon-title\" #menu qms-btn-text (click)=\"onClickLeftFirstIcon()\">\r\n            <mat-icon class=\"cusor-pointer\">\r\n                {{leftFirstIcon}}\r\n            </mat-icon>\r\n        </button>\r\n        <span class=\"content-title\">{{title}}</span>\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"right-content\">\r\n            <button qms-btn-text (click)=\"onCancel()\" class=\"cusor-pointer mr-10\" *ngIf=\"cancelTitle\">\r\n                {{cancelTitle}}\r\n            </button>\r\n            <button qms-btn [disabled]=\"disabledConfirmAction\" class=\"cusor-pointer\" (click)=\"onConfirm()\" *ngIf=\"confirmTitle\">\r\n                {{confirmTitle}}\r\n            </button>\r\n        </div>\r\n    </mat-toolbar>\r\n</div>",
+                styles: [".qms-app-bar-container{height:56px}.qms-app-bar-container .spacer{flex:1 1 auto}.qms-app-bar-container .mat-toolbar{background:#00324e;color:#fff;height:56px}.qms-app-bar-container .bar-prv-container{background:#e4e4e4}.qms-app-bar-container .bar-prv-container .close-icon,.qms-app-bar-container .bar-prv-container .title-icon{color:#323232}.qms-app-bar-container .bar-prv-container .right-content button{line-height:16px!important}.qms-app-bar-container .bar-prv-container .right-content .mr-10{margin-right:10px}.qms-app-bar-container .bar-prv-container button:first-child:hover{background-color:rgba(0,0,0,.08)}.qms-app-bar-container .bar-prv-container .icon-title{color:#666;padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%;margin-right:11px}.qms-app-bar-container .bar-prv-container .content-title{font-family:Raleway;font-size:18px;font-style:normal;font-weight:600;line-height:21px;letter-spacing:0;text-align:left;color:#323232}.qms-app-bar-container .bar-container{padding:0!important}.qms-app-bar-container .bar-container .logo-container{background:#fff;padding:12px;height:56px}.qms-app-bar-container .bar-container .img-container{height:40px;background:#fff;padding:2px}.qms-app-bar-container .bar-container .bg-transparent{background:transparent;height:40px;padding:2px}.qms-app-bar-container .bar-container .right-icon button:last-child{min-width:unset!important}.qms-app-bar-container .bar-container ::ng-deep .mat-badge-warn .mat-badge-content{background-color:#9e360f!important}.qms-app-bar-container .pr-8{padding-right:8px}"]
             },] }
 ];
 QmsAppBarComponent.ctorParameters = () => [];
@@ -15734,7 +15770,7 @@ class QmsBannerConfirmButtonClick {
 
 class QmsBannerComponent {
     constructor() {
-        this.type = BannerType.primary;
+        this.type = '' || BannerType.primary;
         this.contents = [];
         this.buttonClick = new EventEmitter();
     }
@@ -15866,6 +15902,69 @@ QmsBannerConfirmModule.decorators = [
             },] }
 ];
 
+const QmsStatusDropdownClassTypeMapping = {
+    1: 'light',
+    2: 'warning',
+    3: 'success',
+    4: 'danger'
+};
+class QmsStatusDropdownComponent {
+    constructor() {
+        this.options = [];
+        this.valueChange = new EventEmitter();
+    }
+    getClassType(type) {
+        return QmsStatusDropdownClassTypeMapping[type];
+    }
+    onModelChange() {
+        this.valueChange.emit(this.value);
+    }
+}
+QmsStatusDropdownComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'qms-status-dropdown',
+                template: "<div id=\"qms-status-dropdown-container\" class=\"qms-status-dropdown-container {{ getClassType(value) }}\">\r\n    <mat-form-field class=\"material-custom-multiselect height-40\" [style.width]=\"width\">\r\n        <mat-select [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange()\">\r\n            <ng-container *ngIf=\"options\">\r\n                <mat-option *ngFor=\"let option of options\" [value]=\"option.type\">\r\n                    <label class=\"qms-label qms-label-{{ getClassType(option.type) }}\">{{ option.text }}</label>\r\n                </mat-option>\r\n            </ng-container>\r\n        </mat-select>\r\n    </mat-form-field>\r\n</div>",
+                styles: [".qms-status-dropdown-container ::ng-deep .material-custom-multiselect{height:40px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-flex{border-radius:2px;padding:0 17.5px 0 16px;width:100%;height:40px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-flex .mat-select-min-line{font-family:Open Sans;font-size:14px;font-weight:600;line-height:16px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-infix{padding-top:0;border-top:10px solid transparent}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-infix .mat-select-value-text{line-height:16px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-wrapper .mat-form-field-underline{display:none}.qms-status-dropdown-container.warning ::ng-deep .material-custom-multiselect .mat-form-field-flex{background-color:#e4cf53}.qms-status-dropdown-container.warning ::ng-deep .material-custom-multiselect .mat-form-field-flex .mat-select-arrow-wrapper .mat-select-arrow{color:rgba(0,0,0,.6)}.qms-status-dropdown-container.warning ::ng-deep .material-custom-multiselect .mat-select-value{color:#323232;font-weight:600}.qms-status-dropdown-container.warning ::ng-deep .material-custom-multiselect .mat-select-arrow{color:#323232}.qms-status-dropdown-container.light ::ng-deep .material-custom-multiselect .mat-form-field-flex{background-color:rgba(0,0,0,.1)}.qms-status-dropdown-container.light ::ng-deep .material-custom-multiselect .mat-form-field-flex .mat-select-arrow-wrapper .mat-select-arrow{color:rgba(0,0,0,.6)}.qms-status-dropdown-container.light ::ng-deep .material-custom-multiselect .mat-select-value{color:#323232;font-weight:600}.qms-status-dropdown-container.light ::ng-deep .material-custom-multiselect .mat-select-arrow{color:#323232}.qms-status-dropdown-container.danger ::ng-deep .material-custom-multiselect .mat-form-field-flex{background-color:#9e360f}.qms-status-dropdown-container.danger ::ng-deep .material-custom-multiselect .mat-form-field-flex .mat-select-arrow-wrapper .mat-select-arrow{color:hsla(0,0%,100%,.6)}.qms-status-dropdown-container.danger ::ng-deep .material-custom-multiselect .mat-select-value{color:#fff}.qms-status-dropdown-container.danger ::ng-deep .material-custom-multiselect .mat-select-arrow{color:#fff}.qms-status-dropdown-container.success ::ng-deep .material-custom-multiselect .mat-form-field-flex{background-color:#005832}.qms-status-dropdown-container.success ::ng-deep .material-custom-multiselect .mat-select-value{color:#fff}.qms-status-dropdown-container.success ::ng-deep .material-custom-multiselect .mat-select-arrow{color:#fff}.qms-status-dropdown-container.success ::ng-deep .material-custom-multiselect .mat-select-arrow-wrapper .mat-select-arrow{color:hsla(0,0%,100%,.6)}.qms-status-dropdown-container ::ng-deep mat-select .mat-select-value{font-size:14px;line-height:16px;color:#323232;font-weight:500}.qms-status-dropdown-container ::ng-deep mat-select .mat-select-arrow-wrapper{padding-top:17.5px}.qms-status-dropdown-container ::ng-deep mat-select .mat-select-arrow-wrapper .mat-select-arrow{border-top:4px solid}.qms-status-dropdown-container ::ng-deep mat-option .mat-option-custom .mat-pseudo-checkbox-checked:after{top:3px;width:11px;height:5px;border-left:3px solid}"]
+            },] }
+];
+QmsStatusDropdownComponent.propDecorators = {
+    options: [{ type: Input }],
+    value: [{ type: Input }],
+    width: [{ type: Input }],
+    valueChange: [{ type: Output }]
+};
+
+class QmsStatusDropdownModule {
+}
+QmsStatusDropdownModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    QmsStatusDropdownComponent
+                ],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    MatSelectModule,
+                    MatOptionModule,
+                    MatFormFieldModule
+                ],
+                exports: [
+                    QmsStatusDropdownComponent
+                ]
+            },] }
+];
+
+var QmsStatusDropdownType;
+(function (QmsStatusDropdownType) {
+    QmsStatusDropdownType[QmsStatusDropdownType["Light"] = 1] = "Light";
+    QmsStatusDropdownType[QmsStatusDropdownType["Warning"] = 2] = "Warning";
+    QmsStatusDropdownType[QmsStatusDropdownType["Success"] = 3] = "Success";
+    QmsStatusDropdownType[QmsStatusDropdownType["Danger"] = 4] = "Danger";
+})(QmsStatusDropdownType || (QmsStatusDropdownType = {}));
+class QmsStatusDropdownOption {
+}
+
 class QMSTableAction {
     constructor(elRef) {
         this.elRef = elRef;
@@ -15936,6 +16035,46 @@ QMSTableModule.decorators = [
 class BreadcrumbNode {
 }
 
+class RelatedConst {
+}
+RelatedConst.IS_DISPLAY_SEARCH_RESULT = 'IS_DISPLAY_SEARCH_RESULT';
+RelatedConst.HIDE_SEARCH_RESULT = 'HIDE_SEARCH_RESULT';
+RelatedConst.SHOW_SEARCH_RESULT = 'SHOW_SEARCH_RESULT';
+
+var DataType$1;
+(function (DataType) {
+    DataType[DataType["process"] = 2] = "process";
+    DataType[DataType["document"] = 1] = "document";
+    DataType[DataType["area"] = 3] = "area";
+    DataType[DataType["folder"] = 4] = "folder";
+    DataType[DataType["deviation"] = 5] = "deviation";
+    DataType[DataType["checklist"] = 6] = "checklist";
+    DataType[DataType["risk"] = 7] = "risk";
+    DataType[DataType["deviationType"] = 8] = "deviationType";
+    DataType[DataType["checklistCategory"] = 9] = "checklistCategory";
+    DataType[DataType["riskFolder"] = 10] = "riskFolder";
+})(DataType$1 || (DataType$1 = {}));
+
+var DocumentNodeType$1;
+(function (DocumentNodeType) {
+    DocumentNodeType[DocumentNodeType["Document"] = 1] = "Document";
+    DocumentNodeType[DocumentNodeType["LinkDocument"] = 2] = "LinkDocument";
+    DocumentNodeType[DocumentNodeType["FileDocument"] = 3] = "FileDocument";
+    DocumentNodeType[DocumentNodeType["ShortcutDocument"] = 4] = "ShortcutDocument";
+    DocumentNodeType[DocumentNodeType["Folder"] = 5] = "Folder";
+    DocumentNodeType[DocumentNodeType["TopFolder"] = 6] = "TopFolder";
+    DocumentNodeType[DocumentNodeType["DepartmentFolder"] = 7] = "DepartmentFolder";
+    DocumentNodeType[DocumentNodeType["RegionalFolder"] = 8] = "RegionalFolder";
+})(DocumentNodeType$1 || (DocumentNodeType$1 = {}));
+
+var ModuleType$1;
+(function (ModuleType) {
+    ModuleType[ModuleType["documentProcess"] = 1] = "documentProcess";
+    ModuleType[ModuleType["deviation"] = 2] = "deviation";
+    ModuleType[ModuleType["checklist"] = 3] = "checklist";
+    ModuleType[ModuleType["risk"] = 4] = "risk";
+})(ModuleType$1 || (ModuleType$1 = {}));
+
 class StepModel {
     constructor(id, name, disabled, selected) {
         this.id = id;
@@ -15964,6 +16103,7 @@ class QmsStepperComponent {
 }
 QmsStepperComponent.decorators = [
     { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 selector: 'app-qms-stepper',
                 template: "<div class=\"qms-stepper-container\">\r\n    <div *ngIf=\"isHorizontal\">\r\n        <mat-horizontal-stepper [style.width.px]=\"width\" labelPosition=\"{{labelPosition}}\" #stepper\r\n            (selectionChange)=\"changeStep($event)\" class=\"overflow-auto\" [selectedIndex]=\"currentStep\">\r\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\r\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\r\n                <ng-template matStepLabel>\r\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\">{{step.name}}</span>\r\n                </ng-template>\r\n                <ng-template matStepContent>\r\n                </ng-template>\r\n            </mat-step>\r\n            <ng-template matStepperIcon=\"edit\">\r\n                {{stepper.selectedIndex + 1}}\r\n            </ng-template>\r\n        </mat-horizontal-stepper>\r\n    </div>\r\n    <div *ngIf=\"!isHorizontal\">\r\n        <mat-vertical-stepper [style.height.px]=\"height\" #stepper (selectionChange)=\"changeStep($event.selectedIndex)\"\r\n            [selectedIndex]=\"currentStep\" class=\"overflow-auto\">\r\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\r\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\r\n                <ng-template matStepLabel>\r\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\">{{step.name}}</span>\r\n                </ng-template>\r\n                <ng-template matStepContent>\r\n                </ng-template>\r\n            </mat-step>\r\n            <ng-template matStepperIcon=\"edit\">\r\n                <span>{{stepper.selectedIndex + 1}}</span>\r\n            </ng-template>\r\n        </mat-vertical-stepper>\r\n    </div>\r\n</div>",
                 styles: [".qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item]{height:22px!important;padding:8px 12px;left:0;top:0;border-radius:4px;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-horizontal-stepper-header{width:auto}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-vertical-stepper-header{width:156px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon{background:rgba(0,0,0,.6);margin-right:14px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon-selected{background-color:#1954a9!important;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-selected=true] .title-step{font-weight:600!important;outline:none!important}.qms-stepper-container ::ng-deep mat-step-header:active{background:#e5eefb}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep mat-step-header .mat-ripple-element{background-color:rgba(229,238,251,.3)}.qms-stepper-container ::ng-deep mat-step-header:hover{background:#f2f7fd}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=disabled]{pointer-events:none!important;cursor:not-allowed;opacity:.6;height:22px!important;width:156px;left:0;top:0;border-radius:4px;padding:8px 12px}.qms-stepper-container ::ng-deep mat-step-header:focus{border:2px solid #1954a9}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-keyboard-focused,.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-program-focused{border:3px solid #1954a9;background:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus:not(:focus-visible){border:none}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=active]{pointer-events:none!important;cursor:not-allowed;opacity:.6}.qms-stepper-container .title-step{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0;text-align:center;color:#323232;outline:none!important}.qms-stepper-container ::ng-deep .mat-step-icon{width:24px;height:24px}.qms-stepper-container ::ng-deep .mat-step-icon .mat-step-icon-content{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0;text-align:center;color:#fff;padding-top:1px}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line:before{border-left-width:0;border-right-width:0}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line{margin-left:23px;background:#0000001f;height:30px;width:1px}.qms-stepper-container ::ng-deep .mat-stepper-horizontal-line{height:1px;width:22px!important;left:0;top:18px;border-radius:0;margin:8px;background:#0000001f;max-width:22px!important}"]
@@ -16106,6 +16246,16 @@ class InformationCoverItem {
     }
 }
 
+var SelectOptionTypes;
+(function (SelectOptionTypes) {
+    SelectOptionTypes[SelectOptionTypes["SelectOne"] = 1] = "SelectOne";
+    SelectOptionTypes[SelectOptionTypes["IncludeChildren"] = 2] = "IncludeChildren";
+    SelectOptionTypes[SelectOptionTypes["Children"] = 3] = "Children";
+})(SelectOptionTypes || (SelectOptionTypes = {}));
+
+class SelectOption {
+}
+
 class SelectPopupData {
     constructor() {
         this.treeData = [];
@@ -16115,8 +16265,11 @@ class SelectPopupData {
     }
 }
 
-class SelectOption {
-}
+class SelectConst {
+}
+SelectConst.IS_DISPLAY_SEARCH_RESULT = 'IS_DISPLAY_SEARCH_RESULT';
+SelectConst.HIDE_SEARCH_RESULT = 'HIDE_SEARCH_RESULT';
+SelectConst.SHOW_SEARCH_RESULT = 'SHOW_SEARCH_RESULT';
 
 class QMSSelectGlobalService {
     constructor() {
@@ -16132,19 +16285,6 @@ QMSSelectGlobalService.decorators = [
 ];
 QMSSelectGlobalService.ctorParameters = () => [];
 
-class SelectConst {
-}
-SelectConst.IS_DISPLAY_SEARCH_RESULT = 'IS_DISPLAY_SEARCH_RESULT';
-SelectConst.HIDE_SEARCH_RESULT = 'HIDE_SEARCH_RESULT';
-SelectConst.SHOW_SEARCH_RESULT = 'SHOW_SEARCH_RESULT';
-
-var SelectOptionTypes;
-(function (SelectOptionTypes) {
-    SelectOptionTypes[SelectOptionTypes["SelectOne"] = 1] = "SelectOne";
-    SelectOptionTypes[SelectOptionTypes["IncludeChildren"] = 2] = "IncludeChildren";
-    SelectOptionTypes[SelectOptionTypes["Children"] = 3] = "Children";
-})(SelectOptionTypes || (SelectOptionTypes = {}));
-
 class SelectIncludeChildrenPopUpComponent {
     constructor(cdRef, translate, dialogRef, globalService, iconRegistry, domSanitizer, appIconService, elem, data) {
         this.cdRef = cdRef;
@@ -16817,7 +16957,8 @@ class QmsBadgesComponent {
     constructor() {
         this.typeBadges = BadgesType;
         this.sizeCircleBadges = BadgeCircleSize;
-        this.type = BadgesType.circle;
+        this.type = '' || BadgesType.circle;
+        this.size = '' || BadgeCircleSize.small;
     }
     ngOnInit() {
         if (this.type === BadgesType.circle) {
@@ -16828,8 +16969,8 @@ class QmsBadgesComponent {
 QmsBadgesComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-badges',
-                template: "<div\r\n  class=\"qms-badges-container badges-container-{{ color }} text-color-{{\r\n    color\r\n  }} font-size-12 line-height-22 qms-badges-default\"\r\n  *ngIf=\"type === typeBadges.default\"\r\n>\r\n  <mat-icon class=\"font-size-16\" *ngIf=\"icon\">{{ icon }}</mat-icon\r\n  >\r\n  <span *ngIf=\"contents\">{{ contents }}</span>\r\n</div>\r\n<div\r\n  *ngIf=\"type === typeBadges.circle\"\r\n  class=\"qms-badges-circle-{{ size }} badges-container-circle-{{ color }} text-color-write\"\r\n>\r\n  <span *ngIf=\"contents > 99 && size !== sizeCircleBadges.small\" class=\"font-size-8\">{{ \"99\" }}+</span>\r\n  <span *ngIf=\"contents < 100 && size !== sizeCircleBadges.small\" class=\"font-size-12\">{{ contents }}</span>\r\n</div>\r\n\r\n<div\r\n  class=\"qms-badges-container badges-container-icon-{{ color }} font-size-12 line-height-22 qms-badges-default\"\r\n  *ngIf=\"type === typeBadges.icon\"\r\n>\r\n  <mat-icon class=\"font-size-16 text-color-write\" *ngIf=\"icon\">{{ icon }}</mat-icon\r\n  >\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}.badges-container-primary{background-color:#b7daf8}.badges-container-yellow{background-color:rgba(228,207,83,.3)}.badges-container-green{background-color:rgba(0,128,76,.1);border:#005935}.badges-container-red{background-color:rgba(176,0,32,.08)}.badges-container-orange{background-color:#faede8}.badges-container-grey{background-color:#e5e5e5}.badges-container-brown{background-color:#f0eae7}.badges-container-primary-icon{background-color:#00324e}.badges-container-icon-green{background-color:#005935}.badges-container-icon-red{background-color:#b00020}.badges-container-icon-orange{background-color:#9e360f}.badges-container-icon-brown{background-color:#59280b}.badges-container-circle-primary{background-color:#00324e}.badges-container-circle-orange{background-color:#9e360f}.text-color-primary{color:#00324e}.text-color-red{color:#b00020}.text-color-green{color:#005935}.text-color-yellow{color:#726729}.text-color-grey{color:#525252}.text-color-brown{color:#59280b}.text-color-orange{color:#9e360f}.text-color-write{color:#fff}.qms-badges-container{display:flex;align-items:center;width:100%;height:100%;font-family:Open Sans;font-style:normal;font-weight:600;font-size:12px;line-height:16px}.qms-badges-container-text{margin-top:10px;margin-bottom:10px}.qms-badges-container .margin-horizontal-17{margin-left:17px;margin-right:17px}.qms-badges-container .qms-badges-button{margin-left:auto;margin-right:8px}.qms-badges-circle-large{width:24px;height:24px}.qms-badges-circle-large,.qms-badges-circle-medium{border-radius:50%;display:flex;align-items:center;justify-content:center}.qms-badges-circle-medium{width:20px;height:20px}.qms-badges-circle-small{width:10px;height:10px;border-radius:50%}.qms-badges-circle-small,.qms-badges-default{display:flex;align-items:center;justify-content:center}.qms-badges-default{height:24px;padding:0 5px;border-radius:4px}.qms-badges-default .mat-icon{width:auto;height:auto}.font-bold{font-weight:700}.font-size-14{font-size:14px}.font-size-16{font-size:16px}.font-size-12{font-size:12px}.font-size-8{font-size:8px}.line-height-22{line-height:22px}"]
+                template: "<div\r\n  class=\"qms-badges-container badges-container-{{ color }} text-color-{{\r\n    color\r\n  }} font-size-14 line-height-22 qms-badges-default\"\r\n  *ngIf=\"type === typeBadges.default\"\r\n>\r\n  <mat-icon class=\"font-size-16\" *ngIf=\"icon && !fontIconGG\">{{ icon }}</mat-icon>\r\n  <mat-icon\r\n    *ngIf=\"itemIconSvg\"\r\n    class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n    [svgIcon]=\"itemIconSvg\"\r\n  ></mat-icon>\r\n  <img *ngIf=\"itemIconPath\" [src]=\"itemIconPath\" />\r\n  <span *ngIf=\"icon && fontIconGG\" class=\"{{ fontIconGG }}\">{{ icon }}</span>\r\n  <span *ngIf=\"contents\">{{ contents }}</span>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"type === typeBadges.circle\"\r\n  class=\"qms-badges-circle-{{ size }} badges-container-circle-{{\r\n    color\r\n  }} text-color-write\"\r\n>\r\n  <span\r\n    *ngIf=\"contents > 99 && size !== sizeCircleBadges.small\"\r\n    class=\"font-size-8\"\r\n  >\r\n    {{ '99' }}+\r\n  </span>\r\n  <span\r\n    *ngIf=\"contents < 100 && size !== sizeCircleBadges.small\"\r\n    class=\"font-size-14\"\r\n  >\r\n    {{ contents }}\r\n  </span>\r\n</div>\r\n\r\n<div\r\n  class=\"qms-badges-container badges-container-icon-{{\r\n    color\r\n  }} font-size-12 line-height-22 qms-badges-default\"\r\n  *ngIf=\"type === typeBadges.icon\"\r\n>\r\n  <mat-icon class=\"font-size-16\" *ngIf=\"icon && !fontIconGG\">{{ icon }}</mat-icon>\r\n  <mat-icon\r\n    *ngIf=\"itemIconSvg\"\r\n    class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n    [svgIcon]=\"itemIconSvg\"\r\n  ></mat-icon>\r\n  <img *ngIf=\"itemIconPath\" [src]=\"itemIconPath\" />\r\n  <span *ngIf=\"fontIconGG\" class=\"{{ fontIconGG }}\"> {{ icon }}</span>\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}.badges-container-primary{background-color:#b7daf8}.badges-container-yellow{background-color:rgba(228,207,83,.3)}.badges-container-green{background-color:rgba(0,128,76,.1);border:#005935}.badges-container-red{background-color:rgba(176,0,32,.08)}.badges-container-orange{background-color:#faede8}.badges-container-grey{background-color:#e5e5e5}.badges-container-brown{background-color:#f0eae7}.badges-container-icon-primary{background-color:#00324e}.badges-container-icon-green{background-color:#005935}.badges-container-icon-red{background-color:#b00020}.badges-container-icon-orange{background-color:#9e360f}.badges-container-icon-brown{background-color:#59280b}.badges-container-icon-yellow{background-color:rgba(228,207,83,.3)}.badges-container-circle-primary{background-color:#00324e}.badges-container-circle-orange{background-color:#9e360f}.text-color-primary{color:#00324e}.text-color-red{color:#b00020}.text-color-green{color:#005935}.text-color-yellow{color:#726729}.text-color-grey{color:#525252}.text-color-brown{color:#59280b}.text-color-orange{color:#9e360f}.text-color-write{color:#fff}.qms-badges-container{display:flex;align-items:center;width:100%;height:100%;font-family:Open Sans;font-style:normal;font-weight:600;font-size:12px;line-height:16px}.qms-badges-container-text{margin-top:10px;margin-bottom:10px}.qms-badges-container .margin-horizontal-17{margin-left:17px;margin-right:17px}.qms-badges-container .qms-badges-button{margin-left:auto;margin-right:8px}.qms-badges-circle-large{width:24px;height:24px}.qms-badges-circle-large,.qms-badges-circle-medium{border-radius:50%;display:flex;align-items:center;justify-content:center}.qms-badges-circle-medium{width:20px;height:20px}.qms-badges-circle-small{width:10px;height:10px;border-radius:50%}.qms-badges-circle-small,.qms-badges-default{display:flex;align-items:center;justify-content:center}.qms-badges-default{height:24px;padding:0 5px;border-radius:4px}.qms-badges-default .mat-icon{width:auto;height:auto}.font-bold{font-weight:700}.font-size-14{font-size:14px}.font-size-16{font-size:16px}.font-size-12{font-size:12px}.font-size-8{font-size:8px}.line-height-22{line-height:22px}"]
             },] }
 ];
 QmsBadgesComponent.propDecorators = {
@@ -16837,7 +16978,10 @@ QmsBadgesComponent.propDecorators = {
     color: [{ type: Input }],
     contents: [{ type: Input }],
     size: [{ type: Input }],
-    icon: [{ type: Input }]
+    icon: [{ type: Input }],
+    itemIconPath: [{ type: Input }],
+    itemIconSvg: [{ type: Input }],
+    fontIconGG: [{ type: Input }]
 };
 
 class QmsBadgesModule {
@@ -17225,11 +17369,19 @@ class SelectOneDialog {
         this.listChildrenSelectOne = [];
         this.listChildrenSelectOne = listChildren;
     }
+    removeCheckedNodeList() {
+        const item = null;
+        this.checkedNodeList = [];
+        this.selectedData = [...[], item];
+        setTimeout(() => {
+            this.selectedData = [];
+        }, 500);
+    }
 }
 SelectOneDialog.decorators = [
     { type: Component, args: [{
                 selector: 'qms-select-one',
-                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 }}</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      <div class=\"search__module-result\" *ngIf=\"filteredOptions.length\">\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions()\"\r\n          [value]=\"option\"\r\n          (click)=\"selectItemSearched(option)\"\r\n        >\r\n          <qms-list-item type=\"image-square\">\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              [svgIcon]=\"getNodeIcon(option)\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div\r\n                qms-line\r\n                type=\"caption\"\r\n                qms-tool-tip=\"{{\r\n                  isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                }}\"\r\n                mode=\"dark\"\r\n                *ngIf=\"getParentName(option)\"\r\n              >\r\n                <span #searchItemResult class=\"search__result__parent-name\">\r\n                  {{ option.parentName }}\r\n                </span>\r\n              </div>\r\n              <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                {{ option.itemName }}\r\n              </div>\r\n              <div\r\n                class=\"caption\"\r\n                *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n              >\r\n                <qms-breadcrumb\r\n                  class=\"breadcrumb-containe\"\r\n                  type=\"table\"\r\n                  numDisplayItem=\"1\"\r\n                  [nodes]=\"option.breadcumbs\"\r\n                >\r\n                </qms-breadcrumb>\r\n              </div>\r\n            </div>\r\n            <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n              <span class=\"material-icons-outlined search__description-icon\">\r\n                local_offer\r\n              </span>\r\n              {{ getItemId(option) }}\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar col-12 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        class=\"panel-tree\"\r\n      >\r\n        <div id=\"qmslib_related_popup_common_002\">\r\n          <qms-tree\r\n            [treeData]=\"treeData\"\r\n            [treeConfig]=\"treeConfig\"\r\n            [selectedData]=\"selectedData\"\r\n            [selectedRiskData]=\"selectedRiskData\"\r\n            [disabledList]=\"disabledList\"\r\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n            (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n            [expandOnTitleClick]=\"true\"\r\n            [expandToChildNode]=\"expandToChildNode\"\r\n          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n      <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        qms-tool-tip=\"{{\r\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n        }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)\r\n        }}</span>\r\n      </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 }}</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      <div class=\"search__module-result\" *ngIf=\"filteredOptions.length\">\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions()\"\r\n          [value]=\"option\"\r\n          (click)=\"selectItemSearched(option)\"\r\n        >\r\n          <qms-list-item type=\"image-square\">\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              [svgIcon]=\"getNodeIcon(option)\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div\r\n                qms-line\r\n                type=\"caption\"\r\n                qms-tool-tip=\"{{\r\n                  isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                }}\"\r\n                mode=\"dark\"\r\n                *ngIf=\"getParentName(option)\"\r\n              >\r\n                <span #searchItemResult class=\"search__result__parent-name\">\r\n                  {{ option.parentName }}\r\n                </span>\r\n              </div>\r\n              <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                {{ option.itemName }}\r\n              </div>\r\n              <div\r\n                class=\"caption\"\r\n                *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n              >\r\n                <qms-breadcrumb\r\n                  class=\"breadcrumb-containe\"\r\n                  type=\"table\"\r\n                  numDisplayItem=\"1\"\r\n                  [nodes]=\"option.breadcumbs\"\r\n                >\r\n                </qms-breadcrumb>\r\n              </div>\r\n            </div>\r\n            <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n              <span class=\"material-icons-outlined search__description-icon\">\r\n                local_offer\r\n              </span>\r\n              {{ getItemId(option) }}\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar col-12 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        class=\"panel-tree\"\r\n      >\r\n        <div id=\"qmslib_related_popup_common_002\">\r\n          <qms-tree\r\n            [treeData]=\"treeData\"\r\n            [treeConfig]=\"treeConfig\"\r\n            [selectedData]=\"selectedData\"\r\n            [selectedRiskData]=\"selectedRiskData\"\r\n            [disabledList]=\"disabledList\"\r\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n            (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n            [expandOnTitleClick]=\"false\"\r\n            [expandToChildNode]=\"expandToChildNode\"\r\n          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n      <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        qms-tool-tip=\"{{\r\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n        }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)\r\n        }}</span>\r\n        <mat-icon (click)=\"removeCheckedNodeList()\">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-scrollbar.none-scroll-bg::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:#eee}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:#e5e5e5;max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:10.25rem}"]
             },] }
@@ -17286,6 +17438,1803 @@ QMSSelectOneModule.decorators = [
 class ISelectOneItem {
 }
 
+class NewTreeModel {
+}
+
+class NewTreeNode {
+}
+
+let objData = {};
+let json = JSON;
+function buildArrayTree(obj, level) {
+    return Object.keys(obj).reduce((accumulator, key) => {
+        const value = obj[key];
+        const node = new NewTreeNode();
+        const keyObj = json.parse(key);
+        node.id = keyObj["id"];
+        node.name = keyObj["name"];
+        node.parentId = keyObj["parentId"];
+        node.levelType = keyObj["levelType"];
+        node.expandable = keyObj["expandable"];
+        if (value != null) {
+            if (typeof value === 'object') {
+                node.children = this.buildArrayTree(value, level + 1);
+            }
+            else {
+                node.name = value;
+            }
+        }
+        return accumulator.concat(node);
+    }, []);
+}
+function buildObjectTree(arr) {
+    objData = {};
+    let objTreeData;
+    const root = arr.filter((x) => {
+        return x.parentId === '';
+    });
+    root.forEach((item) => {
+        objTreeData = this.findParent(item, arr);
+    });
+    return objTreeData;
+}
+function findParent(item, array) {
+    if (item) {
+        const objParent = {};
+        // find child
+        const childFolder = array.filter((x) => {
+            return x.parentId === item.id && x.expandable;
+        });
+        if (childFolder.length > 0) {
+            this.findChild(item.id, objParent, array);
+        }
+        const items = array.filter((x) => {
+            return x.parentId === item.id && !x.expandable;
+        });
+        items.forEach((item) => {
+            let parentKey = {
+                id: item.id,
+                name: item.name,
+                parentId: item.parentId,
+                levelType: item.levelType,
+                expandable: item.expandable
+            };
+            objParent[json.stringify(parentKey)] = null;
+        });
+        let key = {
+            id: item.id,
+            name: item.name,
+            parentId: '',
+            levelType: item.levelType,
+            expandable: item.expandable
+        };
+        // add node to tree
+        objData[json.stringify(key)] = objParent;
+    }
+    return objData;
+}
+function findChild(id, objParent, array) {
+    const subNode = array.filter((x) => {
+        return x.parentId === id;
+    });
+    subNode.forEach((item) => {
+        const processNode = {};
+        if (item.expandable) {
+            this.findChild(item.id, processNode, array);
+        }
+        let key = {
+            id: item.id,
+            name: item.name,
+            parentId: id,
+            levelType: item.levelType,
+            expandable: item.expandable
+        };
+        objParent[json.stringify(key)] = Object.assign(Object.assign({}, objParent[json.stringify(key)]), processNode);
+    });
+}
+const TreeFunctions = {
+    buildArrayTree,
+    buildObjectTree,
+    findParent,
+    findChild,
+};
+
+class NewTreeComponent {
+    constructor(cdRef, domSanitizer, iconRegistry, appIconService) {
+        this.cdRef = cdRef;
+        this.domSanitizer = domSanitizer;
+        this.iconRegistry = iconRegistry;
+        this.appIconService = appIconService;
+        this.treeData = [];
+        this.selectedData = [];
+        this.selectedRiskData = [];
+        this.disabledList = [];
+        this.expandToChildNode = [];
+        this.selectNodeEvent = new EventEmitter();
+        this.selectFolderEvent = new EventEmitter();
+        this.checkBoxEvent = new EventEmitter();
+        this.childCheckedEvent = new EventEmitter();
+        this.nodeExpandEvent = new EventEmitter();
+        this.getChildNodeSelectOne = new EventEmitter();
+        this.treeControlNodes = new EventEmitter();
+        this.listParentObj = {};
+        this.filterData = [];
+        this.arrIndex = [];
+        this.checkedNodeList = [];
+        this.useExpandFeature = true;
+        this.allowSelectFolder = false;
+        this.areaOfCurrentProcess = '';
+        this.showCheckBox = false;
+        this.allowMultipleCheck = true;
+        this.singleSelectedNode = false;
+        this.onlyCheckBoxForChild = false;
+        this.onlyFolder = false;
+        this.itemIconType = ItemIconType;
+        this.displayType = 1;
+        this.openIcon = '';
+        this.openIconColor = '#1954A9';
+        this.closeIcon = '';
+        this.closeIconColor = '#000000';
+        this.itemIcon = '';
+        this.itemIconSvg = '';
+        this.itemIconPath = '';
+        this.itemIconBase64 = '';
+        this.treeControl = new FlatTreeControl((node) => {
+            return node.level;
+        }, (node) => {
+            return node.expandable;
+        });
+        this.isChecked = false;
+        this.idCheckIcon = '';
+        this.listChildNode = [];
+        this.dataType = DataType$2;
+        this.transformer = (node, level) => {
+            let checkHasChild = true;
+            if (!node.children) {
+                checkHasChild = false;
+            }
+            else if (node.expandable) {
+                checkHasChild = false;
+            }
+            // tslint:disable-next-line:max-line-length
+            else if (!!node.children &&
+                node.children.length &&
+                node.children.length === 1 &&
+                !node.children[0].name &&
+                node.id.toString() === this.areaOfCurrentProcess) {
+                checkHasChild = false;
+            }
+            if (!(this.listParentObj[node.id] === 1)) {
+                checkHasChild = false;
+            }
+            return {
+                expandable: node.expandable,
+                name: node.name,
+                level,
+                id: node.id,
+                hasChild: checkHasChild,
+                parentId: node.parentId,
+                disabled: false,
+                levelType: node.levelType
+            };
+        };
+        this.treeFlattener = new MatTreeFlattener(this.transformer, (node) => {
+            return node.level;
+        }, (node) => {
+            return node.expandable;
+        }, (node) => {
+            return node.children;
+        });
+        this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+        this.hasChild = (_, node) => {
+            return node.expandable;
+        };
+        iconRegistry.addSvgIconLiteral('keyboard_up', domSanitizer.bypassSecurityTrustHtml(KEYBOARD_UP_ICON));
+        iconRegistry.addSvgIconLiteral('keyboard_down', domSanitizer.bypassSecurityTrustHtml(KEYBOARD_DOWN_ICON));
+        appIconService.registerProcessIcon(iconRegistry, domSanitizer);
+        appIconService.registerProcessAreaIcon(iconRegistry, domSanitizer);
+        appIconService.registerDocumentIcon(iconRegistry, domSanitizer);
+        appIconService.registerFolderIcon(iconRegistry, domSanitizer);
+        appIconService.registerDeviationIcon(iconRegistry, domSanitizer);
+        appIconService.registerChecklistIcon(iconRegistry, domSanitizer);
+        appIconService.registerRiskIcon(iconRegistry, domSanitizer);
+    }
+    ngOnChanges(changes) {
+        if (changes.treeData && JSON.stringify(changes.treeData.currentValue) !== JSON.stringify(changes.treeData.previousValue)) {
+            this.treeData = [...this.treeData, changes.treeData.currentValue];
+            this.initTreeData();
+        }
+        if (changes.selectedData &&
+            (changes.selectedData.currentValue.length > 0 ||
+                JSON.stringify(changes.selectedData.currentValue) !==
+                    JSON.stringify(changes.selectedData.previousValue))) {
+            if (changes.selectedData.currentValue) {
+                this.checkSelected(changes.selectedData.currentValue);
+            }
+            else {
+                for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
+                    this.checklistSelection.deselect(this.treeControl.dataNodes[i]);
+                }
+            }
+        }
+        if (changes.disabledList && JSON.stringify(changes.disabledList.currentValue) !== JSON.stringify(changes.disabledList.previousValue)) {
+            this.checkDisabledList();
+        }
+        // expand all parent to show node
+        if (changes.expandToChildNode && JSON.stringify(changes.expandToChildNode.currentValue) !== JSON.stringify(changes.expandToChildNode.previousValue)) {
+            this.openExpandToChildNode();
+        }
+    }
+    ngOnInit() {
+        // this.initTreeData();
+    }
+    initTreeData() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+        this.treeData.forEach(item => {
+            if (!!item.parentId && item.parentId.length > 0) {
+                this.listParentObj[item.parentId] = 1;
+            }
+            if (item.id && item.id.length > 0) {
+                this.listParentObj[item.parentId] = 1;
+            }
+        });
+        this.filterData = this.treeData;
+        this.treeObject = TreeFunctions.buildObjectTree(this.filterData);
+        this.dataSource.data = TreeFunctions.buildArrayTree(this.treeObject || {}, 0).map(element => {
+            const item = this.sortDataTree(element);
+            element = null;
+            element = Object.assign({}, item);
+            return element;
+        });
+        this.useExpandFeature = !((_a = this.treeConfig) === null || _a === void 0 ? void 0 : _a.showCheckBox);
+        this.allowSelectFolder = (_b = this.treeConfig) === null || _b === void 0 ? void 0 : _b.allowSelectFolder;
+        this.areaOfCurrentProcess = (_c = this.treeConfig) === null || _c === void 0 ? void 0 : _c.areaOfCurrentProcess;
+        this.showCheckBox = (_d = this.treeConfig) === null || _d === void 0 ? void 0 : _d.showCheckBox;
+        this.onlyCheckBoxForChild = (_e = this.treeConfig) === null || _e === void 0 ? void 0 : _e.onlyCheckBoxForChild;
+        this.moduleId = (_f = this.treeConfig) === null || _f === void 0 ? void 0 : _f.moduleId;
+        this.openIcon = (_g = this.treeConfig) === null || _g === void 0 ? void 0 : _g.openIcon;
+        this.openIconColor = ((_h = this.treeConfig) === null || _h === void 0 ? void 0 : _h.openIconColor) ? (_j = this.treeConfig) === null || _j === void 0 ? void 0 : _j.openIconColor : this.openIconColor;
+        this.closeIcon = (_k = this.treeConfig) === null || _k === void 0 ? void 0 : _k.closeIcon;
+        this.closeIconColor = ((_l = this.treeConfig) === null || _l === void 0 ? void 0 : _l.closeIconColor) ? (_m = this.treeConfig) === null || _m === void 0 ? void 0 : _m.closeIconColor : this.closeIconColor;
+        this.itemIcon = (_o = this.treeConfig) === null || _o === void 0 ? void 0 : _o.itemIcon;
+        this.itemIconSvg = (_p = this.treeConfig) === null || _p === void 0 ? void 0 : _p.itemIconSvg;
+        this.itemIconPath = (_q = this.treeConfig) === null || _q === void 0 ? void 0 : _q.itemIconPath;
+        this.itemIconBase64 = this.domSanitizer.bypassSecurityTrustResourceUrl((_r = this.treeConfig) === null || _r === void 0 ? void 0 : _r.itemIconBase64);
+        this.allowMultipleCheck = (_s = this.treeConfig) === null || _s === void 0 ? void 0 : _s.allowMultipleCheck;
+        this.singleSelectedNode = (_t = this.treeConfig) === null || _t === void 0 ? void 0 : _t.singleSelectedNode;
+        this.onlyFolder = (_u = this.treeConfig) === null || _u === void 0 ? void 0 : _u.onlyFolder;
+        this.checklistSelection = new SelectionModel(this.allowMultipleCheck); /* true: multiple */
+        this.displayType = this.getItemIconType(this.treeConfig);
+        // Expand child node tree
+        if (this.treeConfig.expandAll) {
+            this.treeControl.expandAll();
+        }
+        //Disabled node
+        if (this.disabledList.length) {
+            this.checkDisabledList();
+        }
+        if (this.selectedData.length) {
+            this.checkSelected(this.selectedData);
+        }
+        // Risk Tree
+        if (this.selectedRiskData.length) {
+            const selectedData = [];
+            for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
+                this.selectedRiskData.forEach(x => {
+                    const index = selectedData.findIndex(el => el.id === x.rootId);
+                    if (x.rootId === this.treeControl.dataNodes[i].id && index < 0) {
+                        selectedData.push(this.treeControl.dataNodes[i]);
+                    }
+                });
+            }
+            this.checkSelected(selectedData);
+            this.checkBoxEvent.emit(selectedData);
+        }
+        // keep expand
+        if (this.parentNodeOnClick && Object.keys(this.parentNodeOnClick).length) {
+            let tempParent = [];
+            let root = new TreeFlatNode();
+            for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
+                const tree = this.treeControl.dataNodes[i];
+                if (this.parentNodeOnClick.parentId === tree.parentId && this.parentNodeOnClick.id === tree.id
+                    || this.parentNodeOnClick.parentId === tree.id) {
+                    tempParent = [...tempParent, this.getParent(tree)];
+                    root = tree;
+                }
+            }
+            tempParent.push(root);
+            tempParent.forEach(x => {
+                this.treeControl.expand(x);
+            });
+        }
+    }
+    getParent(node) {
+        const { treeControl } = this;
+        const currentLevel = treeControl.getLevel(node);
+        if (currentLevel < 1) {
+            return null;
+        }
+        const index = treeControl.dataNodes.indexOf(node) - 1;
+        for (let i = index; i >= 0; i--) {
+            const currentNode = treeControl.dataNodes[i];
+            if (treeControl.getLevel(currentNode) < currentLevel) {
+                return currentNode;
+            }
+        }
+    }
+    openExpandToChildNode() {
+        if (this.expandToChildNode.length) {
+            if (this.expandToChildNode[0] === '') {
+                this.idCheckIcon = '';
+                this.treeControl.collapseAll();
+                this.cdRef.detectChanges();
+                return;
+            }
+            let itemMarkChecked = this.expandToChildNode[this.expandToChildNode.length - 1].toUpperCase();
+            this.idCheckIcon = itemMarkChecked;
+            // get all children nodes on same level
+            let listChildNodeSameLevel = this.findChildNode(itemMarkChecked, this.dataSource.data);
+            // get all children in all level
+            this.listChildNode = [];
+            this.getChild(listChildNodeSameLevel);
+            this.getChildNodeSelectOne.emit(this.listChildNode);
+            for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
+                if (itemMarkChecked === this.treeControl.dataNodes[i].id) {
+                    this.selectNodeEvent.emit(this.treeControl.dataNodes[i]);
+                }
+                this.expandToChildNode.forEach(el => {
+                    if (this.treeControl.dataNodes[i].id === el.toUpperCase()) {
+                        this.treeControl.expand(this.treeControl.dataNodes[i]);
+                    }
+                });
+            }
+        }
+    }
+    checkDisabledList() {
+        // Disable List
+        if (this.disabledList.length) {
+            for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
+                this.disabledList.forEach(x => {
+                    var _a;
+                    if (x.id === this.treeControl.dataNodes[i].id
+                        && (!x.parentId || x.parentId === ((_a = this.treeControl.dataNodes[i]) === null || _a === void 0 ? void 0 : _a.parentId))) {
+                        this.treeControl.dataNodes[i].disabled = true;
+                    }
+                });
+            }
+        }
+        //Selected node with select one
+        if (this.disabledList.length && this.treeConfig.selectOne) {
+            let itemMarkChecked = this.disabledList[this.disabledList.length - 1].toUpperCase();
+            this.idCheckIcon = itemMarkChecked;
+            // get all children nodes on same level
+            let listChildNodeSameLevel = this.findChildNode(itemMarkChecked, this.dataSource.data);
+            // get all children in all level
+            this.listChildNode = [];
+            this.getChild(listChildNodeSameLevel);
+            this.getChildNodeSelectOne.emit(this.listChildNode);
+            for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
+                if (itemMarkChecked === this.treeControl.dataNodes[i].id) {
+                    this.selectNodeEvent.emit(this.treeControl.dataNodes[i]);
+                }
+                this.disabledList.forEach(el => {
+                    if (this.treeControl.dataNodes[i].id === el.toUpperCase()) {
+                        this.treeControl.expand(this.treeControl.dataNodes[i]);
+                    }
+                });
+                // remove all children nodes when user dont need to show them
+                this.listChildNode.forEach(el => {
+                    var _a;
+                    if (el.id && ((_a = this.treeControl.dataNodes[i]) === null || _a === void 0 ? void 0 : _a.id) === el.id) {
+                        this.treeControl.dataNodes.splice(i, 1);
+                    }
+                });
+            }
+        }
+        else {
+            this.idCheckIcon = '';
+            this.treeControl.collapseAll();
+            this.cdRef.detectChanges();
+        }
+    }
+    getChild(obj) {
+        for (let i = 0; i < obj.children.length; i++) {
+            if (obj.children[i].children) {
+                this.getChild(obj.children[i]);
+                delete obj.children[i].children;
+                this.listChildNode.push(obj.children[i]);
+            }
+            else {
+                this.listChildNode.push(obj.children[i]);
+            }
+        }
+    }
+    sortDataTree(obj) {
+        if (obj.children) {
+            let child = [];
+            const leafNode = obj.children.filter(x => !x.children);
+            const subFolderNode = obj.children.filter(x => x.children);
+            // for(let index = subFolderNode.length - 1; index >= 0 ; index--){
+            //   let el = subFolderNode[index];
+            //   this.sortDataTree(el);
+            //   child.unshift(el);
+            // }
+            subFolderNode.forEach(element => {
+                let el = element;
+                this.sortDataTree(el);
+                child.push(el);
+            });
+            leafNode.forEach(element => {
+                let el = element;
+                child.push(el);
+            });
+            obj.children = child;
+        }
+        return obj;
+    }
+    getImagePath() {
+        return this.domSanitizer.bypassSecurityTrustResourceUrl(this.treeConfig.itemIconBase64);
+    }
+    checkSelected(itemSelected) {
+        setTimeout(() => {
+            if (!this.treeControl['dataNodes'])
+                return;
+            for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
+                const tree = this.treeControl.dataNodes[i];
+                this.checklistSelection.deselect(tree);
+                for (let j = 0; j < itemSelected.length; j++) {
+                    const element = itemSelected[j];
+                    if (tree.id.toLocaleLowerCase() === element.id.toLocaleLowerCase() && (!element.parentId || tree.parentId.toLocaleLowerCase() === element.parentId.toLocaleLowerCase())) {
+                        this.checklistSelection.select(tree);
+                    }
+                }
+            }
+        }, 500);
+    }
+    checkSelectedSameNode(itemSelected, flag) {
+        for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
+            const tree = this.treeControl.dataNodes[i];
+            for (let j = 0; j < itemSelected.length; j++) {
+                const element = itemSelected[j];
+                if (element.id && tree.id === element.id
+                    && tree.parentId === element.parentId && !tree.disabled) {
+                    flag ? this.checklistSelection.select(tree) : this.checklistSelection.deselect(tree);
+                }
+            }
+        }
+    }
+    getItemIconType(treeConfig) {
+        if (treeConfig.itemIcon && treeConfig.itemIcon.length)
+            return this.itemIconType.name;
+        if (treeConfig.itemIconPath && treeConfig.itemIconPath.length)
+            return this.itemIconType.path;
+        if (treeConfig.itemIconBase64 && treeConfig.itemIconBase64.length)
+            return this.itemIconType.base64;
+        if (treeConfig.itemIconSvg && treeConfig.itemIconSvg.length)
+            return this.itemIconType.svg;
+        return this.itemIconType.none;
+    }
+    /** Whether all the descendants of the node are selected */
+    descendantsAllSelected(node) {
+        const descendants = !this.singleSelectedNode ? this.treeControl.getDescendants(node).filter(item => !item.disabled) : [];
+        if (!descendants.length) {
+            return this.checklistSelection.isSelected(node);
+        }
+        const selected = this.checklistSelection.isSelected(node);
+        const allSelected = descendants.every(child => this.checklistSelection.isSelected(child));
+        if (!selected && allSelected) {
+            this.checklistSelection.select(node);
+            this.cdRef.markForCheck();
+        }
+        return allSelected;
+    }
+    /** Whether part of the descendants are selected */
+    descendantsPartiallySelected(node) {
+        const descendants = !this.singleSelectedNode ? this.treeControl.getDescendants(node).filter(item => !item.disabled) : [];
+        const result = descendants.some(child => this.checklistSelection.isSelected(child));
+        return result && !this.descendantsAllSelected(node);
+    }
+    /** Toggle the to-do item selection. Select/deselect all the descendants node */
+    todoItemSelectionToggle(node) {
+        switch (this.moduleId) {
+            case DataType$2.document:
+                node.itemType = node.expandable ? DataType$2.folder : DataType$2.document;
+                break;
+            case DataType$2.process:
+                node.itemType = node.expandable ? DataType$2.area : DataType$2.process;
+                break;
+            case DataType$2.checklist:
+                node.itemType = node.expandable ? DataType$2.checklistCategory : DataType$2.checklist;
+                break;
+            case DataType$2.deviation:
+                node.itemType = node.expandable ? DataType$2.deviationType : DataType$2.deviation;
+                break;
+            case DataType$2.risk:
+                node.itemType = node.expandable ? DataType$2.riskFolder : DataType$2.risk;
+                break;
+        }
+        this.selectNodeEvent.emit(node);
+        // tree have duplicate node
+        if (this.treeConfig.canHaveDupId) {
+            for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
+                if (this.treeControl.dataNodes[i].id === node.id
+                    && this.treeControl.dataNodes[i].parentId === node.parentId
+                    && !this.treeControl.dataNodes[i].disabled) {
+                    this.checklistSelection.toggle(this.treeControl.dataNodes[i]);
+                }
+            }
+        }
+        else {
+            this.checklistSelection.toggle(node);
+        }
+        // process/ document single selected
+        if (this.singleSelectedNode) {
+            this.checkBoxEvent.emit(this.checklistSelection.selected);
+        }
+        else {
+            const descendants = this.treeControl.getDescendants(node).filter(item => !item.disabled);
+            this.checkSelectedSameNode(descendants, this.descendantsAllSelected(node));
+            !this.descendantsAllSelected(node)
+                ? this.checklistSelection.select(...descendants)
+                : this.checklistSelection.deselect(...descendants);
+            this.cdRef.markForCheck();
+            const allNodeIsParent = this.checklistSelection.selected.every(child => child.expandable);
+            if (allNodeIsParent) {
+                this.checklistSelection.selected.forEach(element => {
+                    this.checklistSelection.deselect(element);
+                });
+            }
+            this.checkBoxEvent.emit(this.checklistSelection.selected);
+        }
+    }
+    todoChildSelectionToggle(node) {
+        for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
+            if (this.treeControl.dataNodes[i].id === node.id
+                && this.treeControl.dataNodes[i].parentId === node.parentId
+                && !this.treeControl.dataNodes[i].disabled) {
+                this.checklistSelection.toggle(this.treeControl.dataNodes[i]);
+            }
+        }
+        // this.checklistSelection.toggle(node);
+        this.cdRef.markForCheck();
+        this.checkBoxEvent.emit(this.checklistSelection.selected);
+    }
+    todoItemSelection(nodes) {
+        nodes.forEach(node => {
+            for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
+                if (this.treeControl.dataNodes[i].id === node.id &&
+                    this.treeControl.dataNodes[i].parentId === node.parentId &&
+                    !this.treeControl.dataNodes[i].disabled && !this.treeControl.dataNodes[i].expandable) {
+                    if (!this.checklistSelection.isSelected(this.treeControl.dataNodes[i]))
+                        this.checklistSelection.toggle(this.treeControl.dataNodes[i]);
+                }
+            }
+        });
+        this.checkBoxEvent.emit(this.checklistSelection.selected);
+    }
+    todoItemSelectionProcessDocument(nodes) {
+        nodes.forEach(node => {
+            for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
+                if (this.treeControl.dataNodes[i].id === node.id &&
+                    this.treeControl.dataNodes[i].parentId === node.parentId &&
+                    !this.treeControl.dataNodes[i].disabled && !this.treeControl.dataNodes[i].expandable) {
+                    if (!this.checklistSelection.isSelected(this.treeControl.dataNodes[i]))
+                        this.checklistSelection.toggle(this.treeControl.dataNodes[i]);
+                }
+            }
+        });
+        setTimeout(() => {
+            this.checkBoxEvent.emit(this.checklistSelection.selected);
+            this.treeControlNodes.emit(this.treeControl);
+        }, 500);
+    }
+    todoFolderSelection(nodes) {
+        nodes.forEach(node => {
+            for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
+                if (this.treeControl.dataNodes[i].id === node.id &&
+                    this.treeControl.dataNodes[i].parentId === node.parentId &&
+                    !this.treeControl.dataNodes[i].disabled && this.treeControl.dataNodes[i].expandable) {
+                    if (!this.checklistSelection.isSelected(this.treeControl.dataNodes[i]))
+                        this.todoItemSelectionToggle(this.treeControl.dataNodes[i]);
+                }
+            }
+        });
+        this.checkBoxEvent.emit(this.checklistSelection.selected);
+    }
+    selectNode(node) {
+        if (window[RelatedConst$1.IS_DISPLAY_SEARCH_RESULT]) {
+            window.postMessage(RelatedConst$1.HIDE_SEARCH_RESULT, '*');
+        }
+        if (this.treeConfig.selectOne) {
+            node.itemType = this.checkDataTypeSelectNode(node);
+            this.idCheckIcon = node.id;
+            this.selectNodeEvent.emit(node);
+        }
+    }
+    checkDataTypeSelectNode(node) {
+        let itemType = -1;
+        switch (this.moduleId) {
+            case DataType$2.process:
+                itemType = node.expandable ? DataType$2.area : DataType$2.process;
+                break;
+            case DataType$2.document:
+                itemType = node.expandable ? DataType$2.folder : DataType$2.document;
+                break;
+            default:
+                itemType = this.moduleId;
+                break;
+        }
+        return itemType;
+    }
+    selectFolder(node) {
+        this.selectFolderEvent.emit(node);
+    }
+    onExpandNode(node, isExpandNode) {
+        if (isExpandNode) {
+            this.nodeExpandEvent.emit(node);
+        }
+        if (this.treeConfig.selectOne) {
+            this.idCheckIcon = node.id;
+            node.itemType = this.checkDataTypeSelectNode(node);
+            this.selectNodeEvent.emit(node);
+        }
+        if (window[RelatedConst$1.IS_DISPLAY_SEARCH_RESULT]) {
+            window.postMessage(RelatedConst$1.HIDE_SEARCH_RESULT, '*');
+        }
+        // set useExpandFeature = true to improve performance of tree loading
+        if (!isExpandNode || !this.useExpandFeature) {
+            for (let i = 0; i < this.arrIndex.length; i++) {
+                if (this.arrIndex[i] === node.id) {
+                    this.arrIndex.splice(i, 1);
+                }
+            }
+            return;
+        }
+        // get array index to expand node after refresh datasource
+        let index = 0;
+        let isChange = false;
+        let isRemove = false;
+        this.arrIndex.push(node.id);
+        const childArray = this.treeData.filter((x) => {
+            return x.parentId === node.id;
+        });
+        let rootId = '0';
+        let parentElement;
+        let childrenList;
+        if (childArray.length === 0) {
+            return;
+        }
+        childArray.forEach((item) => {
+            if (item.parentId === rootId) {
+                return;
+            }
+            // get child node from original datasource
+            const child = this.getChildNode(item.parentId, childArray);
+            rootId = item.parentId;
+            index = this.getNodeIndex(child.id, undefined, this.dataSource['_treeControl'].dataNodes);
+            if (index > -1) {
+                return;
+            }
+            // add child node to expand node
+            parentElement = this.findChildNode(node.id, this.dataSource.data);
+            if (parentElement) {
+                // temporary remove all node without children => purpose to add node folder first
+                if (!isRemove) {
+                    childrenList = [...parentElement.children];
+                    this.removeChildren(parentElement);
+                    isRemove = true;
+                }
+                // add node folder first
+                parentElement.children.push(child);
+                isChange = true;
+            }
+        });
+        // add node without children again
+        if (isRemove) {
+            this.addChildren(parentElement, childrenList);
+        }
+        // refresh data and expand tree node from root node
+        if (isChange) {
+            this.refreshTreeData();
+            this.arrIndex.forEach((item) => {
+                index = this.getNodeIndex(item, undefined, this.dataSource['_treeControl'].dataNodes);
+                this.treeControl.expand(this.treeControl.dataNodes[index]);
+            });
+            isChange = false;
+        }
+    }
+    removeChildren(parentElement) {
+        if (parentElement.children) {
+            parentElement.children.length = 0;
+        }
+    }
+    addChildren(parentElement, childrenList) {
+        if (childrenList) {
+            childrenList.forEach((e) => {
+                parentElement.children.push(e);
+            });
+        }
+    }
+    getNodeIndex(id, level, data) {
+        if (level) {
+            return data.findIndex((x) => {
+                return x.id === id && x.level === level;
+            });
+        }
+        return data.findIndex((x) => {
+            return x.id === id;
+        });
+    }
+    getChildNode(rootId, data) {
+        const childArray = data.filter((x) => {
+            return x.rootId === rootId;
+        });
+        const child = { id: childArray[0].rootId, name: childArray[0].subName, children: [] };
+        childArray.forEach((item) => {
+            child.children.push({ id: item.childId, name: item.childName, parentId: rootId, expandable: false });
+        });
+        return child;
+    }
+    findChildNode(id, data) {
+        // eslint-disable-next-line no-restricted-syntax
+        for (const currentFather of data) {
+            if (currentFather.id === id) {
+                return currentFather;
+            }
+            if (currentFather.children) {
+                const currentChild = currentFather.children.find((x) => {
+                    return x.id === id;
+                });
+                if (currentChild) {
+                    return currentChild;
+                }
+                // eslint-disable-next-line no-restricted-syntax
+                for (const currentChild1 of currentFather.children) {
+                    if (id !== currentChild1.id) {
+                        const result = this.findChildNode(id, currentFather.children);
+                        if (result !== false) {
+                            return result;
+                        }
+                    }
+                }
+            }
+        }
+        return false;
+    }
+    refreshTreeData() {
+        const data = this.dataSource.data;
+        this.dataSource.data = [];
+        this.dataSource.data = data;
+    }
+    getNodeIcon(node) {
+        if (this.openIcon && this.closeIcon) {
+            return this.treeControl.isExpanded(node) ? this.openIcon : this.closeIcon;
+        }
+        switch (this.moduleId) {
+            case DataType$2.document: {
+                let nodeData = this.treeData.filter(x => { return x.id === node.id; });
+                if (nodeData.length > 0) {
+                    switch (nodeData[0].levelType) {
+                        case DocumentNodeType$2.DepartmentFolder:
+                            return this.treeControl.isExpanded(node) ? 'department_folder_outlined' : 'department_folder';
+                        case DocumentNodeType$2.RegionalFolder:
+                            return this.treeControl.isExpanded(node) ? 'regional_folder_outlined' : 'regional_folder';
+                        case DocumentNodeType$2.TopFolder:
+                            return this.treeControl.isExpanded(node) ? 'enterprise_folder_outlined' : 'enterprise_folder';
+                        case DocumentNodeType$2.Folder:
+                            return this.treeControl.isExpanded(node) ? 'local_folder_outlined' : 'local_folder';
+                        default:
+                            return this.treeControl.isExpanded(node) ? 'folder_outlined' : 'folder';
+                    }
+                }
+                return this.treeControl.isExpanded(node) ? 'folder_outlined' : 'folder';
+            }
+            case DataType$2.process:
+                return this.treeControl.isExpanded(node) ? 'process_area_outlined' : 'process_area';
+            default:
+                return this.treeControl.isExpanded(node) ? 'keyboard_up' : 'keyboard_down';
+        }
+    }
+    getItemIcon(node) {
+        switch (this.moduleId) {
+            case DataType$2.document:
+                const parent = this.treeData.filter(x => { return x.id === node.parentId; });
+                if (parent.length > 0) {
+                    switch (parent[0].levelType) {
+                        case DocumentNodeType$2.DepartmentFolder:
+                            return 'document_department';
+                        case DocumentNodeType$2.RegionalFolder:
+                            return 'document_regional';
+                        case DocumentNodeType$2.TopFolder:
+                            return 'document_enterprise';
+                        case DocumentNodeType$2.Folder:
+                            return 'document_local';
+                        default:
+                            return 'document';
+                    }
+                }
+                return 'document';
+            case DataType$2.process:
+                return 'process';
+            case DataType$2.checklist:
+                return 'checklist';
+            case DataType$2.deviation:
+                return 'deviation';
+            case DataType$2.risk:
+                return 'risk';
+            default:
+                return 'document';
+        }
+    }
+    getNodeId(node) {
+        return `_${node.parentId ? node.parentId : ''}_${node.id}_${node.level}`;
+    }
+    getNodeByIdAndParentId(nodeId, parentId) {
+        return this.treeControl.dataNodes.find(x => {
+            return x.id === nodeId && x.parentId === parentId;
+        });
+    }
+    expandNode(node) {
+        this.treeControl.expand(node);
+    }
+}
+NewTreeComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'qms-tree-new',
+                template: "<mat-tree\r\n  [dataSource]=\"dataSource\"\r\n  [treeControl]=\"treeControl\"\r\n  class=\"tree__container\"\r\n>\r\n  <mat-tree-node\r\n    class=\"tree-branch\"\r\n    *matTreeNodeDef=\"let node\"\r\n    matTreeNodeToggle\r\n    matTreeNodePadding\r\n  >\r\n    <!-- form thu 1 - child -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    >\r\n    </mat-checkbox>\r\n\r\n    <!-- form thu 2 -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"ml-10 checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <div\r\n      class=\"expand-node\"\r\n      *ngIf=\"node.name && !onlyFolder\"\r\n      [class.bgSelected]=\"treeConfig.selectOne && idCheckIcon == node.id\"\r\n      (click)=\"selectNode(node)\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <div class=\"expand-node__text\">\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.name && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n        >\r\n          {{ itemIcon }}\r\n        </mat-icon>\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.svg && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"itemIconSvg\"\r\n        >\r\n        </mat-icon>\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.path && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon\"\r\n          [src]=\"itemIconPath\"\r\n        />\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.base64 && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon image-base64\"\r\n          [src]=\"getImagePath()\"\r\n        />\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.none && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getItemIcon(node)\"\r\n        ></mat-icon>\r\n        <span class=\"text-node\">{{ node.name }}</span>\r\n      </div>\r\n      <mat-icon\r\n        class=\"icon-check\"\r\n        *ngIf=\"treeConfig.selectOne && idCheckIcon == node.id\"\r\n        >done</mat-icon\r\n      >\r\n    </div>\r\n  </mat-tree-node>\r\n\r\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n    <!-- form thu 1 - parent -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild\"\r\n      [checked]=\"descendantsAllSelected(node)\"\r\n      [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <button\r\n      class=\"button-boder\"\r\n      mat-icon-button\r\n      matTreeNodeToggle\r\n      [disableRipple]=\"!node.hasChild\"\r\n      [attr.aria-label]=\"'toggle ' + node.filename\"\r\n      *ngIf=\"node.name\"\r\n      (click)=\"onExpandNode(node, treeControl.isExpanded(node))\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"openIcon && closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngStyle]=\"{\r\n          color: treeControl.isExpanded(node) ? openIconColor : closeIconColor\r\n        }\"\r\n        >{{ getNodeIcon(node) }}</mat-icon\r\n      >\r\n      <mat-icon\r\n        *ngIf=\"!openIcon || !closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngClass]=\"{\r\n          'open-icon': treeControl.isExpanded(node),\r\n          'not-department-icon': moduleId !== dataType.document\r\n        }\"\r\n        [svgIcon]=\"getNodeIcon(node)\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <span\r\n      *ngIf=\"expandOnTitleClick\"\r\n      matTreeNodeToggle\r\n      class=\"text-node-parent\"\r\n      style=\"cursor: pointer\"\r\n      (click)=\"onExpandNode(node, treeControl.isExpanded(node))\"\r\n      [ngStyle]=\"{\r\n        color: treeControl.isExpanded(node) ? openIconColor : '#000000'\r\n      }\"\r\n    >\r\n      <span>{{ node.name }}</span>\r\n      <mat-icon\r\n        class=\"icon-check\"\r\n        *ngIf=\"treeConfig.selectOne && idCheckIcon == node.id\"\r\n        >done</mat-icon\r\n      >\r\n    </span>\r\n    <span\r\n      *ngIf=\"!expandOnTitleClick\"\r\n      class=\"text-node-parent\"\r\n      (click)=\"selectFolder(node)\"\r\n      style=\"cursor: pointer\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <span>{{ node.name }}</span>\r\n      <mat-icon\r\n        class=\"icon-check\"\r\n        *ngIf=\"treeConfig.selectOne && idCheckIcon == node.id\"\r\n        >done</mat-icon\r\n      >\r\n    </span>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n",
+                encapsulation: ViewEncapsulation.None,
+                styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.tree__container{font-family:Open Sans;font-style:normal;font-weight:400;font-size:.875rem;line-height:19px;color:#323232}.tree__container .mat-tree-node{color:#000;min-height:0}.tree__container .mat-tree-node .mat-checkbox.qms-group-options{padding:0}.tree__container .mat-tree-node .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.tree__container .button{margin-left:6px}.tree__container .button:focus,.tree__container .button:hover{background-color:#009ef2;border-radius:2px;width:auto}.tree__container .button-boder:focus,.tree__container .button:focus{outline:0}.tree__container .button-folder-boder:focus{outline:0}.tree__container .button-folder-boder:focus,.tree__container .button-folder-boder:hover{background-color:#009ef2;border-radius:2px;width:auto}.tree__container .expand-node{margin-left:8px;min-height:32px;justify-content:space-between;width:100%}.tree__container .expand-node,.tree__container .expand-node .expand-node__text{display:flex;align-items:center}.tree__container .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.tree__container .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.tree__container .expand-node.bgSelected .icon-check{color:#1954a9}.tree__container .text-node-parent{width:100%;display:flex;align-items:center;justify-content:space-between;margin-left:10px;cursor:pointer}.tree__container .text-node-parent.active-item{color:#1954a9!important}.tree__container .text-node-parent.bgSelected .icon-check{color:#1954a9}.tree__container .mr-11{margin-right:11px}.tree__container .ml-10{margin-left:10px}.tree__container .tree-branch:hover{background-color:#e5eefb}.tree__container .image-base64{width:20px;height:20px}.tree__container .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}::ng-deep .mat-tree .mat-checkbox.qms-group-options{padding:0}::ng-deep .mat-tree .mat-checkbox.qms-group-options.mat-checkbox-checked{background-color:transparent}::ng-deep .mat-tree .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:0}svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.open-icon.not-department-icon svg path,.open-icon svg path:first-child{fill:#1954a9}"]
+            },] }
+];
+NewTreeComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: DomSanitizer },
+    { type: MatIconRegistry },
+    { type: QMSIconRegistryService }
+];
+NewTreeComponent.propDecorators = {
+    treeData: [{ type: Input }],
+    treeConfig: [{ type: Input }],
+    selectedData: [{ type: Input }],
+    selectedRiskData: [{ type: Input }],
+    disabledList: [{ type: Input }],
+    expandOnTitleClick: [{ type: Input }],
+    expandToChildNode: [{ type: Input }],
+    parentNodeOnClick: [{ type: Input }],
+    selectNodeEvent: [{ type: Output }],
+    selectFolderEvent: [{ type: Output }],
+    checkBoxEvent: [{ type: Output }],
+    childCheckedEvent: [{ type: Output }],
+    nodeExpandEvent: [{ type: Output }],
+    getChildNodeSelectOne: [{ type: Output }],
+    treeControlNodes: [{ type: Output }]
+};
+
+class QMSNewTreeModule {
+}
+QMSNewTreeModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    NewTreeComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    MatTreeModule,
+                    MatFormFieldModule,
+                    MatIconModule,
+                    MatButtonModule,
+                    MatCheckboxModule,
+                    MatAutocompleteModule,
+                    ReactiveFormsModule,
+                    ScrollingModule,
+                    MatCardModule,
+                    MatSidenavModule,
+                    MatListModule,
+                    SharedMaterialModule,
+                    QMSListModule,
+                    QmsAngularModule,
+                    QMSBreadcrumbModule,
+                    QMSAppIconModule
+                ],
+                exports: [
+                    NewTreeComponent,
+                ]
+            },] }
+];
+
+class SelectProcessDocumentPopupData {
+    constructor() {
+        this.moduleId = 0;
+        this.moduleName = '';
+        this.treeData1 = [];
+        this.treeData2 = [];
+        this.selectedNode = [];
+        this.disabledList = [];
+        this.disabledList2 = [];
+        this.splitView = false;
+    }
+}
+
+class QMSProcessDocumentItem {
+}
+
+class QMSSelectProcessDocumentGlobalService {
+    constructor() {
+        this.searchRelated = new BehaviorSubject([]);
+        this.splitViewValue = new BehaviorSubject([]);
+        this.getProcessAreaChildren = new BehaviorSubject([]);
+        this.getFolderChildren = new BehaviorSubject([]);
+    }
+    setSearchRelated(result) {
+        this.searchRelated.next(result);
+    }
+    setSplitviewValue(result) {
+        this.splitViewValue.next(result);
+    }
+    setProcessAreaChildren(result) {
+        this.getProcessAreaChildren.next(result);
+    }
+    setFolderChildren(result) {
+        this.getFolderChildren.next(result);
+    }
+}
+QMSSelectProcessDocumentGlobalService.ɵprov = i0.ɵɵdefineInjectable({ factory: function QMSSelectProcessDocumentGlobalService_Factory() { return new QMSSelectProcessDocumentGlobalService(); }, token: QMSSelectProcessDocumentGlobalService, providedIn: "root" });
+QMSSelectProcessDocumentGlobalService.decorators = [
+    { type: Injectable, args: [{ providedIn: 'root' },] }
+];
+QMSSelectProcessDocumentGlobalService.ctorParameters = () => [];
+
+class SelectProcessDocumentPopupComponent {
+    constructor(cdRef, translate, dialogRef, globalService, iconRegistry, sanitizer, appIconService, elem, data) {
+        this.cdRef = cdRef;
+        this.translate = translate;
+        this.dialogRef = dialogRef;
+        this.globalService = globalService;
+        this.iconRegistry = iconRegistry;
+        this.sanitizer = sanitizer;
+        this.appIconService = appIconService;
+        this.elem = elem;
+        this.data = data;
+        this.ngUnsubscribe = new Subject();
+        this.moduleId = 0;
+        this.moduleName = '';
+        this.treeData1 = [];
+        this.treeData2 = [];
+        this.checkedNodeList = [];
+        this.selectedNode = [];
+        this.selectedData = [];
+        this.selectedData2 = [];
+        this.commonCheckedList = [];
+        this.documentCheckedList = [];
+        this.singleProcessList = [];
+        this.singleDocumentList = [];
+        this.module = ModuleType$1;
+        this.dataType = DataType$1;
+        this.itemType = 0;
+        this.selectedRiskData = [];
+        this.disabledList = [];
+        this.disabledList2 = [];
+        this.isDocumentExpanded = true;
+        this.isCommonExpanded = true;
+        this.singleSelectedNode = false;
+        this.searchOrder = [];
+        this.myControl = new FormControl();
+        this.filteredOptions = [];
+        this.isInputValue = false;
+        this.itemInSplitview = [];
+        this.selectedFolder = null;
+        this.splitViewTitle = null;
+        this.listChildrenSelectOne = [];
+        this.onSearch = new EventEmitter();
+        this.onSelectFolderItem = new EventEmitter();
+        this.onExpandProcessArea = new EventEmitter();
+        this.onExpandFolder = new EventEmitter();
+        this.parentNodeSelected = new TreeFlatNode();
+        this.moduleId = data.moduleId;
+        this.moduleName = data.moduleName;
+        this.treeData1 = data.treeData1;
+        this.treeData2 = data.treeData2;
+        this.treeConfig1 = data.treeConfig1;
+        this.treeConfig2 = data.treeConfig2;
+        this.selectedRiskData = (data === null || data === void 0 ? void 0 : data.selectedNode) || [];
+        this.singleSelectedNode = data.treeConfig1.singleSelectedNode;
+        this.disabledList = data.disabledList || [];
+        this.disabledList2 = data.disabledList2 || [];
+        this.splitView = data.splitView;
+        this.isSelectOne = data.isSelectOne;
+        this.canOnlySelectItem = data.canOnlySelectItem;
+        appIconService.registerProcessIcon(iconRegistry, sanitizer);
+        appIconService.registerProcessAreaIcon(iconRegistry, sanitizer);
+        appIconService.registerDocumentIcon(iconRegistry, sanitizer);
+        appIconService.registerFolderIcon(iconRegistry, sanitizer);
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.globalService.setSearchRelated([]);
+        this.selectedFolder = null;
+        this.globalService.setSplitviewValue([]);
+    }
+    onMessage(event) {
+        if (event.data === RelatedConst.HIDE_SEARCH_RESULT) {
+            // this.autoComplete.closePanel();
+        }
+    }
+    ngOnInit() {
+        this.translate.getLanguageSubject$.pipe().subscribe((res) => {
+            if (res) {
+                this.LANG = this.translate.getObjectLang(res);
+            }
+        });
+        this.globalService.searchRelated.pipe(takeUntil(this.ngUnsubscribe)).subscribe((res) => {
+            if (res && res.length) {
+                this.filteredOptions = res;
+            }
+        });
+        this.globalService.splitViewValue.pipe(takeUntil(this.ngUnsubscribe)).subscribe((res) => {
+            this.itemInSplitview = res;
+            if (res.length) {
+                let listNodeProcess = [];
+                let listNodeDocs = [];
+                res.forEach(item => {
+                    let newNodeProcess = new NewTreeModel();
+                    newNodeProcess.id = item.id;
+                    newNodeProcess.name = item.itemName;
+                    newNodeProcess.displayId = +item.itemNumberId;
+                    newNodeProcess.parentId = item.parentId;
+                    newNodeProcess.statusId = item.status;
+                    if (item.itemType === DataType$1.process) {
+                        listNodeProcess.push(newNodeProcess);
+                    }
+                    else {
+                        let newNodeDocs = new NewTreeModel();
+                        newNodeDocs.statusName = item.statusName;
+                        listNodeDocs.push(newNodeDocs);
+                    }
+                });
+                if (this.checkedNodeList.length) {
+                    this.selectedData = [];
+                    this.selectedData2 = [];
+                    let selectProcess = [];
+                    let selectDocument = [];
+                    this.checkedNodeList.forEach(x => {
+                        const newNode = {
+                            disabled: false,
+                            expandable: (x.itemType == DataType$1.area || x.itemType == DataType$1.folder) ? true : false,
+                            hasChild: (x.itemType == DataType$1.area || x.itemType == DataType$1.folder) ? true : false,
+                            id: x.id,
+                            level: 0,
+                            levelType: undefined,
+                            name: x.itemName,
+                            parentId: x.parentId
+                        };
+                        if (x.itemType === DataType$1.area || x.itemType === DataType$1.process) {
+                            this.treeData1.forEach(item => {
+                                if (item.id && x.id === item.id) {
+                                    selectProcess.push(newNode);
+                                }
+                            });
+                        }
+                        else {
+                            this.treeData2.forEach(item => {
+                                if (item.id && x.id === item.id) {
+                                    selectDocument.push(newNode);
+                                }
+                            });
+                        }
+                    });
+                    this.selectedData = [...this.selectedData, ...selectProcess];
+                    this.selectedData2 = [...this.selectedData2, ...selectDocument];
+                }
+            }
+        });
+        this.myControl.valueChanges.pipe(debounceTime(1000)).subscribe((val) => {
+            this.isInputValue = true;
+            this.onSearchRelated(val);
+        });
+        this.globalService.getProcessAreaChildren.pipe(takeUntil(this.ngUnsubscribe)).subscribe((res) => {
+            if (res.length > 0 && this.dataTrees) {
+                let notShownChildren = [];
+                res.forEach(x => {
+                    const index = this.treeData1.findIndex(item => item.id === x.id && item.parentId === x.parentId && x.expandable == item.expandable);
+                    if (index < 0) {
+                        notShownChildren.push(x);
+                    }
+                });
+                this.treeData1 = [...this.treeData1, ...notShownChildren];
+            }
+        });
+        this.globalService.getFolderChildren.pipe(takeUntil(this.ngUnsubscribe)).subscribe((res) => {
+            if (res.length > 0 && this.dataTrees) {
+                let notShownChildren = [];
+                res.forEach(x => {
+                    const index = this.treeData2.findIndex(item => item.id === x.id && item.parentId === x.parentId && x.expandable == item.expandable);
+                    if (index < 0) {
+                        notShownChildren.push(x);
+                    }
+                });
+                this.treeData2 = [...this.treeData2, ...notShownChildren];
+            }
+        });
+        this.itemType = this.dataType.process;
+        this.searchOrder = this.getSearchOrder();
+    }
+    ngAfterViewChecked() {
+    }
+    removeCheckedNodeList(item) {
+        this.selectedData = [];
+        this.selectedData2 = [];
+        this.checkedNodeList = this.checkedNodeList.filter(x => (x.id.toLowerCase() !== item.id.toLowerCase() || x.parentId.toLowerCase() !== item.parentId.toLowerCase()));
+        const tempArr = [];
+        const tempArrDocument = [];
+        const newSelectProcessList = [];
+        const newSelectDocumentList = [];
+        this.commonCheckedList.forEach(element => {
+            this.checkedNodeList.forEach(x => {
+                if (element.id.toLowerCase() === x.id.toLowerCase() && element.parentId.toLowerCase() === x.parentId.toLowerCase()) {
+                    tempArr.push(element);
+                }
+            });
+        });
+        this.singleProcessList.forEach(element => {
+            this.checkedNodeList.forEach(x => {
+                if (element.id.toLowerCase() === x.id.toLowerCase() && element.parentId.toLowerCase() === x.parentId.toLowerCase()) {
+                    newSelectProcessList.push(element);
+                }
+            });
+        });
+        this.singleProcessList = newSelectProcessList;
+        if (tempArr.length > 0) {
+            this.selectedData = [...tempArr];
+        }
+        this.documentCheckedList.forEach(element => {
+            this.checkedNodeList.forEach(x => {
+                if (element.id.toLowerCase() === x.id.toLowerCase() && element.parentId.toLowerCase() === x.parentId.toLowerCase()) {
+                    tempArrDocument.push(element);
+                }
+            });
+        });
+        this.singleDocumentList.forEach(element => {
+            this.checkedNodeList.forEach(x => {
+                if (element.id.toLowerCase() === x.id.toLowerCase() && element.parentId.toLowerCase() === x.parentId.toLowerCase()) {
+                    newSelectDocumentList.push(element);
+                }
+            });
+        });
+        this.singleDocumentList = newSelectDocumentList;
+        if (tempArrDocument.length > 0) {
+            this.selectedData2 = [...tempArrDocument];
+        }
+    }
+    setResultHeight(arr) {
+        let maxHeight = 484;
+        const popup_content = document.getElementsByClassName('qmslib_related_popup_content')[0];
+        const line__divider = document.getElementsByClassName('line__divider')[0];
+        if (popup_content && line__divider) {
+            maxHeight = this.getOffsetHeight(popup_content, true) + this.getOffsetHeight(line__divider, true) * 2;
+        }
+        const contentResult = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0];
+        const viewreports = document.getElementsByClassName('related-viewport')[0];
+        if (viewreports) {
+            if (contentResult.offsetHeight <= maxHeight) {
+                viewreports.style.height = `${contentResult.offsetHeight}px`;
+            }
+            else {
+                viewreports.style.height = `${maxHeight}px`;
+            }
+        }
+    }
+    onSearchRelated(_val) {
+        this.filteredOptions = [];
+        if (typeof (_val) === 'object') {
+            this.myControl.setValue('');
+            this.isInputValue = false;
+        }
+        else if (typeof (_val) === 'string') {
+            if (!!_val) {
+                this.onSearch.emit(_val);
+            }
+        }
+    }
+    getModuleFilteredOptions(moduleId) {
+        if (this.listChildrenSelectOne.length) {
+            for (let index = 0; index < this.listChildrenSelectOne.length; index++) {
+                const firstEl = this.listChildrenSelectOne[index];
+                for (let j = 0; j < this.filteredOptions.length; j++) {
+                    const secondEl = this.filteredOptions[j];
+                    if (firstEl.id === secondEl.id) {
+                        this.filteredOptions.splice(j, 1);
+                    }
+                }
+            }
+        }
+        return this.filteredOptions.filter(x => x.itemType === moduleId);
+    }
+    showSearchResult() {
+        // this.autoComplete.openPanel();
+    }
+    displayRelated(related) {
+        return related ? related.itemName : undefined;
+    }
+    selectRelated(item) {
+        let index = -1;
+        this.selectedNode = [];
+        if (this.treeConfig1.showCheckBox) {
+            index = this.checkedNodeList.findIndex(x => {
+                return x.id === item.id && x.parentId === item.parentId;
+            });
+        }
+        if (index < 0) {
+            let position = -1;
+            let node;
+            let typeId;
+            if (item.itemType === this.dataType.document) {
+                // document  
+                const isExistInDisabled = this.disabledList2.findIndex(x => {
+                    return x.id && x.id.toLowerCase() === item.id.toLowerCase();
+                });
+                if (isExistInDisabled >= 0) {
+                    return;
+                }
+                position = this.treeData2.findIndex(x => {
+                    return x.id === item.id && x.parentId === item.parentId && !x.expandable;
+                });
+                if (position >= 0) {
+                    this.addToChecklistNodeAndSelectedData(item);
+                    node = this.treeData2[position];
+                    typeId = this.dataType.document;
+                    const treeNode = {
+                        id: node.childId,
+                        name: node.childName,
+                        children: [],
+                        parentId: node.rootId,
+                        expandable: false
+                    };
+                    this.dataTrees.toArray()[1].todoItemSelectionProcessDocument([treeNode]);
+                }
+                else {
+                    this.addNodeToTree(item);
+                    this.addToChecklistNodeAndSelectedData(item);
+                    setTimeout(() => {
+                        const treeNode = {
+                            id: item.id,
+                            name: item.itemName,
+                            children: [],
+                            parentId: item.parentId,
+                            expandable: false
+                        };
+                        this.dataTrees.toArray()[1].todoItemSelectionProcessDocument([treeNode]);
+                    }, 500);
+                }
+            }
+            else if (item.itemType === this.dataType.folder) {
+                position = this.treeData2.findIndex(x => {
+                    return x.id.toLowerCase() === item.id.toLowerCase() && (!item.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase());
+                });
+                typeId = item.itemType;
+                if (position >= 0) {
+                    node = this.treeData2[position];
+                    const treeNode = {
+                        id: node.id,
+                        name: node.name,
+                        children: [],
+                        parentId: node.parentId,
+                        expandable: true,
+                    };
+                    this.dataTrees.toArray()[1].todoFolderSelection([treeNode]);
+                }
+                else {
+                    this.addNodeToTree(item);
+                    this.addToChecklistNodeAndSelectedData(item);
+                }
+                return;
+            }
+            else if (item.itemType === this.dataType.area) {
+                position = this.treeData1.findIndex(x => {
+                    return x.id.toLowerCase() === item.id.toLowerCase() && (!item.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase()) && x.expandable;
+                });
+                typeId = item.itemType;
+                if (position >= 0) {
+                    node = this.treeData1[position];
+                    const treeNode = {
+                        id: node.id,
+                        name: node.name,
+                        children: [],
+                        parentId: node.parentId,
+                        expandable: true
+                    };
+                    this.dataTrees.toArray()[0].todoFolderSelection([treeNode]);
+                }
+                else {
+                    this.addNodeToTree(item);
+                    this.addToChecklistNodeAndSelectedData(item);
+                }
+                return;
+            }
+            else {
+                const isExistInDisabled = this.disabledList.findIndex(x => {
+                    return x.id.toLowerCase() === item.id.toLowerCase() && (!item.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase());
+                });
+                if (isExistInDisabled >= 0) {
+                    return;
+                }
+                position = this.treeData1.findIndex(x => {
+                    return x.id.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === item.parentId.toLowerCase() && !x.expandable;
+                });
+                if (position >= 0) {
+                    node = this.treeData1[position];
+                    typeId = this.itemType;
+                    const treeNode = {
+                        id: node.childId,
+                        name: node.childName,
+                        children: [],
+                        parentId: node.rootId,
+                        expandable: false
+                    };
+                    this.addToChecklistNodeAndSelectedData(item);
+                    this.dataTrees.toArray()[0].todoItemSelectionProcessDocument([treeNode]);
+                }
+                else {
+                    this.addNodeToTree(item);
+                    this.addToChecklistNodeAndSelectedData(item);
+                    setTimeout(() => {
+                        const treeNode = {
+                            id: item.id,
+                            name: item.itemName,
+                            children: [],
+                            parentId: item.parentId,
+                            expandable: false
+                        };
+                        this.dataTrees.toArray()[0].todoItemSelectionProcessDocument([treeNode]);
+                    }, 500);
+                }
+            }
+        }
+    }
+    addNodeToTree(item) {
+        let newNodeDocs = new NewTreeModel();
+        newNodeDocs.id = item.id;
+        newNodeDocs.name = item.itemName;
+        newNodeDocs.parentId = item.parentId;
+        newNodeDocs.statusId = item === null || item === void 0 ? void 0 : item['itemStatus'];
+        newNodeDocs.statusName = item === null || item === void 0 ? void 0 : item['statusName'];
+        newNodeDocs.displayId = +item.itemNumberId;
+        newNodeDocs.expandable = item.itemType == DataType$1.folder || item.itemType == DataType$1.area ? true : false;
+        if (item.itemType == DataType$1.folder || item.itemType == DataType$1.document) {
+            if (this.treeData2.findIndex(x => x.id.toLowerCase() === newNodeDocs.id.toLowerCase() &&
+                (!newNodeDocs.parentId || x.parentId.toLowerCase() === newNodeDocs.parentId.toLowerCase()) && x.expandable === newNodeDocs.expandable) >= 0) {
+                this.treeData2 = [...this.treeData2, newNodeDocs];
+            }
+        }
+        else {
+            if (this.treeData1.findIndex(x => x.id.toLowerCase() === newNodeDocs.id.toLowerCase() &&
+                (!newNodeDocs.parentId || x.parentId.toLowerCase() === newNodeDocs.parentId.toLowerCase()) && x.expandable === newNodeDocs.expandable) >= 0) {
+                this.treeData1 = [...this.treeData1, newNodeDocs];
+            }
+        }
+    }
+    addToChecklistNode(item) {
+        let newNodeDocs = new NewTreeModel();
+        newNodeDocs.id = item.id;
+        newNodeDocs.name = item.itemName;
+        newNodeDocs.parentId = item.parentId;
+        newNodeDocs.statusId = item === null || item === void 0 ? void 0 : item['itemStatus'];
+        newNodeDocs.statusName = item === null || item === void 0 ? void 0 : item['statusName'];
+        newNodeDocs.displayId = +item.itemNumberId;
+        newNodeDocs.expandable = item.itemType == DataType$1.folder || item.itemType == DataType$1.area ? true : false;
+        if (this.isSelectOne) {
+            this.checkedNodeList = [];
+            this.documentCheckedList = [];
+            this.commonCheckedList = [];
+        }
+        const index = this.checkedNodeList.findIndex(x => x.id.toLowerCase() === newNodeDocs.id.toLowerCase() &&
+            (!newNodeDocs.parentId || x.parentId.toLowerCase() === newNodeDocs.parentId.toLowerCase()) && x.expandable === newNodeDocs.expandable);
+        if (index < 0) {
+            if (item.itemType == DataType$1.folder || item.itemType == DataType$1.document) {
+                this.documentCheckedList.push({
+                    id: newNodeDocs.id,
+                    name: newNodeDocs.name,
+                    itemType: item.itemType,
+                    parentId: newNodeDocs.parentId,
+                    levelType: newNodeDocs.levelType,
+                    level: 0,
+                    disabled: false,
+                    expandable: newNodeDocs.expandable,
+                    hasChild: newNodeDocs.expandable
+                });
+            }
+            else {
+                this.commonCheckedList.push({
+                    id: newNodeDocs.id,
+                    name: newNodeDocs.name,
+                    itemType: item.itemType,
+                    parentId: newNodeDocs.parentId,
+                    levelType: newNodeDocs.levelType,
+                    level: 0,
+                    disabled: false,
+                    expandable: newNodeDocs.expandable,
+                    hasChild: newNodeDocs.expandable
+                });
+            }
+            this.checkedNodeList.push({
+                moduleId: this.moduleId,
+                id: item.id,
+                itemName: newNodeDocs.name,
+                itemType: item.itemType,
+                parentId: newNodeDocs.parentId,
+                parentName: item.parentName,
+                itemNumberId: item.itemNumberId,
+                levelType: item.levelType,
+                expandable: newNodeDocs.expandable,
+                statusName: item.statusName,
+                status: item.status,
+                displayId: Number.parseFloat(item.itemNumberId)
+            });
+        }
+    }
+    addSelectedData(item) {
+        const selectProcess = [];
+        const selectDocument = [];
+        this.selectedData = [];
+        this.selectedData2 = [];
+        if (this.checkedNodeList.length) {
+            this.checkedNodeList.forEach(x => {
+                const node = {
+                    disabled: false,
+                    expandable: x.itemType == DataType$1.area || x.itemType == DataType$1.folder ? true : false,
+                    hasChild: x.itemType == DataType$1.area || x.itemType == DataType$1.folder ? true : false,
+                    id: x.id,
+                    level: 0,
+                    levelType: undefined,
+                    name: x.itemName,
+                    parentId: x.parentId
+                };
+                if (x.itemType === DataType$1.area || x.itemType === DataType$1.process) {
+                    this.treeData1.forEach(item => {
+                        if (item.id && x.id.toLowerCase() === item.id.toLowerCase() &&
+                            (!x.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase())) {
+                            selectProcess.push(node);
+                        }
+                    });
+                }
+                else {
+                    this.treeData2.forEach(item => {
+                        if (item.id && x.id.toLowerCase() === item.id.toLowerCase() &&
+                            (!x.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase())) {
+                            selectDocument.push(node);
+                        }
+                    });
+                }
+            });
+        }
+        if (!this.isSelectOne) {
+            this.selectedData = [...this.selectedData, ...selectProcess];
+            this.selectedData2 = [...this.selectedData2, ...selectDocument];
+        }
+        if (item.itemType === DataType$1.folder || item.itemType === DataType$1.document) {
+            if (this.selectedData2.findIndex(x => x.id.toLowerCase() === item.id.toLowerCase() &&
+                (!item.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase()) && x.expandable === item.expandable) < 0) {
+                this.selectedData2 = [...this.selectedData2, item];
+            }
+        }
+        else {
+            if (this.selectedData.findIndex(x => x.id.toLowerCase() === item.id.toLowerCase() &&
+                (!item.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase()) && x.expandable === item.expandable) < 0) {
+                this.selectedData = [...this.selectedData, item];
+            }
+        }
+    }
+    addToChecklistNodeAndSelectedData(item) {
+        this.addToChecklistNode(item);
+        this.addSelectedData({
+            id: item.id,
+            name: item.itemName,
+            expandable: item.itemType == DataType$1.area || item.itemType == DataType$1.folder,
+            level: 0,
+            disabled: false,
+            hasChild: item.itemType == DataType$1.area || item.itemType == DataType$1.folder,
+        });
+    }
+    setTypeProcess(expand) {
+        return expand ? this.dataType.area : this.dataType.process;
+    }
+    onCloseClick() {
+        this.selectedFolder = null;
+        this.itemInSplitview = [];
+        this.dialogRef.close();
+    }
+    ;
+    onAddClick() {
+        // if (this.treeConfig1.showCheckBox) {
+        this.selectedFolder = null;
+        this.itemInSplitview = [];
+        this.dialogRef.close(this.checkedNodeList);
+    }
+    getStatusName(id) {
+        let statusName = '';
+        this.treeData2.forEach(x => {
+            if (id.toString() === x.id) {
+                statusName = x.statusName;
+            }
+        });
+        return statusName;
+    }
+    selectTreeControlNodeDocument(treeNodes) {
+        this.treeControlNodeDocument = null;
+        this.treeControlNodeDocument = treeNodes;
+        this.treeControlNodeDocument.dataNodes = this.treeControlNodeDocument.dataNodes.filter(x => x.name !== null && x.name !== '');
+    }
+    selectTreeControlNodeProcess(treeNodes) {
+        this.treeControlNodeProcess = null;
+        this.treeControlNodeProcess = treeNodes;
+        this.treeControlNodeProcess.dataNodes = this.treeControlNodeProcess.dataNodes.filter(x => x.name !== null && x.name !== '');
+    }
+    getStatusDocs(id) {
+        return this.treeData2.filter(x => x.id === id)[0].statusId;
+    }
+    getStatusProcess(id) {
+        return this.treeData1.filter(x => x.id === id)[0].statusId;
+    }
+    getOffsetHeight(element, includeMargin) {
+        let elmHeight = 0, elmMargin = 0;
+        elmHeight = element.offsetHeight;
+        if (includeMargin) {
+            const style = window.getComputedStyle(element);
+            elmMargin = parseFloat(style.marginTop.replace('px', '')) + parseFloat(style.marginBottom.replace('px', ''));
+        }
+        return (elmHeight + elmMargin);
+    }
+    getItemChipName(item) {
+        return item.itemName;
+    }
+    isEllipsisActive(e) {
+        return e ? (e.clientWidth < e.scrollWidth) : false;
+    }
+    getNodeIcon(item) {
+        switch (item.itemType) {
+            case DataType$1.folder: {
+                switch (item.levelType) {
+                    case DocumentNodeType$1.DepartmentFolder:
+                        return 'department_folder_outlined';
+                    case DocumentNodeType$1.RegionalFolder:
+                        return 'regional_folder_outlined';
+                    case DocumentNodeType$1.TopFolder:
+                        return 'enterprise_folder_outlined';
+                    case DocumentNodeType$1.Folder:
+                        return 'local_folder_outlined';
+                    default:
+                        return 'folder_outlined';
+                }
+            }
+            case DataType$1.document: {
+                switch (item.levelType) {
+                    case DocumentNodeType$1.DepartmentFolder:
+                        return 'document_department';
+                    case DocumentNodeType$1.RegionalFolder:
+                        return 'document_regional';
+                    case DocumentNodeType$1.TopFolder:
+                        return 'document_enterprise';
+                    case DocumentNodeType$1.Folder:
+                        return 'document_local';
+                    default:
+                        return 'document';
+                }
+            }
+            case DataType$1.area:
+                return 'process_area_outlined';
+            case DataType$1.process:
+                return 'process';
+            default:
+                return 'folder_outlined';
+        }
+    }
+    getSearchOrder() {
+        let searchTypes = Object.keys(this.dataType)
+            .map(key => ({ value: this.dataType[key], key: key }));
+        searchTypes = searchTypes.slice(searchTypes.length / 2);
+        return searchTypes;
+    }
+    getTitle(type) {
+        switch (type) {
+            case DataType$1.process:
+                return this.LANG.PROCESSES;
+            case DataType$1.area:
+                return this.LANG.PROCESS_AREA;
+            case DataType$1.document:
+                return this.LANG.DOCUMENTS;
+            case DataType$1.folder:
+                return this.LANG.FOLDER;
+        }
+    }
+    getItemId(item) {
+        if (item.itemType === this.dataType.process) {
+            return `${this.LANG.PROCESS_ID}: ${item.itemNumberId}; ${item.statusName}`;
+        }
+        else if (item.itemType === this.dataType.document) {
+            return `${this.LANG.DOCUMENT_ID}: ${item.itemNumberId}; ${item.statusName}`;
+        }
+        return null;
+    }
+    toggleSelectItem(node) {
+        const selectedNode = this.checkedNodeList.find(x => (x.id.toLowerCase() === node.id.toLowerCase() && x.parentId.toLowerCase() === node.parentId.toLowerCase()));
+        if (selectedNode) {
+            this.removeCheckedNodeList({
+                id: selectedNode.id,
+                itemName: node.itemName,
+                parentId: selectedNode.parentId,
+                expandable: false,
+                itemType: selectedNode.itemType,
+                moduleId: this.moduleId,
+                itemNumberId: selectedNode.itemNumberId
+            });
+        }
+        else {
+            this.selectRelated(node);
+        }
+    }
+    isNodeSelected(node) {
+        return this.checkedNodeList.filter(x => (x.id.toLowerCase() === node.id.toLowerCase() && x.parentId.toLowerCase() === node.parentId.toLowerCase())).length > 0;
+    }
+    getChildrenOfFolder(node, type) {
+        let item = new QMSProcessDocumentItem();
+        item.id = node.id;
+        item.itemType = type;
+        item.itemName = node.name;
+        item.levelType = node.levelType;
+        this.selectedFolder = node;
+        this.parentNodeSelected = new TreeFlatNode();
+        this.parentNodeSelected = Object.assign({}, node);
+        if (item.itemType == DataType$1.area)
+            this.onExpandProcessArea.emit(item);
+        else
+            this.onExpandFolder.emit(item);
+    }
+    canShowSearchOption(moduleId) {
+        return this.getModuleFilteredOptions(moduleId).length > 0;
+    }
+    selectNodeTreeEvent(node) {
+        if (!node.itemType) {
+            return;
+        }
+        const index = this.checkedNodeList.findIndex(x => x.id.toLowerCase() === node.id.toLowerCase()
+            && (!node.parentId || x.parentId.toLowerCase() === node.parentId.toLowerCase()) && x.itemType == node.itemType);
+        if (index >= 0) {
+            this.removeCheckedNodeList({
+                id: node.id,
+                itemName: node.name,
+                parentId: node.parentId,
+                expandable: false,
+                itemType: node.itemType,
+                moduleId: this.moduleId,
+                itemNumberId: node.id
+            });
+            return;
+        }
+        else {
+            let item;
+            let status = 0;
+            let statusName = '';
+            if (node.itemType == DataType$1.folder || node.itemType == DataType$1.document) {
+                item = this.treeData2.find(x => x.id.toLowerCase() === node.id.toLowerCase()
+                    && (!node.parentId || x.parentId.toLowerCase() === node.parentId.toLowerCase()) && x.expandable == node.expandable);
+            }
+            else {
+                item = this.treeData1.find(x => x.id.toLowerCase() === node.id.toLowerCase()
+                    && (!node.parentId || x.parentId.toLowerCase() === node.parentId.toLowerCase()) && x.expandable == node.expandable);
+            }
+            if (item) {
+                statusName = item.statusName;
+                status = item.statusId;
+            }
+            this.addToChecklistNode({
+                id: node.id,
+                itemName: node.name,
+                parentId: node.parentId,
+                itemType: node.itemType,
+                status: status,
+                statusName: statusName,
+                itemNumberId: item.displayId.toString(),
+                levelType: item.levelType
+            });
+            this.addSelectedData(node);
+        }
+    }
+    getChildNodeSelectOne(listChildren) {
+        this.listChildrenSelectOne = [];
+        this.listChildrenSelectOne = listChildren;
+    }
+    getItemOfFolder(node, type) {
+        if (this.splitView) {
+            const parentTexts = this.elem.nativeElement.querySelectorAll('.text-node-parent');
+            [].forEach.call(parentTexts, (el) => {
+                el.classList.remove('active-item');
+            });
+            const itemElement = document.querySelectorAll(`#_${node.parentId ? node.parentId : ''}_${node.id}_${node.level}`);
+            [].forEach.call(itemElement, (el) => {
+                el.classList.add('active-item');
+            });
+            if (type === this.dataType.folder) {
+                this.splitViewTitle = `${this.LANG.MESSAGE.DOCUMENTS_IN.toUpperCase()} "${node.name}"`;
+            }
+            else if (type === this.dataType.area) {
+                this.splitViewTitle = `${this.LANG.MESSAGE.PROCESSES_IN.toUpperCase()} "${node.name}"`;
+            }
+            let item = new QMSProcessDocumentItem();
+            item.id = node.id;
+            item.itemType = type;
+            item.itemName = node.name;
+            item.levelType = node.levelType;
+            this.selectedFolder = node;
+            this.parentNodeSelected = new TreeFlatNode();
+            this.parentNodeSelected = Object.assign({}, node);
+            this.onSelectFolderItem.emit(item);
+        }
+    }
+}
+SelectProcessDocumentPopupComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'qms-select-process-document',
+                template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n    <div id=\"qmslib_related_popup_header\">\r\n      <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n        <mat-icon mat-icon>close</mat-icon>\r\n      </span>\r\n      <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n        <span>{{ moduleName | uppercase }}</span>\r\n      </div>\r\n    </div>\r\n  \r\n    <div id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n      <input\r\n        type=\"text\"\r\n        placeholder=\"{{ LANG.SEARCH }}\"\r\n        matInput\r\n        [formControl]=\"myControl\"\r\n        [matAutocomplete]=\"auto\"\r\n      />\r\n      <mat-icon>search</mat-icon>\r\n    </div>\r\n  \r\n    <div class=\"line__divider\"></div>\r\n  \r\n    <mat-autocomplete\r\n      #auto=\"matAutocomplete\"\r\n      class=\"mat-autocomplete_related-viewport\"\r\n    >\r\n      <cdk-virtual-scroll-viewport\r\n        qms-scrollbar\r\n        itemSize=\"10\"\r\n        [class.related-viewport]=\"isInputValue\"\r\n      >\r\n        <ng-container *ngFor=\"let type of searchOrder\">\r\n          <div\r\n            class=\"search__module-result\"\r\n            *ngIf=\"canShowSearchOption(type.value)\"\r\n          >\r\n            <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n            <mat-option\r\n              class=\"search__option\"\r\n              *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n              [value]=\"option\"\r\n              (click)=\"selectRelated(option)\"\r\n            >\r\n              <qms-list-item type=\"image-square\">\r\n                <mat-icon\r\n                  leading-icon\r\n                  type=\"image-square\"\r\n                  [svgIcon]=\"getNodeIcon(option)\"\r\n                ></mat-icon>\r\n                <div qms-list-header>\r\n                  <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                    {{ option.itemName }}\r\n                  </div>\r\n                  <div\r\n                    class=\"caption\"\r\n                    *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n                  >\r\n                    <qms-breadcrumb\r\n                      class=\"breadcrumb-containe\"\r\n                      type=\"table\"\r\n                      numDisplayItem=\"1\"\r\n                      [nodes]=\"option.breadcumbs\"\r\n                    >\r\n                    </qms-breadcrumb>\r\n                  </div>\r\n                </div>\r\n                <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n                  <span class=\"material-icons-outlined search__description-icon\">\r\n                    local_offer\r\n                  </span>\r\n                  {{ getItemId(option) }}\r\n                </div>\r\n              </qms-list-item>\r\n            </mat-option>\r\n          </div>\r\n        </ng-container>\r\n      </cdk-virtual-scroll-viewport>\r\n    </mat-autocomplete>\r\n  \r\n    <div class=\"row\">\r\n      <div\r\n        class=\"qms-scrollbar qmslib_related_popup_content\"\r\n        [ngClass]=\"{\r\n          panel__content_item: checkedNodeList.length,\r\n          panel__content: !checkedNodeList.length,\r\n          'col-6': splitView,\r\n          'col-12': !splitView\r\n        }\"\r\n      >\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          id=\"qmslib_related_popup_common_001\"\r\n          [expanded]=\"isCommonExpanded\"\r\n          (opened)=\"isCommonExpanded = true\"\r\n          (closed)=\"isCommonExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n              {{ LANG.PROCESSES | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_common_002\">\r\n            <qms-tree-new\r\n              [treeData]=\"treeData1\"\r\n              [treeConfig]=\"treeConfig1\"\r\n              [selectedData]=\"selectedData\"\r\n              [selectedRiskData]=\"selectedRiskData\"\r\n              [disabledList]=\"disabledList\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              (selectFolderEvent)=\"getItemOfFolder($event, dataType.area)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n            ></qms-tree-new>\r\n          </div>\r\n        </mat-expansion-panel>\r\n  \r\n        <div\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          class=\"line__divider\"\r\n        ></div>\r\n  \r\n        <mat-expansion-panel\r\n          hideToggle\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          id=\"qmslib_related_popup_document_001\"\r\n          [expanded]=\"isDocumentExpanded\"\r\n          (opened)=\"isDocumentExpanded = true\"\r\n          (closed)=\"isDocumentExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title> {{ LANG.DOCUMENTS | uppercase }} </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isDocumentExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_document_002\">\r\n            <qms-tree-new\r\n              [treeData]=\"treeData2\"\r\n              [treeConfig]=\"treeConfig2\"\r\n              [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              (selectFolderEvent)=\"getItemOfFolder($event, dataType.folder)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n            ></qms-tree-new>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n      <div\r\n        *ngIf=\"splitView\"\r\n        class=\"\r\n          qms-scrollbar\r\n          qmslib-related-popup-splitview qmslib_related_popup_content\r\n          col-6\r\n        \"\r\n        [ngClass]=\"{\r\n          panel__content_item: checkedNodeList.length,\r\n          panel__content: !checkedNodeList.length\r\n        }\"\r\n      >\r\n        <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n          {{ splitViewTitle }}\r\n        </div>\r\n        <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n          <mat-checkbox\r\n            qms-group-options\r\n            [disabled]=\"node.disabled\"\r\n            color=\"default\"\r\n            [checked]=\"isNodeSelected(node)\"\r\n            (change)=\"toggleSelectItem(node)\"\r\n          ></mat-checkbox>\r\n          <mat-icon\r\n            class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n            [svgIcon]=\"getNodeIcon(node)\"\r\n          ></mat-icon>\r\n          <span class=\"text-node\">{{ node.itemName }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  \r\n    <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n  \r\n    <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n      <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n        <button\r\n          *ngIf=\"item.itemName\"\r\n          mat-button\r\n          class=\"related__item__content\"\r\n          qms-tool-tip=\"{{\r\n            isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n          }}\"\r\n          mode=\"dark\"\r\n        >\r\n          <span class=\"related__item__content_name\" #itemName>{{\r\n            getItemChipName(item)\r\n          }}</span>\r\n          <mat-icon\r\n            *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n            (click)=\"removeCheckedNodeList(item)\"\r\n            >cancel</mat-icon\r\n          >\r\n        </button>\r\n      </div>\r\n    </div>\r\n  \r\n    <div class=\"line__divider\"></div>\r\n  \r\n    <div class=\"confirm__button__groups\">\r\n      <button\r\n        *ngIf=\"!checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 7px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }}\r\n      </button>\r\n      <button\r\n        *ngIf=\"checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 0px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n      </button>\r\n      <button\r\n        qms-btn-text\r\n        [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n        (click)=\"onCloseClick()\"\r\n      >\r\n        {{ LANG.CANCEL }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n  ",
+                encapsulation: ViewEncapsulation.None,
+                styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-scrollbar.none-scroll-bg::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:#eee}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:#e5e5e5;max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{height:30px;font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:10.25rem}"]
+            },] }
+];
+SelectProcessDocumentPopupComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: TranslateLibraryService },
+    { type: MatDialogRef },
+    { type: QMSSelectProcessDocumentGlobalService },
+    { type: MatIconRegistry },
+    { type: DomSanitizer },
+    { type: QMSIconRegistryService },
+    { type: ElementRef },
+    { type: SelectProcessDocumentPopupData, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
+SelectProcessDocumentPopupComponent.propDecorators = {
+    dataTrees: [{ type: ViewChildren, args: [NewTreeComponent, {},] }],
+    autoComplete: [{ type: ViewChild, args: ['autoCompleteInputSearch', { read: MatAutocompleteTrigger, static: true },] }],
+    onMessage: [{ type: HostListener, args: ['window:message', ['$event'],] }]
+};
+
+class QMSSelectProcessDocumentModule {
+}
+QMSSelectProcessDocumentModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SelectProcessDocumentPopupComponent
+                ],
+                imports: [
+                    CommonModule,
+                    MatTreeModule,
+                    MatIconModule,
+                    MatButtonModule,
+                    MatCheckboxModule,
+                    MatExpansionModule,
+                    MatAutocompleteModule,
+                    ReactiveFormsModule,
+                    ScrollingModule,
+                    MatCardModule,
+                    MatSidenavModule,
+                    MatListModule,
+                    SharedMaterialModule,
+                    QMSListModule,
+                    QmsAngularModule,
+                    QMSBreadcrumbModule,
+                    QMSAppIconModule,
+                    QMSTreeModule,
+                    QMSButtonModule,
+                    MatSlideToggleModule,
+                    QMSNewTreeModule
+                ],
+                exports: [
+                    SelectProcessDocumentPopupComponent
+                ]
+            },] }
+];
+
+class SelectedProcessDocumentItem {
+}
+
 /*
  * Public API Surface of qms-angular
  */
@@ -17294,5 +19243,5 @@ class ISelectOneItem {
  * Generated bundle index. Do not edit.
  */
 
-export { AutocompleteOffDirective, BREADCRUMB_DROPDOWN_ICON, BUTTON_TOGGLE_DEFAULT_OPTIONS, BUTTON_TOGGLE_GROUP, BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, BannerType, BpmnService, BreadcrumbNode, ButtonToggleChange, CHECKLIST_ICON, CKEditorEventConst, CKEditorModule, ConfirmDialog, DEPARTMENT_FOLDER_ICON, DEPARTMENT_FOLDER_OUTLINED_ICON, DEVIATION_ICON, DOCUMENT_DEPARTMENT_ICON, DOCUMENT_ENTERPRISE_ICON, DOCUMENT_ICON, DOCUMENT_LOCAL_ICON, DOCUMENT_REGIONAL_ICON, DateFormatPipe, ENTERPRISE_FOLDER_ICON, ENTERPRISE_FOLDER_OUTLINED_ICON, FileErrorType, FlowChartConst, FlowchartViewMode, ISelectOneItem, IconModel, InformationCoverItem, KEYBOARD_DOWN_ICON, KEYBOARD_UP_ICON, LOCAL_FOLDER_ICON, LOCAL_FOLDER_OUTLINED_ICON, LinkAnchor, LinkType, MarginDirective, NORMAL_FOLDER_ICON, NORMAL_FOLDER_OUTLINED_ICON, PROCESS_AREA_ICON, PROCESS_AREA_OUTLINED_ICON, PROCESS_ICON, PopupData, ProtocolType, ProtocolTypeName, QMSAnchor, QMSAppIconModule, QMSAttachmentListDirective, QMSBreadcrumb, QMSBreadcrumbDirectionIconDirective, QMSBreadcrumbItemDirective, QMSBreadcrumbModule, QMSButton, QMSButtonIcon, QMSButtonModule, QMSButtonToggle, QMSButtonToggleGroup, QMSCKEditorBaseComponent, QMSCKEditorBaseService, QMSCKEditorBpmn, QMSCKEditorBpmnApiService, QMSCKEditorBpmnComponent, QMSCKEditorBpmnTemplate, QMSCKEditorComponent, QMSCKEditorConfirmComponent, QMSCKEditorData, QMSCKEditorDialogData, QMSCKEditorDocumentType, QMSCKEditorFullscreenComponent, QMSCKEditorGlobalService, QMSCKEditorInjector, QMSCKEditorLinkAnchorDocument, QMSCKEditorLinkComponent, QMSCKEditorLinkService, QMSCKEditorLoadTemplateComponent, QMSCKEditorModule, QMSCKEditorPlugin, QMSCKEditorRelatedComponent, QMSCKEditorRelation, QMSCKEditorTemplate, QMSCKEditorTemplateService, QMSCKEditorToastService, QMSCKEditorTreeComponent, QMSCKEdtiorInputData, QMSChipBodyDirective, QMSChipInputChipListDirective, QMSChipInputDirective, QMSChipInputSelectDropWDownDirective, QMSChipInputSelectFieldDirective, QMSChipInputSelectTriggerDirective, QMSComment, QMSConfirmDialog, QMSDialogConfig, QMSDrawerContentDirective, QMSDrawerDirective, QMSDrawerHeaderActionDirective, QMSDrawerHeaderDirective, QMSDropdownMenuItem, QMSEditFileNameDialog, QMSEditFileNameDialogModule, QMSFileAttachment, QMSFileUploadDirective, QMSFileUploadDisplayDirective, QMSFileUploadMultipleDirective, QMSFileUploadMultipleDisplayDirective, QMSFileUploadMultipleSelectorDirective, QMSFileUploadSelectorDirective, QMSFormDialog, QMSFormFieldDatePickerDirective, QMSFormFieldDirective, QMSFormFieldTextareaDirective, QMSGroupOptionDirective, QMSIconRegistryService, QMSInputChipDirective, QMSInputClearDirective, QMSList, QMSListExpansion, QMSListExpansionHeader, QMSListHeader, QMSListItem, QMSListLeadingIcon, QMSListLine, QMSListModule, QMSRangeSliderDirective, QMSRangeSliderLockUpDirective, QMSRelatedGlobalService, QMSRelatedModule, QMSRichText, QMSRichTextModule, QMSScrolableAttachmentListDirective, QMSScrollbarDirective, QMSSearchFieldDirective, QMSSelectGlobalService, QMSSelectIncludeChildrenModule, QMSSelectOneGlobalService, QMSSelectOneModule, QMSSnackbarConfig, QMSSuffixDirective, QMSSuffixFieldDirective, QMSTabGroupAdvancedDirective, QMSTabGroupDirective, QMSTabLabelDirective, QMSTableAction, QMSTableActionBlock, QMSTableModule, QMSTextBlockDirective, QMSTextBlockLine, QMSToolTipComponent, QMSToolTipRendererDirective, QMSTooltipImageDirective, QMSTooltipModule, QMSTreeModule, QMSUploadFileErrorDialog, QMSUploadFileErrorDialogModule, QMSUploadingFileGuard, QmsAngularComponent, QmsAngularModule, QmsAngularService, QmsAppBarComponent, QmsAppBarModule, QmsBadgesComponent, QmsBadgesModule, QmsBannerComponent, QmsBannerConfirmButton, QmsBannerConfirmButtonClick, QmsBannerConfirmComponent, QmsBannerConfirmModule, QmsBannerContent, QmsBannerLoadingComponent, QmsBannerLoadingModule, QmsBannerModule, QmsReportContentPortraitComponent, QmsReportCoverPortraitComponent, QmsReportModule, QmsStepperComponent, QmsStepperModule, REGIONAL_FOLDER_ICON, REGIONAL_FOLDER_OUTLINED_ICON, RISK_ICON, RelatedContentComponent, RelatedItemType, RelatedListComponent, RelatedPopupComponent, Result, RiskAnalysis, RiskAnalysisComponent, RiskDanger, RiskListComponent, RiskResult, RiskResultComponent, SaveTemplateComponent, ScrollToSelectedDirective, SelectConst, SelectDialog, SelectIncludeChildrenPopUpComponent, SelectOneDialog, SelectOnePopupData, SelectOption, SelectOptionTypes, SelectPopupData, SelectedOption, SharedModule, ShowHideSearchResultConst, SideNav, SideNavItem, SidenavComponent, StepModel, TargetType, TargetTypeName, TestOnlyComponent, TranslateLibraryService, TreeComponent, TreeConfig, TreeFlatNode, TreeModel, TreeNode$1 as TreeNode, UploadErrorData, en, mixinColor, no, notExceedSize, requiredFileType, ɵ1, SharedMaterialModule as ɵa, QMSCKEditorTemplateComponent as ɵb, QMSCKEditorTreeService as ɵc, LinkAttachmentComponent as ɵd, QMSCKEditorTooltipComponent as ɵe, QMSCKEditorTooltip as ɵf, QMSCKEditorImageMapComponent as ɵg, QMSCKEditorImageMap as ɵh };
+export { AutocompleteOffDirective, BREADCRUMB_DROPDOWN_ICON, BUTTON_TOGGLE_DEFAULT_OPTIONS, BUTTON_TOGGLE_GROUP, BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, BannerType, BpmnService, BreadcrumbNode, ButtonToggleChange, CHECKLIST_ICON, CKEditorEventConst, CKEditorModule, ConfirmDialog, DEPARTMENT_FOLDER_ICON, DEPARTMENT_FOLDER_OUTLINED_ICON, DEVIATION_ICON, DOCUMENT_DEPARTMENT_ICON, DOCUMENT_ENTERPRISE_ICON, DOCUMENT_ICON, DOCUMENT_LOCAL_ICON, DOCUMENT_REGIONAL_ICON, DataType$1 as DataType, DateFormatPipe, DocumentNodeType$1 as DocumentNodeType, ENTERPRISE_FOLDER_ICON, ENTERPRISE_FOLDER_OUTLINED_ICON, FileErrorType, FlowChartConst, FlowchartViewMode, ISelectOneItem, IconModel, InformationCoverItem, KEYBOARD_DOWN_ICON, KEYBOARD_UP_ICON, LOCAL_FOLDER_ICON, LOCAL_FOLDER_OUTLINED_ICON, LinkAnchor, LinkType, MarginDirective, ModuleType$1 as ModuleType, NORMAL_FOLDER_ICON, NORMAL_FOLDER_OUTLINED_ICON, NewTreeComponent, NewTreeModel, PROCESS_AREA_ICON, PROCESS_AREA_OUTLINED_ICON, PROCESS_ICON, PopupData, ProtocolType, ProtocolTypeName, QMSAnchor, QMSAppBar, QMSAppIconModule, QMSAttachmentListDirective, QMSBreadcrumb, QMSBreadcrumbDirectionIconDirective, QMSBreadcrumbItemDirective, QMSBreadcrumbModule, QMSButton, QMSButtonIcon, QMSButtonModule, QMSButtonToggle, QMSButtonToggleGroup, QMSCKEditorBaseComponent, QMSCKEditorBaseService, QMSCKEditorBpmn, QMSCKEditorBpmnApiService, QMSCKEditorBpmnComponent, QMSCKEditorBpmnTemplate, QMSCKEditorComponent, QMSCKEditorConfirmComponent, QMSCKEditorData, QMSCKEditorDialogData, QMSCKEditorDocumentType, QMSCKEditorFullscreenComponent, QMSCKEditorGlobalService, QMSCKEditorInjector, QMSCKEditorLinkAnchorDocument, QMSCKEditorLinkComponent, QMSCKEditorLinkService, QMSCKEditorLoadTemplateComponent, QMSCKEditorModule, QMSCKEditorPlugin, QMSCKEditorRelatedComponent, QMSCKEditorRelation, QMSCKEditorTemplate, QMSCKEditorTemplateService, QMSCKEditorToastService, QMSCKEditorTreeComponent, QMSCKEdtiorInputData, QMSChipBodyDirective, QMSChipInputChipListDirective, QMSChipInputDirective, QMSChipInputSelectDropWDownDirective, QMSChipInputSelectFieldDirective, QMSChipInputSelectTriggerDirective, QMSComment, QMSConfirmDialog, QMSDialogConfig, QMSDrawerContentDirective, QMSDrawerDirective, QMSDrawerHeaderActionDirective, QMSDrawerHeaderDirective, QMSDropdownMenuItem, QMSEditFileNameDialog, QMSEditFileNameDialogModule, QMSFileAttachment, QMSFileUploadDirective, QMSFileUploadDisplayDirective, QMSFileUploadMultipleDirective, QMSFileUploadMultipleDisplayDirective, QMSFileUploadMultipleSelectorDirective, QMSFileUploadSelectorDirective, QMSFormDialog, QMSFormFieldDatePickerDirective, QMSFormFieldDirective, QMSFormFieldTextareaDirective, QMSGroupOptionDirective, QMSIconRegistryService, QMSInputChipDirective, QMSInputClearDirective, QMSList, QMSListExpansion, QMSListExpansionHeader, QMSListHeader, QMSListItem, QMSListLeadingIcon, QMSListLine, QMSListModule, QMSNewTreeModule, QMSProcessDocumentItem, QMSRangeSliderDirective, QMSRangeSliderLockUpDirective, QMSRelatedGlobalService, QMSRelatedModule, QMSRichText, QMSRichTextModule, QMSScrolableAttachmentListDirective, QMSScrollbarDirective, QMSSearchFieldDirective, QMSSelectGlobalService, QMSSelectIncludeChildrenModule, QMSSelectOneGlobalService, QMSSelectOneModule, QMSSelectProcessDocumentGlobalService, QMSSelectProcessDocumentModule, QMSSnackbarConfig, QMSSuffixDirective, QMSSuffixFieldDirective, QMSTabGroupAdvancedDirective, QMSTabGroupDirective, QMSTabLabelDirective, QMSTableAction, QMSTableActionBlock, QMSTableModule, QMSTextBlockDirective, QMSTextBlockLine, QMSToolTipComponent, QMSToolTipRendererDirective, QMSTooltipImageDirective, QMSTooltipModule, QMSTreeModule, QMSUploadFileErrorDialog, QMSUploadFileErrorDialogModule, QMSUploadingFileGuard, QmsAngularComponent, QmsAngularModule, QmsAngularService, QmsAppBarComponent, QmsAppBarModule, QmsBadgesComponent, QmsBadgesModule, QmsBannerComponent, QmsBannerConfirmButton, QmsBannerConfirmButtonClick, QmsBannerConfirmComponent, QmsBannerConfirmModule, QmsBannerContent, QmsBannerLoadingComponent, QmsBannerLoadingModule, QmsBannerModule, QmsReportContentPortraitComponent, QmsReportCoverPortraitComponent, QmsReportModule, QmsStatusDropdownComponent, QmsStatusDropdownModule, QmsStatusDropdownOption, QmsStatusDropdownType, QmsStepperComponent, QmsStepperModule, REGIONAL_FOLDER_ICON, REGIONAL_FOLDER_OUTLINED_ICON, RISK_ICON, RelatedConst, RelatedContentComponent, RelatedItemType, RelatedListComponent, RelatedPopupComponent, Result, RiskAnalysis, RiskAnalysisComponent, RiskDanger, RiskListComponent, RiskResult, RiskResultComponent, SaveTemplateComponent, ScrollToSelectedDirective, SelectConst, SelectDialog, SelectIncludeChildrenPopUpComponent, SelectOneDialog, SelectOnePopupData, SelectOption, SelectOptionTypes, SelectPopupData, SelectProcessDocumentPopupComponent, SelectProcessDocumentPopupData, SelectedOption, SelectedProcessDocumentItem, SharedModule, ShowHideSearchResultConst, SideNav, SideNavItem, SidenavComponent, StepModel, TargetType, TargetTypeName, TranslateLibraryService, TreeComponent, TreeConfig, TreeFlatNode, TreeModel, TreeNode$1 as TreeNode, UploadErrorData, en, mixinColor, no, notExceedSize, requiredFileType, ɵ1, SharedMaterialModule as ɵa, QMSCKEditorTemplateComponent as ɵb, QMSCKEditorTreeService as ɵc, LinkAttachmentComponent as ɵd, QMSCKEditorTooltipComponent as ɵe, QMSCKEditorTooltip as ɵf, QMSCKEditorImageMapComponent as ɵg, QMSCKEditorImageMap as ɵh };
 //# sourceMappingURL=qms-angular.js.map