npm - qms-angular - Versions diffs - 1.0.70 → 1.0.74 - Mend

qms-angular 1.0.70 → 1.0.74

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (250) hide show

package/fesm2015/qms-angular.js CHANGED Viewed

@@ -19,7 +19,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { mixinDisableRipple, mixinDisabled, MatCommonModule, setLines, MatOptionModule } from '@angular/material/core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { SelectionModel } from '@angular/cdk/collections';
 import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 import * as moment from 'moment';
@@ -40,7 +40,10 @@ import { CKEditorModule as CKEditorModule$1 } from '@ckeditor/ckeditor5-angular'
 import { __awaiter } from 'tslib';
 import * as $$1 from 'jquery';
 import * as _ from 'lodash';
+import { Buffer } from 'buffer';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
@@ -113,6 +116,8 @@ const en = {
         "DOCUMENTS_IN": "Documents in"
     },
     "QMSCKEDITOR": {
+        "ID": "ID",
+        "INFORMATION": "Information",
         "REMOVE_MAP": "Remove Map",
         "IMAGE_MAP_PROPERTIES": "Image Map Properties",
         "INSERT_TOOLTIP": "Insert a tooltip",
@@ -165,7 +170,7 @@ const en = {
         "EMAIL_BODY": "Body",
         "ANCHOR_ATTACHMENT": "Attachments",
         "ANCHOR_RELATED_DOCUMENT": "Related document",
-        "ADD_DOCUMENT_PROCESS": "Add document/ process",
+        "ADD_DOCUMENT_PROCESS": "Add document / process",
         "ADD_DOCUMENT": "Add document",
         "ADD": "Add",
         "PROCESSES": "Processes",
@@ -183,7 +188,26 @@ const en = {
         "RECTANGLE_DRAW": "Hold down SHIFT for square mode",
         "SQUARE_DRAW": "Release SHIFT for rectangle mode",
         "INVALID_URL": "Invalid URL",
-        "REQUIRED_URL": "URL is required"
+        "REQUIRED_URL": "URL is required",
+        "CLOSE": "Close",
+        "DOCUMENT_PROCESS": "Document / Process",
+        "UPLOAD_FILE_NOT_VALID_FORMAT": "The file uploaded is invalid format. Supported file formats: {0}",
+        "UPLOAD_FILE_OVERSIZE": "The file uploaded is over the limit size. The limit size is {0}MB",
+        "UPLOAD_FILE_FAILED": "Failed to upload file.",
+        "ASSISTIVE_TEXT": "Assistive text",
+        "WORDS": "Words",
+        "CHARACTERS": "Characters",
+        "SELECT_VIDEO_FROM_ARCHIVE": "Select video from the archive"
+    },
+    "ABOUT": {
+        "ABOUT_CKEDITOR": "About CKEditor",
+        "CKEDITOR5_VERSION": "CKEditor 5 version",
+        "FOR_LICENSING_INFORMATION_PLEASE_VISIT_OUR_WEBSITE": "For licensing information please visit our website",
+        "ALL_RIGHTS_RESERVED": "All rights reserved",
+        "CHECK": "Check",
+        "FOR_HELP": "for help",
+        "CKEDITOR_USERS_GUIDE": "CKEditor User's Guide",
+        "COPYRIGHT": "Copyright ©"
     },
     "BPMN": {
         "DEFAULT": "Default",
@@ -314,6 +338,20 @@ const en = {
         "TEMPLATE_NAME": "Template name",
         "TEMPLATE_INFO": "Please input template name",
         "SELECT_TEMPLATE_INFORMATION": "You must select a template before you do this action.",
+        "CONNECTION": "Connection",
+        "PROPERTIES": "Properties",
+        "BUSINESS_PROCESS_MODEL_AND_NOTATION": "Business Process Model and Notation",
+        "CONNECTED_ATTACHMENT": "Connected attachment",
+        "CONNECTED_DOCUMENT_OR_PROCESS": "Connected document / process",
+        "DELETE_ATTACHMENT": "Delete attachment",
+        "DELETE_DOCUMENT_OR_PROCESS": "Delete document / process",
+        "CHOOSE_ANCHOR_IN_TEXT_OPTIONAL": "Choose anchor in in text (optional)",
+        "RELOAD_ANCHORS": "Reload Anchors",
+        "RESET_TO_ORIGINAL": "Reset to original",
+        "AUTO_LAYOUT_GRAPH": "Auto-layout Graph",
+        "FULLSCREEN": "Fullscreen",
+        "FLOWCHART": "Flowchart",
+        "HANDBOOK": "Handbook",
     },
     "QMSCKEDITOR_MESSAGE": {
         "CONFIRM_DELETE_TEMPLATE": "Are you sure you want to delete this template?",
@@ -375,6 +413,8 @@ const no = {
         "DOCUMENTS_IN": "Dokumenter i"
     },
     "QMSCKEDITOR": {
+        "ID": "ID",
+        "INFORMATION": "Informasjon",
         "REMOVE_MAP": "Fjern kartet",
         "IMAGE_MAP_PROPERTIES": "Bilde Kart Egenskaper",
         "INSERT_TOOLTIP": "Sett inn et verktøytips",
@@ -445,7 +485,26 @@ const no = {
         "RECTANGLE_DRAW": "Hold nede SKIFT for kvadratisk modus",
         "SQUARE_DRAW": "Slipp SKIFT for rektangelmodus",
         "INVALID_URL": "Ugyldig URL",
-        "REQUIRED_URL": "URL er påkrevd"
+        "REQUIRED_URL": "URL er påkrevd",
+        "CLOSE": "Close",
+        "DOCUMENT_PROCESS": "Dokument / Prosess",
+        "UPLOAD_FILE_NOT_VALID_FORMAT": "Filen som er lastet opp er ugyldig format. Støttede filformater: {0}",
+        "UPLOAD_FILE_OVERSIZE": "Filen som er lastet opp er over grensestørrelsen. Grensestørrelsen er {0}MB",
+        "UPLOAD_FILE_FAILED": "Kunne ikke laste opp filen.",
+        "ASSISTIVE_TEXT": "Hjelpende tekst",
+        "WORDS": "Ord",
+        "CHARACTERS": "Tegn",
+        "SELECT_VIDEO_FROM_ARCHIVE": "Velg video fra arkivet"
+    },
+    "ABOUT": {
+        "ABOUT_CKEDITOR": "Om CKEditor",
+        "CKEDITOR5_VERSION": "CKEditor 5 versjon",
+        "FOR_LICENSING_INFORMATION_PLEASE_VISIT_OUR_WEBSITE": "For lisensieringsinformasjon, besøk vår nettside",
+        "ALL_RIGHTS_RESERVED": "Alle rettigheter er forbeholdt",
+        "CHECK": "Se",
+        "FOR_HELP": "for hjelp",
+        "CKEDITOR_USERS_GUIDE": "brukerhåndboken for CKEditor",
+        "COPYRIGHT": "Opphavsrett ©"
     },
     "BPMN": {
         "DEFAULT": "Standard",
@@ -576,6 +635,20 @@ const no = {
         "TEMPLATE_NAME": "Malnavn",
         "TEMPLATE_INFO": "Vennligst skriv inn malnavn",
         "SELECT_TEMPLATE_INFORMATION": "Du må velge en malen før du utfører denne handlingen.",
+        "CONNECTION": "Forbindelse",
+        "PROPERTIES": "Egenskaper",
+        "BUSINESS_PROCESS_MODEL_AND_NOTATION": "Forretningsprosessmodell og notasjon",
+        "CONNECTED_ATTACHMENT": "Tilkoblet vedlegg",
+        "CONNECTED_DOCUMENT_OR_PROCESS": "Koblet dokumentet / prosessen",
+        "DELETE_ATTACHMENT": "Slett vedlegg",
+        "DELETE_DOCUMENT_OR_PROCESS": "Slett dokumentet / prosessen",
+        "CHOOSE_ANCHOR_IN_TEXT_OPTIONAL": "Velg anker i tekst (valgfritt)",
+        "RELOAD_ANCHORS": "Last ankere på nytt",
+        "RESET_TO_ORIGINAL": "Forkast endringer",
+        "AUTO_LAYOUT_GRAPH": "Auto-layout Graf",
+        "FULLSCREEN": "Fullskjermvisning",
+        "FLOWCHART": "Flytskjema",
+        "HANDBOOK": "eHåndbok",
     },
     "QMSCKEDITOR_MESSAGE": {
         "CONFIRM_DELETE_TEMPLATE": "Er du sikker på at du vil slette denne malen?",
@@ -1591,60 +1664,6 @@ MarginDirective.propDecorators = {
     value: [{ type: Input }]
 };
-class QMSRangeSliderLockUpDirective {
-    constructor(ele) {
-        this.ele = ele;
-    }
-    ngOnInit() {
-        if (this.ele) {
-            this.ele.nativeElement.classList.add('qms-range-slider-lockup');
-        }
-    }
-}
-QMSRangeSliderLockUpDirective.decorators = [
-    { type: Directive, args: [{
-                selector: 'mat-slider[qms-range-slider-lockup]',
-            },] }
-];
-QMSRangeSliderLockUpDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-class QMSRangeSliderDirective {
-    constructor(ele) {
-        this.ele = ele;
-    }
-    ngOnInit() {
-        if (this.ele) {
-            this.ele.nativeElement.classList.add('qms-range-slider');
-        }
-    }
-    onMouseUp() {
-        clearTimeout(this.timerId);
-        this.timerId = setTimeout(() => {
-            this.ele.nativeElement.classList.remove('qms-range-slider-active');
-            this.ele.nativeElement.classList.remove('mat-slider-thumb-start');
-        }, 500);
-    }
-    onMouseDown() {
-        clearTimeout(this.timerId);
-        this.ele.nativeElement.classList.add('qms-range-slider-active');
-        this.ele.nativeElement.classList.add('mat-slider-thumb-start');
-    }
-}
-QMSRangeSliderDirective.decorators = [
-    { type: Directive, args: [{
-                selector: 'mat-slider[qms-range-slider]',
-            },] }
-];
-QMSRangeSliderDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-QMSRangeSliderDirective.propDecorators = {
-    onMouseUp: [{ type: HostListener, args: ['mouseup', [],] }],
-    onMouseDown: [{ type: HostListener, args: ['mousedown', [],] }]
-};
 class ScrollToSelectedDirective {
     constructor(el, renderer) {
         this.el = el;
@@ -1758,82 +1777,6 @@ QMSSearchFieldDirective.propDecorators = {
     isLoading: [{ type: Input }]
 };
-class QMSDrawerContentDirective {
-    constructor(ele) {
-        this.ele = ele;
-    }
-    ngOnInit() {
-        if (this.ele) {
-            this.ele.nativeElement.classList.add('qms-drawer-content');
-        }
-    }
-}
-QMSDrawerContentDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[qms-drawer-content]',
-            },] }
-];
-QMSDrawerContentDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-class QMSDrawerHeaderActionDirective {
-    constructor(ele) {
-        this.ele = ele;
-    }
-    ngOnInit() {
-        if (this.ele) {
-            this.ele.nativeElement.classList.add('qms-drawer-header__action');
-        }
-    }
-}
-QMSDrawerHeaderActionDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[qms-drawer-header-action]',
-            },] }
-];
-QMSDrawerHeaderActionDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-class QMSDrawerHeaderDirective {
-    constructor(ele) {
-        this.ele = ele;
-    }
-    ngOnInit() {
-        if (this.ele) {
-            this.ele.nativeElement.classList.add('qms-drawer-header');
-        }
-    }
-}
-QMSDrawerHeaderDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[qms-drawer-header]',
-            },] }
-];
-QMSDrawerHeaderDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-class QMSDrawerDirective {
-    constructor(ele) {
-        this.ele = ele;
-    }
-    ngOnInit() {
-        if (this.ele) {
-            this.ele.nativeElement.classList.add('qms-drawer');
-        }
-    }
-}
-QMSDrawerDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[qms-drawer]',
-            },] }
-];
-QMSDrawerDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
 class QMSTextBlockLine {
     constructor(elRef, renderer) {
         this.elRef = elRef;
@@ -2614,7 +2557,7 @@ QMSButtonIcon.decorators = [
                 inputs: ['disabled', 'color', 'active'],
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.qms-btn{height:36px;line-height:34px;padding:0 10px;background-color:#1954a9;color:#fff}.qms-btn:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn.qms-primary{background-color:#1954a9;color:#fff}.qms-btn.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn.qms-primary:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn.qms-primary:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn.qms-secondary{background-color:#9e360f;color:#fff}.qms-btn.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn.qms-secondary:not([disabled]):focus{background-color:#9e360f;box-shadow:0 0 0 2px #cf9b87}.qms-btn.qms-secondary:not([disabled]):hover{background-color:#b63e11;color:#fff}.qms-btn-lg{height:48px;line-height:38px;padding:4px 14px;background-color:#1954a9;color:#fff}.qms-btn-lg:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-lg:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-lg:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-lg.qms-primary{background-color:#1954a9;color:#fff}.qms-btn-lg.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-lg.qms-primary:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-lg.qms-primary:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-lg.qms-secondary{background-color:#9e360f;color:#fff}.qms-btn-lg.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-lg.qms-secondary:not([disabled]):focus{background-color:#9e360f;box-shadow:0 0 0 2px #cf9b87}.qms-btn-lg.qms-secondary:not([disabled]):hover{background-color:#b63e11;color:#fff}.qms-btn-outlined{height:36px;line-height:34px;padding:0 9px;background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-outlined:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-outlined:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-outlined.qms-primary{background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-outlined.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined.qms-primary:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-outlined.qms-primary:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-outlined.qms-secondary{background-color:#fff;color:#9e360f;border:1px solid #9e360f}.qms-btn-outlined.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined.qms-secondary:not([disabled]):focus{background-color:#fff;color:#b63e11;box-shadow:0 0 0 2px #872e0d}.qms-btn-outlined.qms-secondary:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11;border:1px solid #b63e11}.qms-btn-outlined-lg{height:48px;line-height:38px;padding:4px 13px;background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-outlined-lg:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined-lg:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-outlined-lg:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-outlined-lg.qms-primary{background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-outlined-lg.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined-lg.qms-primary:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-outlined-lg.qms-primary:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-outlined-lg.qms-secondary{background-color:#fff;color:#9e360f;border:1px solid #9e360f}.qms-btn-outlined-lg.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined-lg.qms-secondary:not([disabled]):focus{background-color:#fff;color:#b63e11;box-shadow:0 0 0 2px #872e0d}.qms-btn-outlined-lg.qms-secondary:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11;border:1px solid #b63e11}.qms-btn-text{height:36px;line-height:34px;padding:0 10px;background-color:transparent;color:#1954a9}.qms-btn-text:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text:not([disabled]):focus{background-color:transparent;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-text:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-text.qms-primary{background-color:transparent;color:#1954a9}.qms-btn-text.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text.qms-primary:not([disabled]):focus{background-color:transparent;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-text.qms-primary:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-text.qms-secondary{background-color:transparent;color:#9e360f}.qms-btn-text.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text.qms-secondary:not([disabled]):focus{background-color:transparent;color:#b63e11;box-shadow:0 0 0 2px #872e0d}.qms-btn-text.qms-secondary:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11}.qms-btn-text-lg{height:48px;line-height:38px;padding:4px 14px;background-color:transparent;color:#1954a9}.qms-btn-text-lg:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text-lg:not([disabled]):focus{background-color:transparent;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-text-lg:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-text-lg.qms-primary{background-color:transparent;color:#1954a9}.qms-btn-text-lg.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text-lg.qms-primary:not([disabled]):focus{background-color:transparent;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-text-lg.qms-primary:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-text-lg.qms-secondary{background-color:transparent;color:#9e360f}.qms-btn-text-lg.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text-lg.qms-secondary:not([disabled]):focus{background-color:transparent;color:#b63e11;box-shadow:0 0 0 2px #872e0d}.qms-btn-text-lg.qms-secondary:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11}.qms-btn-fab,.qms-btn-fab-sm{min-width:0;width:56px;height:56px;padding:0;flex-shrink:0;box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2);background-color:#1954a9;color:#fff}.qms-btn-fab-sm .qms-btn-wrapper,.qms-btn-fab .qms-btn-wrapper{padding:16px 0;display:inline-block;line-height:24px}.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible),.qms-btn-fab:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab-sm:not([disabled]):focus,.qms-btn-fab:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-fab-sm:not([disabled]):hover,.qms-btn-fab:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible),.qms-btn-fab:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-sm:not([disabled]):focus,.qms-btn-fab:not([disabled]):focus{box-shadow:0 0 0 2px #8caad4,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab.qms-primary,.qms-primary.qms-btn-fab-sm{background-color:#1954a9;color:#fff}.qms-btn-fab.qms-primary:not([disabled]):focus:not(:focus-visible),.qms-primary.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab.qms-primary:not([disabled]):focus,.qms-primary.qms-btn-fab-sm:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-fab.qms-primary:not([disabled]):hover,.qms-primary.qms-btn-fab-sm:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-fab.qms-primary:not([disabled]):focus:not(:focus-visible),.qms-primary.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab.qms-primary:not([disabled]):focus,.qms-primary.qms-btn-fab-sm:not([disabled]):focus{box-shadow:0 0 0 2px #8caad4,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab.qms-secondary,.qms-secondary.qms-btn-fab-sm{background-color:#9e360f;color:#fff}.qms-btn-fab.qms-secondary:not([disabled]):focus:not(:focus-visible),.qms-secondary.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab.qms-secondary:not([disabled]):focus,.qms-secondary.qms-btn-fab-sm:not([disabled]):focus{background-color:#9e360f;box-shadow:0 0 0 2px #cf9b87}.qms-btn-fab.qms-secondary:not([disabled]):hover,.qms-secondary.qms-btn-fab-sm:not([disabled]):hover{background-color:#b63e11;color:#fff}.qms-btn-fab.qms-secondary:not([disabled]):focus:not(:focus-visible),.qms-secondary.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab.qms-secondary:not([disabled]):focus,.qms-secondary.qms-btn-fab-sm:not([disabled]):focus{box-shadow:0 0 0 2px #cf9b87,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-sm{min-width:0;width:40px;height:40px;padding:0;flex-shrink:0;box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-sm .qms-btn-wrapper{padding:8px 0;display:inline-block;line-height:24px}.qms-btn-fab-outlined,.qms-btn-fab-outlined-sm{min-width:0;width:56px;height:56px;padding:0;flex-shrink:0;box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2);background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined-sm .qms-btn-wrapper,.qms-btn-fab-outlined .qms-btn-wrapper{padding:16px 0;display:inline-block;line-height:24px}.qms-btn-fab-outlined-sm:not([disabled]):focus:not(:focus-visible),.qms-btn-fab-outlined:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-sm:not([disabled]):focus,.qms-btn-fab-outlined:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-sm:not([disabled]):hover,.qms-btn-fab-outlined:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-fab-outlined.qms-primary,.qms-primary.qms-btn-fab-outlined-sm{background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined.qms-primary:not([disabled]):focus:not(:focus-visible),.qms-primary.qms-btn-fab-outlined-sm:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined.qms-primary:not([disabled]):focus,.qms-primary.qms-btn-fab-outlined-sm:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined.qms-primary:not([disabled]):hover,.qms-primary.qms-btn-fab-outlined-sm:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-fab-outlined.qms-secondary,.qms-secondary.qms-btn-fab-outlined-sm{background-color:#fff;color:#9e360f;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined.qms-secondary:not([disabled]):focus:not(:focus-visible),.qms-secondary.qms-btn-fab-outlined-sm:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined.qms-secondary:not([disabled]):focus,.qms-secondary.qms-btn-fab-outlined-sm:not([disabled]):focus{background-color:#fff;color:#b63e11;box-shadow:0 0 0 2px #872e0d,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined.qms-secondary:not([disabled]):hover,.qms-secondary.qms-btn-fab-outlined-sm:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11}.qms-btn-fab-outlined-sm{min-width:0;width:40px;height:40px;padding:0;flex-shrink:0;box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-sm .qms-btn-wrapper{padding:8px 0;display:inline-block;line-height:24px}.qms-btn-fab-ext{box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2);padding:0 16px;border-radius:30px;line-height:54px;height:56px;background-color:#1954a9;color:#fff}.qms-btn-fab-ext:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab-ext:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-fab-ext:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-fab-ext:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-ext:not([disabled]):focus{box-shadow:0 0 0 2px #8caad4,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-ext.qms-primary{background-color:#1954a9;color:#fff}.qms-btn-fab-ext.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab-ext.qms-primary:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-fab-ext.qms-primary:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-fab-ext.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-ext.qms-primary:not([disabled]):focus{box-shadow:0 0 0 2px #8caad4,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-ext.qms-secondary{background-color:#9e360f;color:#fff}.qms-btn-fab-ext.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab-ext.qms-secondary:not([disabled]):focus{background-color:#9e360f;box-shadow:0 0 0 2px #cf9b87}.qms-btn-fab-ext.qms-secondary:not([disabled]):hover{background-color:#b63e11;color:#fff}.qms-btn-fab-ext.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-ext.qms-secondary:not([disabled]):focus{box-shadow:0 0 0 2px #cf9b87,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext{box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2);padding:0 16px;border-radius:30px;line-height:54px;height:56px;background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined-ext:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-fab-outlined-ext.qms-primary{background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined-ext.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext.qms-primary:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext.qms-primary:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-fab-outlined-ext.qms-secondary{background-color:#fff;color:#9e360f;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined-ext.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext.qms-secondary:not([disabled]):focus{background-color:#fff;color:#b63e11;box-shadow:0 0 0 2px #872e0d,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext.qms-secondary:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11}.qms-btn-icon{box-sizing:border-box;position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;font-style:normal}.qms-btn-icon.qms-btn-disabled{cursor:default;background:#e4e4e4;color:rgba(0,0,0,.38)}.qms-btn-icon .mat-icon{font-size:24px!important;padding-bottom:1px}.qms-btn-icon::-moz-focus-inner{border:0}.qms-btn-icon:not([disabled]):hover{text-decoration:none}.qms-btn-icon .qms-btn-icon-wrapper>*{vertical-align:middle}.qms-btn-icon:after{content:\"\";position:absolute;top:50%;left:50%;width:10px;height:10px;background:hsla(0,0%,100%,.5);opacity:0;border-radius:100%;transform:scale(1) translate(-50%);transform-origin:50% 50%}.qms-btn-icon{padding:0;min-width:0;width:48px;height:48px;line-height:48px;border-radius:50%;flex-shrink:0;border:none;background:transparent}.qms-btn-icon:focus{outline:0}.qms-btn-icon:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-icon.qms-light{color:rgba(0,0,0,.6)}.qms-btn-icon.qms-light:not([disabled]):focus,.qms-btn-icon.qms-light:not([disabled]):hover{background-color:rgba(0,0,0,.08);color:#323232}.qms-btn-icon.qms-light:not([disabled]):active{background-color:rgba(0,0,0,.24);color:#323232}.qms-btn-icon.qms-light.qms-btn-disabled{color:rgba(0,0,0,.24);background-color:transparent}.qms-btn-icon.qms-light:not(.qms-btn-disabled).active-icon{color:#1954a9}.qms-btn-icon.qms-light:not(.qms-btn-disabled).active-icon:not([disabled]):active,.qms-btn-icon.qms-light:not(.qms-btn-disabled).active-icon:not([disabled]):focus,.qms-btn-icon.qms-light:not(.qms-btn-disabled).active-icon:not([disabled]):hover{background-color:#e5eefb;color:#1954a9}.qms-btn-icon.qms-dark{color:#fff}.qms-btn-icon.qms-dark:not([disabled]):focus,.qms-btn-icon.qms-dark:not([disabled]):hover{background-color:hsla(0,0%,100%,.08)}.qms-btn-icon.qms-dark:not([disabled]):active{background-color:hsla(0,0%,100%,.24)}.qms-btn-icon.qms-dark.qms-btn-disabled{color:hsla(0,0%,100%,.24);background-color:transparent}.qms-btn-icon.qms-dark.active-icon{color:#f6b59d}.qms-btn-icon.qms-dark.active-icon:not([disabled]):focus,.qms-btn-icon.qms-dark.active-icon:not([disabled]):hover{background-color:hsla(0,0%,100%,.08)}.qms-btn-icon.qms-dark.active-icon:not([disabled]):active{background-color:hsla(0,0%,100%,.24)}.qms-btn-icon .qms-button-focus-overlay{opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1);top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.qms-btn-icon .qms-btn-icon-wrapper .mat-icon{vertical-align:middle;line-height:24px}.icon-wrapper{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center}.icon-wrapper.light.disabled .caption{color:rgba(0,0,0,.24);cursor:default;background-color:transparent}.icon-wrapper.light.active .caption{color:#1954a9}.icon-wrapper.light:not(.disabled):hover .caption{color:#323232}.icon-wrapper.light:not(.disabled):focus .caption{color:rgba(0,0,0,.6)}.icon-wrapper.light:not(.disabled):active .caption{color:#323232}.icon-wrapper.light .caption{color:rgba(0,0,0,.6)}.icon-wrapper.dark.disabled .caption{color:hsla(0,0%,100%,.24);cursor:default;background-color:transparent}.icon-wrapper.dark.active .caption{color:#f6b59d}.icon-wrapper.dark .caption{color:#fff}.icon-wrapper .caption{font-size:.75rem;line-height:16px;font-family:Open Sans;font-weight:400}@-webkit-keyframes ripple{0%{transform:scale(0);opacity:1}20%{transform:scale(25);opacity:1}to{opacity:0;transform:scale(40)}}@keyframes ripple{0%{transform:scale(0);opacity:1}20%{transform:scale(25);opacity:1}to{opacity:0;transform:scale(40)}}"]
+                styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.qms-btn{height:36px;line-height:34px;padding:0 10px;background-color:#1954a9;color:#fff}.qms-btn:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn.qms-primary{background-color:#1954a9;color:#fff}.qms-btn.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn.qms-primary:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn.qms-primary:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn.qms-secondary{background-color:#9e360f;color:#fff}.qms-btn.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn.qms-secondary:not([disabled]):focus{background-color:#9e360f;box-shadow:0 0 0 2px #cf9b87}.qms-btn.qms-secondary:not([disabled]):hover{background-color:#b63e11;color:#fff}.qms-btn-lg{height:48px;line-height:38px;padding:4px 14px;background-color:#1954a9;color:#fff}.qms-btn-lg:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-lg:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-lg:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-lg.qms-primary{background-color:#1954a9;color:#fff}.qms-btn-lg.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-lg.qms-primary:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-lg.qms-primary:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-lg.qms-secondary{background-color:#9e360f;color:#fff}.qms-btn-lg.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-lg.qms-secondary:not([disabled]):focus{background-color:#9e360f;box-shadow:0 0 0 2px #cf9b87}.qms-btn-lg.qms-secondary:not([disabled]):hover{background-color:#b63e11;color:#fff}.qms-btn-outlined{height:36px;line-height:34px;padding:0 9px;background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-outlined:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-outlined:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-outlined.qms-primary{background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-outlined.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined.qms-primary:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-outlined.qms-primary:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-outlined.qms-secondary{background-color:#fff;color:#9e360f;border:1px solid #9e360f}.qms-btn-outlined.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined.qms-secondary:not([disabled]):focus{background-color:#fff;color:#b63e11;box-shadow:0 0 0 2px #872e0d}.qms-btn-outlined.qms-secondary:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11;border:1px solid #b63e11}.qms-btn-outlined-lg{height:48px;line-height:38px;padding:4px 13px;background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-outlined-lg:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined-lg:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-outlined-lg:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-outlined-lg.qms-primary{background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-outlined-lg.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined-lg.qms-primary:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-outlined-lg.qms-primary:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-outlined-lg.qms-secondary{background-color:#fff;color:#9e360f;border:1px solid #9e360f}.qms-btn-outlined-lg.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-outlined-lg.qms-secondary:not([disabled]):focus{background-color:#fff;color:#b63e11;box-shadow:0 0 0 2px #872e0d}.qms-btn-outlined-lg.qms-secondary:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11;border:1px solid #b63e11}.qms-btn-text{height:36px;line-height:34px;padding:0 10px;background-color:transparent;color:#1954a9}.qms-btn-text:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text:not([disabled]):focus{background-color:transparent;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-text:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-text.qms-primary{background-color:transparent;color:#1954a9}.qms-btn-text.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text.qms-primary:not([disabled]):focus{background-color:transparent;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-text.qms-primary:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-text.qms-secondary{background-color:transparent;color:#9e360f}.qms-btn-text.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text.qms-secondary:not([disabled]):focus{background-color:transparent;color:#b63e11;box-shadow:0 0 0 2px #872e0d}.qms-btn-text.qms-secondary:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11}.qms-btn-text-lg{height:48px;line-height:38px;padding:4px 14px;background-color:transparent;color:#1954a9}.qms-btn-text-lg:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text-lg:not([disabled]):focus{background-color:transparent;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-text-lg:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-text-lg.qms-primary{background-color:transparent;color:#1954a9}.qms-btn-text-lg.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text-lg.qms-primary:not([disabled]):focus{background-color:transparent;color:#1954a9;box-shadow:0 0 0 2px #1954a9}.qms-btn-text-lg.qms-primary:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-text-lg.qms-secondary{background-color:transparent;color:#9e360f}.qms-btn-text-lg.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-text-lg.qms-secondary:not([disabled]):focus{background-color:transparent;color:#b63e11;box-shadow:0 0 0 2px #872e0d}.qms-btn-text-lg.qms-secondary:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11}.qms-btn-fab,.qms-btn-fab-sm{min-width:0;width:56px;height:56px;padding:0;flex-shrink:0;box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2);background-color:#1954a9;color:#fff}.qms-btn-fab-sm .qms-btn-wrapper,.qms-btn-fab .qms-btn-wrapper{padding:16px 0;display:inline-block;line-height:24px}.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible),.qms-btn-fab:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab-sm:not([disabled]):focus,.qms-btn-fab:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-fab-sm:not([disabled]):hover,.qms-btn-fab:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible),.qms-btn-fab:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-sm:not([disabled]):focus,.qms-btn-fab:not([disabled]):focus{box-shadow:0 0 0 2px #8caad4,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab.qms-primary,.qms-primary.qms-btn-fab-sm{background-color:#1954a9;color:#fff}.qms-btn-fab.qms-primary:not([disabled]):focus:not(:focus-visible),.qms-primary.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab.qms-primary:not([disabled]):focus,.qms-primary.qms-btn-fab-sm:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-fab.qms-primary:not([disabled]):hover,.qms-primary.qms-btn-fab-sm:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-fab.qms-primary:not([disabled]):focus:not(:focus-visible),.qms-primary.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab.qms-primary:not([disabled]):focus,.qms-primary.qms-btn-fab-sm:not([disabled]):focus{box-shadow:0 0 0 2px #8caad4,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab.qms-secondary,.qms-secondary.qms-btn-fab-sm{background-color:#9e360f;color:#fff}.qms-btn-fab.qms-secondary:not([disabled]):focus:not(:focus-visible),.qms-secondary.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab.qms-secondary:not([disabled]):focus,.qms-secondary.qms-btn-fab-sm:not([disabled]):focus{background-color:#9e360f;box-shadow:0 0 0 2px #cf9b87}.qms-btn-fab.qms-secondary:not([disabled]):hover,.qms-secondary.qms-btn-fab-sm:not([disabled]):hover{background-color:#b63e11;color:#fff}.qms-btn-fab.qms-secondary:not([disabled]):focus:not(:focus-visible),.qms-secondary.qms-btn-fab-sm:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab.qms-secondary:not([disabled]):focus,.qms-secondary.qms-btn-fab-sm:not([disabled]):focus{box-shadow:0 0 0 2px #cf9b87,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-sm{min-width:0;width:40px;height:40px;padding:0;flex-shrink:0;box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-sm .qms-btn-wrapper{padding:8px 0;display:inline-block;line-height:24px}.qms-btn-fab-outlined,.qms-btn-fab-outlined-sm{min-width:0;width:56px;height:56px;padding:0;flex-shrink:0;box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2);background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined-sm .qms-btn-wrapper,.qms-btn-fab-outlined .qms-btn-wrapper{padding:16px 0;display:inline-block;line-height:24px}.qms-btn-fab-outlined-sm:not([disabled]):focus:not(:focus-visible),.qms-btn-fab-outlined:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-sm:not([disabled]):focus,.qms-btn-fab-outlined:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-sm:not([disabled]):hover,.qms-btn-fab-outlined:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-fab-outlined.qms-primary,.qms-primary.qms-btn-fab-outlined-sm{background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined.qms-primary:not([disabled]):focus:not(:focus-visible),.qms-primary.qms-btn-fab-outlined-sm:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined.qms-primary:not([disabled]):focus,.qms-primary.qms-btn-fab-outlined-sm:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined.qms-primary:not([disabled]):hover,.qms-primary.qms-btn-fab-outlined-sm:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-fab-outlined.qms-secondary,.qms-secondary.qms-btn-fab-outlined-sm{background-color:#fff;color:#9e360f;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined.qms-secondary:not([disabled]):focus:not(:focus-visible),.qms-secondary.qms-btn-fab-outlined-sm:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined.qms-secondary:not([disabled]):focus,.qms-secondary.qms-btn-fab-outlined-sm:not([disabled]):focus{background-color:#fff;color:#b63e11;box-shadow:0 0 0 2px #872e0d,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined.qms-secondary:not([disabled]):hover,.qms-secondary.qms-btn-fab-outlined-sm:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11}.qms-btn-fab-outlined-sm{min-width:0;width:40px;height:40px;padding:0;flex-shrink:0;box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-sm .qms-btn-wrapper{padding:8px 0;display:inline-block;line-height:24px}.qms-btn-fab-ext{box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2);padding:0 16px;border-radius:30px;line-height:54px;height:56px;background-color:#1954a9;color:#fff}.qms-btn-fab-ext:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab-ext:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-fab-ext:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-fab-ext:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-ext:not([disabled]):focus{box-shadow:0 0 0 2px #8caad4,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-ext.qms-primary{background-color:#1954a9;color:#fff}.qms-btn-fab-ext.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab-ext.qms-primary:not([disabled]):focus{background-color:#1954a9;box-shadow:0 0 0 2px #8caad4}.qms-btn-fab-ext.qms-primary:not([disabled]):hover{background-color:#2873df;color:#fff}.qms-btn-fab-ext.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-ext.qms-primary:not([disabled]):focus{box-shadow:0 0 0 2px #8caad4,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-ext.qms-secondary{background-color:#9e360f;color:#fff}.qms-btn-fab-ext.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-fab-ext.qms-secondary:not([disabled]):focus{background-color:#9e360f;box-shadow:0 0 0 2px #cf9b87}.qms-btn-fab-ext.qms-secondary:not([disabled]):hover{background-color:#b63e11;color:#fff}.qms-btn-fab-ext.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-ext.qms-secondary:not([disabled]):focus{box-shadow:0 0 0 2px #cf9b87,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext{box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2);padding:0 16px;border-radius:30px;line-height:54px;height:56px;background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined-ext:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-fab-outlined-ext.qms-primary{background-color:#fff;color:#1954a9;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined-ext.qms-primary:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext.qms-primary:not([disabled]):focus{background-color:#fff;color:#1954a9;box-shadow:0 0 0 2px #1954a9,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext.qms-primary:not([disabled]):hover{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-fab-outlined-ext.qms-secondary{background-color:#fff;color:#9e360f;border:1px solid rgba(0,0,0,.12)}.qms-btn-fab-outlined-ext.qms-secondary:not([disabled]):focus:not(:focus-visible){box-shadow:0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext.qms-secondary:not([disabled]):focus{background-color:#fff;color:#b63e11;box-shadow:0 0 0 2px #872e0d,0 8px 10px rgba(0,0,0,.14),0 3px 14px rgba(0,0,0,.12),0 5px 5px rgba(0,0,0,.2)}.qms-btn-fab-outlined-ext.qms-secondary:not([disabled]):hover{background-color:rgba(207,71,20,.06);color:#b63e11}.qms-btn-icon{box-sizing:border-box;position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;font-style:normal}.qms-btn-icon.qms-btn-disabled{cursor:default;background:#e4e4e4;color:rgba(0,0,0,.38)}.qms-btn-icon .mat-icon{font-size:24px!important;padding-bottom:1px}.qms-btn-icon::-moz-focus-inner{border:0}.qms-btn-icon:not([disabled]):hover{text-decoration:none}.qms-btn-icon .qms-btn-icon-wrapper>*{vertical-align:middle}.qms-btn-icon:after{content:\"\";position:absolute;top:50%;left:50%;width:10px;height:10px;background:hsla(0,0%,100%,.5);opacity:0;border-radius:100%;transform:scale(1) translate(-50%);transform-origin:50% 50%}.qms-btn-icon{padding:0;min-width:0;width:48px;height:48px;line-height:48px;border-radius:50%;flex-shrink:0;border:none;background:transparent}.qms-btn-icon:focus{outline:0}.qms-btn-icon:not([disabled]):focus:not(:focus-visible){box-shadow:none}.qms-btn-icon.qms-light{color:rgba(0,0,0,.6)}.qms-btn-icon.qms-light:not([disabled]):focus,.qms-btn-icon.qms-light:not([disabled]):hover{background-color:rgba(0,0,0,.08);color:#323232}.qms-btn-icon.qms-light:not([disabled]):active{background-color:rgba(0,0,0,.24);color:#323232}.qms-btn-icon.qms-light.qms-btn-disabled{color:rgba(0,0,0,.24);background-color:transparent}.qms-btn-icon.qms-light:not(.qms-btn-disabled).active-icon{color:#1954a9}.qms-btn-icon.qms-light:not(.qms-btn-disabled).active-icon:not([disabled]):focus,.qms-btn-icon.qms-light:not(.qms-btn-disabled).active-icon:not([disabled]):hover{background-color:#e5eefb;color:#1954a9}.qms-btn-icon.qms-light:not(.qms-btn-disabled).active-icon:not([disabled]):active{background-color:rgba(40,115,223,.06);color:#1954a9}.qms-btn-icon.qms-dark{color:#fff}.qms-btn-icon.qms-dark:not([disabled]):focus,.qms-btn-icon.qms-dark:not([disabled]):hover{background-color:hsla(0,0%,100%,.08)}.qms-btn-icon.qms-dark:not([disabled]):active{background-color:hsla(0,0%,100%,.24)}.qms-btn-icon.qms-dark.qms-btn-disabled{color:hsla(0,0%,100%,.24);background-color:transparent}.qms-btn-icon.qms-dark.active-icon{color:#f6b59d}.qms-btn-icon.qms-dark.active-icon:not([disabled]):focus,.qms-btn-icon.qms-dark.active-icon:not([disabled]):hover{background-color:hsla(0,0%,100%,.08)}.qms-btn-icon.qms-dark.active-icon:not([disabled]):active{background-color:hsla(0,0%,100%,.24)}.qms-btn-icon .qms-button-focus-overlay{opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1);top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.qms-btn-icon .qms-btn-icon-wrapper .mat-icon{vertical-align:middle;line-height:24px}.icon-wrapper{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center}.icon-wrapper.light.disabled .caption{color:rgba(0,0,0,.24);cursor:default;background-color:transparent}.icon-wrapper.light.active .caption{color:#1954a9}.icon-wrapper.light:not(.disabled):hover .caption{color:#323232}.icon-wrapper.light:not(.disabled):focus .caption{color:rgba(0,0,0,.6)}.icon-wrapper.light:not(.disabled):active .caption{color:#323232}.icon-wrapper.light .caption{color:rgba(0,0,0,.6)}.icon-wrapper.dark.disabled .caption{color:hsla(0,0%,100%,.24);cursor:default;background-color:transparent}.icon-wrapper.dark.active .caption{color:#f6b59d}.icon-wrapper.dark .caption{color:#fff}.icon-wrapper .caption{font-size:.75rem;line-height:16px;font-family:Open Sans;font-weight:400}@-webkit-keyframes ripple{0%{transform:scale(0);opacity:1}20%{transform:scale(25);opacity:1}to{opacity:0;transform:scale(40)}}@keyframes ripple{0%{transform:scale(0);opacity:1}20%{transform:scale(25);opacity:1}to{opacity:0;transform:scale(40)}}"]
             },] }
 ];
 QMSButtonIcon.ctorParameters = () => [
@@ -2746,39 +2689,12 @@ QMSAppBar.propDecorators = {
     mode: [{ type: Input, args: ['mode',] }]
 };
-class QMSTableExpandDirective {
-    constructor(_el, renderer) {
-        this._el = _el;
-        this.renderer = renderer;
-        this._el.nativeElement.classList.add('qms-table');
-    }
-    ngAfterViewChecked() {
-        let matRows = this._el.nativeElement.querySelectorAll('mat-row');
-        for (const [key, value] of Object.entries(matRows)) {
-            this.renderer.addClass(value, 'qms-row');
-        }
-    }
-}
-QMSTableExpandDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[qms-table-expand]',
-                host: { 'class': 'qms-table-expand' }
-            },] }
-];
-QMSTableExpandDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 }
-];
 class QMSTableDirective {
     constructor(_el, renderer) {
         this._el = _el;
         this.renderer = renderer;
     }
     ngAfterViewChecked() {
-        let matRows = this._el.nativeElement.querySelectorAll('mat-row');
-        for (const [key, value] of Object.entries(matRows)) {
-            this.renderer.addClass(value, 'qms-row');
-        }
     }
 }
 QMSTableDirective.decorators = [
@@ -2814,16 +2730,6 @@ QMSTableChildrenDirective.ctorParameters = () => [
     { type: ElementRef },
     { type: Renderer2 }
 ];
-class QMSRowExpandDirective {
-    constructor() { }
-}
-QMSRowExpandDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[qms-row-expand]',
-                host: { 'class': 'qms-row-expand' }
-            },] }
-];
-QMSRowExpandDirective.ctorParameters = () => [];
 class QMSRowDetailDirective {
     constructor() { }
 }
