qms-angular 1.0.30 → 1.0.34

package/fesm2015/qms-angular.js

@@ -26,8 +26,9 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
-import { takeUntil, debounceTime } from 'rxjs/operators';
+import { MatMenuModule } from '@angular/material/menu';
 import { DomSanitizer } from '@angular/platform-browser';
+import { takeUntil, debounceTime } from 'rxjs/operators';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpClient, HttpClientModule } from '@angular/common/http';
@@ -37,7 +38,6 @@ import { CKEditorModule as CKEditorModule$1 } from '@ckeditor/ckeditor5-angular'
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatMenuModule } from '@angular/material/menu';
 import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
 
@@ -96,8 +96,13 @@ const en = {
     "ERROR": {
         "SELECT_DANGER": "You must select one or more events"
     },
-    "MESSAGE": {},
+    "MESSAGE": {
+        "PROCESSES_IN": "Processes in",
+        "DOCUMENTS_IN": "Documents in"
+    },
     "QMSCKEDITOR": {
+        "INSERT_TOOLTIP": "Insert a tooltip",
+        "CONTENT": "Content",
         "TEMPLATE": "Template",
         "CONTENT_TEMPLATE": "Content Template",
         "CREATE_NEW_TEMPLATE": "Create new tempplate",
@@ -205,8 +210,13 @@ const no = {
     "ERROR": {
         "SELECT_DANGER": "Du må velge en eller flere hendelser"
     },
-    "MESSAGE": {},
+    "MESSAGE": {
+        "PROCESSES_IN": "Prosesser i",
+        "DOCUMENTS_IN": "Dokumenter i"
+    },
     "QMSCKEDITOR": {
+        "INSERT_TOOLTIP": "Sett inn et verktøytips",
+        "CONTENT": "Innhold",
         "TEMPLATE": "Mal",
         "CONTENT_TEMPLATE": "Innholdsmal",
         "CREATE_NEW_TEMPLATE": "Lag ny mal",
@@ -408,8 +418,8 @@ class QMSConfirmDialog {
 QMSConfirmDialog.decorators = [
     { type: Component, args: [{
                 selector: 'qms-dialog-confirm',
-                template: "<div class=\"dialog-container\">\r\n  <div mat-dialog-title class=\"dialog-title\">\r\n    <h3 class=\"title\" *ngIf=\"info.title\">{{info.title}}</h3>\r\n    <h3 class=\"title text-normal\" *ngIf=\"info.normalTitle\">\r\n      {{info.normalTitle}}\r\n    </h3>\r\n    <button\r\n      *ngIf=\"info.closeButton\"\r\n      qms-btn-text\r\n      class=\"close-btn\"\r\n      aria-label=\"close dialog\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <mat-dialog-content [innerHTML]=\"info.body\"></mat-dialog-content>\r\n\r\n  <mat-dialog-actions align=\"end\" #actionGroup>\r\n    <button qms-btn-text class=\"cancel-btn\" (click)=\"close()\">\r\n      {{info.cancelText}}\r\n    </button>\r\n    <button\r\n      *ngIf=\"info.buttonType == 'normal'\"\r\n      qms-btn\r\n      id=\"action-btn\"\r\n      class=\"action-btn\"\r\n      (click)=\"save()\"\r\n    >\r\n      {{info.actionText}}\r\n    </button>\r\n    <button\r\n      *ngIf=\"info.buttonType == 'outline'\"\r\n      qms-btn-text\r\n      id=\"action-btn\"\r\n      class=\"action-btn\"\r\n      (click)=\"save()\"\r\n    >\r\n      {{info.actionText}}\r\n    </button>\r\n  </mat-dialog-actions>\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}::ng-deep .qms-dialog.dark-mode .mat-dialog-container{background-color:#323232}::ng-deep .qms-dialog.dark-mode .dialog-container{background-color:#323232}::ng-deep .qms-dialog.dark-mode .dialog-container .cancel-btn,::ng-deep .qms-dialog.dark-mode .dialog-container .close-btn,::ng-deep .qms-dialog.dark-mode .dialog-container h3.title{color:#fff}::ng-deep .qms-dialog.dark-mode .dialog-container .close-btn:focus,::ng-deep .qms-dialog.dark-mode .dialog-container .close-btn:hover{color:#fff}::ng-deep .qms-dialog.dark-mode .dialog-container .mat-dialog-content{color:hsla(0,0%,100%,.6)}::ng-deep .qms-dialog.dark-mode .dialog-container .action-btn{background:#b7daf8;color:#1954a9}::ng-deep .qms-dialog .dialog-container .dialog-title{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px}::ng-deep .qms-dialog .dialog-container .close-btn{color:rgba(0,0,0,.6);height:30px;padding:0}::ng-deep .qms-dialog .dialog-container .close-btn:focus,::ng-deep .qms-dialog .dialog-container .close-btn:hover{color:rgba(0,0,0,.6)}::ng-deep .qms-dialog .dialog-container .mat-dialog-content{font-size:14px}::ng-deep .qms-dialog .dialog-container .action-btn{margin-left:16px;order:2}::ng-deep .qms-dialog .dialog-container .action-btn.priority{order:1}::ng-deep .qms-dialog .dialog-container .cancel-btn{order:2}::ng-deep .qms-dialog .dialog-container h3.title{font-family:Raleway;font-size:1rem;line-height:22px;font-weight:600}::ng-deep .qms-dialog .dialog-container h3.title.text-normal{font-family:Open Sans;font-weight:400;line-height:28px;color:inherit}"]
+                template: "<div class=\"dialog-container\">\r\n  <div mat-dialog-title class=\"dialog-title\">\r\n    <h3 class=\"title\" *ngIf=\"info.title\">{{info.title}}</h3>\r\n    <h3 class=\"title text-normal\" *ngIf=\"info.normalTitle\">\r\n      {{info.normalTitle}}\r\n    </h3>\r\n    <button\r\n      *ngIf=\"info.closeButton\"\r\n      qms-btn-icon\r\n      color=\"light\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <mat-dialog-content [innerHTML]=\"info.body\"></mat-dialog-content>\r\n\r\n  <mat-dialog-actions align=\"end\" #actionGroup>\r\n    <button qms-btn-text class=\"cancel-btn\" (click)=\"close()\">\r\n      {{info.cancelText}}\r\n    </button>\r\n    <button\r\n      *ngIf=\"info.buttonType == 'normal'\"\r\n      qms-btn\r\n      id=\"action-btn\"\r\n      class=\"action-btn\"\r\n      (click)=\"save()\"\r\n    >\r\n      {{info.actionText}}\r\n    </button>\r\n    <button\r\n      *ngIf=\"info.buttonType == 'outline'\"\r\n      qms-btn-text\r\n      id=\"action-btn\"\r\n      class=\"action-btn\"\r\n      (click)=\"save()\"\r\n    >\r\n      {{info.actionText}}\r\n    </button>\r\n  </mat-dialog-actions>\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}::ng-deep .qms-dialog.dark-mode .mat-dialog-container{background-color:#323232}::ng-deep .qms-dialog.dark-mode .dialog-container{background-color:#323232}::ng-deep .qms-dialog.dark-mode .dialog-container .cancel-btn,::ng-deep .qms-dialog.dark-mode .dialog-container .close-btn,::ng-deep .qms-dialog.dark-mode .dialog-container h3.title{color:#fff}::ng-deep .qms-dialog.dark-mode .dialog-container .close-btn:focus,::ng-deep .qms-dialog.dark-mode .dialog-container .close-btn:hover{color:#fff}::ng-deep .qms-dialog.dark-mode .dialog-container .mat-dialog-content{color:hsla(0,0%,100%,.6)}::ng-deep .qms-dialog.dark-mode .dialog-container .action-btn{background:#b7daf8;color:#1954a9}::ng-deep .qms-dialog.dark-mode .qms-btn-icon.qms-light{color:#fff}::ng-deep .qms-dialog.dark-mode .qms-btn-icon.qms-light:hover{color:#fff}::ng-deep .qms-dialog .dialog-container .dialog-title{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px}::ng-deep .qms-dialog .dialog-container .close-btn{color:rgba(0,0,0,.6);height:30px;padding:0}::ng-deep .qms-dialog .dialog-container .close-btn:focus,::ng-deep .qms-dialog .dialog-container .close-btn:hover{color:rgba(0,0,0,.6)}::ng-deep .qms-dialog .dialog-container .mat-dialog-content{font-size:14px;font-family:Open Sans}::ng-deep .qms-dialog .dialog-container .action-btn{margin-left:16px;order:2}::ng-deep .qms-dialog .dialog-container .action-btn.priority{order:1}::ng-deep .qms-dialog .dialog-container .cancel-btn{order:2}::ng-deep .qms-dialog .dialog-container h3.title{font-family:Raleway;font-size:1rem;line-height:22px;font-weight:600}::ng-deep .qms-dialog .dialog-container h3.title.text-normal{font-family:Open Sans;font-weight:400;line-height:28px;color:inherit}"]
             },] }
 ];
 QMSConfirmDialog.ctorParameters = () => [
@@ -430,7 +440,7 @@ QMSFormDialog.decorators = [
     { type: Component, args: [{
                 selector: 'qms-dialog-form',
                 template: "<div class=\"dialog-container\">\r\n  <ng-content></ng-content>\r\n</div>\r\n",
-                styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}::ng-deep .qms-dialog.dark-mode .mat-dialog-container{background-color:#323232}::ng-deep .qms-dialog.dark-mode .dialog-container{background-color:#323232}::ng-deep .qms-dialog.dark-mode .dialog-container .cancel-btn,::ng-deep .qms-dialog.dark-mode .dialog-container .close-btn,::ng-deep .qms-dialog.dark-mode .dialog-container h3.title{color:#fff}::ng-deep .qms-dialog.dark-mode .dialog-container .close-btn:focus,::ng-deep .qms-dialog.dark-mode .dialog-container .close-btn:hover{color:#fff}::ng-deep .qms-dialog.dark-mode .dialog-container .mat-dialog-content{color:hsla(0,0%,100%,.6)}::ng-deep .qms-dialog.dark-mode .dialog-container .action-btn{background:#b7daf8;color:#1954a9}::ng-deep .qms-dialog .dialog-container .dialog-title{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px}::ng-deep .qms-dialog .dialog-container .close-btn{color:rgba(0,0,0,.6);height:30px;padding:0}::ng-deep .qms-dialog .dialog-container .close-btn:focus,::ng-deep .qms-dialog .dialog-container .close-btn:hover{color:rgba(0,0,0,.6)}::ng-deep .qms-dialog .dialog-container .mat-dialog-content{font-size:14px}::ng-deep .qms-dialog .dialog-container .action-btn{margin-left:16px;order:2}::ng-deep .qms-dialog .dialog-container .action-btn.priority{order:1}::ng-deep .qms-dialog .dialog-container .cancel-btn{order:2}::ng-deep .qms-dialog .dialog-container h3.title{font-family:Raleway;font-size:1rem;line-height:22px;font-weight:600}::ng-deep .qms-dialog .dialog-container h3.title.text-normal{font-family:Open Sans;font-weight:400;line-height:28px;color:inherit}"]
+                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}::ng-deep .qms-dialog.dark-mode .mat-dialog-container{background-color:#323232}::ng-deep .qms-dialog.dark-mode .dialog-container{background-color:#323232}::ng-deep .qms-dialog.dark-mode .dialog-container .cancel-btn,::ng-deep .qms-dialog.dark-mode .dialog-container .close-btn,::ng-deep .qms-dialog.dark-mode .dialog-container h3.title{color:#fff}::ng-deep .qms-dialog.dark-mode .dialog-container .close-btn:focus,::ng-deep .qms-dialog.dark-mode .dialog-container .close-btn:hover{color:#fff}::ng-deep .qms-dialog.dark-mode .dialog-container .mat-dialog-content{color:hsla(0,0%,100%,.6)}::ng-deep .qms-dialog.dark-mode .dialog-container .action-btn{background:#b7daf8;color:#1954a9}::ng-deep .qms-dialog.dark-mode .qms-btn-icon.qms-light{color:#fff}::ng-deep .qms-dialog.dark-mode .qms-btn-icon.qms-light:hover{color:#fff}::ng-deep .qms-dialog .dialog-container .dialog-title{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px}::ng-deep .qms-dialog .dialog-container .close-btn{color:rgba(0,0,0,.6);height:30px;padding:0}::ng-deep .qms-dialog .dialog-container .close-btn:focus,::ng-deep .qms-dialog .dialog-container .close-btn:hover{color:rgba(0,0,0,.6)}::ng-deep .qms-dialog .dialog-container .mat-dialog-content{font-size:14px;font-family:Open Sans}::ng-deep .qms-dialog .dialog-container .action-btn{margin-left:16px;order:2}::ng-deep .qms-dialog .dialog-container .action-btn.priority{order:1}::ng-deep .qms-dialog .dialog-container .cancel-btn{order:2}::ng-deep .qms-dialog .dialog-container h3.title{font-family:Raleway;font-size:1rem;line-height:22px;font-weight:600}::ng-deep .qms-dialog .dialog-container h3.title.text-normal{font-family:Open Sans;font-weight:400;line-height:28px;color:inherit}"]
             },] }
 ];
 
@@ -1277,6 +1287,9 @@ class QMSScrollbarDirective {
     ngOnInit() {
         if (this.ele) {
             this.ele.nativeElement.classList.add('qms-scrollbar');
+            if (this.isNoneBackground) {
+                this.ele.nativeElement.classList.add('none-scroll-bg');
+            }
         }
     }
 }
@@ -1287,7 +1300,10 @@ QMSScrollbarDirective.decorators = [
 ];
 QMSScrollbarDirective.ctorParameters = () => [
     { type: ElementRef }
-];
+];
+QMSScrollbarDirective.propDecorators = {
+    isNoneBackground: [{ type: Input }]
+};
 
 class QMSInputClearDirective {
     constructor(el) {
@@ -2037,7 +2053,7 @@ QMSButtonToggle.decorators = [
                     '(focus)': 'focus()',
                     'role': 'presentation',
                 },
-                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-button-toggle-group{position:relative;display:inline-flex;flex-direction:row;white-space:nowrap;overflow:hidden;-webkit-tap-highlight-color:transparent;border-radius:4px;border:1px solid #e0e0e0}.qms-button-toggle-group .qms-button-toggle{font-family:Open Sans;white-space:nowrap;position:relative;font-size:14px;font-weight:600;line-height:16px}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-standard{background-color:#fff;color:#323232;position:relative}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-standard .mat-icon{color:#1954a9}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-standard.qms-button-toggle-checked{background-color:#e5eefb;color:#1954a9}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-standard+.qms-button-toggle{border-left:1px solid #e0e0e0}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-standard.cdk-keyboard-focused:after{content:\"\";display:block;position:absolute;top:0;right:0;width:3px;height:100%;background:#2873df}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-standard.cdk-keyboard-focused:before{content:\"\";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid #2873df}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-active{background-color:#e5eefb;color:#1954a9}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-active.qms-button-toggle-checked{background-color:#1954a9;color:#fff}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-active+.qms-button-toggle{border-left:1px solid #e0e0e0}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-active.cdk-keyboard-focused:after{content:\"\";display:block;position:absolute;top:0;right:0;width:3px;height:100%;background:#2873df}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-active.cdk-keyboard-focused:before{content:\"\";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid #2873df}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-dark{background-color:#323232;color:hsla(0,0%,100%,.6)}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-dark .mat-icon{color:#94baef}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-dark.qms-button-toggle-checked{background-color:#b7daf8;color:#1954a9}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-dark.qms-button-toggle-checked .mat-icon{color:#1954a9}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-dark+.qms-button-toggle{border-left:1px solid #474747}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-dark.cdk-keyboard-focused:after{content:\"\";display:block;position:absolute;top:0;right:0;width:3px;height:100%;background:#2873df}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-dark.cdk-keyboard-focused:before{content:\"\";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid #2873df}.qms-button-toggle{border:0;background:none;color:inherit;padding:0;margin:0;font:inherit;outline:none;width:100%;cursor:pointer}.qms-button-toggle-label-content{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;line-height:36px;padding:0 16px;position:relative}.qms-button-toggle .qms-button-toggle-label-content>*{vertical-align:middle}"]
+                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-button-toggle-group{position:relative;display:inline-flex;flex-direction:row;white-space:nowrap;overflow:hidden;-webkit-tap-highlight-color:transparent;border-radius:4px;border:1px solid #e0e0e0}.qms-button-toggle-group .qms-button-toggle{font-family:Open Sans;white-space:nowrap;position:relative;font-size:14px;font-weight:600;line-height:16px}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-standard{background-color:#fff;color:#323232;position:relative}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-standard .mat-icon{color:#1954a9}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-standard:hover{background-color:#e5eefb}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-standard.qms-button-toggle-checked{background-color:#e5eefb;color:#1954a9}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-standard+.qms-button-toggle{border-left:1px solid #e0e0e0}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-standard.cdk-keyboard-focused:after{content:\"\";display:block;position:absolute;top:0;right:0;width:3px;height:100%;background:#2873df}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-standard.cdk-keyboard-focused:before{content:\"\";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid #2873df}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-active{background-color:#e5eefb;color:#1954a9}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-active.qms-button-toggle-checked,.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-active:hover{background-color:#1954a9;color:#fff}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-active+.qms-button-toggle{border-left:1px solid #e0e0e0}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-active.cdk-keyboard-focused:after{content:\"\";display:block;position:absolute;top:0;right:0;width:3px;height:100%;background:#2873df}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-active.cdk-keyboard-focused:before{content:\"\";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid #2873df}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-dark{background-color:#323232;color:hsla(0,0%,100%,.6)}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-dark .mat-icon{color:#94baef}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-dark.qms-button-toggle-checked,.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-dark:hover{background-color:#b7daf8;color:#1954a9}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-dark.qms-button-toggle-checked .mat-icon{color:#1954a9}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-dark+.qms-button-toggle{border-left:1px solid #474747}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-dark.cdk-keyboard-focused:after{content:\"\";display:block;position:absolute;top:0;right:0;width:3px;height:100%;background:#2873df}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-appearance-dark.cdk-keyboard-focused:before{content:\"\";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid #2873df}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-disabled{cursor:default!important;background:#e4e4e4!important;color:rgba(0,0,0,.38)!important}.qms-button-toggle-group .qms-button-toggle.qms-button-toggle-disabled .mat-icon{color:rgba(0,0,0,.38)!important}.qms-button-toggle{border:0;background:none;color:inherit;padding:0;margin:0;font:inherit;outline:none;width:100%;cursor:pointer}.qms-button-toggle-label-content{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;line-height:36px;padding:0 16px;position:relative}.qms-button-toggle .qms-button-toggle-label-content>*{vertical-align:middle}"]
             },] }
 ];
 QMSButtonToggle.ctorParameters = () => [
@@ -2974,90 +2990,6 @@ QMSUploadFileErrorDialogModule.decorators = [
             },] }
 ];
 
-var DataType;
-(function (DataType) {
-    DataType[DataType["document"] = 1] = "document";
-    DataType[DataType["process"] = 2] = "process";
-    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 || (DataType = {}));
-
-class RelatedContentComponent {
-    constructor() {
-        this.contents = [];
-        this.dataType = DataType;
-        this.imageProcess = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAwLjVWNi41SDJWMTYuNUgxMlYxOC41SDE4VjEyLjVIMTJWMTQuNUg0VjYuNUg2VjQuNUgxMlY2LjVIMThWMC41SDEyVjIuNUg2VjAuNUgwWk00IDIuNVY0LjVIMlYyLjVINFpNMTYgMi41VjQuNUgxNFYyLjVIMTZaTTE2IDE2LjVWMTQuNUgxNFYxNi41SDE2WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC42Ii8+DQo8L3N2Zz4NCg==';
-    }
-    ngOnInit() {
-        this.LANG = '';
-    }
-    removeContent(content) {
-        const index = this.contents.findIndex(x => {
-            return x.id === content.id;
-        });
-        if (index >= 0) {
-            this.contents.splice(index, 1);
-        }
-    }
-}
-RelatedContentComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'qms-related-content',
-                template: "<div\r\n  id=\"qmslib_related_content\"\r\n  class=\"related__content_container\"\r\n  *ngIf=\"contents.length > 0\"\r\n>\r\n  <div *ngIf=\"header\" id=\"qmslib_related_content_header\">\r\n    <span>{{ header }}</span>\r\n  </div>\r\n  <div id=\"qmslib_related_content_body\" class=\"\">\r\n    <div id=\"qmslib_related_content_body_001\" class=\"mt-1 pl-2 pr-2\">\r\n      <mat-card class=\"card col-12\" *ngFor=\"let content of contents\">\r\n        <div class=\"row\">\r\n          <div class=\"col-2\" *ngIf=\"content.itemType === dataType.folder\">\r\n            <mat-icon style=\"color: #4acaff\">folder_filled</mat-icon>\r\n          </div>\r\n          <div class=\"col-2\" *ngIf=\"content.itemType === dataType.document\">\r\n            <mat-icon>insert_drive_file</mat-icon>\r\n          </div>\r\n          <div class=\"col-2\" *ngIf=\"content.itemType === dataType.area\">\r\n            <mat-icon style=\"color: #a4b0de\">folder_filled</mat-icon>\r\n          </div>\r\n          <div class=\"col-2\" *ngIf=\"content.itemType === dataType.process\">\r\n            <img src=\"{{ imageProcess }}\" />\r\n          </div>\r\n          <div class=\"col-2\" *ngIf=\"content.itemType === dataType.deviation\">\r\n            <mat-icon class=\"material-icons-outlined\">report_problem</mat-icon>\r\n          </div>\r\n          <div class=\"col-2\" *ngIf=\"content.itemType === dataType.checklist\">\r\n            <mat-icon class=\"material-icons-outlined\"\r\n              >format_list_bulleted</mat-icon\r\n            >\r\n          </div>\r\n          <div class=\"col-2\" *ngIf=\"content.itemType === dataType.risk\">\r\n            <mat-icon class=\"material-icons-outlined\">border_all</mat-icon>\r\n          </div>\r\n          <div class=\"col-8\">\r\n            <div class=\"col-12 content\">\r\n              <span>{{ content.itemName }}</span>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-2\">\r\n            <mat-icon class=\"cursor\" (click)=\"removeContent(content)\"\r\n              >close</mat-icon\r\n            >\r\n          </div>\r\n        </div>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: [".related__content_container .card{min-height:60px;box-shadow:none;border-color:#818181;border-top:none;border-right:none;border-left:none;border-radius:0}.related__content_container .card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.related__content_container .card .cursor{cursor:pointer}.related__content_container .mat-card{padding:16px 0}.related__content_container .align-icon{margin-top:5px}"]
-            },] }
-];
-RelatedContentComponent.propDecorators = {
-    header: [{ type: Input }],
-    contents: [{ type: Input }]
-};
-
-var ModuleType;
-(function (ModuleType) {
-    ModuleType[ModuleType["documentProcess"] = 1] = "documentProcess";
-    ModuleType[ModuleType["deviation"] = 2] = "deviation";
-    ModuleType[ModuleType["checklist"] = 3] = "checklist";
-    ModuleType[ModuleType["risk"] = 4] = "risk";
-})(ModuleType || (ModuleType = {}));
-
-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';
-
-class PopupData {
-    constructor() {
-        this.moduleId = 0;
-        this.moduleName = '';
-        this.treeData1 = [];
-        this.treeData2 = [];
-        this.selectedNode = [];
-        this.disabledList = [];
-        this.disabledList2 = [];
-    }
-}
-
-class QMSRelatedGlobalService {
-    constructor() {
-        this.searchRelated = new BehaviorSubject([]);
-    }
-    setSearchRelated(result) {
-        this.searchRelated.next(result);
-    }
-}
-QMSRelatedGlobalService.ɵprov = i0.ɵɵdefineInjectable({ factory: function QMSRelatedGlobalService_Factory() { return new QMSRelatedGlobalService(); }, token: QMSRelatedGlobalService, providedIn: "root" });
-QMSRelatedGlobalService.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
-QMSRelatedGlobalService.ctorParameters = () => [];
-
 const PROCESS_ICON = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M3 3V9H5V19H15V21H21V15H15V17H7V9H9V7H15V9H21V3H15V5H9V3H3ZM7 5V7H5V5H7ZM19 5V7H17V5H19ZM19 19V17H17V19H19Z" fill="black" fill-opacity="0.6"/>
 </svg>
