qms-angular 1.0.72 → 1.0.73

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/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';
+    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('buffer'), require('@angular/material/tooltip'), require('@angular/material/tabs'), require('@angular/material/progress-bar'), 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', 'buffer', '@angular/material/tooltip', '@angular/material/tabs', '@angular/material/progress-bar', '@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.buffer, global.ng.material.tooltip, global.ng.material.tabs, global.ng.material.progressBar, 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, _, buffer, tooltip, tabs, progressBar, badge, toolbar, stepper$1, stepper, slideToggle, dragDrop) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -171,7 +171,24 @@
             "INVALID_URL": "Invalid URL",
             "REQUIRED_URL": "URL is required",
             "CLOSE": "Close",
-            "DOCUMENT_PROCESS": "Document / Process"
+            "DOCUMENT_PROCESS": "Document / Process",
+            "UPLOAD_FILE_NOT_VALID_FORMAT": "The file uploaded is invalid format. Supported file formats: {0}",
+            "UPLOAD_FILE_OVERSIZE": "The file uploaded is over the limit size. The limit size is {0}MB",
+            "UPLOAD_FILE_FAILED": "Failed to upload file.",
+            "ASSISTIVE_TEXT": "Assistive text",
+            "WORDS": "Words",
+            "CHARACTERS": "Characters",
+            "SELECT_VIDEO_FROM_ARCHIVE": "Select video from the archive"
+        },
+        "ABOUT": {
+            "ABOUT_CKEDITOR": "About CKEditor",
+            "CKEDITOR5_VERSION": "CKEditor 5 version",
+            "FOR_LICENSING_INFORMATION_PLEASE_VISIT_OUR_WEBSITE": "For licensing information please visit our website",
+            "ALL_RIGHTS_RESERVED": "All rights reserved",
+            "CHECK": "Check",
+            "FOR_HELP": "for help",
+            "CKEDITOR_USERS_GUIDE": "CKEditor User's Guide",
+            "COPYRIGHT": "Copyright ©"
         },
         "BPMN": {
             "DEFAULT": "Default",
@@ -451,7 +468,24 @@
             "INVALID_URL": "Ugyldig URL",
             "REQUIRED_URL": "URL er påkrevd",
             "CLOSE": "Close",
-            "DOCUMENT_PROCESS": "Dokument / Prosess"
+            "DOCUMENT_PROCESS": "Dokument / Prosess",
+            "UPLOAD_FILE_NOT_VALID_FORMAT": "Filen som er lastet opp er ugyldig format. Støttede filformater: {0}",
+            "UPLOAD_FILE_OVERSIZE": "Filen som er lastet opp er over grensestørrelsen. Grensestørrelsen er {0}MB",
+            "UPLOAD_FILE_FAILED": "Kunne ikke laste opp filen.",
+            "ASSISTIVE_TEXT": "Hjelpende tekst",
+            "WORDS": "Ord",
+            "CHARACTERS": "Tegn",
+            "SELECT_VIDEO_FROM_ARCHIVE": "Velg video fra arkivet"
+        },
+        "ABOUT": {
+            "ABOUT_CKEDITOR": "Om CKEditor",
+            "CKEDITOR5_VERSION": "CKEditor 5 versjon",
+            "FOR_LICENSING_INFORMATION_PLEASE_VISIT_OUR_WEBSITE": "For lisensieringsinformasjon, besøk vår nettside",
+            "ALL_RIGHTS_RESERVED": "Alle rettigheter er forbeholdt",
+            "CHECK": "Se",
+            "FOR_HELP": "for hjelp",
+            "CKEDITOR_USERS_GUIDE": "brukerhåndboken for CKEditor",
+            "COPYRIGHT": "Opphavsrett ©"
         },
         "BPMN": {
             "DEFAULT": "Standard",
@@ -4959,19 +4993,12 @@
                 this.treeControl.dataNodes[i].disabled = false;
             }
             if (this.disabledList.length) {
-                var _loop_3 = function (i) {
-                    this_3.disabledList.forEach(function (x) {
-                        var _a;
-                        if (x.id === _this.treeControl.dataNodes[i].id
-                            && (!x.parentId || x.parentId === ((_a = _this.treeControl.dataNodes[i]) === null || _a === void 0 ? void 0 : _a.parentId))) {
-                            _this.treeControl.dataNodes[i].disabled = true;
-                        }
-                    });
-                };
-                var this_3 = this;
-                for (var i = 0; i < this.treeControl.dataNodes.length; i++) {
-                    _loop_3(i);
-                }
+                this.disabledList.forEach(function (x) {
+                    var index = _this.treeControl.dataNodes.findIndex(function (node) { return node.id === x.id && (!x.parentId || x.parentId === node.parentId); });
+                    if (index >= 0) {
+                        _this.treeControl.dataNodes[index].disabled = true;
+                    }
+                });
             }
             //Selected node with select one
             if (this.disabledList.length && this.treeConfig.selectOne) {
@@ -4983,33 +5010,32 @@
                 this.listChildNode = [];
                 this.getChild(listChildNodeSameLevel);
                 this.getChildNodeSelectOne.emit(this.listChildNode);
-                var _loop_4 = function (i) {
-                    if (itemMarkChecked === this_4.treeControl.dataNodes[i].id) {
-                        parentItem = this_4.treeControl.dataNodes[i].parentId;
-                        this_4.selectNodeEvent.emit(this_4.treeControl.dataNodes[i]);
+                var _loop_3 = function (i) {
+                    if (itemMarkChecked === this_3.treeControl.dataNodes[i].id) {
+                        parentItem = this_3.treeControl.dataNodes[i].parentId;
+                        this_3.selectNodeEvent.emit(this_3.treeControl.dataNodes[i]);
                     }
-                    this_4.disabledList.forEach(function (el) {
+                    this_3.disabledList.forEach(function (el) {
                         if (_this.treeControl.dataNodes[i].id === el.toUpperCase()) {
                             _this.treeControl.expand(_this.treeControl.dataNodes[i]);
                         }
                     });
                     // remove all children nodes when user dont need to show them
-                    this_4.listChildNode.forEach(function (el) {
+                    this_3.listChildNode.forEach(function (el) {
                         var _a;
                         if (el.id && ((_a = _this.treeControl.dataNodes[i]) === null || _a === void 0 ? void 0 : _a.id) === el.id) {
                             _this.treeControl.dataNodes.splice(i, 1);
                         }
                     });
                 };
-                var this_4 = this;
+                var this_3 = this;
                 for (var i = 0; i < this.treeControl.dataNodes.length; i++) {
-                    _loop_4(i);
+                    _loop_3(i);
                 }
                 this.idCheckIcon = this.idToCheckSelectOne(itemMarkChecked, parentItem);
             }
             else {
                 this.idCheckIcon = '';
-                this.treeControl.collapseAll();
                 this.cdRef.detectChanges();
             }
         };
@@ -5473,7 +5499,7 @@
             }
         };
         TreeComponent.prototype.getNodeId = function (node) {
-            return "_" + (node.parentId ? node.parentId : '') + "_" + node.id + "_" + node.level;
+            return "_" + (node.parentId ? node.parentId.toLowerCase() : '') + "_" + node.id.toLowerCase() + "_" + node.level;
         };
         TreeComponent.prototype.getNodeByIdAndParentId = function (nodeId, parentId) {
             return this.treeControl.dataNodes.find(function (x) {
@@ -5484,14 +5510,14 @@
             this.treeControl.expand(node);
         };
         TreeComponent.prototype.idToCheckSelectOne = function (id, parentId) {
-            return parentId ? id + "-" + parentId : "" + id;
+            return id + "-" + parentId;
         };
         return TreeComponent;
     }());
     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\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"itemIconSvg\"\r\n        >\r\n        </mat-icon>\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.path\"\r\n          class=\"mat-icon\"\r\n          [src]=\"itemIconPath\"\r\n        />\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.base64\"\r\n          class=\"mat-icon image-base64\"\r\n          [src]=\"getImagePath()\"\r\n        />\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.none\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getItemIcon(node)\"\r\n        ></mat-icon>\r\n        <span\r\n          class=\"text-node\"\r\n          [class.select-one-checked]=\"\r\n            treeConfig.selectOne &&\r\n            idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n          \"\r\n          >{{ node.name }}</span\r\n        >\r\n      </div>\r\n      <mat-icon\r\n        class=\"select-one-checked\"\r\n        *ngIf=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >done</mat-icon\r\n      >\r\n    </div>\r\n  </mat-tree-node>\r\n\r\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n    <!-- form thu 1 - parent -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild\"\r\n      [checked]=\"descendantsAllSelected(node)\"\r\n      [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <button\r\n      class=\"button-boder\"\r\n      mat-icon-button\r\n      matTreeNodeToggle\r\n      [disableRipple]=\"!node.hasChild\"\r\n      [attr.aria-label]=\"'toggle ' + node.filename\"\r\n      *ngIf=\"node.name\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"openIcon && closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngStyle]=\"{\r\n          color: treeControl.isExpanded(node) ? openIconColor : closeIconColor\r\n        }\"\r\n        >{{ getNodeIcon(node) }}</mat-icon\r\n      >\r\n      <mat-icon\r\n        *ngIf=\"!openIcon || !closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngClass]=\"{\r\n          'open-icon': treeControl.isExpanded(node),\r\n          'not-department-icon': moduleId !== dataType.document\r\n        }\"\r\n        [svgIcon]=\"getNodeIcon(node)\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <span\r\n      *ngIf=\"expandOnTitleClick\"\r\n      matTreeNodeToggle\r\n      class=\"text-node-parent\"\r\n      style=\"cursor: pointer\"\r\n      (click)=\"onExpandNode(node)\"\r\n      [ngStyle]=\"{\r\n        color: treeControl.isExpanded(node) ? openIconColor : '#000000'\r\n      }\"\r\n    >\r\n      <span>{{ node.name }}</span>\r\n    </span>\r\n    <span\r\n      *ngIf=\"!expandOnTitleClick\"\r\n      class=\"text-node-parent\"\r\n      (click)=\"selectFolderNode(node)\"\r\n      style=\"cursor: pointer\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <span\r\n        [class.select-one-checked]=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >{{ node.name }}</span\r\n      >\r\n      <mat-icon\r\n        class=\"select-one-checked\"\r\n        *ngIf=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >done</mat-icon\r\n      >\r\n    </span>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n",
+                    template: "<mat-tree\r\n  [dataSource]=\"dataSource\"\r\n  [treeControl]=\"treeControl\"\r\n  class=\"tree__container\"\r\n>\r\n  <mat-tree-node\r\n    class=\"tree-branch\"\r\n    *matTreeNodeDef=\"let node\"\r\n    matTreeNodeToggle\r\n    matTreeNodePadding\r\n  >\r\n    <!-- form thu 1 - child -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    >\r\n    </mat-checkbox>\r\n\r\n    <!-- form thu 2 -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && onlyCheckBoxForChild && !onlyFolder\"\r\n      class=\"ml-10 checklist-leaf-node\"\r\n      [checked]=\"checklistSelection.isSelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <div\r\n      class=\"expand-node\"\r\n      *ngIf=\"node.name && !onlyFolder\"\r\n      [class.bgSelected]=\"\r\n        treeConfig.selectOne &&\r\n        idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n      \"\r\n      (click)=\"selectNode(node)\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <div class=\"expand-node__text\">\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.name && !onlyCheckBoxForChild\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n        >\r\n          {{ itemIcon }}\r\n        </mat-icon>\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.svg\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"itemIconSvg\"\r\n        >\r\n        </mat-icon>\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.path\"\r\n          class=\"mat-icon\"\r\n          [src]=\"itemIconPath\"\r\n        />\r\n\r\n        <img\r\n          *ngIf=\"displayType === itemIconType.base64\"\r\n          class=\"mat-icon image-base64\"\r\n          [src]=\"getImagePath()\"\r\n        />\r\n\r\n        <mat-icon\r\n          *ngIf=\"displayType === itemIconType.none\"\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getItemIcon(node)\"\r\n        ></mat-icon>\r\n        <span\r\n          class=\"text-node\"\r\n          [class.select-one-checked]=\"\r\n            treeConfig.selectOne &&\r\n            idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n          \"\r\n          >{{ node.name }}</span\r\n        >\r\n      </div>\r\n      <mat-icon\r\n        class=\"select-one-checked\"\r\n        *ngIf=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >done</mat-icon\r\n      >\r\n    </div>\r\n  </mat-tree-node>\r\n\r\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n    <!-- form thu 1 - parent -->\r\n    <mat-checkbox\r\n      qms-group-options\r\n      [disabled]=\"node.disabled\"\r\n      color=\"default\"\r\n      *ngIf=\"node.name && showCheckBox && !onlyCheckBoxForChild\"\r\n      [checked]=\"descendantsAllSelected(node)\"\r\n      [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n      (change)=\"todoItemSelectionToggle(node)\"\r\n    ></mat-checkbox>\r\n    <button\r\n      class=\"button-boder\"\r\n      mat-icon-button\r\n      matTreeNodeToggle\r\n      [disableRipple]=\"!node.hasChild\"\r\n      [attr.aria-label]=\"'toggle ' + node.filename\"\r\n      *ngIf=\"node.name\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"openIcon && closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngStyle]=\"{\r\n          color: treeControl.isExpanded(node) ? openIconColor : closeIconColor\r\n        }\"\r\n        >{{ getNodeIcon(node) }}</mat-icon\r\n      >\r\n      <mat-icon\r\n        *ngIf=\"!openIcon || !closeIcon\"\r\n        class=\"mat-icon-rtl-mirror\"\r\n        [ngClass]=\"{\r\n          'open-icon': treeControl.isExpanded(node),\r\n          'not-department-icon': moduleId !== dataType.document\r\n        }\"\r\n        [svgIcon]=\"getNodeIcon(node)\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <span\r\n      *ngIf=\"expandOnTitleClick\"\r\n      matTreeNodeToggle\r\n      class=\"text-node-parent\"\r\n      style=\"cursor: pointer\"\r\n      (click)=\"onExpandNode(node)\"\r\n      [id]=\"getNodeId(node)\"\r\n      [ngStyle]=\"{\r\n        color: treeControl.isExpanded(node) ? openIconColor : '#000000'\r\n      }\"\r\n    >\r\n      <span>{{ node.name }}</span>\r\n    </span>\r\n    <span\r\n      *ngIf=\"!expandOnTitleClick\"\r\n      class=\"text-node-parent\"\r\n      (click)=\"selectFolderNode(node)\"\r\n      style=\"cursor: pointer\"\r\n      [id]=\"getNodeId(node)\"\r\n    >\r\n      <span\r\n        [class.select-one-checked]=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >{{ node.name }}</span\r\n      >\r\n      <mat-icon\r\n        class=\"select-one-checked\"\r\n        *ngIf=\"\r\n          treeConfig.selectOne &&\r\n          idCheckIcon == idToCheckSelectOne(node.id, node.parentId)\r\n        \"\r\n        >done</mat-icon\r\n      >\r\n    </span>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n",
                     encapsulation: 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}.mat-checkbox.mat-checkbox-disabled.qms-group-options.mat-checkbox-checked .mat-checkbox-background{background-color:#e0e0e0!important}"]
                 },] }
