@talrace/ngx-noder 19.0.63 → 19.0.64

package/fesm2022/talrace-ngx-noder.mjs

@@ -2493,14 +2493,14 @@ class ContextMenuComponent {
         this.overlayService.close(AfterCloseOverlayActions.OpenSetNumberingValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContextMenuComponent, deps: [{ token: EditorService }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ContextMenuComponent, isStandalone: true, selector: "app-nod-context-menu", inputs: { hasNumbering: "hasNumbering", hasSelection: "hasSelection", disableContinueNumber: "disableContinueNumber" }, host: { properties: { "style.height.px": "210", "style.width.px": "320" } }, ngImport: i0, template: "<button\n    mat-button\n    (click)=\"onCopy()\"\n    [disabled]=\"!hasSelection\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-copy\" />\n    {{ 'NODER.LABEL.COPY' | translate }}\n    <span class=\"shortcut\">Ctrl+C</span>\n</button>\n<button\n    mat-button\n    (click)=\"onPaste()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-paste\" />\n    {{ 'NODER.LABEL.PASTE' | translate }}\n    <span class=\"shortcut\">Ctrl+V</span>\n</button>\n<button\n    mat-button\n    (click)=\"onCut()\"\n    [disabled]=\"!hasSelection\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-cut\" />\n    {{ 'NODER.LABEL.CUT' | translate }}\n    <span class=\"shortcut\">Ctrl+X</span>\n</button>\n<div class=\"separator\"></div>\n<button\n    mat-button\n    (click)=\"onStartNewList()\"\n    [disabled]=\"!hasNumbering\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-restart-numbering\" />\n    {{ 'NODER.LABEL.START_NEW_LIST' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onContinueNumbering()\"\n    [disabled]=\"!hasNumbering || disableContinueNumber\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-continue-numbering\" />\n    {{ 'NODER.LABEL.CONTINUE_NUMBERING' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onSetNumberingValue()\"\n    [disabled]=\"!hasNumbering\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-starting-value\" />\n    {{ 'NODER.LABEL.SET_NUMBERING_VALUE' | translate }}\n</button>\n", styles: [":host{display:flex;padding:8px 16px;flex-direction:column;align-items:flex-start;gap:4px;border-radius:8px;box-shadow:2px 2px 8px #21212129}.separator{width:288px;height:1px}button{width:100%;justify-content:start;min-height:28px;height:28px}button ::ng-deep .mdc-button__label{display:flex;flex-direction:row;width:100%;margin-left:3px;font-weight:400}.shortcut{margin-left:auto;opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ContextMenuComponent, isStandalone: true, selector: "app-nod-context-menu", inputs: { hasNumbering: "hasNumbering", hasSelection: "hasSelection", disableContinueNumber: "disableContinueNumber" }, host: { properties: { "style.height.px": "210", "style.width.px": "320" } }, ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"!hasSelection || editorService.isViewOnly\"\n    (click)=\"onCopy()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-copy\" />\n    {{ 'NODER.LABEL.COPY' | translate }}\n    <span class=\"shortcut\">Ctrl+C</span>\n</button>\n<button\n    mat-button\n    [disabled]=\"editorService.isViewOnly\"\n    (click)=\"onPaste()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-paste\" />\n    {{ 'NODER.LABEL.PASTE' | translate }}\n    <span class=\"shortcut\">Ctrl+V</span>\n</button>\n<button\n    mat-button\n    [disabled]=\"!hasSelection || editorService.isViewOnly\"\n    (click)=\"onCut()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-cut\" />\n    {{ 'NODER.LABEL.CUT' | translate }}\n    <span class=\"shortcut\">Ctrl+X</span>\n</button>\n<div class=\"separator\"></div>\n<button\n    mat-button\n    [disabled]=\"!hasNumbering\"\n    (click)=\"onStartNewList()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-restart-numbering\" />\n    {{ 'NODER.LABEL.START_NEW_LIST' | translate }}\n</button>\n<button\n    mat-button\n    [disabled]=\"!hasNumbering || disableContinueNumber\"\n    (click)=\"onContinueNumbering()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-continue-numbering\" />\n    {{ 'NODER.LABEL.CONTINUE_NUMBERING' | translate }}\n</button>\n<button\n    mat-button\n    [disabled]=\"!hasNumbering\"\n    (click)=\"onSetNumberingValue()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-starting-value\" />\n    {{ 'NODER.LABEL.SET_NUMBERING_VALUE' | translate }}\n</button>\n", styles: [":host{display:flex;padding:8px 16px;flex-direction:column;align-items:flex-start;gap:4px;border-radius:8px;box-shadow:2px 2px 8px #21212129}.separator{width:288px;height:1px}button{width:100%;justify-content:start;min-height:28px;height:28px}button ::ng-deep .mdc-button__label{display:flex;flex-direction:row;width:100%;margin-left:3px;font-weight:400}.shortcut{margin-left:auto;opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-nod-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, TranslateModule, MatIconModule], host: {
                         '[style.height.px]': `${CONTEXT_MENU_HEIGHT}`,
                         '[style.width.px]': `${CONTEXT_MENU_WIDTH}`
-                    }, template: "<button\n    mat-button\n    (click)=\"onCopy()\"\n    [disabled]=\"!hasSelection\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-copy\" />\n    {{ 'NODER.LABEL.COPY' | translate }}\n    <span class=\"shortcut\">Ctrl+C</span>\n</button>\n<button\n    mat-button\n    (click)=\"onPaste()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-paste\" />\n    {{ 'NODER.LABEL.PASTE' | translate }}\n    <span class=\"shortcut\">Ctrl+V</span>\n</button>\n<button\n    mat-button\n    (click)=\"onCut()\"\n    [disabled]=\"!hasSelection\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-cut\" />\n    {{ 'NODER.LABEL.CUT' | translate }}\n    <span class=\"shortcut\">Ctrl+X</span>\n</button>\n<div class=\"separator\"></div>\n<button\n    mat-button\n    (click)=\"onStartNewList()\"\n    [disabled]=\"!hasNumbering\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-restart-numbering\" />\n    {{ 'NODER.LABEL.START_NEW_LIST' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onContinueNumbering()\"\n    [disabled]=\"!hasNumbering || disableContinueNumber\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-continue-numbering\" />\n    {{ 'NODER.LABEL.CONTINUE_NUMBERING' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onSetNumberingValue()\"\n    [disabled]=\"!hasNumbering\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-starting-value\" />\n    {{ 'NODER.LABEL.SET_NUMBERING_VALUE' | translate }}\n</button>\n", styles: [":host{display:flex;padding:8px 16px;flex-direction:column;align-items:flex-start;gap:4px;border-radius:8px;box-shadow:2px 2px 8px #21212129}.separator{width:288px;height:1px}button{width:100%;justify-content:start;min-height:28px;height:28px}button ::ng-deep .mdc-button__label{display:flex;flex-direction:row;width:100%;margin-left:3px;font-weight:400}.shortcut{margin-left:auto;opacity:.5}\n"] }]
+                    }, template: "<button\n    mat-button\n    [disabled]=\"!hasSelection || editorService.isViewOnly\"\n    (click)=\"onCopy()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-copy\" />\n    {{ 'NODER.LABEL.COPY' | translate }}\n    <span class=\"shortcut\">Ctrl+C</span>\n</button>\n<button\n    mat-button\n    [disabled]=\"editorService.isViewOnly\"\n    (click)=\"onPaste()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-paste\" />\n    {{ 'NODER.LABEL.PASTE' | translate }}\n    <span class=\"shortcut\">Ctrl+V</span>\n</button>\n<button\n    mat-button\n    [disabled]=\"!hasSelection || editorService.isViewOnly\"\n    (click)=\"onCut()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-cut\" />\n    {{ 'NODER.LABEL.CUT' | translate }}\n    <span class=\"shortcut\">Ctrl+X</span>\n</button>\n<div class=\"separator\"></div>\n<button\n    mat-button\n    [disabled]=\"!hasNumbering\"\n    (click)=\"onStartNewList()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-restart-numbering\" />\n    {{ 'NODER.LABEL.START_NEW_LIST' | translate }}\n</button>\n<button\n    mat-button\n    [disabled]=\"!hasNumbering || disableContinueNumber\"\n    (click)=\"onContinueNumbering()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-continue-numbering\" />\n    {{ 'NODER.LABEL.CONTINUE_NUMBERING' | translate }}\n</button>\n<button\n    mat-button\n    [disabled]=\"!hasNumbering\"\n    (click)=\"onSetNumberingValue()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-starting-value\" />\n    {{ 'NODER.LABEL.SET_NUMBERING_VALUE' | translate }}\n</button>\n", styles: [":host{display:flex;padding:8px 16px;flex-direction:column;align-items:flex-start;gap:4px;border-radius:8px;box-shadow:2px 2px 8px #21212129}.separator{width:288px;height:1px}button{width:100%;justify-content:start;min-height:28px;height:28px}button ::ng-deep .mdc-button__label{display:flex;flex-direction:row;width:100%;margin-left:3px;font-weight:400}.shortcut{margin-left:auto;opacity:.5}\n"] }]
         }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }], propDecorators: { hasNumbering: [{
                 type: Input
             }], hasSelection: [{
@@ -5245,6 +5245,7 @@ class TableOperationsHelper {
             for (let j = 0; j < columnsCount; j++) {
                 const cell = new CellModel({
                     breaks: [],
+                    borders: this.getDefaultCellBorders(),
                     content: '',
                     elements: [],
                     formats: [new FormatModel({ startIndex: 0, endIndex: 0, textStyle: DEFAULT_TEXT_STYLE })],
@@ -5795,6 +5796,14 @@ class TableOperationsHelper {
         }
         return cellsData;
     }
+    static getDefaultCellBorders() {
+        return [
+            new BordersStyleModel({ position: Positions.Top, width: 1, lineStyle: LineStyles.Single }),
+            new BordersStyleModel({ position: Positions.Bottom, width: 1, lineStyle: LineStyles.Single }),
+            new BordersStyleModel({ position: Positions.Left, width: 1, lineStyle: LineStyles.Single }),
+            new BordersStyleModel({ position: Positions.Right, width: 1, lineStyle: LineStyles.Single })
+        ];
+    }
 }
 
 class TabOperationsHelper {
@@ -8000,8 +8009,7 @@ class DisplayData extends EventEmitting {
         this.pagesFormat = this.pageFormatModels.map(x => new PageFormat(x, this.pagesSpace, this.customComponents));
     }
     insertText(position, text) {
-        const endPoint = this.insertTextAndReturnEndCursorPosition(text, position);
-        return endPoint;
+        return this.insertTextAndReturnEndCursorPosition(text, position);
     }
     removeRange(range) {
         const paragraphText = this.paragraphs[range.start.row].content.slice(0, range.start.column) +
@@ -13641,11 +13649,11 @@ class NoderTableComponent extends BaseNoderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTableComponent, deps: [{ token: ComponentService }, { token: i0.ElementRef }, { token: OverlayService }, { token: RegulatorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTableComponent, isStandalone: false, selector: "app-nod-table", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{position:relative}:host::ng-deep table{position:relative;border-collapse:collapse;background:transparent;empty-cells:show;border-spacing:0;overflow:visible;table-layout:fixed}:host::ng-deep td{position:relative;vertical-align:top;border:1px solid #000;margin:0;padding:0;height:inherit}:host::ng-deep .hidden-cell{display:none;cursor:not-allowed}:host::ng-deep .resizer-border{position:absolute;border:solid .5px blue;z-index:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTableComponent, isStandalone: false, selector: "app-nod-table", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{position:relative}:host::ng-deep table{position:relative;border-collapse:collapse;background:transparent;empty-cells:show;border-spacing:0;overflow:visible;table-layout:fixed}:host::ng-deep td{position:relative;vertical-align:top;margin:0;padding:0;height:inherit}:host::ng-deep .hidden-cell{display:none;cursor:not-allowed}:host::ng-deep .resizer-border{position:absolute;border:solid .5px blue;z-index:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nod-table', template: '', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{position:relative}:host::ng-deep table{position:relative;border-collapse:collapse;background:transparent;empty-cells:show;border-spacing:0;overflow:visible;table-layout:fixed}:host::ng-deep td{position:relative;vertical-align:top;border:1px solid #000;margin:0;padding:0;height:inherit}:host::ng-deep .hidden-cell{display:none;cursor:not-allowed}:host::ng-deep .resizer-border{position:absolute;border:solid .5px blue;z-index:1}\n"] }]
+            args: [{ selector: 'app-nod-table', template: '', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{position:relative}:host::ng-deep table{position:relative;border-collapse:collapse;background:transparent;empty-cells:show;border-spacing:0;overflow:visible;table-layout:fixed}:host::ng-deep td{position:relative;vertical-align:top;margin:0;padding:0;height:inherit}:host::ng-deep .hidden-cell{display:none;cursor:not-allowed}:host::ng-deep .resizer-border{position:absolute;border:solid .5px blue;z-index:1}\n"] }]
         }], ctorParameters: () => [{ type: ComponentService }, { type: i0.ElementRef }, { type: OverlayService }, { type: RegulatorService }] });
 
 class RenderingHelper {
@@ -16391,6 +16399,9 @@ class Editor {
         this.showInsertOverlay(text);
     }
     onCut(event) {
+        if (this.editorService.isViewOnly) {
+            return;
+        }
         const text = this.getSelectedText();
         const slice = this.getSelectedSlice();
         if (!text && !slice) {
@@ -16402,6 +16413,9 @@ class Editor {
         this.editorService.setClipboardData(text);
     }
     onCopy(event) {
+        if (this.editorService.isViewOnly) {
+            return;
+        }
         const text = this.getSelectedText();
         const slice = this.getSelectedSlice();
         if (!text && !slice) {
@@ -16411,6 +16425,9 @@ class Editor {
         this.editorService.setClipboardData(text);
     }
     onPaste(event) {
+        if (this.editorService.isViewOnly) {
+            return;
+        }
         const { text, sliceData } = this.clipboardHandler.readEvent(event);
         if (sliceData) {
             this.pasteData(text, sliceData);
@@ -17346,7 +17363,7 @@ class Editor {
         return this.editorService.print$.subscribe(() => this.onPrint());
     }
     cutSelectedSubscription() {
-        return this.editorService.cutSelected$.subscribe(() => {
+        return this.editorService.cutSelected$.pipe(filter(() => !this.editorService.isViewOnly)).subscribe(() => {
             const text = this.getSelectedText();
             const slice = this.getSelectedSlice();
             if (!text && !slice) {
@@ -17359,7 +17376,7 @@ class Editor {
         });
     }
     copySelectedSubscription() {
-        return this.editorService.copySelected$.subscribe(() => {
+        return this.editorService.copySelected$.pipe(filter(() => !this.editorService.isViewOnly)).subscribe(() => {
             const text = this.getSelectedText();
             const slice = this.getSelectedSlice();
             if (!text && !slice) {
@@ -17371,7 +17388,7 @@ class Editor {
     }
     pasteFromClipboardSubscription() {
         return this.editorService.pasteFromClipboard$
-            .pipe(switchMap(() => from(this.clipboardHandler.readAsync())))
+            .pipe(filter(() => !this.editorService.isViewOnly), switchMap(() => from(this.clipboardHandler.readAsync())))
             .subscribe(({ text, sliceData }) => {
             this.pasteData(text, sliceData);
         });
@@ -18916,11 +18933,11 @@ class MenuDropdownsComponent extends BaseToolbarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", 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: "17.0.0", version: "19.0.5", type: MenuDropdownsComponent, isStandalone: false, selector: "app-nod-menu-dropdowns", inputs: { showFile: { classPropertyName: "showFile", publicName: "showFile", isSignal: false, isRequired: false, transformFunction: null }, showEdit: { classPropertyName: "showEdit", publicName: "showEdit", isSignal: false, isRequired: false, transformFunction: null }, showInsert: { classPropertyName: "showInsert", publicName: "showInsert", isSignal: false, isRequired: false, transformFunction: null }, showLayout: { classPropertyName: "showLayout", publicName: "showLayout", isSignal: false, isRequired: false, transformFunction: null }, showFormat: { classPropertyName: "showFormat", publicName: "showFormat", isSignal: false, isRequired: false, transformFunction: null }, isTemplate: { classPropertyName: "isTemplate", publicName: "isTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openFileFromDisk: "openFileFromDisk", saveAs: "saveAs", saveAsTemplate: "saveAsTemplate", saveAsDocument: "saveAsDocument", downloadPdf: "downloadPdf", insertPageBreak: "insertPageBreak", createDocument: "createDocument", pageSetup: "pageSetup", 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        {{ 'NODER.LABEL.FILE' | translate }}\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\">{{ 'NODER.LABEL.NEW' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"!data.isViewOnly\"\n            id=\"menu-dropdowns-menu-page-setup\"\n            mat-menu-item\n            (click)=\"pageSetup.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-system-file\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</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\">{{ 'NODER.LABEL.OPEN_FROM' | translate }}</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\">{{ 'NODER.LABEL.SAVE_AS' | translate }}</span>\n            </div>\n        </button>\n        @if (saveAsTemplate.observed && !isTemplate()) {\n            <button\n                id=\"menu-dropdowns-menu-item-save-as-template\"\n                mat-menu-item\n                (click)=\"saveAsTemplate.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\">{{ 'NODER.LABEL.SAVE_AS_TEMPLATE' | translate }}</span>\n                </div>\n            </button>\n        }\n        @if (saveAsDocument.observed && isTemplate()) {\n            <button\n                id=\"menu-dropdowns-menu-item-save-as-document\"\n                mat-menu-item\n                (click)=\"saveAsDocument.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\">{{ 'NODER.LABEL.SAVE_AS_DOCUMENT' | translate }}</span>\n                </div>\n            </button>\n        }\n        <button\n            *ngIf=\"downloadPdf.observed\"\n            id=\"menu-dropdowns-menu-item-download-pdf\"\n            mat-menu-item\n            (click)=\"downloadPdf.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\">{{ 'NODER.LABEL.DOWNLOAD_PDF' | translate }}</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\">{{ 'NODER.LABEL.RENAME' | translate }}</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\">{{ 'NODER.LABEL.PRINT' | translate }}</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\">{{ 'NODER.LABEL.DELETE' | translate }}</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        {{ 'NODER.LABEL.EDIT' | translate }}\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\">{{ 'NODER.LABEL.UNDO' | translate }}</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\">{{ 'NODER.LABEL.REDO' | translate }}</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\">{{ 'NODER.LABEL.CUT' | translate }}</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\">{{ 'NODER.LABEL.COPY' | translate }}</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\">{{ 'NODER.LABEL.PASTE' | translate }}</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\">{{ 'NODER.LABEL.SELECT_ALL' | translate }}</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\">{{ 'NODER.LABEL.DELETE' | translate }}</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        {{ 'NODER.LABEL.INSERT' | translate }}\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\">{{ 'NODER.LABEL.IMAGE' | translate }}</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            {{ 'NODER.LABEL.TABLE' | translate }}\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\">{{ 'NODER.LABEL.LINK' | translate }}</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.nameId }}\"\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.nameTranslate | translate }}</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\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</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\">{{ 'NODER.LABEL.HEADER' | translate }}</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\">{{ 'NODER.LABEL.FOOTER' | translate }}</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        {{ 'NODER.LABEL.LAYOUT' | translate }}\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\">{{ 'NODER.LABEL.PAGE_BREAK' | translate }}</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        {{ 'NODER.LABEL.FORMAT' | translate }}\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\">{{ 'NODER.LABEL.ALIGN' | translate }}</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\">{{ 'NODER.LABEL.LEFT' | translate }}</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\">{{ 'NODER.LABEL.CENTER' | translate }}</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\">{{ 'NODER.LABEL.RIGHT' | translate }}</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\">{{ 'NODER.LABEL.BULLETS_AND_NUMBERING' | translate }}</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\">{{ 'NODER.LABEL.BULLET_LIST_MENU' | translate }}</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\">{{ 'NODER.LABEL.NUMBERED_LIST_MENU' | translate }}</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\">{{ 'NODER.LABEL.TEXT' | translate }}</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\">{{ 'NODER.LABEL.BOLD' | translate }}</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\">{{ 'NODER.LABEL.ITALIC' | translate }}</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\">{{ 'NODER.LABEL.UNDERLINED' | translate }}</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\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</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%}button.mat-mdc-button{letter-spacing:0}.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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.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" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: MenuDropdownsComponent, isStandalone: false, selector: "app-nod-menu-dropdowns", inputs: { showFile: { classPropertyName: "showFile", publicName: "showFile", isSignal: false, isRequired: false, transformFunction: null }, showEdit: { classPropertyName: "showEdit", publicName: "showEdit", isSignal: false, isRequired: false, transformFunction: null }, showInsert: { classPropertyName: "showInsert", publicName: "showInsert", isSignal: false, isRequired: false, transformFunction: null }, showLayout: { classPropertyName: "showLayout", publicName: "showLayout", isSignal: false, isRequired: false, transformFunction: null }, showFormat: { classPropertyName: "showFormat", publicName: "showFormat", isSignal: false, isRequired: false, transformFunction: null }, isTemplate: { classPropertyName: "isTemplate", publicName: "isTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openFileFromDisk: "openFileFromDisk", saveAs: "saveAs", saveAsTemplate: "saveAsTemplate", saveAsDocument: "saveAsDocument", downloadPdf: "downloadPdf", insertPageBreak: "insertPageBreak", createDocument: "createDocument", pageSetup: "pageSetup", 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        {{ 'NODER.LABEL.FILE' | translate }}\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\">{{ 'NODER.LABEL.NEW' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"!data.isViewOnly\"\n            id=\"menu-dropdowns-menu-page-setup\"\n            mat-menu-item\n            (click)=\"pageSetup.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-system-file\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</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\">{{ 'NODER.LABEL.OPEN_FROM' | translate }}</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\">{{ 'NODER.LABEL.SAVE_AS' | translate }}</span>\n            </div>\n        </button>\n        @if (saveAsTemplate.observed && !isTemplate()) {\n            <button\n                id=\"menu-dropdowns-menu-item-save-as-template\"\n                mat-menu-item\n                (click)=\"saveAsTemplate.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\">{{ 'NODER.LABEL.SAVE_AS_TEMPLATE' | translate }}</span>\n                </div>\n            </button>\n        }\n        @if (saveAsDocument.observed && isTemplate()) {\n            <button\n                id=\"menu-dropdowns-menu-item-save-as-document\"\n                mat-menu-item\n                (click)=\"saveAsDocument.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\">{{ 'NODER.LABEL.SAVE_AS_DOCUMENT' | translate }}</span>\n                </div>\n            </button>\n        }\n        <button\n            *ngIf=\"downloadPdf.observed\"\n            id=\"menu-dropdowns-menu-item-download-pdf\"\n            mat-menu-item\n            (click)=\"downloadPdf.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\">{{ 'NODER.LABEL.DOWNLOAD_PDF' | translate }}</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\">{{ 'NODER.LABEL.RENAME' | translate }}</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\">{{ 'NODER.LABEL.PRINT' | translate }}</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\">{{ 'NODER.LABEL.DELETE' | translate }}</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        {{ 'NODER.LABEL.EDIT' | translate }}\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\">{{ 'NODER.LABEL.UNDO' | translate }}</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\">{{ 'NODER.LABEL.REDO' | translate }}</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 || editorService.isViewOnly\"\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\">{{ 'NODER.LABEL.CUT' | translate }}</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 || editorService.isViewOnly\"\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\">{{ 'NODER.LABEL.COPY' | translate }}</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]=\"editorService.isViewOnly\"\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\">{{ 'NODER.LABEL.PASTE' | translate }}</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\">{{ 'NODER.LABEL.SELECT_ALL' | translate }}</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\">{{ 'NODER.LABEL.DELETE' | translate }}</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        {{ 'NODER.LABEL.INSERT' | translate }}\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\">{{ 'NODER.LABEL.IMAGE' | translate }}</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            {{ 'NODER.LABEL.TABLE' | translate }}\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\">{{ 'NODER.LABEL.LINK' | translate }}</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.nameId }}\"\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.nameTranslate | translate }}</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\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</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\">{{ 'NODER.LABEL.HEADER' | translate }}</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\">{{ 'NODER.LABEL.FOOTER' | translate }}</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        {{ 'NODER.LABEL.LAYOUT' | translate }}\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\">{{ 'NODER.LABEL.PAGE_BREAK' | translate }}</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        {{ 'NODER.LABEL.FORMAT' | translate }}\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\">{{ 'NODER.LABEL.ALIGN' | translate }}</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\">{{ 'NODER.LABEL.LEFT' | translate }}</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\">{{ 'NODER.LABEL.CENTER' | translate }}</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\">{{ 'NODER.LABEL.RIGHT' | translate }}</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\">{{ 'NODER.LABEL.BULLETS_AND_NUMBERING' | translate }}</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\">{{ 'NODER.LABEL.BULLET_LIST_MENU' | translate }}</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\">{{ 'NODER.LABEL.NUMBERED_LIST_MENU' | translate }}</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\">{{ 'NODER.LABEL.TEXT' | translate }}</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\">{{ 'NODER.LABEL.BOLD' | translate }}</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\">{{ 'NODER.LABEL.ITALIC' | translate }}</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\">{{ 'NODER.LABEL.UNDERLINED' | translate }}</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\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</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%}button.mat-mdc-button{letter-spacing:0}.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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.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" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MenuDropdownsComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-menu-dropdowns', standalone: false, 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        {{ 'NODER.LABEL.FILE' | translate }}\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\">{{ 'NODER.LABEL.NEW' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"!data.isViewOnly\"\n            id=\"menu-dropdowns-menu-page-setup\"\n            mat-menu-item\n            (click)=\"pageSetup.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-system-file\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</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\">{{ 'NODER.LABEL.OPEN_FROM' | translate }}</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\">{{ 'NODER.LABEL.SAVE_AS' | translate }}</span>\n            </div>\n        </button>\n        @if (saveAsTemplate.observed && !isTemplate()) {\n            <button\n                id=\"menu-dropdowns-menu-item-save-as-template\"\n                mat-menu-item\n                (click)=\"saveAsTemplate.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\">{{ 'NODER.LABEL.SAVE_AS_TEMPLATE' | translate }}</span>\n                </div>\n            </button>\n        }\n        @if (saveAsDocument.observed && isTemplate()) {\n            <button\n                id=\"menu-dropdowns-menu-item-save-as-document\"\n                mat-menu-item\n                (click)=\"saveAsDocument.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\">{{ 'NODER.LABEL.SAVE_AS_DOCUMENT' | translate }}</span>\n                </div>\n            </button>\n        }\n        <button\n            *ngIf=\"downloadPdf.observed\"\n            id=\"menu-dropdowns-menu-item-download-pdf\"\n            mat-menu-item\n            (click)=\"downloadPdf.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\">{{ 'NODER.LABEL.DOWNLOAD_PDF' | translate }}</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\">{{ 'NODER.LABEL.RENAME' | translate }}</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\">{{ 'NODER.LABEL.PRINT' | translate }}</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\">{{ 'NODER.LABEL.DELETE' | translate }}</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        {{ 'NODER.LABEL.EDIT' | translate }}\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\">{{ 'NODER.LABEL.UNDO' | translate }}</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\">{{ 'NODER.LABEL.REDO' | translate }}</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\">{{ 'NODER.LABEL.CUT' | translate }}</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\">{{ 'NODER.LABEL.COPY' | translate }}</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\">{{ 'NODER.LABEL.PASTE' | translate }}</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\">{{ 'NODER.LABEL.SELECT_ALL' | translate }}</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\">{{ 'NODER.LABEL.DELETE' | translate }}</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        {{ 'NODER.LABEL.INSERT' | translate }}\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\">{{ 'NODER.LABEL.IMAGE' | translate }}</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            {{ 'NODER.LABEL.TABLE' | translate }}\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\">{{ 'NODER.LABEL.LINK' | translate }}</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.nameId }}\"\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.nameTranslate | translate }}</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\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</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\">{{ 'NODER.LABEL.HEADER' | translate }}</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\">{{ 'NODER.LABEL.FOOTER' | translate }}</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        {{ 'NODER.LABEL.LAYOUT' | translate }}\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\">{{ 'NODER.LABEL.PAGE_BREAK' | translate }}</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        {{ 'NODER.LABEL.FORMAT' | translate }}\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\">{{ 'NODER.LABEL.ALIGN' | translate }}</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\">{{ 'NODER.LABEL.LEFT' | translate }}</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\">{{ 'NODER.LABEL.CENTER' | translate }}</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\">{{ 'NODER.LABEL.RIGHT' | translate }}</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\">{{ 'NODER.LABEL.BULLETS_AND_NUMBERING' | translate }}</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\">{{ 'NODER.LABEL.BULLET_LIST_MENU' | translate }}</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\">{{ 'NODER.LABEL.NUMBERED_LIST_MENU' | translate }}</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\">{{ 'NODER.LABEL.TEXT' | translate }}</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\">{{ 'NODER.LABEL.BOLD' | translate }}</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\">{{ 'NODER.LABEL.ITALIC' | translate }}</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\">{{ 'NODER.LABEL.UNDERLINED' | translate }}</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\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</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%}button.mat-mdc-button{letter-spacing:0}.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"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-menu-dropdowns', standalone: false, 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        {{ 'NODER.LABEL.FILE' | translate }}\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\">{{ 'NODER.LABEL.NEW' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"!data.isViewOnly\"\n            id=\"menu-dropdowns-menu-page-setup\"\n            mat-menu-item\n            (click)=\"pageSetup.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-system-file\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</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\">{{ 'NODER.LABEL.OPEN_FROM' | translate }}</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\">{{ 'NODER.LABEL.SAVE_AS' | translate }}</span>\n            </div>\n        </button>\n        @if (saveAsTemplate.observed && !isTemplate()) {\n            <button\n                id=\"menu-dropdowns-menu-item-save-as-template\"\n                mat-menu-item\n                (click)=\"saveAsTemplate.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\">{{ 'NODER.LABEL.SAVE_AS_TEMPLATE' | translate }}</span>\n                </div>\n            </button>\n        }\n        @if (saveAsDocument.observed && isTemplate()) {\n            <button\n                id=\"menu-dropdowns-menu-item-save-as-document\"\n                mat-menu-item\n                (click)=\"saveAsDocument.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\">{{ 'NODER.LABEL.SAVE_AS_DOCUMENT' | translate }}</span>\n                </div>\n            </button>\n        }\n        <button\n            *ngIf=\"downloadPdf.observed\"\n            id=\"menu-dropdowns-menu-item-download-pdf\"\n            mat-menu-item\n            (click)=\"downloadPdf.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\">{{ 'NODER.LABEL.DOWNLOAD_PDF' | translate }}</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\">{{ 'NODER.LABEL.RENAME' | translate }}</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\">{{ 'NODER.LABEL.PRINT' | translate }}</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\">{{ 'NODER.LABEL.DELETE' | translate }}</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        {{ 'NODER.LABEL.EDIT' | translate }}\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\">{{ 'NODER.LABEL.UNDO' | translate }}</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\">{{ 'NODER.LABEL.REDO' | translate }}</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 || editorService.isViewOnly\"\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\">{{ 'NODER.LABEL.CUT' | translate }}</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 || editorService.isViewOnly\"\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\">{{ 'NODER.LABEL.COPY' | translate }}</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]=\"editorService.isViewOnly\"\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\">{{ 'NODER.LABEL.PASTE' | translate }}</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\">{{ 'NODER.LABEL.SELECT_ALL' | translate }}</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\">{{ 'NODER.LABEL.DELETE' | translate }}</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        {{ 'NODER.LABEL.INSERT' | translate }}\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\">{{ 'NODER.LABEL.IMAGE' | translate }}</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            {{ 'NODER.LABEL.TABLE' | translate }}\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\">{{ 'NODER.LABEL.LINK' | translate }}</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.nameId }}\"\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.nameTranslate | translate }}</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\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</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\">{{ 'NODER.LABEL.HEADER' | translate }}</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\">{{ 'NODER.LABEL.FOOTER' | translate }}</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        {{ 'NODER.LABEL.LAYOUT' | translate }}\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\">{{ 'NODER.LABEL.PAGE_BREAK' | translate }}</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        {{ 'NODER.LABEL.FORMAT' | translate }}\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\">{{ 'NODER.LABEL.ALIGN' | translate }}</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\">{{ 'NODER.LABEL.LEFT' | translate }}</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\">{{ 'NODER.LABEL.CENTER' | translate }}</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\">{{ 'NODER.LABEL.RIGHT' | translate }}</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\">{{ 'NODER.LABEL.BULLETS_AND_NUMBERING' | translate }}</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\">{{ 'NODER.LABEL.BULLET_LIST_MENU' | translate }}</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\">{{ 'NODER.LABEL.NUMBERED_LIST_MENU' | translate }}</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\">{{ 'NODER.LABEL.TEXT' | translate }}</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\">{{ 'NODER.LABEL.BOLD' | translate }}</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\">{{ 'NODER.LABEL.ITALIC' | translate }}</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\">{{ 'NODER.LABEL.UNDERLINED' | translate }}</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\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</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%}button.mat-mdc-button{letter-spacing:0}.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: [{