@@ -3143,19 +3075,95 @@ const DEPARTMENT_FOLDER_ICON = `<svg width="24" height="24" viewBox="0 0 24 24"
 const KEYBOARD_UP_ICON = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>
 `;
 const KEYBOARD_DOWN_ICON = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
+`;
+const DOCUMENT_LOCAL_ICON = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 2H6C4.9 2 4.01 2.9 4.01 4L4 20C4 21.1 4.89 22 5.99 22H11V20H6V4H13V9H18V12H20V8L14 2Z" fill="black" fill-opacity="0.6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 21.5001V19.0001H19V21.5001C19 21.7751 19.225 22.0001 19.5 22.0001H21C21.275 22.0001 21.5 21.7751 21.5 21.5001V18.0001H22.35C22.58 18.0001 22.69 17.7151 22.515 17.5651L18.335 13.8001C18.145 13.6301 17.855 13.6301 17.665 13.8001L13.485 17.5651C13.315 17.7151 13.42 18.0001 13.65 18.0001H14.5V21.5001C14.5 21.7751 14.725 22.0001 15 22.0001H16.5C16.775 22.0001 17 21.7751 17 21.5001Z" fill="#1954A9"/>
+</svg>
+`;
+const DOCUMENT_DEPARTMENT_ICON = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 2H6C4.9 2 4.01 2.9 4.01 4L4 20C4 21.1 4.89 22 5.99 22H11V20H6V4H13V9H18V12H20V8L14 2Z" fill="black" fill-opacity="0.6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 15.25H22C22.555 15.25 23 15.695 23 16.25V21.75C23 22.305 22.555 22.75 22 22.75H14C13.445 22.75 13 22.305 13 21.75L13.005 16.25C13.005 15.695 13.445 15.25 14 15.25H16V14.25C16 13.695 16.445 13.25 17 13.25H19C19.555 13.25 20 13.695 20 14.25V15.25ZM17 15.25H19V14.25H17V15.25Z" fill="#00804C"/>
+</svg>
+`;
+const DOCUMENT_REGIONAL_ICON = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 2H6C4.9 2 4.01 2.9 4.01 4L4 20C4 21.1 4.89 22 5.99 22H11V20H6V4H13V9H18V12H20V8L14 2Z" fill="black" fill-opacity="0.6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 13C16.065 13 14.5 14.565 14.5 16.5C14.5 18.585 16.71 21.46 17.62 22.555C17.82 22.795 18.185 22.795 18.385 22.555C19.29 21.46 21.5 18.585 21.5 16.5C21.5 14.565 19.935 13 18 13ZM18 17.75C17.31 17.75 16.75 17.19 16.75 16.5C16.75 15.81 17.31 15.25 18 15.25C18.69 15.25 19.25 15.81 19.25 16.5C19.25 17.19 18.69 17.75 18 17.75Z" fill="#662E0D"/>
+</svg>
+`;
+const DOCUMENT_ENTERPRISE_ICON = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 2H6C4.9 2 4.01 2.9 4.01 4L4 20C4 21.1 4.89 22 5.99 22H11V20H6V4H13V9H18V12H20V8L14 2Z" fill="black" fill-opacity="0.6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 17.5V13.5H15.5V15.5H13.5V22.5H17.5V20.5H18.5V22.5H22.5V17.5H20.5ZM15.5 21.5H14.5V20.5H15.5V21.5ZM15.5 19.5H14.5V18.5H15.5V19.5ZM15.5 17.5H14.5V16.5H15.5V17.5ZM17.5 19.5H16.5V18.5H17.5V19.5ZM17.5 17.5H16.5V16.5H17.5V17.5ZM17.5 15.5H16.5V14.5H17.5V15.5ZM19.5 19.5H18.5V18.5H19.5V19.5ZM19.5 17.5H18.5V16.5H19.5V17.5ZM19.5 15.5H18.5V14.5H19.5V15.5ZM21.5 21.5H20.5V20.5H21.5V21.5ZM21.5 19.5H20.5V18.5H21.5V19.5Z" fill="#CF4714"/>
+</svg>
 `;
 
-var DocumentNodeType;
-(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 || (DocumentNodeType = {}));
+class QMSIconRegistryService {
+    registerProcessIcon(_iconRegistry, _sanitizer) {
+        _iconRegistry.addSvgIconLiteral('process', _sanitizer.bypassSecurityTrustHtml(PROCESS_ICON));
+    }
+    registerProcessAreaIcon(_iconRegistry, _sanitizer) {
+        _iconRegistry.addSvgIconLiteral('process_area', _sanitizer.bypassSecurityTrustHtml(PROCESS_AREA_ICON));
+        _iconRegistry.addSvgIconLiteral('process_area_outlined', _sanitizer.bypassSecurityTrustHtml(PROCESS_AREA_OUTLINED_ICON));
+    }
+    registerDocumentIcon(_iconRegistry, _sanitizer) {
+        _iconRegistry.addSvgIconLiteral('document', _sanitizer.bypassSecurityTrustHtml(DOCUMENT_ICON));
+        _iconRegistry.addSvgIconLiteral('document_local', _sanitizer.bypassSecurityTrustHtml(DOCUMENT_LOCAL_ICON));
+        _iconRegistry.addSvgIconLiteral('document_enterprise', _sanitizer.bypassSecurityTrustHtml(DOCUMENT_ENTERPRISE_ICON));
+        _iconRegistry.addSvgIconLiteral('document_department', _sanitizer.bypassSecurityTrustHtml(DOCUMENT_DEPARTMENT_ICON));
+        _iconRegistry.addSvgIconLiteral('document_regional', _sanitizer.bypassSecurityTrustHtml(DOCUMENT_REGIONAL_ICON));
+    }
+    registerFolderIcon(_iconRegistry, _sanitizer) {
+        _iconRegistry.addSvgIconLiteral('folder', _sanitizer.bypassSecurityTrustHtml(NORMAL_FOLDER_ICON));
+        _iconRegistry.addSvgIconLiteral('folder_outlined', _sanitizer.bypassSecurityTrustHtml(NORMAL_FOLDER_OUTLINED_ICON));
+        _iconRegistry.addSvgIconLiteral('local_folder', _sanitizer.bypassSecurityTrustHtml(LOCAL_FOLDER_ICON));
+        _iconRegistry.addSvgIconLiteral('local_folder_outlined', _sanitizer.bypassSecurityTrustHtml(LOCAL_FOLDER_OUTLINED_ICON));
+        _iconRegistry.addSvgIconLiteral('enterprise_folder', _sanitizer.bypassSecurityTrustHtml(ENTERPRISE_FOLDER_ICON));
+        _iconRegistry.addSvgIconLiteral('enterprise_folder_outlined', _sanitizer.bypassSecurityTrustHtml(ENTERPRISE_FOLDER_OUTLINED_ICON));
+        _iconRegistry.addSvgIconLiteral('regional_folder', _sanitizer.bypassSecurityTrustHtml(REGIONAL_FOLDER_ICON));
+        _iconRegistry.addSvgIconLiteral('regional_folder_outlined', _sanitizer.bypassSecurityTrustHtml(REGIONAL_FOLDER_OUTLINED_ICON));
+        _iconRegistry.addSvgIconLiteral('department_folder', _sanitizer.bypassSecurityTrustHtml(DEPARTMENT_FOLDER_ICON));
+        _iconRegistry.addSvgIconLiteral('department_folder_outlined', _sanitizer.bypassSecurityTrustHtml(DEPARTMENT_FOLDER_OUTLINED_ICON));
+    }
+    registerDeviationIcon(_iconRegistry, _sanitizer) {
+        _iconRegistry.addSvgIconLiteral('deviation', _sanitizer.bypassSecurityTrustHtml(DEVIATION_ICON));
+    }
+    registerChecklistIcon(_iconRegistry, _sanitizer) {
+        _iconRegistry.addSvgIconLiteral('checklist', _sanitizer.bypassSecurityTrustHtml(CHECKLIST_ICON));
+    }
+    registerRiskIcon(_iconRegistry, _sanitizer) {
+        _iconRegistry.addSvgIconLiteral('risk', _sanitizer.bypassSecurityTrustHtml(RISK_ICON));
+    }
+}
+QMSIconRegistryService.ɵprov = i0.ɵɵdefineInjectable({ factory: function QMSIconRegistryService_Factory() { return new QMSIconRegistryService(); }, token: QMSIconRegistryService, providedIn: "root" });
+QMSIconRegistryService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+
+class QMSAppIconModule {
+}
+QMSAppIconModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    MatCommonModule,
+                    MatIconModule,
+                ],
+                exports: [
+                    MatCommonModule,
+                    MatIconModule
+                ],
+                declarations: [],
+                providers: [QMSIconRegistryService]
+            },] }
+];
+
+const BREADCRUMB_DROPDOWN_ICON = `<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3552 5.35508C11.9118 4.91175 11.3168 4.66675 10.6985 4.66675H4.66683C3.3835 4.66675 2.34516 5.71675 2.34516 7.00008L2.3335 21.0001C2.3335 22.2834 3.3835 23.3334 4.66683 23.3334H23.3335C24.6168 23.3334 25.6668 22.2834 25.6668 21.0001V9.33341C25.6668 8.05008 24.6168 7.00008 23.3335 7.00008H14.0002L12.3552 5.35508Z" fill="#00324E"/>
+<path d="M10.25 13.125L14 16.875L17.75 13.125H10.25Z" fill="white" fill-opacity="0.6"/>
+</svg>
+`;
 
 var ItemIconType;
 (function (ItemIconType) {
@@ -3166,103 +3174,579 @@ var ItemIconType;
     ItemIconType[ItemIconType["svg"] = 4] = "svg";
 })(ItemIconType || (ItemIconType = {}));
 
-class TreeNode$1 {
-}
-
-let objData$1 = {};
-let json = JSON;
-function buildArrayTree$1(obj, level) {
-    return Object.keys(obj).reduce((accumulator, key) => {
-        const value = obj[key];
-        const node = new TreeNode$1();
-        const keyObj = json.parse(key);
-        node.id = keyObj["id"];
-        node.name = keyObj["name"];
-        node.parentId = keyObj["parentId"];
-        if (value != null) {
-            if (typeof value === 'object') {
-                node.children = this.buildArrayTree(value, level + 1);
+class QMSBreadcrumbItemDirective {
+    constructor(ele, renderer) {
+        this.ele = ele;
+        this.renderer = renderer;
+        this.showTooltipChange = new EventEmitter();
+    }
+    ngAfterViewInit() {
+        if (this.breadcrumbItemText) {
+            this.breadcrumbItemText.nativeElement.classList.add('qms-breadcrumb-item-text');
+            if (this.breadcrumbItemText.nativeElement.innerText.length > 30) {
+                this.showTooltipChange.emit(true);
             }
-            else {
-                node.name = value;
+        }
+    }
+    ngOnInit() {
+        if (this.ele) {
+            this.ele.nativeElement.classList.add('qms-breadcrumb-item');
+            if (this.isLastItem) {
+                this.ele.nativeElement.classList.add('qms-breadcrumb-last-item');
             }
         }
-        return accumulator.concat(node);
-    }, []);
-}
-function buildObjectTree$1(arr) {
-    objData$1 = {};
-    let objTreeData;
-    const root = arr.filter((x) => {
-        return x.parentId === '';
-    });
-    root.forEach((item) => {
-        objTreeData = this.findParent(item.rootId, arr);
-    });
-    return objTreeData;
-}
-function findParent$1(id, array) {
-    const objParent = {};
-    const parent = array.filter((x) => {
-        return x.rootId === id;
-    });
-    parent.forEach((item) => {
-        let parentKey = {
-            id: item.childId,
-            name: item.childName,
-            parentId: item.rootId
-        };
-        objParent[json.stringify(parentKey)] = null;
-    });
-    // find child
-    const child = array.filter((x) => {
-        return x.parentId === id;
-    });
-    if (child.length > 0) {
-        this.findChild(id, objParent, array);
     }
-    let key = {
-        id: parent[0].rootId,
-        name: parent[0].rootName,
-        parentId: ''
-    };
-    // add node to tree
-    objData$1[json.stringify(key)] = objParent;
-    return objData$1;
-}
-function findChild$1(id, objParent, array) {
-    const subNode = array.filter((x) => {
-        return x.parentId === id;
-    });
-    subNode.forEach((item) => {
-        const processNode = {};
-        let nodeKey = {
-            id: item.childId,
-            name: item.childName,
-            parentId: item.rootId
-        };
-        processNode[json.stringify(nodeKey)] = null;
-        this.findChild(item.rootId, processNode, array);
-        let key = {
-            id: item.rootId,
-            name: item.subName,
-            parentId: id
-        };
-        objParent[json.stringify(key)] = Object.assign(Object.assign({}, objParent[json.stringify(key)]), processNode);
-    });
 }
-const TreeFunctions = {
-    buildArrayTree: buildArrayTree$1,
-    buildObjectTree: buildObjectTree$1,
-    findParent: findParent$1,
-    findChild: findChild$1
+QMSBreadcrumbItemDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-breadcrumb-item]',
+            },] }
+];
+QMSBreadcrumbItemDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 }
+];
+QMSBreadcrumbItemDirective.propDecorators = {
+    isLastItem: [{ type: Input }],
+    showTooltip: [{ type: Input }],
+    showTooltipChange: [{ type: Output }],
+    breadcrumbItemText: [{ type: ContentChild, args: ["breadcrumbItemText", { static: false },] }]
 };
 
-class TreeComponent {
-    constructor(cdRef, domSanitizer, iconRegistry) {
-        this.cdRef = cdRef;
-        this.domSanitizer = domSanitizer;
+var DropdownBreadCrumbNodeWidth;
+(function (DropdownBreadCrumbNodeWidth) {
+    DropdownBreadCrumbNodeWidth[DropdownBreadCrumbNodeWidth["NORMAL"] = 66] = "NORMAL";
+    DropdownBreadCrumbNodeWidth[DropdownBreadCrumbNodeWidth["TABLE"] = 44] = "TABLE";
+})(DropdownBreadCrumbNodeWidth || (DropdownBreadCrumbNodeWidth = {}));
+
+class QMSBreadcrumb {
+    constructor(ele, iconRegistry, sanitizer) {
+        this.ele = ele;
+        this.iconRegistry = iconRegistry;
+        this.sanitizer = sanitizer;
+        this.numDisplayItem = 0;
+        this.onItemClick = new EventEmitter();
+        this.dropdownNodes = [];
+        this.isOverflow = false;
+        this.itemSpace = DropdownBreadCrumbNodeWidth.NORMAL; // width of dropdown node in normal view
+        this.isMobileType = false;
+        iconRegistry.addSvgIconLiteral('breadcrumb_dropdown', sanitizer.bypassSecurityTrustHtml(BREADCRUMB_DROPDOWN_ICON));
+    }
+    ngAfterViewInit() {
+        if (!this.isMobileType) {
+            if (!this.maxLine || this.maxLine < 2) {
+                this.checkOverflow(this.ele.nativeElement.offsetWidth);
+            }
+            else {
+                this.checkOverflow(this.ele.nativeElement.offsetWidth * 1.7);
+            }
+        }
+        if (+this.numDisplayItem > 0 && this.itemNodes.length >= 2) {
+            this.dropdownNodes = [];
+            this.dropdownNodes = this.itemNodes.slice(0, -this.numDisplayItem).reverse();
+            this.itemNodes = [...[], ...this.itemNodes.slice(-this.numDisplayItem)];
+            this.isOverflow = true;
+        }
+    }
+    checkOverflow(width) {
+        const nodeWidths = this.breadCrumbNodes.map(x => x.ele.nativeElement.offsetWidth);
+        let currentWidth = 0;
+        nodeWidths.forEach(width => {
+            currentWidth += width;
+        });
+        this.isOverflow = width < currentWidth;
+        if (this.isOverflow) {
+            let screenWidth = width;
+            if (this.type !== 'table') {
+                this.dropdownNodes.push(this.homeNode);
+                currentWidth -= nodeWidths[0];
+                currentWidth += this.itemSpace;
+                screenWidth -= this.itemSpace;
+            }
+            else {
+                currentWidth += this.itemSpace;
+                screenWidth -= nodeWidths[0];
+                screenWidth -= this.itemSpace;
+            }
+            nodeWidths.shift();
+            nodeWidths.forEach((eleWidth, index) => {
+                if (currentWidth > screenWidth) {
+                    this.itemNodes[index].isShow = false;
+                    this.dropdownNodes.push(this.itemNodes[index]);
+                    currentWidth -= (eleWidth);
+                }
+            });
+            this.dropdownNodes = this.dropdownNodes.reverse();
+        }
+    }
+    ngOnInit() {
+        this.itemIconType = ItemIconType;
+        if (this.nodes && this.nodes.length > 0) {
+            this.nodes.forEach(ele => {
+                ele.isOverflow = ele.isOverflow ? ele.isOverflow : false;
+                ele.isShow = true;
+                ele.displayType = this.getItemIconType(ele);
+            });
+            if (this.type !== 'mobile') {
+                this.homeNode = this.nodes[0];
+                this.itemNodes = this.nodes.slice(1);
+            }
+            else {
+                this.isMobileType = true;
+                this.previousNode = this.nodes[this.nodes.length >= 2 ? this.nodes.length - 2 : 0];
+            }
+        }
+        if (this.type === 'table') {
+            this.ele.nativeElement.classList.add('qms-breadcrumb-table');
+            this.itemSpace = DropdownBreadCrumbNodeWidth.TABLE; // width of dropdown node in table view
+        }
+        if (this.maxLine && this.maxLine > 1) {
+            this.ele.nativeElement.classList.add('qms-breadcrumb__multi-line');
+        }
+    }
+    getItemIconType(treeConfig) {
+        if (treeConfig.itemIcon)
+            return ItemIconType.name;
+        if (treeConfig.itemIconPath)
+            return ItemIconType.path;
+        if (treeConfig.itemIconBase64)
+            return ItemIconType.base64;
+        if (treeConfig.itemIconSvg)
+            return ItemIconType.svg;
+        return ItemIconType.none;
+    }
+    getImagePath(node) {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(node.itemIconBase64);
+    }
+    onKeyPressed(event) {
+        [...event.target.children].forEach(x => x.click());
+    }
+    onItemSelect(item) {
+        if (this.onItemClick) {
+            this.onItemClick.emit(item);
+        }
+    }
+}
+QMSBreadcrumb.decorators = [
+    { type: Component, args: [{
+                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\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)\"\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}"]
+            },] }
+];
+QMSBreadcrumb.ctorParameters = () => [
+    { type: ElementRef },
+    { type: MatIconRegistry },
+    { type: DomSanitizer }
+];
+QMSBreadcrumb.propDecorators = {
+    nodes: [{ type: Input }],
+    type: [{ type: Input }],
+    maxLine: [{ type: Input }],
+    numDisplayItem: [{ type: Input }],
+    onItemClick: [{ type: Output }],
+    breadCrumbNodes: [{ type: ViewChildren, args: [QMSBreadcrumbItemDirective, {},] }]
+};
+
+class QMSBreadcrumbDirectionIconDirective {
+    constructor(ele) {
+        this.ele = ele;
+    }
+    ngOnInit() {
+        if (this.ele) {
+            this.ele.nativeElement.classList.add('qms-breadcrumb-direction-icon');
+        }
+    }
+}
+QMSBreadcrumbDirectionIconDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-breadcrumb-direction-icon]',
+            },] }
+];
+QMSBreadcrumbDirectionIconDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+
+class QMSBreadcrumbModule {
+}
+QMSBreadcrumbModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    MatCommonModule,
+                    MatIconModule,
+                    QmsAngularModule,
+                    QMSButtonModule,
+                    MatMenuModule
+                ],
+                exports: [
+                    MatCommonModule,
+                    MatIconModule,
+                    QMSBreadcrumb,
+                    QMSBreadcrumbItemDirective,
+                    QMSBreadcrumbDirectionIconDirective,
+                ],
+                declarations: [
+                    QMSBreadcrumb,
+                    QMSBreadcrumbItemDirective,
+                    QMSBreadcrumbDirectionIconDirective,
+                ],
+                providers: []
+            },] }
+];
+
+var DataType;
+(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 || (DataType = {}));
+
+class RelatedContentComponent {
+    constructor() {
+        this.contents = [];
+        this.dataType = DataType;
+        this.imageProcess = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAwLjVWNi41SDJWMTYuNUgxMlYxOC41SDE4VjEyLjVIMTJWMTQuNUg0VjYuNUg2VjQuNUgxMlY2LjVIMThWMC41SDEyVjIuNUg2VjAuNUgwWk00IDIuNVY0LjVIMlYyLjVINFpNMTYgMi41VjQuNUgxNFYyLjVIMTZaTTE2IDE2LjVWMTQuNUgxNFYxNi41SDE2WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC42Ii8+DQo8L3N2Zz4NCg==';
+    }
+    ngOnInit() {
+        this.LANG = '';
+    }
+    removeContent(content) {
+        const index = this.contents.findIndex(x => {
+            return x.id === content.id;
+        });
+        if (index >= 0) {
+            this.contents.splice(index, 1);
+        }
+    }
+}
+RelatedContentComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'qms-related-content',
+                template: "<div\r\n  id=\"qmslib_related_content\"\r\n  class=\"related__content_container\"\r\n  *ngIf=\"contents.length > 0\"\r\n>\r\n  <div *ngIf=\"header\" id=\"qmslib_related_content_header\">\r\n    <span>{{ header }}</span>\r\n  </div>\r\n  <div id=\"qmslib_related_content_body\" class=\"\">\r\n    <div id=\"qmslib_related_content_body_001\" class=\"mt-1 pl-2 pr-2\">\r\n      <mat-card class=\"card col-12\" *ngFor=\"let content of contents\">\r\n        <div class=\"row\">\r\n          <div class=\"col-2\" *ngIf=\"content.itemType === dataType.folder\">\r\n            <mat-icon style=\"color: #4acaff\">folder_filled</mat-icon>\r\n          </div>\r\n          <div class=\"col-2\" *ngIf=\"content.itemType === dataType.document\">\r\n            <mat-icon>insert_drive_file</mat-icon>\r\n          </div>\r\n          <div class=\"col-2\" *ngIf=\"content.itemType === dataType.area\">\r\n            <mat-icon style=\"color: #a4b0de\">folder_filled</mat-icon>\r\n          </div>\r\n          <div class=\"col-2\" *ngIf=\"content.itemType === dataType.process\">\r\n            <img src=\"{{ imageProcess }}\" />\r\n          </div>\r\n          <div class=\"col-2\" *ngIf=\"content.itemType === dataType.deviation\">\r\n            <mat-icon class=\"material-icons-outlined\">report_problem</mat-icon>\r\n          </div>\r\n          <div class=\"col-2\" *ngIf=\"content.itemType === dataType.checklist\">\r\n            <mat-icon class=\"material-icons-outlined\"\r\n              >format_list_bulleted</mat-icon\r\n            >\r\n          </div>\r\n          <div class=\"col-2\" *ngIf=\"content.itemType === dataType.risk\">\r\n            <mat-icon class=\"material-icons-outlined\">border_all</mat-icon>\r\n          </div>\r\n          <div class=\"col-8\">\r\n            <div class=\"col-12 content\">\r\n              <span>{{ content.itemName }}</span>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-2\">\r\n            <mat-icon class=\"cursor\" (click)=\"removeContent(content)\"\r\n              >close</mat-icon\r\n            >\r\n          </div>\r\n        </div>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                styles: [".related__content_container .card{min-height:60px;box-shadow:none;border-color:#818181;border-top:none;border-right:none;border-left:none;border-radius:0}.related__content_container .card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.related__content_container .card .cursor{cursor:pointer}.related__content_container .mat-card{padding:16px 0}.related__content_container .align-icon{margin-top:5px}"]
+            },] }
+];
+RelatedContentComponent.propDecorators = {
+    header: [{ type: Input }],
+    contents: [{ type: Input }]
+};
+
+var DocumentNodeType;
+(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 || (DocumentNodeType = {}));
+
+class RelatedListComponent {
+    constructor(domSanitizer, translate, iconRegistry, appIconService) {
+        this.domSanitizer = domSanitizer;
+        this.translate = translate;
+        this.iconRegistry = iconRegistry;
+        this.appIconService = appIconService;
+        this.relatedData = [];
+        this.dataType = DataType;
+        // imageProcess = '../qms-angular/src/assets/images/union.svg';
+        this.imageProcess = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAwLjVWNi41SDJWMTYuNUgxMlYxOC41SDE4VjEyLjVIMTJWMTQuNUg0VjYuNUg2VjQuNUgxMlY2LjVIMThWMC41SDEyVjIuNUg2VjAuNUgwWk00IDIuNVY0LjVIMlYyLjVINFpNMTYgMi41VjQuNUgxNFYyLjVIMTZaTTE2IDE2LjVWMTQuNUgxNFYxNi41SDE2WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC42Ii8+DQo8L3N2Zz4NCg==';
+        this.updateData = new EventEmitter();
+        this.onItemSelect = new EventEmitter();
+        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) {
+        var _a;
+        if (changes.data && JSON.stringify(changes.data.currentValue) !== JSON.stringify(changes.data.previousValue)) {
+            this.relatedData = [];
+            this.title = changes.data.currentValue.title;
+            this.isNotEditedItem = (_a = changes.data.currentValue['isNotEditedItem']) !== null && _a !== void 0 ? _a : false;
+            this.relatedData = [...changes.data.currentValue.data];
+        }
+    }
+    ngOnInit() {
+        var _a;
+        this.title = this.data.title;
+        this.isNotEditedItem = (_a = this.data['isNotEditedItem']) !== null && _a !== void 0 ? _a : false;
+        this.relatedData = this.data.data;
+        this.translate.getLanguageSubject$.pipe().subscribe((res) => {
+            if (res) {
+                this.LANG = this.translate.getObjectLang(res);
+            }
+        });
+    }
+    getImagePath() {
+        return this.domSanitizer.bypassSecurityTrustResourceUrl(this.imageProcess);
+    }
+    removeItem(index) {
+        this.updateData.emit(index);
+    }
+    onCloseClick() {
+    }
+    onItemClick(item) {
+        if (this.onItemSelect)
+            this.onItemSelect.emit(item);
+    }
+    onItemBreadcrumbClick(event) {
+        if (this.onItemSelect)
+            this.onItemSelect.emit(event);
+    }
+    getItemStatus(item) {
+        return (this.showStatus && (item === null || item === void 0 ? void 0 : item.statusName)) ? `, ${item === null || item === void 0 ? void 0 : item.statusName}` : '';
+    }
+    getNodeIcon(item) {
+        switch (item.itemType) {
+            case DataType.folder: {
+                switch (item.levelType) {
+                    case DocumentNodeType.DepartmentFolder:
+                        return 'department_folder_outlined';
+                    case DocumentNodeType.RegionalFolder:
+                        return 'regional_folder_outlined';
+                    case DocumentNodeType.TopFolder:
+                        return 'enterprise_folder_outlined';
+                    case DocumentNodeType.Folder:
+                        return 'local_folder_outlined';
+                    default:
+                        return 'folder_outlined';
+                }
+            }
+            case DataType.document: {
+                switch (item.levelType) {
+                    case DocumentNodeType.DepartmentFolder:
+                        return 'document_department';
+                    case DocumentNodeType.RegionalFolder:
+                        return 'document_regional';
+                    case DocumentNodeType.TopFolder:
+                        return 'document_enterprise';
+                    case DocumentNodeType.Folder:
+                        return 'document_local';
+                    default:
+                        return 'document';
+                }
+            }
+            case DataType.area:
+                return 'process_area_outlined';
+            case DataType.process:
+                return 'process';
+            case DataType.deviation:
+                return 'deviation';
+            case DataType.checklist:
+                return 'checklist';
+            case DataType.risk:
+                return 'risk';
+            default:
+                return 'folder_outlined';
+        }
+    }
+    canShowParent(item) {
+        return item.itemType === this.dataType.deviation || item.itemType === this.dataType.checklist;
+    }
+}
+RelatedListComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'qms-related-list',
+                template: "<div class=\"container list-related\">\r\n  <div class=\"list-related__title\">\r\n    <strong>{{ title }}</strong>\r\n  </div>\r\n  <div\r\n    class=\"list-related__body\"\r\n    *ngFor=\"let item of relatedData; let i = index\"\r\n  >\r\n    <div class=\"list-related__body-parent\">\r\n      <qms-list-item type=\"image-square\">\r\n        <mat-icon\r\n          leading-icon\r\n          type=\"image-square\"\r\n          [svgIcon]=\"getNodeIcon(item)\"\r\n        ></mat-icon>\r\n        <div qms-list-header>\r\n          <div\r\n            qms-line\r\n            type=\"subtitle\"\r\n            class=\"search__option-name\"\r\n            (click)=\"onItemClick(item)\"\r\n          >\r\n            <span class=\"cursor\">{{ item.itemName }}</span>\r\n          </div>\r\n          <div\r\n            class=\"caption\"\r\n            *ngIf=\"item.breadcumbs && item.breadcumbs.length\"\r\n          >\r\n            <qms-breadcrumb\r\n              class=\"breadcrumb-containe\"\r\n              type=\"table\"\r\n              numDisplayItem=\"1\"\r\n              [nodes]=\"item.breadcumbs\"\r\n            >\r\n            </qms-breadcrumb>\r\n          </div>\r\n        </div>\r\n        <div qms-line color=\"default-subtitle\" *ngIf=\"item?.displayId\">\r\n          <span class=\"material-icons-outlined\"> local_offer </span> ID:\r\n          {{ item?.displayId }} {{ getItemStatus(item) }}\r\n        </div>\r\n      </qms-list-item>\r\n      <div class=\"block\" *ngIf=\"!isNotEditedItem\">\r\n        <button qms-btn-icon color=\"light\" mode=\"dark\" (click)=\"removeItem(i)\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                encapsulation: ViewEncapsulation.None,
+                styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.list-related{font-family:Open Sans;font-style:normal;font-weight:400;color:#323232}.list-related .list-related__title{font-weight:600;font-size:.875rem;line-height:22px;margin-bottom:1rem}.list-related .list-related__body .list-related__body-parent{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-parent .qms-list-item.mat-2-line.image-item{height:auto}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-item-content{margin:0}.list-related .list-related__body .list-related__body-parent .wrap-image.image-square,.list-related .list-related__body .list-related__body-parent .wrap-image.image-square img{background:transparent;margin:auto;height:24px;width:24px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box{margin-left:1.5rem;border-bottom:none;padding-bottom:7px;padding-top:7px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text .material-icons-outlined,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box .material-icons-outlined{font-size:13px}.list-related .list-related__body .list-related__body-parent .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}.list-related .list-related__body .list-related__body-parent .block{font-weight:400;font-size:1rem;line-height:28px;display:flex;align-items:center}.list-related .list-related__body .list-related__body-parent .block .title{margin-left:1.5rem;padding-top:5px;padding-bottom:5px}.list-related .list-related__body .list-related__body-parent .block .title .caption{color:rgba(0,0,0,.6);font-size:.75rem;line-height:22px}.list-related .list-related__body .list-related__body-parent .block mat-icon{color:rgba(0,0,0,.6);padding:0}.list-related .list-related__body .list-related__body-parent .block button.qms-btn-icon{width:40px;height:40px;line-height:40px}.list-related .list-related__body .list-related__body-child{font-weight:400;font-size:.875rem;line-height:22px}.list-related .list-related__body .list-related__body-child .default{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-child .default .title{margin-left:3rem}.list-related .list-related__body .list-related__body-child .default .group-button{margin-right:2rem;display:flex}.list-related .list-related__body .remain{font-weight:600;font-size:.875rem;line-height:22px;display:flex;align-items:center;justify-content:space-between;background-color:#fafafa;color:#1954a9;min-height:48px;border-bottom:1px solid #ddd}.list-related .list-related__body .remain .title{margin-left:3rem}.label-green,.label-red,.label-yellow{font-family:Open Sans;font-style:normal;font-weight:600;display:inline-block;text-align:center;margin-left:1rem;width:24px;height:24px;font-size:.75rem;border-radius:1px}.label-red{background-color:#9e360f;color:#fff}.label-yellow{background-color:#e4cf53;color:rgba(0,0,0,.87)}.label-green{background-color:#00804c;color:#fff}.cursor{cursor:pointer}"]
+            },] }
+];
+RelatedListComponent.ctorParameters = () => [
+    { type: DomSanitizer },
+    { type: TranslateLibraryService },
+    { type: MatIconRegistry },
+    { type: QMSIconRegistryService }
+];
+RelatedListComponent.propDecorators = {
+    data: [{ type: Input }],
+    showStatus: [{ type: Input }],
+    updateData: [{ type: Output }],
+    onItemSelect: [{ type: Output }]
+};
+
+var ModuleType;
+(function (ModuleType) {
+    ModuleType[ModuleType["documentProcess"] = 1] = "documentProcess";
+    ModuleType[ModuleType["deviation"] = 2] = "deviation";
+    ModuleType[ModuleType["checklist"] = 3] = "checklist";
+    ModuleType[ModuleType["risk"] = 4] = "risk";
+})(ModuleType || (ModuleType = {}));
+
+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';
+
+class PopupData {
+    constructor() {
+        this.moduleId = 0;
+        this.moduleName = '';
+        this.treeData1 = [];
+        this.treeData2 = [];
+        this.selectedNode = [];
+        this.disabledList = [];
+        this.disabledList2 = [];
+        this.splitView = false;
+    }
+}
+
+class RelatedItem {
+}
+class IRelated {
+}
+class RelatedData {
+    constructor() {
+        this.title = '';
+        this.data = [];
+    }
+}
+class SearchRelatedItemsToProcessAndDocument {
+}
+class SearchRelatedItemsToDeviation {
+}
+class SearchRelatedItemsToChecklist {
+}
+class SearchRelatedItemsToRisk {
+}
+
+class QMSRelatedGlobalService {
+    constructor() {
+        this.searchRelated = new BehaviorSubject([]);
+        this.splitViewValue = new BehaviorSubject([]);
+    }
+    setSearchRelated(result) {
+        this.searchRelated.next(result);
+    }
+    setSplitviewValue(result) {
+        this.splitViewValue.next(result);
+    }
+}
+QMSRelatedGlobalService.ɵprov = i0.ɵɵdefineInjectable({ factory: function QMSRelatedGlobalService_Factory() { return new QMSRelatedGlobalService(); }, token: QMSRelatedGlobalService, providedIn: "root" });
+QMSRelatedGlobalService.decorators = [
+    { type: Injectable, args: [{ providedIn: 'root' },] }
+];
+QMSRelatedGlobalService.ctorParameters = () => [];
+
+class TreeNode$1 {
+}
+
+let objData$1 = {};
+let json = JSON;
+function buildArrayTree$1(obj, level) {
+    return Object.keys(obj).reduce((accumulator, key) => {
+        const value = obj[key];
+        const node = new TreeNode$1();
+        const keyObj = json.parse(key);
+        node.id = keyObj["id"];
+        node.name = keyObj["name"];
+        node.parentId = keyObj["parentId"];
+        node.levelType = keyObj["levelType"];
+        if (value != null) {
+            if (typeof value === 'object') {
+                node.children = this.buildArrayTree(value, level + 1);
+            }
+            else {
+                node.name = value;
+            }
+        }
+        return accumulator.concat(node);
+    }, []);
+}
+function buildObjectTree$1(arr) {
+    objData$1 = {};
+    let objTreeData;
+    const root = arr.filter((x) => {
+        return x.parentId === '';
+    });
+    root.forEach((item) => {
+        objTreeData = this.findParent(item.rootId, arr);
+    });
+    return objTreeData;
+}
+function findParent$1(id, array) {
+    const objParent = {};
+    const parent = array.filter((x) => {
+        return x.rootId === id;
+    });
+    parent.forEach((item) => {
+        let parentKey = {
+            id: item.childId,
+            name: item.childName,
+            parentId: item.rootId,
+            levelType: item.levelType
+        };
+        objParent[json.stringify(parentKey)] = null;
+    });
+    // find child
+    const child = array.filter((x) => {
+        return x.parentId === id;
+    });
+    if (child.length > 0) {
+        this.findChild(id, objParent, array);
+    }
+    let key = {
+        id: parent[0].rootId,
+        name: parent[0].rootName,
+        parentId: '',
+        levelType: parent[0].levelType
+    };
+    // add node to tree
+    objData$1[json.stringify(key)] = objParent;
+    return objData$1;
+}
+function findChild$1(id, objParent, array) {
+    const subNode = array.filter((x) => {
+        return x.parentId === id;
+    });
+    subNode.forEach((item) => {
+        const processNode = {};
+        let nodeKey = {
+            id: item.childId,
+            name: item.childName,
+            parentId: item.rootId,
+            levelType: item.levelType
+        };
+        processNode[json.stringify(nodeKey)] = null;
+        this.findChild(item.rootId, processNode, array);
+        let key = {
+            id: item.rootId,
+            name: item.subName,
+            parentId: id,
+            levelType: item.levelType
+        };
+        objParent[json.stringify(key)] = Object.assign(Object.assign({}, objParent[json.stringify(key)]), processNode);
+    });
+}
+const TreeFunctions = {
+    buildArrayTree: buildArrayTree$1,
+    buildObjectTree: buildObjectTree$1,
+    findParent: findParent$1,
+    findChild: findChild$1
+};
+
+class TreeComponent {
+    constructor(cdRef, domSanitizer, iconRegistry, appIconService) {
+        this.cdRef = cdRef;
+        this.domSanitizer = domSanitizer;
         this.iconRegistry = iconRegistry;
+        this.appIconService = appIconService;
         this.treeData = [];
         this.selectedData = [];
         this.selectedRiskData = [];
@@ -3271,6 +3755,7 @@ class TreeComponent {
         this.selectFolderEvent = new EventEmitter();
         this.checkBoxEvent = new EventEmitter();
         this.childCheckedEvent = new EventEmitter();
+        this.nodeExpandEvent = new EventEmitter();
         this.listParentObj = {};
         this.filterData = [];
         this.arrIndex = [];
@@ -3282,6 +3767,7 @@ class TreeComponent {
         this.allowMultipleCheck = true;
         this.singleSelectedNode = false;
         this.onlyCheckBoxForChild = false;
+        this.onlyFolder = false;
         this.itemIconType = ItemIconType;
         this.displayType = 1;
         this.openIcon = '';
@@ -3324,7 +3810,8 @@ class TreeComponent {
                 id: node.id,
                 hasChild: checkHasChild,
                 parentId: node.parentId,
-                disabled: false
+                disabled: false,
+                levelType: node.levelType
             };
         };
         this.treeFlattener = new MatTreeFlattener(this.transformer, (node) => {
@@ -3338,25 +3825,15 @@ class TreeComponent {
         this.hasChild = (_, node) => {
             return node.expandable;
         };
-        iconRegistry.addSvgIconLiteral('process', domSanitizer.bypassSecurityTrustHtml(PROCESS_ICON));
-        iconRegistry.addSvgIconLiteral('process_area', domSanitizer.bypassSecurityTrustHtml(PROCESS_AREA_ICON));
-        iconRegistry.addSvgIconLiteral('process_area_outlined', domSanitizer.bypassSecurityTrustHtml(PROCESS_AREA_OUTLINED_ICON));
-        iconRegistry.addSvgIconLiteral('document', domSanitizer.bypassSecurityTrustHtml(DOCUMENT_ICON));
-        iconRegistry.addSvgIconLiteral('checklist', domSanitizer.bypassSecurityTrustHtml(CHECKLIST_ICON));
-        iconRegistry.addSvgIconLiteral('deviation', domSanitizer.bypassSecurityTrustHtml(DEVIATION_ICON));
-        iconRegistry.addSvgIconLiteral('risk', domSanitizer.bypassSecurityTrustHtml(RISK_ICON));
-        iconRegistry.addSvgIconLiteral('folder', domSanitizer.bypassSecurityTrustHtml(NORMAL_FOLDER_ICON));
-        iconRegistry.addSvgIconLiteral('folder_outlined', domSanitizer.bypassSecurityTrustHtml(NORMAL_FOLDER_OUTLINED_ICON));
-        iconRegistry.addSvgIconLiteral('local_folder', domSanitizer.bypassSecurityTrustHtml(LOCAL_FOLDER_ICON));
-        iconRegistry.addSvgIconLiteral('local_folder_outlined', domSanitizer.bypassSecurityTrustHtml(LOCAL_FOLDER_OUTLINED_ICON));
-        iconRegistry.addSvgIconLiteral('enterprise_folder', domSanitizer.bypassSecurityTrustHtml(ENTERPRISE_FOLDER_ICON));
-        iconRegistry.addSvgIconLiteral('enterprise_folder_outlined', domSanitizer.bypassSecurityTrustHtml(ENTERPRISE_FOLDER_OUTLINED_ICON));
-        iconRegistry.addSvgIconLiteral('regional_folder', domSanitizer.bypassSecurityTrustHtml(REGIONAL_FOLDER_ICON));
-        iconRegistry.addSvgIconLiteral('regional_folder_outlined', domSanitizer.bypassSecurityTrustHtml(REGIONAL_FOLDER_OUTLINED_ICON));
-        iconRegistry.addSvgIconLiteral('department_folder', domSanitizer.bypassSecurityTrustHtml(DEPARTMENT_FOLDER_ICON));
-        iconRegistry.addSvgIconLiteral('department_folder_outlined', domSanitizer.bypassSecurityTrustHtml(DEPARTMENT_FOLDER_OUTLINED_ICON));
         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)) {
@@ -3418,6 +3895,7 @@ class TreeComponent {
         this.itemIconBase64 = this.domSanitizer.bypassSecurityTrustResourceUrl(this.treeConfig.itemIconBase64);
         this.allowMultipleCheck = this.treeConfig.allowMultipleCheck;
         this.singleSelectedNode = this.treeConfig.singleSelectedNode;
+        this.onlyFolder = this.treeConfig.onlyFolder;
         this.checklistSelection = new SelectionModel(this.allowMultipleCheck); /* true: multiple */
         this.displayType = this.getItemIconType(this.treeConfig);
         // Expand child node tree
@@ -3627,6 +4105,9 @@ class TreeComponent {
                     this.arrIndex.splice(i, 1);
                 }
             }
+            if (isExpandNode) {
+                this.nodeExpandEvent.emit(node);
+            }
             return;
         }
         // get array index to expand node after refresh datasource
@@ -3774,10 +4255,21 @@ class TreeComponent {
                 return this.treeControl.isExpanded(node) ? 'keyboard_up' : 'keyboard_down';
         }
     }
-    getItemIcon() {
+    getItemIcon(node) {
         switch (this.moduleId) {
             case DataType.document:
-                return 'document';
+                switch (node.levelType) {
+                    case DocumentNodeType.DepartmentFolder:
+                        return 'document_department';
+                    case DocumentNodeType.RegionalFolder:
+                        return 'document_regional';
+                    case DocumentNodeType.TopFolder:
+                        return 'document_enterprise';
+                    case DocumentNodeType.Folder:
+                        return 'document_local';
+                    default:
+                        return 'document';
+                }
             case DataType.process:
                 return 'process';
             case DataType.checklist:
@@ -3794,7 +4286,7 @@ class TreeComponent {
 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\"\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\"\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 class=\"expand-node\" *ngIf=\"node.name\" (click)=\"selectNode(node)\">\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()\"\r\n      ></mat-icon>\r\n      <span class=\"text-node\">{{ node.name }}</span>\r\n    </div>\r\n  </mat-tree-node>\r\n\r\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n    <!-- form thu 1 - parent -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"showCheckBox && !onlyCheckBoxForChild\"\r\n      [checked]=\"descendantsAllSelected(node)\"\r\n      [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <button\r\n      class=\"button-boder\"\r\n      mat-icon-button\r\n      matTreeNodeToggle\r\n      [disableRipple]=\"!node.hasChild\"\r\n      [attr.aria-label]=\"'toggle ' + node.filename\"\r\n      (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        [svgIcon]=\"getNodeIcon(node)\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <span\r\n      *ngIf=\"!allowSelectFolder\"\r\n      matTreeNodeToggle\r\n      class=\"text-node-parent\"\r\n      (click)=\"onExpandNode(node, treeControl.isExpanded(node))\"\r\n      style=\"cursor: pointer\"\r\n      [ngStyle]=\"{\r\n        color: treeControl.isExpanded(node) ? openIconColor : '#000000'\r\n      }\"\r\n    >\r\n      {{ node.name }}\r\n    </span>\r\n    <button\r\n      *ngIf=\"allowSelectFolder\"\r\n      mat-icon-button\r\n      class=\"button-folder-boder folder-icon\"\r\n      (click)=\"selectFolder(node)\"\r\n      [disableRipple]=\"true\"\r\n    >\r\n      {{ node.name }}\r\n    </button>\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 class=\"expand-node\" *ngIf=\"node.name && !onlyFolder\" (click)=\"selectNode(node)\">\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-tree-node>\r\n\r\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n    <!-- form thu 1 - parent -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"showCheckBox && !onlyCheckBoxForChild\"\r\n      [checked]=\"descendantsAllSelected(node)\"\r\n      [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <button\r\n      class=\"button-boder\"\r\n      mat-icon-button\r\n      matTreeNodeToggle\r\n      [disableRipple]=\"!node.hasChild\"\r\n      [attr.aria-label]=\"'toggle ' + node.filename\"\r\n      (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        [svgIcon]=\"getNodeIcon(node)\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <span\r\n      *ngIf=\"!allowSelectFolder\"\r\n      matTreeNodeToggle\r\n      class=\"text-node-parent\"\r\n      (click)=\"onExpandNode(node, treeControl.isExpanded(node))\"\r\n      style=\"cursor: pointer\"\r\n      [ngStyle]=\"{\r\n        color: treeControl.isExpanded(node) ? openIconColor : '#000000'\r\n      }\"\r\n    >\r\n      {{ node.name }}\r\n    </span>\r\n    <button\r\n      *ngIf=\"allowSelectFolder\"\r\n      mat-icon-button\r\n      class=\"button-folder-boder folder-icon\"\r\n      (click)=\"selectFolder(node)\"\r\n      [disableRipple]=\"true\"\r\n    >\r\n      {{ node.name }}\r\n    </button>\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;display:flex;align-items:center;min-height:32px}.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 span.text-node-parent{margin-left:10px}.tree__container .mr-11{margin-right:11px}.tree__container .ml-10{margin-left:10px}.tree__container .tree-branch:hover{background-color:#efefef}.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}"]
             },] }
@@ -3802,7 +4294,8 @@ TreeComponent.decorators = [
 TreeComponent.ctorParameters = () => [
     { type: ChangeDetectorRef },
     { type: DomSanitizer },
-    { type: MatIconRegistry }
+    { type: MatIconRegistry },
+    { type: QMSIconRegistryService }
 ];
 TreeComponent.propDecorators = {
     treeData: [{ type: Input }],
@@ -3813,17 +4306,19 @@ TreeComponent.propDecorators = {
     selectNodeEvent: [{ type: Output }],
     selectFolderEvent: [{ type: Output }],
     checkBoxEvent: [{ type: Output }],
-    childCheckedEvent: [{ type: Output }]
+    childCheckedEvent: [{ type: Output }],
+    nodeExpandEvent: [{ type: Output }]
 };
 
 class RelatedPopupComponent {
-    constructor(cdRef, translate, dialogRef, globalService, iconRegistry, sanitizer, data) {
+    constructor(cdRef, translate, dialogRef, globalService, iconRegistry, sanitizer, appIconService, data) {
         this.cdRef = cdRef;
         this.translate = translate;
         this.dialogRef = dialogRef;
         this.globalService = globalService;
         this.iconRegistry = iconRegistry;
         this.sanitizer = sanitizer;
+        this.appIconService = appIconService;
         this.data = data;
         this.ngUnsubscribe = new Subject();
         this.moduleId = 0;
@@ -3847,10 +4342,15 @@ class RelatedPopupComponent {
         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.onSearch = new EventEmitter();
+        this.onExpandFolder = new EventEmitter();
         this.moduleId = data.moduleId;
         this.moduleName = data.moduleName;
         this.treeData1 = data.treeData1;
@@ -3861,18 +4361,22 @@ class RelatedPopupComponent {
         this.singleSelectedNode = data.treeConfig1.singleSelectedNode;
         this.disabledList = data.disabledList || [];
         this.disabledList2 = data.disabledList2 || [];
-        iconRegistry.addSvgIconLiteral('process', sanitizer.bypassSecurityTrustHtml(PROCESS_ICON));
-        iconRegistry.addSvgIconLiteral('process_area', sanitizer.bypassSecurityTrustHtml(PROCESS_AREA_ICON));
-        iconRegistry.addSvgIconLiteral('process_area_outlined', sanitizer.bypassSecurityTrustHtml(PROCESS_AREA_OUTLINED_ICON));
-        iconRegistry.addSvgIconLiteral('document', sanitizer.bypassSecurityTrustHtml(DOCUMENT_ICON));
-        iconRegistry.addSvgIconLiteral('checklist', sanitizer.bypassSecurityTrustHtml(CHECKLIST_ICON));
-        iconRegistry.addSvgIconLiteral('deviation', sanitizer.bypassSecurityTrustHtml(DEVIATION_ICON));
-        iconRegistry.addSvgIconLiteral('risk', sanitizer.bypassSecurityTrustHtml(RISK_ICON));
+        this.splitView = data.splitView;
+        this.maxSelectItemCount = data.maxSelectItemCount;
+        appIconService.registerProcessIcon(iconRegistry, sanitizer);
+        appIconService.registerProcessAreaIcon(iconRegistry, sanitizer);
+        appIconService.registerDocumentIcon(iconRegistry, sanitizer);
+        appIconService.registerFolderIcon(iconRegistry, sanitizer);
+        appIconService.registerDeviationIcon(iconRegistry, sanitizer);
+        appIconService.registerChecklistIcon(iconRegistry, sanitizer);
+        appIconService.registerRiskIcon(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) {
@@ -3890,11 +4394,17 @@ class RelatedPopupComponent {
                 this.filteredOptions = res;
             }
         });
+        this.globalService.splitViewValue.pipe(takeUntil(this.ngUnsubscribe)).subscribe((res) => {
+            if (res) {
+                this.itemInSplitview = res;
+            }
+        });
         this.myControl.valueChanges.pipe(debounceTime(1000)).subscribe((val) => {
             this.isInputValue = true;
             this.onSearchRelated(val);
         });
         this.itemType = this.getDataTypeId(this.moduleId);
+        this.searchOrder = this.getSearchOrder();
     }
     ngAfterViewChecked() {
         this.cdRef.detectChanges();
@@ -3930,21 +4440,21 @@ class RelatedPopupComponent {
     removeCheckedNodeList(item) {
         this.selectedData = [];
         this.selectedData2 = [];
-        this.checkedNodeList = this.checkedNodeList.filter(x => (x.id !== item.id || x.parentId !== item.parentId));
+        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 === x.id && element.parentId === x.parentId) {
+                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 === x.id && element.parentId === x.parentId) {
+                if (element.id.toLowerCase() === x.id.toLowerCase() && element.parentId.toLowerCase() === x.parentId.toLowerCase()) {
                     newSelectProcessList.push(element);
                 }
             });
@@ -3953,14 +4463,14 @@ class RelatedPopupComponent {
         this.selectedData = [...tempArr];
         this.documentCheckedList.forEach(element => {
             this.checkedNodeList.forEach(x => {
-                if (element.id === x.id && element.parentId === x.parentId) {
+                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 === x.id && element.parentId === x.parentId) {
+                if (element.id.toLowerCase() === x.id.toLowerCase() && element.parentId.toLowerCase() === x.parentId.toLowerCase()) {
                     newSelectDocumentList.push(element);
                 }
             });
@@ -4045,7 +4555,8 @@ class RelatedPopupComponent {
                             id: item.id,
                             itemName: item.itemName,
                             itemType: typeId,
-                            itemNumberId: item.itemNumberId
+                            itemNumberId: item.itemNumberId,
+                            levelType: item.levelType
                         });
                     }
                     else {
@@ -4054,7 +4565,8 @@ class RelatedPopupComponent {
                             id: item.id,
                             itemName: item.itemName,
                             itemType: typeId,
-                            itemNumberId: item.itemNumberId
+                            itemNumberId: item.itemNumberId,
+                            levelType: item.levelType
                         });
                     }
                     this.dataTrees.toArray()[1].todoItemSelectionById([item.id]);
@@ -4082,7 +4594,8 @@ class RelatedPopupComponent {
                             id: node.rootId,
                             itemName: node.rootName,
                             itemType: typeId,
-                            itemNumberId: item.itemNumberId
+                            itemNumberId: item.itemNumberId,
+                            levelType: item.levelType
                         });
                     }
                     else {
@@ -4091,7 +4604,8 @@ class RelatedPopupComponent {
                             id: node.rootId,
                             itemName: node.rootName,
                             itemType: typeId,
-                            itemNumberId: item.itemNumberId
+                            itemNumberId: item.itemNumberId,
+                            levelType: item.levelType
                         });
                     }
                 }
@@ -4114,13 +4628,15 @@ class RelatedPopupComponent {
                 this.dataTrees.toArray()[0].todoItemSelection([treeNode]);
             }
             else {
-                // process, deviation, checklist,...
+                // process, risk,...
                 position = this.treeData1.findIndex(x => {
-                    return x.childId === item.id;
+                    return x.childId.toLowerCase() === item.id.toLowerCase();
                 });
                 node = this.treeData1[position];
                 typeId = this.itemType;
-                this.dataTrees.toArray()[0].todoItemSelectionById([item.id]);
+                if (node) {
+                    this.dataTrees.toArray()[0].todoItemSelectionById([node.childId]);
+                }
             }
         }
     }
@@ -4209,7 +4725,8 @@ class RelatedPopupComponent {
                             itemName: item.name,
                             itemType: (this.itemType === 2) ? this.setTypeProcess(item.expandable) : this.itemType,
                             itemNumberId: this.treeData1[position].displayId.toString(),
-                            parentId: item.parentId
+                            parentId: item.parentId,
+                            levelType: item.levelType
                         });
                     }
                 }
@@ -4223,7 +4740,8 @@ class RelatedPopupComponent {
                             itemType: this.itemType,
                             parentId: item.parentId,
                             parentName: this.treeData1[position].parentId ? this.treeData1[position].subName : this.treeData1[position].rootName,
-                            itemNumberId: this.treeData1[position].displayId.toString()
+                            itemNumberId: this.treeData1[position].displayId.toString(),
+                            levelType: item.levelType
                         });
                     }
                 }
@@ -4231,6 +4749,23 @@ class RelatedPopupComponent {
             if (this.singleSelectedNode) {
                 this.checkedNodeList = [...this.checkedNodeList, ...this.singleProcessList];
             }
+            if (this.maxSelectItemCount && this.maxSelectItemCount > 0) {
+                const removeList = this.checkedNodeList.slice(0, this.maxSelectItemCount * -1);
+                if (removeList.length) {
+                    removeList.forEach(item => {
+                        this.removeCheckedNodeList({
+                            id: item.id,
+                            name: item.itemName,
+                            parentId: item.parentId,
+                            level: 0,
+                            expandable: true,
+                            hasChild: true,
+                            disabled: false
+                        });
+                    });
+                }
+                this.checkedNodeList = this.checkedNodeList.slice(this.maxSelectItemCount * -1);
+            }
         }
     }
     getDocumentCheckedNode(list) {
@@ -4259,7 +4794,8 @@ class RelatedPopupComponent {
                             itemName: item.name,
                             itemType: item.expandable ? this.dataType.folder : this.dataType.document,
                             itemNumberId: this.treeData2[position].displayId.toString(),
-                            parentId: item.parentId
+                            parentId: item.parentId,
+                            levelType: item.levelType
                         });
                     }
                 }
@@ -4274,6 +4810,7 @@ class RelatedPopupComponent {
                             itemNumberId: this.treeData2[position].displayId.toString(),
                             parentId: item.parentId,
                             parentName: this.treeData2[position].rootName,
+                            levelType: item.levelType
                         });
                     }
                 }
@@ -4281,14 +4818,35 @@ class RelatedPopupComponent {
             if (this.singleSelectedNode) {
                 this.checkedNodeList = [...this.checkedNodeList, ...this.singleDocumentList];
             }
+            if (this.maxSelectItemCount && this.maxSelectItemCount > 0) {
+                const removeList = this.checkedNodeList.slice(0, this.maxSelectItemCount * -1);
+                if (removeList.length) {
+                    removeList.forEach(item => {
+                        this.removeCheckedNodeList({
+                            id: item.id,
+                            name: item.itemName,
+                            parentId: item.parentId,
+                            level: 0,
+                            expandable: true,
+                            hasChild: true,
+                            disabled: false
+                        });
+                    });
+                }
+                this.checkedNodeList = this.checkedNodeList.slice(this.maxSelectItemCount * -1);
+            }
         }
     }
     onCloseClick() {
+        this.selectedFolder = null;
+        this.itemInSplitview = [];
         this.dialogRef.close();
     }
     ;
     onAddClick() {
         // if (this.treeConfig1.showCheckBox) {
+        this.selectedFolder = null;
+        this.itemInSplitview = [];
         this.dialogRef.close(this.checkedNodeList);
         // }
         // else {
@@ -4304,22 +4862,148 @@ class RelatedPopupComponent {
         }
         return (elmHeight + elmMargin);
     }
-    getItemChipName(item) {
-        if (item.itemType === DataType.checklist || item.itemType === DataType.deviation) {
-            return item.parentName ? `${item.parentName}/${item.itemName}` : item.itemName;
+    getItemChipName(item) {
+        if (item.itemType === DataType.checklist || item.itemType === DataType.deviation) {
+            return item.parentName ? `${item.parentName}/${item.itemName}` : item.itemName;
+        }
+        return item.itemName;
+    }
+    isEllipsisActive(e) {
+        return e ? (e.clientWidth < e.scrollWidth) : false;
+    }
+    getNodeIcon(item) {
+        switch (item.itemType) {
+            case DataType.folder: {
+                switch (item.levelType) {
+                    case DocumentNodeType.DepartmentFolder:
+                        return 'department_folder_outlined';
+                    case DocumentNodeType.RegionalFolder:
+                        return 'regional_folder_outlined';
+                    case DocumentNodeType.TopFolder:
+                        return 'enterprise_folder_outlined';
+                    case DocumentNodeType.Folder:
+                        return 'local_folder_outlined';
+                    default:
+                        return 'folder_outlined';
+                }
+            }
+            case DataType.document: {
+                switch (item.levelType) {
+                    case DocumentNodeType.DepartmentFolder:
+                        return 'document_department';
+                    case DocumentNodeType.RegionalFolder:
+                        return 'document_regional';
+                    case DocumentNodeType.TopFolder:
+                        return 'document_enterprise';
+                    case DocumentNodeType.Folder:
+                        return 'document_local';
+                    default:
+                        return 'document';
+                }
+            }
+            case DataType.area:
+                return 'process_area_outlined';
+            case DataType.process:
+                return 'process';
+            case DataType.deviation:
+                return 'deviation';
+            case DataType.checklist:
+                return 'checklist';
+            case DataType.risk:
+                return 'risk';
+            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.process:
+                return this.LANG.PROCESSES;
+            case DataType.area:
+                return this.LANG.PROCESS_AREA;
+            case DataType.document:
+                return this.LANG.DOCUMENTS;
+            case DataType.folder:
+                return this.LANG.FOLDER;
+            case DataType.deviation:
+                return this.LANG.DEVIATION;
+            case DataType.deviationType:
+                return this.LANG.DEVIATION_TYPE;
+            case DataType.checklist:
+                return this.LANG.CHECKLIST;
+            case DataType.checklistCategory:
+                return this.LANG.CHECKLIST_CATEGORY;
+            case DataType.risk:
+                return this.LANG.ASSESSMENT;
+            case DataType.riskFolder:
+                return this.LANG.FOLDER;
+        }
+    }
+    getParentName(item) {
+        if (item.itemType === this.dataType.checklist || item.itemType === this.dataType.deviation) {
+            return item.parentName;
+        }
+        return null;
+    }
+    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,
+                name: node.itemName,
+                parentId: selectedNode.parentId,
+                hasChild: false,
+                expandable: false,
+                level: 0,
+                disabled: false,
+            });
+        }
+        else {
+            this.selectRelated(node);
         }
-        return item.itemName;
     }
-    isEllipsisActive(e) {
-        return e ? (e.clientWidth < e.scrollWidth) : false;
+    isNodeSelected(node) {
+        return this.checkedNodeList.filter(x => (x.id.toLowerCase() === node.id.toLowerCase() && x.parentId.toLowerCase() === node.parentId.toLowerCase())).length > 0;
+    }
+    getChildrenOfFolder(node, type) {
+        if (this.splitView) {
+            let item = new IRelated();
+            item.id = node.id;
+            item.itemType = type;
+            item.itemName = node.name;
+            item.levelType = node.levelType;
+            this.selectedFolder = node;
+            if (type === this.dataType.folder) {
+                this.splitViewTitle = `${this.LANG.MESSAGE.DOCUMENTS_IN.toUpperCase()} "${node.name}"`;
+            }
+            else if (type === this.dataType.area) {
+                this.splitViewTitle = `${this.LANG.MESSAGE.PROCESSES_IN.toUpperCase()} "${node.name}"`;
+            }
+            this.onExpandFolder.emit(item);
+        }
     }
 }
 RelatedPopupComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-related-popup',
-                template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    id=\"qmslib_related_popup_search\"\r\n    class=\"input__field\"\r\n    (click)=\"showSearchResult()\"\r\n  >\r\n    <input\r\n      #name\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n      #autoCompleteInputSearch\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"displayRelated\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      class=\"related-viewport\"\r\n    >\r\n      <!-- Process -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.process).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.PROCESSES }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.process)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item type=\"image-square\">\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              svgIcon=\"process\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                {{ option.itemName }}\r\n              </div>\r\n            </div>\r\n            <div qms-line color=\"default-subtitle\">\r\n              <span class=\"material-icons-outlined search__description-icon\">\r\n                local_offer\r\n              </span>\r\n              {{ LANG.PROCESS_ID }}: {{ option.itemNumberId }};\r\n              {{ option.statusName }}\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Document -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.document).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.DOCUMENTS }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.document)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item type=\"image-square\">\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              svgIcon=\"document\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n            <div qms-line color=\"default-subtitle\">\r\n              <span class=\"material-icons-outlined search__description-icon\">\r\n                local_offer\r\n              </span>\r\n              {{ LANG.DOCUMENT_ID }}: {{ option.itemNumberId }};\r\n              {{ option.statusName }}\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Process Area -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.area).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.PROCESS_AREA }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.area)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              svgIcon=\"process_area_outlined\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Document Folder -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.folder).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.FOLDER }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.folder)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon leading-icon>folder_open</mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Categories -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.deviation).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.DEVIATION }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.deviation)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              svgIcon=\"deviation\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"caption\" \r\n                qms-tool-tip=\"{{ isEllipsisActive(searchItemResult) ? option.parentName : '' }}\"\r\n                mode=\"dark\"\r\n              ><span #searchItemResult class=\"search__result__parent-name\">\r\n                {{ option.parentName }}\r\n                </span></div>\r\n                <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n\r\n      <!-- Deviation types -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.deviationType).length > 0\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.DEVIATION_TYPE }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"\r\n            let option of getModuleFilteredOptions(dataType.deviationType)\r\n          \"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon leading-icon>folder_open</mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Checklist -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.checklist).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.CHECKLIST }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.checklist)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              svgIcon=\"checklist\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"caption\" \r\n                qms-tool-tip=\"{{ isEllipsisActive(searchItemResult) ? option.parentName : '' }}\"\r\n                mode=\"dark\"\r\n               ><span #searchItemResult class=\"search__result__parent-name\">{{ option.parentName }}</span>\r\n              </div>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Checklist category -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.checklistCategory).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.CHECKLIST_CATEGORY }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"\r\n            let option of getModuleFilteredOptions(dataType.checklistCategory)\r\n          \"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon leading-icon type=\"image-square\">folder_open</mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Risk -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.risk).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.ASSESSMENT }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.risk)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              svgIcon=\"risk\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n      <!-- Risk folder -->\r\n      <div\r\n        class=\"search__module-result\"\r\n        *ngIf=\"getModuleFilteredOptions(dataType.riskFolder).length\"\r\n      >\r\n        <span class=\"search__module-title\">{{ LANG.FOLDER }}</span>\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions(dataType.riskFolder)\"\r\n          [value]=\"option\"\r\n          (click)=\"selectRelated(option)\"\r\n        >\r\n          <qms-list-item>\r\n            <mat-icon leading-icon type=\"image-square\">folder_open</mat-icon>\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\">{{ option.itemName }}</div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div\r\n    class=\"qms-scrollbar qmslib_related_popup_content\"\r\n    [ngClass]=\"{\r\n      panel__content_item: checkedNodeList.length,\r\n      panel__content: !checkedNodeList.length\r\n    }\"\r\n  >\r\n    <mat-expansion-panel\r\n      hideToggle\r\n      id=\"qmslib_related_popup_common_001\"\r\n      [expanded]=\"isCommonExpanded\"\r\n      (opened)=\"isCommonExpanded = true\"\r\n      (closed)=\"isCommonExpanded = false\"\r\n    >\r\n      <mat-expansion-panel-header class=\"padding-5\">\r\n        <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n          {{ LANG.PROCESSES | uppercase }}\r\n        </mat-panel-title>\r\n        <mat-panel-title *ngIf=\"moduleId === module.deviation\">\r\n          {{ LANG.DEVIATION | uppercase }}\r\n        </mat-panel-title>\r\n        <mat-panel-title *ngIf=\"moduleId === module.checklist\">\r\n          {{ LANG.CHECKLIST | uppercase }}\r\n        </mat-panel-title>\r\n        <mat-panel-title *ngIf=\"moduleId === module.risk\">\r\n          {{ LANG.ASSESSMENT | uppercase }}\r\n        </mat-panel-title>\r\n        <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n          <mat-icon>\r\n            {{ isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\" }}\r\n          </mat-icon>\r\n        </button>\r\n      </mat-expansion-panel-header>\r\n      <div id=\"qmslib_related_popup_common_002\">\r\n        <qms-tree\r\n          [treeData]=\"treeData1\"\r\n          [treeConfig]=\"treeConfig1\"\r\n          [selectedData]=\"selectedData\"\r\n          [selectedRiskData]=\"selectedRiskData\"\r\n          [disabledList]=\"disabledList\"\r\n          (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n        ></qms-tree>\r\n      </div>\r\n    </mat-expansion-panel>\r\n\r\n    <div\r\n      *ngIf=\"moduleId === module.documentProcess\"\r\n      class=\"line__divider\"\r\n    ></div>\r\n\r\n    <mat-expansion-panel\r\n      hideToggle\r\n      *ngIf=\"moduleId === module.documentProcess\"\r\n      id=\"qmslib_related_popup_document_001\"\r\n      [expanded]=\"isDocumentExpanded\"\r\n      (opened)=\"isDocumentExpanded = true\"\r\n      (closed)=\"isDocumentExpanded = false\"\r\n    >\r\n      <mat-expansion-panel-header class=\"padding-5\">\r\n        <mat-panel-title> {{ LANG.DOCUMENTS | uppercase }} </mat-panel-title>\r\n        <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n          <mat-icon>\r\n            {{\r\n              isDocumentExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n            }}\r\n          </mat-icon>\r\n        </button>\r\n      </mat-expansion-panel-header>\r\n      <div id=\"qmslib_related_popup_document_002\">\r\n        <qms-tree\r\n          [treeData]=\"treeData2\"\r\n          [treeConfig]=\"treeConfig2\"\r\n          [selectedData]=\"selectedData2\"\r\n          [disabledList]=\"disabledList2\"\r\n          (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\r\n        ></qms-tree>\r\n      </div>\r\n    </mat-expansion-panel>\r\n  </div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n      <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        qms-tool-tip=\"{{ isEllipsisActive(itemName) ? getItemChipName(item) : '' }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)}}</span>\r\n        <mat-icon (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button\r\n      *ngIf=\"!checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 7px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 0px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button\r\n      qms-btn-text\r\n      [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
+                template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    id=\"qmslib_related_popup_search\"\r\n    class=\"input__field\"\r\n    (click)=\"showSearchResult()\"\r\n  >\r\n    <input\r\n      #name\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n      #autoCompleteInputSearch\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"displayRelated\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      class=\"related-viewport\"\r\n    >\r\n      <ng-container *ngFor=\"let type of searchOrder\">\r\n        <div\r\n          class=\"search__module-result\"\r\n          *ngIf=\"getModuleFilteredOptions(type.value).length\"\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      >\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          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\r\n\r\n      <div\r\n        *ngIf=\"moduleId === module.documentProcess\"\r\n        class=\"line__divider\"\r\n      ></div>\r\n\r\n      <mat-expansion-panel\r\n        hideToggle\r\n        *ngIf=\"moduleId === module.documentProcess\"\r\n        id=\"qmslib_related_popup_document_001\"\r\n        [expanded]=\"isDocumentExpanded\"\r\n        (opened)=\"isDocumentExpanded = true\"\r\n        (closed)=\"isDocumentExpanded = false\"\r\n      >\r\n        <mat-expansion-panel-header class=\"padding-5\">\r\n          <mat-panel-title> {{ LANG.DOCUMENTS | uppercase }} </mat-panel-title>\r\n          <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n            <mat-icon>\r\n              {{\r\n                isDocumentExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n              }}\r\n            </mat-icon>\r\n          </button>\r\n        </mat-expansion-panel-header>\r\n        <div id=\"qmslib_related_popup_document_002\">\r\n          <qms-tree\r\n            [treeData]=\"treeData2\"\r\n            [treeConfig]=\"treeConfig2\"\r\n            [selectedData]=\"selectedData2\"\r\n            [disabledList]=\"disabledList2\"\r\n            (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\r\n            (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\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 (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button\r\n      *ngIf=\"!checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 7px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 0px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button\r\n      qms-btn-text\r\n      [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
                 encapsulation: ViewEncapsulation.None,
-                styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:#eee}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:#e5e5e5;max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .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 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 .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:#e5e5e5;max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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}"]
             },] }
 ];
 RelatedPopupComponent.ctorParameters = () => [
@@ -4329,6 +5013,7 @@ RelatedPopupComponent.ctorParameters = () => [
     { type: QMSRelatedGlobalService },
     { type: MatIconRegistry },
     { type: DomSanitizer },
+    { type: QMSIconRegistryService },
     { type: PopupData, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
 ];
 RelatedPopupComponent.propDecorators = {
@@ -4438,7 +5123,7 @@ RiskAnalysisComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-risk-analysis',
                 template: "<div\r\n  id=\"qmslib_risk_analysis\"\r\n  class=\"qmslib__risk__analysis__container qms__popup\"\r\n>\r\n  <div id=\"qmslib_risk_analysis_title\">\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_risk_analysis_title_001\" mat-dialog-content class=\"title\">\r\n      <span>{{ title }}</span>\r\n    </div>\r\n  </div>\r\n  <div id=\"qmslib_risk_analysis_header_001\" class=\"regular\">\r\n    <span>{{ LANG.REGULAR_TITLE }}</span>\r\n  </div>\r\n  <div id=\"qmslib_risk_analysis_header_002\" class=\"caption__regular\">\r\n    <span>{{ LANG.CAPTION_TITLE }}</span>\r\n  </div>\r\n  <div class=\"line__divider\"></div>\r\n  <div id=\"qmslib_risk_analysis_header_003\" class=\"overline\">\r\n    <span>{{ LANG.CAUSAL_ANALYZES | uppercase }}</span>\r\n  </div>\r\n  <div\r\n    id=\"qmslib_risk_analysis_content\"\r\n    class=\"panel__content qms-scrollbar\"\r\n    [ngClass]=\"\r\n      !analysisDanger.length ? 'panel__content__error' : 'panel__content'\r\n    \"\r\n  >\r\n    <qms-tree\r\n      [treeData]=\"dangers\"\r\n      [treeConfig]=\"dangerConfig\"\r\n      [selectedData]=\"selectedData\"\r\n      [disabledList]=\"disabledList\"\r\n      (checkBoxEvent)=\"toggleChileNode($event)\"\r\n    ></qms-tree>\r\n  </div>\r\n\r\n  <div *ngIf=\"!analysisDanger.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"!analysisDanger.length\" class=\"panel__error\">\r\n    <span class=\"material-icons-outlined\">info</span>\r\n    <span class=\"message\"> {{ LANG.ERROR.SELECT_DANGER }}</span>\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      qms-btn\r\n      [disabled]=\"!analysisDanger.length\"\r\n      (click)=\"onFinishClick()\"\r\n    >\r\n      {{ LANG.FINISHED }}\r\n    </button>\r\n    <button qms-btn-text (click)=\"onCancelClick()\">\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
-                styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.qmslib__risk__analysis__container .title{font:Raleway;font-weight:600;font-style:normal;font-size:16px;line-height:22px;color:#323232}.qmslib__risk__analysis__container .line__divider{border-bottom:1px solid #ccc;height:1px;min-width:300px;max-width:100%}.qmslib__risk__analysis__container .regular{font-family:Open Sans;font-weight:400;font-style:normal;font-size:16px;line-height:28px;margin-top:10px}.qmslib__risk__analysis__container .caption__regular{font-family:Open Sans;font-weight:400;font-style:normal;font-size:12px;line-height:16px;margin-top:10px}.qmslib__risk__analysis__container .overline{font-family:Raleway;font-weight:600;font-style:normal;font-size:12px;letter-spacing:1px;line-height:16px;margin-top:15px}.qmslib__risk__analysis__container .panel__content{height:394px;overflow:auto;margin-top:12px}.qmslib__risk__analysis__container .panel__content__error{height:354px;overflow:auto;margin-top:12px}.qmslib__risk__analysis__container .panel__error{height:40px;color:#b00020;display:flex;flex-wrap:wrap;align-content:center;margin-left:15px}.qmslib__risk__analysis__container .panel__error .message{font-family:Open Sans;font-weight:400;font-style:normal;font-size:14px;line-height:22px;margin-left:10px}.qmslib__risk__analysis__container .mat-dialog-content.title{padding:0}"]
+                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__risk__analysis__container .title{font:Raleway;font-weight:600;font-style:normal;font-size:16px;line-height:22px;color:#323232}.qmslib__risk__analysis__container .line__divider{border-bottom:1px solid #ccc;height:1px;min-width:300px;max-width:100%}.qmslib__risk__analysis__container .regular{font-family:Open Sans;font-weight:400;font-style:normal;font-size:16px;line-height:28px;margin-top:10px}.qmslib__risk__analysis__container .caption__regular{font-family:Open Sans;font-weight:400;font-style:normal;font-size:12px;line-height:16px;margin-top:10px}.qmslib__risk__analysis__container .overline{font-family:Raleway;font-weight:600;font-style:normal;font-size:12px;letter-spacing:1px;line-height:16px;margin-top:15px}.qmslib__risk__analysis__container .panel__content{height:394px;overflow:auto;margin-top:12px}.qmslib__risk__analysis__container .panel__content__error{height:354px;overflow:auto;margin-top:12px}.qmslib__risk__analysis__container .panel__error{height:40px;color:#b00020;display:flex;flex-wrap:wrap;align-content:center;margin-left:15px}.qmslib__risk__analysis__container .panel__error .message{font-family:Open Sans;font-weight:400;font-style:normal;font-size:14px;line-height:22px;margin-left:10px}.qmslib__risk__analysis__container .mat-dialog-content.title{padding:0}"]
             },] }
 ];
 RiskAnalysisComponent.ctorParameters = () => [
@@ -4448,108 +5133,6 @@ RiskAnalysisComponent.ctorParameters = () => [
     { type: RiskAnalysis, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
 ];
 
-var Color;
-(function (Color) {
-    Color[Color["green"] = 1] = "green";
-    Color[Color["yellow"] = 2] = "yellow";
-    Color[Color["red"] = 3] = "red";
-})(Color || (Color = {}));
-
-class RiskResult {
-    constructor() {
-        this.title = '';
-        this.results = [];
-        this.isSimple = 0;
-    }
-}
-class Result {
-}
-
-class RiskResultComponent {
-    constructor(translate, dialogRef, data) {
-        this.translate = translate;
-        this.dialogRef = dialogRef;
-        this.data = data;
-        this.results = [];
-        this.color = Color;
-        this.isSimple = 0;
-        this.title = data.title;
-        this.results = data.results;
-        this.isSimple = data.isSimple || 0;
-    }
-    ngOnInit() {
-        this.translate.getLanguageSubject$.pipe().subscribe((res) => {
-            if (res) {
-                this.LANG = this.translate.getObjectLang(res);
-            }
-        });
-    }
-    onCloseClick() {
-        this.dialogRef.close();
-    }
-}
-RiskResultComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'qms-risk-result',
-                template: "<div class=\"dialog-container\">\r\n  <div mat-dialog-title class=\"dialog-title\">\r\n    <h3 class=\"title\">{{ title }}</h3>\r\n    <button\r\n      qms-btn-icon\r\n      color=\"light\"\r\n      qms-tool-tip=\"Caption\"\r\n      mode=\"dark\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <mat-dialog-content>\r\n    <div class=\"flex-container-header\">\r\n      <div class=\"first\">{{ isSimple ? LANG.EVENT : LANG.CAUSE }}</div>\r\n      <div class=\"second\">{{ LANG.AREA_OF_IMPACT }}</div>\r\n      <div class=\"third\">{{ LANG.RESULT }}</div>\r\n    </div>\r\n    <div class=\"flex-container\" *ngFor=\"let item of results\">\r\n      <!-- g y r 1 2 3   done -->\r\n      <div class=\"first\" [ngSwitch]=\"item.color\">\r\n        <label *ngSwitchCase=\"3\" class=\"label-red\"></label>\r\n        <label *ngSwitchCase=\"1\" class=\"label-green\"></label>\r\n        <label *ngSwitchCase=\"2\" class=\"label-yellow\"></label>\r\n        {{ item.cause }}\r\n      </div>\r\n      <div class=\"second\">{{ item.consequenceArea }}</div>\r\n      <ng-container [ngSwitch]=\"item.color\">\r\n        <div class=\"third text-red\" *ngSwitchCase=\"3\">\r\n          <span class=\"material-icons-outlined\">report_problem</span>\r\n          {{ LANG.NOT_ACCEPTED }}\r\n        </div>\r\n        <div class=\"third text-yellow\" *ngSwitchCase=\"2\">\r\n          <mat-icon>error_outline</mat-icon>\r\n          {{ LANG.MUST_BE_EVALUATED }}\r\n        </div>\r\n        <div class=\"third text-green\" *ngSwitchCase=\"1\">\r\n          <mat-icon>done</mat-icon>\r\n          {{ LANG.ACCEPTED }}\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </mat-dialog-content>\r\n</div>\r\n",
-                styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.dialog-title{display:flex;justify-content:space-between}.dialog-title h3.title{font-family:Raleway;font-style:normal;font-weight:500;font-size:22px;line-height:26px}.flex-container-header{display:flex;align-items:center;font-size:.75rem;border-radius:4px;line-height:16px}.flex-container-header>div{font-family:Open Sans;font-style:normal;font-weight:600;text-align:left;padding:10px 25px;color:rgba(0,0,0,.6)}.flex-container-header .first{flex:0 1 40%}.flex-container-header .second,.flex-container-header .third{flex:0 1 30%}.flex-container{display:flex;align-items:center;font-size:.875rem;line-height:22px;border-radius:4px;border:1px solid #ddd;min-height:48px;margin-bottom:10px}.flex-container>div{font-family:Open Sans;font-style:normal;text-align:left;padding:10px 25px;color:#323232}.flex-container .first{display:flex;flex:0 1 40%;align-items:center;font-weight:600}.flex-container .second{flex:0 1 30%;font-weight:400}.flex-container .third{display:flex;flex:0 1 30%;align-items:center;font-weight:600;font-size:.75rem}.flex-container .third.text-green,.flex-container .third.text-red,.flex-container .third.text-yellow{font-size:.75rem}.flex-container .third.text-green .mat-icon,.flex-container .third.text-green .material-icons-outlined,.flex-container .third.text-red .mat-icon,.flex-container .third.text-red .material-icons-outlined,.flex-container .third.text-yellow .mat-icon,.flex-container .third.text-yellow .material-icons-outlined{margin-right:1rem}.flex-container .third.text-red{color:#b00020}.flex-container .third.text-yellow{color:#726729}.flex-container .third.text-green{color:#005935}.label-green,.label-red,.label-yellow{font-family:Open Sans;font-style:normal;font-weight:600;display:flex;text-align:center;margin-right:1rem;width:24px;height:24px;flex:0 0 24px;border-radius:1px}.label-red{background-color:#9e360f;color:#fff}.label-yellow{background-color:#e4cf53;color:rgba(0,0,0,.87)}.label-green{background-color:#00804c;color:#fff}"]
-            },] }
-];
-RiskResultComponent.ctorParameters = () => [
-    { type: TranslateLibraryService },
-    { type: MatDialogRef },
-    { type: RiskResult, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
-];
-
-class SideNav {
-    constructor() {
-        this.menu = '';
-        this.icon = '';
-        this.items = [];
-    }
-}
-class SideNavItem {
-}
-
-class SidenavComponent {
-    constructor() {
-        this.data = new SideNav();
-        this.menu = '';
-        this.icon = '';
-        this.items = [];
-        this.isExpanded = true;
-        this.showSubmenu = false;
-        this.isShowing = false;
-        this.showSubSubMenu = false;
-    }
-    ngOnInit() {
-        this.menu = this.data.menu;
-        this.icon = this.data.icon;
-        this.items = this.data.items;
-    }
-    mouseenter() {
-        if (!this.isExpanded) {
-            this.isShowing = true;
-        }
-    }
-    mouseleave() {
-        if (!this.isExpanded) {
-            this.isShowing = false;
-        }
-    }
-}
-SidenavComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'qms-sidenav',
-                template: "<mat-sidenav\r\n  #sidenav\r\n  class=\"sidenav__container\"\r\n  mode=\"side\"\r\n  opened=\"true\"\r\n  (mouseenter)=\"mouseenter()\"\r\n  (mouseleave)=\"mouseleave()\"\r\n>\r\n  <mat-nav-list>\r\n    <mat-list-item (click)=\"showSubmenu = !showSubmenu\">\r\n      <span class=\"sidenav-width\" *ngIf=\"isExpanded || isShowing\">{{\r\n        menu\r\n      }}</span>\r\n      <mat-icon mat-list-icon>{{ icon }}</mat-icon>\r\n      <mat-icon\r\n        class=\"menu-button\"\r\n        [ngClass]=\"{ rotated: showSubmenu }\"\r\n        *ngIf=\"isExpanded || isShowing\"\r\n        >expand_more</mat-icon\r\n      >\r\n    </mat-list-item>\r\n    <div\r\n      class=\"submenu\"\r\n      [ngClass]=\"{ expanded: showSubmenu }\"\r\n      *ngIf=\"isShowing || isExpanded\"\r\n    >\r\n      <div *ngFor=\"let item of items\">\r\n        <a mat-list-item href=\"{{ item.url }}\">{{ item.name }}</a>\r\n      </div>\r\n    </div>\r\n  </mat-nav-list>\r\n  <mat-nav-list> </mat-nav-list>\r\n</mat-sidenav>\r\n",
-                styles: [".sidenav__container{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sidenav-width{width:100%}.menu-button{transition:.3s ease-in-out;transform:rotate(0deg)}.menu-button.rotated{transform:rotate(180deg)}.submenu{overflow-y:hidden;transition:transform .3s ease;transform:scaleY(0);transform-origin:top;padding-left:30px}.submenu.expanded{transform:scaleY(1)}"]
-            },] }
-];
-SidenavComponent.propDecorators = {
-    data: [{ type: Input }],
-    sidenav: [{ type: ViewChild, args: ['sidenav',] }]
-};
-
 var ActionType;
 (function (ActionType) {
     ActionType[ActionType["edit"] = 1] = "edit";
@@ -4708,72 +5291,106 @@ RiskListComponent.propDecorators = {
     updateData: [{ type: Output }]
 };
 
-class RelatedListComponent {
-    constructor(domSanitizer, translate, iconRegistry) {
-        this.domSanitizer = domSanitizer;
-        this.translate = translate;
-        this.iconRegistry = iconRegistry;
-        this.relatedData = [];
-        this.dataType = DataType;
-        // imageProcess = '../qms-angular/src/assets/images/union.svg';
-        this.imageProcess = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAwLjVWNi41SDJWMTYuNUgxMlYxOC41SDE4VjEyLjVIMTJWMTQuNUg0VjYuNUg2VjQuNUgxMlY2LjVIMThWMC41SDEyVjIuNUg2VjAuNUgwWk00IDIuNVY0LjVIMlYyLjVINFpNMTYgMi41VjQuNUgxNFYyLjVIMTZaTTE2IDE2LjVWMTQuNUgxNFYxNi41SDE2WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC42Ii8+DQo8L3N2Zz4NCg==';
-        this.updateData = new EventEmitter();
-        this.onItemSelect = new EventEmitter();
-        iconRegistry.addSvgIconLiteral('process_area', domSanitizer.bypassSecurityTrustHtml(PROCESS_AREA_ICON));
+var Color;
+(function (Color) {
+    Color[Color["green"] = 1] = "green";
+    Color[Color["yellow"] = 2] = "yellow";
+    Color[Color["red"] = 3] = "red";
+})(Color || (Color = {}));
+
+class RiskResult {
+    constructor() {
+        this.title = '';
+        this.results = [];
+        this.isSimple = 0;
     }
-    ngOnChanges(changes) {
-        var _a;
-        if (changes.data && JSON.stringify(changes.data.currentValue) !== JSON.stringify(changes.data.previousValue)) {
-            this.relatedData = [];
-            this.title = changes.data.currentValue.title;
-            this.isNotEditedItem = (_a = changes.data.currentValue['isNotEditedItem']) !== null && _a !== void 0 ? _a : false;
-            this.relatedData = [...changes.data.currentValue.data];
-        }
+}
+class Result {
+}
+
+class RiskResultComponent {
+    constructor(translate, dialogRef, data) {
+        this.translate = translate;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.results = [];
+        this.color = Color;
+        this.isSimple = 0;
+        this.title = data.title;
+        this.results = data.results;
+        this.isSimple = data.isSimple || 0;
     }
     ngOnInit() {
-        var _a;
-        this.title = this.data.title;
-        this.isNotEditedItem = (_a = this.data['isNotEditedItem']) !== null && _a !== void 0 ? _a : false;
-        this.relatedData = this.data.data;
         this.translate.getLanguageSubject$.pipe().subscribe((res) => {
             if (res) {
                 this.LANG = this.translate.getObjectLang(res);
             }
         });
     }
-    getImagePath() {
-        return this.domSanitizer.bypassSecurityTrustResourceUrl(this.imageProcess);
+    onCloseClick() {
+        this.dialogRef.close();
     }
-    removeItem(index) {
-        this.updateData.emit(index);
+}
+RiskResultComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'qms-risk-result',
+                template: "<div class=\"dialog-container\">\r\n  <div mat-dialog-title class=\"dialog-title\">\r\n    <h3 class=\"title\">{{ title }}</h3>\r\n    <button\r\n      qms-btn-icon\r\n      color=\"light\"\r\n      qms-tool-tip=\"Caption\"\r\n      mode=\"dark\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <mat-dialog-content>\r\n    <div class=\"flex-container-header\">\r\n      <div class=\"first\">{{ isSimple ? LANG.EVENT : LANG.CAUSE }}</div>\r\n      <div class=\"second\">{{ LANG.AREA_OF_IMPACT }}</div>\r\n      <div class=\"third\">{{ LANG.RESULT }}</div>\r\n    </div>\r\n    <div class=\"flex-container\" *ngFor=\"let item of results\">\r\n      <!-- g y r 1 2 3   done -->\r\n      <div class=\"first\" [ngSwitch]=\"item.color\">\r\n        <label *ngSwitchCase=\"3\" class=\"label-red\"></label>\r\n        <label *ngSwitchCase=\"1\" class=\"label-green\"></label>\r\n        <label *ngSwitchCase=\"2\" class=\"label-yellow\"></label>\r\n        {{ item.cause }}\r\n      </div>\r\n      <div class=\"second\">{{ item.consequenceArea }}</div>\r\n      <ng-container [ngSwitch]=\"item.color\">\r\n        <div class=\"third text-red\" *ngSwitchCase=\"3\">\r\n          <span class=\"material-icons-outlined\">report_problem</span>\r\n          {{ LANG.NOT_ACCEPTED }}\r\n        </div>\r\n        <div class=\"third text-yellow\" *ngSwitchCase=\"2\">\r\n          <mat-icon>error_outline</mat-icon>\r\n          {{ LANG.MUST_BE_EVALUATED }}\r\n        </div>\r\n        <div class=\"third text-green\" *ngSwitchCase=\"1\">\r\n          <mat-icon>done</mat-icon>\r\n          {{ LANG.ACCEPTED }}\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </mat-dialog-content>\r\n</div>\r\n",
+                styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.dialog-title{display:flex;justify-content:space-between}.dialog-title h3.title{font-family:Raleway;font-style:normal;font-weight:500;font-size:22px;line-height:26px}.flex-container-header{display:flex;align-items:center;font-size:.75rem;border-radius:4px;line-height:16px}.flex-container-header>div{font-family:Open Sans;font-style:normal;font-weight:600;text-align:left;padding:10px 25px;color:rgba(0,0,0,.6)}.flex-container-header .first{flex:0 1 40%}.flex-container-header .second,.flex-container-header .third{flex:0 1 30%}.flex-container{display:flex;align-items:center;font-size:.875rem;line-height:22px;border-radius:4px;border:1px solid #ddd;min-height:48px;margin-bottom:10px}.flex-container>div{font-family:Open Sans;font-style:normal;text-align:left;padding:10px 25px;color:#323232}.flex-container .first{display:flex;flex:0 1 40%;align-items:center;font-weight:600}.flex-container .second{flex:0 1 30%;font-weight:400}.flex-container .third{display:flex;flex:0 1 30%;align-items:center;font-weight:600;font-size:.75rem}.flex-container .third.text-green,.flex-container .third.text-red,.flex-container .third.text-yellow{font-size:.75rem}.flex-container .third.text-green .mat-icon,.flex-container .third.text-green .material-icons-outlined,.flex-container .third.text-red .mat-icon,.flex-container .third.text-red .material-icons-outlined,.flex-container .third.text-yellow .mat-icon,.flex-container .third.text-yellow .material-icons-outlined{margin-right:1rem}.flex-container .third.text-red{color:#b00020}.flex-container .third.text-yellow{color:#726729}.flex-container .third.text-green{color:#005935}.label-green,.label-red,.label-yellow{font-family:Open Sans;font-style:normal;font-weight:600;display:flex;text-align:center;margin-right:1rem;width:24px;height:24px;flex:0 0 24px;border-radius:1px}.label-red{background-color:#9e360f;color:#fff}.label-yellow{background-color:#e4cf53;color:rgba(0,0,0,.87)}.label-green{background-color:#00804c;color:#fff}"]
+            },] }
+];
+RiskResultComponent.ctorParameters = () => [
+    { type: TranslateLibraryService },
+    { type: MatDialogRef },
+    { type: RiskResult, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
+
+class SideNav {
+    constructor() {
+        this.menu = '';
+        this.icon = '';
+        this.items = [];
     }
-    onCloseClick() {
+}
+class SideNavItem {
+}
+
+class SidenavComponent {
+    constructor() {
+        this.data = new SideNav();
+        this.menu = '';
+        this.icon = '';
+        this.items = [];
+        this.isExpanded = true;
+        this.showSubmenu = false;
+        this.isShowing = false;
+        this.showSubSubMenu = false;
     }
-    onItemClick(item) {
-        if (this.onItemSelect)
-            this.onItemSelect.emit(item);
+    ngOnInit() {
+        this.menu = this.data.menu;
+        this.icon = this.data.icon;
+        this.items = this.data.items;
     }
-    getItemStatus(item) {
-        return (this.showStatus && (item === null || item === void 0 ? void 0 : item.statusName)) ? `, ${item === null || item === void 0 ? void 0 : item.statusName}` : '';
+    mouseenter() {
+        if (!this.isExpanded) {
+            this.isShowing = true;
+        }
+    }
+    mouseleave() {
+        if (!this.isExpanded) {
+            this.isShowing = false;
+        }
     }
 }
-RelatedListComponent.decorators = [
+SidenavComponent.decorators = [
     { type: Component, args: [{
-                selector: 'qms-related-list',
-                template: "<div class=\"container list-related\">\r\n  <div class=\"list-related__title\">\r\n    <strong>{{ title }}</strong>\r\n  </div>\r\n  <div\r\n    class=\"list-related__body\"\r\n    *ngFor=\"let item of relatedData; let i = index\"\r\n  >\r\n    <div class=\"list-related__body-parent\">\r\n      <div class=\"block\">\r\n        <ng-container [ngSwitch]=\"item.itemType\">\r\n          <ng-container *ngSwitchCase=\"dataType.document\">\r\n            <mat-icon class=\"material-icons-outlined\"\r\n              >insert_drive_file</mat-icon\r\n            >\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"dataType.folder\">\r\n            <mat-icon class=\"material-icons-outlined\" leading-icon\r\n              >folder</mat-icon\r\n            >\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"dataType.process\">\r\n            <img class=\"mat-icon\" [src]=\"getImagePath()\" />\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"dataType.area\">\r\n            <mat-icon svgIcon=\"process_area\"></mat-icon>\r\n          </ng-container>\r\n\r\n          <mat-icon\r\n            *ngSwitchCase=\"dataType.deviation\"\r\n            class=\"material-icons-outlined\"\r\n            >report_problem</mat-icon\r\n          >\r\n          <mat-icon *ngSwitchCase=\"dataType.checklist\"\r\n            >format_list_bulleted</mat-icon\r\n          >\r\n        </ng-container>\r\n        <div class=\"title cursor\" (click)=\"onItemClick(item)\">\r\n          <div class=\"caption\" *ngIf=\"item?.parentName\">\r\n            {{ item?.parentName }}\r\n          </div>\r\n          {{ item.itemName }}\r\n          <div class=\"caption\" *ngIf=\"item?.displayId\">\r\n            <span class=\"material-icons-outlined\"> local_offer </span> ID:\r\n            {{ item?.displayId }} {{ getItemStatus(item) }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"block\" *ngIf=\"!isNotEditedItem\">\r\n        <button qms-btn-icon color=\"light\" mode=\"dark\" (click)=\"removeItem(i)\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.list-related{font-family:Open Sans;font-style:normal;font-weight:400;color:#323232}.list-related .list-related__title{font-weight:600;font-size:.875rem;line-height:22px;margin-bottom:1rem}.list-related .list-related__body .list-related__body-parent{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-parent .block{font-weight:400;font-size:1rem;line-height:28px;display:flex;align-items:center}.list-related .list-related__body .list-related__body-parent .block .title{margin-left:1.5rem;padding-top:5px;padding-bottom:5px}.list-related .list-related__body .list-related__body-parent .block .title .caption{color:rgba(0,0,0,.6);font-size:.75rem;line-height:22px}.list-related .list-related__body .list-related__body-parent .block mat-icon{color:rgba(0,0,0,.6);padding:0}.list-related .list-related__body .list-related__body-parent .block button.qms-btn-icon{width:40px;height:40px;line-height:40px}.list-related .list-related__body .list-related__body-child{font-weight:400;font-size:.875rem;line-height:22px}.list-related .list-related__body .list-related__body-child .default{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-child .default .title{margin-left:3rem}.list-related .list-related__body .list-related__body-child .default .group-button{margin-right:2rem;display:flex}.list-related .list-related__body .remain{font-weight:600;font-size:.875rem;line-height:22px;display:flex;align-items:center;justify-content:space-between;background-color:#fafafa;color:#1954a9;min-height:48px;border-bottom:1px solid #ddd}.list-related .list-related__body .remain .title{margin-left:3rem}.label-green,.label-red,.label-yellow{font-family:Open Sans;font-style:normal;font-weight:600;display:inline-block;text-align:center;margin-left:1rem;width:24px;height:24px;font-size:.75rem;border-radius:1px}.label-red{background-color:#9e360f;color:#fff}.label-yellow{background-color:#e4cf53;color:rgba(0,0,0,.87)}.label-green{background-color:#00804c;color:#fff}.cursor{cursor:pointer}"]
+                selector: 'qms-sidenav',
+                template: "<mat-sidenav\r\n  #sidenav\r\n  class=\"sidenav__container\"\r\n  mode=\"side\"\r\n  opened=\"true\"\r\n  (mouseenter)=\"mouseenter()\"\r\n  (mouseleave)=\"mouseleave()\"\r\n>\r\n  <mat-nav-list>\r\n    <mat-list-item (click)=\"showSubmenu = !showSubmenu\">\r\n      <span class=\"sidenav-width\" *ngIf=\"isExpanded || isShowing\">{{\r\n        menu\r\n      }}</span>\r\n      <mat-icon mat-list-icon>{{ icon }}</mat-icon>\r\n      <mat-icon\r\n        class=\"menu-button\"\r\n        [ngClass]=\"{ rotated: showSubmenu }\"\r\n        *ngIf=\"isExpanded || isShowing\"\r\n        >expand_more</mat-icon\r\n      >\r\n    </mat-list-item>\r\n    <div\r\n      class=\"submenu\"\r\n      [ngClass]=\"{ expanded: showSubmenu }\"\r\n      *ngIf=\"isShowing || isExpanded\"\r\n    >\r\n      <div *ngFor=\"let item of items\">\r\n        <a mat-list-item href=\"{{ item.url }}\">{{ item.name }}</a>\r\n      </div>\r\n    </div>\r\n  </mat-nav-list>\r\n  <mat-nav-list> </mat-nav-list>\r\n</mat-sidenav>\r\n",
+                styles: [".sidenav__container{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sidenav-width{width:100%}.menu-button{transition:.3s ease-in-out;transform:rotate(0deg)}.menu-button.rotated{transform:rotate(180deg)}.submenu{overflow-y:hidden;transition:transform .3s ease;transform:scaleY(0);transform-origin:top;padding-left:30px}.submenu.expanded{transform:scaleY(1)}"]
             },] }
 ];
-RelatedListComponent.ctorParameters = () => [
-    { type: DomSanitizer },
-    { type: TranslateLibraryService },
-    { type: MatIconRegistry }
-];
-RelatedListComponent.propDecorators = {
+SidenavComponent.propDecorators = {
     data: [{ type: Input }],
-    showStatus: [{ type: Input }],
-    updateData: [{ type: Output }],
-    onItemSelect: [{ type: Output }]
+    sidenav: [{ type: ViewChild, args: ['sidenav',] }]
 };
 
 class QMSRelatedModule {
@@ -4806,6 +5423,8 @@ QMSRelatedModule.decorators = [
                     SharedMaterialModule,
                     QMSListModule,
                     QmsAngularModule,
+                    QMSBreadcrumbModule,
+                    QMSAppIconModule
                 ],
                 exports: [
                     TreeComponent,
@@ -4882,7 +5501,7 @@ QMSCKEditorConfirmComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-confirm-popup',
                 template: "<div\r\n  id=\"qmsckeditor-confirm\"\r\n  class=\"qmsckeditor qmsckeditor__confirm__container\"\r\n>\r\n  <h2>{{ data.title }}</h2>\r\n  <div class=\"row ml2 mr-0\" [innerHTML]=\"data.content\"></div>\r\n  <div *ngIf=\"!data.isMessage\" class=\"row ml-0 mr-0 mt20\">\r\n    <div *ngIf=\"data.isAdvance\" class=\"mt-4\">\r\n      <mat-checkbox [(ngModel)]=\"isNotShowAgain\">{{\r\n        data.checkText\r\n      }}</mat-checkbox>\r\n    </div>\r\n    <div class=\"qmsckeditor confirm__button__groups ml-auto mt-auto\">\r\n      <button mat-button class=\"cancel\" (click)=\"onCancelClick()\">\r\n        {{ LANG.QMSCKEDITOR.CANCEL }}\r\n      </button>\r\n      <button\r\n        *ngIf=\"!data.isAdvance\"\r\n        mat-button\r\n        class=\"confirm ml3\"\r\n        (click)=\"onConfirmClick()\"\r\n      >\r\n        {{ LANG.QMSCKEDITOR.CONFIRM }}\r\n      </button>\r\n      <button\r\n        *ngIf=\"data.isAdvance\"\r\n        mat-button\r\n        class=\"confirm ml3\"\r\n        (click)=\"onAdvanceConfirmClick()\"\r\n      >\r\n        {{ LANG.QMSCKEDITOR.CONFIRM }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"data.isMessage\" class=\"row ml-0 mr-0 mt20\">\r\n    <div class=\"ml-auto mt-auto\">\r\n      <button mat-button class=\"save ml-3\" (click)=\"onConfirmClick()\">\r\n        {{ LANG.COMMON.OK }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}"]
+                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:450px;overflow:auto}.ck-content .page-break{width:100%}"]
             },] }
 ];
 QMSCKEditorConfirmComponent.ctorParameters = () => [
@@ -5318,7 +5937,7 @@ LinkAttachmentComponent.decorators = [
     { type: Component, args: [{
                 selector: 'link-attachment',
                 template: "<div\r\n  id=\"qmsckeditor_link_attachment\"\r\n  class=\"qmsckeditor qmsckeditor__link__attachment__container\"\r\n>\r\n  <div id=\"qmsckeditor_link_attachment_header\">\r\n    <span\r\n      id=\"qmsckeditor_link_attachment_header_001\"\r\n      mat-icon-button\r\n      class=\"qmsckeditor button__close\"\r\n      (click)=\"onCloseDialog()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmsckeditor_link_attachment_header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor_link_attachment_header_002_001\">\r\n        {{ LANG.QMSCKEDITOR.ATTACHMENT }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <div\r\n    id=\"qmsckeditor_link_attachment_content\"\r\n    class=\"qmsckeditor template-content height\"\r\n  >\r\n    <div id=\"qmsckeditor_link_attachment_content_001\" class=\"mt-1 pl-2 pr-2\">\r\n      <mat-card\r\n        class=\"qmsckeditor card col-12\"\r\n        *ngFor=\"let attachment of attachments\"\r\n      >\r\n        <div\r\n          class=\"row\"\r\n          (click)=\"\r\n            onSelectedAttachment(attachment.extraId, attachment.fileName)\r\n          \"\r\n        >\r\n          <div class=\"qmsckeditor__cursor col-12\">\r\n            <div class=\"col-12 pl-0 title\">\r\n              <span>{{ attachment.fileName }}</span>\r\n            </div>\r\n            <div class=\"col-12 pl-0 content\">\r\n              <span>{{ attachment.extraId }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}"]
+                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:450px;overflow:auto}.ck-content .page-break{width:100%}"]
             },] }
 ];
 LinkAttachmentComponent.ctorParameters = () => [
@@ -5756,7 +6375,7 @@ QMSCKEditorRelatedComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-dialog',
                 template: "<div id=\"qmsckeditor_tree\" class=\"qmsckeditor qmsckeditor__tree__containter\">\r\n  <span\r\n    mat-icon-button\r\n    class=\"qmsckeditor button__close\"\r\n    (click)=\"onCloseClick()\"\r\n  >\r\n    <mat-icon>close</mat-icon>\r\n  </span>\r\n  <div id=\"qmsckeditor_tree_001\" mat-dialog-content>\r\n    <h2 *ngIf=\"!isOnlyDocument\">\r\n      {{ LANG.QMSCKEDITOR.ADD_DOCUMENT_PROCESS }}\r\n    </h2>\r\n    <h2 *ngIf=\"isOnlyDocument\">{{ LANG.QMSCKEDITOR.ADD_DOCUMENT }}</h2>\r\n  </div>\r\n  <div\r\n    id=\"qmsckeditor_tree_002\"\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.QMSCKEDITOR.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  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"displayRelated\"\r\n    style=\"height: 50vh\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      itemSize=\"10\"\r\n      class=\"related-viewport\"\r\n      style=\"height: 50vh\"\r\n    >\r\n      <mat-option\r\n        *cdkVirtualFor=\"let option of filteredOptions\"\r\n        [value]=\"option\"\r\n      >\r\n        <div\r\n          *ngIf=\"option.type == 1\"\r\n          class=\"col-12\"\r\n          (click)=\"selectRelated(option.id, option.type)\"\r\n        >\r\n          <span\r\n            ><img\r\n              class=\"mat-icon\"\r\n              src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAiElEQVR4AezOAQaAABQE0dDBuk2AjvCPGDrQb0GQ2NCqzDAAvOFP0ahLb7pvvjwBmn1ABrXqfhOqj/3KR+VBPioMOqPyIB+VB/moPMhH5UGdAk26rs6B/AABAgQIECBAgL4E2vcZpJFG+DA5DppPQweFk+MgHiAuB+L7VHTIeyDuBg9kDBcwCgBx1CcsdvijVwAAAABJRU5ErkJggg==\"\r\n          /></span>\r\n          <span>{{ option.name }}</span>\r\n        </div>\r\n        <div\r\n          *ngIf=\"option.type == 2\"\r\n          class=\"col-12\"\r\n          (click)=\"selectRelated(option.id, option.type)\"\r\n        >\r\n          <span\r\n            ><img\r\n              class=\"mat-icon\"\r\n              src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAQMAAADaua+7AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAAbHV9mFYLuQAAAAJ0Uk5TAP9bkSK1AAAAKUlEQVR4nGNgQALyjT/AWPL/DDCG8dmAclgx4w8wZgeqBWEGIBuMEQAAaJkRERdvY48AAAAASUVORK5CYII=\"\r\n          /></span>\r\n          <span>{{ option.name }}</span>\r\n        </div>\r\n      </mat-option>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n  <div id=\"qmsckeditor_tree_003\" class=\"row ml-0 mr-0 mt20\">\r\n    <div id=\"qmsckeditor_tree_003_001\" class=\"content-box\">\r\n      <strong *ngIf=\"!isOnlyDocument\">{{ LANG.QMSCKEDITOR.PROCESSES }}</strong>\r\n      <qms-ckeditor-tree\r\n        *ngIf=\"!isOnlyDocument\"\r\n        [areaOfCurrentProcess]=\"areaOfCurrentProcess\"\r\n        [listParentObj]=\"listParentProcessId\"\r\n        [treeData]=\"treeProcessData\"\r\n        [rawData]=\"processData\"\r\n        [docType]=\"2\"\r\n        [useExpandFeature]=\"true\"\r\n        [allowSelectFolder]=\"isEnableFolder\"\r\n        (selectNodeEvent)=\"selectProcessNode($event)\"\r\n        (selectFolderEvent)=\"selectAreaNode($event)\"\r\n      ></qms-ckeditor-tree>\r\n      <div *ngIf=\"!isOnlyDocument\" class=\"line-divider\"></div>\r\n      <strong>{{ LANG.QMSCKEDITOR.DOCUMENTS }}</strong>\r\n      <qms-ckeditor-tree\r\n        [areaOfCurrentProcess]=\"areaOfCurrentProcess\"\r\n        [listParentObj]=\"listParentDocumentId\"\r\n        [treeData]=\"treeDocumentData\"\r\n        [rawData]=\"documentData\"\r\n        [useExpandFeature]=\"true\"\r\n        [docType]=\"1\"\r\n        [allowSelectFolder]=\"isEnableFolder\"\r\n        (selectNodeEvent)=\"selectDocumentNode($event)\"\r\n        (selectFolderEvent)=\"selectHandbookNode($event)\"\r\n      ></qms-ckeditor-tree>\r\n    </div>\r\n  </div>\r\n  <div\r\n    id=\"qmsckeditor_tree_004\"\r\n    class=\"qmsckeditor button__groups mt20 row ml-0 mr-0\"\r\n  >\r\n    <button\r\n      type=\"button\"\r\n      class=\"save col-12\"\r\n      mat-flat-button\r\n      (click)=\"onAddDocumentProcess()\"\r\n    >\r\n      {{ LANG.QMSCKEDITOR.ADD }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
-                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}::ng-deep .qmsckeditor__tree__containter .input__field input{width:97%;padding:10px;outline:none;border:none;background:#eee}::ng-deep .qmsckeditor__tree__containter .input__field .mat-icon{margin-left:-35px;cursor:pointer;vertical-align:middle}::ng-deep .qmsckeditor__tree__containter .mat-tree{background:#00283a}::ng-deep .qmsckeditor__tree__containter .mat-tree-node{color:#fff;min-height:40px}::ng-deep .qmsckeditor__tree__containter .folder-icon{color:#a4b0de}::ng-deep .qmsckeditor__tree__containter .mat-icon{margin-bottom:5px}::ng-deep .qmsckeditor__tree__containter .content-box{min-width:375px;width:100%;height:435px;overflow-y:auto;background:#00283a;color:#fff}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item{width:100%;height:56px;border:1px solid #d4d5d6;padding:15px}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item:hover{background:#d8ddf0;cursor:pointer}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item .content-box-text{float:left;width:90%;height:26px;overflow:hidden}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item .content-box-icon{float:right}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item:not(:last-child){border-bottom:none}::ng-deep .qmsckeditor__tree__containter .content-box strong{text-transform:uppercase;margin:10px 0 0 2px}::ng-deep .qmsckeditor__tree__containter .line-divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px}::ng-deep .qmsckeditor__tree__containter .loading ::ng-deep .mat-progress-spinner{width:21px;height:21px;margin:0 auto;top:32px}::ng-deep .mat-autocomplete-panel.mat-autocomplete-visible{overflow:hidden;max-height:none}::ng-deep .mat-autocomplete-panel.mat-autocomplete-hidden{visibility:hidden;display:none}"]
+                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:450px;overflow:auto}.ck-content .page-break{width:100%}::ng-deep .qmsckeditor__tree__containter .input__field input{width:97%;padding:10px;outline:none;border:none;background:#eee}::ng-deep .qmsckeditor__tree__containter .input__field .mat-icon{margin-left:-35px;cursor:pointer;vertical-align:middle}::ng-deep .qmsckeditor__tree__containter .mat-tree{background:#00283a}::ng-deep .qmsckeditor__tree__containter .mat-tree-node{color:#fff;min-height:40px}::ng-deep .qmsckeditor__tree__containter .folder-icon{color:#a4b0de}::ng-deep .qmsckeditor__tree__containter .mat-icon{margin-bottom:5px}::ng-deep .qmsckeditor__tree__containter .content-box{min-width:375px;width:100%;height:435px;overflow-y:auto;background:#00283a;color:#fff}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item{width:100%;height:56px;border:1px solid #d4d5d6;padding:15px}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item:hover{background:#d8ddf0;cursor:pointer}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item .content-box-text{float:left;width:90%;height:26px;overflow:hidden}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item .content-box-icon{float:right}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item:not(:last-child){border-bottom:none}::ng-deep .qmsckeditor__tree__containter .content-box strong{text-transform:uppercase;margin:10px 0 0 2px}::ng-deep .qmsckeditor__tree__containter .line-divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px}::ng-deep .qmsckeditor__tree__containter .loading ::ng-deep .mat-progress-spinner{width:21px;height:21px;margin:0 auto;top:32px}::ng-deep .mat-autocomplete-panel.mat-autocomplete-visible{overflow:hidden;max-height:none}::ng-deep .mat-autocomplete-panel.mat-autocomplete-hidden{visibility:hidden;display:none}"]
             },] }
 ];
 QMSCKEditorRelatedComponent.ctorParameters = () => [
@@ -6068,17 +6687,17 @@ class QMSCKEditorLinkComponent extends QMSCKEditorBaseComponent {
         else if (this.selectedLink === LinkType.anchorText) {
             link.url = `${this.selectedLink}${0}#${this.anchorText}`;
             link.title = `#${this.anchorText}`;
