qms-angular 1.0.66 → 1.0.71

package/bundles/qms-angular.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/radio'), require('@angular/material/dialog'), require('rxjs/operators'), require('@angular/material/autocomplete'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/material/input'), require('@angular/material/card'), require('@angular/material/icon'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/button'), require('@angular/material/core'), require('@angular/material/progress-spinner'), require('@angular/cdk/a11y'), require('@angular/cdk/coercion'), require('@angular/cdk/collections'), require('@angular/platform-browser/animations'), require('moment'), require('@angular/material/list'), require('@angular/material/expansion'), require('@angular/cdk/scrolling'), require('@angular/material/sidenav'), require('@angular/material/tree'), require('@angular/material/menu'), require('@angular/platform-browser'), require('@angular/cdk/tree'), require('@angular/common/http'), require('@angular/material/button-toggle'), require('@angular/material/select'), require('@angular/material/snack-bar'), require('@ckeditor/ckeditor5-angular'), require('jquery'), require('lodash'), require('@angular/material/tooltip'), require('@angular/material/badge'), require('@angular/material/toolbar'), require('@angular/cdk/stepper'), require('@angular/material/stepper'), require('@angular/material/slide-toggle'), require('projects/qms-angular/src/public-api')) :
-    typeof define === 'function' && define.amd ? define('qms-angular', ['exports', '@angular/core', 'rxjs', '@angular/common', '@angular/forms', '@angular/material/form-field', '@angular/material/radio', '@angular/material/dialog', 'rxjs/operators', '@angular/material/autocomplete', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/material/input', '@angular/material/card', '@angular/material/icon', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/button', '@angular/material/core', '@angular/material/progress-spinner', '@angular/cdk/a11y', '@angular/cdk/coercion', '@angular/cdk/collections', '@angular/platform-browser/animations', 'moment', '@angular/material/list', '@angular/material/expansion', '@angular/cdk/scrolling', '@angular/material/sidenav', '@angular/material/tree', '@angular/material/menu', '@angular/platform-browser', '@angular/cdk/tree', '@angular/common/http', '@angular/material/button-toggle', '@angular/material/select', '@angular/material/snack-bar', '@ckeditor/ckeditor5-angular', 'jquery', 'lodash', '@angular/material/tooltip', '@angular/material/badge', '@angular/material/toolbar', '@angular/cdk/stepper', '@angular/material/stepper', '@angular/material/slide-toggle', 'projects/qms-angular/src/public-api'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['qms-angular'] = {}, global.ng.core, global.rxjs, global.ng.common, global.ng.forms, global.ng.material.formField, global.ng.material.radio, global.ng.material.dialog, global.rxjs.operators, global.ng.material.autocomplete, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.material.input, global.ng.material.card, global.ng.material.icon, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.button, global.ng.material.core, global.ng.material.progressSpinner, global.ng.cdk.a11y, global.ng.cdk.coercion, global.ng.cdk.collections, global.ng.platformBrowser.animations, global.moment, global.ng.material.list, global.ng.material.expansion, global.ng.cdk.scrolling, global.ng.material.sidenav, global.ng.material.tree, global.ng.material.menu, global.ng.platformBrowser, global.ng.cdk.tree, global.ng.common.http, global.ng.material.buttonToggle, global.ng.material.select, global.ng.material.snackBar, global.ckeditor5Angular, global.$$1, global._, global.ng.material.tooltip, global.ng.material.badge, global.ng.material.toolbar, global.ng.cdk.stepper, global.ng.material.stepper, global.ng.material.slideToggle, global.publicApi));
-}(this, (function (exports, i0, rxjs, common, forms, formField, radio, dialog, operators, autocomplete, overlay, portal, input, card, icon, checkbox, chips, button, core, progressSpinner, a11y, coercion, collections, animations, moment, list, expansion, scrolling, sidenav, tree$1, menu, platformBrowser, tree, i1, buttonToggle, select, snackBar, ckeditor5Angular, $$1, _, tooltip, badge, toolbar, stepper$1, stepper, slideToggle, publicApi) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/radio'), require('@angular/material/dialog'), require('rxjs/operators'), require('@angular/material/autocomplete'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/material/input'), require('@angular/material/card'), require('@angular/material/icon'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/button'), require('@angular/material/core'), require('@angular/material/progress-spinner'), require('@angular/cdk/a11y'), require('@angular/cdk/coercion'), require('@angular/cdk/collections'), require('@angular/platform-browser/animations'), require('moment'), require('@angular/material/list'), require('@angular/material/expansion'), require('@angular/cdk/scrolling'), require('@angular/material/sidenav'), require('@angular/material/tree'), require('@angular/material/menu'), require('@angular/platform-browser'), require('@angular/cdk/tree'), require('@angular/common/http'), require('@angular/material/button-toggle'), require('@angular/material/select'), require('@angular/material/snack-bar'), require('@ckeditor/ckeditor5-angular'), require('jquery'), require('lodash'), require('@angular/material/tooltip'), require('@angular/material/tabs'), require('@angular/material/badge'), require('@angular/material/toolbar'), require('@angular/cdk/stepper'), require('@angular/material/stepper'), require('@angular/material/slide-toggle'), require('@angular/cdk/drag-drop')) :
+    typeof define === 'function' && define.amd ? define('qms-angular', ['exports', '@angular/core', 'rxjs', '@angular/common', '@angular/forms', '@angular/material/form-field', '@angular/material/radio', '@angular/material/dialog', 'rxjs/operators', '@angular/material/autocomplete', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/material/input', '@angular/material/card', '@angular/material/icon', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/button', '@angular/material/core', '@angular/material/progress-spinner', '@angular/cdk/a11y', '@angular/cdk/coercion', '@angular/cdk/collections', '@angular/platform-browser/animations', 'moment', '@angular/material/list', '@angular/material/expansion', '@angular/cdk/scrolling', '@angular/material/sidenav', '@angular/material/tree', '@angular/material/menu', '@angular/platform-browser', '@angular/cdk/tree', '@angular/common/http', '@angular/material/button-toggle', '@angular/material/select', '@angular/material/snack-bar', '@ckeditor/ckeditor5-angular', 'jquery', 'lodash', '@angular/material/tooltip', '@angular/material/tabs', '@angular/material/badge', '@angular/material/toolbar', '@angular/cdk/stepper', '@angular/material/stepper', '@angular/material/slide-toggle', '@angular/cdk/drag-drop'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['qms-angular'] = {}, global.ng.core, global.rxjs, global.ng.common, global.ng.forms, global.ng.material.formField, global.ng.material.radio, global.ng.material.dialog, global.rxjs.operators, global.ng.material.autocomplete, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.material.input, global.ng.material.card, global.ng.material.icon, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.button, global.ng.material.core, global.ng.material.progressSpinner, global.ng.cdk.a11y, global.ng.cdk.coercion, global.ng.cdk.collections, global.ng.platformBrowser.animations, global.moment, global.ng.material.list, global.ng.material.expansion, global.ng.cdk.scrolling, global.ng.material.sidenav, global.ng.material.tree, global.ng.material.menu, global.ng.platformBrowser, global.ng.cdk.tree, global.ng.common.http, global.ng.material.buttonToggle, global.ng.material.select, global.ng.material.snackBar, global.ckeditor5Angular, global.$$1, global._, global.ng.material.tooltip, global.ng.material.tabs, global.ng.material.badge, global.ng.material.toolbar, global.ng.cdk.stepper, global.ng.material.stepper, global.ng.material.slideToggle, global.ng.cdk.dragDrop));
+}(this, (function (exports, i0, rxjs, common, forms, formField, radio, dialog, operators, autocomplete, overlay, portal, input, card, icon, checkbox, chips, button, core, progressSpinner, a11y, coercion, collections, animations, moment, list, expansion, scrolling, sidenav, tree$1, menu, platformBrowser, tree, i1, buttonToggle, select, snackBar, ckeditor5Angular, $$1, _, tooltip, tabs, badge, toolbar, stepper$1, stepper, slideToggle, dragDrop) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -97,6 +97,8 @@
             "DOCUMENTS_IN": "Documents in"
         },
         "QMSCKEDITOR": {
+            "ID": "ID",
+            "INFORMATION": "Information",
             "REMOVE_MAP": "Remove Map",
             "IMAGE_MAP_PROPERTIES": "Image Map Properties",
             "INSERT_TOOLTIP": "Insert a tooltip",
@@ -149,7 +151,7 @@
             "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",
@@ -167,7 +169,9 @@
             "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"
         },
         "BPMN": {
             "DEFAULT": "Default",
@@ -298,6 +302,20 @@
             "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?",
@@ -359,6 +377,8 @@
             "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",
@@ -429,7 +449,9 @@
             "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"
         },
         "BPMN": {
             "DEFAULT": "Standard",
@@ -560,6 +582,20 @@
             "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?",
@@ -658,12 +694,16 @@
             item.isDelete = true;
             this.updateLog.emit(item);
         };
+        QMSComment.prototype.regretItem = function (item) {
+            item.isDelete = false;
+            this.updateLog.emit(item);
+        };
         return QMSComment;
     }());
     QMSComment.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-comment',
-                    template: "<div class=\"qms-comment\" *ngFor=\"let item of sourceLog; let i = index\">\r\n  <mat-card-header *ngIf=\"!item.isDelete\">\r\n    <mat-card-subtitle\r\n      >{{ item.user }} {{ item.date | dateFormat }}\r\n    </mat-card-subtitle>\r\n  </mat-card-header>\r\n  <mat-card-content>\r\n    <div\r\n      qms-scrollbar\r\n      *ngIf=\"!item.isEdit && !item.isDelete\"\r\n      class=\"content\"\r\n      [ngClass]=\"{ secondary: 0 != i % 2 }\"\r\n      [innerHTML]=\"showContent(item.content)\"\r\n    ></div>\r\n    <div class=\"content delete-action-wrap\" *ngIf=\"item.isDelete\">\r\n      <i>{{ LANG.DELETE_MESSAGE_COMMENT }}</i>\r\n      <button qms-btn-text class=\"btn-action\" (click)=\"item.isDelete = false\">\r\n        {{ LANG.REGRET }}\r\n      </button>\r\n    </div>\r\n    <mat-form-field *ngIf=\"item.isEdit && !item.isDelete\" qms-form-textarea>\r\n      <textarea\r\n        qms-scrollbar\r\n        class=\"textarea-comment\"\r\n        matInput\r\n        cdkTextareaAutosize\r\n        cdkAutosizeMinRows=\"1\"\r\n        cdkAutosizeMaxRows=\"5\"\r\n        [(ngModel)]=\"item.editedContent\"\r\n      ></textarea>\r\n    </mat-form-field>\r\n  </mat-card-content>\r\n  <mat-card-actions *ngIf=\"item.isDraft && !item.isEdit && !item.isDelete\">\r\n    <a class=\"btn-action\" (click)=\"editContent(item)\"> {{ LANG.EDIT }} </a>\r\n    <a class=\"btn-action ml-20\" (click)=\"removeItem(item)\">{{ LANG.DELETE }}</a>\r\n  </mat-card-actions>\r\n  <mat-card-actions *ngIf=\"item.isEdit\" class=\"edit-action-wrap\">\r\n    <button qms-btn (click)=\"saveEditedContent(item)\">{{ LANG.SAVE }}</button>\r\n    <button qms-btn-text (click)=\"item.isEdit = false\" class=\"ml-10\">\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </mat-card-actions>\r\n</div>\r\n",
+                    template: "<div class=\"qms-comment\" *ngFor=\"let item of sourceLog; let i = index\">\r\n  <mat-card-header *ngIf=\"!item.isDelete\">\r\n    <mat-card-subtitle\r\n      >{{ item.user }} {{ item.date | dateFormat }}\r\n    </mat-card-subtitle>\r\n  </mat-card-header>\r\n  <mat-card-content>\r\n    <div\r\n      qms-scrollbar\r\n      *ngIf=\"!item.isEdit && !item.isDelete\"\r\n      class=\"content\"\r\n      [ngClass]=\"{ secondary: 0 != i % 2 }\"\r\n      [innerHTML]=\"showContent(item.content)\"\r\n    ></div>\r\n    <div class=\"content delete-action-wrap\" *ngIf=\"item.isDelete\">\r\n      <i>{{ LANG.DELETE_MESSAGE_COMMENT }}</i>\r\n      <button qms-btn-text class=\"btn-action\" (click)=\"regretItem(item)\">\r\n        {{ LANG.REGRET }}\r\n      </button>\r\n    </div>\r\n    <mat-form-field *ngIf=\"item.isEdit && !item.isDelete\" qms-form-textarea>\r\n      <textarea\r\n        qms-scrollbar\r\n        class=\"textarea-comment\"\r\n        matInput\r\n        cdkTextareaAutosize\r\n        cdkAutosizeMinRows=\"1\"\r\n        cdkAutosizeMaxRows=\"5\"\r\n        [(ngModel)]=\"item.editedContent\"\r\n      ></textarea>\r\n    </mat-form-field>\r\n  </mat-card-content>\r\n  <mat-card-actions *ngIf=\"item.isDraft && !item.isEdit && !item.isDelete\">\r\n    <a class=\"btn-action\" (click)=\"editContent(item)\"> {{ LANG.EDIT }} </a>\r\n    <a class=\"btn-action ml-20\" (click)=\"removeItem(item)\">{{ LANG.DELETE }}</a>\r\n  </mat-card-actions>\r\n  <mat-card-actions *ngIf=\"item.isEdit\" class=\"edit-action-wrap\">\r\n    <button qms-btn (click)=\"saveEditedContent(item)\">{{ LANG.SAVE }}</button>\r\n    <button qms-btn-text (click)=\"item.isEdit = false\" class=\"ml-10\">\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </mat-card-actions>\r\n</div>\r\n",
                     host: { 'class': 'qms-comment' },
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.qms-comment{font-family:Open Sans;margin-bottom:1rem;display:block}.qms-comment .mat-card-subtitle{font-size:.75rem;color:rgba(0,0,0,.6)}.qms-comment .mat-card-content .content{padding:10px 16px;background-color:rgba(0,0,0,.04);display:block;border-radius:4px;font-size:.875rem;max-height:125px;overflow-y:auto}.qms-comment .mat-card-content .content.delete-action-wrap{display:flex;justify-content:space-between;align-items:center}.qms-comment .mat-card-content .content.secondary{background-color:rgba(62,87,183,.12)}.qms-comment .mat-card-content .qms-form{width:100%}.qms-comment .btn-action{color:#1954a9;font-weight:600;font-size:13px;cursor:pointer}.qms-comment .textarea-comment{font-size:.875rem}.ml-10{margin-left:10px}.mt-15{margin-top:15px}.ml-20{margin-left:20px}.edit-action-wrap{display:block;margin-top:-10px}"]
@@ -880,23 +920,6 @@
         qmsSuffix: [{ type: i0.ContentChild, args: [QMSSuffixDirective, { static: false },] }]
     };
 