@@ -8097,6 +8123,10 @@
         QMSCKEditorTreeService.prototype.getProcessList = function () {
             return this.get('ckeditorTree/GetProcessList');
         };
+        QMSCKEditorTreeService.prototype.getUploadVideoList = function (folderId) {
+            if (folderId === void 0) { folderId = null; }
+            return this.get('ckeditorTree/GetUploadVideoList', { folderId: folderId });
+        };
         return QMSCKEditorTreeService;
     }(QMSCKEditorBaseService));
     QMSCKEditorTreeService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function QMSCKEditorTreeService_Factory() { return new QMSCKEditorTreeService(i0__namespace.ɵɵinject(i1__namespace.HttpClient), i0__namespace.ɵɵinject(QMSCKEditorGlobalService)); }, token: QMSCKEditorTreeService, providedIn: "root" });
@@ -8541,6 +8571,9 @@
                 this.anchorByName = url.substr(hashIndex + 1, url.length - hashIndex);
                 this.anchorTitle = this.data.title;
             }
+            else if (typeId === exports.LinkType.url) {
+                //selectedProtocol
+            }
         };
         QMSCKEditorLinkComponent.prototype.onSelectedLinkType = function () {
             if (this.selectedLink === exports.LinkType.anchorText) {
@@ -9203,31 +9236,95 @@
         { type: String, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
     ]; };
 
-    var UploadAdapter = /** @class */ (function () {
-        function UploadAdapter(loader) {
+    var QmsUploadAdapter = /** @class */ (function () {
+        function QmsUploadAdapter(loader, config) {
             this.loader = loader;
+            this.config = config;
+            this.config.imageUploadTypes = this.config.imageUploadTypes || 'png,jpeg,jpg';
+            this.config.maxFileSizeMB = this.config.maxFileSizeMB || 2;
+            if (this.config.imageUploadTypes.indexOf('jpeg') > -1) {
+                this.config.imageUploadTypes += ',jpg';
+            }
+            else if (this.config.imageUploadTypes.indexOf('jpg') > -1) {
+                this.config.imageUploadTypes += ',jpeg';
+            }
         }
-        UploadAdapter.prototype.upload = function () {
+        QmsUploadAdapter.prototype.abort = function () {
+            if (this.xhr) {
+                this.xhr.abort();
+            }
+        };
+        QmsUploadAdapter.prototype._initRequest = function () {
+            var xhr = this.xhr = new XMLHttpRequest();
+            xhr.open('POST', this.config.apiUrl + "ckeditorUpload/UploadImage", true);
+            xhr.responseType = 'json';
+        };
+        QmsUploadAdapter.prototype._initListeners = function (resolve, reject, filename) {
+            var xhr = this.xhr;
+            var loader = this.loader;
+            var genericErrorText = this.config.LANG.QMSCKEDITOR.FAILED_TO_UPLOAD_FILE + ": " + filename + ".";
+            xhr.addEventListener('error', function () { return reject(genericErrorText); });
+            xhr.addEventListener('abort', function () { return reject(); });
+            xhr.addEventListener('load', function () {
+                var response = xhr.response;
+                if (!response || response.error) {
+                    return reject(response && response.error ? response.error.message : genericErrorText);
+                }
+                resolve({ default: response });
+            });
+            if (xhr.upload) {
+                xhr.upload.addEventListener('progress', function (evt) {
+                    if (evt.lengthComputable) {
+                        loader.uploadTotal = evt.total;
+                        loader.uploaded = evt.loaded;
+                    }
+                });
+            }
+        };
+        QmsUploadAdapter.prototype._sendRequest = function (file) {
+            var data = new FormData();
+            data.append('file', file, file.name);
+            data.append('name', file.name);
+            this.xhr.send(data);
+        };
+        QmsUploadAdapter.prototype._getExtension = function (file) {
+            if (!file.name) {
+                return '';
+            }
+            var filenames = file.name.toLowerCase().split('.');
+            if (filenames.length < 1) {
+                return '';
+            }
+            return filenames[1];
+        };
+        QmsUploadAdapter.prototype.upload = function () {
+            var _this = this;
             return this.loader.file
                 .then(function (file) {
                 return new Promise(function (resolve, reject) {
-                    var myReader = new FileReader();
-                    myReader.onloadend = function () {
-                        resolve({ default: myReader.result });
+                    var reader = new FileReader();
+                    reader.readAsArrayBuffer(file);
+                    reader.onload = function () {
+                        var fileExtension = _this._getExtension(file);
+                        if (_this.config.imageUploadTypes.indexOf(fileExtension) > -1) {
+                            if (file.size > (_this.config.maxFileSizeMB * 1024 * 1024)) {
+                                reject(("" + _this.config.LANG.QMSCKEDITOR.UPLOAD_FILE_OVERSIZE).replace('{0}', _this.config.maxFileSizeMB.toString()));
+                            }
+                            _this._initRequest();
+                            _this._initListeners(resolve, reject, file.name);
+                            _this._sendRequest(file);
+                        }
+                        else {
+                            reject(("" + _this.config.LANG.QMSCKEDITOR.UPLOAD_FILE_NOT_VALID_FORMAT).replace('{0}', _this.config.imageUploadTypes));
+                        }
                     };
-                    // if (file.size > 512000) {
-                    //   const msg = `${file.name} is more than 500kb. Sorry, it has to be less than or equal to 500kb`;
-                    //   QMSCKEditorToastService.error(msg);
-                    //   reject();
-                    // }
-                    myReader.readAsDataURL(file);
                 });
             })
                 .catch(function (error) {
                 throw error;
             });
         };
-        return UploadAdapter;
+        return QmsUploadAdapter;
     }());
 
     var CKEditorEventConst = /** @class */ (function () {
@@ -9252,7 +9349,9 @@
     CKEditorEventConst.QMSCK_FLOWCHART_PLUGIN_MSG = 'QMSCK_FLOWCHART_PLUGIN_MSG';
     CKEditorEventConst.QMSCK_FLOWCHART_PLUGIN_RESP = 'QMSCK_FLOWCHART_PLUGIN_RESP';
     CKEditorEventConst.QMSCK_FLOWCHART = 'flowchart';
-    CKEditorEventConst.QMSCK_TOGGLE_TOOLBAR_MSG = 'QMSCK_TOGGLE_TOOLBAR_MSG';
+    CKEditorEventConst.QMSCK_TOGGLE_TOOLBAR_MSG = 'QMSCK_TOGGLE_TOOLBAR_MSG';
+    CKEditorEventConst.QMSCK_BROWSE_VIDEO_MSG = 'QMSCK_BROWSE_VIDEO_MSG';
+    CKEditorEventConst.QMSCK_BROWSE_VIDEO_RESP = 'QMSCK_BROWSE_VIDEO_RESP';
 
     var IFRAME_SRC = '//cdn.iframe.ly/api/iframe';
     var API_KEY = 'b499e92e857f435c39c14d';
@@ -13366,6 +13465,26 @@
     CKEditorLinkConst.AREA_PARTIAL_URL = '/area/detail/';
     CKEditorLinkConst.PROCESS_PARTIAL_URL = '/process-detail/';
 
+    var QMSCKEditorUploadService = /** @class */ (function (_super) {
+        __extends(QMSCKEditorUploadService, _super);
+        function QMSCKEditorUploadService() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        QMSCKEditorUploadService.prototype.uploadImage = function (file) {
+            var formData = new FormData();
+            formData.append('name', file.name);
+            formData.append('file', file);
+            return this.post('ckeditorUpload/UploadImage', formData);
+        };
+        return QMSCKEditorUploadService;
+    }(QMSCKEditorBaseService));
+    QMSCKEditorUploadService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function QMSCKEditorUploadService_Factory() { return new QMSCKEditorUploadService(i0__namespace.ɵɵinject(i1__namespace.HttpClient), i0__namespace.ɵɵinject(QMSCKEditorGlobalService)); }, token: QMSCKEditorUploadService, providedIn: "root" });
+    QMSCKEditorUploadService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+
     var ILink = /** @class */ (function () {
         function ILink() {
             this.target = exports.TargetTypeName.new;
@@ -13379,13 +13498,14 @@
     }());
     var QMSCKEditorBpmnComponent = /** @class */ (function (_super) {
         __extends(QMSCKEditorBpmnComponent, _super);
-        function QMSCKEditorBpmnComponent(dialog, translate, bmpnService, bpmnApiService, linkService, dialogRef, data) {
+        function QMSCKEditorBpmnComponent(dialog, translate, bmpnService, bpmnApiService, linkService, uploadService, dialogRef, data) {
             var _this = _super.call(this) || this;
             _this.dialog = dialog;
             _this.translate = translate;
             _this.bmpnService = bmpnService;
             _this.bpmnApiService = bpmnApiService;
             _this.linkService = linkService;
+            _this.uploadService = uploadService;
             _this.dialogRef = dialogRef;
             _this.data = data;
             _this.expandedPanel = true;
@@ -13566,6 +13686,19 @@
                 });
             });
         };
+        QMSCKEditorBpmnComponent.prototype.dataUrlToFile = function (dataUrl, filename) {
+            var arr = dataUrl.split(',');
+            if (arr.length < 2) {
+                return undefined;
+            }
+            var mimeArr = arr[0].match(/:(.*?);/);
+            if (!mimeArr || mimeArr.length < 2) {
+                return undefined;
+            }
+            var mime = mimeArr[1];
+            var buff = buffer.Buffer.from(arr[1], 'base64');
+            return new File([buff], filename, { type: mime });
+        };
         QMSCKEditorBpmnComponent.prototype.getImageContent = function (paper) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_b) {
@@ -13580,7 +13713,7 @@
         };
         QMSCKEditorBpmnComponent.prototype.onInsertImage = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var graph, paper, clientRect, graphObject, id, imageContent, _b, imagemap, result;
+                var graph, paper, clientRect, graphObject, id, imageContent, _b, file, imageUrl, imagemap, result;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
@@ -13595,8 +13728,12 @@
                             return [4 /*yield*/, this.getImageContent(paper)];
                         case 2:
                             imageContent = _b + (_c.sent());
+                            file = this.dataUrlToFile(imageContent, CKEditorEventConst.QMSCK_BPMN + "#" + id);
+                            return [4 /*yield*/, this.uploadService.uploadImage(file).toPromise()];
+                        case 3:
+                            imageUrl = _c.sent();
                             imagemap = this.toImageMap(id, graphObject.cells, clientRect);
-                            result = { key: CKEditorEventConst.QMSCK_BPMN + "#" + id, values: imageContent, imagemap: imagemap };
+                            result = { key: CKEditorEventConst.QMSCK_BPMN + "#" + id, values: imageUrl, imagemap: imagemap };
                             this.dialogRef.close(result);
                             return [2 /*return*/];
                     }
@@ -14159,6 +14296,7 @@
         { type: BpmnService },
         { type: QMSCKEditorBpmnApiService },
         { type: QMSCKEditorLinkService },
+        { type: QMSCKEditorUploadService },
         { type: dialog.MatDialogRef },
         { type: QMSCKEditorBpmnData, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
     ]; };
@@ -16196,6 +16334,7 @@
             _this.anchorText = '';
             //anchorByName = '';
             _this.advisoryTitle = '';
+            _this.isImageLoading = false;
             _this.isUrlProcessing = false;
             _this.naturalImageWidth = 0;
             _this.naturalImageHeight = 0;
@@ -16330,8 +16469,10 @@
         QMSCKEditorImageMapComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
             if (this.myImageRef) {
+                this.isImageLoading = true;
                 this.imageListeners.push(this.renderer.listen(this.myImageRef.nativeElement, 'load', function () {
                     _this.onImageLoad();
+                    _this.isImageLoading = false;
                 }));
             }
             // Avoid drag&drop of the image
@@ -16366,9 +16507,9 @@
                 }
             });
         };