-            link.targetId = TargetType.same;
+            link.targetId = TargetType.topmost;
         }
         else if (this.selectedLink === LinkType.email) {
             link.url = `${this.selectedLink}${0}mailto:${this.emailAddress}?subject=${this.emailSubject}&body=${this.emailBody}`;
             link.title = this.emailAddress;
-            link.targetId = TargetType.same;
+            link.targetId = TargetType.topmost;
         }
         else if (this.selectedLink === LinkType.anchorDocument) {
             link.url = `${this.selectedLink}${0}/document/${this.documentId}#${this.anchorByName}`;
             link.title = this.anchorTitle;
-            link.targetId = TargetType.same;
+            link.targetId = TargetType.topmost;
         }
         this.dialogRef.close(link);
     }
@@ -6087,7 +6706,7 @@ QMSCKEditorLinkComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-ckeditor-link',
                 template: "<div id=\"qmsckeditor_link\" class=\"qmsckeditor qmsckeditor__link__container\">\r\n  <div id=\"qmsckeditor_link_header\">\r\n    <span\r\n      id=\"qmsckeditor_link_header_001\"\r\n      mat-icon-button\r\n      class=\"qmsckeditor button__close\"\r\n      (click)=\"onCloseDialog()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmsckeditor_link_header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor_link_header_001\">\r\n        {{ LANG.QMSCKEDITOR.LINK }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <div id=\"qmsckeditor_link_type\" class=\"row\">\r\n    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3\">\r\n      <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\r\n      <mat-select\r\n        disableOptionCentering\r\n        name=\"linkTypeList\"\r\n        [(ngModel)]=\"selectedLink\"\r\n        (ngModelChange)=\"onSelectedLinkType()\"\r\n      >\r\n        <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\r\n          {{ link.name }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div id=\"qmsckeditor_link_content\">\r\n    <form\r\n      [formGroup]=\"linkFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 0\"\r\n    >\r\n      <div id=\"qmsckeditor_link_url\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_url_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.URL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_url_001\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\r\n              <mat-select\r\n                [(ngModel)]=\"selectedTarget\"\r\n                formControlName=\"targetList\"\r\n                disableOptionCentering\r\n              >\r\n                <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\r\n                  {{ target.name }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_002\" class=\"row\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\r\n              <mat-select\r\n                [(ngModel)]=\"selectedProtocol\"\r\n                formControlName=\"protocolList\"\r\n                disableOptionCentering\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"let protocol of protocols\"\r\n                  [value]=\"protocol.id\"\r\n                >\r\n                  {{ protocol.name }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_003\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\r\n              <input matInput [(ngModel)]=\"url\" formControlName=\"url\" />\r\n              <mat-error\r\n                *ngIf=\"linkFormGroup.get('url').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_004\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ADVISORY_TITLE }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"advisoryTitle\"\r\n                formControlName=\"advisoryTitle\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"linkFormGroup.get('advisoryTitle').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div\r\n            id=\"qmsckeditor_link_url_005\"\r\n            class=\"qmsckeditor button__groups row\"\r\n          >\r\n            <div class=\"col-6 pl-3\">\r\n              <button\r\n                class=\"save\"\r\n                mat-flat-button\r\n                (click)=\"eHandbook(false, false)\"\r\n              >\r\n                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n              </button>\r\n            </div>\r\n            <div class=\"col-6 pr-3\">\r\n              <button class=\"save\" mat-flat-button (click)=\"attachment()\">\r\n                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form\r\n      [formGroup]=\"anchorTextFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 1\"\r\n    >\r\n      <div id=\"qmsckeditor_link_anchor_text\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_anchor_text_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.ANCHOR_TEXT_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_anchor_text_001\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n              <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorText\">\r\n                <mat-option\r\n                  *ngFor=\"let editorAnchor of editorAnchors\"\r\n                  [value]=\"editorAnchor.anchorValue\"\r\n                  disableOptionCentering\r\n                >\r\n                  {{ editorAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error\r\n                *ngIf=\"\r\n                  anchorTextFormGroup.get('anchorText').hasError('required')\r\n                \"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form\r\n      [formGroup]=\"emailFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 2\"\r\n    >\r\n      <div id=\"qmsckeditor_link_email\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_email_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_email_001\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_ADDRESS }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"emailAddress\"\r\n                formControlName=\"emailAddress\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"emailFormGroup.get('emailAddress').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_email_002\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_SUBJECT }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"emailSubject\"\r\n                formControlName=\"emailSubject\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"emailFormGroup.get('emailSubject').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_email_003\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_BODY }}</mat-label>\r\n              <textarea\r\n                matInput\r\n                [(ngModel)]=\"emailBody\"\r\n                formControlName=\"emailBody\"\r\n              ></textarea>\r\n              <mat-error\r\n                *ngIf=\"emailFormGroup.get('emailBody').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form\r\n      [formGroup]=\"anchorDocFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 3\"\r\n    >\r\n      <div id=\"qmsckeditor_link_anchor_doc\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_email_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div\r\n            id=\"qmsckeditor_link_anchor_doc_001\"\r\n            class=\"qmsckeditor button__groups row\"\r\n          >\r\n            <div class=\"col-6 pl-3\">\r\n              <button\r\n                class=\"cancel\"\r\n                mat-flat-button\r\n                (click)=\"eHandbook(true, true)\"\r\n              >\r\n                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_anchor_doc_002\" class=\"row mt-4\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.DOCUMENT }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"anchorTitle\"\r\n                formControlName=\"anchorTitle\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorTitle').hasError('required')\r\n                \"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_anchor_doc_003\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n              <mat-select\r\n                [(ngModel)]=\"anchorByName\"\r\n                formControlName=\"anchorByName\"\r\n                disableOptionCentering\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"let docAnchor of documentAnchors\"\r\n                  [value]=\"docAnchor.anchorValue\"\r\n                >\r\n                  {{ docAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error\r\n                *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorByName').hasError('required')\r\n                \"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n  </div>\r\n\r\n  <div id=\"qmsckeditor_link_footer\" class=\"qmsckeditor button__groups row\">\r\n    <div class=\"col-12 mt-3 pl-3 pr-3\">\r\n      <button\r\n        class=\"save\"\r\n        mat-flat-button\r\n        (click)=\"setLink()\"\r\n        [disabled]=\"disableOkButton()\"\r\n      >\r\n        {{ LANG.QMSCKEDITOR.OK }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor__link__container textarea.mat-input-element{min-height:130px}"]
