@talrace/ngx-noder 0.0.4 → 0.0.5

package/fesm2022/talrace-ngx-noder.mjs

@@ -13,28 +13,27 @@ import { OverlayConfig } from '@angular/cdk/overlay';
 import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i5 from '@angular/cdk/clipboard';
-import * as i7 from '@angular/material/sidenav';
+import * as i6 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i4 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$4 from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import * as i2$3 from '@angular/forms';
-import { ReactiveFormsModule, FormsModule, FormControl, Validators } from '@angular/forms';
+import * as i4 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i2$2 from '@angular/forms';
+import { ReactiveFormsModule, FormControl, FormsModule, Validators } from '@angular/forms';
+import { MatSelectModule } from '@angular/material/select';
+import * as i6$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
 import * as i4$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i6 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
+import * as i2$3 from '@angular/platform-browser';
 import * as i4$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i7$1 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i2$2 from '@angular/platform-browser';
-import * as i4$3 from '@angular/material/core';
 import * as i3$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i4$3 from '@angular/material/core';
 import * as i1$3 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i5$1 from 'ngx-colors';
@@ -368,7 +367,7 @@ class BaseNoderComponent extends ObserverComponent {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: BaseNoderComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: BaseNoderComponent, inputs: { content: "content", sessionId: "sessionId", contentWidth: "contentWidth" }, host: { properties: { "class.focused": "this.focused", "attr.data-session-id": "this.sessionId", "attr.data-insert-index": "this.insertIndex" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: BaseNoderComponent, inputs: { content: "content", sessionId: "sessionId", contentWidth: "contentWidth", generalProperties: "generalProperties" }, host: { properties: { "class.focused": "this.focused", "attr.data-session-id": "this.sessionId", "attr.data-insert-index": "this.insertIndex" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: BaseNoderComponent, decorators: [{
             type: Directive
@@ -387,6 +386,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 args: ['attr.data-insert-index']
             }], contentWidth: [{
                 type: Input
+            }], generalProperties: [{
+                type: Input
             }] } });
 
 class OperationsHistoryInfoModel {
@@ -1403,7 +1404,7 @@ class InsertStyledTextModel {
     }
 }
 
-class InsertTableColumnsModel {
+class InsertTabModel {
     constructor(fields) {
         if (fields) {
             Object.assign(this, fields);
@@ -1411,7 +1412,7 @@ class InsertTableColumnsModel {
     }
 }
 
-class InsertTableModel {
+class InsertTableColumnsModel {
     constructor(fields) {
         if (fields) {
             Object.assign(this, fields);
@@ -1419,7 +1420,7 @@ class InsertTableModel {
     }
 }
 
-class InsertTableRowsModel {
+class InsertTableModel {
     constructor(fields) {
         if (fields) {
             Object.assign(this, fields);
@@ -1427,7 +1428,7 @@ class InsertTableRowsModel {
     }
 }
 
-class InsertTabModel {
+class InsertTableRowsModel {
     constructor(fields) {
         if (fields) {
             Object.assign(this, fields);
@@ -1443,21 +1444,6 @@ class InsertTextModel {
     }
 }
 
-class MarginModel {
-    constructor(fields) {
-        this.left = DocumentInfo.paddingLeft;
-        this.right = DocumentInfo.paddingRight;
-        this.top = DocumentInfo.paddingTop;
-        this.bottom = DocumentInfo.paddingBottom;
-        this.header = DocumentInfo.paddingHeader;
-        this.footer = DocumentInfo.paddingFooter;
-        if (!fields) {
-            return;
-        }
-        Object.assign(this, fields);
-    }
-}
-
 var MouseButton;
 (function (MouseButton) {
     MouseButton[MouseButton["Left"] = 0] = "Left";
@@ -2189,12 +2175,21 @@ class FormatExtModel extends FormatModel {
     }
 }
 
+class ScalingHelper {
+    static getRatio(current, original) {
+        return parseFloat((current / original).toFixed(1));
+    }
+    static scale(initial, scale) {
+        return Math.round(initial * scale);
+    }
+}
+
 class RenderingHelper {
-    static createLineElement(lineInfo, numberingOffsetLeft) {
+    static createLineElement(lineInfo, numberingOffsetLeft, scalingRatio) {
         let lineEl = document.createElement('div');
         lineEl.className = 'ace-line';
         if (lineInfo) {
-            const paddingLeft = lineInfo.paddingLeft - numberingOffsetLeft;
+            const paddingLeft = ScalingHelper.scale(lineInfo.paddingLeft - numberingOffsetLeft, scalingRatio);
             const marginLeft = paddingLeft < 0 ? paddingLeft : 0;
             lineEl.setAttribute('style', 
             // eslint-disable-next-line prettier/prettier
@@ -2216,12 +2211,12 @@ class RenderingHelper {
         }
         domContent.parentNode.appendChild(valueFragment);
     }
-    static renderContentWrappedLine(domContent, splits, currentParagraph, formatsExt, distance, customContentService, customComponents, breaks = []) {
+    static renderContentWrappedLine(domContent, splits, currentParagraph, formatsExt, distance, customContentService, customComponents, scalingRatio, breaks = []) {
         let splitIndex = 0;
         const numberingOffsetLeft = currentParagraph.numberingData.numberingId === null
             ? 0
             : currentParagraph.numberingData.width + currentParagraph.numberingData.paddingLeft;
-        let lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft);
+        let lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft, scalingRatio);
         domContent.parentNode.appendChild(lineEl);
         const valueFragment = DomHelper.createFragment(domContent.currentElement);
         let paragraphChars = 0;
@@ -2243,7 +2238,7 @@ class RenderingHelper {
             while (paragraphChars === split && nextFragmentStartIndex !== distance.end) {
                 split = splits[++splitIndex];
                 const nextFragmentDocumentStartIndex = fragmentDocumentStartIndex + nextFragmentStartIndex - fragmentStartIndex;
-                lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft);
+                lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft, scalingRatio);
                 if (split > formatExt.endIndex) {
                     const nextFragmentEndIndex = formatExt.content.length - 1;
                     const nextFragmentDistance = new DistanceModel({ start: nextFragmentStartIndex, end: nextFragmentEndIndex });
@@ -2273,7 +2268,7 @@ class RenderingHelper {
             }
         }
     }
-    static renderNumberingMarker(paragraph, layerElement) {
+    static renderNumberingMarker(paragraph, layerElement, scalingRatio) {
         const markerHeight = paragraph.numberingData.height;
         const markerLineInfo = {
             paddingLeft: paragraph.numberingData.paddingLeft,
@@ -2284,7 +2279,7 @@ class RenderingHelper {
             offsetAfter: 0,
             screenLine: 0
         };
-        const numberingLineEl = this.createLineElement(markerLineInfo, 0);
+        const numberingLineEl = this.createLineElement(markerLineInfo, 0, scalingRatio);
         const markerFragment = DomHelper.createFragment(layerElement);
         const marker = paragraph.numberingData.marker;
         const markerExtModel = new FormatExtModel({
@@ -2922,7 +2917,7 @@ class TextLayer extends EventEmitting {
             DomHelper.setStyle(paragraphCell.element.style, 'top', `${paragraphTop}px`);
             const paragraph = paragraphs[row];
             if (paragraph.numberingData.numberingId !== null) {
-                const numberingElement = this.renderingHelper.renderNumberingMarker(paragraph, this.element);
+                const numberingElement = this.renderingHelper.renderNumberingMarker(paragraph, this.element, this.session.properties.scalingRatio);
                 numberingElement.className = 'numberingMarker';
                 paragraphCell.element.appendChild(numberingElement);
             }
@@ -2947,13 +2942,13 @@ class TextLayer extends EventEmitting {
         }));
         if (splits?.length) {
             const distance = new DistanceModel({ start: startIndex, end: endIndex });
-            this.renderingHelper.renderContentWrappedLine({ currentElement: this.element, parentNode: linesContainerElement }, splits, currentParagraph, formatsExt, distance, this.session.customContentService, this.session.customComponents, this.session.model.breaks);
+            this.renderingHelper.renderContentWrappedLine({ currentElement: this.element, parentNode: linesContainerElement }, splits, currentParagraph, formatsExt, distance, this.session.customContentService, this.session.customComponents, this.session.properties.scalingRatio, this.session.model.breaks);
         }
         else {
             const numberingOffsetLeft = currentParagraph.numberingData.numberingId === null
                 ? 0
                 : currentParagraph.numberingData.width + currentParagraph.numberingData.paddingLeft;
-            const lastLineEl = this.renderingHelper.createLineElement(currentParagraph.textLinesInfo[0], numberingOffsetLeft);
+            const lastLineEl = this.renderingHelper.createLineElement(currentParagraph.textLinesInfo[0], numberingOffsetLeft, this.session.properties.scalingRatio);
             linesContainerElement.appendChild(lastLineEl);
             const rowDistance = new DistanceModel({ start: startIndex, end: endIndex });
             this.renderingHelper.renderContentSimpleLine({ currentElement: this.element, parentNode: lastLineEl }, formatsExt, rowDistance, this.session.customContentService, this.session.customComponents, this.session.model.breaks);
@@ -4871,15 +4866,8 @@ class Editor extends EventEmitting {
     initMainSession() {
         const pageWidth = this.customPageWidth ?? this.model.pageWidth;
         this.container.nativeElement.style.maxWidth = `${pageWidth}px`;
-        const pageMargin = new MarginModel({
-            left: this.model.marginLeft,
-            right: this.model.marginRight,
-            top: this.model.marginTop,
-            bottom: this.model.marginBottom,
-            header: this.model.marginHeader,
-            footer: this.model.marginFooter
-        });
-        this.regulatorService.addMainSession(this.model, pageMargin, pageWidth, this.container);
+        const scalingRatio = this.customPageWidth ? ScalingHelper.getRatio(this.customPageWidth, this.model.pageWidth) : 1;
+        this.regulatorService.addMainSession(this.model, pageWidth, scalingRatio, this.container);
         this.mainSession.addEventListener('changeScrollTop', this.onScrollTopChange);
         this.session.addEventListener('setStyles', this.setStyles);
         this.mainRenderer.scrollTo(0);
@@ -5900,8 +5888,8 @@ class NoderImageComponent extends BaseNoderComponent {
     }
     initialize() {
         const url = this.image.content?.replace('/api/', '') ?? '';
-        this._height = this.image.height;
-        this._width = this.image.width;
+        this._height = ScalingHelper.scale(this.image.height, this.generalProperties.scalingRatio);
+        this._width = ScalingHelper.scale(this.image.width, this.generalProperties.scalingRatio);
         this.apiService.getFile(url).subscribe((res) => {
             const fileSource = URL.createObjectURL(res);
             const image = this.createImage(fileSource);
@@ -5981,7 +5969,7 @@ class NoderTabComponent extends BaseNoderComponent {
     }
     calculateProperties() {
         this._height = this.tab.fontSize;
-        this._width = this.tab.width;
+        this._width = ScalingHelper.scale(this.tab.width, this.generalProperties.scalingRatio);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NoderTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: NoderTabComponent, selector: "app-noder-tab", host: { properties: { "style.width.px": "this.width", "style.fontSize.pt": "this.height" } }, usesInheritance: true, ngImport: i0, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -6154,6 +6142,21 @@ class CellResizerParametersModel {
     }
 }
 
+class MarginModel {
+    constructor(fields) {
+        this.left = DocumentInfo.paddingLeft;
+        this.right = DocumentInfo.paddingRight;
+        this.top = DocumentInfo.paddingTop;
+        this.bottom = DocumentInfo.paddingBottom;
+        this.header = DocumentInfo.paddingHeader;
+        this.footer = DocumentInfo.paddingFooter;
+        if (!fields) {
+            return;
+        }
+        Object.assign(this, fields);
+    }
+}
+
 class NoderTableCellComponent {
     get session() {
         return this.cellSession.session;
@@ -6188,7 +6191,7 @@ class NoderTableCellComponent {
             header: 0,
             footer: 0
         });
-        this.cellSession = this.regulatorService.addCellSession(this.table, marginModel, this, this.properties);
+        this.cellSession = this.regulatorService.addCellSession(this.table, marginModel, this, this.generalProperties);
         this.sessionId = this.cellSession.sessionId;
         this.addEventListeners();
     }
@@ -6207,11 +6210,11 @@ class NoderTableCellComponent {
         this.session.pagesWrap.addEventListener('pagesCountChanged', this.pagesCountChangedHandler);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NoderTableCellComponent, deps: [{ token: EditorService }, { token: RegulatorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: NoderTableCellComponent, selector: "app-noder-table-cell", inputs: { table: "table", cell: "cell", rowIndex: "rowIndex", cellIndex: "cellIndex", columnIndex: "columnIndex", width: "width", parentSessionId: "parentSessionId", heightChanged: "heightChanged", startResizing: "startResizing" }, host: { properties: { "class.highlighted": "this.isHighlighted", "attr.data-session-id": "this.sessionId" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div\n    *ngIf=\"cellIndex === 0\"\n    class=\"resizer left-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Left)\"></div>\n<div\n    #container\n    class=\"edit-container\"></div>\n<div class=\"highlight-container\"></div>\n<div\n    class=\"resizer right-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Right)\"></div>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.container{height:100%;display:flex;justify-content:center}app-element-toolbar{right:15px;top:50px}:host::ng-deep .ace-editor{position:relative;line-height:1;font-size:12pt;font-family:Courier New,Courier,monospace;text-align:left;width:100%;height:100%}:host::ng-deep .ace-scroller{position:absolute;overflow:hidden;top:0;bottom:0;-webkit-user-select:none;user-select:none;cursor:text}:host::ng-deep .ace-scrollbar{overflow:hidden scroll;contain:strict;position:absolute;right:0;bottom:0;z-index:6;top:0}:host::ng-deep .ace-scrollbar-inner{position:absolute;cursor:text;left:0;top:0}:host::ng-deep .ace-text-input{position:absolute;z-index:0;width:.5em;height:1em;opacity:0;background:transparent;appearance:none;border:none;resize:none;overflow:hidden;font:inherit;padding:0 1px;margin:0 -1px;contain:strict;-webkit-user-select:text;user-select:text}:host::ng-deep .ace-layer{z-index:1;position:absolute;word-wrap:normal;white-space:pre;height:100%;width:100%;box-sizing:border-box;pointer-events:none}:host::ng-deep .ace-text-layer{font:inherit!important;position:absolute;contain:style size layout;pointer-events:auto}:host::ng-deep .ace-edges-layer{z-index:2}:host::ng-deep .ace-line{display:flex;align-items:baseline;line-height:normal}:host::ng-deep .ace-line .hyperlink-hover{cursor:pointer}:host::ng-deep .ace-line>*{display:inline-block;font-kerning:none}:host::ng-deep .ace-line>*.paragraph-symbol{align-self:flex-end}:host::ng-deep .ace-content{position:inherit;box-sizing:border-box;min-width:100%;contain:style size layout;inset:0}:host::ng-deep .ace-line-group{display:inline-flex}:host::ng-deep .ace-line-group .lines-container{width:100%}:host::ng-deep .ace-line-group .numberingMarker{display:inline-flex}:host::ng-deep .ace-line-group .numberingMarker span{align-self:end}:host::ng-deep .ace-text-layer>.ace-line,:host::ng-deep .ace-text-layer>.ace-line-group,:host::ng-deep .ace-edges-layer>.ace-line,:host::ng-deep .ace-edges-layer>.ace-line-group{contain:style size layout;position:absolute;top:0;left:0;right:0}:host::ng-deep .ace-text-layer>.ace-line-group:has(.focused){z-index:1}:host::ng-deep .ace-line-group:has(.lines-container>.ace-line:first-child>span:not(:empty)){align-items:baseline}:host::ng-deep .ace-cursor-layer{z-index:4}:host::ng-deep .ace-cursor-layer.selecting{display:none}:host::ng-deep .ace-cursor{z-index:4;position:absolute;box-sizing:border-box;border-left:2px solid;transform:translateZ(0)}:host::ng-deep .ace-hidden-cursors .ace-cursor{opacity:0}:host::ng-deep .ace-hidden-cursors{visibility:hidden}:host::ng-deep .ace-animate-blinking .ace-cursor{animation-duration:1s;animation-timing-function:step-end;animation-name:blink-ace-animate;animation-iteration-count:infinite}:host::ng-deep .ace-animate-blinking.ace-smooth-blinking .ace-cursor{animation-duration:1s;animation-timing-function:ease-in-out;animation-name:blink-ace-animate-smooth}@keyframes blink-ace-animate{0%,to{opacity:1}60%{opacity:0}}@keyframes blink-ace-animate-smooth{0%,to{opacity:1}45%{opacity:1}60%{opacity:0}85%{opacity:0}}:host::ng-deep .ace-selection-layer .ace-selection{position:absolute;z-index:5}:host::ng-deep .ace-selection-layer.text-selection .ace-selection{background-color:#5ea8f766}:host::ng-deep .ace-selection-layer.notes-highlight .ace-selection{background:#ff06}:host::ng-deep .ace-underline{text-decoration:underline}:host::ng-deep .ace-bold{font-weight:700}:host::ng-deep .ace-italic{font-style:italic}:host::ng-deep .page{width:100%;position:absolute}:host::ng-deep .page-label{position:absolute;top:40px;right:96px;font-family:Courier New,Courier,monospace;font-size:16px;line-height:1}:host::ng-deep .font-baseline{visibility:hidden;height:500px}:host::ng-deep .font-baseline span:after{content:\"\";height:100%;display:inline-block}:host::ng-deep .ruler-line{position:absolute;top:0;bottom:0;width:0;border-left:1px solid rgba(0,0,0,.4);opacity:.5;display:none;z-index:1}:host::ng-deep .ruler-line.visible{display:block}:host::ng-deep .drawer-container .mat-button-toggle-button{height:48px;border-radius:4px}:host::ng-deep .drawer-container .mat-button-toggle-checked button{height:48px;border-radius:4px}\n", ".highlight-container{visibility:hidden;position:absolute;width:100%;height:100%;background-color:#5ea8f766;pointer-events:none;overflow:hidden}:host{min-height:19px;height:100%;background:transparent}:host.highlighted .highlight-container{visibility:visible}.edit-container{min-height:1px;overflow:hidden}.left-border{left:-6px}.resizer{cursor:col-resize;width:11px;height:100%;position:absolute;z-index:1}.right-border{right:-6px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: NoderTableCellComponent, selector: "app-noder-table-cell", inputs: { table: "table", cell: "cell", rowIndex: "rowIndex", cellIndex: "cellIndex", columnIndex: "columnIndex", width: "width", parentSessionId: "parentSessionId", generalProperties: "generalProperties", heightChanged: "heightChanged", startResizing: "startResizing" }, host: { properties: { "class.highlighted": "this.isHighlighted", "attr.data-session-id": "this.sessionId" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div\n    *ngIf=\"cellIndex === 0\"\n    class=\"resizer left-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Left)\"></div>\n<div\n    #container\n    class=\"edit-container\"></div>\n<div class=\"highlight-container\"></div>\n<div\n    class=\"resizer right-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Right)\"></div>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.container{height:100%;display:flex;justify-content:center}:host::ng-deep .ace-editor{position:relative;line-height:1;font-size:12pt;font-family:Courier New,Courier,monospace;text-align:left;width:100%;height:100%}:host::ng-deep .ace-scroller{position:absolute;overflow:hidden;top:0;bottom:0;-webkit-user-select:none;user-select:none;cursor:text}:host::ng-deep .ace-scrollbar{overflow:hidden scroll;contain:strict;position:absolute;right:0;bottom:0;z-index:6;top:0}:host::ng-deep .ace-scrollbar-inner{position:absolute;cursor:text;left:0;top:0}:host::ng-deep .ace-text-input{position:absolute;z-index:0;width:.5em;height:1em;opacity:0;background:transparent;appearance:none;border:none;resize:none;overflow:hidden;font:inherit;padding:0 1px;margin:0 -1px;contain:strict;-webkit-user-select:text;user-select:text}:host::ng-deep .ace-layer{z-index:1;position:absolute;word-wrap:normal;white-space:pre;height:100%;width:100%;box-sizing:border-box;pointer-events:none}:host::ng-deep .ace-text-layer{font:inherit!important;position:absolute;contain:style size layout;pointer-events:auto}:host::ng-deep .ace-edges-layer{z-index:2}:host::ng-deep .ace-line{display:flex;align-items:baseline;line-height:normal}:host::ng-deep .ace-line .hyperlink-hover{cursor:pointer}:host::ng-deep .ace-line>*{display:inline-block;font-kerning:none}:host::ng-deep .ace-line>*.paragraph-symbol{align-self:flex-end}:host::ng-deep .ace-content{position:inherit;box-sizing:border-box;min-width:100%;contain:style size layout;inset:0}:host::ng-deep .ace-line-group{display:inline-flex}:host::ng-deep .ace-line-group .lines-container{width:100%}:host::ng-deep .ace-line-group .numberingMarker{display:inline-flex}:host::ng-deep .ace-line-group .numberingMarker span{align-self:end}:host::ng-deep .ace-text-layer>.ace-line,:host::ng-deep .ace-text-layer>.ace-line-group,:host::ng-deep .ace-edges-layer>.ace-line,:host::ng-deep .ace-edges-layer>.ace-line-group{contain:style size layout;position:absolute;top:0;left:0;right:0}:host::ng-deep .ace-text-layer>.ace-line-group:has(.focused){z-index:1}:host::ng-deep .ace-line-group:has(.lines-container>.ace-line:first-child>span:not(:empty)){align-items:baseline}:host::ng-deep .ace-cursor-layer{z-index:4}:host::ng-deep .ace-cursor-layer.selecting{display:none}:host::ng-deep .ace-cursor{z-index:4;position:absolute;box-sizing:border-box;border-left:2px solid;transform:translateZ(0)}:host::ng-deep .ace-hidden-cursors .ace-cursor{opacity:0}:host::ng-deep .ace-hidden-cursors{visibility:hidden}:host::ng-deep .ace-animate-blinking .ace-cursor{animation-duration:1s;animation-timing-function:step-end;animation-name:blink-ace-animate;animation-iteration-count:infinite}:host::ng-deep .ace-animate-blinking.ace-smooth-blinking .ace-cursor{animation-duration:1s;animation-timing-function:ease-in-out;animation-name:blink-ace-animate-smooth}@keyframes blink-ace-animate{0%,to{opacity:1}60%{opacity:0}}@keyframes blink-ace-animate-smooth{0%,to{opacity:1}45%{opacity:1}60%{opacity:0}85%{opacity:0}}:host::ng-deep .ace-selection-layer .ace-selection{position:absolute;z-index:5}:host::ng-deep .ace-selection-layer.text-selection .ace-selection{background-color:#5ea8f766}:host::ng-deep .ace-selection-layer.notes-highlight .ace-selection{background:#ff06}:host::ng-deep .ace-underline{text-decoration:underline}:host::ng-deep .ace-bold{font-weight:700}:host::ng-deep .ace-italic{font-style:italic}:host::ng-deep .page{width:100%;position:absolute}:host::ng-deep .page-label{position:absolute;top:40px;right:96px;font-family:Courier New,Courier,monospace;font-size:16px;line-height:1}:host::ng-deep .font-baseline{visibility:hidden;height:500px}:host::ng-deep .font-baseline span:after{content:\"\";height:100%;display:inline-block}:host::ng-deep .ruler-line{position:absolute;top:0;bottom:0;width:0;border-left:1px solid rgba(0,0,0,.4);opacity:.5;display:none;z-index:1}:host::ng-deep .ruler-line.visible{display:block}:host::ng-deep .drawer-container .mat-button-toggle-button{height:48px;border-radius:4px}:host::ng-deep .drawer-container .mat-button-toggle-checked button{height:48px;border-radius:4px}\n", ".highlight-container{visibility:hidden;position:absolute;width:100%;height:100%;background-color:#5ea8f766;pointer-events:none;overflow:hidden}:host{min-height:19px;height:100%;background:transparent}:host.highlighted .highlight-container{visibility:visible}.edit-container{min-height:1px;overflow:hidden}.left-border{left:-6px}.resizer{cursor:col-resize;width:11px;height:100%;position:absolute;z-index:1}.right-border{right:-6px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NoderTableCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-noder-table-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    *ngIf=\"cellIndex === 0\"\n    class=\"resizer left-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Left)\"></div>\n<div\n    #container\n    class=\"edit-container\"></div>\n<div class=\"highlight-container\"></div>\n<div\n    class=\"resizer right-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Right)\"></div>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.container{height:100%;display:flex;justify-content:center}app-element-toolbar{right:15px;top:50px}:host::ng-deep .ace-editor{position:relative;line-height:1;font-size:12pt;font-family:Courier New,Courier,monospace;text-align:left;width:100%;height:100%}:host::ng-deep .ace-scroller{position:absolute;overflow:hidden;top:0;bottom:0;-webkit-user-select:none;user-select:none;cursor:text}:host::ng-deep .ace-scrollbar{overflow:hidden scroll;contain:strict;position:absolute;right:0;bottom:0;z-index:6;top:0}:host::ng-deep .ace-scrollbar-inner{position:absolute;cursor:text;left:0;top:0}:host::ng-deep .ace-text-input{position:absolute;z-index:0;width:.5em;height:1em;opacity:0;background:transparent;appearance:none;border:none;resize:none;overflow:hidden;font:inherit;padding:0 1px;margin:0 -1px;contain:strict;-webkit-user-select:text;user-select:text}:host::ng-deep .ace-layer{z-index:1;position:absolute;word-wrap:normal;white-space:pre;height:100%;width:100%;box-sizing:border-box;pointer-events:none}:host::ng-deep .ace-text-layer{font:inherit!important;position:absolute;contain:style size layout;pointer-events:auto}:host::ng-deep .ace-edges-layer{z-index:2}:host::ng-deep .ace-line{display:flex;align-items:baseline;line-height:normal}:host::ng-deep .ace-line .hyperlink-hover{cursor:pointer}:host::ng-deep .ace-line>*{display:inline-block;font-kerning:none}:host::ng-deep .ace-line>*.paragraph-symbol{align-self:flex-end}:host::ng-deep .ace-content{position:inherit;box-sizing:border-box;min-width:100%;contain:style size layout;inset:0}:host::ng-deep .ace-line-group{display:inline-flex}:host::ng-deep .ace-line-group .lines-container{width:100%}:host::ng-deep .ace-line-group .numberingMarker{display:inline-flex}:host::ng-deep .ace-line-group .numberingMarker span{align-self:end}:host::ng-deep .ace-text-layer>.ace-line,:host::ng-deep .ace-text-layer>.ace-line-group,:host::ng-deep .ace-edges-layer>.ace-line,:host::ng-deep .ace-edges-layer>.ace-line-group{contain:style size layout;position:absolute;top:0;left:0;right:0}:host::ng-deep .ace-text-layer>.ace-line-group:has(.focused){z-index:1}:host::ng-deep .ace-line-group:has(.lines-container>.ace-line:first-child>span:not(:empty)){align-items:baseline}:host::ng-deep .ace-cursor-layer{z-index:4}:host::ng-deep .ace-cursor-layer.selecting{display:none}:host::ng-deep .ace-cursor{z-index:4;position:absolute;box-sizing:border-box;border-left:2px solid;transform:translateZ(0)}:host::ng-deep .ace-hidden-cursors .ace-cursor{opacity:0}:host::ng-deep .ace-hidden-cursors{visibility:hidden}:host::ng-deep .ace-animate-blinking .ace-cursor{animation-duration:1s;animation-timing-function:step-end;animation-name:blink-ace-animate;animation-iteration-count:infinite}:host::ng-deep .ace-animate-blinking.ace-smooth-blinking .ace-cursor{animation-duration:1s;animation-timing-function:ease-in-out;animation-name:blink-ace-animate-smooth}@keyframes blink-ace-animate{0%,to{opacity:1}60%{opacity:0}}@keyframes blink-ace-animate-smooth{0%,to{opacity:1}45%{opacity:1}60%{opacity:0}85%{opacity:0}}:host::ng-deep .ace-selection-layer .ace-selection{position:absolute;z-index:5}:host::ng-deep .ace-selection-layer.text-selection .ace-selection{background-color:#5ea8f766}:host::ng-deep .ace-selection-layer.notes-highlight .ace-selection{background:#ff06}:host::ng-deep .ace-underline{text-decoration:underline}:host::ng-deep .ace-bold{font-weight:700}:host::ng-deep .ace-italic{font-style:italic}:host::ng-deep .page{width:100%;position:absolute}:host::ng-deep .page-label{position:absolute;top:40px;right:96px;font-family:Courier New,Courier,monospace;font-size:16px;line-height:1}:host::ng-deep .font-baseline{visibility:hidden;height:500px}:host::ng-deep .font-baseline span:after{content:\"\";height:100%;display:inline-block}:host::ng-deep .ruler-line{position:absolute;top:0;bottom:0;width:0;border-left:1px solid rgba(0,0,0,.4);opacity:.5;display:none;z-index:1}:host::ng-deep .ruler-line.visible{display:block}:host::ng-deep .drawer-container .mat-button-toggle-button{height:48px;border-radius:4px}:host::ng-deep .drawer-container .mat-button-toggle-checked button{height:48px;border-radius:4px}\n", ".highlight-container{visibility:hidden;position:absolute;width:100%;height:100%;background-color:#5ea8f766;pointer-events:none;overflow:hidden}:host{min-height:19px;height:100%;background:transparent}:host.highlighted .highlight-container{visibility:visible}.edit-container{min-height:1px;overflow:hidden}.left-border{left:-6px}.resizer{cursor:col-resize;width:11px;height:100%;position:absolute;z-index:1}.right-border{right:-6px}\n"] }]
+            args: [{ selector: 'app-noder-table-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    *ngIf=\"cellIndex === 0\"\n    class=\"resizer left-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Left)\"></div>\n<div\n    #container\n    class=\"edit-container\"></div>\n<div class=\"highlight-container\"></div>\n<div\n    class=\"resizer right-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Right)\"></div>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.container{height:100%;display:flex;justify-content:center}:host::ng-deep .ace-editor{position:relative;line-height:1;font-size:12pt;font-family:Courier New,Courier,monospace;text-align:left;width:100%;height:100%}:host::ng-deep .ace-scroller{position:absolute;overflow:hidden;top:0;bottom:0;-webkit-user-select:none;user-select:none;cursor:text}:host::ng-deep .ace-scrollbar{overflow:hidden scroll;contain:strict;position:absolute;right:0;bottom:0;z-index:6;top:0}:host::ng-deep .ace-scrollbar-inner{position:absolute;cursor:text;left:0;top:0}:host::ng-deep .ace-text-input{position:absolute;z-index:0;width:.5em;height:1em;opacity:0;background:transparent;appearance:none;border:none;resize:none;overflow:hidden;font:inherit;padding:0 1px;margin:0 -1px;contain:strict;-webkit-user-select:text;user-select:text}:host::ng-deep .ace-layer{z-index:1;position:absolute;word-wrap:normal;white-space:pre;height:100%;width:100%;box-sizing:border-box;pointer-events:none}:host::ng-deep .ace-text-layer{font:inherit!important;position:absolute;contain:style size layout;pointer-events:auto}:host::ng-deep .ace-edges-layer{z-index:2}:host::ng-deep .ace-line{display:flex;align-items:baseline;line-height:normal}:host::ng-deep .ace-line .hyperlink-hover{cursor:pointer}:host::ng-deep .ace-line>*{display:inline-block;font-kerning:none}:host::ng-deep .ace-line>*.paragraph-symbol{align-self:flex-end}:host::ng-deep .ace-content{position:inherit;box-sizing:border-box;min-width:100%;contain:style size layout;inset:0}:host::ng-deep .ace-line-group{display:inline-flex}:host::ng-deep .ace-line-group .lines-container{width:100%}:host::ng-deep .ace-line-group .numberingMarker{display:inline-flex}:host::ng-deep .ace-line-group .numberingMarker span{align-self:end}:host::ng-deep .ace-text-layer>.ace-line,:host::ng-deep .ace-text-layer>.ace-line-group,:host::ng-deep .ace-edges-layer>.ace-line,:host::ng-deep .ace-edges-layer>.ace-line-group{contain:style size layout;position:absolute;top:0;left:0;right:0}:host::ng-deep .ace-text-layer>.ace-line-group:has(.focused){z-index:1}:host::ng-deep .ace-line-group:has(.lines-container>.ace-line:first-child>span:not(:empty)){align-items:baseline}:host::ng-deep .ace-cursor-layer{z-index:4}:host::ng-deep .ace-cursor-layer.selecting{display:none}:host::ng-deep .ace-cursor{z-index:4;position:absolute;box-sizing:border-box;border-left:2px solid;transform:translateZ(0)}:host::ng-deep .ace-hidden-cursors .ace-cursor{opacity:0}:host::ng-deep .ace-hidden-cursors{visibility:hidden}:host::ng-deep .ace-animate-blinking .ace-cursor{animation-duration:1s;animation-timing-function:step-end;animation-name:blink-ace-animate;animation-iteration-count:infinite}:host::ng-deep .ace-animate-blinking.ace-smooth-blinking .ace-cursor{animation-duration:1s;animation-timing-function:ease-in-out;animation-name:blink-ace-animate-smooth}@keyframes blink-ace-animate{0%,to{opacity:1}60%{opacity:0}}@keyframes blink-ace-animate-smooth{0%,to{opacity:1}45%{opacity:1}60%{opacity:0}85%{opacity:0}}:host::ng-deep .ace-selection-layer .ace-selection{position:absolute;z-index:5}:host::ng-deep .ace-selection-layer.text-selection .ace-selection{background-color:#5ea8f766}:host::ng-deep .ace-selection-layer.notes-highlight .ace-selection{background:#ff06}:host::ng-deep .ace-underline{text-decoration:underline}:host::ng-deep .ace-bold{font-weight:700}:host::ng-deep .ace-italic{font-style:italic}:host::ng-deep .page{width:100%;position:absolute}:host::ng-deep .page-label{position:absolute;top:40px;right:96px;font-family:Courier New,Courier,monospace;font-size:16px;line-height:1}:host::ng-deep .font-baseline{visibility:hidden;height:500px}:host::ng-deep .font-baseline span:after{content:\"\";height:100%;display:inline-block}:host::ng-deep .ruler-line{position:absolute;top:0;bottom:0;width:0;border-left:1px solid rgba(0,0,0,.4);opacity:.5;display:none;z-index:1}:host::ng-deep .ruler-line.visible{display:block}:host::ng-deep .drawer-container .mat-button-toggle-button{height:48px;border-radius:4px}:host::ng-deep .drawer-container .mat-button-toggle-checked button{height:48px;border-radius:4px}\n", ".highlight-container{visibility:hidden;position:absolute;width:100%;height:100%;background-color:#5ea8f766;pointer-events:none;overflow:hidden}:host{min-height:19px;height:100%;background:transparent}:host.highlighted .highlight-container{visibility:visible}.edit-container{min-height:1px;overflow:hidden}.left-border{left:-6px}.resizer{cursor:col-resize;width:11px;height:100%;position:absolute;z-index:1}.right-border{right:-6px}\n"] }]
         }], ctorParameters: () => [{ type: EditorService }, { type: RegulatorService }], propDecorators: { table: [{
                 type: Input
             }], cell: [{
@@ -6226,6 +6229,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 type: Input
             }], parentSessionId: [{
                 type: Input
+            }], generalProperties: [{
+                type: Input
             }], heightChanged: [{
                 type: Input
             }], startResizing: [{
@@ -6818,7 +6823,7 @@ class NoderTableComponent extends BaseNoderComponent {
             tableRow.cells[cellIndex].widthType = 'dxa';
             return (cellWidth * this._width) / 5000; // 5000 is equal to 100% in docx units of measurement
         }
-        return cellWidth;
+        return ScalingHelper.scale(cellWidth, this.generalProperties.scalingRatio);
     }
     createResizer() {
         this.resizerEl = document.createElement('div');
@@ -6892,9 +6897,9 @@ class NoderTableComponent extends BaseNoderComponent {
                 cellIndex: modelCellIndex,
                 columnIndex: currentTargetIndex,
                 width: this.getAdjustedWidth(this.table.rows[rowIndex], modelCellIndex, currentTargetIndex),
+                generalProperties: this.generalProperties,
                 heightChanged: this.cellHeightChanged,
-                startResizing: this.startResizing,
-                properties: this.properties
+                startResizing: this.startResizing
             });
             const cellContentHeight = componentRef.instance.getCellContentHeight();
             const cellData = new CellDataModel(cell, cellContentHeight, componentRef);
@@ -6925,7 +6930,8 @@ class NoderTableComponent extends BaseNoderComponent {
         let i = 0;
         while (i < this.table.columns.length) {
             const col = document.createElement('col');
-            col.style.width = `${this.table.columns[i].width}px`;
+            const scaledWidth = ScalingHelper.scale(this.table.columns[i].width, this.generalProperties.scalingRatio);
+            col.style.width = `${scaledWidth}px`;
             colgroup.appendChild(col);
             i++;
         }
@@ -10940,26 +10946,21 @@ class CustomContentService {
         this.injector = injector;
         this.elements = this.injector.get(EXTERNAL_ELEMENT_SERVICE).elements;
     }
-    generateComponents(model, sessionId, properties, document) {
+    generateComponents(model, sessionId, generalProperties, document) {
         const contentWidth = document.pageWidth - (document.pageMargin.left + document.pageMargin.right);
         return {
             images: this.componentService.generateComponents(NoderImageComponent, model?.images || [], x => {
-                return { image: x, sessionId };
+                return { image: x, sessionId, generalProperties };
             }),
             tables: this.componentService.generateComponents(NoderTableComponent, model?.tables || [], x => {
-                return { table: x, sessionId, properties };
+                return { table: x, sessionId, generalProperties };
             }),
             tabs: this.componentService.generateComponents(NoderTabComponent, model?.tabs || [], x => {
-                return { tab: x, sessionId };
+                return { tab: x, sessionId, generalProperties };
             }),
             customElements: this.generateElementComponents(model?.elements || [], sessionId, contentWidth),
             edges: model instanceof DocxModel
-                ? new Edges(this.componentService, model.headers, model.footers, new MarginModel({
-                    left: model.marginLeft,
-                    right: model.marginRight,
-                    top: model.marginHeader,
-                    bottom: model.marginFooter
-                }), document.pageWidth, sessionId, properties)
+                ? new Edges(this.componentService, model.headers, model.footers, document.pageMargin, document.pageWidth, sessionId, generalProperties)
                 : null
         };
     }
@@ -11050,14 +11051,22 @@ class RegulatorService {
         this.sessionIdIncrement = 0;
         this.edgeEditingPage = null;
     }
-    addMainSession(model, margins, pageWidth, container) {
+    addMainSession(model, pageWidth, scalingRatio, container) {
         const currentSessionId = ++this.sessionIdIncrement;
-        const document = new Document(model, margins, DocumentInfo.pagesSpace, pageWidth, model.pageHeight);
+        const document = new Document(model, new MarginModel({
+            left: ScalingHelper.scale(model.marginLeft, scalingRatio),
+            right: ScalingHelper.scale(model.marginRight, scalingRatio),
+            top: model.marginTop,
+            bottom: model.marginBottom,
+            header: model.marginHeader,
+            footer: model.marginFooter
+        }), DocumentInfo.pagesSpace, pageWidth, model.pageHeight);
         const renderer = new VirtualRenderer(container.nativeElement, this.editorService);
         const session = new EditSession(document, currentSessionId, this.customContentService, model, this.selection, new GeneralPropertiesModel({
             numberings: model.numberings,
-            defaultTabWidth: model.defaultTabWidth,
-            maxEdgeHeight: model.pageHeight * DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER
+            defaultTabWidth: ScalingHelper.scale(model.defaultTabWidth, scalingRatio),
+            maxEdgeHeight: model.pageHeight * DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER,
+            scalingRatio
         }));
         renderer.setSession(session);
         renderer.scrollTo(session.scrollTop);
@@ -11236,34 +11245,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
             type: Injectable
         }] });
 
-class ElementToolbarComponent {
-    constructor() {
-        this.isDisabled = false;
-        this.createElement = new EventEmitter();
-        this.isHide = false;
-    }
-    changeVisibility() {
-        this.isHide = !this.isHide;
-    }
-    async create(model) {
-        const data = await model.factoryMethod();
-        const element = new ElementDataModel(model.type, data.width, data.height, data.guid);
-        this.createElement.emit(element);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElementToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ElementToolbarComponent, selector: "app-element-toolbar", inputs: { isDisabled: "isDisabled", elements: "elements" }, outputs: { createElement: "createElement" }, ngImport: i0, template: "<button\n    class=\"menu\"\n    mat-raised-button\n    (click)=\"changeVisibility()\">\n    <div class=\"icon\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-menu-circle\"></mat-icon>\n    </div>\n</button>\n<div\n    class=\"menu-items\"\n    *ngIf=\"!isHide\">\n    <div class=\"empty-place\"></div>\n    <button\n        *ngFor=\"let element of elements\"\n        mat-icon-button\n        matTooltip=\"{{ element.name }}\"\n        matTooltipPosition=\"left\"\n        (click)=\"create(element)\"\n        [disabled]=\"isDisabled\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"{{ element.icon }}\"></mat-icon>\n    </button>\n</div>\n", styles: [":host{position:absolute}.mat-mdc-button.mat-mdc-button-base,.mat-mdc-raised-button.mat-mdc-button-base,.mat-mdc-unelevated-button.mat-mdc-button-base,.mat-mdc-outlined-button.mat-mdc-button-base{padding-right:21px}.menu-items{z-index:1;top:24px;position:absolute;max-width:50px;display:flex;flex-direction:column;border-radius:0 0 20px 20px;box-shadow:1px 2px 5px #0000001a}.menu-items .empty-place{height:24px}.menu{border-radius:30px 0 0 30px;min-width:56px;width:56px;height:48px;z-index:2}.menu .icon mat-icon{height:22px;width:24px;font-size:24px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElementToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-element-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    class=\"menu\"\n    mat-raised-button\n    (click)=\"changeVisibility()\">\n    <div class=\"icon\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-menu-circle\"></mat-icon>\n    </div>\n</button>\n<div\n    class=\"menu-items\"\n    *ngIf=\"!isHide\">\n    <div class=\"empty-place\"></div>\n    <button\n        *ngFor=\"let element of elements\"\n        mat-icon-button\n        matTooltip=\"{{ element.name }}\"\n        matTooltipPosition=\"left\"\n        (click)=\"create(element)\"\n        [disabled]=\"isDisabled\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"{{ element.icon }}\"></mat-icon>\n    </button>\n</div>\n", styles: [":host{position:absolute}.mat-mdc-button.mat-mdc-button-base,.mat-mdc-raised-button.mat-mdc-button-base,.mat-mdc-unelevated-button.mat-mdc-button-base,.mat-mdc-outlined-button.mat-mdc-button-base{padding-right:21px}.menu-items{z-index:1;top:24px;position:absolute;max-width:50px;display:flex;flex-direction:column;border-radius:0 0 20px 20px;box-shadow:1px 2px 5px #0000001a}.menu-items .empty-place{height:24px}.menu{border-radius:30px 0 0 30px;min-width:56px;width:56px;height:48px;z-index:2}.menu .icon mat-icon{height:22px;width:24px;font-size:24px}\n"] }]
-        }], propDecorators: { isDisabled: [{
-                type: Input
-            }], elements: [{
-                type: Input
-            }], createElement: [{
-                type: Output
-            }] } });
-
 class EditorComponent {
     get isViewOnly$() {
         return this.editorService.isViewOnly$;
@@ -11289,7 +11270,6 @@ class EditorComponent {
         this.class = 'base-editor';
         this.subscriptions = [];
         this.sidenavComponentRef = null;
-        this.elements = this.injector.get(EXTERNAL_ELEMENT_SERVICE).elements;
         this.sidenavProperties = this.injector.get(EXTERNAL_ELEMENT_SIDENAV);
         FontMetrics.checkVersion(EDITOR_VERSION);
     }
@@ -11304,10 +11284,6 @@ class EditorComponent {
         this.editor = new Editor(content, this.container, this.editorService, this.regulatorService, this.commandsService, this.clipboard, this.customPageWidth);
         this.subscriptions.push(this.toggleSidenavSubscription());
     }
-    createElement(model) {
-        this.editor.createCustomElement(model);
-        this.editor.focus();
-    }
     toggleSidenavSubscription() {
         return this.editorService.toggleSidenav$.subscribe(data => {
             if (this.sidenav.opened === data.open) {
@@ -11331,11 +11307,11 @@ class EditorComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ComponentService }, { token: EditorService }, { token: i0.Injector }, { token: RegulatorService }, { token: CommandsService }, { token: i5.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: EditorComponent, selector: "app-editor", inputs: { customPageWidth: "customPageWidth", content: "content" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"container\">\n            <div\n                #container\n                class=\"edit-container\"></div>\n            <app-element-toolbar\n                *ngIf=\"elements.length\"\n                [elements]=\"elements\"\n                [isDisabled]=\"isViewOnly$ | async\"\n                (createElement)=\"createElement($event)\"></app-element-toolbar>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.container{height:100%;display:flex;justify-content:center}app-element-toolbar{right:15px;top:50px}:host::ng-deep .ace-editor{position:relative;line-height:1;font-size:12pt;font-family:Courier New,Courier,monospace;text-align:left;width:100%;height:100%}:host::ng-deep .ace-scroller{position:absolute;overflow:hidden;top:0;bottom:0;-webkit-user-select:none;user-select:none;cursor:text}:host::ng-deep .ace-scrollbar{overflow:hidden scroll;contain:strict;position:absolute;right:0;bottom:0;z-index:6;top:0}:host::ng-deep .ace-scrollbar-inner{position:absolute;cursor:text;left:0;top:0}:host::ng-deep .ace-text-input{position:absolute;z-index:0;width:.5em;height:1em;opacity:0;background:transparent;appearance:none;border:none;resize:none;overflow:hidden;font:inherit;padding:0 1px;margin:0 -1px;contain:strict;-webkit-user-select:text;user-select:text}:host::ng-deep .ace-layer{z-index:1;position:absolute;word-wrap:normal;white-space:pre;height:100%;width:100%;box-sizing:border-box;pointer-events:none}:host::ng-deep .ace-text-layer{font:inherit!important;position:absolute;contain:style size layout;pointer-events:auto}:host::ng-deep .ace-edges-layer{z-index:2}:host::ng-deep .ace-line{display:flex;align-items:baseline;line-height:normal}:host::ng-deep .ace-line .hyperlink-hover{cursor:pointer}:host::ng-deep .ace-line>*{display:inline-block;font-kerning:none}:host::ng-deep .ace-line>*.paragraph-symbol{align-self:flex-end}:host::ng-deep .ace-content{position:inherit;box-sizing:border-box;min-width:100%;contain:style size layout;inset:0}:host::ng-deep .ace-line-group{display:inline-flex}:host::ng-deep .ace-line-group .lines-container{width:100%}:host::ng-deep .ace-line-group .numberingMarker{display:inline-flex}:host::ng-deep .ace-line-group .numberingMarker span{align-self:end}:host::ng-deep .ace-text-layer>.ace-line,:host::ng-deep .ace-text-layer>.ace-line-group,:host::ng-deep .ace-edges-layer>.ace-line,:host::ng-deep .ace-edges-layer>.ace-line-group{contain:style size layout;position:absolute;top:0;left:0;right:0}:host::ng-deep .ace-text-layer>.ace-line-group:has(.focused){z-index:1}:host::ng-deep .ace-line-group:has(.lines-container>.ace-line:first-child>span:not(:empty)){align-items:baseline}:host::ng-deep .ace-cursor-layer{z-index:4}:host::ng-deep .ace-cursor-layer.selecting{display:none}:host::ng-deep .ace-cursor{z-index:4;position:absolute;box-sizing:border-box;border-left:2px solid;transform:translateZ(0)}:host::ng-deep .ace-hidden-cursors .ace-cursor{opacity:0}:host::ng-deep .ace-hidden-cursors{visibility:hidden}:host::ng-deep .ace-animate-blinking .ace-cursor{animation-duration:1s;animation-timing-function:step-end;animation-name:blink-ace-animate;animation-iteration-count:infinite}:host::ng-deep .ace-animate-blinking.ace-smooth-blinking .ace-cursor{animation-duration:1s;animation-timing-function:ease-in-out;animation-name:blink-ace-animate-smooth}@keyframes blink-ace-animate{0%,to{opacity:1}60%{opacity:0}}@keyframes blink-ace-animate-smooth{0%,to{opacity:1}45%{opacity:1}60%{opacity:0}85%{opacity:0}}:host::ng-deep .ace-selection-layer .ace-selection{position:absolute;z-index:5}:host::ng-deep .ace-selection-layer.text-selection .ace-selection{background-color:#5ea8f766}:host::ng-deep .ace-selection-layer.notes-highlight .ace-selection{background:#ff06}:host::ng-deep .ace-underline{text-decoration:underline}:host::ng-deep .ace-bold{font-weight:700}:host::ng-deep .ace-italic{font-style:italic}:host::ng-deep .page{width:100%;position:absolute}:host::ng-deep .page-label{position:absolute;top:40px;right:96px;font-family:Courier New,Courier,monospace;font-size:16px;line-height:1}:host::ng-deep .font-baseline{visibility:hidden;height:500px}:host::ng-deep .font-baseline span:after{content:\"\";height:100%;display:inline-block}:host::ng-deep .ruler-line{position:absolute;top:0;bottom:0;width:0;border-left:1px solid rgba(0,0,0,.4);opacity:.5;display:none;z-index:1}:host::ng-deep .ruler-line.visible{display:block}:host::ng-deep .drawer-container .mat-button-toggle-button{height:48px;border-radius:4px}:host::ng-deep .drawer-container .mat-button-toggle-checked button{height:48px;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i7.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i7.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: ElementToolbarComponent, selector: "app-element-toolbar", inputs: ["isDisabled", "elements"], outputs: ["createElement"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: EditorComponent, selector: "app-editor", inputs: { customPageWidth: "customPageWidth", content: "content" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"container\">\n            <div\n                #container\n                class=\"edit-container\"></div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.container{height:100%;display:flex;justify-content:center}:host::ng-deep .ace-editor{position:relative;line-height:1;font-size:12pt;font-family:Courier New,Courier,monospace;text-align:left;width:100%;height:100%}:host::ng-deep .ace-scroller{position:absolute;overflow:hidden;top:0;bottom:0;-webkit-user-select:none;user-select:none;cursor:text}:host::ng-deep .ace-scrollbar{overflow:hidden scroll;contain:strict;position:absolute;right:0;bottom:0;z-index:6;top:0}:host::ng-deep .ace-scrollbar-inner{position:absolute;cursor:text;left:0;top:0}:host::ng-deep .ace-text-input{position:absolute;z-index:0;width:.5em;height:1em;opacity:0;background:transparent;appearance:none;border:none;resize:none;overflow:hidden;font:inherit;padding:0 1px;margin:0 -1px;contain:strict;-webkit-user-select:text;user-select:text}:host::ng-deep .ace-layer{z-index:1;position:absolute;word-wrap:normal;white-space:pre;height:100%;width:100%;box-sizing:border-box;pointer-events:none}:host::ng-deep .ace-text-layer{font:inherit!important;position:absolute;contain:style size layout;pointer-events:auto}:host::ng-deep .ace-edges-layer{z-index:2}:host::ng-deep .ace-line{display:flex;align-items:baseline;line-height:normal}:host::ng-deep .ace-line .hyperlink-hover{cursor:pointer}:host::ng-deep .ace-line>*{display:inline-block;font-kerning:none}:host::ng-deep .ace-line>*.paragraph-symbol{align-self:flex-end}:host::ng-deep .ace-content{position:inherit;box-sizing:border-box;min-width:100%;contain:style size layout;inset:0}:host::ng-deep .ace-line-group{display:inline-flex}:host::ng-deep .ace-line-group .lines-container{width:100%}:host::ng-deep .ace-line-group .numberingMarker{display:inline-flex}:host::ng-deep .ace-line-group .numberingMarker span{align-self:end}:host::ng-deep .ace-text-layer>.ace-line,:host::ng-deep .ace-text-layer>.ace-line-group,:host::ng-deep .ace-edges-layer>.ace-line,:host::ng-deep .ace-edges-layer>.ace-line-group{contain:style size layout;position:absolute;top:0;left:0;right:0}:host::ng-deep .ace-text-layer>.ace-line-group:has(.focused){z-index:1}:host::ng-deep .ace-line-group:has(.lines-container>.ace-line:first-child>span:not(:empty)){align-items:baseline}:host::ng-deep .ace-cursor-layer{z-index:4}:host::ng-deep .ace-cursor-layer.selecting{display:none}:host::ng-deep .ace-cursor{z-index:4;position:absolute;box-sizing:border-box;border-left:2px solid;transform:translateZ(0)}:host::ng-deep .ace-hidden-cursors .ace-cursor{opacity:0}:host::ng-deep .ace-hidden-cursors{visibility:hidden}:host::ng-deep .ace-animate-blinking .ace-cursor{animation-duration:1s;animation-timing-function:step-end;animation-name:blink-ace-animate;animation-iteration-count:infinite}:host::ng-deep .ace-animate-blinking.ace-smooth-blinking .ace-cursor{animation-duration:1s;animation-timing-function:ease-in-out;animation-name:blink-ace-animate-smooth}@keyframes blink-ace-animate{0%,to{opacity:1}60%{opacity:0}}@keyframes blink-ace-animate-smooth{0%,to{opacity:1}45%{opacity:1}60%{opacity:0}85%{opacity:0}}:host::ng-deep .ace-selection-layer .ace-selection{position:absolute;z-index:5}:host::ng-deep .ace-selection-layer.text-selection .ace-selection{background-color:#5ea8f766}:host::ng-deep .ace-selection-layer.notes-highlight .ace-selection{background:#ff06}:host::ng-deep .ace-underline{text-decoration:underline}:host::ng-deep .ace-bold{font-weight:700}:host::ng-deep .ace-italic{font-style:italic}:host::ng-deep .page{width:100%;position:absolute}:host::ng-deep .page-label{position:absolute;top:40px;right:96px;font-family:Courier New,Courier,monospace;font-size:16px;line-height:1}:host::ng-deep .font-baseline{visibility:hidden;height:500px}:host::ng-deep .font-baseline span:after{content:\"\";height:100%;display:inline-block}:host::ng-deep .ruler-line{position:absolute;top:0;bottom:0;width:0;border-left:1px solid rgba(0,0,0,.4);opacity:.5;display:none;z-index:1}:host::ng-deep .ruler-line.visible{display:block}:host::ng-deep .drawer-container .mat-button-toggle-button{height:48px;border-radius:4px}:host::ng-deep .drawer-container .mat-button-toggle-checked button{height:48px;border-radius:4px}\n"], dependencies: [{ kind: "component", type: i6.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i6.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i6.MatDrawerContent, selector: "mat-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"container\">\n            <div\n                #container\n                class=\"edit-container\"></div>\n            <app-element-toolbar\n                *ngIf=\"elements.length\"\n                [elements]=\"elements\"\n                [isDisabled]=\"isViewOnly$ | async\"\n                (createElement)=\"createElement($event)\"></app-element-toolbar>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.container{height:100%;display:flex;justify-content:center}app-element-toolbar{right:15px;top:50px}:host::ng-deep .ace-editor{position:relative;line-height:1;font-size:12pt;font-family:Courier New,Courier,monospace;text-align:left;width:100%;height:100%}:host::ng-deep .ace-scroller{position:absolute;overflow:hidden;top:0;bottom:0;-webkit-user-select:none;user-select:none;cursor:text}:host::ng-deep .ace-scrollbar{overflow:hidden scroll;contain:strict;position:absolute;right:0;bottom:0;z-index:6;top:0}:host::ng-deep .ace-scrollbar-inner{position:absolute;cursor:text;left:0;top:0}:host::ng-deep .ace-text-input{position:absolute;z-index:0;width:.5em;height:1em;opacity:0;background:transparent;appearance:none;border:none;resize:none;overflow:hidden;font:inherit;padding:0 1px;margin:0 -1px;contain:strict;-webkit-user-select:text;user-select:text}:host::ng-deep .ace-layer{z-index:1;position:absolute;word-wrap:normal;white-space:pre;height:100%;width:100%;box-sizing:border-box;pointer-events:none}:host::ng-deep .ace-text-layer{font:inherit!important;position:absolute;contain:style size layout;pointer-events:auto}:host::ng-deep .ace-edges-layer{z-index:2}:host::ng-deep .ace-line{display:flex;align-items:baseline;line-height:normal}:host::ng-deep .ace-line .hyperlink-hover{cursor:pointer}:host::ng-deep .ace-line>*{display:inline-block;font-kerning:none}:host::ng-deep .ace-line>*.paragraph-symbol{align-self:flex-end}:host::ng-deep .ace-content{position:inherit;box-sizing:border-box;min-width:100%;contain:style size layout;inset:0}:host::ng-deep .ace-line-group{display:inline-flex}:host::ng-deep .ace-line-group .lines-container{width:100%}:host::ng-deep .ace-line-group .numberingMarker{display:inline-flex}:host::ng-deep .ace-line-group .numberingMarker span{align-self:end}:host::ng-deep .ace-text-layer>.ace-line,:host::ng-deep .ace-text-layer>.ace-line-group,:host::ng-deep .ace-edges-layer>.ace-line,:host::ng-deep .ace-edges-layer>.ace-line-group{contain:style size layout;position:absolute;top:0;left:0;right:0}:host::ng-deep .ace-text-layer>.ace-line-group:has(.focused){z-index:1}:host::ng-deep .ace-line-group:has(.lines-container>.ace-line:first-child>span:not(:empty)){align-items:baseline}:host::ng-deep .ace-cursor-layer{z-index:4}:host::ng-deep .ace-cursor-layer.selecting{display:none}:host::ng-deep .ace-cursor{z-index:4;position:absolute;box-sizing:border-box;border-left:2px solid;transform:translateZ(0)}:host::ng-deep .ace-hidden-cursors .ace-cursor{opacity:0}:host::ng-deep .ace-hidden-cursors{visibility:hidden}:host::ng-deep .ace-animate-blinking .ace-cursor{animation-duration:1s;animation-timing-function:step-end;animation-name:blink-ace-animate;animation-iteration-count:infinite}:host::ng-deep .ace-animate-blinking.ace-smooth-blinking .ace-cursor{animation-duration:1s;animation-timing-function:ease-in-out;animation-name:blink-ace-animate-smooth}@keyframes blink-ace-animate{0%,to{opacity:1}60%{opacity:0}}@keyframes blink-ace-animate-smooth{0%,to{opacity:1}45%{opacity:1}60%{opacity:0}85%{opacity:0}}:host::ng-deep .ace-selection-layer .ace-selection{position:absolute;z-index:5}:host::ng-deep .ace-selection-layer.text-selection .ace-selection{background-color:#5ea8f766}:host::ng-deep .ace-selection-layer.notes-highlight .ace-selection{background:#ff06}:host::ng-deep .ace-underline{text-decoration:underline}:host::ng-deep .ace-bold{font-weight:700}:host::ng-deep .ace-italic{font-style:italic}:host::ng-deep .page{width:100%;position:absolute}:host::ng-deep .page-label{position:absolute;top:40px;right:96px;font-family:Courier New,Courier,monospace;font-size:16px;line-height:1}:host::ng-deep .font-baseline{visibility:hidden;height:500px}:host::ng-deep .font-baseline span:after{content:\"\";height:100%;display:inline-block}:host::ng-deep .ruler-line{position:absolute;top:0;bottom:0;width:0;border-left:1px solid rgba(0,0,0,.4);opacity:.5;display:none;z-index:1}:host::ng-deep .ruler-line.visible{display:block}:host::ng-deep .drawer-container .mat-button-toggle-button{height:48px;border-radius:4px}:host::ng-deep .drawer-container .mat-button-toggle-checked button{height:48px;border-radius:4px}\n"] }]
+            args: [{ selector: 'app-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"container\">\n            <div\n                #container\n                class=\"edit-container\"></div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.container{height:100%;display:flex;justify-content:center}:host::ng-deep .ace-editor{position:relative;line-height:1;font-size:12pt;font-family:Courier New,Courier,monospace;text-align:left;width:100%;height:100%}:host::ng-deep .ace-scroller{position:absolute;overflow:hidden;top:0;bottom:0;-webkit-user-select:none;user-select:none;cursor:text}:host::ng-deep .ace-scrollbar{overflow:hidden scroll;contain:strict;position:absolute;right:0;bottom:0;z-index:6;top:0}:host::ng-deep .ace-scrollbar-inner{position:absolute;cursor:text;left:0;top:0}:host::ng-deep .ace-text-input{position:absolute;z-index:0;width:.5em;height:1em;opacity:0;background:transparent;appearance:none;border:none;resize:none;overflow:hidden;font:inherit;padding:0 1px;margin:0 -1px;contain:strict;-webkit-user-select:text;user-select:text}:host::ng-deep .ace-layer{z-index:1;position:absolute;word-wrap:normal;white-space:pre;height:100%;width:100%;box-sizing:border-box;pointer-events:none}:host::ng-deep .ace-text-layer{font:inherit!important;position:absolute;contain:style size layout;pointer-events:auto}:host::ng-deep .ace-edges-layer{z-index:2}:host::ng-deep .ace-line{display:flex;align-items:baseline;line-height:normal}:host::ng-deep .ace-line .hyperlink-hover{cursor:pointer}:host::ng-deep .ace-line>*{display:inline-block;font-kerning:none}:host::ng-deep .ace-line>*.paragraph-symbol{align-self:flex-end}:host::ng-deep .ace-content{position:inherit;box-sizing:border-box;min-width:100%;contain:style size layout;inset:0}:host::ng-deep .ace-line-group{display:inline-flex}:host::ng-deep .ace-line-group .lines-container{width:100%}:host::ng-deep .ace-line-group .numberingMarker{display:inline-flex}:host::ng-deep .ace-line-group .numberingMarker span{align-self:end}:host::ng-deep .ace-text-layer>.ace-line,:host::ng-deep .ace-text-layer>.ace-line-group,:host::ng-deep .ace-edges-layer>.ace-line,:host::ng-deep .ace-edges-layer>.ace-line-group{contain:style size layout;position:absolute;top:0;left:0;right:0}:host::ng-deep .ace-text-layer>.ace-line-group:has(.focused){z-index:1}:host::ng-deep .ace-line-group:has(.lines-container>.ace-line:first-child>span:not(:empty)){align-items:baseline}:host::ng-deep .ace-cursor-layer{z-index:4}:host::ng-deep .ace-cursor-layer.selecting{display:none}:host::ng-deep .ace-cursor{z-index:4;position:absolute;box-sizing:border-box;border-left:2px solid;transform:translateZ(0)}:host::ng-deep .ace-hidden-cursors .ace-cursor{opacity:0}:host::ng-deep .ace-hidden-cursors{visibility:hidden}:host::ng-deep .ace-animate-blinking .ace-cursor{animation-duration:1s;animation-timing-function:step-end;animation-name:blink-ace-animate;animation-iteration-count:infinite}:host::ng-deep .ace-animate-blinking.ace-smooth-blinking .ace-cursor{animation-duration:1s;animation-timing-function:ease-in-out;animation-name:blink-ace-animate-smooth}@keyframes blink-ace-animate{0%,to{opacity:1}60%{opacity:0}}@keyframes blink-ace-animate-smooth{0%,to{opacity:1}45%{opacity:1}60%{opacity:0}85%{opacity:0}}:host::ng-deep .ace-selection-layer .ace-selection{position:absolute;z-index:5}:host::ng-deep .ace-selection-layer.text-selection .ace-selection{background-color:#5ea8f766}:host::ng-deep .ace-selection-layer.notes-highlight .ace-selection{background:#ff06}:host::ng-deep .ace-underline{text-decoration:underline}:host::ng-deep .ace-bold{font-weight:700}:host::ng-deep .ace-italic{font-style:italic}:host::ng-deep .page{width:100%;position:absolute}:host::ng-deep .page-label{position:absolute;top:40px;right:96px;font-family:Courier New,Courier,monospace;font-size:16px;line-height:1}:host::ng-deep .font-baseline{visibility:hidden;height:500px}:host::ng-deep .font-baseline span:after{content:\"\";height:100%;display:inline-block}:host::ng-deep .ruler-line{position:absolute;top:0;bottom:0;width:0;border-left:1px solid rgba(0,0,0,.4);opacity:.5;display:none;z-index:1}:host::ng-deep .ruler-line.visible{display:block}:host::ng-deep .drawer-container .mat-button-toggle-button{height:48px;border-radius:4px}:host::ng-deep .drawer-container .mat-button-toggle-checked button{height:48px;border-radius:4px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentService }, { type: EditorService }, { type: i0.Injector }, { type: RegulatorService }, { type: CommandsService }, { type: i5.Clipboard }], propDecorators: { customPageWidth: [{
                 type: Input
             }], content: [{
@@ -11381,7 +11357,6 @@ class EditorModule {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: EditorModule, declarations: [EditorComponent,
-            ElementToolbarComponent,
             NoderEdgeComponent,
             NoderImageComponent,
             NoderTabComponent,
@@ -11404,7 +11379,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
             args: [{
                     declarations: [
                         EditorComponent,
-                        ElementToolbarComponent,
                         NoderEdgeComponent,
                         NoderImageComponent,
                         NoderTabComponent,
@@ -11427,70 +11401,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 }]
         }] });
 
-var Alignment;
-(function (Alignment) {
-    Alignment[Alignment["Left"] = 0] = "Left";
-    Alignment[Alignment["Center"] = 1] = "Center";
-    Alignment[Alignment["Right"] = 2] = "Right";
-    Alignment[Alignment["Justify"] = 3] = "Justify";
-})(Alignment || (Alignment = {}));
+var Mode;
+(function (Mode) {
+    Mode[Mode["Edit"] = 0] = "Edit";
+    Mode[Mode["Fill"] = 1] = "Fill";
+    Mode[Mode["View"] = 2] = "View";
+})(Mode || (Mode = {}));
 
-class InsertTableComponent {
-    constructor() {
-        this.selectSizes = new EventEmitter();
-        this.maxRows = 20;
-        this.minRows = 5;
-        this.maxColumns = 20;
-        this.minColumns = 10;
-        this.rows = Array(this.minRows)
-            .fill(undefined)
-            .map((_, i) => i + 1);
-        this.columns = Array(this.minColumns)
-            .fill(undefined)
-            .map((_, i) => i + 1);
-        this.currentRow = 1;
-        this.currentColumn = 1;
+class EditorTitleComponent {
+    set rename$(value) {
+        value?.subscribe(() => this.setTitleActive(this.titleSpan.nativeElement));
     }
-    onCreateTable(rows, columns) {
-        this.selectSizes.emit({ rows, columns });
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.changeMode = new EventEmitter();
+        this.renameDocumentTitle = new EventEmitter();
+        this.selectedMode = Mode.Edit;
+        this.modeOptions = [
+            {
+                id: Mode.Edit,
+                text: 'Edit document',
+                icon: 'icon-edit-mode'
+            },
+            {
+                id: Mode.Fill,
+                text: 'Fill or print document',
+                icon: 'icon-fill-done'
+            },
+            {
+                id: Mode.View,
+                text: 'Read or print document',
+                icon: 'icon-view'
+            }
+        ];
     }
-    onCellHover(row, column) {
-        this.currentRow = row;
-        this.currentColumn = column;
-        this.rows = this.calculateArray(row, this.rows, this.minRows, this.maxRows);
-        this.columns = this.calculateArray(column, this.columns, this.minColumns, this.maxColumns);
+    onRenameTitle(event) {
+        event.target.contentEditable = 'false';
+        this.title = event.target.textContent || DEFAULT_FILE_NAME;
+        event.target.innerText = this.title;
+        this.renameDocumentTitle.emit(this.title);
+        this.cdr.detectChanges();
     }
-    calculateArray(currentValue, arrayValues, minValue, maxValue) {
-        if (currentValue >= arrayValues.length && currentValue <= maxValue) {
-            const count = currentValue >= maxValue ? maxValue : arrayValues.length + 1;
-            return Array(count)
-                .fill(undefined)
-                .map((_, i) => i + 1);
-        }
-        else if (currentValue < arrayValues.length && arrayValues.length > minValue) {
-            const count = currentValue <= minValue ? minValue + 1 : arrayValues.length - (arrayValues.length - currentValue) + 1;
-            return Array(count)
-                .fill(undefined)
-                .map((_, i) => i + 1);
+    onFocus(event) {
+        this.setTitleActive(event.target);
+    }
+    setTitleActive(element) {
+        if (element.contentEditable === 'true') {
+            return;
         }
-        return arrayValues;
+        element.contentEditable = 'true';
+        const range = document.createRange();
+        const sel = window.getSelection();
+        range.setStart(element.firstChild, element.textContent.length);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        element.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InsertTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: InsertTableComponent, isStandalone: true, selector: "app-insert-table", outputs: { selectSizes: "selectSizes" }, ngImport: i0, template: "<div class=\"table-size-container\">\n    <ng-container *ngFor=\"let row of rows\">\n        <div class=\"row\">\n            <ng-container *ngFor=\"let column of columns\">\n                <div\n                    class=\"cell-container\"\n                    (mouseenter)=\"onCellHover(row, column)\"\n                    (click)=\"onCreateTable(row, column)\">\n                    <div\n                        class=\"cell\"\n                        [class.highlighted]=\"row <= currentRow && column <= currentColumn\"></div>\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n    <div class=\"table-size\">{{ currentColumn }} x {{ currentRow }}</div>\n</div>\n", styles: [":host{border-radius:4px}.table-size-container{padding:14px 10px 8px}.row{display:flex;flex-direction:row}.cell-container{padding:2px}.cell{height:16px;width:16px}.table-size{display:flex;justify-content:center;padding-top:14px;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorTitleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: EditorTitleComponent, isStandalone: true, selector: "app-editor-title", inputs: { title: "title", rename$: "rename$" }, outputs: { changeMode: "changeMode", renameDocumentTitle: "renameDocumentTitle" }, providers: [ExternalElementService], viewQueries: [{ propertyName: "titleSpan", first: true, predicate: ["titleSpan"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"menu-header\">\n    <div class=\"file-name\">\n        <span\n            #titleSpan\n            class=\"title\"\n            matTooltip=\"Double click to rename\"\n            (blur)=\"onRenameTitle($event)\"\n            (keydown.enter)=\"$event.target.blur()\"\n            (dblclick)=\"onFocus($event)\">\n            {{ title }}\n        </span>\n    </div>\n</div>\n<div class=\"editor-mode\">\n    <button\n        *ngFor=\"let mode of modeOptions\"\n        mat-icon-button\n        [class.selected-mode]=\"selectedMode === mode.id\"\n        [matTooltip]=\"mode.text\"\n        (click)=\"selectedMode = mode.id; changeMode.emit(mode.id)\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"{{ mode.icon }}\"></mat-icon>\n    </button>\n</div>\n", styles: [":host{display:flex;position:relative;align-items:center;width:100%}.menu-header{width:35%;line-height:0;z-index:1}.file-name{display:block;margin:0 8px;overflow:hidden}.title{font-size:18px;font-weight:400;line-height:normal;outline:none;display:inline-block;white-space:nowrap;min-width:1px;overflow:hidden;max-width:100%;-webkit-user-select:none;user-select:none}.title:not(:focus){text-overflow:ellipsis}.editor-mode{display:flex;position:absolute;justify-content:center;width:100%}.mdc-icon-button{min-width:40px;min-height:40px;width:40px;height:40px;padding:8px}.mdc-icon-button:not(:first-child){margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSelectModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InsertTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorTitleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-insert-table', template: "<div class=\"table-size-container\">\n    <ng-container *ngFor=\"let row of rows\">\n        <div class=\"row\">\n            <ng-container *ngFor=\"let column of columns\">\n                <div\n                    class=\"cell-container\"\n                    (mouseenter)=\"onCellHover(row, column)\"\n                    (click)=\"onCreateTable(row, column)\">\n                    <div\n                        class=\"cell\"\n                        [class.highlighted]=\"row <= currentRow && column <= currentColumn\"></div>\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n    <div class=\"table-size\">{{ currentColumn }} x {{ currentRow }}</div>\n</div>\n", styles: [":host{border-radius:4px}.table-size-container{padding:14px 10px 8px}.row{display:flex;flex-direction:row}.cell-container{padding:2px}.cell{height:16px;width:16px}.table-size{display:flex;justify-content:center;padding-top:14px;font-size:14px}\n"] }]
-        }], propDecorators: { selectSizes: [{
+            args: [{ standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule, MatSelectModule], providers: [ExternalElementService], selector: 'app-editor-title', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"menu-header\">\n    <div class=\"file-name\">\n        <span\n            #titleSpan\n            class=\"title\"\n            matTooltip=\"Double click to rename\"\n            (blur)=\"onRenameTitle($event)\"\n            (keydown.enter)=\"$event.target.blur()\"\n            (dblclick)=\"onFocus($event)\">\n            {{ title }}\n        </span>\n    </div>\n</div>\n<div class=\"editor-mode\">\n    <button\n        *ngFor=\"let mode of modeOptions\"\n        mat-icon-button\n        [class.selected-mode]=\"selectedMode === mode.id\"\n        [matTooltip]=\"mode.text\"\n        (click)=\"selectedMode = mode.id; changeMode.emit(mode.id)\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"{{ mode.icon }}\"></mat-icon>\n    </button>\n</div>\n", styles: [":host{display:flex;position:relative;align-items:center;width:100%}.menu-header{width:35%;line-height:0;z-index:1}.file-name{display:block;margin:0 8px;overflow:hidden}.title{font-size:18px;font-weight:400;line-height:normal;outline:none;display:inline-block;white-space:nowrap;min-width:1px;overflow:hidden;max-width:100%;-webkit-user-select:none;user-select:none}.title:not(:focus){text-overflow:ellipsis}.editor-mode{display:flex;position:absolute;justify-content:center;width:100%}.mdc-icon-button{min-width:40px;min-height:40px;width:40px;height:40px;padding:8px}.mdc-icon-button:not(:first-child){margin-left:10px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { title: [{
+                type: Input
+            }], rename$: [{
+                type: Input
+            }], changeMode: [{
+                type: Output
+            }], renameDocumentTitle: [{
                 type: Output
+            }], titleSpan: [{
+                type: ViewChild,
+                args: ['titleSpan', { static: true }]
             }] } });
 
-var Mode;
-(function (Mode) {
-    Mode[Mode["Edit"] = 0] = "Edit";
-    Mode[Mode["Fill"] = 1] = "Fill";
-    Mode[Mode["View"] = 2] = "View";
-})(Mode || (Mode = {}));
+class EditorSearchDialogComponent extends ObserverComponent {
+    constructor(editorService) {
+        super();
+        this.editorService = editorService;
+        this.searchControl = new FormControl('');
+        this.replaceControl = new FormControl('');
+        this.isReplace = false;
+        this.searchIteration$ = this.editorService.searchIteration$;
+    }
+    ngOnInit() {
+        this.subscriptions.push(this.searchSubscription());
+    }
+    onClose() {
+        this.editorService.openSearchDialog = false;
+    }
+    findNext() {
+        this.editorService.searchOptions = {
+            term: this.searchControl.value,
+            skipCurrent: true,
+            backwards: false
+        };
+    }
+    findPrev() {
+        this.editorService.searchOptions = {
+            term: this.searchControl.value,
+            skipCurrent: true,
+            backwards: true
+        };
+    }
+    setReplace() {
+        this.isReplace = !this.isReplace;
+    }
+    replace() {
+        this.editorService.replace = { replaceValue: this.replaceControl.value, searchValue: this.searchControl.value };
+    }
+    searchSubscription() {
+        return this.searchControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe(() => {
+            this.editorService.searchOptions = {
+                term: this.searchControl.value,
+                skipCurrent: false,
+                backwards: false
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorSearchDialogComponent, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: EditorSearchDialogComponent, isStandalone: true, selector: "app-editor-search-dialog", providers: [ExternalElementService], usesInheritance: true, ngImport: i0, template: "<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>Search for</mat-label>\n        <input\n            matInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findPrev()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-onleft\"></mat-icon>\n    </button>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findNext()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-onright\"></mat-icon>\n    </button>\n</div>\n<ng-container *ngIf=\"{ searchIteration: searchIteration$ | async } as data\">\n    <div\n        class=\"replace-form\"\n        *ngIf=\"isReplace\">\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>Replace with</mat-label>\n            <input\n                matInput\n                [formControl]=\"replaceControl\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                (keydown.enter)=\"replace()\" />\n        </mat-form-field>\n        <button\n            type=\"button\"\n            mat-button\n            (click)=\"replace()\">\n            Replace\n        </button>\n    </div>\n    <div class=\"search-options\">\n        <button\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Toggle Replace Mode\"\n            (click)=\"setReplace()\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n        </button>\n        <div class=\"counter\">\n            <span>{{ data.searchIteration?.current ?? 0 }} of {{ data.searchIteration?.total ?? 0 }}</span>\n        </div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Close\"\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-cancel-thin\"></mat-icon>\n        </button>\n    </div>\n</ng-container>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;padding:3px}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{display:flex}mat-form-field{padding-left:10px}.mdc-button{font-size:12px;padding:0 8px;min-width:unset}.search-options{line-height:40px}.search-options .counter{text-align:center;flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorSearchDialogComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, FormsModule, MatButtonModule, MatIconModule, MatInputModule, MatTooltipModule, ReactiveFormsModule], providers: [ExternalElementService], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-editor-search-dialog', template: "<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>Search for</mat-label>\n        <input\n            matInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findPrev()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-onleft\"></mat-icon>\n    </button>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findNext()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-onright\"></mat-icon>\n    </button>\n</div>\n<ng-container *ngIf=\"{ searchIteration: searchIteration$ | async } as data\">\n    <div\n        class=\"replace-form\"\n        *ngIf=\"isReplace\">\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>Replace with</mat-label>\n            <input\n                matInput\n                [formControl]=\"replaceControl\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                (keydown.enter)=\"replace()\" />\n        </mat-form-field>\n        <button\n            type=\"button\"\n            mat-button\n            (click)=\"replace()\">\n            Replace\n        </button>\n    </div>\n    <div class=\"search-options\">\n        <button\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Toggle Replace Mode\"\n            (click)=\"setReplace()\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n        </button>\n        <div class=\"counter\">\n            <span>{{ data.searchIteration?.current ?? 0 }} of {{ data.searchIteration?.total ?? 0 }}</span>\n        </div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Close\"\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-cancel-thin\"></mat-icon>\n        </button>\n    </div>\n</ng-container>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;padding:3px}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{display:flex}mat-form-field{padding-left:10px}.mdc-button{font-size:12px;padding:0 8px;min-width:unset}.search-options{line-height:40px}.search-options .counter{text-align:center;flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}\n"] }]
+        }], ctorParameters: () => [{ type: EditorService }] });
+
+var Alignment;
+(function (Alignment) {
+    Alignment[Alignment["Left"] = 0] = "Left";
+    Alignment[Alignment["Center"] = 1] = "Center";
+    Alignment[Alignment["Right"] = 2] = "Right";
+    Alignment[Alignment["Justify"] = 3] = "Justify";
+})(Alignment || (Alignment = {}));
+
+class NumberingLevelModel {
+    constructor(fields) {
+        if (fields) {
+            if (fields.markerStyle) {
+                fields.markerStyle = new TextStyleModel(fields.markerStyle);
+            }
+            Object.assign(this, fields);
+        }
+    }
+}
 
 var NumberingTemplateType;
 (function (NumberingTemplateType) {
@@ -11508,17 +11564,6 @@ var NumberingTemplateType;
     NumberingTemplateType[NumberingTemplateType["NumberList6"] = 11] = "NumberList6";
 })(NumberingTemplateType || (NumberingTemplateType = {}));
 
-class NumberingLevelModel {
-    constructor(fields) {
-        if (fields) {
-            if (fields.markerStyle) {
-                fields.markerStyle = new TextStyleModel(fields.markerStyle);
-            }
-            Object.assign(this, fields);
-        }
-    }
-}
-
 const NumberingTemplates = [
     {
         templateType: NumberingTemplateType.NumberList1,
@@ -12896,7 +12941,7 @@ class CustomIconService {
         this.matIconRegistry.addSvgIconLiteral('number-5', this.sanitizer.bypassSecurityTrustHtml(SVG_NUMBER_5));
         this.matIconRegistry.addSvgIconLiteral('number-6', this.sanitizer.bypassSecurityTrustHtml(SVG_NUMBER_6));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CustomIconService, deps: [{ token: i3.MatIconRegistry }, { token: i2$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CustomIconService, deps: [{ token: i3.MatIconRegistry }, { token: i2$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CustomIconService, providedIn: 'any' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CustomIconService, decorators: [{
@@ -12904,15 +12949,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
             args: [{
                     providedIn: 'any'
                 }]
-        }], ctorParameters: () => [{ type: i3.MatIconRegistry }, { type: i2$2.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i3.MatIconRegistry }, { type: i2$3.DomSanitizer }] });
+
+class InsertTableComponent {
+    constructor() {
+        this.selectSizes = new EventEmitter();
+        this.maxRows = 20;
+        this.minRows = 5;
+        this.maxColumns = 20;
+        this.minColumns = 10;
+        this.rows = Array(this.minRows)
+            .fill(undefined)
+            .map((_, i) => i + 1);
+        this.columns = Array(this.minColumns)
+            .fill(undefined)
+            .map((_, i) => i + 1);
+        this.currentRow = 1;
+        this.currentColumn = 1;
+    }
+    onCreateTable(rows, columns) {
+        this.selectSizes.emit({ rows, columns });
+    }
+    onCellHover(row, column) {
+        this.currentRow = row;
+        this.currentColumn = column;
+        this.rows = this.calculateArray(row, this.rows, this.minRows, this.maxRows);
+        this.columns = this.calculateArray(column, this.columns, this.minColumns, this.maxColumns);
+    }
+    calculateArray(currentValue, arrayValues, minValue, maxValue) {
+        if (currentValue >= arrayValues.length && currentValue <= maxValue) {
+            const count = currentValue >= maxValue ? maxValue : arrayValues.length + 1;
+            return Array(count)
+                .fill(undefined)
+                .map((_, i) => i + 1);
+        }
+        else if (currentValue < arrayValues.length && arrayValues.length > minValue) {
+            const count = currentValue <= minValue ? minValue + 1 : arrayValues.length - (arrayValues.length - currentValue) + 1;
+            return Array(count)
+                .fill(undefined)
+                .map((_, i) => i + 1);
+        }
+        return arrayValues;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InsertTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: InsertTableComponent, isStandalone: true, selector: "app-insert-table", outputs: { selectSizes: "selectSizes" }, ngImport: i0, template: "<div class=\"table-size-container\">\n    <ng-container *ngFor=\"let row of rows\">\n        <div class=\"row\">\n            <ng-container *ngFor=\"let column of columns\">\n                <div\n                    class=\"cell-container\"\n                    (mouseenter)=\"onCellHover(row, column)\"\n                    (click)=\"onCreateTable(row, column)\">\n                    <div\n                        class=\"cell\"\n                        [class.highlighted]=\"row <= currentRow && column <= currentColumn\"></div>\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n    <div class=\"table-size\">{{ currentColumn }} x {{ currentRow }}</div>\n</div>\n", styles: [":host{border-radius:4px}.table-size-container{padding:14px 10px 8px}.row{display:flex;flex-direction:row}.cell-container{padding:2px}.cell{height:16px;width:16px}.table-size{display:flex;justify-content:center;padding-top:14px;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InsertTableComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-insert-table', template: "<div class=\"table-size-container\">\n    <ng-container *ngFor=\"let row of rows\">\n        <div class=\"row\">\n            <ng-container *ngFor=\"let column of columns\">\n                <div\n                    class=\"cell-container\"\n                    (mouseenter)=\"onCellHover(row, column)\"\n                    (click)=\"onCreateTable(row, column)\">\n                    <div\n                        class=\"cell\"\n                        [class.highlighted]=\"row <= currentRow && column <= currentColumn\"></div>\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n    <div class=\"table-size\">{{ currentColumn }} x {{ currentRow }}</div>\n</div>\n", styles: [":host{border-radius:4px}.table-size-container{padding:14px 10px 8px}.row{display:flex;flex-direction:row}.cell-container{padding:2px}.cell{height:16px;width:16px}.table-size{display:flex;justify-content:center;padding-top:14px;font-size:14px}\n"] }]
+        }], propDecorators: { selectSizes: [{
+                type: Output
+            }] } });
 
-class EditorHeaderComponent {
+class MenuDropdownsComponent {
     set historyInfo(value) {
         this.canUndo = value.step !== -1;
         this.canRedo = value.step < value.lastStep;
     }
     set styles(value) {
-        this._styles = value;
         this._styles = value;
         this.numberingTemplateType = ToolbarStylesHelper.getNumberingTemplateType(value.numberingLevelsStyles);
     }
@@ -12930,12 +13024,11 @@ class EditorHeaderComponent {
         this.insertPageBreak = new EventEmitter();
         this.createDocument = new EventEmitter();
         this.insertImage = new EventEmitter();
-        this.changeMode = new EventEmitter();
-        this.renameDocumentTitle = new EventEmitter();
+        this.rename = new EventEmitter();
         this.delete = new EventEmitter();
         this.openEditMenu = new EventEmitter();
-        this.undo = new EventEmitter();
         this.redo = new EventEmitter();
+        this.undo = new EventEmitter();
         this.cutSelected = new EventEmitter();
         this.copySelected = new EventEmitter();
         this.pasteClipboardData = new EventEmitter();
@@ -12948,31 +13041,9 @@ class EditorHeaderComponent {
         this.setNumberingTemplateType = new EventEmitter();
         this.removeNumberings = new EventEmitter();
         this.insertTable = new EventEmitter();
-        this.mode = Mode;
-        this.alignments = Alignment;
-        this.selectedMode = Mode.Edit;
         this.numberingTemplateTypes = NumberingTemplateType;
-        this.modeOptions = [
-            {
-                id: Mode.Edit,
-                name: 'Editing',
-                text: 'Edit document',
-                icon: 'icon-edit'
-            },
-            {
-                id: Mode.Fill,
-                name: 'Filling',
-                text: 'Fill or print document',
-                icon: 'icon-fill-done'
-            },
-            {
-                id: Mode.View,
-                name: 'Viewing',
-                text: 'Read or print document',
-                icon: 'icon-view'
-            }
-        ];
         this.showInsertTableMenu = false;
+        this.alignments = Alignment;
         this.customIconService.register();
         this.elements = this.injector.get(EXTERNAL_ELEMENT_SERVICE).elements;
     }
@@ -12980,59 +13051,10 @@ class EditorHeaderComponent {
         this.openFileFromDisk.emit(event);
         event.target.value = null;
     }
-    onSaveAs() {
-        this.saveAs.emit();
-    }
-    onPrint() {
-        this.print.emit();
-    }
-    onDelete() {
-        this.delete.emit();
-    }
     onInsertImage(event) {
         this.insertImage.emit(event);
         event.target.value = null;
     }
-    onInsertLink() {
-        this.insertLink.emit();
-    }
-    onRenameTitle(event) {
-        event.target.contentEditable = 'false';
-        this.title = event.target.textContent || DEFAULT_FILE_NAME;
-        event.target.innerText = this.title;
-        this.renameDocumentTitle.emit(this.title);
-        this.cdr.detectChanges();
-    }
-    onRename() {
-        this.setTitleActive(this.titleSpan.nativeElement);
-    }
-    onFocus(event) {
-        this.setTitleActive(event.target);
-    }
-    menuOpened() {
-        this.openEditMenu.emit();
-    }
-    onUndo() {
-        this.undo.emit();
-    }
-    onRedo() {
-        this.redo.emit();
-    }
-    onCut() {
-        this.cutSelected.emit();
-    }
-    onCopy() {
-        this.copySelected.emit();
-    }
-    onPaste() {
-        this.pasteClipboardData.emit();
-    }
-    onSelectAll() {
-        this.selectAll.emit();
-    }
-    onRemoveSelected() {
-        this.removeSelected.emit();
-    }
     onSelectFormat(alignment) {
         this.changeParagraphStyle.emit(new ParagraphStyleModel({ alignment }));
     }
@@ -13057,24 +13079,19 @@ class EditorHeaderComponent {
             this.setNumberingTemplateType.emit(templateLevels);
         }
     }
+    onTableInsertMenuClosed() {
+        this.tableInsertMenu._animationDone
+            .pipe(filter(e => e.toState === 'void'), take(1))
+            .subscribe(() => {
+            this.showInsertTableMenu = false;
+            this.cdr.markForCheck();
+        });
+    }
     async onCreate(model) {
         const data = await model.factoryMethod();
         const element = new ElementDataModel(model.type, data.width, data.height, data.guid);
         this.createElement.emit(element);
     }
-    setTitleActive(element) {
-        if (element.contentEditable === 'true') {
-            return;
-        }
-        element.contentEditable = 'true';
-        const range = document.createRange();
-        const sel = window.getSelection();
-        range.setStart(element.firstChild, element.textContent.length);
-        range.collapse(true);
-        sel.removeAllRanges();
-        sel.addRange(range);
-        element.focus();
-    }
     checkFontLoadedAndApplyStyle(style) {
         const newStyles = { ...this.styles, ...style };
         const italic = newStyles.italic ? 'italic ' : '';
@@ -13091,41 +13108,22 @@ class EditorHeaderComponent {
             // continue regardless of error
         });
     }
-    onTableInsertMenuClosed() {
-        this.tableInsertMenu._animationDone
-            .pipe(filter(e => e.toState === 'void'), take(1))
-            .subscribe(() => {
-            this.showInsertTableMenu = false;
-            this.cdr.markForCheck();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: CustomIconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: EditorHeaderComponent, isStandalone: true, selector: "app-editor-header", inputs: { isViewOnly: "isViewOnly", hasSelection: "hasSelection", clipboardData: "clipboardData", title: "title", historyInfo: "historyInfo", styles: "styles" }, outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", print: "print", insertPageBreak: "insertPageBreak", createDocument: "createDocument", insertImage: "insertImage", changeMode: "changeMode", renameDocumentTitle: "renameDocumentTitle", delete: "delete", openEditMenu: "openEditMenu", undo: "undo", redo: "redo", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected", insertLink: "insertLink", createElement: "createElement", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertTable: "insertTable" }, providers: [ExternalElementService], viewQueries: [{ propertyName: "titleSpan", first: true, predicate: ["titleSpan"], descendants: true, static: true }, { propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], ngImport: i0, template: "<div class=\"menu-header\">\n    <div class=\"file-name\">\n        <span\n            #titleSpan\n            class=\"title\"\n            matTooltip=\"Double click to rename\"\n            (blur)=\"onRenameTitle($event)\"\n            (keydown.enter)=\"$event.target.blur()\"\n            (dblclick)=\"onFocus($event)\">\n            {{ title }}\n        </span>\n    </div>\n    <div class=\"menu-buttons\">\n        <button\n            id=\"editor-header-menu-file\"\n            mat-button\n            [matMenuTriggerFor]=\"fileMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\">\n            File\n        </button>\n        <mat-menu #fileMenu=\"matMenu\">\n            <button\n                *ngIf=\"!isViewOnly\"\n                id=\"editor-header-menu-item-new\"\n                mat-menu-item\n                (click)=\"createDocument.emit()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-add-new\"></mat-icon>\n                    <span class=\"menu-item-text\">New</span>\n                </div>\n            </button>\n            <input\n                #fileInput\n                class=\"upload-input\"\n                accept=\".docx\"\n                type=\"file\"\n                id=\"file-input\"\n                (change)=\"onOpenFileFromDisk($event)\" />\n            <button\n                *ngIf=\"!isViewOnly\"\n                id=\"editor-header-menu-item-open-from\"\n                mat-menu-item\n                (click)=\"fileInput.click()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-open-from\"></mat-icon>\n                    <span class=\"menu-item-text\">Open From</span>\n                    <span class=\"hot-keys\">Ctrl+O</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-save-as\"\n                mat-menu-item\n                (click)=\"onSaveAs()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-save\"></mat-icon>\n                    <span class=\"menu-item-text\">Save As</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-rename\"\n                mat-menu-item\n                (click)=\"onRename()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-rename\"></mat-icon>\n                    <span class=\"menu-item-text\">Rename</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-print\"\n                mat-menu-item\n                (click)=\"onPrint()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-print\"></mat-icon>\n                    <span class=\"menu-item-text\">Print</span>\n                    <span class=\"hot-keys\">Ctrl+P</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-delete\"\n                mat-menu-item\n                (click)=\"onDelete()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-delete\"></mat-icon>\n                    <span class=\"menu-item-text\">Delete</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"editor-header-menu-edit\"\n            mat-button\n            [matMenuTriggerFor]=\"editMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\"\n            (menuOpened)=\"menuOpened()\">\n            Edit\n        </button>\n        <mat-menu #editMenu=\"matMenu\">\n            <button\n                id=\"editor-header-menu-item-undo\"\n                mat-menu-item\n                [disabled]=\"!canUndo\"\n                (click)=\"onUndo()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-undo\"></mat-icon>\n                    <span class=\"menu-item-text\">Undo</span>\n                    <span class=\"hot-keys\">Ctrl+Z</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-redo\"\n                mat-menu-item\n                [disabled]=\"!canRedo\"\n                (click)=\"onRedo()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-redo\"></mat-icon>\n                    <span class=\"menu-item-text\">Redo</span>\n                    <span class=\"hot-keys\">Ctrl+Y</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-cut\"\n                mat-menu-item\n                [disabled]=\"!hasSelection\"\n                (click)=\"onCut()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-content-cut\"></mat-icon>\n                    <span class=\"menu-item-text\">Cut</span>\n                    <span class=\"hot-keys\">Ctrl+X</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-copy\"\n                mat-menu-item\n                [disabled]=\"!hasSelection\"\n                (click)=\"onCopy()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-file-copy\"></mat-icon>\n                    <span class=\"menu-item-text\">Copy</span>\n                    <span class=\"hot-keys\">Ctrl+C</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-paste\"\n                mat-menu-item\n                [disabled]=\"!clipboardData?.length\"\n                (click)=\"onPaste()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-content-paste\"></mat-icon>\n                    <span class=\"menu-item-text\">Paste</span>\n                    <span class=\"hot-keys\">Ctrl+V</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-select-all\"\n                mat-menu-item\n                (click)=\"onSelectAll()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-select-all\"></mat-icon>\n                    <span class=\"menu-item-text\">Select All</span>\n                    <span class=\"hot-keys\">Ctrl+A</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-delete-text\"\n                mat-menu-item\n                [disabled]=\"!hasSelection\"\n                (click)=\"onRemoveSelected()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-delete\"></mat-icon>\n                    <span class=\"menu-item-text\">Delete</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            *ngIf=\"!isViewOnly\"\n            #insertMenuTrigger=\"matMenuTrigger\"\n            id=\"editor-header-menu-insert\"\n            mat-button\n            [matMenuTriggerFor]=\"insertMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\">\n            Insert\n        </button>\n        <mat-menu #insertMenu=\"matMenu\">\n            <input\n                #imageFileInput\n                class=\"upload-input\"\n                accept=\"image/gif, image/jpeg, image/png, image/bmp, image/webp\"\n                type=\"file\"\n                id=\"image-file-input\"\n                (change)=\"onInsertImage($event)\" />\n            <button\n                id=\"editor-header-menu-item-image\"\n                mat-menu-item\n                (click)=\"imageFileInput.click()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-image\"></mat-icon>\n                    <span class=\"menu-item-text\">Image</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-table\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"tableInsert\"\n                (menuOpened)=\"showInsertTableMenu = true\"\n                (menuClosed)=\"onTableInsertMenuClosed()\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-table\"></mat-icon>\n                Table\n            </button>\n            <button\n                id=\"editor-header-menu-item-link\"\n                mat-menu-item\n                (click)=\"onInsertLink()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-link-on\"></mat-icon>\n                    <span class=\"menu-item-text\">Link</span>\n                    <span class=\"hot-keys\">Ctrl+K</span>\n                </div>\n            </button>\n            <button\n                *ngFor=\"let element of elements\"\n                id=\"editor-header-menu-item-{{ element.title }}\"\n                mat-menu-item\n                (click)=\"onCreate(element)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"{{ element.icon }}\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ element.name }}</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-headers-footers\"\n                mat-menu-item\n                class=\"hidden\"\n                [matMenuTriggerFor]=\"listHeadersFootersMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-headers-footers\"></mat-icon>\n                    <span class=\"menu-item-text\">Headers & Footers</span>\n                </div>\n            </button>\n            <mat-menu #listHeadersFootersMenu=\"matMenu\">\n                <button\n                    id=\"editor-header-menu-item-header\"\n                    mat-menu-item>\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-header\"></mat-icon>\n                        <span class=\"menu-item-text\">Header</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-footer\"\n                    mat-menu-item>\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-bottom\"></mat-icon>\n                        <span class=\"menu-item-text\">Footer</span>\n                    </div>\n                </button>\n            </mat-menu>\n        </mat-menu>\n        <button\n            *ngIf=\"!isViewOnly\"\n            id=\"editor-header-menu-layout\"\n            mat-button\n            [matMenuTriggerFor]=\"layoutMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\">\n            Layout\n        </button>\n        <mat-menu #layoutMenu=\"matMenu\">\n            <button\n                id=\"editor-header-menu-item-page-break\"\n                mat-menu-item\n                (click)=\"insertPageBreak.emit()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-page-break\"></mat-icon>\n                    <span class=\"menu-item-text\">Page Break</span>\n                    <span class=\"hot-keys\">Ctrl+Enter</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            *ngIf=\"!isViewOnly\"\n            id=\"editor-header-menu-format\"\n            mat-button\n            [matMenuTriggerFor]=\"formatMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\">\n            Format\n        </button>\n        <mat-menu #formatMenu=\"matMenu\">\n            <button\n                id=\"editor-header-menu-item-align\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listAlignMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-format-alignleft\"></mat-icon>\n                    <span class=\"menu-item-text\">Align</span>\n                </div>\n            </button>\n            <mat-menu #listAlignMenu=\"matMenu\">\n                <button\n                    id=\"editor-header-menu-item-align-left\"\n                    mat-menu-item\n                    (click)=\"onSelectFormat(alignments.Left)\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-alignleft\"></mat-icon>\n                        <span class=\"menu-item-text\">Left</span>\n                        <span class=\"hot-keys\">Ctrl+L</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-align-center\"\n                    mat-menu-item\n                    (click)=\"onSelectFormat(alignments.Center)\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-aligncenter\"></mat-icon>\n                        <span class=\"menu-item-text\">Center</span>\n                        <span class=\"hot-keys\">Ctrl+E</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-align-right\"\n                    mat-menu-item\n                    (click)=\"onSelectFormat(alignments.Right)\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-alignright\"></mat-icon>\n                        <span class=\"menu-item-text\">Right</span>\n                        <span class=\"hot-keys\">Ctrl+R</span>\n                    </div>\n                </button>\n            </mat-menu>\n            <button\n                id=\"editor-header-menu-item-bullets-numbering\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listBulletsNumberingMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-format-bulleted\"></mat-icon>\n                    <span class=\"menu-item-text\">Bullets & Numbering</span>\n                </div>\n            </button>\n            <mat-menu #listBulletsNumberingMenu=\"matMenu\">\n                <button\n                    id=\"editor-header-menu-item-bullets\"\n                    mat-menu-item\n                    [matMenuTriggerFor]=\"listBulletedMenu\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-bulleted\"></mat-icon>\n                        <span class=\"menu-item-text\">Bullet List Menu</span>\n                    </div>\n                </button>\n                <mat-menu\n                    #listBulletedMenu=\"matMenu\"\n                    yPosition=\"below\">\n                    <div class=\"list-icon list-marker\">\n                        <mat-icon\n                            svgIcon=\"marker-1\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList1)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList1\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"marker-2\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList2)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList2\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"marker-3\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList3)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList3\"></mat-icon>\n                    </div>\n                    <div class=\"list-icon list-marker\">\n                        <mat-icon\n                            svgIcon=\"marker-4\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList4)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList4\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"marker-5\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList5)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList5\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"marker-6\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList6)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList6\"></mat-icon>\n                    </div>\n                </mat-menu>\n                <button\n                    id=\"editor-header-menu-item-numbering\"\n                    mat-menu-item\n                    [matMenuTriggerFor]=\"listNumberedMenu\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-numbered\"></mat-icon>\n                        <span class=\"menu-item-text\">Numbered List Menu</span>\n                    </div>\n                </button>\n                <mat-menu\n                    #listNumberedMenu=\"matMenu\"\n                    yPosition=\"below\">\n                    <div class=\"list-icon list-number\">\n                        <mat-icon\n                            svgIcon=\"number-1\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList1)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList1\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"number-2\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList2)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList2\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"number-3\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList3)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList3\"></mat-icon>\n                    </div>\n                    <div class=\"list-icon list-number\">\n                        <mat-icon\n                            svgIcon=\"number-4\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList4)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList4\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"number-5\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList5)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList5\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"number-6\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList6)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList6\"></mat-icon>\n                    </div>\n                </mat-menu>\n            </mat-menu>\n            <button\n                id=\"editor-header-menu-item-text\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listTextMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-format-bold\"></mat-icon>\n                    <span class=\"menu-item-text\">Text</span>\n                </div>\n            </button>\n            <mat-menu #listTextMenu=\"matMenu\">\n                <button\n                    id=\"editor-header-menu-item-bold\"\n                    mat-menu-item\n                    (click)=\"onApplyBold()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-bold\"></mat-icon>\n                        <span class=\"menu-item-text\">Bold</span>\n                        <span class=\"hot-keys\">Ctrl+B</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-italic\"\n                    mat-menu-item\n                    (click)=\"onApplyItalic()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-italic\"></mat-icon>\n                        <span class=\"menu-item-text\">Italic</span>\n                        <span class=\"hot-keys\">Ctrl+I</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-underlined\"\n                    mat-menu-item\n                    (click)=\"onApplyUnderline()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-underlined\"></mat-icon>\n                        <span class=\"menu-item-text\">Underlined</span>\n                        <span class=\"hot-keys\">Ctrl+U</span>\n                    </div>\n                </button>\n            </mat-menu>\n            <button\n                id=\"editor-header-menu-item-header-footer\"\n                mat-menu-item\n                class=\"hidden\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-headers-footers\"></mat-icon>\n                    <span class=\"menu-item-text\">Headers & Footers</span>\n                </div>\n            </button>\n        </mat-menu>\n        <mat-menu\n            #tableInsert=\"matMenu\"\n            class=\"insert-table\">\n            <app-insert-table\n                *ngIf=\"showInsertTableMenu\"\n                (selectSizes)=\"insertTable.emit($event)\" />\n        </mat-menu>\n    </div>\n</div>\n\n<div class=\"editor-mode\">\n    <mat-form-field appearance=\"outline\">\n        <mat-select\n            [(value)]=\"selectedMode\"\n            (selectionChange)=\"changeMode.emit($event)\">\n            <mat-select-trigger>\n                <div class=\"select-trigger\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"{{ modeOptions[selectedMode].icon }}\"></mat-icon>\n                    <span class=\"item-title\">{{ modeOptions[selectedMode].name }}</span>\n                    <div class=\"separator\"></div>\n                </div>\n            </mat-select-trigger>\n            <mat-option\n                *ngFor=\"let mode of modeOptions\"\n                class=\"editor-mode-option\"\n                [value]=\"mode.id\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"{{ mode.icon }}\"></mat-icon>\n                <div class=\"item-content\">\n                    <span class=\"item-title\">{{ mode.name }}</span>\n                    <span class=\"item-text\">{{ mode.text }}</span>\n                </div>\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n</div>\n", styles: [":host{width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 24px}:host .mat-mdc-form-field{width:auto;height:24px;text-align:right}:host .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host .mat-mdc-form-field ::ng-deep .mat-mdc-text-field-wrapper{align-items:center}:host .mat-mdc-form-field ::ng-deep .mdc-notched-outline>*{border:unset}:host .mat-mdc-form-field ::ng-deep .mat-mdc-select-value{margin-right:4px}:host .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-infix{padding:0;width:auto}:host .mat-mdc-form-field ::ng-deep .mat-mdc-select-arrow svg{top:0}:host .mat-mdc-form-field .mat-mdc-select{font-size:14px;font-weight:700}.upload-input{display:none}mat-icon{width:24px;height:24px;font-size:24px}.editor-mode{display:flex;justify-content:flex-end;align-items:center;overflow:hidden;height:40px;border:1px solid;border-radius:20px}::ng-deep .cdk-overlay-pane{min-width:min-content}.separator{border-left:1px solid;opacity:.1;height:18px;margin:2px 8px}.select-trigger{display:inline-flex;text-align:left;margin-top:1px}.select-trigger .mat-icon{width:32px}.item-content{display:grid}.item-content .item-title{line-height:6px;padding-top:10px}.item-content .item-text{font-size:10px;font-weight:400;text-wrap:nowrap}.menu-buttons{display:flex;flex-wrap:wrap}.menu-buttons button{font-weight:500;height:24px;min-width:unset}.menu-header{display:flex;flex-direction:column;flex:1;overflow:hidden}.file-name{flex-basis:0;margin:0 8px 6px;display:block;min-height:32px;overflow:hidden}.file-name .title{font-size:18px;font-weight:500;line-height:normal;outline:none;display:inline-block;white-space:nowrap;min-width:1px;min-height:32px;overflow:hidden;max-width:100%;-webkit-user-select:none;user-select:none}.file-name .title:not(:focus){text-overflow:ellipsis}.heading-menu{display:inline-flex;width:210px}.hot-keys{text-align:end;width:auto}.menu-item-text{white-space:nowrap;width:64%}.mat-mdc-menu-item .mat-icon{margin-right:4px;width:28px}#editor-header-menu-item-print,#editor-header-menu-item-redo,#editor-header-menu-item-paste,#editor-header-menu-item-link,#editor-header-menu-item-image{border-bottom:1px solid}.hidden{display:none}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none}.list-icon .selected,.list-number .selected,.list-icon .selected:hover,.list-number .selected:hover{border:2px solid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: InsertTableComponent, selector: "app-insert-table", outputs: ["selectSizes"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MenuDropdownsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: CustomIconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: MenuDropdownsComponent, selector: "app-menu-dropdowns", inputs: { isViewOnly: "isViewOnly", hasSelection: "hasSelection", clipboardData: "clipboardData", historyInfo: "historyInfo", styles: "styles" }, outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", print: "print", insertPageBreak: "insertPageBreak", createDocument: "createDocument", insertImage: "insertImage", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", redo: "redo", undo: "undo", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected", insertLink: "insertLink", createElement: "createElement", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertTable: "insertTable" }, viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], ngImport: i0, template: "<button\n    id=\"menu-dropdowns-menu-file\"\n    mat-button\n    [matMenuTriggerFor]=\"fileMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\">\n    File\n</button>\n<mat-menu\n    #fileMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <button\n        *ngIf=\"!isViewOnly\"\n        id=\"menu-dropdowns-menu-item-new\"\n        mat-menu-item\n        (click)=\"createDocument.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-add-new\"></mat-icon>\n            <span class=\"menu-item-text\">New</span>\n        </div>\n    </button>\n    <input\n        #fileInput\n        class=\"upload-input\"\n        accept=\".docx\"\n        type=\"file\"\n        id=\"file-input\"\n        (change)=\"onOpenFileFromDisk($event)\" />\n    <button\n        *ngIf=\"!isViewOnly\"\n        id=\"menu-dropdowns-menu-item-open-from\"\n        mat-menu-item\n        (click)=\"fileInput.click()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-open-from\"></mat-icon>\n            <span class=\"menu-item-text\">Open From</span>\n            <span class=\"hot-keys\">Ctrl+O</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-save-as\"\n        mat-menu-item\n        (click)=\"saveAs.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-save\"></mat-icon>\n            <span class=\"menu-item-text\">Save As</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-rename\"\n        mat-menu-item\n        (click)=\"rename.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-rename\"></mat-icon>\n            <span class=\"menu-item-text\">Rename</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-print\"\n        mat-menu-item\n        (click)=\"print.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-print\"></mat-icon>\n            <span class=\"menu-item-text\">Print</span>\n            <span class=\"hot-keys\">Ctrl+P</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-delete\"\n        mat-menu-item\n        (click)=\"delete.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-delete\"></mat-icon>\n            <span class=\"menu-item-text\">Delete</span>\n        </div>\n    </button>\n</mat-menu>\n<button\n    id=\"menu-dropdowns-menu-edit\"\n    mat-button\n    [matMenuTriggerFor]=\"editMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    (menuOpened)=\"openEditMenu.emit()\">\n    Edit\n</button>\n<mat-menu\n    #editMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <button\n        id=\"menu-dropdowns-menu-item-undo\"\n        mat-menu-item\n        [disabled]=\"!canUndo\"\n        (click)=\"undo.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-undo\"></mat-icon>\n            <span class=\"menu-item-text\">Undo</span>\n            <span class=\"hot-keys\">Ctrl+Z</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-redo\"\n        mat-menu-item\n        [disabled]=\"!canRedo\"\n        (click)=\"redo.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-redo\"></mat-icon>\n            <span class=\"menu-item-text\">Redo</span>\n            <span class=\"hot-keys\">Ctrl+Y</span>\n        </div>\n    </button>\n    <hr class=\"noder-divider\" />\n    <button\n        id=\"menu-dropdowns-menu-item-cut\"\n        mat-menu-item\n        [disabled]=\"!hasSelection\"\n        (click)=\"cutSelected.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-content-cut\"></mat-icon>\n            <span class=\"menu-item-text\">Cut</span>\n            <span class=\"hot-keys\">Ctrl+X</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-copy\"\n        mat-menu-item\n        [disabled]=\"!hasSelection\"\n        (click)=\"copySelected.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-file-copy\"></mat-icon>\n            <span class=\"menu-item-text\">Copy</span>\n            <span class=\"hot-keys\">Ctrl+C</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-paste\"\n        mat-menu-item\n        [disabled]=\"!clipboardData?.length\"\n        (click)=\"pasteClipboardData.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-content-paste\"></mat-icon>\n            <span class=\"menu-item-text\">Paste</span>\n            <span class=\"hot-keys\">Ctrl+V</span>\n        </div>\n    </button>\n    <hr class=\"noder-divider\" />\n    <button\n        id=\"menu-dropdowns-menu-item-select-all\"\n        mat-menu-item\n        (click)=\"selectAll.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-select-all\"></mat-icon>\n            <span class=\"menu-item-text\">Select All</span>\n            <span class=\"hot-keys\">Ctrl+A</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-delete-text\"\n        mat-menu-item\n        [disabled]=\"!hasSelection\"\n        (click)=\"removeSelected.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-delete\"></mat-icon>\n            <span class=\"menu-item-text\">Delete</span>\n        </div>\n    </button>\n</mat-menu>\n<button\n    *ngIf=\"!isViewOnly\"\n    #insertMenuTrigger=\"matMenuTrigger\"\n    id=\"menu-dropdowns-menu-insert\"\n    mat-button\n    [matMenuTriggerFor]=\"insertMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\">\n    Insert\n</button>\n<mat-menu\n    #insertMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <input\n        #imageFileInput\n        class=\"upload-input\"\n        accept=\"image/gif, image/jpeg, image/png, image/bmp, image/webp\"\n        type=\"file\"\n        id=\"image-file-input\"\n        (change)=\"onInsertImage($event)\" />\n    <button\n        id=\"menu-dropdowns-menu-item-image\"\n        mat-menu-item\n        (click)=\"imageFileInput.click()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-image\"></mat-icon>\n            <span class=\"menu-item-text\">Image</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-table\"\n        mat-menu-item\n        [matMenuTriggerFor]=\"tableInsert\"\n        (menuOpened)=\"showInsertTableMenu = true\"\n        (menuClosed)=\"onTableInsertMenuClosed()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-table\"></mat-icon>\n        Table\n    </button>\n    <hr class=\"noder-divider\" />\n    <button\n        id=\"menu-dropdowns-menu-item-link\"\n        mat-menu-item\n        (click)=\"insertLink.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-link-on\"></mat-icon>\n            <span class=\"menu-item-text\">Link</span>\n            <span class=\"hot-keys\">Ctrl+K</span>\n        </div>\n    </button>\n    <button\n        *ngFor=\"let element of elements\"\n        id=\"menu-dropdowns-menu-item-{{ element.title }}\"\n        mat-menu-item\n        (click)=\"onCreate(element)\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"{{ element.icon }}\"></mat-icon>\n            <span class=\"menu-item-text\">{{ element.name }}</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-headers-footers\"\n        mat-menu-item\n        class=\"hidden\"\n        [matMenuTriggerFor]=\"listHeadersFootersMenu\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-headers-footers\"></mat-icon>\n            <span class=\"menu-item-text\">Headers & Footers</span>\n        </div>\n    </button>\n    <mat-menu\n        #listHeadersFootersMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-header\"\n            mat-menu-item>\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-header\"></mat-icon>\n                <span class=\"menu-item-text\">Header</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-footer\"\n            mat-menu-item>\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-bottom\"></mat-icon>\n                <span class=\"menu-item-text\">Footer</span>\n            </div>\n        </button>\n    </mat-menu>\n</mat-menu>\n<button\n    *ngIf=\"!isViewOnly\"\n    id=\"menu-dropdowns-menu-layout\"\n    mat-button\n    [matMenuTriggerFor]=\"layoutMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\">\n    Layout\n</button>\n<mat-menu\n    #layoutMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <button\n        id=\"menu-dropdowns-menu-item-page-break\"\n        mat-menu-item\n        (click)=\"insertPageBreak.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-page-break\"></mat-icon>\n            <span class=\"menu-item-text\">Page Break</span>\n            <span class=\"hot-keys\">Ctrl+Enter</span>\n        </div>\n    </button>\n</mat-menu>\n<button\n    *ngIf=\"!isViewOnly\"\n    id=\"menu-dropdowns-menu-format\"\n    mat-button\n    [matMenuTriggerFor]=\"formatMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\">\n    Format\n</button>\n<mat-menu\n    #formatMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <button\n        id=\"menu-dropdowns-menu-item-align\"\n        mat-menu-item\n        [matMenuTriggerFor]=\"listAlignMenu\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-format-alignleft\"></mat-icon>\n            <span class=\"menu-item-text\">Align</span>\n        </div>\n    </button>\n    <mat-menu\n        #listAlignMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-align-left\"\n            mat-menu-item\n            (click)=\"onSelectFormat(alignments.Left)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-format-alignleft\"></mat-icon>\n                <span class=\"menu-item-text\">Left</span>\n                <span class=\"hot-keys\">Ctrl+L</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-align-center\"\n            mat-menu-item\n            (click)=\"onSelectFormat(alignments.Center)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-format-aligncenter\"></mat-icon>\n                <span class=\"menu-item-text\">Center</span>\n                <span class=\"hot-keys\">Ctrl+E</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-align-right\"\n            mat-menu-item\n            (click)=\"onSelectFormat(alignments.Right)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-format-alignright\"></mat-icon>\n                <span class=\"menu-item-text\">Right</span>\n                <span class=\"hot-keys\">Ctrl+R</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        id=\"menu-dropdowns-menu-item-bullets-numbering\"\n        mat-menu-item\n        [matMenuTriggerFor]=\"listBulletsNumberingMenu\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-format-bulleted\"></mat-icon>\n            <span class=\"menu-item-text\">Bullets & Numbering</span>\n        </div>\n    </button>\n    <mat-menu\n        #listBulletsNumberingMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-bullets\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listBulletedMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-format-bulleted\"></mat-icon>\n                <span class=\"menu-item-text\">Bullet List Menu</span>\n            </div>\n        </button>\n        <mat-menu\n            #listBulletedMenu=\"matMenu\"\n            class=\"dropdown-numbering-overlay noder-modal\"\n            yPosition=\"below\">\n            <div class=\"list-icon list-marker\">\n                <mat-icon\n                    svgIcon=\"marker-1\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList1\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList1)\"></mat-icon>\n                <mat-icon\n                    svgIcon=\"marker-2\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList2\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList2)\"></mat-icon>\n                <mat-icon\n                    svgIcon=\"marker-3\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList3\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList3)\"></mat-icon>\n            </div>\n            <div class=\"list-icon list-marker\">\n                <mat-icon\n                    svgIcon=\"marker-4\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList4\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList4)\"></mat-icon>\n                <mat-icon\n                    svgIcon=\"marker-5\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList5\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList5)\"></mat-icon>\n                <mat-icon\n                    svgIcon=\"marker-6\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList6\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList6)\"></mat-icon>\n            </div>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-numbering\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listNumberedMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-format-numbered\"></mat-icon>\n                <span class=\"menu-item-text\">Numbered List Menu</span>\n            </div>\n        </button>\n        <mat-menu\n            #listNumberedMenu=\"matMenu\"\n            class=\"dropdown-numbering-overlay noder-modal\"\n            yPosition=\"below\">\n            <div class=\"list-icon list-number\">\n                <mat-icon\n                    svgIcon=\"number-1\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList1\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList1)\"></mat-icon>\n                <mat-icon\n                    svgIcon=\"number-2\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList2\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList2)\"></mat-icon>\n                <mat-icon\n                    svgIcon=\"number-3\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList3\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList3)\"></mat-icon>\n            </div>\n            <div class=\"list-icon list-number\">\n                <mat-icon\n                    svgIcon=\"number-4\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList4\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList4)\"></mat-icon>\n                <mat-icon\n                    svgIcon=\"number-5\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList5\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList5)\"></mat-icon>\n                <mat-icon\n                    svgIcon=\"number-6\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList6\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList6)\"></mat-icon>\n            </div>\n        </mat-menu>\n    </mat-menu>\n    <button\n        id=\"menu-dropdowns-menu-item-text\"\n        mat-menu-item\n        [matMenuTriggerFor]=\"listTextMenu\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-format-bold\"></mat-icon>\n            <span class=\"menu-item-text\">Text</span>\n        </div>\n    </button>\n    <mat-menu\n        #listTextMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-bold\"\n            mat-menu-item\n            (click)=\"onApplyBold()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-format-bold\"></mat-icon>\n                <span class=\"menu-item-text\">Bold</span>\n                <span class=\"hot-keys\">Ctrl+B</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-italic\"\n            mat-menu-item\n            (click)=\"onApplyItalic()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-format-italic\"></mat-icon>\n                <span class=\"menu-item-text\">Italic</span>\n                <span class=\"hot-keys\">Ctrl+I</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-underlined\"\n            mat-menu-item\n            (click)=\"onApplyUnderline()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-format-underlined\"></mat-icon>\n                <span class=\"menu-item-text\">Underlined</span>\n                <span class=\"hot-keys\">Ctrl+U</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        id=\"menu-dropdowns-menu-item-header-footer\"\n        mat-menu-item\n        class=\"hidden\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-headers-footers\"></mat-icon>\n            <span class=\"menu-item-text\">Headers & Footers</span>\n        </div>\n    </button>\n</mat-menu>\n<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host{display:flex;align-items:center;height:100%}.upload-input{display:none}.menu-buttons mat-icon{width:24px;height:24px;font-size:24px}.heading-menu{display:inline-flex;width:210px}.hot-keys{text-align:end;width:auto}.menu-item-text{white-space:nowrap;width:64%}.mat-mdc-menu-item .mat-icon{margin-right:4px;width:28px}.hidden{display:none}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none}.list-icon .selected,.list-icon .selected:hover,.list-number .selected,.list-number .selected:hover{border-width:2px;border-style:solid}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InsertTableComponent, selector: "app-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MenuDropdownsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        InsertTableComponent,
-                        MatButtonModule,
-                        MatFormFieldModule,
-                        MatIconModule,
-                        MatInputModule,
-                        MatMenuModule,
-                        MatSelectModule,
-                        MatTooltipModule
-                    ], providers: [ExternalElementService], selector: 'app-editor-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"menu-header\">\n    <div class=\"file-name\">\n        <span\n            #titleSpan\n            class=\"title\"\n            matTooltip=\"Double click to rename\"\n            (blur)=\"onRenameTitle($event)\"\n            (keydown.enter)=\"$event.target.blur()\"\n            (dblclick)=\"onFocus($event)\">\n            {{ title }}\n        </span>\n    </div>\n    <div class=\"menu-buttons\">\n        <button\n            id=\"editor-header-menu-file\"\n            mat-button\n            [matMenuTriggerFor]=\"fileMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\">\n            File\n        </button>\n        <mat-menu #fileMenu=\"matMenu\">\n            <button\n                *ngIf=\"!isViewOnly\"\n                id=\"editor-header-menu-item-new\"\n                mat-menu-item\n                (click)=\"createDocument.emit()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-add-new\"></mat-icon>\n                    <span class=\"menu-item-text\">New</span>\n                </div>\n            </button>\n            <input\n                #fileInput\n                class=\"upload-input\"\n                accept=\".docx\"\n                type=\"file\"\n                id=\"file-input\"\n                (change)=\"onOpenFileFromDisk($event)\" />\n            <button\n                *ngIf=\"!isViewOnly\"\n                id=\"editor-header-menu-item-open-from\"\n                mat-menu-item\n                (click)=\"fileInput.click()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-open-from\"></mat-icon>\n                    <span class=\"menu-item-text\">Open From</span>\n                    <span class=\"hot-keys\">Ctrl+O</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-save-as\"\n                mat-menu-item\n                (click)=\"onSaveAs()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-save\"></mat-icon>\n                    <span class=\"menu-item-text\">Save As</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-rename\"\n                mat-menu-item\n                (click)=\"onRename()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-rename\"></mat-icon>\n                    <span class=\"menu-item-text\">Rename</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-print\"\n                mat-menu-item\n                (click)=\"onPrint()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-print\"></mat-icon>\n                    <span class=\"menu-item-text\">Print</span>\n                    <span class=\"hot-keys\">Ctrl+P</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-delete\"\n                mat-menu-item\n                (click)=\"onDelete()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-delete\"></mat-icon>\n                    <span class=\"menu-item-text\">Delete</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"editor-header-menu-edit\"\n            mat-button\n            [matMenuTriggerFor]=\"editMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\"\n            (menuOpened)=\"menuOpened()\">\n            Edit\n        </button>\n        <mat-menu #editMenu=\"matMenu\">\n            <button\n                id=\"editor-header-menu-item-undo\"\n                mat-menu-item\n                [disabled]=\"!canUndo\"\n                (click)=\"onUndo()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-undo\"></mat-icon>\n                    <span class=\"menu-item-text\">Undo</span>\n                    <span class=\"hot-keys\">Ctrl+Z</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-redo\"\n                mat-menu-item\n                [disabled]=\"!canRedo\"\n                (click)=\"onRedo()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-redo\"></mat-icon>\n                    <span class=\"menu-item-text\">Redo</span>\n                    <span class=\"hot-keys\">Ctrl+Y</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-cut\"\n                mat-menu-item\n                [disabled]=\"!hasSelection\"\n                (click)=\"onCut()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-content-cut\"></mat-icon>\n                    <span class=\"menu-item-text\">Cut</span>\n                    <span class=\"hot-keys\">Ctrl+X</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-copy\"\n                mat-menu-item\n                [disabled]=\"!hasSelection\"\n                (click)=\"onCopy()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-file-copy\"></mat-icon>\n                    <span class=\"menu-item-text\">Copy</span>\n                    <span class=\"hot-keys\">Ctrl+C</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-paste\"\n                mat-menu-item\n                [disabled]=\"!clipboardData?.length\"\n                (click)=\"onPaste()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-content-paste\"></mat-icon>\n                    <span class=\"menu-item-text\">Paste</span>\n                    <span class=\"hot-keys\">Ctrl+V</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-select-all\"\n                mat-menu-item\n                (click)=\"onSelectAll()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-select-all\"></mat-icon>\n                    <span class=\"menu-item-text\">Select All</span>\n                    <span class=\"hot-keys\">Ctrl+A</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-delete-text\"\n                mat-menu-item\n                [disabled]=\"!hasSelection\"\n                (click)=\"onRemoveSelected()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-delete\"></mat-icon>\n                    <span class=\"menu-item-text\">Delete</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            *ngIf=\"!isViewOnly\"\n            #insertMenuTrigger=\"matMenuTrigger\"\n            id=\"editor-header-menu-insert\"\n            mat-button\n            [matMenuTriggerFor]=\"insertMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\">\n            Insert\n        </button>\n        <mat-menu #insertMenu=\"matMenu\">\n            <input\n                #imageFileInput\n                class=\"upload-input\"\n                accept=\"image/gif, image/jpeg, image/png, image/bmp, image/webp\"\n                type=\"file\"\n                id=\"image-file-input\"\n                (change)=\"onInsertImage($event)\" />\n            <button\n                id=\"editor-header-menu-item-image\"\n                mat-menu-item\n                (click)=\"imageFileInput.click()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-image\"></mat-icon>\n                    <span class=\"menu-item-text\">Image</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-table\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"tableInsert\"\n                (menuOpened)=\"showInsertTableMenu = true\"\n                (menuClosed)=\"onTableInsertMenuClosed()\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-table\"></mat-icon>\n                Table\n            </button>\n            <button\n                id=\"editor-header-menu-item-link\"\n                mat-menu-item\n                (click)=\"onInsertLink()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-link-on\"></mat-icon>\n                    <span class=\"menu-item-text\">Link</span>\n                    <span class=\"hot-keys\">Ctrl+K</span>\n                </div>\n            </button>\n            <button\n                *ngFor=\"let element of elements\"\n                id=\"editor-header-menu-item-{{ element.title }}\"\n                mat-menu-item\n                (click)=\"onCreate(element)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"{{ element.icon }}\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ element.name }}</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-headers-footers\"\n                mat-menu-item\n                class=\"hidden\"\n                [matMenuTriggerFor]=\"listHeadersFootersMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-headers-footers\"></mat-icon>\n                    <span class=\"menu-item-text\">Headers & Footers</span>\n                </div>\n            </button>\n            <mat-menu #listHeadersFootersMenu=\"matMenu\">\n                <button\n                    id=\"editor-header-menu-item-header\"\n                    mat-menu-item>\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-header\"></mat-icon>\n                        <span class=\"menu-item-text\">Header</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-footer\"\n                    mat-menu-item>\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-bottom\"></mat-icon>\n                        <span class=\"menu-item-text\">Footer</span>\n                    </div>\n                </button>\n            </mat-menu>\n        </mat-menu>\n        <button\n            *ngIf=\"!isViewOnly\"\n            id=\"editor-header-menu-layout\"\n            mat-button\n            [matMenuTriggerFor]=\"layoutMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\">\n            Layout\n        </button>\n        <mat-menu #layoutMenu=\"matMenu\">\n            <button\n                id=\"editor-header-menu-item-page-break\"\n                mat-menu-item\n                (click)=\"insertPageBreak.emit()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-page-break\"></mat-icon>\n                    <span class=\"menu-item-text\">Page Break</span>\n                    <span class=\"hot-keys\">Ctrl+Enter</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            *ngIf=\"!isViewOnly\"\n            id=\"editor-header-menu-format\"\n            mat-button\n            [matMenuTriggerFor]=\"formatMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\">\n            Format\n        </button>\n        <mat-menu #formatMenu=\"matMenu\">\n            <button\n                id=\"editor-header-menu-item-align\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listAlignMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-format-alignleft\"></mat-icon>\n                    <span class=\"menu-item-text\">Align</span>\n                </div>\n            </button>\n            <mat-menu #listAlignMenu=\"matMenu\">\n                <button\n                    id=\"editor-header-menu-item-align-left\"\n                    mat-menu-item\n                    (click)=\"onSelectFormat(alignments.Left)\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-alignleft\"></mat-icon>\n                        <span class=\"menu-item-text\">Left</span>\n                        <span class=\"hot-keys\">Ctrl+L</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-align-center\"\n                    mat-menu-item\n                    (click)=\"onSelectFormat(alignments.Center)\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-aligncenter\"></mat-icon>\n                        <span class=\"menu-item-text\">Center</span>\n                        <span class=\"hot-keys\">Ctrl+E</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-align-right\"\n                    mat-menu-item\n                    (click)=\"onSelectFormat(alignments.Right)\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-alignright\"></mat-icon>\n                        <span class=\"menu-item-text\">Right</span>\n                        <span class=\"hot-keys\">Ctrl+R</span>\n                    </div>\n                </button>\n            </mat-menu>\n            <button\n                id=\"editor-header-menu-item-bullets-numbering\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listBulletsNumberingMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-format-bulleted\"></mat-icon>\n                    <span class=\"menu-item-text\">Bullets & Numbering</span>\n                </div>\n            </button>\n            <mat-menu #listBulletsNumberingMenu=\"matMenu\">\n                <button\n                    id=\"editor-header-menu-item-bullets\"\n                    mat-menu-item\n                    [matMenuTriggerFor]=\"listBulletedMenu\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-bulleted\"></mat-icon>\n                        <span class=\"menu-item-text\">Bullet List Menu</span>\n                    </div>\n                </button>\n                <mat-menu\n                    #listBulletedMenu=\"matMenu\"\n                    yPosition=\"below\">\n                    <div class=\"list-icon list-marker\">\n                        <mat-icon\n                            svgIcon=\"marker-1\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList1)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList1\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"marker-2\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList2)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList2\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"marker-3\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList3)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList3\"></mat-icon>\n                    </div>\n                    <div class=\"list-icon list-marker\">\n                        <mat-icon\n                            svgIcon=\"marker-4\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList4)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList4\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"marker-5\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList5)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList5\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"marker-6\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList6)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList6\"></mat-icon>\n                    </div>\n                </mat-menu>\n                <button\n                    id=\"editor-header-menu-item-numbering\"\n                    mat-menu-item\n                    [matMenuTriggerFor]=\"listNumberedMenu\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-numbered\"></mat-icon>\n                        <span class=\"menu-item-text\">Numbered List Menu</span>\n                    </div>\n                </button>\n                <mat-menu\n                    #listNumberedMenu=\"matMenu\"\n                    yPosition=\"below\">\n                    <div class=\"list-icon list-number\">\n                        <mat-icon\n                            svgIcon=\"number-1\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList1)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList1\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"number-2\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList2)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList2\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"number-3\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList3)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList3\"></mat-icon>\n                    </div>\n                    <div class=\"list-icon list-number\">\n                        <mat-icon\n                            svgIcon=\"number-4\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList4)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList4\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"number-5\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList5)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList5\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"number-6\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList6)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList6\"></mat-icon>\n                    </div>\n                </mat-menu>\n            </mat-menu>\n            <button\n                id=\"editor-header-menu-item-text\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listTextMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-format-bold\"></mat-icon>\n                    <span class=\"menu-item-text\">Text</span>\n                </div>\n            </button>\n            <mat-menu #listTextMenu=\"matMenu\">\n                <button\n                    id=\"editor-header-menu-item-bold\"\n                    mat-menu-item\n                    (click)=\"onApplyBold()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-bold\"></mat-icon>\n                        <span class=\"menu-item-text\">Bold</span>\n                        <span class=\"hot-keys\">Ctrl+B</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-italic\"\n                    mat-menu-item\n                    (click)=\"onApplyItalic()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-italic\"></mat-icon>\n                        <span class=\"menu-item-text\">Italic</span>\n                        <span class=\"hot-keys\">Ctrl+I</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-underlined\"\n                    mat-menu-item\n                    (click)=\"onApplyUnderline()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-underlined\"></mat-icon>\n                        <span class=\"menu-item-text\">Underlined</span>\n                        <span class=\"hot-keys\">Ctrl+U</span>\n                    </div>\n                </button>\n            </mat-menu>\n            <button\n                id=\"editor-header-menu-item-header-footer\"\n                mat-menu-item\n                class=\"hidden\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-headers-footers\"></mat-icon>\n                    <span class=\"menu-item-text\">Headers & Footers</span>\n                </div>\n            </button>\n        </mat-menu>\n        <mat-menu\n            #tableInsert=\"matMenu\"\n            class=\"insert-table\">\n            <app-insert-table\n                *ngIf=\"showInsertTableMenu\"\n                (selectSizes)=\"insertTable.emit($event)\" />\n        </mat-menu>\n    </div>\n</div>\n\n<div class=\"editor-mode\">\n    <mat-form-field appearance=\"outline\">\n        <mat-select\n            [(value)]=\"selectedMode\"\n            (selectionChange)=\"changeMode.emit($event)\">\n            <mat-select-trigger>\n                <div class=\"select-trigger\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"{{ modeOptions[selectedMode].icon }}\"></mat-icon>\n                    <span class=\"item-title\">{{ modeOptions[selectedMode].name }}</span>\n                    <div class=\"separator\"></div>\n                </div>\n            </mat-select-trigger>\n            <mat-option\n                *ngFor=\"let mode of modeOptions\"\n                class=\"editor-mode-option\"\n                [value]=\"mode.id\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"{{ mode.icon }}\"></mat-icon>\n                <div class=\"item-content\">\n                    <span class=\"item-title\">{{ mode.name }}</span>\n                    <span class=\"item-text\">{{ mode.text }}</span>\n                </div>\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n</div>\n", styles: [":host{width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 24px}:host .mat-mdc-form-field{width:auto;height:24px;text-align:right}:host .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host .mat-mdc-form-field ::ng-deep .mat-mdc-text-field-wrapper{align-items:center}:host .mat-mdc-form-field ::ng-deep .mdc-notched-outline>*{border:unset}:host .mat-mdc-form-field ::ng-deep .mat-mdc-select-value{margin-right:4px}:host .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-infix{padding:0;width:auto}:host .mat-mdc-form-field ::ng-deep .mat-mdc-select-arrow svg{top:0}:host .mat-mdc-form-field .mat-mdc-select{font-size:14px;font-weight:700}.upload-input{display:none}mat-icon{width:24px;height:24px;font-size:24px}.editor-mode{display:flex;justify-content:flex-end;align-items:center;overflow:hidden;height:40px;border:1px solid;border-radius:20px}::ng-deep .cdk-overlay-pane{min-width:min-content}.separator{border-left:1px solid;opacity:.1;height:18px;margin:2px 8px}.select-trigger{display:inline-flex;text-align:left;margin-top:1px}.select-trigger .mat-icon{width:32px}.item-content{display:grid}.item-content .item-title{line-height:6px;padding-top:10px}.item-content .item-text{font-size:10px;font-weight:400;text-wrap:nowrap}.menu-buttons{display:flex;flex-wrap:wrap}.menu-buttons button{font-weight:500;height:24px;min-width:unset}.menu-header{display:flex;flex-direction:column;flex:1;overflow:hidden}.file-name{flex-basis:0;margin:0 8px 6px;display:block;min-height:32px;overflow:hidden}.file-name .title{font-size:18px;font-weight:500;line-height:normal;outline:none;display:inline-block;white-space:nowrap;min-width:1px;min-height:32px;overflow:hidden;max-width:100%;-webkit-user-select:none;user-select:none}.file-name .title:not(:focus){text-overflow:ellipsis}.heading-menu{display:inline-flex;width:210px}.hot-keys{text-align:end;width:auto}.menu-item-text{white-space:nowrap;width:64%}.mat-mdc-menu-item .mat-icon{margin-right:4px;width:28px}#editor-header-menu-item-print,#editor-header-menu-item-redo,#editor-header-menu-item-paste,#editor-header-menu-item-link,#editor-header-menu-item-image{border-bottom:1px solid}.hidden{display:none}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none}.list-icon .selected,.list-number .selected,.list-icon .selected:hover,.list-number .selected:hover{border:2px solid}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-menu-dropdowns', template: "<button\n    id=\"menu-dropdowns-menu-file\"\n    mat-button\n    [matMenuTriggerFor]=\"fileMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\">\n    File\n</button>\n<mat-menu\n    #fileMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <button\n        *ngIf=\"!isViewOnly\"\n        id=\"menu-dropdowns-menu-item-new\"\n        mat-menu-item\n        (click)=\"createDocument.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-add-new\"></mat-icon>\n            <span class=\"menu-item-text\">New</span>\n        </div>\n    </button>\n    <input\n        #fileInput\n        class=\"upload-input\"\n        accept=\".docx\"\n        type=\"file\"\n        id=\"file-input\"\n        (change)=\"onOpenFileFromDisk($event)\" />\n    <button\n        *ngIf=\"!isViewOnly\"\n        id=\"menu-dropdowns-menu-item-open-from\"\n        mat-menu-item\n        (click)=\"fileInput.click()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-open-from\"></mat-icon>\n            <span class=\"menu-item-text\">Open From</span>\n            <span class=\"hot-keys\">Ctrl+O</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-save-as\"\n        mat-menu-item\n        (click)=\"saveAs.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-save\"></mat-icon>\n            <span class=\"menu-item-text\">Save As</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-rename\"\n        mat-menu-item\n        (click)=\"rename.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-rename\"></mat-icon>\n            <span class=\"menu-item-text\">Rename</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-print\"\n        mat-menu-item\n        (click)=\"print.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-print\"></mat-icon>\n            <span class=\"menu-item-text\">Print</span>\n            <span class=\"hot-keys\">Ctrl+P</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-delete\"\n        mat-menu-item\n        (click)=\"delete.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-delete\"></mat-icon>\n            <span class=\"menu-item-text\">Delete</span>\n        </div>\n    </button>\n</mat-menu>\n<button\n    id=\"menu-dropdowns-menu-edit\"\n    mat-button\n    [matMenuTriggerFor]=\"editMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    (menuOpened)=\"openEditMenu.emit()\">\n    Edit\n</button>\n<mat-menu\n    #editMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <button\n        id=\"menu-dropdowns-menu-item-undo\"\n        mat-menu-item\n        [disabled]=\"!canUndo\"\n        (click)=\"undo.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-undo\"></mat-icon>\n            <span class=\"menu-item-text\">Undo</span>\n            <span class=\"hot-keys\">Ctrl+Z</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-redo\"\n        mat-menu-item\n        [disabled]=\"!canRedo\"\n        (click)=\"redo.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-redo\"></mat-icon>\n            <span class=\"menu-item-text\">Redo</span>\n            <span class=\"hot-keys\">Ctrl+Y</span>\n        </div>\n    </button>\n    <hr class=\"noder-divider\" />\n    <button\n        id=\"menu-dropdowns-menu-item-cut\"\n        mat-menu-item\n        [disabled]=\"!hasSelection\"\n        (click)=\"cutSelected.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-content-cut\"></mat-icon>\n            <span class=\"menu-item-text\">Cut</span>\n            <span class=\"hot-keys\">Ctrl+X</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-copy\"\n        mat-menu-item\n        [disabled]=\"!hasSelection\"\n        (click)=\"copySelected.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-file-copy\"></mat-icon>\n            <span class=\"menu-item-text\">Copy</span>\n            <span class=\"hot-keys\">Ctrl+C</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-paste\"\n        mat-menu-item\n        [disabled]=\"!clipboardData?.length\"\n        (click)=\"pasteClipboardData.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-content-paste\"></mat-icon>\n            <span class=\"menu-item-text\">Paste</span>\n            <span class=\"hot-keys\">Ctrl+V</span>\n        </div>\n    </button>\n    <hr class=\"noder-divider\" />\n    <button\n        id=\"menu-dropdowns-menu-item-select-all\"\n        mat-menu-item\n        (click)=\"selectAll.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-select-all\"></mat-icon>\n            <span class=\"menu-item-text\">Select All</span>\n            <span class=\"hot-keys\">Ctrl+A</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-delete-text\"\n        mat-menu-item\n        [disabled]=\"!hasSelection\"\n        (click)=\"removeSelected.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-delete\"></mat-icon>\n            <span class=\"menu-item-text\">Delete</span>\n        </div>\n    </button>\n</mat-menu>\n<button\n    *ngIf=\"!isViewOnly\"\n    #insertMenuTrigger=\"matMenuTrigger\"\n    id=\"menu-dropdowns-menu-insert\"\n    mat-button\n    [matMenuTriggerFor]=\"insertMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\">\n    Insert\n</button>\n<mat-menu\n    #insertMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <input\n        #imageFileInput\n        class=\"upload-input\"\n        accept=\"image/gif, image/jpeg, image/png, image/bmp, image/webp\"\n        type=\"file\"\n        id=\"image-file-input\"\n        (change)=\"onInsertImage($event)\" />\n    <button\n        id=\"menu-dropdowns-menu-item-image\"\n        mat-menu-item\n        (click)=\"imageFileInput.click()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-image\"></mat-icon>\n            <span class=\"menu-item-text\">Image</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-table\"\n        mat-menu-item\n        [matMenuTriggerFor]=\"tableInsert\"\n        (menuOpened)=\"showInsertTableMenu = true\"\n        (menuClosed)=\"onTableInsertMenuClosed()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-table\"></mat-icon>\n        Table\n    </button>\n    <hr class=\"noder-divider\" />\n    <button\n        id=\"menu-dropdowns-menu-item-link\"\n        mat-menu-item\n        (click)=\"insertLink.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-link-on\"></mat-icon>\n            <span class=\"menu-item-text\">Link</span>\n            <span class=\"hot-keys\">Ctrl+K</span>\n        </div>\n    </button>\n    <button\n        *ngFor=\"let element of elements\"\n        id=\"menu-dropdowns-menu-item-{{ element.title }}\"\n        mat-menu-item\n        (click)=\"onCreate(element)\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"{{ element.icon }}\"></mat-icon>\n            <span class=\"menu-item-text\">{{ element.name }}</span>\n        </div>\n    </button>\n    <button\n        id=\"menu-dropdowns-menu-item-headers-footers\"\n        mat-menu-item\n        class=\"hidden\"\n        [matMenuTriggerFor]=\"listHeadersFootersMenu\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-headers-footers\"></mat-icon>\n            <span class=\"menu-item-text\">Headers & Footers</span>\n        </div>\n    </button>\n    <mat-menu\n        #listHeadersFootersMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-header\"\n            mat-menu-item>\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-header\"></mat-icon>\n                <span class=\"menu-item-text\">Header</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-footer\"\n            mat-menu-item>\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-bottom\"></mat-icon>\n                <span class=\"menu-item-text\">Footer</span>\n            </div>\n        </button>\n    </mat-menu>\n</mat-menu>\n<button\n    *ngIf=\"!isViewOnly\"\n    id=\"menu-dropdowns-menu-layout\"\n    mat-button\n    [matMenuTriggerFor]=\"layoutMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\">\n    Layout\n</button>\n<mat-menu\n    #layoutMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <button\n        id=\"menu-dropdowns-menu-item-page-break\"\n        mat-menu-item\n        (click)=\"insertPageBreak.emit()\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-page-break\"></mat-icon>\n            <span class=\"menu-item-text\">Page Break</span>\n            <span class=\"hot-keys\">Ctrl+Enter</span>\n        </div>\n    </button>\n</mat-menu>\n<button\n    *ngIf=\"!isViewOnly\"\n    id=\"menu-dropdowns-menu-format\"\n    mat-button\n    [matMenuTriggerFor]=\"formatMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\">\n    Format\n</button>\n<mat-menu\n    #formatMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <button\n        id=\"menu-dropdowns-menu-item-align\"\n        mat-menu-item\n        [matMenuTriggerFor]=\"listAlignMenu\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-format-alignleft\"></mat-icon>\n            <span class=\"menu-item-text\">Align</span>\n        </div>\n    </button>\n    <mat-menu\n        #listAlignMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-align-left\"\n            mat-menu-item\n            (click)=\"onSelectFormat(alignments.Left)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-format-alignleft\"></mat-icon>\n                <span class=\"menu-item-text\">Left</span>\n                <span class=\"hot-keys\">Ctrl+L</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-align-center\"\n            mat-menu-item\n            (click)=\"onSelectFormat(alignments.Center)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-format-aligncenter\"></mat-icon>\n                <span class=\"menu-item-text\">Center</span>\n                <span class=\"hot-keys\">Ctrl+E</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-align-right\"\n            mat-menu-item\n            (click)=\"onSelectFormat(alignments.Right)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-format-alignright\"></mat-icon>\n                <span class=\"menu-item-text\">Right</span>\n                <span class=\"hot-keys\">Ctrl+R</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        id=\"menu-dropdowns-menu-item-bullets-numbering\"\n        mat-menu-item\n        [matMenuTriggerFor]=\"listBulletsNumberingMenu\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-format-bulleted\"></mat-icon>\n            <span class=\"menu-item-text\">Bullets & Numbering</span>\n        </div>\n    </button>\n    <mat-menu\n        #listBulletsNumberingMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-bullets\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listBulletedMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-format-bulleted\"></mat-icon>\n                <span class=\"menu-item-text\">Bullet List Menu</span>\n            </div>\n        </button>\n        <mat-menu\n            #listBulletedMenu=\"matMenu\"\n            class=\"dropdown-numbering-overlay noder-modal\"\n            yPosition=\"below\">\n            <div class=\"list-icon list-marker\">\n                <mat-icon\n                    svgIcon=\"marker-1\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList1\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList1)\"></mat-icon>\n                <mat-icon\n                    svgIcon=\"marker-2\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList2\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList2)\"></mat-icon>\n                <mat-icon\n                    svgIcon=\"marker-3\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList3\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList3)\"></mat-icon>\n            </div>\n            <div class=\"list-icon list-marker\">\n                <mat-icon\n                    svgIcon=\"marker-4\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList4\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList4)\"></mat-icon>\n                <mat-icon\n                    svgIcon=\"marker-5\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList5\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList5)\"></mat-icon>\n                <mat-icon\n                    svgIcon=\"marker-6\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList6\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList6)\"></mat-icon>\n            </div>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-numbering\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listNumberedMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-format-numbered\"></mat-icon>\n                <span class=\"menu-item-text\">Numbered List Menu</span>\n            </div>\n        </button>\n        <mat-menu\n            #listNumberedMenu=\"matMenu\"\n            class=\"dropdown-numbering-overlay noder-modal\"\n            yPosition=\"below\">\n            <div class=\"list-icon list-number\">\n                <mat-icon\n                    svgIcon=\"number-1\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList1\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList1)\"></mat-icon>\n                <mat-icon\n                    svgIcon=\"number-2\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList2\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList2)\"></mat-icon>\n                <mat-icon\n                    svgIcon=\"number-3\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList3\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList3)\"></mat-icon>\n            </div>\n            <div class=\"list-icon list-number\">\n                <mat-icon\n                    svgIcon=\"number-4\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList4\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList4)\"></mat-icon>\n                <mat-icon\n                    svgIcon=\"number-5\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList5\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList5)\"></mat-icon>\n                <mat-icon\n                    svgIcon=\"number-6\"\n                    [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList6\"\n                    (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList6)\"></mat-icon>\n            </div>\n        </mat-menu>\n    </mat-menu>\n    <button\n        id=\"menu-dropdowns-menu-item-text\"\n        mat-menu-item\n        [matMenuTriggerFor]=\"listTextMenu\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-format-bold\"></mat-icon>\n            <span class=\"menu-item-text\">Text</span>\n        </div>\n    </button>\n    <mat-menu\n        #listTextMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-bold\"\n            mat-menu-item\n            (click)=\"onApplyBold()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-format-bold\"></mat-icon>\n                <span class=\"menu-item-text\">Bold</span>\n                <span class=\"hot-keys\">Ctrl+B</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-italic\"\n            mat-menu-item\n            (click)=\"onApplyItalic()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-format-italic\"></mat-icon>\n                <span class=\"menu-item-text\">Italic</span>\n                <span class=\"hot-keys\">Ctrl+I</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-underlined\"\n            mat-menu-item\n            (click)=\"onApplyUnderline()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-format-underlined\"></mat-icon>\n                <span class=\"menu-item-text\">Underlined</span>\n                <span class=\"hot-keys\">Ctrl+U</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        id=\"menu-dropdowns-menu-item-header-footer\"\n        mat-menu-item\n        class=\"hidden\">\n        <div class=\"heading-menu\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-headers-footers\"></mat-icon>\n            <span class=\"menu-item-text\">Headers & Footers</span>\n        </div>\n    </button>\n</mat-menu>\n<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host{display:flex;align-items:center;height:100%}.upload-input{display:none}.menu-buttons mat-icon{width:24px;height:24px;font-size:24px}.heading-menu{display:inline-flex;width:210px}.hot-keys{text-align:end;width:auto}.menu-item-text{white-space:nowrap;width:64%}.mat-mdc-menu-item .mat-icon{margin-right:4px;width:28px}.hidden{display:none}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none}.list-icon .selected,.list-icon .selected:hover,.list-number .selected,.list-number .selected:hover{border-width:2px;border-style:solid}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: CustomIconService }], propDecorators: { isViewOnly: [{
                 type: Input
             }], hasSelection: [{
                 type: Input
             }], clipboardData: [{
                 type: Input
-            }], title: [{
-                type: Input
             }], historyInfo: [{
                 type: Input
+            }], styles: [{
+                type: Input
             }], openFileFromDisk: [{
                 type: Output
             }], addCustomElement: [{
@@ -13140,18 +13138,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 type: Output
             }], insertImage: [{
                 type: Output
-            }], changeMode: [{
-                type: Output
-            }], renameDocumentTitle: [{
+            }], rename: [{
                 type: Output
             }], delete: [{
                 type: Output
             }], openEditMenu: [{
                 type: Output
-            }], undo: [{
-                type: Output
             }], redo: [{
                 type: Output
+            }], undo: [{
+                type: Output
             }], cutSelected: [{
                 type: Output
             }], copySelected: [{
@@ -13174,11 +13170,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 type: Output
             }], removeNumberings: [{
                 type: Output
-            }], titleSpan: [{
-                type: ViewChild,
-                args: ['titleSpan', { static: true }]
-            }], styles: [{
-                type: Input
             }], insertTable: [{
                 type: Output
             }], tableInsertMenu: [{
@@ -13186,58 +13177,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 args: ['tableInsert']
             }] } });
 
-class EditorSearchDialogComponent extends ObserverComponent {
-    constructor(editorService) {
-        super();
-        this.editorService = editorService;
-        this.searchControl = new FormControl('');
-        this.replaceControl = new FormControl('');
-        this.isReplace = false;
-        this.searchIteration$ = this.editorService.searchIteration$;
-    }
-    ngOnInit() {
-        this.subscriptions.push(this.searchSubscription());
-    }
-    onClose() {
-        this.editorService.openSearchDialog = false;
-    }
-    findNext() {
-        this.editorService.searchOptions = {
-            term: this.searchControl.value,
-            skipCurrent: true,
-            backwards: false
-        };
-    }
-    findPrev() {
-        this.editorService.searchOptions = {
-            term: this.searchControl.value,
-            skipCurrent: true,
-            backwards: true
-        };
-    }
-    setReplace() {
-        this.isReplace = !this.isReplace;
-    }
-    replace() {
-        this.editorService.replace = { replaceValue: this.replaceControl.value, searchValue: this.searchControl.value };
-    }
-    searchSubscription() {
-        return this.searchControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe(() => {
-            this.editorService.searchOptions = {
-                term: this.searchControl.value,
-                skipCurrent: false,
-                backwards: false
-            };
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorSearchDialogComponent, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: EditorSearchDialogComponent, isStandalone: true, selector: "app-editor-search-dialog", providers: [ExternalElementService], usesInheritance: true, ngImport: i0, template: "<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>Search for</mat-label>\n        <input\n            matInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findPrev()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-onleft\"></mat-icon>\n    </button>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findNext()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-onright\"></mat-icon>\n    </button>\n</div>\n<ng-container *ngIf=\"{ searchIteration: searchIteration$ | async } as data\">\n    <div\n        class=\"replace-form\"\n        *ngIf=\"isReplace\">\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>Replace with</mat-label>\n            <input\n                matInput\n                [formControl]=\"replaceControl\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                (keydown.enter)=\"replace()\" />\n        </mat-form-field>\n        <button\n            type=\"button\"\n            mat-button\n            (click)=\"replace()\">\n            Replace\n        </button>\n    </div>\n    <div class=\"search-options\">\n        <button\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Toggle Replace Mode\"\n            (click)=\"setReplace()\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n        </button>\n        <div class=\"counter\">\n            <span>{{ data.searchIteration?.current ?? 0 }} of {{ data.searchIteration?.total ?? 0 }}</span>\n        </div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Close\"\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-cancel-thin\"></mat-icon>\n        </button>\n    </div>\n</ng-container>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;padding:3px}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{display:flex}mat-form-field{padding-left:10px}.mdc-button{font-size:12px;padding:0 8px;min-width:unset}.search-options{line-height:40px}.search-options .counter{text-align:center;flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorSearchDialogComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [CommonModule, FormsModule, MatButtonModule, MatIconModule, MatInputModule, MatTooltipModule, ReactiveFormsModule], providers: [ExternalElementService], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-editor-search-dialog', template: "<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>Search for</mat-label>\n        <input\n            matInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findPrev()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-onleft\"></mat-icon>\n    </button>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findNext()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-onright\"></mat-icon>\n    </button>\n</div>\n<ng-container *ngIf=\"{ searchIteration: searchIteration$ | async } as data\">\n    <div\n        class=\"replace-form\"\n        *ngIf=\"isReplace\">\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>Replace with</mat-label>\n            <input\n                matInput\n                [formControl]=\"replaceControl\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                (keydown.enter)=\"replace()\" />\n        </mat-form-field>\n        <button\n            type=\"button\"\n            mat-button\n            (click)=\"replace()\">\n            Replace\n        </button>\n    </div>\n    <div class=\"search-options\">\n        <button\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Toggle Replace Mode\"\n            (click)=\"setReplace()\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n        </button>\n        <div class=\"counter\">\n            <span>{{ data.searchIteration?.current ?? 0 }} of {{ data.searchIteration?.total ?? 0 }}</span>\n        </div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Close\"\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-cancel-thin\"></mat-icon>\n        </button>\n    </div>\n</ng-container>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;padding:3px}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{display:flex}mat-form-field{padding-left:10px}.mdc-button{font-size:12px;padding:0 8px;min-width:unset}.search-options{line-height:40px}.search-options .counter{text-align:center;flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}\n"] }]
-        }], ctorParameters: () => [{ type: EditorService }] });
-
 class FontComponent {
     constructor() {
         this.isDisabled = false;
@@ -13263,11 +13202,11 @@ class FontComponent {
         this.selectFont.emit(font);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FontComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FontComponent, selector: "app-font", inputs: { isDisabled: "isDisabled", styles: "styles" }, outputs: { selectFont: "selectFont" }, ngImport: i0, template: "<button\n    mat-button\n    [matMenuTriggerFor]=\"fontMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\">\n    <div class=\"font-menu\">\n        <span>{{ font }}</span>\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </div>\n</button>\n<mat-menu #fontMenu=\"matMenu\">\n    <ng-container *ngFor=\"let font of fonts\">\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled\"\n            (click)=\"onSelectFont(font)\">\n            {{ font }}\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}:host button{height:28px;margin:0 4px}.font-menu{display:flex;justify-content:space-between;align-items:center;min-width:130px}span{padding-left:10%}mat-icon{margin-right:5%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FontComponent, selector: "app-font", inputs: { isDisabled: "isDisabled", styles: "styles" }, outputs: { selectFont: "selectFont" }, ngImport: i0, template: "<button\n    mat-button\n    [matMenuTriggerFor]=\"fontMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\">\n    <div class=\"font-menu\">\n        <span>{{ font }}</span>\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </div>\n</button>\n<mat-menu\n    #fontMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <ng-container *ngFor=\"let font of fonts\">\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled\"\n            (click)=\"onSelectFont(font)\">\n            {{ font }}\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [".font-menu{display:flex;justify-content:space-between;align-items:center;min-width:130px}span{padding-left:10%}button{height:28px;margin:0 4px}mat-icon{margin-right:5%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FontComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-font', template: "<button\n    mat-button\n    [matMenuTriggerFor]=\"fontMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\">\n    <div class=\"font-menu\">\n        <span>{{ font }}</span>\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </div>\n</button>\n<mat-menu #fontMenu=\"matMenu\">\n    <ng-container *ngFor=\"let font of fonts\">\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled\"\n            (click)=\"onSelectFont(font)\">\n            {{ font }}\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}:host button{height:28px;margin:0 4px}.font-menu{display:flex;justify-content:space-between;align-items:center;min-width:130px}span{padding-left:10%}mat-icon{margin-right:5%}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-font', template: "<button\n    mat-button\n    [matMenuTriggerFor]=\"fontMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\">\n    <div class=\"font-menu\">\n        <span>{{ font }}</span>\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </div>\n</button>\n<mat-menu\n    #fontMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <ng-container *ngFor=\"let font of fonts\">\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled\"\n            (click)=\"onSelectFont(font)\">\n            {{ font }}\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [".font-menu{display:flex;justify-content:space-between;align-items:center;min-width:130px}span{padding-left:10%}button{height:28px;margin:0 4px}mat-icon{margin-right:5%}\n"] }]
         }], propDecorators: { isDisabled: [{
                 type: Input
             }], styles: [{
@@ -13335,11 +13274,11 @@ class FontSizeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FontSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FontSizeComponent, selector: "app-font-size", inputs: { isDisabled: "isDisabled", fontSize: "fontSize" }, outputs: { selectFontSize: "selectFontSize" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onDecrementFontSize()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-remove\"></mat-icon>\n</button>\n<input\n    type=\"text\"\n    [formControl]=\"fontSizeControl\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"onSetFontSize()\"\n    (blur)=\"resetFontSize()\" />\n<mat-autocomplete\n    #auto=\"matAutocomplete\"\n    panelWidth=\"60\"\n    disableRipple=\"false\"\n    hideSingleSelectionIndicator=\"true\">\n    <mat-option\n        *ngFor=\"let fontSize of fontSizes\"\n        [value]=\"fontSize\"\n        (click)=\"onSelectFontSize(fontSize)\">\n        {{ fontSize }}\n    </mat-option>\n</mat-autocomplete>\n<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onIncrementFontSize()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n</button>\n", styles: [":host{justify-content:center;align-items:center;display:flex}button{margin:4px}input{width:30px;height:25px;text-align:center;border-color:transparent;outline-color:#1b84e0}.mdc-button{min-width:28px;min-height:28px;width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.mat-mdc-option{padding-left:6px;padding-right:6px;min-height:30px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FontSizeComponent, selector: "app-font-size", inputs: { isDisabled: "isDisabled", fontSize: "fontSize" }, outputs: { selectFontSize: "selectFontSize" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onDecrementFontSize()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-remove\"></mat-icon>\n</button>\n<input\n    type=\"text\"\n    [formControl]=\"fontSizeControl\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"onSetFontSize()\"\n    (blur)=\"resetFontSize()\" />\n<mat-autocomplete\n    #auto=\"matAutocomplete\"\n    panelWidth=\"60\"\n    disableRipple=\"false\"\n    hideSingleSelectionIndicator=\"true\">\n    <mat-option\n        *ngFor=\"let fontSize of fontSizes\"\n        [value]=\"fontSize\"\n        (click)=\"onSelectFontSize(fontSize)\">\n        {{ fontSize }}\n    </mat-option>\n</mat-autocomplete>\n<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onIncrementFontSize()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n</button>\n", styles: ["button{margin:4px}input{width:48px;height:32px;text-align:center;border-color:transparent;outline-color:#1b84e0}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.mat-mdc-option{padding-left:6px;padding-right:6px;min-height:30px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FontSizeComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-font-size', template: "<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onDecrementFontSize()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-remove\"></mat-icon>\n</button>\n<input\n    type=\"text\"\n    [formControl]=\"fontSizeControl\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"onSetFontSize()\"\n    (blur)=\"resetFontSize()\" />\n<mat-autocomplete\n    #auto=\"matAutocomplete\"\n    panelWidth=\"60\"\n    disableRipple=\"false\"\n    hideSingleSelectionIndicator=\"true\">\n    <mat-option\n        *ngFor=\"let fontSize of fontSizes\"\n        [value]=\"fontSize\"\n        (click)=\"onSelectFontSize(fontSize)\">\n        {{ fontSize }}\n    </mat-option>\n</mat-autocomplete>\n<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onIncrementFontSize()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n</button>\n", styles: [":host{justify-content:center;align-items:center;display:flex}button{margin:4px}input{width:30px;height:25px;text-align:center;border-color:transparent;outline-color:#1b84e0}.mdc-button{min-width:28px;min-height:28px;width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.mat-mdc-option{padding-left:6px;padding-right:6px;min-height:30px}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-font-size', template: "<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onDecrementFontSize()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-remove\"></mat-icon>\n</button>\n<input\n    type=\"text\"\n    [formControl]=\"fontSizeControl\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"onSetFontSize()\"\n    (blur)=\"resetFontSize()\" />\n<mat-autocomplete\n    #auto=\"matAutocomplete\"\n    panelWidth=\"60\"\n    disableRipple=\"false\"\n    hideSingleSelectionIndicator=\"true\">\n    <mat-option\n        *ngFor=\"let fontSize of fontSizes\"\n        [value]=\"fontSize\"\n        (click)=\"onSelectFontSize(fontSize)\">\n        {{ fontSize }}\n    </mat-option>\n</mat-autocomplete>\n<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onIncrementFontSize()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n</button>\n", styles: ["button{margin:4px}input{width:48px;height:32px;text-align:center;border-color:transparent;outline-color:#1b84e0}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.mat-mdc-option{padding-left:6px;padding-right:6px;min-height:30px}\n"] }]
         }], propDecorators: { isDisabled: [{
                 type: Input
             }], fontSize: [{
@@ -13359,11 +13298,11 @@ class ColorPickerComponent {
         this.colorChange.emit(color);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ColorPickerComponent, selector: "app-color-picker", inputs: { color: "color", icon: "icon", isDisabled: "isDisabled", palette: "palette" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<button\n    mat-button\n    ngx-colors-trigger\n    overlayClassName=\"color-picker-overlay\"\n    [disabled]=\"isDisabled\"\n    [(ngModel)]=\"color\"\n    [palette]=\"palette\"\n    [hideTextInput]=\"true\"\n    [attachTo]=\"icon\"\n    (input)=\"onChangeColor(color)\">\n    <div\n        class=\"color-text\"\n        [ngStyle]=\"{ 'border-color': color ? color : 'transparent' }\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            [fontIcon]=\"icon\"></mat-icon>\n    </div>\n</button>\n", styles: ["button{margin:0 3px}.color-text{display:inline-flex;height:22px}.mdc-button{min-width:24px;height:28px;width:28px;padding:0}.mdc-button mat-icon{height:24px;width:24px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.NgxColorsTriggerDirective, selector: "[ngx-colors-trigger]", inputs: ["colorsAnimation", "palette", "format", "position", "hideTextInput", "hideColorPicker", "attachTo", "overlayClassName", "colorPickerControls", "acceptLabel", "cancelLabel"], outputs: ["change", "input", "slider", "close", "open"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ColorPickerComponent, selector: "app-color-picker", inputs: { color: "color", icon: "icon", isDisabled: "isDisabled", palette: "palette" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<button\n    mat-button\n    ngx-colors-trigger\n    overlayClassName=\"color-picker-overlay\"\n    [disabled]=\"isDisabled\"\n    [(ngModel)]=\"color\"\n    [palette]=\"palette\"\n    [hideTextInput]=\"true\"\n    [attachTo]=\"icon\"\n    (input)=\"onChangeColor(color)\">\n    <div\n        class=\"color-text\"\n        [ngStyle]=\"{ 'border-color': color ? color : 'transparent' }\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            [fontIcon]=\"icon\"></mat-icon>\n    </div>\n</button>\n", styles: ["button{margin:0 3px}.color-text{display:inline-flex;height:22px}.mdc-button{min-width:32px;height:32px;width:32px;padding:0}.mdc-button mat-icon{height:24px;width:24px}.mdc-button::ng-deep .mdc-button__label{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.NgxColorsTriggerDirective, selector: "[ngx-colors-trigger]", inputs: ["colorsAnimation", "palette", "format", "position", "hideTextInput", "hideColorPicker", "attachTo", "overlayClassName", "colorPickerControls", "acceptLabel", "cancelLabel"], outputs: ["change", "input", "slider", "close", "open"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    mat-button\n    ngx-colors-trigger\n    overlayClassName=\"color-picker-overlay\"\n    [disabled]=\"isDisabled\"\n    [(ngModel)]=\"color\"\n    [palette]=\"palette\"\n    [hideTextInput]=\"true\"\n    [attachTo]=\"icon\"\n    (input)=\"onChangeColor(color)\">\n    <div\n        class=\"color-text\"\n        [ngStyle]=\"{ 'border-color': color ? color : 'transparent' }\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            [fontIcon]=\"icon\"></mat-icon>\n    </div>\n</button>\n", styles: ["button{margin:0 3px}.color-text{display:inline-flex;height:22px}.mdc-button{min-width:24px;height:28px;width:28px;padding:0}.mdc-button mat-icon{height:24px;width:24px}\n"] }]
+            args: [{ selector: 'app-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    mat-button\n    ngx-colors-trigger\n    overlayClassName=\"color-picker-overlay\"\n    [disabled]=\"isDisabled\"\n    [(ngModel)]=\"color\"\n    [palette]=\"palette\"\n    [hideTextInput]=\"true\"\n    [attachTo]=\"icon\"\n    (input)=\"onChangeColor(color)\">\n    <div\n        class=\"color-text\"\n        [ngStyle]=\"{ 'border-color': color ? color : 'transparent' }\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            [fontIcon]=\"icon\"></mat-icon>\n    </div>\n</button>\n", styles: ["button{margin:0 3px}.color-text{display:inline-flex;height:22px}.mdc-button{min-width:32px;height:32px;width:32px;padding:0}.mdc-button mat-icon{height:24px;width:24px}.mdc-button::ng-deep .mdc-button__label{display:flex}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], icon: [{
@@ -13421,11 +13360,11 @@ class FontStyleComponent {
         this.selectHighlightColor.emit(color);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FontStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FontStyleComponent, selector: "app-font-style", inputs: { isDisabled: "isDisabled", bold: "bold", italic: "italic", underline: "underline", fontColor: "fontColor", highlightColor: "highlightColor" }, outputs: { toggleBold: "toggleBold", toggleItalic: "toggleItalic", toggleUnderline: "toggleUnderline", selectFontColor: "selectFontColor", selectHighlightColor: "selectHighlightColor" }, ngImport: i0, template: "<mat-button-toggle-group multiple>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"bold\"\n        (click)=\"onToggleBold()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-bold\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"italic\"\n        (click)=\"onToggleItalic()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-italic\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"underline\"\n        (click)=\"onToggleUnderline()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-underlined\"></mat-icon>\n    </mat-button-toggle>\n</mat-button-toggle-group>\n<app-color-picker\n    id=\"icon-format-colortext\"\n    class=\"text-color\"\n    [color]=\"fontColor\"\n    [isDisabled]=\"isDisabled\"\n    icon=\"icon-format-colortext\"\n    [palette]=\"textColorPalette\"\n    (colorChange)=\"onSelectFontColor($event)\"></app-color-picker>\n<app-color-picker\n    id=\"icon-link-highlighter\"\n    class=\"highlight-color\"\n    [color]=\"highlightColor\"\n    [isDisabled]=\"isDisabled\"\n    icon=\"icon-link-highlighter\"\n    [palette]=\"highlightColorPalette\"\n    (colorChange)=\"onSelectHighlightColor($event)\"></app-color-picker>\n", styles: ["mat-button-toggle,button{margin:0 4px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}:host{align-self:center}:host ::ng-deep #format-color-highlight .circle.button:first-child,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child{flex:100%;width:100%;background:no-repeat left/20px url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_format_color_reset_48px-512.png);border-radius:unset}:host ::ng-deep #format-color-highlight .circle.button:first-child .circle.color.circle-border,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child .circle.color.circle-border{width:100%;border:unset}:host ::ng-deep #format-color-highlight .circle.button:first-child .circle.color.circle-border .selected,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child .circle.color.circle-border .selected{display:none}\n"], dependencies: [{ kind: "directive", type: i1$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ColorPickerComponent, selector: "app-color-picker", inputs: ["color", "icon", "isDisabled", "palette"], outputs: ["colorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FontStyleComponent, selector: "app-font-style", inputs: { isDisabled: "isDisabled", bold: "bold", italic: "italic", underline: "underline", fontColor: "fontColor", highlightColor: "highlightColor" }, outputs: { toggleBold: "toggleBold", toggleItalic: "toggleItalic", toggleUnderline: "toggleUnderline", selectFontColor: "selectFontColor", selectHighlightColor: "selectHighlightColor" }, ngImport: i0, template: "<mat-button-toggle-group multiple>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"bold\"\n        (click)=\"onToggleBold()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-bold\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"italic\"\n        (click)=\"onToggleItalic()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-italic\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"underline\"\n        (click)=\"onToggleUnderline()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-underlined\"></mat-icon>\n    </mat-button-toggle>\n</mat-button-toggle-group>\n<app-color-picker\n    id=\"icon-format-colortext\"\n    class=\"text-color\"\n    [color]=\"fontColor\"\n    [isDisabled]=\"isDisabled\"\n    icon=\"icon-format-colortext\"\n    [palette]=\"textColorPalette\"\n    (colorChange)=\"onSelectFontColor($event)\"></app-color-picker>\n<app-color-picker\n    id=\"icon-link-highlighter\"\n    class=\"highlight-color\"\n    [color]=\"highlightColor\"\n    [isDisabled]=\"isDisabled\"\n    icon=\"icon-link-highlighter\"\n    [palette]=\"highlightColorPalette\"\n    (colorChange)=\"onSelectHighlightColor($event)\"></app-color-picker>\n", styles: ["mat-button-toggle,button{margin:0 4px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}:host{display:flex;align-items:center}:host ::ng-deep #format-color-highlight .circle.button:first-child,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child{flex:100%;width:100%;background:no-repeat left/20px url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_format_color_reset_48px-512.png);border-radius:unset}:host ::ng-deep #format-color-highlight .circle.button:first-child .circle.color.circle-border,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child .circle.color.circle-border{width:100%;border:unset}:host ::ng-deep #format-color-highlight .circle.button:first-child .circle.color.circle-border .selected,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child .circle.color.circle-border .selected{display:none}\n"], dependencies: [{ kind: "directive", type: i1$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ColorPickerComponent, selector: "app-color-picker", inputs: ["color", "icon", "isDisabled", "palette"], outputs: ["colorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FontStyleComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-font-style', template: "<mat-button-toggle-group multiple>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"bold\"\n        (click)=\"onToggleBold()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-bold\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"italic\"\n        (click)=\"onToggleItalic()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-italic\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"underline\"\n        (click)=\"onToggleUnderline()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-underlined\"></mat-icon>\n    </mat-button-toggle>\n</mat-button-toggle-group>\n<app-color-picker\n    id=\"icon-format-colortext\"\n    class=\"text-color\"\n    [color]=\"fontColor\"\n    [isDisabled]=\"isDisabled\"\n    icon=\"icon-format-colortext\"\n    [palette]=\"textColorPalette\"\n    (colorChange)=\"onSelectFontColor($event)\"></app-color-picker>\n<app-color-picker\n    id=\"icon-link-highlighter\"\n    class=\"highlight-color\"\n    [color]=\"highlightColor\"\n    [isDisabled]=\"isDisabled\"\n    icon=\"icon-link-highlighter\"\n    [palette]=\"highlightColorPalette\"\n    (colorChange)=\"onSelectHighlightColor($event)\"></app-color-picker>\n", styles: ["mat-button-toggle,button{margin:0 4px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}:host{align-self:center}:host ::ng-deep #format-color-highlight .circle.button:first-child,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child{flex:100%;width:100%;background:no-repeat left/20px url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_format_color_reset_48px-512.png);border-radius:unset}:host ::ng-deep #format-color-highlight .circle.button:first-child .circle.color.circle-border,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child .circle.color.circle-border{width:100%;border:unset}:host ::ng-deep #format-color-highlight .circle.button:first-child .circle.color.circle-border .selected,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child .circle.color.circle-border .selected{display:none}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-font-style', template: "<mat-button-toggle-group multiple>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"bold\"\n        (click)=\"onToggleBold()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-bold\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"italic\"\n        (click)=\"onToggleItalic()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-italic\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"underline\"\n        (click)=\"onToggleUnderline()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-underlined\"></mat-icon>\n    </mat-button-toggle>\n</mat-button-toggle-group>\n<app-color-picker\n    id=\"icon-format-colortext\"\n    class=\"text-color\"\n    [color]=\"fontColor\"\n    [isDisabled]=\"isDisabled\"\n    icon=\"icon-format-colortext\"\n    [palette]=\"textColorPalette\"\n    (colorChange)=\"onSelectFontColor($event)\"></app-color-picker>\n<app-color-picker\n    id=\"icon-link-highlighter\"\n    class=\"highlight-color\"\n    [color]=\"highlightColor\"\n    [isDisabled]=\"isDisabled\"\n    icon=\"icon-link-highlighter\"\n    [palette]=\"highlightColorPalette\"\n    (colorChange)=\"onSelectHighlightColor($event)\"></app-color-picker>\n", styles: ["mat-button-toggle,button{margin:0 4px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}:host{display:flex;align-items:center}:host ::ng-deep #format-color-highlight .circle.button:first-child,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child{flex:100%;width:100%;background:no-repeat left/20px url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_format_color_reset_48px-512.png);border-radius:unset}:host ::ng-deep #format-color-highlight .circle.button:first-child .circle.color.circle-border,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child .circle.color.circle-border{width:100%;border:unset}:host ::ng-deep #format-color-highlight .circle.button:first-child .circle.color.circle-border .selected,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child .circle.color.circle-border .selected{display:none}\n"] }]
         }], propDecorators: { isDisabled: [{
                 type: Input
             }], bold: [{
@@ -13501,11 +13440,11 @@ class NumberingComponent {
         this.selectNumberingTemplate.emit(numberingTemplateType);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NumberingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: NumberingComponent, selector: "app-numbering", inputs: { isDisabled: "isDisabled", selectedNumberingType: "selectedNumberingType", selectedNumberingTemplate: "selectedNumberingTemplate" }, outputs: { selectNumberingTemplate: "selectNumberingTemplate", removeNumberings: "removeNumberings" }, ngImport: i0, template: "<mat-button-toggle-group\n    name=\"format\"\n    aria-label=\"format\"\n    [disabled]=\"isDisabled\">\n    <mat-button-toggle\n        (click)=\"onToggleBulletedNumbering()\"\n        [value]=\"numberingType.Bullet\"\n        [checked]=\"selectedNumberingType === numberingType.Bullet\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-bulleted\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listBulletedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listBulletedMenu=\"matMenu\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList6\"></mat-icon>\n        </div>\n    </mat-menu>\n    <mat-button-toggle\n        (click)=\"onToggleNumberedNumbering()\"\n        [value]=\"numberingType.Number\"\n        [checked]=\"selectedNumberingType === numberingType.Number\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-numbered\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listNumberedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        style=\"display: none\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listNumberedMenu=\"matMenu\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList6\"></mat-icon>\n        </div>\n    </mat-menu>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle-group,button{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}.mdc-button{min-width:28px;min-height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.mat-button-toggle-group{align-items:center}.mat-button-toggle-group .mdc-button{min-width:20px;height:28px;padding:0}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none!important}.list-icon .selected,.list-icon .selected:hover{border:2px solid #1b84e0}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: NumberingComponent, selector: "app-numbering", inputs: { isDisabled: "isDisabled", selectedNumberingType: "selectedNumberingType", selectedNumberingTemplate: "selectedNumberingTemplate" }, outputs: { selectNumberingTemplate: "selectNumberingTemplate", removeNumberings: "removeNumberings" }, ngImport: i0, template: "<mat-button-toggle-group\n    name=\"format\"\n    aria-label=\"format\"\n    [disabled]=\"isDisabled\">\n    <mat-button-toggle\n        (click)=\"onToggleBulletedNumbering()\"\n        [value]=\"numberingType.Bullet\"\n        [checked]=\"selectedNumberingType === numberingType.Bullet\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-bulleted\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listBulletedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listBulletedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList6\"></mat-icon>\n        </div>\n    </mat-menu>\n    <mat-button-toggle\n        (click)=\"onToggleNumberedNumbering()\"\n        [value]=\"numberingType.Number\"\n        [checked]=\"selectedNumberingType === numberingType.Number\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-numbered\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listNumberedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        style=\"display: none\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listNumberedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList6\"></mat-icon>\n        </div>\n    </mat-menu>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle-group,button{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}.mdc-button{min-width:32px;min-height:32px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.mat-button-toggle-group{align-items:center}.mat-button-toggle-group .mdc-button{min-width:20px;height:32px;padding:0}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none!important}.list-icon .selected,.list-icon .selected:hover{border-width:2px;border-style:solid}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NumberingComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-numbering', template: "<mat-button-toggle-group\n    name=\"format\"\n    aria-label=\"format\"\n    [disabled]=\"isDisabled\">\n    <mat-button-toggle\n        (click)=\"onToggleBulletedNumbering()\"\n        [value]=\"numberingType.Bullet\"\n        [checked]=\"selectedNumberingType === numberingType.Bullet\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-bulleted\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listBulletedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listBulletedMenu=\"matMenu\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList6\"></mat-icon>\n        </div>\n    </mat-menu>\n    <mat-button-toggle\n        (click)=\"onToggleNumberedNumbering()\"\n        [value]=\"numberingType.Number\"\n        [checked]=\"selectedNumberingType === numberingType.Number\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-numbered\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listNumberedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        style=\"display: none\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listNumberedMenu=\"matMenu\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList6\"></mat-icon>\n        </div>\n    </mat-menu>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle-group,button{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}.mdc-button{min-width:28px;min-height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.mat-button-toggle-group{align-items:center}.mat-button-toggle-group .mdc-button{min-width:20px;height:28px;padding:0}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none!important}.list-icon .selected,.list-icon .selected:hover{border:2px solid #1b84e0}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-numbering', template: "<mat-button-toggle-group\n    name=\"format\"\n    aria-label=\"format\"\n    [disabled]=\"isDisabled\">\n    <mat-button-toggle\n        (click)=\"onToggleBulletedNumbering()\"\n        [value]=\"numberingType.Bullet\"\n        [checked]=\"selectedNumberingType === numberingType.Bullet\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-bulleted\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listBulletedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listBulletedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList6\"></mat-icon>\n        </div>\n    </mat-menu>\n    <mat-button-toggle\n        (click)=\"onToggleNumberedNumbering()\"\n        [value]=\"numberingType.Number\"\n        [checked]=\"selectedNumberingType === numberingType.Number\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-numbered\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listNumberedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        style=\"display: none\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listNumberedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList6\"></mat-icon>\n        </div>\n    </mat-menu>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle-group,button{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}.mdc-button{min-width:32px;min-height:32px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.mat-button-toggle-group{align-items:center}.mat-button-toggle-group .mdc-button{min-width:20px;height:32px;padding:0}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none!important}.list-icon .selected,.list-icon .selected:hover{border-width:2px;border-style:solid}\n"] }]
         }], propDecorators: { isDisabled: [{
                 type: Input
             }], selectedNumberingType: [{
@@ -13523,11 +13462,11 @@ class PrintComponent {
         this.print = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: PrintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: PrintComponent, selector: "app-print", outputs: { print: "print" }, ngImport: i0, template: "<button\n    mat-button\n    (click)=\"print.emit()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-print\"></mat-icon>\n</button>\n", styles: [":host{align-self:center}.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: PrintComponent, selector: "app-print", outputs: { print: "print" }, ngImport: i0, template: "<button\n    mat-button\n    (click)=\"print.emit()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-print\"></mat-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: PrintComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-print', template: "<button\n    mat-button\n    (click)=\"print.emit()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-print\"></mat-icon>\n</button>\n", styles: [":host{align-self:center}.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-print', template: "<button\n    mat-button\n    (click)=\"print.emit()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-print\"></mat-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}\n"] }]
         }], propDecorators: { print: [{
                 type: Output
             }] } });
@@ -13540,11 +13479,11 @@ class UndoRedoComponent {
         this.redo = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UndoRedoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: UndoRedoComponent, selector: "app-undo-redo", inputs: { canUndo: "canUndo", canRedo: "canRedo" }, outputs: { undo: "undo", redo: "redo" }, ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"!canUndo\"\n    (click)=\"undo.emit()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-undo\"></mat-icon>\n</button>\n<button\n    mat-button\n    [disabled]=\"!canRedo\"\n    (click)=\"redo.emit()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-redo\"></mat-icon>\n</button>\n", styles: [":host{align-self:center}.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: UndoRedoComponent, selector: "app-undo-redo", inputs: { canUndo: "canUndo", canRedo: "canRedo" }, outputs: { undo: "undo", redo: "redo" }, ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"!canUndo\"\n    (click)=\"undo.emit()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-undo\"></mat-icon>\n</button>\n<button\n    mat-button\n    [disabled]=\"!canRedo\"\n    (click)=\"redo.emit()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-redo\"></mat-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UndoRedoComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-undo-redo', template: "<button\n    mat-button\n    [disabled]=\"!canUndo\"\n    (click)=\"undo.emit()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-undo\"></mat-icon>\n</button>\n<button\n    mat-button\n    [disabled]=\"!canRedo\"\n    (click)=\"redo.emit()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-redo\"></mat-icon>\n</button>\n", styles: [":host{align-self:center}.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-undo-redo', template: "<button\n    mat-button\n    [disabled]=\"!canUndo\"\n    (click)=\"undo.emit()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-undo\"></mat-icon>\n</button>\n<button\n    mat-button\n    [disabled]=\"!canRedo\"\n    (click)=\"redo.emit()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-redo\"></mat-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}\n"] }]
         }], propDecorators: { canUndo: [{
                 type: Input
             }], canRedo: [{
@@ -13555,7 +13494,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 type: Output
             }] } });
 
-class EditorToolbarComponent {
+class ToolbarActionsComponent {
+    set historyInfo(value) {
+        this.canUndo = value.step !== -1;
+        this.canRedo = value.step < value.lastStep;
+    }
     set styles(value) {
         this._styles = value;
         this.numberingType = ToolbarStylesHelper.getNumberingType(value.isBulletMarker);
@@ -13564,19 +13507,18 @@ class EditorToolbarComponent {
     get styles() {
         return this._styles;
     }
-    set historyInfo(value) {
-        this.canUndo = value.step !== -1;
-        this.canRedo = value.step < value.lastStep;
-    }
-    constructor(customIconService) {
+    constructor(customIconService, injector) {
         this.customIconService = customIconService;
-        this.changeTextStyle = new EventEmitter();
+        this.injector = injector;
+        this.print = new EventEmitter();
+        this.redo = new EventEmitter();
+        this.undo = new EventEmitter();
         this.changeParagraphStyle = new EventEmitter();
+        this.changeTextStyle = new EventEmitter();
         this.setNumberingTemplateType = new EventEmitter();
         this.removeNumberings = new EventEmitter();
-        this.redo = new EventEmitter();
-        this.undo = new EventEmitter();
-        this.print = new EventEmitter();
+        this.createElement = new EventEmitter();
+        this.elements = this.injector.get(EXTERNAL_ELEMENT_SERVICE).elements;
         this.customIconService.register();
     }
     onApplyFontFamily(font) {
@@ -13607,8 +13549,10 @@ class EditorToolbarComponent {
         const templateLevels = NumberingTemplates.find(x => x.templateType === templateType).levels;
         this.setNumberingTemplateType.emit(templateLevels);
     }
-    onRemoveNumberings() {
-        this.removeNumberings.emit();
+    async onCreateElement(model) {
+        const data = await model.factoryMethod();
+        const element = new ElementDataModel(model.type, data.width, data.height, data.guid);
+        this.createElement.emit(element);
     }
     checkFontLoadedAndApplyStyle(style) {
         const newStyles = { ...this.styles, ...style };
@@ -13626,31 +13570,129 @@ class EditorToolbarComponent {
             // continue regardless of error
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorToolbarComponent, deps: [{ token: CustomIconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: EditorToolbarComponent, selector: "app-editor-toolbar", inputs: { isViewOnly: "isViewOnly", styles: "styles", historyInfo: "historyInfo" }, outputs: { changeTextStyle: "changeTextStyle", changeParagraphStyle: "changeParagraphStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", redo: "redo", undo: "undo", print: "print" }, ngImport: i0, template: "<ng-container *ngIf=\"styles\">\n    <app-undo-redo\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (undo)=\"undo.emit()\"\n        (redo)=\"redo.emit()\"></app-undo-redo>\n    <app-print (print)=\"print.emit()\"></app-print>\n    <div class=\"separator\"></div>\n    <app-font\n        [isDisabled]=\"isViewOnly\"\n        [styles]=\"styles\"\n        (selectFont)=\"onApplyFontFamily($event)\"></app-font>\n    <div class=\"separator\"></div>\n    <app-font-size\n        [isDisabled]=\"isViewOnly\"\n        [fontSize]=\"styles.fontSize\"\n        (selectFontSize)=\"onApplyFontSize($event)\"></app-font-size>\n    <div class=\"separator\"></div>\n    <app-font-style\n        [isDisabled]=\"isViewOnly\"\n        [bold]=\"styles.bold\"\n        [italic]=\"styles.italic\"\n        [underline]=\"styles.underline\"\n        [fontColor]=\"styles.fontColor\"\n        [highlightColor]=\"styles.highlightColor\"\n        (selectFontColor)=\"onApplyFontColor($event)\"\n        (toggleBold)=\"onApplyBold($event)\"\n        (toggleItalic)=\"onApplyItalic($event)\"\n        (toggleUnderline)=\"onApplyUnderline($event)\"\n        (selectHighlightColor)=\"onApplyHighlightColor($event)\"></app-font-style>\n    <div class=\"separator\"></div>\n    <app-format\n        [isDisabled]=\"isViewOnly\"\n        [alignment]=\"styles.alignment\"\n        (selectAlignment)=\"onApplyAlignment($event)\"></app-format>\n    <div class=\"separator\"></div>\n    <app-numbering\n        [isDisabled]=\"isViewOnly\"\n        [selectedNumberingType]=\"numberingType\"\n        [selectedNumberingTemplate]=\"numberingTemplateType\"\n        (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n        (removeNumberings)=\"onRemoveNumberings()\"></app-numbering>\n</ng-container>\n", styles: [":host ::ng-deep{display:flex;height:40px;justify-content:center;border-bottom:1px solid}:host ::ng-deep mat-button-toggle,:host ::ng-deep .mat-button-toggle-button{height:28px;width:28px;border-radius:4px}:host ::ng-deep mat-button-toggle mat-icon,:host ::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host ::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host ::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:1px solid;opacity:.1;height:100%;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FontComponent, selector: "app-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { kind: "component", type: FontStyleComponent, selector: "app-font-style", inputs: ["isDisabled", "bold", "italic", "underline", "fontColor", "highlightColor"], outputs: ["toggleBold", "toggleItalic", "toggleUnderline", "selectFontColor", "selectHighlightColor"] }, { kind: "component", type: FormatComponent, selector: "app-format", inputs: ["isDisabled", "alignment"], outputs: ["selectAlignment"] }, { kind: "component", type: NumberingComponent, selector: "app-numbering", inputs: ["isDisabled", "selectedNumberingType", "selectedNumberingTemplate"], outputs: ["selectNumberingTemplate", "removeNumberings"] }, { kind: "component", type: PrintComponent, selector: "app-print", outputs: ["print"] }, { kind: "component", type: UndoRedoComponent, selector: "app-undo-redo", inputs: ["canUndo", "canRedo"], outputs: ["undo", "redo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ToolbarActionsComponent, deps: [{ token: CustomIconService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ToolbarActionsComponent, selector: "app-toolbar-actions", inputs: { isViewOnly: "isViewOnly", historyInfo: "historyInfo", styles: "styles" }, outputs: { print: "print", redo: "redo", undo: "undo", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", createElement: "createElement" }, ngImport: i0, template: "<app-undo-redo\n    [canUndo]=\"canUndo\"\n    [canRedo]=\"canRedo\"\n    (undo)=\"undo.emit()\"\n    (redo)=\"redo.emit()\" />\n<app-print (print)=\"print.emit()\" />\n<div class=\"separator\"></div>\n<app-font\n    [isDisabled]=\"isViewOnly\"\n    [styles]=\"styles\"\n    (selectFont)=\"onApplyFontFamily($event)\" />\n<div class=\"separator\"></div>\n<app-font-size\n    [isDisabled]=\"isViewOnly\"\n    [fontSize]=\"styles.fontSize\"\n    (selectFontSize)=\"onApplyFontSize($event)\" />\n<div class=\"separator\"></div>\n<app-font-style\n    [isDisabled]=\"isViewOnly\"\n    [bold]=\"styles.bold\"\n    [italic]=\"styles.italic\"\n    [underline]=\"styles.underline\"\n    [fontColor]=\"styles.fontColor\"\n    [highlightColor]=\"styles.highlightColor\"\n    (selectFontColor)=\"onApplyFontColor($event)\"\n    (toggleBold)=\"onApplyBold($event)\"\n    (toggleItalic)=\"onApplyItalic($event)\"\n    (toggleUnderline)=\"onApplyUnderline($event)\"\n    (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n<div class=\"separator\"></div>\n<div\n    *ngIf=\"elements.length\"\n    class=\"custom-elements\">\n    <button\n        *ngFor=\"let element of elements\"\n        mat-button\n        [disabled]=\"isViewOnly\"\n        (click)=\"onCreateElement(element)\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"{{ element.icon }}\"></mat-icon>\n    </button>\n    <div class=\"separator\"></div>\n</div>\n<app-format\n    [isDisabled]=\"isViewOnly\"\n    [alignment]=\"styles.alignment\"\n    (selectAlignment)=\"onApplyAlignment($event)\" />\n<div class=\"separator\"></div>\n<app-numbering\n    [isDisabled]=\"isViewOnly\"\n    [selectedNumberingType]=\"numberingType\"\n    [selectedNumberingTemplate]=\"numberingTemplateType\"\n    (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\" />\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:1px solid;opacity:.1;height:100%;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements{display:flex;align-items:center;height:100%}.custom-elements .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FontComponent, selector: "app-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { kind: "component", type: FontStyleComponent, selector: "app-font-style", inputs: ["isDisabled", "bold", "italic", "underline", "fontColor", "highlightColor"], outputs: ["toggleBold", "toggleItalic", "toggleUnderline", "selectFontColor", "selectHighlightColor"] }, { kind: "component", type: FormatComponent, selector: "app-format", inputs: ["isDisabled", "alignment"], outputs: ["selectAlignment"] }, { kind: "component", type: NumberingComponent, selector: "app-numbering", inputs: ["isDisabled", "selectedNumberingType", "selectedNumberingTemplate"], outputs: ["selectNumberingTemplate", "removeNumberings"] }, { kind: "component", type: PrintComponent, selector: "app-print", outputs: ["print"] }, { kind: "component", type: UndoRedoComponent, selector: "app-undo-redo", inputs: ["canUndo", "canRedo"], outputs: ["undo", "redo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ToolbarActionsComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-editor-toolbar', template: "<ng-container *ngIf=\"styles\">\n    <app-undo-redo\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (undo)=\"undo.emit()\"\n        (redo)=\"redo.emit()\"></app-undo-redo>\n    <app-print (print)=\"print.emit()\"></app-print>\n    <div class=\"separator\"></div>\n    <app-font\n        [isDisabled]=\"isViewOnly\"\n        [styles]=\"styles\"\n        (selectFont)=\"onApplyFontFamily($event)\"></app-font>\n    <div class=\"separator\"></div>\n    <app-font-size\n        [isDisabled]=\"isViewOnly\"\n        [fontSize]=\"styles.fontSize\"\n        (selectFontSize)=\"onApplyFontSize($event)\"></app-font-size>\n    <div class=\"separator\"></div>\n    <app-font-style\n        [isDisabled]=\"isViewOnly\"\n        [bold]=\"styles.bold\"\n        [italic]=\"styles.italic\"\n        [underline]=\"styles.underline\"\n        [fontColor]=\"styles.fontColor\"\n        [highlightColor]=\"styles.highlightColor\"\n        (selectFontColor)=\"onApplyFontColor($event)\"\n        (toggleBold)=\"onApplyBold($event)\"\n        (toggleItalic)=\"onApplyItalic($event)\"\n        (toggleUnderline)=\"onApplyUnderline($event)\"\n        (selectHighlightColor)=\"onApplyHighlightColor($event)\"></app-font-style>\n    <div class=\"separator\"></div>\n    <app-format\n        [isDisabled]=\"isViewOnly\"\n        [alignment]=\"styles.alignment\"\n        (selectAlignment)=\"onApplyAlignment($event)\"></app-format>\n    <div class=\"separator\"></div>\n    <app-numbering\n        [isDisabled]=\"isViewOnly\"\n        [selectedNumberingType]=\"numberingType\"\n        [selectedNumberingTemplate]=\"numberingTemplateType\"\n        (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n        (removeNumberings)=\"onRemoveNumberings()\"></app-numbering>\n</ng-container>\n", styles: [":host ::ng-deep{display:flex;height:40px;justify-content:center;border-bottom:1px solid}:host ::ng-deep mat-button-toggle,:host ::ng-deep .mat-button-toggle-button{height:28px;width:28px;border-radius:4px}:host ::ng-deep mat-button-toggle mat-icon,:host ::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host ::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host ::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:1px solid;opacity:.1;height:100%;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}\n"] }]
-        }], ctorParameters: () => [{ type: CustomIconService }], propDecorators: { isViewOnly: [{
-                type: Input
-            }], styles: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-toolbar-actions', template: "<app-undo-redo\n    [canUndo]=\"canUndo\"\n    [canRedo]=\"canRedo\"\n    (undo)=\"undo.emit()\"\n    (redo)=\"redo.emit()\" />\n<app-print (print)=\"print.emit()\" />\n<div class=\"separator\"></div>\n<app-font\n    [isDisabled]=\"isViewOnly\"\n    [styles]=\"styles\"\n    (selectFont)=\"onApplyFontFamily($event)\" />\n<div class=\"separator\"></div>\n<app-font-size\n    [isDisabled]=\"isViewOnly\"\n    [fontSize]=\"styles.fontSize\"\n    (selectFontSize)=\"onApplyFontSize($event)\" />\n<div class=\"separator\"></div>\n<app-font-style\n    [isDisabled]=\"isViewOnly\"\n    [bold]=\"styles.bold\"\n    [italic]=\"styles.italic\"\n    [underline]=\"styles.underline\"\n    [fontColor]=\"styles.fontColor\"\n    [highlightColor]=\"styles.highlightColor\"\n    (selectFontColor)=\"onApplyFontColor($event)\"\n    (toggleBold)=\"onApplyBold($event)\"\n    (toggleItalic)=\"onApplyItalic($event)\"\n    (toggleUnderline)=\"onApplyUnderline($event)\"\n    (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n<div class=\"separator\"></div>\n<div\n    *ngIf=\"elements.length\"\n    class=\"custom-elements\">\n    <button\n        *ngFor=\"let element of elements\"\n        mat-button\n        [disabled]=\"isViewOnly\"\n        (click)=\"onCreateElement(element)\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"{{ element.icon }}\"></mat-icon>\n    </button>\n    <div class=\"separator\"></div>\n</div>\n<app-format\n    [isDisabled]=\"isViewOnly\"\n    [alignment]=\"styles.alignment\"\n    (selectAlignment)=\"onApplyAlignment($event)\" />\n<div class=\"separator\"></div>\n<app-numbering\n    [isDisabled]=\"isViewOnly\"\n    [selectedNumberingType]=\"numberingType\"\n    [selectedNumberingTemplate]=\"numberingTemplateType\"\n    (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\" />\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:1px solid;opacity:.1;height:100%;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements{display:flex;align-items:center;height:100%}.custom-elements .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}\n"] }]
+        }], ctorParameters: () => [{ type: CustomIconService }, { type: i0.Injector }], propDecorators: { isViewOnly: [{
                 type: Input
             }], historyInfo: [{
                 type: Input
-            }], changeTextStyle: [{
+            }], styles: [{
+                type: Input
+            }], print: [{
+                type: Output
+            }], redo: [{
+                type: Output
+            }], undo: [{
                 type: Output
             }], changeParagraphStyle: [{
                 type: Output
+            }], changeTextStyle: [{
+                type: Output
             }], setNumberingTemplateType: [{
                 type: Output
             }], removeNumberings: [{
                 type: Output
+            }], createElement: [{
+                type: Output
+            }] } });
+
+class EditorToolbarComponent {
+    constructor() {
+        this.showActions = true;
+        this.openFileFromDisk = new EventEmitter();
+        this.addCustomElement = new EventEmitter();
+        this.saveAs = new EventEmitter();
+        this.print = new EventEmitter();
+        this.insertPageBreak = new EventEmitter();
+        this.createDocument = new EventEmitter();
+        this.insertImage = new EventEmitter();
+        this.rename = new EventEmitter();
+        this.delete = new EventEmitter();
+        this.openEditMenu = new EventEmitter();
+        this.redo = new EventEmitter();
+        this.undo = new EventEmitter();
+        this.cutSelected = new EventEmitter();
+        this.copySelected = new EventEmitter();
+        this.pasteClipboardData = new EventEmitter();
+        this.selectAll = new EventEmitter();
+        this.removeSelected = new EventEmitter();
+        this.insertLink = new EventEmitter();
+        this.createElement = new EventEmitter();
+        this.changeParagraphStyle = new EventEmitter();
+        this.changeTextStyle = new EventEmitter();
+        this.setNumberingTemplateType = new EventEmitter();
+        this.removeNumberings = new EventEmitter();
+        this.insertTable = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: EditorToolbarComponent, selector: "app-editor-toolbar", inputs: { showActions: "showActions", isViewOnly: "isViewOnly", hasSelection: "hasSelection", clipboardData: "clipboardData", historyInfo: "historyInfo", styles: "styles" }, outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", print: "print", insertPageBreak: "insertPageBreak", createDocument: "createDocument", insertImage: "insertImage", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", redo: "redo", undo: "undo", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected", insertLink: "insertLink", createElement: "createElement", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertTable: "insertTable" }, ngImport: i0, template: "<app-menu-dropdowns\n    [isViewOnly]=\"isViewOnly\"\n    [hasSelection]=\"hasSelection\"\n    [clipboardData]=\"clipboardData\"\n    [historyInfo]=\"historyInfo\"\n    [styles]=\"styles\"\n    (openFileFromDisk)=\"openFileFromDisk.emit($event)\"\n    (addCustomElement)=\"addCustomElement.emit($event)\"\n    (saveAs)=\"saveAs.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (insertImage)=\"insertImage.emit($event)\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-toolbar-actions\n    *ngIf=\"styles && showActions\"\n    [isViewOnly]=\"isViewOnly\"\n    [historyInfo]=\"historyInfo\"\n    [styles]=\"styles\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuDropdownsComponent, selector: "app-menu-dropdowns", inputs: ["isViewOnly", "hasSelection", "clipboardData", "historyInfo", "styles"], outputs: ["openFileFromDisk", "addCustomElement", "saveAs", "print", "insertPageBreak", "createDocument", "insertImage", "rename", "delete", "openEditMenu", "redo", "undo", "cutSelected", "copySelected", "pasteClipboardData", "selectAll", "removeSelected", "insertLink", "createElement", "changeParagraphStyle", "changeTextStyle", "setNumberingTemplateType", "removeNumberings", "insertTable"] }, { kind: "component", type: ToolbarActionsComponent, selector: "app-toolbar-actions", inputs: ["isViewOnly", "historyInfo", "styles"], outputs: ["print", "redo", "undo", "changeParagraphStyle", "changeTextStyle", "setNumberingTemplateType", "removeNumberings", "createElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-editor-toolbar', template: "<app-menu-dropdowns\n    [isViewOnly]=\"isViewOnly\"\n    [hasSelection]=\"hasSelection\"\n    [clipboardData]=\"clipboardData\"\n    [historyInfo]=\"historyInfo\"\n    [styles]=\"styles\"\n    (openFileFromDisk)=\"openFileFromDisk.emit($event)\"\n    (addCustomElement)=\"addCustomElement.emit($event)\"\n    (saveAs)=\"saveAs.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (insertImage)=\"insertImage.emit($event)\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-toolbar-actions\n    *ngIf=\"styles && showActions\"\n    [isViewOnly]=\"isViewOnly\"\n    [historyInfo]=\"historyInfo\"\n    [styles]=\"styles\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
+        }], propDecorators: { showActions: [{
+                type: Input
+            }], isViewOnly: [{
+                type: Input
+            }], hasSelection: [{
+                type: Input
+            }], clipboardData: [{
+                type: Input
+            }], historyInfo: [{
+                type: Input
+            }], styles: [{
+                type: Input
+            }], openFileFromDisk: [{
+                type: Output
+            }], addCustomElement: [{
+                type: Output
+            }], saveAs: [{
+                type: Output
+            }], print: [{
+                type: Output
+            }], insertPageBreak: [{
+                type: Output
+            }], createDocument: [{
+                type: Output
+            }], insertImage: [{
+                type: Output
+            }], rename: [{
+                type: Output
+            }], delete: [{
+                type: Output
+            }], openEditMenu: [{
+                type: Output
             }], redo: [{
                 type: Output
             }], undo: [{
                 type: Output
-            }], print: [{
+            }], cutSelected: [{
+                type: Output
+            }], copySelected: [{
+                type: Output
+            }], pasteClipboardData: [{
+                type: Output
+            }], selectAll: [{
+                type: Output
+            }], removeSelected: [{
+                type: Output
+            }], insertLink: [{
+                type: Output
+            }], createElement: [{
+                type: Output
+            }], changeParagraphStyle: [{
+                type: Output
+            }], changeTextStyle: [{
+                type: Output
+            }], setNumberingTemplateType: [{
+                type: Output
+            }], removeNumberings: [{
+                type: Output
+            }], insertTable: [{
                 type: Output
             }] } });
 
@@ -13726,7 +13768,7 @@ class ZoomComponent {
         trigger.panelOpen ? trigger.closePanel() : trigger.openPanel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ZoomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ZoomComponent, selector: "app-zoom", viewQueries: [{ propertyName: "zoom", first: true, predicate: ["zoom"], descendants: true }], ngImport: i0, template: "<input\n    [matAutocomplete]=\"auto\"\n    [formControl]=\"myControl\"\n    #trigger=\"matAutocompleteTrigger\"\n    #zoom\n    (focusout)=\"onSetPreviousValue()\"\n    (keydown)=\"onKeyDown($event, trigger)\" />\n<button\n    mat-button\n    (click)=\"openPanel($event, trigger)\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n</button>\n<mat-autocomplete\n    class=\"zoom-autocomplite\"\n    #auto=\"matAutocomplete\"\n    [panelWidth]=\"80\">\n    <mat-option\n        *ngFor=\"let zoomPercentage of zoomPercentages\"\n        (click)=\"onSelectZoom(zoomPercentage)\">\n        {{ zoomPercentage }}%\n    </mat-option>\n</mat-autocomplete>\n", styles: [":host{display:flex;align-items:center;width:90px}.zoom-menu{display:flex;justify-content:space-between;align-items:center;min-width:100px}span{padding-left:10%}.mdc-button{min-width:20px;height:25px;padding:0;margin-right:10px}mat-icon{width:20px;margin-right:5%}input{padding-left:10px;font-size:14px;width:60px;border-color:transparent;outline:none}::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel{max-height:100%!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ZoomComponent, selector: "app-zoom", viewQueries: [{ propertyName: "zoom", first: true, predicate: ["zoom"], descendants: true }], ngImport: i0, template: "<input\n    [matAutocomplete]=\"auto\"\n    [formControl]=\"myControl\"\n    #trigger=\"matAutocompleteTrigger\"\n    #zoom\n    (focusout)=\"onSetPreviousValue()\"\n    (keydown)=\"onKeyDown($event, trigger)\" />\n<button\n    mat-button\n    (click)=\"openPanel($event, trigger)\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n</button>\n<mat-autocomplete\n    class=\"zoom-autocomplite\"\n    #auto=\"matAutocomplete\"\n    [panelWidth]=\"80\">\n    <mat-option\n        *ngFor=\"let zoomPercentage of zoomPercentages\"\n        (click)=\"onSelectZoom(zoomPercentage)\">\n        {{ zoomPercentage }}%\n    </mat-option>\n</mat-autocomplete>\n", styles: [":host{display:flex;align-items:center;width:90px}.zoom-menu{display:flex;justify-content:space-between;align-items:center;min-width:100px}span{padding-left:10%}.mdc-button{min-width:20px;height:25px;padding:0;margin-right:10px}mat-icon{width:20px;margin-right:5%}input{padding-left:10px;font-size:14px;width:60px;border-color:transparent;outline:none}::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel{max-height:100%!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ZoomComponent, decorators: [{
             type: Component,
@@ -13750,11 +13792,14 @@ class EditorToolbarModule {
             FormatComponent,
             HeadingComponent,
             HeadingComponent,
+            MenuDropdownsComponent,
             NumberingComponent,
             PrintComponent,
+            ToolbarActionsComponent,
             UndoRedoComponent,
             ZoomComponent], imports: [CommonModule,
             FormsModule,
+            InsertTableComponent,
             MatAutocompleteModule,
             MatButtonModule,
             MatButtonToggleModule,
@@ -13767,6 +13812,7 @@ class EditorToolbarModule {
             ReactiveFormsModule], exports: [EditorToolbarComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorToolbarModule, providers: [CustomIconService], imports: [CommonModule,
             FormsModule,
+            InsertTableComponent,
             MatAutocompleteModule,
             MatButtonModule,
             MatButtonToggleModule,
@@ -13794,14 +13840,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                         FormatComponent,
                         HeadingComponent,
                         HeadingComponent,
+                        MenuDropdownsComponent,
                         NumberingComponent,
                         PrintComponent,
+                        ToolbarActionsComponent,
                         UndoRedoComponent,
                         ZoomComponent
                     ],
                     imports: [
                         CommonModule,
                         FormsModule,
+                        InsertTableComponent,
                         MatAutocompleteModule,
                         MatButtonModule,
                         MatButtonToggleModule,
@@ -13904,20 +13953,24 @@ class ConfirmDialogComponent {
     constructor(data, ref) {
         this.data = data;
         this.ref = ref;
+        this.modal = true;
     }
     onClose(status) {
         this.ref.close(status);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$4.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", ngImport: i0, template: "<p class=\"title\">{{ data.title ? data.title : 'Confirmation' }}</p>\n<div class=\"content\">\n    <p>{{ data.message }}</p>\n</div>\n<div class=\"actions\">\n    <button\n        id=\"confirm-dialog-cancel-btn\"\n        mat-button\n        (click)=\"onClose(false)\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n        {{ data.cancel ? data.cancel : 'Cancel' }}\n    </button>\n    <button\n        id=\"confirm-dialog-confirm-btn\"\n        mat-raised-button\n        class=\"delete-btn\"\n        color=\"primary\"\n        (click)=\"onClose(true)\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-done-thin\"></mat-icon>\n        {{ data.confirm ? data.confirm : 'Delete' }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:400px;max-width:440px;min-height:208px}.title{font-size:18px;font-weight:700;text-transform:capitalize;padding:24px 24px 12px;margin:0}.content{display:flex;flex:1;font-size:16px;line-height:20px;padding:20px 24px 16px}.content p{margin:0;overflow:hidden;text-overflow:ellipsis}.actions{display:flex;justify-content:center;margin-bottom:24px;gap:8px}.actions button{height:40px;width:120px}.actions button mat-icon{font-size:24px;height:24px;width:24px}.actions button .mat-button-toggle-label-content{padding:0 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", host: { properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<p class=\"title\">{{ data.title ? data.title : 'Confirmation' }}</p>\n<div class=\"content\">\n    <p>{{ data.message }}</p>\n</div>\n<div class=\"actions\">\n    <button\n        id=\"confirm-dialog-cancel-btn\"\n        mat-button\n        (click)=\"onClose(false)\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n        {{ data.cancel ? data.cancel : 'Cancel' }}\n    </button>\n    <button\n        id=\"confirm-dialog-confirm-btn\"\n        mat-raised-button\n        class=\"delete-btn\"\n        color=\"primary\"\n        (click)=\"onClose(true)\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-done-thin\"></mat-icon>\n        {{ data.confirm ? data.confirm : 'Delete' }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:400px;max-width:440px;min-height:208px}.title{font-size:18px;font-weight:700;text-transform:capitalize;padding:24px 24px 12px;margin:0;border-bottom-width:1px;border-bottom-style:solid}.content{display:flex;flex:1;font-size:16px;line-height:20px;padding:20px 24px 16px}.content p{margin:0;overflow:hidden;text-overflow:ellipsis}.actions{display:flex;justify-content:center;margin-bottom:24px;gap:8px}.actions button{height:40px;width:120px;text-transform:uppercase}.actions button mat-icon{font-size:24px;height:24px;width:24px}.actions button .mat-button-toggle-label-content{padding:0 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, MatDialogModule, MatButtonModule, MatIconModule], selector: 'app-confirm-dialog', template: "<p class=\"title\">{{ data.title ? data.title : 'Confirmation' }}</p>\n<div class=\"content\">\n    <p>{{ data.message }}</p>\n</div>\n<div class=\"actions\">\n    <button\n        id=\"confirm-dialog-cancel-btn\"\n        mat-button\n        (click)=\"onClose(false)\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n        {{ data.cancel ? data.cancel : 'Cancel' }}\n    </button>\n    <button\n        id=\"confirm-dialog-confirm-btn\"\n        mat-raised-button\n        class=\"delete-btn\"\n        color=\"primary\"\n        (click)=\"onClose(true)\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-done-thin\"></mat-icon>\n        {{ data.confirm ? data.confirm : 'Delete' }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:400px;max-width:440px;min-height:208px}.title{font-size:18px;font-weight:700;text-transform:capitalize;padding:24px 24px 12px;margin:0}.content{display:flex;flex:1;font-size:16px;line-height:20px;padding:20px 24px 16px}.content p{margin:0;overflow:hidden;text-overflow:ellipsis}.actions{display:flex;justify-content:center;margin-bottom:24px;gap:8px}.actions button{height:40px;width:120px}.actions button mat-icon{font-size:24px;height:24px;width:24px}.actions button .mat-button-toggle-label-content{padding:0 2px}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, MatDialogModule, MatButtonModule, MatIconModule], selector: 'app-confirm-dialog', template: "<p class=\"title\">{{ data.title ? data.title : 'Confirmation' }}</p>\n<div class=\"content\">\n    <p>{{ data.message }}</p>\n</div>\n<div class=\"actions\">\n    <button\n        id=\"confirm-dialog-cancel-btn\"\n        mat-button\n        (click)=\"onClose(false)\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n        {{ data.cancel ? data.cancel : 'Cancel' }}\n    </button>\n    <button\n        id=\"confirm-dialog-confirm-btn\"\n        mat-raised-button\n        class=\"delete-btn\"\n        color=\"primary\"\n        (click)=\"onClose(true)\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-done-thin\"></mat-icon>\n        {{ data.confirm ? data.confirm : 'Delete' }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:400px;max-width:440px;min-height:208px}.title{font-size:18px;font-weight:700;text-transform:capitalize;padding:24px 24px 12px;margin:0;border-bottom-width:1px;border-bottom-style:solid}.content{display:flex;flex:1;font-size:16px;line-height:20px;padding:20px 24px 16px}.content p{margin:0;overflow:hidden;text-overflow:ellipsis}.actions{display:flex;justify-content:center;margin-bottom:24px;gap:8px}.actions button{height:40px;width:120px;text-transform:uppercase}.actions button mat-icon{font-size:24px;height:24px;width:24px}.actions button .mat-button-toggle-label-content{padding:0 2px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i1$4.MatDialogRef }] });
+                }] }, { type: i1$4.MatDialogRef }], propDecorators: { modal: [{
+                type: HostBinding,
+                args: ['class.noder-modal']
+            }] } });
 
 const URL_PATTERN = /^(https?:\/\/)?(www\.)?[-a-zA-Z0-9áéíóúÁÉÍÓÚüÜñÑ@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9áéíóúÁÉÍÓÚüÜñÑ@:%_+.~#?&/=]*)$/;
 class ValidationHelper {
@@ -13938,6 +13991,7 @@ class AddLinkDialogComponent {
         this.dialogRef = dialogRef;
         this.data = data;
         this.fb = fb;
+        this.modal = true;
         dialogRef.disableClose = true;
         this.form = this.fb.group({
             text: [data.text, Validators.required],
@@ -13956,8 +14010,8 @@ class AddLinkDialogComponent {
         }
         this.onApply();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: AddLinkDialogComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: AddLinkDialogComponent, isStandalone: true, selector: "app-add-link-dialog", ngImport: i0, template: "<div mat-dialog-title>{{ data.title }}</div>\n<div\n    mat-dialog-content\n    [formGroup]=\"form\">\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ data.textPlaceholder }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.text\"\n            (keydown.enter)=\"onEnter()\"\n            required />\n        <mat-error>The {{ data.textPlaceholder }} is required.</mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ data.linkPlaceholder }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.link\"\n            (keydown.enter)=\"onEnter()\"\n            required />\n        <mat-error>The {{ data.linkPlaceholder }} is required.</mat-error>\n    </mat-form-field>\n</div>\n<div mat-dialog-actions>\n    <button\n        mat-button\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n        Cancel\n    </button>\n    <button\n        mat-raised-button\n        color=\"primary\"\n        class=\"apply-btn\"\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-done-thin\"></mat-icon>\n        Apply\n    </button>\n</div>\n", styles: [":host{height:300px;width:430px;display:block;overflow:hidden}:host ::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 12px;height:48px}:host ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:12px}.mat-mdc-dialog-title{font-weight:600;padding-top:5px}mat-form-field{width:100%}.mat-mdc-dialog-content{padding-top:10px;padding-bottom:0}.mat-mdc-dialog-actions{display:flex;justify-content:center;align-items:center;padding-top:5px;height:25%}.mat-mdc-dialog-actions button{width:30%;height:100%;letter-spacing:1px;border-radius:8px}.mat-mdc-dialog-actions button .apply-btn{font-weight:400}.mat-mdc-dialog-actions button .mat-icon{font-size:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: AddLinkDialogComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: AddLinkDialogComponent, isStandalone: true, selector: "app-add-link-dialog", host: { properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<div mat-dialog-title>{{ data.title }}</div>\n<div\n    mat-dialog-content\n    [formGroup]=\"form\">\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ data.textPlaceholder }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.text\"\n            (keydown.enter)=\"onEnter()\"\n            required />\n        <mat-error>The {{ data.textPlaceholder }} is required.</mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ data.linkPlaceholder }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.link\"\n            (keydown.enter)=\"onEnter()\"\n            required />\n        <mat-error>The {{ data.linkPlaceholder }} is required.</mat-error>\n    </mat-form-field>\n</div>\n<div mat-dialog-actions>\n    <button\n        mat-button\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n        Cancel\n    </button>\n    <button\n        mat-raised-button\n        color=\"primary\"\n        class=\"apply-btn\"\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-done-thin\"></mat-icon>\n        Apply\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:300px;width:430px;overflow:hidden}:host ::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 12px;height:48px}:host ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:12px}.mat-mdc-dialog-title{font-weight:600;padding-top:5px}mat-form-field{width:100%}.mat-mdc-dialog-content{padding-top:10px;padding-bottom:0}.mat-mdc-dialog-actions{display:flex;justify-content:center;padding-top:5px;height:40px;margin-bottom:30px}.mat-mdc-dialog-actions button{width:30%;height:100%;letter-spacing:1px;border-radius:8px;text-transform:uppercase}.mat-mdc-dialog-actions button .apply-btn{font-weight:400}.mat-mdc-dialog-actions button .mat-icon{font-size:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: AddLinkDialogComponent, decorators: [{
             type: Component,
@@ -13970,11 +14024,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                         MatInputModule,
                         ReactiveFormsModule,
                         TranslateModule
-                    ], selector: 'app-add-link-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div mat-dialog-title>{{ data.title }}</div>\n<div\n    mat-dialog-content\n    [formGroup]=\"form\">\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ data.textPlaceholder }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.text\"\n            (keydown.enter)=\"onEnter()\"\n            required />\n        <mat-error>The {{ data.textPlaceholder }} is required.</mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ data.linkPlaceholder }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.link\"\n            (keydown.enter)=\"onEnter()\"\n            required />\n        <mat-error>The {{ data.linkPlaceholder }} is required.</mat-error>\n    </mat-form-field>\n</div>\n<div mat-dialog-actions>\n    <button\n        mat-button\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n        Cancel\n    </button>\n    <button\n        mat-raised-button\n        color=\"primary\"\n        class=\"apply-btn\"\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-done-thin\"></mat-icon>\n        Apply\n    </button>\n</div>\n", styles: [":host{height:300px;width:430px;display:block;overflow:hidden}:host ::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 12px;height:48px}:host ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:12px}.mat-mdc-dialog-title{font-weight:600;padding-top:5px}mat-form-field{width:100%}.mat-mdc-dialog-content{padding-top:10px;padding-bottom:0}.mat-mdc-dialog-actions{display:flex;justify-content:center;align-items:center;padding-top:5px;height:25%}.mat-mdc-dialog-actions button{width:30%;height:100%;letter-spacing:1px;border-radius:8px}.mat-mdc-dialog-actions button .apply-btn{font-weight:400}.mat-mdc-dialog-actions button .mat-icon{font-size:24px;height:24px}\n"] }]
+                    ], selector: 'app-add-link-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div mat-dialog-title>{{ data.title }}</div>\n<div\n    mat-dialog-content\n    [formGroup]=\"form\">\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ data.textPlaceholder }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.text\"\n            (keydown.enter)=\"onEnter()\"\n            required />\n        <mat-error>The {{ data.textPlaceholder }} is required.</mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ data.linkPlaceholder }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.link\"\n            (keydown.enter)=\"onEnter()\"\n            required />\n        <mat-error>The {{ data.linkPlaceholder }} is required.</mat-error>\n    </mat-form-field>\n</div>\n<div mat-dialog-actions>\n    <button\n        mat-button\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n        Cancel\n    </button>\n    <button\n        mat-raised-button\n        color=\"primary\"\n        class=\"apply-btn\"\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-done-thin\"></mat-icon>\n        Apply\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:300px;width:430px;overflow:hidden}:host ::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 12px;height:48px}:host ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:12px}.mat-mdc-dialog-title{font-weight:600;padding-top:5px}mat-form-field{width:100%}.mat-mdc-dialog-content{padding-top:10px;padding-bottom:0}.mat-mdc-dialog-actions{display:flex;justify-content:center;padding-top:5px;height:40px;margin-bottom:30px}.mat-mdc-dialog-actions button{width:30%;height:100%;letter-spacing:1px;border-radius:8px;text-transform:uppercase}.mat-mdc-dialog-actions button .apply-btn{font-weight:400}.mat-mdc-dialog-actions button .mat-icon{font-size:24px;height:24px}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.MatDialogRef }, { type: AddLinkDialogOptions, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i2$3.FormBuilder }] });
+                }] }, { type: i2$2.FormBuilder }], propDecorators: { modal: [{
+                type: HostBinding,
+                args: ['class.noder-modal']
+            }] } });
 
 class DocumentNameModel {
     constructor(fields) {
@@ -14037,5 +14094,5 @@ class OperationModel {
  * Generated bundle index. Do not edit.
  */
 
-export { AddLinkDialogComponent, AddLinkDialogOptions, Alignment, BaseNoderComponent, BreakTypes, CommandModel, CommandType, CommandsService, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FILE_NAME, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DefaultPageSize, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorHeaderComponent, EditorModule, EditorSearchDialogComponent, EditorService, EditorToolbarComponent, EditorToolbarModule, ElementDataModel, ElementModel, ExternalElementModel, ExternalElementService, FileSourceModel, FormatStyleHelper, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, Mode, NEW_LINE_MARKUP, NoderExternalComponent, NumberingLevelModel, OpenDocx, OperationModel, OperationsHistoryInfoModel, PageType, PaginatorSizes, ParagraphStyleModel, RevisionHelper, RevisionModel, SetDocx, TextStyleModel };
+export { AddLinkDialogComponent, AddLinkDialogOptions, Alignment, BaseNoderComponent, BreakTypes, CommandModel, CommandType, CommandsService, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FILE_NAME, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DefaultPageSize, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorModule, EditorSearchDialogComponent, EditorService, EditorTitleComponent, EditorToolbarComponent, EditorToolbarModule, ElementDataModel, ElementModel, ExternalElementModel, ExternalElementService, FileSourceModel, FormatStyleHelper, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, Mode, NEW_LINE_MARKUP, NoderExternalComponent, NumberingLevelModel, OpenDocx, OperationModel, OperationsHistoryInfoModel, PageType, PaginatorSizes, ParagraphStyleModel, RevisionHelper, RevisionModel, SetDocx, TextStyleModel };
 //# sourceMappingURL=talrace-ngx-noder.mjs.map