-        QMSCKEditorImageMapComponent.prototype.parseLinkUrl = function (url, defaultProtocolName) {
+        QMSCKEditorImageMapComponent.prototype.parseLinkUrl = function (url) {
             var protocol = this.protocolRegex.exec(url);
-            if (protocol) {
+            if (!!protocol) {
                 this.processedUrl = url.substr(protocol[0].length);
                 this.url = this.processedUrl;
                 this.selectedProtocol = protocol[0].toLowerCase();
@@ -16381,9 +16522,7 @@
             else {
                 this.processedUrl = url;
                 this.url = this.processedUrl;
-                if (!!this.selectedProtocol) {
-                    this.selectedProtocol = defaultProtocolName || exports.ProtocolTypeName.http;
-                }
+                this.selectedProtocol = exports.ProtocolTypeName.other;
             }
         };
         QMSCKEditorImageMapComponent.prototype.onSelectArea = function (area) {
@@ -16660,8 +16799,8 @@
     QMSCKEditorImageMapComponent.decorators = [
         { 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: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}"]
+                    template: "<div id=\"qmsckeditor-imagemap\" class=\"qmsckeditor qmsckeditor__imagemap__container\">\r\n    <div id=\"qmsckeditor-imagemap-header\">\r\n        <span id=\"qmsckeditor-imagemap-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\r\n            (click)=\"onCloseDialog()\">\r\n            <mat-icon>close</mat-icon>\r\n        </span>\r\n        <div id=\"qmsckeditor-imagemap-header_002\" mat-dialog-content>\r\n            <h2 id=\"qmsckeditor-imagemap_002_001\">\r\n                {{ LANG.QMSCKEDITOR.IMAGE_MAP_PROPERTIES }}\r\n            </h2>\r\n        </div>\r\n    </div>\r\n    <div id=\"qmsckeditor-imagemap-content\">\r\n        <div id=\"qmsckeditor-imagemap-content_001\" class=\"col-12 mt-1 pl-2 pr-2\">\r\n            <mat-expansion-panel id=\"qmsckeditor-imagemap-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\r\n                <div id=\"qmsckeditor-imagemap-panel_001\">\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_001\" class=\"qmsckeditor__imagemap__information\">\r\n                        <form [formGroup]=\"imageMapFormGroup\">\r\n                            <div class=\"row\">\r\n                                <div class=\"col-9\">\r\n                                    <mat-button-toggle-group [(ngModel)]=\"selectedMode\" formControlName=\"modeList\"\r\n                                        (change)=\"onModeChange($event)\">\r\n                                        <mat-button-toggle *ngFor=\"let mode of modes\" [value]=\"mode.id\"\r\n                                            [matTooltip]=\"mode.name\">\r\n                                            <mat-icon color=\"red\" [svgIcon]=\"mode.icon\" aria-hidden=\"true\">\r\n                                            </mat-icon>\r\n                                        </mat-button-toggle>\r\n                                    </mat-button-toggle-group>\r\n                                    <span style=\"margin-left: 15px;\" #myStatus></span>\r\n                                </div>\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ZOOM }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedZoom\" formControlName=\"zoomList\"\r\n                                            (ngModelChange)=\"onZoomChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let zoomType of zoomTypes\" [value]=\"zoomType.id\">\r\n                                                {{ zoomType.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedLinkType\" formControlName=\"linkTypeList\"\r\n                                            (ngModelChange)=\"onLinkTypeChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\r\n                                                {{ link.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-3\" *ngIf=\"selectedLinkType === 0\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\"\r\n                                            (ngModelChange)=\"onTargetChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\r\n                                                {{ target.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\r\n                                *ngIf=\"selectedLinkType === 1\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorTextList\"\r\n                                            (ngModelChange)=\"onAnchorTextChange()\">\r\n                                            <mat-option *ngFor=\"let editorAnchor of editorAnchors\"\r\n                                                [value]=\"editorAnchor.anchorValue\" disableOptionCentering>\r\n                                                {{ editorAnchor.viewValue }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\r\n                                *ngIf=\"selectedLinkType === 0\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\"\r\n                                            (ngModelChange)=\"onProtocolChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let protocol of protocols\" [value]=\"protocol.id\">\r\n                                                {{ protocol.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-5\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\r\n                                        <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\"\r\n                                            (ngModelChange)=\"onUrlChange()\" (keyup)=\"onUrlKeyup()\" />\r\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('required')\">{{\r\n                                            LANG.QMSCKEDITOR.REQUIRED_URL }}\r\n                                        </mat-error>\r\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('invalidURL')\">{{\r\n                                            LANG.QMSCKEDITOR.INVALID_URL }}</mat-error>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-4\">\r\n                                    <div class=\"row button__groups\">\r\n                                        <div class=\"col-6\">\r\n                                            <button class=\"save\" mat-stroked-button (click)=\"attachment()\">\r\n                                                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\r\n                                            </button>\r\n                                        </div>\r\n                                        <div class=\"col-6\">\r\n                                            <button class=\"save\" mat-stroked-button (click)=\"eHandbook(false, false)\">\r\n                                                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n                                            </button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </form>\r\n                    </div>\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_002\" class=\"qmsckeditor__imagemap__map\">\r\n                        <img #myImage [src]=\"imageMapData.imageUrl\">\r\n                        <mat-spinner diameter=\"40\" mode=\"indeterminate\" *ngIf=\"isImageLoading\"></mat-spinner>\r\n                    </div>\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_003\" class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4\">\r\n                        <div class=\"col-4 pr-0\">\r\n                            <button class=\"save\" mat-flat-button (click)=\"removeMap()\">\r\n                                {{ LANG.QMSCKEDITOR.REMOVE_MAP }}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"col-4 pr-0\">\r\n                            <button class=\"save\" mat-flat-button (click)=\"save()\">\r\n                                {{ LANG.QMSCKEDITOR.SAVE }}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"col-4 pl-0\">\r\n                            <button class=\"cancel\" mat-flat-button (click)=\"cancel()\">\r\n                                {{ LANG.QMSCKEDITOR.CANCEL }}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </mat-expansion-panel>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                    styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}::ng-deep .qmsckeditor__imagemap__container .mat-form-field{width:100%}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__information{position:relative}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__map{overflow:auto;width:800px;min-height:371px;position:relative;max-height:460px;display:flex;justify-content:center;align-items:flex-start}::ng-deep .qmsckeditor__imagemap__container .mat-button-toggle-checked{border:1px solid #000!important}::ng-deep .qmsckeditor__imagemap__container .hidden{visibility:hidden}"]
                 },] }
     ];
     QMSCKEditorImageMapComponent.ctorParameters = function () { return [
@@ -16711,7 +16850,7 @@
                     _this.LANG = _this.translate.getObjectLang(res);
                 }
             });