@@ -2852,7 +2758,7 @@ class CdkDetailRowDirective {
         this.focusClass = 'focus-grid-style';
         this.onRowExpandEvent = new EventEmitter();
     }
-    get expended() {
+    get expanded() {
         return this.opened;
     }
     set cdkDetailRow(value) {
@@ -2873,6 +2779,8 @@ class CdkDetailRowDirective {
     ngOnChanges(changes) {
         this.vcRef.clear();
         if (this.othertRef && this.row) {
+            if (this.opened)
+                this.vcRef.createEmbeddedView(this.tRef, { $implicit: this.row });
             this.vcRef.createEmbeddedView(this.othertRef, { $implicit: this.row });
         }
     }
@@ -2882,7 +2790,7 @@ class CdkDetailRowDirective {
         if (this.othertRef && this.row) {
             this.vcRef.createEmbeddedView(this.othertRef, { $implicit: this.row });
             if (((_a = this.row) === null || _a === void 0 ? void 0 : _a.children) && ((_b = this.row) === null || _b === void 0 ? void 0 : _b.children.length) > 0) {
-                this._el.nativeElement.classList.add('qms-row-group');
+                this._el.nativeElement.classList.add('expandable-group');
             }
         }
     }
@@ -2904,25 +2812,13 @@ class CdkDetailRowDirective {
         }
     }
     toggle() {
-        if (this.opened) {
-            this.vcRef.clear();
-            if (this.othertRef) {
-                this.vcRef.createEmbeddedView(this.othertRef, { $implicit: this.row });
-            }
-        }
-        else {
-            this.render();
-        }
-        this.opened = !this.opened;
-        this.onRowExpandEvent.emit(this.opened);
-    }
-    render() {
-        this.vcRef.clear();
-        if (this.tRef && this.row) {
-            this.vcRef.createEmbeddedView(this.tRef, { $implicit: this.row });
-            if (this.othertRef) {
-                this.vcRef.createEmbeddedView(this.othertRef, { $implicit: this.row });
-            }
+        if (this.tRef) {
+            if (this.opened)
+                this.vcRef.detach(0);
+            else
+                this.vcRef.createEmbeddedView(this.tRef, { $implicit: this.row }, 0);
+            this.opened = !this.opened;
+            this.onRowExpandEvent.emit(this.opened);
         }
     }
 }
@@ -2937,7 +2833,7 @@ CdkDetailRowDirective.ctorParameters = () => [
 ];
 CdkDetailRowDirective.propDecorators = {
     onRowExpandEvent: [{ type: Output }],
-    expended: [{ type: HostBinding, args: ['class.expanded',] }],
+    expanded: [{ type: HostBinding, args: ['class.qms-row-expanded',] }],
     cdkDetailRow: [{ type: Input }],
     template: [{ type: Input, args: ['cdkDetailRowTpl',] }],
     otherTemplate: [{ type: Input, args: ['cdkotherTemplate',] }],
@@ -2946,6 +2842,47 @@ CdkDetailRowDirective.propDecorators = {
     onKeydown: [{ type: HostListener, args: ['document:keydown', ['$event.target'],] }]
 };
+class QMSTableRowDirective {
+    constructor(_el, renderer) {
+        this._el = _el;
+        this.renderer = renderer;
+    }
+    ngAfterViewChecked() {
+    }
+    set cdkDetailRow(value) {
+        this._rowData = value;
+    }
+    get disable() {
+        return this._rowData.disabled;
+    }
+    get select() {
+        return this._rowData.selected;
+    }
+    get group() {
+        return this._rowData.childen;
+    }
+    get isDraft() {
+        return this._rowData.isDraft;
+    }
+}
+QMSTableRowDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-table-row]',
+                host: { 'class': 'qms-table-row' }
+            },] }
+];
+QMSTableRowDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 }
+];
+QMSTableRowDirective.propDecorators = {
+    cdkDetailRow: [{ type: Input }],
+    disable: [{ type: HostBinding, args: ['class.qms-table-row-disabled',] }],
+    select: [{ type: HostBinding, args: ['class.qms-table-row-selected',] }],
+    group: [{ type: HostBinding, args: ['class.qms-table-row-group',] }],
+    isDraft: [{ type: HostBinding, args: ['class.qms-table-row-draft',] }]
+};
 const ɵ0$2 = { appearance: 'fill' }, ɵ1 = { color: 'none' };
 class QmsAngularModule {
 }
@@ -2977,22 +2914,15 @@ QmsAngularModule.decorators = [
                     QMSFileUploadMultipleDirective,
                     QMSFileUploadMultipleDisplayDirective,
                     QMSFileUploadMultipleSelectorDirective,
-                    QMSRangeSliderDirective,
-                    QMSRangeSliderLockUpDirective,
                     QMSDropdownMenuItem,
                     QMSScrollbarDirective,
                     QMSTextBlockDirective,
                     QMSTextBlockLine,
-                    QMSDrawerDirective,
-                    QMSDrawerHeaderDirective,
-                    QMSDrawerContentDirective,
-                    QMSDrawerHeaderActionDirective,
                     QMSToolTipRendererDirective,
-                    QMSTableExpandDirective,
                     QMSTableDirective,
+                    QMSTableRowDirective,
                     QMSRowDetailDirective,
                     QMSTableChildrenDirective,
-                    QMSRowExpandDirective,
                     CdkDetailRowDirective,
                     QMSCollapseGroupDirective,
                     DateFormatPipe,
@@ -3038,16 +2968,10 @@ QmsAngularModule.decorators = [
                     QMSFileUploadMultipleDirective,
                     QMSFileUploadMultipleDisplayDirective,
                     QMSFileUploadMultipleSelectorDirective,
-                    QMSRangeSliderDirective,
-                    QMSRangeSliderLockUpDirective,
                     QMSDropdownMenuItem,
                     QMSScrollbarDirective,
                     QMSTextBlockDirective,
                     QMSTextBlockLine,
-                    QMSDrawerDirective,
-                    QMSDrawerHeaderDirective,
-                    QMSDrawerContentDirective,
-                    QMSDrawerHeaderActionDirective,
                     QMSToolTipRendererDirective,
                     DateFormatPipe,
                     QMSChipInputDirective,
@@ -3059,11 +2983,10 @@ QmsAngularModule.decorators = [
                     QMSTooltipImageDirective,
                     SelectDialog,
                     QMSAppBar,
-                    QMSTableExpandDirective,
                     QMSTableDirective,
+                    QMSTableRowDirective,
                     QMSTableChildrenDirective,
                     QMSRowDetailDirective,
-                    QMSRowExpandDirective,
                     CdkDetailRowDirective,
                     QMSCollapseGroupDirective
                 ],
@@ -3076,47 +2999,117 @@ QmsAngularModule.decorators = [
             },] }
 ];
-class QMSListLeadingIcon {
+class QMSRangeSliderLockUpDirective {
+    constructor(ele) {
+        this.ele = ele;
+    }
+    ngOnInit() {
+        if (this.ele) {
+            this.ele.nativeElement.classList.add('qms-range-slider-lockup');
+        }
+    }
 }
-QMSListLeadingIcon.decorators = [
+QMSRangeSliderLockUpDirective.decorators = [
     { type: Directive, args: [{
-                selector: '[leading-icon]',
-                host: { 'class': 'leading-icon' }
+                selector: 'mat-slider[qms-range-slider-lockup]',
             },] }
 ];
-class QMSListLine {
-    constructor(elRef, renderer) {
-        this.elRef = elRef;
-        this.renderer = renderer;
+QMSRangeSliderLockUpDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+class QMSRangeSliderDirective {
+    constructor(ele) {
+        this.ele = ele;
     }
     ngOnInit() {
-        if (this.type === 'caption') {
-            this.renderer.setAttribute(this.elRef.nativeElement, 'class', 'caption');
-        }
-        else if (this.type === 'subtitle') {
-            this.renderer.setAttribute(this.elRef.nativeElement, 'class', `subtitle size-${this.size ? this.size : 'none'}`);
-        }
-        else {
-            this.renderer.setAttribute(this.elRef.nativeElement, 'class', `qms-line size-${this.size ? this.size : 'none'}`);
-        }
-        if (this.color) {
-            this.renderer.addClass(this.elRef.nativeElement, this.color);
+        if (this.ele) {
+            this.ele.nativeElement.classList.add('qms-range-slider');
         }
     }
+    onMouseUp() {
+        clearTimeout(this.timerId);
+        this.timerId = setTimeout(() => {
+            this.ele.nativeElement.classList.remove('qms-range-slider-active');
+        }, 500);
+    }
+    onMouseDown() {
+        clearTimeout(this.timerId);
+        this.ele.nativeElement.classList.add('qms-range-slider-active');
+    }
 }
-QMSListLine.decorators = [
+QMSRangeSliderDirective.decorators = [
     { type: Directive, args: [{
-                selector: '[qms-line]'
+                selector: 'mat-slider[qms-range-slider]',
             },] }
 ];
-QMSListLine.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 }
+QMSRangeSliderDirective.ctorParameters = () => [
+    { type: ElementRef }
 ];
-QMSListLine.propDecorators = {
-    size: [{ type: Input, args: ['size',] }],
-    type: [{ type: Input, args: ['type',] }],
-    color: [{ type: Input, args: ['color',] }]
+QMSRangeSliderDirective.propDecorators = {
+    onMouseUp: [{ type: HostListener, args: ['mouseup', [],] }],
+    onMouseDown: [{ type: HostListener, args: ['mousedown', [],] }]
+};
+class QMSRangeSliderModule {
+}
+QMSRangeSliderModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    QMSRangeSliderDirective,
+                    QMSRangeSliderLockUpDirective
+                ],
+                imports: [
+                    CommonModule
+                ],
+                exports: [
+                    QMSRangeSliderDirective,
+                    QMSRangeSliderLockUpDirective
+                ]
+            },] }
+];
+class QMSListLeadingIcon {
+}
+QMSListLeadingIcon.decorators = [
+    { type: Directive, args: [{
+                selector: '[leading-icon]',
+                host: { 'class': 'leading-icon' }
+            },] }
+];
+class QMSListLine {
+    constructor(elRef, renderer) {
+        this.elRef = elRef;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        if (this.type === 'caption') {
+            this.renderer.setAttribute(this.elRef.nativeElement, 'class', 'caption');
+        }
+        else if (this.type === 'subtitle') {
+            this.renderer.setAttribute(this.elRef.nativeElement, 'class', `subtitle size-${this.size ? this.size : 'none'}`);
+        }
+        else {
+            this.renderer.setAttribute(this.elRef.nativeElement, 'class', `qms-line size-${this.size ? this.size : 'none'}`);
+        }
+        if (this.color) {
+            this.renderer.addClass(this.elRef.nativeElement, this.color);
+        }
+    }
+}
+QMSListLine.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-line]'
+            },] }
+];
+QMSListLine.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 }
+];
+QMSListLine.propDecorators = {
+    size: [{ type: Input, args: ['size',] }],
+    type: [{ type: Input, args: ['type',] }],
+    color: [{ type: Input, args: ['color',] }]
 };
 class QMSListHeader {
 }
@@ -4345,6 +4338,9 @@ class TreeComponent {
                 this.treeControl.expand(x);
             });
         }
+        setTimeout(() => {
+            this.treeControlNodes.emit(this.treeControl);
+        }, 500);
     }
     getParent(node) {
         const { treeControl } = this;
@@ -4396,15 +4392,12 @@ class TreeComponent {
             this.treeControl.dataNodes[i].disabled = false;
         }
         if (this.disabledList.length) {
-            for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
-                this.disabledList.forEach(x => {
-                    var _a;
-                    if (x.id === this.treeControl.dataNodes[i].id
-                        && (!x.parentId || x.parentId === ((_a = this.treeControl.dataNodes[i]) === null || _a === void 0 ? void 0 : _a.parentId))) {
-                        this.treeControl.dataNodes[i].disabled = true;
-                    }
-                });
-            }
+            this.disabledList.forEach(x => {
+                const index = this.treeControl.dataNodes.findIndex(node => node.id === x.id && (!x.parentId || x.parentId === node.parentId));
+                if (index >= 0) {
+                    this.treeControl.dataNodes[index].disabled = true;
+                }
+            });
         }
         //Selected node with select one
         if (this.disabledList.length && this.treeConfig.selectOne) {
@@ -4438,7 +4431,6 @@ class TreeComponent {
         }
         else {
             this.idCheckIcon = '';
-            this.treeControl.collapseAll();
             this.cdRef.detectChanges();
         }
     }
@@ -4556,10 +4548,7 @@ class TreeComponent {
             this.checklistSelection.toggle(node);
         }
         // process/ document single selected
-        if (this.singleSelectedNode) {
-            this.checkBoxEvent.emit(this.checklistSelection.selected);
-        }
-        else {
+        if (!this.singleSelectedNode) {
             const descendants = this.treeControl.getDescendants(node).filter(item => !item.disabled);
             this.checkSelectedSameNode(descendants, this.descendantsAllSelected(node));
             !this.descendantsAllSelected(node)
@@ -4572,8 +4561,8 @@ class TreeComponent {
                     this.checklistSelection.deselect(element);
                 });
             }
-            this.checkBoxEvent.emit(this.checklistSelection.selected);
         }
+        this.checkBoxEvent.emit(this.checklistSelection.selected);
     }
     todoChildSelectionToggle(node) {
         for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
@@ -4625,7 +4614,6 @@ class TreeComponent {
         });
         setTimeout(() => {
             this.checkBoxEvent.emit(this.checklistSelection.selected);
-            this.treeControlNodes.emit(this.treeControl);
         }, 500);
     }
     todoFolderSelection(nodes) {
@@ -4640,6 +4628,7 @@ class TreeComponent {
             }
         });
         this.checkBoxEvent.emit(this.checklistSelection.selected);
+        this.idCheckIcon = this.idToCheckSelectOne(nodes[0].id, nodes[0].parentId);
     }
     selectNode(node) {
         if (window[RelatedConst$1.IS_DISPLAY_SEARCH_RESULT]) {
@@ -4874,7 +4863,7 @@ class TreeComponent {
         }
     }
     getNodeId(node) {
-        return `_${node.parentId ? node.parentId : ''}_${node.id}_${node.level}`;
+        return `_${node.parentId ? node.parentId.toLowerCase() : ''}_${node.id.toLowerCase()}_${node.level}`;
     }
     getNodeByIdAndParentId(nodeId, parentId) {
         return this.treeControl.dataNodes.find(x => {
@@ -4891,7 +4880,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 && !onlyFolder\"\r\n      class=\"checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    >\r\n    </mat-checkbox>\r\n\r\n    <!-- form thu 2 -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"ml-10 checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <div\r\n      class=\"expand-node\"\r\n      *ngIf=\"node.name && !onlyFolder\"\r\n      [class.bgSelected]=\"\r\n        treeConfig.selectOne &&\r\n        idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n      \"\r\n      (click)=\"selectNode(node)\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <div class=\"expand-node__text\">\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.name && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n        >\r\n          {{ itemIcon }}\r\n        </mat-icon>\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.svg\"\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\"\r\n          class=\"mat-icon\"\r\n          [src]=\"itemIconPath\"\r\n        />\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.base64\"\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\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getItemIcon(node)\"\r\n        ></mat-icon>\r\n        <span\r\n          class=\"text-node\"\r\n          [class.select-one-checked]=\"\r\n            treeConfig.selectOne &&\r\n            idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n          \"\r\n          >{{ node.name }}</span\r\n        >\r\n      </div>\r\n      <mat-icon\r\n        class=\"select-one-checked\"\r\n        *ngIf=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >done</mat-icon\r\n      >\r\n    </div>\r\n  </mat-tree-node>\r\n\r\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n    <!-- form thu 1 - parent -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild\"\r\n      [checked]=\"descendantsAllSelected(node)\"\r\n      [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <button\r\n      class=\"button-boder\"\r\n      mat-icon-button\r\n      matTreeNodeToggle\r\n      [disableRipple]=\"!node.hasChild\"\r\n      [attr.aria-label]=\"'toggle ' + node.filename\"\r\n      *ngIf=\"node.name\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"openIcon && closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngStyle]=\"{\r\n          color: treeControl.isExpanded(node) ? openIconColor : closeIconColor\r\n        }\"\r\n        >{{ getNodeIcon(node) }}</mat-icon\r\n      >\r\n      <mat-icon\r\n        *ngIf=\"!openIcon || !closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngClass]=\"{\r\n          'open-icon': treeControl.isExpanded(node),\r\n          'not-department-icon': moduleId !== dataType.document\r\n        }\"\r\n        [svgIcon]=\"getNodeIcon(node)\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <span\r\n      *ngIf=\"expandOnTitleClick\"\r\n      matTreeNodeToggle\r\n      class=\"text-node-parent\"\r\n      style=\"cursor: pointer\"\r\n      (click)=\"onExpandNode(node)\"\r\n      [ngStyle]=\"{\r\n        color: treeControl.isExpanded(node) ? openIconColor : '#000000'\r\n      }\"\r\n    >\r\n      <span>{{ node.name }}</span>\r\n    </span>\r\n    <span\r\n      *ngIf=\"!expandOnTitleClick\"\r\n      class=\"text-node-parent\"\r\n      (click)=\"selectFolderNode(node)\"\r\n      style=\"cursor: pointer\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <span\r\n        [class.select-one-checked]=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >{{ node.name }}</span\r\n      >\r\n      <mat-icon\r\n        class=\"select-one-checked\"\r\n        *ngIf=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >done</mat-icon\r\n      >\r\n    </span>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n",
+                template: "<mat-tree\r\n  [dataSource]=\"dataSource\"\r\n  [treeControl]=\"treeControl\"\r\n  class=\"tree__container\"\r\n>\r\n  <mat-tree-node\r\n    class=\"tree-branch\"\r\n    *matTreeNodeDef=\"let node\"\r\n    matTreeNodeToggle\r\n    matTreeNodePadding\r\n  >\r\n    <!-- form thu 1 - child -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    >\r\n    </mat-checkbox>\r\n\r\n    <!-- form thu 2 -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"ml-10 checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <div\r\n      class=\"expand-node\"\r\n      *ngIf=\"node.name && !onlyFolder\"\r\n      [class.bgSelected]=\"\r\n        treeConfig.selectOne &&\r\n        idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n      \"\r\n      (click)=\"selectNode(node)\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <div class=\"expand-node__text\">\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.name && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n        >\r\n          {{ itemIcon }}\r\n        </mat-icon>\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.svg\"\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\"\r\n          class=\"mat-icon\"\r\n          [src]=\"itemIconPath\"\r\n        />\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.base64\"\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\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getItemIcon(node)\"\r\n        ></mat-icon>\r\n        <span\r\n          class=\"text-node\"\r\n          [class.select-one-checked]=\"\r\n            treeConfig.selectOne &&\r\n            idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n          \"\r\n          >{{ node.name }}</span\r\n        >\r\n      </div>\r\n      <mat-icon\r\n        class=\"select-one-checked\"\r\n        *ngIf=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >done</mat-icon\r\n      >\r\n    </div>\r\n  </mat-tree-node>\r\n\r\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n    <!-- form thu 1 - parent -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild\"\r\n      [checked]=\"descendantsAllSelected(node)\"\r\n      [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <button\r\n      class=\"button-boder\"\r\n      mat-icon-button\r\n      matTreeNodeToggle\r\n      [disableRipple]=\"!node.hasChild\"\r\n      [attr.aria-label]=\"'toggle ' + node.filename\"\r\n      *ngIf=\"node.name\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"openIcon && closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngStyle]=\"{\r\n          color: treeControl.isExpanded(node) ? openIconColor : closeIconColor\r\n        }\"\r\n        >{{ getNodeIcon(node) }}</mat-icon\r\n      >\r\n      <mat-icon\r\n        *ngIf=\"!openIcon || !closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngClass]=\"{\r\n          'open-icon': treeControl.isExpanded(node),\r\n          'not-department-icon': moduleId !== dataType.document\r\n        }\"\r\n        [svgIcon]=\"getNodeIcon(node)\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <span\r\n      *ngIf=\"expandOnTitleClick\"\r\n      matTreeNodeToggle\r\n      class=\"text-node-parent\"\r\n      style=\"cursor: pointer\"\r\n      (click)=\"onExpandNode(node)\"\r\n      [id]=\"getNodeId(node)\"\r\n      [ngStyle]=\"{\r\n        color: treeControl.isExpanded(node) ? openIconColor : '#000000'\r\n      }\"\r\n    >\r\n      <span>{{ node.name }}</span>\r\n    </span>\r\n    <span\r\n      *ngIf=\"!expandOnTitleClick\"\r\n      class=\"text-node-parent\"\r\n      (click)=\"selectFolderNode(node)\"\r\n      style=\"cursor: pointer\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <span\r\n        [class.select-one-checked]=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >{{ node.name }}</span\r\n      >\r\n      <mat-icon\r\n        class=\"select-one-checked\"\r\n        *ngIf=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >done</mat-icon\r\n      >\r\n    </span>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n",
                 encapsulation: ViewEncapsulation.None,
                 styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.tree__container{font-family:Open Sans;font-style:normal;font-weight:400;font-size:.875rem;line-height:19px;color:#323232}.tree__container .mat-tree-node{color:#000;min-height:0}.tree__container .mat-tree-node .mat-checkbox.qms-group-options{padding:0}.tree__container .mat-tree-node .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.tree__container .button{margin-left:6px}.tree__container .button:focus,.tree__container .button:hover{background-color:#009ef2;border-radius:2px;width:auto}.tree__container .button-boder:focus,.tree__container .button:focus{outline:0}.tree__container .button-folder-boder:focus{outline:0}.tree__container .button-folder-boder:focus,.tree__container .button-folder-boder:hover{background-color:#009ef2;border-radius:2px;width:auto}.tree__container .expand-node{margin-left:8px;min-height:32px;justify-content:space-between;width:100%}.tree__container .expand-node,.tree__container .expand-node .expand-node__text{display:flex;align-items:center}.tree__container .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.tree__container .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.tree__container .expand-node.bgSelected .select-one-checked{color:#1954a9}.tree__container .text-node-parent{width:100%;display:flex;align-items:center;justify-content:space-between;margin-left:10px;cursor:pointer}.tree__container .text-node-parent.active-item{color:#1954a9!important}.tree__container .text-node-parent .select-one-checked{color:#1954a9}.tree__container .mr-11{margin-right:11px}.tree__container .ml-10{margin-left:10px}.tree__container .tree-branch:hover{background-color:#e5eefb}.tree__container .image-base64{width:20px;height:20px}.tree__container .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}::ng-deep .mat-tree .mat-checkbox.qms-group-options{padding:0}::ng-deep .mat-tree .mat-checkbox.qms-group-options.mat-checkbox-checked{background-color:transparent}::ng-deep .mat-tree .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:0}svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.open-icon.not-department-icon svg path,.open-icon svg path:first-child{fill:#1954a9}.mat-checkbox.mat-checkbox-disabled.qms-group-options.mat-checkbox-checked .mat-checkbox-background{background-color:#e0e0e0!important}"]
             },] }
