qms-angular 1.0.39 → 1.0.40

package/fesm2015/qms-angular.js

@@ -4,7 +4,7 @@ import { BehaviorSubject, Subject, forkJoin } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { FormBuilder, NgControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, NG_VALIDATORS, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule } from '@angular/material/form-field';
-import { MAT_RADIO_DEFAULT_OPTIONS } from '@angular/material/radio';
+import { MAT_RADIO_DEFAULT_OPTIONS, MatRadioModule } from '@angular/material/radio';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule, MatDialogConfig } from '@angular/material/dialog';
 import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
@@ -32,14 +32,15 @@ import { takeUntil, debounceTime } from 'rxjs/operators';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpClient, HttpClientModule } from '@angular/common/http';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBarConfig, MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { CKEditorModule as CKEditorModule$1 } from '@ckeditor/ckeditor5-angular';
 import { __awaiter } from 'tslib';
 import * as $ from 'jquery';
 import * as _ from 'lodash';
-import { MatBadgeModule } from '@angular/material/badge';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatBadgeModule } from '@angular/material/badge';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
@@ -104,6 +105,8 @@ const en = {
         "DOCUMENTS_IN": "Documents in"
     },
     "QMSCKEDITOR": {
+        "REMOVE_MAP": "Remove Map",
+        "IMAGE_MAP_PROPERTIES": "Image Map Properties",
         "INSERT_TOOLTIP": "Insert a tooltip",
         "CONTENT": "Content",
         "TEMPLATE": "Template",
@@ -125,6 +128,7 @@ const en = {
         "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",
@@ -162,6 +166,16 @@ const en = {
         "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",
@@ -348,6 +362,8 @@ const no = {
         "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",
@@ -369,6 +385,7 @@ const no = {
         "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",
@@ -379,10 +396,10 @@ const no = {
         "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",
@@ -406,6 +423,16 @@ const no = {
         "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",
@@ -6265,10 +6292,18 @@ var ProtocolType;
 (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";
-})(ProtocolType || (ProtocolType = {}));
+})(ProtocolType || (ProtocolType = {}));
+var ProtocolTypeName;
+(function (ProtocolTypeName) {
+    ProtocolTypeName["http"] = "http://";
+    ProtocolTypeName["https"] = "https://";
+    ProtocolTypeName["ftp"] = "ftp://";
+    ProtocolTypeName["news"] = "news://";
+    ProtocolTypeName["other"] = "";
+})(ProtocolTypeName || (ProtocolTypeName = {}));
 
 var TargetType;
 (function (TargetType) {
@@ -6276,7 +6311,14 @@ var TargetType;
     TargetType[TargetType["topmost"] = 1] = "topmost";
     TargetType[TargetType["same"] = 2] = "same";
     TargetType[TargetType["parent"] = 3] = "parent";
-})(TargetType || (TargetType = {}));
+})(TargetType || (TargetType = {}));
+var TargetTypeName;
+(function (TargetTypeName) {
+    TargetTypeName["new"] = "_blank";
+    TargetTypeName["topmost"] = "_top";
+    TargetTypeName["same"] = "_self";
+    TargetTypeName["parent"] = "_parent";
+})(TargetTypeName || (TargetTypeName = {}));
 
 class QMSCKEditorRelation {
     constructor() {
@@ -6784,8 +6826,8 @@ class QMSCKEditorLinkComponent extends QMSCKEditorBaseComponent {
         if (this.protocols) {
             this.protocols.push({ id: ProtocolType.http, name: this.LANG.QMSCKEDITOR.PROTOCOL_HTTP });
             this.protocols.push({ id: ProtocolType.https, name: this.LANG.QMSCKEDITOR.PROTOCOL_HTTPS });
-            this.protocols.push({ id: ProtocolType.fpt, name: this.LANG.QMSCKEDITOR.PROTOCOL_FTP });
-            this.protocols.push({ id: ProtocolType.new, name: this.LANG.QMSCKEDITOR.PROTOCOL_NEW });
+            this.protocols.push({ id: ProtocolType.ftp, name: this.LANG.QMSCKEDITOR.PROTOCOL_FTP });
+            this.protocols.push({ id: ProtocolType.news, name: this.LANG.QMSCKEDITOR.PROTOCOL_NEW });
             this.protocols.push({ id: ProtocolType.other, name: this.LANG.QMSCKEDITOR.PROTOCOL_OTHER });
         }
     }
@@ -7003,7 +7045,7 @@ class QMSCKEditorLinkComponent extends QMSCKEditorBaseComponent {
 QMSCKEditorLinkComponent.decorators = [
     { type: Component, args: [{
                 selector: 'qms-ckeditor-link',
-                template: "<div id=\"qmsckeditor_link\" class=\"qmsckeditor qmsckeditor__link__container\">\r\n  <div id=\"qmsckeditor_link_header\">\r\n    <span\r\n      id=\"qmsckeditor_link_header_001\"\r\n      mat-icon-button\r\n      class=\"qmsckeditor button__close\"\r\n      (click)=\"onCloseDialog()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmsckeditor_link_header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor_link_header_001\">\r\n        {{ LANG.QMSCKEDITOR.LINK }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <div id=\"qmsckeditor_link_type\" class=\"row\">\r\n    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3\">\r\n      <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\r\n      <mat-select\r\n        disableOptionCentering\r\n        name=\"linkTypeList\"\r\n        [(ngModel)]=\"selectedLink\"\r\n        (ngModelChange)=\"onSelectedLinkType()\"\r\n      >\r\n        <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\r\n          {{ link.name }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div id=\"qmsckeditor_link_content\">\r\n    <form\r\n      [formGroup]=\"linkFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 0\"\r\n    >\r\n      <div id=\"qmsckeditor_link_url\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_url_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.URL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_url_001\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\r\n              <mat-select\r\n                [(ngModel)]=\"selectedTarget\"\r\n                formControlName=\"targetList\"\r\n                disableOptionCentering\r\n              >\r\n                <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\r\n                  {{ target.name }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_002\" class=\"row\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\r\n              <mat-select\r\n                [(ngModel)]=\"selectedProtocol\"\r\n                formControlName=\"protocolList\"\r\n                disableOptionCentering\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"let protocol of protocols\"\r\n                  [value]=\"protocol.id\"\r\n                >\r\n                  {{ protocol.name }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_003\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\r\n              <input matInput [(ngModel)]=\"url\" formControlName=\"url\" />\r\n              <mat-error\r\n                *ngIf=\"linkFormGroup.get('url').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_url_004\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ADVISORY_TITLE }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"advisoryTitle\"\r\n                formControlName=\"advisoryTitle\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"linkFormGroup.get('advisoryTitle').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div\r\n            id=\"qmsckeditor_link_url_005\"\r\n            class=\"qmsckeditor button__groups row\"\r\n          >\r\n            <div class=\"col-6 pl-3\">\r\n              <button\r\n                class=\"save\"\r\n                mat-flat-button\r\n                (click)=\"eHandbook(false, false)\"\r\n              >\r\n                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n              </button>\r\n            </div>\r\n            <div class=\"col-6 pr-3\">\r\n              <button class=\"save\" mat-flat-button (click)=\"attachment()\">\r\n                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form\r\n      [formGroup]=\"anchorTextFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 1\"\r\n    >\r\n      <div id=\"qmsckeditor_link_anchor_text\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_anchor_text_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.ANCHOR_TEXT_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_anchor_text_001\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n              <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorText\">\r\n                <mat-option\r\n                  *ngFor=\"let editorAnchor of editorAnchors\"\r\n                  [value]=\"editorAnchor.anchorValue\"\r\n                  disableOptionCentering\r\n                >\r\n                  {{ editorAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error\r\n                *ngIf=\"\r\n                  anchorTextFormGroup.get('anchorText').hasError('required')\r\n                \"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form\r\n      [formGroup]=\"emailFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 2\"\r\n    >\r\n      <div id=\"qmsckeditor_link_email\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_email_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmsckeditor_link_email_001\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_ADDRESS }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"emailAddress\"\r\n                formControlName=\"emailAddress\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"emailFormGroup.get('emailAddress').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_email_002\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_SUBJECT }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"emailSubject\"\r\n                formControlName=\"emailSubject\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"emailFormGroup.get('emailSubject').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_email_003\" class=\"row\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_BODY }}</mat-label>\r\n              <textarea\r\n                matInput\r\n                [(ngModel)]=\"emailBody\"\r\n                formControlName=\"emailBody\"\r\n              ></textarea>\r\n              <mat-error\r\n                *ngIf=\"emailFormGroup.get('emailBody').hasError('required')\"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n\r\n    <form\r\n      [formGroup]=\"anchorDocFormGroup\"\r\n      class=\"qmsckeditor link__content height row\"\r\n      *ngIf=\"selectedLink === 3\"\r\n    >\r\n      <div id=\"qmsckeditor_link_anchor_doc\" class=\"col-12 mt-1 pl-3 pr-3\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor_link_email_panel\"\r\n          [expanded]=\"isExpanded\"\r\n          (opened)=\"isExpanded = true\"\r\n          (closed)=\"isExpanded = false\"\r\n        >\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <div\r\n            id=\"qmsckeditor_link_anchor_doc_001\"\r\n            class=\"qmsckeditor button__groups row\"\r\n          >\r\n            <div class=\"col-6 pl-3\">\r\n              <button\r\n                class=\"cancel\"\r\n                mat-flat-button\r\n                (click)=\"eHandbook(true, true)\"\r\n              >\r\n                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_anchor_doc_002\" class=\"row mt-4\">\r\n            <mat-form-field class=\"col-12 pl-3 pr-3\" appearance=\"fill\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.DOCUMENT }}</mat-label>\r\n              <input\r\n                matInput\r\n                [(ngModel)]=\"anchorTitle\"\r\n                formControlName=\"anchorTitle\"\r\n              />\r\n              <mat-error\r\n                *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorTitle').hasError('required')\r\n                \"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n          <div id=\"qmsckeditor_link_anchor_doc_003\" class=\"row mt-2\">\r\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n              <mat-select\r\n                [(ngModel)]=\"anchorByName\"\r\n                formControlName=\"anchorByName\"\r\n                disableOptionCentering\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"let docAnchor of documentAnchors\"\r\n                  [value]=\"docAnchor.anchorValue\"\r\n                >\r\n                  {{ docAnchor.viewValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n              <mat-error\r\n                *ngIf=\"\r\n                  anchorDocFormGroup.get('anchorByName').hasError('required')\r\n                \"\r\n                class=\"mt5\"\r\n              >\r\n              </mat-error>\r\n            </mat-form-field>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </form>\r\n  </div>\r\n\r\n  <div id=\"qmsckeditor_link_footer\" class=\"qmsckeditor button__groups row\">\r\n    <div class=\"col-12 mt-3 pl-3 pr-3\">\r\n      <button\r\n        class=\"save\"\r\n        mat-flat-button\r\n        (click)=\"setLink()\"\r\n        [disabled]=\"disableOkButton()\"\r\n      >\r\n        {{ LANG.QMSCKEDITOR.OK }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                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}"]
             },] }
 ];
@@ -7476,6 +7518,8 @@ CKEditorEventConst.QMSCK_LINK_PLUGIN_MSG = 'QMSCK_LINK_PLUGIN_MSG';
 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';
@@ -7508,6 +7552,8 @@ function getCKEditorConfiguration(itemToolbar) {
                 '|',
                 'linkImage',
                 '|',
+                'imageMap',
+                '|',
                 'qmsBpmn'
             ],
             resizeOptions: [
@@ -7750,80 +7796,6 @@ const CKEditorCommonFunctions = {
     getCKEditorConfiguration
 };
 
-class QMSCKEditorTooltip {
-    constructor() {
-        this.text = '';
-        this.content = '';
-    }
-}
-
-class QMSCKEditorTooltipComponent extends QMSCKEditorBaseComponent {
-    constructor(cdr, translate, dialogRef, data) {
-        super();
-        this.cdr = cdr;
-        this.translate = translate;
-        this.dialogRef = dialogRef;
-        this.data = data;
-        this.tooltipFormGroup = new FormGroup({
-            title: new FormControl('', [Validators.required]),
-            content: new FormControl('', [Validators.required])
-        });
-        this.tooltip = { text: data.text, content: data.content };
-        this.editor = data.ckEditor;
-    }
-    ngOnInit() {
-        this.translate.getLanguageSubject$.pipe(takeUntil(this.ngUnsubcribe)).subscribe((res) => {
-            if (res) {
-                this.LANG = this.translate.getObjectLang(res);
-            }
-        });
-        this.editorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(',heading,|,fontsize,fontfamily,fontColor,fontBackgroundColor,|,bold,italic,underline,strikethrough,|,alignment,|,bulletedList,numberedList,|,outdent,indent,|,subscript,superscript,|,undo,redo,|,specialCharacters,blockQuote,insertTable,|,link,anchor,|,timestamp,|,removeformat');
-    }
-    ngAfterViewChecked() {
-        this.cdr.detectChanges();
-    }
-    onCloseDialog() {
-        this.dialogRef.close();
-    }
-    getOutputContent(content) {
-        this.tooltip.content = content;
-    }
-    onChanged({ editor }) {
-        this.tooltip.content = editor.getData();
-    }
-    onBlur({ editor }) {
-        this.tooltip.content = editor.getData();
-    }
-    onReady(editor) {
-        if (this.tooltip.text) {
-            editor.setData(this.tooltip.text);
-        }
-        editor.ui.getEditableElement().parentElement.insertBefore(editor.ui.view.toolbar.element, editor.ui.getEditableElement());
-    }
-    saveTooltip() {
-        const tooltip = new QMSCKEditorTooltip();
-        tooltip.content = this.tooltip.content;
-        tooltip.text = this.tooltip.text;
-        this.dialogRef.close(tooltip);
-    }
-    cancelTooltip() {
-        this.dialogRef.close();
-    }
-}
-QMSCKEditorTooltipComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-qmsck-tooltip',
-                template: "<div\r\n  id=\"qmsckeditor-tooltip\"\r\n  class=\"qmsckeditor qmsckeditor__tooltip__container\"\r\n>\r\n  <div id=\"qmsckeditor-tooltip-header\">\r\n    <span\r\n      id=\"qmsckeditor-tooltip-header_001\"\r\n      mat-icon-button\r\n      class=\"qmsckeditor button__close\"\r\n      (click)=\"onCloseDialog()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmsckeditor-tooltip-header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor-tooltip_002_001\">\r\n        {{ LANG.QMSCKEDITOR.INSERT_TOOLTIP }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"tooltipFormGroup\">\r\n    <div\r\n      id=\"qmsckeditor-tooltip-content\"\r\n      class=\"qmsckeditor tooltip-content height\"\r\n    >\r\n      <div id=\"qmsckeditor-tooltip-content_001\" class=\"col-12 mt-1 pl-2 pr-2\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor-tooltip-panel\"\r\n          [expanded]=\"true\"\r\n          (opened)=\"(true)\"\r\n          (closed)=\"(false)\"\r\n        >\r\n          <div id=\"qmsckeditor-tooltip-panel_001\">\r\n            <div id=\"qmsckeditor-tooltip-panel_001_001\">\r\n              <mat-form-field class=\"col-12 pl-0 pr-0\" appearance=\"fill\">\r\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\r\n                <input\r\n                  matInput\r\n                  [(ngModel)]=\"tooltip.text\"\r\n                  formControlName=\"title\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n            <div id=\"qmsckeditor-tooltip-panel_001_002\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.CONTENT }}</mat-label>\r\n              <div class=\"qmsckeditor_container col-12 pl-0 pr-0\">\r\n                <ckeditor\r\n                  class=\"qms-ckeditor\"\r\n                  [(editor)]=\"editor\"\r\n                  [config]=\"editorConfig\"\r\n                  (ready)=\"onReady($event)\"\r\n                  [(ngModel)]=\"tooltip.content\"\r\n                  (change)=\"onChanged($event)\"\r\n                  (blur)=\"onBlur($event)\"\r\n                  formControlName=\"content\"\r\n                >\r\n                </ckeditor>\r\n              </div>\r\n            </div>\r\n            <div\r\n              id=\"qmsckeditor-tooltip-panel_001_003\"\r\n              class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4\"\r\n            >\r\n              <div class=\"col-6 pr-0\">\r\n                <button\r\n                  class=\"save\"\r\n                  mat-flat-button\r\n                  (click)=\"saveTooltip()\"\r\n                  [disabled]=\"tooltipFormGroup.invalid\"\r\n                >\r\n                  {{ LANG.QMSCKEDITOR.SAVE }}\r\n                </button>\r\n              </div>\r\n              <div class=\"col-6 pl-0\">\r\n                <button\r\n                  class=\"cancel\"\r\n                  mat-flat-button\r\n                  (click)=\"cancelTooltip()\"\r\n                >\r\n                  {{ LANG.QMSCKEDITOR.CANCEL }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>\r\n",
-                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:470px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.qmsckeditor__tooltip__container .mat-form-field{width:100%}.qmsckeditor__tooltip__container textarea.mat-input-element{min-height:150px}"]
-            },] }
-];
-QMSCKEditorTooltipComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: TranslateLibraryService },
-    { type: MatDialogRef },
-    { type: QMSCKEditorTooltip, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
-];
-
 class FlowChartConst {
 }
 FlowChartConst.EXIST_DATA = 'IS_LINKED_DATA';