-            this.editorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(',heading,|,fontsize,fontfamily,fontColor,fontBackgroundColor,|,bold,italic,underline,strikethrough,|,alignment,|,bulletedList,numberedList,|,outdent,indent,|,subscript,superscript,|,undo,redo,|,specialCharacters,blockQuote,insertTable,|,link,anchor,|,timestamp,|,removeformat');
+            this.editorConfig = CKEditorCommonFunctions.getCKEditorConfiguration('heading,|,fontsize,fontfamily,fontColor,fontBackgroundColor,|,bold,italic,underline,strikethrough,|,alignment,|,bulletedList,numberedList,|,outdent,indent,|,subscript,superscript,|,undo,redo,|,specialCharacters,blockQuote,insertTable,|,link,anchor,|,timestamp,|,removeformat');
         };
         QMSCKEditorTooltipComponent.prototype.ngAfterViewChecked = function () {
             this.cdr.detectChanges();
@@ -16750,7 +16889,7 @@
     QMSCKEditorTooltipComponent.decorators = [
         { 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",
+                    template: "<div id=\"qmsckeditor-tooltip\" class=\"qmsckeditor qmsckeditor__tooltip__container\">\r\n  <div id=\"qmsckeditor-tooltip-header\">\r\n    <span id=\"qmsckeditor-tooltip-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\r\n      (click)=\"onCloseDialog()\">\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmsckeditor-tooltip-header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor-tooltip_002_001\">\r\n        {{ LANG.QMSCKEDITOR.INSERT_TOOLTIP }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"tooltipFormGroup\">\r\n    <div id=\"qmsckeditor-tooltip-content\" class=\"qmsckeditor tooltip-content height\">\r\n      <div id=\"qmsckeditor-tooltip-content_001\" class=\"col-12 mt-1 pl-2 pr-2\">\r\n        <mat-expansion-panel id=\"qmsckeditor-tooltip-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\r\n          <div id=\"qmsckeditor-tooltip-panel_001\">\r\n            <div id=\"qmsckeditor-tooltip-panel_001_001\">\r\n              <mat-form-field class=\"col-12 pl-0 pr-0\" appearance=\"fill\">\r\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\r\n                <input matInput [(ngModel)]=\"tooltip.text\" formControlName=\"title\" />\r\n              </mat-form-field>\r\n            </div>\r\n            <div id=\"qmsckeditor-tooltip-panel_001_002\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.CONTENT }}</mat-label>\r\n              <div class=\"qmsckeditor_container col-12 pl-0 pr-0\">\r\n                <ckeditor class=\"qms-ckeditor\" [(editor)]=\"editor\" [config]=\"editorConfig\" (ready)=\"onReady($event)\"\r\n                  [(ngModel)]=\"tooltip.content\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\r\n                  formControlName=\"content\">\r\n                </ckeditor>\r\n              </div>\r\n            </div>\r\n            <div id=\"qmsckeditor-tooltip-panel_001_003\" class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4\">\r\n              <div class=\"col-6 pr-0\">\r\n                <button class=\"save\" mat-flat-button (click)=\"saveTooltip()\" [disabled]=\"tooltipFormGroup.invalid\">\r\n                  {{ LANG.QMSCKEDITOR.SAVE }}\r\n                </button>\r\n              </div>\r\n              <div class=\"col-6 pl-0\">\r\n                <button class=\"cancel\" mat-flat-button (click)=\"cancelTooltip()\">\r\n                  {{ LANG.QMSCKEDITOR.CANCEL }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>",
                     styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}.qmsckeditor__tooltip__container .mat-form-field{width:100%}.qmsckeditor__tooltip__container textarea.mat-input-element{min-height:150px}"]
                 },] }
     ];