-    var TestOnlyComponent = /** @class */ (function () {
-        function TestOnlyComponent() {
-            this.text = "";
-        }
-        return TestOnlyComponent;
-    }());
-    TestOnlyComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'qms-test-only',
-                    template: "<div class=\"test-container\">\r\n    <h1 class=\"content\">{{ text }}</h1>\r\n</div>",
-                    styles: [".test-container .content{background-color:#f4e9e5;max-height:36vw;overflow-y:scroll;overflow-x:hidden}"]
-                },] }
-    ];
-    TestOnlyComponent.propDecorators = {
-        text: [{ type: i0.Input }]
-    };
-
     var QMSChipInputChipListDirective = /** @class */ (function () {
         function QMSChipInputChipListDirective(ele) {
             this.ele = ele;
@@ -1889,76 +1912,6 @@
         { type: i0.ElementRef }
     ]; };
 
-    var QMSTabGroupAdvancedDirective = /** @class */ (function () {
-        function QMSTabGroupAdvancedDirective(ele) {
-            this.ele = ele;
-        }
-        QMSTabGroupAdvancedDirective.prototype.ngOnInit = function () {
-            if (this.ele) {
-                this.ele.nativeElement.classList.add('qms-tab-group-advanced');
-                if (this.color) {
-                    this.ele.nativeElement.classList.add(this.color);
-                }
-                if (this.type === 'fixed') {
-                    this.ele.nativeElement.classList.add('qms-tab-group-advanced-fixed');
-                }
-            }
-        };
-        return QMSTabGroupAdvancedDirective;
-    }());
-    QMSTabGroupAdvancedDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[qms-tab-group-advanced]',
-                },] }
-    ];
-    QMSTabGroupAdvancedDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-    QMSTabGroupAdvancedDirective.propDecorators = {
-        color: [{ type: i0.Input }],
-        type: [{ type: i0.Input }]
-    };
-
-    var QMSTabGroupDirective = /** @class */ (function () {
-        function QMSTabGroupDirective(ele) {
-            this.ele = ele;
-        }
-        QMSTabGroupDirective.prototype.ngOnInit = function () {
-            if (this.ele) {
-                this.ele.nativeElement.classList.add('qms-tab-group');
-            }
-        };
-        return QMSTabGroupDirective;
-    }());
-    QMSTabGroupDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[qms-tab-group]',
-                },] }
-    ];
-    QMSTabGroupDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-
-    var QMSTabLabelDirective = /** @class */ (function () {
-        function QMSTabLabelDirective(ele) {
-            this.ele = ele;
-        }
-        QMSTabLabelDirective.prototype.ngOnInit = function () {
-            if (this.ele) {
-                this.ele.nativeElement.classList.add('qms-tab-label');
-            }
-        };
-        return QMSTabLabelDirective;
-    }());
-    QMSTabLabelDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[qms-tab-label]',
-                },] }
-    ];
-    QMSTabLabelDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-
     var QMSTextBlockLine = /** @class */ (function () {
         function QMSTextBlockLine(elRef, renderer) {
             this.elRef = elRef;
@@ -3121,7 +3074,7 @@
             return attributes.some(function (attribute) { return _this._getHostElement().hasAttribute(attribute); });
         };
         QMSButtonIcon.prototype.ngAfterViewInit = function () {
-            if (this.type) {
+            if (this.active) {
                 this.renderer.addClass(this._elementRef.nativeElement, 'active-icon');
             }
             this._focusMonitor.monitor(this._elementRef, true);
@@ -3140,13 +3093,13 @@
                         '[attr.disabled]': 'disabled || null',
                         '[class._qms-animation-noopable]': '_animationMode === "NoopAnimations"',
                         '[class.qms-btn-disabled]': 'disabled',
-                        '[class.active-icon]': 'type',
+                        '[class.active-icon]': 'active',
                     },
                     template: "<span class=\"qms-btn-icon-wrapper\"><ng-content></ng-content></span>\r\n<span class=\"qms-button-focus-overlay\"></span>\r\n",
-                    inputs: ['disabled', 'color', 'type'],
+                    inputs: ['disabled', 'color', 'active'],
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.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 = function () { return [
@@ -3156,7 +3109,7 @@
         { type: String, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
     ]; };
     QMSButtonIcon.propDecorators = {
-        type: [{ type: i0.Input, args: ['type',] }]
+        active: [{ type: i0.Input, args: ['active',] }]
     };
 
     var QMSButtonModule = /** @class */ (function () {
@@ -3265,6 +3218,288 @@
         { type: i0.NgModule, args: [{},] }
     ];
 
+    var QMSAppBar = /** @class */ (function () {
+        function QMSAppBar(elRef) {
+            this.elRef = elRef;
+            this.mode = "dark";
+        }
+        QMSAppBar.prototype.ngOnInit = function () {
+        };
+        QMSAppBar.prototype.ngAfterViewChecked = function () {
+            this.elRef.nativeElement.classList.add("qms-app-bar-" + this.mode);
+        };
+        return QMSAppBar;
+    }());
+    QMSAppBar.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qms-app-bar]'
+                },] }
+    ];
+    QMSAppBar.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    QMSAppBar.propDecorators = {
+        mode: [{ type: i0.Input, args: ['mode',] }]
+    };
+
+    var QMSTableExpandDirective = /** @class */ (function () {
+        function QMSTableExpandDirective(_el, renderer) {
+            this._el = _el;
+            this.renderer = renderer;
+            this._el.nativeElement.classList.add('qms-table');
+        }
+        QMSTableExpandDirective.prototype.ngAfterViewChecked = function () {
+            var e_1, _c;
+            var matRows = this._el.nativeElement.querySelectorAll('mat-row');
+            try {
+                for (var _d = __values(Object.entries(matRows)), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var _f = __read(_e.value, 2), key = _f[0], value = _f[1];
+                    this.renderer.addClass(value, 'qms-row');
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        return QMSTableExpandDirective;
+    }());
+    QMSTableExpandDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qms-table-expand]',
+                    host: { 'class': 'qms-table-expand' }
+                },] }
+    ];
+    QMSTableExpandDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 }
+    ]; };
+    var QMSTableDirective = /** @class */ (function () {
+        function QMSTableDirective(_el, renderer) {
+            this._el = _el;
+            this.renderer = renderer;
+        }
+        QMSTableDirective.prototype.ngAfterViewChecked = function () {
+            var e_2, _c;
+            var matRows = this._el.nativeElement.querySelectorAll('mat-row');
+            try {
+                for (var _d = __values(Object.entries(matRows)), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var _f = __read(_e.value, 2), key = _f[0], value = _f[1];
+                    this.renderer.addClass(value, 'qms-row');
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+        };
+        return QMSTableDirective;
+    }());
+    QMSTableDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qms-table]',
+                    host: { 'class': 'qms-table' }
+                },] }
+    ];
+    QMSTableDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 }
+    ]; };
+    var QMSTableChildrenDirective = /** @class */ (function () {
+        function QMSTableChildrenDirective(_el, renderer) {
+            this._el = _el;
+            this.renderer = renderer;
+        }
+        QMSTableChildrenDirective.prototype.ngAfterViewChecked = function () {
+            var e_3, _c;
+            var matRows = this._el.nativeElement.querySelectorAll('mat-row');
+            try {
+                for (var _d = __values(Object.entries(matRows)), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var _f = __read(_e.value, 2), key = _f[0], value = _f[1];
+                    this.renderer.addClass(value, 'qms-row-children');
+                    this.renderer.addClass(value, 'qms-row-group');
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+        };
+        return QMSTableChildrenDirective;
+    }());
+    QMSTableChildrenDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qms-table-children]',
+                    host: { 'class': 'qms-table-children' }
+                },] }
+    ];
+    QMSTableChildrenDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 }
+    ]; };
+    var QMSRowExpandDirective = /** @class */ (function () {
+        function QMSRowExpandDirective() {
+        }
+        return QMSRowExpandDirective;
+    }());
+    QMSRowExpandDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qms-row-expand]',
+                    host: { 'class': 'qms-row-expand' }
+                },] }
+    ];
+    QMSRowExpandDirective.ctorParameters = function () { return []; };
+    var QMSRowDetailDirective = /** @class */ (function () {
+        function QMSRowDetailDirective() {
+        }
+        return QMSRowDetailDirective;
+    }());
+    QMSRowDetailDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qms-row-detail]',
+                    host: { 'class': 'qms-row-detail' }
+                },] }
+    ];
+    QMSRowDetailDirective.ctorParameters = function () { return []; };
+    var QMSCollapseGroupDirective = /** @class */ (function () {
+        function QMSCollapseGroupDirective() {
+        }
+        return QMSCollapseGroupDirective;
+    }());
+    QMSCollapseGroupDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qms-collapse-group]',
+                    host: { 'class': 'qms-collapse-group' }
+                },] }
+    ];
+    QMSCollapseGroupDirective.ctorParameters = function () { return []; };
+    var CdkDetailRowDirective = /** @class */ (function () {
+        function CdkDetailRowDirective(vcRef, _el) {
+            this.vcRef = vcRef;
+            this._el = _el;
+            this.focusClass = 'focus-grid-style';
+            this.onRowExpandEvent = new i0.EventEmitter();
+        }
+        Object.defineProperty(CdkDetailRowDirective.prototype, "expended", {
+            get: function () {
+                return this.opened;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CdkDetailRowDirective.prototype, "cdkDetailRow", {
+            set: function (value) {
+                if (value !== this.row) {
+                    this.row = value;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CdkDetailRowDirective.prototype, "template", {
+            set: function (value) {
+                if (value !== this.tRef) {
+                    this.tRef = value;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CdkDetailRowDirective.prototype, "otherTemplate", {
+            set: function (value) {
+                if (value !== this.othertRef) {
+                    this.othertRef = value;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CdkDetailRowDirective.prototype.ngOnChanges = function (changes) {
+            this.vcRef.clear();
+            if (this.othertRef && this.row) {
+                this.vcRef.createEmbeddedView(this.othertRef, { $implicit: this.row });
+            }
+        };
+        CdkDetailRowDirective.prototype.ngOnInit = function () {
+            var _a, _b;
+            this.vcRef.clear();
+            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');
+                }
+            }
+        };
+        CdkDetailRowDirective.prototype.onClick = function () {
+            this.toggle();
+        };
+        CdkDetailRowDirective.prototype.onClickItem = function (event) {
+            if (event && event.parentNode && event.parentNode.classList && !event.parentNode.classList.contains(this.focusClass)) {
+                var elements = document.getElementsByClassName(this.focusClass);
+                while (elements.length > 0) {
+                    elements[0].classList.remove(this.focusClass);
+                }
+            }
+        };
+        CdkDetailRowDirective.prototype.onKeydown = function (event) {
+            var elements = document.getElementsByClassName(this.focusClass);
+            if (event && elements && elements.length > 0) {
+                //To do
+            }
+        };
+        CdkDetailRowDirective.prototype.toggle = function () {
+            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);
+        };
+        CdkDetailRowDirective.prototype.render = function () {
+            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 });
+                }
+            }
+        };
+        return CdkDetailRowDirective;
+    }());
+    CdkDetailRowDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[cdkDetailRow]'
+                },] }
+    ];
+    CdkDetailRowDirective.ctorParameters = function () { return [
+        { type: i0.ViewContainerRef },
+        { type: i0.ElementRef }
+    ]; };
+    CdkDetailRowDirective.propDecorators = {
+        onRowExpandEvent: [{ type: i0.Output }],
+        expended: [{ type: i0.HostBinding, args: ['class.expanded',] }],
+        cdkDetailRow: [{ type: i0.Input }],
+        template: [{ type: i0.Input, args: ['cdkDetailRowTpl',] }],
+        otherTemplate: [{ type: i0.Input, args: ['cdkotherTemplate',] }],
+        onClick: [{ type: i0.HostListener, args: ['click',] }],
+        onClickItem: [{ type: i0.HostListener, args: ['document:click', ['$event.target'],] }],
+        onKeydown: [{ type: i0.HostListener, args: ['document:keydown', ['$event.target'],] }]
+    };
+
     var ɵ0$2 = { appearance: 'fill' }, ɵ1 = { color: 'none' };
     var QmsAngularModule = /** @class */ (function () {
         function QmsAngularModule() {
@@ -3275,7 +3510,6 @@
         { type: i0.NgModule, args: [{
                     declarations: [
                         QmsAngularComponent,
-                        TestOnlyComponent,
                         MarginDirective,
                         QMSSearchFieldDirective,
                         QMSInputClearDirective,
@@ -3311,9 +3545,13 @@
                         QMSDrawerContentDirective,
                         QMSDrawerHeaderActionDirective,
                         QMSToolTipRendererDirective,
-                        QMSTabLabelDirective,
-                        QMSTabGroupDirective,
-                        QMSTabGroupAdvancedDirective,
+                        QMSTableExpandDirective,
+                        QMSTableDirective,
+                        QMSRowDetailDirective,
+                        QMSTableChildrenDirective,
+                        QMSRowExpandDirective,
+                        CdkDetailRowDirective,
+                        QMSCollapseGroupDirective,
                         DateFormatPipe,
                         QMSChipInputDirective,
                         QMSChipInputSelectFieldDirective,
@@ -3322,7 +3560,8 @@
                         QMSChipInputChipListDirective,
                         ScrollToSelectedDirective,
                         QMSTooltipImageDirective,
-                        SelectDialog
+                        SelectDialog,
+                        QMSAppBar
                     ],
                     imports: [
                         common.CommonModule,
@@ -3334,7 +3573,6 @@
                     exports: [
                         QmsAngularComponent,
                         MarginDirective,
-                        TestOnlyComponent,
                         QMSSearchFieldDirective,
                         QMSInputClearDirective,
                         QMSFormFieldDirective,
@@ -3368,9 +3606,6 @@
                         QMSDrawerContentDirective,
                         QMSDrawerHeaderActionDirective,
                         QMSToolTipRendererDirective,
-                        QMSTabLabelDirective,
-                        QMSTabGroupDirective,
-                        QMSTabGroupAdvancedDirective,
                         DateFormatPipe,
                         QMSChipInputDirective,
                         QMSChipInputSelectFieldDirective,
@@ -3379,7 +3614,15 @@
                         QMSChipInputChipListDirective,
                         ScrollToSelectedDirective,
                         QMSTooltipImageDirective,
-                        SelectDialog
+                        SelectDialog,
+                        QMSAppBar,
+                        QMSTableExpandDirective,
+                        QMSTableDirective,
+                        QMSTableChildrenDirective,
+                        QMSRowDetailDirective,
+                        QMSRowExpandDirective,
+                        CdkDetailRowDirective,
+                        QMSCollapseGroupDirective
                     ],
                     providers: [
                         { provide: formField.MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: ɵ0$2 },
@@ -4694,6 +4937,9 @@
         TreeComponent.prototype.checkDisabledList = function () {
             var _this = this;
             // Disable List
+            for (var i = 0; i < this.treeControl.dataNodes.length; i++) {
+                this.treeControl.dataNodes[i].disabled = false;
+            }
             if (this.disabledList.length) {
                 var _loop_3 = function (i) {
                     this_3.disabledList.forEach(function (x) {
@@ -5230,9 +5476,9 @@
     TreeComponent.decorators = [
         { type: i0.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 && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"itemIconSvg\"\r\n        >\r\n        </mat-icon>\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.path && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon\"\r\n          [src]=\"itemIconPath\"\r\n        />\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.base64 && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon image-base64\"\r\n          [src]=\"getImagePath()\"\r\n        />\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.none && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getItemIcon(node)\"\r\n        ></mat-icon>\r\n        <span\r\n          class=\"text-node\"\r\n          [class.select-one-checked]=\"\r\n            treeConfig.selectOne &&\r\n            idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n          \"\r\n          >{{ node.name }}</span\r\n        >\r\n      </div>\r\n      <mat-icon\r\n        class=\"select-one-checked\"\r\n        *ngIf=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >done</mat-icon\r\n      >\r\n    </div>\r\n  </mat-tree-node>\r\n\r\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n    <!-- form thu 1 - parent -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild\"\r\n      [checked]=\"descendantsAllSelected(node)\"\r\n      [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <button\r\n      class=\"button-boder\"\r\n      mat-icon-button\r\n      matTreeNodeToggle\r\n      [disableRipple]=\"!node.hasChild\"\r\n      [attr.aria-label]=\"'toggle ' + node.filename\"\r\n      *ngIf=\"node.name\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"openIcon && closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngStyle]=\"{\r\n          color: treeControl.isExpanded(node) ? openIconColor : closeIconColor\r\n        }\"\r\n        >{{ getNodeIcon(node) }}</mat-icon\r\n      >\r\n      <mat-icon\r\n        *ngIf=\"!openIcon || !closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngClass]=\"{\r\n          'open-icon': treeControl.isExpanded(node),\r\n          'not-department-icon': moduleId !== dataType.document\r\n        }\"\r\n        [svgIcon]=\"getNodeIcon(node)\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <span\r\n      *ngIf=\"expandOnTitleClick\"\r\n      matTreeNodeToggle\r\n      class=\"text-node-parent\"\r\n      style=\"cursor: pointer\"\r\n      (click)=\"onExpandNode(node)\"\r\n      [ngStyle]=\"{\r\n        color: treeControl.isExpanded(node) ? openIconColor : '#000000'\r\n      }\"\r\n    >\r\n      <span>{{ node.name }}</span>\r\n    </span>\r\n    <span\r\n      *ngIf=\"!expandOnTitleClick\"\r\n      class=\"text-node-parent\"\r\n      (click)=\"selectFolderNode(node)\"\r\n      style=\"cursor: pointer\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <span\r\n        [class.select-one-checked]=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >{{ node.name }}</span\r\n      >\r\n      <mat-icon\r\n        class=\"select-one-checked\"\r\n        *ngIf=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >done</mat-icon\r\n      >\r\n    </span>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n",
+                    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",
                     encapsulation: i0.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}"]
+                    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}"]
                 },] }
     ];
     TreeComponent.ctorParameters = function () { return [
@@ -6697,7 +6943,7 @@
     RelatedPopupComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-related-popup',
-                    template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n    (optionSelected)=\"selectRelated($event.option.value)\"\r\n    [displayWith]=\"displayWhenSelectRelatedOption\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      [class.related-viewport]=\"isInputValue\"\r\n    >\r\n      <ng-container *ngFor=\"let type of searchOrder\">\r\n        <div\r\n          class=\"search__module-result\"\r\n          *ngIf=\"canShowSearchOption(type.value)\"\r\n        >\r\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n          <mat-option\r\n            class=\"search__option\"\r\n            *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n            [value]=\"option\"\r\n            [disabled]=\"option.disabled\"\r\n          >\r\n            <qms-list-item type=\"image-square\">\r\n              <mat-icon\r\n                leading-icon\r\n                type=\"image-square\"\r\n                [svgIcon]=\"getNodeIcon(option)\"\r\n              ></mat-icon>\r\n              <div qms-list-header>\r\n                <div\r\n                  qms-line\r\n                  type=\"caption\"\r\n                  qms-tool-tip=\"{{\r\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                  }}\"\r\n                  mode=\"dark\"\r\n                  *ngIf=\"getParentName(option)\"\r\n                >\r\n                  <span #searchItemResult class=\"search__result__parent-name\">\r\n                    {{ option.parentName }}\r\n                  </span>\r\n                </div>\r\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                  {{ option.itemName }}\r\n                </div>\r\n                <div\r\n                  class=\"caption\"\r\n                  *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n                >\r\n                  <qms-breadcrumb\r\n                    class=\"breadcrumb-containe\"\r\n                    type=\"table\"\r\n                    numDisplayItem=\"1\"\r\n                    [nodes]=\"option.breadcumbs\"\r\n                  >\r\n                  </qms-breadcrumb>\r\n                </div>\r\n              </div>\r\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n                <span class=\"material-icons-outlined search__description-icon\">\r\n                  local_offer\r\n                </span>\r\n                {{ getItemId(option) }}\r\n              </div>\r\n            </qms-list-item>\r\n          </mat-option>\r\n        </div>\r\n      </ng-container>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar qmslib_related_popup_content\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length,\r\n        'col-6': splitView,\r\n        'col-12': !splitView\r\n      }\"\r\n    >\r\n      <mat-expansion-panel\r\n        hideToggle\r\n        id=\"qmslib_related_popup_common_001\"\r\n        [expanded]=\"isCommonExpanded\"\r\n        (opened)=\"isCommonExpanded = true\"\r\n        (closed)=\"isCommonExpanded = false\"\r\n        class=\"panel-tree\"\r\n      >\r\n        <mat-expansion-panel-header class=\"padding-5\">\r\n          <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n            {{ LANG.PROCESSES | uppercase }}\r\n          </mat-panel-title>\r\n          <mat-panel-title *ngIf=\"moduleId === module.deviation\">\r\n            {{ LANG.DEVIATION | uppercase }}\r\n          </mat-panel-title>\r\n          <mat-panel-title *ngIf=\"moduleId === module.checklist\">\r\n            {{ LANG.CHECKLIST | uppercase }}\r\n          </mat-panel-title>\r\n          <mat-panel-title *ngIf=\"moduleId === module.risk\">\r\n            {{ LANG.ASSESSMENT | uppercase }}\r\n          </mat-panel-title>\r\n          <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n            <mat-icon>\r\n              {{\r\n                isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n              }}\r\n            </mat-icon>\r\n          </button>\r\n        </mat-expansion-panel-header>\r\n        <div id=\"qmslib_related_popup_common_002\">\r\n          <qms-tree\r\n            [treeData]=\"treeData1\"\r\n            [treeConfig]=\"treeConfig1\"\r\n            [selectedData]=\"selectedData\"\r\n            [selectedRiskData]=\"selectedRiskData\"\r\n            [disabledList]=\"disabledList\"\r\n            (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n            (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n            (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n            [expandOnTitleClick]=\"!splitView\"\r\n            [parentNodeOnClick]=\"parentNodeSelected\"\r\n            (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\r\n\r\n      <div\r\n        *ngIf=\"moduleId === module.documentProcess\"\r\n        class=\"line__divider\"\r\n      ></div>\r\n\r\n      <mat-expansion-panel\r\n        hideToggle\r\n        *ngIf=\"moduleId === module.documentProcess\"\r\n        id=\"qmslib_related_popup_document_001\"\r\n        [expanded]=\"isDocumentExpanded\"\r\n        (opened)=\"isDocumentExpanded = true\"\r\n        (closed)=\"isDocumentExpanded = false\"\r\n        class=\"panel-tree\"\r\n      >\r\n        <mat-expansion-panel-header class=\"padding-5\">\r\n          <mat-panel-title> {{ LANG.DOCUMENTS | uppercase }} </mat-panel-title>\r\n          <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n            <mat-icon>\r\n              {{\r\n                isDocumentExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n              }}\r\n            </mat-icon>\r\n          </button>\r\n        </mat-expansion-panel-header>\r\n        <div id=\"qmslib_related_popup_document_002\">\r\n          <qms-tree\r\n            [treeData]=\"treeData2\"\r\n            [treeConfig]=\"treeConfig2\"\r\n            [selectedData]=\"selectedData2\"\r\n            [disabledList]=\"disabledList2\"\r\n            (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\r\n            (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n            (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n            [expandOnTitleClick]=\"!splitView\"\r\n            [parentNodeOnClick]=\"parentNodeSelected\"\r\n            (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\r\n    </div>\r\n    <div\r\n      *ngIf=\"splitView\"\r\n      class=\"\r\n        qms-scrollbar\r\n        qmslib-related-popup-splitview qmslib_related_popup_content\r\n        col-6\r\n      \"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n        {{ splitViewTitle }}\r\n      </div>\r\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n        <mat-checkbox\r\n          qms-group-options\r\n          [disabled]=\"node.disabled\"\r\n          color=\"default\"\r\n          [checked]=\"isNodeSelected(node)\"\r\n          (change)=\"toggleSelectItem(node)\"\r\n        ></mat-checkbox>\r\n        <mat-icon\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getNodeIcon(node)\"\r\n        ></mat-icon>\r\n        <span class=\"text-node\">{{ node.itemName }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n      <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        qms-tool-tip=\"{{\r\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n        }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)\r\n        }}</span>\r\n        <mat-icon\r\n          *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n          (click)=\"removeCheckedNodeList(item)\"\r\n          >cancel</mat-icon\r\n        >\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button\r\n      *ngIf=\"!checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 7px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 0px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button\r\n      qms-btn-text\r\n      [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n    (optionSelected)=\"selectRelated($event.option.value)\"\r\n    [displayWith]=\"displayWhenSelectRelatedOption\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      [class.related-viewport]=\"isInputValue\"\r\n    >\r\n      <ng-container *ngFor=\"let type of searchOrder\">\r\n        <div\r\n          class=\"search__module-result\"\r\n          *ngIf=\"canShowSearchOption(type.value)\"\r\n        >\r\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n          <mat-option\r\n            class=\"search__option\"\r\n            *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n            [value]=\"option\"\r\n            [disabled]=\"option.disabled\"\r\n          >\r\n            <qms-list-item type=\"image-square\">\r\n              <mat-icon\r\n                leading-icon\r\n                type=\"image-square\"\r\n                [svgIcon]=\"getNodeIcon(option)\"\r\n              ></mat-icon>\r\n              <div qms-list-header>\r\n                <div\r\n                  qms-line\r\n                  type=\"caption\"\r\n                  qms-tool-tip=\"{{\r\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                  }}\"\r\n                  mode=\"dark\"\r\n                  *ngIf=\"getParentName(option)\"\r\n                >\r\n                  <span #searchItemResult class=\"search__result__parent-name\">\r\n                    {{ option.parentName }}\r\n                  </span>\r\n                </div>\r\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                  {{ option.itemName }}\r\n                </div>\r\n                <div\r\n                  class=\"caption\"\r\n                  *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n                >\r\n                  <qms-breadcrumb\r\n                    class=\"breadcrumb-containe\"\r\n                    type=\"table\"\r\n                    numDisplayItem=\"1\"\r\n                    [nodes]=\"option.breadcumbs\"\r\n                  >\r\n                  </qms-breadcrumb>\r\n                </div>\r\n              </div>\r\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n                <span class=\"material-icons-outlined search__description-icon\">\r\n                  local_offer\r\n                </span>\r\n                {{ getItemId(option) }}\r\n              </div>\r\n            </qms-list-item>\r\n          </mat-option>\r\n        </div>\r\n      </ng-container>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar qmslib_related_popup_content\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length,\r\n        'col-6': splitView,\r\n        'col-12': !splitView\r\n      }\"\r\n    >\r\n      <ng-container *ngIf=\"treeData1.length > 0\">\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          id=\"qmslib_related_popup_common_001\"\r\n          [expanded]=\"isCommonExpanded\"\r\n          (opened)=\"isCommonExpanded = true\"\r\n          (closed)=\"isCommonExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n              {{ LANG.PROCESSES | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.deviation\">\r\n              {{ LANG.DEVIATION | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.checklist\">\r\n              {{ LANG.CHECKLIST | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.risk\">\r\n              {{ LANG.ASSESSMENT | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_common_002\">\r\n            <qms-tree\r\n              [treeData]=\"treeData1\"\r\n              [treeConfig]=\"treeConfig1\"\r\n              [selectedData]=\"selectedData\"\r\n              [selectedRiskData]=\"selectedRiskData\"\r\n              [disabledList]=\"disabledList\"\r\n              (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n            ></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"treeData2.length > 0\">\r\n        <div\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          class=\"line__divider\"\r\n        ></div>\r\n\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          id=\"qmslib_related_popup_document_001\"\r\n          [expanded]=\"isDocumentExpanded\"\r\n          (opened)=\"isDocumentExpanded = true\"\r\n          (closed)=\"isDocumentExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title>\r\n              {{ LANG.DOCUMENTS | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isDocumentExpanded\r\n                    ? \"keyboard_arrow_up\"\r\n                    : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_document_002\">\r\n            <qms-tree\r\n              [treeData]=\"treeData2\"\r\n              [treeConfig]=\"treeConfig2\"\r\n              [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\"\r\n              (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n            ></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n    </div>\r\n    <div\r\n      *ngIf=\"splitView\"\r\n      class=\"\r\n        qms-scrollbar\r\n        qmslib-related-popup-splitview qmslib_related_popup_content\r\n        col-6\r\n      \"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n        {{ splitViewTitle }}\r\n      </div>\r\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n        <mat-checkbox\r\n          qms-group-options\r\n          [disabled]=\"node.disabled\"\r\n          color=\"default\"\r\n          [checked]=\"isNodeSelected(node)\"\r\n          (change)=\"toggleSelectItem(node)\"\r\n        ></mat-checkbox>\r\n        <mat-icon\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getNodeIcon(node)\"\r\n        ></mat-icon>\r\n        <span class=\"text-node\">{{ node.itemName }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n      <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        qms-tool-tip=\"{{\r\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n        }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)\r\n        }}</span>\r\n        <mat-icon\r\n          *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n          (click)=\"removeCheckedNodeList(item)\"\r\n          >cancel</mat-icon\r\n        >\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button\r\n      *ngIf=\"!checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 7px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 0px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button\r\n      qms-btn-text\r\n      [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-scrollbar.none-scroll-bg::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:#eee}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:#e5e5e5;max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{height:30px;font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .breadcrumb-containe .qms-breadcrumb-item-text,cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .breadcrumb-containe .qms-breadcrumb-item .mat-icon,cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:300px}"]
                 },] }
@@ -7225,7 +7471,7 @@
         { type: i0.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 = function () { return [
@@ -7706,7 +7952,7 @@
         { type: i0.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 = function () { return [
@@ -7788,6 +8034,7 @@
 
     exports.QMSCKEditorDocumentType = void 0;
     (function (QMSCKEditorDocumentType) {
+        QMSCKEditorDocumentType[QMSCKEditorDocumentType["other"] = 0] = "other";
         QMSCKEditorDocumentType[QMSCKEditorDocumentType["document"] = 1] = "document";
         QMSCKEditorDocumentType[QMSCKEditorDocumentType["process"] = 2] = "process";
         QMSCKEditorDocumentType[QMSCKEditorDocumentType["area"] = 3] = "area";
@@ -8180,7 +8427,7 @@
         { type: i0.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 = function () { return [
@@ -8521,7 +8768,7 @@
         { type: i0.Component, args: [{
                     selector: 'qms-ckeditor-link',
                     template: "<div id=\"qmsckeditor_link\" class=\"qmsckeditor qmsckeditor__link__container\">\r\n  <div id=\"qmsckeditor_link_header\">\r\n    <span 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 = function () { return [
@@ -8839,7 +9086,7 @@
         { type: i0.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 = function () { return [
@@ -8975,7 +9222,7 @@
         { type: i0.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 = function () { return [
@@ -9031,6 +9278,10 @@
     CKEditorEventConst.QMSCK_BPMN_PLUGIN_MSG = 'QMSCK_BPMN_PLUGIN_MSG';
     CKEditorEventConst.QMSCK_BPMN_PLUGIN_RESP = 'QMSCK_BPMN_PLUGIN_RESP';
     CKEditorEventConst.QMSCK_BPMN = 'bpmn';
+    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';
 
     var IFRAME_SRC = '//cdn.iframe.ly/api/iframe';
@@ -9045,7 +9296,7 @@
             },
             language: 'en',
             table: {
-                contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
+                contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
             },
             image: {
                 styles: ['alignLeft', 'alignCenter', 'alignRight'],
@@ -9330,6 +9581,7 @@
     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';
@@ -9343,7 +9595,15 @@
     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() {
@@ -9368,6 +9628,12 @@
         return QMSCKEditorBpmn;
     }());
 
+    var QMSCKEditorSaveAsTemplate = /** @class */ (function () {
+        function QMSCKEditorSaveAsTemplate() {
+        }
+        return QMSCKEditorSaveAsTemplate;
+    }());
+
     var QMSCKEditorBpmnApiService = /** @class */ (function (_super) {
         __extends(QMSCKEditorBpmnApiService, _super);
         function QMSCKEditorBpmnApiService() {
@@ -10245,10 +10511,36 @@
                                         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',
@@ -10279,10 +10571,36 @@
                                                     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,
@@ -10331,7 +10649,7 @@
                                         style: 'text-align:end;margin-right:4px;margin-top:16px;'
                                     },
                                     input: {
-                                        style: 'width:163px;'
+                                        style: 'width:170px;'
                                     }
                                 }
                             }
@@ -10375,73 +10693,73 @@
                     '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': {
@@ -11886,6 +12204,7 @@
             }).on({
                 'blank:pointerdown': function (evt, x, y) {
                     closeTools();
+                    _this.setSelectedCellView(null);
                     // selection.startSelecting(evt, x, y);
                     if (keyboard.isActive('shift', evt)) {
                         selection.startSelecting(evt, x, y);
@@ -11900,6 +12219,7 @@
                 },
                 'cell:pointerup': function (cellView) {
                     openTools(cellView);
+                    _this.setSelectedCellView(cellView);
                 },
                 'link:mouseenter': function (linkView) {
                     // Open tool only if there is none yet
@@ -12134,10 +12454,12 @@
                 verticalGap: 20,
                 resizeToFit: false
             });
+            var setSelectedCellView = this.setSelectedCellView;
             // Create tooltips for all the shapes in stencil.
             stencil.on('element:drop', function (elementView) {
                 // open inspector after a new element dropped from stencil
                 openTools(elementView);
+                setSelectedCellView(elementView);
             });
             /* KEYBOARD */
             if (editMode === exports.FlowchartViewMode.Edit) {
@@ -12163,21 +12485,32 @@
                     },
                     'ctrl+x shift+delete': function () {
                         clipboard.cutElements(selection.collection, graph);
+                        setSelectedCellView(null);
                     },
                     'delete backspace': function (evt) {
                         evt.preventDefault();
                         graph.removeCells(selection.collection.toArray());
+                        setSelectedCellView(null);
                     },
                     'ctrl+z': function () {
+                        var notify = isSelectedCellViewInSelection(selection);
                         commandManager.undo();
                         selection.cancelSelection();
+                        if (notify) {
+                            setSelectedCellView(null);
+                        }
                     },
                     'ctrl+y': function () {
+                        var notify = isSelectedCellViewInSelection(selection);
                         commandManager.redo();
                         selection.cancelSelection();
+                        if (notify) {
+                            setSelectedCellView(null);
+                        }
                     },
                     'ctrl+a': function () {
                         selection.collection.reset(graph.getElements());
+                        setSelectedCellView(null);
                     },
                     'ctrl+plus': function (evt) {
                         evt.preventDefault();
@@ -12200,7 +12533,6 @@
                     return;
                 }
                 closeTools();
-                window["my_cellView"] = cellView;
                 var cell = cellView.model;
                 var type = cell.get('type');
                 // const tablName = window[FlowChartConst.TAB_NAME];
@@ -12216,7 +12548,7 @@
                 //     }
                 //   });
                 // }
-                var inspector = joint.ui.Inspector.create('#inspector-container', {
+                joint.ui.Inspector.create('#inspector-container', {
                     cell: cell,
                     inputs: inputs[type],
                     groups: {
@@ -12380,8 +12712,6 @@
                 // }
                 /* 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;
@@ -12393,6 +12723,11 @@
                 freeTransform = null;
                 joint.ui.Halo.clear(paper);
             }
+            function isSelectedCellViewInSelection(selection) {
+                var models = selection.collection.toArray() || [];
+                var selectedShapeId = window[FlowChartConst.SELECTED_SHAPE_ID];
+                return !!selectedShapeId && models.filter(function (model) { return model.attributes.id == selectedShapeId; });
+            }
             function showStatus(message, type) {
                 var _this = this;
                 $__namespace('.status').removeClass('info error success').addClass(type).html(message);
@@ -12481,8 +12816,13 @@
                         _this.jsonOriginalContent = JSON.stringify(graph.toJSON());
                         window[FlowChartConst.ORG_JSONCONTENT] = _this.jsonOriginalContent;
                         window.postMessage(FlowChartConst.CHANGING_TEMPLATE, _this.getOriginForSelf());
+                        _this.setSelectedCellView(null);
                     }
                 },
+                onClear: function () {
+                    graph.clear();
+                    _this.setSelectedCellView(null);
+                },
                 onDeleteTemplate: function () {
                     _this.isSelectedTemplate = window[FlowChartConst.IS_SELECTED_TEMPLATE];
                     if (_this.isSelectedTemplate) {
@@ -12523,7 +12863,7 @@
                 'tojson:pointerclick': toolbarCommands.toJSON,
                 'load:pointerclick': toolbarCommands.loadGraph,
                 'save:pointerclick': toolbarCommands.saveGraph,
-                'clear:pointerclick': ___namespace.bind(graph.clear, graph),
+                'clear:pointerclick': toolbarCommands.onClear,
                 'print:pointerclick': ___namespace.bind(paper.print, paper),
                 'saveAsTemplate:pointerclick': toolbarCommands.onSaveAsTemplate,
                 'selectTemplate:option:select': toolbarCommands.onSelected,
@@ -12646,6 +12986,19 @@
                 }
             }
         };
+        BpmnService.prototype.setSelectedCellView = function (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, '*');
+        };
         BpmnService.prototype.getTempGraph = function () {
             if (this.jsonTempContent) {
                 this.loadProcessDiagram(JSON.parse(this.jsonTempContent));
@@ -12710,20 +13063,23 @@
             }
         };
         BpmnService.prototype.openShapeFunctionality = function (LANG) {
-            var myCellView = window["my_cellView"];
-            var inputs = InspectorFunction.getInspectorConfiguration(bpmn2, LANG);
-            var cell = myCellView.model;
-            var type = cell.get('type');
-            var inspector = joint.ui.Inspector.create('#inspector-container', {
-                cell: cell,
-                inputs: inputs[type],
-                groups: {
-                    general: { label: type, index: 1 },
-                    defaults: { index: 2 },
-                    fontsize: { index: 3 },
-                    appearance: { index: 4 }
-                }
-            });
+            var myCellView = window[FlowChartConst.MY_CELL_VIEW];
+            if (!!myCellView) {
+                joint.ui.Inspector.close();
+                var inputs = InspectorFunction.getInspectorConfiguration(bpmn2, LANG);
+                var cell = myCellView.model;
+                var type = cell.get('type');
+                joint.ui.Inspector.create('#inspector-container', {
+                    cell: cell,
+                    inputs: inputs[type],
+                    groups: {
+                        general: { label: type, index: 1 },
+                        defaults: { index: 2 },
+                        fontsize: { index: 3 },
+                        appearance: { index: 4 }
+                    }
+                });
+            }
         };
         BpmnService.prototype.setZoomToFit = function (editMode) {
             if (editMode === exports.FlowchartViewMode.View) {
@@ -12891,21 +13247,62 @@
                 },] }
     ];
 
+    var QMSCKEditorFlowchart = /** @class */ (function () {
+        function QMSCKEditorFlowchart() {
+            this.id = '';
+            this.jsonContent = '';
+            this.isTemplate = false;
+            this.templateName = '';
+        }
+        return QMSCKEditorFlowchart;
+    }());
+
+    var QMSCKEditorFlowchartService = /** @class */ (function (_super) {
+        __extends(QMSCKEditorFlowchartService, _super);
+        function QMSCKEditorFlowchartService() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        QMSCKEditorFlowchartService.prototype.flowchartModifying = function (flowchart) {
+            return this.post('ckeditorFlowchart/FlowchartModifying', flowchart);
+        };
+        QMSCKEditorFlowchartService.prototype.getFlowchartById = function (id) {
+            return this.get('ckeditorFlowchart/GetFlowchartById', { id: id });
+        };
+        QMSCKEditorFlowchartService.prototype.flowchartGetTemplates = function () {
+            return this.get('ckeditorFlowchart/FlowchartGetTemplates');
+        };
+        QMSCKEditorFlowchartService.prototype.flowchartDeleteTemplate = function (id) {
+            return this.delete('ckeditorFlowchart/FlowchartDeleteTemplate', { id: id });
+        };
+        return QMSCKEditorFlowchartService;
+    }(QMSCKEditorBaseService));
+    QMSCKEditorFlowchartService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function QMSCKEditorFlowchartService_Factory() { return new QMSCKEditorFlowchartService(i0__namespace.ɵɵinject(i1__namespace.HttpClient), i0__namespace.ɵɵinject(QMSCKEditorGlobalService)); }, token: QMSCKEditorFlowchartService, providedIn: "root" });
+    QMSCKEditorFlowchartService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+
     var SaveTemplateComponent = /** @class */ (function (_super) {
         __extends(SaveTemplateComponent, _super);
-        function SaveTemplateComponent(translate, bmpnService, bpmnApiService, dialogRef, data) {
+        function SaveTemplateComponent(translate, bmpnService, bpmnApiService, flowchartService, dialogRef, data) {
             var _this = _super.call(this) || this;
             _this.translate = translate;
             _this.bmpnService = bmpnService;
             _this.bpmnApiService = bpmnApiService;
+            _this.flowchartService = flowchartService;
             _this.dialogRef = dialogRef;
             _this.data = data;
             _this.saveFormGroup = new forms.FormGroup({
                 templateName: new forms.FormControl('', [forms.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;
             return _this;
         }
         SaveTemplateComponent.prototype.ngOnInit = function () {
@@ -12918,20 +13315,38 @@
         };
         SaveTemplateComponent.prototype.saveTemplate = function () {
             var _this = this;
-            this.bpmn.templateName = this.templateName;
-            this.bpmnApiService
-                .bpmnModifying(this.bpmn)
-                .pipe(operators.takeUntil(this.ngUnsubcribe))
-                .subscribe(function (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(operators.takeUntil(this.ngUnsubcribe))
+                    .subscribe(function (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(operators.takeUntil(this.ngUnsubcribe))
+                    .subscribe(function (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);
+                    }
+                });
+            }
         };
         SaveTemplateComponent.prototype.onCloseDialog = function () {
             this.dialogRef.close();
@@ -12949,25 +13364,79 @@
         { type: TranslateLibraryService },
         { type: BpmnService },
         { type: QMSCKEditorBpmnApiService },
+        { type: QMSCKEditorFlowchartService },
         { type: dialog.MatDialogRef },
-        { type: QMSCKEditorBpmn, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
+        { type: QMSCKEditorSaveAsTemplate, decorators: [{ type: i0.Inject, args: [dialog.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 = {}));
+
+    var QMSCKEditorBpmnData = /** @class */ (function () {
+        function QMSCKEditorBpmnData() {
+            this.id = '';
+            this.entityId = '';
+            this.editorContent = '';
+        }
+        return QMSCKEditorBpmnData;
+    }());
+
+    var CKEditorLinkConst = /** @class */ (function () {
+        function CKEditorLinkConst() {
+        }
+        return CKEditorLinkConst;
+    }());
+    CKEditorLinkConst.FOLDER_PARTIAL_URL = '/folder/';
+    CKEditorLinkConst.DOCUMENT_PARTIAL_URL = '/document/';
+    CKEditorLinkConst.AREA_PARTIAL_URL = '/area/detail/';
+    CKEditorLinkConst.PROCESS_PARTIAL_URL = '/process-detail/';
+
+    var ILink = /** @class */ (function () {
+        function ILink() {
+            this.target = exports.TargetTypeName.new;
+            this.documentType = exports.QMSCKEditorDocumentType.other;
+            this.url = '';
+            this.title = '';
+            this.icon = '';
+            this.content = '';
+        }
+        return ILink;
+    }());
     var QMSCKEditorBpmnComponent = /** @class */ (function (_super) {
         __extends(QMSCKEditorBpmnComponent, _super);
-        function QMSCKEditorBpmnComponent(dialog, translate, bmpnService, bpmnApiService, dialogRef, data) {
+        function QMSCKEditorBpmnComponent(dialog, translate, bmpnService, bpmnApiService, linkService, dialogRef, data) {
             var _this = _super.call(this) || this;
             _this.dialog = dialog;
             _this.translate = translate;
             _this.bmpnService = bmpnService;
             _this.bpmnApiService = bpmnApiService;
+            _this.linkService = linkService;
             _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 = exports.TargetTypeName.new;
+            _this.linkUrl = '';
+            _this.linkTitle = '';
+            _this.anchorByName = '';
+            _this.linkIcon = '';
+            _this.linkId = '';
+            _this.documentType = exports.QMSCKEditorDocumentType.other;
+            _this.id = data.id;
+            _this.module = data.module;
+            _this.entityId = data.entityId;
+            _this.editorContent = data.editorContent;
             return _this;
         }
         QMSCKEditorBpmnComponent.prototype.onMessage = function (event) {
@@ -12978,7 +13447,7 @@
                 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();
@@ -12986,36 +13455,73 @@
             else if (event.data === FlowChartConst.RESET_TEMPLATE) {
                 this.onResetTemplate();
             }
+            else if (event.data === FlowChartConst.SELECTED_SHAPE_ID) {
+                this.onSeletedCellView();
+            }
         };
         QMSCKEditorBpmnComponent.prototype.ngOnInit = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var _a, _b;
+                var _b, _c;
                 var _this = this;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubcribe)).subscribe(function (res) {
                                 if (res) {
                                     _this.LANG = _this.translate.getObjectLang(res);
                                 }
                             });
-                            _a = this;
+                            _b = this;
                             return [4 /*yield*/, this.getTemplates()];
                         case 1:
-                            _a.bpmnTemlates = _c.sent();
+                            _b.bpmnTemlates = _d.sent();
                             if (!this.id) return [3 /*break*/, 3];
-                            _b = this;
+                            _c = this;
                             return [4 /*yield*/, this.getJsonContent(this.id)];
                         case 2:
-                            _b.jsonContent = _c.sent();
-                            _c.label = 3;
+                            _c.jsonContent = _d.sent();
+                            _d.label = 3;
                         case 3:
                             this.bmpnService.buildDiagram(this.bpmnTemlates, null, CKEditorEventConst.QMSCK_BPMN, this.jsonContent, 1, this.LANG);
+                            this.initDocumentIcons();
+                            this.initTarget();
+                            this.initConnectionType();
+                            this.initLink();
                             return [2 /*return*/];
                     }
                 });
             });
         };
+        QMSCKEditorBpmnComponent.prototype.initTarget = function () {
+            if (this.targets) {
+                this.targets.push({ id: exports.TargetTypeName.new, name: this.LANG.QMSCKEDITOR.TARTGET_NEW });
+                this.targets.push({ id: exports.TargetTypeName.same, name: this.LANG.QMSCKEDITOR.TARGET_SAME });
+            }
+        };
+        QMSCKEditorBpmnComponent.prototype.initConnectionType = function () {
+            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 });
+            }
+        };
+        QMSCKEditorBpmnComponent.prototype.initDocumentIcons = function () {
+            this.documentIcons = {};
+            this.documentIcons[exports.QMSCKEditorDocumentType.document] = 'text_snippet';
+            this.documentIcons[exports.QMSCKEditorDocumentType.process] = 'account_tree';
+            this.documentIcons[exports.QMSCKEditorDocumentType.area] = 'folder';
+            this.documentIcons[exports.QMSCKEditorDocumentType.folder] = 'folder';
+            this.documentIcons[exports.QMSCKEditorDocumentType.other] = 'text_snippet';
+        };
+        QMSCKEditorBpmnComponent.prototype.initLink = function () {
+            this.link = null;
+            this.linkId = '';
+            this.documentType = exports.QMSCKEditorDocumentType.other;
+            this.linkIcon = this.documentIcons[exports.QMSCKEditorDocumentType.other];
+            this.selectedTarget = exports.TargetTypeName.new;
+            this.anchorByName = '';
+            this.linkTitle = '';
+            this.documentAnchors = [];
+        };
         QMSCKEditorBpmnComponent.prototype.expandPanel = function () {
             this.expandedPanel = !this.expandedPanel;
             var panelStencil = document.getElementById('panel-stencil-container');
@@ -13037,7 +13543,7 @@
         QMSCKEditorBpmnComponent.prototype.getTemplates = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_a) {
+                return __generator(this, function (_b) {
                     return [2 /*return*/, new Promise(function (resolve) {
                             _this.bpmnApiService
                                 .bpmnGetTemplates()
@@ -13052,7 +13558,7 @@
         QMSCKEditorBpmnComponent.prototype.getJsonContent = function (id) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_a) {
+                return __generator(this, function (_b) {
                     return [2 /*return*/, new Promise(function (resolve) {
                             _this.bpmnApiService
                                 .getBpmnById(id)
@@ -13066,13 +13572,12 @@
                 });
             });
         };
-        QMSCKEditorBpmnComponent.prototype.saveImageContent = function () {
+        QMSCKEditorBpmnComponent.prototype.saveImageContent = function (graphObject) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_a) {
+                return __generator(this, function (_b) {
                     return [2 /*return*/, new Promise(function (resolve) {
-                            var graph = window[FlowChartConst.GRAPH];
-                            var jsonContent = JSON.stringify(graph.toJSON());
+                            var jsonContent = JSON.stringify(graphObject);
                             _this.bpmn = {
                                 id: _this.id ? _this.id : guidHelper.empty,
                                 jsonContent: jsonContent,
@@ -13093,7 +13598,7 @@
         };
         QMSCKEditorBpmnComponent.prototype.getImageContent = function (paper) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
+                return __generator(this, function (_b) {
                     return [2 /*return*/, new Promise(function (resolve) {
                             paper.toPNG(function (imageData) {
                                 var arrString = imageData.split(',');
@@ -13105,18 +13610,23 @@
         };
         QMSCKEditorBpmnComponent.prototype.onInsertImage = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var id, paper, imageContent, _a, result;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.saveImageContent()];
-                        case 1:
-                            id = _b.sent();
+                var graph, paper, clientRect, graphObject, id, imageContent, _b, imagemap, result;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            graph = window[FlowChartConst.GRAPH];
                             paper = window["paper"];
-                            _a = 'data:image/png;base64,';
+                            clientRect = paper.paperToLocalRect(paper.getContentBBox());
+                            graphObject = graph.toJSON();
+                            return [4 /*yield*/, this.saveImageContent(graphObject)];
+                        case 1:
+                            id = _c.sent();
+                            _b = 'data:image/png;base64,';
                             return [4 /*yield*/, this.getImageContent(paper)];
                         case 2:
-                            imageContent = _a + (_b.sent());
-                            result = { key: CKEditorEventConst.QMSCK_BPMN + "#" + id, values: imageContent };
+                            imageContent = _b + (_c.sent());
+                            imagemap = this.toImageMap(id, graphObject.cells, clientRect);
+                            result = { key: CKEditorEventConst.QMSCK_BPMN + "#" + id, values: imageContent, imagemap: imagemap };
                             this.dialogRef.close(result);
                             return [2 /*return*/];
                     }
@@ -13126,16 +13636,203 @@
         QMSCKEditorBpmnComponent.prototype.onCloseDialog = function () {
             this.dialogRef.close();
         };
+        QMSCKEditorBpmnComponent.prototype.removeLink = function () {
+            var _this = this;
+            var title = this.LANG.BPMN.DELETE_ATTACHMENT;
+            var 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, function (value) {
+                if (value) {
+                    if (value == true || (typeof value == 'object' && value.isConfirmed == true)) {
+                        _this.link = null;
+                    }
+                }
+            });
+        };
+        QMSCKEditorBpmnComponent.prototype.onConnectionTypeChange = function () {
+            var _this = this;
+            this.selectedConnectionType = this.connectionType;
+            if (this.link) {
+                this.showConfirmDialog(this.LANG.QMSCKEDITOR.INFORMATION, this.LANG.QMSCKEDITOR_MESSAGE.CONFIRM_DELETE_EXISTING_CONNECTION, true, function () {
+                    _this.connectionType = 0;
+                });
+                return;
+            }
+            switch (this.connectionType) {
+                case ShapeFlowChartConnectionType.DocumentOrProcess:
+                    this.openHandbookDialog(false);
+                    break;
+                case ShapeFlowChartConnectionType.Attachment:
+                    this.openAttachmentDialog();
+                    break;
+            }
+        };
+        QMSCKEditorBpmnComponent.prototype.onAnchorByNameChange = function () {
+            this.updateCellViewValues();
+        };
+        QMSCKEditorBpmnComponent.prototype.openHandbookDialog = function (isOnlyDocument) {
+            var _this = this;
+            var data = new QMSCKEditorRelation();
+            data.isOnlyDocument = isOnlyDocument;
+            data.isEnableFolder = !isOnlyDocument;
+            var dialogTemplate = this.dialog.open(QMSCKEditorRelatedComponent, {
+                width: '650px',
+                height: '650px',
+                data: data,
+                disableClose: true
+            });
+            dialogTemplate
+                .afterClosed()
+                .pipe(operators.takeUntil(this.ngUnsubcribe))
+                .subscribe(function (result) {
+                if (result) {
+                    _this.documentType = result.type;
+                    _this.linkId = _this.getLinkId(result.url, result.type);
+                    if (result.type == exports.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 = exports.TargetTypeName.new;
+                    _this.updateCellViewValues();
+                }
+                _this.connectionType = 0;
+            });
+        };
+        QMSCKEditorBpmnComponent.prototype.openAttachmentDialog = function () {
+            var _this = this;
+            var data = new QMSCKEditorParamter();
+            data.module = this.module;
+            data.entityId = this.entityId;
+            var dialogTemplate = this.dialog.open(LinkAttachmentComponent, {
+                width: '650px',
+                height: '650px',
+                data: data,
+                disableClose: true
+            });
+            dialogTemplate
+                .afterClosed()
+                .pipe(operators.takeUntil(this.ngUnsubcribe))
+                .subscribe(function (result) {
+                if (result) {
+                    _this.documentType = exports.QMSCKEditorDocumentType.other;
+                    _this.linkUrl = result.url;
+                    if (!_this.linkTitle) {
+                        _this.linkTitle = result.title;
+                    }
+                    _this.selectedTarget = exports.TargetTypeName.new;
+                    _this.updateCellViewValues();
+                }
+                _this.connectionType = 0;
+            });
+        };
+        QMSCKEditorBpmnComponent.prototype.getAnchorDocument = function (documentId) {
+            var _this = this;
+            this.isLoadingDocumentAnchor = true;
+            this.linkService
+                .getAnchorDocumentList(documentId)
+                .pipe(operators.takeUntil(this.ngUnsubcribe))
+                .subscribe(function (documents) {
+                _this.documentAnchors = _this.extractDocumentAnchors(documents || []);
+                _this.isLoadingDocumentAnchor = false;
+            });
+        };
+        QMSCKEditorBpmnComponent.prototype.extractDocumentAnchors = function (anchorDocument) {
+            var anchors = [{ value: 0, viewValue: '', anchorValue: exports.LinkAnchor.Blank }];
+            var id = 3;
+            if (anchorDocument) {
+                anchorDocument.forEach(function (e) {
+                    var div = document.createElement('div');
+                    div.innerHTML = e.richText;
+                    var domContent = div;
+                    var aTags = domContent.getElementsByTagName('a');
+                    if (aTags) {
+                        var _loop_1 = function (i) {
+                            var tag = aTags[i];
+                            if (tag.name) {
+                                var index = anchors.findIndex(function (x) {
+                                    return x.anchorValue === tag.name;
+                                });
+                                if (index < 0) {
+                                    anchors.push({
+                                        value: id,
+                                        viewValue: tag.name,
+                                        anchorValue: tag.name
+                                    });
+                                    id += 1;
+                                }
+                            }
+                        };
+                        // tslint:disable-next-line:prefer-for-of
+                        for (var i = 0; i < aTags.length; i++) {
+                            _loop_1(i);
+                        }
+                    }
+                });
+            }
+            anchors.push({
+                value: 1,
+                viewValue: this.LANG.QMSCKEDITOR.ANCHOR_ATTACHMENT,
+                anchorValue: exports.LinkAnchor.Attachment
+            });
+            anchors.push({
+                value: 2,
+                viewValue: this.LANG.QMSCKEDITOR.ANCHOR_RELATED_DOCUMENT,
+                anchorValue: exports.LinkAnchor.Related
+            });
+            return anchors;
+        };
+        QMSCKEditorBpmnComponent.prototype.reloadAnchors = function () {
+            if (!!this.linkId && this.documentType == exports.QMSCKEditorDocumentType.document) {
+                this.getAnchorDocument(this.linkId);
+            }
+        };
+        QMSCKEditorBpmnComponent.prototype.buildLink = function () {
+            var link = new ILink();
+            link.target = this.selectedTarget;
+            link.title = this.linkTitle;
+            link.url = this.linkUrl;
+            link.documentType = this.documentType || exports.QMSCKEditorDocumentType.other;
+            link.icon = this.documentIcons[link.documentType];
+            link.content = '';
+            switch (this.documentType) {
+                case exports.QMSCKEditorDocumentType.document:
+                    link.url = "" + CKEditorLinkConst.DOCUMENT_PARTIAL_URL + this.linkId + "#" + this.anchorByName;
+                    link.content = this.LANG.QMSCKEDITOR.ID + ": " + this.linkId;
+                    break;
+                case exports.QMSCKEditorDocumentType.process:
+                    link.content = this.LANG.QMSCKEDITOR.ID + ": " + this.linkId;
+                    break;
+                case exports.QMSCKEditorDocumentType.area:
+                    link.content = this.LANG.QMSCKEDITOR.ID + ": " + this.linkId;
+                    break;
+                case exports.QMSCKEditorDocumentType.folder:
+                    link.content = this.LANG.QMSCKEDITOR.ID + ": " + this.linkId;
+                    break;
+            }
+            return link;
+        };
         QMSCKEditorBpmnComponent.prototype.onSaveAsTemplate = function () {
             var graph = window[FlowChartConst.GRAPH];
             var jsonContent = JSON.stringify(graph.toJSON());
-            var data = new QMSCKEditorBpmn();
-            data = {
+            var template = new QMSCKEditorBpmn();
+            template = {
                 id: guidHelper.empty,
                 jsonContent: jsonContent,
                 isTemplate: true,
                 templateName: ''
             };
+            var data = new QMSCKEditorSaveAsTemplate();
+            data.templateType = CKEditorEventConst.QMSCK_BPMN;
+            data.bpmn = template;
             var dialogTemplate = this.dialog.open(SaveTemplateComponent, {
                 width: '450px',
                 height: '220px',
@@ -13158,10 +13855,13 @@
                 if (graph) {
                     graph.fromJSON(JSON.parse(selectedJsonContent));
                 }
+                window[FlowChartConst.MY_CELL_VIEW] = null;
+                window[FlowChartConst.SELECTED_SHAPE_ID] = '';
+                window[FlowChartConst.SHAPE_TYPE] = '';
+                this.onSeletedCellView();
             }
         };
         QMSCKEditorBpmnComponent.prototype.onDeleteTemplate = function (title, content) {
-            var _this = this;
             var data = new QMSCKEditorDialogData();
             data.title = title;
             data.content = content;
@@ -13175,61 +13875,312 @@
                 .pipe(operators.takeUntil(this.ngUnsubcribe))
                 .subscribe(function (result) {
                 if (result) {
-                    var id_1 = window[FlowChartConst.SELECTED_FLOWCHART_ID];
-                    _this.bpmnApiService
-                        .bpmnDeleteTemplate(id_1)
-                        .pipe(operators.takeUntil(_this.ngUnsubcribe))
-                        .subscribe(function (result) {
-                        if (result) {
-                            _this.bmpnService.removeSelectItem(id_1);
-                            _this.bmpnService.setDefaultSelectedValue();
-                            window[FlowChartConst.IS_SELECTED_TEMPLATE] = false;
-                            QMSCKEditorToastService.success(_this.LANG.QMSCKEDITOR.DELETED);
-                        }
-                        else {
-                            QMSCKEditorToastService.error(_this.LANG.QMSCKEDITOR.DELETE_FAILED);
-                        }
-                    });
                 }
             });
         };
-        QMSCKEditorBpmnComponent.prototype.onResetTemplate = function () {
-            var ogrJsonContent = window[FlowChartConst.ORG_JSONCONTENT];
-            if (ogrJsonContent) {
-                var graph = window[FlowChartConst.GRAPH];
-                if (graph) {
-                    graph.fromJSON(JSON.parse(ogrJsonContent));
-                    this.bmpnService.setDefaultSelectedValue();
-                    window[FlowChartConst.IS_SELECTED_TEMPLATE] = false;
+        QMSCKEditorBpmnComponent.prototype.onSeletedCellView = function () {
+            this.selectedCellView = window[FlowChartConst.MY_CELL_VIEW];
+            this.initLink();
+            if (!!this.selectedCellView) {
+                var attributes_1 = this.selectedCellView.model.attributes;
+                var excludedTypes = ['bpmn2.Flow', 'bpmn2.HeaderedPool', 'bpmn2.ConversationLink', 'bpmn2.AnnotationLink', 'bpmn2.DataAssociation'];
+                if (!attributes_1.type || excludedTypes.findIndex(function (type) { return type.toLowerCase() == attributes_1.type.toLowerCase(); }) > -1) {
+                    this.selectedCellView = null;
+                }
+                else {
+                    this.linkUrl = attributes_1.linkUrl || '';
+                    if (!!this.linkUrl) {
+                        this.parseLinkUrl(this.linkUrl);
+                        this.selectedTarget = attributes_1.linkTarget;
+                        this.linkTitle = attributes_1.linkTitle;
+                        this.link = this.buildLink();
+                    }
                 }
             }
         };
-        QMSCKEditorBpmnComponent.prototype.showInfoMessage = function (title, content) {
-            var data = new QMSCKEditorDialogData();
-            data.title = title;
-            data.content = content;
-            data.isMessage = true;
-            var dialogRef = this.dialog.open(QMSCKEditorConfirmComponent, {
-                width: '500px',
-                minHeight: '175px',
-                data: data
-            });
-            dialogRef
-                .afterClosed()
-                .pipe(operators.takeUntil(this.ngUnsubcribe))
-                .subscribe(function (result) {
-                if (result) {
-                    //TODO
-                }
+        QMSCKEditorBpmnComponent.prototype.onTabChange = function ($event) {
+            window[FlowChartConst.TAB_NAME] = $event.tab.textLabel;
+            if ($event.tab.textLabel == this.LANG.BPMN.PROPERTIES) {
+                this.bmpnService.openShapeFunctionality(this.LANG);
+            }
+        };
+        QMSCKEditorBpmnComponent.prototype.parseLinkUrl = function (url) {
+            if (!!url) {
+                var 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 == exports.QMSCKEditorDocumentType.document && hashIndex > -1) {
+                    this.anchorByName = url.substr(hashIndex + 1, url.length - hashIndex);
+                    this.getAnchorDocument(this.linkId);
+                }
+            }
+        };
+        QMSCKEditorBpmnComponent.prototype.getPartialUrl = function (type) {
+            switch (type) {
+                case exports.QMSCKEditorDocumentType.document:
+                    return CKEditorLinkConst.DOCUMENT_PARTIAL_URL;
+                case exports.QMSCKEditorDocumentType.process:
+                    return CKEditorLinkConst.PROCESS_PARTIAL_URL;
+                case exports.QMSCKEditorDocumentType.area:
+                    return CKEditorLinkConst.AREA_PARTIAL_URL;
+                case exports.QMSCKEditorDocumentType.folder:
+                    return CKEditorLinkConst.FOLDER_PARTIAL_URL;
+                default:
+                    return '';
+            }
+        };
+        QMSCKEditorBpmnComponent.prototype.getLinkId = function (url, type) {
+            var partialUrlIndex = 0;
+            var partialUrlLength = 0;
+            var id = '';
+            var from = 0;
+            var urlLowerCase = !!url ? url.toLowerCase() : '';
+            var partialUrl = this.getPartialUrl(type).toLowerCase();
+            var hashIndex = urlLowerCase.indexOf('#');
+            if (!!partialUrl) {
+                partialUrlIndex = urlLowerCase.indexOf(partialUrl);
+                partialUrlLength = partialUrl.length;
+                from = partialUrlIndex + partialUrlLength;
+                if (type == exports.QMSCKEditorDocumentType.document && hashIndex > -1) {
+                    id = urlLowerCase.substr(from, hashIndex - from);
+                }
+                else {
+                    var length = urlLowerCase.substr(from).indexOf('/');
+                    if (length < 0) {
+                        id = urlLowerCase.substr(from);
+                    }
+                    else {
+                        id = urlLowerCase.substr(from, length);
+                    }
+                }
+            }
+            if (type == exports.QMSCKEditorDocumentType.document) {
+                try {
+                    parseInt(id, 10);
+                }
+                catch (_a) {
+                    id = '';
+                }
+            }
+            return id;
+        };
+        QMSCKEditorBpmnComponent.prototype.getDocumentType = function (url) {
+            if (url.indexOf(CKEditorLinkConst.DOCUMENT_PARTIAL_URL) > -1) {
+                return exports.QMSCKEditorDocumentType.document;
+            }
+            else if (url.indexOf(CKEditorLinkConst.PROCESS_PARTIAL_URL) > -1) {
+                return exports.QMSCKEditorDocumentType.process;
+            }
+            else if (url.indexOf(CKEditorLinkConst.AREA_PARTIAL_URL) > -1) {
+                return exports.QMSCKEditorDocumentType.area;
+            }
+            else if (url.indexOf(CKEditorLinkConst.FOLDER_PARTIAL_URL) > -1) {
+                return exports.QMSCKEditorDocumentType.folder;
+            }
+            return exports.QMSCKEditorDocumentType.other;
+        };
+        QMSCKEditorBpmnComponent.prototype.updateCellViewValues = function () {
+            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);
+            }
+        };
+        QMSCKEditorBpmnComponent.prototype.onResetTemplate = function () {
+            var ogrJsonContent = window[FlowChartConst.ORG_JSONCONTENT];
+            if (ogrJsonContent) {
+                var graph = window[FlowChartConst.GRAPH];
+                if (graph) {
+                    graph.fromJSON(JSON.parse(ogrJsonContent));
+                    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();
+            }
+        };
+        QMSCKEditorBpmnComponent.prototype.showConfirmDialog = function (title, content, isMessage, callback) {
+            var data = new QMSCKEditorDialogData();
+            data.title = title;
+            data.content = content;
+            data.isMessage = isMessage;
+            var dialogRef = this.dialog.open(QMSCKEditorConfirmComponent, {
+                width: '500px',
+                minHeight: '175px',
+                data: data
+            });
+            dialogRef
+                .afterClosed()
+                .pipe(operators.takeUntil(this.ngUnsubcribe))
+                .subscribe(function (result) {
+                if (callback) {
+                    callback(result);
+                }
+            });
+        };
+        QMSCKEditorBpmnComponent.prototype.toImageMap = function (id, cells, clientRect) {
+            var 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++) {
+                    var shape = cells[i];
+                    var size_1 = shape['size'] || { width: 0, height: 0 };
+                    var bbox_1 = shape['bbox'] || { x: 0, y: 0 };
+                    var position_1 = shape['position'] || { x: 0, y: 0 };
+                    bbox_1.x = position_1.x;
+                    bbox_1.y = position_1.y;
+                    bbox_1.width = size_1.width;
+                    bbox_1.height = size_1.height;
+                    shape['bbox'] = bbox_1;
+                    shape['additionalWidth'] = (bbox_1.width > size_1.width) ? (bbox_1.width - size_1.width) : 0;
+                }
+                var offsetX = this.getMinXOffset(cells);
+                var offsetY = this.getMinYOffset(cells);
+                var additionalOffsetY = 0;
+                for (var i = 0; i < cells.length; i++) {
+                    var shape = cells[i];
+                    var href = shape.linkUrl;
+                    var target = shape.linkTarget;
+                    var 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);
+                        }
+                        var 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;
+        };
+        QMSCKEditorBpmnComponent.prototype.getMinXOffset = function (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;
+        };
+        QMSCKEditorBpmnComponent.prototype.getXPosition = function (shape) {
+            return shape.bbox.x - (shape.additionalWidth / 2);
+        };
+        QMSCKEditorBpmnComponent.prototype.getYPosition = function (shape) {
+            return shape.bbox.y - (shape.additionalWidth / 2);
+        };
+        QMSCKEditorBpmnComponent.prototype.getMinYOffset = function (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;
         };
+        ;
         return QMSCKEditorBpmnComponent;
     }(QMSCKEditorBaseComponent));
     QMSCKEditorBpmnComponent.decorators = [
         { type: i0.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,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\");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 = function () { return [
@@ -13237,8 +14188,9 @@
         { type: TranslateLibraryService },
         { type: BpmnService },
         { type: QMSCKEditorBpmnApiService },
+        { type: QMSCKEditorLinkService },
         { type: dialog.MatDialogRef },
-        { type: String, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
+        { type: QMSCKEditorBpmnData, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
     ]; };
     QMSCKEditorBpmnComponent.propDecorators = {
         onMessage: [{ type: i0.HostListener, args: ['window:message', ['$event'],] }]
@@ -15739,7 +16691,7 @@
         { type: i0.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}"]
+                    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__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}"]
                 },] }
     ];
     QMSCKEditorImageMapComponent.ctorParameters = function () { return [
@@ -15829,7 +16781,7 @@
         { type: i0.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}"]
+                    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 = function () { return [
@@ -16161,12 +17113,17 @@
         */
         QMSCKEditorComponent.prototype.bpmnEventHandling = function (id) {
             var _this = this;
+            var data = new QMSCKEditorBpmnData();
+            data.id = id;
+            data.module = this.qmsckData.module;
+            data.entityId = this.qmsckData.entityId;
+            data.editorContent = this.qmsckContentInput;
             var dialogTemplate = this.dialog.open(QMSCKEditorBpmnComponent, {
                 width: '89vw',
                 maxWidth: '100vw',
                 height: '700px',
                 maxHeight: '100vw',
-                data: id,
+                data: data,
                 disableClose: true
             });
             dialogTemplate
@@ -16261,7 +17218,7 @@
                     ],
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.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{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}@font-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}.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 = function () { return [
@@ -16329,7 +17286,8 @@
                         autocomplete.MatAutocompleteModule,
                         scrolling.ScrollingModule,
                         i1.HttpClientModule,
-                        SharedModule
+                        SharedModule,
+                        tabs.MatTabsModule,
                     ],
                     providers: [],
                     exports: [QMSCKEditorComponent],
@@ -16442,7 +17400,7 @@
         { type: i0.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 .pr-8{padding-right:8px}"]
+                    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 = function () { return []; };
@@ -16492,20 +17450,6 @@
                 },] }
     ];
 
-    var IconModel = /** @class */ (function () {
-        function IconModel(icon, tooltip, cssClass, svg, isShow) {
-            if (cssClass === void 0) { cssClass = ''; }
-            if (svg === void 0) { svg = false; }
-            if (isShow === void 0) { isShow = true; }
-            this.icon = icon;
-            this.tooltip = tooltip;
-            this.svg = svg;
-            this.cssClass = cssClass;
-            this.isShow = isShow;
-        }
-        return IconModel;
-    }());
-
     var ConfirmDialog = /** @class */ (function () {
         function ConfirmDialog() {
             this.title = '';
@@ -16562,6 +17506,99 @@
                 },] }
     ];
 
+    var QMSTabGroupAdvancedDirective = /** @class */ (function () {
+        function QMSTabGroupAdvancedDirective(ele) {
+            this.ele = ele;
+        }
+        QMSTabGroupAdvancedDirective.prototype.ngOnInit = function () {
+            if (this.ele) {
+                this.ele.nativeElement.classList.add('qms-tab-group-advanced');
+                if (this.color) {
+                    this.ele.nativeElement.classList.add(this.color);
+                }
+                if (this.type === 'fixed') {
+                    this.ele.nativeElement.classList.add('qms-tab-group-advanced-fixed');
+                }
+            }
+        };
+        return QMSTabGroupAdvancedDirective;
+    }());
+    QMSTabGroupAdvancedDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qms-tab-group-advanced]',
+                },] }
+    ];
+    QMSTabGroupAdvancedDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    QMSTabGroupAdvancedDirective.propDecorators = {
+        color: [{ type: i0.Input }],
+        type: [{ type: i0.Input }]
+    };
+
+    var QMSTabGroupDirective = /** @class */ (function () {
+        function QMSTabGroupDirective(ele) {
+            this.ele = ele;
+        }
+        QMSTabGroupDirective.prototype.ngOnInit = function () {
+            if (this.ele) {
+                this.ele.nativeElement.classList.add('qms-tab-group');
+            }
+        };
+        return QMSTabGroupDirective;
+    }());
+    QMSTabGroupDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qms-tab-group]',
+                },] }
+    ];
+    QMSTabGroupDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+
+    var QMSTabLabelDirective = /** @class */ (function () {
+        function QMSTabLabelDirective(ele) {
+            this.ele = ele;
+        }
+        QMSTabLabelDirective.prototype.ngOnInit = function () {
+            if (this.ele) {
+                this.ele.nativeElement.classList.add('qms-tab-label');
+            }
+        };
+        return QMSTabLabelDirective;
+    }());
+    QMSTabLabelDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qms-tab-label]',
+                },] }
+    ];
+    QMSTabLabelDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+
+    var QMSTabModule = /** @class */ (function () {
+        function QMSTabModule() {
+        }
+        return QMSTabModule;
+    }());
+    QMSTabModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        QMSTabGroupAdvancedDirective,
+                        QMSTabGroupDirective,
+                        QMSTabLabelDirective
+                    ],
+                    imports: [
+                        common.CommonModule
+                    ],
+                    exports: [
+                        QMSTabGroupAdvancedDirective,
+                        QMSTabGroupDirective,
+                        QMSTabLabelDirective
+                    ]
+                },] }
+    ];
+
     var QmsBannerContent = /** @class */ (function () {
         function QmsBannerContent() {
         }
@@ -16589,7 +17626,7 @@
 
     var QmsBannerComponent = /** @class */ (function () {
         function QmsBannerComponent() {
-            this.type = exports.BannerType.primary;
+            this.type = '' || exports.BannerType.primary;
             this.contents = [];
             this.buttonClick = new i0.EventEmitter();
         }
@@ -16733,6 +17770,76 @@
                 },] }
     ];
 
+    var QmsStatusDropdownClassTypeMapping = {
+        1: 'light',
+        2: 'warning',
+        3: 'success',
+        4: 'danger'
+    };
+    var QmsStatusDropdownComponent = /** @class */ (function () {
+        function QmsStatusDropdownComponent() {
+            this.options = [];
+            this.valueChange = new i0.EventEmitter();
+        }
+        QmsStatusDropdownComponent.prototype.getClassType = function (type) {
+            return QmsStatusDropdownClassTypeMapping[type];
+        };
+        QmsStatusDropdownComponent.prototype.onModelChange = function () {
+            this.valueChange.emit(this.value);
+        };
+        return QmsStatusDropdownComponent;
+    }());
+    QmsStatusDropdownComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'qms-status-dropdown',
+                    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}"]
+                },] }
+    ];
+    QmsStatusDropdownComponent.propDecorators = {
+        options: [{ type: i0.Input }],
+        value: [{ type: i0.Input }],
+        width: [{ type: i0.Input }],
+        valueChange: [{ type: i0.Output }]
+    };
+
+    var QmsStatusDropdownModule = /** @class */ (function () {
+        function QmsStatusDropdownModule() {
+        }
+        return QmsStatusDropdownModule;
+    }());
+    QmsStatusDropdownModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        QmsStatusDropdownComponent
+                    ],
+                    imports: [
+                        common.CommonModule,
+                        forms.FormsModule,
+                        forms.ReactiveFormsModule,
+                        select.MatSelectModule,
+                        core.MatOptionModule,
+                        formField.MatFormFieldModule
+                    ],
+                    exports: [
+                        QmsStatusDropdownComponent
+                    ]
+                },] }
+    ];
+
+    exports.QmsStatusDropdownType = void 0;
+    (function (QmsStatusDropdownType) {
+        QmsStatusDropdownType[QmsStatusDropdownType["Light"] = 1] = "Light";
+        QmsStatusDropdownType[QmsStatusDropdownType["Warning"] = 2] = "Warning";
+        QmsStatusDropdownType[QmsStatusDropdownType["Success"] = 3] = "Success";
+        QmsStatusDropdownType[QmsStatusDropdownType["Danger"] = 4] = "Danger";
+    })(exports.QmsStatusDropdownType || (exports.QmsStatusDropdownType = {}));
+    var QmsStatusDropdownOption = /** @class */ (function () {
+        function QmsStatusDropdownOption() {
+        }
+        return QmsStatusDropdownOption;
+    }());
+
     var QMSTableAction = /** @class */ (function () {
         function QMSTableAction(elRef) {
             this.elRef = elRef;
@@ -16854,16 +17961,6 @@
         ModuleType[ModuleType["risk"] = 4] = "risk";
     })(exports.ModuleType || (exports.ModuleType = {}));
 
-    var StepModel = /** @class */ (function () {
-        function StepModel(id, name, disabled, selected) {
-            this.id = id;
-            this.disabled = disabled;
-            this.name = name;
-            this.selected = selected;
-        }
-        return StepModel;
-    }());
-
     /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
     var QmsStepperComponent = /** @class */ (function () {
         function QmsStepperComponent(changeDetector) {
@@ -16878,14 +17975,15 @@
         };
         QmsStepperComponent.prototype.changeStep = function (selectedIndex) {
             this.currentStep = selectedIndex;
-            this.selectionChangeEvent.emit(selectedIndex);
+            this.selectionChangeEvent.emit(this.currentStep);
         };
         return QmsStepperComponent;
     }());
     QmsStepperComponent.decorators = [
         { type: i0.Component, args: [{
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     selector: 'app-qms-stepper',
-                    template: "<div class=\"qms-stepper-container\">\r\n    <div *ngIf=\"isHorizontal\">\r\n        <mat-horizontal-stepper [style.width.px]=\"width\" labelPosition=\"{{labelPosition}}\" #stepper\r\n            (selectionChange)=\"changeStep($event)\" class=\"overflow-auto\" [selectedIndex]=\"currentStep\">\r\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\r\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\r\n                <ng-template matStepLabel>\r\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\">{{step.name}}</span>\r\n                </ng-template>\r\n                <ng-template matStepContent>\r\n                </ng-template>\r\n            </mat-step>\r\n            <ng-template matStepperIcon=\"edit\">\r\n                {{stepper.selectedIndex + 1}}\r\n            </ng-template>\r\n        </mat-horizontal-stepper>\r\n    </div>\r\n    <div *ngIf=\"!isHorizontal\">\r\n        <mat-vertical-stepper [style.height.px]=\"height\" #stepper (selectionChange)=\"changeStep($event.selectedIndex)\"\r\n            [selectedIndex]=\"currentStep\" class=\"overflow-auto\">\r\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\r\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\r\n                <ng-template matStepLabel>\r\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\">{{step.name}}</span>\r\n                </ng-template>\r\n                <ng-template matStepContent>\r\n                </ng-template>\r\n            </mat-step>\r\n            <ng-template matStepperIcon=\"edit\">\r\n                <span>{{stepper.selectedIndex + 1}}</span>\r\n            </ng-template>\r\n        </mat-vertical-stepper>\r\n    </div>\r\n</div>",
+                    template: "<div class=\"qms-stepper-container\">\r\n    <div *ngIf=\"isHorizontal\">\r\n        <mat-horizontal-stepper [style.width.px]=\"width\" labelPosition=\"{{labelPosition}}\" #stepper\r\n            (selectionChange)=\"changeStep($event.selectedIndex)\" class=\"overflow-auto\" [selectedIndex]=\"currentStep\">\r\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\r\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\r\n                <ng-template matStepLabel>\r\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\">{{step.name}}</span>\r\n                </ng-template>\r\n                <ng-template matStepContent>\r\n                </ng-template>\r\n            </mat-step>\r\n            <ng-template matStepperIcon=\"edit\">\r\n                {{stepper.selectedIndex + 1}}\r\n            </ng-template>\r\n        </mat-horizontal-stepper>\r\n    </div>\r\n    <div *ngIf=\"!isHorizontal\">\r\n        <mat-vertical-stepper [style.height.px]=\"height\" #stepper (selectionChange)=\"changeStep($event.selectedIndex)\"\r\n            [selectedIndex]=\"currentStep\" class=\"overflow-auto\">\r\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\r\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\r\n                <ng-template matStepLabel>\r\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\">{{step.name}}</span>\r\n                </ng-template>\r\n                <ng-template matStepContent>\r\n                </ng-template>\r\n            </mat-step>\r\n            <ng-template matStepperIcon=\"edit\">\r\n                <span>{{stepper.selectedIndex + 1}}</span>\r\n            </ng-template>\r\n        </mat-vertical-stepper>\r\n    </div>\r\n</div>",
                     styles: [".qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item]{height:22px!important;padding:8px 12px;left:0;top:0;border-radius:4px;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-horizontal-stepper-header{width:auto}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-vertical-stepper-header{width:156px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon{background:rgba(0,0,0,.6);margin-right:14px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon-selected{background-color:#1954a9!important;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-selected=true] .title-step{font-weight:600!important;outline:none!important}.qms-stepper-container ::ng-deep mat-step-header:active{background:#e5eefb}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep mat-step-header .mat-ripple-element{background-color:rgba(229,238,251,.3)}.qms-stepper-container ::ng-deep mat-step-header:hover{background:#f2f7fd}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=disabled]{pointer-events:none!important;cursor:not-allowed;opacity:.6;height:22px!important;width:156px;left:0;top:0;border-radius:4px;padding:8px 12px}.qms-stepper-container ::ng-deep mat-step-header:focus{border:2px solid #1954a9}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-keyboard-focused,.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-program-focused{border:3px solid #1954a9;background:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus:not(:focus-visible){border:none}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=active]{pointer-events:none!important;cursor:not-allowed;opacity:.6}.qms-stepper-container .title-step{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0;text-align:center;color:#323232;outline:none!important}.qms-stepper-container ::ng-deep .mat-step-icon{width:24px;height:24px}.qms-stepper-container ::ng-deep .mat-step-icon .mat-step-icon-content{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0;text-align:center;color:#fff;padding-top:1px}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line:before{border-left-width:0;border-right-width:0}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line{margin-left:23px;background:#0000001f;height:30px;width:1px}.qms-stepper-container ::ng-deep .mat-stepper-horizontal-line{height:1px;width:22px!important;left:0;top:18px;border-radius:0;margin:8px;background:#0000001f;max-width:22px!important}"]
                 },] }
     ];
@@ -17061,6 +18159,7 @@
         function SelectPopupData() {
             this.treeData = [];
             this.headerName = '';
+            this.selectIncludeLabel = '';
             this.selectedNode = [];
             this.disabledList = [];
         }
@@ -17104,6 +18203,7 @@
             this.data = data;
             this.ngUnsubscribe = new rxjs.Subject();
             this.headerName = '';
+            this.selectIncludeLabel = '';
             this.treeData = [];
             this.checkedNodeList = [];
             this.selectedOptions = [];
@@ -17137,6 +18237,7 @@
             this.checkedNodeList = (data === null || data === void 0 ? void 0 : data.selectedList) || [];
             this.includeChildren = data === null || data === void 0 ? void 0 : data.includeChildren;
             this.editItem = data.editItem;
+            this.selectIncludeLabel = data.selectIncludeLabel;
             appIconService.registerProcessIcon(iconRegistry, domSanitizer);
             appIconService.registerProcessAreaIcon(iconRegistry, domSanitizer);
             appIconService.registerDocumentIcon(iconRegistry, domSanitizer);
@@ -17215,19 +18316,17 @@
         SelectIncludeChildrenPopUpComponent.prototype.removeCheckedNodeList = function (item) {
             var index = this.checkedNodeList.findIndex(function (x) { return (x.id.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === item.parentId.toLowerCase()); });
             if (index >= 0) {
-                var position = this.selectedOptions.findIndex(function (x) { return x.id === item.id && x.parentId === item.parentId; });
-                if (position >= 0) {
-                    this.selectedOptions.splice(position, 1);
-                }
                 if (this.checkedNodeList[index].type === exports.SelectOptionTypes.IncludeChildren) {
                     this.removeIncludeChildren(item);
-                }
-                if (this.includeChildren) {
                     this.refactorSelectList(item);
                 }
                 else {
-                    this.checkedNodeList.splice(index, 1);
+                    var position = this.selectedOptions.findIndex(function (x) { return x.id === item.id && x.parentId === item.parentId; });
+                    if (position >= 0) {
+                        this.selectedOptions.splice(position, 1);
+                    }
                 }
+                this.checkedNodeList.splice(index, 1);
                 this.enableSelectedNode({ id: item.id, parentId: item.parentId, itemName: item.name, type: exports.SelectOptionTypes.IncludeChildren });
                 this.selectedData = this.mapSelectOptionToTreeNode(this.selectedOptions);
             }
@@ -17284,11 +18383,6 @@
         SelectIncludeChildrenPopUpComponent.prototype.getImagePath = function (item) {
             return this.domSanitizer.bypassSecurityTrustResourceUrl(item.itemIconBase64);
         };
-        SelectIncludeChildrenPopUpComponent.prototype.isMatchTrue = function (arr, arr2) {
-            return arr.every(function (i) {
-                return arr2.includes(i);
-            });
-        };
         SelectIncludeChildrenPopUpComponent.prototype.setResultHeight = function (arr) {
             var maxHeight = 484;
             var popup_content = document.getElementsByClassName('qmslib_related_popup_content')[0];
@@ -17350,12 +18444,14 @@
             listChildren = this.getAllChildrenNodeRecursive(listChildren, item);
             var itemIndex = this.selectedOptions.findIndex(function (node) { return node.id === item.id && node.parentId === item.parentId; });
             if (itemIndex >= 0) {
+                this.enableSelectedNode(this.selectedOptions[itemIndex]);
                 this.selectedOptions.splice(itemIndex, 1);
             }
             listChildren.forEach(function (x) {
                 var index = _this.selectedOptions.findIndex(function (node) { return node.id === x.id && node.parentId === x.parentId; });
                 if (index >= 0) {
                     _this.selectedOptions.splice(index, 1);
+                    _this.disabledList = _this.disabledList.filter(function (node) { return !(x.id === node.id && x.parentId === node.parentId); });
                 }
             });
         };
@@ -17443,30 +18539,17 @@
                     disabled: false,
                 });
             }
-            else {
-                // this.selectRelated(node);
-            }
         };
         SelectIncludeChildrenPopUpComponent.prototype.isNodeSelected = function (node) {
             return this.checkedNodeList.filter(function (x) { return (x.id.toLowerCase() === node.id.toLowerCase() && x.parentId.toLowerCase() === node.parentId.toLowerCase()); }).length > 0;
         };
         SelectIncludeChildrenPopUpComponent.prototype.getChildrenOfFolder = function (node) {
-            // if (this.splitView) {
-            // const parentTexts = this.elem.nativeElement.querySelectorAll('.text-node-parent');
-            // [].forEach.call(parentTexts, (el) => {
-            //     el.classList.remove('active-item');
-            // });
-            // const itemElement = document.querySelectorAll(`#_${node.parentId ? node.parentId : ''}_${node.id}_${node.level}`);
-            // [].forEach.call(itemElement, (el) => {
-            //     el.classList.add('active-item');
-            // });
             var item = new SelectOption();
             item.id = node.id;
             item.itemName = node.name;
             item.levelType = node.levelType;
             this.selectedFolder = node;
             this.onExpandFolder.emit(item);
-            // }
         };
         SelectIncludeChildrenPopUpComponent.prototype.selectNodeTreeEvent = function (node) {
             var position = this.selectedOptions.findIndex(function (x) { return x.id === node.id && x.parentId === node.parentId; });
@@ -17532,14 +18615,15 @@
         SelectIncludeChildrenPopUpComponent.prototype.setValue = function (e) {
             var _this = this;
             this.includeChildren = !!e.checked;
-            if (!this.includeChildren) {
-                this.checkedNodeList.forEach(function (node) {
-                    _this.disableSelectedNode(node);
-                });
-            }
-            else {
-                this.disabledList = this.orginalDisableList;
-            }
+            this.disabledList = $.extend(true, [], this.orginalDisableList || []);
+            this.checkedNodeList.forEach(function (node) {
+                if (!_this.includeChildren) {
+                    _this.disableSelectIncludeNode(node);
+                }
+                else {
+                    _this.disableSelectSingleNode(node);
+                }
+            });
         };
         SelectIncludeChildrenPopUpComponent.prototype.mapSelectOptionToTreeNode = function (list) {
             return list.map(function (x) {
@@ -17572,8 +18656,9 @@
                 var selectedParentList = parentList.filter(function (x) { return _this.selectedOptions
                     .findIndex(function (selectedNode) { return x.id === selectedNode.id && x.parentId === selectedNode.parentId; }) >= 0; });
                 if (selectedParentList.length > 0) {
-                    var highestSelectedNode = selectedParentList[selectedParentList.length - 1];
-                    this.combineNodes(highestSelectedNode);
+                    var highestSelectedNode_1 = selectedParentList[selectedParentList.length - 1];
+                    this.combineNodes(highestSelectedNode_1);
+                    this.disabledList = this.disabledList.filter(function (x) { return !(x.id === highestSelectedNode_1.id && x.parentId === highestSelectedNode_1.parentId); });
                 }
                 else {
                     this.combineNodes({
@@ -17582,6 +18667,7 @@
                         type: exports.SelectOptionTypes.IncludeChildren,
                         parentId: node.parentId
                     });
+                    this.disabledList = this.disabledList.filter(function (x) { return !(x.id === node.id && x.parentId === node.parentId); });
                 }
             }
             else {
@@ -17614,10 +18700,11 @@
                 }
                 var selectIndex = _this.selectedOptions.findIndex(function (node) { return node.id === child.id && node.parentId === child.parentId; });
                 if (selectIndex >= 0) {
+                    _this.disabledList = _this.disabledList.filter(function (node) { return !(child.id === node.id && child.parentId === node.parentId); });
                     nodeList.push(child);
                 }
             });
-            if (nodeList.length > 0 || children.length === 0) {
+            if (selectedNodeIndex >= 0 || nodeList.length > 0 || children.length === 0) {
                 if (selectedNodeIndex < 0) {
                     this.checkedNodeList.push({
                         id: root.id,
@@ -17650,21 +18737,23 @@
             }
             return listParent;
         };
-        SelectIncludeChildrenPopUpComponent.prototype.disableSelectedNode = function (node) {
+        SelectIncludeChildrenPopUpComponent.prototype.disableSelectIncludeNode = function (node) {
             var _this = this;
             if (node.type === exports.SelectOptionTypes.IncludeChildren) {
                 var children = [];
-                children = this.getAllChildrenNodeRecursive(children, {
-                    id: node.id,
-                    name: node.itemName,
-                    parentId: node.parentId,
-                    level: 0,
-                    expandable: true,
-                    hasChild: true,
-                    disabled: false
-                });
-                var disableNodes_1 = [];
-                var index = this.disabledList.findIndex(function (x) { return x.id === node.id && x.parentId === node.parentId; });
+                children = node.children.map(function (x) {
+                    return {
+                        id: x.id,
+                        name: x.itemName,
+                        parentId: node.id,
+                        level: 0,
+                        expandable: true,
+                        hasChild: true,
+                        disabled: false
+                    };
+                });
+                var disableNodes_1 = [];
+                var index = this.disabledList.findIndex(function (x) { return x.id === node.id && x.parentId === node.parentId; });
                 if (index < 0) {
                     disableNodes_1.push(node);
                 }
@@ -17677,6 +18766,16 @@
                 this.disabledList = __spreadArray(__spreadArray([], __read(this.disabledList)), __read(disableNodes_1));
             }
         };
+        SelectIncludeChildrenPopUpComponent.prototype.disableSelectSingleNode = function (node) {
+            if (node.type === exports.SelectOptionTypes.SelectOne) {
+                var disableNodes = [];
+                var index = this.disabledList.findIndex(function (x) { return x.id === node.id && x.parentId === node.parentId; });
+                if (index < 0) {
+                    disableNodes.push(node);
+                }
+                this.disabledList = __spreadArray(__spreadArray([], __read(this.disabledList)), __read(disableNodes));
+            }
+        };
         SelectIncludeChildrenPopUpComponent.prototype.enableSelectedNode = function (node) {
             var children = [];
             children = this.getAllChildrenNodeRecursive(children, {
@@ -17696,7 +18795,7 @@
     SelectIncludeChildrenPopUpComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-select-include-children-popup',
-                    template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ headerName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    id=\"qmslib_related_popup_search\"\r\n    class=\"input__field\"\r\n    (click)=\"showSearchResult()\"\r\n  >\r\n    <input\r\n      #name\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n      #autoCompleteInputSearch\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n  <div class=\"select__toggle-include\">\r\n    <mat-slide-toggle\r\n      [checked]=\"includeChildren\"\r\n      (change)=\"setValue($event)\"\r\n      color=\"default\"\r\n      qms-group-options\r\n    >\r\n      <span class=\"text-label\">Select label</span>\r\n    </mat-slide-toggle>\r\n  </div>\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\">\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of filteredOptions\"\r\n          [value]=\"option\"\r\n          (click)=\"selectSearchOption(option)\"\r\n        >\r\n          <qms-list-item type=\"image-square\">\r\n            <mat-icon\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.name\"\r\n              class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n              type=\"image-square\"\r\n            >\r\n              {{ option.itemIcon }}\r\n            </mat-icon>\r\n\r\n            <mat-icon\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.svg\"\r\n              class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n              type=\"image-square\"\r\n              [svgIcon]=\"option.itemIconSvg\"\r\n            >\r\n            </mat-icon>\r\n\r\n            <img\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.path\"\r\n              class=\"mat-icon\"\r\n              [src]=\"option.itemIconPath\"\r\n              type=\"image-square\"\r\n            />\r\n\r\n            <img\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.base64\"\r\n              class=\"mat-icon image-base64\"\r\n              [src]=\"getImagePath(option)\"\r\n              type=\"image-square\"\r\n            />\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                {{ option.itemName }}\r\n              </div>\r\n            </div>\r\n          </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 qmslib_related_popup_content col-12\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\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          (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n          (nodeExpandEvent)=\"getChildrenOfFolder($event)\"\r\n          (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n        ></qms-tree>\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              class=\"select__include-children__count\"\r\n              *ngIf=\"item.noSelectedChildren > 0\"\r\n            >\r\n              {{ getItemSelectedChildrenRatio(item) }}\r\n            </span>\r\n          </span>\r\n\r\n          <mat-icon (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"line__divider\"></div>\r\n\r\n    <div class=\"confirm__button__groups\">\r\n      <button\r\n        *ngIf=\"!checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 7px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }}\r\n      </button>\r\n      <button\r\n        *ngIf=\"checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 0px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n      </button>\r\n      <button\r\n        qms-btn-text\r\n        [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n        (click)=\"onCloseClick()\"\r\n      >\r\n        {{ LANG.CANCEL }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</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>{{ headerName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    id=\"qmslib_related_popup_search\"\r\n    class=\"input__field\"\r\n    (click)=\"showSearchResult()\"\r\n  >\r\n    <input\r\n      #name\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n      #autoCompleteInputSearch\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n  <div class=\"select__toggle-include\">\r\n    <mat-slide-toggle\r\n      [checked]=\"includeChildren\"\r\n      (change)=\"setValue($event)\"\r\n      color=\"default\"\r\n      qms-group-options\r\n    >\r\n      <span class=\"text-label\">{{ selectIncludeLabel }}</span>\r\n    </mat-slide-toggle>\r\n  </div>\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\">\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of filteredOptions\"\r\n          [value]=\"option\"\r\n          (click)=\"selectSearchOption(option)\"\r\n        >\r\n          <qms-list-item type=\"image-square\">\r\n            <mat-icon\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.name\"\r\n              class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n              type=\"image-square\"\r\n            >\r\n              {{ option.itemIcon }}\r\n            </mat-icon>\r\n\r\n            <mat-icon\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.svg\"\r\n              class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n              type=\"image-square\"\r\n              [svgIcon]=\"option.itemIconSvg\"\r\n            >\r\n            </mat-icon>\r\n\r\n            <img\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.path\"\r\n              class=\"mat-icon\"\r\n              [src]=\"option.itemIconPath\"\r\n              type=\"image-square\"\r\n            />\r\n\r\n            <img\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.base64\"\r\n              class=\"mat-icon image-base64\"\r\n              [src]=\"getImagePath(option)\"\r\n              type=\"image-square\"\r\n            />\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                {{ option.itemName }}\r\n              </div>\r\n            </div>\r\n          </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 qmslib_related_popup_content col-12\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\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          (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n          (nodeExpandEvent)=\"getChildrenOfFolder($event)\"\r\n          (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n        ></qms-tree>\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              class=\"select__include-children__count\"\r\n              *ngIf=\"item.noSelectedChildren > 0\"\r\n            >\r\n              {{ getItemSelectedChildrenRatio(item) }}\r\n            </span>\r\n          </span>\r\n\r\n          <mat-icon (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"line__divider\"></div>\r\n\r\n    <div class=\"confirm__button__groups\">\r\n      <button\r\n        *ngIf=\"!checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 7px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }}\r\n      </button>\r\n      <button\r\n        *ngIf=\"checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 0px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n      </button>\r\n      <button\r\n        qms-btn-text\r\n        [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n        (click)=\"onCloseClick()\"\r\n      >\r\n        {{ LANG.CANCEL }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-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 .select__toggle-include{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}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name .select__include-children__count{font-size:.75rem;color:rgba(0,0,0,.38)}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{height:30px;font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:10.25rem}"]
                 },] }
@@ -17779,7 +18878,8 @@
         function QmsBadgesComponent() {
             this.typeBadges = BadgesType;
             this.sizeCircleBadges = BadgeCircleSize;
-            this.type = BadgesType.circle;
+            this.type = '' || BadgesType.circle;
+            this.size = '' || BadgeCircleSize.small;
         }
         QmsBadgesComponent.prototype.ngOnInit = function () {
             if (this.type === BadgesType.circle) {
@@ -17791,8 +18891,8 @@
     QmsBadgesComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-badges',
-                    template: "<div\r\n  class=\"qms-badges-container badges-container-{{ color }} text-color-{{\r\n    color\r\n  }} font-size-12 line-height-22 qms-badges-default\"\r\n  *ngIf=\"type === typeBadges.default\"\r\n>\r\n  <mat-icon class=\"font-size-16\" *ngIf=\"icon\">{{ icon }}</mat-icon\r\n  >\r\n  <span *ngIf=\"contents\">{{ contents }}</span>\r\n</div>\r\n<div\r\n  *ngIf=\"type === typeBadges.circle\"\r\n  class=\"qms-badges-circle-{{ size }} badges-container-circle-{{ color }} text-color-write\"\r\n>\r\n  <span *ngIf=\"contents > 99 && size !== sizeCircleBadges.small\" class=\"font-size-8\">{{ \"99\" }}+</span>\r\n  <span *ngIf=\"contents < 100 && size !== sizeCircleBadges.small\" class=\"font-size-12\">{{ contents }}</span>\r\n</div>\r\n\r\n<div\r\n  class=\"qms-badges-container badges-container-icon-{{ color }} font-size-12 line-height-22 qms-badges-default\"\r\n  *ngIf=\"type === typeBadges.icon\"\r\n>\r\n  <mat-icon class=\"font-size-16 text-color-write\" *ngIf=\"icon\">{{ icon }}</mat-icon\r\n  >\r\n</div>\r\n",
-                    styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.badges-container-primary{background-color:#b7daf8}.badges-container-yellow{background-color:rgba(228,207,83,.3)}.badges-container-green{background-color:rgba(0,128,76,.1);border:#005935}.badges-container-red{background-color:rgba(176,0,32,.08)}.badges-container-orange{background-color:#faede8}.badges-container-grey{background-color:#e5e5e5}.badges-container-brown{background-color:#f0eae7}.badges-container-primary-icon{background-color:#00324e}.badges-container-icon-green{background-color:#005935}.badges-container-icon-red{background-color:#b00020}.badges-container-icon-orange{background-color:#9e360f}.badges-container-icon-brown{background-color:#59280b}.badges-container-circle-primary{background-color:#00324e}.badges-container-circle-orange{background-color:#9e360f}.text-color-primary{color:#00324e}.text-color-red{color:#b00020}.text-color-green{color:#005935}.text-color-yellow{color:#726729}.text-color-grey{color:#525252}.text-color-brown{color:#59280b}.text-color-orange{color:#9e360f}.text-color-write{color:#fff}.qms-badges-container{display:flex;align-items:center;width:100%;height:100%;font-family:Open Sans;font-style:normal;font-weight:600;font-size:12px;line-height:16px}.qms-badges-container-text{margin-top:10px;margin-bottom:10px}.qms-badges-container .margin-horizontal-17{margin-left:17px;margin-right:17px}.qms-badges-container .qms-badges-button{margin-left:auto;margin-right:8px}.qms-badges-circle-large{width:24px;height:24px}.qms-badges-circle-large,.qms-badges-circle-medium{border-radius:50%;display:flex;align-items:center;justify-content:center}.qms-badges-circle-medium{width:20px;height:20px}.qms-badges-circle-small{width:10px;height:10px;border-radius:50%}.qms-badges-circle-small,.qms-badges-default{display:flex;align-items:center;justify-content:center}.qms-badges-default{height:24px;padding:0 5px;border-radius:4px}.qms-badges-default .mat-icon{width:auto;height:auto}.font-bold{font-weight:700}.font-size-14{font-size:14px}.font-size-16{font-size:16px}.font-size-12{font-size:12px}.font-size-8{font-size:8px}.line-height-22{line-height:22px}"]
+                    template: "<div\r\n  class=\"qms-badges-container badges-container-{{ color }} text-color-{{\r\n    color\r\n  }} font-size-14 line-height-22 qms-badges-default\"\r\n  *ngIf=\"type === typeBadges.default\"\r\n>\r\n  <mat-icon class=\"font-size-16\" *ngIf=\"icon && !fontIconGG\">{{\r\n    icon\r\n  }}</mat-icon>\r\n  <mat-icon\r\n    *ngIf=\"itemIconSvg\"\r\n    class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n    [svgIcon]=\"itemIconSvg\"\r\n  ></mat-icon>\r\n  <img *ngIf=\"itemIconPath\" [src]=\"itemIconPath\" />\r\n  <span *ngIf=\"icon && fontIconGG\" class=\"{{ fontIconGG }}\">{{ icon }}</span>\r\n  <span *ngIf=\"contents\">{{ contents }}</span>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"type === typeBadges.circle\"\r\n  class=\"qms-badges-circle-{{ size }} badges-container-circle-{{\r\n    color\r\n  }} text-color-white\"\r\n>\r\n  <span\r\n    *ngIf=\"contents > 99 && size !== sizeCircleBadges.small\"\r\n    class=\"font-size-8\"\r\n  >\r\n    {{ \"99\" }}+\r\n  </span>\r\n  <span\r\n    *ngIf=\"contents < 100 && size !== sizeCircleBadges.small\"\r\n    class=\"font-size-12\"\r\n  >\r\n    {{ contents }}\r\n  </span>\r\n</div>\r\n\r\n<div\r\n  class=\"qms-badges-container badges-container-icon-{{\r\n    color\r\n  }} font-size-12 line-height-22 qms-badges-default\"\r\n  *ngIf=\"type === typeBadges.icon\"\r\n>\r\n  <mat-icon class=\"font-size-16 text-color-white\" *ngIf=\"icon && !fontIconGG\">{{\r\n    icon\r\n  }}</mat-icon>\r\n  <mat-icon\r\n    *ngIf=\"itemIconSvg\"\r\n    class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n    [svgIcon]=\"itemIconSvg\"\r\n  ></mat-icon>\r\n  <img *ngIf=\"itemIconPath\" [src]=\"itemIconPath\" />\r\n  <span *ngIf=\"fontIconGG\" class=\"text-color-white {{ fontIconGG }}\">\r\n    {{ icon }}</span\r\n  >\r\n</div>\r\n",
+                    styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.badges-container-primary{background-color:#b7daf8}.badges-container-yellow{background-color:rgba(228,207,83,.3)}.badges-container-green{background-color:rgba(0,128,76,.1);border:#005935}.badges-container-red{background-color:#f4e9e6}.badges-container-orange{background-color:#faede8}.badges-container-grey{background-color:#e5e5e5}.badges-container-brown{background-color:#f0eae7}.badges-container-icon-primary{background-color:#00324e}.badges-container-icon-green{background-color:#005935}.badges-container-icon-orange,.badges-container-icon-red{background-color:#9e360f}.badges-container-icon-brown{background-color:#59280b}.badges-container-icon-yellow{background-color:rgba(228,207,83,.3)}.badges-container-circle-primary{background-color:#00324e}.badges-container-circle-orange{background-color:#9e360f}.text-color-primary{color:#00324e}.text-color-red{color:#74280b}.text-color-green{color:#005935}.text-color-yellow{color:#726729}.text-color-grey{color:#525252}.text-color-brown{color:#59280b}.text-color-orange{color:#9e360f}.text-color-white{color:#fff}.qms-badges-container{display:flex;align-items:center;width:100%;height:100%;font-family:Open Sans;font-style:normal;font-weight:600;font-size:12px;line-height:16px}.qms-badges-container-text{margin-top:10px;margin-bottom:10px}.qms-badges-container .margin-horizontal-17{margin-left:17px;margin-right:17px}.qms-badges-container .qms-badges-button{margin-left:auto;margin-right:8px}.qms-badges-circle-large{width:24px;height:24px}.qms-badges-circle-large,.qms-badges-circle-medium{border-radius:50%;display:flex;align-items:center;justify-content:center}.qms-badges-circle-medium{width:20px;height:20px}.qms-badges-circle-small{width:10px;height:10px;border-radius:50%}.qms-badges-circle-small,.qms-badges-default{display:flex;align-items:center;justify-content:center}.qms-badges-default{height:24px;padding:0 6px;border-radius:4px}.qms-badges-default .mat-icon{width:auto;height:auto}.font-bold{font-weight:700}.font-size-14{font-size:14px}.font-size-16{font-size:16px}.font-size-12{font-size:12px}.font-size-8{font-size:8px}.line-height-22{line-height:22px}"]
                 },] }
     ];
     QmsBadgesComponent.propDecorators = {
@@ -17800,7 +18900,10 @@
         color: [{ type: i0.Input }],
         contents: [{ type: i0.Input }],
         size: [{ type: i0.Input }],
-        icon: [{ type: i0.Input }]
+        icon: [{ type: i0.Input }],
+        itemIconPath: [{ type: i0.Input }],
+        itemIconSvg: [{ type: i0.Input }],
+        fontIconGG: [{ type: i0.Input }]
     };
 
     var QmsBadgesModule = /** @class */ (function () {
@@ -19772,7 +20875,10 @@
                     parentName: item.parentName,
                     itemNumberId: item.itemNumberId,
                     levelType: item.levelType,
-                    expandable: newNodeDocs.expandable
+                    expandable: newNodeDocs.expandable,
+                    statusName: item.statusName,
+                    status: item.status,
+                    displayId: Number.parseFloat(item.itemNumberId)
                 });
             }
         };
@@ -19864,48 +20970,6 @@
             });
             return statusName;
         };
-        SelectProcessDocumentPopupComponent.prototype.getBreadcumbAllParentProcess = function (id) {
-            var tempParent = [];
-            this.checkBreadcumbProcess(id, tempParent, function (arr) {
-                tempParent = __spreadArray([], __read(arr));
-            });
-            return tempParent;
-        };
-        SelectProcessDocumentPopupComponent.prototype.getBreadcumbAllParentDocs = function (id) {
-            var tempParent = [];
-            this.checkBreadcumbDocument(id, tempParent, function (arr) {
-                tempParent = __spreadArray([], __read(arr));
-            });
-            return tempParent;
-        };
-        SelectProcessDocumentPopupComponent.prototype.checkBreadcumbProcess = function (id, breadcumbs, callback) {
-            for (var i = 0; i < this.treeControlNodeProcess.dataNodes.length; i++) {
-                var tree = this.treeControlNodeProcess.dataNodes[i];
-                if (id == tree.id) {
-                    breadcumbs = __spreadArray(__spreadArray([], __read(breadcumbs)), [tree]);
-                    if (tree.parentId) {
-                        this.checkBreadcumbProcess(tree.parentId, breadcumbs, callback);
-                    }
-                    else {
-                        callback(breadcumbs);
-                    }
-                }
-            }
-        };
-        SelectProcessDocumentPopupComponent.prototype.checkBreadcumbDocument = function (id, breadcumbs, callback) {
-            for (var i = 0; i < this.treeControlNodeDocument.dataNodes.length; i++) {
-                var tree = this.treeControlNodeDocument.dataNodes[i];
-                if (id == tree.id) {
-                    breadcumbs = __spreadArray(__spreadArray([], __read(breadcumbs)), [tree]);
-                    if (tree.parentId) {
-                        this.checkBreadcumbDocument(tree.parentId, breadcumbs, callback);
-                    }
-                    else {
-                        callback(breadcumbs);
-                    }
-                }
-            }
-        };
         SelectProcessDocumentPopupComponent.prototype.selectTreeControlNodeDocument = function (treeNodes) {
             this.treeControlNodeDocument = null;
             this.treeControlNodeDocument = treeNodes;
@@ -20008,12 +21072,12 @@
             if (selectedNode) {
                 this.removeCheckedNodeList({
                     id: selectedNode.id,
-                    name: node.itemName,
+                    itemName: node.itemName,
                     parentId: selectedNode.parentId,
-                    hasChild: false,
                     expandable: false,
-                    level: 0,
-                    disabled: false,
+                    itemType: selectedNode.itemType,
+                    moduleId: this.moduleId,
+                    itemNumberId: selectedNode.itemNumberId
                 });
             }
             else {
@@ -20045,20 +21109,44 @@
                 return;
             }
             var index = this.checkedNodeList.findIndex(function (x) { return x.id.toLowerCase() === node.id.toLowerCase()
-                && (!node.parentId || x.parentId.toLowerCase() === node.parentId.toLowerCase()) && x.expandable == node.expandable; });
+                && (!node.parentId || x.parentId.toLowerCase() === node.parentId.toLowerCase()) && x.itemType == node.itemType; });
             if (index >= 0) {
-                this.removeCheckedNodeList(node);
+                this.removeCheckedNodeList({
+                    id: node.id,
+                    itemName: node.name,
+                    parentId: node.parentId,
+                    expandable: false,
+                    itemType: node.itemType,
+                    moduleId: this.moduleId,
+                    itemNumberId: node.id
+                });
                 return;
             }
             else {
+                var item = void 0;
+                var status = 0;
+                var statusName = '';
+                if (node.itemType == exports.DataType.folder || node.itemType == exports.DataType.document) {
+                    item = this.treeData2.find(function (x) { return x.id.toLowerCase() === node.id.toLowerCase()
+                        && (!node.parentId || x.parentId.toLowerCase() === node.parentId.toLowerCase()) && x.expandable == node.expandable; });
+                }
+                else {
+                    item = this.treeData1.find(function (x) { return x.id.toLowerCase() === node.id.toLowerCase()
+                        && (!node.parentId || x.parentId.toLowerCase() === node.parentId.toLowerCase()) && x.expandable == node.expandable; });
+                }
+                if (item) {
+                    statusName = item.statusName;
+                    status = item.statusId;
+                }
                 this.addToChecklistNode({
                     id: node.id,
                     itemName: node.name,
                     parentId: node.parentId,
-                    breadcumbs: [],
                     itemType: node.itemType,
-                    statusName: '',
-                    parentName: ''
+                    status: status,
+                    statusName: statusName,
+                    itemNumberId: item.displayId.toString(),
+                    levelType: item.levelType
                 });
                 this.addSelectedData(node);
             }
@@ -20152,7 +21240,7 @@
                         QMSTreeModule,
                         QMSButtonModule,
                         slideToggle.MatSlideToggleModule,
-                        publicApi.QMSNewTreeModule
+                        QMSNewTreeModule
                     ],
                     exports: [
                         SelectProcessDocumentPopupComponent
@@ -20166,6 +21254,612 @@
         return SelectedProcessDocumentItem;
     }());
 
+    var QMSNavigationDrawerComponent = /** @class */ (function () {
+        function QMSNavigationDrawerComponent() {
+            this.treeData = [];
+            this.addNodeEvent = new i0.EventEmitter();
+            this.addFavoriteEvent = new i0.EventEmitter();
+            this.drogLocationEvent = new i0.EventEmitter();
+            this.showAddIcon = true;
+            this.openNodes = [];
+            this.dragDropListDisabled = false;
+            this.nodesExpand = new i0.EventEmitter();
+            this.onClickNodeEvent = new i0.EventEmitter();
+            this.addFavoriteTooltip = 'Legg til favoritt';
+            this.deleteFavoriteTooltip = 'Slett favoritt';
+            this.addNodeTooltip = 'Legg til lokasjon';
+            this.expandedNodeSet = new Set();
+            this.dragging = false;
+            this.expandDelay = 1000;
+            this.isHover = false;
+            this.treeControl = new tree.FlatTreeControl(function (node) { return node.level; }, function (node) { return node.expandable; });
+            this.treeFlattener = new tree$1.MatTreeFlattener(this._transformer, function (node) { return node.level; }, function (node) { return node.expandable; }, function (node) { return node.children; });
+            this.dataSource = new tree$1.MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+            this.hoverNode = {};
+            this.expandingNodes = [];
+            this.activeNode = '';
+            this.hasChild = function (_, node) { return node.expandable; };
+            this.dataSource.data = this.treeData;
+        }
+        QMSNavigationDrawerComponent.prototype._transformer = function (node, level) {
+            return {
+                expandable: !!node.children && node.children.length > 0,
+                name: node.name,
+                level: level,
+                id: node.id,
+                isReadOnly: node.isReadOnly,
+                favorite: node.favorite,
+                disabled: node.disabled
+            };
+        };
+        QMSNavigationDrawerComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.openNodes.forEach(function (item) {
+                _this.treeControl.expand(_this.treeControl.dataNodes.find(function (p) { return p.id.toString() === item; }));
+            });
+        };
+        QMSNavigationDrawerComponent.prototype.ngOnChanges = function (changes) {
+            var _this = this;
+            this.dataSource.data = this.treeData;
+            if (this.filterText) {
+                this.expandNodeSearched(this.treeData, this.filterText);
+            }
+            if (changes.openNodes) {
+                this.openNodes.forEach(function (item) {
+                    _this.treeControl.expand(_this.treeControl.dataNodes.find(function (p) { return p.id.toString() === item; }));
+                });
+            }
+        };
+        QMSNavigationDrawerComponent.prototype.expandNodeSearched = function (nodesOrigin, txtSearch) {
+            var _this = this;
+            nodesOrigin.forEach(function (item) {
+                if (!item.name.toLocaleLowerCase().includes(txtSearch.toLocaleLowerCase())) {
+                    _this.treeControl.expand(_this.treeControl.dataNodes.find(function (p) { return p.id.toString() === item.id; }));
+                    if (item.children.length > 0) {
+                        _this.expandNodeSearched(item.children, txtSearch);
+                    }
+                }
+            });
+        };
+        QMSNavigationDrawerComponent.prototype.onClickNode = function (nodeId) {
+            this.activeNode = nodeId;
+            this.onClickNodeEvent.emit(nodeId);
+        };
+        QMSNavigationDrawerComponent.prototype.onOver = function (node) {
+            this.hoverNode = node;
+        };
+        QMSNavigationDrawerComponent.prototype.addNewNode = function (nodeId, event) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.addNodeEvent.emit(nodeId);
+        };
+        QMSNavigationDrawerComponent.prototype.addFavoriteNode = function (nodeId, event) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.addFavoriteEvent.emit(nodeId);
+        };
+        QMSNavigationDrawerComponent.prototype.ngOnDestroy = function () {
+            if (this.activeNodeLocation) {
+                this.activeNodeLocation.unsubscribe();
+            }
+        };
+        /**
+         * This constructs an array of nodes that matches the DOM,
+         * and calls rememberExpandedTreeNodes to persist expand state
+         */
+        QMSNavigationDrawerComponent.prototype.visibleNodes = function () {
+            var _this = this;
+            this.rememberExpandedTreeNodes(this.treeControl, this.expandedNodeSet);
+            var result = [];
+            function addExpandedChildren(node, expanded) {
+                result.push(node);
+                if (expanded.has(node.id)) {
+                    node.children.map(function (child) { return addExpandedChildren(child, expanded); });
+                }
+            }
+            this.dataSource.data.forEach(function (node) {
+                addExpandedChildren(node, _this.expandedNodeSet);
+            });
+            return result;
+        };
+        /**
+         * Handle the drop - here we rearrange the data based on the drop event,
+         * then rebuild the tree.
+         * */
+        QMSNavigationDrawerComponent.prototype.drop = function (event) {
+            // Save data for backup
+            var node = event.item.data;
+            var backupChangedNode = JSON.parse(JSON.stringify(node));
+            var backupData = JSON.parse(JSON.stringify(this.dataSource.data));
+            // ignore drops outside of the tree
+            if (!event.isPointerOverContainer) {
+                return;
+            }
+            // construct a list of visible nodes, this will match the DOM.
+            // the cdkDragDrop event.currentIndex jives with visible nodes.
+            // it calls rememberExpandedTreeNodes to persist expand state
+            var visibleNodes = this.visibleNodes();
+            // deep clone the data source so we can mutate it
+            var changedData = JSON.parse(JSON.stringify(this.dataSource.data));
+            // recursive find function to find siblings of node
+            function findNodeSiblings(arr, id) {
+                var result, subResult;
+                arr.forEach(function (item) {
+                    if (item.id === id) {
+                        result = arr;
+                    }
+                    else if (item.children) {
+                        subResult = findNodeSiblings(item.children, id);
+                        if (subResult) {
+                            result = subResult;
+                        }
+                    }
+                });
+                return result;
+            }
+            // remove the node from its old place
+            var siblings = findNodeSiblings(changedData, node.id);
+            var siblingIndex = siblings.findIndex(function (n) { return n.id === node.id; });
+            // const nodeToInsert: TreeNode = siblings.splice(siblingIndex, 1)[0];
+            var nodeToInsert = siblings.splice(siblingIndex, 1)[0];
+            // determine where to insert the node
+            var nodeAtDest = visibleNodes[event.currentIndex];
+            if (nodeAtDest.id === nodeToInsert.id) {
+                return;
+            }
+            // determine drop index relative to destination array
+            var relativeIndex = event.currentIndex; // default if no parent
+            var nodeAtDestFlatNode = this.treeControl.dataNodes.find(function (n) { return nodeAtDest.id === n.id; });
+            var parent = this.getParentNode(nodeAtDestFlatNode);
+            if (parent) {
+                var parentIndex = visibleNodes.findIndex(function (n) { return n.id === parent.id; }) + 1;
+                relativeIndex = event.currentIndex - parentIndex;
+                // update parentId for nodeToInsert
+                nodeToInsert.parentId = parent.id;
+            }
+            else {
+                nodeToInsert.parentId = guidHelper.empty;
+            }
+            // update new order for nodeToInsert
+            nodeToInsert.order = relativeIndex;
+            // insert node
+            var newSiblings = findNodeSiblings(changedData, nodeAtDest.id);
+            if (!newSiblings) {
+                return;
+            }
+            newSiblings.splice(relativeIndex, 0, nodeToInsert);
+            // rebuild tree with mutated data
+            this.rebuildTreeForData(changedData);
+            // update New Location Order for new insert node
+            this.updateNewOrderForNodeSiblings(newSiblings);
+            this.drogLocationEvent.emit({
+                newSiblings: newSiblings,
+                changedNode: backupChangedNode,
+                oldDataSource: backupData
+            });
+        };
+        QMSNavigationDrawerComponent.prototype.updateNewOrderForNodeSiblings = function (newSiblings) {
+            var newOrder = 0;
+            newSiblings.forEach(function (item) {
+                item.order = newOrder;
+                newOrder = newOrder + 1;
+            });
+        };
+        /**
+         * Experimental - opening tree nodes as you drag over them
+        */
+        QMSNavigationDrawerComponent.prototype.dragStart = function () {
+            this.dragging = true;
+        };
+        QMSNavigationDrawerComponent.prototype.dragEnd = function () {
+            this.dragging = false;
+        };
+        QMSNavigationDrawerComponent.prototype.dragHover = function (node) {
+            var _this = this;
+            this.isHover = true;
+            if (this.dragging) {
+                clearTimeout(this.expandTimeout);
+                this.expandTimeout = setTimeout(function () {
+                    _this.treeControl.expand(node);
+                }, this.expandDelay);
+            }
+        };
+        QMSNavigationDrawerComponent.prototype.dragHoverEnd = function () {
+            this.isHover = false;
+            if (this.dragging) {
+                clearTimeout(this.expandTimeout);
+            }
+        };
+        /**
+         * The following methods are for persisting the tree expand state
+         * after being rebuilt
+         */
+        QMSNavigationDrawerComponent.prototype.rebuildTreeForData = function (data) {
+            this.rememberExpandedTreeNodes(this.treeControl, this.expandedNodeSet);
+            this.treeData = data;
+            this.dataSource.data = data;
+            this.forgetMissingExpandedNodes(this.treeControl, this.expandedNodeSet);
+            this.expandNodesById(this.treeControl.dataNodes, Array.from(this.expandedNodeSet));
+        };
+        QMSNavigationDrawerComponent.prototype.rememberExpandedTreeNodes = function (treeControl, expandedNodeSet) {
+            if (treeControl.dataNodes) {
+                treeControl.dataNodes.forEach(function (node) {
+                    if (treeControl.isExpandable(node) && treeControl.isExpanded(node)) {
+                        // capture latest expanded state
+                        expandedNodeSet.add(node.id.toString());
+                    }
+                });
+            }
+        };
+        QMSNavigationDrawerComponent.prototype.forgetMissingExpandedNodes = function (treeControl, expandedNodeSet) {
+            if (treeControl.dataNodes) {
+                expandedNodeSet.forEach(function (nodeId) {
+                    // maintain expanded node state
+                    if (!treeControl.dataNodes.find(function (n) { return n.id.toString() === nodeId; })) {
+                        // if the tree doesn't have the previous node, remove it from the expanded list
+                        expandedNodeSet.delete(nodeId);
+                    }
+                });
+            }
+        };
+        QMSNavigationDrawerComponent.prototype.expandNodesById = function (flatNodes, ids) {
+            var _this = this;
+            if (!flatNodes || flatNodes.length === 0) {
+                return;
+            }
+            var idSet = new Set(ids);
+            return flatNodes.forEach(function (node) {
+                if (idSet.has(node.id.toString())) {
+                    _this.treeControl.expand(node);
+                    _this.expandingNodes.push(node);
+                    var parent = _this.getParentNode(node);
+                    while (parent) {
+                        _this.treeControl.expand(parent);
+                        _this.expandingNodes.push(parent);
+                        parent = _this.getParentNode(parent);
+                    }
+                }
+            });
+        };
+        QMSNavigationDrawerComponent.prototype.getParentNode = function (node) {
+            var currentLevel = node.level;
+            if (currentLevel < 1) {
+                return null;
+            }
+            var startIndex = this.treeControl.dataNodes.indexOf(node) - 1;
+            for (var i = startIndex; i >= 0; i--) {
+                var currentNode = this.treeControl.dataNodes[i];
+                if (currentNode.level < currentLevel) {
+                    return currentNode;
+                }
+            }
+            return null;
+        };
+        QMSNavigationDrawerComponent.prototype.onKeyDownNode = function (event, node) {
+            if (event.key == 'Enter') {
+                this.onClickToggleNode(node);
+            }
+        };
+        QMSNavigationDrawerComponent.prototype.onClickToggleNode = function (node) {
+            if (this.treeControl.isExpanded(node)) {
+                this.treeControl.expand(node);
+                this._addExpandingNode(node);
+            }
+            else {
+                this.treeControl.collapse(node);
+                this._removeExpandingNodes(node.id);
+            }
+            this.nodesExpand.emit({ node: node, isExpand: this.treeControl.isExpanded(node) });
+        };
+        QMSNavigationDrawerComponent.prototype.setHoverFavorite = function (id) {
+            this.hoverFavoriteNodeId = id;
+        };
+        QMSNavigationDrawerComponent.prototype.expandNodes = function () {
+            this._expandNodesLoop(this.treeData);
+        };
+        QMSNavigationDrawerComponent.prototype._expandNodesLoop = function (data) {
+            var _this = this;
+            data.forEach(function (node) {
+                var expandingNode = _this.expandingNodes.some(function (x) { return x.id === node.id; });
+                if (expandingNode) {
+                    _this.onClickToggleNode(expandingNode);
+                }
+                data.forEach(function (item) {
+                    if (Array.isArray(item.children)) {
+                        _this._expandNodesLoop(item.children);
+                    }
+                });
+            });
+        };
+        QMSNavigationDrawerComponent.prototype._addExpandingNode = function (node) {
+            if (!this.expandingNodes.some(function (x) { return x.id === node.id; })) {
+                this.expandingNodes.push(node);
+            }
+        };
+        QMSNavigationDrawerComponent.prototype._removeExpandingNodes = function (nodeId) {
+            this.expandingNodes = this.expandingNodes.filter(function (x) { return x.id !== nodeId; });
+        };
+        return QMSNavigationDrawerComponent;
+    }());
+    QMSNavigationDrawerComponent.decorators = [
+        { type: i0.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\" (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), 'active': activeNode == node.id}\">\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\">\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)\"\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), 'active': activeNode == node.id}\">\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\">\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.active{background-color:#f2f7fd}::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}::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!important}::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}"]
+                },] }
+    ];
+    QMSNavigationDrawerComponent.ctorParameters = function () { return []; };
+    QMSNavigationDrawerComponent.propDecorators = {
+        treeData: [{ type: i0.Input }],
+        showFavoriteIcon: [{ type: i0.Input }],
+        favoriteMode: [{ type: i0.Input }],
+        addNodeEvent: [{ type: i0.Output }],
+        addFavoriteEvent: [{ type: i0.Output }],
+        drogLocationEvent: [{ type: i0.Output }],
+        showAddIcon: [{ type: i0.Input }],
+        openNodes: [{ type: i0.Input }],
+        dragDropListDisabled: [{ type: i0.Input }],
+        nodesExpand: [{ type: i0.Output }],
+        filterText: [{ type: i0.Input }],
+        faIconPath: [{ type: i0.Input }],
+        onClickNodeEvent: [{ type: i0.Output }],
+        addFavoriteTooltip: [{ type: i0.Input }],
+        deleteFavoriteTooltip: [{ type: i0.Input }],
+        addNodeTooltip: [{ type: i0.Input }]
+    };
+
+    var QMSNavigationDrawerModule = /** @class */ (function () {
+        function QMSNavigationDrawerModule() {
+        }
+        return QMSNavigationDrawerModule;
+    }());
+    QMSNavigationDrawerModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        QMSNavigationDrawerComponent
+                    ],
+                    imports: [
+                        common.CommonModule,
+                        icon.MatIconModule,
+                        toolbar.MatToolbarModule,
+                        button.MatButtonModule,
+                        QMSButtonModule,
+                        tooltip.MatTooltipModule,
+                        dragDrop.DragDropModule,
+                        tree$1.MatTreeModule
+                    ],
+                    exports: [
+                        QMSNavigationDrawerComponent
+                    ]
+                },] }
+    ];
+
+    var DEFAULT_PAGE_SIZE = 50;
+    exports.PaginationSize = void 0;
+    (function (PaginationSize) {
+        PaginationSize["small"] = "small";
+        PaginationSize["medium"] = "medium";
+        PaginationSize["large"] = "large";
+        PaginationSize["mobile"] = "mobile";
+    })(exports.PaginationSize || (exports.PaginationSize = {}));
+    var QMSPaginatorComponent = /** @class */ (function () {
+        function QMSPaginatorComponent() {
+            this.sizeMedium = 'medium';
+            this.sizeSmall = 'small';
+            this.sizeLarge = 'large';
+            this.sizeMobile = 'mobile';
+            this.size = exports.PaginationSize.large;
+            this._pageSizeOptions = [5, 10, 25, 100];
+            this._pageSize = 10;
+            this._length = 0;
+            this._pageIndex = 0;
+            this.page = new i0.EventEmitter();
+            this.previousPageIndex = 0;
+            this.numberOfPages = [];
+            this.displayNumberOfPages = [];
+        }
+        Object.defineProperty(QMSPaginatorComponent.prototype, "pageSizeOptions", {
+            get: function () {
+                return this._pageSizeOptions;
+            },
+            set: function (value) {
+                this._pageSizeOptions = (value || []).map(function (p) { return coercion.coerceNumberProperty(p); });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(QMSPaginatorComponent.prototype, "pageSize", {
+            get: function () {
+                return this._pageSize;
+            },
+            set: function (value) {
+                this._pageSize = Math.max(coercion.coerceNumberProperty(value), 0);
+                this._updateDisplayedPageSizeOptions();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(QMSPaginatorComponent.prototype, "length", {
+            get: function () {
+                return this._length;
+            },
+            set: function (value) {
+                this._length = coercion.coerceNumberProperty(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(QMSPaginatorComponent.prototype, "pageIndex", {
+            get: function () {
+                return this._pageIndex + 1;
+            },
+            set: function (value) {
+                this.previousPageIndex = this._pageIndex;
+                this._pageIndex = Math.max(coercion.coerceNumberProperty(value - 1), 0);
+                this.displayNumberOfPages = this.pagination(this._pageIndex, this.numberOfPages.length);
+                this._emitPageEvent(this.previousPageIndex);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        QMSPaginatorComponent.prototype.ngOnInit = function () {
+            this.getNumberOfPages();
+        };
+        QMSPaginatorComponent.prototype._updateDisplayedPageSizeOptions = function () {
+            if (!this.pageSize) {
+                this._pageSize =
+                    this.pageSizeOptions.length != 0 ? this.pageSizeOptions[0] : DEFAULT_PAGE_SIZE;
+            }
+        };
+        QMSPaginatorComponent.prototype.getNumberOfPages = function () {
+            if (!this.pageSize) {
+                return;
+            }
+            this.numberOfPages = [];
+            var Arrlength = Math.ceil(this._length / this._pageSize);
+            for (var index = 1; index <= Arrlength; index++) {
+                this.numberOfPages.push(index);
+            }
+            this.minPage = 1;
+            this.maxpage = this.numberOfPages.length;
+            this.renderDisplayNumberOfpages();
+        };
+        QMSPaginatorComponent.prototype.renderDisplayNumberOfpages = function () {
+            if (this.numberOfPages.length <= 5) {
+                this.displayNumberOfPages = this.numberOfPages.map(function (x) { return x.toString(); });
+                return;
+            }
+            this.displayNumberOfPages = this.numberOfPages.map(function (x) { return x.toString(); });
+            this.displayNumberOfPages = this.pagination(this.pageIndex, this.numberOfPages.length);
+        };
+        QMSPaginatorComponent.prototype.changePage = function (page) {
+            this.pageIndex = page;
+            this.displayNumberOfPages = this.pagination(parseInt(page.toString()), this.numberOfPages.length);
+        };
+        QMSPaginatorComponent.prototype.pagination = function (c, m) {
+            var e_1, _a;
+            var current = c;
+            var last = m;
+            var 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;
+            }
+            var left = current - delta;
+            var right = current + delta + 1;
+            var range = [];
+            var rangeWithDots = [];
+            var l;
+            for (var i = 1; i <= last; i++) {
+                if (i == 1 || i == last || i >= left && i < right) {
+                    range.push(i);
+                }
+            }
+            try {
+                for (var range_1 = __values(range), range_1_1 = range_1.next(); !range_1_1.done; range_1_1 = range_1.next()) {
+                    var i = range_1_1.value;
+                    if (l) {
+                        if (i - l !== 1) {
+                            rangeWithDots.push('...');
+                        }
+                    }
+                    rangeWithDots.push(i);
+                    l = i;
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (range_1_1 && !range_1_1.done && (_a = range_1.return)) _a.call(range_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return rangeWithDots;
+        };
+        QMSPaginatorComponent.prototype.nextPage = function () {
+            this.previousPageIndex = this.pageIndex;
+            this.pageIndex = this.pageIndex + 1;
+            this.displayNumberOfPages = this.pagination(this.pageIndex, this.numberOfPages.length);
+        };
+        QMSPaginatorComponent.prototype.previousPage = function () {
+            this.previousPageIndex = this.pageIndex;
+            this.pageIndex = this.pageIndex - 1;
+            this.displayNumberOfPages = this.pagination(this.pageIndex, this.numberOfPages.length);
+        };
+        QMSPaginatorComponent.prototype._changePageSize = function (pageSize) {
+            this.previousPageIndex = this.pageIndex;
+            this.pageSize = pageSize;
+            this.pageIndex = 1;
+            this.getNumberOfPages();
+        };
+        QMSPaginatorComponent.prototype._changePageNumber = function (pageNumber) {
+            this.pageIndex = pageNumber;
+            this.getNumberOfPages();
+        };
+        QMSPaginatorComponent.prototype._emitPageEvent = function (previousPageIndex) {
+            this.page.emit({
+                previousPageIndex: previousPageIndex,
+                pageIndex: this._pageIndex,
+                pageSize: this.pageSize,
+                length: this.length,
+            });
+        };
+        QMSPaginatorComponent.prototype.ngAfterViewChecked = function () {
+        };
+        return QMSPaginatorComponent;
+    }());
+    QMSPaginatorComponent.decorators = [
+        { type: i0.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\" active=\"true\" \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\" active=\"true\" \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 .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-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 = function () { return []; };
+    QMSPaginatorComponent.propDecorators = {
+        size: [{ type: i0.Input }],
+        pageSizeOptions: [{ type: i0.Input }],
+        pageSize: [{ type: i0.Input }],
+        length: [{ type: i0.Input }],
+        pageIndex: [{ type: i0.Input }],
+        page: [{ type: i0.Output }]
+    };
+
+    var QmsPaginatorModule = /** @class */ (function () {
+        function QmsPaginatorModule() {
+        }
+        return QmsPaginatorModule;
+    }());
+    QmsPaginatorModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        QMSPaginatorComponent
+                    ],
+                    imports: [
+                        common.CommonModule,
+                        forms.FormsModule,
+                        forms.ReactiveFormsModule,
+                        icon.MatIconModule,
+                        tooltip.MatTooltipModule,
+                        select.MatSelectModule,
+                        button.MatButtonModule,
+                        QmsAngularModule,
+                        QMSButtonModule,
+                    ],
+                    exports: [
+                        QMSPaginatorComponent
+                    ]
+                },] }
+    ];
+
     /*
      * Public API Surface of qms-angular
      */
@@ -20184,6 +21878,7 @@
     exports.ButtonToggleChange = ButtonToggleChange;
     exports.CHECKLIST_ICON = CHECKLIST_ICON;
     exports.CKEditorEventConst = CKEditorEventConst;
+    exports.CdkDetailRowDirective = CdkDetailRowDirective;
     exports.ConfirmDialog = ConfirmDialog;
     exports.DEPARTMENT_FOLDER_ICON = DEPARTMENT_FOLDER_ICON;
     exports.DEPARTMENT_FOLDER_OUTLINED_ICON = DEPARTMENT_FOLDER_OUTLINED_ICON;
@@ -20198,7 +21893,6 @@
     exports.ENTERPRISE_FOLDER_OUTLINED_ICON = ENTERPRISE_FOLDER_OUTLINED_ICON;
     exports.FlowChartConst = FlowChartConst;
     exports.ISelectOneItem = ISelectOneItem;
-    exports.IconModel = IconModel;
     exports.InformationCoverItem = InformationCoverItem;
     exports.KEYBOARD_DOWN_ICON = KEYBOARD_DOWN_ICON;
     exports.KEYBOARD_UP_ICON = KEYBOARD_UP_ICON;
@@ -20214,6 +21908,7 @@
     exports.PROCESS_ICON = PROCESS_ICON;
     exports.PopupData = PopupData;
     exports.QMSAnchor = QMSAnchor;
+    exports.QMSAppBar = QMSAppBar;
     exports.QMSAppIconModule = QMSAppIconModule;
     exports.QMSAttachmentListDirective = QMSAttachmentListDirective;
     exports.QMSBreadcrumb = QMSBreadcrumb;
@@ -20235,6 +21930,8 @@
     exports.QMSCKEditorConfirmComponent = QMSCKEditorConfirmComponent;
     exports.QMSCKEditorData = QMSCKEditorData;
     exports.QMSCKEditorDialogData = QMSCKEditorDialogData;
+    exports.QMSCKEditorFlowchart = QMSCKEditorFlowchart;
+    exports.QMSCKEditorFlowchartService = QMSCKEditorFlowchartService;
     exports.QMSCKEditorFullscreenComponent = QMSCKEditorFullscreenComponent;
     exports.QMSCKEditorGlobalService = QMSCKEditorGlobalService;
     exports.QMSCKEditorInjector = QMSCKEditorInjector;
@@ -20246,6 +21943,7 @@
     exports.QMSCKEditorPlugin = QMSCKEditorPlugin;
     exports.QMSCKEditorRelatedComponent = QMSCKEditorRelatedComponent;
     exports.QMSCKEditorRelation = QMSCKEditorRelation;
+    exports.QMSCKEditorSaveAsTemplate = QMSCKEditorSaveAsTemplate;
     exports.QMSCKEditorTemplate = QMSCKEditorTemplate;
     exports.QMSCKEditorTemplateService = QMSCKEditorTemplateService;
     exports.QMSCKEditorToastService = QMSCKEditorToastService;
@@ -20257,6 +21955,7 @@
     exports.QMSChipInputSelectDropWDownDirective = QMSChipInputSelectDropWDownDirective;
     exports.QMSChipInputSelectFieldDirective = QMSChipInputSelectFieldDirective;
     exports.QMSChipInputSelectTriggerDirective = QMSChipInputSelectTriggerDirective;
+    exports.QMSCollapseGroupDirective = QMSCollapseGroupDirective;
     exports.QMSComment = QMSComment;
     exports.QMSConfirmDialog = QMSConfirmDialog;
     exports.QMSDialogConfig = QMSDialogConfig;
@@ -20290,7 +21989,10 @@
     exports.QMSListLeadingIcon = QMSListLeadingIcon;
     exports.QMSListLine = QMSListLine;
     exports.QMSListModule = QMSListModule;
+    exports.QMSNavigationDrawerComponent = QMSNavigationDrawerComponent;
+    exports.QMSNavigationDrawerModule = QMSNavigationDrawerModule;
     exports.QMSNewTreeModule = QMSNewTreeModule;
+    exports.QMSPaginatorComponent = QMSPaginatorComponent;
     exports.QMSProcessDocumentItem = QMSProcessDocumentItem;
     exports.QMSRangeSliderDirective = QMSRangeSliderDirective;
     exports.QMSRangeSliderLockUpDirective = QMSRangeSliderLockUpDirective;
@@ -20298,6 +22000,8 @@
     exports.QMSRelatedModule = QMSRelatedModule;
     exports.QMSRichText = QMSRichText;
     exports.QMSRichTextModule = QMSRichTextModule;
+    exports.QMSRowDetailDirective = QMSRowDetailDirective;
+    exports.QMSRowExpandDirective = QMSRowExpandDirective;
     exports.QMSScrolableAttachmentListDirective = QMSScrolableAttachmentListDirective;
     exports.QMSScrollbarDirective = QMSScrollbarDirective;
     exports.QMSSearchFieldDirective = QMSSearchFieldDirective;
@@ -20313,8 +22017,12 @@
     exports.QMSTabGroupAdvancedDirective = QMSTabGroupAdvancedDirective;
     exports.QMSTabGroupDirective = QMSTabGroupDirective;
     exports.QMSTabLabelDirective = QMSTabLabelDirective;
+    exports.QMSTabModule = QMSTabModule;
     exports.QMSTableAction = QMSTableAction;
     exports.QMSTableActionBlock = QMSTableActionBlock;
+    exports.QMSTableChildrenDirective = QMSTableChildrenDirective;
+    exports.QMSTableDirective = QMSTableDirective;
+    exports.QMSTableExpandDirective = QMSTableExpandDirective;
     exports.QMSTableModule = QMSTableModule;
     exports.QMSTextBlockDirective = QMSTextBlockDirective;
     exports.QMSTextBlockLine = QMSTextBlockLine;
@@ -20342,9 +22050,13 @@
     exports.QmsBannerLoadingComponent = QmsBannerLoadingComponent;
     exports.QmsBannerLoadingModule = QmsBannerLoadingModule;
     exports.QmsBannerModule = QmsBannerModule;
+    exports.QmsPaginatorModule = QmsPaginatorModule;
     exports.QmsReportContentPortraitComponent = QmsReportContentPortraitComponent;
     exports.QmsReportCoverPortraitComponent = QmsReportCoverPortraitComponent;
     exports.QmsReportModule = QmsReportModule;
+    exports.QmsStatusDropdownComponent = QmsStatusDropdownComponent;
+    exports.QmsStatusDropdownModule = QmsStatusDropdownModule;
+    exports.QmsStatusDropdownOption = QmsStatusDropdownOption;
     exports.QmsStepperComponent = QmsStepperComponent;
     exports.QmsStepperModule = QmsStepperModule;
     exports.REGIONAL_FOLDER_ICON = REGIONAL_FOLDER_ICON;
@@ -20379,8 +22091,6 @@
     exports.SideNav = SideNav;
     exports.SideNavItem = SideNavItem;
     exports.SidenavComponent = SidenavComponent;
-    exports.StepModel = StepModel;
-    exports.TestOnlyComponent = TestOnlyComponent;
     exports.TranslateLibraryService = TranslateLibraryService;
     exports.TreeComponent = TreeComponent;
     exports.TreeConfig = TreeConfig;
@@ -20402,6 +22112,7 @@
     exports.ɵf = QMSCKEditorTooltip;
     exports.ɵg = QMSCKEditorImageMapComponent;
     exports.ɵh = QMSCKEditorImageMap;
+    exports.ɵi = QMSCKEditorBpmnData;
 
     Object.defineProperty(exports, '__esModule', { value: true });