+                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:450px;overflow:auto}.ck-content .page-break{width:100%}.qmsckeditor__link__container textarea.mat-input-element{min-height:130px}"]
             },] }
 ];
 QMSCKEditorLinkComponent.ctorParameters = () => [
@@ -6384,7 +7003,7 @@ QMSCKEditorTemplateComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-qmsck-template',
                 template: "<div\r\n  id=\"qmsckeditor-template\"\r\n  class=\"qmsckeditor qmsckeditor__template__container\"\r\n>\r\n  <div id=\"qmsckeditor-template-header\">\r\n    <span\r\n      id=\"qmsckeditor-template-header_001\"\r\n      mat-icon-button\r\n      class=\"qmsckeditor button__close\"\r\n      (click)=\"onCloseDialog()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div\r\n      id=\"qmsckeditor-template-header_002\"\r\n      mat-dialog-content\r\n      *ngIf=\"!isEdit\"\r\n    >\r\n      <h2 id=\"qmsckeditor-template_002_001\">\r\n        {{ LANG.QMSCKEDITOR.CREATE_NEW_TEMPLATE }}\r\n      </h2>\r\n    </div>\r\n    <div id=\"qmsckeditor-template-header_002\" mat-dialog-content *ngIf=\"isEdit\">\r\n      <h2 id=\"qmsckeditor-template_002_001\">\r\n        {{ LANG.QMSCKEDITOR.UPDATE_TEMPLATE }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n\r\n  <form [formGroup]=\"templateFormGroup\">\r\n    <div\r\n      id=\"qmsckeditor-template-content\"\r\n      class=\"qmsckeditor template-content height\"\r\n    >\r\n      <div id=\"qmsckeditor-template-content_001\" class=\"col-12 mt-1 pl-2 pr-2\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor-template-panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <div id=\"qmsckeditor-template-panel_001\">\r\n            <div id=\"qmsckeditor-template-panel_001_000\" class=\"mt-2\">\r\n              <mat-form-field appearance=\"fill\">\r\n                <mat-label>{{ LANG.QMSCKEDITOR.TEMPLATE }}</mat-label>\r\n                <mat-select\r\n                  formControlName=\"templateList\"\r\n                  [(ngModel)]=\"selectedId\"\r\n                  (ngModelChange)=\"onSelectChange()\"\r\n                  [disabled]=\"isEdit\"\r\n                >\r\n                  <mat-option\r\n                    *ngFor=\"let template of templates\"\r\n                    [value]=\"template.id\"\r\n                  >\r\n                    {{ template.title }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n            <div id=\"qmsckeditor-template-panel_001_001\">\r\n              <mat-form-field class=\"col-12 pl-0 pr-0\" appearance=\"fill\">\r\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\r\n                <input\r\n                  matInput\r\n                  [(ngModel)]=\"template.title\"\r\n                  formControlName=\"title\"\r\n                />\r\n                <mat-error\r\n                  *ngIf=\"templateFormGroup.get('title').hasError('required')\"\r\n                  class=\"mt5\"\r\n                >\r\n                </mat-error>\r\n              </mat-form-field>\r\n            </div>\r\n            <div id=\"qmsckeditor-template-panel_001_002\">\r\n              <mat-form-field class=\"col-12 pl-0 pr-0\" appearance=\"fill\">\r\n                <mat-label>{{ LANG.QMSCKEDITOR.DESCRIPTION }}</mat-label>\r\n                <textarea\r\n                  matInput\r\n                  [(ngModel)]=\"template.description\"\r\n                  formControlName=\"description\"\r\n                ></textarea>\r\n                <mat-error\r\n                  *ngIf=\"\r\n                    templateFormGroup.get('description').hasError('required')\r\n                  \"\r\n                  class=\"mt5\"\r\n                >\r\n                </mat-error>\r\n              </mat-form-field>\r\n            </div>\r\n            <div\r\n              id=\"qmsckeditor-template-panel_001_003\"\r\n              class=\"qmsckeditor button__groups row mr-0 ml-0\"\r\n            >\r\n              <div class=\"col-6 pl-0\" *ngIf=\"!isEdit\">\r\n                <button\r\n                  class=\"delete\"\r\n                  mat-flat-button\r\n                  (click)=\"deleteTemplate()\"\r\n                  [disabled]=\"selectedId === 0\"\r\n                >\r\n                  {{ LANG.QMSCKEDITOR.DELETE }}\r\n                </button>\r\n              </div>\r\n              <div class=\"col-6 pr-0\" *ngIf=\"!isEdit && selectedId === 0\">\r\n                <button\r\n                  class=\"save\"\r\n                  mat-flat-button\r\n                  (click)=\"saveTemplate()\"\r\n                  [disabled]=\"templateFormGroup.invalid\"\r\n                >\r\n                  {{ LANG.QMSCKEDITOR.SAVE }}\r\n                </button>\r\n              </div>\r\n              <div class=\"col-6 pl-0\" *ngIf=\"isEdit\">\r\n                <button\r\n                  class=\"cancel\"\r\n                  mat-flat-button\r\n                  (click)=\"cancelTemplate()\"\r\n                  [disabled]=\"selectedId === 0\"\r\n                >\r\n                  {{ LANG.QMSCKEDITOR.CANCEL }}\r\n                </button>\r\n              </div>\r\n              <div class=\"col-6 pr-0\" *ngIf=\"isEdit || selectedId !== 0\">\r\n                <button\r\n                  class=\"save\"\r\n                  mat-flat-button\r\n                  (click)=\"updateTemplate()\"\r\n                  [disabled]=\"templateFormGroup.invalid\"\r\n                >\r\n                  {{ LANG.QMSCKEDITOR.UPDATE }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>\r\n",
-                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor__template__container .mat-form-field{width:100%}.qmsckeditor__template__container textarea.mat-input-element{min-height:150px}.qmsckeditor__template__container .template-checkbox{padding-top:20px}"]
+                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:450px;overflow:auto}.ck-content .page-break,.qmsckeditor__template__container .mat-form-field{width:100%}.qmsckeditor__template__container textarea.mat-input-element{min-height:150px}.qmsckeditor__template__container .template-checkbox{padding-top:20px}"]
             },] }
 ];
 QMSCKEditorTemplateComponent.ctorParameters = () => [
@@ -6512,7 +7131,7 @@ QMSCKEditorLoadTemplateComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-qmsck-load-template',
                 template: "<div\r\n  id=\"qmsckeditor-load-template\"\r\n  class=\"qmsckeditor qmsckeditor__loadtemplate__container\"\r\n>\r\n  <div id=\"qmsckeditor-load-template-header\">\r\n    <span\r\n      id=\"qmsckeditor-load-template-header_001\"\r\n      mat-icon-button\r\n      class=\"qmsckeditor button__close\"\r\n      (click)=\"onCloseDialog()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmsckeditor-load-template-header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor-template_002_001\">\r\n        {{ LANG.QMSCKEDITOR.CONTENT_TEMPLATE }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <div id=\"load-template_002\">\r\n    <div id=\"load-template_002_001\" class=\"title col-12 mt-3\">\r\n      <h2 id=\"load-template_002_001_001\">\r\n        {{ LANG.QMSCKEDITOR.CHOOSE_TEMPLATE }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <div\r\n    id=\"qmsckeditor-load-template-content\"\r\n    class=\"qmsckeditor template-content height\"\r\n  >\r\n    <div id=\"qmsckeditor-load-template-content_003\" class=\"mt-1 pl-2 pr-2\">\r\n      <mat-card\r\n        class=\"qmsckeditor card col-12\"\r\n        *ngFor=\"let template of templates\"\r\n      >\r\n        <div class=\"row\">\r\n          <div\r\n            class=\"qmsckeditor__cursor col-10\"\r\n            (click)=\"onSelectTemplate(template.id)\"\r\n          >\r\n            <div class=\"col-12 pl-0 title\">\r\n              <span>{{ template.title }}</span>\r\n            </div>\r\n            <div class=\"col-12 pl-0 content\">\r\n              <span>{{ template.description }}</span>\r\n            </div>\r\n          </div>\r\n          <div class=\"qmsckeditor__cursor col-1\">\r\n            <mat-icon (click)=\"onEditTemplate(template.id)\">edit</mat-icon>\r\n          </div>\r\n          <div class=\"qmsckeditor__cursor col-1\">\r\n            <mat-icon (click)=\"onDeleteTemplate(template.id)\">delete</mat-icon>\r\n          </div>\r\n        </div>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor__loadtemplate__container .template-checkbox{padding-top:20px}"]