@@ -16761,16 +16900,54 @@
         { type: QMSCKEditorTooltip, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
     ]; };
 
-    //import { CKEditor5 } from '@ckeditor/ckeditor5-angular/ckeditor';
+    var QMSCKEditorAboutComponent = /** @class */ (function (_super) {
+        __extends(QMSCKEditorAboutComponent, _super);
+        function QMSCKEditorAboutComponent(translate, dialogRef, data) {
+            var _this = _super.call(this) || this;
+            _this.translate = translate;
+            _this.dialogRef = dialogRef;
+            _this.data = data;
+            _this.currentVersion = data;
+            return _this;
+        }
+        QMSCKEditorAboutComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubcribe)).subscribe(function (res) {
+                if (res) {
+                    _this.LANG = _this.translate.getObjectLang(res);
+                }
+            });
+            this.currentYear = new Date().getFullYear();
+        };
+        QMSCKEditorAboutComponent.prototype.onCloseDialog = function () {
+            this.dialogRef.close();
+        };
+        return QMSCKEditorAboutComponent;
+    }(QMSCKEditorBaseComponent));
+    QMSCKEditorAboutComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-about-ckeditor',
+                    template: "<div id=\"qmsckeditor-about\" class=\"qmsckeditor qmsckeditor__about__container\">\r\n    <div id=\"qmsckeditor-about-header\">\r\n        <span id=\"qmsckeditor-about-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\r\n            (click)=\"onCloseDialog()\">\r\n            <mat-icon>close</mat-icon>\r\n        </span>\r\n        <div id=\"qmsckeditor-about-header_002\" mat-dialog-content>\r\n            <h2 id=\"qmsckeditor-about_002_001\">\r\n                {{ LANG.ABOUT.ABOUT_CKEDITOR }}\r\n            </h2>\r\n        </div>\r\n    </div>\r\n    <div id=\"qmsckeditor-about-content\">\r\n        <div class=\"col-12 qmsckeditor__about__logo__container\">\r\n            <img class=\"qmsckeditor__about__logo\" src=\"../../../../assets/images/ckeditor5.svg\" alt=\"CKEditor logo\">\r\n        </div>\r\n        <div class=\"col-12\">\r\n            <p>{{LANG.ABOUT.CKEDITOR5_VERSION}} {{currentVersion}}.<br><a target=\"_blank\"\r\n                    href=\"https://ckeditor.com/\">https://ckeditor.com</a></p>\r\n            <p>{{LANG.ABOUT.CHECK}} <a target=\"_blank\"\r\n                    href=\"https://ckeditor.com/docs/\">{{LANG.ABOUT.CKEDITOR_USERS_GUIDE}}</a> {{LANG.ABOUT.FOR_HELP}}.\r\n            </p>\r\n            <p>{{LANG.ABOUT.FOR_LICENSING_INFORMATION_PLEASE_VISIT_OUR_WEBSITE}}:<br><a target=\"_blank\"\r\n                    href=\"https://ckeditor.com/legal/ckeditor-oss-license/\">https://ckeditor.com/legal/ckeditor-oss-license/</a>\r\n            </p>\r\n            <p>{{LANG.ABOUT.COPYRIGHT}} 2003-{{currentYear}}, <a target=\"_blank\"\r\n                    href=\"https://cksource.com/\">CKSource</a> - Frederico Knabben.\r\n                <br>{{LANG.ABOUT.ALL_RIGHTS_RESERVED}}.\r\n            </p>\r\n        </div>\r\n        <div class=\"col-12\">\r\n            <button mat-stroked-button class=\"qmsckeditor__about__button\" (click)=\"onCloseDialog()\">\r\n                {{ LANG.QMSCKEDITOR.CLOSE }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>",
+                    styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}.qmsckeditor__about__container .qmsckeditor__about__logo__container{display:flex;justify-content:center;margin-bottom:10px}.qmsckeditor__about__container .qmsckeditor__about__logo{height:64px}.qmsckeditor__about__container .qmsckeditor__about__button{float:right}"]
+                },] }
+    ];
+    QMSCKEditorAboutComponent.ctorParameters = function () { return [
+        { type: TranslateLibraryService },
+        { type: dialog.MatDialogRef },
+        { type: String, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
+    ]; };
+
     var QMSCKEditorComponent = /** @class */ (function (_super) {
         __extends(QMSCKEditorComponent, _super);
         /**
          * Constructor
          */
-        function QMSCKEditorComponent(dialog, globalService, qmsCKEditorFullscreenComponent, renderer, elRef) {
+        function QMSCKEditorComponent(dialog, translate, globalService, treeService, qmsCKEditorFullscreenComponent, renderer, elRef) {
             var _this = _super.call(this) || this;
             _this.dialog = dialog;
+            _this.translate = translate;
             _this.globalService = globalService;
+            _this.treeService = treeService;
             _this.qmsCKEditorFullscreenComponent = qmsCKEditorFullscreenComponent;
             _this.renderer = renderer;
             _this.elRef = elRef;
@@ -16800,16 +16977,28 @@
                 case this.ckEditorEventConst.QMSCK_BPMN_PLUGIN_MSG:
                     this.bpmnEventHandling(event.data.value);
                     break;
+                case this.ckEditorEventConst.QMSCK_ABOUT_CKEDITOR_PLUGIN_MSG:
+                    this.aboutCKEditorEventHandling(event.data.value);
+                    break;
                 case this.ckEditorEventConst.QMSCK_TOGGLE_TOOLBAR_MSG:
                     this.toggleToolbarEventHandling();
                     break;
+                case this.ckEditorEventConst.QMSCK_BROWSE_VIDEO_MSG:
+                    this.browseVideoEventHandling(event.data.value);
+                    break;
                 default:
                     break;
             }
         };
         QMSCKEditorComponent.prototype.ngOnInit = function () {
+            var _this = this;
             this.name = 'CKEditor custom build';
             this.ckEditor = this.qmsckPlugin.pluginObject;
+            this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubcribe)).subscribe(function (res) {
+                if (res) {
+                    _this.LANG = _this.translate.getObjectLang(res);
+                }
+            });
             this.ckeditorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(this.qmsckPlugin.itemToolbar);
             this.globalService.setApiUrl(this.qmsckData.apiUrl);
             if (this.isEnabledMathtypeConfig()) {
@@ -16821,6 +17010,12 @@
             if (this.isEnabledToggleToolbar()) {
                 this.addToggleToolbarConfig();
             }
+            if (this.isEnabledWProofreader()) {
+                this.addWProofreaderConfig();
+            }
+            if (this.isEnabledTOCToolbar()) {
+                this.addToggleTOCConfig();
+            }
             if (this.isEnabledFullScreenConfig()) {
                 this.addFullScreenConfig();
             }
@@ -16841,6 +17036,23 @@
                 this.renderer.addClass(this.elRef.nativeElement, 'ck-disabled');
             }
         };
+        QMSCKEditorComponent.prototype.isEnabledWProofreader = function () {
+            var pattern = /(wproofreader)/gmi;
+            return !!this.qmsckData.wproofreader
+                && !!this.qmsckData.wproofreader.srcUrl
+                && !!this.qmsckPlugin.itemToolbar
+                && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
+        };
+        QMSCKEditorComponent.prototype.addWProofreaderConfig = function () {
+            var wproofreaderConfig = {
+                wproofreader: Object.assign({}, this.qmsckData.wproofreader)
+            };
+            if (!this.qmsckData.wproofreader.serviceId || this.qmsckData.wproofreader.serviceId.length == 0) {
+                //Fallback value of serviceId property to demo serviceId
+                this.qmsckData.wproofreader.serviceId = '1:KpkvQ2-6KNUj-L1W3u2-C9j0K1-Zv2tY1-CfDOx-WfGRg2-qXtci-YyyE34-j09H42-b0aCt3-d9a';
+            }
+            this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, wproofreaderConfig);
+        };
         QMSCKEditorComponent.prototype.isEnabledToggleToolbar = function () {
             var pattern = /(toggleToolbar)/gmi;
             return !!this.qmsckData.toggleToolbar
@@ -16870,6 +17082,21 @@
             };
             this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, fullScreenConfig);
         };
