@talrace/ngx-noder 0.0.10 → 0.0.11

package/fesm2022/talrace-ngx-noder.mjs

@@ -26,6 +26,8 @@ import * as i6$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i4$3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4$4 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
 import * as i2$1 from '@angular/platform-browser';
 import * as i2$2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -35,8 +37,6 @@ import * as i5$1 from 'ngx-colors';
 import { NgxColorsModule } from 'ngx-colors';
 import * as i3$3 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i4$4 from '@angular/material/expansion';
-import { MatExpansionModule } from '@angular/material/expansion';
 
 const DocumentInfo = {
     width: 794,
@@ -441,11 +441,11 @@ class BaseNoderComponent extends DestroyComponent {
     }
     focus() {
         this._isFocused = true;
-        this.cdr.markForCheck();
+        this.cdr.detectChanges();
     }
     blur() {
         this._isFocused = false;
-        this.cdr.markForCheck();
+        this.cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseNoderComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
@@ -526,6 +526,7 @@ class EditorService {
         this._updateEdges$ = new Subject();
         this._insertText$ = new Subject();
         this._blurCustomComponent$ = new Subject();
+        this._removeCustomElementsData$ = new Subject();
     }
     set styles(value) {
         this._styles$.next({ ...value });
@@ -686,6 +687,9 @@ class EditorService {
     get blurCustomComponent$() {
         return this._blurCustomComponent$.asObservable();
     }
+    get removeCustomElementsData$() {
+        return this._removeCustomElementsData$.asObservable();
+    }
     setIsViewOnly(value) {
         this._isViewOnly = value;
         this._isViewOnly$.next(value);
@@ -813,6 +817,9 @@ class EditorService {
     blurCustomComponent() {
         this._blurCustomComponent$.next();
     }
+    removeCustomElementsData(elements) {
+        this._removeCustomElementsData$.next(elements);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditorService }); }
 }
@@ -2714,9 +2721,10 @@ class TextLayer {
         this.renderPagesEdgeComponents(config.pages);
     }
     edgeEditingPageUpdated(page) {
+        const oldEditingPage = this.edgeEditingPage;
         this.edgeEditingPage = page;
-        this.removeEdgeComponents([page]);
-        this.renderPagesEdgeComponents([page]);
+        this.removeEdgeComponents([page ?? oldEditingPage]);
+        this.renderPagesEdgeComponents([page ?? oldEditingPage]);
     }
     updateEdgeByLocation(updatedPageType) {
         DomHelper.translate(this.element, 0, -this.config.scrollTop);
@@ -4176,6 +4184,7 @@ class Editor {
         const partIndexes = ContentHelper.getSelectedPartDocumentIndexes(this.session.displayData.paragraphs, this.selection.range);
         model.delete = new DeleteModel({ startIndex: partIndexes.startIndex, endIndex: partIndexes.endIndex });
         this.saveReplaceToHistory(this.selection.range, model);
+        this.removeCustomElementsData();
         const endPosition = this.session.replace(model);
         this.onDocumentChange(new Range(this.selection.cursor, endPosition));
         this.onSelectionChange();
@@ -4595,7 +4604,7 @@ class Editor {
         const paragraphs = IndexedElementHelper.sliceSection(this.session.model.paragraphs, startIndex, endIndex).map(x => new ParagraphModel(x));
         const images = IndexedElementHelper.sliceSection(this.session.model.images, startIndex, endIndex).map(x => new ImageModel(x));
         const tables = IndexedElementHelper.sliceSection(this.session.model.tables, startIndex, endIndex).map(x => new TableModel(x));
-        const elements = IndexedElementHelper.sliceSection(this.session.model.elements, startIndex, endIndex).map(x => new ElementModel(x));
+        const elements = IndexedElementHelper.sliceSection(this.session.model.elements, startIndex, endIndex).map(x => new ElementModel({ ...x, guid: '' }));
         const breaks = IndexedElementHelper.sliceSection(this.session.model.breaks, startIndex, endIndex).map(x => new BreakModel(x));
         const tabs = IndexedElementHelper.sliceSection(this.session.model.tabs, startIndex, endIndex).map(x => new TabModel(x));
         const links = LinkHelper.sliceSection(this.session.model.links, startIndex, endIndex).map(x => new LinkModel(x));
@@ -4618,9 +4627,18 @@ class Editor {
             return;
         }
         this.saveRemoveToHistory(this.selection.range);
+        this.removeCustomElementsData();
         this.session.remove(this.selection.range);
         this.onSelectionChange();
     }
+    removeCustomElementsData() {
+        const startIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start.row, this.selection.range.start.column);
+        const endIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.end.row, this.selection.range.end.column) - 1;
+        const elements = IndexedElementHelper.sliceSection(this.session.model.elements, startIndex, endIndex).slice();
+        if (elements.length) {
+            this.editorService.removeCustomElementsData(elements);
+        }
+    }
     onInput() {
         const text = this.textInput.getInsertText();
         if (!text) {
@@ -4792,6 +4810,7 @@ class Editor {
     }
     setCurrentSession(clickPositionY, element) {
         const customElement = this.getCustomElement(element);
+        this.blurEdgeCustomComponents(customElement);
         if (!customElement) {
             this.regulatorService.setMainSessionAsCurrent();
         }
@@ -4928,6 +4947,25 @@ class Editor {
             this.focusedComponent = null;
         }
     }
+    blurEdgeCustomComponents(customElement) {
+        if (!this.regulatorService.edgeEditingPage || !this.focusedComponent) {
+            return;
+        }
+        if (!customElement ||
+            customElement.tagName === this.tableCellTagName ||
+            customElement.tagName === this.edgeElementTagName ||
+            +customElement.attributes.getNamedItem('data-session-id').value !== this.focusedComponent.instance.sessionId) {
+            this.blurCustomComponent();
+            return;
+        }
+        const index = +customElement.attributes.getNamedItem('data-insert-index').value;
+        const component = this.session.customComponents.images.find(x => x.instance.insertIndex === index) ??
+            this.session.customComponents.tables.find(x => x.instance.insertIndex === index) ??
+            this.session.customComponents.customElements.find(x => x.instance.insertIndex === index);
+        if (this.focusedComponent !== component) {
+            this.blurCustomComponent();
+        }
+    }
     isEmptyNumberingParagraph(paragraphIndex) {
         const currentLine = this.session.displayData.getParagraphContent(paragraphIndex);
         return currentLine.length === 0 && this.session.model.paragraphs[paragraphIndex].paragraphStyle.numberingId !== null;
@@ -5072,7 +5110,7 @@ class Editor {
     }
     insertLinkSubscription() {
         return this.editorService.insertLink$.subscribe(linkData => {
-            this.insertLink(linkData);
+            this.insertLink(new LinkDataModel({ link: linkData.link, text: linkData.text }));
             this.focus();
         });
     }
@@ -11366,7 +11404,8 @@ class RegulatorService {
             header: model.marginHeader > 0 ? model.marginHeader : 0,
             footer: model.marginFooter > 0 ? model.marginFooter : 0
         });
-        const edges = new Edges(this.componentService, model.headers, model.footers, pageMargin, pageWidth, sessionId, properties);
+        const edgesMargins = new MarginModel({ ...pageMargin, top: pageMargin.header, bottom: pageMargin.footer });
+        const edges = new Edges(this.componentService, model.headers, model.footers, edgesMargins, pageWidth, sessionId, properties);
         properties.numberingInfo = {};
         const customComponents = { images: [], tables: [], tabs: [], customElements: [], edges: edges };
         const displayData = new DisplayData(model, properties, sessionId, pageMargin, DocumentInfo.pagesSpace, pageWidth, model.pageHeight, customComponents, this.customContentService, this.editorService);
@@ -11419,7 +11458,7 @@ class RegulatorService {
         this.setCurrentSession(this.mainSession);
     }
     setCustomSessionAsCurrent(sessionId, edgeEditingPage = null) {
-        if (sessionId === this.currentSession.sessionId) {
+        if (sessionId === this.currentSession.sessionId && this.currentSession.source.edgeEditPage !== edgeEditingPage) {
             this.currentSession.source.edgeEditPage = edgeEditingPage;
             this.mainSession.renderer.renderer.textLayer.edgeEditingPageUpdated(edgeEditingPage);
             return;
@@ -11511,10 +11550,10 @@ class RegulatorService {
         return result;
     }
     toggleEdgeEditMode(edgeEditingPage = null) {
-        this.edgeEditingPage = edgeEditingPage;
-        if (!this.mainSession.session.customComponents.edges) {
+        if (!this.mainSession.session.customComponents.edges || this.edgeEditingPage === edgeEditingPage) {
             return;
         }
+        this.edgeEditingPage = edgeEditingPage;
         this.mainSession.session.customComponents.edges.toggleEditMode(!!this.edgeEditingPage);
         this.mainSession.renderer.renderer.textLayer.edgeEditingPageUpdated(edgeEditingPage);
     }
@@ -11711,6 +11750,7 @@ class EditorTitleComponent {
     constructor(cdr) {
         this.cdr = cdr;
         this.selectedMode = Mode.Edit;
+        this.showTitle = true;
         this.defaultFileName = 'Untitled document';
         this.changeMode = new EventEmitter();
         this.renameDocumentTitle = new EventEmitter();
@@ -11760,13 +11800,15 @@ class EditorTitleComponent {
         element.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditorTitleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EditorTitleComponent, isStandalone: true, selector: "app-nod-editor-title", inputs: { selectedMode: "selectedMode", title: "title", defaultFileName: "defaultFileName", rename$: "rename$" }, outputs: { changeMode: "changeMode", renameDocumentTitle: "renameDocumentTitle" }, 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=\"noder-icon\"\n            fontIcon=\"{{ mode.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EditorTitleComponent, isStandalone: true, selector: "app-nod-editor-title", inputs: { selectedMode: "selectedMode", showTitle: "showTitle", title: "title", defaultFileName: "defaultFileName", rename$: "rename$" }, outputs: { changeMode: "changeMode", renameDocumentTitle: "renameDocumentTitle" }, viewQueries: [{ propertyName: "titleSpan", first: true, predicate: ["titleSpan"], descendants: true, static: true }], ngImport: i0, template: "<div\n    *ngIf=\"showTitle\"\n    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=\"noder-icon\"\n            fontIcon=\"{{ mode.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.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.3.12", ngImport: i0, type: EditorTitleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule], selector: 'app-nod-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=\"noder-icon\"\n            fontIcon=\"{{ mode.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"] }]
+            args: [{ standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule], selector: 'app-nod-editor-title', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    *ngIf=\"showTitle\"\n    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=\"noder-icon\"\n            fontIcon=\"{{ mode.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: { selectedMode: [{
                 type: Input
+            }], showTitle: [{
+                type: Input
             }], title: [{
                 type: Input
             }], defaultFileName: [{
@@ -11784,11 +11826,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 class EditorTitleMobileComponent extends EditorTitleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditorTitleMobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EditorTitleMobileComponent, isStandalone: true, selector: "app-nod-editor-title-mobile", usesInheritance: 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            (click)=\"onFocus($event)\">\n            {{ title }}\n        </span>\n    </div>\n</div>\n<div class=\"editor-mode\">\n    <div class=\"circles\">\n        <div class=\"circle\"></div>\n        <div class=\"circle\"></div>\n        <div class=\"circle\"></div>\n    </div>\n    <button\n        mat-icon-button\n        [matMenuTriggerFor]=\"modeMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ modeOptions[selectedMode].icon }}\" />\n    </button>\n    <mat-menu\n        #modeMenu=\"matMenu\"\n        class=\"noder-editor-title-mobile-menu\"\n        yPosition=\"above\">\n        <ng-container *ngFor=\"let mode of modeOptions\">\n            <button\n                *ngIf=\"selectedMode !== mode.id\"\n                mat-icon-button\n                (click)=\"selectedMode = mode.id; changeMode.emit(mode.id)\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"{{ mode.icon }}\" />\n            </button>\n        </ng-container>\n    </mat-menu>\n</div>\n", styles: [":host{display:flex;position:relative;align-items:center;width:100%}.menu-header{width:calc(100% - 48px);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;flex-direction:column;position:relative}.circles{display:flex;flex-direction:row;justify-content:center;width:100%;position:absolute;top:-8px}.circle{width:4px;height:4px;border-radius:50%}.circle:not(:last-child){margin-right:5px}.mdc-icon-button{min-width:40px;min-height:40px;width:40px;height:40px;padding:8px}::ng-deep .noder-editor-title-mobile-menu{min-width:auto!important;min-height:auto!important;overflow:hidden!important}::ng-deep .noder-editor-title-mobile-menu .mat-mdc-menu-content{display:flex;flex-direction:column-reverse}::ng-deep .noder-editor-title-mobile-menu .mdc-icon-button{margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "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.3.12", type: EditorTitleMobileComponent, isStandalone: true, selector: "app-nod-editor-title-mobile", usesInheritance: true, ngImport: i0, template: "<div\n    *ngIf=\"showTitle\"\n    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            (click)=\"onFocus($event)\">\n            {{ title }}\n        </span>\n    </div>\n</div>\n<div class=\"editor-mode\">\n    <div class=\"circles\">\n        <div class=\"circle\"></div>\n        <div class=\"circle\"></div>\n        <div class=\"circle\"></div>\n    </div>\n    <button\n        mat-icon-button\n        [matMenuTriggerFor]=\"modeMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ modeOptions[selectedMode].icon }}\" />\n    </button>\n    <mat-menu\n        #modeMenu=\"matMenu\"\n        class=\"noder-editor-title-mobile-menu\"\n        yPosition=\"above\">\n        <ng-container *ngFor=\"let mode of modeOptions\">\n            <button\n                *ngIf=\"selectedMode !== mode.id\"\n                mat-icon-button\n                (click)=\"selectedMode = mode.id; changeMode.emit(mode.id)\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"{{ mode.icon }}\" />\n            </button>\n        </ng-container>\n    </mat-menu>\n</div>\n", styles: [":host{display:flex;position:relative;align-items:center;width:100%}.menu-header{width:calc(100% - 48px);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;flex-direction:column;position:relative}.circles{display:flex;flex-direction:row;justify-content:center;width:100%;position:absolute;top:-8px}.circle{width:4px;height:4px;border-radius:50%}.circle:not(:last-child){margin-right:5px}.mdc-icon-button{min-width:40px;min-height:40px;width:40px;height:40px;padding:8px}::ng-deep .noder-editor-title-mobile-menu{min-width:auto!important;min-height:auto!important;overflow:hidden!important}::ng-deep .noder-editor-title-mobile-menu .mat-mdc-menu-content{display:flex;flex-direction:column-reverse}::ng-deep .noder-editor-title-mobile-menu .mdc-icon-button{margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "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.3.12", ngImport: i0, type: EditorTitleMobileComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule, MatMenuModule], selector: 'app-nod-editor-title-mobile', 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            (click)=\"onFocus($event)\">\n            {{ title }}\n        </span>\n    </div>\n</div>\n<div class=\"editor-mode\">\n    <div class=\"circles\">\n        <div class=\"circle\"></div>\n        <div class=\"circle\"></div>\n        <div class=\"circle\"></div>\n    </div>\n    <button\n        mat-icon-button\n        [matMenuTriggerFor]=\"modeMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ modeOptions[selectedMode].icon }}\" />\n    </button>\n    <mat-menu\n        #modeMenu=\"matMenu\"\n        class=\"noder-editor-title-mobile-menu\"\n        yPosition=\"above\">\n        <ng-container *ngFor=\"let mode of modeOptions\">\n            <button\n                *ngIf=\"selectedMode !== mode.id\"\n                mat-icon-button\n                (click)=\"selectedMode = mode.id; changeMode.emit(mode.id)\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"{{ mode.icon }}\" />\n            </button>\n        </ng-container>\n    </mat-menu>\n</div>\n", styles: [":host{display:flex;position:relative;align-items:center;width:100%}.menu-header{width:calc(100% - 48px);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;flex-direction:column;position:relative}.circles{display:flex;flex-direction:row;justify-content:center;width:100%;position:absolute;top:-8px}.circle{width:4px;height:4px;border-radius:50%}.circle:not(:last-child){margin-right:5px}.mdc-icon-button{min-width:40px;min-height:40px;width:40px;height:40px;padding:8px}::ng-deep .noder-editor-title-mobile-menu{min-width:auto!important;min-height:auto!important;overflow:hidden!important}::ng-deep .noder-editor-title-mobile-menu .mat-mdc-menu-content{display:flex;flex-direction:column-reverse}::ng-deep .noder-editor-title-mobile-menu .mdc-icon-button{margin-bottom:10px}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule, MatMenuModule], selector: 'app-nod-editor-title-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    *ngIf=\"showTitle\"\n    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            (click)=\"onFocus($event)\">\n            {{ title }}\n        </span>\n    </div>\n</div>\n<div class=\"editor-mode\">\n    <div class=\"circles\">\n        <div class=\"circle\"></div>\n        <div class=\"circle\"></div>\n        <div class=\"circle\"></div>\n    </div>\n    <button\n        mat-icon-button\n        [matMenuTriggerFor]=\"modeMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ modeOptions[selectedMode].icon }}\" />\n    </button>\n    <mat-menu\n        #modeMenu=\"matMenu\"\n        class=\"noder-editor-title-mobile-menu\"\n        yPosition=\"above\">\n        <ng-container *ngFor=\"let mode of modeOptions\">\n            <button\n                *ngIf=\"selectedMode !== mode.id\"\n                mat-icon-button\n                (click)=\"selectedMode = mode.id; changeMode.emit(mode.id)\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"{{ mode.icon }}\" />\n            </button>\n        </ng-container>\n    </mat-menu>\n</div>\n", styles: [":host{display:flex;position:relative;align-items:center;width:100%}.menu-header{width:calc(100% - 48px);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;flex-direction:column;position:relative}.circles{display:flex;flex-direction:row;justify-content:center;width:100%;position:absolute;top:-8px}.circle{width:4px;height:4px;border-radius:50%}.circle:not(:last-child){margin-right:5px}.mdc-icon-button{min-width:40px;min-height:40px;width:40px;height:40px;padding:8px}::ng-deep .noder-editor-title-mobile-menu{min-width:auto!important;min-height:auto!important;overflow:hidden!important}::ng-deep .noder-editor-title-mobile-menu .mat-mdc-menu-content{display:flex;flex-direction:column-reverse}::ng-deep .noder-editor-title-mobile-menu .mdc-icon-button{margin-bottom:10px}\n"] }]
         }] });
 
 class EditorSearchDialogComponent extends DestroyComponent {
@@ -11847,12 +11889,82 @@ var EditorToolbarMode;
     EditorToolbarMode[EditorToolbarMode["ExternalComponent"] = 6] = "ExternalComponent";
 })(EditorToolbarMode || (EditorToolbarMode = {}));
 
-const ACTIONS_MENU_MODS = [
-    EditorToolbarMode.Base,
-    EditorToolbarMode.AlignFormat,
-    EditorToolbarMode.StyleFormat,
-    EditorToolbarMode.TextFormat
-];
+class ToolbarCoreService {
+    set mode(value) {
+        this._mode$.next(value);
+    }
+    get mode$() {
+        return this._mode$.asObservable();
+    }
+    set actions(value) {
+        this._actions = value;
+    }
+    get actions() {
+        return this._actions;
+    }
+    set backTitle(value) {
+        this._backTitle = value;
+    }
+    get backTitle() {
+        const currentMode = this.getMode();
+        return currentMode === EditorToolbarMode.Insert || currentMode === EditorToolbarMode.ExternalComponent ? this._backTitle : '';
+    }
+    constructor(editorService) {
+        this.editorService = editorService;
+        this._mode$ = new BehaviorSubject(EditorToolbarMode.Base);
+    }
+    getMode() {
+        return this._mode$.value;
+    }
+    back() {
+        const currentMode = this.getMode();
+        if (currentMode === EditorToolbarMode.Menu || currentMode === EditorToolbarMode.ExternalComponent) {
+            this.reset();
+        }
+        else if (currentMode === EditorToolbarMode.Insert) {
+            this.openBurgerMenu();
+        }
+        else {
+            this._mode$.next(EditorToolbarMode.Base);
+        }
+    }
+    reset() {
+        this.editorService.closeSidenav();
+        this._mode$.next(EditorToolbarMode.Base);
+    }
+    openBurgerMenu() {
+        this.mode = EditorToolbarMode.Menu;
+        this.editorService.openSidenav(MenuDropdownsMobileComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarCoreService, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarCoreService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarCoreService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: EditorService }] });
+
+class MenuDropdownsMobileComponent {
+    constructor(injector, editorService, toolbarCoreService) {
+        this.injector = injector;
+        this.editorService = editorService;
+        this.toolbarCoreService = toolbarCoreService;
+        this.elements = this.injector.get(EXTERNAL_ELEMENT_SERVICE).elements;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuDropdownsMobileComponent, deps: [{ token: i0.Injector }, { token: EditorService }, { token: ToolbarCoreService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuDropdownsMobileComponent, selector: "app-nod-menu-dropdowns-mobile", ngImport: i0, template: "<ng-container\n    *ngIf=\"{\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <mat-accordion>\n        <mat-expansion-panel hideToggle>\n            <mat-expansion-panel-header>\n                <mat-panel-title>File</mat-panel-title>\n                <mat-panel-description>\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-arrow-dropdown\" />\n                </mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-panel-content\">\n                <button\n                    *ngIf=\"!data.isViewOnly\"\n                    id=\"menu-dropdowns-mobile-item-new\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.new(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-add-new\" />\n                        <span class=\"menu-item-text\">New</span>\n                    </div>\n                </button>\n                <button\n                    *ngIf=\"!data.isViewOnly\"\n                    id=\"menu-dropdowns-mobile-item-open-from\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.openFrom(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-open-from\" />\n                        <span class=\"menu-item-text\">Open From</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-save-as\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.saveAs(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-save\" />\n                        <span class=\"menu-item-text\">Save As</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-rename\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.rename(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-rename\" />\n                        <span class=\"menu-item-text\">Rename</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-print\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.print(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-print\" />\n                        <span class=\"menu-item-text\">Print</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-delete\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.delete(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-delete\" />\n                        <span class=\"menu-item-text\">Delete</span>\n                    </div>\n                </button>\n            </div>\n        </mat-expansion-panel>\n        <ng-container *ngIf=\"!data.isViewOnly\">\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>Insert</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <button\n                        id=\"menu-dropdowns-mobile-item-image\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertImage(); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-image\" />\n                            <span class=\"menu-item-text\">Image</span>\n                        </div>\n                    </button>\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-table\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.insertTable()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-table\" />\n                            Table\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-link\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.insertLink()\">\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-link-on\" />\n                                <span class=\"menu-item-text\">Link</span>\n                            </div>\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                    <button\n                        *ngFor=\"let element of elements\"\n                        id=\"menu-dropdowns-mobile-item-{{ element.title }}\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertCustomElement(element); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"{{ element.icon }}\" />\n                            <span class=\"menu-item-text\">{{ element.name }}</span>\n                        </div>\n                    </button>\n                    <div class=\"composition-button hidden\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-headers-footers\"\n                            mat-menu-item>\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-headers-footers\" />\n                                <span class=\"menu-item-text\">Headers & Footers</span>\n                            </div>\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                </div>\n            </mat-expansion-panel>\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>Layout</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <button\n                        id=\"menu-dropdowns-mobile-item-page-break\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertPageBreak(); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-page-break\" />\n                            <span class=\"menu-item-text\">Page Break</span>\n                        </div>\n                    </button>\n                </div>\n            </mat-expansion-panel>\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>Format</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-text-format\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.textFormat()\">\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-text\" />\n                                <span class=\"menu-item-text\">Text Format</span>\n                            </div>\n                            <mat-icon\n                                class=\"composition-icon\"\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-arrow-dropdown\" />\n                        </button>\n                    </div>\n                    <div class=\"composition-button hidden\">\n                        <button\n                            id=\"menu-dropdowns-mobile-header-footer\"\n                            mat-menu-item>\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-headers-footers\" />\n                                <span class=\"menu-item-text\">Headers & Footers</span>\n                            </div>\n                            <mat-icon\n                                class=\"composition-icon\"\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-arrow-dropdown\" />\n                        </button>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </ng-container>\n    </mat-accordion>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;padding:25px}mat-expansion-panel.mat-expansion-panel ::ng-deep{box-shadow:none;border-bottom-width:1px;border-bottom-style:solid}mat-expansion-panel.mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0 18px}mat-panel-description{margin:0;justify-content:flex-end}.mat-expansion-panel-spacing{margin:0}.mat-expansion-panel-header,.mat-expansion-panel-header.mat-expanded{height:48px;padding-right:10px}.mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-description .mat-icon{transform:rotate(180deg)}.heading-menu{display:inline-flex;width:100%}.menu-item-text{white-space:nowrap;align-self:center}.composition-button{display:flex;flex-direction:row;align-items:center;position:relative}.composition-icon{position:absolute;right:0;transform:rotate(270deg)}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i4$4.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuDropdownsMobileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nod-menu-dropdowns-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n    *ngIf=\"{\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <mat-accordion>\n        <mat-expansion-panel hideToggle>\n            <mat-expansion-panel-header>\n                <mat-panel-title>File</mat-panel-title>\n                <mat-panel-description>\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-arrow-dropdown\" />\n                </mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-panel-content\">\n                <button\n                    *ngIf=\"!data.isViewOnly\"\n                    id=\"menu-dropdowns-mobile-item-new\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.new(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-add-new\" />\n                        <span class=\"menu-item-text\">New</span>\n                    </div>\n                </button>\n                <button\n                    *ngIf=\"!data.isViewOnly\"\n                    id=\"menu-dropdowns-mobile-item-open-from\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.openFrom(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-open-from\" />\n                        <span class=\"menu-item-text\">Open From</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-save-as\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.saveAs(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-save\" />\n                        <span class=\"menu-item-text\">Save As</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-rename\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.rename(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-rename\" />\n                        <span class=\"menu-item-text\">Rename</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-print\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.print(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-print\" />\n                        <span class=\"menu-item-text\">Print</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-delete\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.delete(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-delete\" />\n                        <span class=\"menu-item-text\">Delete</span>\n                    </div>\n                </button>\n            </div>\n        </mat-expansion-panel>\n        <ng-container *ngIf=\"!data.isViewOnly\">\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>Insert</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <button\n                        id=\"menu-dropdowns-mobile-item-image\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertImage(); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-image\" />\n                            <span class=\"menu-item-text\">Image</span>\n                        </div>\n                    </button>\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-table\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.insertTable()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-table\" />\n                            Table\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-link\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.insertLink()\">\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-link-on\" />\n                                <span class=\"menu-item-text\">Link</span>\n                            </div>\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                    <button\n                        *ngFor=\"let element of elements\"\n                        id=\"menu-dropdowns-mobile-item-{{ element.title }}\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertCustomElement(element); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"{{ element.icon }}\" />\n                            <span class=\"menu-item-text\">{{ element.name }}</span>\n                        </div>\n                    </button>\n                    <div class=\"composition-button hidden\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-headers-footers\"\n                            mat-menu-item>\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-headers-footers\" />\n                                <span class=\"menu-item-text\">Headers & Footers</span>\n                            </div>\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                </div>\n            </mat-expansion-panel>\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>Layout</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <button\n                        id=\"menu-dropdowns-mobile-item-page-break\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertPageBreak(); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-page-break\" />\n                            <span class=\"menu-item-text\">Page Break</span>\n                        </div>\n                    </button>\n                </div>\n            </mat-expansion-panel>\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>Format</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-text-format\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.textFormat()\">\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-text\" />\n                                <span class=\"menu-item-text\">Text Format</span>\n                            </div>\n                            <mat-icon\n                                class=\"composition-icon\"\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-arrow-dropdown\" />\n                        </button>\n                    </div>\n                    <div class=\"composition-button hidden\">\n                        <button\n                            id=\"menu-dropdowns-mobile-header-footer\"\n                            mat-menu-item>\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-headers-footers\" />\n                                <span class=\"menu-item-text\">Headers & Footers</span>\n                            </div>\n                            <mat-icon\n                                class=\"composition-icon\"\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-arrow-dropdown\" />\n                        </button>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </ng-container>\n    </mat-accordion>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;padding:25px}mat-expansion-panel.mat-expansion-panel ::ng-deep{box-shadow:none;border-bottom-width:1px;border-bottom-style:solid}mat-expansion-panel.mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0 18px}mat-panel-description{margin:0;justify-content:flex-end}.mat-expansion-panel-spacing{margin:0}.mat-expansion-panel-header,.mat-expansion-panel-header.mat-expanded{height:48px;padding-right:10px}.mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-description .mat-icon{transform:rotate(180deg)}.heading-menu{display:inline-flex;width:100%}.menu-item-text{white-space:nowrap;align-self:center}.composition-button{display:flex;flex-direction:row;align-items:center;position:relative}.composition-icon{position:absolute;right:0;transform:rotate(270deg)}.hidden{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: EditorService }, { type: ToolbarCoreService }] });
+
+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 NumberingType;
 (function (NumberingType) {
@@ -12213,14 +12325,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-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) {
@@ -13375,6 +13479,150 @@ const NumberingTemplates = [
     }
 ];
 
+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.3.12", ngImport: i0, type: InsertTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InsertTableComponent, isStandalone: true, selector: "app-nod-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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InsertTableComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-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 MenuDropdownsComponent extends BaseToolbarComponent {
+    constructor(customIconService, injector, cdr, editorService) {
+        super(customIconService, injector, cdr, editorService);
+        this.cdr = cdr;
+        this.editorService = editorService;
+        this.showFile = true;
+        this.showEdit = true;
+        this.showInsert = true;
+        this.showLayout = true;
+        this.showFormat = true;
+        this.openFileFromDisk = new EventEmitter();
+        this.addCustomElement = new EventEmitter();
+        this.saveAs = new EventEmitter();
+        this.insertPageBreak = new EventEmitter();
+        this.createDocument = new EventEmitter();
+        this.rename = new EventEmitter();
+        this.delete = new EventEmitter();
+        this.openEditMenu = new EventEmitter();
+        this.cutSelected = new EventEmitter();
+        this.copySelected = new EventEmitter();
+        this.pasteClipboardData = new EventEmitter();
+        this.selectAll = new EventEmitter();
+        this.removeSelected = new EventEmitter();
+        this.showInsertTableMenu = false;
+        this.numberingTemplateTypes = NumberingTemplateType;
+        this.alignments = Alignment;
+    }
+    onSelectFormat(alignment) {
+        this.changeParagraphStyle.emit(new ParagraphStyleModel({ alignment }));
+    }
+    onSelectNumberingTemplate(numberingTemplateType) {
+        if (this.numberingTemplateType === numberingTemplateType) {
+            this.removeNumberings.emit();
+        }
+        else {
+            const templateLevels = NumberingTemplates.find(x => x.templateType === numberingTemplateType).levels;
+            this.setNumberingTemplateType.emit(templateLevels);
+        }
+    }
+    onTableInsertMenuClosed() {
+        this.tableInsertMenu._animationDone
+            .pipe(filter(x => x.toState === 'void'), take(1))
+            .subscribe(() => {
+            this.showInsertTableMenu = false;
+            this.cdr.markForCheck();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuDropdownsComponent, deps: [{ token: CustomIconService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", inputs: { showFile: "showFile", showEdit: "showEdit", showInsert: "showInsert", showLayout: "showLayout", showFormat: "showFormat" }, outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", insertPageBreak: "insertPageBreak", createDocument: "createDocument", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected" }, viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngIf=\"{\n        clipboardData: editorService.clipboardData$ | async,\n        hasSelection: editorService.hasSelection$ | async,\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <button\n        *ngIf=\"showFile\"\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=\"createDocument.observed && !data.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=\"noder-icon\"\n                    fontIcon=\"icon-add-new\"></mat-icon>\n                <span class=\"menu-item-text\">New</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"openFileFromDisk.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-open-from\"\n            mat-menu-item\n            (click)=\"openFileFromDisk.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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            *ngIf=\"saveAs.observed\"\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=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">Save As</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"rename.observed\"\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=\"noder-icon\"\n                    fontIcon=\"icon-rename\"></mat-icon>\n                <span class=\"menu-item-text\">Rename</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"print.observed\"\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=\"noder-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            *ngIf=\"delete.observed\"\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=\"noder-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=\"showEdit\"\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            *ngIf=\"undo.observed\"\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=\"noder-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            *ngIf=\"redo.observed\"\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=\"noder-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            *ngIf=\"cutSelected.observed\"\n            id=\"menu-dropdowns-menu-item-cut\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"cutSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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            *ngIf=\"copySelected.observed\"\n            id=\"menu-dropdowns-menu-item-copy\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"copySelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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            *ngIf=\"pasteClipboardData.observed\"\n            id=\"menu-dropdowns-menu-item-paste\"\n            mat-menu-item\n            [disabled]=\"!data.clipboardData?.length\"\n            (click)=\"pasteClipboardData.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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            *ngIf=\"selectAll.observed\"\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=\"noder-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            *ngIf=\"removeSelected.observed\"\n            id=\"menu-dropdowns-menu-item-delete-text\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"removeSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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=\"showInsert && !data.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        <button\n            *ngIf=\"insertImage.observed\"\n            id=\"menu-dropdowns-menu-item-image\"\n            mat-menu-item\n            (click)=\"insertImage.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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=\"noder-icon\"\n                fontIcon=\"icon-table\"></mat-icon>\n            Table\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"insertLink.observed\"\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=\"noder-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)=\"onCreateElement(element)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"showLayout && !data.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            *ngIf=\"insertPageBreak.observed\"\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=\"noder-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=\"showFormat && !data.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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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-nod-insert-table\n            *ngIf=\"showInsertTableMenu\"\n            (selectSizes)=\"insertTable.emit($event)\" />\n    </mat-menu>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;height:100%}.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.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"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuDropdownsComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-menu-dropdowns', template: "<ng-container\n    *ngIf=\"{\n        clipboardData: editorService.clipboardData$ | async,\n        hasSelection: editorService.hasSelection$ | async,\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <button\n        *ngIf=\"showFile\"\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=\"createDocument.observed && !data.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=\"noder-icon\"\n                    fontIcon=\"icon-add-new\"></mat-icon>\n                <span class=\"menu-item-text\">New</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"openFileFromDisk.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-open-from\"\n            mat-menu-item\n            (click)=\"openFileFromDisk.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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            *ngIf=\"saveAs.observed\"\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=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">Save As</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"rename.observed\"\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=\"noder-icon\"\n                    fontIcon=\"icon-rename\"></mat-icon>\n                <span class=\"menu-item-text\">Rename</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"print.observed\"\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=\"noder-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            *ngIf=\"delete.observed\"\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=\"noder-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=\"showEdit\"\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            *ngIf=\"undo.observed\"\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=\"noder-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            *ngIf=\"redo.observed\"\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=\"noder-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            *ngIf=\"cutSelected.observed\"\n            id=\"menu-dropdowns-menu-item-cut\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"cutSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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            *ngIf=\"copySelected.observed\"\n            id=\"menu-dropdowns-menu-item-copy\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"copySelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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            *ngIf=\"pasteClipboardData.observed\"\n            id=\"menu-dropdowns-menu-item-paste\"\n            mat-menu-item\n            [disabled]=\"!data.clipboardData?.length\"\n            (click)=\"pasteClipboardData.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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            *ngIf=\"selectAll.observed\"\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=\"noder-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            *ngIf=\"removeSelected.observed\"\n            id=\"menu-dropdowns-menu-item-delete-text\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"removeSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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=\"showInsert && !data.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        <button\n            *ngIf=\"insertImage.observed\"\n            id=\"menu-dropdowns-menu-item-image\"\n            mat-menu-item\n            (click)=\"insertImage.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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=\"noder-icon\"\n                fontIcon=\"icon-table\"></mat-icon>\n            Table\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"insertLink.observed\"\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=\"noder-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)=\"onCreateElement(element)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"showLayout && !data.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            *ngIf=\"insertPageBreak.observed\"\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=\"noder-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=\"showFormat && !data.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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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-nod-insert-table\n            *ngIf=\"showInsertTableMenu\"\n            (selectSizes)=\"insertTable.emit($event)\" />\n    </mat-menu>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;height:100%}.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: CustomIconService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: EditorService }], propDecorators: { showFile: [{
+                type: Input
+            }], showEdit: [{
+                type: Input
+            }], showInsert: [{
+                type: Input
+            }], showLayout: [{
+                type: Input
+            }], showFormat: [{
+                type: Input
+            }], openFileFromDisk: [{
+                type: Output
+            }], addCustomElement: [{
+                type: Output
+            }], saveAs: [{
+                type: Output
+            }], insertPageBreak: [{
+                type: Output
+            }], createDocument: [{
+                type: Output
+            }], rename: [{
+                type: Output
+            }], delete: [{
+                type: Output
+            }], openEditMenu: [{
+                type: Output
+            }], cutSelected: [{
+                type: Output
+            }], copySelected: [{
+                type: Output
+            }], pasteClipboardData: [{
+                type: Output
+            }], selectAll: [{
+                type: Output
+            }], removeSelected: [{
+                type: Output
+            }], tableInsertMenu: [{
+                type: ViewChild,
+                args: ['tableInsert']
+            }] } });
+
 class FontComponent {
     constructor() {
         this.isDisabled = false;
@@ -13488,56 +13736,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['auto']
             }] } });
 
-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.3.12", ngImport: i0, type: InsertTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InsertTableComponent, isStandalone: true, selector: "app-nod-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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InsertTableComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-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 ColorPickerComponent {
     constructor() {
         this.colorChange = new EventEmitter();
@@ -13786,74 +13984,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['tableInsert']
             }] } });
 
-class MenuDropdownsMobileComponent {
-    constructor(injector, editorService, toolbarCoreService) {
-        this.injector = injector;
-        this.editorService = editorService;
-        this.toolbarCoreService = toolbarCoreService;
-        this.elements = this.injector.get(EXTERNAL_ELEMENT_SERVICE).elements;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuDropdownsMobileComponent, deps: [{ token: i0.Injector }, { token: EditorService }, { token: ToolbarCoreService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuDropdownsMobileComponent, selector: "app-nod-menu-dropdowns-mobile", ngImport: i0, template: "<ng-container\n    *ngIf=\"{\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <mat-accordion>\n        <mat-expansion-panel hideToggle>\n            <mat-expansion-panel-header>\n                <mat-panel-title>File</mat-panel-title>\n                <mat-panel-description>\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-arrow-dropdown\" />\n                </mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-panel-content\">\n                <button\n                    *ngIf=\"!data.isViewOnly\"\n                    id=\"menu-dropdowns-mobile-item-new\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.new(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-add-new\" />\n                        <span class=\"menu-item-text\">New</span>\n                    </div>\n                </button>\n                <button\n                    *ngIf=\"!data.isViewOnly\"\n                    id=\"menu-dropdowns-mobile-item-open-from\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.openFrom(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-open-from\" />\n                        <span class=\"menu-item-text\">Open From</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-save-as\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.saveAs(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-save\" />\n                        <span class=\"menu-item-text\">Save As</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-rename\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.rename(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-rename\" />\n                        <span class=\"menu-item-text\">Rename</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-print\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.print(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-print\" />\n                        <span class=\"menu-item-text\">Print</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-delete\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.delete(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-delete\" />\n                        <span class=\"menu-item-text\">Delete</span>\n                    </div>\n                </button>\n            </div>\n        </mat-expansion-panel>\n        <ng-container *ngIf=\"!data.isViewOnly\">\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>Insert</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <button\n                        id=\"menu-dropdowns-mobile-item-image\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertImage(); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-image\" />\n                            <span class=\"menu-item-text\">Image</span>\n                        </div>\n                    </button>\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-table\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.insertTable()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-table\" />\n                            Table\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-link\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.insertLink()\">\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-link-on\" />\n                                <span class=\"menu-item-text\">Link</span>\n                            </div>\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                    <button\n                        *ngFor=\"let element of elements\"\n                        id=\"menu-dropdowns-mobile-item-{{ element.title }}\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertCustomElement(element); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"{{ element.icon }}\" />\n                            <span class=\"menu-item-text\">{{ element.name }}</span>\n                        </div>\n                    </button>\n                    <div class=\"composition-button hidden\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-headers-footers\"\n                            mat-menu-item>\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-headers-footers\" />\n                                <span class=\"menu-item-text\">Headers & Footers</span>\n                            </div>\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                </div>\n            </mat-expansion-panel>\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>Layout</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <button\n                        id=\"menu-dropdowns-mobile-item-page-break\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertPageBreak(); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-page-break\" />\n                            <span class=\"menu-item-text\">Page Break</span>\n                        </div>\n                    </button>\n                </div>\n            </mat-expansion-panel>\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>Format</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-text-format\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.textFormat()\">\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-text\" />\n                                <span class=\"menu-item-text\">Text Format</span>\n                            </div>\n                            <mat-icon\n                                class=\"composition-icon\"\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-arrow-dropdown\" />\n                        </button>\n                    </div>\n                    <div class=\"composition-button hidden\">\n                        <button\n                            id=\"menu-dropdowns-mobile-header-footer\"\n                            mat-menu-item>\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-headers-footers\" />\n                                <span class=\"menu-item-text\">Headers & Footers</span>\n                            </div>\n                            <mat-icon\n                                class=\"composition-icon\"\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-arrow-dropdown\" />\n                        </button>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </ng-container>\n    </mat-accordion>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;padding:25px}mat-expansion-panel.mat-expansion-panel ::ng-deep{box-shadow:none;border-bottom-width:1px;border-bottom-style:solid}mat-expansion-panel.mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0 18px}mat-panel-description{margin:0;justify-content:flex-end}.mat-expansion-panel-spacing{margin:0}.mat-expansion-panel-header,.mat-expansion-panel-header.mat-expanded{height:48px;padding-right:10px}.mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-description .mat-icon{transform:rotate(180deg)}.heading-menu{display:inline-flex;width:100%}.menu-item-text{white-space:nowrap;align-self:center}.composition-button{display:flex;flex-direction:row;align-items:center;position:relative}.composition-icon{position:absolute;right:0;transform:rotate(270deg)}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i4$4.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuDropdownsMobileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-nod-menu-dropdowns-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n    *ngIf=\"{\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <mat-accordion>\n        <mat-expansion-panel hideToggle>\n            <mat-expansion-panel-header>\n                <mat-panel-title>File</mat-panel-title>\n                <mat-panel-description>\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-arrow-dropdown\" />\n                </mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-panel-content\">\n                <button\n                    *ngIf=\"!data.isViewOnly\"\n                    id=\"menu-dropdowns-mobile-item-new\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.new(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-add-new\" />\n                        <span class=\"menu-item-text\">New</span>\n                    </div>\n                </button>\n                <button\n                    *ngIf=\"!data.isViewOnly\"\n                    id=\"menu-dropdowns-mobile-item-open-from\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.openFrom(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-open-from\" />\n                        <span class=\"menu-item-text\">Open From</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-save-as\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.saveAs(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-save\" />\n                        <span class=\"menu-item-text\">Save As</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-rename\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.rename(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-rename\" />\n                        <span class=\"menu-item-text\">Rename</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-print\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.print(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-print\" />\n                        <span class=\"menu-item-text\">Print</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-delete\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.delete(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-delete\" />\n                        <span class=\"menu-item-text\">Delete</span>\n                    </div>\n                </button>\n            </div>\n        </mat-expansion-panel>\n        <ng-container *ngIf=\"!data.isViewOnly\">\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>Insert</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <button\n                        id=\"menu-dropdowns-mobile-item-image\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertImage(); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-image\" />\n                            <span class=\"menu-item-text\">Image</span>\n                        </div>\n                    </button>\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-table\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.insertTable()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-table\" />\n                            Table\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-link\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.insertLink()\">\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-link-on\" />\n                                <span class=\"menu-item-text\">Link</span>\n                            </div>\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                    <button\n                        *ngFor=\"let element of elements\"\n                        id=\"menu-dropdowns-mobile-item-{{ element.title }}\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertCustomElement(element); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"{{ element.icon }}\" />\n                            <span class=\"menu-item-text\">{{ element.name }}</span>\n                        </div>\n                    </button>\n                    <div class=\"composition-button hidden\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-headers-footers\"\n                            mat-menu-item>\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-headers-footers\" />\n                                <span class=\"menu-item-text\">Headers & Footers</span>\n                            </div>\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                </div>\n            </mat-expansion-panel>\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>Layout</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <button\n                        id=\"menu-dropdowns-mobile-item-page-break\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertPageBreak(); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-page-break\" />\n                            <span class=\"menu-item-text\">Page Break</span>\n                        </div>\n                    </button>\n                </div>\n            </mat-expansion-panel>\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>Format</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-text-format\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.textFormat()\">\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-text\" />\n                                <span class=\"menu-item-text\">Text Format</span>\n                            </div>\n                            <mat-icon\n                                class=\"composition-icon\"\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-arrow-dropdown\" />\n                        </button>\n                    </div>\n                    <div class=\"composition-button hidden\">\n                        <button\n                            id=\"menu-dropdowns-mobile-header-footer\"\n                            mat-menu-item>\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-headers-footers\" />\n                                <span class=\"menu-item-text\">Headers & Footers</span>\n                            </div>\n                            <mat-icon\n                                class=\"composition-icon\"\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-arrow-dropdown\" />\n                        </button>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </ng-container>\n    </mat-accordion>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;padding:25px}mat-expansion-panel.mat-expansion-panel ::ng-deep{box-shadow:none;border-bottom-width:1px;border-bottom-style:solid}mat-expansion-panel.mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0 18px}mat-panel-description{margin:0;justify-content:flex-end}.mat-expansion-panel-spacing{margin:0}.mat-expansion-panel-header,.mat-expansion-panel-header.mat-expanded{height:48px;padding-right:10px}.mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-description .mat-icon{transform:rotate(180deg)}.heading-menu{display:inline-flex;width:100%}.menu-item-text{white-space:nowrap;align-self:center}.composition-button{display:flex;flex-direction:row;align-items:center;position:relative}.composition-icon{position:absolute;right:0;transform:rotate(270deg)}.hidden{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: EditorService }, { type: ToolbarCoreService }] });
-
-class ToolbarCoreService {
-    set mode(value) {
-        this._mode$.next(value);
-    }
-    get mode$() {
-        return this._mode$.asObservable();
-    }
-    set actions(value) {
-        this._actions = value;
-    }
-    get actions() {
-        return this._actions;
-    }
-    set backTitle(value) {
-        this._backTitle = value;
-    }
-    get backTitle() {
-        const currentMode = this.getMode();
-        return currentMode === EditorToolbarMode.Insert || currentMode === EditorToolbarMode.ExternalComponent ? this._backTitle : '';
-    }
-    constructor(editorService) {
-        this.editorService = editorService;
-        this._mode$ = new BehaviorSubject(EditorToolbarMode.Base);
-    }
-    getMode() {
-        return this._mode$.value;
-    }
-    back() {
-        const currentMode = this.getMode();
-        if (currentMode === EditorToolbarMode.Menu || currentMode === EditorToolbarMode.ExternalComponent) {
-            this.reset();
-        }
-        else if (currentMode === EditorToolbarMode.Insert) {
-            this.openBurgerMenu();
-        }
-        else {
-            this._mode$.next(EditorToolbarMode.Base);
-        }
-    }
-    reset() {
-        this.editorService.closeSidenav();
-        this._mode$.next(EditorToolbarMode.Base);
-    }
-    openBurgerMenu() {
-        this.mode = EditorToolbarMode.Menu;
-        this.editorService.openSidenav(MenuDropdownsMobileComponent);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarCoreService, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarCoreService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarCoreService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: EditorService }] });
+const ACTIONS_MENU_MODS = [
+    EditorToolbarMode.Base,
+    EditorToolbarMode.AlignFormat,
+    EditorToolbarMode.StyleFormat,
+    EditorToolbarMode.TextFormat
+];
 
 class EditorMobileToolbarComponent extends ToolbarActionsComponent {
     constructor(cdr, customIconService, editorService, injector, toolbarCoreService) {
@@ -13923,85 +14059,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-class MenuDropdownsComponent extends BaseToolbarComponent {
-    constructor(customIconService, injector, cdr, editorService) {
-        super(customIconService, injector, cdr, editorService);
-        this.cdr = cdr;
-        this.editorService = editorService;
-        this.openFileFromDisk = new EventEmitter();
-        this.addCustomElement = new EventEmitter();
-        this.saveAs = new EventEmitter();
-        this.insertPageBreak = new EventEmitter();
-        this.createDocument = new EventEmitter();
-        this.rename = new EventEmitter();
-        this.delete = new EventEmitter();
-        this.openEditMenu = new EventEmitter();
-        this.cutSelected = new EventEmitter();
-        this.copySelected = new EventEmitter();
-        this.pasteClipboardData = new EventEmitter();
-        this.selectAll = new EventEmitter();
-        this.removeSelected = new EventEmitter();
-        this.showInsertTableMenu = false;
-        this.numberingTemplateTypes = NumberingTemplateType;
-        this.alignments = Alignment;
-    }
-    onSelectFormat(alignment) {
-        this.changeParagraphStyle.emit(new ParagraphStyleModel({ alignment }));
-    }
-    onSelectNumberingTemplate(numberingTemplateType) {
-        if (this.numberingTemplateType === numberingTemplateType) {
-            this.removeNumberings.emit();
-        }
-        else {
-            const templateLevels = NumberingTemplates.find(x => x.templateType === numberingTemplateType).levels;
-            this.setNumberingTemplateType.emit(templateLevels);
-        }
-    }
-    onTableInsertMenuClosed() {
-        this.tableInsertMenu._animationDone
-            .pipe(filter(x => x.toState === 'void'), take(1))
-            .subscribe(() => {
-            this.showInsertTableMenu = false;
-            this.cdr.markForCheck();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuDropdownsComponent, deps: [{ token: CustomIconService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", insertPageBreak: "insertPageBreak", createDocument: "createDocument", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected" }, viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngIf=\"{\n        clipboardData: editorService.clipboardData$ | async,\n        hasSelection: editorService.hasSelection$ | async,\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <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=\"!data.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=\"noder-icon\"\n                    fontIcon=\"icon-add-new\"></mat-icon>\n                <span class=\"menu-item-text\">New</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"!data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-open-from\"\n            mat-menu-item\n            (click)=\"openFileFromDisk.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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]=\"!data.hasSelection\"\n            (click)=\"cutSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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]=\"!data.hasSelection\"\n            (click)=\"copySelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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]=\"!data.clipboardData?.length\"\n            (click)=\"pasteClipboardData.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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=\"noder-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]=\"!data.hasSelection\"\n            (click)=\"removeSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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=\"!data.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        <button\n            id=\"menu-dropdowns-menu-item-image\"\n            mat-menu-item\n            (click)=\"insertImage.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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=\"noder-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=\"noder-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)=\"onCreateElement(element)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"!data.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=\"noder-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=\"!data.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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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-nod-insert-table\n            *ngIf=\"showInsertTableMenu\"\n            (selectSizes)=\"insertTable.emit($event)\" />\n    </mat-menu>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;height:100%}.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.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"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuDropdownsComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-menu-dropdowns', template: "<ng-container\n    *ngIf=\"{\n        clipboardData: editorService.clipboardData$ | async,\n        hasSelection: editorService.hasSelection$ | async,\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <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=\"!data.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=\"noder-icon\"\n                    fontIcon=\"icon-add-new\"></mat-icon>\n                <span class=\"menu-item-text\">New</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"!data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-open-from\"\n            mat-menu-item\n            (click)=\"openFileFromDisk.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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]=\"!data.hasSelection\"\n            (click)=\"cutSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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]=\"!data.hasSelection\"\n            (click)=\"copySelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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]=\"!data.clipboardData?.length\"\n            (click)=\"pasteClipboardData.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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=\"noder-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]=\"!data.hasSelection\"\n            (click)=\"removeSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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=\"!data.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        <button\n            id=\"menu-dropdowns-menu-item-image\"\n            mat-menu-item\n            (click)=\"insertImage.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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=\"noder-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=\"noder-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)=\"onCreateElement(element)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"!data.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=\"noder-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=\"!data.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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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=\"noder-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-nod-insert-table\n            *ngIf=\"showInsertTableMenu\"\n            (selectSizes)=\"insertTable.emit($event)\" />\n    </mat-menu>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;height:100%}.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: CustomIconService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: EditorService }], propDecorators: { openFileFromDisk: [{
-                type: Output
-            }], addCustomElement: [{
-                type: Output
-            }], saveAs: [{
-                type: Output
-            }], insertPageBreak: [{
-                type: Output
-            }], createDocument: [{
-                type: Output
-            }], rename: [{
-                type: Output
-            }], delete: [{
-                type: Output
-            }], openEditMenu: [{
-                type: Output
-            }], cutSelected: [{
-                type: Output
-            }], copySelected: [{
-                type: Output
-            }], pasteClipboardData: [{
-                type: Output
-            }], selectAll: [{
-                type: Output
-            }], removeSelected: [{
-                type: Output
-            }], tableInsertMenu: [{
-                type: ViewChild,
-                args: ['tableInsert']
-            }] } });
-
 class EditorToolbarComponent {
     constructor(editorService) {
         this.editorService = editorService;
@@ -14031,7 +14088,7 @@ class EditorToolbarComponent {
         this.insertTable = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditorToolbarComponent, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EditorToolbarComponent, selector: "app-nod-editor-toolbar", 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-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\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()\"\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-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\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    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", outputs: ["openFileFromDisk", "addCustomElement", "saveAs", "insertPageBreak", "createDocument", "rename", "delete", "openEditMenu", "cutSelected", "copySelected", "pasteClipboardData", "selectAll", "removeSelected"] }, { kind: "component", type: ToolbarActionsComponent, selector: "app-nod-toolbar-actions" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EditorToolbarComponent, selector: "app-nod-editor-toolbar", 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-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\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()\"\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-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\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    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", inputs: ["showFile", "showEdit", "showInsert", "showLayout", "showFormat"], outputs: ["openFileFromDisk", "addCustomElement", "saveAs", "insertPageBreak", "createDocument", "rename", "delete", "openEditMenu", "cutSelected", "copySelected", "pasteClipboardData", "selectAll", "removeSelected"] }, { kind: "component", type: ToolbarActionsComponent, selector: "app-nod-toolbar-actions" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditorToolbarComponent, decorators: [{
             type: Component,
@@ -14385,7 +14442,11 @@ class EditorToolbarModule {
             MatIconModule,
             MatMenuModule,
             ReactiveFormsModule,
-            TextFormatMobileComponent], exports: [EditorMobileToolbarComponent, EditorToolbarComponent] }); }
+            TextFormatMobileComponent], exports: [EditorMobileToolbarComponent,
+            EditorToolbarComponent,
+            MenuDropdownsComponent,
+            MenuDropdownsMobileComponent,
+            ToolbarActionsComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditorToolbarModule, providers: [CustomIconService, EditorToolbarService, ToolbarCoreService], imports: [ColorPickerComponent,
             CommonModule,
             FontComponent,
@@ -14438,7 +14499,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         TextFormatMobileComponent
                     ],
                     providers: [CustomIconService, EditorToolbarService, ToolbarCoreService],
-                    exports: [EditorMobileToolbarComponent, EditorToolbarComponent]
+                    exports: [
+                        EditorMobileToolbarComponent,
+                        EditorToolbarComponent,
+                        MenuDropdownsComponent,
+                        MenuDropdownsMobileComponent,
+                        ToolbarActionsComponent
+                    ]
                 }]
         }] });
 
@@ -14704,5 +14771,5 @@ class OperationModel {
  * Generated bundle index. Do not edit.
  */
 
-export { AddLinkDialogComponent, AddLinkDialogOptions, AddLinkMobileComponent, Alignment, BaseNoderComponent, BreakTypes, CommandModel, CommandType, CommandsService, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_STYLES, DefaultImageApiService, DestroyComponent, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorMobileToolbarComponent, EditorModule, EditorSearchDialogComponent, EditorService, EditorTitleComponent, EditorTitleMobileComponent, EditorToolbarComponent, EditorToolbarMode, EditorToolbarModule, EditorToolbarService, ElementDataModel, ElementModel, ExternalComponent, ExternalElementModel, ExternalElementService, FileSourceModel, FormatStyleHelper, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, Mode, NEW_LINE_MARKUP, NumberingLevelModel, OperationModel, OperationsHistoryInfoModel, PageType, ParagraphStyleModel, RevisionHelper, RevisionModel, TextFormatMobileComponent, TextStyleModel };
+export { AddLinkDialogComponent, AddLinkDialogOptions, AddLinkMobileComponent, Alignment, BaseNoderComponent, BreakTypes, CommandModel, CommandType, CommandsService, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_STYLES, DefaultImageApiService, DestroyComponent, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorMobileToolbarComponent, EditorModule, EditorSearchDialogComponent, EditorService, EditorTitleComponent, EditorTitleMobileComponent, EditorToolbarComponent, EditorToolbarMode, EditorToolbarModule, EditorToolbarService, ElementDataModel, ElementModel, ExternalComponent, ExternalElementModel, ExternalElementService, FileSourceModel, FormatStyleHelper, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, MenuDropdownsComponent, MenuDropdownsMobileComponent, Mode, NEW_LINE_MARKUP, NumberingLevelModel, OperationModel, OperationsHistoryInfoModel, PageType, ParagraphStyleModel, RevisionHelper, RevisionModel, TextFormatMobileComponent, TextStyleModel, ToolbarActionsComponent };
 //# sourceMappingURL=talrace-ngx-noder.mjs.map