@@ -6798,7 +6787,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.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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:470px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break{width:100%}"]
+                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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}"]
             },] }
 ];
 QMSCKEditorConfirmComponent.ctorParameters = () => [
@@ -7037,51 +7026,6 @@ class QMSCKEditorFullscreenComponent {
         this.showHideFullScreen('block', 'show-content-wrapper', '0px', '0px', '2px', '93vh');
     }
     showHideFullScreen(display, className, paddingTop, paddingBottom, marginTopMain, heightIframe) {
-        const sidebar = window.parent.document.getElementById('sidebar_left');
-        if (sidebar) {
-            if (display === 'block') {
-                if (!sidebar.classList.contains('show-sidebar_left')) {
-                    sidebar.classList.add('show-sidebar_left');
-                }
-            }
-            else if (display === 'none') {
-                if (sidebar.classList.contains('show-sidebar_left')) {
-                    sidebar.classList.remove('show-sidebar_left');
-                }
-            }
-        }
-        const topbars = window.parent.document.getElementsByClassName('navbar-fixed-top');
-        if (topbars && topbars.length > 0) {
-            const topbar = topbars[0];
-            topbar.style.display = display;
-        }
-        const contentWrapper = window.parent.document.getElementById('content_wrapper');
-        if (contentWrapper) {
-            contentWrapper.className = className;
-        }
-        const bodies = window.parent.document.getElementsByTagName('body');
-        if (bodies && bodies.length > 0) {
-            const body = bodies[0];
-            body.style.paddingTop = paddingTop;
-            body.style.paddingBottom = paddingBottom;
-            if (display === 'block') {
-                body.classList.remove('sidebar-hidden');
-                body.classList.add('sidebar-ltr');
-            }
-            else if (display === 'none') {
-                body.classList.remove('sidebar-ltr');
-                body.classList.add('sidebar-hidden');
-            }
-        }
-        const main = window.parent.document.getElementById('main');
-        if (main) {
-            main.style.marginTop = marginTopMain;
-        }
-        const iframes = window.parent.document.getElementsByClassName('processIFrameModule');
-        if (iframes && iframes.length > 0) {
-            const iframe = iframes[0];
-            iframe.style.height = heightIframe;
-        }
         const ck = window.document.getElementById('qmsckeditor');
         if (ck) {
             if (display === 'none') {
@@ -7234,7 +7178,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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:470px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break{width:100%}"]
+                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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}"]
             },] }
 ];
 LinkAttachmentComponent.ctorParameters = () => [
@@ -7314,6 +7258,7 @@ class QMSCKEditorLink {
 var QMSCKEditorDocumentType;
 (function (QMSCKEditorDocumentType) {
+    QMSCKEditorDocumentType[QMSCKEditorDocumentType["other"] = 0] = "other";
     QMSCKEditorDocumentType[QMSCKEditorDocumentType["document"] = 1] = "document";
     QMSCKEditorDocumentType[QMSCKEditorDocumentType["process"] = 2] = "process";
     QMSCKEditorDocumentType[QMSCKEditorDocumentType["area"] = 3] = "area";
@@ -7397,6 +7342,9 @@ class QMSCKEditorTreeService extends QMSCKEditorBaseService {
     getProcessList() {
         return this.get('ckeditorTree/GetProcessList');
     }
+    getUploadVideoList(folderId = null) {
+        return this.get('ckeditorTree/GetUploadVideoList', { folderId });
+    }
 }
 QMSCKEditorTreeService.ɵprov = i0.ɵɵdefineInjectable({ factory: function QMSCKEditorTreeService_Factory() { return new QMSCKEditorTreeService(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(QMSCKEditorGlobalService)); }, token: QMSCKEditorTreeService, providedIn: "root" });
 QMSCKEditorTreeService.decorators = [
@@ -7687,7 +7635,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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:470px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.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}"]
+                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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}::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 = () => [
@@ -7829,6 +7777,9 @@ class QMSCKEditorLinkComponent extends QMSCKEditorBaseComponent {
             this.anchorByName = url.substr(hashIndex + 1, url.length - hashIndex);
             this.anchorTitle = this.data.title;
         }
+        else if (typeId === LinkType.url) {
+            //selectedProtocol
+        }
     }
     onSelectedLinkType() {
         if (this.selectedLink === LinkType.anchorText) {
@@ -8018,7 +7969,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 id=\"qmsckeditor_link_header_001\" mat-icon-button class=\"qmsckeditor button__close\" (click)=\"onCloseDialog()\">\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 disableOptionCentering name=\"linkTypeList\" [(ngModel)]=\"selectedLink\"\r\n        (ngModelChange)=\"onSelectedLinkType()\">\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 [formGroup]=\"linkFormGroup\" class=\"qmsckeditor link__content height row\" *ngIf=\"selectedLink === 0\">\r\n      <div id=\"qmsckeditor_link_url\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel id=\"qmsckeditor_link_url_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\">\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 [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\" disableOptionCentering>\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 [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\" disableOptionCentering>\r\n                <mat-option *ngFor=\"let protocol of protocols\" [value]=\"protocol.id\">\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\" name=\"url\" formControlName=\"url\" />\r\n              <mat-error *ngIf=\"linkFormGroup.get('url').hasError('required')\" class=\"mt5\">\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 matInput [(ngModel)]=\"advisoryTitle\" formControlName=\"advisoryTitle\" />\r\n              <mat-error *ngIf=\"linkFormGroup.get('advisoryTitle').hasError('required')\" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_005\" class=\"qmsckeditor button__groups row\">\r\n            <div class=\"col-6 pl-3\">\r\n              <button class=\"save\" mat-flat-button (click)=\"eHandbook(false, false)\">\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 [formGroup]=\"anchorTextFormGroup\" class=\"qmsckeditor link__content height row\" *ngIf=\"selectedLink === 1\">\r\n      <div id=\"qmsckeditor_link_anchor_text\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel id=\"qmsckeditor_link_anchor_text_panel\" [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\" (closed)=\"isExpanded = false\">\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 *ngFor=\"let editorAnchor of editorAnchors\" [value]=\"editorAnchor.anchorValue\"\r\n                  disableOptionCentering>\r\n                  {{ editorAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"\r\n                  anchorTextFormGroup.get('anchorText').hasError('required')\r\n                \" class=\"mt5\">\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 [formGroup]=\"emailFormGroup\" class=\"qmsckeditor link__content height row\" *ngIf=\"selectedLink === 2\">\r\n      <div id=\"qmsckeditor_link_email\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel id=\"qmsckeditor_link_email_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\">\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 matInput [(ngModel)]=\"emailAddress\" formControlName=\"emailAddress\" />\r\n              <mat-error *ngIf=\"emailFormGroup.get('emailAddress').hasError('required')\" class=\"mt5\">\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 matInput [(ngModel)]=\"emailSubject\" formControlName=\"emailSubject\" />\r\n              <mat-error *ngIf=\"emailFormGroup.get('emailSubject').hasError('required')\" class=\"mt5\">\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 matInput [(ngModel)]=\"emailBody\" formControlName=\"emailBody\"></textarea>\r\n              <mat-error *ngIf=\"emailFormGroup.get('emailBody').hasError('required')\" class=\"mt5\">\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 [formGroup]=\"anchorDocFormGroup\" class=\"qmsckeditor link__content height row\" *ngIf=\"selectedLink === 3\">\r\n      <div id=\"qmsckeditor_link_anchor_doc\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel id=\"qmsckeditor_link_email_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\">\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_anchor_doc_001\" class=\"qmsckeditor button__groups row\">\r\n            <div class=\"col-6 pl-3\">\r\n              <button class=\"cancel\" mat-flat-button (click)=\"eHandbook(true, true)\">\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 matInput [(ngModel)]=\"anchorTitle\" formControlName=\"anchorTitle\" />\r\n              <mat-error *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorTitle').hasError('required')\r\n                \" class=\"mt5\">\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 [(ngModel)]=\"anchorByName\" formControlName=\"anchorByName\" disableOptionCentering>\r\n                <mat-option *ngFor=\"let docAnchor of documentAnchors\" [value]=\"docAnchor.anchorValue\">\r\n                  {{ docAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorByName').hasError('required')\r\n                \" class=\"mt5\">\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 class=\"save\" mat-flat-button (click)=\"setLink()\" [disabled]=\"disableOkButton()\">\r\n        {{ LANG.QMSCKEDITOR.OK }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>",
-                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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:470px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break{width:100%}.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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}.qmsckeditor__link__container textarea.mat-input-element{min-height:130px}"]
             },] }
 ];
 QMSCKEditorLinkComponent.ctorParameters = () => [
@@ -8315,7 +8266,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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:470px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.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}"]
+                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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}.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 = () => [
@@ -8443,7 +8394,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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:470px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break{width:100%}.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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}.qmsckeditor__loadtemplate__container .template-checkbox{padding-top:20px}"]
             },] }
 ];
 QMSCKEditorLoadTemplateComponent.ctorParameters = () => [
@@ -8454,24 +8405,87 @@ QMSCKEditorLoadTemplateComponent.ctorParameters = () => [
     { type: String, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
 ];
-class UploadAdapter {
-    constructor(loader) {
+class QmsUploadAdapter {
+    constructor(loader, config) {
         this.loader = loader;
+        this.config = config;
+        this.config.imageUploadTypes = this.config.imageUploadTypes || 'png,jpeg,jpg';
+        this.config.maxFileSizeMB = this.config.maxFileSizeMB || 2;
+        if (this.config.imageUploadTypes.indexOf('jpeg') > -1) {
+            this.config.imageUploadTypes += ',jpg';
+        }
+        else if (this.config.imageUploadTypes.indexOf('jpg') > -1) {
+            this.config.imageUploadTypes += ',jpeg';
+        }
+    }
+    abort() {
+        if (this.xhr) {
+            this.xhr.abort();
+        }
+    }
+    _initRequest() {
+        const xhr = this.xhr = new XMLHttpRequest();
+        xhr.open('POST', `${this.config.apiUrl}ckeditorUpload/UploadImage`, true);
+        xhr.responseType = 'json';
+    }
+    _initListeners(resolve, reject, filename) {
+        const xhr = this.xhr;
+        const loader = this.loader;
+        const genericErrorText = `${this.config.LANG.QMSCKEDITOR.FAILED_TO_UPLOAD_FILE}: ${filename}.`;
+        xhr.addEventListener('error', () => reject(genericErrorText));
+        xhr.addEventListener('abort', () => reject());
+        xhr.addEventListener('load', () => {
+            const response = xhr.response;
+            if (!response || response.error) {
+                return reject(response && response.error ? response.error.message : genericErrorText);
+            }
+            resolve({ default: response });
+        });
+        if (xhr.upload) {
+            xhr.upload.addEventListener('progress', evt => {
+                if (evt.lengthComputable) {
+                    loader.uploadTotal = evt.total;
+                    loader.uploaded = evt.loaded;
+                }
+            });
+        }
+    }
+    _sendRequest(file) {
+        const data = new FormData();
+        data.append('file', file, file.name);
+        data.append('name', file.name);
+        this.xhr.send(data);
+    }
+    _getExtension(file) {
+        if (!file.name) {
+            return '';
+        }
+        const filenames = file.name.toLowerCase().split('.');
+        if (filenames.length < 1) {
+            return '';
+        }
+        return filenames[1];
     }
     upload() {
         return this.loader.file
             .then((file) => {
             return new Promise((resolve, reject) => {
-                const myReader = new FileReader();
-                myReader.onloadend = () => {
-                    resolve({ default: myReader.result });
+                const reader = new FileReader();
+                reader.readAsArrayBuffer(file);
+                reader.onload = () => {
+                    const fileExtension = this._getExtension(file);
+                    if (this.config.imageUploadTypes.indexOf(fileExtension) > -1) {
+                        if (file.size > (this.config.maxFileSizeMB * 1024 * 1024)) {
+                            reject(`${this.config.LANG.QMSCKEDITOR.UPLOAD_FILE_OVERSIZE}`.replace('{0}', this.config.maxFileSizeMB.toString()));
+                        }
+                        this._initRequest();
+                        this._initListeners(resolve, reject, file.name);
+                        this._sendRequest(file);
+                    }
+                    else {
+                        reject(`${this.config.LANG.QMSCKEDITOR.UPLOAD_FILE_NOT_VALID_FORMAT}`.replace('{0}', this.config.imageUploadTypes));
+                    }
                 };
-                // if (file.size > 512000) {
-                //   const msg = `${file.name} is more than 500kb. Sorry, it has to be less than or equal to 500kb`;
-                //   QMSCKEditorToastService.error(msg);
-                //   reject();
-                // }
-                myReader.readAsDataURL(file);
             });
         })
             .catch((error) => {
@@ -8495,7 +8509,13 @@ CKEditorEventConst.QMSCK_IMAGEMAP_PLUGIN_RESP = 'QMSCK_IMAGEMAP_PLUGIN_RESP';
 CKEditorEventConst.QMSCK_BPMN_PLUGIN_MSG = 'QMSCK_BPMN_PLUGIN_MSG';
 CKEditorEventConst.QMSCK_BPMN_PLUGIN_RESP = 'QMSCK_BPMN_PLUGIN_RESP';
 CKEditorEventConst.QMSCK_BPMN = 'bpmn';
-CKEditorEventConst.QMSCK_TOGGLE_TOOLBAR_MSG = 'QMSCK_TOGGLE_TOOLBAR_MSG';
+CKEditorEventConst.QMSCK_ABOUT_CKEDITOR_PLUGIN_MSG = "QMSCK_ABOUT_CKEDITOR_PLUGIN_MSG";
+CKEditorEventConst.QMSCK_FLOWCHART_PLUGIN_MSG = 'QMSCK_FLOWCHART_PLUGIN_MSG';
+CKEditorEventConst.QMSCK_FLOWCHART_PLUGIN_RESP = 'QMSCK_FLOWCHART_PLUGIN_RESP';
+CKEditorEventConst.QMSCK_FLOWCHART = 'flowchart';
+CKEditorEventConst.QMSCK_TOGGLE_TOOLBAR_MSG = 'QMSCK_TOGGLE_TOOLBAR_MSG';
+CKEditorEventConst.QMSCK_BROWSE_VIDEO_MSG = 'QMSCK_BROWSE_VIDEO_MSG';
+CKEditorEventConst.QMSCK_BROWSE_VIDEO_RESP = 'QMSCK_BROWSE_VIDEO_RESP';
 var IFRAME_SRC = '//cdn.iframe.ly/api/iframe';
 var API_KEY = 'b499e92e857f435c39c14d';
@@ -8791,6 +8811,7 @@ FlowChartConst.SHAPE_FLOWCHART = 'shapeFlowChart';
 FlowChartConst.PROCESS_SHAPE_FLOWCHART = 'processShapeFlowChart';
 FlowChartConst.SHAPE_FLOWCHART_LOADING = 'SHAPE_FLOWCHART_LOADING';
 FlowChartConst.IS_SHOW_CONNECTYPE = 'isShowConnectType';
+FlowChartConst.MY_CELL_VIEW = 'MY_CELL_VIEW';
 FlowChartConst.SHAPE_TYPE = 'shapeType';
 FlowChartConst.EDIT_MODE = 'EDIT_MODE';
 FlowChartConst.PROCESS_SHAPE_DETAIL_MODEL = 'PROCESS_SHAPE_DETAIL_MODEL';
@@ -8804,7 +8825,15 @@ FlowChartConst.NOT_ALLOW_CREATE_DELETE_FLOW_TEMPLATE = 'NOT_ALLOW_CREATE_DELETE_
 FlowChartConst.SAVE_AS_TEMPLATE = 'SAVE_AS_TEMPLATE';
 FlowChartConst.DELETE_TEMPLATE = 'DELETE_TEMPLATE';
 FlowChartConst.RESET_TEMPLATE = 'RESET_TEMPLATE';
-FlowChartConst.ORG_JSONCONTENT = 'ORG_JSONCONTENT';
+FlowChartConst.ORG_JSONCONTENT = 'ORG_JSONCONTENT';
+FlowChartConst.KS_CHANGE_TEMPLATE = 'KS_ORG_JSONCONTENT';
+FlowChartConst.KS_DELETE_TEMPLATE = 'KS_DELETE_TEMPLATE';
+FlowChartConst.KS_SAVE_AS_TEMPLATE = 'KS_SAVE_AS_TEMPLATE';
+FlowChartConst.KS_RESET_TEMPLATE = 'KS_RESET_TEMPLATE';
+FlowChartConst.KS_ORG_JSONCONTENT = 'KS_ORG_JSONCONTENT';
+FlowChartConst.KS_SELECTED_FLOWCHART_ID = 'KS_SELECTED_FLOWCHART_ID';
+FlowChartConst.KS_SELECTED_JSONCONTENT = 'KS_SELECTED_JSONCONTENT';
+FlowChartConst.KS_IS_SELECTED_TEMPLATE = 'KS_IS_SELECTED_TEMPLATE';
 function create() {
     function s4() {
@@ -8828,6 +8857,9 @@ class QMSCKEditorBpmn {
     }
 }
+class QMSCKEditorSaveAsTemplate {
+}
 class QMSCKEditorBpmnApiService extends QMSCKEditorBaseService {
     bpmnModifying(bpmn) {
         return this.post('ckeditorBpmn/BpmnModifying', bpmn);
@@ -9700,10 +9732,36 @@ function getInspectorConfiguration(bpmn2, LANG) {
                                     style: 'text-align:end;margin-right:4px;margin-top:16px;'
                                 },
                                 input: {
-                                    style: 'width:163px;'
+                                    style: 'width:170px;'
                                 }
                             }
                         },
+                        'font-family': {
+                            type: 'select',
+                            options: [
+                                'Calibri',
+                                'Cambria',
+                                'Arial',
+                                'Helvetica',
+                                'Times New Roman',
+                                'Courier New',
+                                'Georgia',
+                                'Garamond',
+                                'Tahoma',
+                                'Lucida Console',
+                                'Comic Sans MS'
+                            ],
+                            label: `${LANG.BPMN.FONT_FAMILY}`,
+                            defaultValue: 'Calibri'
+                        },
+                        'font-size': {
+                            type: 'range',
+                            min: 7,
+                            max: 80,
+                            unit: 'px',
+                            label: `${LANG.BPMN.FONT_SIZE}`,
+                            defaultValue: 12
+                        },
                         sublanes: {
                             type: 'list',
                             label: 'Add lanes',
@@ -9734,10 +9792,36 @@ function getInspectorConfiguration(bpmn2, LANG) {
                                                 style: 'text-align:end;margin-right:4px;margin-top:16px;'
                                             },
                                             input: {
-                                                style: 'width:163px;'
+                                                style: 'width:170px;'
                                             }
                                         }
                                     },
+                                    'font-family': {
+                                        type: 'select',
+                                        options: [
+                                            'Calibri',
+                                            'Cambria',
+                                            'Arial',
+                                            'Helvetica',
+                                            'Times New Roman',
+                                            'Courier New',
+                                            'Georgia',
+                                            'Garamond',
+                                            'Tahoma',
+                                            'Lucida Console',
+                                            'Comic Sans MS'
+                                        ],
+                                        label: `${LANG.BPMN.FONT_FAMILY}`,
+                                        defaultValue: 'Calibri'
+                                    },
+                                    'font-size': {
+                                        type: 'range',
+                                        min: 7,
+                                        max: 80,
+                                        unit: 'px',
+                                        label: `${LANG.BPMN.FONT_SIZE}`,
+                                        defaultValue: 12
+                                    },
                                     sublanes: {
                                         type: 'list',
                                         label: `${LANG.BPMN.ADD_SUBLANES}`,
@@ -9786,7 +9870,7 @@ function getInspectorConfiguration(bpmn2, LANG) {
                                     style: 'text-align:end;margin-right:4px;margin-top:16px;'
                                 },
                                 input: {
-                                    style: 'width:163px;'
+                                    style: 'width:170px;'
                                 }
                             }
                         }
@@ -9830,73 +9914,73 @@ function getInspectorConfiguration(bpmn2, LANG) {
                 'header/fill': {
                     type: 'color',
                     label: `${LANG.BPMN.HEADER_COLOR}`,
-                    group: 'appearance',
+                    group: `${LANG.BPMN.APPEARANCE}`,
                     index: 1
                 },
                 'header/stroke': {
                     type: 'color',
                     label: `${LANG.BPMN.HEADER_STROKE_COLOR}`,
-                    group: 'appearance',
+                    group: `${LANG.BPMN.APPEARANCE}`,
                     index: 2
                 },
                 'headerLabel/fill': {
                     type: 'color',
                     label: `${LANG.BPMN.HEADER_LABEL_COLOR}`,
-                    group: 'appearance',
+                    group: `${LANG.BPMN.APPEARANCE}`,
                     index: 3
                 },
                 'lanes/fill': {
                     type: 'color',
                     label: `${LANG.BPMN.LANE_BODY_COLOR}`,
-                    group: 'appearance',
+                    group: `${LANG.BPMN.APPEARANCE}`,
                     index: 4
                 },
                 'lanes/stroke': {
                     type: 'color',
                     label: `${LANG.BPMN.LANE_STROKE_COLOR}`,
-                    group: 'appearance',
+                    group: `${LANG.BPMN.APPEARANCE}`,
                     index: 5
                 },
                 'laneHeaders/fill': {
                     type: 'color',
                     label: `${LANG.BPMN.LANE_HEADER_COLOR}`,
-                    group: 'appearance',
+                    group: `${LANG.BPMN.APPEARANCE}`,
                     index: 6
                 },
                 'laneHeaders/stroke': {
                     type: 'color',
                     label: `${LANG.BPMN.LANE_HEADER_STROKE}`,
-                    group: 'appearance',
+                    group: `${LANG.BPMN.APPEARANCE}`,
                     index: 7
                 },
                 'laneLabels/fill': {
                     type: 'color',
                     label: `${LANG.BPMN.LANE_LABEL_COLOR}`,
-                    group: 'appearance',
+                    group: `${LANG.BPMN.APPEARANCE}`,
                     index: 8
                 },
                 'milestoneHeaders/fill': {
                     type: 'color',
                     label: `${LANG.BPMN.MILESTONE_HEADER_FILL}`,
-                    group: 'appearance',
+                    group: `${LANG.BPMN.APPEARANCE}`,
                     index: 9
                 },
                 'milestoneHeaders/stroke': {
                     type: 'color',
                     label: `${LANG.BPMN.MILESTONE_STROKE}`,
-                    group: 'appearance',
+                    group: `${LANG.BPMN.APPEARANCE}`,
                     index: 10
                 },
                 'milestoneLabels/fill': {
                     type: 'color',
                     label: `${LANG.BPMN.MILESTONE_LABEL_COLOR}`,
-                    group: 'appearance',
+                    group: `${LANG.BPMN.APPEARANCE}`,
                     index: 11
                 },
                 'milestoneLines/stroke': {
                     type: 'color',
                     label: `${LANG.BPMN.MILESTONE_LINE_COLOR}`,
-                    group: 'appearance',
+                    group: `${LANG.BPMN.APPEARANCE}`,
                     index: 12
                 },
                 'headerLabel/text-anchor': {
@@ -11340,6 +11424,7 @@ class BpmnService {
         }).on({
             'blank:pointerdown': (evt, x, y) => {
                 closeTools();
+                this.setSelectedCellView(null);
                 // selection.startSelecting(evt, x, y);
                 if (keyboard.isActive('shift', evt)) {
                     selection.startSelecting(evt, x, y);
@@ -11354,6 +11439,7 @@ class BpmnService {
             },
             'cell:pointerup': (cellView) => {
                 openTools(cellView);
+                this.setSelectedCellView(cellView);
             },
             'link:mouseenter': (linkView) => {
                 // Open tool only if there is none yet
@@ -11588,10 +11674,12 @@ class BpmnService {
             verticalGap: 20,
             resizeToFit: false
         });
+        const setSelectedCellView = this.setSelectedCellView;
         // Create tooltips for all the shapes in stencil.
         stencil.on('element:drop', (elementView) => {
             // open inspector after a new element dropped from stencil
             openTools(elementView);
+            setSelectedCellView(elementView);
         });
         /* KEYBOARD */
         if (editMode === FlowchartViewMode.Edit) {
@@ -11617,21 +11705,32 @@ class BpmnService {
                 },
                 'ctrl+x shift+delete': () => {
                     clipboard.cutElements(selection.collection, graph);
+                    setSelectedCellView(null);
                 },
                 'delete backspace': (evt) => {
                     evt.preventDefault();
                     graph.removeCells(selection.collection.toArray());
+                    setSelectedCellView(null);
                 },
                 'ctrl+z': () => {
+                    const notify = isSelectedCellViewInSelection(selection);
                     commandManager.undo();
                     selection.cancelSelection();
+                    if (notify) {
+                        setSelectedCellView(null);
+                    }
                 },
                 'ctrl+y': () => {
+                    const notify = isSelectedCellViewInSelection(selection);
                     commandManager.redo();
                     selection.cancelSelection();
+                    if (notify) {
+                        setSelectedCellView(null);
+                    }
                 },
                 'ctrl+a': () => {
                     selection.collection.reset(graph.getElements());
+                    setSelectedCellView(null);
                 },
                 'ctrl+plus': (evt) => {
                     evt.preventDefault();
@@ -11654,7 +11753,6 @@ class BpmnService {
                 return;
             }
             closeTools();
-            window[`my_cellView`] = cellView;
             const cell = cellView.model;
             const type = cell.get('type');
             // const tablName = window[FlowChartConst.TAB_NAME];
@@ -11670,7 +11768,7 @@ class BpmnService {
             //     }
             //   });
             // }
-            const inspector = joint.ui.Inspector.create('#inspector-container', {
+            joint.ui.Inspector.create('#inspector-container', {
                 cell,
                 inputs: inputs[type],
                 groups: {
@@ -11834,8 +11932,6 @@ class BpmnService {
             // }
             /* QMS-2125: Show process connect type */
             window[FlowChartConst.IS_SHOW_CONNECTYPE] = true;
-            window[FlowChartConst.SELECTED_SHAPE_ID] = cellView.model.attributes.id;
-            window[FlowChartConst.SHAPE_TYPE] = cellView.model.attributes.type;
             window[FlowChartConst.SHAPE_FLOWCHART_LOADING] = true;
             /* QMS-1404: Customization */
             window[FlowChartConst.PAPER] = paper;
@@ -11847,6 +11943,11 @@ class BpmnService {
             freeTransform = null;
             joint.ui.Halo.clear(paper);
         }
+        function isSelectedCellViewInSelection(selection) {
+            const models = selection.collection.toArray() || [];
+            const selectedShapeId = window[FlowChartConst.SELECTED_SHAPE_ID];
+            return !!selectedShapeId && models.filter(model => model.attributes.id == selectedShapeId);
+        }
         function showStatus(message, type) {
             $$1('.status').removeClass('info error success').addClass(type).html(message);
             $$1('#statusbar-container')
@@ -11934,8 +12035,13 @@ class BpmnService {
                     this.jsonOriginalContent = JSON.stringify(graph.toJSON());
                     window[FlowChartConst.ORG_JSONCONTENT] = this.jsonOriginalContent;
                     window.postMessage(FlowChartConst.CHANGING_TEMPLATE, this.getOriginForSelf());
+                    this.setSelectedCellView(null);
                 }
             },
+            onClear: () => {
+                graph.clear();
+                this.setSelectedCellView(null);
+            },
             onDeleteTemplate: () => {
                 this.isSelectedTemplate = window[FlowChartConst.IS_SELECTED_TEMPLATE];
                 if (this.isSelectedTemplate) {
@@ -11976,7 +12082,7 @@ class BpmnService {
             'tojson:pointerclick': toolbarCommands.toJSON,
             'load:pointerclick': toolbarCommands.loadGraph,
             'save:pointerclick': toolbarCommands.saveGraph,
-            'clear:pointerclick': _.bind(graph.clear, graph),
+            'clear:pointerclick': toolbarCommands.onClear,
             'print:pointerclick': _.bind(paper.print, paper),
             'saveAsTemplate:pointerclick': toolbarCommands.onSaveAsTemplate,
             'selectTemplate:option:select': toolbarCommands.onSelected,
@@ -12098,6 +12204,19 @@ class BpmnService {
             }
         }
     }
+    setSelectedCellView(cellView) {
+        if (cellView) {
+            window[FlowChartConst.MY_CELL_VIEW] = cellView;
+            window[FlowChartConst.SELECTED_SHAPE_ID] = cellView.model.attributes.id;
+            window[FlowChartConst.SHAPE_TYPE] = cellView.model.attributes.type;
+        }
+        else {
+            window[FlowChartConst.MY_CELL_VIEW] = null;
+            window[FlowChartConst.SELECTED_SHAPE_ID] = '';
+            window[FlowChartConst.SHAPE_TYPE] = '';
+        }
+        window.postMessage(FlowChartConst.SELECTED_SHAPE_ID, '*');
+    }
     getTempGraph() {
         if (this.jsonTempContent) {
             this.loadProcessDiagram(JSON.parse(this.jsonTempContent));
@@ -12162,20 +12281,23 @@ class BpmnService {
         }
     }
     openShapeFunctionality(LANG) {
-        const myCellView = window[`my_cellView`];
-        const inputs = InspectorFunction.getInspectorConfiguration(bpmn2, LANG);
-        const cell = myCellView.model;
-        const type = cell.get('type');
-        const inspector = joint.ui.Inspector.create('#inspector-container', {
-            cell,
-            inputs: inputs[type],
-            groups: {
-                general: { label: type, index: 1 },
-                defaults: { index: 2 },
-                fontsize: { index: 3 },
-                appearance: { index: 4 }
-            }
-        });
+        const myCellView = window[FlowChartConst.MY_CELL_VIEW];
+        if (!!myCellView) {
+            joint.ui.Inspector.close();
+            const inputs = InspectorFunction.getInspectorConfiguration(bpmn2, LANG);
+            const cell = myCellView.model;
+            const type = cell.get('type');
+            joint.ui.Inspector.create('#inspector-container', {
+                cell,
+                inputs: inputs[type],
+                groups: {
+                    general: { label: type, index: 1 },
+                    defaults: { index: 2 },
+                    fontsize: { index: 3 },
+                    appearance: { index: 4 }
+                }
+            });
+        }
     }
     setZoomToFit(editMode) {
         if (editMode === FlowchartViewMode.View) {
@@ -12342,20 +12464,55 @@ BpmnService.decorators = [
             },] }
 ];
+class QMSCKEditorFlowchart {
+    constructor() {
+        this.id = '';
+        this.jsonContent = '';
+        this.isTemplate = false;
+        this.templateName = '';
+    }
+}
+class QMSCKEditorFlowchartService extends QMSCKEditorBaseService {
+    flowchartModifying(flowchart) {
+        return this.post('ckeditorFlowchart/FlowchartModifying', flowchart);
+    }
+    getFlowchartById(id) {
+        return this.get('ckeditorFlowchart/GetFlowchartById', { id });
+    }
+    flowchartGetTemplates() {
+        return this.get('ckeditorFlowchart/FlowchartGetTemplates');
+    }
+    flowchartDeleteTemplate(id) {
+        return this.delete('ckeditorFlowchart/FlowchartDeleteTemplate', { id });
+    }
+}
+QMSCKEditorFlowchartService.ɵprov = i0.ɵɵdefineInjectable({ factory: function QMSCKEditorFlowchartService_Factory() { return new QMSCKEditorFlowchartService(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(QMSCKEditorGlobalService)); }, token: QMSCKEditorFlowchartService, providedIn: "root" });
+QMSCKEditorFlowchartService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
 class SaveTemplateComponent extends QMSCKEditorBaseComponent {
-    constructor(translate, bmpnService, bpmnApiService, dialogRef, data) {
+    constructor(translate, bmpnService, bpmnApiService, flowchartService, dialogRef, data) {
         super();
         this.translate = translate;
         this.bmpnService = bmpnService;
         this.bpmnApiService = bpmnApiService;
+        this.flowchartService = flowchartService;
         this.dialogRef = dialogRef;
         this.data = data;
         this.saveFormGroup = new FormGroup({
             templateName: new FormControl('', [Validators.required])
         });
+        this.templateType = '';
         this.templateName = '';
         this.bpmn = new QMSCKEditorBpmn();
-        this.bpmn = data;
+        this.flowchart = new QMSCKEditorFlowchart();
+        this.templateType = data.templateType;
+        this.bpmn = data.bpmn;
+        this.flowchart = null; //data.flowchart;
     }
     ngOnInit() {
         this.translate.getLanguageSubject$.pipe(takeUntil(this.ngUnsubcribe)).subscribe((res) => {
@@ -12365,20 +12522,38 @@ class SaveTemplateComponent extends QMSCKEditorBaseComponent {
         });
     }
     saveTemplate() {
-        this.bpmn.templateName = this.templateName;
-        this.bpmnApiService
-            .bpmnModifying(this.bpmn)
-            .pipe(takeUntil(this.ngUnsubcribe))
-            .subscribe((result) => {
-            if (result) {
-                this.bmpnService.addItemTemplate(result, this.bpmn);
-                QMSCKEditorToastService.success(this.LANG.QMSCKEDITOR.SAVED);
-                this.onCloseDialog();
-            }
-            else {
-                QMSCKEditorToastService.error(this.LANG.QMSCKEDITOR.SAVE_FAILED);
-            }
-        });
+        if (this.templateType === CKEditorEventConst.QMSCK_BPMN) {
+            this.bpmn.templateName = this.templateName;
+            this.bpmnApiService
+                .bpmnModifying(this.bpmn)
+                .pipe(takeUntil(this.ngUnsubcribe))
+                .subscribe((result) => {
+                if (result) {
+                    this.bmpnService.addItemTemplate(result, this.bpmn);
+                    QMSCKEditorToastService.success(this.LANG.QMSCKEDITOR.SAVED);
+                    this.onCloseDialog();
+                }
+                else {
+                    QMSCKEditorToastService.error(this.LANG.QMSCKEDITOR.SAVE_FAILED);
+                }
+            });
+        }
+        else if (this.templateType === CKEditorEventConst.QMSCK_FLOWCHART) {
+            this.flowchart.templateName = this.templateName;
+            this.flowchartService
+                .flowchartModifying(this.flowchart)
+                .pipe(takeUntil(this.ngUnsubcribe))
+                .subscribe((result) => {
+                if (result) {
+                    QMSCKEditorToastService.success(this.LANG.QMSCKEDITOR.SAVED);
+                    this.flowchart.id = result;
+                    this.dialogRef.close(this.flowchart);
+                }
+                else {
+                    QMSCKEditorToastService.error(this.LANG.QMSCKEDITOR.SAVE_FAILED);
+                }
+            });
+        }
     }
     onCloseDialog() {
         this.dialogRef.close();
@@ -12395,24 +12570,89 @@ SaveTemplateComponent.ctorParameters = () => [
     { type: TranslateLibraryService },
     { type: BpmnService },
     { type: QMSCKEditorBpmnApiService },
+    { type: QMSCKEditorFlowchartService },
     { type: MatDialogRef },
-    { type: QMSCKEditorBpmn, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+    { type: QMSCKEditorSaveAsTemplate, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
+var ShapeFlowChartConnectionType;
+(function (ShapeFlowChartConnectionType) {
+    ShapeFlowChartConnectionType[ShapeFlowChartConnectionType["Activity"] = 1] = "Activity";
+    ShapeFlowChartConnectionType[ShapeFlowChartConnectionType["DocumentOrProcess"] = 2] = "DocumentOrProcess";
+    ShapeFlowChartConnectionType[ShapeFlowChartConnectionType["Link"] = 3] = "Link";
+    ShapeFlowChartConnectionType[ShapeFlowChartConnectionType["Attachment"] = 4] = "Attachment";
+})(ShapeFlowChartConnectionType || (ShapeFlowChartConnectionType = {}));
+class QMSCKEditorBpmnData {
+    constructor() {
+        this.id = '';
+        this.entityId = '';
+        this.editorContent = '';
+    }
+}
+class CKEditorLinkConst {
+}
+CKEditorLinkConst.FOLDER_PARTIAL_URL = '/folder/';
+CKEditorLinkConst.DOCUMENT_PARTIAL_URL = '/document/';
+CKEditorLinkConst.AREA_PARTIAL_URL = '/area/detail/';
+CKEditorLinkConst.PROCESS_PARTIAL_URL = '/process-detail/';
+class QMSCKEditorUploadService extends QMSCKEditorBaseService {
+    uploadImage(file) {
+        const formData = new FormData();
+        formData.append('name', file.name);
+        formData.append('file', file);
+        return this.post('ckeditorUpload/UploadImage', formData);
+    }
+}
+QMSCKEditorUploadService.ɵprov = i0.ɵɵdefineInjectable({ factory: function QMSCKEditorUploadService_Factory() { return new QMSCKEditorUploadService(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(QMSCKEditorGlobalService)); }, token: QMSCKEditorUploadService, providedIn: "root" });
+QMSCKEditorUploadService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
 ];
+class ILink {
+    constructor() {
+        this.target = TargetTypeName.new;
+        this.documentType = QMSCKEditorDocumentType.other;
+        this.url = '';
+        this.title = '';
+        this.icon = '';
+        this.content = '';
+    }
+}
 class QMSCKEditorBpmnComponent extends QMSCKEditorBaseComponent {
-    constructor(dialog, translate, bmpnService, bpmnApiService, dialogRef, data) {
+    constructor(dialog, translate, bmpnService, bpmnApiService, linkService, uploadService, dialogRef, data) {
         super();
         this.dialog = dialog;
         this.translate = translate;
         this.bmpnService = bmpnService;
         this.bpmnApiService = bpmnApiService;
+        this.linkService = linkService;
+        this.uploadService = uploadService;
         this.dialogRef = dialogRef;
         this.data = data;
         this.expandedPanel = true;
         this.id = '';
+        this.entityId = '';
+        this.editorContent = '';
         this.bpmn = new QMSCKEditorBpmn();
         this.bpmnTemlates = [];
-        this.id = data;
+        this.targets = [];
+        this.connectionTypes = [];
+        this.selectedTarget = TargetTypeName.new;
+        this.linkUrl = '';
+        this.linkTitle = '';
+        this.anchorByName = '';
+        this.linkIcon = '';
+        this.linkId = '';
+        this.documentType = QMSCKEditorDocumentType.other;
+        this.id = data.id;
+        this.module = data.module;
+        this.entityId = data.entityId;
+        this.editorContent = data.editorContent;
     }
     onMessage(event) {
         if (event.data === FlowChartConst.SAVE_AS_TEMPLATE) {
@@ -12422,7 +12662,7 @@ class QMSCKEditorBpmnComponent extends QMSCKEditorBaseComponent {
             this.onDeleteTemplate(this.LANG.BPMN.DELETE_TEMPLATE, this.LANG.QMSCKEDITOR_MESSAGE.CONFIRM_DELETE_TEMPLATE);
         }
         else if (event.data === FlowChartConst.MUST_SELECT_TEMPLATE) {
-            this.showInfoMessage(this.LANG.BPMN.SELECT_TEMPLATE, this.LANG.BPMN.SELECT_TEMPLATE_INFORMATION);
+            this.showConfirmDialog(this.LANG.BPMN.SELECT_TEMPLATE, this.LANG.BPMN.SELECT_TEMPLATE_INFORMATION, true);
         }
         else if (event.data === FlowChartConst.CHANGING_TEMPLATE) {
             this.onSelectedTemplate();
@@ -12430,6 +12670,9 @@ class QMSCKEditorBpmnComponent extends QMSCKEditorBaseComponent {
         else if (event.data === FlowChartConst.RESET_TEMPLATE) {
             this.onResetTemplate();
         }
+        else if (event.data === FlowChartConst.SELECTED_SHAPE_ID) {
+            this.onSeletedCellView();
+        }
     }
     ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -12443,8 +12686,42 @@ class QMSCKEditorBpmnComponent extends QMSCKEditorBaseComponent {
                 this.jsonContent = yield this.getJsonContent(this.id);
             }
             this.bmpnService.buildDiagram(this.bpmnTemlates, null, CKEditorEventConst.QMSCK_BPMN, this.jsonContent, 1, this.LANG);
+            this.initDocumentIcons();
+            this.initTarget();
+            this.initConnectionType();
+            this.initLink();
         });
     }
+    initTarget() {
+        if (this.targets) {
+            this.targets.push({ id: TargetTypeName.new, name: this.LANG.QMSCKEDITOR.TARTGET_NEW });
+            this.targets.push({ id: TargetTypeName.same, name: this.LANG.QMSCKEDITOR.TARGET_SAME });
+        }
+    }
+    initConnectionType() {
+        if (this.connectionTypes) {
+            this.connectionTypes.push({ id: ShapeFlowChartConnectionType.DocumentOrProcess, name: this.LANG.QMSCKEDITOR.DOCUMENT_PROCESS });
+            this.connectionTypes.push({ id: ShapeFlowChartConnectionType.Attachment, name: this.LANG.QMSCKEDITOR.ATTACHMENT });
+        }
+    }
+    initDocumentIcons() {
+        this.documentIcons = {};
+        this.documentIcons[QMSCKEditorDocumentType.document] = 'text_snippet';
+        this.documentIcons[QMSCKEditorDocumentType.process] = 'account_tree';
+        this.documentIcons[QMSCKEditorDocumentType.area] = 'folder';
+        this.documentIcons[QMSCKEditorDocumentType.folder] = 'folder';
+        this.documentIcons[QMSCKEditorDocumentType.other] = 'text_snippet';
+    }
+    initLink() {
+        this.link = null;
+        this.linkId = '';
+        this.documentType = QMSCKEditorDocumentType.other;
+        this.linkIcon = this.documentIcons[QMSCKEditorDocumentType.other];
+        this.selectedTarget = TargetTypeName.new;
+        this.anchorByName = '';
+        this.linkTitle = '';
+        this.documentAnchors = [];
+    }
     expandPanel() {
         this.expandedPanel = !this.expandedPanel;
         const panelStencil = document.getElementById('panel-stencil-container');
@@ -12489,11 +12766,10 @@ class QMSCKEditorBpmnComponent extends QMSCKEditorBaseComponent {
             });
         });
     }
-    saveImageContent() {
+    saveImageContent(graphObject) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve) => {
-                const graph = window[FlowChartConst.GRAPH];
-                const jsonContent = JSON.stringify(graph.toJSON());
+                const jsonContent = JSON.stringify(graphObject);
                 this.bpmn = {
                     id: this.id ? this.id : guidHelper.empty,
                     jsonContent: jsonContent,
@@ -12511,6 +12787,19 @@ class QMSCKEditorBpmnComponent extends QMSCKEditorBaseComponent {
             });
         });
     }
+    dataUrlToFile(dataUrl, filename) {
+        const arr = dataUrl.split(',');
+        if (arr.length < 2) {
+            return undefined;
+        }
+        const mimeArr = arr[0].match(/:(.*?);/);
+        if (!mimeArr || mimeArr.length < 2) {
+            return undefined;
+        }
+        const mime = mimeArr[1];
+        const buff = Buffer.from(arr[1], 'base64');
+        return new File([buff], filename, { type: mime });
+    }
     getImageContent(paper) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve) => {
@@ -12523,26 +12812,211 @@ class QMSCKEditorBpmnComponent extends QMSCKEditorBaseComponent {
     }
     onInsertImage() {
         return __awaiter(this, void 0, void 0, function* () {
-            const id = yield this.saveImageContent();
+            const graph = window[FlowChartConst.GRAPH];
             const paper = window[`paper`];
+            const clientRect = paper.paperToLocalRect(paper.getContentBBox());
+            const graphObject = graph.toJSON();
+            const id = yield this.saveImageContent(graphObject);
             const imageContent = 'data:image/png;base64,' + (yield this.getImageContent(paper));
-            const result = { key: `${CKEditorEventConst.QMSCK_BPMN}#${id}`, values: imageContent };
+            const file = this.dataUrlToFile(imageContent, `${CKEditorEventConst.QMSCK_BPMN}#${id}`);
+            const imageUrl = yield this.uploadService.uploadImage(file).toPromise();
+            const imagemap = this.toImageMap(id, graphObject.cells, clientRect);
+            const result = { key: `${CKEditorEventConst.QMSCK_BPMN}#${id}`, values: imageUrl, imagemap: imagemap };
             this.dialogRef.close(result);
         });
     }
     onCloseDialog() {
         this.dialogRef.close();
     }
+    removeLink() {
+        let title = this.LANG.BPMN.DELETE_ATTACHMENT;
+        let content = this.LANG.BPMN.CONFIRM_DELETE_ATTACHMENT;
+        if (this.selectedConnectionType == ShapeFlowChartConnectionType.DocumentOrProcess) {
+            title = this.LANG.BPMN.DELETE_DOCUMENT_OR_PROCESS;
+            content = this.LANG.QMSCKEDITOR_MESSAGE.CONFIRM_DELETE_DOCUMENT_OR_PROCESS;
+        }
+        this.showConfirmDialog(title, content, false, (value) => {
+            if (value) {
+                if (value == true || (typeof value == 'object' && value.isConfirmed == true)) {
+                    this.link = null;
+                }
+            }
+        });
+    }
+    onConnectionTypeChange() {
+        this.selectedConnectionType = this.connectionType;
+        if (this.link) {
+            this.showConfirmDialog(this.LANG.QMSCKEDITOR.INFORMATION, this.LANG.QMSCKEDITOR_MESSAGE.CONFIRM_DELETE_EXISTING_CONNECTION, true, () => {
+                this.connectionType = 0;
+            });
+            return;
+        }
+        switch (this.connectionType) {
+            case ShapeFlowChartConnectionType.DocumentOrProcess:
+                this.openHandbookDialog(false);
+                break;
+            case ShapeFlowChartConnectionType.Attachment:
+                this.openAttachmentDialog();
+                break;
+        }
+    }
+    onAnchorByNameChange() {
+        this.updateCellViewValues();
+    }
+    openHandbookDialog(isOnlyDocument) {
+        const data = new QMSCKEditorRelation();
+        data.isOnlyDocument = isOnlyDocument;
+        data.isEnableFolder = !isOnlyDocument;
+        const dialogTemplate = this.dialog.open(QMSCKEditorRelatedComponent, {
+            width: '650px',
+            height: '650px',
+            data,
+            disableClose: true
+        });
+        dialogTemplate
+            .afterClosed()
+            .pipe(takeUntil(this.ngUnsubcribe))
+            .subscribe((result) => {
+            if (result) {
+                this.documentType = result.type;
+                this.linkId = this.getLinkId(result.url, result.type);
+                if (result.type == QMSCKEditorDocumentType.document) {
+                    this.linkTitle = `${result.title}(${result.id})`;
+                    this.getAnchorDocument(result.id);
+                }
+                else {
+                    this.linkUrl = result.url;
+                    if (!this.linkTitle) {
+                        this.linkTitle = result.title;
+                    }
+                }
+                this.selectedTarget = TargetTypeName.new;
+                this.updateCellViewValues();
+            }
+            this.connectionType = 0;
+        });
+    }
+    openAttachmentDialog() {
+        const data = new QMSCKEditorParamter();
+        data.module = this.module;
+        data.entityId = this.entityId;
+        const dialogTemplate = this.dialog.open(LinkAttachmentComponent, {
+            width: '650px',
+            height: '650px',
+            data,
+            disableClose: true
+        });
+        dialogTemplate
+            .afterClosed()
+            .pipe(takeUntil(this.ngUnsubcribe))
+            .subscribe((result) => {
+            if (result) {
+                this.documentType = QMSCKEditorDocumentType.other;
+                this.linkUrl = result.url;
+                if (!this.linkTitle) {
+                    this.linkTitle = result.title;
+                }
+                this.selectedTarget = TargetTypeName.new;
+                this.updateCellViewValues();
+            }
+            this.connectionType = 0;
+        });
+    }
+    getAnchorDocument(documentId) {
+        this.isLoadingDocumentAnchor = true;
+        this.linkService
+            .getAnchorDocumentList(documentId)
+            .pipe(takeUntil(this.ngUnsubcribe))
+            .subscribe((documents) => {
+            this.documentAnchors = this.extractDocumentAnchors(documents || []);
+            this.isLoadingDocumentAnchor = false;
+        });
+    }
+    extractDocumentAnchors(anchorDocument) {
+        const anchors = [{ value: 0, viewValue: '', anchorValue: LinkAnchor.Blank }];
+        let id = 3;
+        if (anchorDocument) {
+            anchorDocument.forEach((e) => {
+                const div = document.createElement('div');
+                div.innerHTML = e.richText;
+                const domContent = div;
+                const aTags = domContent.getElementsByTagName('a');
+                if (aTags) {
+                    // tslint:disable-next-line:prefer-for-of
+                    for (let i = 0; i < aTags.length; i++) {
+                        const tag = aTags[i];
+                        if (tag.name) {
+                            const index = anchors.findIndex((x) => {
+                                return x.anchorValue === tag.name;
+                            });
+                            if (index < 0) {
+                                anchors.push({
+                                    value: id,
+                                    viewValue: tag.name,
+                                    anchorValue: tag.name
+                                });
+                                id += 1;
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        anchors.push({
+            value: 1,
+            viewValue: this.LANG.QMSCKEDITOR.ANCHOR_ATTACHMENT,
+            anchorValue: LinkAnchor.Attachment
+        });
+        anchors.push({
+            value: 2,
+            viewValue: this.LANG.QMSCKEDITOR.ANCHOR_RELATED_DOCUMENT,
+            anchorValue: LinkAnchor.Related
+        });
+        return anchors;
+    }
+    reloadAnchors() {
+        if (!!this.linkId && this.documentType == QMSCKEditorDocumentType.document) {
+            this.getAnchorDocument(this.linkId);
+        }
+    }
+    buildLink() {
+        const link = new ILink();
+        link.target = this.selectedTarget;
+        link.title = this.linkTitle;
+        link.url = this.linkUrl;
+        link.documentType = this.documentType || QMSCKEditorDocumentType.other;
+        link.icon = this.documentIcons[link.documentType];
+        link.content = '';
+        switch (this.documentType) {
+            case QMSCKEditorDocumentType.document:
+                link.url = `${CKEditorLinkConst.DOCUMENT_PARTIAL_URL}${this.linkId}#${this.anchorByName}`;
+                link.content = `${this.LANG.QMSCKEDITOR.ID}: ${this.linkId}`;
+                break;
+            case QMSCKEditorDocumentType.process:
+                link.content = `${this.LANG.QMSCKEDITOR.ID}: ${this.linkId}`;
+                break;
+            case QMSCKEditorDocumentType.area:
+                link.content = `${this.LANG.QMSCKEDITOR.ID}: ${this.linkId}`;
+                break;
+            case QMSCKEditorDocumentType.folder:
+                link.content = `${this.LANG.QMSCKEDITOR.ID}: ${this.linkId}`;
+                break;
+        }
+        return link;
+    }
     onSaveAsTemplate() {
         const graph = window[FlowChartConst.GRAPH];
         const jsonContent = JSON.stringify(graph.toJSON());
-        let data = new QMSCKEditorBpmn();
-        data = {
+        let template = new QMSCKEditorBpmn();
+        template = {
             id: guidHelper.empty,
             jsonContent: jsonContent,
             isTemplate: true,
             templateName: ''
         };
+        let data = new QMSCKEditorSaveAsTemplate();
+        data.templateType = CKEditorEventConst.QMSCK_BPMN;
+        data.bpmn = template;
         const dialogTemplate = this.dialog.open(SaveTemplateComponent, {
             width: '450px',
             height: '220px',
@@ -12565,6 +13039,10 @@ class QMSCKEditorBpmnComponent extends QMSCKEditorBaseComponent {
             if (graph) {
                 graph.fromJSON(JSON.parse(selectedJsonContent));
             }
+            window[FlowChartConst.MY_CELL_VIEW] = null;
+            window[FlowChartConst.SELECTED_SHAPE_ID] = '';
+            window[FlowChartConst.SHAPE_TYPE] = '';
+            this.onSeletedCellView();
         }
     }
     onDeleteTemplate(title, content) {
@@ -12581,24 +13059,119 @@ class QMSCKEditorBpmnComponent extends QMSCKEditorBaseComponent {
             .pipe(takeUntil(this.ngUnsubcribe))
             .subscribe((result) => {
             if (result) {
-                const id = window[FlowChartConst.SELECTED_FLOWCHART_ID];
-                this.bpmnApiService
-                    .bpmnDeleteTemplate(id)
-                    .pipe(takeUntil(this.ngUnsubcribe))
-                    .subscribe((result) => {
-                    if (result) {
-                        this.bmpnService.removeSelectItem(id);
-                        this.bmpnService.setDefaultSelectedValue();
-                        window[FlowChartConst.IS_SELECTED_TEMPLATE] = false;
-                        QMSCKEditorToastService.success(this.LANG.QMSCKEDITOR.DELETED);
-                    }
-                    else {
-                        QMSCKEditorToastService.error(this.LANG.QMSCKEDITOR.DELETE_FAILED);
-                    }
-                });
             }
         });
     }
+    onSeletedCellView() {
+        this.selectedCellView = window[FlowChartConst.MY_CELL_VIEW];
+        this.initLink();
+        if (!!this.selectedCellView) {
+            const attributes = this.selectedCellView.model.attributes;
+            const excludedTypes = ['bpmn2.Flow', 'bpmn2.HeaderedPool', 'bpmn2.ConversationLink', 'bpmn2.AnnotationLink', 'bpmn2.DataAssociation'];
+            if (!attributes.type || excludedTypes.findIndex(type => type.toLowerCase() == attributes.type.toLowerCase()) > -1) {
+                this.selectedCellView = null;
+            }
+            else {
+                this.linkUrl = attributes.linkUrl || '';
+                if (!!this.linkUrl) {
+                    this.parseLinkUrl(this.linkUrl);
+                    this.selectedTarget = attributes.linkTarget;
+                    this.linkTitle = attributes.linkTitle;
+                    this.link = this.buildLink();
+                }
+            }
+        }
+    }
+    onTabChange($event) {
+        window[FlowChartConst.TAB_NAME] = $event.tab.textLabel;
+        if ($event.tab.textLabel == this.LANG.BPMN.PROPERTIES) {
+            this.bmpnService.openShapeFunctionality(this.LANG);
+        }
+    }
+    parseLinkUrl(url) {
+        if (!!url) {
+            const hashIndex = url.indexOf('#');
+            this.documentType = this.getDocumentType(url);
+            this.linkIcon = this.documentIcons[this.documentType];
+            this.linkId = this.getLinkId(url, this.documentType);
+            if (!!this.linkId && this.documentType == QMSCKEditorDocumentType.document && hashIndex > -1) {
+                this.anchorByName = url.substr(hashIndex + 1, url.length - hashIndex);
+                this.getAnchorDocument(this.linkId);
+            }
+        }
+    }
+    getPartialUrl(type) {
+        switch (type) {
+            case QMSCKEditorDocumentType.document:
+                return CKEditorLinkConst.DOCUMENT_PARTIAL_URL;
+            case QMSCKEditorDocumentType.process:
+                return CKEditorLinkConst.PROCESS_PARTIAL_URL;
+            case QMSCKEditorDocumentType.area:
+                return CKEditorLinkConst.AREA_PARTIAL_URL;
+            case QMSCKEditorDocumentType.folder:
+                return CKEditorLinkConst.FOLDER_PARTIAL_URL;
+            default:
+                return '';
+        }
+    }
+    getLinkId(url, type) {
+        let partialUrlIndex = 0;
+        let partialUrlLength = 0;
+        let id = '';
+        let from = 0;
+        let urlLowerCase = !!url ? url.toLowerCase() : '';
+        const partialUrl = this.getPartialUrl(type).toLowerCase();
+        const hashIndex = urlLowerCase.indexOf('#');
+        if (!!partialUrl) {
+            partialUrlIndex = urlLowerCase.indexOf(partialUrl);
+            partialUrlLength = partialUrl.length;
+            from = partialUrlIndex + partialUrlLength;
+            if (type == QMSCKEditorDocumentType.document && hashIndex > -1) {
+                id = urlLowerCase.substr(from, hashIndex - from);
+            }
+            else {
+                const length = urlLowerCase.substr(from).indexOf('/');
+                if (length < 0) {
+                    id = urlLowerCase.substr(from);
+                }
+                else {
+                    id = urlLowerCase.substr(from, length);
+                }
+            }
+        }
+        if (type == QMSCKEditorDocumentType.document) {
+            try {
+                parseInt(id, 10);
+            }
+            catch (_a) {
+                id = '';
+            }
+        }
+        return id;
+    }
+    getDocumentType(url) {
+        if (url.indexOf(CKEditorLinkConst.DOCUMENT_PARTIAL_URL) > -1) {
+            return QMSCKEditorDocumentType.document;
+        }
+        else if (url.indexOf(CKEditorLinkConst.PROCESS_PARTIAL_URL) > -1) {
+            return QMSCKEditorDocumentType.process;
+        }
+        else if (url.indexOf(CKEditorLinkConst.AREA_PARTIAL_URL) > -1) {
+            return QMSCKEditorDocumentType.area;
+        }
+        else if (url.indexOf(CKEditorLinkConst.FOLDER_PARTIAL_URL) > -1) {
+            return QMSCKEditorDocumentType.folder;
+        }
+        return QMSCKEditorDocumentType.other;
+    }
+    updateCellViewValues() {
+        if (!!this.selectedCellView) {
+            this.link = this.buildLink();
+            this.selectedCellView.model.prop('linkUrl', this.link.url);
+            this.selectedCellView.model.prop('linkTarget', this.link.target);
+            this.selectedCellView.model.prop('linkTitle', this.link.title);
+        }
+    }
     onResetTemplate() {
         const ogrJsonContent = window[FlowChartConst.ORG_JSONCONTENT];
         if (ogrJsonContent) {
@@ -12608,13 +13181,17 @@ class QMSCKEditorBpmnComponent extends QMSCKEditorBaseComponent {
                 this.bmpnService.setDefaultSelectedValue();
                 window[FlowChartConst.IS_SELECTED_TEMPLATE] = false;
             }
+            window[FlowChartConst.MY_CELL_VIEW] = null;
+            window[FlowChartConst.SELECTED_SHAPE_ID] = '';
+            window[FlowChartConst.SHAPE_TYPE] = '';
+            this.onSeletedCellView();
         }
     }
-    showInfoMessage(title, content) {
+    showConfirmDialog(title, content, isMessage, callback) {
         const data = new QMSCKEditorDialogData();
         data.title = title;
         data.content = content;
-        data.isMessage = true;
+        data.isMessage = isMessage;
         const dialogRef = this.dialog.open(QMSCKEditorConfirmComponent, {
             width: '500px',
             minHeight: '175px',
@@ -12624,17 +13201,169 @@ class QMSCKEditorBpmnComponent extends QMSCKEditorBaseComponent {
             .afterClosed()
             .pipe(takeUntil(this.ngUnsubcribe))
             .subscribe((result) => {
-            if (result) {
-                //TODO
+            if (callback) {
+                callback(result);
+            }
+        });
+    }
+    toImageMap(id, cells, clientRect) {
+        const map = { name: id, id: id, areas: [], imageHeight: 0, imageWidth: 0 };
+        map.imageHeight = clientRect.height;
+        map.imageWidth = clientRect.width;
+        if (cells && cells.length != 0) {
+            var isVerticalPool = false;
+            for (var i = 0; i < cells.length; i++) {
+                let shape = cells[i];
+                let size = shape['size'] || { width: 0, height: 0 };
+                let bbox = shape['bbox'] || { x: 0, y: 0 };
+                let position = shape['position'] || { x: 0, y: 0 };
+                bbox.x = position.x;
+                bbox.y = position.y;
+                bbox.width = size.width;
+                bbox.height = size.height;
+                shape['bbox'] = bbox;
+                shape['additionalWidth'] = (bbox.width > size.width) ? (bbox.width - size.width) : 0;
+            }
+            var offsetX = this.getMinXOffset(cells);
+            var offsetY = this.getMinYOffset(cells);
+            var additionalOffsetY = 0;
+            for (var i = 0; i < cells.length; i++) {
+                let shape = cells[i];
+                let href = shape.linkUrl;
+                let target = shape.linkTarget;
+                let alt = shape.linkTitle;
+                if (shape.type == 'bpmn2.Pool' || shape.type == 'bpmn2.HeaderedPool') {
+                    additionalOffsetY = (shape.additionalWidth / 2);
+                    isVerticalPool = (shape.type == 'bpmn2.Pool' || shape.type == 'bpmn2.HeaderedPool') && shape.angle != 0 ? true : false;
+                }
+                if (!!href && href.length > 0) {
+                    var size = shape['size'] || { width: 0, height: 0 };
+                    var bbox = shape['bbox'] || { x: 0, y: 0 };
+                    var position = shape['position'] || { x: 0, y: 0 };
+                    bbox.x = position.x;
+                    bbox.y = position.y;
+                    bbox.width = size.width;
+                    bbox.height = size.height;
+                    var additionalOffsetX = (shape.additionalWidth / 2);
+                    var x1, y1, x2, y2;
+                    if (shape.includeTextInClickableArea == true) {
+                        x1 = (bbox.x - offsetX - additionalOffsetX);
+                        y1 = (bbox.y - offsetY);
+                        x2 = (x1 + shape.bbox.width - 1);
+                        y2 = (y1 + shape.bbox.height);
+                    }
+                    else {
+                        var transformX = offsetX, transformY = offsetY;
+                        if (offsetX < 0 && isVerticalPool) {
+                            transformX = offsetX + size.height;
+                            transformY = offsetY - size.height;
+                        }
+                        if (offsetY < 0 && isVerticalPool) {
+                            transformY = offsetY + additionalOffsetY;
+                        }
+                        x1 = (bbox.x - transformX);
+                        y1 = (bbox.y - transformY);
+                        x2 = (x1 + size.width - 1);
+                        y2 = (y1 + size.height);
+                    }
+                    let coords = `${x1},${y1},${x2},${y2}`;
+                    switch (shape.type) {
+                        case 'bpmn2.Activity':
+                        case 'bpmn2.Gateway':
+                        case 'bpmn2.Event':
+                        case 'bpmn2.Conversation':
+                        case 'bpmn2.DataObject':
+                        case 'bpmn2.DataStore':
+                        case 'bpmn.Choreography':
+                        case 'bpmn.Message':
+                            map.areas.push({
+                                shape: 'rect',
+                                coords: coords,
+                                href: href,
+                                target: target,
+                                alt: alt
+                            });
+                            break;
+                        default:
+                            map.areas.push({
+                                shape: 'rect',
+                                coords: coords,
+                                href: href,
+                                target: target,
+                                alt: alt
+                            });
+                            break;
+                    }
+                }
+            }
+        }
+        return map;
+    }
+    getMinXOffset(shapes) {
+        var filterShapes = shapes.filter(function (s) {
+            return s.type !== 'bpmn2.Flow'
+                && s.type != 'bpmn2.ConversationLink'
+                && s.type != 'bpmn2.DataAssociation'
+                && s.type != 'bpmn2.AnnotationLink';
+        });
+        var minValue;
+        var minObject;
+        if (!filterShapes || !filterShapes.length) {
+            minValue = this.getXPosition(shapes[0]);
+            minObject = shapes[0];
+        }
+        else {
+            minValue = this.getXPosition(filterShapes[0]);
+            minObject = filterShapes[0];
+        }
+        for (var i = 1; i < filterShapes.length; i++) {
+            var xPosition = this.getXPosition(filterShapes[i]);
+            if (xPosition < minValue) {
+                minValue = xPosition;
+                minObject = filterShapes[i];
+            }
+        }
+        return minValue;
+    }
+    getXPosition(shape) {
+        return shape.bbox.x - (shape.additionalWidth / 2);
+    }
+    getYPosition(shape) {
+        return shape.bbox.y - (shape.additionalWidth / 2);
+    }
+    getMinYOffset(shapes) {
+        var filterShapes = shapes.filter(function (s) {
+            return s.type !== 'bpmn2.Flow'
+                && s.type != 'bpmn2.ConversationLink'
+                && s.type != 'bpmn2.DataAssociation'
+                && s.type != 'bpmn2.AnnotationLink';
+        });
+        var minValue;
+        var minObject;
+        if (!filterShapes || !filterShapes.length) {
+            minValue = shapes[0].bbox.y;
+            minObject = shapes[0];
+        }
+        else {
+            minValue = filterShapes[0].bbox.y;
+            minObject = filterShapes[0];
+        }
+        for (var i = 1; i < filterShapes.length; i++) {
+            var yPosition = this.getYPosition(filterShapes[i]);
+            if (yPosition < minValue) {
+                minValue = yPosition;
+                minObject = filterShapes[i];
             }
-        });
+        }
+        return minValue;
     }
+    ;
 }
 QMSCKEditorBpmnComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-bpmn',
-                template: "<div id=\"qmsckeditor-bpmn\" class=\"qmsckeditor qmsckeditor__bpmn__container\">\r\n  <div id=\"qmsckeditor-load-template-header\">\r\n    <span\r\n      id=\"qmsckeditor-bpmn-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    <span\r\n      id=\"qmsckeditor-bpmn-header_002\"\r\n      mat-icon-button\r\n      class=\"qmsckeditor button__done\"\r\n      (click)=\"onInsertImage()\"\r\n    >\r\n      <mat-icon>done</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        Business Process Model and Notation\r\n      </h2>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"bpmn\" class=\"bpmn__editor\">\r\n    <div id=\"toolbarpanel\">\r\n      <div id=\"toolbar-container\"></div>\r\n    </div>\r\n    <div id=\"leftpanel\">\r\n      <div id=\"paperpanel\">\r\n        <div id=\"paper-container\"></div>\r\n      </div>\r\n      <div id=\"stencilpanel\">\r\n        <mat-expansion-panel\r\n          id=\"panel-stencil-container\"\r\n          [expanded]=\"expandedPanel\"\r\n          (click)=\"expandPanel()\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title> </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"stencil-container\"></div>\r\n        </mat-expansion-panel>\r\n        <!-- <div id=\"stencil-container\"></div> -->\r\n      </div>\r\n    </div>\r\n    <div id=\"rightpanel\">\r\n      <div id=\"inspector-container\">\r\n        <div class=\"about\">\r\n          <h1>Business Process Model and Notation</h1>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: [".qmsckeditor__bpmn__container .bpmn__editor{width:100%;height:600px}.qmsckeditor__bpmn__container #leftpanel{float:left;width:70%;height:550px}.qmsckeditor__bpmn__container #rightpanel{float:right;width:30%;height:550px;border:solid;border-width:0 1px 1px 0;overflow-y:auto}.qmsckeditor__bpmn__container #toolbarpanel{position:relative;top:0;bottom:0;left:0;right:0;margin-bottom:17px;height:50px;width:100%}.qmsckeditor__bpmn__container #paperpanel{position:relative;top:0;bottom:0;left:0;right:0;height:400px;width:100%}.qmsckeditor__bpmn__container #stencilpanel{position:relative;top:0;bottom:0;left:0;right:0;height:150px;width:100%}.qmsckeditor__bpmn__container #toolbar-container{position:relative;top:0;bottom:0;left:0;right:0;width:100%;height:100%}.qmsckeditor__bpmn__container #paper-container{position:relative;top:0;bottom:0;left:0;right:0;width:100%;height:inherit}.qmsckeditor__bpmn__container #inspector-container{position:relative;top:0;right:0;bottom:0;width:100%;background:#fff}.qmsckeditor__bpmn__container #stencil-container{position:absolute;top:0;bottom:0;left:0;right:0;width:1174px;height:inherit}.qmsckeditor__bpmn__container #statusbar-container{position:absolute;left:0;right:0;bottom:0;height:25px}.qmsckeditor__bpmn__container #panel-stencil-container{position:absolute;left:0;right:0;bottom:0;height:150px;overflow-x:auto;overflow-y:hidden;background-image:url(\"data:image/png;base64,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\");background-repeat:repeat;transition:all .5s ease-in-out 0s}.qmsckeditor__bpmn__container #panel-stencil-container .mat-expansion-panel-header-title{color:#fff}.qmsckeditor__bpmn__container #panel-stencil-container .joint-theme-default{background:none}.qmsckeditor__bpmn__container #panel-stencil-container ::ng-deep .mat-expansion-indicator:after{color:#fff;transform:rotate(-135deg)}.qmsckeditor__bpmn__container #panel-stencil-container .mat-expansion-panel-header{min-width:1224px;max-width:100%}.qmsckeditor__bpmn__container #panel-stencil-container .joint-stencil>.content{width:1200px}.qmsckeditor__bpmn__container ::ng-deep .joint-inspector.joint-theme-bpmn .list-item .input-wrapper input{width:70%;float:none}"]
+                template: "<div id=\"qmsckeditor-bpmn\" class=\"qmsckeditor qmsckeditor__bpmn__container\">\r\n  <div id=\"qmsckeditor-load-template-header\">\r\n    <span\r\n      id=\"qmsckeditor-bpmn-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    <span\r\n      id=\"qmsckeditor-bpmn-header_002\"\r\n      mat-icon-button\r\n      class=\"qmsckeditor button__done\"\r\n      (click)=\"onInsertImage()\"\r\n    >\r\n      <mat-icon>done</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.BPMN.BUSINESS_PROCESS_MODEL_AND_NOTATION }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"bpmn\" class=\"bpmn__editor\">\r\n    <div id=\"toolbarpanel\">\r\n      <div id=\"toolbar-container\"></div>\r\n    </div>\r\n    <div id=\"leftpanel\">\r\n      <div id=\"paperpanel\">\r\n        <div id=\"paper-container\"></div>\r\n      </div>\r\n      <div id=\"stencilpanel\">\r\n        <mat-expansion-panel\r\n          id=\"panel-stencil-container\"\r\n          [expanded]=\"expandedPanel\"\r\n          (click)=\"expandPanel()\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title> </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"stencil-container\"></div>\r\n        </mat-expansion-panel>\r\n        <!-- <div id=\"stencil-container\"></div> -->\r\n      </div>\r\n    </div>\r\n    <div id=\"rightpanel\">\r\n      <mat-tab-group\r\n        mat-stretch-tabs\r\n        mat-align-tabs=\"center\"\r\n        (selectedTabChange)=\"onTabChange($event)\"\r\n      >\r\n        <mat-tab\r\n          [label]=\"LANG.BPMN.PROPERTIES\"\r\n          id=\"qmsckeditor_bpmn_properties\"\r\n        >\r\n          <div id=\"inspector-container\"></div>\r\n          <!-- <div class=\"about\" *ngIf=\"!selectedCellView\">\r\n            <h1>{{ LANG.BPMN.BUSINESS_PROCESS_MODEL_AND_NOTATION }}</h1>\r\n          </div> -->\r\n        </mat-tab>\r\n        <mat-tab\r\n          [label]=\"LANG.BPMN.CONNECTION\"\r\n          id=\"qmsckeditor_bpmn_connection\"\r\n        >\r\n          <!-- <div class=\"about\" *ngIf=\"!selectedCellView\">\r\n            <h1>{{ LANG.BPMN.BUSINESS_PROCESS_MODEL_AND_NOTATION }}</h1>\r\n          </div> -->\r\n          <mat-expansion-panel\r\n            id=\"qmsckeditor_bpmn_connection_panel\"\r\n            [expanded]=\"true\"\r\n            (opened)=\"(true)\"\r\n            (closed)=\"(false)\"\r\n            hideToggle\r\n            *ngIf=\"!!selectedCellView\"\r\n          >\r\n            <mat-expansion-panel-header>\r\n              <mat-panel-title>\r\n                {{ LANG.BPMN.CONNECTION }}\r\n              </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <div id=\"qmsckeditor_bpmn_connection_panel_001\" class=\"col-12 mt8\">\r\n              <mat-form-field appearance=\"fill\" class=\"col-12 pl-3\">\r\n                <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n                <mat-select\r\n                  [(ngModel)]=\"connectionType\"\r\n                  name=\"connectionType\"\r\n                  (ngModelChange)=\"onConnectionTypeChange()\"\r\n                >\r\n                  <mat-option\r\n                    *ngFor=\"let item of connectionTypes\"\r\n                    [value]=\"item.id\"\r\n                    disableOptionCentering\r\n                  >\r\n                    {{ item.name }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n            <div\r\n              id=\"qmsckeditor_bpmn_connection_panel_002\"\r\n              class=\"col-12 mt8\"\r\n              *ngIf=\"!!link\"\r\n            >\r\n              <mat-card>\r\n                <div class=\"row\">\r\n                  <div class=\"col-1 mt-n4\">\r\n                    <mat-icon aria-hidden=\"true\" class=\"fs32\">{{\r\n                      link.icon\r\n                    }}</mat-icon>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <mat-card-title class=\"fs16\">{{\r\n                      link.title\r\n                    }}</mat-card-title>\r\n                    <mat-card-subtitle>{{ link.content }}</mat-card-subtitle>\r\n                  </div>\r\n                  <div class=\"col-1 pa0 mt-n4\">\r\n                    <button mat-icon-button>\r\n                      <mat-icon (click)=\"removeLink()\">close</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              </mat-card>\r\n            </div>\r\n            <div\r\n              id=\"qmsckeditor_bpmn_connection_panel_003\"\r\n              class=\"col-12 mt24\"\r\n              *ngIf=\"!!link && link.documentType === 1\"\r\n            >\r\n              <div class=\"row\">\r\n                <div class=\"col-10\">\r\n                  <mat-form-field appearance=\"fill\" class=\"col-12\">\r\n                    <mat-label>{{\r\n                      LANG.BPMN.CHOOSE_ANCHOR_IN_TEXT_OPTIONAL\r\n                    }}</mat-label>\r\n                    <mat-label *ngIf=\"isLoadingDocumentAnchor\">\r\n                      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n                    </mat-label>\r\n                    <mat-select\r\n                      [(ngModel)]=\"anchorByName\"\r\n                      name=\"anchorByName\"\r\n                      (ngModelChange)=\"onAnchorByNameChange()\"\r\n                      disableOptionCentering\r\n                    >\r\n                      <mat-option\r\n                        *ngIf=\"\r\n                          documentAnchors === null ||\r\n                          documentAnchors.length == 0\r\n                        \"\r\n                        disabled\r\n                      ></mat-option>\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-form-field>\r\n                </div>\r\n                <div class=\"col-2 mt8 pa0\">\r\n                  <button\r\n                    mat-raised-button\r\n                    [matTooltip]=\"LANG.BPMN.RELOAD_ANCHORS\"\r\n                    (click)=\"reloadAnchors()\"\r\n                    [disabled]=\"isLoadingDocumentAnchor\"\r\n                  >\r\n                    <mat-icon>autorenew</mat-icon>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div\r\n              id=\"qmsckeditor_bpmn_connection_panel_004\"\r\n              class=\"col-12 mt8\"\r\n              *ngIf=\"!!link\"\r\n            >\r\n              <mat-form-field appearance=\"fill\" class=\"col-12\">\r\n                <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\r\n                <mat-select\r\n                  [(ngModel)]=\"selectedTarget\"\r\n                  name=\"selectedTarget\"\r\n                  disableOptionCentering\r\n                >\r\n                  <mat-option\r\n                    *ngFor=\"let target of targets\"\r\n                    [value]=\"target.id\"\r\n                  >\r\n                    {{ target.name }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n          </mat-expansion-panel>\r\n        </mat-tab>\r\n      </mat-tab-group>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                styles: [":host ::ng-deep .qmsckeditor__bpmn__container .bpmn__editor{width:100%;height:600px}:host ::ng-deep .qmsckeditor__bpmn__container #leftpanel{float:left;width:70%;height:550px}:host ::ng-deep .qmsckeditor__bpmn__container #rightpanel{float:right;width:30%;height:550px;border:solid;border-width:0 1px 1px 0;overflow-y:auto}:host ::ng-deep .qmsckeditor__bpmn__container #toolbarpanel{position:relative;top:0;bottom:0;left:0;right:0;margin-bottom:16px;height:50px;width:100%}:host ::ng-deep .qmsckeditor__bpmn__container #paperpanel{position:relative;top:0;bottom:0;left:0;right:0;height:400px;width:100%}:host ::ng-deep .qmsckeditor__bpmn__container #stencilpanel{position:relative;top:0;bottom:0;left:0;right:0;height:150px;width:100%}:host ::ng-deep .qmsckeditor__bpmn__container #toolbar-container{position:relative;top:0;bottom:0;left:0;right:0;width:100%;height:100%}:host ::ng-deep .qmsckeditor__bpmn__container #paper-container{position:relative;top:0;bottom:0;left:0;right:0;width:100%;height:inherit}:host ::ng-deep .qmsckeditor__bpmn__container #inspector-container{position:relative;top:0;right:0;bottom:0;width:100%;background:#fff}:host ::ng-deep .qmsckeditor__bpmn__container #stencil-container{position:absolute;top:0;bottom:0;left:0;right:0;width:1174px;height:inherit}:host ::ng-deep .qmsckeditor__bpmn__container #statusbar-container{position:absolute;left:0;right:0;bottom:0;height:25px}:host ::ng-deep .qmsckeditor__bpmn__container #panel-stencil-container{position:absolute;left:0;right:0;bottom:0;height:150px;overflow-x:auto;overflow-y:hidden;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAgAElEQVR4XnXdi44kxRGF4RluywLvYRvwggHZfv9nApb7mD/VX+lQWo+06u6qvERGRpw4EVnd+/y3v3/58vTn3wcffPD022+/PX388cfX+z53/f3333/64Ycfzr2Xl5en33///emPP/449z766KPT76effjr3u97fL7/8ct17fn4+/d57771zv3Y///zzU9f7/OGHH15zd71x+/v111/PXM3/6tWr079xta9tYzV/f7Wrb7Kaq8/NXbvmq3/3jHU6Pv5q0zrq09y1731tk6N5+2u+5O6+v96TQ5/adC25Go+uWkuy90fO2p4x2xCKTFh/hG6wOvvcYP216CY2OeESvHEa/NNPP70mtrm7wQlIyO73vv42pPcp6JNPPrkU2NjdX+VRItkZVjLUvv4//vjjUYzxa/PZZ589ff/995dSrHE3s/7NVf/aN1f3kzUlM4Dm6M8mdL8+DCW99flu+BlL/xji81dff/fSBE3E6uvMIyyW4mrbAAlTe8IRNCvqXq8tnkAsorFZWgLWvz+b29h3b0x55qlt49cumZq3ja9PSiFHfdYgKDXDMX9tk4f18qbGqm/X2xBG2HpsVpvbvz63qY2/3kfmXtcgXr9+/fT27dvLmyEKb3n+55tvXlg5OGLNNQYZOiYcqEnJ9dGfO4MRyq5vwqeA+rKe9TD3EriNqk1/jW8+41uUDTF/CsmKtz8Lbx2sELSkdJDS2O732r0UR/bdRB7cOvurXXrRts8Ml+FAn2SufzKuAzCO5zdfffuSACyXdVu8+LHuLSY0OCxOuPrWHqwYo3YEgp+rFBbZNbi9WC7+MBQeBaKas3sp3WaTl/LASffhf3M1T39tQPOQHeyCc7Gv9iCR9zdOXsLKbUabyGvIZTyIQy+N0TpODKHYDWRNXAMQ1GK5bhtIyS3YdQvkRZTOCgVjwZqHrGItrvEFyl7he20RiF5TvEVT4gbVlMyjWgNi0vXkyZp73YC/Gy7uJLPrS2qak6fxrIVnsba+jAHyNK/xjf38xZdfH5YFZrgTzE25sBK+1z5cxDY2GNemv4RmtSmzcVu068caHuxrFU7ZmAmrEwzX4lMmJdcO5C5LQyIat40BwRQlFoA0kNJ4ycXIMC8QxDsYMSNdBseToAjDxAa7Xv/6ps8z3z8+f3NYFtflSixIcFr4AR1iBAtHDEBAr4I/AtC4KGztUVIKMragbF6bhi1RTK8t0PhZLAjLAjGtNSJxxT1xp/b9C34wwGRcNCDPbiSY5b2MgKd0HeQxYutMF60Bmzwsay0dg1rLxCwo3sTiRgI1cONgLPrAyD7zQtBivBaQwFgSIbsmllgkKszKQA3SQbm1R3ltQK/eU0jj5Gk8fnWBwfEq9LR1YJAMgrUjL0tKGrM1YWwYIYqMgnf/sCwUdTG/SQX0hE2AlL1KXYVuvgIvl5JuvGgenpIVLRFY61q2ZmMXspLHQkFaimk9jY/3d42nY20gSIwUB+uz8I3koNooLBhGs4PDTUgl2OYTN9Hg1gPqtUnHx0PgoGxxM3KLaQEWyhpRXrgvKcTJl5YupCARjQkeWGaKkbzZhM3kQYYgi7VYg6y6MQq2LNl18VB7G4Uyg25K2gRUALZ+Xmhzkm3ZpODfeq1zY7T2bSam+/yvb/79sjSVS+/gCVAnkCQ4CmAsfgM23k4AQVIw5F28kuVjLQnYvGLaQtayNMwlWQRgNJmBdQ8k8fpeWwdLBWEpbgkHdikWYnWb0IFuRgKejY0MYaTovbUzsqMjeYhAnIVQJiva2CFgwnBJmE0FHSaTLVNoY7GcZTFizkKSOLYVAaUOGTer5WFqVn3G8qytWMFrGVPtbcJWFuig8f2xYimBNa9RbZUDzCELYqcA37jqcaoAVwyRKWM9NuYeVzbQpTwZpmBrQ7g6d+bKYhMP4AWU7rPF91nNKOWoD7G25kW1Ka82sJ4yu2ezutYm3POg1grXeZuNWypNR/IfsteWfujTvcYWCtD9ZWHyrudvv/vvYVktOhfmPpsQdR01a7ebWLENLFDaVjHBSUqTL7Bc95qP0AKtIB88yC1afHJYDNhSamkM3ri50FYTWCa21Hw802awevLVtn/1lSiLMzaUh603ycxR5o07NlcMWvg7QX3d3k6ig7tQ7Ak29mrxoGjbqPXUbouNchy0lEFseTthKQ6lNp4kL0XkCe+CDrweJChY2vzk5N3LpHjo0nVeTuGNBbIRG165xte44sWyO0a88RRLvUonFlXHrE7ShoPXWbBkybXj+k0iE8+y+xNflr9vMKd0ZADcpeQUqTbFOltcm6afZLL7WGAyCK7Na9N5Yq/LsJbeM0yv5GHRzSNX2jyo2NS8/ZENI6VHXqDMYqNQ7EuuIGsLZlmD3KBB6oh1cG+72eRcW6zByLaE3niKfTYExl/Y+Sj0bSm9RaqcSq5A4sYqAV3NSqIqiKpVbVZ/krCHElvPwobYCPPVqARh9xlOn50ZISpIDKNRPmmMxvV5jft4UcVFi5MhyyhRPha8rmbQXci7aByFyy1YAvxlXSycJyqFiyFIAki5X8eW6i/JM5c4Ij6yThDpuhzI2GQER+BuP29BFcFI2VBhKTeYXKquLR1feYgdw9cXl22Y3eUxCShvwTgEQQmlPqqq3FpGzAt7TUG8M+Vs8ARF8pLGkXug0TwYhAniIE8uwdsYyZZn1mBAHqNKDzwWEjTmVgLkUUgHZlc/+cpunMQUHb9obzdAixMtjVhd7rcWSHlN8P9OxQRELA3bEiAxGMrfU76FDrDUxqglgU4MCW5TNCPQLkiTG4CrXsUMcCrXIiuPkTyupynVKMHUpvYMB2qAv9bk/Aesm7fX52++/c85oGK5LJ3isShWR3GsEU+vHWtB9QS+xpJ0qf20gY25nrJz3HMELIV1K9d4ZSwUJLg2t5qWcxoVXNd5Um1b/0JvsW9zsbtnQhbBGbSCXmiycQrr3KNs6HBBFqH2mFM96J7kWFhK2vPnOzRs8UwukxL2eJRHbFLWvClizwqSiwdsiUJQZPEpBLvrXixwD5AWNiSLjmop9e4hcrQUubWqPc9ZbzUHVspobRLm2poxVQ5xzkOwkjqCK1nnngWwUuUBQbDBapfSUGaTU5inMli0BxxYkPZ72iZ2bZ4gOXRkujGPQh0TG3tjBPgBOzwKzNhADE/iuQQAHU+hbZCS/x6ANb5DK17F0+Q/yAXDPZDViaGFbxCE2afR47xjk58WiyG0mC1poMowm2XzJmWWxt7HZwguB0muzTHUogRRVVQYDKZ6FTiTzaatN6k22MTuMUJMrnXUVyZe29bAECnSQZjYhWQgRqCbXpCh5Fa2z4uPrisuCrDwXDCtwTIWcaPrCcXVududkhIA04DdvaLL+4iN9zJcNBNNlHguTQdVtU0R4EU8a20OhFBUkCj/al3N0Z/2vTIo9F/A7rMENZ1tFSI5nCDyJHoUP5trdaxy0bVTOhGQ8XXKEkDRRWcPqBo8bUL3UFF9WO9WQZU1bEyC2FRWJcg11/1cozlAC2jYRNFZuzEXAcxFidbaZ5QWzW3u1tFncWuTwKX2jBRV5v1r5L13jNGmNX7/xMtTQYhloV9L/+DuUsotAyiP3Ckhd0SDFQgTsHlYxyaULJNyKZK17iM6GyAZxuYBYIPiQJFiKCgGz23s1sp4Pa+EBM3B0uvbunrdXIzyN2lltPItBtrrjsFIT1DfwA0CsC341+fNYPFszMqOUyZ4QgspUlxYvF4PITCX5iFbf0IumpNiF6/lR1k9irm0mOyCP5nEOiUX8WNzDYYqHfDEiLhn47A93n2n6Qx9Y++JIZ2pU1oLxJISss1IEVt4TOhlLb3nBRvwls14lEiVeL1jqekeIKnsCsSSMmwH5fa8LQazyuNB2AysTs4tgKZ4FJtxyifkIWJTCpScHgU+anCMZI0LkwRLYta2EaORjHMe0mCE7oYkLiESTHmEIrkmaxBsWSNvAQWycVm7EjW2YrGSzqWrzd8CbCbGo7TCgCReiMWWLlgnaGx+RtjYjKLN2NhFDvDFEI2jsuGx0IUj7xuDrIqc6/3WhzBcDzlI/ets1xZvYem9llRb7ot5CFYmdg7dZ1guj9hFL4tb2s07erWAzdxbfMpaZkRZxjkM5k9r9mQI40Bc1JpASPfBjnFVFiSUm6so09g0Hk7R9dkzFlVhUGyTnz//4qvzqOHWo5Q1GoTV4uAYQRPdNxFsoKspDc+vrQCKRlKicWD5Xregfa5JZZTlJj9MtjkUzgg25qnRdY+MG5d4VGM6T9kj3/SCTfFy6CDL59XGlbNsQXOfN5AsXokhWrcesrx5raPd5fIpYOv7yuCCGbzcZ6QaV/kEDQSb6KijAMxL8oXCOiLYDFuSqR61GbDcw0MSNmXJBmuVlyjBJIN7kAK0iTU8YuHMZkEc0G9zEaCFz3Mesnjn/dJHFqOEIc44Hs0qclkTLOUUjxZiur91I0eiKq9eNw8Q9JzYLQOiXEphSLJgMIem8nwxLnlk9ry3taCq8hJIwhsxTzkYT2WE1oxM2FSos4QBwztBnbvU0SSboWMeTbjYy1rhcINKfoyFiWw82cUK1m0Cqm1BtYO74MxGWiTsh933hBTEkuOeh9T+DofgR5/Nc3i39dW3NfdqjeRXAWk8xcd0SZ8LnYz+Ki5SrnR/lZ01JsD90X0D7zmzYLq8G+bKhtHM9cwMwFkFBQRrjUMmLE/ssFl9ht2sMjnkGTxHGzJiYvUR9BEIaMBYNy9zWMaT6w92VskQQzgAm7Wnn617HQPwsLVYkEDr8gTcYNSASvCEQzsFVUpYT2nRCaxIifXsl4FsMorIg1QRNtaAsWQRY5p/LZZixSJws7kQ613PhP8IRutpU+Q29Xf+X3/50bbffE2OxggxU8G/tRzmVQwRgFmKiXkJmpcwva+zWpJyORYjN4GnayUyZ4FUEa42rEZQZwisHMw1jzH1E6eW4vKy2iAIKXFzEvlHr+aR+dvU1ivvqu+WVFg3GN98hJEtlCXLlvGFgK2OHA9xSnjHOTDFGiiNABTDoySXrAmmauezRUni0E+FPHlM7Wy4hWzC13v8fnMYQZh3GH/LFLxhkz3Wywv6LPGU3C2cLmFBxVFZMiAsEAYSbcxrbRDgqvbi1ego5rCMpAXJPOUh+21dSmmx981ovGIQRoMIYDUpvg1CJ/c7gut9vGupIw+QN2gjL0oJKDC8Tw7Y3pySTl6nHtbn9YTWj0WivGKTE0QosvCGjIB0xddlhidJjmVtuboOu8stTjAHR1yf5W1hsUFXoBTAOpTgUw7WxMotnML63DjONUBKfVnpZuc2Q4Cvf3JhTOpk5LEBDAPFxi43rmizRIGHgVCbcafK4J9exY4tRraey0N8x7CBJGkbyMWNrRk1eAM2EIYFlpZtbJkE06JM1QD1Mu6PVirV116tS0BXYWUYErmtCJNrafqxwMf3GhceWToD8ypWiqWg1v1kNuZm90ouArb+G6uWXGRsdHoyddl1E+a+qqEghnsv3WPJNs/kvnzSdUenlLKPXFoI65MsqRR0vTlYFNbFAkHqPclSOlcUBaPi1cYHFFmpZwlJusAQQeBuOBi18fSwhGMP8HhuOlQFvsexQ73bENyZ0Mv3MQwKaqGsOaXu87VwUonAq2ow6+91H/tkUdw/RbDghTzBnhIYAW/rM0ptDA8htCY02yOggjh2abN4810fyA+l+7yKBdmtJQOUOPLi+mBVa3zNXai48hCWKJ+wKWggK4HbbYoNkDwt/aw99rCnZo3n/KQ5wQ4l27za8Chsy3iCNfgBCWKVOIBVofWMipIWisxLMZuJb7UANPEuHtomobhiDaLEm50r1UfdTWWEx11fRwBPy99ZiAALM7GOXvdBANYsqaofOJAQsiYLcJJncxcCN9vvvkALjnggS+ex7ksy77kRFphsNpES+ywOLvyQazcMmWlef/V3iLdxVVvZfWtD5ZPH76X8pXSyQY8VWlSvcgDQ0oR2fXOMJrOZNhgsspaubwW4/l2T06DHvMCCWHXj9+9dT9EvvCYjqKOAzVmwrT2XWC8AncYR0CEKJLF+8InCt0FyDjFxs3zrafx0c/08UxcohGVbLHZgQ5bWsvQWltLu8AW6arfPBrMUBEKwxj4sQoLFg8ERLFYYtOHN18Io2LhdTyGsd59kWUKhbrYBeUsjjaecA6Jbm8SQ94H47tlgXrCQ5RjB+g5kUWKLWAsEVV2TEa+FJJwSNuH0FyB5luSLd/GOd7ETFs1IKJnleyIQIxQwQRavBnOtL/kysF5Bb+OoR3llqeRXygF7qPDCMiPaXKTNR4BsyJ4YLszazK5dv5e1cAFmKJeFyGyVM2SZtd96zPJqY2yxbnk56EkYCmuB1/nA40s1Nm4Xh3As1WVE+yBDfSit+22Yr8OhoPsIrPXWp/eMxxpY/z7OKlYmS5uBOAgDNkAs7bq8T6Z/vFotC4YLMDJiVgorJXKsFfVEFVltyqUoOQRX3dixsWpzhFP5fJxMbp4gxqCz9dlNXYirP4hiNJ7Vda/1YVRLAmw2I2RwDKM+yiiUrbRkzoX6ZXHJQj+gFCG6vmPIgsCFnVVmzxruX5pnQS0SfcW6Nok8Cc8jviS8QyMunssSyJPqx30f3xdUB9OekSinSDwXNmX1yaUEsxu0UCX+2RwBG2Gh+HBe/sSDKVT1ACwtlGNmmBVCo1ySfnjOecihhahfYSCCkwBG2P2yCdfGyRc6lr5232Oayyoa06ayKseaG4ARh91k8sDfNk18M6YjZvlAaxM/KG6PHmoHzlrbws796KD+G5NsYjLU1gMd4B0CQRpeRdaLVfagHCvawI0dsA5QVVuZbdfWiiR6oMfOgxRujhanoM1jmtNBk3xFNrzcHnywMK8bu9b6wHD3XXcCKB7IaQTvZN0caSvDmxy3KQyFjORbQxJvFFb3vAXTOoZd6UTOQJH7WUww0OYJaDBMhMXLtLJc8CGXAFs8ar2J5TfGPmdrY5y1gLTF9LXSrvu+xv0INWW0LlbJWq3NptCD/AHjIuPmRgLzbvQSCbpFmMBt1x01nDykZ3u5kaDGOlnPHgQR3ito67MAz2uaDBOjFLFJ6WUftUkhHg29s5Nkadyu7z3xB6QsScDIEBAetAq3oRDBGnh3Y6DuIGzZpU0kl0wdexMCQJODLuM7eZVAXtVeHbIGg2EaFiThWoWrQanyLlNpEqSAVd2z+ARrswR1G8vteQpr3HqRvop0cL3xkllZpDFTmJiC7ZlDDMwjl/1gcFue381EJho/XSEdiBEPA/PgWb5HXpt+mGAewv25fNbGorcSi35iM7JaAYt1sswN4MhB905Vc74fIRgLhrwPTKKMxtsyOAtkoaCNrDJ7c9hwRT0JY3M4gxFPKAo7s77GcEZTW0kvPe66ycowwfwaomS5+c7T7w3qK1WUTXFLH534mVDAp9zaZgU8SFbM+lkfyGFJqC42BBJYNbhqwQmfAjyYRxlkaCynjBQIp7vOS9SaGGFtdiOSVVbO67FKHqE92Nv4iqBgWQI8/UrElz4fL/OLck2m7oM5OH6EvWtlgpcNI6QA5ZkqMLfZP8EJbSNQzV0ob2Px4tJCrBi4dJfMmN+yLnlA63E4x8jIvQSkDVEmSubVS/2WZTECHlT7/Y6ikND1+2nrSWr7BhULhqmKbbLvDfrYQgOCs/326XG7R7ljaWjtKWwpLOrbfc8uWUzjgCDekgLIB36SX92IQkAY2BE3GANvl/esF9ok8rPiLRkpxzDAfSgjGXgqqBZ7wDEUEV8YwPWLcsuPF497f+jY4yyaUKhg1/un1MLLeMwW4WDvLlD8uXsLxfvKceObU1xYS7dh5G08Dza0eKRD+Z+cjQtaJY7KK8s2MxKGBM5sCjbKy0AcmELfu8/T3fNsAj2eTJ2CQBJ4YYkOj5YSwvEmx0Z20WtB+50Li0RxU7Izh4St7f6YgONWjGmDNbdvftDGE20oenlZ4PyM0lacPbztPINn3lOBNlwJpXk3XjGu5lKRRjqgDB12nXG0NpXn62FrUJSi+2vi/rbeZHIZNytbVuG5rha2gtvchQjjN4eHtC1Edu91fzAAY7EJydr75KJQRlV/9LL5GAe46xXt3bzJe/fAOk/UXwVDCUeq4IkbxlL7Nlc8QgSSE9k4+iiGSK5SDHZVhz7DvtoIXjZAnqE+hLE06bIg1A9+wnn1p+bcGIESNh8m58E1QZrlwfk1HJ6+1BakyqnQ3cZxOGRsbft8/72rxt7EVOzhkckD3rbYuZ6LCDH6ZLrYYj8cYAGSNvjWq0Gl+lyOi6tqypRBUn03S71/F5CFLdwxCB4obnTdExziBpfP+tWC9uBJAslyWaQSR6+8iLLEK3J3HdQI2ogOIiN+0F3t97dVsDab2NpQ3i0rYbknqLMalqESmkAeGJCVNiEu32KVVSh2oQBGdk8VtQ27B2xubhMFWfGCEYhRLWrPOZTEKWOfUtwKQO+VQXge9rX5yCZ6YHETumVy2jYuBrcsDcyj/3223uYUO1Dp82tAWMuWjH1tOCWpVNpRQvAGCR4qqZ2Na/FcH+tiaWBQDWjjk9yBUrCl2nQNdPqmFAtXgGwukLLewCM8M6B+ps3mTOtZrWe/hi1RRG1B8lJosYgRIgnLthZNrp/4u0MMGlxHtaZ1YcriERusZMECHsvZeJSyWgjv4WFoq2/Lbm0MbKLlzb3fBdkvFN2hrc9iAsXJ+hdGmoOH2QwGx8ozImRjqTF4z2DFh66BtWWUWKgxG+fE6SBrKeUqiAJhKgbG7bAdp4ktpElBzG4qj1hKLSBTEHIh0ev6ZvVLv23GwhTj2Fpbc6iRYTno6sa/zQe23HEv49iwxtyN4S1L8bfksvHNwRY4Y8zp5volhw2yvQcdlETJ8BPb4JL7c3UoLoFQYUW6M/Fw9SUTlL4kgoWizGTYUnby7AmhwyUxy+ZuXGQwvqdY/zYYBIqpWJO18mwBvzElmK0LlNZeGao2Ym7vyW69jdn6Lg/hGcsAFsM9+sgCWA4sl4UKbpsA8g6bev9+trbiS7KgwXAeBGSZZJSUglK5jzYUB45TVsr21WixprFRdWyQ8he2KK/xUHnJoGeKJZsIDX1Zx8bQLcpCqeu5LGfLCnuYFvaBoayALQKG8yQleUSBp2V9rKdFeGhs8ZUVoaab12i/DKcxwQ7qbtPNq5KdXFsXay55Tq/Gl0hSNM8jO0IAZlQcQGvtmmtZleOMxt6HD3lSY2J9188zLRxYpGC3FrvBnEtT8N7b5MniCE0QgXH5v3jC3ZcCL7XcxTlAEtNs2gZvECmGob+1ySv622SWoverA60JvDW/JNrmmndZFwShdMZWW/Wrxur9qRnuzzPhx2iqBcJ87GPdVVkiwRuUlctfGhNzqp8q58asjQniAEIhvoAsGTljEcs81aKd4wH3ERFQ2HWkQpAXOyhP0XTzMp645yq8Au3f0g6PEDfI3ZiMqvddP/16yAGLwpAWljAJDEubpZGwdQMULEYBlSUkQza58S2ApWBJAjGPXZZF4eKTjLy2jUNO+Y++SvutkfXmLcmBaoPbNZrkXQouLvXqOzS932SP7tYImxNh2XXLSw5koV9c7c5qQIvX4k0Ts5wGZoGsHYxYSH1bEKG3GEcBoA3thNuNLRjC8Po7Cu4+r3U9+TxAgTRQjOxdPsNaVw4Kqi1jQnxqD543CRYPNydz30ZgZkuG1hGuH58BPd1s4s0nWlALFuDuD9WJMYqN3JkVecSy/mANLNRHJs5DWL/NNL4zb2UY1YT90qr4BKrEESyGQXR/H96D7etp2tIN+IQo8gkwbSM2D0MWbDp5em2zIAXScZ2p72ACMkU1KIq5VJFFEbjPW+daWGrxjYvFoZUWueyE0OKI8orAvB4JmwXWDaKgt3vyBN5HNpBaW2c8jHHn25hEL+pgS6+lAzxLGYWXYnZIgYSS51//0ycr3MRmSwWEgOvLsHYj1iJ5WgtNoK2ICo5cmisv7RQf6r+/GNRiVZedSzcXtiaLBivds7msmScZR8bPk8QYD38ku3ugFaxZV2vZ/GuhkkH3uimAEk9tD8vy2+8tEpxwScEOhrbAxUIZrOtLH1toAp/6zJyxO4BqHEHS5kqiwA2sV9kVu/YxzP2qwJY8xCvK2h9e82SMk1JJnTOXewbuFFOmLdfiebsWsZPF2xQbAdYRF8z2ipv9cAAB0C+c2ER95iFZDkuRuC2kbIbrPfxcK0EcdgH7oDUIakFYjJxkcRgs8cBeGVIy8/g7/0c5QVwyYnwZpHxjA3p92kTKtD5eLS40Zn+esCcP2CM/osIBTm5ScVEg31KEyZQpggZKhNv7FTUFPAc5ArpXkMhzGMEyKxsNhx1t7jn3fu9kaXBKgNsp1lOClIDlYUKSVHTeeQSrvyez9ROsa8OyHU1QsqdN3F9va31iLJKUrIzqxDW/5ACD/YbICi6JakALA13cmLdgDsYBR/g56mzMDZbi01JnVLwFMITuIxQbYDeg5hFor/hhXKTFsYKxQOjW1AR/8QjjZGi8wVe9sTQbmvwSRoXG+jAEm+EA7NSy6qyEDpNx9gaD5RKdVchCRcKDFaxGgogZ8Ty4vTUzQiYwSxODKJWVCuwphnxeeZEEzEZYC0YnD7Fxzc+C6SNZMKHG9zvybaKqAGPrM4PjIXIo1H/LPK2tPiDrwKb/g0oQWnxWsaS0OvteHDqXMLXb71KgtupGKZGgy9bWctvAxvIMEyHraxOM13zJsqWYraKKP5QKVrJidFP1emNZ/fbsfnOI5m5OQVrb3Ri62dISaBQOrIcR0C1Yvh6Uw2xYCKuicK5IKZt1C+opal0WBPlVBh7QdaeJfq1ByVwJg9JtIHaGMiafCjXysZSTAmzcxjIBt7mU4ilTHENpBWyUll6MB5IkuPejbzKBRZ6DNEgID+XtocMetq5TH1Q7VUIxDBaOhSzMdA9d3DLB/cEDOdEx8N0AAAQmSURBVEljOJNnPQjDHgRRKAOA+0gGi2088sgtxL8W37yNZQ1eIQEv5RkgGwJgTtqLGZhTMos9lJ4e7t+Y6h7PMWZjLVM7nu1ha0U5MaGbdpcy4fUW2bgg/KYMcQYug8Tu85QtZ8DjhU7Hqs1n88CXarLNrZ/DJ4/edA3dZWTNuQ+TIwq8ufbgUzKoZmaNAjDFirf143GqvA7NkhsT5f2eB0OlD+29P/3eoJ668zQht2IB3HYPW3iH74fXZutfrHQ9cc+lxYwWCQ7320U8pXFRUFDlAEjRz+ay8jYqZbqfcvosT2GMzc3bKEnc2C+7khVk8t4tUh74eTwPzSjELUgEmZCqs/FtCEuCaxbKWrGRPoMBUABC1qPg69aCeB76KPkEFXmDTB+bgfWUkWF0b59tMtcmZ/dvczEkCV1j8Dol8ORy3rPGIbdRr9tgzMhQ/40TNoN896TYHMvKjoH2sHVC8QqZq0ROmcDJ2boX16+txYKAZV1yloUXTIy7t2EWuxuKUm5drcXC/uZVFGQU4goPVBYCdylHwsaS1xvlPMocrY8XycPAzeZmPMVYIJfXbU7WmEo3POjI4gfMVCxhvIDO7RNog3GDsC4MY78JZcG9ghRJY4q3sIWg5lxa6cwcluPwHlYT01BeCmCpxmptMncGYNPFvPqKL6DHpkt6W3P3xBQB3ljWaUw1MFR+v0NirQxZIfUvZ+rOFeAmy6uzBa2ryUZB2b0cwFvEE5wdZGAdYsLeV1dj3Y0F5hwX91nRDkRY6JZ+VA1Yog3csgV6Lf4opci9jCHB5eFOIB1RbO4FnuU6PKQ+EsLWJXadJ/wFdYxHwF6aaBflGcoZmBTaamNweBDBktFmrI0F2hi5BeXIiuU5jZvCKS05GMhC2sYVBEGMWqopmG5NbIkIBBBL4b0N7dVXLja+gUEbwuAaR4VCBULFwaZdB1QSQzioxoTqdR2EcF3BfuEO80oRayGNzzIEeEmSjVPXQTvFIQqWZ4C7PNgDessAUe1NylKAsjsispUI9L0Naw21QW8pHgxvLqN+RgeYl7V4ZTiN7yiA14Ork/RW7WWhLcSGbKa+2SthNvhzO6/7DaiuocRZDuXCbHHhXrndHIixgIdlXebkOTJ5AZ5CKFrF1TpZP/jdpFJNzVrJ1Fy1A51qUggQ2CLb9kMYGKONYiTHQxTbDICFcCPX6wS2DEzhKG599tEXSeSW1OsDBsEC62+xm4j6HgoLFqDhP9iTY7QhSjXYY8pnFGBWbEox5FVdAME2xKbyRpvZ/SUtvb/TaPqRqTNAsW435MiUh6CJ8gABbRkPIdaNUTdWT0lLlWG4uCIYsrr62jRWqq18iMW5jnpjOTJfzBBz008wr90+DKc9HJfLQAHQKAdRt1IDU1UGfZTbfUknTwX9m3iTk9c27/8AXjfjDOPCSk8AAAAASUVORK5CYII=\");background-repeat:repeat;transition:all .5s ease-in-out 0s}:host ::ng-deep .qmsckeditor__bpmn__container #panel-stencil-container .mat-expansion-panel-header-title{color:#fff}:host ::ng-deep .qmsckeditor__bpmn__container #panel-stencil-container .joint-theme-default{background:none}:host ::ng-deep .qmsckeditor__bpmn__container #panel-stencil-container .mat-expansion-indicator:after{color:#fff;transform:rotate(-135deg)}:host ::ng-deep .qmsckeditor__bpmn__container #panel-stencil-container .mat-expansion-panel-header{min-width:1224px;max-width:100%}:host ::ng-deep .qmsckeditor__bpmn__container #panel-stencil-container .joint-stencil>.content{width:1200px}:host ::ng-deep .qmsckeditor__bpmn__container .joint-inspector.joint-theme-bpmn .list-item .input-wrapper input{width:70%;float:none}:host ::ng-deep .qmsckeditor__bpmn__container .object-property[data-property$=\"/fill\"]{width:100%}:host ::ng-deep .qmsckeditor__bpmn__container .object-property[data-property$=\"/stroke\"]{width:100%}:host ::ng-deep .qmsckeditor__bpmn__container .field[data-field$=\"/fill\"]{width:100%}:host ::ng-deep .qmsckeditor__bpmn__container .field[data-field$=\"/stroke\"]{width:100%}:host ::ng-deep .qmsckeditor__bpmn__container .joint-inspector.joint-theme-bpmn .list-item:nth-child(odd){background:#ecefff;background:-webkit-gradient(left,#ecefff 0,#fafafa 100%);background:linear-gradient(270deg,#91a1c9 0,#fafafa);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#ECEFFF\",endColorstr=\"#3571b0\",GradientType=0)}:host ::ng-deep .qmsckeditor__bpmn__container .joint-inspector.joint-theme-bpmn .list-item:nth-child(2n){background:#ecefff;background:-webkit-gradient(left,#ecefff 0,#fafafa 100%);background:linear-gradient(270deg,#91a1c9 0,#fafafa);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#ECEFFF\",endColorstr=\"#3571b0\",GradientType=0)}:host ::ng-deep .qmsckeditor__bpmn__container .joint-inspector.joint-theme-bpmn .list-item .list-item:nth-child(odd){background:#eceff7;background:-webkit-gradient(left,#eceff7 0,#eceff7 100%);background:linear-gradient(270deg,#eceff7 0,#eceff7);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#eceff7\",endColorstr=\"#eceff7\",GradientType=0)}:host ::ng-deep .qmsckeditor__bpmn__container .joint-inspector.joint-theme-bpmn .list-item .list-item:nth-child(2n){background:#eceff7;background:-webkit-gradient(left,#eceff7 0,#eceff7 100%);background:linear-gradient(270deg,#eceff7 0,#eceff7);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#eceff7\",endColorstr=\"#eceff7\",GradientType=0)}:host ::ng-deep .qmsckeditor__bpmn__container .joint-inspector.joint-theme-bpmn .list-item{border-radius:10px;box-shadow:0 1px 1px 1px rgba(0,0,0,.2)}"]
             },] }
 ];
 QMSCKEditorBpmnComponent.ctorParameters = () => [
@@ -12642,8 +13371,10 @@ QMSCKEditorBpmnComponent.ctorParameters = () => [
     { type: TranslateLibraryService },
     { type: BpmnService },
     { type: QMSCKEditorBpmnApiService },
+    { type: QMSCKEditorLinkService },
+    { type: QMSCKEditorUploadService },
     { type: MatDialogRef },
-    { type: String, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+    { type: QMSCKEditorBpmnData, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
 ];
 QMSCKEditorBpmnComponent.propDecorators = {
     onMessage: [{ type: HostListener, args: ['window:message', ['$event'],] }]
@@ -14672,6 +15403,7 @@ class QMSCKEditorImageMapComponent extends QMSCKEditorBaseComponent {
         this.anchorText = '';
         //anchorByName = '';
         this.advisoryTitle = '';
+        this.isImageLoading = false;
         this.isUrlProcessing = false;
         this.naturalImageWidth = 0;
         this.naturalImageHeight = 0;
@@ -14803,8 +15535,10 @@ class QMSCKEditorImageMapComponent extends QMSCKEditorBaseComponent {
     }
     ngAfterViewInit() {
         if (this.myImageRef) {
+            this.isImageLoading = true;
             this.imageListeners.push(this.renderer.listen(this.myImageRef.nativeElement, 'load', () => {
                 this.onImageLoad();
+                this.isImageLoading = false;
             }));
         }
         // Avoid drag&drop of the image
@@ -14839,9 +15573,9 @@ class QMSCKEditorImageMapComponent extends QMSCKEditorBaseComponent {
             }
         });
     }
-    parseLinkUrl(url, defaultProtocolName) {
+    parseLinkUrl(url) {
         const protocol = this.protocolRegex.exec(url);
-        if (protocol) {
+        if (!!protocol) {
             this.processedUrl = url.substr(protocol[0].length);
             this.url = this.processedUrl;
             this.selectedProtocol = protocol[0].toLowerCase();
@@ -14854,9 +15588,7 @@ class QMSCKEditorImageMapComponent extends QMSCKEditorBaseComponent {
         else {
             this.processedUrl = url;
             this.url = this.processedUrl;
-            if (!!this.selectedProtocol) {
-                this.selectedProtocol = defaultProtocolName || ProtocolTypeName.http;
-            }
+            this.selectedProtocol = ProtocolTypeName.other;
         }
     }
     onSelectArea(area) {
@@ -15125,8 +15857,8 @@ class QMSCKEditorImageMapComponent extends QMSCKEditorBaseComponent {
 QMSCKEditorImageMapComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-qmsck-imagemap',
-                template: "<div id=\"qmsckeditor-imagemap\" class=\"qmsckeditor qmsckeditor__imagemap__container\">\r\n    <div id=\"qmsckeditor-imagemap-header\">\r\n        <span id=\"qmsckeditor-imagemap-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\r\n            (click)=\"onCloseDialog()\">\r\n            <mat-icon>close</mat-icon>\r\n        </span>\r\n        <div id=\"qmsckeditor-imagemap-header_002\" mat-dialog-content>\r\n            <h2 id=\"qmsckeditor-imagemap_002_001\">\r\n                {{ LANG.QMSCKEDITOR.IMAGE_MAP_PROPERTIES }}\r\n            </h2>\r\n        </div>\r\n    </div>\r\n    <div id=\"qmsckeditor-imagemap-content\">\r\n        <div id=\"qmsckeditor-imagemap-content_001\" class=\"col-12 mt-1 pl-2 pr-2\">\r\n            <mat-expansion-panel id=\"qmsckeditor-imagemap-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\r\n                <div id=\"qmsckeditor-imagemap-panel_001\">\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_001\" class=\"qmsckeditor__imagemap__information\">\r\n                        <form [formGroup]=\"imageMapFormGroup\">\r\n                            <div class=\"row\">\r\n                                <div class=\"col-9\">\r\n                                    <mat-button-toggle-group [(ngModel)]=\"selectedMode\" formControlName=\"modeList\"\r\n                                        (change)=\"onModeChange($event)\">\r\n                                        <mat-button-toggle *ngFor=\"let mode of modes\" [value]=\"mode.id\"\r\n                                            [matTooltip]=\"mode.name\">\r\n                                            <mat-icon color=\"red\" [svgIcon]=\"mode.icon\" aria-hidden=\"true\">\r\n                                            </mat-icon>\r\n                                        </mat-button-toggle>\r\n                                    </mat-button-toggle-group>\r\n                                    <span style=\"margin-left: 15px;\" #myStatus></span>\r\n                                </div>\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ZOOM }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedZoom\" formControlName=\"zoomList\"\r\n                                            (ngModelChange)=\"onZoomChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let zoomType of zoomTypes\" [value]=\"zoomType.id\">\r\n                                                {{ zoomType.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedLinkType\" formControlName=\"linkTypeList\"\r\n                                            (ngModelChange)=\"onLinkTypeChange()\" disableOptionCentering>\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                                <div class=\"col-3\" *ngIf=\"selectedLinkType === 0\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\"\r\n                                            (ngModelChange)=\"onTargetChange()\" disableOptionCentering>\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>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\r\n                                *ngIf=\"selectedLinkType === 1\">\r\n                                <div class=\"col-3\">\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=\"anchorTextList\"\r\n                                            (ngModelChange)=\"onAnchorTextChange()\">\r\n                                            <mat-option *ngFor=\"let editorAnchor of editorAnchors\"\r\n                                                [value]=\"editorAnchor.anchorValue\" disableOptionCentering>\r\n                                                {{ editorAnchor.viewValue }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\r\n                                *ngIf=\"selectedLinkType === 0\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\"\r\n                                            (ngModelChange)=\"onProtocolChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let protocol of protocols\" [value]=\"protocol.id\">\r\n                                                {{ protocol.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-5\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\r\n                                        <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\"\r\n                                            (ngModelChange)=\"onUrlChange()\" (keyup)=\"onUrlKeyup()\" />\r\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('required')\">{{\r\n                                            LANG.QMSCKEDITOR.REQUIRED_URL }}\r\n                                        </mat-error>\r\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('invalidURL')\">{{\r\n                                            LANG.QMSCKEDITOR.INVALID_URL }}</mat-error>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-4\">\r\n                                    <div class=\"row button__groups\">\r\n                                        <div class=\"col-6\">\r\n                                            <button class=\"save\" mat-stroked-button (click)=\"attachment()\">\r\n                                                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\r\n                                            </button>\r\n                                        </div>\r\n                                        <div class=\"col-6\">\r\n                                            <button class=\"save\" mat-stroked-button (click)=\"eHandbook(false, false)\">\r\n                                                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n                                            </button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </form>\r\n                    </div>\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_002\" class=\"qmsckeditor__imagemap__map\">\r\n                        <img #myImage [src]=\"imageMapData.imageUrl\">\r\n                    </div>\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_003\" class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4\">\r\n                        <div class=\"col-4 pr-0\">\r\n                            <button class=\"save\" mat-flat-button (click)=\"removeMap()\">\r\n                                {{ LANG.QMSCKEDITOR.REMOVE_MAP }}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"col-4 pr-0\">\r\n                            <button class=\"save\" mat-flat-button (click)=\"save()\">\r\n                                {{ LANG.QMSCKEDITOR.SAVE }}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"col-4 pl-0\">\r\n                            <button class=\"cancel\" mat-flat-button (click)=\"cancel()\">\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</div>",
-                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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:470px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.qmsckeditor__imagemap__container .mat-form-field{width:100%}.qmsckeditor__imagemap__container .qmsckeditor__imagemap__information{position:relative}.qmsckeditor__imagemap__container .qmsckeditor__imagemap__map{overflow:auto;width:800px;min-height:371px;position:relative;max-height:460px}.qmsckeditor__imagemap__container .mat-button-toggle-checked{border:1px solid #000!important}.qmsckeditor__imagemap__container .hidden{visibility:hidden}"]
+                template: "<div id=\"qmsckeditor-imagemap\" class=\"qmsckeditor qmsckeditor__imagemap__container\">\r\n    <div id=\"qmsckeditor-imagemap-header\">\r\n        <span id=\"qmsckeditor-imagemap-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\r\n            (click)=\"onCloseDialog()\">\r\n            <mat-icon>close</mat-icon>\r\n        </span>\r\n        <div id=\"qmsckeditor-imagemap-header_002\" mat-dialog-content>\r\n            <h2 id=\"qmsckeditor-imagemap_002_001\">\r\n                {{ LANG.QMSCKEDITOR.IMAGE_MAP_PROPERTIES }}\r\n            </h2>\r\n        </div>\r\n    </div>\r\n    <div id=\"qmsckeditor-imagemap-content\">\r\n        <div id=\"qmsckeditor-imagemap-content_001\" class=\"col-12 mt-1 pl-2 pr-2\">\r\n            <mat-expansion-panel id=\"qmsckeditor-imagemap-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\r\n                <div id=\"qmsckeditor-imagemap-panel_001\">\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_001\" class=\"qmsckeditor__imagemap__information\">\r\n                        <form [formGroup]=\"imageMapFormGroup\">\r\n                            <div class=\"row\">\r\n                                <div class=\"col-9\">\r\n                                    <mat-button-toggle-group [(ngModel)]=\"selectedMode\" formControlName=\"modeList\"\r\n                                        (change)=\"onModeChange($event)\">\r\n                                        <mat-button-toggle *ngFor=\"let mode of modes\" [value]=\"mode.id\"\r\n                                            [matTooltip]=\"mode.name\">\r\n                                            <mat-icon color=\"red\" [svgIcon]=\"mode.icon\" aria-hidden=\"true\">\r\n                                            </mat-icon>\r\n                                        </mat-button-toggle>\r\n                                    </mat-button-toggle-group>\r\n                                    <span style=\"margin-left: 15px;\" #myStatus></span>\r\n                                </div>\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ZOOM }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedZoom\" formControlName=\"zoomList\"\r\n                                            (ngModelChange)=\"onZoomChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let zoomType of zoomTypes\" [value]=\"zoomType.id\">\r\n                                                {{ zoomType.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedLinkType\" formControlName=\"linkTypeList\"\r\n                                            (ngModelChange)=\"onLinkTypeChange()\" disableOptionCentering>\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                                <div class=\"col-3\" *ngIf=\"selectedLinkType === 0\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\"\r\n                                            (ngModelChange)=\"onTargetChange()\" disableOptionCentering>\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>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\r\n                                *ngIf=\"selectedLinkType === 1\">\r\n                                <div class=\"col-3\">\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=\"anchorTextList\"\r\n                                            (ngModelChange)=\"onAnchorTextChange()\">\r\n                                            <mat-option *ngFor=\"let editorAnchor of editorAnchors\"\r\n                                                [value]=\"editorAnchor.anchorValue\" disableOptionCentering>\r\n                                                {{ editorAnchor.viewValue }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\r\n                                *ngIf=\"selectedLinkType === 0\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\"\r\n                                            (ngModelChange)=\"onProtocolChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let protocol of protocols\" [value]=\"protocol.id\">\r\n                                                {{ protocol.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-5\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\r\n                                        <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\"\r\n                                            (ngModelChange)=\"onUrlChange()\" (keyup)=\"onUrlKeyup()\" />\r\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('required')\">{{\r\n                                            LANG.QMSCKEDITOR.REQUIRED_URL }}\r\n                                        </mat-error>\r\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('invalidURL')\">{{\r\n                                            LANG.QMSCKEDITOR.INVALID_URL }}</mat-error>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-4\">\r\n                                    <div class=\"row button__groups\">\r\n                                        <div class=\"col-6\">\r\n                                            <button class=\"save\" mat-stroked-button (click)=\"attachment()\">\r\n                                                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\r\n                                            </button>\r\n                                        </div>\r\n                                        <div class=\"col-6\">\r\n                                            <button class=\"save\" mat-stroked-button (click)=\"eHandbook(false, false)\">\r\n                                                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n                                            </button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </form>\r\n                    </div>\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_002\" class=\"qmsckeditor__imagemap__map\">\r\n                        <img #myImage [src]=\"imageMapData.imageUrl\">\r\n                        <mat-spinner diameter=\"40\" mode=\"indeterminate\" *ngIf=\"isImageLoading\"></mat-spinner>\r\n                    </div>\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_003\" class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4\">\r\n                        <div class=\"col-4 pr-0\">\r\n                            <button class=\"save\" mat-flat-button (click)=\"removeMap()\">\r\n                                {{ LANG.QMSCKEDITOR.REMOVE_MAP }}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"col-4 pr-0\">\r\n                            <button class=\"save\" mat-flat-button (click)=\"save()\">\r\n                                {{ LANG.QMSCKEDITOR.SAVE }}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"col-4 pl-0\">\r\n                            <button class=\"cancel\" mat-flat-button (click)=\"cancel()\">\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</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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}::ng-deep .qmsckeditor__imagemap__container .mat-form-field{width:100%}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__information{position:relative}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__map{overflow:auto;width:800px;min-height:371px;position:relative;max-height:460px;display:flex;justify-content:center;align-items:flex-start}::ng-deep .qmsckeditor__imagemap__container .mat-button-toggle-checked{border:1px solid #000!important}::ng-deep .qmsckeditor__imagemap__container .hidden{visibility:hidden}"]
             },] }
 ];
 QMSCKEditorImageMapComponent.ctorParameters = () => [
@@ -15172,7 +15904,7 @@ class QMSCKEditorTooltipComponent extends QMSCKEditorBaseComponent {
                 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');
+        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();
@@ -15208,8 +15940,8 @@ class QMSCKEditorTooltipComponent extends QMSCKEditorBaseComponent {
 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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:470px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.qmsckeditor__tooltip__container .mat-form-field{width:100%}.qmsckeditor__tooltip__container textarea.mat-input-element{min-height:150px}"]
+                template: "<div id=\"qmsckeditor-tooltip\" class=\"qmsckeditor qmsckeditor__tooltip__container\">\r\n  <div id=\"qmsckeditor-tooltip-header\">\r\n    <span id=\"qmsckeditor-tooltip-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\r\n      (click)=\"onCloseDialog()\">\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 id=\"qmsckeditor-tooltip-content\" class=\"qmsckeditor tooltip-content height\">\r\n      <div id=\"qmsckeditor-tooltip-content_001\" class=\"col-12 mt-1 pl-2 pr-2\">\r\n        <mat-expansion-panel id=\"qmsckeditor-tooltip-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\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 matInput [(ngModel)]=\"tooltip.text\" formControlName=\"title\" />\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 class=\"qms-ckeditor\" [(editor)]=\"editor\" [config]=\"editorConfig\" (ready)=\"onReady($event)\"\r\n                  [(ngModel)]=\"tooltip.content\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\r\n                  formControlName=\"content\">\r\n                </ckeditor>\r\n              </div>\r\n            </div>\r\n            <div id=\"qmsckeditor-tooltip-panel_001_003\" class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4\">\r\n              <div class=\"col-6 pr-0\">\r\n                <button class=\"save\" mat-flat-button (click)=\"saveTooltip()\" [disabled]=\"tooltipFormGroup.invalid\">\r\n                  {{ LANG.QMSCKEDITOR.SAVE }}\r\n                </button>\r\n              </div>\r\n              <div class=\"col-6 pl-0\">\r\n                <button class=\"cancel\" mat-flat-button (click)=\"cancelTooltip()\">\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>",
+                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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}.qmsckeditor__tooltip__container .mat-form-field{width:100%}.qmsckeditor__tooltip__container textarea.mat-input-element{min-height:150px}"]
             },] }
 ];
 QMSCKEditorTooltipComponent.ctorParameters = () => [
@@ -15219,15 +15951,49 @@ QMSCKEditorTooltipComponent.ctorParameters = () => [
     { type: QMSCKEditorTooltip, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
 ];
-//import { CKEditor5 } from '@ckeditor/ckeditor5-angular/ckeditor';
+class QMSCKEditorAboutComponent extends QMSCKEditorBaseComponent {
+    constructor(translate, dialogRef, data) {
+        super();
+        this.translate = translate;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.currentVersion = data;
+    }
+    ngOnInit() {
+        this.translate.getLanguageSubject$.pipe(takeUntil(this.ngUnsubcribe)).subscribe((res) => {
+            if (res) {
+                this.LANG = this.translate.getObjectLang(res);
+            }
+        });
+        this.currentYear = new Date().getFullYear();
+    }
+    onCloseDialog() {
+        this.dialogRef.close();
+    }
+}
+QMSCKEditorAboutComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-about-ckeditor',
+                template: "<div id=\"qmsckeditor-about\" class=\"qmsckeditor qmsckeditor__about__container\">\r\n    <div id=\"qmsckeditor-about-header\">\r\n        <span id=\"qmsckeditor-about-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\r\n            (click)=\"onCloseDialog()\">\r\n            <mat-icon>close</mat-icon>\r\n        </span>\r\n        <div id=\"qmsckeditor-about-header_002\" mat-dialog-content>\r\n            <h2 id=\"qmsckeditor-about_002_001\">\r\n                {{ LANG.ABOUT.ABOUT_CKEDITOR }}\r\n            </h2>\r\n        </div>\r\n    </div>\r\n    <div id=\"qmsckeditor-about-content\">\r\n        <div class=\"col-12 qmsckeditor__about__logo__container\">\r\n            <img class=\"qmsckeditor__about__logo\" src=\"../../../../assets/images/ckeditor5.svg\" alt=\"CKEditor logo\">\r\n        </div>\r\n        <div class=\"col-12\">\r\n            <p>{{LANG.ABOUT.CKEDITOR5_VERSION}} {{currentVersion}}.<br><a target=\"_blank\"\r\n                    href=\"https://ckeditor.com/\">https://ckeditor.com</a></p>\r\n            <p>{{LANG.ABOUT.CHECK}} <a target=\"_blank\"\r\n                    href=\"https://ckeditor.com/docs/\">{{LANG.ABOUT.CKEDITOR_USERS_GUIDE}}</a> {{LANG.ABOUT.FOR_HELP}}.\r\n            </p>\r\n            <p>{{LANG.ABOUT.FOR_LICENSING_INFORMATION_PLEASE_VISIT_OUR_WEBSITE}}:<br><a target=\"_blank\"\r\n                    href=\"https://ckeditor.com/legal/ckeditor-oss-license/\">https://ckeditor.com/legal/ckeditor-oss-license/</a>\r\n            </p>\r\n            <p>{{LANG.ABOUT.COPYRIGHT}} 2003-{{currentYear}}, <a target=\"_blank\"\r\n                    href=\"https://cksource.com/\">CKSource</a> - Frederico Knabben.\r\n                <br>{{LANG.ABOUT.ALL_RIGHTS_RESERVED}}.\r\n            </p>\r\n        </div>\r\n        <div class=\"col-12\">\r\n            <button mat-stroked-button class=\"qmsckeditor__about__button\" (click)=\"onCloseDialog()\">\r\n                {{ LANG.QMSCKEDITOR.CLOSE }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>",
+                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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}.qmsckeditor__about__container .qmsckeditor__about__logo__container{display:flex;justify-content:center;margin-bottom:10px}.qmsckeditor__about__container .qmsckeditor__about__logo{height:64px}.qmsckeditor__about__container .qmsckeditor__about__button{float:right}"]
+            },] }
+];
+QMSCKEditorAboutComponent.ctorParameters = () => [
+    { type: TranslateLibraryService },
+    { type: MatDialogRef },
+    { type: String, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
 class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
     /**
      * Constructor
      */
-    constructor(dialog, globalService, qmsCKEditorFullscreenComponent, renderer, elRef) {
+    constructor(dialog, translate, globalService, treeService, qmsCKEditorFullscreenComponent, renderer, elRef) {
         super();
         this.dialog = dialog;
+        this.translate = translate;
         this.globalService = globalService;
+        this.treeService = treeService;
         this.qmsCKEditorFullscreenComponent = qmsCKEditorFullscreenComponent;
         this.renderer = renderer;
         this.elRef = elRef;
@@ -15238,9 +16004,6 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
     }
     onMessage(event) {
         switch (event.data.eventName) {
-            case this.ckEditorEventConst.QMSCK_FULLSCREEN_PLUGIN_MSG:
-                this.fullscreenEventHandling();
-                break;
             case this.ckEditorEventConst.QMSCK_TEMPLATE_PLUGIN_MSG:
                 this.templateEventHandling();
                 break;
@@ -15259,9 +16022,15 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
             case this.ckEditorEventConst.QMSCK_BPMN_PLUGIN_MSG:
                 this.bpmnEventHandling(event.data.value);
                 break;
+            case this.ckEditorEventConst.QMSCK_ABOUT_CKEDITOR_PLUGIN_MSG:
+                this.aboutCKEditorEventHandling(event.data.value);
+                break;
             case this.ckEditorEventConst.QMSCK_TOGGLE_TOOLBAR_MSG:
                 this.toggleToolbarEventHandling();
                 break;
+            case this.ckEditorEventConst.QMSCK_BROWSE_VIDEO_MSG:
+                this.browseVideoEventHandling(event.data.value);
+                break;
             default:
                 break;
         }
@@ -15269,6 +16038,11 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
     ngOnInit() {
         this.name = 'CKEditor custom build';
         this.ckEditor = this.qmsckPlugin.pluginObject;
+        this.translate.getLanguageSubject$.pipe(takeUntil(this.ngUnsubcribe)).subscribe((res) => {
+            if (res) {
+                this.LANG = this.translate.getObjectLang(res);
+            }
+        });
         this.ckeditorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(this.qmsckPlugin.itemToolbar);
         this.globalService.setApiUrl(this.qmsckData.apiUrl);
         if (this.isEnabledMathtypeConfig()) {
@@ -15280,6 +16054,15 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         if (this.isEnabledToggleToolbar()) {
             this.addToggleToolbarConfig();
         }
+        if (this.isEnabledWProofreader()) {
+            this.addWProofreaderConfig();
+        }
+        if (this.isEnabledTOCToolbar()) {
+            this.addToggleTOCConfig();
+        }
+        if (this.isEnabledFullScreenConfig()) {
+            this.addFullScreenConfig();
+        }
     }
     ngOnDestroy() {
         if (this.editorInstance) {
@@ -15297,6 +16080,23 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
             this.renderer.addClass(this.elRef.nativeElement, 'ck-disabled');
         }
     }
+    isEnabledWProofreader() {
+        const pattern = /(wproofreader)/gmi;
+        return !!this.qmsckData.wproofreader
+            && !!this.qmsckData.wproofreader.srcUrl
+            && !!this.qmsckPlugin.itemToolbar
+            && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
+    }
+    addWProofreaderConfig() {
+        const wproofreaderConfig = {
+            wproofreader: Object.assign({}, this.qmsckData.wproofreader)
+        };
+        if (!this.qmsckData.wproofreader.serviceId || this.qmsckData.wproofreader.serviceId.length == 0) {
+            //Fallback value of serviceId property to demo serviceId
+            this.qmsckData.wproofreader.serviceId = '1:KpkvQ2-6KNUj-L1W3u2-C9j0K1-Zv2tY1-CfDOx-WfGRg2-qXtci-YyyE34-j09H42-b0aCt3-d9a';
+        }
+        this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, wproofreaderConfig);
+    }
     isEnabledToggleToolbar() {
         const pattern = /(toggleToolbar)/gmi;
         return !!this.qmsckData.toggleToolbar
@@ -15312,6 +16112,35 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         };
         this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, toggleToolbarConfig);
     }
+    isEnabledFullScreenConfig() {
+        const pattern = /(qmsFullscreen)/gmi;
+        return !!this.qmsckPlugin.itemToolbar
+            && !!this.qmsckData.fullScreenClass
+            && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
+    }
+    addFullScreenConfig() {
+        const fullScreenConfig = {
+            fullScreenConfig: {
+                class: this.qmsckData.fullScreenClass
+            }
+        };
+        this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, fullScreenConfig);
+    }
+    isEnabledTOCToolbar() {
+        const pattern = /(tableOfContents)/gmi;
+        return !!this.qmsckData.tableOfContentHeadings
+            && !!this.qmsckPlugin.itemToolbar
+            && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
+    }
+    addToggleTOCConfig() {
+        const items = this.qmsckData.tableOfContentHeadings.split(',');
+        const tableOfContents = {
+            tableOfContents: {
+                supportedHeadings: items
+            }
+        };
+        this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, tableOfContents);
+    }
     isEnabledTimestampConfig() {
         const pattern = /(timestamp)/gmi;
         return !!this.qmsckData.timestampFormat
@@ -15373,33 +16202,22 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         this.initEditor(editor);
     }
     initEditor(editor) {
+        const imageUploadTypes = editor.config.get('image.upload.types');
+        const maxFileSizeMB = this.qmsckData.maxFileSizeMB;
+        const config = { apiUrl: this.qmsckData.apiUrl, LANG: this.LANG, imageUploadTypes, maxFileSizeMB };
+        editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
+            return new QmsUploadAdapter(loader, config);
+        };
         editor.ui
             .getEditableElement()
             .parentElement.insertBefore(editor.ui.view.toolbar.element, editor.ui.getEditableElement());
-        editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
-            return new UploadAdapter(loader);
-        };
         // Apped Wordcount to CKeditor
         editor.plugins.get('WordCount').on('update', (evt, stats) => {
             // Prints the current content statistics.
             const wordsBox = document.querySelector('.wordcount-content');
-            wordsBox.textContent = `Words: ${stats.words}  / Characters: ${stats.characters}`;
+            wordsBox.textContent = `${this.LANG.QMSCKEDITOR.WORDS}: ${stats.words} / ${this.LANG.QMSCKEDITOR.CHARACTERS}: ${stats.characters}`;
         });
     }
-    /**
-     * Full screen - Restore down
-     */
-    fullscreenEventHandling() {
-        const ck = window.document.getElementById('qmsckeditor');
-        if (ck) {
-            if (!ck.classList.contains('qmsckeditor__fullscreen')) {
-                this.qmsCKEditorFullscreenComponent.showFullScreen();
-            }
-            else {
-                this.qmsCKEditorFullscreenComponent.hideFullScreen();
-            }
-        }
-    }
     /**
      * Add template - Load template
      */
@@ -15482,7 +16300,7 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         data.ckEditor = this.qmsckPlugin.pluginObject;
         const dialogTemplate = this.dialog.open(QMSCKEditorTooltipComponent, {
             width: '650px',
-            height: '550px',
+            height: '555px',
             data,
             disableClose: true
         });
@@ -15532,12 +16350,17 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
       Business Process Model and Notation
     */
     bpmnEventHandling(id) {
+        let data = new QMSCKEditorBpmnData();
+        data.id = id;
+        data.module = this.qmsckData.module;
+        data.entityId = this.qmsckData.entityId;
+        data.editorContent = this.qmsckContentInput;
         const dialogTemplate = this.dialog.open(QMSCKEditorBpmnComponent, {
             width: '89vw',
             maxWidth: '100vw',
             height: '700px',
             maxHeight: '100vw',
-            data: id,
+            data: data,
             disableClose: true
         });
         dialogTemplate
@@ -15552,6 +16375,21 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
             }
         });
     }
+    /*
+     About CKEditor
+   */
+    aboutCKEditorEventHandling(version) {
+        const dialogTemplate = this.dialog.open(QMSCKEditorAboutComponent, {
+            width: '500px',
+            data: version,
+            disableClose: true
+        });
+        dialogTemplate
+            .afterClosed()
+            .pipe(takeUntil(this.ngUnsubcribe))
+            .subscribe((result) => {
+        });
+    }
     /*
       Toolbar toggle
     */
@@ -15610,11 +16448,84 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
             }
         }
     }
+    /**
+     * Browse Video
+     */
+    browseVideoEventHandling(value) {
+        this.treeService
+            .getUploadVideoList()
+            .pipe(takeUntil(this.ngUnsubcribe))
+            .subscribe((response) => {
+            const videos = response || [];
+            const config = {
+                allowSelectFolder: false,
+                areaOfCurrentProcess: '',
+                showCheckBox: true,
+                allowMultipleCheck: value.allowMultipleFiles,
+                onlyCheckBoxForChild: true,
+                moduleId: DataType$2.document,
+                openIcon: 'folder_open',
+                openIconColor: '#1954A9',
+                closeIcon: 'folder_filled',
+                closeIconColor: '#4acaff',
+                itemIcon: 'insert_drive_file',
+                itemIconPath: '',
+                itemIconBase64: '',
+                singleSelectedNode: true,
+                expandAll: true
+            };
+            const data = new PopupData();
+            data.moduleId = 2;
+            data.moduleName = this.LANG.QMSCKEDITOR.SELECT_VIDEO_FROM_ARCHIVE;
+            data.treeData1 = videos.map((item) => {
+                return {
+                    rootId: item.rootId,
+                    parentId: item.parentId,
+                    rootName: item.rootName,
+                    subName: item.subName,
+                    childId: item.childId,
+                    childName: item.childName,
+                    statusId: item.statusId,
+                    displayId: item.displayId,
+                    contentType: item.contentType,
+                    url: item.url
+                };
+            });
+            data.treeData2 = [];
+            data.treeConfig1 = config;
+            const dialogRef = this.dialog.open(RelatedPopupComponent, {
+                minWidth: '450px',
+                maxWidth: '800px',
+                minHeight: '620px',
+                data,
+                panelClass: 'qmsckeditor-browse-video-popup'
+            });
+            setTimeout(() => {
+                const searchBox = window.document.querySelector('.qmsckeditor-browse-video-popup #qmslib_related_popup_search');
+                if (searchBox) {
+                    searchBox.style.display = 'none';
+                }
+            }, 100);
+            dialogRef
+                .afterClosed()
+                .subscribe((result) => {
+                if (result) {
+                    const ids = result.reduce((result, item) => {
+                        result[item.id.toString()] = item.id;
+                        return result;
+                    }, {});
+                    const urls = videos.filter(i => i.childId && !!ids[i.childId.toString()]).map(i => i.url);
+                    const evt = new CustomEvent(this.ckEditorEventConst.QMSCK_BROWSE_VIDEO_RESP, { detail: { urls: urls } });
+                    window.dispatchEvent(evt);
+                }
+            });
+        });
+    }
 }
 QMSCKEditorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-ckeditor',
-                template: "<div id=\"qmsckeditor\" class=\"qmsckeditor_container\">\r\n  <ckeditor class=\"qms-ckeditor\" [tagName]=\"ckTagname\" [(editor)]=\"ckEditor\" [config]=\"ckeditorConfig\"\r\n    (ready)=\"onReady($event)\" [(ngModel)]=\"qmsckContentInput\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\r\n    [disabled]=\"isDisabled\">\r\n  </ckeditor>\r\n  <div class=\"sub-container\">\r\n    <div class=\"\">\r\n      <span>Assistive text</span>\r\n    </div>\r\n    <div class=\"wordcount-content\"></div>\r\n  </div>\r\n</div>",
+                template: "<div id=\"qmsckeditor\" class=\"qmsckeditor_container\">\r\n  <ckeditor class=\"qms-ckeditor\" [tagName]=\"ckTagname\" [(editor)]=\"ckEditor\" [config]=\"ckeditorConfig\"\r\n    (ready)=\"onReady($event)\" [(ngModel)]=\"qmsckContentInput\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\r\n    [disabled]=\"isDisabled\">\r\n  </ckeditor>\r\n  <div class=\"sub-container\">\r\n    <div class=\"\">\r\n      <span>{{LANG.QMSCKEDITOR.ASSISTIVE_TEXT}}</span>\r\n    </div>\r\n    <div class=\"wordcount-content\"></div>\r\n  </div>\r\n</div>\r\n",
                 providers: [
                     QMSCKEditorFullscreenComponent,
                     {
@@ -15630,12 +16541,14 @@ 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,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:470px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}@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)}"]
+                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{overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.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:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}@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{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}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;bottom:0;right:0;overflow:auto;background:#fff}.qmsckeditor__fullscreen .qms-ckeditor{height:98%;display:block;width:100%}.qmsckeditor__fullscreen .ck.ck-editor__main{height:98%}.qmsckeditor__fullscreen .ck.ck-editor__editable{height:inherit}.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 = () => [
     { type: MatDialog },
+    { type: TranslateLibraryService },
     { type: QMSCKEditorGlobalService },
+    { type: QMSCKEditorTreeService },
     { type: QMSCKEditorFullscreenComponent },
     { type: Renderer2 },
     { type: ElementRef }
@@ -15671,7 +16584,8 @@ QMSCKEditorModule.decorators = [
                     QMSCKEditorTooltipComponent,
                     QMSCKEditorImageMapComponent,
                     QMSCKEditorBpmnComponent,
-                    SaveTemplateComponent
+                    SaveTemplateComponent,
+                    QMSCKEditorAboutComponent
                 ],
                 imports: [
                     CKEditorModule$1,
@@ -15697,6 +16611,8 @@ QMSCKEditorModule.decorators = [
                     MatAutocompleteModule,
                     ScrollingModule,
                     HttpClientModule,
+                    MatTabsModule,
+                    MatProgressBarModule,
                     SharedModule
                 ],
                 providers: [],
@@ -15773,98 +16689,196 @@ class QmsAppBarComponent {
         this.onRightIconClickedEvent = new EventEmitter();
     }
     ngOnInit() {
-    }
-    onCancel() {
-        this.onCancelEvent.emit();
-    }
-    onClickLeftFirstIcon() {
-        this.onClickLeftFirstIconEvent.emit();
-    }
-    onConfirm() {
-        this.onConfirmEvent.emit();
-    }
-    onMenuClicked() {
-        this.onMenuClickedEvent.emit();
-    }
-    onRightIconClicked(icon) {
-        this.onRightIconClickedEvent.emit(icon);
+    }
+    onCancel() {
+        this.onCancelEvent.emit();
+    }
+    onClickLeftFirstIcon() {
+        this.onClickLeftFirstIconEvent.emit();
+    }
+    onConfirm() {
+        this.onConfirmEvent.emit();
+    }
+    onMenuClicked() {
+        this.onMenuClickedEvent.emit();
+    }
+    onRightIconClicked(icon) {
+        this.onRightIconClickedEvent.emit(icon);
+    }
+}
+QmsAppBarComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-qms-app-bar',
+                template: "<div class=\"qms-app-bar-container\">\r\n    <mat-toolbar class=\"bar-container\" *ngIf=\"!isNomalType\">\r\n        <span class=\"w-100\">\r\n            <span class=\"col-4 d-inline-flex align-items-lg-center\">\r\n                <div *ngIf=\"hideMenuDropdown\" class=\"border align-self-center\">\r\n                    <div *ngIf=\"logoSvgPath\" class=\"logo-container\">\r\n                        <img [src]=\"logoSvgPath\" alt=\"\" />\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"!hideMenuDropdown\">\r\n                    <button #menu class=\"collapse-icon\" mat-button>\r\n                        <mat-icon class=\"mat-icon-rtl-mirror\" (click)=\"onMenuClicked()\">\r\n                            menu\r\n                        </mat-icon>\r\n                    </button>\r\n                    <img [src]=\"logoSvgPath\" alt=\"\" />\r\n                </div>\r\n                <div class=\"pr-8\"></div>\r\n                <span class=\"content-title\">{{title}}</span>\r\n                <div class=\"spacer\"></div>\r\n            </span>\r\n            <span class=\"align-items-sm-center col-4 d-inline-flex justify-content-center\">\r\n                <div *ngIf=\"imgSvgPath\" class=\"img-container\" [class.bg-transparent]=\"isImgSvgTransparent\">\r\n                    <img [src]=\"imgSvgPath\" alt=\"\" />\r\n                </div>\r\n            </span>\r\n            <span class=\"col-4 d-inline-flex justify-content-end right-icon\">\r\n                <button (click)=\"onRightIconClicked(item.icon)\" *ngFor=\"let item of rightIcons\" class=\"menu-item-icon\"\r\n                    mat-button>\r\n                    <mat-icon *ngIf=\"item.icon == 'notifications_none'\" matBadge=\"{{notifications}}\"\r\n                        matBadgeColor=\"warn\">\r\n                        {{item.icon}}\r\n                    </mat-icon>\r\n                    <mat-icon *ngIf=\"item.icon != 'notifications_none'\"\r\n                        class=\"material-icons-outlined mat-icon-rtl-mirror\">\r\n                        {{item.icon}}\r\n                    </mat-icon>\r\n                    <span class=\"mg-l-3\">{{item.tooltip}}</span>\r\n                </button>\r\n            </span>\r\n        </span>\r\n    </mat-toolbar>\r\n    <mat-toolbar class=\"bar-prv-container\" *ngIf=\"isNomalType\">\r\n        <button class=\"icon-title\" #menu qms-btn-text (click)=\"onClickLeftFirstIcon()\">\r\n            <mat-icon class=\"cusor-pointer\">\r\n                {{leftFirstIcon}}\r\n            </mat-icon>\r\n        </button>\r\n        <span class=\"content-title\">{{title}}</span>\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"right-content\">\r\n            <button qms-btn-text (click)=\"onCancel()\" class=\"cusor-pointer mr-10\" *ngIf=\"cancelTitle\">\r\n                {{cancelTitle}}\r\n            </button>\r\n            <button qms-btn [disabled]=\"disabledConfirmAction\" class=\"cusor-pointer\" (click)=\"onConfirm()\" *ngIf=\"confirmTitle\">\r\n                {{confirmTitle}}\r\n            </button>\r\n        </div>\r\n    </mat-toolbar>\r\n</div>",
+                styles: [".qms-app-bar-container{height:56px}.qms-app-bar-container .spacer{flex:1 1 auto}.qms-app-bar-container .mat-toolbar{background:#00324e;color:#fff;height:56px}.qms-app-bar-container .bar-prv-container{background:#e4e4e4}.qms-app-bar-container .bar-prv-container .close-icon,.qms-app-bar-container .bar-prv-container .title-icon{color:#323232}.qms-app-bar-container .bar-prv-container .right-content button{line-height:16px!important}.qms-app-bar-container .bar-prv-container .right-content .mr-10{margin-right:10px}.qms-app-bar-container .bar-prv-container button:first-child:hover{background-color:rgba(0,0,0,.08)}.qms-app-bar-container .bar-prv-container .icon-title{color:#666;padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%;margin-right:11px}.qms-app-bar-container .bar-prv-container .content-title{font-family:Raleway;font-size:18px;font-style:normal;font-weight:600;line-height:21px;letter-spacing:0;text-align:left;color:#323232}.qms-app-bar-container .bar-container{padding:0!important}.qms-app-bar-container .bar-container .logo-container{background:#fff;padding:12px;height:56px}.qms-app-bar-container .bar-container .img-container{height:40px;background:#fff;padding:2px}.qms-app-bar-container .bar-container .bg-transparent{background:transparent;height:40px;padding:2px}.qms-app-bar-container .bar-container .right-icon button:last-child{min-width:unset!important}.qms-app-bar-container .bar-container ::ng-deep .mat-badge-warn .mat-badge-content{background-color:#9e360f!important}.qms-app-bar-container .bar-container .content-title{font-family:Raleway;font-size:18px;font-style:normal;font-weight:600;line-height:21px;letter-spacing:0;text-align:left;color:#fff}.qms-app-bar-container .pr-8{padding-right:8px}"]
+            },] }
+];
+QmsAppBarComponent.ctorParameters = () => [];
+QmsAppBarComponent.propDecorators = {
+    menu: [{ type: ViewChild, args: ['menu', { static: true },] }],
+    isNomalType: [{ type: Input }],
+    leftFirstIcon: [{ type: Input }],
+    title: [{ type: Input }],
+    cancelTitle: [{ type: Input }],
+    confirmTitle: [{ type: Input }],
+    disabledConfirmAction: [{ type: Input }],
+    onClickLeftFirstIconEvent: [{ type: Output }],
+    onCancelEvent: [{ type: Output }],
+    onConfirmEvent: [{ type: Output }],
+    hideMenuDropdown: [{ type: Input }],
+    logoSvgPath: [{ type: Input }],
+    imgSvgPath: [{ type: Input }],
+    isImgSvgTransparent: [{ type: Input }],
+    rightIcons: [{ type: Input }],
+    notifications: [{ type: Input }],
+    onMenuClickedEvent: [{ type: Output }],
+    onRightIconClickedEvent: [{ type: Output }]
+};
+class QmsAppBarModule {
+}
+QmsAppBarModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    QmsAppBarComponent
+                ],
+                imports: [
+                    CommonModule,
+                    MatIconModule,
+                    MatToolbarModule,
+                    MatButtonModule,
+                    MatTooltipModule,
+                    MatBadgeModule,
+                    QMSButtonModule
+                ],
+                exports: [
+                    QmsAppBarComponent
+                ]
+            },] }
+];
+class ConfirmDialog {
+    constructor() {
+        this.title = '';
+        this.body = '';
+        this.normalTitle = '';
+        this.buttonType = 'normal';
+        this.closeButton = false;
+        this.actionText = 'Confirm';
+        this.cancelText = 'Cancel';
+    }
+}
+class QMSDialogConfig extends MatDialogConfig {
+    constructor(data, width = '', minHeight = '', panelClass = '') {
+        super();
+        this.data = data;
+        this.width = width;
+        this.disableClose = false;
+        this.panelClass = ['qms-dialog'];
+        this.panelClass.push(panelClass);
+        this.autoFocus = false;
+        this.restoreFocus = false;
+    }
+}
+class QMSDrawerContentDirective {
+    constructor(ele) {
+        this.ele = ele;
+    }
+    ngOnInit() {
+        if (this.ele) {
+            this.ele.nativeElement.classList.add('qms-drawer-content');
+        }
+    }
+}
+QMSDrawerContentDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-drawer-content]',
+            },] }
+];
+QMSDrawerContentDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+class QMSDrawerHeaderActionDirective {
+    constructor(ele) {
+        this.ele = ele;
+    }
+    ngOnInit() {
+        if (this.ele) {
+            this.ele.nativeElement.classList.add('qms-drawer-header__action');
+        }
+    }
+}
+QMSDrawerHeaderActionDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-drawer-header-action]',
+            },] }
+];
+QMSDrawerHeaderActionDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+class QMSDrawerHeaderDirective {
+    constructor(ele) {
+        this.ele = ele;
+    }
+    ngOnInit() {
+        if (this.ele) {
+            this.ele.nativeElement.classList.add('qms-drawer-header');
+        }
+    }
+}
+QMSDrawerHeaderDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-drawer-header]',
+            },] }
+];
+QMSDrawerHeaderDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+class QMSDrawerDirective {
+    constructor(ele) {
+        this.ele = ele;
+    }
+    ngOnInit() {
+        if (this.ele) {
+            this.ele.nativeElement.classList.add('qms-drawer');
+        }
     }
 }
-QmsAppBarComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-qms-app-bar',
-                template: "<div class=\"qms-app-bar-container\">\r\n    <mat-toolbar class=\"bar-container\" *ngIf=\"!isNomalType\">\r\n        <span class=\"w-100\">\r\n            <span class=\"col-4 d-inline-flex align-items-lg-center\">\r\n                <div *ngIf=\"hideMenuDropdown\" class=\"border align-self-center\">\r\n                    <div *ngIf=\"logoSvgPath\" class=\"logo-container\">\r\n                        <img [src]=\"logoSvgPath\" alt=\"\" />\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"!hideMenuDropdown\">\r\n                    <button #menu class=\"collapse-icon\" mat-button>\r\n                        <mat-icon class=\"mat-icon-rtl-mirror\" (click)=\"onMenuClicked()\">\r\n                            menu\r\n                        </mat-icon>\r\n                    </button>\r\n                    <img [src]=\"logoSvgPath\" alt=\"\" />\r\n                </div>\r\n                <div class=\"pr-8\"></div>\r\n                <span class=\"content-title\">{{title}}</span>\r\n                <div class=\"spacer\"></div>\r\n            </span>\r\n            <span class=\"align-items-sm-center col-4 d-inline-flex justify-content-center\">\r\n                <div *ngIf=\"imgSvgPath\" class=\"img-container\" [class.bg-transparent]=\"isImgSvgTransparent\">\r\n                    <img [src]=\"imgSvgPath\" alt=\"\" />\r\n                </div>\r\n            </span>\r\n            <span class=\"col-4 d-inline-flex justify-content-end right-icon\">\r\n                <button (click)=\"onRightIconClicked(item.icon)\" *ngFor=\"let item of rightIcons\" class=\"menu-item-icon\"\r\n                    mat-button>\r\n                    <mat-icon *ngIf=\"item.icon == 'notifications_none'\" matBadge=\"{{notifications}}\"\r\n                        matBadgeColor=\"warn\">\r\n                        {{item.icon}}\r\n                    </mat-icon>\r\n                    <mat-icon *ngIf=\"item.icon != 'notifications_none'\"\r\n                        class=\"material-icons-outlined mat-icon-rtl-mirror\">\r\n                        {{item.icon}}\r\n                    </mat-icon>\r\n                    <span class=\"mg-l-3\">{{item.tooltip}}</span>\r\n                </button>\r\n            </span>\r\n        </span>\r\n    </mat-toolbar>\r\n    <mat-toolbar class=\"bar-prv-container\" *ngIf=\"isNomalType\">\r\n        <button class=\"icon-title\" #menu qms-btn-text (click)=\"onClickLeftFirstIcon()\">\r\n            <mat-icon class=\"cusor-pointer\">\r\n                {{leftFirstIcon}}\r\n            </mat-icon>\r\n        </button>\r\n        <span class=\"content-title\">{{title}}</span>\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"right-content\">\r\n            <button qms-btn-text (click)=\"onCancel()\" class=\"cusor-pointer mr-10\" *ngIf=\"cancelTitle\">\r\n                {{cancelTitle}}\r\n            </button>\r\n            <button qms-btn [disabled]=\"disabledConfirmAction\" class=\"cusor-pointer\" (click)=\"onConfirm()\" *ngIf=\"confirmTitle\">\r\n                {{confirmTitle}}\r\n            </button>\r\n        </div>\r\n    </mat-toolbar>\r\n</div>",
-                styles: [".qms-app-bar-container{height:56px}.qms-app-bar-container .spacer{flex:1 1 auto}.qms-app-bar-container .mat-toolbar{background:#00324e;color:#fff;height:56px}.qms-app-bar-container .bar-prv-container{background:#e4e4e4}.qms-app-bar-container .bar-prv-container .close-icon,.qms-app-bar-container .bar-prv-container .title-icon{color:#323232}.qms-app-bar-container .bar-prv-container .right-content button{line-height:16px!important}.qms-app-bar-container .bar-prv-container .right-content .mr-10{margin-right:10px}.qms-app-bar-container .bar-prv-container button:first-child:hover{background-color:rgba(0,0,0,.08)}.qms-app-bar-container .bar-prv-container .icon-title{color:#666;padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%;margin-right:11px}.qms-app-bar-container .bar-prv-container .content-title{font-family:Raleway;font-size:18px;font-style:normal;font-weight:600;line-height:21px;letter-spacing:0;text-align:left;color:#323232}.qms-app-bar-container .bar-container{padding:0!important}.qms-app-bar-container .bar-container .logo-container{background:#fff;padding:12px;height:56px}.qms-app-bar-container .bar-container .img-container{height:40px;background:#fff;padding:2px}.qms-app-bar-container .bar-container .bg-transparent{background:transparent;height:40px;padding:2px}.qms-app-bar-container .bar-container .right-icon button:last-child{min-width:unset!important}.qms-app-bar-container .bar-container ::ng-deep .mat-badge-warn .mat-badge-content{background-color:#9e360f!important}.qms-app-bar-container .bar-container .content-title{font-family:Raleway;font-size:18px;font-style:normal;font-weight:600;line-height:21px;letter-spacing:0;text-align:left;color:#fff}.qms-app-bar-container .pr-8{padding-right:8px}"]
+QMSDrawerDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[qms-drawer]',
             },] }
 ];