+        QMSCKEditorComponent.prototype.isEnabledTOCToolbar = function () {
+            var pattern = /(tableOfContents)/gmi;
+            return !!this.qmsckData.tableOfContentHeadings
+                && !!this.qmsckPlugin.itemToolbar
+                && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
+        };
+        QMSCKEditorComponent.prototype.addToggleTOCConfig = function () {
+            var items = this.qmsckData.tableOfContentHeadings.split(',');
+            var tableOfContents = {
+                tableOfContents: {
+                    supportedHeadings: items
+                }
+            };
+            this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, tableOfContents);
+        };
         QMSCKEditorComponent.prototype.isEnabledTimestampConfig = function () {
             var pattern = /(timestamp)/gmi;
             return !!this.qmsckData.timestampFormat
@@ -16933,17 +17160,21 @@
             this.initEditor(editor);
         };
         QMSCKEditorComponent.prototype.initEditor = function (editor) {
+            var _this = this;
+            var imageUploadTypes = editor.config.get('image.upload.types');
+            var maxFileSizeMB = this.qmsckData.maxFileSizeMB;
+            var config = { apiUrl: this.qmsckData.apiUrl, LANG: this.LANG, imageUploadTypes: imageUploadTypes, maxFileSizeMB: maxFileSizeMB };
+            editor.plugins.get("FileRepository").createUploadAdapter = function (loader) {
+                return new QmsUploadAdapter(loader, config);
+            };
             editor.ui
                 .getEditableElement()
                 .parentElement.insertBefore(editor.ui.view.toolbar.element, editor.ui.getEditableElement());
-            editor.plugins.get('FileRepository').createUploadAdapter = function (loader) {
-                return new UploadAdapter(loader);
-            };
             // Apped Wordcount to CKeditor
             editor.plugins.get('WordCount').on('update', function (evt, stats) {
                 // Prints the current content statistics.
                 var wordsBox = document.querySelector('.wordcount-content');
-                wordsBox.textContent = "Words: " + stats.words + "  / Characters: " + stats.characters;
+                wordsBox.textContent = _this.LANG.QMSCKEDITOR.WORDS + ": " + stats.words + " / " + _this.LANG.QMSCKEDITOR.CHARACTERS + ": " + stats.characters;
             });
         };
         /**
@@ -17031,7 +17262,7 @@
             data.ckEditor = this.qmsckPlugin.pluginObject;
             var dialogTemplate = this.dialog.open(QMSCKEditorTooltipComponent, {
                 width: '650px',
-                height: '550px',
+                height: '555px',
                 data: data,
                 disableClose: true
             });
@@ -17108,6 +17339,21 @@
                 }
             });
         };
+        /*
+         About CKEditor
+       */
+        QMSCKEditorComponent.prototype.aboutCKEditorEventHandling = function (version) {
+            var dialogTemplate = this.dialog.open(QMSCKEditorAboutComponent, {
+                width: '500px',
+                data: version,
+                disableClose: true
+            });
+            dialogTemplate
+                .afterClosed()
+                .pipe(operators.takeUntil(this.ngUnsubcribe))
+                .subscribe(function (result) {
+            });
+        };
         /*
           Toolbar toggle
         */
@@ -17167,12 +17413,86 @@
                 }
             }
         };
+        /**
+         * Browse Video
+         */
+        QMSCKEditorComponent.prototype.browseVideoEventHandling = function (value) {
+            var _this = this;
+            this.treeService
+                .getUploadVideoList()
+                .pipe(operators.takeUntil(this.ngUnsubcribe))
+                .subscribe(function (response) {
+                var videos = response || [];
+                var config = {
+                    allowSelectFolder: false,
+                    areaOfCurrentProcess: '',
+                    showCheckBox: true,
+                    allowMultipleCheck: value.allowMultipleFiles,
+                    onlyCheckBoxForChild: true,
+                    moduleId: DataType$1.document,
+                    openIcon: 'folder_open',
+                    openIconColor: '#1954A9',
+                    closeIcon: 'folder_filled',
+                    closeIconColor: '#4acaff',
+                    itemIcon: 'insert_drive_file',
+                    itemIconPath: '',
+                    itemIconBase64: '',
+                    singleSelectedNode: true,
+                    expandAll: true
+                };
+                var data = new PopupData();
+                data.moduleId = 2;
+                data.moduleName = _this.LANG.QMSCKEDITOR.SELECT_VIDEO_FROM_ARCHIVE;
+                data.treeData1 = videos.map(function (item) {
+                    return {
+                        rootId: item.rootId,
+                        parentId: item.parentId,
+                        rootName: item.rootName,
+                        subName: item.subName,
+                        childId: item.childId,
+                        childName: item.childName,
+                        statusId: item.statusId,
+                        displayId: item.displayId,
+                        contentType: item.contentType,
+                        url: item.url
+                    };
+                });
+                data.treeData2 = [];
+                data.treeConfig1 = config;
+                var dialogRef = _this.dialog.open(RelatedPopupComponent, {
+                    minWidth: '450px',
+                    maxWidth: '800px',
+                    minHeight: '620px',
+                    data: data,
+                    panelClass: 'qmsckeditor-browse-video-popup'
+                });
+                setTimeout(function () {
+                    var searchBox = window.document.querySelector('.qmsckeditor-browse-video-popup #qmslib_related_popup_search');
+                    if (searchBox) {
+                        searchBox.style.display = 'none';
+                    }
+                }, 100);
+                dialogRef
+                    .afterClosed()
+                    .subscribe(function (result) {
+                    if (result) {
+                        var ids_1 = result.reduce(function (result, item) {
+                            result[item.id.toString()] = item.id;
+                            return result;
+                        }, {});
+                        var urls = videos.filter(function (i) { return i.childId && !!ids_1[i.childId.toString()]; }).map(function (i) { return i.url; });
+                        var evt = new CustomEvent(_this.ckEditorEventConst.QMSCK_BROWSE_VIDEO_RESP, { detail: { urls: urls } });
+                        window.dispatchEvent(evt);
+                    }
+                });
+            });
+        };
         return QMSCKEditorComponent;
     }(QMSCKEditorBaseComponent));
     QMSCKEditorComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-ckeditor',