+                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:450px;overflow:auto}.ck-content .page-break{width:100%}.qmsckeditor__loadtemplate__container .template-checkbox{padding-top:20px}"]
             },] }
 ];
 QMSCKEditorLoadTemplateComponent.ctorParameters = () => [
@@ -6556,7 +7175,9 @@ CKEditorEventConst.QMSCK_TEMPLATE_PLUGIN_MSG = 'QMSCK_TEMPLATE_PLUGIN_MSG';
 CKEditorEventConst.QMSCK_LOAD_TEMPLATE_PLUGIN_MSG = 'QMSCK_LOAD_TEMPLATE_PLUGIN_MSG';
 CKEditorEventConst.QMSCK_LOAD_TEMPLATE_PLUGIN_RESP = 'QMSCK_LOAD_TEMPLATE_PLUGIN_RESP';
 CKEditorEventConst.QMSCK_LINK_PLUGIN_MSG = 'QMSCK_LINK_PLUGIN_MSG';
-CKEditorEventConst.QMSCK_LINK_PLUGIN_RESP = 'QMSCK_LINK_PLUGIN_RESP';
+CKEditorEventConst.QMSCK_LINK_PLUGIN_RESP = 'QMSCK_LINK_PLUGIN_RESP';
+CKEditorEventConst.QMSCK_TOOLTIP_PLUGIN_MSG = 'QMSCK_TOOLTIP_PLUGIN_MSG';
+CKEditorEventConst.QMSCK_TOOLTIP_PLUGIN_RESP = 'QMSCK_TOOLTIP_PLUGIN_RESP';
 
 var IFRAME_SRC = '//cdn.iframe.ly/api/iframe';
 var API_KEY = 'b499e92e857f435c39c14d';
@@ -6820,11 +7441,85 @@ function getCKEditorConfiguration(itemToolbar) {
             ckeditorConfig.toolbar.items.push(i);
         });
     }
