@talrace/ngx-noder 19.0.26 → 19.0.28

package/fesm2022/talrace-ngx-noder.mjs

@@ -596,6 +596,7 @@ class EditorService {
         this._insertText$ = new Subject();
         this._removeLeft$ = new Subject();
         this._removeCustomElementsData$ = new Subject();
+        this._restoreCustomElementsData$ = new Subject();
         this._currentPage$ = new BehaviorSubject(1);
         this._lastPageNumber$ = new BehaviorSubject(1);
         this._applyDocumentPageFormat$ = new Subject();
@@ -811,10 +812,16 @@ class EditorService {
     get removeLeft$() {
         return this._removeLeft$.asObservable();
     }
-    // Will be used by Project which use Library. To manage the delete of the external custom elements associated with the local custom elements
+    // Will be used by Project which use Library. To manage the delete of the external custom elements associated with the local custom elements.
+    // Should not delete entities but hide them instead. Because of possible synchronous restore
     get removeCustomElementsData$() {
         return this._removeCustomElementsData$.asObservable();
     }
+    // Will be used by Project which use Library. To manage the restore of the external custom elements associated with the local custom elements.
+    // Should not create entities but unhide them instead. Because its synchronous
+    get restoreCustomElementsData$() {
+        return this._restoreCustomElementsData$.asObservable();
+    }
     get currentPage() {
         return this._currentPage$.value;
     }
@@ -1065,6 +1072,9 @@ class EditorService {
     removeCustomElementsData(elements) {
         this._removeCustomElementsData$.next(elements);
     }
+    restoreCustomElementsData(elements) {
+        this._restoreCustomElementsData$.next(elements);
+    }
     setNewSearchTerm(term) {
         this._searchTerm$.next(term);
     }
@@ -1917,6 +1927,7 @@ class InputHandler extends BaseHandler {
         this.actionsWithScroll['Ctrl-Enter'] = () => editor.insertBreak(BreakTypes.Page);
         this.actionsWithScroll['Shift-Enter'] = () => editor.insertBreak(BreakTypes.TextWrapping);
         this.actionsWithScroll['Tab'] = () => editor.insertTab();
+        this.actionsWithScroll['Shift-Tab'] = () => editor.reduceTabNestingLevel();
         this.actionsWithScroll['Ctrl-KeyK'] = (event) => editor.onHotKeyDown(event);
     }
     fillActionsWithSelection(editor) {
@@ -2659,7 +2670,7 @@ class ContentsOperationsHelper {
         const paragraphs = IndexedElementHelper.sliceSection(contents.paragraphs, startIndex, endIndex).map(x => new ParagraphModel(x));
         const images = IndexedElementHelper.sliceSection(contents.images, startIndex, endIndex).map(x => new ImageModel(x));
         const tables = IndexedElementHelper.sliceSection(contents.tables, startIndex, endIndex).map(x => new TableModel(x));
-        const elements = IndexedElementHelper.sliceSection(contents.elements, startIndex, endIndex).map(x => new ElementModel({ ...x, id: 0, guid: '' }));
+        const elements = IndexedElementHelper.sliceSection(contents.elements, startIndex, endIndex).map(x => new ElementModel(x));
         const breaks = IndexedElementHelper.sliceSection(contents.breaks, startIndex, endIndex).map(x => new BreakModel(x));
         const tabs = IndexedElementHelper.sliceSection(contents.tabs, startIndex, endIndex).map(x => new TabModel(x));
         const links = LinkHelper.sliceSection(contents.links, startIndex, endIndex).map(x => new LinkModel(x));
@@ -8424,6 +8435,31 @@ class Editor {
         this.onSelectionChange();
         this.onContentChange();
     }
+    reduceTabNestingLevel() {
+        const insertIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start);
+        const insertTab = new InsertTabModel({ insertIndex });
+        if (!this.selection.isEmpty) {
+            this.replaceBy(new ReplaceModel({ insertTab }));
+            return;
+        }
+        if (this.selection.range.start.column === 0) {
+            const paragraph = this.session.displayData.paragraphs[this.selection.range.start.row];
+            if (paragraph.paragraphSettings.numberingData.numberingId) {
+                this.applyParagraphStyles(new ParagraphStyleModel({
+                    numberingLevel: paragraph.paragraphSettings.numberingData.level - 1,
+                    indentLeft: 0,
+                    indentFirstLine: 0,
+                    indentHanging: 0
+                }));
+                return;
+            }
+        }
+        this.saveInsertTabToHistory(insertTab);
+        const endPoint = this.session.insertTab(this.selection.cursor);
+        this.onDocumentChange(new Range(this.selection.cursor, endPoint));
+        this.onSelectionChange();
+        this.onContentChange();
+    }
     insertImage(imageData) {
         const insertIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start);
         const pageFormat = this.session.displayData.getPageFormatAtPosition(insertIndex);
@@ -8719,8 +8755,10 @@ class Editor {
             command = SaveCommandsHelper.getInsertStyledTextCommand(text, insertIndex, textStyle, this.targets);
         }
         else if (operation instanceof RestoreModel) {
-            this.session.restore(structuredClone(operation));
-            command = SaveCommandsHelper.getRestoreCommand(structuredClone(operation), this.targets);
+            const deepCopy = structuredClone(operation);
+            this.editorService.restoreCustomElementsData(deepCopy.elements);
+            this.session.restore(deepCopy);
+            command = SaveCommandsHelper.getRestoreCommand(deepCopy, this.targets);
         }
         else if (operation instanceof ApplyTextStyleModel) {
             this.session.applyTextStyle(operation.startIndex, operation.endIndex, new TextStyleModel(operation.textStyle));
@@ -8832,8 +8870,10 @@ class Editor {
             command = SaveCommandsHelper.getRemoveWithParagraphCommand(operation, this.targets);
         }
         else if (operation instanceof RestoreWithParagraphModel) {
-            this.session.restoreWithParagraph(operation);
-            command = SaveCommandsHelper.getRestoreWithParagraphCommand(operation, this.targets);
+            const deepCopy = structuredClone(operation);
+            this.editorService.restoreCustomElementsData(deepCopy.restore.elements);
+            this.session.restoreWithParagraph(deepCopy);
+            command = SaveCommandsHelper.getRestoreWithParagraphCommand(deepCopy, this.targets);
         }
         else if (operation instanceof MoveRangeModel) {
             this.moveRange(operation);
@@ -8865,8 +8905,10 @@ class Editor {
             this.recreateMainSession();
         }
         else if (operation instanceof ReplaceByRestoreModel) {
-            this.session.replaceByRestore(structuredClone(operation));
-            command = SaveCommandsHelper.getReplaceByRestoreCommand(structuredClone(operation), this.targets);
+            const deepCopy = structuredClone(operation);
+            this.editorService.restoreCustomElementsData(deepCopy.restore.elements);
+            this.session.replaceByRestore(structuredClone(deepCopy));
+            command = SaveCommandsHelper.getReplaceByRestoreCommand(structuredClone(deepCopy), this.targets);
         }
         else if (operation instanceof ApplyParagraphsModel) {
             const deepCopy = structuredClone(operation);
@@ -13875,9 +13917,14 @@ class EditSession {
         this.setTextStyle(textStyle);
     }
     applyParagraphStyle(startIndex, endIndex, paragraphStyle) {
-        const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
-        const endParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, endIndex).row;
         OperationsHelper.applyParagraphStyle(this.model, startIndex, endIndex, paragraphStyle);
+        let startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
+        let endParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, endIndex).row;
+        if (this.displayData.paragraphs[startParagraph].paragraphSettings.numberingData?.numberingId) {
+            const numberingId = this.displayData.paragraphs[startParagraph].paragraphSettings.numberingData.numberingId;
+            startParagraph = this.displayData.paragraphs.findIndex(x => x.paragraphSettings.numberingData.numberingId === numberingId);
+            endParagraph = this.displayData.paragraphs.findLastIndex(x => x.paragraphSettings.numberingData.numberingId === numberingId);
+        }
         this.displayData.resetAllNumberingInfo(startParagraph);
         this.displayData.updateNextLineIndexes(startParagraph, endParagraph);
         this.applyToolbarStyles();
@@ -17381,6 +17428,7 @@ class MenuDropdownsComponent extends BaseToolbarComponent {
         this.showFormat = true;
         this.openFileFromDisk = new EventEmitter();
         this.saveAs = new EventEmitter();
+        this.saveAsTemplate = new EventEmitter();
         this.downloadPdf = new EventEmitter();
         this.insertPageBreak = new EventEmitter();
         this.createDocument = new EventEmitter();
@@ -17418,11 +17466,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: "14.0.0", version: "19.0.5", type: MenuDropdownsComponent, isStandalone: false, selector: "app-nod-menu-dropdowns", inputs: { showFile: "showFile", showEdit: "showEdit", showInsert: "showInsert", showLayout: "showLayout", showFormat: "showFormat" }, outputs: { openFileFromDisk: "openFileFromDisk", saveAs: "saveAs", 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        <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%}.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.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: "showFile", showEdit: "showEdit", showInsert: "showInsert", showLayout: "showLayout", showFormat: "showFormat" }, outputs: { openFileFromDisk: "openFileFromDisk", saveAs: "saveAs", saveAsTemplate: "saveAsTemplate", 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) {\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        <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%}.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.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        <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%}.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) {\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        <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%}.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: [{
@@ -17437,6 +17485,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Output
             }], saveAs: [{
                 type: Output
+            }], saveAsTemplate: [{
+                type: Output
             }], downloadPdf: [{
                 type: Output
             }], insertPageBreak: [{
@@ -17981,6 +18031,7 @@ class EditorToolbarComponent {
         this.openFileFromDisk = new EventEmitter();
         this.addCustomElement = new EventEmitter();
         this.saveAs = new EventEmitter();
+        this.saveAsTemplate = new EventEmitter();
         this.downloadPdf = new EventEmitter();
         this.print = new EventEmitter();
         this.insertPageBreak = new EventEmitter();
@@ -18009,17 +18060,19 @@ class EditorToolbarComponent {
         this.updateTableBorders = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorToolbarComponent, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorToolbarComponent, isStandalone: false, selector: "app-nod-editor-toolbar", outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", downloadPdf: "downloadPdf", print: "print", insertPageBreak: "insertPageBreak", createDocument: "createDocument", pageSetup: "pageSetup", insertImage: "insertImage", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", redo: "redo", undo: "undo", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected", insertLink: "insertLink", createElement: "createElement", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertTable: "insertTable", updateTableBorderStyle: "updateTableBorderStyle", updateTableBorderWidth: "updateTableBorderWidth", updateTableBorders: "updateTableBorders" }, ngImport: i0, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\"\n    (updateTableBorders)=\"updateTableBorders.emit($event)\"\n    (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\"\n    (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", inputs: ["showFile", "showEdit", "showInsert", "showLayout", "showFormat"], outputs: ["openFileFromDisk", "saveAs", "downloadPdf", "insertPageBreak", "createDocument", "pageSetup", "rename", "delete", "openEditMenu", "cutSelected", "copySelected", "pasteClipboardData", "selectAll", "removeSelected"] }, { kind: "component", type: ToolbarActionsComponent, selector: "app-nod-toolbar-actions" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorToolbarComponent, isStandalone: false, selector: "app-nod-editor-toolbar", outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", saveAsTemplate: "saveAsTemplate", downloadPdf: "downloadPdf", print: "print", insertPageBreak: "insertPageBreak", createDocument: "createDocument", pageSetup: "pageSetup", insertImage: "insertImage", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", redo: "redo", undo: "undo", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected", insertLink: "insertLink", createElement: "createElement", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertTable: "insertTable", updateTableBorderStyle: "updateTableBorderStyle", updateTableBorderWidth: "updateTableBorderWidth", updateTableBorders: "updateTableBorders" }, ngImport: i0, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (saveAsTemplate)=\"saveAsTemplate.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\"\n    (updateTableBorders)=\"updateTableBorders.emit($event)\"\n    (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\"\n    (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", inputs: ["showFile", "showEdit", "showInsert", "showLayout", "showFormat"], outputs: ["openFileFromDisk", "saveAs", "saveAsTemplate", "downloadPdf", "insertPageBreak", "createDocument", "pageSetup", "rename", "delete", "openEditMenu", "cutSelected", "copySelected", "pasteClipboardData", "selectAll", "removeSelected"] }, { kind: "component", type: ToolbarActionsComponent, selector: "app-nod-toolbar-actions" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorToolbarComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-toolbar', standalone: false, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\"\n    (updateTableBorders)=\"updateTableBorders.emit($event)\"\n    (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\"\n    (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-toolbar', standalone: false, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (saveAsTemplate)=\"saveAsTemplate.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\"\n    (updateTableBorders)=\"updateTableBorders.emit($event)\"\n    (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\"\n    (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: EditorService }], propDecorators: { openFileFromDisk: [{
                 type: Output
             }], addCustomElement: [{
                 type: Output
             }], saveAs: [{
                 type: Output
+            }], saveAsTemplate: [{
+                type: Output
             }], downloadPdf: [{
                 type: Output
             }], print: [{