@@ -11703,165 +11675,2738 @@ QMSCKEditorBpmnComponent.propDecorators = {
     onMessage: [{ type: HostListener, args: ['window:message', ['$event'],] }]
 };
 
-class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
-    /**
-     * Constructor
-     */
-    constructor(dialog, globalService, qmsCKEditorFullscreenComponent, renderer, elRef) {
-        super();
-        this.dialog = dialog;
-        this.globalService = globalService;
-        this.qmsCKEditorFullscreenComponent = qmsCKEditorFullscreenComponent;
-        this.renderer = renderer;
-        this.elRef = elRef;
-        this.required = false;
-        this.qmsckContentOutput = new EventEmitter();
-        this.ckEditorEventConst = CKEditorEventConst;
-    }
-    onMessage(event) {
-        switch (event.data.eventName) {
-            case this.ckEditorEventConst.QMSCK_FULLSCREEN_PLUGIN_MSG:
-                this.fullscreenEventHandling();
-                break;
-            case this.ckEditorEventConst.QMSCK_TEMPLATE_PLUGIN_MSG:
-                this.templateEventHandling();
-                break;
-            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;
-        }
-    }
-    ngOnInit() {
-        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();
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    ngAfterViewInit() {
-        if (this.isDisabled) {
-            this.renderer.addClass(this.elRef.nativeElement, 'ck-disabled');
-        }
+class QMSCKEditorImageMap {
+    constructor() {
+        this.name = '';
+        this.imageUrl = '';
+        this.areas = [];
+        this.entityId = '';
+        this.editorContent = '';
+        this.imageHeight = 0;
+        this.imageWidth = 0;
+        this.linkJavaScriptLinksAllowed = true;
     }
-    isEnabledCustomizingTimestampFormat() {
-        const pattern = /(timestamp)/gmi;
-        return !!this.qmsckData.timestampFormat
-            && this.qmsckData.timestampFormat !== ''
-            && !!this.qmsckPlugin.itemToolbar
-            && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
+}
+class QMSCKEditorImageArea {
+    constructor() {
+        this.shape = '';
+        this.coords = '';
+        this.alt = '';
+        this.href = '';
+        this.target = '';
     }
-    customizeTimestampFormat() {
-        const timestampConfig = {
-            timestampConfig: {
-                datetimeFormat: this.qmsckData.timestampFormat
+}
+
+var ImageModeName;
+(function (ImageModeName) {
+    ImageModeName["Pointer"] = "pointer";
+    ImageModeName["Rectangle"] = "rect";
+    ImageModeName["Circle"] = "circle";
+    ImageModeName["Polygon"] = "poly";
+    ImageModeName["Remove"] = "remove";
+})(ImageModeName || (ImageModeName = {}));
+
+class 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 */
+class QMSCKEditorImageMapLib {
+    constructor(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);
-    }
-    isEnabledCustomizingMathtypeService() {
-        const pattern = /(MathType)|(ChemType)/gmi;
-        return !!this.qmsckData.mathtypeServiceUrl
-            && this.qmsckData.mathtypeServiceUrl !== ''
-            && !!this.qmsckPlugin.itemToolbar
-            && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
-    }
-    customizeMathTypeService() {
-        const mathTypeConfig = {
-            mathTypeParameters: {
-                serviceProviderProperties: {
-                    URI: this.qmsckData.mathtypeServiceUrl,
-                    server: 'aspx'
+            //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);
-    }
-    onChanged({ editor }) {
-        this.qmsckContentOutput.emit(this.qmsckContentInput);
-    }
-    onBlur({ editor }) {
-        this.qmsckContentOutput.emit(this.qmsckContentInput);
-    }
-    validate(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
-     */
-    onReady(editor) {
-        this.editorInstance = editor;
-        if (this.qmsckContentInput) {
-            editor.setData(this.qmsckContentInput);
-        }
-        this.initEditor(editor);
-    }
-    initEditor(editor) {
-        editor.ui
-            .getEditableElement()
-            .parentElement.insertBefore(editor.ui.view.toolbar.element, editor.ui.getEditableElement());
-        editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
-            return new UploadAdapter(loader);
-        };
-        // Apped Wordcount to CKeditor
-        editor.plugins.get('WordCount').on('update', (evt, stats) => {
-            // Prints the current content statistics.
-            const wordsBox = document.querySelector('.wordcount-content');
-            wordsBox.textContent = `Words: ${stats.words}  / Characters: ${stats.characters}`;
-        });
-    }
-    /**
-     * Full screen - Restore down
-     */
-    fullscreenEventHandling() {
-        const 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);
             }
-        }
-    }
-    /**
-     * Add template - Load template
-     */
-    templateEventHandling() {
-        const data = new QMSCKEditorTemplate();
-        data.id = 0;
-        data.content = this.qmsckContentInput;
-        data.edit = false;
-        const dialogTemplate = this.dialog.open(QMSCKEditorTemplateComponent, {
+        };
+        /**
+        *	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++) {
+                const area = this.areas[i];
+                if (area && area.lastInput && area.shape) {
+                    const 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
+            const 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) {
+            const 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();
+                const 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
+        const navigator = window.navigator;
+        const userAgent = window.navigator.userAgent;
+        this.isMSIE = (navigator.appName == "Microsoft Internet Explorer");
+        this.isSafari = userAgent.indexOf('Safari') != -1;
+        this.setup(options);
+    }
+}
+/**
+    *	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 (control) => {
+        const invalid = regex.test(control.value);
+        return invalid ? { invalidURL: { value: 'control.value' } } : null;
+    };
+}
+
+class QMSCKEditorImageMapComponent extends QMSCKEditorBaseComponent {
+    constructor(renderer, cdr, dialog, translate, linkService, dialogRef, data, iconRegistry, sanitizer) {
+        super();
+        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 = LinkType.url;
+        this.selectedTarget = TargetTypeName.new;
+        this.selectedProtocol = 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);
+    }
+    initDefaultValues() {
+        this.selectedLinkType = LinkType.url;
+        this.selectedTarget = TargetTypeName.new;
+        this.selectedProtocol = ProtocolTypeName.http;
+        this.url = '';
+        this.processedUrl = '';
+        this.advisoryTitle = '';
+        this.anchorText = '';
+    }
+    initSvgIcons(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));
+    }
+    initFormControl() {
+        const valiationControls = {
+            targetList: new FormControl(),
+            protocolList: new FormControl(),
+            anchorTextList: new FormControl(),
+            modeList: new FormControl(),
+            zoomList: new FormControl(),
+            linkTypeList: new FormControl()
+        };
+        if (this.imageMapData.linkJavaScriptLinksAllowed == true) {
+            valiationControls['url'] = new FormControl('', [Validators.required]);
+        }
+        else {
+            valiationControls['url'] = new FormControl('', [Validators.required, invalidURLValidator(this.javascriptLinkRegex)]);
+        }
+        this.imageMapFormGroup = new FormGroup(valiationControls);
+    }
+    initLinkType() {
+        if (this.linkTypes) {
+            this.linkTypes.push({ id: LinkType.url, name: this.LANG.QMSCKEDITOR.LINK_URL });
+            this.linkTypes.push({
+                id: LinkType.anchorText,
+                name: this.LANG.QMSCKEDITOR.LINK_ANCHOR_IN_TEXT
+            });
+        }
+    }
+    initTarget() {
+        if (this.targets) {
+            this.targets.push({ id: TargetTypeName.new, name: this.LANG.QMSCKEDITOR.TARTGET_NEW });
+            this.targets.push({ id: TargetTypeName.same, name: this.LANG.QMSCKEDITOR.TARGET_SAME });
+        }
+    }
+    initProtocol() {
+        if (this.protocols) {
+            this.protocols.push({ id: ProtocolTypeName.http, name: this.LANG.QMSCKEDITOR.PROTOCOL_HTTP });
+            this.protocols.push({ id: ProtocolTypeName.https, name: this.LANG.QMSCKEDITOR.PROTOCOL_HTTPS });
+            this.protocols.push({ id: ProtocolTypeName.ftp, name: this.LANG.QMSCKEDITOR.PROTOCOL_FTP });
+            this.protocols.push({ id: ProtocolTypeName.news, name: this.LANG.QMSCKEDITOR.PROTOCOL_NEW });
+            this.protocols.push({ id: ProtocolTypeName.other, name: this.LANG.QMSCKEDITOR.PROTOCOL_OTHER });
+        }
+    }
+    initModes() {
+        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" });
+        }
+    }
+    initZoomTypes() {
+        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%" });
+        }
+    }
+    initAnchor() {
+        this.anchors = [];
+        this.anchors = [{ value: 0, viewValue: '', anchorValue: LinkAnchor.Blank }];
+    }
+    ngOnInit() {
+        this.translate.getLanguageSubject$.pipe(takeUntil(this.ngUnsubcribe)).subscribe((res) => {
+            if (res) {
+                this.LANG = this.translate.getObjectLang(res);
+            }
+        });
+        this.initLinkType();
+        this.initTarget();
+        this.initProtocol();
+        this.initModes();
+        this.initZoomTypes();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this.imageListeners && this.imageListeners.length > 0) {
+            this.imageListeners.forEach(listener => {
+                listener();
+            });
+        }
+    }
+    onImageLoad() {
+        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);
+        }
+    }
+    ngAfterViewInit() {
+        if (this.myImageRef) {
+            this.imageListeners.push(this.renderer.listen(this.myImageRef.nativeElement, 'load', () => {
+                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': ''
+            }
+        });
+    }
+    parseLinkUrl(url, defaultProtocolName) {
+        const 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 = ProtocolTypeName.http;
+            this.processedUrl = '';
+            this.url = this.processedUrl;
+        }
+        else {
+            this.processedUrl = url;
+            this.url = this.processedUrl;
+            if (!!this.selectedProtocol) {
+                this.selectedProtocol = defaultProtocolName || ProtocolTypeName.http;
+            }
+        }
+    }
+    onSelectArea(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 = LinkType.anchorText;
+            }
+            else {
+                this.selectedLinkType = LinkType.url;
+                this.parseLinkUrl(area.ahref);
+            }
+            this.selectedTarget = area.atarget;
+            this.advisoryTitle = area.aalt;
+            this.cdr.detectChanges();
+        }
+    }
+    onRemoveArea() {
+        this.currentAreaId = -1;
+        this.showImageMapInformation = false;
+    }
+    removeMap() {
+        this.currentAreaId = -1;
+        this.showImageMapInformation = false;
+        this.myImageMap.removeAllAreas();
+    }
+    onStatusMessage(text) {
+        if (this.myStatusRef) {
+            this.myStatusRef.nativeElement.innerHTML = text || '';
+        }
+    }
+    onUrlKeyup() {
+        this.isUrlProcessing = true;
+        if (this.url != this.processedUrl) {
+            this.parseLinkUrl(this.url);
+            this.updateAreaValues();
+        }
+        this.isUrlProcessing = false;
+    }
+    onUrlChange() {
+        if (!this.isUrlProcessing) {
+            this.onUrlKeyup();
+        }
+    }
+    onAnchorTextChange() {
+        this.updateAreaValues();
+    }
+    onProtocolChange() {
+        this.updateAreaValues();
+    }
+    onTargetChange() {
+        this.updateAreaValues();
+    }
+    onAddArea(id) {
+        this.currentAreaId = id;
+        this.showImageMapInformation = true;
+        this.initDefaultValues();
+        this.updateAreaValues();
+    }
+    updateAreaValues() {
+        if (this.currentAreaId > -1) {
+            var ahref = this.buildUrlWithProtocol();
+            if (this.selectedLinkType == LinkType.anchorText) {
+                this.myImageMap.areas[this.currentAreaId].atarget = TargetTypeName.same;
+                this.myImageMap.areas[this.currentAreaId].aalt = this.anchorText;
+            }
+            else {
+                this.myImageMap.areas[this.currentAreaId].atarget = this.selectedTarget || TargetTypeName.new;
+                this.myImageMap.areas[this.currentAreaId].aalt = this.advisoryTitle;
+            }
+            this.myImageMap.areas[this.currentAreaId].ahref = ahref;
+        }
+    }
+    buildUrlWithProtocol() {
+        if (this.selectedLinkType == LinkType.anchorText) {
+            return '#' + (this.anchorText || '');
+        }
+        if (!!this.processedUrl) {
+            return this.selectedProtocol + this.processedUrl;
+        }
+        return '';
+    }
+    ngAfterViewChecked() {
+        this.cdr.detectChanges();
+    }
+    onCloseDialog() {
+        this.dialogRef.close();
+    }
+    onModeChange(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';
+        }
+    }
+    onZoomChange() {
+        this.setImageSize();
+        if (this.myImageMap) {
+            this.myImageMap.scaleAllAreas(this.selectedZoom);
+        }
+    }
+    onLinkTypeChange() {
+        if (this.selectedLinkType === LinkType.anchorText) {
+            this.getEditorAnchor();
+        }
+        this.updateAreaValues();
+    }
+    getEditorAnchor() {
+        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;
+    }
+    setImageSize() {
+        if (this.myImageRef) {
+            const width = this.naturalImageWidth * this.selectedZoom;
+            const 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';
+        }
+    }
+    eHandbook(isOnlyDocument, isAnchorDocument) {
+        const data = new QMSCKEditorRelation();
+        data.isOnlyDocument = isOnlyDocument;
+        data.isEnableFolder = !isOnlyDocument;
+        const dialogTemplate = this.dialog.open(QMSCKEditorRelatedComponent, {
+            width: '650px',
+            height: '650px',
+            data,
+            disableClose: true
+        });
+        dialogTemplate
+            .afterClosed()
+            .pipe(takeUntil(this.ngUnsubcribe))
+            .subscribe((result) => {
+            if (result) {
+                if (isAnchorDocument) {
+                    this.documentId = result.id;
+                    //this.anchorTitle = `${result.title}(${result.id})`;
+                    this.getAnchorDocument(result.id);
+                }
+                else {
+                    this.parseLinkUrl(result.url);
+                    this.selectedProtocol = ProtocolTypeName.other;
+                    if (!this.advisoryTitle) {
+                        this.advisoryTitle = result.title;
+                    }
+                }
+                this.updateAreaValues();
+            }
+        });
+    }
+    getAnchorDocument(documentId) {
+        this.linkService
+            .getAnchorDocumentList(documentId)
+            .pipe(takeUntil(this.ngUnsubcribe))
+            .subscribe((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;
+            }
+        });
+    }
+    setAnchorDocument(anchorDocument) {
+        this.initAnchor();
+        let id = 3;
+        if (anchorDocument) {
+            anchorDocument.forEach((e) => {
+                const div = document.createElement('div');
+                div.innerHTML = e.richText;
+                const domContent = div;
+                const aTags = domContent.getElementsByTagName('a');
+                if (aTags) {
+                    // tslint:disable-next-line:prefer-for-of
+                    for (let i = 0; i < aTags.length; i++) {
+                        const tag = aTags[i];
+                        if (tag.name) {
+                            const index = this.anchors.findIndex((x) => {
+                                return x.anchorValue === tag.name;
+                            });
+                            if (index < 0) {
+                                this.anchors.push({
+                                    value: id,
+                                    viewValue: tag.name,
+                                    anchorValue: tag.name
+                                });
+                                id += 1;
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        // 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
+        // });
+    }
+    attachment() {
+        const data = new QMSCKEditorParamter();
+        data.module = this.imageMapData.module;
+        data.entityId = this.imageMapData.entityId;
+        const dialogTemplate = this.dialog.open(LinkAttachmentComponent, {
+            width: '650px',
+            height: '650px',
+            data,
+            disableClose: true
+        });
+        dialogTemplate
+            .afterClosed()
+            .pipe(takeUntil(this.ngUnsubcribe))
+            .subscribe((result) => {
+            if (result) {
+                this.parseLinkUrl(result.url);
+                this.selectedProtocol = ProtocolTypeName.other;
+                if (!this.advisoryTitle) {
+                    this.advisoryTitle = result.title;
+                }
+                this.updateAreaValues();
+            }
+        });
+    }
+    save() {
+        const data = this.myImageMap.getMapJson();
+        data.imageHeight = this.naturalImageHeight;
+        data.imageWidth = this.naturalImageWidth;
+        this.dialogRef.close(data);
+    }
+    cancel() {
+        this.dialogRef.close();
+    }
+}
+QMSCKEditorImageMapComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-qmsck-imagemap',
+                template: "<div id=\"qmsckeditor-imagemap\" class=\"qmsckeditor qmsckeditor__imagemap__container\">\r\n    <div id=\"qmsckeditor-imagemap-header\">\r\n        <span id=\"qmsckeditor-imagemap-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\r\n            (click)=\"onCloseDialog()\">\r\n            <mat-icon>close</mat-icon>\r\n        </span>\r\n        <div id=\"qmsckeditor-imagemap-header_002\" mat-dialog-content>\r\n            <h2 id=\"qmsckeditor-imagemap_002_001\">\r\n                {{ LANG.QMSCKEDITOR.IMAGE_MAP_PROPERTIES }}\r\n            </h2>\r\n        </div>\r\n    </div>\r\n    <div id=\"qmsckeditor-imagemap-content\">\r\n        <div id=\"qmsckeditor-imagemap-content_001\" class=\"col-12 mt-1 pl-2 pr-2\">\r\n            <mat-expansion-panel id=\"qmsckeditor-imagemap-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\r\n                <div id=\"qmsckeditor-imagemap-panel_001\">\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_001\" class=\"qmsckeditor__imagemap__information\">\r\n                        <form [formGroup]=\"imageMapFormGroup\">\r\n                            <div class=\"row\">\r\n                                <div class=\"col-9\">\r\n                                    <mat-button-toggle-group [(ngModel)]=\"selectedMode\" formControlName=\"modeList\"\r\n                                        (change)=\"onModeChange($event)\">\r\n                                        <mat-button-toggle *ngFor=\"let mode of modes\" [value]=\"mode.id\"\r\n                                            [matTooltip]=\"mode.name\">\r\n                                            <mat-icon color=\"red\" [svgIcon]=\"mode.icon\" aria-hidden=\"true\">\r\n                                            </mat-icon>\r\n                                        </mat-button-toggle>\r\n                                    </mat-button-toggle-group>\r\n                                    <span style=\"margin-left: 15px;\" #myStatus></span>\r\n                                </div>\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ZOOM }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedZoom\" formControlName=\"zoomList\"\r\n                                            (ngModelChange)=\"onZoomChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let zoomType of zoomTypes\" [value]=\"zoomType.id\">\r\n                                                {{ zoomType.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedLinkType\" formControlName=\"linkTypeList\"\r\n                                            (ngModelChange)=\"onLinkTypeChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\r\n                                                {{ link.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-3\" *ngIf=\"selectedLinkType === 0\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\"\r\n                                            (ngModelChange)=\"onTargetChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\r\n                                                {{ target.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\r\n                                *ngIf=\"selectedLinkType === 1\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorTextList\"\r\n                                            (ngModelChange)=\"onAnchorTextChange()\">\r\n                                            <mat-option *ngFor=\"let editorAnchor of editorAnchors\"\r\n                                                [value]=\"editorAnchor.anchorValue\" disableOptionCentering>\r\n                                                {{ editorAnchor.viewValue }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\r\n                                *ngIf=\"selectedLinkType === 0\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\"\r\n                                            (ngModelChange)=\"onProtocolChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let protocol of protocols\" [value]=\"protocol.id\">\r\n                                                {{ protocol.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-5\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\r\n                                        <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\"\r\n                                            (ngModelChange)=\"onUrlChange()\" (keyup)=\"onUrlKeyup()\" />\r\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('required')\">{{\r\n                                            LANG.QMSCKEDITOR.REQUIRED_URL }}\r\n                                        </mat-error>\r\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('invalidURL')\">{{\r\n                                            LANG.QMSCKEDITOR.INVALID_URL }}</mat-error>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-4\">\r\n                                    <div class=\"row button__groups\">\r\n                                        <div class=\"col-6\">\r\n                                            <button class=\"save\" mat-stroked-button (click)=\"attachment()\">\r\n                                                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\r\n                                            </button>\r\n                                        </div>\r\n                                        <div class=\"col-6\">\r\n                                            <button class=\"save\" mat-stroked-button (click)=\"eHandbook(false, false)\">\r\n                                                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n                                            </button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </form>\r\n                    </div>\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_002\" class=\"qmsckeditor__imagemap__map\">\r\n                        <img #myImage [src]=\"imageMapData.imageUrl\">\r\n                    </div>\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_003\" class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4\">\r\n                        <div class=\"col-4 pr-0\">\r\n                            <button class=\"save\" mat-flat-button (click)=\"removeMap()\">\r\n                                {{ LANG.QMSCKEDITOR.REMOVE_MAP }}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"col-4 pr-0\">\r\n                            <button class=\"save\" mat-flat-button (click)=\"save()\">\r\n                                {{ LANG.QMSCKEDITOR.SAVE }}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"col-4 pl-0\">\r\n                            <button class=\"cancel\" mat-flat-button (click)=\"cancel()\">\r\n                                {{ LANG.QMSCKEDITOR.CANCEL }}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </mat-expansion-panel>\r\n        </div>\r\n    </div>\r\n</div>",
+                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:470px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.qmsckeditor__imagemap__container .mat-form-field{width:100%}.qmsckeditor__imagemap__container .qmsckeditor__imagemap__information{position:relative}.qmsckeditor__imagemap__container .qmsckeditor__imagemap__map{overflow:auto;width:800px;min-height:371px;position:relative;max-height:460px}.qmsckeditor__imagemap__container .mat-button-toggle-checked{border:1px solid #000!important}.qmsckeditor__imagemap__container .hidden{visibility:hidden}"]
+            },] }
+];
+QMSCKEditorImageMapComponent.ctorParameters = () => [
+    { type: Renderer2 },
+    { type: ChangeDetectorRef },
+    { type: MatDialog },
+    { type: TranslateLibraryService },
+    { type: QMSCKEditorLinkService },
+    { type: MatDialogRef },
+    { type: QMSCKEditorImageMap, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] },
+    { type: MatIconRegistry },
+    { type: DomSanitizer }
+];
+QMSCKEditorImageMapComponent.propDecorators = {
+    myImageRef: [{ type: ViewChild, args: ['myImage',] }],
+    myStatusRef: [{ type: ViewChild, args: ['myStatus',] }]
+};
+
+class QMSCKEditorTooltip {
+    constructor() {
+        this.text = '';
+        this.content = '';
+    }
+}
+
+class QMSCKEditorTooltipComponent extends QMSCKEditorBaseComponent {
+    constructor(cdr, translate, dialogRef, data) {
+        super();
+        this.cdr = cdr;
+        this.translate = translate;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.tooltipFormGroup = new FormGroup({
+            title: new FormControl('', [Validators.required]),
+            content: new FormControl('', [Validators.required])
+        });
+        this.tooltip = { text: data.text, content: data.content };
+        this.editor = data.ckEditor;
+    }
+    ngOnInit() {
+        this.translate.getLanguageSubject$.pipe(takeUntil(this.ngUnsubcribe)).subscribe((res) => {
+            if (res) {
+                this.LANG = this.translate.getObjectLang(res);
+            }
+        });
+        this.editorConfig = CKEditorCommonFunctions.getCKEditorConfiguration(',heading,|,fontsize,fontfamily,fontColor,fontBackgroundColor,|,bold,italic,underline,strikethrough,|,alignment,|,bulletedList,numberedList,|,outdent,indent,|,subscript,superscript,|,undo,redo,|,specialCharacters,blockQuote,insertTable,|,link,anchor,|,timestamp,|,removeformat');
+    }
+    ngAfterViewChecked() {
+        this.cdr.detectChanges();
+    }
+    onCloseDialog() {
+        this.dialogRef.close();
+    }
+    getOutputContent(content) {
+        this.tooltip.content = content;
+    }
+    onChanged({ editor }) {
+        this.tooltip.content = editor.getData();
+    }
+    onBlur({ editor }) {
+        this.tooltip.content = editor.getData();
+    }
+    onReady(editor) {
+        if (this.tooltip.text) {
+            editor.setData(this.tooltip.text);
+        }
+        editor.ui.getEditableElement().parentElement.insertBefore(editor.ui.view.toolbar.element, editor.ui.getEditableElement());
+    }
+    saveTooltip() {
+        const tooltip = new QMSCKEditorTooltip();
+        tooltip.content = this.tooltip.content;
+        tooltip.text = this.tooltip.text;
+        this.dialogRef.close(tooltip);
+    }
+    cancelTooltip() {
+        this.dialogRef.close();
+    }
+}
+QMSCKEditorTooltipComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-qmsck-tooltip',
+                template: "<div\r\n  id=\"qmsckeditor-tooltip\"\r\n  class=\"qmsckeditor qmsckeditor__tooltip__container\"\r\n>\r\n  <div id=\"qmsckeditor-tooltip-header\">\r\n    <span\r\n      id=\"qmsckeditor-tooltip-header_001\"\r\n      mat-icon-button\r\n      class=\"qmsckeditor button__close\"\r\n      (click)=\"onCloseDialog()\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmsckeditor-tooltip-header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor-tooltip_002_001\">\r\n        {{ LANG.QMSCKEDITOR.INSERT_TOOLTIP }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"tooltipFormGroup\">\r\n    <div\r\n      id=\"qmsckeditor-tooltip-content\"\r\n      class=\"qmsckeditor tooltip-content height\"\r\n    >\r\n      <div id=\"qmsckeditor-tooltip-content_001\" class=\"col-12 mt-1 pl-2 pr-2\">\r\n        <mat-expansion-panel\r\n          id=\"qmsckeditor-tooltip-panel\"\r\n          [expanded]=\"true\"\r\n          (opened)=\"(true)\"\r\n          (closed)=\"(false)\"\r\n        >\r\n          <div id=\"qmsckeditor-tooltip-panel_001\">\r\n            <div id=\"qmsckeditor-tooltip-panel_001_001\">\r\n              <mat-form-field class=\"col-12 pl-0 pr-0\" appearance=\"fill\">\r\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\r\n                <input\r\n                  matInput\r\n                  [(ngModel)]=\"tooltip.text\"\r\n                  formControlName=\"title\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n            <div id=\"qmsckeditor-tooltip-panel_001_002\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.CONTENT }}</mat-label>\r\n              <div class=\"qmsckeditor_container col-12 pl-0 pr-0\">\r\n                <ckeditor\r\n                  class=\"qms-ckeditor\"\r\n                  [(editor)]=\"editor\"\r\n                  [config]=\"editorConfig\"\r\n                  (ready)=\"onReady($event)\"\r\n                  [(ngModel)]=\"tooltip.content\"\r\n                  (change)=\"onChanged($event)\"\r\n                  (blur)=\"onBlur($event)\"\r\n                  formControlName=\"content\"\r\n                >\r\n                </ckeditor>\r\n              </div>\r\n            </div>\r\n            <div\r\n              id=\"qmsckeditor-tooltip-panel_001_003\"\r\n              class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4\"\r\n            >\r\n              <div class=\"col-6 pr-0\">\r\n                <button\r\n                  class=\"save\"\r\n                  mat-flat-button\r\n                  (click)=\"saveTooltip()\"\r\n                  [disabled]=\"tooltipFormGroup.invalid\"\r\n                >\r\n                  {{ LANG.QMSCKEDITOR.SAVE }}\r\n                </button>\r\n              </div>\r\n              <div class=\"col-6 pl-0\">\r\n                <button\r\n                  class=\"cancel\"\r\n                  mat-flat-button\r\n                  (click)=\"cancelTooltip()\"\r\n                >\r\n                  {{ LANG.QMSCKEDITOR.CANCEL }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>\r\n",
+                styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:470px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.qmsckeditor__tooltip__container .mat-form-field{width:100%}.qmsckeditor__tooltip__container textarea.mat-input-element{min-height:150px}"]
+            },] }
+];
+QMSCKEditorTooltipComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: TranslateLibraryService },
+    { type: MatDialogRef },
+    { type: QMSCKEditorTooltip, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
+
+class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
+    /**
+     * Constructor
+     */
+    constructor(dialog, globalService, qmsCKEditorFullscreenComponent, renderer, elRef) {
+        super();
+        this.dialog = dialog;
+        this.globalService = globalService;
+        this.qmsCKEditorFullscreenComponent = qmsCKEditorFullscreenComponent;
+        this.renderer = renderer;
+        this.elRef = elRef;
+        this.required = false;
+        this.qmsckContentOutput = new EventEmitter();
+        this.ckEditorEventConst = CKEditorEventConst;
+    }
+    onMessage(event) {
+        switch (event.data.eventName) {
+            case this.ckEditorEventConst.QMSCK_FULLSCREEN_PLUGIN_MSG:
+                this.fullscreenEventHandling();
+                break;
+            case this.ckEditorEventConst.QMSCK_TEMPLATE_PLUGIN_MSG:
+                this.templateEventHandling();
+                break;
+            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;
+        }
+    }
+    ngOnInit() {
+        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();
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    ngAfterViewInit() {
+        if (this.isDisabled) {
+            this.renderer.addClass(this.elRef.nativeElement, 'ck-disabled');
+        }
+    }
+    isEnabledCustomizingTimestampFormat() {
+        const pattern = /(timestamp)/gmi;
+        return !!this.qmsckData.timestampFormat
+            && this.qmsckData.timestampFormat !== ''
+            && !!this.qmsckPlugin.itemToolbar
+            && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
+    }
+    customizeTimestampFormat() {
+        const timestampConfig = {
+            timestampConfig: {
+                datetimeFormat: this.qmsckData.timestampFormat
+            }
+        };
+        this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, timestampConfig);
+    }
+    isEnabledCustomizingMathtypeService() {
+        const pattern = /(MathType)|(ChemType)/gmi;
+        return !!this.qmsckData.mathtypeServiceUrl
+            && this.qmsckData.mathtypeServiceUrl !== ''
+            && !!this.qmsckPlugin.itemToolbar
+            && this.qmsckPlugin.itemToolbar.search(pattern) > -1;
+    }
+    customizeMathTypeService() {
+        const mathTypeConfig = {
+            mathTypeParameters: {
+                serviceProviderProperties: {
+                    URI: this.qmsckData.mathtypeServiceUrl,
+                    server: 'aspx'
+                }
+            }
+        };
+        this.ckEditor.defaultConfig = Object.assign(this.ckEditor.defaultConfig || {}, mathTypeConfig);
+    }
+    onChanged({ editor }) {
+        this.qmsckContentOutput.emit(this.qmsckContentInput);
+    }
+    onBlur({ editor }) {
+        this.qmsckContentOutput.emit(this.qmsckContentInput);
+    }
+    validate(c) {
+        if (!this.required) {
+            return null;
+        }
+        return (this.qmsckContentInput && !this.required) ? null : {
+            type: {
+                valid: false,
+                actual: c.value
+            }
+        };
+    }
+    /**
+     * onReady
+     */
+    onReady(editor) {
+        this.editorInstance = editor;
+        if (this.qmsckContentInput) {
+            editor.setData(this.qmsckContentInput);
+        }
+        this.initEditor(editor);
+    }
+    initEditor(editor) {
+        editor.ui
+            .getEditableElement()
+            .parentElement.insertBefore(editor.ui.view.toolbar.element, editor.ui.getEditableElement());
+        editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
+            return new UploadAdapter(loader);
+        };
+        // Apped Wordcount to CKeditor
+        editor.plugins.get('WordCount').on('update', (evt, stats) => {
+            // Prints the current content statistics.
+            const wordsBox = document.querySelector('.wordcount-content');
+            wordsBox.textContent = `Words: ${stats.words}  / Characters: ${stats.characters}`;
+        });
+    }
+    /**
+     * Full screen - Restore down
+     */
+    fullscreenEventHandling() {
+        const ck = window.document.getElementById('qmsckeditor');
+        if (ck) {
+            if (!ck.classList.contains('qmsckeditor__fullscreen')) {
+                this.qmsCKEditorFullscreenComponent.showFullScreen();
+            }
+            else {
+                this.qmsCKEditorFullscreenComponent.hideFullScreen();
+            }
+        }
+    }
+    /**
+     * Add template - Load template
+     */
+    templateEventHandling() {
+        const data = new QMSCKEditorTemplate();
+        data.id = 0;
+        data.content = this.qmsckContentInput;
+        data.edit = false;
+        const dialogTemplate = this.dialog.open(QMSCKEditorTemplateComponent, {
             width: '650px',
             height: '520px',
             data,
@@ -11952,8 +14497,38 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
         });
     }
     /**
-     * Business Process Model and Notation
-     */
+   * ImageMap mapping
+   */
+    imageMapEventHandling(value) {
+        let 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;
+        const dialogTemplate = this.dialog.open(QMSCKEditorImageMapComponent, {
+            data,
+            disableClose: true
+        });
+        dialogTemplate
+            .afterClosed()
+            .pipe(takeUntil(this.ngUnsubcribe))
+            .subscribe((result) => {
+            if (result) {
+                const evt = new CustomEvent(this.ckEditorEventConst.QMSCK_IMAGEMAP_PLUGIN_RESP, {
+                    detail: result
+                });
+                window.dispatchEvent(evt);
+            }
+        });
+    }
+    /*
+      Business Process Model and Notation
+    */
     bpmnEventHandling(id) {
         const dialogTemplate = this.dialog.open(QMSCKEditorBpmnComponent, {
             width: '89vw',
@@ -11968,12 +14543,10 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
             .pipe(takeUntil(this.ngUnsubcribe))
             .subscribe((result) => {
             if (result) {
-                if (result) {
-                    const evt = new CustomEvent(this.ckEditorEventConst.QMSCK_BPMN_PLUGIN_RESP, {
-                        detail: result
-                    });
-                    window.dispatchEvent(evt);
-                }
+                const evt = new CustomEvent(this.ckEditorEventConst.QMSCK_BPMN_PLUGIN_RESP, {
+                    detail: result
+                });
+                window.dispatchEvent(evt);
             }
         });
     }
@@ -12036,6 +14609,7 @@ QMSCKEditorModule.decorators = [
                     QMSCKEditorRelatedComponent,
                     LinkAttachmentComponent,
                     QMSCKEditorTooltipComponent,
+                    QMSCKEditorImageMapComponent,
                     QMSCKEditorBpmnComponent,
                     SaveTemplateComponent
                 ],
@@ -12055,6 +14629,10 @@ QMSCKEditorModule.decorators = [
                     MatSnackBarModule,
                     MatSelectModule,
                     MatButtonModule,
+                    MatButtonToggleModule,
+                    MatProgressSpinnerModule,
+                    MatTooltipModule,
+                    MatRadioModule,
                     MatTreeModule,
                     MatAutocompleteModule,
                     ScrollingModule,
@@ -12076,14 +14654,6 @@ class QMSCKEditorData {
 }
 
 class QMSCKEdtiorInputData {
-    constructor() {
-        this.apiUrl = '';
-        this.module = 0;
-        this.entityId = '';
-        this.documentId = 0;
-        this.mathtypeServiceUrl = '';
-        this.timestampFormat = '';
-    }
 }
 
 class QMSCKEditorLinkAnchorDocument {
@@ -12577,5 +15147,5 @@ class QMSSnackbarConfig extends MatSnackBarConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { AutocompleteOffDirective, BREADCRUMB_DROPDOWN_ICON, BUTTON_TOGGLE_DEFAULT_OPTIONS, BUTTON_TOGGLE_GROUP, BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, BannerType, BpmnService, BreadcrumbNode, ButtonToggleChange, CHECKLIST_ICON, CKEditorEventConst, CKEditorModule, ConfirmDialog, DEPARTMENT_FOLDER_ICON, DEPARTMENT_FOLDER_OUTLINED_ICON, DEVIATION_ICON, DOCUMENT_DEPARTMENT_ICON, DOCUMENT_ENTERPRISE_ICON, DOCUMENT_ICON, DOCUMENT_LOCAL_ICON, DOCUMENT_REGIONAL_ICON, DateFormatPipe, ENTERPRISE_FOLDER_ICON, ENTERPRISE_FOLDER_OUTLINED_ICON, FileErrorType, FlowChartConst, FlowchartViewMode, IconModel, KEYBOARD_DOWN_ICON, KEYBOARD_UP_ICON, LOCAL_FOLDER_ICON, LOCAL_FOLDER_OUTLINED_ICON, LinkAnchor, LinkType, MarginDirective, NORMAL_FOLDER_ICON, NORMAL_FOLDER_OUTLINED_ICON, PROCESS_AREA_ICON, PROCESS_AREA_OUTLINED_ICON, PROCESS_ICON, PopupData, ProtocolType, QMSAnchor, QMSAppIconModule, QMSAttachmentListDirective, QMSBreadcrumb, QMSBreadcrumbDirectionIconDirective, QMSBreadcrumbItemDirective, QMSBreadcrumbModule, QMSButton, QMSButtonIcon, QMSButtonModule, QMSButtonToggle, QMSButtonToggleGroup, QMSCKEditorBaseComponent, QMSCKEditorBaseService, QMSCKEditorBpmn, QMSCKEditorBpmnApiService, QMSCKEditorBpmnComponent, QMSCKEditorBpmnTemplate, QMSCKEditorComponent, QMSCKEditorConfirmComponent, QMSCKEditorData, QMSCKEditorDialogData, QMSCKEditorDocumentType, QMSCKEditorFullscreenComponent, QMSCKEditorGlobalService, QMSCKEditorInjector, QMSCKEditorLinkAnchorDocument, QMSCKEditorLinkComponent, QMSCKEditorLinkService, QMSCKEditorLoadTemplateComponent, QMSCKEditorModule, QMSCKEditorPlugin, QMSCKEditorRelatedComponent, QMSCKEditorRelation, QMSCKEditorTemplate, QMSCKEditorTemplateService, QMSCKEditorToastService, QMSCKEditorTreeComponent, QMSCKEdtiorInputData, QMSChipBodyDirective, QMSChipInputChipListDirective, QMSChipInputDirective, QMSChipInputSelectDropWDownDirective, QMSChipInputSelectFieldDirective, QMSChipInputSelectTriggerDirective, QMSComment, QMSConfirmDialog, QMSDialogConfig, QMSDrawerContentDirective, QMSDrawerDirective, QMSDrawerHeaderActionDirective, QMSDrawerHeaderDirective, QMSDropdownMenuItem, QMSEditFileNameDialog, QMSEditFileNameDialogModule, QMSFileAttachment, QMSFileUploadDirective, QMSFileUploadDisplayDirective, QMSFileUploadMultipleDirective, QMSFileUploadMultipleDisplayDirective, QMSFileUploadMultipleSelectorDirective, QMSFileUploadSelectorDirective, QMSFormDialog, QMSFormFieldDatePickerDirective, QMSFormFieldDirective, QMSFormFieldTextareaDirective, QMSGroupOptionDirective, QMSIconRegistryService, QMSInputChipDirective, QMSInputClearDirective, QMSList, QMSListExpansion, QMSListExpansionHeader, QMSListHeader, QMSListItem, QMSListLeadingIcon, QMSListLine, QMSListModule, QMSRangeSliderDirective, QMSRangeSliderLockUpDirective, QMSRelatedGlobalService, QMSRelatedModule, QMSRichText, QMSRichTextModule, QMSScrolableAttachmentListDirective, QMSScrollbarDirective, QMSSearchFieldDirective, QMSSnackbarConfig, QMSSuffixDirective, QMSSuffixFieldDirective, QMSTabGroupAdvancedDirective, QMSTabGroupDirective, QMSTabLabelDirective, QMSTableAction, QMSTableActionBlock, QMSTableModule, QMSTextBlockDirective, QMSTextBlockLine, QMSToolTipComponent, QMSToolTipRendererDirective, QMSTooltipImageDirective, QMSTooltipModule, QMSUploadFileErrorDialog, QMSUploadFileErrorDialogModule, QMSUploadingFileGuard, QmsAngularComponent, QmsAngularModule, QmsAngularService, QmsAppBarComponent, QmsAppBarModule, QmsBannerComponent, QmsBannerConfirmButton, QmsBannerConfirmButtonClick, QmsBannerConfirmComponent, QmsBannerConfirmModule, QmsBannerContent, QmsBannerLoadingComponent, QmsBannerLoadingModule, QmsBannerModule, QmsStepperComponent, QmsStepperModule, REGIONAL_FOLDER_ICON, REGIONAL_FOLDER_OUTLINED_ICON, RISK_ICON, RelatedContentComponent, RelatedItemType, RelatedListComponent, RelatedPopupComponent, Result, RiskAnalysis, RiskAnalysisComponent, RiskDanger, RiskListComponent, RiskResult, RiskResultComponent, SaveTemplateComponent, ScrollToSelectedDirective, SharedModule, SideNav, SideNavItem, SidenavComponent, StepModel, TargetType, TestOnlyComponent, TranslateLibraryService, TreeComponent, TreeConfig, TreeModel, TreeNode$1 as TreeNode, UploadErrorData, en, mixinColor, no, notExceedSize, requiredFileType, ɵ1, SharedMaterialModule as ɵa, QMSCKEditorTemplateComponent as ɵb, QMSCKEditorTreeService as ɵc, LinkAttachmentComponent as ɵd, QMSCKEditorTooltipComponent as ɵe, QMSCKEditorTooltip as ɵf };
+export { AutocompleteOffDirective, BREADCRUMB_DROPDOWN_ICON, BUTTON_TOGGLE_DEFAULT_OPTIONS, BUTTON_TOGGLE_GROUP, BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, BannerType, BpmnService, BreadcrumbNode, ButtonToggleChange, CHECKLIST_ICON, CKEditorEventConst, CKEditorModule, ConfirmDialog, DEPARTMENT_FOLDER_ICON, DEPARTMENT_FOLDER_OUTLINED_ICON, DEVIATION_ICON, DOCUMENT_DEPARTMENT_ICON, DOCUMENT_ENTERPRISE_ICON, DOCUMENT_ICON, DOCUMENT_LOCAL_ICON, DOCUMENT_REGIONAL_ICON, DateFormatPipe, ENTERPRISE_FOLDER_ICON, ENTERPRISE_FOLDER_OUTLINED_ICON, FileErrorType, FlowChartConst, FlowchartViewMode, IconModel, KEYBOARD_DOWN_ICON, KEYBOARD_UP_ICON, LOCAL_FOLDER_ICON, LOCAL_FOLDER_OUTLINED_ICON, LinkAnchor, LinkType, MarginDirective, NORMAL_FOLDER_ICON, NORMAL_FOLDER_OUTLINED_ICON, PROCESS_AREA_ICON, PROCESS_AREA_OUTLINED_ICON, PROCESS_ICON, PopupData, ProtocolType, ProtocolTypeName, QMSAnchor, QMSAppIconModule, QMSAttachmentListDirective, QMSBreadcrumb, QMSBreadcrumbDirectionIconDirective, QMSBreadcrumbItemDirective, QMSBreadcrumbModule, QMSButton, QMSButtonIcon, QMSButtonModule, QMSButtonToggle, QMSButtonToggleGroup, QMSCKEditorBaseComponent, QMSCKEditorBaseService, QMSCKEditorBpmn, QMSCKEditorBpmnApiService, QMSCKEditorBpmnComponent, QMSCKEditorBpmnTemplate, QMSCKEditorComponent, QMSCKEditorConfirmComponent, QMSCKEditorData, QMSCKEditorDialogData, QMSCKEditorDocumentType, QMSCKEditorFullscreenComponent, QMSCKEditorGlobalService, QMSCKEditorInjector, QMSCKEditorLinkAnchorDocument, QMSCKEditorLinkComponent, QMSCKEditorLinkService, QMSCKEditorLoadTemplateComponent, QMSCKEditorModule, QMSCKEditorPlugin, QMSCKEditorRelatedComponent, QMSCKEditorRelation, QMSCKEditorTemplate, QMSCKEditorTemplateService, QMSCKEditorToastService, QMSCKEditorTreeComponent, QMSCKEdtiorInputData, QMSChipBodyDirective, QMSChipInputChipListDirective, QMSChipInputDirective, QMSChipInputSelectDropWDownDirective, QMSChipInputSelectFieldDirective, QMSChipInputSelectTriggerDirective, QMSComment, QMSConfirmDialog, QMSDialogConfig, QMSDrawerContentDirective, QMSDrawerDirective, QMSDrawerHeaderActionDirective, QMSDrawerHeaderDirective, QMSDropdownMenuItem, QMSEditFileNameDialog, QMSEditFileNameDialogModule, QMSFileAttachment, QMSFileUploadDirective, QMSFileUploadDisplayDirective, QMSFileUploadMultipleDirective, QMSFileUploadMultipleDisplayDirective, QMSFileUploadMultipleSelectorDirective, QMSFileUploadSelectorDirective, QMSFormDialog, QMSFormFieldDatePickerDirective, QMSFormFieldDirective, QMSFormFieldTextareaDirective, QMSGroupOptionDirective, QMSIconRegistryService, QMSInputChipDirective, QMSInputClearDirective, QMSList, QMSListExpansion, QMSListExpansionHeader, QMSListHeader, QMSListItem, QMSListLeadingIcon, QMSListLine, QMSListModule, QMSRangeSliderDirective, QMSRangeSliderLockUpDirective, QMSRelatedGlobalService, QMSRelatedModule, QMSRichText, QMSRichTextModule, QMSScrolableAttachmentListDirective, QMSScrollbarDirective, QMSSearchFieldDirective, QMSSnackbarConfig, QMSSuffixDirective, QMSSuffixFieldDirective, QMSTabGroupAdvancedDirective, QMSTabGroupDirective, QMSTabLabelDirective, QMSTableAction, QMSTableActionBlock, QMSTableModule, QMSTextBlockDirective, QMSTextBlockLine, QMSToolTipComponent, QMSToolTipRendererDirective, QMSTooltipImageDirective, QMSTooltipModule, QMSUploadFileErrorDialog, QMSUploadFileErrorDialogModule, QMSUploadingFileGuard, QmsAngularComponent, QmsAngularModule, QmsAngularService, QmsAppBarComponent, QmsAppBarModule, QmsBannerComponent, QmsBannerConfirmButton, QmsBannerConfirmButtonClick, QmsBannerConfirmComponent, QmsBannerConfirmModule, QmsBannerContent, QmsBannerLoadingComponent, QmsBannerLoadingModule, QmsBannerModule, QmsStepperComponent, QmsStepperModule, REGIONAL_FOLDER_ICON, REGIONAL_FOLDER_OUTLINED_ICON, RISK_ICON, RelatedContentComponent, RelatedItemType, RelatedListComponent, RelatedPopupComponent, Result, RiskAnalysis, RiskAnalysisComponent, RiskDanger, RiskListComponent, RiskResult, RiskResultComponent, SaveTemplateComponent, ScrollToSelectedDirective, SharedModule, SideNav, SideNavItem, SidenavComponent, StepModel, TargetType, TargetTypeName, TestOnlyComponent, TranslateLibraryService, TreeComponent, TreeConfig, TreeModel, TreeNode$1 as TreeNode, UploadErrorData, en, mixinColor, no, notExceedSize, requiredFileType, ɵ1, SharedMaterialModule as ɵa, QMSCKEditorTemplateComponent as ɵb, QMSCKEditorTreeService as ɵc, LinkAttachmentComponent as ɵd, QMSCKEditorTooltipComponent as ɵe, QMSCKEditorTooltip as ɵf, QMSCKEditorImageMapComponent as ɵg, QMSCKEditorImageMap as ɵh };
 //# sourceMappingURL=qms-angular.js.map