-    return ckeditorConfig;
+    return ckeditorConfig;
+}
+const CKEditorCommonFunctions = {
+    getCKEditorConfiguration
+};
+
+class QMSCKEditorTooltip {
+    constructor() {
+        this.text = '';
+        this.content = '';
+    }
+}
+
+class QMSCKEditorTooltipComponent extends QMSCKEditorBaseComponent {
+    constructor(cdr, translate, dialogRef, data) {
+        super();
+        this.cdr = cdr;
+        this.translate = translate;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.tooltipFormGroup = new FormGroup({
+            title: new FormControl('', [Validators.required]),
+            content: new FormControl('', [Validators.required])
+        });
+        this.tooltip = { text: data.text, content: data.content };
+        this.editor = data.ckEditor;
+    }
+    ngOnInit() {
+        this.translate.getLanguageSubject$.pipe(takeUntil(this.ngUnsubcribe)).subscribe((res) => {
+            if (res) {
+                this.LANG = this.translate.getObjectLang(res);
+            }
+        });
+        this.editorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(',heading,|,fontsize,fontfamily,fontColor,fontBackgroundColor,|,bold,italic,underline,strikethrough,|,alignment,|,bulletedList,numberedList,|,outdent,indent,|,subscript,superscript,|,undo,redo,|,specialCharacters,blockQuote,insertTable,|,link,anchor,|,timestamp,|,removeformat');
+    }
+    ngAfterViewChecked() {
+        this.cdr.detectChanges();
+    }
+    onCloseDialog() {
+        this.dialogRef.close();
+    }
+    getOutputContent(content) {
+        this.tooltip.content = content;
+    }
+    onChanged({ editor }) {
+        this.tooltip.content = editor.getData();
+    }
+    onBlur({ editor }) {
+        this.tooltip.content = editor.getData();
+    }
+    onReady(editor) {
+        if (this.tooltip.text) {
+            editor.setData(this.tooltip.text);
+        }
+        editor.ui.getEditableElement().parentElement.insertBefore(editor.ui.view.toolbar.element, editor.ui.getEditableElement());
+    }
+    saveTooltip() {
+        const tooltip = new QMSCKEditorTooltip();
+        tooltip.content = this.tooltip.content;
+        tooltip.text = this.tooltip.text;
+        this.dialogRef.close(tooltip);
+    }
+    cancelTooltip() {
+        this.dialogRef.close();
+    }
 }