-QmsAppBarComponent.ctorParameters = () => [];
-QmsAppBarComponent.propDecorators = {
-    menu: [{ type: ViewChild, args: ['menu', { static: true },] }],
-    isNomalType: [{ type: Input }],
-    leftFirstIcon: [{ type: Input }],
-    title: [{ type: Input }],
-    cancelTitle: [{ type: Input }],
-    confirmTitle: [{ type: Input }],
-    disabledConfirmAction: [{ type: Input }],
-    onClickLeftFirstIconEvent: [{ type: Output }],
-    onCancelEvent: [{ type: Output }],
-    onConfirmEvent: [{ type: Output }],
-    hideMenuDropdown: [{ type: Input }],
-    logoSvgPath: [{ type: Input }],
-    imgSvgPath: [{ type: Input }],
-    isImgSvgTransparent: [{ type: Input }],
-    rightIcons: [{ type: Input }],
-    notifications: [{ type: Input }],
-    onMenuClickedEvent: [{ type: Output }],
-    onRightIconClickedEvent: [{ type: Output }]
-};
+QMSDrawerDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
-class QmsAppBarModule {
+class QMSSideSheetModule {
 }
-QmsAppBarModule.decorators = [
+QMSSideSheetModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [
-                    QmsAppBarComponent
+                    QMSDrawerDirective,
+                    QMSDrawerHeaderDirective,
+                    QMSDrawerContentDirective,
+                    QMSDrawerHeaderActionDirective,
                 ],
                 imports: [
-                    CommonModule,
-                    MatIconModule,
-                    MatToolbarModule,
-                    MatButtonModule,
-                    MatTooltipModule,
-                    MatBadgeModule,
-                    QMSButtonModule
+                    CommonModule
                 ],
                 exports: [
-                    QmsAppBarComponent
+                    QMSDrawerDirective,
+                    QMSDrawerHeaderDirective,
+                    QMSDrawerContentDirective,
+                    QMSDrawerHeaderActionDirective,
                 ]
             },] }
 ];
