qms-angular 1.0.39 → 1.0.40

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('@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/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/material/button'), require('@angular/cdk/scrolling'), require('@angular/material/checkbox'), require('@angular/material/sidenav'), require('@angular/material/tree'), require('@angular/material/menu'), require('@angular/platform-browser'), require('rxjs/operators'), require('@angular/cdk/tree'), require('@angular/common/http'), require('@angular/material/select'), require('@angular/material/snack-bar'), require('@ckeditor/ckeditor5-angular'), require('jquery'), require('lodash'), require('@angular/material/badge'), require('@angular/material/tooltip'), require('@angular/material/toolbar'), require('@angular/cdk/stepper'), require('@angular/material/stepper')) :
-    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', '@angular/material/autocomplete', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/material/input', '@angular/material/card', '@angular/material/icon', '@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/material/button', '@angular/cdk/scrolling', '@angular/material/checkbox', '@angular/material/sidenav', '@angular/material/tree', '@angular/material/menu', '@angular/platform-browser', 'rxjs/operators', '@angular/cdk/tree', '@angular/common/http', '@angular/material/select', '@angular/material/snack-bar', '@ckeditor/ckeditor5-angular', 'jquery', 'lodash', '@angular/material/badge', '@angular/material/tooltip', '@angular/material/toolbar', '@angular/cdk/stepper', '@angular/material/stepper'], 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.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.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.material.button, global.ng.cdk.scrolling, global.ng.material.checkbox, global.ng.material.sidenav, global.ng.material.tree, global.ng.material.menu, global.ng.platformBrowser, global.rxjs.operators, global.ng.cdk.tree, global.ng.common.http, global.ng.material.select, global.ng.material.snackBar, global.ckeditor5Angular, global.$, global._, global.ng.material.badge, global.ng.material.tooltip, global.ng.material.toolbar, global.ng.cdk.stepper, global.ng.material.stepper));
-}(this, (function (exports, i0, rxjs, common, forms, formField, radio, dialog, autocomplete, overlay, portal, input, card, icon, core, progressSpinner, a11y, coercion, collections, animations, moment, list, expansion, button, scrolling, checkbox, sidenav, tree$1, menu, platformBrowser, operators, tree, i1, select, snackBar, ckeditor5Angular, $, _, badge, tooltip, toolbar, stepper$1, stepper) { '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('@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/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/material/button'), require('@angular/cdk/scrolling'), require('@angular/material/checkbox'), require('@angular/material/sidenav'), require('@angular/material/tree'), require('@angular/material/menu'), require('@angular/platform-browser'), require('rxjs/operators'), require('@angular/cdk/tree'), require('@angular/common/http'), require('@angular/material/button-toggle'), require('@angular/material/select'), require('@angular/material/snack-bar'), require('@ckeditor/ckeditor5-angular'), require('jquery'), require('lodash'), require('@angular/material/tooltip'), require('@angular/material/badge'), require('@angular/material/toolbar'), require('@angular/cdk/stepper'), require('@angular/material/stepper')) :
+    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', '@angular/material/autocomplete', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/material/input', '@angular/material/card', '@angular/material/icon', '@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/material/button', '@angular/cdk/scrolling', '@angular/material/checkbox', '@angular/material/sidenav', '@angular/material/tree', '@angular/material/menu', '@angular/platform-browser', 'rxjs/operators', '@angular/cdk/tree', '@angular/common/http', '@angular/material/button-toggle', '@angular/material/select', '@angular/material/snack-bar', '@ckeditor/ckeditor5-angular', 'jquery', 'lodash', '@angular/material/tooltip', '@angular/material/badge', '@angular/material/toolbar', '@angular/cdk/stepper', '@angular/material/stepper'], 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.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.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.material.button, global.ng.cdk.scrolling, global.ng.material.checkbox, global.ng.material.sidenav, global.ng.material.tree, global.ng.material.menu, global.ng.platformBrowser, global.rxjs.operators, global.ng.cdk.tree, global.ng.common.http, global.ng.material.buttonToggle, global.ng.material.select, global.ng.material.snackBar, global.ckeditor5Angular, global.$, global._, global.ng.material.tooltip, global.ng.material.badge, global.ng.material.toolbar, global.ng.cdk.stepper, global.ng.material.stepper));
+}(this, (function (exports, i0, rxjs, common, forms, formField, radio, dialog, autocomplete, overlay, portal, input, card, icon, core, progressSpinner, a11y, coercion, collections, animations, moment, list, expansion, button, scrolling, checkbox, sidenav, tree$1, menu, platformBrowser, operators, tree, i1, buttonToggle, select, snackBar, ckeditor5Angular, $, _, tooltip, badge, toolbar, stepper$1, stepper) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -92,6 +92,8 @@
             "DOCUMENTS_IN": "Documents in"
         },
         "QMSCKEDITOR": {
+            "REMOVE_MAP": "Remove Map",
+            "IMAGE_MAP_PROPERTIES": "Image Map Properties",
             "INSERT_TOOLTIP": "Insert a tooltip",
             "CONTENT": "Content",
             "TEMPLATE": "Template",
@@ -113,6 +115,7 @@
             "CANCEL": "Cancel",
             "LINK": "Link",
             "LINK_TYPE": "Link type",
+            "ZOOM": "Zoom",
             "LINK_URL": "URL",
             "LINK_ANCHOR_IN_TEXT": "Link to anchor in the text",
             "LINK_EMAIL": "Email",
@@ -150,6 +153,16 @@
             "DOCUMENT": "Document",
             "CONFIRM": "Confirm",
             "SEARCH": "Search",
+            "IMAGE_MODE_POINTER": "Pointer",
+            "IMAGE_MODE_RECTANGLE": "Rectangle",
+            "IMAGE_MODE_CIRCLE": "Circle",
+            "IMAGE_MODE_POLYGON": "Polygon",
+            "IMAGE_MODE_REMOVE": "Remove",
+            "POLYGON_DRAW": "Use SHIFT + click for the last control point",
+            "RECTANGLE_DRAW": "Hold down SHIFT for square mode",
+            "SQUARE_DRAW": "Release SHIFT for rectangle mode",
+            "INVALID_URL": "Invalid URL",
+            "REQUIRED_URL": "URL is required"
         },
         "BPMN": {
             "DEFAULT": "Default",
@@ -336,6 +349,8 @@
             "DOCUMENTS_IN": "Dokumenter i"
         },
         "QMSCKEDITOR": {
+            "REMOVE_MAP": "Fjern kartet",
+            "IMAGE_MAP_PROPERTIES": "Bilde Kart Egenskaper",
             "INSERT_TOOLTIP": "Sett inn et verktøytips",
             "CONTENT": "Innhold",
             "TEMPLATE": "Mal",
@@ -357,6 +372,7 @@
             "CANCEL": "Avbryt",
             "LINK": "Link",
             "LINK_TYPE": "Koblingstype",
+            "ZOOM": "Zoom",
             "LINK_URL": "URL",
             "LINK_ANCHOR_IN_TEXT": "Lenke til anker i teksten",
             "LINK_EMAIL": "E-post",
@@ -367,10 +383,10 @@
             "TARGET_SAME": "Samme vindu (selv)",
             "TARGET_PARENT": "Overordnet vindu (_parent)",
             "PROTOCOL": "Protocol",
-            "PROTOCOL_HTTP": "http: //",
-            "PROTOCOL_HTTPS": "https: //",
-            "PROTOCOL_FTP": "ftp: //",
-            "PROTOCOL_NEW": "nyheter: //",
+            "PROTOCOL_HTTP": "http://",
+            "PROTOCOL_HTTPS": "https://",
+            "PROTOCOL_FTP": "ftp://",
+            "PROTOCOL_NEW": "nyheter://",
             "PROTOCOL_OTHER": "<other>",
             "ADVISORY_TITLE": "Rådgivende tittel",
             "HANDBOOK": "eHandbook",
@@ -394,6 +410,16 @@
             "DOCUMENT": "Dokument",
             "CONFIRM": "Bekreft",
             "SEARCH": "Søk",
+            "IMAGE_MODE_POINTER": "Peker",
+            "IMAGE_MODE_RECTANGLE": "Rektangel",
+            "IMAGE_MODE_CIRCLE": "Sirkel",
+            "IMAGE_MODE_POLYGON": "Polygon",
+            "IMAGE_MODE_REMOVE": "Ta bort",
+            "POLYGON_DRAW": "Bruk SKIFT + klikk for det siste kontrollpunktet",
+            "RECTANGLE_DRAW": "Hold nede SKIFT for kvadratisk modus",
+            "SQUARE_DRAW": "Slipp SKIFT for rektangelmodus",
+            "INVALID_URL": "Ugyldig URL",
+            "REQUIRED_URL": "URL er påkrevd"
         },
         "BPMN": {
             "DEFAULT": "Standard",
@@ -6856,10 +6882,18 @@
     (function (ProtocolType) {
         ProtocolType[ProtocolType["http"] = 0] = "http";
         ProtocolType[ProtocolType["https"] = 1] = "https";
-        ProtocolType[ProtocolType["fpt"] = 2] = "fpt";
-        ProtocolType[ProtocolType["new"] = 3] = "new";
+        ProtocolType[ProtocolType["ftp"] = 2] = "ftp";
+        ProtocolType[ProtocolType["news"] = 3] = "news";
         ProtocolType[ProtocolType["other"] = 4] = "other";
-    })(exports.ProtocolType || (exports.ProtocolType = {}));
+    })(exports.ProtocolType || (exports.ProtocolType = {}));
+    exports.ProtocolTypeName = void 0;
+    (function (ProtocolTypeName) {
+        ProtocolTypeName["http"] = "http://";
+        ProtocolTypeName["https"] = "https://";
+        ProtocolTypeName["ftp"] = "ftp://";
+        ProtocolTypeName["news"] = "news://";
+        ProtocolTypeName["other"] = "";
+    })(exports.ProtocolTypeName || (exports.ProtocolTypeName = {}));
 
     exports.TargetType = void 0;
     (function (TargetType) {
@@ -6867,7 +6901,14 @@
         TargetType[TargetType["topmost"] = 1] = "topmost";
         TargetType[TargetType["same"] = 2] = "same";
         TargetType[TargetType["parent"] = 3] = "parent";
-    })(exports.TargetType || (exports.TargetType = {}));
+    })(exports.TargetType || (exports.TargetType = {}));
+    exports.TargetTypeName = void 0;
+    (function (TargetTypeName) {
+        TargetTypeName["new"] = "_blank";
+        TargetTypeName["topmost"] = "_top";
+        TargetTypeName["same"] = "_self";
+        TargetTypeName["parent"] = "_parent";
+    })(exports.TargetTypeName || (exports.TargetTypeName = {}));
 
     var QMSCKEditorRelation = /** @class */ (function () {
         function QMSCKEditorRelation() {
@@ -7398,8 +7439,8 @@
             if (this.protocols) {
                 this.protocols.push({ id: exports.ProtocolType.http, name: this.LANG.QMSCKEDITOR.PROTOCOL_HTTP });
                 this.protocols.push({ id: exports.ProtocolType.https, name: this.LANG.QMSCKEDITOR.PROTOCOL_HTTPS });
-                this.protocols.push({ id: exports.ProtocolType.fpt, name: this.LANG.QMSCKEDITOR.PROTOCOL_FTP });
-                this.protocols.push({ id: exports.ProtocolType.new, name: this.LANG.QMSCKEDITOR.PROTOCOL_NEW });
+                this.protocols.push({ id: exports.ProtocolType.ftp, name: this.LANG.QMSCKEDITOR.PROTOCOL_FTP });
+                this.protocols.push({ id: exports.ProtocolType.news, name: this.LANG.QMSCKEDITOR.PROTOCOL_NEW });
                 this.protocols.push({ id: exports.ProtocolType.other, name: this.LANG.QMSCKEDITOR.PROTOCOL_OTHER });
             }
         };
@@ -7625,7 +7666,7 @@
     QMSCKEditorLinkComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-ckeditor-link',
-                    template: "<div id=\"qmsckeditor_link\" class=\"qmsckeditor qmsckeditor__link__container\">\r\n  <div id=\"qmsckeditor_link_header\">\r\n    <span\r\n      id=\"qmsckeditor_link_header_001\"\r\n      mat-icon-button\r\n      class=\"qmsckeditor button__close\"\r\n      (click)=\"onCloseDialog()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmsckeditor_link_header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor_link_header_001\">\r\n        {{ LANG.QMSCKEDITOR.LINK }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <div id=\"qmsckeditor_link_type\" class=\"row\">\r\n    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3\">\r\n      <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\r\n      <mat-select\r\n        disableOptionCentering\r\n        name=\"linkTypeList\"\r\n        [(ngModel)]=\"selectedLink\"\r\n        (ngModelChange)=\"onSelectedLinkType()\"\r\n      >\r\n        <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\r\n          {{ link.name }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div id=\"qmsckeditor_link_content\">\r\n    <form\r\n      [formGroup]=\"linkFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 0\"\r\n    >\r\n      <div id=\"qmsckeditor_link_url\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_url_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.URL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_url_001\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\r\n              <mat-select\r\n                [(ngModel)]=\"selectedTarget\"\r\n                formControlName=\"targetList\"\r\n                disableOptionCentering\r\n              >\r\n                <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\r\n                  {{ target.name }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_002\" class=\"row\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\r\n              <mat-select\r\n                [(ngModel)]=\"selectedProtocol\"\r\n                formControlName=\"protocolList\"\r\n                disableOptionCentering\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"let protocol of protocols\"\r\n                  [value]=\"protocol.id\"\r\n                >\r\n                  {{ protocol.name }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_003\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\r\n              <input matInput [(ngModel)]=\"url\" formControlName=\"url\" />\r\n              <mat-error\r\n                *ngIf=\"linkFormGroup.get('url').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_004\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ADVISORY_TITLE }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"advisoryTitle\"\r\n                formControlName=\"advisoryTitle\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"linkFormGroup.get('advisoryTitle').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div\r\n            id=\"qmsckeditor_link_url_005\"\r\n            class=\"qmsckeditor button__groups row\"\r\n          >\r\n            <div class=\"col-6 pl-3\">\r\n              <button\r\n                class=\"save\"\r\n                mat-flat-button\r\n                (click)=\"eHandbook(false, false)\"\r\n              >\r\n                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n              </button>\r\n            </div>\r\n            <div class=\"col-6 pr-3\">\r\n              <button class=\"save\" mat-flat-button (click)=\"attachment()\">\r\n                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form\r\n      [formGroup]=\"anchorTextFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 1\"\r\n    >\r\n      <div id=\"qmsckeditor_link_anchor_text\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_anchor_text_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.ANCHOR_TEXT_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_anchor_text_001\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n              <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorText\">\r\n                <mat-option\r\n                  *ngFor=\"let editorAnchor of editorAnchors\"\r\n                  [value]=\"editorAnchor.anchorValue\"\r\n                  disableOptionCentering\r\n                >\r\n                  {{ editorAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error\r\n                *ngIf=\"\r\n                  anchorTextFormGroup.get('anchorText').hasError('required')\r\n                \"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form\r\n      [formGroup]=\"emailFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 2\"\r\n    >\r\n      <div id=\"qmsckeditor_link_email\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_email_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_email_001\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_ADDRESS }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"emailAddress\"\r\n                formControlName=\"emailAddress\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"emailFormGroup.get('emailAddress').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_email_002\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_SUBJECT }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"emailSubject\"\r\n                formControlName=\"emailSubject\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"emailFormGroup.get('emailSubject').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_email_003\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_BODY }}</mat-label>\r\n              <textarea\r\n                matInput\r\n                [(ngModel)]=\"emailBody\"\r\n                formControlName=\"emailBody\"\r\n              ></textarea>\r\n              <mat-error\r\n                *ngIf=\"emailFormGroup.get('emailBody').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form\r\n      [formGroup]=\"anchorDocFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 3\"\r\n    >\r\n      <div id=\"qmsckeditor_link_anchor_doc\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_email_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div\r\n            id=\"qmsckeditor_link_anchor_doc_001\"\r\n            class=\"qmsckeditor button__groups row\"\r\n          >\r\n            <div class=\"col-6 pl-3\">\r\n              <button\r\n                class=\"cancel\"\r\n                mat-flat-button\r\n                (click)=\"eHandbook(true, true)\"\r\n              >\r\n                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_anchor_doc_002\" class=\"row mt-4\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.DOCUMENT }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"anchorTitle\"\r\n                formControlName=\"anchorTitle\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorTitle').hasError('required')\r\n                \"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_anchor_doc_003\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n              <mat-select\r\n                [(ngModel)]=\"anchorByName\"\r\n                formControlName=\"anchorByName\"\r\n                disableOptionCentering\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"let docAnchor of documentAnchors\"\r\n                  [value]=\"docAnchor.anchorValue\"\r\n                >\r\n                  {{ docAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error\r\n                *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorByName').hasError('required')\r\n                \"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n  </div>\r\n\r\n  <div id=\"qmsckeditor_link_footer\" class=\"qmsckeditor button__groups row\">\r\n    <div class=\"col-12 mt-3 pl-3 pr-3\">\r\n      <button\r\n        class=\"save\"\r\n        mat-flat-button\r\n        (click)=\"setLink()\"\r\n        [disabled]=\"disableOkButton()\"\r\n      >\r\n        {{ LANG.QMSCKEDITOR.OK }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div id=\"qmsckeditor_link\" class=\"qmsckeditor qmsckeditor__link__container\">\r\n  <div id=\"qmsckeditor_link_header\">\r\n    <span id=\"qmsckeditor_link_header_001\" mat-icon-button class=\"qmsckeditor button__close\" (click)=\"onCloseDialog()\">\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmsckeditor_link_header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor_link_header_001\">\r\n        {{ LANG.QMSCKEDITOR.LINK }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <div id=\"qmsckeditor_link_type\" class=\"row\">\r\n    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3\">\r\n      <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\r\n      <mat-select disableOptionCentering name=\"linkTypeList\" [(ngModel)]=\"selectedLink\"\r\n        (ngModelChange)=\"onSelectedLinkType()\">\r\n        <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\r\n          {{ link.name }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div id=\"qmsckeditor_link_content\">\r\n    <form [formGroup]=\"linkFormGroup\" class=\"qmsckeditor link__content height row\" *ngIf=\"selectedLink === 0\">\r\n      <div id=\"qmsckeditor_link_url\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel id=\"qmsckeditor_link_url_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.URL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_url_001\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\r\n              <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\" disableOptionCentering>\r\n                <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\r\n                  {{ target.name }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_002\" class=\"row\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\r\n              <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\" disableOptionCentering>\r\n                <mat-option *ngFor=\"let protocol of protocols\" [value]=\"protocol.id\">\r\n                  {{ protocol.name }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_003\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\r\n              <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\" />\r\n              <mat-error *ngIf=\"linkFormGroup.get('url').hasError('required')\" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_004\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ADVISORY_TITLE }}</mat-label>\r\n              <input matInput [(ngModel)]=\"advisoryTitle\" formControlName=\"advisoryTitle\" />\r\n              <mat-error *ngIf=\"linkFormGroup.get('advisoryTitle').hasError('required')\" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_005\" class=\"qmsckeditor button__groups row\">\r\n            <div class=\"col-6 pl-3\">\r\n              <button class=\"save\" mat-flat-button (click)=\"eHandbook(false, false)\">\r\n                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n              </button>\r\n            </div>\r\n            <div class=\"col-6 pr-3\">\r\n              <button class=\"save\" mat-flat-button (click)=\"attachment()\">\r\n                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form [formGroup]=\"anchorTextFormGroup\" class=\"qmsckeditor link__content height row\" *ngIf=\"selectedLink === 1\">\r\n      <div id=\"qmsckeditor_link_anchor_text\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel id=\"qmsckeditor_link_anchor_text_panel\" [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\" (closed)=\"isExpanded = false\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.ANCHOR_TEXT_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_anchor_text_001\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n              <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorText\">\r\n                <mat-option *ngFor=\"let editorAnchor of editorAnchors\" [value]=\"editorAnchor.anchorValue\"\r\n                  disableOptionCentering>\r\n                  {{ editorAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"\r\n                  anchorTextFormGroup.get('anchorText').hasError('required')\r\n                \" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form [formGroup]=\"emailFormGroup\" class=\"qmsckeditor link__content height row\" *ngIf=\"selectedLink === 2\">\r\n      <div id=\"qmsckeditor_link_email\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel id=\"qmsckeditor_link_email_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_email_001\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_ADDRESS }}</mat-label>\r\n              <input matInput [(ngModel)]=\"emailAddress\" formControlName=\"emailAddress\" />\r\n              <mat-error *ngIf=\"emailFormGroup.get('emailAddress').hasError('required')\" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_email_002\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_SUBJECT }}</mat-label>\r\n              <input matInput [(ngModel)]=\"emailSubject\" formControlName=\"emailSubject\" />\r\n              <mat-error *ngIf=\"emailFormGroup.get('emailSubject').hasError('required')\" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_email_003\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_BODY }}</mat-label>\r\n              <textarea matInput [(ngModel)]=\"emailBody\" formControlName=\"emailBody\"></textarea>\r\n              <mat-error *ngIf=\"emailFormGroup.get('emailBody').hasError('required')\" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form [formGroup]=\"anchorDocFormGroup\" class=\"qmsckeditor link__content height row\" *ngIf=\"selectedLink === 3\">\r\n      <div id=\"qmsckeditor_link_anchor_doc\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel id=\"qmsckeditor_link_email_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_anchor_doc_001\" class=\"qmsckeditor button__groups row\">\r\n            <div class=\"col-6 pl-3\">\r\n              <button class=\"cancel\" mat-flat-button (click)=\"eHandbook(true, true)\">\r\n                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_anchor_doc_002\" class=\"row mt-4\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.DOCUMENT }}</mat-label>\r\n              <input matInput [(ngModel)]=\"anchorTitle\" formControlName=\"anchorTitle\" />\r\n              <mat-error *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorTitle').hasError('required')\r\n                \" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_anchor_doc_003\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n              <mat-select [(ngModel)]=\"anchorByName\" formControlName=\"anchorByName\" disableOptionCentering>\r\n                <mat-option *ngFor=\"let docAnchor of documentAnchors\" [value]=\"docAnchor.anchorValue\">\r\n                  {{ docAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorByName').hasError('required')\r\n                \" class=\"mt5\">\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n  </div>\r\n\r\n  <div id=\"qmsckeditor_link_footer\" class=\"qmsckeditor button__groups row\">\r\n    <div class=\"col-12 mt-3 pl-3 pr-3\">\r\n      <button class=\"save\" mat-flat-button (click)=\"setLink()\" [disabled]=\"disableOkButton()\">\r\n        {{ LANG.QMSCKEDITOR.OK }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>",
                     styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:470px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break{width:100%}.qmsckeditor__link__container textarea.mat-input-element{min-height:130px}"]
                 },] }
     ];
@@ -8131,6 +8172,8 @@
     CKEditorEventConst.QMSCK_LINK_PLUGIN_RESP = 'QMSCK_LINK_PLUGIN_RESP';
     CKEditorEventConst.QMSCK_TOOLTIP_PLUGIN_MSG = 'QMSCK_TOOLTIP_PLUGIN_MSG';
     CKEditorEventConst.QMSCK_TOOLTIP_PLUGIN_RESP = 'QMSCK_TOOLTIP_PLUGIN_RESP';
+    CKEditorEventConst.QMSCK_IMAGEMAP_PLUGIN_MSG = 'QMSCK_IMAGEMAP_PLUGIN_MSG';
+    CKEditorEventConst.QMSCK_IMAGEMAP_PLUGIN_RESP = 'QMSCK_IMAGEMAP_PLUGIN_RESP';
     CKEditorEventConst.QMSCK_BPMN_PLUGIN_MSG = 'QMSCK_BPMN_PLUGIN_MSG';
     CKEditorEventConst.QMSCK_BPMN_PLUGIN_RESP = 'QMSCK_BPMN_PLUGIN_RESP';
     CKEditorEventConst.QMSCK_BPMN = 'bpmn';
@@ -8163,6 +8206,8 @@
                     '|',
                     'linkImage',
                     '|',
+                    'imageMap',
+                    '|',
                     'qmsBpmn'
                 ],
                 resizeOptions: [
@@ -8405,87 +8450,6 @@
         getCKEditorConfiguration: getCKEditorConfiguration
     };
 
-    var QMSCKEditorTooltip = /** @class */ (function () {
-        function QMSCKEditorTooltip() {
-            this.text = '';
-            this.content = '';
-        }
-        return QMSCKEditorTooltip;
-    }());
-
-    var QMSCKEditorTooltipComponent = /** @class */ (function (_super) {
-        __extends(QMSCKEditorTooltipComponent, _super);
-        function QMSCKEditorTooltipComponent(cdr, translate, dialogRef, data) {
-            var _this = _super.call(this) || this;
-            _this.cdr = cdr;
-            _this.translate = translate;
-            _this.dialogRef = dialogRef;
-            _this.data = data;
-            _this.tooltipFormGroup = new forms.FormGroup({
-                title: new forms.FormControl('', [forms.Validators.required]),
-                content: new forms.FormControl('', [forms.Validators.required])
-            });
-            _this.tooltip = { text: data.text, content: data.content };
-            _this.editor = data.ckEditor;
-            return _this;
-        }
-        QMSCKEditorTooltipComponent.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.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();
-        };
-        QMSCKEditorTooltipComponent.prototype.onCloseDialog = function () {
-            this.dialogRef.close();
-        };
-        QMSCKEditorTooltipComponent.prototype.getOutputContent = function (content) {
-            this.tooltip.content = content;
-        };
-        QMSCKEditorTooltipComponent.prototype.onChanged = function (_a) {
-            var editor = _a.editor;
-            this.tooltip.content = editor.getData();
-        };
-        QMSCKEditorTooltipComponent.prototype.onBlur = function (_a) {
-            var editor = _a.editor;
-            this.tooltip.content = editor.getData();
-        };
-        QMSCKEditorTooltipComponent.prototype.onReady = function (editor) {
-            if (this.tooltip.text) {
-                editor.setData(this.tooltip.text);
-            }
-            editor.ui.getEditableElement().parentElement.insertBefore(editor.ui.view.toolbar.element, editor.ui.getEditableElement());
-        };
-        QMSCKEditorTooltipComponent.prototype.saveTooltip = function () {
-            var tooltip = new QMSCKEditorTooltip();
-            tooltip.content = this.tooltip.content;
-            tooltip.text = this.tooltip.text;
-            this.dialogRef.close(tooltip);
-        };
-        QMSCKEditorTooltipComponent.prototype.cancelTooltip = function () {
-            this.dialogRef.close();
-        };
-        return QMSCKEditorTooltipComponent;
-    }(QMSCKEditorBaseComponent));
-    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",
-                    styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:470px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.qmsckeditor__tooltip__container .mat-form-field{width:100%}.qmsckeditor__tooltip__container textarea.mat-input-element{min-height:150px}"]
-                },] }
-    ];
-    QMSCKEditorTooltipComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: TranslateLibraryService },
-        { type: dialog.MatDialogRef },
-        { type: QMSCKEditorTooltip, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
-    ]; };
-
     var FlowChartConst = /** @class */ (function () {
         function FlowChartConst() {
         }
@@ -12424,159 +12388,2757 @@
         onMessage: [{ type: i0.HostListener, args: ['window:message', ['$event'],] }]
     };
 
-    var QMSCKEditorComponent = /** @class */ (function (_super) {
-        __extends(QMSCKEditorComponent, _super);
-        /**
-         * Constructor
-         */
-        function QMSCKEditorComponent(dialog, globalService, qmsCKEditorFullscreenComponent, renderer, elRef) {
-            var _this = _super.call(this) || this;
-            _this.dialog = dialog;
-            _this.globalService = globalService;
-            _this.qmsCKEditorFullscreenComponent = qmsCKEditorFullscreenComponent;
-            _this.renderer = renderer;
-            _this.elRef = elRef;
-            _this.required = false;
-            _this.qmsckContentOutput = new i0.EventEmitter();
-            _this.ckEditorEventConst = CKEditorEventConst;
-            return _this;
+    var QMSCKEditorImageMap = /** @class */ (function () {
+        function QMSCKEditorImageMap() {
+            this.name = '';
+            this.imageUrl = '';
+            this.areas = [];
+            this.entityId = '';
+            this.editorContent = '';
+            this.imageHeight = 0;
+            this.imageWidth = 0;
+            this.linkJavaScriptLinksAllowed = true;
         }
-        QMSCKEditorComponent.prototype.onMessage = function (event) {
-            switch (event.data.eventName) {
-                case this.ckEditorEventConst.QMSCK_FULLSCREEN_PLUGIN_MSG:
-                    this.fullscreenEventHandling();
-                    break;
-                case this.ckEditorEventConst.QMSCK_TEMPLATE_PLUGIN_MSG:
-                    this.templateEventHandling();
-                    break;
-                case this.ckEditorEventConst.QMSCK_LOAD_TEMPLATE_PLUGIN_MSG:
-                    this.loadTemplateEventHandling();
-                    break;
-                case this.ckEditorEventConst.QMSCK_LINK_PLUGIN_MSG:
-                    this.linkEventHandling(event.data.value);
-                    break;
-                case this.ckEditorEventConst.QMSCK_TOOLTIP_PLUGIN_MSG:
-                    this.tooltipEventHandling(event.data.value);
-                    break;
-                case this.ckEditorEventConst.QMSCK_BPMN_PLUGIN_MSG:
-                    this.bpmnEventHandling(event.data.value);
-                    break;
-                default:
-                    break;
-            }
-        };
-        QMSCKEditorComponent.prototype.ngOnInit = function () {
-            this.name = 'CKEditor custom build';
-            this.ckEditor = this.qmsckPlugin.pluginObject;
-            this.ckeditorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(this.qmsckPlugin.itemToolbar);
-            this.globalService.setApiUrl(this.qmsckData.apiUrl);
-            if (this.isEnabledCustomizingMathtypeService()) {
-                this.customizeMathTypeService();
-            }
-            if (this.isEnabledCustomizingTimestampFormat()) {
-                this.customizeTimestampFormat();
-            }
-        };
-        QMSCKEditorComponent.prototype.registerOnChange = function (fn) {
-            this.onChange = fn;
-        };
-        QMSCKEditorComponent.prototype.registerOnTouched = function (fn) {
-            this.onTouched = fn;
-        };
-        QMSCKEditorComponent.prototype.ngAfterViewInit = function () {
-            if (this.isDisabled) {
-                this.renderer.addClass(this.elRef.nativeElement, 'ck-disabled');
-            }
-        };
-        QMSCKEditorComponent.prototype.isEnabledCustomizingTimestampFormat = function () {
-            var pattern = /(timestamp)/gmi;
-            return !!this.qmsckData.timestampFormat
-                && this.qmsckData.timestampFormat !== ''
-                && !!this.qmsckPlugin.itemToolbar
-                && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
-        };
-        QMSCKEditorComponent.prototype.customizeTimestampFormat = function () {
-            var timestampConfig = {
-                timestampConfig: {
-                    datetimeFormat: this.qmsckData.timestampFormat
+        return QMSCKEditorImageMap;
+    }());
+    var QMSCKEditorImageArea = /** @class */ (function () {
+        function QMSCKEditorImageArea() {
+            this.shape = '';
+            this.coords = '';
+            this.alt = '';
+            this.href = '';
+            this.target = '';
+        }
+        return QMSCKEditorImageArea;
+    }());
+
+    var ImageModeName;
+    (function (ImageModeName) {
+        ImageModeName["Pointer"] = "pointer";
+        ImageModeName["Rectangle"] = "rect";
+        ImageModeName["Circle"] = "circle";
+        ImageModeName["Polygon"] = "poly";
+        ImageModeName["Remove"] = "remove";
+    })(ImageModeName || (ImageModeName = {}));
+
+    var IconSvg = /** @class */ (function () {
+        function IconSvg() {
+        }
+        return IconSvg;
+    }());
+    IconSvg.VECTOR_POINTER = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"#000000\" d=\"M13.75,10.19L14.38,10.32L18.55,12.4C19.25,12.63 19.71,13.32 19.65,14.06V14.19L19.65,14.32L18.75,20.44C18.69,20.87 18.5,21.27 18.15,21.55C17.84,21.85 17.43,22 17,22H10.12C9.63,22 9.18,21.82 8.85,21.47L2.86,15.5L3.76,14.5C4,14.25 4.38,14.11 4.74,14.13H5.03L9,15V4.5A2,2 0 0,1 11,2.5A2,2 0 0,1 13,4.5V10.19H13.75Z\" /></svg>";
+    IconSvg.VECTOR_RECTANGLE = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"#000000\" d=\"M2,2H8V4H16V2H22V8H20V16H22V22H16V20H8V22H2V16H4V8H2V2M16,8V6H8V8H6V16H8V18H16V16H18V8H16M4,4V6H6V4H4M18,4V6H20V4H18M4,18V20H6V18H4M18,18V20H20V18H18Z\" /></svg>";
+    IconSvg.VECTOR_CIRCLE = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"#000000\" d=\"M9,2V4.06C6.72,4.92 4.92,6.72 4.05,9H2V15H4.06C4.92,17.28 6.72,19.09 9,19.95V22H15V19.94C17.28,19.08 19.09,17.28 19.95,15H22V9H19.94C19.08,6.72 17.28,4.92 15,4.05V2M11,4H13V6H11M9,6.25V8H15V6.25C16.18,6.86 17.14,7.82 17.75,9H16V15H17.75C17.14,16.18 16.18,17.14 15,17.75V16H9V17.75C7.82,17.14 6.86,16.18 6.25,15H8V9H6.25C6.86,7.82 7.82,6.86 9,6.25M4,11H6V13H4M18,11H20V13H18M11,18H13V20H11\" /></svg>";
+    IconSvg.VECTOR_POLYGON = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"#000000\" d=\"M2,2V8H4.28L5.57,16H4V22H10V20.06L15,20.05V22H21V16H19.17L20,9H22V3H16V6.53L14.8,8H9.59L8,5.82V2M4,4H6V6H4M18,5H20V7H18M6.31,8H7.11L9,10.59V14H15V10.91L16.57,9H18L17.16,16H15V18.06H10V16H7.6M11,10H13V12H11M6,18H8V20H6M17,18H19V20H17\" /></svg>";
+    IconSvg.VECTOR_REMOVE = "<svg width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\" color=\"#000000\"><path fill=\"#000000\" d=\"M17,12 L7,12\"/> <circle cx=\"12\" cy=\"12\" r=\"10\"/> </svg>";
+
+    /**
+     *	Image Map Editor (imgmap) - in-browser imagemap editor
+     *	Copyright (C) 2006 - 2008 Adam Maschek (adam.maschek @ gmail.com)
+     *
+     *	This program is free software; you can redistribute it and/or
+     *	modify it under the terms of the GNU General Public License
+     *	as published by the Free Software Foundation; either version 2
+     *	of the License, or (at your option) any later version.
+     *
+     *	This program is distributed in the hope that it will be useful,
+     *	but WITHOUT ANY WARRANTY; without even the implied warranty of
+     *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     *	GNU General Public License for more details.
+     *
+     *	You should have received a copy of the GNU General Public License
+     *	along with this program; if not, write to the Free Software
+     *	Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+     */
+    /**
+     *	@fileoverview
+     *	Online Image Map Editor - main script file.
+     *	This is the main script file of the Online Image Map Editor.
+     *
+     *	@date	26-02-2007 2:24:50
+     *	@author	Adam Maschek (adam.maschek(at)gmail.com)
+     *	@copyright
+     *	@version 2.2
+     *
+     */
+    /*jslint browser: true, newcap: false, white: false, onevar: false, plusplus: false, eqeqeq: false, nomen: false */
+    /*global imgmapStrings:true, window:false, G_vmlCanvasManager:false */
+    var QMSCKEditorImageMapLib = /** @class */ (function () {
+        function QMSCKEditorImageMapLib(options) {
+            /** Version string of imgmap */
+            this.version = "2.2";
+            /** Build date of imgmap */
+            this.buildDate = "2009/08/12 22:18";
+            /** Sequential build number of imgmap */
+            this.buildNumber = "113";
+            /** Status flag to indicate current drawing mode */
+            this.is_drawing = 0;
+            /**	Array to hold language strings */
+            this.strings = [];
+            /** Helper array for some drawing operations */
+            this.memory = [];
+            /**	Array to hold reference to all areas (canvases) */
+            this.areas = [];
+            /**	Associative array to hold bound event handlers */
+            this.eventHandlers = {};
+            this.currentid = 0;
+            this.draggedId = null;
+            this.selectedId = null;
+            this.nextShape = 'rect';
+            /**	Callback events that you can handle in your GUI. */
+            this.event_types = [
+                'onAddArea',
+                'onRemoveArea',
+                'onDrawArea',
+                'onResizeArea',
+                'onMoveArea',
+                'onLoadImage',
+                'onSelectArea',
+                'onStatusMessage',
+                'onAreaChanged'
+            ];
+            this.isLoaded = false;
+            /**	holds the name of the actively edited map, use getMapName to read it */
+            this.mapname = '';
+            /**	holds the id of the actively edited map, use getMapIdto read it */
+            this.mapid = '';
+            /** global scale of areas (1-normal, 2-doubled, 0.5-half, etc.) */
+            this.globalscale = 1;
+            /** is_drawing draw mode constant */
+            this.DM_RECTANGLE_DRAW = 1;
+            /** is_drawing draw mode constant */
+            this.DM_RECTANGLE_MOVE = 11;
+            /** is_drawing draw mode constant */
+            this.DM_RECTANGLE_RESIZE_TOP = 12;
+            /** is_drawing draw mode constant */
+            this.DM_RECTANGLE_RESIZE_RIGHT = 13;
+            /** is_drawing draw mode constant */
+            this.DM_RECTANGLE_RESIZE_BOTTOM = 14;
+            /** is_drawing draw mode constant */
+            this.DM_RECTANGLE_RESIZE_LEFT = 15;
+            /** is_drawing draw mode constant */
+            this.DM_SQUARE_DRAW = 2;
+            /** is_drawing draw mode constant */
+            this.DM_SQUARE_MOVE = 21;
+            /** is_drawing draw mode constant */
+            this.DM_SQUARE_RESIZE_TOP = 22;
+            /** is_drawing draw mode constant */
+            this.DM_SQUARE_RESIZE_RIGHT = 23;
+            /** is_drawing draw mode constant */
+            this.DM_SQUARE_RESIZE_BOTTOM = 24;
+            /** is_drawing draw mode constant */
+            this.DM_SQUARE_RESIZE_LEFT = 25;
+            /** is_drawing draw mode constant */
+            this.DM_POLYGON_DRAW = 3;
+            /** is_drawing draw mode constant */
+            this.DM_POLYGON_LASTDRAW = 30;
+            /** is_drawing draw mode constant */
+            this.DM_POLYGON_MOVE = 31;
+            //browser sniff
+            this.isMSIE = false;
+            this.isSafari = false;
+            /**
+             *	Main setup function.
+             *	Can be called manually or constructor will call it.
+             *	@date	22-02-2007 0:15:42
+             *	@author	Adam Maschek (adam.maschek(at)gmail.com)
+             *	@param	config	config object
+             *	@return	True if all went ok.
+             */
+            this.setup = function (options) {
+                //copy non-default options parameters to this.config
+                for (var i in options) {
+                    if (options.hasOwnProperty(i)) {
+                        this.config[i] = options[i];
+                    }
+                }
+                //set document event hooks
+                this.addEvent(document, 'keydown', this.eventHandlers.doc_keydown = this.doc_keydown.bind(this));
+                this.addEvent(document, 'keyup', this.eventHandlers.doc_keyup = this.doc_keyup.bind(this));
+                this.addEvent(document, 'mousedown', this.eventHandlers.doc_mousedown = this.doc_mousedown.bind(this));
+                //set imageElement element - supposedly it already exists in the DOM
+                this.imageElement = options.imageElement;
+                if (!this.imageElement) {
+                    throw 'The image element must be existed in the DOM';
+                }
+                if (!this.imageElement.parentElement) {
+                    throw 'The parent of the image element must be existed in the DOM';
+                }
+                this.parentImageElement = this.imageElement.parentElement;
+                this.disableSelection(this.parentImageElement);
+                //wipe all
+                this.removeAllAreas();
+                //reset scale
+                this.globalscale = 1;
+                //setup events
+                this.addEvent(this.imageElement, "dragstart", this.eventHandlers.img_dragstart = this.img_dragstart.bind(this));
+                this.addEvent(this.imageElement, 'mousedown', this.eventHandlers.img_mousedown = this.img_mousedown.bind(this));
+                this.addEvent(this.imageElement, 'mouseup', this.eventHandlers.img_mouseup = this.img_mouseup.bind(this));
+                this.addEvent(this.imageElement, 'mousemove', this.eventHandlers.img_mousemove = this.img_mousemove.bind(this));
+                this.imageElement.style.cursor = this.config.cursor_default;
+                //Load strings from a key:value object
+                if (options.strings) {
+                    for (var key in options.strings) {
+                        if (options.strings.hasOwnProperty(key)) {
+                            this.strings[key] = options.strings[key];
+                        }
+                    }
                 }
-            };
-            this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, timestampConfig);
-        };
-        QMSCKEditorComponent.prototype.isEnabledCustomizingMathtypeService = function () {
-            var pattern = /(MathType)|(ChemType)/gmi;
-            return !!this.qmsckData.mathtypeServiceUrl
-                && this.qmsckData.mathtypeServiceUrl !== ''
-                && !!this.qmsckPlugin.itemToolbar
-                && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
-        };
-        QMSCKEditorComponent.prototype.customizeMathTypeService = function () {
-            var mathTypeConfig = {
-                mathTypeParameters: {
-                    serviceProviderProperties: {
-                        URI: this.qmsckData.mathtypeServiceUrl,
-                        server: 'aspx'
+                //validate event hooks
+                var found, j, le;
+                for (i in this.config.custom_callbacks) {
+                    if (this.config.custom_callbacks.hasOwnProperty(i)) {
+                        found = false;
+                        for (j = 0, le = this.event_types.length; j < le; j++) {
+                            if (i == this.event_types[j]) {
+                                found = true;
+                                break;
+                            }
+                        }
+                        //TODO: remove invalid callback
+                        if (!found) {
+                            this.log("Unknown custom callback: " + i, 1);
+                        }
                     }
                 }
+                return true;
             };
-            this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, mathTypeConfig);
-        };
-        QMSCKEditorComponent.prototype.onChanged = function (_a) {
-            var editor = _a.editor;
-            this.qmsckContentOutput.emit(this.qmsckContentInput);
-        };
-        QMSCKEditorComponent.prototype.onBlur = function (_a) {
-            var editor = _a.editor;
-            this.qmsckContentOutput.emit(this.qmsckContentInput);
-        };
-        QMSCKEditorComponent.prototype.validate = function (c) {
-            if (!this.required) {
-                return null;
-            }
-            return (this.qmsckContentInput && !this.required) ? null : {
-                type: {
-                    valid: false,
-                    actual: c.value
+            /**
+            *	Attach new 'evt' event handler 'callback' to 'obj'
+            *	@date	24-02-2007 21:16:20
+            *	@param	obj	The object on which the handler is defined.
+            *	@param	evt	The name of the event, like mousedown.
+            *	@param	callback	The callback function (named if you want it to be removed).
+            */
+            this.addEvent = function (obj, evt, callback) {
+                if (obj.addEventListener) {
+                    //W3C style model
+                    obj.addEventListener(evt, callback, false);
+                    return true;
+                }
+                else {
+                    //Microsoft style registration model
+                    return obj.attachEvent("on" + evt, callback);
                 }
             };
-        };
-        /**
-         * onReady
-         */
-        QMSCKEditorComponent.prototype.onReady = function (editor) {
-            this.editorInstance = editor;
-            if (this.qmsckContentInput) {
-                editor.setData(this.qmsckContentInput);
-            }
-            this.initEditor(editor);
-        };
-        QMSCKEditorComponent.prototype.initEditor = function (editor) {
-            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;
-            });
-        };
-        /**
-         * Full screen - Restore down
-         */
-        QMSCKEditorComponent.prototype.fullscreenEventHandling = function () {
-            var ck = window.document.getElementById('qmsckeditor');
-            if (ck) {
-                if (!ck.classList.contains('qmsckeditor__fullscreen')) {
-                    this.qmsCKEditorFullscreenComponent.showFullScreen();
+            /**
+            *	Detach 'evt' event handled by 'callback' from 'obj' object.
+            *	Callback must be a non anonymous function, see eventHandlers.
+            *	@see	#eventHandlers
+            *	Example: myimgmap.removeEvent(myimgmap.pic, 'mousedown', myimgmap.eventHandlers.img_mousedown);
+            *	@date	24-11-2007 15:22:17
+            *	@param	obj	The object on which the handler is defined.
+            *	@param	evt	The name of the event, like mousedown.
+            *	@param	callback	The named callback function.
+            */
+            this.removeEvent = function (obj, evt, callback) {
+                if (obj.removeEventListener) {
+                    //W3C style model
+                    obj.removeEventListener(evt, callback, false);
+                    return true;
                 }
                 else {
-                    this.qmsCKEditorFullscreenComponent.hideFullScreen();
+                    //Microsoft style detach model
+                    return obj.detachEvent("on" + evt, callback);
                 }
-            }
+            };
+            /**
+            *	Fires custom hook onStatusMessage, passing the status string.
+            *	Use this to update your GUI.
+            *	@author	Adam Maschek (adam.maschek(at)gmail.com)
+            *	@date	26-07-2008 13:22:54
+            *	@param	str	The status string
+            */
+            this.statusMessage = function (str) {
+                this.fireEvent('onStatusMessage', str);
+            };
+            /**
+            *	Adds basic logging functionality using firebug console object if available.
+            *	@date	20-02-2007 17:55:18
+            *	@author	Adam Maschek (adam.maschek(at)gmail.com)
+            *	@param	obj	The object or string you want to debug/echo.
+            */
+            this.log = function (obj, level) {
+            };
+            /**
+            *	Get the map name of the current imagemap.
+            *	If doesnt exist, nor map id, generate a new name based on timestamp.
+            *	The most portable solution is to use the same value for id and name.
+            *	This also conforms the HTML 5 specification, that says:
+            *	"If the id  attribute is also specified, both attributes must have the same value."
+            *	@link	http://www.w3.org/html/wg/html5/#the-map-element
+            *	@author	adam
+            *	@see	#getMapId
+            *	@return The name of the map.
+            */
+            this.getMapName = function () {
+                if (!this.mapname) {
+                    if (!!this.mapid) {
+                        return this.mapid;
+                    }
+                    var now = new Date();
+                    this.mapname = 'imagemap' + now.getFullYear() + (now.getMonth() + 1) + now.getDate() + now.getHours() + now.getMinutes() + now.getSeconds();
+                }
+                return this.mapname;
+            };
+            /**
+            *	Get the map id of the current imagemap.
+            *	If doesnt exist, use map name.
+            *	@author	adam
+            *	@see	#getMapName
+            *	@return	The id of the map.
+            */
+            this.getMapId = function () {
+                if (!this.mapid) {
+                    this.mapid = this.getMapName();
+                }
+                return this.mapid;
+            };
+            this.getMapJson = function () {
+                var mapJson = {
+                    name: this.getMapName(),
+                    id: this.getMapId(),
+                    areas: []
+                };
+                for (var i = 0; i < this.areas.length; i++) {
+                    var area = this.areas[i];
+                    if (area && area.lastInput && area.shape) {
+                        var areaJson = {
+                            coords: area.lastInput,
+                            shape: area.shape,
+                            target: area.atarget,
+                            alt: area.aalt,
+                            href: area.ahref
+                        };
+                        mapJson.areas.push(areaJson);
+                    }
+                }
+                return mapJson;
+            };
+            /**
+            *	Convert wild shape names to normal ones.
+            *	@date	25-12-2008 19:27:06
+            *	@param	shape	The name of the shape to convert.
+            *	@return	The normalized shape name, rect as default.
+            */
+            this._normShape = function (shape) {
+                if (!shape) {
+                    return 'rect';
+                }
+                shape = trim(shape).toLowerCase();
+                if (shape.substring(0, 4) == 'rect') {
+                    return 'rect';
+                }
+                if (shape.substring(0, 4) == 'circ') {
+                    return 'circle';
+                }
+                if (shape.substring(0, 4) == 'poly') {
+                    return 'poly';
+                }
+                return 'rect';
+            };
+            /**
+            *	Try to normalize coordinates that came from:
+            *	1. html textarea
+            *	2. user input in the active area's input field
+            *	3. from the html source in case of plugins or highlighter
+            *	Example of inputs that need to be handled:
+            *		035,035 075,062
+            *		150,217, 190,257, 150,297,110,257
+            *	@author	adam
+            *	@param	coords	The coordinates in a string.
+            *	@param	shape	The shape of the object (rect, circle, poly).
+            *	@param	flag	Flags that modify the operation. (fromcircle, frompoly, fromrect, preserve)
+            *	@returns The normalized coordinates.
+            */
+            this._normCoords = function (coords, shape, flag) {
+                //function level var declarations
+                var i; //generic cycle counter
+                var sx; //smallest x
+                var sy; //smallest y
+                var gx; //greatest x
+                var gy; //greatest y
+                var temp, le;
+                coords = trim(coords);
+                if (coords === '') {
+                    return '';
+                }
+                var oldcoords = coords;
+                //replace some general junk
+                coords = coords.replace(/(\d)([^\d\.])+(\d)/g, "$1,$3"); // Other software might create decimal points, respect them
+                coords = coords.replace(/,\D+(\d)/g, ",$1"); //cut leading junk
+                coords = coords.replace(/,0+(\d)/g, ",$1"); //cut leading zeros
+                coords = coords.replace(/(\d)(\D)+,/g, "$1,");
+                coords = coords.replace(/^\D+(\d)/g, "$1"); //cut leading junk
+                coords = coords.replace(/^0+(\d)/g, "$1"); //cut leading zeros
+                coords = coords.replace(/(\d)(\D)+$/g, "$1"); //cut trailing junk
+                //now fix other issues
+                var parts = coords.split(',');
+                if (shape == 'rect') {
+                    if (flag == 'fromcircle') {
+                        var r = parts[2];
+                        parts[0] = parts[0] - r;
+                        parts[1] = parts[1] - r;
+                        parts[2] = parseInt(parts[0], 10) + 2 * r;
+                        parts[3] = parseInt(parts[1], 10) + 2 * r;
+                    }
+                    else if (flag == 'frompoly') {
+                        sx = parseInt(parts[0], 10);
+                        gx = parseInt(parts[0], 10);
+                        sy = parseInt(parts[1], 10);
+                        gy = parseInt(parts[1], 10);
+                        for (i = 0, le = parts.length; i < le; i++) {
+                            if (i % 2 === 0 && parseInt(parts[i], 10) < sx) {
+                                sx = parseInt(parts[i], 10);
+                            }
+                            if (i % 2 === 1 && parseInt(parts[i], 10) < sy) {
+                                sy = parseInt(parts[i], 10);
+                            }
+                            if (i % 2 === 0 && parseInt(parts[i], 10) > gx) {
+                                gx = parseInt(parts[i], 10);
+                            }
+                            if (i % 2 === 1 && parseInt(parts[i], 10) > gy) {
+                                gy = parseInt(parts[i], 10);
+                            }
+                        }
+                        parts[0] = sx;
+                        parts[1] = sy;
+                        parts[2] = gx;
+                        parts[3] = gy;
+                    }
+                    if (!(parseInt(parts[1], 10) >= 0)) {
+                        parts[1] = parts[0];
+                    }
+                    if (!(parseInt(parts[2], 10) >= 0)) {
+                        parts[2] = parseInt(parts[0], 10) + 10;
+                    }
+                    if (!(parseInt(parts[3], 10) >= 0)) {
+                        parts[3] = parseInt(parts[1], 10) + 10;
+                    }
+                    if (parseInt(parts[0], 10) > parseInt(parts[2], 10)) {
+                        temp = parts[0];
+                        parts[0] = parts[2];
+                        parts[2] = temp;
+                    }
+                    if (parseInt(parts[1], 10) > parseInt(parts[3], 10)) {
+                        temp = parts[1];
+                        parts[1] = parts[3];
+                        parts[3] = temp;
+                    }
+                    coords = parts[0] + "," + parts[1] + "," + parts[2] + "," + parts[3];
+                }
+                else if (shape == 'circle') {
+                    if (flag == 'fromrect') {
+                        sx = parseInt(parts[0], 10);
+                        gx = parseInt(parts[2], 10);
+                        sy = parseInt(parts[1], 10);
+                        gy = parseInt(parts[3], 10);
+                        //use smaller side
+                        parts[2] = (gx - sx < gy - sy) ? gx - sx : gy - sy;
+                        parts[2] = Math.floor(parts[2] / 2); //radius
+                        parts[0] = sx + parts[2];
+                        parts[1] = sy + parts[2];
+                    }
+                    else if (flag == 'frompoly') {
+                        sx = parseInt(parts[0], 10);
+                        gx = parseInt(parts[0], 10);
+                        sy = parseInt(parts[1], 10);
+                        gy = parseInt(parts[1], 10);
+                        for (i = 0, le = parts.length; i < le; i++) {
+                            if (i % 2 === 0 && parseInt(parts[i], 10) < sx) {
+                                sx = parseInt(parts[i], 10);
+                            }
+                            if (i % 2 === 1 && parseInt(parts[i], 10) < sy) {
+                                sy = parseInt(parts[i], 10);
+                            }
+                            if (i % 2 === 0 && parseInt(parts[i], 10) > gx) {
+                                gx = parseInt(parts[i], 10);
+                            }
+                            if (i % 2 === 1 && parseInt(parts[i], 10) > gy) {
+                                gy = parseInt(parts[i], 10);
+                            }
+                        }
+                        //use smaller side
+                        parts[2] = (gx - sx < gy - sy) ? gx - sx : gy - sy;
+                        parts[2] = Math.floor(parts[2] / 2); //radius
+                        parts[0] = sx + parts[2];
+                        parts[1] = sy + parts[2];
+                    }
+                    if (!(parseInt(parts[1], 10) > 0)) {
+                        parts[1] = parts[0];
+                    }
+                    if (!(parseInt(parts[2], 10) > 0)) {
+                        parts[2] = 10;
+                    }
+                    coords = parts[0] + "," + parts[1] + "," + parts[2];
+                }
+                else if (shape == 'poly') {
+                    if (flag == 'fromrect') {
+                        parts[4] = parts[2];
+                        parts[5] = parts[3];
+                        parts[2] = parts[0];
+                        parts[6] = parts[4];
+                        parts[7] = parts[1];
+                    }
+                    else if (flag == 'fromcircle') {
+                        // @ url http://www.pixelwit.com/blog/2007/06/29/basic-circle-drawing-actionscript/
+                        var centerX = parseInt(parts[0], 10);
+                        var centerY = parseInt(parts[1], 10);
+                        var radius = parseInt(parts[2], 10);
+                        var j = 0;
+                        parts[j++] = centerX + radius;
+                        parts[j++] = centerY;
+                        var sides = 60; //constant = sides the fake circle will have
+                        for (i = 0; i <= sides; i++) {
+                            var pointRatio = i / sides;
+                            var xSteps = Math.cos(pointRatio * 2 * Math.PI);
+                            var ySteps = Math.sin(pointRatio * 2 * Math.PI);
+                            var pointX = centerX + xSteps * radius;
+                            var pointY = centerY + ySteps * radius;
+                            parts[j++] = Math.round(pointX);
+                            parts[j++] = Math.round(pointY);
+                        }
+                    }
+                    coords = parts.join(',');
+                }
+                if (flag == 'preserve' && oldcoords != coords) {
+                    //return original and throw error
+                    //throw "invalid coords";
+                    return oldcoords;
+                }
+                return coords;
+            };
+            /**
+             *	Sets the coordinates according to the given JSON map code or DOM object.
+            *	@author	Adam Maschek (adam.maschek(at)gmail.com)
+            *	@date	2006-06-07 11:47:16
+            *	@param	map	DOM object or string of a map you want to apply.
+            *	@return	True on success
+            */
+            this.setMapJson = function (map) {
+                this.fireEvent('onSetMap', map);
+                //remove all areas
+                this.removeAllAreas();
+                this.mapname = map.name;
+                this.mapid = map.id;
+                var shape, coords, href, alt, title, target, id;
+                for (var i = 0, le = map.areas.length; i < le; i++) {
+                    shape = coords = href = alt = title = target = '';
+                    id = this.addNewArea(); //btw id == this.currentid, just this form is a bit clearer
+                    shape = this._normShape(map.areas[i].shape);
+                    this.initArea(id, shape);
+                    if (map.areas[i].coords) {
+                        //normalize coords
+                        coords = this._normCoords(map.areas[i].coords, shape);
+                        this.areas[id].lastInput = coords;
+                        //for area this one will be set in recalculate
+                    }
+                    href = map.areas[i].href;
+                    if (href) {
+                        this.areas[id].ahref = href;
+                    }
+                    alt = map.areas[i].alt;
+                    if (alt) {
+                        this.areas[id].aalt = alt;
+                    }
+                    target = map.areas[i].target;
+                    if (target) {
+                        target = target.toLowerCase();
+                    }
+                    this.areas[id].atarget = target;
+                    this._recalculate(id, coords); //contains repaint
+                    this.relaxArea(id);
+                    this.fireEvent('onAreaChanged', this.areas[id]);
+                } //end for areas
+            };
+            /**
+            *	Adds a new area. It will later become a canvas.
+            *	GUI should use the onAddArea callback to act accordingly.
+            *	@author	Adam Maschek (adam.maschek(at)gmail.com)
+            *	@date	2006-06-06 16:49:25
+            *	@see	#initArea
+            */
+            this.addNewArea = function () {
+                var lastarea = this._getLastArea();
+                var id = (lastarea) ? lastarea.aid + 1 : 0;
+                //insert new possibly? unknown area (will be initialized at mousedown)
+                var area = this.areas[id] = document.createElement('DIV');
+                area.id = this.mapname + 'area' + id;
+                area.aid = id;
+                area.shape = "undefined";
+                this.blurArea(this.currentid);
+                this.currentid = id;
+                return id;
+            };
+            /**
+            *	Initialize a new area.
+            *	Create the canvas, initialize it.
+            *	Reset area parameters.
+            *	@param	id	The id of the area (already existing with undefined shape)
+            *	@param	shape	The shape the area will have (rect, circle, poly)
+            */
+            this.initArea = function (id, shape) {
+                var area = this.areas[id];
+                if (!area) {
+                    return;
+                } //if all was erased, return
+                //remove preinited dummy div or already placed canvas
+                if (area.parentNode) {
+                    area.parentNode.removeChild(area);
+                }
+                if (area.label) {
+                    area.label.parentNode.removeChild(area.label);
+                }
+                //create CANVAS node
+                area = this.areas[id] = document.createElement('CANVAS');
+                this.parentImageElement.appendChild(area);
+                this.parentImageElement.style.position = 'relative';
+                // if (typeof G_vmlCanvasManager != "undefined") {
+                //     //override CANVAS with VML object
+                //     area = this.areas[id] = G_vmlCanvasManager.initElement(area);
+                // }
+                area.id = this.mapname + 'area' + id;
+                area.aid = id;
+                area.shape = shape;
+                area.ahref = '';
+                area.atitle = '';
+                area.aalt = '';
+                area.atarget = '';
+                area.style.position = 'absolute';
+                area.style.top = this.imageElement.offsetTop + 'px';
+                area.style.left = this.imageElement.offsetLeft + 'px';
+                this._setopacity(area, this.config.CL_DRAW_BG, this.config.draw_opacity);
+                //hook event handlers
+                area.onmousedown = this.area_mousedown.bind(this);
+                area.onmouseup = this.area_mouseup.bind(this);
+                area.onmousemove = this.area_mousemove.bind(this);
+                area.onmouseover = this.area_mouseover.bind(this);
+                area.onmouseout = this.area_mouseout.bind(this);
+                //initialize memory object
+                this.memory[id] = {};
+                this.memory[id].downx = 0;
+                this.memory[id].downy = 0;
+                this.memory[id].left = 0;
+                this.memory[id].top = 0;
+                this.memory[id].width = 0;
+                this.memory[id].height = 0;
+                this.memory[id].xpoints = [];
+                this.memory[id].ypoints = [];
+                //create label node
+                area.label = document.createElement('DIV');
+                this.parentImageElement.appendChild(area.label);
+                area.label.className = this.config.label_class;
+                this.assignCSS(area.label, this.config.label_style);
+                area.label.style.position = 'absolute';
+                this.fireEvent('onAddArea', id);
+            };
+            /**
+            *	Resets area border and opacity to a normal state after drawing.
+            *	@author	Adam Maschek (adam.maschek(at)gmail.com)
+            *	@date	15-02-2007 22:07:28
+            *	@param	id	The id of the area.
+        
+            */
+            this.relaxArea = function (id) {
+                var area = this.areas[id];
+                if (!area) {
+                    return;
+                }
+                if (id != this.currentid) {
+                    this._setBorder(area, 'NORM');
+                    this._setopacity(area, this.config.CL_NORM_BG, this.config.norm_opacity);
+                }
+                else
+                    this.highlightArea(id);
+            };
+            /**
+            *	Set border of a given area according to style flag.
+            *	Possible values of style: NORM, HIGHLIGHT, DRAW.
+            *	Non-rectangle shapes wont get a border if config.bounding_box is false.
+            *	@date	26-12-2008 22:34:41
+            *	@param	id	The id of the area to set the border on.
+            *	@param	style	Coloring style (NORM, HIGHLIGHT, DRAW), see relevant colors in config.
+            *	@since	2.1
+            */
+            this._setBorder = function (area, style) {
+                if (area.shape == 'rect' || this.config.bounding_box) {
+                    area.style.borderWidth = '1px';
+                    area.style.borderStyle = (style == 'DRAW' ? 'dotted' : 'solid');
+                    area.style.borderColor = this.config['CL_' + style + '_' + (area.shape == 'rect' ? 'SHAPE' : 'BOX')];
+                }
+                else {
+                    //clear border
+                    area.style.border = '';
+                }
+            };
+            /**
+            *	Set opacity of area to the given percentage, as well as set the background color.
+            *	If percentage contains a dash(-), the setting of the opacity will be gradual.
+            *	@param	area	The area object.
+            *	@param	bgcolor	New background color
+            *	@param	pct		Percentage of the opacity.
+            */
+            this._setopacity = function (area, bgcolor, pct) {
+                if (bgcolor) {
+                    area.style.backgroundColor = bgcolor;
+                }
+                if (pct && typeof pct == 'string' && pct.match(/^\d*\-\d+$/)) {
+                    //gradual fade
+                    var parts = pct.split('-');
+                    if (typeof parts[0] != 'undefined') {
+                        //set initial opacity
+                        parts[0] = parseInt(parts[0], 10);
+                        this._setopacity(area, bgcolor, parts[0]);
+                    }
+                    if (typeof parts[1] != 'undefined') {
+                        parts[1] = parseInt(parts[1], 10);
+                        var curr = this._getopacity(area);
+                        var _this = this;
+                        var diff = Math.round(parts[1] - curr);
+                        if (diff > 5) {
+                            window.setTimeout(function () { _this._setopacity(area, null, '-' + parts[1]); }, 20);
+                            pct = 1 * curr + 5;
+                        }
+                        else if (diff < -3) {
+                            window.setTimeout(function () { _this._setopacity(area, null, '-' + parts[1]); }, 20);
+                            pct = 1 * curr - 3;
+                        }
+                        else {
+                            //final set
+                            pct = parts[1];
+                        }
+                    }
+                }
+                if (!isNaN(pct)) {
+                    pct = Math.round(parseInt(pct, 10));
+                    area.style.opacity = pct / 100;
+                    area.style.filter = 'alpha(opacity=' + pct + ')';
+                }
+            };
+            /**
+            *	Get the currently set opacity of a given area.
+            *	@author	adam
+            *	@param	area	The area (canvas) you want to get opacity info from.
+            *	@return	Opacity value in a range of 0-100.
+            */
+            this._getopacity = function (area) {
+                if (area.style.opacity <= 1) {
+                    return area.style.opacity * 100;
+                }
+                if (area.style.filter) {
+                    //alpha(opacity=NaN)
+                    return parseInt(area.style.filter.replace(/alpha\(opacity\=([^\)]*)\)/ig, "$1"), 10);
+                }
+                return 100; //default opacity
+            };
+            /**
+            *	Removes the area marked by id.
+            *	Callback will call the GUI code to remove GUI elements.
+            *	@author	Adam Maschek (adam.maschek(at)gmail.com)
+            *	@date	11-02-2007 20:40:58
+            *	@param	id	The id of the area to remove.
+            *	@see	#removeAllAreas
+            */
+            this.removeArea = function (id) {
+                if (id === null || typeof id == "undefined") {
+                    return;
+                } //exit if no id given
+                try {
+                    //remove area and label
+                    //explicitly set some values to null to avoid IE circular reference memleak
+                    this.areas[id].label.parentNode.removeChild(this.areas[id].label);
+                    this.areas[id].parentNode.removeChild(this.areas[id]);
+                    this.areas[id].label.className = null;
+                    this.areas[id].label = null;
+                    this.areas[id].onmouseover = null;
+                    this.areas[id].onmouseout = null;
+                    this.areas[id].onmouseup = null;
+                    this.areas[id].onmousedown = null;
+                    this.areas[id].onmousemove = null;
+                }
+                catch (err) {
+                }
+                this.areas[id] = null;
+                this.fireEvent('onRemoveArea', id);
+            };
+            /**
+            *	Removes all areas.
+            *	Will call removeArea on all areas.
+            *	@author	Adam Maschek (adam.maschek(at)gmail.com)
+            *	@date	2006-06-07 11:55:34
+            *	@see	#removeArea
+            */
+            this.removeAllAreas = function () {
+                for (var i = 0, le = this.areas.length; i < le; i++) {
+                    if (this.areas[i]) {
+                        this.removeArea(i);
+                    }
+                }
+            };
+            /**
+            *	Scales all areas.
+            *	Will store scale parameter in globalscale property.
+            *	This is needed to know how to draw new areas on an already scaled canvas.
+            *	@author	adam
+            *	@date	02-11-2008 14:13:14
+            *	@param scale	Scale factor (1-original, 0.5-half, 2-double, etc.)
+            */
+            this.scaleAllAreas = function (scale) {
+                var rscale = scale / this.globalscale; //relative scale
+                this.globalscale = scale;
+                for (var i = 0, le = this.areas.length; i < le; i++) {
+                    if (this.areas[i] && this.areas[i].shape != 'undefined') {
+                        this.scaleArea(i, rscale);
+                    }
+                }
+            };
+            /**
+            *	Scales one area.
+            *	@author	adam
+            *	@date	02-11-2008 14:13:14
+            *	@param rscale	Relative scale factor (1-keep, 0.5-half, 2-double, etc.)
+            */
+            this.scaleArea = function (id, rscale) {
+                var area = this.areas[id];
+                //set position and new dimensions
+                area.style.top = parseInt(area.style.top, 10) * rscale + 'px';
+                area.style.left = parseInt(area.style.left, 10) * rscale + 'px';
+                this.setAreaSize(id, area.width * rscale, area.height * rscale);
+                //handle polygon coordinates scaling
+                if (area.shape == 'poly') {
+                    for (var i = 0, le = area.xpoints.length; i < le; i++) {
+                        area.xpoints[i] *= rscale;
+                        area.ypoints[i] *= rscale;
+                    }
+                }
+                this._repaint(area, this.config.CL_NORM_SHAPE);
+                this._updatecoords(id);
+            };
+            /**
+            *	Put label in the top left corner according to label config.
+            *	By default it will contain the number of the area (area.aid)
+            *	@param	id	The id of the area to add label to.
+            */
+            this._putlabel = function (id) {
+                var area = this.areas[id];
+                if (!area.label) {
+                    return;
+                } //not yet inited
+                try {
+                    if (!this.config.label) {
+                        area.label.innerHTML = '';
+                        area.label.style.display = 'none';
+                    }
+                    else {
+                        area.label.style.display = '';
+                        var label = this.config.label;
+                        label = label.replace(/%n/g, String(id));
+                        label = label.replace(/%c/g, String(area.lastInput));
+                        label = label.replace(/%h/g, String(area.ahref));
+                        label = label.replace(/%a/g, String(area.aalt));
+                        label = label.replace(/%t/g, String(area.atitle));
+                        area.label.innerHTML = label;
+                    }
+                    //align to the top left corner
+                    area.label.style.top = area.style.top;
+                    area.label.style.left = area.style.left;
+                }
+                catch (err) {
+                    this.log("Error putting label", 1);
+                }
+            };
+            /**
+            *	Set area title and alt (for IE) according to the hint configuration.
+            *	This will show up in the usual yellow box when you hover over with the mouse.
+            *	@param	id	The id of the area to set hint at.
+            */
+            this._puthint = function (id) {
+                try {
+                    if (!this.config.hint) {
+                        this.areas[id].title = '';
+                        this.areas[id].alt = '';
+                    }
+                    else {
+                        var hint = this.config.hint;
+                        hint = hint.replace(/%n/g, String(id));
+                        hint = hint.replace(/%c/g, String(this.areas[id].lastInput));
+                        hint = hint.replace(/%h/g, String(this.areas[id].ahref));
+                        hint = hint.replace(/%a/g, String(this.areas[id].aalt));
+                        hint = hint.replace(/%t/g, String(this.areas[id].atitle));
+                        this.areas[id].title = hint;
+                        this.areas[id].alt = hint;
+                    }
+                }
+                catch (err) {
+                    this.log("Error putting hint", 1);
+                }
+            };
+            /**
+            *	Will call repaint on all areas.
+            *	Useful when you change labeling or hint config on the GUI.
+            *	@see #_repaint
+            */
+            this._repaintAll = function () {
+                for (var i = 0, le = this.areas.length; i < le; i++) {
+                    if (this.areas[i]) {
+                        this._repaint(this.areas[i], this.config.CL_NORM_SHAPE);
+                    }
+                }
+            };
+            /**
+            *	Repaints the actual canvas content.
+            *	This is the only canvas drawing magic that is happening.
+            *	In fact rectangles will not have any canvas content, just a normal css border.
+            *	After repainting the canvas, it will call putlabel and puthint methods.
+            *	@param	area	The area object.
+            *	@param	color	Color of the line to draw on the canvas.
+            *	@param	x	Only used for polygons as the newest control point x.
+            *	@param	y	Only used for polygons as the newest control point y.
+            */
+            this._repaint = function (area, color, x, y) {
+                var ctx; //canvas context
+                var width, height, left, top; //canvas properties
+                var i, le; //loop counter
+                if (area.shape == 'circle') {
+                    width = parseInt(area.style.width, 10);
+                    var radius = Math.floor(width / 2) - 1;
+                    if (radius < 0)
+                        radius = 0;
+                    //get canvas context
+                    ctx = area.getContext("2d");
+                    //clear canvas
+                    ctx.clearRect(0, 0, width, width);
+                    //draw circle
+                    ctx.beginPath();
+                    ctx.strokeStyle = color;
+                    ctx.arc(radius, radius, radius, 0, Math.PI * 2, 0);
+                    ctx.stroke();
+                    ctx.closePath();
+                    //draw center
+                    ctx.strokeStyle = this.config.CL_KNOB;
+                    ctx.strokeRect(radius, radius, 1, 1);
+                    //put label
+                    this._putlabel(area.aid);
+                    this._puthint(area.aid);
+                }
+                else if (area.shape == 'rect') {
+                    //put label
+                    this._putlabel(area.aid);
+                    this._puthint(area.aid);
+                }
+                else if (area.shape == 'poly') {
+                    width = parseInt(area.style.width, 10);
+                    height = parseInt(area.style.height, 10);
+                    left = parseInt(area.style.left, 10);
+                    top = parseInt(area.style.top, 10);
+                    if (area.xpoints) {
+                        //get canvas context
+                        ctx = area.getContext("2d");
+                        //clear canvas
+                        ctx.clearRect(0, 0, width, height);
+                        //draw polygon
+                        ctx.beginPath();
+                        ctx.strokeStyle = color;
+                        ctx.moveTo(area.xpoints[0] - left, area.ypoints[0] - top);
+                        for (i = 1, le = area.xpoints.length; i < le; i++) {
+                            ctx.lineTo(area.xpoints[i] - left, area.ypoints[i] - top);
+                        }
+                        if (this.is_drawing == this.DM_POLYGON_DRAW || this.is_drawing == this.DM_POLYGON_LASTDRAW) {
+                            //only draw to the current position if not moving
+                            ctx.lineTo(x - left, y - top);
+                        }
+                        ctx.lineTo(area.xpoints[0] - left, area.ypoints[0] - top);
+                        ctx.stroke();
+                        ctx.closePath();
+                    }
+                    //put label
+                    this._putlabel(area.aid);
+                    this._puthint(area.aid);
+                }
+            };
+            /**
+            *	Updates Area coordinates.
+            *	Called when needed, eg. on mousemove, mousedown.
+            *	Also updates html container value (thru hook).
+            *	Calls callback onAreaChanged so that GUI can follow.
+            *	This is an important hook to your GUI.
+            *	Uses globalscale to scale real coordinates to area coordinates.
+            *	@date	2006.10.24. 22:39:27
+            *	@author	Adam Maschek (adam.maschek(at)gmail.com)
+            *	@param	id	The id of the area.
+            */
+            this._updatecoords = function (id) {
+                var area = this.areas[id];
+                var left = Math.round(parseInt(area.style.left, 10) / this.globalscale);
+                var top = Math.round(parseInt(area.style.top, 10) / this.globalscale);
+                var height = Math.round(parseInt(area.style.height, 10) / this.globalscale);
+                var width = Math.round(parseInt(area.style.width, 10) / this.globalscale);
+                var value = '';
+                if (area.shape == 'rect') {
+                    value = left + ',' + top + ',' + (left + width) + ',' + (top + height);
+                    area.lastInput = value;
+                }
+                else if (area.shape == 'circle') {
+                    var radius = Math.floor(width / 2) - 1;
+                    value = (left + radius) + ',' + (top + radius) + ',' + radius;
+                    area.lastInput = value;
+                }
+                else if (area.shape == 'poly') {
+                    if (area.xpoints) {
+                        for (var i = 0, le = area.xpoints.length; i < le; i++) {
+                            value += Math.round(area.xpoints[i] / this.globalscale) + ',' +
+                                Math.round(area.ypoints[i] / this.globalscale) + ',';
+                        }
+                        value = value.substring(0, value.length - 1);
+                    }
+                    area.lastInput = value;
+                }
+                this.fireEvent('onAreaChanged', area);
+            };
+            /**
+            *	Updates the visual representation of the area with the given id according
+            *	to the new coordinates that typically come from an input on the GUI.
+            *	Uses globalscale to scale area coordinates to real coordinates.
+            *	@date	2006.10.24. 22:46:55
+            *	@author	Adam Maschek (adam.maschek(at)gmail.com)
+            *	@param	id	The id of the area.
+            *	@param	coords	The new coords, they will be normalized.
+            */
+            this._recalculate = function (id, coords) {
+                var area = this.areas[id];
+                try {
+                    if (coords) {
+                        coords = this._normCoords(coords, area.shape, 'preserve');
+                    }
+                    else {
+                        coords = area.lastInput || '';
+                    }
+                    var parts = coords.split(',');
+                    if (area.shape == 'rect') {
+                        if (parts.length != 4 ||
+                            parseInt(parts[0], 10) > parseInt(parts[2], 10) ||
+                            parseInt(parts[1], 10) > parseInt(parts[3], 10)) {
+                            throw "invalid coords";
+                        }
+                        area.style.left = this.globalscale * (this.imageElement.offsetLeft + parseInt(parts[0], 10)) + 'px';
+                        area.style.top = this.globalscale * (this.imageElement.offsetTop + parseInt(parts[1], 10)) + 'px';
+                        this.setAreaSize(id, this.globalscale * (parts[2] - parts[0]), this.globalscale * (parts[3] - parts[1]));
+                        this._repaint(area, this.config.CL_NORM_SHAPE);
+                    }
+                    else if (area.shape == 'circle') {
+                        if (parts.length != 3 ||
+                            parseInt(parts[2], 10) < 0) {
+                            throw "invalid coords";
+                        }
+                        var width = 2 * (parts[2]);
+                        this.setAreaSize(id, this.globalscale * width, this.globalscale * width);
+                        area.style.left = this.globalscale * (this.imageElement.offsetLeft + parseInt(parts[0], 10) - width / 2) + 'px';
+                        area.style.top = this.globalscale * (this.imageElement.offsetTop + parseInt(parts[1], 10) - width / 2) + 'px';
+                        this._repaint(area, this.config.CL_NORM_SHAPE);
+                    }
+                    else if (area.shape == 'poly') {
+                        if (parts.length < 2) {
+                            throw "invalid coords";
+                        }
+                        area.xpoints = [];
+                        area.ypoints = [];
+                        for (var i = 0, le = parts.length; i < le; i += 2) {
+                            area.xpoints[area.xpoints.length] = this.globalscale * (this.imageElement.offsetLeft + parseInt(parts[i], 10));
+                            area.ypoints[area.ypoints.length] = this.globalscale * (this.imageElement.offsetTop + parseInt(parts[i + 1], 10));
+                            this._polygongrow(area, this.globalscale * parts[i], this.globalscale * parts[i + 1]);
+                        }
+                        this._polygonshrink(area); //includes repaint
+                    }
+                }
+                catch (err) {
+                    var msg = (err.message) ? err.message : 'error calculating coordinates';
+                    this.log(msg, 1);
+                    this.statusMessage(this.strings.ERR_INVALID_COORDS);
+                    if (area.lastInput) {
+                        this.fireEvent('onAreaChanged', area);
+                    }
+                    this._repaint(area, this.config.CL_NORM_SHAPE);
+                    return;
+                }
+                //on success update lastInput
+                area.lastInput = coords;
+            };
+            /**
+            *	Grow polygon area to be able to contain the given new coordinates.
+            *	@author	adam
+            *	@param	area	The area to grow.
+            *	@param	newx	The new coordinate x.
+            *	@param	newy	The new coordinate y.
+            *	@see	#_polygonshrink
+            */
+            this._polygongrow = function (area, newx, newy) {
+                var xdiff = newx - parseInt(area.style.left, 10);
+                var ydiff = newy - parseInt(area.style.top, 10);
+                var pad = 0; //padding on the edges
+                var pad2 = 0; //twice the padding
+                if (newx < parseInt(area.style.left, 10)) {
+                    area.style.left = (newx - pad) + 'px';
+                    this.setAreaSize(area.aid, parseInt(area.style.width, 10) + Math.abs(xdiff) + pad2, null);
+                }
+                else if (newx > parseInt(area.style.left, 10) + parseInt(area.style.width, 10)) {
+                    this.setAreaSize(area.aid, newx - parseInt(area.style.left, 10) + pad2, null);
+                }
+                if (newy < parseInt(area.style.top, 10)) {
+                    area.style.top = (newy - pad) + 'px';
+                    this.setAreaSize(area.aid, null, parseInt(area.style.height, 10) + Math.abs(ydiff) + pad2);
+                }
+                else if (newy > parseInt(area.style.top, 10) + parseInt(area.style.height, 10)) {
+                    this.setAreaSize(area.aid, null, newy - parseInt(area.style.top, 10) + pad2);
+                }
+            };
+            /**
+            *	Shrink the polygon bounding area to the necessary size, by first reducing it
+            *	to the minimum, and then gradually growing it.
+            *	We need this because while we were drawing the polygon, it might have expanded
+            *	the canvas more than needed.
+            *	Will repaint the area.
+            *	@author	adam
+            *	@param	area	The area to shrink.
+            *	@see	#_polygongrow
+            */
+            this._polygonshrink = function (area) {
+                area.style.left = (area.xpoints[0]) + 'px';
+                area.style.top = (area.ypoints[0]) + 'px';
+                this.setAreaSize(area.aid, 0, 0);
+                for (var i = 0, le = area.xpoints.length; i < le; i++) {
+                    this._polygongrow(area, area.xpoints[i], area.ypoints[i]);
+                }
+                this._repaint(area, this.config.CL_NORM_SHAPE);
+            };
+            /**
+            *	EVENT HANDLER: Handles mousemove on the image.
+            *	This is the main drawing routine.
+            *	Depending on the current shape, will draw the rect/circle/poly to the new position.
+            *	@param	e	The event object.
+            */
+            this.img_mousemove = function (e) {
+                //function level var declarations
+                var xdiff, ydiff, diff;
+                //event.x is relative to parent element, but page.x is NOT
+                //pos coordinates are the same absolute coords, offset coords are relative to parent
+                var windowEvent = window.event;
+                var pos = this._getPos(this.imageElement), x = (this.isMSIE) ? (windowEvent.x + this.parentImageElement.scrollLeft - this.imageElement.offsetLeft) : (e.clientX - pos.x), y = (this.isMSIE) ? (windowEvent.y + this.parentImageElement.scrollTop - this.imageElement.offsetTop) : (e.clientY - pos.y);
+                x = Math.round(x);
+                y = Math.round(y);
+                //exit if outside image
+                if (x < 0 || y < 0 || x > this.imageElement.width || y > this.imageElement.height) {
+                    return;
+                }
+                //old dimensions that need to be updated in this function
+                if (this.memory[this.currentid]) {
+                    var top = this.memory[this.currentid].top;
+                    var left = this.memory[this.currentid].left;
+                    var height = this.memory[this.currentid].height;
+                    var width = this.memory[this.currentid].width;
+                }
+                var area = this.areas[this.currentid];
+                // Handle shift state for Safari
+                // Safari doesn't generate keyboard events for modifiers: http://bugs.webkit.org/show_bug.cgi?id=11696
+                if (this.isSafari) {
+                    if (e.shiftKey) {
+                        if (this.is_drawing == this.DM_RECTANGLE_DRAW) {
+                            this.is_drawing = this.DM_SQUARE_DRAW;
+                            this.statusMessage(this.strings.SQUARE_DRAW);
+                        }
+                    }
+                    else {
+                        if (this.is_drawing == this.DM_SQUARE_DRAW && area.shape == 'rect') {
+                            //not for circle!
+                            this.is_drawing = this.DM_RECTANGLE_DRAW;
+                            this.statusMessage(this.strings.RECTANGLE_DRAW);
+                        }
+                    }
+                }
+                if (this.is_drawing == this.DM_RECTANGLE_DRAW) {
+                    //rectangle mode
+                    this.fireEvent('onDrawArea', this.currentid);
+                    xdiff = x - this.memory[this.currentid].downx;
+                    ydiff = y - this.memory[this.currentid].downy;
+                    this.setAreaSize(this.currentid, Math.abs(xdiff), Math.abs(ydiff));
+                    if (xdiff < 0) {
+                        area.style.left = (x + 1) + 'px';
+                    }
+                    if (ydiff < 0) {
+                        area.style.top = (y + 1) + 'px';
+                    }
+                }
+                else if (this.is_drawing == this.DM_SQUARE_DRAW) {
+                    //square mode - align to shorter side
+                    this.fireEvent('onDrawArea', this.currentid);
+                    xdiff = x - this.memory[this.currentid].downx;
+                    ydiff = y - this.memory[this.currentid].downy;
+                    if (Math.abs(xdiff) < Math.abs(ydiff)) {
+                        diff = Math.abs(parseInt(xdiff, 10));
+                    }
+                    else {
+                        diff = Math.abs(parseInt(ydiff, 10));
+                    }
+                    this.setAreaSize(this.currentid, diff, diff);
+                    if (xdiff < 0) {
+                        area.style.left = (this.memory[this.currentid].downx + diff * -1) + 'px';
+                    }
+                    if (ydiff < 0) {
+                        area.style.top = (this.memory[this.currentid].downy + diff * -1 + 1) + 'px';
+                    }
+                }
+                else if (this.is_drawing == this.DM_POLYGON_DRAW) {
+                    //polygon mode
+                    this.fireEvent('onDrawArea', this.currentid);
+                    this._polygongrow(area, x, y);
+                }
+                else if (this.is_drawing == this.DM_RECTANGLE_MOVE || this.is_drawing == this.DM_SQUARE_MOVE) {
+                    this.fireEvent('onMoveArea', this.currentid);
+                    x = x - this.memory[this.currentid].rdownx;
+                    y = y - this.memory[this.currentid].rdowny;
+                    if (x + width > this.imageElement.width || y + height > this.imageElement.height) {
+                        return;
+                    }
+                    if (x < 0 || y < 0) {
+                        return;
+                    }
+                    area.style.left = x + 1 + 'px';
+                    area.style.top = y + 1 + 'px';
+                }
+                else if (this.is_drawing == this.DM_POLYGON_MOVE) {
+                    this.fireEvent('onMoveArea', this.currentid);
+                    x = x - this.memory[this.currentid].rdownx;
+                    y = y - this.memory[this.currentid].rdowny;
+                    if (x + width > this.imageElement.width || y + height > this.imageElement.height) {
+                        return;
+                    }
+                    if (x < 0 || y < 0) {
+                        return;
+                    }
+                    xdiff = x - left;
+                    ydiff = y - top;
+                    if (area.xpoints) {
+                        for (var i = 0, le = area.xpoints.length; i < le; i++) {
+                            area.xpoints[i] = this.memory[this.currentid].xpoints[i] + xdiff;
+                            area.ypoints[i] = this.memory[this.currentid].ypoints[i] + ydiff;
+                        }
+                    }
+                    area.style.left = x + 'px';
+                    area.style.top = y + 'px';
+                }
+                else if (this.is_drawing == this.DM_SQUARE_RESIZE_LEFT) {
+                    this.fireEvent('onResizeArea', this.currentid);
+                    diff = x - left;
+                    if ((width + (-1 * diff)) > 0) {
+                        //real resize left
+                        area.style.left = x + 1 + 'px';
+                        area.style.top = (top + (diff / 2)) + 'px';
+                        this.setAreaSize(this.currentid, parseInt(width + (-1 * diff), 10), parseInt(height + (-1 * diff), 10));
+                    }
+                    else {
+                        //jump to another state
+                        this.memory[this.currentid].width = 0;
+                        this.memory[this.currentid].height = 0;
+                        this.memory[this.currentid].left = x;
+                        this.memory[this.currentid].top = y;
+                        this.is_drawing = this.DM_SQUARE_RESIZE_RIGHT;
+                    }
+                }
+                else if (this.is_drawing == this.DM_SQUARE_RESIZE_RIGHT) {
+                    this.fireEvent('onResizeArea', this.currentid);
+                    diff = x - left - width;
+                    if ((width + (diff)) - 1 > 0) {
+                        //real resize right
+                        area.style.top = (top + (-1 * diff / 2)) + 'px';
+                        this.setAreaSize(this.currentid, (width + (diff)) - 1, (height + (diff)));
+                    }
+                    else {
+                        //jump to another state
+                        this.memory[this.currentid].width = 0;
+                        this.memory[this.currentid].height = 0;
+                        this.memory[this.currentid].left = x;
+                        this.memory[this.currentid].top = y;
+                        this.is_drawing = this.DM_SQUARE_RESIZE_LEFT;
+                    }
+                }
+                else if (this.is_drawing == this.DM_SQUARE_RESIZE_TOP) {
+                    this.fireEvent('onResizeArea', this.currentid);
+                    diff = y - top;
+                    if ((width + (-1 * diff)) > 0) {
+                        //real resize top
+                        area.style.top = y + 1 + 'px';
+                        area.style.left = (left + (diff / 2)) + 'px';
+                        this.setAreaSize(this.currentid, (width + (-1 * diff)), (height + (-1 * diff)));
+                    }
+                    else {
+                        //jump to another state
+                        this.memory[this.currentid].width = 0;
+                        this.memory[this.currentid].height = 0;
+                        this.memory[this.currentid].left = x;
+                        this.memory[this.currentid].top = y;
+                        this.is_drawing = this.DM_SQUARE_RESIZE_BOTTOM;
+                    }
+                }
+                else if (this.is_drawing == this.DM_SQUARE_RESIZE_BOTTOM) {
+                    this.fireEvent('onResizeArea', this.currentid);
+                    diff = y - top - height;
+                    if ((width + (diff)) - 1 > 0) {
+                        //real resize bottom
+                        area.style.left = (left + (-1 * diff / 2)) + 'px';
+                        this.setAreaSize(this.currentid, (width + (diff)) - 1, (height + (diff)) - 1);
+                    }
+                    else {
+                        //jump to another state
+                        this.memory[this.currentid].width = 0;
+                        this.memory[this.currentid].height = 0;
+                        this.memory[this.currentid].left = x;
+                        this.memory[this.currentid].top = y;
+                        this.is_drawing = this.DM_SQUARE_RESIZE_TOP;
+                    }
+                }
+                else if (this.is_drawing == this.DM_RECTANGLE_RESIZE_LEFT) {
+                    this.fireEvent('onResizeArea', this.currentid);
+                    xdiff = x - left;
+                    if (width + (-1 * xdiff) > 0) {
+                        //real resize left
+                        area.style.left = x + 1 + 'px';
+                        this.setAreaSize(this.currentid, width + (-1 * xdiff), null);
+                    }
+                    else {
+                        //jump to another state
+                        this.memory[this.currentid].width = 0;
+                        this.memory[this.currentid].left = x;
+                        this.is_drawing = this.DM_RECTANGLE_RESIZE_RIGHT;
+                    }
+                }
+                else if (this.is_drawing == this.DM_RECTANGLE_RESIZE_RIGHT) {
+                    this.fireEvent('onResizeArea', this.currentid);
+                    xdiff = x - left - width;
+                    if ((width + (xdiff)) - 1 > 0) {
+                        //real resize right
+                        this.setAreaSize(this.currentid, (width + (xdiff)) - 1, null);
+                    }
+                    else {
+                        //jump to another state
+                        this.memory[this.currentid].width = 0;
+                        this.memory[this.currentid].left = x;
+                        this.is_drawing = this.DM_RECTANGLE_RESIZE_LEFT;
+                    }
+                }
+                else if (this.is_drawing == this.DM_RECTANGLE_RESIZE_TOP) {
+                    this.fireEvent('onResizeArea', this.currentid);
+                    ydiff = y - top;
+                    if ((height + (-1 * ydiff)) > 0) {
+                        //real resize top
+                        area.style.top = y + 1 + 'px';
+                        this.setAreaSize(this.currentid, null, (height + (-1 * ydiff)));
+                    }
+                    else {
+                        //jump to another state
+                        this.memory[this.currentid].height = 0;
+                        this.memory[this.currentid].top = y;
+                        this.is_drawing = this.DM_RECTANGLE_RESIZE_BOTTOM;
+                    }
+                }
+                else if (this.is_drawing == this.DM_RECTANGLE_RESIZE_BOTTOM) {
+                    this.fireEvent('onResizeArea', this.currentid);
+                    ydiff = y - top - height;
+                    if ((height + (ydiff)) - 1 > 0) {
+                        //real resize bottom
+                        this.setAreaSize(this.currentid, null, (height + (ydiff)) - 1);
+                    }
+                    else {
+                        //jump to another state
+                        this.memory[this.currentid].height = 0;
+                        this.memory[this.currentid].top = y;
+                        this.is_drawing = this.DM_RECTANGLE_RESIZE_TOP;
+                    }
+                }
+                //repaint canvas elements
+                if (this.is_drawing) {
+                    this._repaint(area, this.config.CL_DRAW_SHAPE, x, y);
+                    this._updatecoords(this.currentid);
+                }
+            };
+            /**
+            *	EVENT HANDLER: Handles mouseup on the image.
+            *	Handles dragging and resizing.
+            *	@param	e	The event object.
+            */
+            this.img_mouseup = function (e) {
+                var windowEvent = window.event;
+                var pos = this._getPos(this.imageElement), x = (this.isMSIE) ? (windowEvent.x + this.parentImageElement.scrollLeft - this.imageElement.offsetLeft) : (e.clientX - pos.x), y = (this.isMSIE) ? (windowEvent.y + this.parentImageElement.scrollTop - this.imageElement.offsetTop) : (e.clientY - pos.y);
+                x = Math.round(x);
+                y = Math.round(y);
+                //for everything that is move or resize
+                if (this.is_drawing != this.DM_RECTANGLE_DRAW &&
+                    this.is_drawing != this.DM_SQUARE_DRAW &&
+                    this.is_drawing != this.DM_POLYGON_DRAW &&
+                    this.is_drawing != this.DM_POLYGON_LASTDRAW) {
+                    //end dragging
+                    this.draggedId = null;
+                    //finish state
+                    this.is_drawing = 0;
+                    this.statusMessage(this.strings.READY);
+                    this.relaxArea(this.currentid);
+                    if (this.areas[this.currentid] == this._getLastArea()) {
+                        return;
+                    }
+                    this.memory[this.currentid].downx = x;
+                    this.memory[this.currentid].downy = y;
+                }
+            };
+            this.img_dragstart = function (e) {
+                e.preventDefault();
+            };
+            /**
+            *	EVENT HANDLER: Handles mousedown on the image.
+            *	Handles beggining or end of draw, or polygon point set.
+            *	@param	e	The event object.
+            */
+            this.img_mousedown = function (e) {
+                if (!e)
+                    e = window.event;
+                var pos = this._getPos(this.imageElement), x = Math.round(e.clientX - pos.x), y = Math.round(e.clientY - pos.y);
+                // Handle the Shift state
+                if (e.shiftKey) {
+                    if (this.is_drawing == this.DM_POLYGON_DRAW) {
+                        this.is_drawing = this.DM_POLYGON_LASTDRAW;
+                    }
+                }
+                var area = this.areas[this.currentid];
+                if (this.is_drawing == this.DM_POLYGON_DRAW) {
+                    //its not finish state yet
+                    area.xpoints[area.xpoints.length] = x;
+                    area.ypoints[area.ypoints.length] = y;
+                    this.memory[this.currentid].downx = x;
+                    this.memory[this.currentid].downy = y;
+                    return;
+                }
+                else if (this.is_drawing && this.is_drawing != this.DM_POLYGON_DRAW) {
+                    //finish any other state
+                    if (this.is_drawing == this.DM_POLYGON_LASTDRAW) {
+                        //add last controlpoint and update coords
+                        area.xpoints[area.xpoints.length] = x;
+                        area.ypoints[area.ypoints.length] = y;
+                        this._updatecoords(this.currentid);
+                        this.is_drawing = 0;
+                        this._polygonshrink(area);
+                    }
+                    this.is_drawing = 0;
+                    this.statusMessage(this.strings.READY);
+                    this.relaxArea(this.currentid);
+                    if (this.areas[this.currentid] == this._getLastArea()) {
+                        return;
+                    }
+                    return;
+                }
+                if (!this.nextShape) {
+                    return;
+                }
+                this.addNewArea();
+                this.initArea(this.currentid, this.nextShape);
+                if (this.areas[this.currentid].shape == 'poly') {
+                    this.is_drawing = this.DM_POLYGON_DRAW;
+                    this.statusMessage(this.strings.POLYGON_DRAW);
+                    this.areas[this.currentid].style.left = x + 'px';
+                    this.areas[this.currentid].style.top = y + 'px';
+                    this.areas[this.currentid].style.width = 0;
+                    this.areas[this.currentid].style.height = 0;
+                    this.areas[this.currentid].xpoints = [];
+                    this.areas[this.currentid].ypoints = [];
+                    this.areas[this.currentid].xpoints[0] = x;
+                    this.areas[this.currentid].ypoints[0] = y;
+                }
+                else if (this.areas[this.currentid].shape == 'rect') {
+                    this.is_drawing = this.DM_RECTANGLE_DRAW;
+                    this.statusMessage(this.strings.RECTANGLE_DRAW);
+                    this.areas[this.currentid].style.left = x + 'px';
+                    this.areas[this.currentid].style.top = y + 'px';
+                    this.areas[this.currentid].style.width = 0;
+                    this.areas[this.currentid].style.height = 0;
+                }
+                else if (this.areas[this.currentid].shape == 'circle') {
+                    this.is_drawing = this.DM_SQUARE_DRAW;
+                    this.statusMessage(this.strings.CIRCLE_DRAW);
+                    this.areas[this.currentid].style.left = x + 'px';
+                    this.areas[this.currentid].style.top = y + 'px';
+                    this.areas[this.currentid].style.width = 0;
+                    this.areas[this.currentid].style.height = 0;
+                }
+                this._setBorder(this.areas[this.currentid], 'DRAW');
+                this.memory[this.currentid].downx = x;
+                this.memory[this.currentid].downy = y;
+            };
+            /**
+            *	Highlights a given area.
+            *	Sets opacity and repaints.
+            *	@date	2007.12.28. 18:23:00
+            *	@param	id	The id of the area to blur.
+        
+            */
+            this.highlightArea = function (id) {
+                if (this.is_drawing) {
+                    return;
+                } //exit if in drawing state
+                var area = this.areas[id];
+                if (area && area.shape != 'undefined') {
+                    //area exists - highlight it
+                    this._setBorder(area, 'HIGHLIGHT');
+                    this._setopacity(area, this.config.CL_HIGHLIGHT_BG, '-' + this.config.highlight_opacity);
+                    this._repaint(area, this.config.CL_HIGHLIGHT_SHAPE);
+                }
+            };
+            /**
+            *	Blurs a given area.
+            *	Sets opacity and repaints.
+            *	@date	2007.12.28. 18:23:26
+            *	@param	id	The id of the area to blur.
+        
+            */
+            this.blurArea = function (id) {
+                if (this.is_drawing) {
+                    return;
+                } //exit if in drawing state
+                var area = this.areas[id];
+                if (area && area.shape != 'undefined') {
+                    //area exists - fade it back
+                    this._setBorder(area, 'NORM');
+                    this._setopacity(area, this.config.CL_NORM_BG, '-' + this.config.norm_opacity);
+                    this._repaint(area, this.config.CL_NORM_SHAPE);
+                }
+            };
+            /**
+            *	EVENT HANDLER: Handles event of mousemove on imgmap areas.
+            *	- changes cursor depending where we are inside the area (buggy in opera)
+            *	- handles area resize
+            *	- handles area move
+            *	@url	http://evolt.org/article/Mission_Impossible_mouse_position/17/23335/index.html
+            *	@url	http://my.opera.com/community/forums/topic.dml?id=239498&t=1217158015&page=1
+            *	@author	adam
+            *	@param	e	The event object.
+            */
+            this.area_mousemove = function (e) {
+                if (!this.is_drawing) {
+                    if (!e)
+                        e = window.event;
+                    var obj = (this.isMSIE) ? window.event.srcElement : e.currentTarget;
+                    if (obj.tagName == 'DIV') {
+                        //do this because of label
+                        obj = obj.parentNode;
+                    }
+                    if (obj.tagName == 'image' || obj.tagName == 'group' ||
+                        obj.tagName == 'shape' || obj.tagName == 'stroke') {
+                        //do this because of excanvas
+                        obj = obj.parentNode.parentNode;
+                    }
+                    var target = e.target || e.srcElement, rect = target && target.getBoundingClientRect();
+                    var windowEvent = window.event;
+                    var xdiff = rect ? e.clientX - rect.left : windowEvent.offsetX;
+                    var ydiff = rect ? e.clientY - rect.top : windowEvent.offsetY;
+                    // Alfonso
+                    if (this.isSafari) {
+                        xdiff -= window.scrollX;
+                        ydiff -= window.scrollY;
+                    }
+                    var resizable = (obj.shape == 'rect' || obj.shape == 'circle');
+                    if (resizable && xdiff < 6 && ydiff > 6) {
+                        //move left
+                        obj.style.cursor = 'w-resize';
+                    }
+                    else if (resizable && xdiff > parseInt(obj.style.width, 10) - 6 && ydiff > 6) {
+                        //move right
+                        obj.style.cursor = 'e-resize';
+                    }
+                    else if (resizable && xdiff > 6 && ydiff < 6) {
+                        //move top
+                        obj.style.cursor = 'n-resize';
+                    }
+                    else if (resizable && ydiff > parseInt(obj.style.height, 10) - 6 && xdiff > 6) {
+                        //move bottom
+                        obj.style.cursor = 's-resize';
+                    }
+                    else {
+                        //move all
+                        obj.style.cursor = 'move';
+                    }
+                    if (obj.aid != this.draggedId) {
+                        //not dragged or different
+                        if (obj.style.cursor == 'move') {
+                            obj.style.cursor = 'default';
+                        }
+                        return;
+                    }
+                    var area = this.areas[this.currentid];
+                    //moved here from mousedown
+                    if (xdiff < 6 && ydiff > 6) {
+                        //move left
+                        if (area.shape == 'circle') {
+                            this.is_drawing = this.DM_SQUARE_RESIZE_LEFT;
+                            this.statusMessage(this.strings.SQUARE_RESIZE_LEFT);
+                        }
+                        else if (area.shape == 'rect') {
+                            this.is_drawing = this.DM_RECTANGLE_RESIZE_LEFT;
+                            this.statusMessage(this.strings.RECTANGLE_RESIZE_LEFT);
+                        }
+                    }
+                    else if (xdiff > parseInt(area.style.width, 10) - 6 && ydiff > 6) {
+                        //move right
+                        if (area.shape == 'circle') {
+                            this.is_drawing = this.DM_SQUARE_RESIZE_RIGHT;
+                            this.statusMessage(this.strings.SQUARE_RESIZE_RIGHT);
+                        }
+                        else if (area.shape == 'rect') {
+                            this.is_drawing = this.DM_RECTANGLE_RESIZE_RIGHT;
+                            this.statusMessage(this.strings.RECTANGLE_RESIZE_RIGHT);
+                        }
+                    }
+                    else if (xdiff > 6 && ydiff < 6) {
+                        //move top
+                        if (area.shape == 'circle') {
+                            this.is_drawing = this.DM_SQUARE_RESIZE_TOP;
+                            this.statusMessage(this.strings.SQUARE_RESIZE_TOP);
+                        }
+                        else if (area.shape == 'rect') {
+                            this.is_drawing = this.DM_RECTANGLE_RESIZE_TOP;
+                            this.statusMessage(this.strings.RECTANGLE_RESIZE_TOP);
+                        }
+                    }
+                    else if (ydiff > parseInt(area.style.height, 10) - 6 && xdiff > 6) {
+                        //move bottom
+                        if (area.shape == 'circle') {
+                            this.is_drawing = this.DM_SQUARE_RESIZE_BOTTOM;
+                            this.statusMessage(this.strings.SQUARE_RESIZE_BOTTOM);
+                        }
+                        else if (area.shape == 'rect') {
+                            this.is_drawing = this.DM_RECTANGLE_RESIZE_BOTTOM;
+                            this.statusMessage(this.strings.RECTANGLE_RESIZE_BOTTOM);
+                        }
+                    }
+                    else /*if (xdiff < 10 && ydiff < 10 ) */ {
+                        //move all
+                        if (area.shape == 'circle') {
+                            this.is_drawing = this.DM_SQUARE_MOVE;
+                            this.statusMessage(this.strings.SQUARE_MOVE);
+                            this.memory[this.currentid].rdownx = xdiff;
+                            this.memory[this.currentid].rdowny = ydiff;
+                        }
+                        else if (area.shape == 'rect') {
+                            this.is_drawing = this.DM_RECTANGLE_MOVE;
+                            this.statusMessage(this.strings.RECTANGLE_MOVE);
+                            this.memory[this.currentid].rdownx = xdiff;
+                            this.memory[this.currentid].rdowny = ydiff;
+                        }
+                        else if (area.shape == 'poly') {
+                            if (area.xpoints) {
+                                for (var i = 0, le = area.xpoints.length; i < le; i++) {
+                                    this.memory[this.currentid].xpoints[i] = area.xpoints[i];
+                                    this.memory[this.currentid].ypoints[i] = area.ypoints[i];
+                                }
+                            }
+                            if (area.shape == 'poly') {
+                                this.is_drawing = this.DM_POLYGON_MOVE;
+                                this.statusMessage(this.strings.POLYGON_MOVE);
+                            }
+                            this.memory[this.currentid].rdownx = xdiff;
+                            this.memory[this.currentid].rdowny = ydiff;
+                        }
+                    }
+                    //common memory settings (preparing to move or resize)
+                    this.memory[this.currentid].width = parseInt(area.style.width, 10);
+                    this.memory[this.currentid].height = parseInt(area.style.height, 10);
+                    this.memory[this.currentid].top = parseInt(area.style.top, 10);
+                    this.memory[this.currentid].left = parseInt(area.style.left, 10);
+                    this._setBorder(area, 'DRAW');
+                    this._setopacity(area, this.config.CL_DRAW_BG, this.config.draw_opacity);
+                }
+                else {
+                    //if drawing and not ie, have to propagate to image event
+                    this.img_mousemove(e);
+                }
+            };
+            /**
+            *	EVENT HANDLER: Handles event of mouseup on imgmap areas.
+            *	Basically clears draggedId.
+            *	@author	adam
+            *	@param	e	The event object
+            */
+            this.area_mouseup = function (e) {
+                if (!this.is_drawing) {
+                    var obj = (this.isMSIE) ? window.event.srcElement : e.currentTarget;
+                    if (obj.tagName == 'DIV') {
+                        //do this because of label
+                        obj = obj.parentNode;
+                    }
+                    if (obj.tagName == 'image' || obj.tagName == 'group' ||
+                        obj.tagName == 'shape' || obj.tagName == 'stroke') {
+                        //do this because of excanvas
+                        obj = obj.parentNode.parentNode;
+                    }
+                    if (this.areas[this.currentid] != obj) {
+                        //trying to draw on a different canvas,switch to this one
+                        if (typeof obj.aid == 'undefined') {
+                            this.log('Cannot identify target area', 1);
+                            return;
+                        }
+                    }
+                    this.draggedId = null;
+                }
+                else {
+                    //if drawing and not ie, have to propagate to image event
+                    this.img_mouseup(e);
+                }
+            };
+            /**
+            *	EVENT HANDLER: Handles event of mouseover on imgmap areas.
+            *	Calls gradual highlight on the given area.
+            *	@author	adam
+            *	@param	e	The event object
+            */
+            this.area_mouseover = function (e) {
+                if (!this.is_drawing) {
+                    //identify source object
+                    var obj = (this.isMSIE) ? window.event.srcElement : e.currentTarget;
+                    if (obj.tagName == 'DIV') {
+                        //do this because of label
+                        obj = obj.parentNode;
+                    }
+                    if (obj.tagName == 'image' || obj.tagName == 'group' ||
+                        obj.tagName == 'shape' || obj.tagName == 'stroke') {
+                        //do this because of excanvas
+                        obj = obj.parentNode.parentNode;
+                    }
+                    this.highlightArea(obj.aid);
+                }
+            };
+            /**
+            *	EVENT HANDLER: Handles event of mouseout on imgmap areas.
+            *	Calls gradient blur on the given area.
+            *	@author	adam
+            *	@param	e	The event object
+            */
+            this.area_mouseout = function (e) {
+                if (!this.is_drawing) {
+                    if (!e)
+                        e = window.event;
+                    if (this.isMSIE) {
+                        // When moving to a child, ignore this mouseout event
+                        if (e.toElement && e.srcElement == e.toElement.parentNode)
+                            return;
+                    }
+                    //identify source object
+                    var obj = (this.isMSIE) ? e.srcElement : e.currentTarget;
+                    var tagName = obj.tagName.toLowerCase();
+                    if (tagName == 'div') {
+                        //do this because of label
+                        obj = obj.parentNode;
+                    }
+                    if (tagName == 'image' || tagName == 'group' ||
+                        tagName == 'shape' || tagName == 'stroke') {
+                        //do this because of excanvas
+                        obj = obj.parentNode.parentNode;
+                    }
+                    // Only blur the area if it isn't the current one
+                    if (this.currentid != obj.aid)
+                        this.blurArea(obj.aid);
+                }
+            };
+            /**
+            *	EVENT HANDLER: Handles event of mousedown on imgmap areas.
+            *	Sets the variables draggedid, selectedid and currentid to the given area.
+            *	@author	adam
+            *	@param	e	The event object
+            */
+            this.area_mousedown = function (e) {
+                if (!this.is_drawing) {
+                    var obj = (this.isMSIE) ? window.event.srcElement : e.currentTarget;
+                    if (obj.tagName == 'DIV') {
+                        //do this because of label
+                        obj = obj.parentNode;
+                    }
+                    if (obj.tagName == 'image' || obj.tagName == 'group' ||
+                        obj.tagName == 'shape' || obj.tagName == 'stroke') {
+                        //do this because of excanvas
+                        obj = obj.parentNode.parentNode;
+                    }
+                    if (this.areas[this.currentid] != obj) {
+                        //trying to draw on a different canvas, switch to this one
+                        if (typeof obj.aid == 'undefined') {
+                            this.log('Cannot identify target area', 1);
+                            return;
+                        }
+                        this.blurArea(this.currentid);
+                        this.currentid = obj.aid;
+                        this.highlightArea(obj.aid);
+                    }
+                    this.draggedId = this.currentid;
+                    this.selectedId = this.currentid;
+                    this.fireEvent('onSelectArea', this.areas[this.currentid]);
+                    //stop event propagation to document level
+                    if (this.isMSIE) {
+                        window.event.cancelBubble = true;
+                    }
+                    else {
+                        e.stopPropagation();
+                    }
+                }
+                else {
+                    //if drawing and not ie, have to propagate to image event
+                    this.img_mousedown(e);
+                }
+            };
+            /**
+            *	EVENT HANDLER: Handles event 'keydown' on document.
+            *	Handles SHIFT hold while drawing.
+            *	Note: Safari doesn't generate keyboard events for modifiers:
+            *	@url	http://bugs.webkit.org/show_bug.cgi?id=11696
+            *	@author	adam
+            *	@param	e	The event object
+            */
+            this.doc_keydown = function (e) {
+                if (e.keyCode == 46 || e.key == "Delete") {
+                    //delete key pressed
+                    if (this.selectedId !== null && !this.is_drawing) {
+                        this.removeArea(this.selectedId);
+                    }
+                }
+                else if (e.keyCode == 16 || e.key == "Shift") {
+                    //shift key pressed
+                    if (this.is_drawing == this.DM_RECTANGLE_DRAW) {
+                        this.is_drawing = this.DM_SQUARE_DRAW;
+                        this.statusMessage(this.strings.SQUARE_DRAW);
+                    }
+                }
+            };
+            /**
+            *	EVENT HANDLER: Handles event 'keyup' on document.
+            *	Handles SHIFT release while drawing.
+            *	@author	adam
+            *	@param	e	The event object
+            */
+            this.doc_keyup = function (e) {
+                if (e.keyCode == 16 || e.key == "Shift") {
+                    //shift key released
+                    if (this.is_drawing == this.DM_SQUARE_DRAW && this.areas[this.currentid].shape == 'rect') {
+                        //not for circle!
+                        this.is_drawing = this.DM_RECTANGLE_DRAW;
+                        this.statusMessage(this.strings.RECTANGLE_DRAW);
+                    }
+                }
+            };
+            /**
+            *	EVENT HANDLER: Handles event 'mousedown' on document.
+            *	@author	adam
+            *	@param	e	The event object
+            */
+            this.doc_mousedown = function (e) {
+                if (!this.is_drawing) {
+                    this.selectedId = null;
+                }
+            };
+            /**
+            *	Get the real position of the element.
+            *	Deal with browser differences when trying to get the position of an area.
+            *	@param	element	The element you want the position of.
+            *	@return	An object with x and y members.
+            */
+            this._getPos = function (element) {
+                var bounding = element.getBoundingClientRect();
+                return { x: bounding.left, y: bounding.top };
+            };
+            /**
+            *	Gets the last (visible and editable) area.
+            *	@author	Adam Maschek (adam.maschek(at)gmail.com)
+            *	@date	2006-06-15 16:34:51
+            *	@returns	The last area object or null.
+            */
+            this._getLastArea = function () {
+                for (var i = this.areas.length - 1; i >= 0; i--) {
+                    if (this.areas[i]) {
+                        return this.areas[i];
+                    }
+                }
+                return null;
+            };
+            /**
+            *	Parses cssText to single style declarations.
+            *	@author	adam
+            *	@date	25-09-2007 18:19:51
+            *	@param obj	The DOM object to apply styles on.
+            *	@param cssText	The css declarations to apply.
+            */
+            this.assignCSS = function (obj, cssText) {
+                var parts = cssText.split(';');
+                for (var i = 0; i < parts.length; i++) {
+                    var p = parts[i].split(':');
+                    //we need to camelcase by - signs
+                    var pp = trim(p[0]).split('-');
+                    var prop = pp[0];
+                    for (var j = 1; j < pp.length; j++) {
+                        //replace first letters to uppercase
+                        prop += pp[j].replace(/^\w/, pp[j].substring(0, 1).toUpperCase());
+                    }
+                    obj.style[trim(prop)] = trim(p[1]);
+                }
+            };
+            /**
+            *	To fire callback hooks on custom events, passing them the object of the event.
+            *	@author	adam
+            *	@date	13-10-2007 15:24:49
+            *	@param evt	The type of event
+            *	@param obj	The object of the event. (can be an id, a string, an object, whatever is most relevant)
+            */
+            this.fireEvent = function (evt, obj) {
+                if (typeof this.config.custom_callbacks[evt] == 'function') {
+                    return this.config.custom_callbacks[evt](obj);
+                }
+            };
+            /**
+            *	To set area dimensions.
+            *	This is needed to achieve the same result in all browsers.
+            *	@author	adam
+            *	@date	10-12-2007 22:29:41
+            *	@param	id	The id of the area (canvas) to resize.
+            *	@param	w	The desired width in pixels.
+            *	@param	h	The desired height in pixels.
+            */
+            this.setAreaSize = function (id, w, h) {
+                if (id === null) {
+                    id = this.currentid;
+                }
+                var area = this.areas[id];
+                if (w !== null) {
+                    area.width = w;
+                    area.style.width = (w) + 'px';
+                    area.setAttribute('width', w);
+                }
+                if (h !== null) {
+                    area.height = h;
+                    area.style.height = (h) + 'px';
+                    area.setAttribute('height', h);
+                }
+            };
+            /**
+            *	Disable selection on a given object.
+            *	This is especially useful in Safari, where dragging around areas
+            *	keeps selecting all sorts of things.
+            *	@author	Bret Taylor
+            *	@url	http://ajaxcookbook.org/disable-text-selection/
+            *	@date	27-07-2008 1:57:45
+            *	@param	element	The DOM element on which you want to disable selection.
+            */
+            this.disableSelection = function (element) {
+                if (typeof element == 'undefined' || !element) {
+                    return false;
+                }
+                if (typeof element.onselectstart != "undefined") {
+                    element.onselectstart = function () {
+                        return false;
+                    };
+                }
+                if (typeof element.unselectable != "undefined") {
+                    element.unselectable = "on";
+                }
+                if (typeof element.style.MozUserSelect != "undefined") {
+                    element.style.MozUserSelect = "none";
+                }
+            };
+            this.config = {
+                custom_callbacks: {},
+                //default color values
+                CL_DRAW_SHAPE: '#d00',
+                CL_DRAW_BG: '#fff',
+                CL_NORM_SHAPE: '#d00',
+                CL_NORM_BG: '#fff',
+                CL_HIGHLIGHT_SHAPE: '#d00',
+                CL_HIGHLIGHT_BG: '#fff',
+                CL_KNOB: '#555',
+                bounding_box: true,
+                label: '%n',
+                label_class: 'imgmap_label',
+                label_style: 'font: bold 10px Arial',
+                hint: '#%n %h',
+                draw_opacity: '35',
+                norm_opacity: '50',
+                highlight_opacity: '70',
+                cursor_default: 'crosshair' //the css cursor while hovering over the image
+            };
+            //browser sniff
+            var navigator = window.navigator;
+            var userAgent = window.navigator.userAgent;
+            this.isMSIE = (navigator.appName == "Microsoft Internet Explorer");
+            this.isSafari = userAgent.indexOf('Safari') != -1;
+            this.setup(options);
+        }
+        return QMSCKEditorImageMapLib;
+    }());
+    /**
+        *	Trims a string.
+        *	Changed not to extend String but use own function for better compatibility.
+        *	@param str The string to trim.
+        */
+    function trim(str) {
+        return str.replace(/^\s+|\s+$/g, '');
+    }
+    ;
+
+    function invalidURLValidator(regex) {
+        return function (control) {
+            var invalid = regex.test(control.value);
+            return invalid ? { invalidURL: { value: 'control.value' } } : null;
+        };
+    }
+
+    var QMSCKEditorImageMapComponent = /** @class */ (function (_super) {
+        __extends(QMSCKEditorImageMapComponent, _super);
+        function QMSCKEditorImageMapComponent(renderer, cdr, dialog, translate, linkService, dialogRef, data, iconRegistry, sanitizer) {
+            var _this = _super.call(this) || this;
+            _this.renderer = renderer;
+            _this.cdr = cdr;
+            _this.dialog = dialog;
+            _this.translate = translate;
+            _this.linkService = linkService;
+            _this.dialogRef = dialogRef;
+            _this.data = data;
+            _this.linkTypes = [];
+            _this.targets = [];
+            _this.protocols = [];
+            _this.modes = [];
+            _this.zoomTypes = [];
+            _this.url = '';
+            _this.processedUrl = '';
+            _this.selectedMode = ImageModeName.Rectangle;
+            _this.selectedLinkType = exports.LinkType.url;
+            _this.selectedTarget = exports.TargetTypeName.new;
+            _this.selectedProtocol = exports.ProtocolTypeName.http;
+            _this.selectedZoom = 1.0;
+            _this.protocolRegex = /^(http|https|ftp|news):\/\/(?=.)/i;
+            _this.javascriptLinkRegex = /javascript\:/i;
+            _this.documentId = 0;
+            //anchorTitle = '';
+            _this.anchorText = '';
+            //anchorByName = '';
+            _this.advisoryTitle = '';
+            _this.isUrlProcessing = false;
+            _this.naturalImageWidth = 0;
+            _this.naturalImageHeight = 0;
+            _this.currentAreaId = -1;
+            _this.showImageMapInformation = false;
+            _this.anchorDocuments = [];
+            //documentAnchors: IAnchor[];
+            _this.imageListeners = [];
+            _this.imageMapData = data;
+            _this.naturalImageHeight = _this.imageMapData.imageHeight;
+            _this.naturalImageWidth = _this.imageMapData.imageWidth;
+            _this.initFormControl();
+            _this.initSvgIcons(iconRegistry, sanitizer);
+            return _this;
+        }
+        QMSCKEditorImageMapComponent.prototype.initDefaultValues = function () {
+            this.selectedLinkType = exports.LinkType.url;
+            this.selectedTarget = exports.TargetTypeName.new;
+            this.selectedProtocol = exports.ProtocolTypeName.http;
+            this.url = '';
+            this.processedUrl = '';
+            this.advisoryTitle = '';
+            this.anchorText = '';
+        };
+        QMSCKEditorImageMapComponent.prototype.initSvgIcons = function (iconRegistry, sanitizer) {
+            iconRegistry.addSvgIconLiteral('vector-pointer', sanitizer.bypassSecurityTrustHtml(IconSvg.VECTOR_POINTER));
+            iconRegistry.addSvgIconLiteral('vector-circle', sanitizer.bypassSecurityTrustHtml(IconSvg.VECTOR_CIRCLE));
+            iconRegistry.addSvgIconLiteral('vector-rectangle', sanitizer.bypassSecurityTrustHtml(IconSvg.VECTOR_RECTANGLE));
+            iconRegistry.addSvgIconLiteral('vector-polygon', sanitizer.bypassSecurityTrustHtml(IconSvg.VECTOR_POLYGON));
+            iconRegistry.addSvgIconLiteral('vector-remove', sanitizer.bypassSecurityTrustHtml(IconSvg.VECTOR_REMOVE));
+        };
+        QMSCKEditorImageMapComponent.prototype.initFormControl = function () {
+            var valiationControls = {
+                targetList: new forms.FormControl(),
+                protocolList: new forms.FormControl(),
+                anchorTextList: new forms.FormControl(),
+                modeList: new forms.FormControl(),
+                zoomList: new forms.FormControl(),
+                linkTypeList: new forms.FormControl()
+            };
+            if (this.imageMapData.linkJavaScriptLinksAllowed == true) {
+                valiationControls['url'] = new forms.FormControl('', [forms.Validators.required]);
+            }
+            else {
+                valiationControls['url'] = new forms.FormControl('', [forms.Validators.required, invalidURLValidator(this.javascriptLinkRegex)]);
+            }
+            this.imageMapFormGroup = new forms.FormGroup(valiationControls);
+        };
+        QMSCKEditorImageMapComponent.prototype.initLinkType = function () {
+            if (this.linkTypes) {
+                this.linkTypes.push({ id: exports.LinkType.url, name: this.LANG.QMSCKEDITOR.LINK_URL });
+                this.linkTypes.push({
+                    id: exports.LinkType.anchorText,
+                    name: this.LANG.QMSCKEDITOR.LINK_ANCHOR_IN_TEXT
+                });
+            }
+        };
+        QMSCKEditorImageMapComponent.prototype.initTarget = function () {
+            if (this.targets) {
+                this.targets.push({ id: exports.TargetTypeName.new, name: this.LANG.QMSCKEDITOR.TARTGET_NEW });
+                this.targets.push({ id: exports.TargetTypeName.same, name: this.LANG.QMSCKEDITOR.TARGET_SAME });
+            }
+        };
+        QMSCKEditorImageMapComponent.prototype.initProtocol = function () {
+            if (this.protocols) {
+                this.protocols.push({ id: exports.ProtocolTypeName.http, name: this.LANG.QMSCKEDITOR.PROTOCOL_HTTP });
+                this.protocols.push({ id: exports.ProtocolTypeName.https, name: this.LANG.QMSCKEDITOR.PROTOCOL_HTTPS });
+                this.protocols.push({ id: exports.ProtocolTypeName.ftp, name: this.LANG.QMSCKEDITOR.PROTOCOL_FTP });
+                this.protocols.push({ id: exports.ProtocolTypeName.news, name: this.LANG.QMSCKEDITOR.PROTOCOL_NEW });
+                this.protocols.push({ id: exports.ProtocolTypeName.other, name: this.LANG.QMSCKEDITOR.PROTOCOL_OTHER });
+            }
+        };
+        QMSCKEditorImageMapComponent.prototype.initModes = function () {
+            if (this.modes) {
+                this.modes.push({ id: ImageModeName.Pointer, name: this.LANG.QMSCKEDITOR.IMAGE_MODE_POINTER, icon: "vector-pointer" });
+                this.modes.push({ id: ImageModeName.Rectangle, name: this.LANG.QMSCKEDITOR.IMAGE_MODE_RECTANGLE, icon: "vector-rectangle" });
+                this.modes.push({ id: ImageModeName.Circle, name: this.LANG.QMSCKEDITOR.IMAGE_MODE_CIRCLE, icon: "vector-circle" });
+                this.modes.push({ id: ImageModeName.Polygon, name: this.LANG.QMSCKEDITOR.IMAGE_MODE_POLYGON, icon: "vector-polygon" });
+                this.modes.push({ id: ImageModeName.Remove, name: this.LANG.QMSCKEDITOR.IMAGE_MODE_REMOVE, icon: "vector-remove" });
+            }
+        };
+        QMSCKEditorImageMapComponent.prototype.initZoomTypes = function () {
+            if (this.zoomTypes) {
+                this.zoomTypes.push({ id: 0.25, name: "25%" });
+                this.zoomTypes.push({ id: 0.5, name: "50%" });
+                this.zoomTypes.push({ id: 1.0, name: "100%" });
+                this.zoomTypes.push({ id: 2.0, name: "200%" });
+                this.zoomTypes.push({ id: 3.0, name: "300%" });
+            }
+        };
+        QMSCKEditorImageMapComponent.prototype.initAnchor = function () {
+            this.anchors = [];
+            this.anchors = [{ value: 0, viewValue: '', anchorValue: exports.LinkAnchor.Blank }];
+        };
+        QMSCKEditorImageMapComponent.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.initLinkType();
+            this.initTarget();
+            this.initProtocol();
+            this.initModes();
+            this.initZoomTypes();
+        };
+        QMSCKEditorImageMapComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+            if (this.imageListeners && this.imageListeners.length > 0) {
+                this.imageListeners.forEach(function (listener) {
+                    listener();
+                });
+            }
+        };
+        QMSCKEditorImageMapComponent.prototype.onImageLoad = function () {
+            this.naturalImageHeight = this.naturalImageHeight != 0 ? this.naturalImageHeight : this.myImageRef.nativeElement.naturalHeight;
+            this.naturalImageWidth = this.naturalImageWidth != 0 ? this.naturalImageWidth : this.myImageRef.nativeElement.naturalWidth;
+            this.setImageSize();
+            this.myImageMap.setMapJson({
+                name: this.imageMapData.name,
+                areas: this.imageMapData.areas
+            });
+            if (this.imageMapData.areas && this.imageMapData.areas.length > 0) {
+                this.myImageMap.blurArea(this.myImageMap.currentid);
+                this.myImageMap.currentid = 0;
+                this.myImageMap.selectedId = 0;
+                this.onSelectArea(this.myImageMap.areas[0]);
+                this.myImageMap.highlightArea(0);
+            }
+        };
+        QMSCKEditorImageMapComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            if (this.myImageRef) {
+                this.imageListeners.push(this.renderer.listen(this.myImageRef.nativeElement, 'load', function () {
+                    _this.onImageLoad();
+                }));
+            }
+            // Avoid drag&drop of the image
+            this.myImageMap = new QMSCKEditorImageMapLib({
+                custom_callbacks: {
+                    "onAddArea": this.onAddArea.bind(this),
+                    'onSelectArea': this.onSelectArea.bind(this),
+                    'onRemoveArea': this.onRemoveArea.bind(this),
+                    'onStatusMessage': this.onStatusMessage.bind(this)
+                },
+                imageElement: this.myImageRef.nativeElement,
+                bounding_box: false,
+                CL_DRAW_SHAPE: '#F00',
+                CL_NORM_SHAPE: '#AAA',
+                CL_HIGHLIGHT_SHAPE: '#F00',
+                strings: {
+                    "POLYGON_DRAW": this.LANG.QMSCKEDITOR.POLYGON_DRAW,
+                    "RECTANGLE_DRAW": this.LANG.QMSCKEDITOR.RECTANGLE_DRAW,
+                    "SQUARE_DRAW": this.LANG.QMSCKEDITOR.SQUARE_DRAW,
+                    'READY': '',
+                    'RECTANGLE_MOVE': '',
+                    'RECTANGLE_RESIZE_TOP': '',
+                    'RECTANGLE_RESIZE_RIGHT': '',
+                    'RECTANGLE_RESIZE_BOTTOM': '',
+                    'RECTANGLE_RESIZE_LEFT': '',
+                    'SQUARE_MOVE': '',
+                    'SQUARE_RESIZE_TOP': '',
+                    'SQUARE_RESIZE_RIGHT': '',
+                    'SQUARE_RESIZE_BOTTOM': '',
+                    'SQUARE_RESIZE_LEFT': '',
+                    'POLYGON_MOVE': ''
+                }
+            });
+        };
+        QMSCKEditorImageMapComponent.prototype.parseLinkUrl = function (url, defaultProtocolName) {
+            var protocol = this.protocolRegex.exec(url);
+            if (protocol) {
+                this.processedUrl = url.substr(protocol[0].length);
+                this.url = this.processedUrl;
+                this.selectedProtocol = protocol[0].toLowerCase();
+            }
+            else if (this.javascriptLinkRegex.test(url) && !this.imageMapData.linkJavaScriptLinksAllowed) {
+                this.selectedProtocol = exports.ProtocolTypeName.http;
+                this.processedUrl = '';
+                this.url = this.processedUrl;
+            }
+            else {
+                this.processedUrl = url;
+                this.url = this.processedUrl;
+                if (!!this.selectedProtocol) {
+                    this.selectedProtocol = defaultProtocolName || exports.ProtocolTypeName.http;
+                }
+            }
+        };
+        QMSCKEditorImageMapComponent.prototype.onSelectArea = function (area) {
+            this.currentAreaId = area.aid;
+            this.showImageMapInformation = true;
+            if (this.selectedMode == ImageModeName.Remove) {
+                this.myImageMap.removeArea(this.currentAreaId);
+            }
+            else {
+                if (area.ahref.match(/^#(.*)$/)) {
+                    this.anchorText = area.ahref.slice(1);
+                    this.selectedLinkType = exports.LinkType.anchorText;
+                }
+                else {
+                    this.selectedLinkType = exports.LinkType.url;
+                    this.parseLinkUrl(area.ahref);
+                }
+                this.selectedTarget = area.atarget;
+                this.advisoryTitle = area.aalt;
+                this.cdr.detectChanges();
+            }
+        };
+        QMSCKEditorImageMapComponent.prototype.onRemoveArea = function () {
+            this.currentAreaId = -1;
+            this.showImageMapInformation = false;
+        };
+        QMSCKEditorImageMapComponent.prototype.removeMap = function () {
+            this.currentAreaId = -1;
+            this.showImageMapInformation = false;
+            this.myImageMap.removeAllAreas();
+        };
+        QMSCKEditorImageMapComponent.prototype.onStatusMessage = function (text) {
+            if (this.myStatusRef) {
+                this.myStatusRef.nativeElement.innerHTML = text || '';
+            }
+        };
+        QMSCKEditorImageMapComponent.prototype.onUrlKeyup = function () {
+            this.isUrlProcessing = true;
+            if (this.url != this.processedUrl) {
+                this.parseLinkUrl(this.url);
+                this.updateAreaValues();
+            }
+            this.isUrlProcessing = false;
+        };
+        QMSCKEditorImageMapComponent.prototype.onUrlChange = function () {
+            if (!this.isUrlProcessing) {
+                this.onUrlKeyup();
+            }
+        };
+        QMSCKEditorImageMapComponent.prototype.onAnchorTextChange = function () {
+            this.updateAreaValues();
+        };
+        QMSCKEditorImageMapComponent.prototype.onProtocolChange = function () {
+            this.updateAreaValues();
+        };
+        QMSCKEditorImageMapComponent.prototype.onTargetChange = function () {
+            this.updateAreaValues();
+        };
+        QMSCKEditorImageMapComponent.prototype.onAddArea = function (id) {
+            this.currentAreaId = id;
+            this.showImageMapInformation = true;
+            this.initDefaultValues();
+            this.updateAreaValues();
+        };
+        QMSCKEditorImageMapComponent.prototype.updateAreaValues = function () {
+            if (this.currentAreaId > -1) {
+                var ahref = this.buildUrlWithProtocol();
+                if (this.selectedLinkType == exports.LinkType.anchorText) {
+                    this.myImageMap.areas[this.currentAreaId].atarget = exports.TargetTypeName.same;
+                    this.myImageMap.areas[this.currentAreaId].aalt = this.anchorText;
+                }
+                else {
+                    this.myImageMap.areas[this.currentAreaId].atarget = this.selectedTarget || exports.TargetTypeName.new;
+                    this.myImageMap.areas[this.currentAreaId].aalt = this.advisoryTitle;
+                }
+                this.myImageMap.areas[this.currentAreaId].ahref = ahref;
+            }
+        };
+        QMSCKEditorImageMapComponent.prototype.buildUrlWithProtocol = function () {
+            if (this.selectedLinkType == exports.LinkType.anchorText) {
+                return '#' + (this.anchorText || '');
+            }
+            if (!!this.processedUrl) {
+                return this.selectedProtocol + this.processedUrl;
+            }
+            return '';
+        };
+        QMSCKEditorImageMapComponent.prototype.ngAfterViewChecked = function () {
+            this.cdr.detectChanges();
+        };
+        QMSCKEditorImageMapComponent.prototype.onCloseDialog = function () {
+            this.dialogRef.close();
+        };
+        QMSCKEditorImageMapComponent.prototype.onModeChange = function (e) {
+            this.selectedMode = e.value;
+            if (this.selectedMode == ImageModeName.Pointer || this.selectedMode == ImageModeName.Remove) {
+                this.myImageMap.is_drawing = 0;
+                this.myImageMap.nextShape = '';
+                this.myImageRef.nativeElement.style.cursor = 'default';
+            }
+            else {
+                this.myImageMap.nextShape = this.selectedMode;
+                this.myImageRef.nativeElement.style.cursor = 'crosshair';
+            }
+        };
+        QMSCKEditorImageMapComponent.prototype.onZoomChange = function () {
+            this.setImageSize();
+            if (this.myImageMap) {
+                this.myImageMap.scaleAllAreas(this.selectedZoom);
+            }
+        };
+        QMSCKEditorImageMapComponent.prototype.onLinkTypeChange = function () {
+            if (this.selectedLinkType === exports.LinkType.anchorText) {
+                this.getEditorAnchor();
+            }
+            this.updateAreaValues();
+        };
+        QMSCKEditorImageMapComponent.prototype.getEditorAnchor = function () {
+            this.anchorDocuments = [];
+            if (this.imageMapData.editorContent) {
+                this.anchorDocuments.push({
+                    id: 0,
+                    entityId: 0,
+                    documentId: 0,
+                    documentTypeId: 0,
+                    richText: this.imageMapData.editorContent
+                });
+            }
+            this.setAnchorDocument(this.anchorDocuments);
+            this.editorAnchors = this.anchors;
+        };
+        QMSCKEditorImageMapComponent.prototype.setImageSize = function () {
+            if (this.myImageRef) {
+                var width = this.naturalImageWidth * this.selectedZoom;
+                var height = this.naturalImageHeight * this.selectedZoom;
+                this.myImageRef.nativeElement.setAttribute("width", width + "px;");
+                this.myImageRef.nativeElement.setAttribute("height", height + "px;");
+                this.myImageRef.nativeElement.style.width = width + "px";
+                this.myImageRef.nativeElement.style.height = height + "px";
+                this.myImageRef.nativeElement.style.cursor = this.selectedMode == ImageModeName.Pointer || this.selectedMode == ImageModeName.Remove ? 'default' : 'crosshair';
+            }
+        };
+        QMSCKEditorImageMapComponent.prototype.eHandbook = function (isOnlyDocument, isAnchorDocument) {
+            var _this = this;
+            var data = new QMSCKEditorRelation();
+            data.isOnlyDocument = isOnlyDocument;
+            data.isEnableFolder = !isOnlyDocument;
+            var dialogTemplate = this.dialog.open(QMSCKEditorRelatedComponent, {
+                width: '650px',
+                height: '650px',
+                data: data,
+                disableClose: true
+            });
+            dialogTemplate
+                .afterClosed()
+                .pipe(operators.takeUntil(this.ngUnsubcribe))
+                .subscribe(function (result) {
+                if (result) {
+                    if (isAnchorDocument) {
+                        _this.documentId = result.id;
+                        //this.anchorTitle = `${result.title}(${result.id})`;
+                        _this.getAnchorDocument(result.id);
+                    }
+                    else {
+                        _this.parseLinkUrl(result.url);
+                        _this.selectedProtocol = exports.ProtocolTypeName.other;
+                        if (!_this.advisoryTitle) {
+                            _this.advisoryTitle = result.title;
+                        }
+                    }
+                    _this.updateAreaValues();
+                }
+            });
+        };
+        QMSCKEditorImageMapComponent.prototype.getAnchorDocument = function (documentId) {
+            var _this = this;
+            this.linkService
+                .getAnchorDocumentList(documentId)
+                .pipe(operators.takeUntil(this.ngUnsubcribe))
+                .subscribe(function (res) {
+                if (res) {
+                    _this.anchorDocuments = res;
+                    _this.setAnchorDocument(_this.anchorDocuments);
+                    //this.documentAnchors = this.anchors;
+                }
+                else {
+                    _this.anchorDocuments = [];
+                    _this.setAnchorDocument(_this.anchorDocuments);
+                    //this.documentAnchors = this.anchors;
+                }
+            });
+        };
+        QMSCKEditorImageMapComponent.prototype.setAnchorDocument = function (anchorDocument) {
+            var _this = this;
+            this.initAnchor();
+            var id = 3;
+            if (anchorDocument) {
+                anchorDocument.forEach(function (e) {
+                    var div = document.createElement('div');
+                    div.innerHTML = e.richText;
+                    var domContent = div;
+                    var aTags = domContent.getElementsByTagName('a');
+                    if (aTags) {
+                        var _loop_1 = function (i) {
+                            var tag = aTags[i];
+                            if (tag.name) {
+                                var index = _this.anchors.findIndex(function (x) {
+                                    return x.anchorValue === tag.name;
+                                });
+                                if (index < 0) {
+                                    _this.anchors.push({
+                                        value: id,
+                                        viewValue: tag.name,
+                                        anchorValue: tag.name
+                                    });
+                                    id += 1;
+                                }
+                            }
+                        };
+                        // tslint:disable-next-line:prefer-for-of
+                        for (var i = 0; i < aTags.length; i++) {
+                            _loop_1(i);
+                        }
+                    }
+                });
+            }
+            // this.anchors.push({
+            //     value: 1,
+            //     viewValue: this.LANG.QMSCKEDITOR.ANCHOR_ATTACHMENT,
+            //     anchorValue: LinkAnchor.Attachment
+            // });
+            // this.anchors.push({
+            //     value: 2,
+            //     viewValue: this.LANG.QMSCKEDITOR.ANCHOR_RELATED_DOCUMENT,
+            //     anchorValue: LinkAnchor.Related
+            // });
+        };
+        QMSCKEditorImageMapComponent.prototype.attachment = function () {
+            var _this = this;
+            var data = new QMSCKEditorParamter();
+            data.module = this.imageMapData.module;
+            data.entityId = this.imageMapData.entityId;
+            var dialogTemplate = this.dialog.open(LinkAttachmentComponent, {
+                width: '650px',
+                height: '650px',
+                data: data,
+                disableClose: true
+            });
+            dialogTemplate
+                .afterClosed()
+                .pipe(operators.takeUntil(this.ngUnsubcribe))
+                .subscribe(function (result) {
+                if (result) {
+                    _this.parseLinkUrl(result.url);
+                    _this.selectedProtocol = exports.ProtocolTypeName.other;
+                    if (!_this.advisoryTitle) {
+                        _this.advisoryTitle = result.title;
+                    }
+                    _this.updateAreaValues();
+                }
+            });
+        };
+        QMSCKEditorImageMapComponent.prototype.save = function () {
+            var data = this.myImageMap.getMapJson();
+            data.imageHeight = this.naturalImageHeight;
+            data.imageWidth = this.naturalImageWidth;
+            this.dialogRef.close(data);
+        };
+        QMSCKEditorImageMapComponent.prototype.cancel = function () {
+            this.dialogRef.close();
+        };
+        return QMSCKEditorImageMapComponent;
+    }(QMSCKEditorBaseComponent));
+    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:470px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.qmsckeditor__imagemap__container .mat-form-field{width:100%}.qmsckeditor__imagemap__container .qmsckeditor__imagemap__information{position:relative}.qmsckeditor__imagemap__container .qmsckeditor__imagemap__map{overflow:auto;width:800px;min-height:371px;position:relative;max-height:460px}.qmsckeditor__imagemap__container .mat-button-toggle-checked{border:1px solid #000!important}.qmsckeditor__imagemap__container .hidden{visibility:hidden}"]
+                },] }
+    ];
+    QMSCKEditorImageMapComponent.ctorParameters = function () { return [
+        { type: i0.Renderer2 },
+        { type: i0.ChangeDetectorRef },
+        { type: dialog.MatDialog },
+        { type: TranslateLibraryService },
+        { type: QMSCKEditorLinkService },
+        { type: dialog.MatDialogRef },
+        { type: QMSCKEditorImageMap, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] },
+        { type: icon.MatIconRegistry },
+        { type: platformBrowser.DomSanitizer }
+    ]; };
+    QMSCKEditorImageMapComponent.propDecorators = {
+        myImageRef: [{ type: i0.ViewChild, args: ['myImage',] }],
+        myStatusRef: [{ type: i0.ViewChild, args: ['myStatus',] }]
+    };
+
+    var QMSCKEditorTooltip = /** @class */ (function () {
+        function QMSCKEditorTooltip() {
+            this.text = '';
+            this.content = '';
+        }
+        return QMSCKEditorTooltip;
+    }());
+
+    var QMSCKEditorTooltipComponent = /** @class */ (function (_super) {
+        __extends(QMSCKEditorTooltipComponent, _super);
+        function QMSCKEditorTooltipComponent(cdr, translate, dialogRef, data) {
+            var _this = _super.call(this) || this;
+            _this.cdr = cdr;
+            _this.translate = translate;
+            _this.dialogRef = dialogRef;
+            _this.data = data;
+            _this.tooltipFormGroup = new forms.FormGroup({
+                title: new forms.FormControl('', [forms.Validators.required]),
+                content: new forms.FormControl('', [forms.Validators.required])
+            });
+            _this.tooltip = { text: data.text, content: data.content };
+            _this.editor = data.ckEditor;
+            return _this;
+        }
+        QMSCKEditorTooltipComponent.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.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();
+        };
+        QMSCKEditorTooltipComponent.prototype.onCloseDialog = function () {
+            this.dialogRef.close();
+        };
+        QMSCKEditorTooltipComponent.prototype.getOutputContent = function (content) {
+            this.tooltip.content = content;
+        };
+        QMSCKEditorTooltipComponent.prototype.onChanged = function (_a) {
+            var editor = _a.editor;
+            this.tooltip.content = editor.getData();
+        };
+        QMSCKEditorTooltipComponent.prototype.onBlur = function (_a) {
+            var editor = _a.editor;
+            this.tooltip.content = editor.getData();
+        };
+        QMSCKEditorTooltipComponent.prototype.onReady = function (editor) {
+            if (this.tooltip.text) {
+                editor.setData(this.tooltip.text);
+            }
+            editor.ui.getEditableElement().parentElement.insertBefore(editor.ui.view.toolbar.element, editor.ui.getEditableElement());
+        };
+        QMSCKEditorTooltipComponent.prototype.saveTooltip = function () {
+            var tooltip = new QMSCKEditorTooltip();
+            tooltip.content = this.tooltip.content;
+            tooltip.text = this.tooltip.text;
+            this.dialogRef.close(tooltip);
+        };
+        QMSCKEditorTooltipComponent.prototype.cancelTooltip = function () {
+            this.dialogRef.close();
+        };
+        return QMSCKEditorTooltipComponent;
+    }(QMSCKEditorBaseComponent));
+    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",
+                    styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:470px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.qmsckeditor__tooltip__container .mat-form-field{width:100%}.qmsckeditor__tooltip__container textarea.mat-input-element{min-height:150px}"]
+                },] }
+    ];
+    QMSCKEditorTooltipComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: TranslateLibraryService },
+        { type: dialog.MatDialogRef },
+        { type: QMSCKEditorTooltip, 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) {
+            var _this = _super.call(this) || this;
+            _this.dialog = dialog;
+            _this.globalService = globalService;
+            _this.qmsCKEditorFullscreenComponent = qmsCKEditorFullscreenComponent;
+            _this.renderer = renderer;
+            _this.elRef = elRef;
+            _this.required = false;
+            _this.qmsckContentOutput = new i0.EventEmitter();
+            _this.ckEditorEventConst = CKEditorEventConst;
+            return _this;
+        }
+        QMSCKEditorComponent.prototype.onMessage = function (event) {
+            switch (event.data.eventName) {
+                case this.ckEditorEventConst.QMSCK_FULLSCREEN_PLUGIN_MSG:
+                    this.fullscreenEventHandling();
+                    break;
+                case this.ckEditorEventConst.QMSCK_TEMPLATE_PLUGIN_MSG:
+                    this.templateEventHandling();
+                    break;
+                case this.ckEditorEventConst.QMSCK_LOAD_TEMPLATE_PLUGIN_MSG:
+                    this.loadTemplateEventHandling();
+                    break;
+                case this.ckEditorEventConst.QMSCK_LINK_PLUGIN_MSG:
+                    this.linkEventHandling(event.data.value);
+                    break;
+                case this.ckEditorEventConst.QMSCK_TOOLTIP_PLUGIN_MSG:
+                    this.tooltipEventHandling(event.data.value);
+                    break;
+                case this.ckEditorEventConst.QMSCK_IMAGEMAP_PLUGIN_MSG:
+                    this.imageMapEventHandling(event.data.value);
+                    break;
+                case this.ckEditorEventConst.QMSCK_BPMN_PLUGIN_MSG:
+                    this.bpmnEventHandling(event.data.value);
+                    break;
+                default:
+                    break;
+            }
+        };
+        QMSCKEditorComponent.prototype.ngOnInit = function () {
+            this.name = 'CKEditor custom build';
+            this.ckEditor = this.qmsckPlugin.pluginObject;
+            this.ckeditorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(this.qmsckPlugin.itemToolbar);
+            this.globalService.setApiUrl(this.qmsckData.apiUrl);
+            if (this.isEnabledCustomizingMathtypeService()) {
+                this.customizeMathTypeService();
+            }
+            if (this.isEnabledCustomizingTimestampFormat()) {
+                this.customizeTimestampFormat();
+            }
+        };
+        QMSCKEditorComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        QMSCKEditorComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        QMSCKEditorComponent.prototype.ngAfterViewInit = function () {
+            if (this.isDisabled) {
+                this.renderer.addClass(this.elRef.nativeElement, 'ck-disabled');
+            }
+        };
+        QMSCKEditorComponent.prototype.isEnabledCustomizingTimestampFormat = function () {
+            var pattern = /(timestamp)/gmi;
+            return !!this.qmsckData.timestampFormat
+                && this.qmsckData.timestampFormat !== ''
+                && !!this.qmsckPlugin.itemToolbar
+                && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
+        };
+        QMSCKEditorComponent.prototype.customizeTimestampFormat = function () {
+            var timestampConfig = {
+                timestampConfig: {
+                    datetimeFormat: this.qmsckData.timestampFormat
+                }
+            };
+            this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, timestampConfig);
+        };
+        QMSCKEditorComponent.prototype.isEnabledCustomizingMathtypeService = function () {
+            var pattern = /(MathType)|(ChemType)/gmi;
+            return !!this.qmsckData.mathtypeServiceUrl
+                && this.qmsckData.mathtypeServiceUrl !== ''
+                && !!this.qmsckPlugin.itemToolbar
+                && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
+        };
+        QMSCKEditorComponent.prototype.customizeMathTypeService = function () {
+            var mathTypeConfig = {
+                mathTypeParameters: {
+                    serviceProviderProperties: {
+                        URI: this.qmsckData.mathtypeServiceUrl,
+                        server: 'aspx'
+                    }
+                }
+            };
+            this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, mathTypeConfig);
+        };
+        QMSCKEditorComponent.prototype.onChanged = function (_a) {
+            var editor = _a.editor;
+            this.qmsckContentOutput.emit(this.qmsckContentInput);
+        };
+        QMSCKEditorComponent.prototype.onBlur = function (_a) {
+            var editor = _a.editor;
+            this.qmsckContentOutput.emit(this.qmsckContentInput);
+        };
+        QMSCKEditorComponent.prototype.validate = function (c) {
+            if (!this.required) {
+                return null;
+            }
+            return (this.qmsckContentInput && !this.required) ? null : {
+                type: {
+                    valid: false,
+                    actual: c.value
+                }
+            };
+        };
+        /**
+         * onReady
+         */
+        QMSCKEditorComponent.prototype.onReady = function (editor) {
+            this.editorInstance = editor;
+            if (this.qmsckContentInput) {
+                editor.setData(this.qmsckContentInput);
+            }
+            this.initEditor(editor);
+        };
+        QMSCKEditorComponent.prototype.initEditor = function (editor) {
+            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;
+            });
+        };
+        /**
+         * Full screen - Restore down
+         */
+        QMSCKEditorComponent.prototype.fullscreenEventHandling = function () {
+            var ck = window.document.getElementById('qmsckeditor');
+            if (ck) {
+                if (!ck.classList.contains('qmsckeditor__fullscreen')) {
+                    this.qmsCKEditorFullscreenComponent.showFullScreen();
+                }
+                else {
+                    this.qmsCKEditorFullscreenComponent.hideFullScreen();
+                }
+            }
         };
         /**
          * Add template - Load template
@@ -12680,8 +15242,39 @@
             });
         };
         /**
-         * Business Process Model and Notation
-         */
+       * ImageMap mapping
+       */
+        QMSCKEditorComponent.prototype.imageMapEventHandling = function (value) {
+            var _this = this;
+            var data = new QMSCKEditorImageMap();
+            data.name = value.name;
+            data.areas = value.areas;
+            data.imageUrl = value.imageUrl;
+            data.imageWidth = value.imageWidth;
+            data.imageHeight = value.imageHeight;
+            data.module = this.qmsckData.module;
+            data.entityId = this.qmsckData.entityId;
+            data.editorContent = this.qmsckContentInput;
+            data.linkJavaScriptLinksAllowed = this.qmsckData.linkJavaScriptLinksAllowed;
+            var dialogTemplate = this.dialog.open(QMSCKEditorImageMapComponent, {
+                data: data,
+                disableClose: true
+            });
+            dialogTemplate
+                .afterClosed()
+                .pipe(operators.takeUntil(this.ngUnsubcribe))
+                .subscribe(function (result) {
+                if (result) {
+                    var evt = new CustomEvent(_this.ckEditorEventConst.QMSCK_IMAGEMAP_PLUGIN_RESP, {
+                        detail: result
+                    });
+                    window.dispatchEvent(evt);
+                }
+            });
+        };
+        /*
+          Business Process Model and Notation
+        */
         QMSCKEditorComponent.prototype.bpmnEventHandling = function (id) {
             var _this = this;
             var dialogTemplate = this.dialog.open(QMSCKEditorBpmnComponent, {
@@ -12697,12 +15290,10 @@
                 .pipe(operators.takeUntil(this.ngUnsubcribe))
                 .subscribe(function (result) {
                 if (result) {
-                    if (result) {
-                        var evt = new CustomEvent(_this.ckEditorEventConst.QMSCK_BPMN_PLUGIN_RESP, {
-                            detail: result
-                        });
-                        window.dispatchEvent(evt);
-                    }
+                    var evt = new CustomEvent(_this.ckEditorEventConst.QMSCK_BPMN_PLUGIN_RESP, {
+                        detail: result
+                    });
+                    window.dispatchEvent(evt);
                 }
             });
         };
@@ -12767,6 +15358,7 @@
                         QMSCKEditorRelatedComponent,
                         LinkAttachmentComponent,
                         QMSCKEditorTooltipComponent,
+                        QMSCKEditorImageMapComponent,
                         QMSCKEditorBpmnComponent,
                         SaveTemplateComponent
                     ],
@@ -12786,6 +15378,10 @@
                         snackBar.MatSnackBarModule,
                         select.MatSelectModule,
                         button.MatButtonModule,
+                        buttonToggle.MatButtonToggleModule,
+                        progressSpinner.MatProgressSpinnerModule,
+                        tooltip.MatTooltipModule,
+                        radio.MatRadioModule,
                         tree$1.MatTreeModule,
                         autocomplete.MatAutocompleteModule,
                         scrolling.ScrollingModule,
@@ -12811,12 +15407,6 @@
 
     var QMSCKEdtiorInputData = /** @class */ (function () {
         function QMSCKEdtiorInputData() {
-            this.apiUrl = '';
-            this.module = 0;
-            this.entityId = '';
-            this.documentId = 0;
-            this.mathtypeServiceUrl = '';
-            this.timestampFormat = '';
         }
         return QMSCKEdtiorInputData;
     }());
@@ -13573,6 +16163,8 @@
     exports.ɵd = LinkAttachmentComponent;
     exports.ɵe = QMSCKEditorTooltipComponent;
     exports.ɵf = QMSCKEditorTooltip;
+    exports.ɵg = QMSCKEditorImageMapComponent;
+    exports.ɵh = QMSCKEditorImageMap;
 
     Object.defineProperty(exports, '__esModule', { value: true });