-const CKEditorCommonFunctions = {
-    getCKEditorConfiguration
-};
+QMSCKEditorTooltipComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-qmsck-tooltip',
+                template: "<div\r\n  id=\"qmsckeditor-tooltip\"\r\n  class=\"qmsckeditor qmsckeditor__tooltip__container\"\r\n>\r\n  <div id=\"qmsckeditor-tooltip-header\">\r\n    <span\r\n      id=\"qmsckeditor-tooltip-header_001\"\r\n      mat-icon-button\r\n      class=\"qmsckeditor button__close\"\r\n      (click)=\"onCloseDialog()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmsckeditor-tooltip-header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor-tooltip_002_001\">\r\n        {{ LANG.QMSCKEDITOR.INSERT_TOOLTIP }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"tooltipFormGroup\">\r\n    <div\r\n      id=\"qmsckeditor-tooltip-content\"\r\n      class=\"qmsckeditor tooltip-content height\"\r\n    >\r\n      <div id=\"qmsckeditor-tooltip-content_001\" class=\"col-12 mt-1 pl-2 pr-2\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor-tooltip-panel\"\r\n          [expanded]=\"true\"\r\n          (opened)=\"(true)\"\r\n          (closed)=\"(false)\"\r\n        >\r\n          <div id=\"qmsckeditor-tooltip-panel_001\">\r\n            <div id=\"qmsckeditor-tooltip-panel_001_001\">\r\n              <mat-form-field class=\"col-12 pl-0 pr-0\" appearance=\"fill\">\r\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\r\n                <input\r\n                  matInput\r\n                  [(ngModel)]=\"tooltip.text\"\r\n                  formControlName=\"title\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n            <div id=\"qmsckeditor-tooltip-panel_001_002\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.CONTENT }}</mat-label>\r\n              <div class=\"qmsckeditor_container col-12 pl-0 pr-0\">\r\n                <ckeditor\r\n                  class=\"qms-ckeditor\"\r\n                  [(editor)]=\"editor\"\r\n                  [config]=\"editorConfig\"\r\n                  (ready)=\"onReady($event)\"\r\n                  [(ngModel)]=\"tooltip.content\"\r\n                  (change)=\"onChanged($event)\"\r\n                  (blur)=\"onBlur($event)\"\r\n                  formControlName=\"content\"\r\n                >\r\n                </ckeditor>\r\n              </div>\r\n            </div>\r\n            <div\r\n              id=\"qmsckeditor-tooltip-panel_001_003\"\r\n              class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4\"\r\n            >\r\n              <div class=\"col-6 pr-0\">\r\n                <button\r\n                  class=\"save\"\r\n                  mat-flat-button\r\n                  (click)=\"saveTooltip()\"\r\n                  [disabled]=\"tooltipFormGroup.invalid\"\r\n                >\r\n                  {{ LANG.QMSCKEDITOR.SAVE }}\r\n                </button>\r\n              </div>\r\n              <div class=\"col-6 pl-0\">\r\n                <button\r\n                  class=\"cancel\"\r\n                  mat-flat-button\r\n                  (click)=\"cancelTooltip()\"\r\n                >\r\n                  {{ LANG.QMSCKEDITOR.CANCEL }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>\r\n",
+                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:450px;overflow:auto}.ck-content .page-break,.qmsckeditor__tooltip__container .mat-form-field{width:100%}.qmsckeditor__tooltip__container textarea.mat-input-element{min-height:150px}"]
+            },] }
+];
+QMSCKEditorTooltipComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: TranslateLibraryService },
+    { type: MatDialogRef },
+    { type: QMSCKEditorTooltip, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
 
 class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
     /**
@@ -6855,6 +7550,9 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
             case this.ckEditorEventConst.QMSCK_LINK_PLUGIN_MSG:
                 this.linkEventHandling(event.data.value);
                 break;
+            case this.ckEditorEventConst.QMSCK_TOOLTIP_PLUGIN_MSG:
+                this.tooltipEventHandling(event.data.value);
+                break;
             default:
                 break;
         }
@@ -6864,6 +7562,12 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         this.ckEditor = this.qmsckPlugin.pluginObject;
         this.ckeditorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(this.qmsckPlugin.itemToolbar);
         this.globalService.setApiUrl(this.qmsckData.apiUrl);
+        if (this.isEnabledCustomizingMathtypeService()) {
+            this.customizeMathTypeService();
+        }
+        if (this.isEnabledCustomizingTimestampFormat()) {
+            this.customizeTimestampFormat();
+        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -6876,6 +7580,39 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
             this.renderer.addClass(this.elRef.nativeElement, 'ck-disabled');
         }
     }
+    isEnabledCustomizingTimestampFormat() {
+        const pattern = /(timestamp)/gmi;
+        return !!this.qmsckData.timestampFormat
+            && this.qmsckData.timestampFormat !== ''
+            && !!this.qmsckPlugin.itemToolbar
+            && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
+    }
+    customizeTimestampFormat() {
+        const timestampConfig = {
+            timestampConfig: {
+                datetimeFormat: this.qmsckData.timestampFormat
+            }
+        };
+        this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, timestampConfig);
+    }
+    isEnabledCustomizingMathtypeService() {
+        const pattern = /(MathType)|(ChemType)/gmi;
+        return !!this.qmsckData.mathtypeServiceUrl
+            && this.qmsckData.mathtypeServiceUrl !== ''
+            && !!this.qmsckPlugin.itemToolbar
+            && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
+    }
+    customizeMathTypeService() {
+        const mathTypeConfig = {
+            mathTypeParameters: {
+                serviceProviderProperties: {
+                    URI: this.qmsckData.mathtypeServiceUrl,
+                    server: 'aspx'
+                }
+            }
+        };
+        this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, mathTypeConfig);
+    }
     onChanged({ editor }) {
         this.qmsckContentOutput.emit(this.qmsckContentInput);
     }
@@ -7003,6 +7740,32 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
             }
         });
     }
+    /**
+     * Tooltip mapping
+     */
+    tooltipEventHandling(value) {
+        let data = new QMSCKEditorTooltip();
+        data.text = value.text;
+        data.content = value.content;
+        data.ckEditor = this.qmsckPlugin.pluginObject;
+        const dialogTemplate = this.dialog.open(QMSCKEditorTooltipComponent, {
+            width: '650px',
+            height: '530px',
+            data,
+            disableClose: true
+        });
+        dialogTemplate
+            .afterClosed()
+            .pipe(takeUntil(this.ngUnsubcribe))
+            .subscribe((result) => {
+            if (result) {
+                const evt = new CustomEvent(this.ckEditorEventConst.QMSCK_TOOLTIP_PLUGIN_RESP, {
+                    detail: result
+                });
+                window.dispatchEvent(evt);
+            }
+        });
+    }
 }
 QMSCKEditorComponent.decorators = [
     { type: Component, args: [{
@@ -7023,7 +7786,7 @@ QMSCKEditorComponent.decorators = [
                 ],
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}@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}.qmsckeditor_container .qmsckeditor__minwidth{width:100%}.qmsckeditor_container .ck-editor__editable{overflow-y:auto}.qms-ckeditor .ck.ck-editor__editable{min-height:150px;background-color:rgba(0,0,0,.04);font-family:Open Sans}.qms-ckeditor .ck.ck-editor__editable:not(.ck-focused,.ck-read-only):hover{background-color:rgba(0,0,0,.08);border-bottom:2px solid rgba(0,0,0,.38)}.qms-ckeditor .ck-placeholder{font-size:1rem;font-weight:600;color:rgba(0,0,0,.6)}.qms-ckeditor .ck-disabled .ck.ck-editor__main>.ck-editor__editable,.qms-ckeditor .ck-disabled .ck.ck-toolbar{background-color:#e4e4e4;pointer-events:none}.qms-ckeditor .ck-disabled .ck-button{pointer-events:none}.qms-ckeditor .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused):focus{border-radius:4px}.qms-ckeditor .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{border:1px solid #c4c4c4;border-bottom:2px solid #1954a9;border-radius:4px;box-shadow:none;background-color:rgba(0,0,0,.08)}.qms-ckeditor .ck.ck-toolbar{box-shadow:0 1px 3px rgba(51,51,51,.2)}.qms-ckeditor .ck.ck-sticky-panel .ck-sticky-panel__content_sticky{box-shadow:none;border-width:0}.sub-container{display:flex;justify-content:space-between;padding:0 10px;font-family:Open Sans;font-size:.75rem;font-weight:400;line-height:16px;color:rgba(0,0,0,.6)}"]
+                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:450px;overflow:auto}@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}.ck-content .page-break,.qmsckeditor_container .qmsckeditor__minwidth{width:100%}.qmsckeditor_container .ck-editor__editable{overflow-y:auto}.qms-ckeditor .ck.ck-editor__editable{max-height:172px;min-height:172px;background-color:rgba(0,0,0,.04);font-family:Open Sans}.qms-ckeditor .ck.ck-editor__editable:not(.ck-focused,.ck-read-only):hover{background-color:rgba(0,0,0,.08);border-bottom:2px solid rgba(0,0,0,.38)}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar{width:12px}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-ckeditor .ck-placeholder{font-size:1rem;font-weight:600;color:rgba(0,0,0,.6)}.qms-ckeditor .ck-disabled .ck.ck-editor__main>.ck-editor__editable,.qms-ckeditor .ck-disabled .ck.ck-toolbar{background-color:#e4e4e4;pointer-events:none}.qms-ckeditor .ck-disabled .ck-button{pointer-events:none}.qms-ckeditor .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused):focus{border-radius:4px}.qms-ckeditor .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{border:1px solid #c4c4c4;border-bottom:2px solid #1954a9;border-radius:4px;box-shadow:none;background-color:rgba(0,0,0,.08)}.qms-ckeditor .ck.ck-toolbar{box-shadow:0 1px 3px rgba(51,51,51,.2)}.qms-ckeditor .ck.ck-sticky-panel .ck-sticky-panel__content_sticky{box-shadow:none;border-width:0}.sub-container{display:flex;justify-content:space-between;padding:0 10px;font-family:Open Sans;font-size:.75rem;font-weight:400;line-height:16px;color:rgba(0,0,0,.6)}"]
             },] }
 ];
 QMSCKEditorComponent.ctorParameters = () => [
@@ -7060,7 +7823,8 @@ QMSCKEditorModule.decorators = [
                     QMSCKEditorLinkComponent,
                     QMSCKEditorTreeComponent,
                     QMSCKEditorRelatedComponent,
-                    LinkAttachmentComponent
+                    LinkAttachmentComponent,
+                    QMSCKEditorTooltipComponent
                 ],
                 imports: [
                     CKEditorModule$1,
@@ -7096,12 +7860,6 @@ QMSCKEditorModule.ctorParameters = () => [
 ];
 
 class QMSCKEditorData {
-    constructor() {
-        this.apiUrl = '';
-        this.module = 0;
-        this.entityId = '';
-        this.documentId = 0;
-    }
 }
 
 class QMSCKEdtiorInputData {
@@ -7110,6 +7868,8 @@ class QMSCKEdtiorInputData {
         this.module = 0;
         this.entityId = '';
         this.documentId = 0;
+        this.mathtypeServiceUrl = '';
+        this.timestampFormat = '';
     }
 }
 
@@ -7244,9 +8004,11 @@ class QMSDialogConfig extends MatDialogConfig {
         super();
         this.data = data;
         this.width = width;
-        this.disableClose = true;
+        this.disableClose = false;
         this.panelClass = ['qms-dialog'];
         this.panelClass.push(panelClass);
+        this.autoFocus = false;
+        this.restoreFocus = false;
     }
 }
 
@@ -7435,7 +8197,7 @@ QMSTableAction.decorators = [
                 host: { 'class': 'qms-table-action' },
                 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-table-action{border:1px solid #e4e4e4;box-sizing:border-box;border-radius:4px;display:flex;justify-content:space-between;align-items:center;height:46px;width:100%}.qms-table-action .qms-table-action-block{height:inherit;display:inline-flex}.qms-table-action .qms-table-action-block:first-child .qms-button-toggle-group:first-child,.qms-table-action .qms-table-action-block:first-child button:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.qms-table-action .qms-table-action-block:first-child .qms-button-toggle-group:not(:first-child),.qms-table-action .qms-table-action-block:first-child button:not(:first-child){border-left:none}.qms-table-action .qms-table-action-block:last-child .qms-button-toggle-group:last-child,.qms-table-action .qms-table-action-block:last-child button:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.qms-table-action .qms-table-action-block:last-child .qms-button-toggle-group:not(:last-child),.qms-table-action .qms-table-action-block:last-child button:not(:last-child){border-right:none}.qms-table-action [class*=qms-btn],.qms-table-action [class*=qms-button]{height:100%;border-radius:0}.qms-table-action .qms-button-toggle-label-content{line-height:44px;padding:0 9px}.qms-table-action .mat-form-field.qms-search-field .mat-form-field-suffix .mat-icon-button{margin-bottom:0;width:1.5rem;height:1.5rem}.qms-table-action .mat-form-field.qms-search-field .mat-form-field-flex{align-items:center!important;border-radius:0!important;height:46px;border-bottom:none}.btn-more{display:none;cursor:pointer;border:1px solid #ddd;height:100%;border-radius:0;box-sizing:border-box;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;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;outline:none;line-height:40px;padding:0 9px;background-color:#fff}.btn-more mat-icon{color:#1954a9;vertical-align:middle}#block1,#block2,#block3,#block4{display:none}#block1:checked+.block1,#block2:checked+.block2,#block3:checked+.block3,#block4:checked+.block4,.block1,.block2,.block3,.block4{display:inline-flex}@media (max-width:1199.98px){.btn-block1{display:inline-block}.block1{display:none}}@media (max-width:991.98px){.btn-block2{display:inline-block}.block2{display:none}}@media (max-width:767.98px){.btn-block3{display:inline-block}.block3{display:none}}@media (max-width:575.98px){.btn-block4{display:inline-block}.block4{display: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}.qms-table-action{border:1px solid #e4e4e4;box-sizing:border-box;border-radius:4px;display:flex;justify-content:space-between;align-items:center;height:46px;width:100%}.qms-table-action .qms-table-action-block{height:inherit;display:inline-flex}.qms-table-action .qms-table-action-block:first-child .qms-button-toggle-group:first-child,.qms-table-action .qms-table-action-block:first-child button:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.qms-table-action .qms-table-action-block:first-child .qms-button-toggle-group:not(:first-child),.qms-table-action .qms-table-action-block:first-child button:not(:first-child){border-left:none}.qms-table-action .qms-table-action-block:last-child .qms-button-toggle-group:last-child,.qms-table-action .qms-table-action-block:last-child button:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.qms-table-action .qms-table-action-block:last-child .qms-button-toggle-group:not(:last-child),.qms-table-action .qms-table-action-block:last-child button:not(:last-child){border-right:none}.qms-table-action [class*=qms-btn],.qms-table-action [class*=qms-button]{height:100%;border-radius:0}.qms-table-action .qms-button-toggle-label-content{line-height:44px;padding:0 9px}.qms-table-action .mat-form-field.qms-search-field .mat-form-field-suffix .mat-icon-button{margin-bottom:0;width:1.5rem;height:1.5rem}.qms-table-action .mat-form-field.qms-search-field .mat-form-field-flex{align-items:center!important;border-radius:0!important;height:46px;border-bottom:none}button.btn-more{display:none}button.btn-more mat-icon{color:#1954a9;vertical-align:middle}#block1,#block2,#block3,#block4{display:none}#block1:checked+.block1,#block2:checked+.block2,#block3:checked+.block3,#block4:checked+.block4,.block1,.block2,.block3,.block4{display:inline-flex}@media (max-width:1199.98px){button.btn-block1{display:inline-block}.block1{display:none}}@media (max-width:991.98px){button.btn-block2{display:inline-block}.block2{display:none}}@media (max-width:767.98px){button.btn-block3{display:inline-block}.block3{display:none}}@media (max-width:575.98px){button.btn-block4{display:inline-block}.block4{display:none}}"]
             },] }
 ];
 QMSTableAction.ctorParameters = () => [
@@ -7458,7 +8220,7 @@ QMSTableActionBlock.decorators = [
                 },
                 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-table-action{border:1px solid #e4e4e4;box-sizing:border-box;border-radius:4px;display:flex;justify-content:space-between;align-items:center;height:46px;width:100%}.qms-table-action .qms-table-action-block{height:inherit;display:inline-flex}.qms-table-action .qms-table-action-block:first-child .qms-button-toggle-group:first-child,.qms-table-action .qms-table-action-block:first-child button:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.qms-table-action .qms-table-action-block:first-child .qms-button-toggle-group:not(:first-child),.qms-table-action .qms-table-action-block:first-child button:not(:first-child){border-left:none}.qms-table-action .qms-table-action-block:last-child .qms-button-toggle-group:last-child,.qms-table-action .qms-table-action-block:last-child button:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.qms-table-action .qms-table-action-block:last-child .qms-button-toggle-group:not(:last-child),.qms-table-action .qms-table-action-block:last-child button:not(:last-child){border-right:none}.qms-table-action [class*=qms-btn],.qms-table-action [class*=qms-button]{height:100%;border-radius:0}.qms-table-action .qms-button-toggle-label-content{line-height:44px;padding:0 9px}.qms-table-action .mat-form-field.qms-search-field .mat-form-field-suffix .mat-icon-button{margin-bottom:0;width:1.5rem;height:1.5rem}.qms-table-action .mat-form-field.qms-search-field .mat-form-field-flex{align-items:center!important;border-radius:0!important;height:46px;border-bottom:none}.btn-more{display:none;cursor:pointer;border:1px solid #ddd;height:100%;border-radius:0;box-sizing:border-box;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;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;outline:none;line-height:40px;padding:0 9px;background-color:#fff}.btn-more mat-icon{color:#1954a9;vertical-align:middle}#block1,#block2,#block3,#block4{display:none}#block1:checked+.block1,#block2:checked+.block2,#block3:checked+.block3,#block4:checked+.block4,.block1,.block2,.block3,.block4{display:inline-flex}@media (max-width:1199.98px){.btn-block1{display:inline-block}.block1{display:none}}@media (max-width:991.98px){.btn-block2{display:inline-block}.block2{display:none}}@media (max-width:767.98px){.btn-block3{display:inline-block}.block3{display:none}}@media (max-width:575.98px){.btn-block4{display:inline-block}.block4{display: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}.qms-table-action{border:1px solid #e4e4e4;box-sizing:border-box;border-radius:4px;display:flex;justify-content:space-between;align-items:center;height:46px;width:100%}.qms-table-action .qms-table-action-block{height:inherit;display:inline-flex}.qms-table-action .qms-table-action-block:first-child .qms-button-toggle-group:first-child,.qms-table-action .qms-table-action-block:first-child button:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.qms-table-action .qms-table-action-block:first-child .qms-button-toggle-group:not(:first-child),.qms-table-action .qms-table-action-block:first-child button:not(:first-child){border-left:none}.qms-table-action .qms-table-action-block:last-child .qms-button-toggle-group:last-child,.qms-table-action .qms-table-action-block:last-child button:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.qms-table-action .qms-table-action-block:last-child .qms-button-toggle-group:not(:last-child),.qms-table-action .qms-table-action-block:last-child button:not(:last-child){border-right:none}.qms-table-action [class*=qms-btn],.qms-table-action [class*=qms-button]{height:100%;border-radius:0}.qms-table-action .qms-button-toggle-label-content{line-height:44px;padding:0 9px}.qms-table-action .mat-form-field.qms-search-field .mat-form-field-suffix .mat-icon-button{margin-bottom:0;width:1.5rem;height:1.5rem}.qms-table-action .mat-form-field.qms-search-field .mat-form-field-flex{align-items:center!important;border-radius:0!important;height:46px;border-bottom:none}button.btn-more{display:none}button.btn-more mat-icon{color:#1954a9;vertical-align:middle}#block1,#block2,#block3,#block4{display:none}#block1:checked+.block1,#block2:checked+.block2,#block3:checked+.block3,#block4:checked+.block4,.block1,.block2,.block3,.block4{display:inline-flex}@media (max-width:1199.98px){button.btn-block1{display:inline-block}.block1{display:none}}@media (max-width:991.98px){button.btn-block2{display:inline-block}.block2{display:none}}@media (max-width:767.98px){button.btn-block3{display:inline-block}.block3{display:none}}@media (max-width:575.98px){button.btn-block4{display:inline-block}.block4{display:none}}"]
             },] }
 ];
 QMSTableActionBlock.ctorParameters = () => [
@@ -7489,223 +8251,6 @@ QMSTableModule.decorators = [
             },] }
 ];
 
-const BREADCRUMB_DROPDOWN_ICON = `<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3552 5.35508C11.9118 4.91175 11.3168 4.66675 10.6985 4.66675H4.66683C3.3835 4.66675 2.34516 5.71675 2.34516 7.00008L2.3335 21.0001C2.3335 22.2834 3.3835 23.3334 4.66683 23.3334H23.3335C24.6168 23.3334 25.6668 22.2834 25.6668 21.0001V9.33341C25.6668 8.05008 24.6168 7.00008 23.3335 7.00008H14.0002L12.3552 5.35508Z" fill="#00324E"/>
-<path d="M10.25 13.125L14 16.875L17.75 13.125H10.25Z" fill="white" fill-opacity="0.6"/>
-</svg>
-`;
-
-class QMSBreadcrumbItemDirective {
-    constructor(ele, renderer) {
-        this.ele = ele;
-        this.renderer = renderer;
-        this.showTooltipChange = new EventEmitter();
-    }
-    ngAfterViewInit() {
-        if (this.breadcrumbItemText) {
-            this.breadcrumbItemText.nativeElement.classList.add('qms-breadcrumb-item-text');
-            if (this.breadcrumbItemText.nativeElement.innerText.length > 30) {
-                this.showTooltipChange.emit(true);
-            }
-        }
-    }
-    ngOnInit() {
-        if (this.ele) {
-            this.ele.nativeElement.classList.add('qms-breadcrumb-item');
-            if (this.isLastItem) {
-                this.ele.nativeElement.classList.add('qms-breadcrumb-last-item');
-            }
-        }
-    }
-}
-QMSBreadcrumbItemDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[qms-breadcrumb-item]',
-            },] }
-];
-QMSBreadcrumbItemDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 }
-];
-QMSBreadcrumbItemDirective.propDecorators = {
-    isLastItem: [{ type: Input }],
-    showTooltip: [{ type: Input }],
-    showTooltipChange: [{ type: Output }],
-    breadcrumbItemText: [{ type: ContentChild, args: ["breadcrumbItemText", { static: false },] }]
-};
-
-class QMSBreadcrumb {
-    constructor(ele, iconRegistry, sanitizer) {
-        this.ele = ele;
-        this.iconRegistry = iconRegistry;
-        this.sanitizer = sanitizer;
-        this.onItemClick = new EventEmitter();
-        this.dropdownNodes = [];
-        this.isOverflow = false;
-        this.itemSpace = 12;
-        this.isMobileType = false;
-        iconRegistry.addSvgIconLiteral('breadcrumb_dropdown', sanitizer.bypassSecurityTrustHtml(BREADCRUMB_DROPDOWN_ICON));
-    }
-    ngAfterViewInit() {
-        if (!this.isMobileType) {
-            if (!this.maxLine || this.maxLine < 2) {
-                const nodeWidths = this.breadCrumbNodes.filter((x, index) => index != 0).map(x => x.ele.nativeElement.offsetWidth);
-                let currentWidth = 0;
-                nodeWidths.forEach(width => {
-                    currentWidth += width + this.itemSpace * 2;
-                });
-                this.isOverflow = this.ele.nativeElement.offsetWidth < currentWidth;
-                if (this.isOverflow) {
-                    if (this.type !== 'table') {
-                        this.dropdownNodes.push(this.homeNode);
-                    }
-                    nodeWidths.forEach((eleWidth, index) => {
-                        if (currentWidth - eleWidth + this.itemSpace > this.ele.nativeElement.offsetWidth) {
-                            this.itemNodes[index].isShow = false;
-                            this.dropdownNodes.push(this.itemNodes[index]);
-                            currentWidth -= eleWidth + this.itemSpace;
-                        }
-                    });
-                }
-            }
-            else {
-                const nodeWidths = this.breadCrumbNodes.filter((x, index) => index != 0).map(x => x.ele.nativeElement.offsetWidth);
-                let currentWidth = 0;
-                nodeWidths.forEach(width => {
-                    currentWidth += width + this.itemSpace * 2;
-                });
-                this.isOverflow = this.ele.nativeElement.offsetWidth * 2 < currentWidth;
-                if (this.isOverflow) {
-                    if (this.type !== 'table') {
-                        this.dropdownNodes.push(this.homeNode);
-                    }
-                    nodeWidths.forEach((eleWidth, index) => {
-                        if (currentWidth - eleWidth + this.itemSpace > this.ele.nativeElement.offsetWidth * 2) {
-                            this.itemNodes[index].isShow = false;
-                            this.dropdownNodes.push(this.itemNodes[index]);
-                            currentWidth -= eleWidth + this.itemSpace;
-                        }
-                    });
-                }
-            }
-        }
-    }
-    ngOnInit() {
-        this.itemIconType = ItemIconType;
-        if (this.nodes && this.nodes.length > 0) {
-            this.nodes.forEach(ele => {
-                ele.isOverflow = ele.isOverflow ? ele.isOverflow : false;
-                ele.isShow = true;
-                ele.displayType = this.getItemIconType(ele);
-            });
-            if (this.type !== 'mobile') {
-                this.homeNode = this.nodes[0];
-                this.itemNodes = this.nodes.slice(1);
-            }
-            else {
-                this.isMobileType = true;
-                this.previousNode = this.nodes[this.nodes.length >= 2 ? this.nodes.length - 2 : 0];
-            }
-        }
-        if (this.type === 'table') {
-            this.ele.nativeElement.classList.add('qms-breadcrumb-table');
-            this.itemSpace = 12;
-        }
-        if (this.maxLine && this.maxLine > 1) {
-            this.ele.nativeElement.classList.add('qms-breadcrumb__multi-line');
-        }
-    }
-    getItemIconType(treeConfig) {
-        if (treeConfig.itemIcon)
-            return ItemIconType.name;
-        if (treeConfig.itemIconPath)
-            return ItemIconType.path;
-        if (treeConfig.itemIconBase64)
-            return ItemIconType.base64;
-        if (treeConfig.itemIconSvg)
-            return ItemIconType.svg;
-        return ItemIconType.none;
-    }
-    getImagePath(node) {
-        return this.sanitizer.bypassSecurityTrustResourceUrl(node.itemIconBase64);
-    }
-    onKeyPressed(event) {
-        [...event.target.children].forEach(x => x.click());
-    }
-    onItemSelect(item) {
-        if (this.onItemClick) {
-            this.onItemClick.emit(item);
-        }
-    }
-}
-QMSBreadcrumb.decorators = [
-    { type: Component, args: [{
-                selector: 'qms-breadcrumb',
-                template: "<div>\r\n  <div class=\"breadcrumb-container\" *ngIf=\"!isMobileType\">\r\n      <!-- Home -->\r\n    <span qms-breadcrumb-item *ngIf=\"!isOverflow || type=='table'\"\r\n    [(showTooltip)]=\"homeNode.isOverflow\">\r\n      <mat-icon\r\n        *ngIf=\"homeNode.displayType === itemIconType.name\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined\"\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\"\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\"\r\n        [src]=\"homeNode.itemIconPath\"\r\n      />\r\n      <img\r\n        *ngIf=\"homeNode.displayType === itemIconType.base64\"\r\n        class=\"mat-icon image-base64\"\r\n        [src]=\"getImagePath(homeNode)\"\r\n      />\r\n      <div [qms-tool-tip]=\"homeNode.name\" \r\n          [showToolTip]=\"homeNode.isOverflow\" \r\n          #breadcrumbItemText\r\n          mode=\"dark\" \r\n          (click)=\"onItemSelect(homeNode)\">\r\n          {{homeNode.name}}\r\n      </div>\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 not table -->\r\n    <span qms-breadcrumb-item *ngIf=\"isOverflow && type!='table'\">\r\n      <button qms-btn-icon color=\"light\" class=\"breadcrumb__dropdown-btn\" [matMenuTriggerFor]=\"bodyMediumMenu\">\r\n        <mat-icon svgIcon=\"breadcrumb_dropdown\"></mat-icon>\r\n      </button>\r\n      <mat-menu #bodyMediumMenu=\"matMenu\" yPosition=\"below\" class='qms-breadcrumb-menu'>\r\n        <div (click)=\"$event.stopPropagation()\">\r\n          <div qms-menu-item mat-menu-item disableRipple \r\n            *ngFor=\"let item of dropdownNodes.reverse()\" \r\n            (keydown.enter)=\"onKeyPressed($event)\"\r\n            (click)=\"onItemSelect(item)\">\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 #bodyMediumMenu=\"matMenu\" yPosition=\"below\" class='qms-breadcrumb-menu'>\r\n        <div (click)=\"$event.stopPropagation()\">\r\n          <div qms-menu-item mat-menu-item disableRipple \r\n            *ngFor=\"let item of dropdownNodes.reverse()\" \r\n            (keydown.enter)=\"onKeyPressed($event)\"\r\n            (click)=\"onItemSelect(item)\">\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 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        <mat-icon\r\n          *ngIf=\"item.displayType === itemIconType.name && item.isShow\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\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\"\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\"\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\"\r\n          [src]=\"getImagePath(item)\"\r\n        />\r\n        <div [qms-tool-tip]=\"item.name\" \r\n            [showToolTip]=\"item.isOverflow\" \r\n            #breadcrumbItemText\r\n            mode=\"dark\" *ngIf=\"item.isShow\" \r\n            (click)=\"onItemSelect(item)\">\r\n            {{item.name}}\r\n        </div>\r\n        <span qms-breadcrumb-direction-icon \r\n            *ngIf=\"item.isShow && i !== itemNodes.length - 1\">\r\n            <mat-icon>keyboard_arrow_right</mat-icon>\r\n        </span>\r\n    </span>\r\n  </div>\r\n  \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\"\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\"\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\"\r\n        [src]=\"previousNode.itemIconPath\"\r\n      />\r\n      <img\r\n        *ngIf=\"previousNode.displayType === itemIconType.base64\"\r\n        class=\"mat-icon image-base64\"\r\n        [src]=\"getImagePath(previousNode)\"\r\n      />\r\n      <div [qms-tool-tip]=\"previousNode.name\" \r\n          [showToolTip]=\"previousNode.isOverflow\" \r\n          #breadcrumbItemText\r\n          mode=\"dark\" \r\n          (click)=\"onItemSelect(previousNode)\">\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 .qms-breadcrumb-item{cursor:pointer}.breadcrumb-container .qms-breadcrumb-item .qms-btn-icon{width:1.5rem;height:1.5rem;line-height:1.5rem}.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 .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 = () => [
-    { type: ElementRef },
-    { type: MatIconRegistry },
-    { type: DomSanitizer }
-];
-QMSBreadcrumb.propDecorators = {
-    nodes: [{ type: Input }],
-    type: [{ type: Input }],
-    maxLine: [{ type: Input }],
-    onItemClick: [{ type: Output }],
-    breadCrumbNodes: [{ type: ViewChildren, args: [QMSBreadcrumbItemDirective, {},] }]
-};
-
-class QMSBreadcrumbDirectionIconDirective {
-    constructor(ele) {
-        this.ele = ele;
-    }
-    ngOnInit() {
-        if (this.ele) {
-            this.ele.nativeElement.classList.add('qms-breadcrumb-direction-icon');
-        }
-    }
-}
-QMSBreadcrumbDirectionIconDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[qms-breadcrumb-direction-icon]',
-            },] }
-];
-QMSBreadcrumbDirectionIconDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
-class QMSBreadcrumbModule {
-}
-QMSBreadcrumbModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    MatCommonModule,
-                    MatIconModule,
-                    QmsAngularModule,
-                    QMSButtonModule,
-                    MatMenuModule
-                ],
-                exports: [
-                    MatCommonModule,
-                    MatIconModule,
-                    QMSBreadcrumb,
-                    QMSBreadcrumbItemDirective,
-                    QMSBreadcrumbDirectionIconDirective,
-                ],
-                declarations: [
-                    QMSBreadcrumb,
-                    QMSBreadcrumbItemDirective,
-                    QMSBreadcrumbDirectionIconDirective,
-                ],
-                providers: []
-            },] }
-];
-
 class BreadcrumbNode {
 }
 
@@ -7799,5 +8344,5 @@ class QMSSnackbarConfig extends MatSnackBarConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { AutocompleteOffDirective, BREADCRUMB_DROPDOWN_ICON, BUTTON_TOGGLE_DEFAULT_OPTIONS, BUTTON_TOGGLE_GROUP, BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, BannerType, BreadcrumbNode, ButtonToggleChange, CHECKLIST_ICON, CKEditorEventConst, CKEditorModule, ConfirmDialog, DEPARTMENT_FOLDER_ICON, DEPARTMENT_FOLDER_OUTLINED_ICON, DEVIATION_ICON, DOCUMENT_ICON, DateFormatPipe, ENTERPRISE_FOLDER_ICON, ENTERPRISE_FOLDER_OUTLINED_ICON, FileErrorType, IconModel, 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, QMSAnchor, QMSAttachmentListDirective, QMSBreadcrumb, QMSBreadcrumbDirectionIconDirective, QMSBreadcrumbItemDirective, QMSBreadcrumbModule, QMSButton, QMSButtonIcon, QMSButtonModule, QMSButtonToggle, QMSButtonToggleGroup, QMSCKEditorBaseComponent, QMSCKEditorBaseService, 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, QMSInputChipDirective, QMSInputClearDirective, QMSList, QMSListExpansion, QMSListExpansionHeader, QMSListHeader, QMSListItem, QMSListLeadingIcon, QMSListLine, QMSListModule, QMSRangeSliderDirective, QMSRangeSliderLockUpDirective, QMSRelatedGlobalService, QMSRelatedModule, QMSRichText, QMSRichTextModule, QMSScrolableAttachmentListDirective, QMSScrollbarDirective, QMSSearchFieldDirective, QMSSnackbarConfig, QMSSuffixDirective, QMSSuffixFieldDirective, QMSTabGroupAdvancedDirective, QMSTabGroupDirective, QMSTabLabelDirective, QMSTableAction, QMSTableActionBlock, QMSTableModule, QMSTextBlockDirective, QMSTextBlockLine, QMSToolTipComponent, QMSToolTipRendererDirective, QMSTooltipImageDirective, QMSTooltipModule, QMSUploadFileErrorDialog, QMSUploadFileErrorDialogModule, QMSUploadingFileGuard, QmsAngularComponent, QmsAngularModule, QmsAngularService, QmsAppBarComponent, QmsAppBarModule, QmsBannerComponent, QmsBannerConfirmButton, QmsBannerConfirmButtonClick, QmsBannerConfirmComponent, QmsBannerConfirmModule, QmsBannerContent, QmsBannerLoadingComponent, QmsBannerLoadingModule, QmsBannerModule, QmsStepperComponent, QmsStepperModule, REGIONAL_FOLDER_ICON, REGIONAL_FOLDER_OUTLINED_ICON, RISK_ICON, RelatedContentComponent, RelatedListComponent, RelatedPopupComponent, Result, RiskAnalysis, RiskAnalysisComponent, RiskDanger, RiskListComponent, RiskResult, RiskResultComponent, ScrollToSelectedDirective, SharedModule, SideNav, SideNavItem, SidenavComponent, StepModel, TargetType, TestOnlyComponent, TranslateLibraryService, TreeComponent, TreeConfig, TreeModel, TreeNode$1 as TreeNode, UploadErrorData, en, mixinColor, no, notExceedSize, requiredFileType, ɵ1, SharedMaterialModule as ɵa, QMSCKEditorTemplateComponent as ɵb, QMSCKEditorTreeService as ɵc, LinkAttachmentComponent as ɵd };
+export { AutocompleteOffDirective, BREADCRUMB_DROPDOWN_ICON, BUTTON_TOGGLE_DEFAULT_OPTIONS, BUTTON_TOGGLE_GROUP, BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, BannerType, 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, IconModel, 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, QMSAnchor, QMSAppIconModule, QMSAttachmentListDirective, QMSBreadcrumb, QMSBreadcrumbDirectionIconDirective, QMSBreadcrumbItemDirective, QMSBreadcrumbModule, QMSButton, QMSButtonIcon, QMSButtonModule, QMSButtonToggle, QMSButtonToggleGroup, QMSCKEditorBaseComponent, QMSCKEditorBaseService, 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, QMSSnackbarConfig, QMSSuffixDirective, QMSSuffixFieldDirective, QMSTabGroupAdvancedDirective, QMSTabGroupDirective, QMSTabLabelDirective, QMSTableAction, QMSTableActionBlock, QMSTableModule, QMSTextBlockDirective, QMSTextBlockLine, QMSToolTipComponent, QMSToolTipRendererDirective, QMSTooltipImageDirective, QMSTooltipModule, QMSUploadFileErrorDialog, QMSUploadFileErrorDialogModule, QMSUploadingFileGuard, QmsAngularComponent, QmsAngularModule, QmsAngularService, QmsAppBarComponent, QmsAppBarModule, QmsBannerComponent, QmsBannerConfirmButton, QmsBannerConfirmButtonClick, QmsBannerConfirmComponent, QmsBannerConfirmModule, QmsBannerContent, QmsBannerLoadingComponent, QmsBannerLoadingModule, QmsBannerModule, QmsStepperComponent, QmsStepperModule, REGIONAL_FOLDER_ICON, REGIONAL_FOLDER_OUTLINED_ICON, RISK_ICON, RelatedContentComponent, RelatedListComponent, RelatedPopupComponent, Result, RiskAnalysis, RiskAnalysisComponent, RiskDanger, RiskListComponent, RiskResult, RiskResultComponent, ScrollToSelectedDirective, SharedModule, SideNav, SideNavItem, SidenavComponent, StepModel, TargetType, TestOnlyComponent, TranslateLibraryService, TreeComponent, TreeConfig, 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 };
 //# sourceMappingURL=qms-angular.js.map