-class ConfirmDialog {
-    constructor() {
-        this.title = '';
-        this.body = '';
-        this.normalTitle = '';
-        this.buttonType = 'normal';
-        this.closeButton = false;
-        this.actionText = 'Confirm';
-        this.cancelText = 'Cancel';
-    }
-}
-class QMSDialogConfig extends MatDialogConfig {
-    constructor(data, width = '', minHeight = '', panelClass = '') {
-        super();
-        this.data = data;
-        this.width = width;
-        this.disableClose = false;
-        this.panelClass = ['qms-dialog'];
-        this.panelClass.push(panelClass);
-        this.autoFocus = false;
-        this.restoreFocus = false;
-    }
-}
 class QMSTooltipModule {
 }
 QMSTooltipModule.decorators = [
@@ -16145,7 +17159,7 @@ class QmsStatusDropdownComponent {
 QmsStatusDropdownComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-status-dropdown',
-                template: "<div id=\"qms-status-dropdown-container\" class=\"qms-status-dropdown-container {{ getClassType(value) }}\">\r\n    <mat-form-field class=\"material-custom-multiselect height-40\" [style.width]=\"width\">\r\n        <mat-select [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange()\">\r\n            <ng-container *ngIf=\"options\">\r\n                <mat-option *ngFor=\"let option of options\" [value]=\"option.type\">\r\n                    <label class=\"qms-label qms-label-{{ getClassType(option.type) }}\">{{ option.text }}</label>\r\n                </mat-option>\r\n            </ng-container>\r\n        </mat-select>\r\n    </mat-form-field>\r\n</div>",
+                template: "<div\r\n  id=\"qms-status-dropdown-container\"\r\n  class=\"qms-status-dropdown-container {{ getClassType(value) }}\"\r\n>\r\n  <mat-form-field\r\n    class=\"material-custom-multiselect height-40\"\r\n    [style.width]=\"width\"\r\n  >\r\n    <mat-select\r\n      [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"onModelChange()\"\r\n      disableOptionCentering\r\n    >\r\n      <ng-container *ngIf=\"options\">\r\n        <mat-option *ngFor=\"let option of options\" [value]=\"option.type\">\r\n          <label class=\"qms-label qms-label-{{ getClassType(option.type) }}\">{{\r\n            option.text\r\n          }}</label>\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</div>\r\n",
                 styles: [".qms-status-dropdown-container ::ng-deep .material-custom-multiselect{height:40px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect.mat-focused{outline:1px solid #1954a9;border-radius:2px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-flex{border-radius:2px;padding:0 17.5px 0 16px;width:100%;height:40px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-flex .mat-select-min-line{font-family:Open Sans;font-size:14px;font-weight:600;line-height:16px;letter-spacing:1px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-infix{padding-top:0;border-top:10px solid transparent}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-infix .mat-select-value-text{line-height:16px}.qms-status-dropdown-container ::ng-deep .material-custom-multiselect .mat-form-field-wrapper .mat-form-field-underline{display:none}.qms-status-dropdown-container.warning ::ng-deep .material-custom-multiselect .mat-form-field-flex{background-color:#e4cf53}.qms-status-dropdown-container.warning ::ng-deep .material-custom-multiselect .mat-form-field-flex .mat-select-arrow-wrapper .mat-select-arrow{color:rgba(0,0,0,.6)}.qms-status-dropdown-container.warning ::ng-deep .material-custom-multiselect .mat-select-value{color:#323232}.qms-status-dropdown-container.warning ::ng-deep .material-custom-multiselect .mat-select-arrow{color:#323232}.qms-status-dropdown-container.light ::ng-deep .material-custom-multiselect .mat-form-field-flex{background-color:rgba(0,0,0,.1)}.qms-status-dropdown-container.light ::ng-deep .material-custom-multiselect .mat-form-field-flex .mat-select-arrow-wrapper .mat-select-arrow{color:rgba(0,0,0,.6)}.qms-status-dropdown-container.light ::ng-deep .material-custom-multiselect .mat-select-value{color:#323232}.qms-status-dropdown-container.light ::ng-deep .material-custom-multiselect .mat-select-arrow{color:#323232}.qms-status-dropdown-container.danger ::ng-deep .material-custom-multiselect .mat-form-field-flex{background-color:#9e360f}.qms-status-dropdown-container.danger ::ng-deep .material-custom-multiselect .mat-form-field-flex .mat-select-arrow-wrapper .mat-select-arrow{color:hsla(0,0%,100%,.6)}.qms-status-dropdown-container.danger ::ng-deep .material-custom-multiselect .mat-select-value{color:#fff}.qms-status-dropdown-container.danger ::ng-deep .material-custom-multiselect .mat-select-arrow{color:#fff}.qms-status-dropdown-container.success ::ng-deep .material-custom-multiselect .mat-form-field-flex{background-color:#005832}.qms-status-dropdown-container.success ::ng-deep .material-custom-multiselect .mat-select-value{color:#fff}.qms-status-dropdown-container.success ::ng-deep .material-custom-multiselect .mat-select-arrow{color:#fff}.qms-status-dropdown-container.success ::ng-deep .material-custom-multiselect .mat-select-arrow-wrapper .mat-select-arrow{color:hsla(0,0%,100%,.6)}.qms-status-dropdown-container ::ng-deep mat-select .mat-select-value{font-size:14px;line-height:16px;color:#323232;font-weight:500}.qms-status-dropdown-container ::ng-deep mat-select .mat-select-arrow-wrapper{padding-top:17.5px}.qms-status-dropdown-container ::ng-deep mat-select .mat-select-arrow-wrapper .mat-select-arrow{border-top:4px solid}.qms-status-dropdown-container ::ng-deep mat-option .mat-option-custom .mat-pseudo-checkbox-checked:after{top:3px;width:11px;height:5px;border-left:3px solid}"]
             },] }
 ];