-                    template: "<div id=\"qmsckeditor\" class=\"qmsckeditor_container\">\r\n  <ckeditor class=\"qms-ckeditor\" [tagName]=\"ckTagname\" [(editor)]=\"ckEditor\" [config]=\"ckeditorConfig\"\r\n    (ready)=\"onReady($event)\" [(ngModel)]=\"qmsckContentInput\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\r\n    [disabled]=\"isDisabled\">\r\n  </ckeditor>\r\n  <div class=\"sub-container\">\r\n    <div class=\"\">\r\n      <span>Assistive text</span>\r\n    </div>\r\n    <div class=\"wordcount-content\"></div>\r\n  </div>\r\n</div>",
+                    template: "<div id=\"qmsckeditor\" class=\"qmsckeditor_container\">\r\n  <ckeditor class=\"qms-ckeditor\" [tagName]=\"ckTagname\" [(editor)]=\"ckEditor\" [config]=\"ckeditorConfig\"\r\n    (ready)=\"onReady($event)\" [(ngModel)]=\"qmsckContentInput\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\r\n    [disabled]=\"isDisabled\">\r\n  </ckeditor>\r\n  <div class=\"sub-container\">\r\n    <div class=\"\">\r\n      <span>{{LANG.QMSCKEDITOR.ASSISTIVE_TEXT}}</span>\r\n    </div>\r\n    <div class=\"wordcount-content\"></div>\r\n  </div>\r\n</div>\r\n",
                     providers: [
                         QMSCKEditorFullscreenComponent,
                         {
@@ -17193,7 +17513,9 @@
     ];
     QMSCKEditorComponent.ctorParameters = function () { return [
         { type: dialog.MatDialog },
+        { type: TranslateLibraryService },
         { type: QMSCKEditorGlobalService },
+        { type: QMSCKEditorTreeService },
         { type: QMSCKEditorFullscreenComponent },
         { type: i0.Renderer2 },
         { type: i0.ElementRef }
@@ -17230,7 +17552,8 @@
                         QMSCKEditorTooltipComponent,
                         QMSCKEditorImageMapComponent,
                         QMSCKEditorBpmnComponent,
-                        SaveTemplateComponent
+                        SaveTemplateComponent,
+                        QMSCKEditorAboutComponent
                     ],
                     imports: [
                         ckeditor5Angular.CKEditorModule,
@@ -17256,8 +17579,9 @@
                         autocomplete.MatAutocompleteModule,
                         scrolling.ScrollingModule,
                         i1.HttpClientModule,
-                        SharedModule,
                         tabs.MatTabsModule,
+                        progressBar.MatProgressBarModule,
+                        SharedModule
                     ],
                     providers: [],
                     exports: [QMSCKEditorComponent],
@@ -18217,10 +18541,10 @@
             appIconService.registerRiskIcon(iconRegistry, domSanitizer);
         }
         SelectIncludeChildrenPopUpComponent.prototype.ngAfterViewInit = function () {
+            this.initTree(this.checkedNodeList);
             if (this.editItem) {
                 this.focusEditItem(this.editItem);
             }
-            this.initTree(this.checkedNodeList);
         };
         SelectIncludeChildrenPopUpComponent.prototype.ngOnDestroy = function () {
             this.ngUnsubscribe.next();
@@ -18268,16 +18592,61 @@
                     _this.selectedOptions.push(element);
                     if (element.type === exports.SelectOptionTypes.IncludeChildren) {
                         _this.selectedOptions = _this.selectedOptions.concat(element.children);
+                        if (!_this.includeChildren) {
+                            _this.disabledList = __spreadArray(__spreadArray([], __read(_this.disabledList)), [element]);
+                            _this.disabledList = __spreadArray(__spreadArray([], __read(_this.disabledList)), __read(element.children.map(function (x) {
+                                return {
+                                    id: x.id,
+                                    itemName: x.itemName,
+                                    children: [],
+                                    parentId: x.parentId,
+                                    type: x.type,
+                                    noSelectedChildren: 0,
+                                    noChildren: 0
+                                };
+                            })));
+                        }
+                    }
+                    else {
+                        if (_this.includeChildren) {
+                            _this.disabledList = __spreadArray(__spreadArray([], __read(_this.disabledList)), [element]);
+                        }
                     }
                     _this.selectedData = _this.mapSelectOptionToTreeNode(_this.selectedOptions);
                 });
             }
         };
         SelectIncludeChildrenPopUpComponent.prototype.focusEditItem = function (selectedOption) {
-            var node = this.dataTrees.toArray()[0].getNodeByIdAndParentId(selectedOption.id, selectedOption.parentId);
+            var _this = this;
+            var parent;
+            var parentList = [];
+            parent = this.treeData.find(function (x) { return x.rootId === selectedOption.parentId; });
+            if (parent) {
+                parentList.push({
+                    id: parent.rootId,
+                    itemName: parent.rootName,
+                    parentId: parent.parentId,
+                    type: exports.SelectOptionTypes.IncludeChildren
+                });
+                parentList = this.getParentLineOfNode(parentList, parent);
+            }
+            var node;
+            if (parentList.length > 0) {
+                parentList.forEach(function (parent) {
+                    node = _this.dataTrees.toArray()[0].getNodeByIdAndParentId(parent.id, parent.parentId);
+                    if (node) {
+                        _this.dataTrees.toArray()[0].expandNode(node);
+                        var element = document.getElementById("_" + (node.parentId ? node.parentId.toLowerCase() : '') + "_" + node.id.toLowerCase() + "_" + node.level);
+                        if (element) {
+                            element.scrollIntoView(false);
+                        }
+                    }
+                });
+            }
+            node = this.dataTrees.toArray()[0].getNodeByIdAndParentId(selectedOption.id, selectedOption.parentId);
             if (node) {
                 this.dataTrees.toArray()[0].expandNode(node);
-                var element = document.getElementById("_" + (node.parentId ? node.parentId : '') + "_" + node.id + "_" + node.level);
+                var element = document.getElementById("_" + (node.parentId ? node.parentId.toLowerCase() : '') + "_" + node.id.toLowerCase() + "_" + node.level);
                 if (element) {
                     element.scrollIntoView(false);
                 }
@@ -18288,7 +18657,7 @@
             if (index >= 0) {
                 if (this.checkedNodeList[index].type === exports.SelectOptionTypes.IncludeChildren) {
                     this.removeIncludeChildren(item);
-                    this.refactorSelectList(item);
+                    this.deleteNodeFromSelectedNode(item);
                 }
                 else {
                     var position = this.selectedOptions.findIndex(function (x) { return x.id === item.id && x.parentId === item.parentId; });
@@ -18296,8 +18665,9 @@
                         this.selectedOptions.splice(position, 1);
                     }
                 }
+                this.focusEditItem(this.checkedNodeList[index]);
+                this.enableSelectedNode(this.checkedNodeList[index]);
                 this.checkedNodeList.splice(index, 1);
-                this.enableSelectedNode({ id: item.id, parentId: item.parentId, itemName: item.name, type: exports.SelectOptionTypes.IncludeChildren });
                 this.selectedData = this.mapSelectOptionToTreeNode(this.selectedOptions);
             }
         };
@@ -18329,7 +18699,7 @@
                     this.checkedNodeList.push({
                         id: item.id,
                         itemName: item.itemName,
-                        type: exports.SelectOptionTypes.SelectOne,
+                        type: item.type,
                         parentId: item.parentId,
                         children: [],
                         noChildren: 0,
@@ -18338,6 +18708,15 @@
                 }
             }
             this.selectedData = this.mapSelectOptionToTreeNode(this.selectedOptions);
+            this.focusEditItem({
+                id: item.id,
+                itemName: item.itemName,
+                type: item.type,
+                parentId: item.parentId,
+                children: [],
+                noChildren: 0,
+                noSelectedChildren: 0
+            });
         };
         SelectIncludeChildrenPopUpComponent.prototype.getItemIconType = function (item) {
             if (item.itemIcon && item.itemIcon.length)
@@ -18410,12 +18789,29 @@
         };
         SelectIncludeChildrenPopUpComponent.prototype.removeIncludeChildren = function (item) {
             var _this = this;
+            var index = this.checkedNodeList.findIndex(function (x) { return x.id.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === x.parentId.toLowerCase() && x.type === exports.SelectOptionTypes.IncludeChildren; });
+            if (index >= 0) {
+                var listChildren_1 = this.checkedNodeList[index].children;
+                var itemIndex_1 = this.selectedOptions.findIndex(function (node) { return node.id.toLowerCase() === item.id.toLowerCase() && node.parentId.toLowerCase() === item.parentId.toLowerCase(); });
+                if (itemIndex_1 >= 0) {
+                    this.enableSelectedNode(this.checkedNodeList[index]);
+                    this.selectedOptions.splice(itemIndex_1, 1);
+                }
+                listChildren_1.forEach(function (x) {
+                    var index = _this.selectedOptions.findIndex(function (node) { return node.id.toLowerCase() === x.id.toLowerCase() && node.parentId.toLowerCase() === x.parentId.toLowerCase(); });
+                    if (index >= 0) {
+                        _this.selectedOptions.splice(index, 1);
+                        _this.disabledList = _this.disabledList.filter(function (node) { return !(x.id.toLowerCase() === node.id.toLowerCase() && x.parentId.toLowerCase() === node.parentId.toLowerCase()); });
+                    }
+                });
+                return;
+            }
             var listChildren = [];
             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);
+                this.disabledList = this.disabledList.filter(function (x) { return !(x.id === item.id && x.parentId === item.parentId); });
             }
             listChildren.forEach(function (x) {
                 var index = _this.selectedOptions.findIndex(function (node) { return node.id === x.id && node.parentId === x.parentId; });
@@ -18535,7 +18931,7 @@
                         }
                     }
                     this.checkedNodeList = this.checkedNodeList.filter(function (x) { return x.id !== node.id || x.parentId !== node.parentId; });
-                    this.refactorSelectList(node);
+                    this.deleteNodeFromSelectedNode(node);
                 }
                 else {
                     var itemIndex = this.selectedOptions.findIndex(function (item) { return node.id === item.id && node.parentId === item.parentId; });
@@ -18609,7 +19005,17 @@
             });
         };
         SelectIncludeChildrenPopUpComponent.prototype.refactorSelectList = function (node) {
+            this.combineNodes({
+                id: node.id,
+                itemName: node.name,
+                type: exports.SelectOptionTypes.IncludeChildren,
+                parentId: node.parentId
+            });
+        };
+        SelectIncludeChildrenPopUpComponent.prototype.deleteNodeFromSelectedNode = function (node) {
             var _this = this;
+            var children = [];
+            children = this.getAllChildrenNodeRecursive(children, node);
             var parent;
             var parentList = [];
             parent = this.treeData.find(function (x) { return x.rootId === node.parentId; });
@@ -18622,30 +19028,23 @@
                 });
                 parentList = this.getParentLineOfNode(parentList, parent);
             }