@@ -16556,10 +17570,10 @@ class SelectIncludeChildrenPopUpComponent {
         appIconService.registerRiskIcon(iconRegistry, domSanitizer);
     }
     ngAfterViewInit() {
+        this.initTree(this.checkedNodeList);
         if (this.editItem) {
             this.focusEditItem(this.editItem);
         }
-        this.initTree(this.checkedNodeList);
     }
     ngOnDestroy() {
         this.ngUnsubscribe.next();
@@ -16605,16 +17619,60 @@ class SelectIncludeChildrenPopUpComponent {
                 this.selectedOptions.push(element);
                 if (element.type === SelectOptionTypes.IncludeChildren) {
                     this.selectedOptions = this.selectedOptions.concat(element.children);
+                    if (!this.includeChildren) {
+                        this.disabledList = [...this.disabledList, element];
+                        this.disabledList = [...this.disabledList, ...element.children.map(x => {
+                                return {
+                                    id: x.id,
+                                    itemName: x.itemName,
+                                    children: [],
+                                    parentId: x.parentId,
+                                    type: x.type,
+                                    noSelectedChildren: 0,
+                                    noChildren: 0
+                                };
+                            })];
+                    }
+                }
+                else {
+                    if (this.includeChildren) {
+                        this.disabledList = [...this.disabledList, element];
+                    }
                 }
                 this.selectedData = this.mapSelectOptionToTreeNode(this.selectedOptions);
             });
         }
     }
     focusEditItem(selectedOption) {
-        const node = this.dataTrees.toArray()[0].getNodeByIdAndParentId(selectedOption.id, selectedOption.parentId);
+        let parent;
+        let parentList = [];
+        parent = this.treeData.find(x => x.rootId === selectedOption.parentId);
+        if (parent) {
+            parentList.push({
+                id: parent.rootId,
+                itemName: parent.rootName,
+                parentId: parent.parentId,
+                type: SelectOptionTypes.IncludeChildren
+            });
+            parentList = this.getParentLineOfNode(parentList, parent);
+        }
+        let node;
+        if (parentList.length > 0) {
+            parentList.forEach(parent => {
+                node = this.dataTrees.toArray()[0].getNodeByIdAndParentId(parent.id, parent.parentId);
+                if (node) {
+                    this.dataTrees.toArray()[0].expandNode(node);
+                    const element = document.getElementById(`_${node.parentId ? node.parentId.toLowerCase() : ''}_${node.id.toLowerCase()}_${node.level}`);
+                    if (element) {
+                        element.scrollIntoView(false);
+                    }
+                }
+            });
+        }
+        node = this.dataTrees.toArray()[0].getNodeByIdAndParentId(selectedOption.id, selectedOption.parentId);
         if (node) {
             this.dataTrees.toArray()[0].expandNode(node);
-            const element = document.getElementById(`_${node.parentId ? node.parentId : ''}_${node.id}_${node.level}`);
+            const element = document.getElementById(`_${node.parentId ? node.parentId.toLowerCase() : ''}_${node.id.toLowerCase()}_${node.level}`);
             if (element) {
                 element.scrollIntoView(false);
             }
@@ -16625,7 +17683,7 @@ class SelectIncludeChildrenPopUpComponent {
         if (index >= 0) {
             if (this.checkedNodeList[index].type === SelectOptionTypes.IncludeChildren) {
                 this.removeIncludeChildren(item);
-                this.refactorSelectList(item);
+                this.deleteNodeFromSelectedNode(item);
             }
             else {
                 let position = this.selectedOptions.findIndex(x => x.id === item.id && x.parentId === item.parentId);
@@ -16633,8 +17691,9 @@ class SelectIncludeChildrenPopUpComponent {
                     this.selectedOptions.splice(position, 1);
                 }
             }
+            this.focusEditItem(this.checkedNodeList[index]);
+            this.enableSelectedNode(this.checkedNodeList[index]);
             this.checkedNodeList.splice(index, 1);
-            this.enableSelectedNode({ id: item.id, parentId: item.parentId, itemName: item.name, type: SelectOptionTypes.IncludeChildren });
             this.selectedData = this.mapSelectOptionToTreeNode(this.selectedOptions);
         }
     }
@@ -16666,7 +17725,7 @@ class SelectIncludeChildrenPopUpComponent {
                 this.checkedNodeList.push({
                     id: item.id,
                     itemName: item.itemName,
-                    type: SelectOptionTypes.SelectOne,
+                    type: item.type,
                     parentId: item.parentId,
                     children: [],
                     noChildren: 0,
@@ -16675,6 +17734,15 @@ class SelectIncludeChildrenPopUpComponent {
             }
         }
         this.selectedData = this.mapSelectOptionToTreeNode(this.selectedOptions);
+        this.focusEditItem({
+            id: item.id,
+            itemName: item.itemName,
+            type: item.type,
+            parentId: item.parentId,
+            children: [],
+            noChildren: 0,
+            noSelectedChildren: 0
+        });
     }
     getItemIconType(item) {
         if (item.itemIcon && item.itemIcon.length)
@@ -16745,12 +17813,29 @@ class SelectIncludeChildrenPopUpComponent {
         });
     }
     removeIncludeChildren(item) {
+        const index = this.checkedNodeList.findIndex(x => x.id.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === x.parentId.toLowerCase() && x.type === SelectOptionTypes.IncludeChildren);
+        if (index >= 0) {
+            let listChildren = this.checkedNodeList[index].children;
+            const itemIndex = this.selectedOptions.findIndex(node => node.id.toLowerCase() === item.id.toLowerCase() && node.parentId.toLowerCase() === item.parentId.toLowerCase());
+            if (itemIndex >= 0) {
+                this.enableSelectedNode(this.checkedNodeList[index]);
+                this.selectedOptions.splice(itemIndex, 1);
+            }
+            listChildren.forEach(x => {
+                const index = this.selectedOptions.findIndex(node => node.id.toLowerCase() === x.id.toLowerCase() && node.parentId.toLowerCase() === x.parentId.toLowerCase());
+                if (index >= 0) {
+                    this.selectedOptions.splice(index, 1);
+                    this.disabledList = this.disabledList.filter(node => !(x.id.toLowerCase() === node.id.toLowerCase() && x.parentId.toLowerCase() === node.parentId.toLowerCase()));
+                }
+            });
+            return;
+        }
         let listChildren = [];
         listChildren = this.getAllChildrenNodeRecursive(listChildren, item);
         const itemIndex = this.selectedOptions.findIndex(node => node.id === item.id && node.parentId === item.parentId);
         if (itemIndex >= 0) {
-            this.enableSelectedNode(this.selectedOptions[itemIndex]);
             this.selectedOptions.splice(itemIndex, 1);
+            this.disabledList = this.disabledList.filter(x => !(x.id === item.id && x.parentId === item.parentId));
         }
         listChildren.forEach(x => {
             const index = this.selectedOptions.findIndex(node => node.id === x.id && node.parentId === x.parentId);
@@ -16869,7 +17954,7 @@ class SelectIncludeChildrenPopUpComponent {
                     }
                 }
                 this.checkedNodeList = this.checkedNodeList.filter(x => x.id !== node.id || x.parentId !== node.parentId);
-                this.refactorSelectList(node);
+                this.deleteNodeFromSelectedNode(node);
             }
             else {
                 const itemIndex = this.selectedOptions.findIndex(item => node.id === item.id && node.parentId === item.parentId);
@@ -16942,6 +18027,16 @@ class SelectIncludeChildrenPopUpComponent {
         });
     }
     refactorSelectList(node) {
+        this.combineNodes({
+            id: node.id,
+            itemName: node.name,
+            type: SelectOptionTypes.IncludeChildren,
+            parentId: node.parentId
+        });
+    }
+    deleteNodeFromSelectedNode(node) {
+        let children = [];
+        children = this.getAllChildrenNodeRecursive(children, node);
         let parent;
         let parentList = [];
         parent = this.treeData.find(x => x.rootId === node.parentId);
@@ -16954,30 +18049,23 @@ class SelectIncludeChildrenPopUpComponent {
             });
             parentList = this.getParentLineOfNode(parentList, parent);
         }
+        let parentIndex = -1;
         if (parentList.length > 0) {
-            const selectedParentList = parentList.filter(x => this.selectedOptions
-                .findIndex(selectedNode => x.id === selectedNode.id && x.parentId === selectedNode.parentId) >= 0);
-            if (selectedParentList.length > 0) {
-                const highestSelectedNode = selectedParentList[selectedParentList.length - 1];
-                this.combineNodes(highestSelectedNode);
-                this.disabledList = this.disabledList.filter(x => !(x.id === highestSelectedNode.id && x.parentId === highestSelectedNode.parentId));
-            }
-            else {
-                this.combineNodes({
-                    id: node.id,
-                    itemName: node.name,
-                    type: SelectOptionTypes.IncludeChildren,
-                    parentId: node.parentId
-                });
-                this.disabledList = this.disabledList.filter(x => !(x.id === node.id && x.parentId === node.parentId));
-            }
-        }
-        else {
-            this.combineNodes({
-                id: node.id,
-                itemName: node.name,
-                type: SelectOptionTypes.IncludeChildren,
-                parentId: node.parentId
+            parentList.forEach(parent => {
+                parentIndex = this.checkedNodeList.findIndex(x => x.id.toLowerCase() === parent.id.toLowerCase() && x.parentId.toLowerCase() === parent.parentId.toLowerCase());
+                if (parentIndex >= 0) {
+                    const index = this.checkedNodeList[parentIndex].children.findIndex(x => x.id.toLowerCase() === node.id.toLowerCase() && x.parentId.toLowerCase() === node.parentId.toLowerCase());
+                    if (index >= 0) {
+                        this.checkedNodeList[parentIndex].children.splice(index, 1);
+                    }
+                    children.forEach(child => {
+                        const index = this.checkedNodeList[parentIndex].children.findIndex(x => x.id.toLowerCase() === child.id.toLowerCase() && x.parentId.toLowerCase() === child.parentId.toLowerCase());
+                        if (index >= 0) {
+                            this.checkedNodeList[parentIndex].children.splice(index, 1);
+                        }
+                    });
+                    this.checkedNodeList[parentIndex].noSelectedChildren = this.checkedNodeList[parentIndex].children.length;
+                }
             });
         }
     }
@@ -17021,7 +18109,7 @@ class SelectIncludeChildrenPopUpComponent {
             this.checkedNodeList[selectedNodeIndex].children = nodeList;
             this.checkedNodeList[selectedNodeIndex].noChildren = children.length;
             this.checkedNodeList[selectedNodeIndex].noSelectedChildren = nodeList.length;
-            this.checkedNodeList[selectedNodeIndex].type = children.length === 0 ? SelectOptionTypes.SelectOne : SelectOptionTypes.IncludeChildren;
+            this.checkedNodeList[selectedNodeIndex].type = SelectOptionTypes.IncludeChildren;
         }
     }
     getParentLineOfNode(listParent, node) {
@@ -17045,7 +18133,7 @@ class SelectIncludeChildrenPopUpComponent {
                 return {
                     id: x.id,
                     name: x.itemName,
-                    parentId: node.id,
+                    parentId: x.parentId,
                     level: 0,
                     expandable: true,
                     hasChild: true,
@@ -17077,18 +18165,11 @@ class SelectIncludeChildrenPopUpComponent {
         }
     }
     enableSelectedNode(node) {
-        let children = [];
-        children = this.getAllChildrenNodeRecursive(children, {
-            id: node.id,
-            name: node.itemName,
-            parentId: node.parentId,
-            level: 0,
-            expandable: true,
-            hasChild: true,
-            disabled: false
-        });
-        this.disabledList = this.disabledList.filter(x => children.filter(child => (x.id === child.id && x.parentId === child.parentId)).length === 0);
         this.disabledList = this.disabledList.filter(x => !(x.id === node.id && x.parentId === node.parentId));
+        if (node.type === SelectOptionTypes.IncludeChildren) {
+            let children = node.children;
+            this.disabledList = this.disabledList.filter(x => children.filter(child => (x.id === child.id && x.parentId === child.parentId)).length === 0);
+        }
     }
 }
 SelectIncludeChildrenPopUpComponent.decorators = [
@@ -17469,9 +18550,56 @@ class SelectOneDialog {
             children: [],
             parentId: node.parentId
         };
-        this.dataTrees.toArray()[0].todoFolderSelection([treeNode]);
+        setTimeout(() => {
+            this.dataTrees.toArray()[0].todoFolderSelection([treeNode]);
+            this.expandAndScrollToNode(treeNode, node);
+        }, 500);
         return;
     }
+    expandAndScrollToNode(treeNode, node) {
+        let parent;
+        let parentList = [];
+        parent = this.treeData.find(x => x.rootId === node.parentId);
+        if (parent) {
+            parentList.push({
+                id: parent.rootId,
+                itemName: parent.rootName,
+                parentId: parent.parentId
+            });
+            parentList = this.getParentLineOfNode(parentList, parent);
+        }
+        if (parentList.length) {
+            parentList.reverse().forEach(x => {
+                this.focusEditItem(x);
+            });
+        }
+        else {
+            this.focusEditItem(treeNode);
+        }
+    }
+    getParentLineOfNode(listParent, node) {
+        let parent;
+        parent = this.treeData.find(x => x.rootId === node.parentId);
+        if (parent) {
+            listParent = [...listParent, {
+                    id: parent.rootId,
+                    itemName: parent.rootName,
+                    parentId: parent.parentId
+                }];
+            this.getParentLineOfNode(listParent, parent);
+        }
+        return listParent;
+    }
+    focusEditItem(selectedOption) {
+        const node = this.dataTrees.toArray()[0].getNodeByIdAndParentId(selectedOption.id, selectedOption.parentId);
+        if (node) {
+            this.dataTrees.toArray()[0].expandNode(node);
+            const element = document.getElementById(`_${node.parentId ? node.parentId : ''}_${node.id}_${node.level}`);
+            if (element) {
+                element.scrollIntoView(false);
+            }
+        }
+    }
     onCloseClick() {
         this.selectedFolder = null;
         this.dialogRef.close();
@@ -17595,7 +18723,7 @@ class SelectOneDialog {
 SelectOneDialog.decorators = [
     { type: Component, args: [{
                 selector: 'qms-select-one',
-                template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    id=\"qmslib_related_popup_search\"\r\n    class=\"input__field\"\r\n    (click)=\"showSearchResult()\"\r\n  >\r\n    <input\r\n      #name\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n      #autoCompleteInputSearch\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"displayRelated\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      class=\"related-viewport\"\r\n    >\r\n      <div class=\"search__module-result\" *ngIf=\"filteredOptions.length\">\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions()\"\r\n          [value]=\"option\"\r\n          (click)=\"selectItemSearched(option)\"\r\n        >\r\n          <qms-list-item type=\"image-square\">\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              [svgIcon]=\"getNodeIcon(option)\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div\r\n                qms-line\r\n                type=\"caption\"\r\n                qms-tool-tip=\"{{\r\n                  isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                }}\"\r\n                mode=\"dark\"\r\n                *ngIf=\"getParentName(option)\"\r\n              >\r\n                <span #searchItemResult class=\"search__result__parent-name\">\r\n                  {{ option.parentName }}\r\n                </span>\r\n              </div>\r\n              <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                {{ option.itemName }}\r\n              </div>\r\n              <div\r\n                class=\"caption\"\r\n                *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n              >\r\n                <qms-breadcrumb\r\n                  class=\"breadcrumb-containe\"\r\n                  type=\"table\"\r\n                  numDisplayItem=\"1\"\r\n                  [nodes]=\"option.breadcumbs\"\r\n                >\r\n                </qms-breadcrumb>\r\n              </div>\r\n            </div>\r\n            <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n              <span class=\"material-icons-outlined search__description-icon\">\r\n                local_offer\r\n              </span>\r\n              {{ getItemId(option) }}\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar col-12 qmslib_related_popup_content\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <mat-expansion-panel\r\n        hideToggle\r\n        id=\"qmslib_related_popup_common_001\"\r\n        [expanded]=\"isCommonExpanded\"\r\n        (opened)=\"isCommonExpanded = true\"\r\n        (closed)=\"isCommonExpanded = false\"\r\n        class=\"panel-tree\"\r\n      >\r\n        <div id=\"qmslib_related_popup_common_002\">\r\n          <qms-tree\r\n            [treeData]=\"treeData\"\r\n            [treeConfig]=\"treeConfig\"\r\n            [selectedData]=\"selectedData\"\r\n            [selectedRiskData]=\"selectedRiskData\"\r\n            [disabledList]=\"disabledList\"\r\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n            (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n            [expandOnTitleClick]=\"false\"\r\n            [expandToChildNode]=\"expandToChildNode\"\r\n          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n      <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        qms-tool-tip=\"{{\r\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n        }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)\r\n        }}</span>\r\n        <mat-icon (click)=\"removeCheckedNodeList()\">cancel</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button\r\n      *ngIf=\"!checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 7px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 0px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button\r\n      qms-btn-text\r\n      [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
+                template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    id=\"qmslib_related_popup_search\"\r\n    class=\"input__field\"\r\n    (click)=\"showSearchResult()\"\r\n  >\r\n    <input\r\n      #name\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n      #autoCompleteInputSearch\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"displayRelated\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      class=\"related-viewport\"\r\n    >\r\n      <div class=\"search__module-result\" *ngIf=\"filteredOptions.length\">\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions()\"\r\n          [value]=\"option\"\r\n          (click)=\"selectItemSearched(option)\"\r\n        >\r\n          <qms-list-item type=\"image-square\">\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              [svgIcon]=\"getNodeIcon(option)\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div\r\n                qms-line\r\n                type=\"caption\"\r\n                qms-tool-tip=\"{{\r\n                  isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                }}\"\r\n                mode=\"dark\"\r\n                *ngIf=\"getParentName(option)\"\r\n              >\r\n                <span #searchItemResult class=\"search__result__parent-name\">\r\n                  {{ option.parentName }}\r\n                </span>\r\n              </div>\r\n              <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                {{ option.itemName }}\r\n              </div>\r\n              <div\r\n                class=\"caption\"\r\n                *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n              >\r\n                <qms-breadcrumb\r\n                  class=\"breadcrumb-containe\"\r\n                  type=\"table\"\r\n                  numDisplayItem=\"1\"\r\n                  [nodes]=\"option.breadcumbs\"\r\n                >\r\n                </qms-breadcrumb>\r\n              </div>\r\n            </div>\r\n            <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n              <span class=\"material-icons-outlined search__description-icon\">\r\n                local_offer\r\n              </span>\r\n              {{ getItemId(option) }}\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar col-12 qmslib_related_popup_content\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <mat-expansion-panel\r\n        hideToggle\r\n        id=\"qmslib_related_popup_common_001\"\r\n        [expanded]=\"isCommonExpanded\"\r\n        (opened)=\"isCommonExpanded = true\"\r\n        (closed)=\"isCommonExpanded = false\"\r\n        class=\"panel-tree\"\r\n      >\r\n        <div id=\"qmslib_related_popup_common_002\">\r\n          <qms-tree\r\n            [treeData]=\"treeData\"\r\n            [treeConfig]=\"treeConfig\"\r\n            [selectedData]=\"selectedData\"\r\n            [selectedRiskData]=\"selectedRiskData\"\r\n            [disabledList]=\"disabledList\"\r\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n            (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n            [expandOnTitleClick]=\"false\"\r\n            [expandToChildNode]=\"expandToChildNode\"\r\n          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n      <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        qms-tool-tip=\"{{\r\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n        }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)\r\n        }}</span>\r\n        <mat-icon (click)=\"removeCheckedNodeList()\">cancel</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div> -->\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button\r\n      *ngIf=\"!checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 7px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 0px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button\r\n      qms-btn-text\r\n      [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
                 encapsulation: ViewEncapsulation.None,
                 styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-scrollbar.none-scroll-bg::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:#eee}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:#e5e5e5;max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:10.25rem}"]
             },] }
@@ -18006,12 +19134,15 @@ class NewTreeComponent {
     }
     checkDisabledList() {
         // Disable List
+        for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
+            this.treeControl.dataNodes[i].disabled = false;
+        }
         if (this.disabledList.length) {
             for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
                 this.disabledList.forEach(x => {
                     var _a;
-                    if (x.id === this.treeControl.dataNodes[i].id
-                        && (!x.parentId || x.parentId === ((_a = this.treeControl.dataNodes[i]) === null || _a === void 0 ? void 0 : _a.parentId))) {
+                    if (x.id.toLowerCase() === this.treeControl.dataNodes[i].id.toLowerCase()
+                        && (!x.parentId || x.parentId.toLowerCase() === ((_a = this.treeControl.dataNodes[i]) === null || _a === void 0 ? void 0 : _a.parentId.toLowerCase()))) {
                         this.treeControl.dataNodes[i].disabled = true;
                     }
                 });
@@ -19472,6 +20603,7 @@ class QMSNavigationDrawerComponent {
         this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
         this.hoverNode = {};
         this.expandingNodes = [];
+        this.activeNode = '';
         this.hasChild = (_, node) => node.expandable;
         this.dataSource.data = this.treeData;
     }
@@ -19513,6 +20645,7 @@ class QMSNavigationDrawerComponent {
         });
     }
     onClickNode(nodeId) {
+        this.activeNode = nodeId;
         this.onClickNodeEvent.emit(nodeId);
     }
     onOver(node) {
@@ -19769,8 +20902,8 @@ class QMSNavigationDrawerComponent {
 QMSNavigationDrawerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-qms-navigation-drawer',
-                template: "<mat-tree class=\"qms-navigation-drawer-container\" [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" cdkDropList\r\n  (cdkDropListDropped)=\"drop($event)\" [cdkDropListDisabled]=\"dragDropListDisabled\">\r\n  <!-- This is the tree node template for leaf nodes -->\r\n  <mat-tree-node *matTreeNodeDef=\"let node\" routerLinkActive=\"active\" (mouseover)=\"onOver(node)\" matTreeNodePadding\r\n    matTreeNodePaddingIndent=\"34\" cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\"\r\n    (mouseleave)=\"dragHoverEnd()\" (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\"\r\n    [ngClass]=\"{'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node)}\">\r\n    <div *ngIf=\"!node.isReadOnly\" (click)=\"onClickNode(node.id)\"\r\n      class=\"tree-content\">\r\n      <div class=\"span-text\" mode=\"dark\" position=\"below\">{{ node.name }}</div>\r\n      <button tabindex=\"-1\" class=\"button-icon collapse-expand-icon space-icon\" mat-icon-button>\r\n        <img class=\"img-icon\" [src]=\"faIconPath\" alt=\"\" />\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\"\r\n        *ngIf=\"showFavoriteIcon && (node.id === hoverNode.id || node.favorite)\"\r\n        (click)=\"addFavoriteNode(node.id, $event)\" (mouseenter)=\"setHoverFavorite(node.id)\"\r\n        (mouseleave)=\"setHoverFavorite(null)\" [ngClass]=\"{'btn-favorite': (node.id === hoverNode.id && showAddIcon)}\"\r\n        matTooltip=\"{{!node.favorite ? addFavoriteTooltip : deleteFavoriteTooltip}}\" mode=\"dark\" position=\"below\"\r\n        mat-icon-button>\r\n        <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\">\r\n          {{node.favorite && node.id !== hoverFavoriteNodeId && !favoriteMode\r\n          ? 'star_rate_outline' :\r\n          (hoverFavoriteNodeId !== null || (isHover && node.id === hoverNode.id)) && !favoriteMode ? 'star_border' : ''\r\n          }}\r\n          {{node.id === hoverNode.id && favoriteMode && isHover ? 'close' : ''}}\r\n        </mat-icon>\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && showAddIcon\"\r\n        matTooltip=\"{{addNodeTooltip}}\" (click)=\"addNewNode(node.id, $event)\" mode=\"dark\" position=\"below\"\r\n        mat-icon-button>\r\n        <mat-icon class=\"mat-icon-rtl-mirror add-icon\">\r\n          add\r\n        </mat-icon>\r\n      </button>\r\n    </div>\r\n  </mat-tree-node>\r\n  <!-- This is the tree node template for expandable nodes -->\r\n  <mat-tree-node *matTreeNodeDef=\"let node;when: hasChild\" routerLinkActive=\"active\" (mouseover)=\"onOver(node)\"\r\n    matTreeNodePadding matTreeNodePaddingIndent=\"34\" cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\"\r\n    (mouseleave)=\"dragHoverEnd()\" (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\" [ngClass]=\"\r\n    {'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node)}\">\r\n    <div *ngIf=\"!node.isReadOnly\" (click)=\"onClickNode(node.id)\"\r\n      class=\"tree-content\" (keydown)=\"onKeyDownNode($event, node)\">\r\n      <span class=\"span-text\" mode=\"dark\" position=\"below\">{{ node.name }}</span>\r\n      <button tabindex=\"-1\" class=\"button-icon space-icon collapse-expand-icon\" mat-icon-button matTreeNodeToggle\r\n        [attr.aria-label]=\"'toggle ' + node.name\" (click)=\"onClickToggleNode(node)\">\r\n        <mat-icon class=\"mat-icon-rtl-mirror arrow-icon left-icon\">\r\n          {{treeControl.isExpanded(node) ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\"\r\n        matTooltip=\"{{!node.favorite ? addFavoriteTooltip : deleteFavoriteTooltip}}\"\r\n        *ngIf=\"showFavoriteIcon && (node.id === hoverNode.id || node.favorite)\"\r\n        (click)=\"addFavoriteNode(node.id, $event)\"\r\n        [ngClass]=\"{'btn-favorite': (node.id === hoverNode.id && showAddIcon)}\" (mouseenter)=\"setHoverFavorite(node.id)\"\r\n        (mouseleave)=\"setHoverFavorite(null)\" mode=\"dark\" position=\"below\" mat-icon-button>\r\n        <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\">\r\n          {{node.favorite && node.id !== hoverFavoriteNodeId && !favoriteMode\r\n          ? 'star_rate_outline' :\r\n          (hoverFavoriteNodeId !== null || (isHover && node.id === hoverNode.id)) && !favoriteMode ? 'star_border' : ''\r\n          }}\r\n          {{node.id === hoverNode.id && favoriteMode && isHover ? 'close' : ''}}\r\n        </mat-icon>\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && showAddIcon\"\r\n        matTooltip=\"{{addNodeTooltip}}\" (click)=\"addNewNode(node.id, $event)\" mat-icon-button>\r\n        <mat-icon class=\"mat-icon-rtl-mirror add-icon\">\r\n          add\r\n        </mat-icon>\r\n      </button>\r\n    </div>\r\n  </mat-tree-node>\r\n</mat-tree>",
-                styles: ["::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node{width:272px!important;height:48px!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node{min-height:34px;margin:16px 0;padding-right:34px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content{width:100%;position:relative;cursor:pointer}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .arrow-icon{color:#00324e}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .collapse-expand-icon{color:#3e57b7}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .collapse-expand-icon:hover{background:rgba(0,0,0,.08)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .add-icon{color:#3e57b7}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .add-icon:hover{background:rgba(0,0,0,.08)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .left-icon{color:#919191}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node{padding-left:0;position:static;height:32px;left:calc(50% - 216px/2);top:0;font-family:Open Sans;font-style:normal;font-weight:400;font-size:14px;line-height:19px;display:flex;align-items:center;color:#1954a9;flex:none;order:0;align-self:stretch;flex-grow:1}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node ::ng-deep mat-icon{color:#1954a9!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node{position:static;height:32px;left:calc(50% - 176px/2);top:0;font-family:Open Sans;font-style:normal;font-weight:400;font-size:14px;line-height:19px;display:flex;align-items:center;color:#323232;flex:none;order:0;align-self:stretch;flex-grow:1}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .button-icon{width:30px;height:30px;line-height:30px!important;border-radius:50%}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .button-icon:hover{border-radius:50%}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .img-icon{max-height:25px;max-width:25px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .add-icon{position:absolute;top:-2px;right:-34px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .add-icon mat-icon{top:3px;right:3px;border-radius:50%}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .favorite{color:#b13514}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .btn-favorite{right:-5px;color:unset}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .space-icon{position:absolute;top:-5px;left:0}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .span-text{position:relative;overflow:hidden;text-overflow:ellipsis;padding-left:42px;max-width:calc(100% - 56px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .span-text:after{content:\"\";display:block;clear:both}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node:first-child{margin:0}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node:hover{background:#00000014}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node:active{background:#0000001f}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node:active{background:#f2f7fd}"]
+                template: "\r\n<mat-tree class=\"qms-navigation-drawer-container\" [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" cdkDropList\r\n  (cdkDropListDropped)=\"drop($event)\" [cdkDropListDisabled]=\"dragDropListDisabled\">\r\n  <!-- This is the tree node template for leaf nodes -->\r\n  <mat-tree-node *matTreeNodeDef=\"let node\" (mouseover)=\"onOver(node)\" matTreeNodePadding matTreeNodePaddingIndent=\"34\"\r\n    cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\" (mouseleave)=\"dragHoverEnd()\"\r\n    (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\"\r\n    [ngClass]=\"{'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node), 'active': activeNode == node.id}\">\r\n    <div *ngIf=\"!node.isReadOnly\" (click)=\"onClickNode(node.id)\" class=\"tree-content\">\r\n      <button tabindex=\"-1\" class=\"button-icon collapse-expand-icon\" qms-btn-icon>\r\n        <img class=\"img-icon\" [src]=\"faIconPath\" alt=\"\" />\r\n      </button>\r\n      <div class=\"span-text\">{{ node.name }}</div>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\"\r\n        *ngIf=\"showFavoriteIcon && (node.id === hoverNode.id || node.favorite)\"\r\n        (click)=\"addFavoriteNode(node.id, $event)\" (mouseenter)=\"setHoverFavorite(node.id)\"\r\n        (mouseleave)=\"setHoverFavorite(null)\" [ngClass]=\"{'btn-favorite': (node.id === hoverNode.id && isHover)}\"\r\n        qms-tool-tip=\"{{!node.favorite ? addFavoriteTooltip : deleteFavoriteTooltip}}\" mode=\"dark\" position=\"bottom\"\r\n        qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\"\r\n          [class.not-favorite]=\"!node.favorite && node.id === hoverNode.id && isHover\">\r\n          {{node.favorite && node.id === hoverNode.id && isHover ? 'star_rate_outline' : ''}}\r\n          {{!node.favorite && node.id === hoverNode.id && isHover ? 'star_border' : ''}}\r\n        </mat-icon>\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && isHover\"\r\n        qms-tool-tip=\"{{addNodeTooltip}}\" (click)=\"addNewNode(node.id, $event)\" mode=\"dark\" position=\"bottom\" qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">\r\n          add\r\n        </mat-icon>\r\n      </button>\r\n    </div>\r\n  </mat-tree-node>\r\n  <!-- This is the tree node template for expandable nodes -->\r\n  <mat-tree-node *matTreeNodeDef=\"let node;when: hasChild\" (mouseover)=\"onOver(node)\" matTreeNodePadding\r\n    matTreeNodePaddingIndent=\"34\" cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\"\r\n    (mouseleave)=\"dragHoverEnd()\" (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\"\r\n    [ngClass]=\"\r\n    {'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node), 'active': activeNode == node.id}\">\r\n    <div *ngIf=\"!node.isReadOnly\" (click)=\"onClickNode(node.id)\" class=\"tree-content\"\r\n      (keydown)=\"onKeyDownNode($event, node)\">\r\n      <button tabindex=\"-1\" class=\"button-icon collapse-expand-icon\" qms-btn-icon matTreeNodeToggle [attr.aria-label]=\"'toggle ' + node.name\"\r\n        (click)=\"onClickToggleNode(node)\">\r\n        <mat-icon class=\"mat-icon-rtl-mirror arrow-icon left-icon\">\r\n          {{treeControl.isExpanded(node) ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      </button>\r\n      <div class=\"span-text\">{{ node.name }}</div>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\"\r\n        qms-tool-tip=\"{{!node.favorite ? addFavoriteTooltip : deleteFavoriteTooltip}}\"\r\n        *ngIf=\"showFavoriteIcon && (node.id === hoverNode.id || node.favorite)\"\r\n        (click)=\"addFavoriteNode(node.id, $event)\" [ngClass]=\"{'btn-favorite': (node.id === hoverNode.id && isHover)}\"\r\n        (mouseenter)=\"setHoverFavorite(node.id)\" (mouseleave)=\"setHoverFavorite(null)\" mode=\"dark\" position=\"below\"\r\n        qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\"\r\n          [class.not-favorite]=\"!node.favorite && node.id === hoverNode.id && isHover\">\r\n          {{node.favorite && node.id === hoverNode.id && isHover ? 'star_rate_outline' : ''}}\r\n          {{!node.favorite && node.id === hoverNode.id && isHover ? 'star_border' : ''}}\r\n        </mat-icon>\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && isHover\"\r\n        qms-tool-tip=\"{{addNodeTooltip}}\" mode=\"dark\" position=\"bottom\" (click)=\"addNewNode(node.id, $event)\" qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">\r\n          add\r\n        </mat-icon>\r\n      </button>\r\n    </div>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n",
+                styles: ["::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node{width:272px!important;height:48px!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node{min-height:34px;margin:16px 0;padding-right:34px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.active{background-color:#f2f7fd;color:#1954a9!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.active img{filter:opacity(.5) drop-shadow(0 0 0 #1954A9)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content{width:100%;position:relative;cursor:pointer;align-items:center}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .arrow-icon{color:#00324e}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .collapse-expand-icon{color:#3e57b7}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .collapse-expand-icon:hover{background:rgba(0,0,0,.08)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .add-icon:hover{background:rgba(0,0,0,.08)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .left-icon{color:#919191}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node{padding-left:0;position:static;height:32px;left:calc(50% - 216px/2);top:0;font-family:Open Sans;font-style:normal;font-weight:400;font-size:14px;line-height:19px;display:flex;align-items:center;color:#1954a9;flex:none;order:0;align-self:stretch;flex-grow:1}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node ::ng-deep mat-icon{color:#1954a9}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node{position:static;height:32px;left:calc(50% - 176px/2);top:0;font-family:Open Sans;font-style:normal;font-weight:400;font-size:14px;line-height:19px;display:flex;align-items:center;color:#323232;flex:none;order:0;align-self:stretch;flex-grow:1}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content{display:flex}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .button-icon{width:40px;height:40px;line-height:30px!important;border-radius:50%}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .button-icon:hover{border-radius:50%}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .img-icon{max-height:25px;max-width:25px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .add-icon{position:absolute;right:-34px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .add-icon mat-icon{top:3px;right:3px;border-radius:50%;color:rgba(0,0,0,.6)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .favorite{color:#b13514!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .not-favorite{color:rgba(0,0,0,.6)!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .btn-favorite{right:6px;color:unset}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .space-icon{position:absolute;top:-5px;left:0}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .span-text{position:relative;overflow:hidden;text-overflow:ellipsis;padding-left:7px;max-width:calc(100% - 56px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .span-text:after{content:\"\";display:block;clear:both}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node:first-child{margin:0}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node:hover{background:#00000014}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node:active{background:#0000001f}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node:active{background:#f2f7fd}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node:hover .span-text{max-width:calc(100% - 96px)}"]
             },] }
 ];
 QMSNavigationDrawerComponent.ctorParameters = () => [];
@@ -19804,11 +20937,11 @@ QMSNavigationDrawerModule.decorators = [
                     CommonModule,
                     MatIconModule,
                     MatToolbarModule,
-                    MatButtonModule,
                     QMSButtonModule,
                     MatTooltipModule,
                     DragDropModule,
-                    MatTreeModule
+                    MatTreeModule,
+                    QmsAngularModule
                 ],
                 exports: [
                     QMSNavigationDrawerComponent
@@ -19816,6 +20949,201 @@ QMSNavigationDrawerModule.decorators = [
             },] }
 ];
+const DEFAULT_PAGE_SIZE = 50;
+var PaginationSize;
+(function (PaginationSize) {
+    PaginationSize["small"] = "small";
+    PaginationSize["medium"] = "medium";
+    PaginationSize["large"] = "large";
+    PaginationSize["mobile"] = "mobile";
+})(PaginationSize || (PaginationSize = {}));
+class QMSPaginatorComponent {
+    constructor() {
+        this.sizeMedium = 'medium';
+        this.sizeSmall = 'small';
+        this.sizeLarge = 'large';
+        this.sizeMobile = 'mobile';
+        this.size = PaginationSize.large;
+        this._pageSizeOptions = [5, 10, 25, 100];
+        this._pageSize = 10;
+        this._length = 0;
+        this._pageIndex = 0;
+        this.page = new EventEmitter();
+        this.previousPageIndex = 0;
+        this.numberOfPages = [];
+        this.displayNumberOfPages = [];
+    }
+    get pageSizeOptions() {
+        return this._pageSizeOptions;
+    }
+    set pageSizeOptions(value) {
+        this._pageSizeOptions = (value || []).map(p => coerceNumberProperty(p));
+    }
+    get pageSize() {
+        return this._pageSize;
+    }
+    set pageSize(value) {
+        this._pageSize = Math.max(coerceNumberProperty(value), 0);
+        this._updateDisplayedPageSizeOptions();
+    }
+    get length() {
+        return this._length;
+    }
+    set length(value) {
+        this._length = coerceNumberProperty(value);
+    }
+    get pageIndex() {
+        return this._pageIndex + 1;
+    }
+    set pageIndex(value) {
+        this.previousPageIndex = this._pageIndex;
+        this._pageIndex = Math.max(coerceNumberProperty(value - 1), 0);
+        this.displayNumberOfPages = this.pagination(this._pageIndex, this.numberOfPages.length);
+        this._emitPageEvent(this.previousPageIndex);
+    }
+    ngOnInit() {
+        this.getNumberOfPages();
+    }
+    _updateDisplayedPageSizeOptions() {
+        if (!this.pageSize) {
+            this._pageSize =
+                this.pageSizeOptions.length != 0 ? this.pageSizeOptions[0] : DEFAULT_PAGE_SIZE;
+        }
+    }
+    getNumberOfPages() {
+        if (!this.pageSize) {
+            return;
+        }
+        this.numberOfPages = [];
+        const Arrlength = Math.ceil(this._length / this._pageSize);
+        for (let index = 1; index <= Arrlength; index++) {
+            this.numberOfPages.push(index);
+        }
+        this.minPage = 1;
+        this.maxpage = this.numberOfPages.length;
+        this.renderDisplayNumberOfpages();
+    }
+    renderDisplayNumberOfpages() {
+        if (this.numberOfPages.length <= 5) {
+            this.displayNumberOfPages = this.numberOfPages.map(x => x.toString());
+            return;
+        }
+        this.displayNumberOfPages = this.numberOfPages.map(x => x.toString());
+        this.displayNumberOfPages = this.pagination(this.pageIndex, this.numberOfPages.length);
+    }
+    changePage(page) {
+        this.pageIndex = page;
+        this.displayNumberOfPages = this.pagination(parseInt(page.toString()), this.numberOfPages.length);
+    }
+    pagination(c, m) {
+        let current = c;
+        let last = m;
+        let delta = 1;
+        if (current == this.minPage || current == this.maxpage) {
+            delta = 3;
+        }
+        else if (current == (this.minPage + 1)) {
+            delta = 2;
+        }
+        else if (current == (this.maxpage - 1)) {
+            delta = 2;
+        }
+        let left = current - delta;
+        let right = current + delta + 1;
+        let range = [];
+        let rangeWithDots = [];
+        let l;
+        for (let i = 1; i <= last; i++) {
+            if (i == 1 || i == last || i >= left && i < right) {
+                range.push(i);
+            }
+        }
+        for (let i of range) {
+            if (l) {
+                if (i - l !== 1) {
+                    rangeWithDots.push('...');
+                }
+            }
+            rangeWithDots.push(i);
+            l = i;
+        }
+        return rangeWithDots;
+    }
+    nextPage() {
+        this.previousPageIndex = this.pageIndex;
+        this.pageIndex = this.pageIndex + 1;
+        this.displayNumberOfPages = this.pagination(this.pageIndex, this.numberOfPages.length);
+    }
+    previousPage() {
+        this.previousPageIndex = this.pageIndex;
+        this.pageIndex = this.pageIndex - 1;
+        this.displayNumberOfPages = this.pagination(this.pageIndex, this.numberOfPages.length);
+    }
+    _changePageSize(pageSize) {
+        this.previousPageIndex = this.pageIndex;
+        this.pageSize = pageSize;
+        this.pageIndex = 1;
+        this.getNumberOfPages();
+    }
+    _changePageNumber(pageNumber) {
+        this.pageIndex = pageNumber;
+        this.getNumberOfPages();
+    }
+    _emitPageEvent(previousPageIndex) {
+        this.page.emit({
+            previousPageIndex,
+            pageIndex: this._pageIndex,
+            pageSize: this.pageSize,
+            length: this.length,
+        });
+    }
+    ngAfterViewChecked() {
+    }
+}
+QMSPaginatorComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'qms-paginator',
+                template: "<div class=\"qms-paginator-outer-container\"  [class.size-small]='size == sizeSmall'>\r\n  <div class=\"mat-paginator-container\" *ngIf='size != sizeMobile'>\r\n    <div class=\"qms-total-result\">\r\n      <span>Resultater: {{length}}</span>\r\n    </div>\r\n    <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\r\n      <div class=\"qms-pagesize-label\">Rader per side:</div>\r\n      <mat-form-field\r\n        qms-form\r\n        qms-select-input\r\n        class=\"qms-form-page-size\"\r\n        appearance=\"fill\">\r\n        <mat-select\r\n          panelClass=\"qms-select-panel\"\r\n          [value]=\"pageSize\"\r\n          (selectionChange)=\"_changePageSize($event.value)\"\r\n          qms-select>\r\n          <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\r\n            {{ item }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\r\n      <div class=\"qms-pagesize-label \">Hopp til side:</div>\r\n\r\n      <mat-form-field\r\n        qms-form\r\n        qms-select-input\r\n        class=\"qms-form-page-size\"\r\n        appearance=\"fill\">\r\n        <mat-select\r\n          panelClass=\"qms-select-panel\"\r\n          [value]=\"pageIndex\"\r\n          (selectionChange)=\"_changePageNumber($event.value)\"\r\n          qms-select>\r\n          <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\r\n            {{ item }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field> \r\n    </div>\r\n    <div class=\"qms-paginator-range-actions\">\r\n      <button qms-btn-icon color=\"light\"  (click)='previousPage()' [disabled]='minPage == pageIndex'>\r\n        <mat-icon>chevron_left</mat-icon>\r\n      </button>\r\n      <ng-container *ngFor='let item of displayNumberOfPages' >\r\n          <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span>\r\n          <button  *ngIf='item != \"...\"' qms-btn-icon color=\"light\"  \r\n            [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\r\n            (click)='changePage(item)'>\r\n            {{item}}\r\n        </button>\r\n      </ng-container>\r\n     \r\n      <button qms-btn-icon color=\"light\"  (click)='nextPage()' [disabled]='maxpage == pageIndex'>\r\n        <mat-icon>chevron_right</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"mat-paginator-container-mobile\"  *ngIf='size == sizeMobile'>\r\n    <div class=\"mat-paginator-container\"  *ngIf='size == sizeMobile'>\r\n      <div class=\"qms-paginator-range-actions\">\r\n        <button qms-btn-icon color=\"light\"  (click)='previousPage()' [disabled]='minPage == pageIndex'>\r\n          <mat-icon>chevron_left</mat-icon>\r\n        </button>\r\n        <ng-container *ngFor='let item of displayNumberOfPages' >\r\n            <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span>\r\n            <button  *ngIf='item != \"...\"' qms-btn-icon color=\"light\" \r\n              [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\r\n              (click)='changePage(item)'>\r\n              {{item}}\r\n          </button>\r\n        </ng-container>\r\n       \r\n        <button qms-btn-icon color=\"light\"  (click)='nextPage()' [disabled]='maxpage == pageIndex'>\r\n          <mat-icon>chevron_right</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"qms-total-result\">\r\n      <span>Resultater: {{length}}</span>\r\n    </div>\r\n    <div style=\"display: flex;\">\r\n      <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\r\n        <div class=\"qms-pagesize-label\">Rader per side:</div>\r\n        <mat-form-field\r\n          qms-form\r\n          qms-select-input\r\n          class=\"qms-form-page-size\"\r\n          appearance=\"fill\">\r\n          <mat-select\r\n            panelClass=\"qms-select-panel\"\r\n            [value]=\"pageSize\"\r\n            (selectionChange)=\"_changePageSize($event.value)\"\r\n            qms-select>\r\n            <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\r\n              {{ item }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\r\n        <div class=\"qms-pagesize-label \">Hopp til side:</div>\r\n        <mat-form-field\r\n          qms-form\r\n          qms-select-input\r\n          class=\"qms-form-page-size\"\r\n          appearance=\"fill\">\r\n          <mat-select\r\n            panelClass=\"qms-select-panel\"\r\n            [value]=\"pageIndex\"\r\n            (selectionChange)=\"_changePageNumber($event.value)\"\r\n            qms-select>\r\n            <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\r\n              {{ item }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field> \r\n      </div>\r\n    </div>\r\n   \r\n  </div>\r\n \r\n</div>",
+                host: {
+                    'class': 'qms-paginator'
+                },
+                styles: ["::ng-deep .qms-paginator{display:block}::ng-deep .qms-paginator .qms-paginator-outer-container{display:flex}::ng-deep .qms-paginator .mat-paginator-container{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;flex-wrap:wrap-reverse;width:100%}::ng-deep .qms-paginator .mat-paginator-container .mat-select .mat-select-arrow{margin-top:17.5px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-right:24px;margin-bottom:15px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:400;font-size:14px;line-height:22px;color:rgba(0,0,0,.6)}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size{margin-right:24px;display:flex;align-items:baseline}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-pagesize-label{font-weight:400;font-size:14px;line-height:22px;color:#323232;font-family:Open Sans;font-style:normal;margin-right:8px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-form-page-size .mat-form-field-flex{width:80px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .jump-page .mat-form-field-wrapper .mat-form-field-flex{width:55px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .mat-form-field-flex{height:40px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .mat-form-field-flex .mat-form-field-infix{padding-top:7px;border-top:0;padding-bottom:0}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions{display:flex;align-items:center;margin-bottom:15px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .selected{background-color:#e5eefb;color:#1954a9}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .qms-3d{font-weight:600;font-size:14px;line-height:22px;color:#323232}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions button:not(.qms-btn-disabled) .qms-btn-icon-wrapper{color:#323232}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-select .mat-select-arrow{margin-top:17.5px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-total-result{margin-bottom:16px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-total-result span{font-family:Open Sans;font-style:normal;font-weight:400;font-size:12px;line-height:16px;color:rgba(0,0,0,.6)}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-paginator-container{justify-content:flex-start}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size{margin-right:24px;display:flex;align-items:baseline}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-pagesize-label{font-weight:400;font-size:12px;line-height:22px;color:#323232;font-family:Open Sans;font-style:normal;margin-right:8px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-form-page-size .mat-form-field-flex{width:80px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .jump-page .mat-form-field-wrapper .mat-form-field-flex{width:55px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .mat-form-field-flex{height:40px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .mat-form-field-flex .mat-form-field-infix{padding-top:7px;border-top:0;padding-bottom:0}::ng-deep .qms-paginator .size-small .mat-paginator-container{justify-content:flex-start}"]
+            },] }
+];
+QMSPaginatorComponent.ctorParameters = () => [];
+QMSPaginatorComponent.propDecorators = {
+    size: [{ type: Input }],
+    pageSizeOptions: [{ type: Input }],
+    pageSize: [{ type: Input }],
+    length: [{ type: Input }],
+    pageIndex: [{ type: Input }],
+    page: [{ type: Output }]
+};
+class QmsPaginatorModule {
+}
+QmsPaginatorModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    QMSPaginatorComponent
+                ],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    MatIconModule,
+                    MatTooltipModule,
+                    MatSelectModule,
+                    MatButtonModule,
+                    QmsAngularModule,
+                    QMSButtonModule,
+                ],
+                exports: [
+                    QMSPaginatorComponent
+                ]
+            },] }
+];
 /*
  * Public API Surface of qms-angular
  */
@@ -19824,5 +21152,5 @@ QMSNavigationDrawerModule.decorators = [
  * Generated bundle index. Do not edit.
  */
-export { AutocompleteOffDirective, BREADCRUMB_DROPDOWN_ICON, BUTTON_TOGGLE_DEFAULT_OPTIONS, BUTTON_TOGGLE_GROUP, BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, BannerType, BpmnService, BreadcrumbNode, ButtonToggleChange, CHECKLIST_ICON, CKEditorEventConst, CKEditorModule, CdkDetailRowDirective, ConfirmDialog, DEPARTMENT_FOLDER_ICON, DEPARTMENT_FOLDER_OUTLINED_ICON, DEVIATION_ICON, DOCUMENT_DEPARTMENT_ICON, DOCUMENT_ENTERPRISE_ICON, DOCUMENT_ICON, DOCUMENT_LOCAL_ICON, DOCUMENT_REGIONAL_ICON, DataType$1 as DataType, DateFormatPipe, DocumentNodeType$1 as DocumentNodeType, ENTERPRISE_FOLDER_ICON, ENTERPRISE_FOLDER_OUTLINED_ICON, FileErrorType, FlowChartConst, FlowchartViewMode, ISelectOneItem, InformationCoverItem, KEYBOARD_DOWN_ICON, KEYBOARD_UP_ICON, LOCAL_FOLDER_ICON, LOCAL_FOLDER_OUTLINED_ICON, LinkAnchor, LinkType, MarginDirective, ModuleType$1 as ModuleType, NORMAL_FOLDER_ICON, NORMAL_FOLDER_OUTLINED_ICON, NewTreeComponent, NewTreeModel, PROCESS_AREA_ICON, PROCESS_AREA_OUTLINED_ICON, PROCESS_ICON, PopupData, ProtocolType, ProtocolTypeName, QMSAnchor, QMSAppBar, QMSAppIconModule, QMSAttachmentListDirective, QMSBreadcrumb, QMSBreadcrumbDirectionIconDirective, QMSBreadcrumbItemDirective, QMSBreadcrumbModule, QMSButton, QMSButtonIcon, QMSButtonModule, QMSButtonToggle, QMSButtonToggleGroup, QMSCKEditorBaseComponent, QMSCKEditorBaseService, QMSCKEditorBpmn, QMSCKEditorBpmnApiService, QMSCKEditorBpmnComponent, QMSCKEditorBpmnTemplate, QMSCKEditorComponent, QMSCKEditorConfirmComponent, QMSCKEditorData, QMSCKEditorDialogData, QMSCKEditorDocumentType, QMSCKEditorFullscreenComponent, QMSCKEditorGlobalService, QMSCKEditorInjector, QMSCKEditorLinkAnchorDocument, QMSCKEditorLinkComponent, QMSCKEditorLinkService, QMSCKEditorLoadTemplateComponent, QMSCKEditorModule, QMSCKEditorPlugin, QMSCKEditorRelatedComponent, QMSCKEditorRelation, QMSCKEditorTemplate, QMSCKEditorTemplateService, QMSCKEditorToastService, QMSCKEditorTreeComponent, QMSCKEdtiorInputData, QMSChipBodyDirective, QMSChipInputChipListDirective, QMSChipInputDirective, QMSChipInputSelectDropWDownDirective, QMSChipInputSelectFieldDirective, QMSChipInputSelectTriggerDirective, QMSCollapseGroupDirective, 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, QMSNavigationDrawerComponent, QMSNavigationDrawerModule, QMSNewTreeModule, QMSProcessDocumentItem, QMSRangeSliderDirective, QMSRangeSliderLockUpDirective, QMSRelatedGlobalService, QMSRelatedModule, QMSRichText, QMSRichTextModule, QMSRowDetailDirective, QMSRowExpandDirective, QMSScrolableAttachmentListDirective, QMSScrollbarDirective, QMSSearchFieldDirective, QMSSelectGlobalService, QMSSelectIncludeChildrenModule, QMSSelectOneGlobalService, QMSSelectOneModule, QMSSelectProcessDocumentGlobalService, QMSSelectProcessDocumentModule, QMSSnackbarConfig, QMSSuffixDirective, QMSSuffixFieldDirective, QMSTabGroupAdvancedDirective, QMSTabGroupDirective, QMSTabLabelDirective, QMSTabModule, QMSTableAction, QMSTableActionBlock, QMSTableChildrenDirective, QMSTableDirective, QMSTableExpandDirective, QMSTableModule, QMSTextBlockDirective, QMSTextBlockLine, QMSToolTipComponent, QMSToolTipRendererDirective, QMSTooltipImageDirective, QMSTooltipModule, QMSTreeModule, QMSUploadFileErrorDialog, QMSUploadFileErrorDialogModule, QMSUploadingFileGuard, QmsAngularComponent, QmsAngularModule, QmsAngularService, QmsAppBarComponent, QmsAppBarModule, QmsBadgesComponent, QmsBadgesModule, QmsBannerComponent, QmsBannerConfirmButton, QmsBannerConfirmButtonClick, QmsBannerConfirmComponent, QmsBannerConfirmModule, QmsBannerContent, QmsBannerLoadingComponent, QmsBannerLoadingModule, QmsBannerModule, QmsReportContentPortraitComponent, QmsReportCoverPortraitComponent, QmsReportModule, QmsStatusDropdownComponent, QmsStatusDropdownModule, QmsStatusDropdownOption, QmsStatusDropdownType, QmsStepperComponent, QmsStepperModule, REGIONAL_FOLDER_ICON, REGIONAL_FOLDER_OUTLINED_ICON, RISK_ICON, RelatedConst, RelatedContentComponent, RelatedItemType, RelatedListComponent, RelatedPopupComponent, Result, RiskAnalysis, RiskAnalysisComponent, RiskDanger, RiskListComponent, RiskResult, RiskResultComponent, SaveTemplateComponent, ScrollToSelectedDirective, SelectConst, SelectDialog, SelectIncludeChildrenPopUpComponent, SelectOneDialog, SelectOnePopupData, SelectOption, SelectOptionTypes, SelectPopupData, SelectProcessDocumentPopupComponent, SelectProcessDocumentPopupData, SelectedOption, SelectedProcessDocumentItem, SharedModule, ShowHideSearchResultConst, SideNav, SideNavItem, SidenavComponent, TargetType, TargetTypeName, TranslateLibraryService, TreeComponent, TreeConfig, TreeFlatNode, TreeModel, TreeNode$1 as TreeNode, UploadErrorData, en, mixinColor, no, notExceedSize, requiredFileType, ɵ1, SharedMaterialModule as ɵa, QMSCKEditorTemplateComponent as ɵb, QMSCKEditorTreeService as ɵc, LinkAttachmentComponent as ɵd, QMSCKEditorTooltipComponent as ɵe, QMSCKEditorTooltip as ɵf, QMSCKEditorImageMapComponent as ɵg, QMSCKEditorImageMap as ɵh };
+export { AutocompleteOffDirective, BREADCRUMB_DROPDOWN_ICON, BUTTON_TOGGLE_DEFAULT_OPTIONS, BUTTON_TOGGLE_GROUP, BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, BannerType, BpmnService, BreadcrumbNode, ButtonToggleChange, CHECKLIST_ICON, CKEditorEventConst, CKEditorModule, CdkDetailRowDirective, ConfirmDialog, DEPARTMENT_FOLDER_ICON, DEPARTMENT_FOLDER_OUTLINED_ICON, DEVIATION_ICON, DOCUMENT_DEPARTMENT_ICON, DOCUMENT_ENTERPRISE_ICON, DOCUMENT_ICON, DOCUMENT_LOCAL_ICON, DOCUMENT_REGIONAL_ICON, DataType$1 as DataType, DateFormatPipe, DocumentNodeType$1 as DocumentNodeType, ENTERPRISE_FOLDER_ICON, ENTERPRISE_FOLDER_OUTLINED_ICON, FileErrorType, FlowChartConst, FlowchartViewMode, ISelectOneItem, InformationCoverItem, KEYBOARD_DOWN_ICON, KEYBOARD_UP_ICON, LOCAL_FOLDER_ICON, LOCAL_FOLDER_OUTLINED_ICON, LinkAnchor, LinkType, MarginDirective, ModuleType$1 as ModuleType, NORMAL_FOLDER_ICON, NORMAL_FOLDER_OUTLINED_ICON, NewTreeComponent, NewTreeModel, PROCESS_AREA_ICON, PROCESS_AREA_OUTLINED_ICON, PROCESS_ICON, PaginationSize, PopupData, ProtocolType, ProtocolTypeName, QMSAnchor, QMSAppBar, QMSAppIconModule, QMSAttachmentListDirective, QMSBreadcrumb, QMSBreadcrumbDirectionIconDirective, QMSBreadcrumbItemDirective, QMSBreadcrumbModule, QMSButton, QMSButtonIcon, QMSButtonModule, QMSButtonToggle, QMSButtonToggleGroup, QMSCKEditorBaseComponent, QMSCKEditorBaseService, QMSCKEditorBpmn, QMSCKEditorBpmnApiService, QMSCKEditorBpmnComponent, QMSCKEditorBpmnTemplate, QMSCKEditorComponent, QMSCKEditorConfirmComponent, QMSCKEditorData, QMSCKEditorDialogData, QMSCKEditorDocumentType, QMSCKEditorFlowchart, QMSCKEditorFlowchartService, QMSCKEditorFullscreenComponent, QMSCKEditorGlobalService, QMSCKEditorInjector, QMSCKEditorLinkAnchorDocument, QMSCKEditorLinkComponent, QMSCKEditorLinkService, QMSCKEditorLoadTemplateComponent, QMSCKEditorModule, QMSCKEditorPlugin, QMSCKEditorRelatedComponent, QMSCKEditorRelation, QMSCKEditorSaveAsTemplate, QMSCKEditorTemplate, QMSCKEditorTemplateService, QMSCKEditorToastService, QMSCKEditorTreeComponent, QMSCKEdtiorInputData, QMSChipBodyDirective, QMSChipInputChipListDirective, QMSChipInputDirective, QMSChipInputSelectDropWDownDirective, QMSChipInputSelectFieldDirective, QMSChipInputSelectTriggerDirective, QMSCollapseGroupDirective, 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, QMSNavigationDrawerComponent, QMSNavigationDrawerModule, QMSNewTreeModule, QMSPaginatorComponent, QMSProcessDocumentItem, QMSRangeSliderDirective, QMSRangeSliderLockUpDirective, QMSRangeSliderModule, QMSRelatedGlobalService, QMSRelatedModule, QMSRichText, QMSRichTextModule, QMSRowDetailDirective, QMSScrolableAttachmentListDirective, QMSScrollbarDirective, QMSSearchFieldDirective, QMSSelectGlobalService, QMSSelectIncludeChildrenModule, QMSSelectOneGlobalService, QMSSelectOneModule, QMSSelectProcessDocumentGlobalService, QMSSelectProcessDocumentModule, QMSSideSheetModule, QMSSnackbarConfig, QMSSuffixDirective, QMSSuffixFieldDirective, QMSTabGroupAdvancedDirective, QMSTabGroupDirective, QMSTabLabelDirective, QMSTabModule, QMSTableAction, QMSTableActionBlock, QMSTableChildrenDirective, QMSTableDirective, QMSTableModule, QMSTextBlockDirective, QMSTextBlockLine, QMSToolTipComponent, QMSToolTipRendererDirective, QMSTooltipImageDirective, QMSTooltipModule, QMSTreeModule, QMSUploadFileErrorDialog, QMSUploadFileErrorDialogModule, QMSUploadingFileGuard, QmsAngularComponent, QmsAngularModule, QmsAngularService, QmsAppBarComponent, QmsAppBarModule, QmsBadgesComponent, QmsBadgesModule, QmsBannerComponent, QmsBannerConfirmButton, QmsBannerConfirmButtonClick, QmsBannerConfirmComponent, QmsBannerConfirmModule, QmsBannerContent, QmsBannerLoadingComponent, QmsBannerLoadingModule, QmsBannerModule, QmsPaginatorModule, QmsReportContentPortraitComponent, QmsReportCoverPortraitComponent, QmsReportModule, QmsStatusDropdownComponent, QmsStatusDropdownModule, QmsStatusDropdownOption, QmsStatusDropdownType, QmsStepperComponent, QmsStepperModule, REGIONAL_FOLDER_ICON, REGIONAL_FOLDER_OUTLINED_ICON, RISK_ICON, RelatedConst, RelatedContentComponent, RelatedItemType, RelatedListComponent, RelatedPopupComponent, Result, RiskAnalysis, RiskAnalysisComponent, RiskDanger, RiskListComponent, RiskResult, RiskResultComponent, SaveTemplateComponent, ScrollToSelectedDirective, SelectConst, SelectDialog, SelectIncludeChildrenPopUpComponent, SelectOneDialog, SelectOnePopupData, SelectOption, SelectOptionTypes, SelectPopupData, SelectProcessDocumentPopupComponent, SelectProcessDocumentPopupData, SelectedOption, SelectedProcessDocumentItem, SharedModule, ShowHideSearchResultConst, SideNav, SideNavItem, SidenavComponent, TargetType, TargetTypeName, TranslateLibraryService, TreeComponent, TreeConfig, TreeFlatNode, TreeModel, TreeNode$1 as TreeNode, UploadErrorData, en, mixinColor, no, notExceedSize, requiredFileType, ɵ1, QMSTableRowDirective as ɵa, SharedMaterialModule as ɵb, QMSCKEditorTreeService as ɵc, QMSCKEditorTemplateComponent as ɵd, LinkAttachmentComponent as ɵe, QMSCKEditorTooltipComponent as ɵf, QMSCKEditorTooltip as ɵg, QMSCKEditorImageMapComponent as ɵh, QMSCKEditorImageMap as ɵi, QMSCKEditorUploadService as ɵj, QMSCKEditorBpmnData as ɵk, QMSCKEditorAboutComponent as ɵl };
 //# sourceMappingURL=qms-angular.js.map