+            var parentIndex = -1;
             if (parentList.length > 0) {
-                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_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({
-                        id: node.id,
-                        itemName: node.name,
-                        type: exports.SelectOptionTypes.IncludeChildren,
-                        parentId: node.parentId
-                    });
-                    this.disabledList = this.disabledList.filter(function (x) { return !(x.id === node.id && x.parentId === node.parentId); });
-                }
-            }
-            else {
-                this.combineNodes({
-                    id: node.id,
-                    itemName: node.name,
-                    type: exports.SelectOptionTypes.IncludeChildren,
-                    parentId: node.parentId
+                parentList.forEach(function (parent) {
+                    parentIndex = _this.checkedNodeList.findIndex(function (x) { return x.id.toLowerCase() === parent.id.toLowerCase() && x.parentId.toLowerCase() === parent.parentId.toLowerCase(); });
+                    if (parentIndex >= 0) {
+                        var index = _this.checkedNodeList[parentIndex].children.findIndex(function (x) { return x.id.toLowerCase() === node.id.toLowerCase() && x.parentId.toLowerCase() === node.parentId.toLowerCase(); });
+                        if (index >= 0) {
+                            _this.checkedNodeList[parentIndex].children.splice(index, 1);
+                        }
+                        children.forEach(function (child) {
+                            var index = _this.checkedNodeList[parentIndex].children.findIndex(function (x) { return x.id.toLowerCase() === child.id.toLowerCase() && x.parentId.toLowerCase() === child.parentId.toLowerCase(); });
+                            if (index >= 0) {
+                                _this.checkedNodeList[parentIndex].children.splice(index, 1);
+                            }
+                        });
+                        _this.checkedNodeList[parentIndex].noSelectedChildren = _this.checkedNodeList[parentIndex].children.length;
+                    }
                 });
             }
         };
@@ -18690,7 +19089,7 @@
                 this.checkedNodeList[selectedNodeIndex].children = nodeList;
                 this.checkedNodeList[selectedNodeIndex].noChildren = children.length;
                 this.checkedNodeList[selectedNodeIndex].noSelectedChildren = nodeList.length;
-                this.checkedNodeList[selectedNodeIndex].type = children.length === 0 ? exports.SelectOptionTypes.SelectOne : exports.SelectOptionTypes.IncludeChildren;
+                this.checkedNodeList[selectedNodeIndex].type = exports.SelectOptionTypes.IncludeChildren;
             }
         };
         SelectIncludeChildrenPopUpComponent.prototype.getParentLineOfNode = function (listParent, node) {
@@ -18715,7 +19114,7 @@
                     return {
                         id: x.id,
                         name: x.itemName,
-                        parentId: node.id,
+                        parentId: x.parentId,
                         level: 0,
                         expandable: true,
                         hasChild: true,
@@ -18747,18 +19146,11 @@
             }
         };
         SelectIncludeChildrenPopUpComponent.prototype.enableSelectedNode = function (node) {
-            var children = [];
-            children = this.getAllChildrenNodeRecursive(children, {
-                id: node.id,
-                name: node.itemName,
-                parentId: node.parentId,
-                level: 0,
-                expandable: true,
-                hasChild: true,
-                disabled: false
-            });
-            this.disabledList = this.disabledList.filter(function (x) { return children.filter(function (child) { return (x.id === child.id && x.parentId === child.parentId); }).length === 0; });
             this.disabledList = this.disabledList.filter(function (x) { return !(x.id === node.id && x.parentId === node.parentId); });
+            if (node.type === exports.SelectOptionTypes.IncludeChildren) {
+                var children_1 = node.children;
+                this.disabledList = this.disabledList.filter(function (x) { return children_1.filter(function (child) { return (x.id === child.id && x.parentId === child.parentId); }).length === 0; });
+            }
         };
         return SelectIncludeChildrenPopUpComponent;
     }());
@@ -21606,7 +21998,7 @@
     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 matTreeNodePaddingIndent=\"34\"\r\n    cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\" (mouseleave)=\"dragHoverEnd()\"\r\n    (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\"\r\n    [ngClass]=\"{'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node), 'active': activeNode == node.id}\">\r\n    <div *ngIf=\"!node.isReadOnly\" (click)=\"onClickNode(node.id)\" class=\"tree-content\">\r\n      <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          [class.not-favorite]=\"!node.favorite && node.id === hoverNode.id && isHover\">\r\n          {{node.favorite && node.id === hoverNode.id && isHover ? 'star_rate_outline' : ''}}\r\n          {{!node.favorite && node.id === hoverNode.id && isHover ? 'star_border' : ''}}\r\n        </mat-icon>\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && 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)\" matTreeNodePadding\r\n    matTreeNodePaddingIndent=\"34\" cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\"\r\n    (mouseleave)=\"dragHoverEnd()\" (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\"\r\n    [ngClass]=\"\r\n    {'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node), 'active': activeNode == node.id}\">\r\n    <div *ngIf=\"!node.isReadOnly\" (click)=\"onClickNode(node.id)\" class=\"tree-content\"\r\n      (keydown)=\"onKeyDownNode($event, node)\">\r\n      <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          [class.not-favorite]=\"!node.favorite && node.id === hoverNode.id && isHover\">\r\n          {{node.favorite && node.id === hoverNode.id && isHover ? 'star_rate_outline' : ''}}\r\n          {{!node.favorite && node.id === hoverNode.id && isHover ? 'star_border' : ''}}\r\n        </mat-icon>\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && 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>",
+                    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 matTreeNodePaddingIndent=\"34\"\r\n    cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\" (mouseleave)=\"dragHoverEnd()\"\r\n    (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\"\r\n    [ngClass]=\"{'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node), 'active': activeNode == node.id}\">\r\n    <div *ngIf=\"!node.isReadOnly\" (click)=\"onClickNode(node.id)\" class=\"tree-content\">\r\n      <div class=\"span-text\" mode=\"dark\" position=\"below\">{{ node.name }}</div>\r\n      <button tabindex=\"-1\" class=\"button-icon collapse-expand-icon space-icon\" qms-btn-icon>\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 && isHover)}\"\r\n        matTooltip=\"{{!node.favorite ? addFavoriteTooltip : deleteFavoriteTooltip}}\" mode=\"dark\" position=\"below\"\r\n        qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\"\r\n          [class.not-favorite]=\"!node.favorite && node.id === hoverNode.id && isHover\">\r\n          {{node.favorite && node.id === hoverNode.id && isHover ? 'star_rate_outline' : ''}}\r\n          {{!node.favorite && node.id === hoverNode.id && isHover ? 'star_border' : ''}}\r\n        </mat-icon>\r\n      </button>\r\n      <button  tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && isHover\"\r\n        matTooltip=\"{{addNodeTooltip}}\" (click)=\"addNewNode(node.id, $event)\" mode=\"dark\" position=\"below\"\r\n        qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">\r\n          add\r\n        </mat-icon>\r\n      </button>\r\n    </div>\r\n  </mat-tree-node>\r\n  <!-- This is the tree node template for expandable nodes -->\r\n  <mat-tree-node *matTreeNodeDef=\"let node;when: hasChild\" (mouseover)=\"onOver(node)\" matTreeNodePadding\r\n    matTreeNodePaddingIndent=\"34\" cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\"\r\n    (mouseleave)=\"dragHoverEnd()\" (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\"\r\n    [ngClass]=\"\r\n    {'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node), 'active': activeNode == node.id}\">\r\n    <div *ngIf=\"!node.isReadOnly\" (click)=\"onClickNode(node.id)\" class=\"tree-content\"\r\n      (keydown)=\"onKeyDownNode($event, node)\">\r\n      <span class=\"span-text\" mode=\"dark\" position=\"below\">{{ node.name }}</span>\r\n      <button tabindex=\"-1\" class=\"button-icon space-icon collapse-expand-icon\" qms-btn-icon 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 && isHover)}\" (mouseenter)=\"setHoverFavorite(node.id)\"\r\n        (mouseleave)=\"setHoverFavorite(null)\" mode=\"dark\" position=\"below\" qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\"\r\n          [class.not-favorite]=\"!node.favorite && node.id === hoverNode.id && isHover\">\r\n          {{node.favorite && node.id === hoverNode.id && isHover ? 'star_rate_outline' : ''}}\r\n          {{!node.favorite && node.id === hoverNode.id && isHover ? 'star_border' : ''}}\r\n        </mat-icon>\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && isHover\" \r\n      matTooltip=\"{{addNodeTooltip}}\" (click)=\"addNewNode(node.id, $event)\" qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">\r\n          add\r\n        </mat-icon>\r\n      </button>\r\n    </div>\r\n  </mat-tree-node>\r\n</mat-tree>",
                     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}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .not-favorite{color:rgba(0,0,0,.6)!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .btn-favorite{right:-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}"]
                 },] }
     ];
@@ -21644,7 +22036,6 @@
                         common.CommonModule,
                         icon.MatIconModule,
                         toolbar.MatToolbarModule,
-                        button.MatButtonModule,
                         QMSButtonModule,
                         tooltip.MatTooltipModule,
                         dragDrop.DragDropModule,
@@ -22128,14 +22519,16 @@
     exports.requiredFileType = requiredFileType;
     exports.ɵ1 = ɵ1;
     exports.ɵa = SharedMaterialModule;
-    exports.ɵb = QMSCKEditorTemplateComponent;
-    exports.ɵc = QMSCKEditorTreeService;
+    exports.ɵb = QMSCKEditorTreeService;
+    exports.ɵc = QMSCKEditorTemplateComponent;
     exports.ɵd = LinkAttachmentComponent;
     exports.ɵe = QMSCKEditorTooltipComponent;
     exports.ɵf = QMSCKEditorTooltip;
     exports.ɵg = QMSCKEditorImageMapComponent;
     exports.ɵh = QMSCKEditorImageMap;
-    exports.ɵi = QMSCKEditorBpmnData;
+    exports.ɵi = QMSCKEditorUploadService;
+    exports.ɵj = QMSCKEditorBpmnData;
+    exports.ɵk = QMSCKEditorAboutComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });