@talrace/ngx-noder 0.0.39 → 0.0.41

package/fesm2022/talrace-ngx-noder.mjs

@@ -1,21 +1,21 @@
 import * as i0 from '@angular/core';
 import { Directive, Injectable, inject, ChangeDetectorRef, HostBinding, Input, InjectionToken, createComponent, Component, ChangeDetectionStrategy, ViewChild, EventEmitter, Output, HostListener, signal, NgModule, Inject } from '@angular/core';
-import { Subject, BehaviorSubject, fromEvent, throttleTime, take, filter, startWith, takeUntil, catchError, debounceTime, distinctUntilChanged } from 'rxjs';
+import { Subject, BehaviorSubject, fromEvent, throttleTime, take, filter, startWith, takeUntil, distinctUntilChanged, tap, map, catchError, debounceTime } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { AsyncPipe, CommonModule } from '@angular/common';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayConfig } from '@angular/cdk/overlay';
-import * as i4 from '@ngx-translate/core';
+import * as i3$1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i5$1 from '@angular/cdk/clipboard';
 import * as i7 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i4$1 from '@angular/material/button';
+import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i1$2 from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
@@ -24,23 +24,28 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i2 from '@angular/forms';
 import { ReactiveFormsModule, FormControl, FormsModule, Validators } from '@angular/forms';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import * as i4$2 from '@angular/material/menu';
+import * as i4$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i6 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4$3 from '@angular/material/form-field';
+import * as i5$3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4$4 from '@angular/material/expansion';
+import * as i4$2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i2$1 from '@angular/platform-browser';
 import * as i2$2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i8 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i3$1 from '@angular/material/core';
-import * as i5$3 from 'ngx-colors';
+import * as i3$2 from '@angular/material/core';
+import * as i5$4 from 'ngx-colors';
 import { NgxColorsModule } from 'ngx-colors';
-import * as i3$2 from '@angular/material/button-toggle';
+import * as i3$3 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i10 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i12 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
 
 const DocumentInfo = {
     width: 794,
@@ -426,6 +431,14 @@ class OperationsHistoryInfoModel {
     }
 }
 
+class PageFormatModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class EditorService {
     constructor() {
         this._styles$ = new BehaviorSubject({});
@@ -482,6 +495,10 @@ class EditorService {
         this._applyDocumentPageFormat$ = new Subject();
         this._insertPageFormat$ = new Subject();
         this._applyPageFormat$ = new Subject();
+        this._pageFormat$ = new BehaviorSubject(new PageFormatModel());
+        this._leftMarginPageFormat$ = new Subject();
+        this._rightMarginPageFormat$ = new Subject();
+        this._tabParagraph$ = new Subject();
     }
     set styles(value) {
         this._styles$.next({ ...value });
@@ -674,22 +691,43 @@ class EditorService {
         return this._applyPageFormat$.asObservable();
     }
     get pageFormat() {
-        return this._pageFormat;
+        return this._pageFormat$.value;
+    }
+    get pageFormat$() {
+        return this._pageFormat$.asObservable();
+    }
+    get leftMarginPageFormat$() {
+        return this._leftMarginPageFormat$.asObservable();
+    }
+    get rightMarginPageFormat$() {
+        return this._rightMarginPageFormat$.asObservable();
+    }
+    get tabParagraph$() {
+        return this._tabParagraph$.asObservable();
+    }
+    applyTabParagraph(value) {
+        this._tabParagraph$.next(value);
+    }
+    applyRightMarginPageFormat(value) {
+        this._rightMarginPageFormat$.next(value);
+    }
+    applyLeftMarginPageFormat(value) {
+        this._leftMarginPageFormat$.next(value);
     }
     applyDocumentPageFormat(value) {
-        this._pageFormat = value;
+        this.setPageFormat(value);
         this._applyDocumentPageFormat$.next(value);
     }
     applyPageFormat(value) {
-        this._pageFormat = value;
+        this.setPageFormat(value);
         this._applyPageFormat$.next(value);
     }
     insertPageFormat(value) {
-        this._pageFormat = value;
+        this.setPageFormat(value);
         this._insertPageFormat$.next(value);
     }
     setPageFormat(value) {
-        this._pageFormat = value;
+        this._pageFormat$.next(value);
     }
     setLastPageNumber(value) {
         if (this.lastPageNumber === value) {
@@ -1032,14 +1070,6 @@ class AddNumberingModel {
     }
 }
 
-class PageFormatModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
 class ApplyDocumentPageFormatModel {
     constructor(fields) {
         if (fields) {
@@ -7302,7 +7332,7 @@ class Editor {
         this.session.applyToolbarStyles();
         this.search = new Search();
         this.search.set({ wrap: true });
-        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.replaceSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), this.searchOptionSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription());
+        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.replaceSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), this.searchOptionSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -8357,6 +8387,9 @@ class Editor {
             this.renderer.updateCursor();
         }
         this.editorService.setHasSelection(!this.selection.isEmpty);
+        const position = this.mainSession.displayData.positionToIndex(this.selection.selectedRange.start);
+        const pageFormat = this.mainSession.displayData.getPageFormatAtPosition(position);
+        this.editorService.setPageFormat(pageFormat.pageFormatModel);
         this.rerenderMarker();
     }
     enableSelection() {
@@ -8480,6 +8513,24 @@ class Editor {
         }
         return null;
     }
+    applyLeftMarginPageFormat(value) {
+        const position = this.selection.cursor;
+        const startIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, position.row, position.column);
+        const oldPageFormat = this.mainSession.displayData.getPageFormatAtPosition(startIndex).pageFormatModel;
+        const newPageFormat = new PageFormatModel({ ...oldPageFormat, marginLeft: value });
+        this.saveApplyPageFormatToHistory(oldPageFormat, newPageFormat);
+        OperationsHelper.updatePageFormat(this.model, newPageFormat);
+        this.recreateMainSession();
+    }
+    applyRightMarginPageFormat(value) {
+        const position = this.selection.cursor;
+        const startIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, position.row, position.column);
+        const oldPageFormat = this.mainSession.displayData.getPageFormatAtPosition(startIndex).pageFormatModel;
+        const newPageFormat = new PageFormatModel({ ...oldPageFormat, marginRight: value });
+        this.saveApplyPageFormatToHistory(oldPageFormat, newPageFormat);
+        OperationsHelper.updatePageFormat(this.model, newPageFormat);
+        this.recreateMainSession();
+    }
     applyPageFormat(model) {
         const position = this.selection.cursor;
         const startIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, position.row, position.column);
@@ -8520,6 +8571,12 @@ class Editor {
             this.selection?.clearSelection();
         });
     }
+    applyLeftMarginPageFormatSubscription() {
+        return this.editorService.leftMarginPageFormat$.subscribe(value => this.applyLeftMarginPageFormat(value));
+    }
+    applyRightMarginPageFormatSubscription() {
+        return this.editorService.rightMarginPageFormat$.subscribe(value => this.applyRightMarginPageFormat(value));
+    }
     applyPageFormatSubscription() {
         return this.editorService.applyPageFormat$.subscribe(pageFormat => this.applyPageFormat(pageFormat));
     }
@@ -9475,13 +9532,13 @@ class TableOverlayMenuComponent {
         this.editorService.removeTable(this.tableInsertIndex, this.sessionId);
         this.overlayService.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableOverlayMenuComponent, deps: [{ token: EditorService }, { token: OverlayService }, { token: i4.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableOverlayMenuComponent, deps: [{ token: EditorService }, { token: OverlayService }, { token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TableOverlayMenuComponent, isStandalone: false, selector: "app-nod-table-overlay-menu", inputs: { selectionRange: "selectionRange", targets: "targets", canRemoveRows: "canRemoveRows", canRemoveColumns: "canRemoveColumns", tableInsertIndex: "tableInsertIndex", sessionId: "sessionId" }, ngImport: i0, template: "<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsAbove()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsAboveMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsBelow()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsBelowMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsLeft()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsLeftMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsRight()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsRightMessage }}\n</div>\n<ng-container *ngIf=\"canRemoveRows || canRemoveColumns\">\n    <div class=\"menu-separator\">\n        <div class=\"menu-separator-top\"></div>\n        <div class=\"menu-separator-bottom\"></div>\n    </div>\n    <div\n        *ngIf=\"canRemoveRows\"\n        class=\"menu-item\"\n        (click)=\"onRemoveRows()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeRowsMessage }}\n    </div>\n    <div\n        *ngIf=\"canRemoveColumns\"\n        class=\"menu-item\"\n        (click)=\"onRemoveColumns()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeColumnsMessage }}\n    </div>\n    <div\n        class=\"menu-item\"\n        (click)=\"onRemoveTable()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeTableMessage }}\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;border:1px solid transparent;border-radius:4px;box-shadow:0 2px 6px 2px #3c404326;overflow-y:auto;background:#fff;cursor:default;font-size:13px;margin:0;padding:6px 0}.menu-item{display:flex;flex-direction:row;align-items:center;cursor:pointer;min-height:20px;color:#202124;font-size:16px;letter-spacing:.2px;line-height:20px;padding:6px}.menu-item:hover{background-color:#0000001a}.mat-icon{margin-right:6px;width:20px;height:20px;font-size:20px}.menu-separator{-webkit-user-select:none;user-select:none}.menu-separator .menu-separator-top{padding:4px}.menu-separator .menu-separator-bottom{border-top:1px solid #dadce0;padding:4px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableOverlayMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-nod-table-overlay-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsAbove()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsAboveMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsBelow()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsBelowMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsLeft()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsLeftMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsRight()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsRightMessage }}\n</div>\n<ng-container *ngIf=\"canRemoveRows || canRemoveColumns\">\n    <div class=\"menu-separator\">\n        <div class=\"menu-separator-top\"></div>\n        <div class=\"menu-separator-bottom\"></div>\n    </div>\n    <div\n        *ngIf=\"canRemoveRows\"\n        class=\"menu-item\"\n        (click)=\"onRemoveRows()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeRowsMessage }}\n    </div>\n    <div\n        *ngIf=\"canRemoveColumns\"\n        class=\"menu-item\"\n        (click)=\"onRemoveColumns()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeColumnsMessage }}\n    </div>\n    <div\n        class=\"menu-item\"\n        (click)=\"onRemoveTable()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeTableMessage }}\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;border:1px solid transparent;border-radius:4px;box-shadow:0 2px 6px 2px #3c404326;overflow-y:auto;background:#fff;cursor:default;font-size:13px;margin:0;padding:6px 0}.menu-item{display:flex;flex-direction:row;align-items:center;cursor:pointer;min-height:20px;color:#202124;font-size:16px;letter-spacing:.2px;line-height:20px;padding:6px}.menu-item:hover{background-color:#0000001a}.mat-icon{margin-right:6px;width:20px;height:20px;font-size:20px}.menu-separator{-webkit-user-select:none;user-select:none}.menu-separator .menu-separator-top{padding:4px}.menu-separator .menu-separator-bottom{border-top:1px solid #dadce0;padding:4px}\n"] }]
-        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }, { type: i4.TranslateService }], propDecorators: { selectionRange: [{
+        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }, { type: i3$1.TranslateService }], propDecorators: { selectionRange: [{
                 type: Input
             }], targets: [{
                 type: Input
@@ -11718,13 +11775,13 @@ class NoderEdgeComponent extends DestroyComponent {
         const height = this.contentHeight > maxHeight ? maxHeight : this.contentHeight;
         DomHelper.setStyle(this.typeContainer.nativeElement.style, this.typeContainerPosition, `${height}px`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderEdgeComponent, deps: [{ token: RegulatorService }, { token: EditorService }, { token: i4.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderEdgeComponent, deps: [{ token: RegulatorService }, { token: EditorService }, { token: i3$1.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderEdgeComponent, isStandalone: false, selector: "app-nod-edge", inputs: { model: "model", generalProperties: "generalProperties", margins: "margins", width: "width", parentSessionId: "parentSessionId", isEvenEdgesExist: "isEvenEdgesExist", type: "type" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "typeContainer", first: true, predicate: ["locationType"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    #container\n    class=\"edit-container\"></div>\n<div\n    #locationType\n    class=\"location-type\">\n    <span>{{ edgeNameByType }}</span>\n</div>\n", styles: [":host{height:100%;width:100%;background:transparent;display:block}.location-type{position:absolute;height:auto;width:auto;font-size:9pt;color:#333;background-color:#f2f2f2;border:1px solid #838282;border-radius:2px;padding:4px;margin-left:5px;z-index:2}.header-edit-mode{border-bottom:1px dashed #838282}.footer-edit-mode{border-top:1px dashed #838282}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderEdgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-nod-edge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n    #container\n    class=\"edit-container\"></div>\n<div\n    #locationType\n    class=\"location-type\">\n    <span>{{ edgeNameByType }}</span>\n</div>\n", styles: [":host{height:100%;width:100%;background:transparent;display:block}.location-type{position:absolute;height:auto;width:auto;font-size:9pt;color:#333;background-color:#f2f2f2;border:1px solid #838282;border-radius:2px;padding:4px;margin-left:5px;z-index:2}.header-edit-mode{border-bottom:1px dashed #838282}.footer-edit-mode{border-top:1px dashed #838282}\n"] }]
-        }], ctorParameters: () => [{ type: RegulatorService }, { type: EditorService }, { type: i4.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { model: [{
+        }], ctorParameters: () => [{ type: RegulatorService }, { type: EditorService }, { type: i3$1.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { model: [{
                 type: Input
             }], generalProperties: [{
                 type: Input
@@ -14198,14 +14255,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class EditorRulerComponent {
     constructor() {
+        this.editorService = inject(EditorService);
         this.pxPerCm = 37.8; // 96dpi / 2.54
         this.snapCm = 0.25;
-        this.defaultPadding = 2.5;
-        this.offsetPosition = 5;
+        this.defaultPaddingCm = 2.5;
+        this.pageWidth$ = this.editorService.pageFormat$.pipe(distinctUntilChanged(), tap(x => {
+            this.recalcGeometry(x.pageWidth);
+            this.buildTicks();
+            this.rightPx.set(x.pageWidth - x.marginRight);
+            this.leftPx.set(x.marginLeft);
+        }), map(x => x.pageWidth));
         this.containerWidthPx = 0;
         this.ticks = [];
-        this.leftPx = signal(this.defaultPadding * this.pxPerCm);
-        this.firstLinePx = signal(this.defaultPadding * this.pxPerCm);
+        this.leftPx = signal(this.defaultPaddingCm * this.pxPerCm);
+        this.firstLinePx = signal(this.defaultPaddingCm * this.pxPerCm);
         this.rightPx = signal(0);
         this.guideX = signal(0);
         this.showGuide = signal(false);
@@ -14219,7 +14282,7 @@ class EditorRulerComponent {
             const pointX = this.getClientX(ev);
             const rect = this.rulerContainer.nativeElement.getBoundingClientRect();
             let x = pointX - rect.left - this.dragOffsetX;
-            if (x < -1 || x > this.maxRulePosition) {
+            if (x < -1 || x > this.containerWidthPx) {
                 return;
             }
             x = this.snapPx(x);
@@ -14235,6 +14298,15 @@ class EditorRulerComponent {
             this.guideX.set(x);
         };
         this.onUp = () => {
+            if (this.dragging === 'left') {
+                this.editorService.applyLeftMarginPageFormat(Math.round(this.leftPx()));
+            }
+            else if (this.dragging === 'first') {
+                this.editorService.applyTabParagraph(Math.round(this.firstLinePx()));
+            }
+            else {
+                this.editorService.applyRightMarginPageFormat(Math.round(this.containerWidthPx - this.rightPx()));
+            }
             this.dragging = null;
             this.showGuide.set(false);
             window.removeEventListener('mousemove', this.onMove);
@@ -14243,7 +14315,7 @@ class EditorRulerComponent {
             window.removeEventListener('touchend', this.onUp);
         };
     }
-    ngAfterViewInit() {
+    afterViewInit() {
         this.recalcGeometry();
         this.buildTicks();
         this.rightPx.set(this.containerWidthPx - this.cmToPx(2.5));
@@ -14252,9 +14324,8 @@ class EditorRulerComponent {
         this.recalcGeometry();
         this.buildTicks();
     }
-    recalcGeometry() {
-        const rect = this.rulerContainer.nativeElement.getBoundingClientRect();
-        this.containerWidthPx = rect.width - 10; // because padding 5px
+    recalcGeometry(width = null) {
+        this.containerWidthPx = width ?? this.rulerContainer.nativeElement.getBoundingClientRect().width;
     }
     cmToPx(cm) {
         return cm * this.pxPerCm;
@@ -14269,35 +14340,37 @@ class EditorRulerComponent {
     }
     buildTicks() {
         const totalCm = Math.ceil(this.pxToCm(this.containerWidthPx));
-        this.maxRulePosition = (totalCm - 1) * this.pxPerCm;
         const ticks = [
             {
-                position: this.cmToPx(0) + this.offsetPosition,
+                position: this.cmToPx(0),
                 major: false,
                 half: true,
                 label: null,
                 originalPaddings: -2.5
             },
             {
-                position: this.cmToPx(0.25) + this.offsetPosition,
+                position: this.cmToPx(0.25),
                 major: false,
                 half: false,
                 label: null,
                 originalPaddings: -2.25
             }
         ];
-        for (let cm = 1; cm < totalCm; cm++) {
-            const position = this.cmToPx(cm) + this.offsetPosition - this.pxPerCm / 2;
+        for (let cm = 1; cm <= totalCm; cm++) {
+            const position = this.cmToPx(cm) - this.pxPerCm / 2;
             ticks.push({ position, major: true, half: false, label: Math.abs(cm - 3), originalPaddings: cm - 3 }); // -3 because we start the line with 2.5
-            if (cm < totalCm) {
+            if (cm <= totalCm) {
                 for (let i = 1; i < 4; i++) {
-                    ticks.push({
-                        position: this.cmToPx(cm + i * 0.25) + this.offsetPosition - this.pxPerCm / 2,
-                        major: false,
-                        half: i === 2,
-                        label: null,
-                        originalPaddings: cm - 3 + i * 0.25
-                    });
+                    const tickPosition = position + this.cmToPx(i * 0.25);
+                    if (tickPosition < this.containerWidthPx) {
+                        ticks.push({
+                            position: tickPosition,
+                            major: false,
+                            half: i === 2,
+                            label: null,
+                            originalPaddings: cm - 3 + i * 0.25
+                        });
+                    }
                 }
             }
         }
@@ -14341,11 +14414,11 @@ class EditorRulerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorRulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorRulerComponent, isStandalone: true, selector: "app-nod-editor-ruler", host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "rulerContainer", first: true, predicate: ["rulerContainer"], descendants: true, static: true }], ngImport: i0, template: "<div\n    class=\"ruler-container\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"defaultPadding * pxPerCm + offsetPosition\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"defaultPadding * pxPerCm + offsetPosition\"></div>\n    <div class=\"ruler-track\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftPx()\"\n        (mousedown)=\"startDrag($event, 'left')\"\n        (touchstart)=\"startDrag($event, 'left')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightPx()\"\n        (mousedown)=\"startDrag($event, 'right')\"\n        (touchstart)=\"startDrag($event, 'right')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX() + offsetPosition\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;width:804px;padding:0 5px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:ew-resize;z-index:2;transform:translate(-25%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px}.page-marker{bottom:-6px}.left-area,.right-area{position:absolute;height:18px}.left-area{left:0}.right-area{right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorRulerComponent, isStandalone: true, selector: "app-nod-editor-ruler", host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "rulerContainer", first: true, predicate: ["rulerContainer"], descendants: true, static: true }], ngImport: i0, template: "<div\n    class=\"ruler-container\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"defaultPaddingCm * pxPerCm\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"defaultPaddingCm * pxPerCm\"></div>\n    <div class=\"ruler-track\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftPx()\"\n        (mousedown)=\"startDrag($event, 'left')\"\n        (touchstart)=\"startDrag($event, 'left')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightPx()\"\n        (mousedown)=\"startDrag($event, 'right')\"\n        (touchstart)=\"startDrag($event, 'right')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:ew-resize;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px}.page-marker{bottom:-6px}.left-area,.right-area{position:absolute;height:18px}.left-area{left:0}.right-area{right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorRulerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-ruler', imports: [MatIconModule], template: "<div\n    class=\"ruler-container\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"defaultPadding * pxPerCm + offsetPosition\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"defaultPadding * pxPerCm + offsetPosition\"></div>\n    <div class=\"ruler-track\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftPx()\"\n        (mousedown)=\"startDrag($event, 'left')\"\n        (touchstart)=\"startDrag($event, 'left')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightPx()\"\n        (mousedown)=\"startDrag($event, 'right')\"\n        (touchstart)=\"startDrag($event, 'right')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX() + offsetPosition\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;width:804px;padding:0 5px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:ew-resize;z-index:2;transform:translate(-25%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px}.page-marker{bottom:-6px}.left-area,.right-area{position:absolute;height:18px}.left-area{left:0}.right-area{right:0}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-ruler', imports: [MatIconModule, AsyncPipe], template: "<div\n    class=\"ruler-container\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"defaultPaddingCm * pxPerCm\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"defaultPaddingCm * pxPerCm\"></div>\n    <div class=\"ruler-track\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftPx()\"\n        (mousedown)=\"startDrag($event, 'left')\"\n        (touchstart)=\"startDrag($event, 'left')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightPx()\"\n        (mousedown)=\"startDrag($event, 'right')\"\n        (touchstart)=\"startDrag($event, 'right')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:ew-resize;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px}.page-marker{bottom:-6px}.left-area,.right-area{position:absolute;height:18px}.left-area{left:0}.right-area{right:0}\n"] }]
         }], propDecorators: { rulerContainer: [{
                 type: ViewChild,
                 args: ['rulerContainer', { static: true }]
@@ -14616,13 +14689,13 @@ class EditorTitleComponent {
         sel.addRange(range);
         element.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorTitleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i4.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorTitleComponent, isStandalone: true, selector: "app-nod-editor-title", inputs: { selectedMode: "selectedMode", showTitle: "showTitle", title: "title", defaultFileName: "defaultFileName", rename$: "rename$" }, outputs: { changeMode: "changeMode", renameDocumentTitle: "renameDocumentTitle" }, viewQueries: [{ propertyName: "titleSpan", first: true, predicate: ["titleSpan"], descendants: true, static: true }], ngImport: i0, template: "<div\n    *ngIf=\"showTitle\"\n    class=\"menu-header\">\n    <div class=\"file-name\">\n        <span\n            #titleSpan\n            class=\"title\"\n            [matTooltip]=\"'NODER.LABEL.DOUBLE_CLICK_TO_RENAME' | translate\"\n            (blur)=\"onRenameTitle($event)\"\n            (keydown.enter)=\"$event.target.blur()\"\n            (dblclick)=\"onFocus($event)\">\n            {{ title }}\n        </span>\n    </div>\n</div>\n<div class=\"editor-mode\">\n    <button\n        *ngFor=\"let mode of modeOptions\"\n        mat-icon-button\n        [class.selected-mode]=\"selectedMode === mode.id\"\n        [matTooltip]=\"mode.text\"\n        (click)=\"selectedMode = mode.id; changeMode.emit(mode.id)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ mode.icon }}\" />\n    </button>\n</div>\n", styles: [":host{display:flex;position:relative;align-items:center;width:100%}.menu-header{width:35%;line-height:0;z-index:1}.file-name{display:block;margin:0 8px;overflow:hidden}.title{font-size:18px;font-weight:400;line-height:normal;outline:none;display:inline-block;white-space:nowrap;min-width:1px;overflow:hidden;max-width:100%;-webkit-user-select:none;user-select:none}.title:not(:focus){text-overflow:ellipsis}.editor-mode{display:flex;position:absolute;justify-content:center;width:100%}.mdc-icon-button{min-width:40px;min-height:40px;width:40px;height:40px;padding:8px}.mdc-icon-button:not(:first-child){margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorTitleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorTitleComponent, isStandalone: true, selector: "app-nod-editor-title", inputs: { selectedMode: "selectedMode", showTitle: "showTitle", title: "title", defaultFileName: "defaultFileName", rename$: "rename$" }, outputs: { changeMode: "changeMode", renameDocumentTitle: "renameDocumentTitle" }, viewQueries: [{ propertyName: "titleSpan", first: true, predicate: ["titleSpan"], descendants: true, static: true }], ngImport: i0, template: "<div\n    *ngIf=\"showTitle\"\n    class=\"menu-header\">\n    <div class=\"file-name\">\n        <span\n            #titleSpan\n            class=\"title\"\n            [matTooltip]=\"'NODER.LABEL.DOUBLE_CLICK_TO_RENAME' | translate\"\n            (blur)=\"onRenameTitle($event)\"\n            (keydown.enter)=\"$event.target.blur()\"\n            (dblclick)=\"onFocus($event)\">\n            {{ title }}\n        </span>\n    </div>\n</div>\n<div class=\"editor-mode\">\n    <button\n        *ngFor=\"let mode of modeOptions\"\n        mat-icon-button\n        [class.selected-mode]=\"selectedMode === mode.id\"\n        [matTooltip]=\"mode.text\"\n        (click)=\"selectedMode = mode.id; changeMode.emit(mode.id)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ mode.icon }}\" />\n    </button>\n</div>\n", styles: [":host{display:flex;position:relative;align-items:center;width:100%}.menu-header{width:35%;line-height:0;z-index:1}.file-name{display:block;margin:0 8px;overflow:hidden}.title{font-size:18px;font-weight:400;line-height:normal;outline:none;display:inline-block;white-space:nowrap;min-width:1px;overflow:hidden;max-width:100%;-webkit-user-select:none;user-select:none}.title:not(:focus){text-overflow:ellipsis}.editor-mode{display:flex;position:absolute;justify-content:center;width:100%}.mdc-icon-button{min-width:40px;min-height:40px;width:40px;height:40px;padding:8px}.mdc-icon-button:not(:first-child){margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorTitleComponent, decorators: [{
             type: Component,
             args: [{ imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule, TranslateModule], selector: 'app-nod-editor-title', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    *ngIf=\"showTitle\"\n    class=\"menu-header\">\n    <div class=\"file-name\">\n        <span\n            #titleSpan\n            class=\"title\"\n            [matTooltip]=\"'NODER.LABEL.DOUBLE_CLICK_TO_RENAME' | translate\"\n            (blur)=\"onRenameTitle($event)\"\n            (keydown.enter)=\"$event.target.blur()\"\n            (dblclick)=\"onFocus($event)\">\n            {{ title }}\n        </span>\n    </div>\n</div>\n<div class=\"editor-mode\">\n    <button\n        *ngFor=\"let mode of modeOptions\"\n        mat-icon-button\n        [class.selected-mode]=\"selectedMode === mode.id\"\n        [matTooltip]=\"mode.text\"\n        (click)=\"selectedMode = mode.id; changeMode.emit(mode.id)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ mode.icon }}\" />\n    </button>\n</div>\n", styles: [":host{display:flex;position:relative;align-items:center;width:100%}.menu-header{width:35%;line-height:0;z-index:1}.file-name{display:block;margin:0 8px;overflow:hidden}.title{font-size:18px;font-weight:400;line-height:normal;outline:none;display:inline-block;white-space:nowrap;min-width:1px;overflow:hidden;max-width:100%;-webkit-user-select:none;user-select:none}.title:not(:focus){text-overflow:ellipsis}.editor-mode{display:flex;position:absolute;justify-content:center;width:100%}.mdc-icon-button{min-width:40px;min-height:40px;width:40px;height:40px;padding:8px}.mdc-icon-button:not(:first-child){margin-left:10px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i4.TranslateService }], propDecorators: { selectedMode: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i3$1.TranslateService }], propDecorators: { selectedMode: [{
                 type: Input
             }], showTitle: [{
                 type: Input
@@ -14643,7 +14716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class EditorTitleMobileComponent extends EditorTitleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorTitleMobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorTitleMobileComponent, isStandalone: true, selector: "app-nod-editor-title-mobile", usesInheritance: true, ngImport: i0, template: "<div\n    *ngIf=\"showTitle\"\n    class=\"menu-header\">\n    <div class=\"file-name\">\n        <span\n            #titleSpan\n            class=\"title\"\n            [matTooltip]=\"'NODER.LABEL.DOUBLE_CLICK_TO_RENAME' | translate\"\n            (blur)=\"onRenameTitle($event)\"\n            (keydown.enter)=\"$event.target.blur()\"\n            (click)=\"onFocus($event)\">\n            {{ title }}\n        </span>\n    </div>\n</div>\n<div class=\"editor-mode\">\n    <div class=\"circles\">\n        <div class=\"circle\"></div>\n        <div class=\"circle\"></div>\n        <div class=\"circle\"></div>\n    </div>\n    <button\n        mat-icon-button\n        [matMenuTriggerFor]=\"modeMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ modeOptions[selectedMode].icon }}\" />\n    </button>\n    <mat-menu\n        #modeMenu=\"matMenu\"\n        class=\"noder-editor-title-mobile-menu\"\n        yPosition=\"above\">\n        <ng-container *ngFor=\"let mode of modeOptions\">\n            <button\n                *ngIf=\"selectedMode !== mode.id\"\n                mat-icon-button\n                (click)=\"selectedMode = mode.id; changeMode.emit(mode.id)\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"{{ mode.icon }}\" />\n            </button>\n        </ng-container>\n    </mat-menu>\n</div>\n", styles: [":host{display:flex;position:relative;align-items:center;width:100%}.menu-header{width:calc(100% - 48px);line-height:0;z-index:1}.file-name{display:block;margin:0 8px;overflow:hidden}.title{font-size:18px;font-weight:400;line-height:normal;outline:none;display:inline-block;white-space:nowrap;min-width:1px;overflow:hidden;max-width:100%;-webkit-user-select:none;user-select:none}.title:not(:focus){text-overflow:ellipsis}.editor-mode{display:flex;flex-direction:column;position:relative}.circles{display:flex;flex-direction:row;justify-content:center;width:100%;position:absolute;top:-8px}.circle{width:4px;height:4px;border-radius:50%}.circle:not(:last-child){margin-right:5px}.mdc-icon-button{min-width:40px;min-height:40px;width:40px;height:40px;padding:8px}::ng-deep .noder-editor-title-mobile-menu{min-width:auto!important;min-height:auto!important;overflow:hidden!important}::ng-deep .noder-editor-title-mobile-menu .mat-mdc-menu-content{display:flex;flex-direction:column-reverse}::ng-deep .noder-editor-title-mobile-menu .mdc-icon-button{margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorTitleMobileComponent, isStandalone: true, selector: "app-nod-editor-title-mobile", usesInheritance: true, ngImport: i0, template: "<div\n    *ngIf=\"showTitle\"\n    class=\"menu-header\">\n    <div class=\"file-name\">\n        <span\n            #titleSpan\n            class=\"title\"\n            [matTooltip]=\"'NODER.LABEL.DOUBLE_CLICK_TO_RENAME' | translate\"\n            (blur)=\"onRenameTitle($event)\"\n            (keydown.enter)=\"$event.target.blur()\"\n            (click)=\"onFocus($event)\">\n            {{ title }}\n        </span>\n    </div>\n</div>\n<div class=\"editor-mode\">\n    <div class=\"circles\">\n        <div class=\"circle\"></div>\n        <div class=\"circle\"></div>\n        <div class=\"circle\"></div>\n    </div>\n    <button\n        mat-icon-button\n        [matMenuTriggerFor]=\"modeMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ modeOptions[selectedMode].icon }}\" />\n    </button>\n    <mat-menu\n        #modeMenu=\"matMenu\"\n        class=\"noder-editor-title-mobile-menu\"\n        yPosition=\"above\">\n        <ng-container *ngFor=\"let mode of modeOptions\">\n            <button\n                *ngIf=\"selectedMode !== mode.id\"\n                mat-icon-button\n                (click)=\"selectedMode = mode.id; changeMode.emit(mode.id)\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"{{ mode.icon }}\" />\n            </button>\n        </ng-container>\n    </mat-menu>\n</div>\n", styles: [":host{display:flex;position:relative;align-items:center;width:100%}.menu-header{width:calc(100% - 48px);line-height:0;z-index:1}.file-name{display:block;margin:0 8px;overflow:hidden}.title{font-size:18px;font-weight:400;line-height:normal;outline:none;display:inline-block;white-space:nowrap;min-width:1px;overflow:hidden;max-width:100%;-webkit-user-select:none;user-select:none}.title:not(:focus){text-overflow:ellipsis}.editor-mode{display:flex;flex-direction:column;position:relative}.circles{display:flex;flex-direction:row;justify-content:center;width:100%;position:absolute;top:-8px}.circle{width:4px;height:4px;border-radius:50%}.circle:not(:last-child){margin-right:5px}.mdc-icon-button{min-width:40px;min-height:40px;width:40px;height:40px;padding:8px}::ng-deep .noder-editor-title-mobile-menu{min-width:auto!important;min-height:auto!important;overflow:hidden!important}::ng-deep .noder-editor-title-mobile-menu .mat-mdc-menu-content{display:flex;flex-direction:column-reverse}::ng-deep .noder-editor-title-mobile-menu .mdc-icon-button{margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { 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: "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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorTitleMobileComponent, decorators: [{
             type: Component,
@@ -14688,7 +14761,7 @@ class EditorSearchDialogComponent extends DestroyComponent {
         this.editorService.replace = { replaceValue: this.replaceControl.value, searchValue: this.searchControl.value };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorSearchDialogComponent, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorSearchDialogComponent, isStandalone: true, selector: "app-nod-editor-search-dialog", providers: [ExternalElementService], usesInheritance: true, ngImport: i0, template: "<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.SEARCH_FOR' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findPrev()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-onleft\"></mat-icon>\n    </button>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findNext()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-onright\"></mat-icon>\n    </button>\n</div>\n<ng-container *ngIf=\"{ searchIteration: searchIteration$ | async } as data\">\n    <div\n        class=\"replace-form\"\n        *ngIf=\"isReplace\">\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.REPLACE_WITH' | translate }}</mat-label>\n            <input\n                matInput\n                [formControl]=\"replaceControl\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                (keydown.enter)=\"replace()\" />\n        </mat-form-field>\n        <button\n            type=\"button\"\n            mat-button\n            (click)=\"replace()\">\n            {{ 'NODER.LABEL.REPLACE' | translate }}\n        </button>\n    </div>\n    <div class=\"search-options\">\n        <button\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Toggle Replace Mode\"\n            (click)=\"setReplace()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n        </button>\n        <div class=\"counter\">\n            <span>\n                {{\n                    'NODER.COMPLEX_LABEL.OF_COUNTER'\n                        | translate: { current: data.searchIteration?.current ?? 0, total: data.searchIteration?.total ?? 0 }\n                }}\n            </span>\n        </div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            [matTooltip]=\"'NODER.LABEL.CLOSE' | translate\"\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-cancel-thin\"></mat-icon>\n        </button>\n    </div>\n</ng-container>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;padding:3px}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{display:flex}mat-form-field{padding-left:10px}.mdc-button{font-size:12px;padding:0 8px;min-width:unset}.search-options{line-height:40px}.search-options .counter{text-align:center;flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorSearchDialogComponent, isStandalone: true, selector: "app-nod-editor-search-dialog", providers: [ExternalElementService], usesInheritance: true, ngImport: i0, template: "<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.SEARCH_FOR' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findPrev()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-onleft\"></mat-icon>\n    </button>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findNext()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-onright\"></mat-icon>\n    </button>\n</div>\n<ng-container *ngIf=\"{ searchIteration: searchIteration$ | async } as data\">\n    <div\n        class=\"replace-form\"\n        *ngIf=\"isReplace\">\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.REPLACE_WITH' | translate }}</mat-label>\n            <input\n                matInput\n                [formControl]=\"replaceControl\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                (keydown.enter)=\"replace()\" />\n        </mat-form-field>\n        <button\n            type=\"button\"\n            mat-button\n            (click)=\"replace()\">\n            {{ 'NODER.LABEL.REPLACE' | translate }}\n        </button>\n    </div>\n    <div class=\"search-options\">\n        <button\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Toggle Replace Mode\"\n            (click)=\"setReplace()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n        </button>\n        <div class=\"counter\">\n            <span>\n                {{\n                    'NODER.COMPLEX_LABEL.OF_COUNTER'\n                        | translate: { current: data.searchIteration?.current ?? 0, total: data.searchIteration?.total ?? 0 }\n                }}\n            </span>\n        </div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            [matTooltip]=\"'NODER.LABEL.CLOSE' | translate\"\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-cancel-thin\"></mat-icon>\n        </button>\n    </div>\n</ng-container>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;padding:3px}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{display:flex}mat-form-field{padding-left:10px}.mdc-button{font-size:12px;padding:0 8px;min-width:unset}.search-options{line-height:40px}.search-options .counter{text-align:center;flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorSearchDialogComponent, decorators: [{
             type: Component,
@@ -14777,7 +14850,7 @@ class MenuDropdownsMobileComponent {
         this.elements = this.injector.get(EXTERNAL_ELEMENT_SERVICE).elements;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MenuDropdownsMobileComponent, deps: [{ token: i0.Injector }, { token: EditorService }, { token: ToolbarCoreService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: MenuDropdownsMobileComponent, isStandalone: false, selector: "app-nod-menu-dropdowns-mobile", ngImport: i0, template: "<ng-container\n    *ngIf=\"{\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <mat-accordion>\n        <mat-expansion-panel hideToggle>\n            <mat-expansion-panel-header>\n                <mat-panel-title>{{ 'NODER.LABEL.FILE' | translate }}</mat-panel-title>\n                <mat-panel-description>\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-arrow-dropdown\" />\n                </mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-panel-content\">\n                <button\n                    *ngIf=\"!data.isViewOnly\"\n                    id=\"menu-dropdowns-mobile-item-new\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.new(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-add-new\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.NEW' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    *ngIf=\"!data.isViewOnly\"\n                    id=\"menu-dropdowns-mobile-item-open-from\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.openFrom(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-open-from\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.OPEN_FROM' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-save-as\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.saveAs(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-save\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-rename\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.rename(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-rename\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.RENAME' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    class=\"hidden\"\n                    id=\"menu-dropdowns-mobile-item-print\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.print(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-print\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.PRINT' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-delete\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.delete(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-delete\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n                    </div>\n                </button>\n            </div>\n        </mat-expansion-panel>\n        <ng-container *ngIf=\"!data.isViewOnly\">\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>{{ 'NODER.LABEL.INSERT' | translate }}</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <button\n                        id=\"menu-dropdowns-mobile-item-image\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertImage(); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-image\" />\n                            <span class=\"menu-item-text\">{{ 'NODER.LABEL.IMAGE' | translate }}</span>\n                        </div>\n                    </button>\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-table\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.insertTable()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-table\" />\n                            {{ 'NODER.LABEL.TABLE' | translate }}\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-link\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.insertLink()\">\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-link-on\" />\n                                <span class=\"menu-item-text\">{{ 'NODER.LABEL.LINK' | translate }}</span>\n                            </div>\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                    <button\n                        *ngFor=\"let element of elements\"\n                        id=\"menu-dropdowns-mobile-item-{{ element.nameId }}\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertCustomElement(element); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"{{ element.icon }}\" />\n                            <span class=\"menu-item-text\">{{ element.nameTranslate | translate }}</span>\n                        </div>\n                    </button>\n                    <div class=\"composition-button hidden\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-headers-footers\"\n                            mat-menu-item>\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-headers-footers\" />\n                                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n                            </div>\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                </div>\n            </mat-expansion-panel>\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>{{ 'NODER.LABEL.LAYOUT' | translate }}</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <button\n                        id=\"menu-dropdowns-mobile-item-page-break\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertPageBreak(); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-page-break\" />\n                            <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_BREAK' | translate }}</span>\n                        </div>\n                    </button>\n                </div>\n            </mat-expansion-panel>\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>{{ 'NODER.LABEL.FORMAT' | translate }}</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-text-format\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.textFormat()\">\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-text\" />\n                                <span class=\"menu-item-text\">{{ 'NODER.LABEL.TEXT_FORMAT' | translate }}</span>\n                            </div>\n                            <mat-icon\n                                class=\"composition-icon\"\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-arrow-dropdown\" />\n                        </button>\n                    </div>\n                    <div class=\"composition-button hidden\">\n                        <button\n                            id=\"menu-dropdowns-mobile-header-footer\"\n                            mat-menu-item>\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-headers-footers\" />\n                                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n                            </div>\n                            <mat-icon\n                                class=\"composition-icon\"\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-arrow-dropdown\" />\n                        </button>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </ng-container>\n    </mat-accordion>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;padding:25px}mat-expansion-panel.mat-expansion-panel ::ng-deep{box-shadow:none;border-bottom-width:1px;border-bottom-style:solid}mat-expansion-panel.mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0 18px}mat-panel-description{margin:0;justify-content:flex-end}.mat-expansion-panel-spacing{margin:0}.mat-expansion-panel-header,.mat-expansion-panel-header.mat-expanded{height:48px;padding-right:10px}.mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-description .mat-icon{transform:rotate(180deg)}.heading-menu{display:inline-flex;width:100%}.menu-item-text{white-space:nowrap;align-self:center}.composition-button{display:flex;flex-direction:row;align-items:center;position:relative}.composition-icon{position:absolute;right:0;transform:rotate(270deg)}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i4$4.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: MenuDropdownsMobileComponent, isStandalone: false, selector: "app-nod-menu-dropdowns-mobile", ngImport: i0, template: "<ng-container\n    *ngIf=\"{\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <mat-accordion>\n        <mat-expansion-panel hideToggle>\n            <mat-expansion-panel-header>\n                <mat-panel-title>{{ 'NODER.LABEL.FILE' | translate }}</mat-panel-title>\n                <mat-panel-description>\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-arrow-dropdown\" />\n                </mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-panel-content\">\n                <button\n                    *ngIf=\"!data.isViewOnly\"\n                    id=\"menu-dropdowns-mobile-item-new\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.new(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-add-new\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.NEW' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    *ngIf=\"!data.isViewOnly\"\n                    id=\"menu-dropdowns-mobile-item-open-from\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.openFrom(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-open-from\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.OPEN_FROM' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-save-as\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.saveAs(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-save\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-rename\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.rename(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-rename\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.RENAME' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    class=\"hidden\"\n                    id=\"menu-dropdowns-mobile-item-print\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.print(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-print\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.PRINT' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-delete\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.delete(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-delete\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n                    </div>\n                </button>\n            </div>\n        </mat-expansion-panel>\n        <ng-container *ngIf=\"!data.isViewOnly\">\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>{{ 'NODER.LABEL.INSERT' | translate }}</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <button\n                        id=\"menu-dropdowns-mobile-item-image\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertImage(); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-image\" />\n                            <span class=\"menu-item-text\">{{ 'NODER.LABEL.IMAGE' | translate }}</span>\n                        </div>\n                    </button>\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-table\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.insertTable()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-table\" />\n                            {{ 'NODER.LABEL.TABLE' | translate }}\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-link\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.insertLink()\">\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-link-on\" />\n                                <span class=\"menu-item-text\">{{ 'NODER.LABEL.LINK' | translate }}</span>\n                            </div>\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                    <button\n                        *ngFor=\"let element of elements\"\n                        id=\"menu-dropdowns-mobile-item-{{ element.nameId }}\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertCustomElement(element); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"{{ element.icon }}\" />\n                            <span class=\"menu-item-text\">{{ element.nameTranslate | translate }}</span>\n                        </div>\n                    </button>\n                    <div class=\"composition-button hidden\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-headers-footers\"\n                            mat-menu-item>\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-headers-footers\" />\n                                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n                            </div>\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                </div>\n            </mat-expansion-panel>\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>{{ 'NODER.LABEL.LAYOUT' | translate }}</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <button\n                        id=\"menu-dropdowns-mobile-item-page-break\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertPageBreak(); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-page-break\" />\n                            <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_BREAK' | translate }}</span>\n                        </div>\n                    </button>\n                </div>\n            </mat-expansion-panel>\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>{{ 'NODER.LABEL.FORMAT' | translate }}</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-text-format\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.textFormat()\">\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-text\" />\n                                <span class=\"menu-item-text\">{{ 'NODER.LABEL.TEXT_FORMAT' | translate }}</span>\n                            </div>\n                            <mat-icon\n                                class=\"composition-icon\"\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-arrow-dropdown\" />\n                        </button>\n                    </div>\n                    <div class=\"composition-button hidden\">\n                        <button\n                            id=\"menu-dropdowns-mobile-header-footer\"\n                            mat-menu-item>\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-headers-footers\" />\n                                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n                            </div>\n                            <mat-icon\n                                class=\"composition-icon\"\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-arrow-dropdown\" />\n                        </button>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </ng-container>\n    </mat-accordion>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;padding:25px}mat-expansion-panel.mat-expansion-panel ::ng-deep{box-shadow:none;border-bottom-width:1px;border-bottom-style:solid}mat-expansion-panel.mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0 18px}mat-panel-description{margin:0;justify-content:flex-end}.mat-expansion-panel-spacing{margin:0}.mat-expansion-panel-header,.mat-expansion-panel-header.mat-expanded{height:48px;padding-right:10px}.mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-description .mat-icon{transform:rotate(180deg)}.heading-menu{display:inline-flex;width:100%}.menu-item-text{white-space:nowrap;align-self:center}.composition-button{display:flex;flex-direction:row;align-items:center;position:relative}.composition-icon{position:absolute;right:0;transform:rotate(270deg)}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i4$2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MenuDropdownsMobileComponent, decorators: [{
             type: Component,
@@ -15226,7 +15299,7 @@ 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4$1.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$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MenuDropdownsComponent, decorators: [{
             type: Component,
@@ -15299,7 +15372,7 @@ class FontComponent {
         this.selectFont.emit(font);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FontComponent, isStandalone: true, selector: "app-nod-font", inputs: { isDisabled: "isDisabled", styles: "styles" }, outputs: { selectFont: "selectFont" }, ngImport: i0, template: "<button\n    mat-button\n    [matMenuTriggerFor]=\"fontMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matTooltip]=\"'NODER.TOOLTIP.FONT' | translate\"\n    matTooltipPosition=\"below\">\n    <div class=\"font-menu\">\n        <span>{{ font }}</span>\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </div>\n</button>\n<mat-menu\n    #fontMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <ng-container *ngFor=\"let font of fonts\">\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled\"\n            (click)=\"onSelectFont(font)\">\n            {{ font }}\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [".font-menu{display:flex;justify-content:space-between;align-items:center;width:130px}span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:start}button{height:28px;margin:0 4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FontComponent, isStandalone: true, selector: "app-nod-font", inputs: { isDisabled: "isDisabled", styles: "styles" }, outputs: { selectFont: "selectFont" }, ngImport: i0, template: "<button\n    mat-button\n    [matMenuTriggerFor]=\"fontMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matTooltip]=\"'NODER.TOOLTIP.FONT' | translate\"\n    matTooltipPosition=\"below\">\n    <div class=\"font-menu\">\n        <span>{{ font }}</span>\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </div>\n</button>\n<mat-menu\n    #fontMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <ng-container *ngFor=\"let font of fonts\">\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled\"\n            (click)=\"onSelectFont(font)\">\n            {{ font }}\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [".font-menu{display:flex;justify-content:space-between;align-items:center;width:130px}span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:start}button{height:28px;margin:0 4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { 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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontComponent, decorators: [{
             type: Component,
@@ -15371,7 +15444,7 @@ class FontSizeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FontSizeComponent, isStandalone: true, selector: "app-nod-font-size", inputs: { isDisabled: "isDisabled", fontSize: "fontSize" }, outputs: { selectFontSize: "selectFontSize" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onDecrementFontSize()\"\n    [matTooltip]=\"'NODER.TOOLTIP.DECREMENT' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-remove\"></mat-icon>\n</button>\n<input\n    type=\"text\"\n    [formControl]=\"fontSizeControl\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"onSetFontSize()\"\n    (blur)=\"resetFontSize()\"\n    [matTooltip]=\"'NODER.TOOLTIP.FONTSIZE' | translate\"\n    matTooltipPosition=\"below\" />\n<mat-autocomplete\n    #auto=\"matAutocomplete\"\n    panelWidth=\"60\"\n    disableRipple=\"false\"\n    hideSingleSelectionIndicator=\"true\">\n    <mat-option\n        *ngFor=\"let fontSize of fontSizes\"\n        [value]=\"fontSize\"\n        (click)=\"onSelectFontSize(fontSize)\">\n        {{ fontSize }}\n    </mat-option>\n</mat-autocomplete>\n<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onIncrementFontSize()\"\n    [matTooltip]=\"'NODER.TOOLTIP.INCREMENT' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n</button>\n", styles: ["input{width:48px;height:32px;text-align:center;border-color:transparent}button.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.mat-mdc-option{padding-left:6px;padding-right:6px;min-height:30px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FontSizeComponent, isStandalone: true, selector: "app-nod-font-size", inputs: { isDisabled: "isDisabled", fontSize: "fontSize" }, outputs: { selectFontSize: "selectFontSize" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onDecrementFontSize()\"\n    [matTooltip]=\"'NODER.TOOLTIP.DECREMENT' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-remove\"></mat-icon>\n</button>\n<input\n    type=\"text\"\n    [formControl]=\"fontSizeControl\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"onSetFontSize()\"\n    (blur)=\"resetFontSize()\"\n    [matTooltip]=\"'NODER.TOOLTIP.FONTSIZE' | translate\"\n    matTooltipPosition=\"below\" />\n<mat-autocomplete\n    #auto=\"matAutocomplete\"\n    panelWidth=\"60\"\n    disableRipple=\"false\"\n    hideSingleSelectionIndicator=\"true\">\n    <mat-option\n        *ngFor=\"let fontSize of fontSizes\"\n        [value]=\"fontSize\"\n        (click)=\"onSelectFontSize(fontSize)\">\n        {{ fontSize }}\n    </mat-option>\n</mat-autocomplete>\n<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onIncrementFontSize()\"\n    [matTooltip]=\"'NODER.TOOLTIP.INCREMENT' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n</button>\n", styles: ["input{width:48px;height:32px;text-align:center;border-color:transparent}button.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.mat-mdc-option{padding-left:6px;padding-right:6px;min-height:30px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontSizeComponent, decorators: [{
             type: Component,
@@ -15404,7 +15477,7 @@ class ColorPickerComponent {
         this.colorChange.emit(color);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ColorPickerComponent, isStandalone: true, selector: "app-nod-color-picker", inputs: { color: "color", icon: "icon", isDisabled: "isDisabled", palette: "palette", tooltip: "tooltip" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<button\n    mat-button\n    ngx-colors-trigger\n    overlayClassName=\"noder-color-picker-overlay\"\n    [disabled]=\"isDisabled\"\n    [(ngModel)]=\"color\"\n    [palette]=\"palette\"\n    [hideTextInput]=\"true\"\n    [attachTo]=\"icon\"\n    (input)=\"onChangeColor(color)\"\n    [matTooltip]=\"tooltip\"\n    matTooltipPosition=\"below\">\n    <div class=\"color-text\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            [ngStyle]=\"{ color: color && color !== 'transparent' ? color : 'inherit' }\"\n            [fontIcon]=\"icon\"></mat-icon>\n    </div>\n</button>\n", styles: ["button{margin:0 3px}.color-text{display:inline-flex;height:22px}.mdc-button{min-width:32px;height:32px;width:32px;padding:0}.mdc-button mat-icon{height:24px;width:24px;font-size:22px}.mdc-button::ng-deep .mdc-button__label{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: NgxColorsModule }, { kind: "directive", type: i5$3.NgxColorsTriggerDirective, selector: "[ngx-colors-trigger]", inputs: ["colorsAnimation", "palette", "format", "formats", "position", "hideTextInput", "hideColorPicker", "attachTo", "overlayClassName", "colorPickerControls", "acceptLabel", "cancelLabel"], outputs: ["change", "input", "slider", "close", "open"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ColorPickerComponent, isStandalone: true, selector: "app-nod-color-picker", inputs: { color: "color", icon: "icon", isDisabled: "isDisabled", palette: "palette", tooltip: "tooltip" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<button\n    mat-button\n    ngx-colors-trigger\n    overlayClassName=\"noder-color-picker-overlay\"\n    [disabled]=\"isDisabled\"\n    [(ngModel)]=\"color\"\n    [palette]=\"palette\"\n    [hideTextInput]=\"true\"\n    [attachTo]=\"icon\"\n    (input)=\"onChangeColor(color)\"\n    [matTooltip]=\"tooltip\"\n    matTooltipPosition=\"below\">\n    <div class=\"color-text\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            [ngStyle]=\"{ color: color && color !== 'transparent' ? color : 'inherit' }\"\n            [fontIcon]=\"icon\"></mat-icon>\n    </div>\n</button>\n", styles: ["button{margin:0 3px}.color-text{display:inline-flex;height:22px}.mdc-button{min-width:32px;height:32px;width:32px;padding:0}.mdc-button mat-icon{height:24px;width:24px;font-size:22px}.mdc-button::ng-deep .mdc-button__label{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: NgxColorsModule }, { kind: "directive", type: i5$4.NgxColorsTriggerDirective, selector: "[ngx-colors-trigger]", inputs: ["colorsAnimation", "palette", "format", "formats", "position", "hideTextInput", "hideColorPicker", "attachTo", "overlayClassName", "colorPickerControls", "acceptLabel", "cancelLabel"], outputs: ["change", "input", "slider", "close", "open"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
@@ -15468,7 +15541,7 @@ class FontStyleComponent {
         this.selectHighlightColor.emit(color);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FontStyleComponent, isStandalone: false, selector: "app-nod-font-style", inputs: { isDisabled: "isDisabled", bold: "bold", italic: "italic", underline: "underline", fontColor: "fontColor", highlightColor: "highlightColor" }, outputs: { toggleBold: "toggleBold", toggleItalic: "toggleItalic", toggleUnderline: "toggleUnderline", selectFontColor: "selectFontColor", selectHighlightColor: "selectHighlightColor" }, ngImport: i0, template: "<mat-button-toggle-group\n    multiple\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\">\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"bold\"\n        (click)=\"onToggleBold()\"\n        [matTooltip]=\"'NODER.TOOLTIP.BOLD' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-bold\" />\n    </mat-button-toggle>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"italic\"\n        (click)=\"onToggleItalic()\"\n        [matTooltip]=\"'NODER.TOOLTIP.ITALIC' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-italic\" />\n    </mat-button-toggle>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"underline\"\n        (click)=\"onToggleUnderline()\"\n        [matTooltip]=\"'NODER.TOOLTIP.UNDERLINE' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-underlined\" />\n    </mat-button-toggle>\n</mat-button-toggle-group>\n<app-nod-color-picker\n    *ngIf=\"selectFontColor.observed\"\n    id=\"icon-format-colortext\"\n    class=\"text-color\"\n    [color]=\"fontColor\"\n    [isDisabled]=\"isDisabled\"\n    icon=\"icon-format-colortext\"\n    [palette]=\"textColorPalette\"\n    (colorChange)=\"onSelectFontColor($event)\"\n    [tooltip]=\"'NODER.TOOLTIP.FONTCOLOR' | translate\" />\n<app-nod-color-picker\n    *ngIf=\"selectHighlightColor.observed\"\n    id=\"icon-link-highlighter\"\n    class=\"highlight-color\"\n    [color]=\"highlightColor\"\n    [isDisabled]=\"isDisabled\"\n    icon=\"icon-link-highlighter\"\n    [palette]=\"highlightColorPalette\"\n    (colorChange)=\"onSelectHighlightColor($event)\"\n    [tooltip]=\"'NODER.TOOLTIP.HIGHLIGHTCOLOR' | translate\" />\n", styles: ["mat-button-toggle,button{margin:0 4px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}:host{display:flex;align-items:center}:host ::ng-deep #format-color-highlight .circle.button:first-child,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child{flex:100%;width:100%;background:no-repeat left/20px url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_format_color_reset_48px-512.png);border-radius:unset}:host ::ng-deep #format-color-highlight .circle.button:first-child .circle.color.circle-border,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child .circle.color.circle-border{width:100%;border:unset}:host ::ng-deep #format-color-highlight .circle.button:first-child .circle.color.circle-border .selected,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child .circle.color.circle-border .selected{display:none}\n"], dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "app-nod-color-picker", inputs: ["color", "icon", "isDisabled", "palette", "tooltip"], outputs: ["colorChange"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FontStyleComponent, isStandalone: false, selector: "app-nod-font-style", inputs: { isDisabled: "isDisabled", bold: "bold", italic: "italic", underline: "underline", fontColor: "fontColor", highlightColor: "highlightColor" }, outputs: { toggleBold: "toggleBold", toggleItalic: "toggleItalic", toggleUnderline: "toggleUnderline", selectFontColor: "selectFontColor", selectHighlightColor: "selectHighlightColor" }, ngImport: i0, template: "<mat-button-toggle-group\n    multiple\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\">\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"bold\"\n        (click)=\"onToggleBold()\"\n        [matTooltip]=\"'NODER.TOOLTIP.BOLD' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-bold\" />\n    </mat-button-toggle>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"italic\"\n        (click)=\"onToggleItalic()\"\n        [matTooltip]=\"'NODER.TOOLTIP.ITALIC' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-italic\" />\n    </mat-button-toggle>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"underline\"\n        (click)=\"onToggleUnderline()\"\n        [matTooltip]=\"'NODER.TOOLTIP.UNDERLINE' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-underlined\" />\n    </mat-button-toggle>\n</mat-button-toggle-group>\n<app-nod-color-picker\n    *ngIf=\"selectFontColor.observed\"\n    id=\"icon-format-colortext\"\n    class=\"text-color\"\n    [color]=\"fontColor\"\n    [isDisabled]=\"isDisabled\"\n    icon=\"icon-format-colortext\"\n    [palette]=\"textColorPalette\"\n    (colorChange)=\"onSelectFontColor($event)\"\n    [tooltip]=\"'NODER.TOOLTIP.FONTCOLOR' | translate\" />\n<app-nod-color-picker\n    *ngIf=\"selectHighlightColor.observed\"\n    id=\"icon-link-highlighter\"\n    class=\"highlight-color\"\n    [color]=\"highlightColor\"\n    [isDisabled]=\"isDisabled\"\n    icon=\"icon-link-highlighter\"\n    [palette]=\"highlightColorPalette\"\n    (colorChange)=\"onSelectHighlightColor($event)\"\n    [tooltip]=\"'NODER.TOOLTIP.HIGHLIGHTCOLOR' | translate\" />\n", styles: ["mat-button-toggle,button{margin:0 4px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}:host{display:flex;align-items:center}:host ::ng-deep #format-color-highlight .circle.button:first-child,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child{flex:100%;width:100%;background:no-repeat left/20px url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_format_color_reset_48px-512.png);border-radius:unset}:host ::ng-deep #format-color-highlight .circle.button:first-child .circle.color.circle-border,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child .circle.color.circle-border{width:100%;border:unset}:host ::ng-deep #format-color-highlight .circle.button:first-child .circle.color.circle-border .selected,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child .circle.color.circle-border .selected{display:none}\n"], dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "app-nod-color-picker", inputs: ["color", "icon", "isDisabled", "palette", "tooltip"], outputs: ["colorChange"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontStyleComponent, decorators: [{
             type: Component,
@@ -15507,7 +15580,7 @@ class FormatComponent {
         this.selectAlignment.emit(format);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FormatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FormatComponent, isStandalone: false, selector: "app-nod-format", inputs: { isDisabled: "isDisabled", alignment: "alignment" }, outputs: { selectAlignment: "selectAlignment" }, ngImport: i0, template: "<mat-button-toggle-group\n    name=\"format\"\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\"\n    [disabled]=\"isDisabled\"\n    [value]=\"alignment\"\n    (change)=\"onSelectFormat($event.value)\">\n    <mat-button-toggle\n        [value]=\"alignments.Left\"\n        [matTooltip]=\"'NODER.TOOLTIP.LEFT' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-alignleft\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Center\"\n        [matTooltip]=\"'NODER.TOOLTIP.CENTER' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-aligncenter\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Right\"\n        [matTooltip]=\"'NODER.TOOLTIP.RIGHT' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-alignright\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Justify\"\n        [matTooltip]=\"'NODER.TOOLTIP.JUSTIFY' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-align\"></mat-icon>\n    </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}\n"], dependencies: [{ kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FormatComponent, isStandalone: false, selector: "app-nod-format", inputs: { isDisabled: "isDisabled", alignment: "alignment" }, outputs: { selectAlignment: "selectAlignment" }, ngImport: i0, template: "<mat-button-toggle-group\n    name=\"format\"\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\"\n    [disabled]=\"isDisabled\"\n    [value]=\"alignment\"\n    (change)=\"onSelectFormat($event.value)\">\n    <mat-button-toggle\n        [value]=\"alignments.Left\"\n        [matTooltip]=\"'NODER.TOOLTIP.LEFT' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-alignleft\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Center\"\n        [matTooltip]=\"'NODER.TOOLTIP.CENTER' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-aligncenter\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Right\"\n        [matTooltip]=\"'NODER.TOOLTIP.RIGHT' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-alignright\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Justify\"\n        [matTooltip]=\"'NODER.TOOLTIP.JUSTIFY' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-align\"></mat-icon>\n    </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}\n"], dependencies: [{ kind: "directive", type: i3$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FormatComponent, decorators: [{
             type: Component,
@@ -15548,7 +15621,7 @@ class NumberingComponent {
         this.selectNumberingTemplate.emit(numberingTemplateType);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NumberingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NumberingComponent, isStandalone: false, selector: "app-nod-numbering", inputs: { isDisabled: "isDisabled", selectedNumberingType: "selectedNumberingType", selectedNumberingTemplate: "selectedNumberingTemplate" }, outputs: { selectNumberingTemplate: "selectNumberingTemplate", removeNumberings: "removeNumberings" }, ngImport: i0, template: "<mat-button-toggle-group\n    name=\"format\"\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\"\n    [disabled]=\"isDisabled\">\n    <mat-button-toggle\n        (click)=\"onToggleBulletedNumbering()\"\n        [value]=\"numberingType.Bullet\"\n        [checked]=\"selectedNumberingType === numberingType.Bullet\"\n        [matTooltip]=\"'NODER.TOOLTIP.BULLETED_LIST' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-bulleted\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listBulletedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        [matTooltip]=\"'NODER.TOOLTIP.BULLETED_MENU' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listBulletedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList6\"></mat-icon>\n        </div>\n    </mat-menu>\n    <mat-button-toggle\n        (click)=\"onToggleNumberedNumbering()\"\n        [value]=\"numberingType.Number\"\n        [checked]=\"selectedNumberingType === numberingType.Number\"\n        [matTooltip]=\"'NODER.TOOLTIP.NUMBERED_LIST' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-numbered\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listNumberedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        style=\"display: none\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listNumberedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList6\"></mat-icon>\n        </div>\n    </mat-menu>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle-group,button{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}.mdc-button{min-width:32px;min-height:32px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.mat-button-toggle-group{align-items:center}.mat-button-toggle-group .mdc-button{min-width:20px;height:32px;padding:0}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none!important}.list-icon .selected,.list-icon .selected:hover{border-width:2px;border-style:solid}\n"], dependencies: [{ kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NumberingComponent, isStandalone: false, selector: "app-nod-numbering", inputs: { isDisabled: "isDisabled", selectedNumberingType: "selectedNumberingType", selectedNumberingTemplate: "selectedNumberingTemplate" }, outputs: { selectNumberingTemplate: "selectNumberingTemplate", removeNumberings: "removeNumberings" }, ngImport: i0, template: "<mat-button-toggle-group\n    name=\"format\"\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\"\n    [disabled]=\"isDisabled\">\n    <mat-button-toggle\n        (click)=\"onToggleBulletedNumbering()\"\n        [value]=\"numberingType.Bullet\"\n        [checked]=\"selectedNumberingType === numberingType.Bullet\"\n        [matTooltip]=\"'NODER.TOOLTIP.BULLETED_LIST' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-bulleted\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listBulletedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        [matTooltip]=\"'NODER.TOOLTIP.BULLETED_MENU' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listBulletedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList6\"></mat-icon>\n        </div>\n    </mat-menu>\n    <mat-button-toggle\n        (click)=\"onToggleNumberedNumbering()\"\n        [value]=\"numberingType.Number\"\n        [checked]=\"selectedNumberingType === numberingType.Number\"\n        [matTooltip]=\"'NODER.TOOLTIP.NUMBERED_LIST' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-numbered\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listNumberedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        style=\"display: none\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listNumberedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList6\"></mat-icon>\n        </div>\n    </mat-menu>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle-group,button{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}.mdc-button{min-width:32px;min-height:32px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.mat-button-toggle-group{align-items:center}.mat-button-toggle-group .mdc-button{min-width:20px;height:32px;padding:0}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none!important}.list-icon .selected,.list-icon .selected:hover{border-width:2px;border-style:solid}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { 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: "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: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NumberingComponent, decorators: [{
             type: Component,
@@ -15570,7 +15643,7 @@ class PrintComponent {
         this.print = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PrintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: PrintComponent, isStandalone: false, selector: "app-nod-print", outputs: { print: "print" }, ngImport: i0, template: "<button\n    mat-button\n    (click)=\"print.emit()\"\n    [matTooltip]=\"'NODER.TOOLTIP.PRINT' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-print\"></mat-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}\n"], dependencies: [{ kind: "component", type: i4$1.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: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: PrintComponent, isStandalone: false, selector: "app-nod-print", outputs: { print: "print" }, ngImport: i0, template: "<button\n    mat-button\n    (click)=\"print.emit()\"\n    [matTooltip]=\"'NODER.TOOLTIP.PRINT' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-print\"></mat-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}\n"], dependencies: [{ kind: "component", type: 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: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PrintComponent, decorators: [{
             type: Component,
@@ -15587,7 +15660,7 @@ class UndoRedoComponent {
         this.redo = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UndoRedoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: UndoRedoComponent, isStandalone: false, selector: "app-nod-undo-redo", inputs: { canUndo: "canUndo", canRedo: "canRedo" }, outputs: { undo: "undo", redo: "redo" }, ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"!canUndo\"\n    (click)=\"undo.emit()\"\n    [matTooltip]=\"'NODER.TOOLTIP.UNDO' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-undo\"></mat-icon>\n</button>\n<button\n    mat-button\n    [disabled]=\"!canRedo\"\n    (click)=\"redo.emit()\"\n    [matTooltip]=\"'NODER.TOOLTIP.REDO' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-redo\"></mat-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}\n"], dependencies: [{ kind: "component", type: i4$1.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: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: UndoRedoComponent, isStandalone: false, selector: "app-nod-undo-redo", inputs: { canUndo: "canUndo", canRedo: "canRedo" }, outputs: { undo: "undo", redo: "redo" }, ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"!canUndo\"\n    (click)=\"undo.emit()\"\n    [matTooltip]=\"'NODER.TOOLTIP.UNDO' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-undo\"></mat-icon>\n</button>\n<button\n    mat-button\n    [disabled]=\"!canRedo\"\n    (click)=\"redo.emit()\"\n    [matTooltip]=\"'NODER.TOOLTIP.REDO' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-redo\"></mat-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}\n"], dependencies: [{ kind: "component", type: 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: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UndoRedoComponent, decorators: [{
             type: Component,
@@ -15636,7 +15709,7 @@ class ToolbarActionsComponent extends BaseToolbarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToolbarActionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CustomIconService }, { token: i0.Injector }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ToolbarActionsComponent, isStandalone: false, selector: "app-nod-toolbar-actions", viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{ isViewOnly: editorService.isViewOnly$ | async } as data\">\n    <app-nod-undo-redo\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (undo)=\"undo.emit()\"\n        (redo)=\"redo.emit()\" />\n    <app-nod-print\n        class=\"hidden\"\n        (print)=\"print.emit()\" />\n    <div class=\"separator\"></div>\n    <app-nod-font\n        [isDisabled]=\"data.isViewOnly\"\n        [styles]=\"styles\"\n        (selectFont)=\"onApplyFontFamily($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-size\n        [isDisabled]=\"data.isViewOnly\"\n        [fontSize]=\"styles.fontSize\"\n        (selectFontSize)=\"onApplyFontSize($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-style\n        [isDisabled]=\"data.isViewOnly\"\n        [bold]=\"styles.bold\"\n        [italic]=\"styles.italic\"\n        [underline]=\"styles.underline\"\n        [fontColor]=\"styles.fontColor\"\n        [highlightColor]=\"styles.highlightColor\"\n        (selectFontColor)=\"onApplyFontColor($event)\"\n        (toggleBold)=\"onApplyBold()\"\n        (toggleItalic)=\"onApplyItalic()\"\n        (toggleUnderline)=\"onApplyUnderline()\"\n        (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-format\n        [isDisabled]=\"data.isViewOnly\"\n        [alignment]=\"styles.alignment\"\n        (selectAlignment)=\"onApplyAlignment($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-numbering\n        [isDisabled]=\"data.isViewOnly\"\n        [selectedNumberingType]=\"numberingType\"\n        [selectedNumberingTemplate]=\"numberingTemplateType\"\n        (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n        (removeNumberings)=\"removeNumberings.emit()\" />\n    <div class=\"separator\"></div>\n    <div class=\"insert-buttons\">\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-image\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertImage.emit()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_IMAGE' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-image\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-table\"\n            [class.active-button]=\"showInsertTableMenu\"\n            [disabled]=\"data.isViewOnly\"\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_TABLE' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-link\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertLink.emit()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_LINK' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-link-on\" />\n        </button>\n    </div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"separator\"></div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"custom-elements\">\n        <button\n            *ngFor=\"let element of elements\"\n            mat-button\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"onCreateElement(element)\"\n            [matTooltip]=\"element.tooltip | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"{{ element.icon }}\"></mat-icon>\n        </button>\n    </div>\n</ng-container>\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", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:2px solid;height:24px;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FontComponent, selector: "app-nod-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-nod-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4$1.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$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FontStyleComponent, selector: "app-nod-font-style", inputs: ["isDisabled", "bold", "italic", "underline", "fontColor", "highlightColor"], outputs: ["toggleBold", "toggleItalic", "toggleUnderline", "selectFontColor", "selectHighlightColor"] }, { kind: "component", type: FormatComponent, selector: "app-nod-format", inputs: ["isDisabled", "alignment"], outputs: ["selectAlignment"] }, { kind: "component", type: NumberingComponent, selector: "app-nod-numbering", inputs: ["isDisabled", "selectedNumberingType", "selectedNumberingTemplate"], outputs: ["selectNumberingTemplate", "removeNumberings"] }, { kind: "component", type: PrintComponent, selector: "app-nod-print", outputs: ["print"] }, { kind: "component", type: UndoRedoComponent, selector: "app-nod-undo-redo", inputs: ["canUndo", "canRedo"], outputs: ["undo", "redo"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ToolbarActionsComponent, isStandalone: false, selector: "app-nod-toolbar-actions", viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{ isViewOnly: editorService.isViewOnly$ | async } as data\">\n    <app-nod-undo-redo\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (undo)=\"undo.emit()\"\n        (redo)=\"redo.emit()\" />\n    <app-nod-print\n        class=\"hidden\"\n        (print)=\"print.emit()\" />\n    <div class=\"separator\"></div>\n    <app-nod-font\n        [isDisabled]=\"data.isViewOnly\"\n        [styles]=\"styles\"\n        (selectFont)=\"onApplyFontFamily($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-size\n        [isDisabled]=\"data.isViewOnly\"\n        [fontSize]=\"styles.fontSize\"\n        (selectFontSize)=\"onApplyFontSize($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-style\n        [isDisabled]=\"data.isViewOnly\"\n        [bold]=\"styles.bold\"\n        [italic]=\"styles.italic\"\n        [underline]=\"styles.underline\"\n        [fontColor]=\"styles.fontColor\"\n        [highlightColor]=\"styles.highlightColor\"\n        (selectFontColor)=\"onApplyFontColor($event)\"\n        (toggleBold)=\"onApplyBold()\"\n        (toggleItalic)=\"onApplyItalic()\"\n        (toggleUnderline)=\"onApplyUnderline()\"\n        (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-format\n        [isDisabled]=\"data.isViewOnly\"\n        [alignment]=\"styles.alignment\"\n        (selectAlignment)=\"onApplyAlignment($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-numbering\n        [isDisabled]=\"data.isViewOnly\"\n        [selectedNumberingType]=\"numberingType\"\n        [selectedNumberingTemplate]=\"numberingTemplateType\"\n        (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n        (removeNumberings)=\"removeNumberings.emit()\" />\n    <div class=\"separator\"></div>\n    <div class=\"insert-buttons\">\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-image\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertImage.emit()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_IMAGE' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-image\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-table\"\n            [class.active-button]=\"showInsertTableMenu\"\n            [disabled]=\"data.isViewOnly\"\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_TABLE' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-link\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertLink.emit()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_LINK' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-link-on\" />\n        </button>\n    </div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"separator\"></div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"custom-elements\">\n        <button\n            *ngFor=\"let element of elements\"\n            mat-button\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"onCreateElement(element)\"\n            [matTooltip]=\"element.tooltip | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"{{ element.icon }}\"></mat-icon>\n        </button>\n    </div>\n</ng-container>\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", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:2px solid;height:24px;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FontComponent, selector: "app-nod-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-nod-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { 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: "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: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FontStyleComponent, selector: "app-nod-font-style", inputs: ["isDisabled", "bold", "italic", "underline", "fontColor", "highlightColor"], outputs: ["toggleBold", "toggleItalic", "toggleUnderline", "selectFontColor", "selectHighlightColor"] }, { kind: "component", type: FormatComponent, selector: "app-nod-format", inputs: ["isDisabled", "alignment"], outputs: ["selectAlignment"] }, { kind: "component", type: NumberingComponent, selector: "app-nod-numbering", inputs: ["isDisabled", "selectedNumberingType", "selectedNumberingTemplate"], outputs: ["selectNumberingTemplate", "removeNumberings"] }, { kind: "component", type: PrintComponent, selector: "app-nod-print", outputs: ["print"] }, { kind: "component", type: UndoRedoComponent, selector: "app-nod-undo-redo", inputs: ["canUndo", "canRedo"], outputs: ["undo", "redo"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToolbarActionsComponent, decorators: [{
             type: Component,
@@ -15702,13 +15775,13 @@ class EditorMobileToolbarComponent extends ToolbarActionsComponent {
             textFormat: () => this.onTextFormat()
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorMobileToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CustomIconService }, { token: EditorService }, { token: i0.Injector }, { token: ToolbarCoreService }, { token: i4.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorMobileToolbarComponent, isStandalone: false, selector: "app-nod-editor-mobile-toolbar", outputs: { openFileFromDisk: "openFileFromDisk", createDocument: "createDocument", saveAs: "saveAs", downloadPdf: "downloadPdf", rename: "rename", delete: "delete", insertPageBreak: "insertPageBreak", textFormat: "textFormat" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{ mode: toolbarCoreService.mode$ | async, isViewOnly: editorService.isViewOnly$ | async } as data\">\n    <div class=\"menu-action\">\n        <button\n            *ngIf=\"data.mode === editorToolbarMode.Base; else back\"\n            mat-button\n            id=\"editor-mobile-toolbar-sandwich\"\n            (click)=\"toolbarCoreService.openBurgerMenu()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-sandwich\" />\n        </button>\n        <ng-template #back>\n            <div class=\"back-container\">\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-back\"\n                    (click)=\"toolbarCoreService.back()\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-back\" />\n                </button>\n                <div class=\"back-title\">{{ toolbarCoreService.backTitle }}</div>\n            </div>\n        </ng-template>\n    </div>\n    <div\n        *ngIf=\"styles && !data.isViewOnly && actionsMenuMods.includes(data.mode)\"\n        class=\"actions\">\n        <app-nod-undo-redo\n            [canUndo]=\"canUndo\"\n            [canRedo]=\"canRedo\"\n            (undo)=\"undo.emit()\"\n            (redo)=\"redo.emit()\" />\n        <div class=\"separator\"></div>\n        <div\n            class=\"main-actions\"\n            [ngSwitch]=\"data.mode\">\n            <ng-container *ngSwitchCase=\"editorToolbarMode.Base\">\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-text-format\"\n                    (click)=\"toolbarCoreService.mode = editorToolbarMode.TextFormat\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-text\" />\n                </button>\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-style-format\"\n                    (click)=\"toolbarCoreService.mode = editorToolbarMode.StyleFormat\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-combined\" />\n                </button>\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-align-format\"\n                    (click)=\"toolbarCoreService.mode = editorToolbarMode.AlignFormat\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignleft\" />\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"editorToolbarMode.TextFormat\">\n                <app-nod-font\n                    [isDisabled]=\"data.isViewOnly\"\n                    [styles]=\"styles\"\n                    (selectFont)=\"onApplyFontFamily($event)\" />\n                <div class=\"separator\"></div>\n                <app-nod-font-size\n                    [isDisabled]=\"data.isViewOnly\"\n                    [fontSize]=\"styles.fontSize\"\n                    (selectFontSize)=\"onApplyFontSize($event)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"editorToolbarMode.StyleFormat\">\n                <app-nod-font-style\n                    [isDisabled]=\"data.isViewOnly\"\n                    [bold]=\"styles.bold\"\n                    [italic]=\"styles.italic\"\n                    [underline]=\"styles.underline\"\n                    (toggleBold)=\"onApplyBold($event)\"\n                    (toggleItalic)=\"onApplyItalic($event)\"\n                    (toggleUnderline)=\"onApplyUnderline($event)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"editorToolbarMode.AlignFormat\">\n                <app-nod-format\n                    [isDisabled]=\"data.isViewOnly\"\n                    [alignment]=\"styles.alignment\"\n                    (selectAlignment)=\"onApplyAlignment($event)\" />\n            </ng-container>\n        </div>\n    </div>\n</ng-container>\n", styles: ["button.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}button.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}:host::ng-deep{display:flex;position:relative;width:100%;height:32px}:host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.menu-action{display:flex;align-items:center;z-index:1}.actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}.main-actions{display:flex;align-items:center;height:100%}.separator{border-left:1px solid;opacity:.1;height:100%;margin:0 8px}app-nod-font{max-width:142px}.back-container{display:flex}.back-title{font-size:14px;font-weight:400;padding-left:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: FontComponent, selector: "app-nod-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-nod-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { kind: "component", type: i4$1.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: FontStyleComponent, selector: "app-nod-font-style", inputs: ["isDisabled", "bold", "italic", "underline", "fontColor", "highlightColor"], outputs: ["toggleBold", "toggleItalic", "toggleUnderline", "selectFontColor", "selectHighlightColor"] }, { kind: "component", type: FormatComponent, selector: "app-nod-format", inputs: ["isDisabled", "alignment"], outputs: ["selectAlignment"] }, { kind: "component", type: UndoRedoComponent, selector: "app-nod-undo-redo", inputs: ["canUndo", "canRedo"], outputs: ["undo", "redo"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorMobileToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CustomIconService }, { token: EditorService }, { token: i0.Injector }, { token: ToolbarCoreService }, { token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorMobileToolbarComponent, isStandalone: false, selector: "app-nod-editor-mobile-toolbar", outputs: { openFileFromDisk: "openFileFromDisk", createDocument: "createDocument", saveAs: "saveAs", downloadPdf: "downloadPdf", rename: "rename", delete: "delete", insertPageBreak: "insertPageBreak", textFormat: "textFormat" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{ mode: toolbarCoreService.mode$ | async, isViewOnly: editorService.isViewOnly$ | async } as data\">\n    <div class=\"menu-action\">\n        <button\n            *ngIf=\"data.mode === editorToolbarMode.Base; else back\"\n            mat-button\n            id=\"editor-mobile-toolbar-sandwich\"\n            (click)=\"toolbarCoreService.openBurgerMenu()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-sandwich\" />\n        </button>\n        <ng-template #back>\n            <div class=\"back-container\">\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-back\"\n                    (click)=\"toolbarCoreService.back()\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-back\" />\n                </button>\n                <div class=\"back-title\">{{ toolbarCoreService.backTitle }}</div>\n            </div>\n        </ng-template>\n    </div>\n    <div\n        *ngIf=\"styles && !data.isViewOnly && actionsMenuMods.includes(data.mode)\"\n        class=\"actions\">\n        <app-nod-undo-redo\n            [canUndo]=\"canUndo\"\n            [canRedo]=\"canRedo\"\n            (undo)=\"undo.emit()\"\n            (redo)=\"redo.emit()\" />\n        <div class=\"separator\"></div>\n        <div\n            class=\"main-actions\"\n            [ngSwitch]=\"data.mode\">\n            <ng-container *ngSwitchCase=\"editorToolbarMode.Base\">\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-text-format\"\n                    (click)=\"toolbarCoreService.mode = editorToolbarMode.TextFormat\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-text\" />\n                </button>\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-style-format\"\n                    (click)=\"toolbarCoreService.mode = editorToolbarMode.StyleFormat\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-combined\" />\n                </button>\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-align-format\"\n                    (click)=\"toolbarCoreService.mode = editorToolbarMode.AlignFormat\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignleft\" />\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"editorToolbarMode.TextFormat\">\n                <app-nod-font\n                    [isDisabled]=\"data.isViewOnly\"\n                    [styles]=\"styles\"\n                    (selectFont)=\"onApplyFontFamily($event)\" />\n                <div class=\"separator\"></div>\n                <app-nod-font-size\n                    [isDisabled]=\"data.isViewOnly\"\n                    [fontSize]=\"styles.fontSize\"\n                    (selectFontSize)=\"onApplyFontSize($event)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"editorToolbarMode.StyleFormat\">\n                <app-nod-font-style\n                    [isDisabled]=\"data.isViewOnly\"\n                    [bold]=\"styles.bold\"\n                    [italic]=\"styles.italic\"\n                    [underline]=\"styles.underline\"\n                    (toggleBold)=\"onApplyBold($event)\"\n                    (toggleItalic)=\"onApplyItalic($event)\"\n                    (toggleUnderline)=\"onApplyUnderline($event)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"editorToolbarMode.AlignFormat\">\n                <app-nod-format\n                    [isDisabled]=\"data.isViewOnly\"\n                    [alignment]=\"styles.alignment\"\n                    (selectAlignment)=\"onApplyAlignment($event)\" />\n            </ng-container>\n        </div>\n    </div>\n</ng-container>\n", styles: ["button.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}button.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}:host::ng-deep{display:flex;position:relative;width:100%;height:32px}:host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.menu-action{display:flex;align-items:center;z-index:1}.actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}.main-actions{display:flex;align-items:center;height:100%}.separator{border-left:1px solid;opacity:.1;height:100%;margin:0 8px}app-nod-font{max-width:142px}.back-container{display:flex}.back-title{font-size:14px;font-weight:400;padding-left:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: FontComponent, selector: "app-nod-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-nod-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { 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: FontStyleComponent, selector: "app-nod-font-style", inputs: ["isDisabled", "bold", "italic", "underline", "fontColor", "highlightColor"], outputs: ["toggleBold", "toggleItalic", "toggleUnderline", "selectFontColor", "selectHighlightColor"] }, { kind: "component", type: FormatComponent, selector: "app-nod-format", inputs: ["isDisabled", "alignment"], outputs: ["selectAlignment"] }, { kind: "component", type: UndoRedoComponent, selector: "app-nod-undo-redo", inputs: ["canUndo", "canRedo"], outputs: ["undo", "redo"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorMobileToolbarComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-mobile-toolbar', standalone: false, template: "<ng-container *ngIf=\"{ mode: toolbarCoreService.mode$ | async, isViewOnly: editorService.isViewOnly$ | async } as data\">\n    <div class=\"menu-action\">\n        <button\n            *ngIf=\"data.mode === editorToolbarMode.Base; else back\"\n            mat-button\n            id=\"editor-mobile-toolbar-sandwich\"\n            (click)=\"toolbarCoreService.openBurgerMenu()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-sandwich\" />\n        </button>\n        <ng-template #back>\n            <div class=\"back-container\">\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-back\"\n                    (click)=\"toolbarCoreService.back()\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-back\" />\n                </button>\n                <div class=\"back-title\">{{ toolbarCoreService.backTitle }}</div>\n            </div>\n        </ng-template>\n    </div>\n    <div\n        *ngIf=\"styles && !data.isViewOnly && actionsMenuMods.includes(data.mode)\"\n        class=\"actions\">\n        <app-nod-undo-redo\n            [canUndo]=\"canUndo\"\n            [canRedo]=\"canRedo\"\n            (undo)=\"undo.emit()\"\n            (redo)=\"redo.emit()\" />\n        <div class=\"separator\"></div>\n        <div\n            class=\"main-actions\"\n            [ngSwitch]=\"data.mode\">\n            <ng-container *ngSwitchCase=\"editorToolbarMode.Base\">\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-text-format\"\n                    (click)=\"toolbarCoreService.mode = editorToolbarMode.TextFormat\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-text\" />\n                </button>\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-style-format\"\n                    (click)=\"toolbarCoreService.mode = editorToolbarMode.StyleFormat\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-combined\" />\n                </button>\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-align-format\"\n                    (click)=\"toolbarCoreService.mode = editorToolbarMode.AlignFormat\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignleft\" />\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"editorToolbarMode.TextFormat\">\n                <app-nod-font\n                    [isDisabled]=\"data.isViewOnly\"\n                    [styles]=\"styles\"\n                    (selectFont)=\"onApplyFontFamily($event)\" />\n                <div class=\"separator\"></div>\n                <app-nod-font-size\n                    [isDisabled]=\"data.isViewOnly\"\n                    [fontSize]=\"styles.fontSize\"\n                    (selectFontSize)=\"onApplyFontSize($event)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"editorToolbarMode.StyleFormat\">\n                <app-nod-font-style\n                    [isDisabled]=\"data.isViewOnly\"\n                    [bold]=\"styles.bold\"\n                    [italic]=\"styles.italic\"\n                    [underline]=\"styles.underline\"\n                    (toggleBold)=\"onApplyBold($event)\"\n                    (toggleItalic)=\"onApplyItalic($event)\"\n                    (toggleUnderline)=\"onApplyUnderline($event)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"editorToolbarMode.AlignFormat\">\n                <app-nod-format\n                    [isDisabled]=\"data.isViewOnly\"\n                    [alignment]=\"styles.alignment\"\n                    (selectAlignment)=\"onApplyAlignment($event)\" />\n            </ng-container>\n        </div>\n    </div>\n</ng-container>\n", styles: ["button.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}button.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}:host::ng-deep{display:flex;position:relative;width:100%;height:32px}:host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.menu-action{display:flex;align-items:center;z-index:1}.actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}.main-actions{display:flex;align-items:center;height:100%}.separator{border-left:1px solid;opacity:.1;height:100%;margin:0 8px}app-nod-font{max-width:142px}.back-container{display:flex}.back-title{font-size:14px;font-weight:400;padding-left:10px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CustomIconService }, { type: EditorService }, { type: i0.Injector }, { type: ToolbarCoreService }, { type: i4.TranslateService }], propDecorators: { openFileFromDisk: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CustomIconService }, { type: EditorService }, { type: i0.Injector }, { type: ToolbarCoreService }, { type: i3$1.TranslateService }], propDecorators: { openFileFromDisk: [{
                 type: Output
             }], createDocument: [{
                 type: Output
@@ -15900,7 +15973,7 @@ class InsertTableMobileComponent {
         control.setValue(newValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InsertTableMobileComponent, deps: [{ token: EditorService }, { token: i2.FormBuilder }, { token: ToolbarCoreService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: InsertTableMobileComponent, isStandalone: true, selector: "app-nod-insert-table-mobile", ngImport: i0, template: "<div class=\"content\">\n    <div class=\"title\">{{ 'NODER.LABEL.TABLE_OPTIONS' | translate }}</div>\n    <div\n        class=\"inputs\"\n        [formGroup]=\"form\">\n        <div class=\"rows\">\n            <div class=\"input-title\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-table-rows\" />\n                {{ 'NODER.LABEL.ROWS' | translate }}:\n            </div>\n            <mat-form-field appearance=\"outline\">\n                <button\n                    mat-fab\n                    (click)=\"onChangeRows(-1)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-remove\" />\n                </button>\n                <input\n                    matInput\n                    required\n                    type=\"number\"\n                    [formControl]=\"form.controls.rows\"\n                    (change)=\"onChangeInputRow()\" />\n                <button\n                    mat-fab\n                    (click)=\"onChangeRows(1)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-add\" />\n                </button>\n                <mat-error>{{ 'NODER.LABEL.THE_ROW_IS_REQUIRED' | translate }}.</mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"columns\">\n            <div class=\"input-title\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-table-columns\" />\n                {{ 'NODER.LABEL.COLUMNS' | translate }}:\n            </div>\n            <mat-form-field appearance=\"outline\">\n                <button\n                    mat-fab\n                    (click)=\"onChangeColumns(-1)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-remove\" />\n                </button>\n                <input\n                    matInput\n                    required\n                    type=\"number\"\n                    [formControl]=\"form.controls.columns\"\n                    (change)=\"onChangeInputColumn()\" />\n                <button\n                    mat-fab\n                    (click)=\"onChangeColumns(1)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-add\" />\n                </button>\n                <mat-error>{{ 'NODER.LABEL.THE_COLUMN_IS_REQUIRED' | translate }}.</mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <div class=\"quick-select\">\n        <div class=\"quick-select-header\">\n            <div class=\"separator\"></div>\n            <div class=\"quick-select-title\">{{ 'NODER.LABEL.QUICK_SELECT' | translate }}</div>\n            <div class=\"separator\"></div>\n        </div>\n        <div class=\"selection\">\n            <ng-container *ngFor=\"let row of rows\">\n                <div class=\"row\">\n                    <ng-container *ngFor=\"let column of columns\">\n                        <div\n                            class=\"cell-container\"\n                            (click)=\"onSetTable(row, column)\">\n                            <div\n                                class=\"cell\"\n                                [class.highlighted]=\"row <= form.controls.rows.value && column <= form.controls.columns.value\"></div>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n<div class=\"actions\">\n    <button\n        mat-mini-fab\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n    </button>\n    <button\n        mat-mini-fab\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;padding:30px;justify-content:space-between;overflow:hidden}.title{font-size:16px;font-weight:500;padding-bottom:10px}.inputs{display:flex;justify-content:space-between;padding-top:10px;padding-bottom:0}.rows,.columns{display:flex;flex-direction:column;width:45%}.input-title{display:flex;align-items:center;font-size:14px;font-weight:400;padding-bottom:10px}.input-title .mat-icon{margin-right:10px}.quick-select{display:flex;flex-direction:column}.quick-select-header{display:flex;padding-bottom:20px}.quick-select-title{padding:0 10px;font-size:10px;font-weight:500;letter-spacing:1px;text-transform:uppercase}.separator{flex:1;align-self:center;border-bottom-width:1px;border-bottom-style:solid}.row{display:flex;flex-direction:row}.cell-container{width:10%;aspect-ratio:1/1;padding:2px}.cell{height:100%;width:100%;border-width:1px;border-style:solid}.mat-mdc-form-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0}.mat-mdc-form-field ::ng-deep .mat-mdc-form-field-infix{display:flex;flex-direction:row;padding:0}.mat-mdc-form-field ::ng-deep .mdc-fab{width:48px;height:48px}.mat-mdc-input-element{text-align:center}.actions{text-align:end}.actions .mdc-fab:first-child{margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: InsertTableMobileComponent, isStandalone: true, selector: "app-nod-insert-table-mobile", ngImport: i0, template: "<div class=\"content\">\n    <div class=\"title\">{{ 'NODER.LABEL.TABLE_OPTIONS' | translate }}</div>\n    <div\n        class=\"inputs\"\n        [formGroup]=\"form\">\n        <div class=\"rows\">\n            <div class=\"input-title\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-table-rows\" />\n                {{ 'NODER.LABEL.ROWS' | translate }}:\n            </div>\n            <mat-form-field appearance=\"outline\">\n                <button\n                    mat-fab\n                    (click)=\"onChangeRows(-1)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-remove\" />\n                </button>\n                <input\n                    matInput\n                    required\n                    type=\"number\"\n                    [formControl]=\"form.controls.rows\"\n                    (change)=\"onChangeInputRow()\" />\n                <button\n                    mat-fab\n                    (click)=\"onChangeRows(1)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-add\" />\n                </button>\n                <mat-error>{{ 'NODER.LABEL.THE_ROW_IS_REQUIRED' | translate }}.</mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"columns\">\n            <div class=\"input-title\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-table-columns\" />\n                {{ 'NODER.LABEL.COLUMNS' | translate }}:\n            </div>\n            <mat-form-field appearance=\"outline\">\n                <button\n                    mat-fab\n                    (click)=\"onChangeColumns(-1)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-remove\" />\n                </button>\n                <input\n                    matInput\n                    required\n                    type=\"number\"\n                    [formControl]=\"form.controls.columns\"\n                    (change)=\"onChangeInputColumn()\" />\n                <button\n                    mat-fab\n                    (click)=\"onChangeColumns(1)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-add\" />\n                </button>\n                <mat-error>{{ 'NODER.LABEL.THE_COLUMN_IS_REQUIRED' | translate }}.</mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <div class=\"quick-select\">\n        <div class=\"quick-select-header\">\n            <div class=\"separator\"></div>\n            <div class=\"quick-select-title\">{{ 'NODER.LABEL.QUICK_SELECT' | translate }}</div>\n            <div class=\"separator\"></div>\n        </div>\n        <div class=\"selection\">\n            <ng-container *ngFor=\"let row of rows\">\n                <div class=\"row\">\n                    <ng-container *ngFor=\"let column of columns\">\n                        <div\n                            class=\"cell-container\"\n                            (click)=\"onSetTable(row, column)\">\n                            <div\n                                class=\"cell\"\n                                [class.highlighted]=\"row <= form.controls.rows.value && column <= form.controls.columns.value\"></div>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n<div class=\"actions\">\n    <button\n        mat-mini-fab\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n    </button>\n    <button\n        mat-mini-fab\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;padding:30px;justify-content:space-between;overflow:hidden}.title{font-size:16px;font-weight:500;padding-bottom:10px}.inputs{display:flex;justify-content:space-between;padding-top:10px;padding-bottom:0}.rows,.columns{display:flex;flex-direction:column;width:45%}.input-title{display:flex;align-items:center;font-size:14px;font-weight:400;padding-bottom:10px}.input-title .mat-icon{margin-right:10px}.quick-select{display:flex;flex-direction:column}.quick-select-header{display:flex;padding-bottom:20px}.quick-select-title{padding:0 10px;font-size:10px;font-weight:500;letter-spacing:1px;text-transform:uppercase}.separator{flex:1;align-self:center;border-bottom-width:1px;border-bottom-style:solid}.row{display:flex;flex-direction:row}.cell-container{width:10%;aspect-ratio:1/1;padding:2px}.cell{height:100%;width:100%;border-width:1px;border-style:solid}.mat-mdc-form-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0}.mat-mdc-form-field ::ng-deep .mat-mdc-form-field-infix{display:flex;flex-direction:row;padding:0}.mat-mdc-form-field ::ng-deep .mdc-fab{width:48px;height:48px}.mat-mdc-input-element{text-align:center}.actions{text-align:end}.actions .mdc-fab:first-child{margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InsertTableMobileComponent, decorators: [{
             type: Component,
@@ -16001,7 +16074,7 @@ class TextFormatMobileComponent {
         this.styles = { ...this.styles, ...style };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TextFormatMobileComponent, deps: [{ token: CustomIconService }, { token: EditorService }, { token: ToolbarCoreService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TextFormatMobileComponent, isStandalone: true, selector: "app-nod-text-format-mobile", ngImport: i0, template: "<div class=\"content\">\n    <div class=\"content-container\">\n        <div class=\"title\">{{ 'NODER.LABEL.FONT' | translate }}</div>\n        <div class=\"font\">\n            <app-nod-font\n                [styles]=\"styles\"\n                (selectFont)=\"onApplyFontFamily($event)\" />\n            <app-nod-font-size\n                [fontSize]=\"styles.fontSize\"\n                (selectFontSize)=\"onApplyFontSize($event)\" />\n        </div>\n    </div>\n    <div class=\"content-container\">\n        <div class=\"title\">{{ 'NODER.LABEL.TEXT_STYLE' | translate }}</div>\n        <div class=\"text-style-container\">\n            <mat-button-toggle\n                [checked]=\"styles.bold\"\n                (click)=\"onToggleBold()\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bold\" />\n            </mat-button-toggle>\n            <mat-button-toggle\n                [checked]=\"styles.italic\"\n                (click)=\"onToggleItalic()\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-italic\" />\n            </mat-button-toggle>\n            <mat-button-toggle\n                [checked]=\"styles.underline\"\n                (click)=\"onToggleUnderline()\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-underlined\" />\n            </mat-button-toggle>\n            <app-nod-color-picker\n                id=\"icon-format-colortext\"\n                class=\"text-color\"\n                icon=\"icon-format-colortext\"\n                [color]=\"styles.fontColor\"\n                [palette]=\"textColorPalette\"\n                (colorChange)=\"onSelectFontColor($event)\" />\n            <app-nod-color-picker\n                id=\"icon-link-highlighter\"\n                class=\"highlight-color\"\n                icon=\"icon-link-highlighter\"\n                [color]=\"styles.highlightColor\"\n                [palette]=\"highlightColorPalette\"\n                (colorChange)=\"onSelectHighlightColor($event)\" />\n        </div>\n    </div>\n    <div class=\"content-container\">\n        <div class=\"title\">{{ 'NODER.LABEL.ALIGNMENT' | translate }}</div>\n        <mat-button-toggle-group\n            name=\"format\"\n            [hideMultipleSelectionIndicator]=\"true\"\n            [hideSingleSelectionIndicator]=\"true\"\n            [value]=\"styles.alignment\"\n            (change)=\"onApplyAlignment($event.value)\">\n            <mat-button-toggle [value]=\"alignments.Left\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-alignleft\"></mat-icon>\n            </mat-button-toggle>\n            <mat-button-toggle [value]=\"alignments.Center\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-aligncenter\"></mat-icon>\n            </mat-button-toggle>\n            <mat-button-toggle [value]=\"alignments.Right\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-alignright\"></mat-icon>\n            </mat-button-toggle>\n            <mat-button-toggle\n                class=\"hide\"\n                [value]=\"alignments.Justify\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-align\"></mat-icon>\n            </mat-button-toggle>\n        </mat-button-toggle-group>\n    </div>\n    <div class=\"content-container\">\n        <div class=\"title\">{{ 'NODER.LABEL.BULLETED_AND_NUMBERED_LIST' | translate }}</div>\n        <div class=\"numbering-container\">\n            <div class=\"numbering-line\">\n                <div\n                    class=\"empty-numbering\"\n                    [class.selected]=\"selectedNumberingTemplate === null\"\n                    (click)=\"selectedNumberingTemplate = null\">\n                    {{ 'NODER.LABEL.NONE' | translate }}\n                </div>\n                <mat-icon\n                    svgIcon=\"marker-1\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList1\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList1\" />\n                <mat-icon\n                    svgIcon=\"marker-2\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList2\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList2\" />\n                <mat-icon\n                    svgIcon=\"marker-3\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList3\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList3\" />\n            </div>\n            <div class=\"numbering-line\">\n                <mat-icon\n                    svgIcon=\"marker-4\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList4\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList4\" />\n                <mat-icon\n                    svgIcon=\"marker-5\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList5\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList5\" />\n                <mat-icon\n                    svgIcon=\"marker-6\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList6\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList6\" />\n                <mat-icon\n                    svgIcon=\"number-1\"\n                    class=\"list-number\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList1\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.NumberList1\" />\n            </div>\n        </div>\n    </div>\n</div>\n<div class=\"actions\">\n    <button\n        mat-mini-fab\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n    </button>\n    <button\n        mat-mini-fab\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;padding:30px;justify-content:space-between;overflow:hidden}.content-container{padding-bottom:30px}.title{font-size:16px;font-weight:500;padding-bottom:10px}.font{display:flex;justify-content:space-between}.numbering-container{display:flex;flex-direction:column}.numbering-container .mat-icon{width:102px;height:120px;border-width:1px;border-style:solid}app-nod-font{width:65%}app-nod-font ::ng-deep .mat-mdc-button{height:48px;width:100%}app-nod-font ::ng-deep .mat-mdc-button .mdc-button__label{width:100%}app-nod-font ::ng-deep .mat-mdc-button .font-menu span{padding-left:5px}app-nod-font ::ng-deep .mat-mdc-button .mat-icon{margin:0}app-nod-font-size{display:flex;align-items:center;width:30%;border:1px solid;border-radius:4px;margin:0}app-nod-font-size ::ng-deep .mdc-button.mat-mdc-button{border:none}app-nod-font-size ::ng-deep input{flex:1}mat-button-toggle-group{display:flex;justify-content:space-between;border:none;box-shadow:none}mat-button-toggle-group .mat-button-toggle{width:102px;height:48px;border:none}.text-style-container{display:flex;justify-content:space-between}.text-style-container ::ng-deep .mdc-button.mat-mdc-button{border:none}.text-style-container ::ng-deep .mat-button-toggle,.text-style-container ::ng-deep .mat-mdc-button{width:80px;height:48px;margin:0;border:none}.empty-numbering{display:flex;justify-content:center;align-items:center;text-transform:uppercase;font-size:13;font-weight:400;border-width:1px;border-style:solid;width:102px;height:120px}.numbering-line{display:flex;flex-direction:row;justify-content:space-between;padding-bottom:10px}.actions{text-align:end}.actions .mdc-fab:first-child{margin-right:10px}.hide{display:none}\n"], dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "app-nod-color-picker", inputs: ["color", "icon", "isDisabled", "palette", "tooltip"], outputs: ["colorChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: FontComponent, selector: "app-nod-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-nod-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TextFormatMobileComponent, isStandalone: true, selector: "app-nod-text-format-mobile", ngImport: i0, template: "<div class=\"content\">\n    <div class=\"content-container\">\n        <div class=\"title\">{{ 'NODER.LABEL.FONT' | translate }}</div>\n        <div class=\"font\">\n            <app-nod-font\n                [styles]=\"styles\"\n                (selectFont)=\"onApplyFontFamily($event)\" />\n            <app-nod-font-size\n                [fontSize]=\"styles.fontSize\"\n                (selectFontSize)=\"onApplyFontSize($event)\" />\n        </div>\n    </div>\n    <div class=\"content-container\">\n        <div class=\"title\">{{ 'NODER.LABEL.TEXT_STYLE' | translate }}</div>\n        <div class=\"text-style-container\">\n            <mat-button-toggle\n                [checked]=\"styles.bold\"\n                (click)=\"onToggleBold()\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bold\" />\n            </mat-button-toggle>\n            <mat-button-toggle\n                [checked]=\"styles.italic\"\n                (click)=\"onToggleItalic()\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-italic\" />\n            </mat-button-toggle>\n            <mat-button-toggle\n                [checked]=\"styles.underline\"\n                (click)=\"onToggleUnderline()\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-underlined\" />\n            </mat-button-toggle>\n            <app-nod-color-picker\n                id=\"icon-format-colortext\"\n                class=\"text-color\"\n                icon=\"icon-format-colortext\"\n                [color]=\"styles.fontColor\"\n                [palette]=\"textColorPalette\"\n                (colorChange)=\"onSelectFontColor($event)\" />\n            <app-nod-color-picker\n                id=\"icon-link-highlighter\"\n                class=\"highlight-color\"\n                icon=\"icon-link-highlighter\"\n                [color]=\"styles.highlightColor\"\n                [palette]=\"highlightColorPalette\"\n                (colorChange)=\"onSelectHighlightColor($event)\" />\n        </div>\n    </div>\n    <div class=\"content-container\">\n        <div class=\"title\">{{ 'NODER.LABEL.ALIGNMENT' | translate }}</div>\n        <mat-button-toggle-group\n            name=\"format\"\n            [hideMultipleSelectionIndicator]=\"true\"\n            [hideSingleSelectionIndicator]=\"true\"\n            [value]=\"styles.alignment\"\n            (change)=\"onApplyAlignment($event.value)\">\n            <mat-button-toggle [value]=\"alignments.Left\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-alignleft\"></mat-icon>\n            </mat-button-toggle>\n            <mat-button-toggle [value]=\"alignments.Center\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-aligncenter\"></mat-icon>\n            </mat-button-toggle>\n            <mat-button-toggle [value]=\"alignments.Right\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-alignright\"></mat-icon>\n            </mat-button-toggle>\n            <mat-button-toggle\n                class=\"hide\"\n                [value]=\"alignments.Justify\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-align\"></mat-icon>\n            </mat-button-toggle>\n        </mat-button-toggle-group>\n    </div>\n    <div class=\"content-container\">\n        <div class=\"title\">{{ 'NODER.LABEL.BULLETED_AND_NUMBERED_LIST' | translate }}</div>\n        <div class=\"numbering-container\">\n            <div class=\"numbering-line\">\n                <div\n                    class=\"empty-numbering\"\n                    [class.selected]=\"selectedNumberingTemplate === null\"\n                    (click)=\"selectedNumberingTemplate = null\">\n                    {{ 'NODER.LABEL.NONE' | translate }}\n                </div>\n                <mat-icon\n                    svgIcon=\"marker-1\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList1\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList1\" />\n                <mat-icon\n                    svgIcon=\"marker-2\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList2\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList2\" />\n                <mat-icon\n                    svgIcon=\"marker-3\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList3\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList3\" />\n            </div>\n            <div class=\"numbering-line\">\n                <mat-icon\n                    svgIcon=\"marker-4\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList4\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList4\" />\n                <mat-icon\n                    svgIcon=\"marker-5\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList5\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList5\" />\n                <mat-icon\n                    svgIcon=\"marker-6\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList6\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList6\" />\n                <mat-icon\n                    svgIcon=\"number-1\"\n                    class=\"list-number\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList1\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.NumberList1\" />\n            </div>\n        </div>\n    </div>\n</div>\n<div class=\"actions\">\n    <button\n        mat-mini-fab\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n    </button>\n    <button\n        mat-mini-fab\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;padding:30px;justify-content:space-between;overflow:hidden}.content-container{padding-bottom:30px}.title{font-size:16px;font-weight:500;padding-bottom:10px}.font{display:flex;justify-content:space-between}.numbering-container{display:flex;flex-direction:column}.numbering-container .mat-icon{width:102px;height:120px;border-width:1px;border-style:solid}app-nod-font{width:65%}app-nod-font ::ng-deep .mat-mdc-button{height:48px;width:100%}app-nod-font ::ng-deep .mat-mdc-button .mdc-button__label{width:100%}app-nod-font ::ng-deep .mat-mdc-button .font-menu span{padding-left:5px}app-nod-font ::ng-deep .mat-mdc-button .mat-icon{margin:0}app-nod-font-size{display:flex;align-items:center;width:30%;border:1px solid;border-radius:4px;margin:0}app-nod-font-size ::ng-deep .mdc-button.mat-mdc-button{border:none}app-nod-font-size ::ng-deep input{flex:1}mat-button-toggle-group{display:flex;justify-content:space-between;border:none;box-shadow:none}mat-button-toggle-group .mat-button-toggle{width:102px;height:48px;border:none}.text-style-container{display:flex;justify-content:space-between}.text-style-container ::ng-deep .mdc-button.mat-mdc-button{border:none}.text-style-container ::ng-deep .mat-button-toggle,.text-style-container ::ng-deep .mat-mdc-button{width:80px;height:48px;margin:0;border:none}.empty-numbering{display:flex;justify-content:center;align-items:center;text-transform:uppercase;font-size:13;font-weight:400;border-width:1px;border-style:solid;width:102px;height:120px}.numbering-line{display:flex;flex-direction:row;justify-content:space-between;padding-bottom:10px}.actions{text-align:end}.actions .mdc-fab:first-child{margin-right:10px}.hide{display:none}\n"], dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "app-nod-color-picker", inputs: ["color", "icon", "isDisabled", "palette", "tooltip"], outputs: ["colorChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: FontComponent, selector: "app-nod-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-nod-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TextFormatMobileComponent, decorators: [{
             type: Component,
@@ -16069,7 +16142,7 @@ class ZoomComponent {
         trigger.panelOpen ? trigger.closePanel() : trigger.openPanel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ZoomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ZoomComponent, isStandalone: false, selector: "app-nod-zoom", viewQueries: [{ propertyName: "zoom", first: true, predicate: ["zoom"], descendants: true }], ngImport: i0, template: "<input\n    [matAutocomplete]=\"auto\"\n    [formControl]=\"myControl\"\n    #trigger=\"matAutocompleteTrigger\"\n    #zoom\n    (focusout)=\"onSetPreviousValue()\"\n    (keydown)=\"onKeyDown($event, trigger)\" />\n<button\n    mat-button\n    (click)=\"openPanel($event, trigger)\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n</button>\n<mat-autocomplete\n    class=\"zoom-autocomplite\"\n    #auto=\"matAutocomplete\"\n    [panelWidth]=\"80\">\n    <mat-option\n        *ngFor=\"let zoomPercentage of zoomPercentages\"\n        (click)=\"onSelectZoom(zoomPercentage)\">\n        {{ zoomPercentage }}%\n    </mat-option>\n</mat-autocomplete>\n", styles: [":host{display:flex;align-items:center;width:90px}.zoom-menu{display:flex;justify-content:space-between;align-items:center;min-width:100px}span{padding-left:10%}.mdc-button{min-width:20px;height:25px;padding:0;margin-right:10px}mat-icon{width:20px;margin-right:5%}input{padding-left:10px;font-size:14px;width:60px;border-color:transparent;outline:none}::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel{max-height:100%!important}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4$1.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: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ZoomComponent, isStandalone: false, selector: "app-nod-zoom", viewQueries: [{ propertyName: "zoom", first: true, predicate: ["zoom"], descendants: true }], ngImport: i0, template: "<input\n    [matAutocomplete]=\"auto\"\n    [formControl]=\"myControl\"\n    #trigger=\"matAutocompleteTrigger\"\n    #zoom\n    (focusout)=\"onSetPreviousValue()\"\n    (keydown)=\"onKeyDown($event, trigger)\" />\n<button\n    mat-button\n    (click)=\"openPanel($event, trigger)\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n</button>\n<mat-autocomplete\n    class=\"zoom-autocomplite\"\n    #auto=\"matAutocomplete\"\n    [panelWidth]=\"80\">\n    <mat-option\n        *ngFor=\"let zoomPercentage of zoomPercentages\"\n        (click)=\"onSelectZoom(zoomPercentage)\">\n        {{ zoomPercentage }}%\n    </mat-option>\n</mat-autocomplete>\n", styles: [":host{display:flex;align-items:center;width:90px}.zoom-menu{display:flex;justify-content:space-between;align-items:center;min-width:100px}span{padding-left:10%}.mdc-button{min-width:20px;height:25px;padding:0;margin-right:10px}mat-icon{width:20px;margin-right:5%}input{padding-left:10px;font-size:14px;width:60px;border-color:transparent;outline:none}::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel{max-height:100%!important}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ZoomComponent, decorators: [{
             type: Component,
@@ -16173,6 +16246,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }] });
 
+var DocumentAreas;
+(function (DocumentAreas) {
+    DocumentAreas[DocumentAreas["WholeDocument"] = 0] = "WholeDocument";
+    DocumentAreas[DocumentAreas["SelectedText"] = 1] = "SelectedText";
+    DocumentAreas[DocumentAreas["ThisSection"] = 2] = "ThisSection";
+})(DocumentAreas || (DocumentAreas = {}));
+
 var PageOrientations;
 (function (PageOrientations) {
     PageOrientations[PageOrientations["Portrait"] = 1] = "Portrait";
@@ -16185,6 +16265,419 @@ var PageSizeUnits;
     PageSizeUnits[PageSizeUnits["Inches"] = 1] = "Inches";
 })(PageSizeUnits || (PageSizeUnits = {}));
 
+class PageSizeModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+const PAGE_SIZES = [
+    new PageSizeModel({
+        name: 'A0',
+        size: '(841 x 1189mm)',
+        width: 3179,
+        height: 4494,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Millimeters,
+        customWidth: 841,
+        customHeight: 1189
+    }),
+    new PageSizeModel({
+        name: 'A1',
+        size: '(594 x 841mm)',
+        width: 2245,
+        height: 3179,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Millimeters,
+        customWidth: 594,
+        customHeight: 841
+    }),
+    new PageSizeModel({
+        name: 'A2',
+        size: '(420 x 594mm)',
+        width: 1587,
+        height: 2245,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Millimeters,
+        customWidth: 420,
+        customHeight: 594
+    }),
+    new PageSizeModel({
+        name: 'A3',
+        size: '(297 x 420mm)',
+        width: 1123,
+        height: 1587,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Millimeters,
+        customWidth: 297,
+        customHeight: 420
+    }),
+    new PageSizeModel({
+        name: 'A4',
+        size: '(210 x 297mm)',
+        width: 794,
+        height: 1123,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Millimeters,
+        customWidth: 210,
+        customHeight: 297
+    }),
+    new PageSizeModel({
+        name: 'A5',
+        size: '(148 x 210mm)',
+        width: 559,
+        height: 794,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Millimeters,
+        customWidth: 148,
+        customHeight: 210
+    }),
+    new PageSizeModel({
+        name: 'A6',
+        size: '(105 x 148mm)',
+        width: 397,
+        height: 559,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Millimeters,
+        customWidth: 105,
+        customHeight: 148
+    }),
+    new PageSizeModel({
+        name: 'A7',
+        size: '(74 x 105mm)',
+        width: 280,
+        height: 397,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Millimeters,
+        customWidth: 74,
+        customHeight: 105
+    }),
+    new PageSizeModel({
+        name: 'A8',
+        size: '(52 x 74mm)',
+        width: 197,
+        height: 280,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Millimeters,
+        customWidth: 52,
+        customHeight: 74
+    }),
+    new PageSizeModel({
+        name: 'A9',
+        size: '(37 x 52mm)',
+        width: 140,
+        height: 197,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Millimeters,
+        customWidth: 37,
+        customHeight: 52
+    }),
+    new PageSizeModel({
+        name: 'A10',
+        size: '(26 x 37mm)',
+        width: 98,
+        height: 140,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Millimeters,
+        customWidth: 26,
+        customHeight: 37
+    }),
+    new PageSizeModel({
+        name: 'Letter (US)',
+        size: '8.5 x 11 inches (215.9 x 279.4 mm)',
+        width: 816,
+        height: 1056,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Inches,
+        customWidth: 8.5,
+        customHeight: 11
+    }),
+    new PageSizeModel({
+        name: 'Legal (US)',
+        size: '8.5 x 14 inches (215.9 x 355.6 mm)',
+        width: 816,
+        height: 1344,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Inches,
+        customWidth: 8.5,
+        customHeight: 14
+    }),
+    new PageSizeModel({
+        name: 'Tabloid (Ledger)',
+        size: '11 x 17 inches (279.4 x 431.8 mm)',
+        width: 1056,
+        height: 1632,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Inches,
+        customWidth: 11,
+        customHeight: 17
+    }),
+    new PageSizeModel({
+        name: 'B5',
+        size: '(176 x 250 mm)',
+        width: 665,
+        height: 945,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Millimeters,
+        customWidth: 176,
+        customHeight: 250
+    }),
+    new PageSizeModel({
+        name: 'B4',
+        size: '(250 x 353 mm)',
+        width: 945,
+        height: 1334,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Millimeters,
+        customWidth: 250,
+        customHeight: 353
+    }),
+    new PageSizeModel({
+        name: 'C4',
+        size: '229 x 324 mm (for envelopes)',
+        width: 866,
+        height: 1225,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Millimeters,
+        customWidth: 229,
+        customHeight: 324
+    }),
+    new PageSizeModel({
+        name: 'C5',
+        size: '162 x 229 mm (for envelopes)',
+        width: 612,
+        height: 866,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Millimeters,
+        customWidth: 162,
+        customHeight: 229
+    }),
+    new PageSizeModel({
+        name: 'C6',
+        size: '114 x 162 mm (for envelopes)',
+        width: 431,
+        height: 612,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Millimeters,
+        customWidth: 114,
+        customHeight: 162
+    }),
+    new PageSizeModel({
+        name: 'DL',
+        size: '(110 x 220 mm)',
+        width: 416,
+        height: 831,
+        orientation: PageOrientations.Portrait,
+        isCustom: false,
+        unit: PageSizeUnits.Millimeters,
+        customWidth: 110,
+        customHeight: 220
+    })
+];
+
+class PageSetupComponent {
+    constructor(editorService, toolbarCoreService, translateService) {
+        this.editorService = editorService;
+        this.toolbarCoreService = toolbarCoreService;
+        this.translateService = translateService;
+        this.selectedDocumentArea = DocumentAreas.WholeDocument;
+        this.hasSelection$ = this.editorService.hasSelection$;
+        this.pageOrientations = PageOrientations;
+        this.pageSizes = PAGE_SIZES;
+        this.documentAreas = DocumentAreas;
+        this.sizeUnits = PageSizeUnits;
+        this.rateInch = 96;
+        this.rateMillimeter = 3.78;
+    }
+    ngOnInit() {
+        this.pageSize = this.getPageSize(this.editorService.pageFormat);
+        this.pageSizeName = this.pageSize.name;
+        if (this.pageSize.unit === PageSizeUnits.Millimeters) {
+            this.currentUnit = ' (' + this.translateService.instant('NODER.LABEL.MILLIMETERS') + ')';
+        }
+        else {
+            this.currentUnit = ' (' + this.translateService.instant('NODER.LABEL.INCHES') + ')';
+        }
+    }
+    onPageSizeChange() {
+        this.pageSizeForm.form.markAsDirty();
+        this.pageSize = new PageSizeModel({ ...this.pageSizes.find(x => x.name === this.pageSizeName) });
+    }
+    onPageOrientationChanged() {
+        if (this.pageSize.isCustom) {
+            const height = this.pageSize.customHeight;
+            this.pageSize.customHeight = this.pageSize.customWidth;
+            this.pageSize.customWidth = height;
+        }
+    }
+    onUnitChanged(event) {
+        if (event === PageSizeUnits.Millimeters) {
+            this.pageSize.customWidth = Math.round(this.pageSize.customWidth * 25.4);
+            this.pageSize.customHeight = Math.round(this.pageSize.customHeight * 25.4);
+            this.currentUnit = ' (' + this.translateService.instant('NODER.LABEL.MILLIMETERS') + ')';
+        }
+        else {
+            this.pageSize.customWidth = Math.round(this.pageSize.customWidth * 0.0393701 * 100) / 100;
+            this.pageSize.customHeight = Math.round(this.pageSize.customHeight * 0.0393701 * 100) / 100;
+            this.currentUnit = ' (' + this.translateService.instant('NODER.LABEL.INCHES') + ')';
+        }
+    }
+    toggleCustomSize(event) {
+        this.pageSizeForm.form.markAsDirty();
+        if (event.checked) {
+            this.pageSize = new PageSizeModel({
+                name: 'Custom size',
+                size: 'custom',
+                width: 0,
+                height: 0,
+                orientation: this.pageSize.orientation,
+                isCustom: true,
+                unit: this.pageSize.unit,
+                customWidth: this.pageSize.orientation == PageOrientations.Portrait ? this.pageSize.customWidth : this.pageSize.customHeight,
+                customHeight: this.pageSize.orientation == PageOrientations.Portrait ? this.pageSize.customHeight : this.pageSize.customWidth
+            });
+            return;
+        }
+        const size = new PageSizeModel({
+            ...this.pageSizes.find(x => (x.customWidth == this.pageSize.customWidth && x.customHeight == this.pageSize.customHeight) ||
+                (x.customWidth == this.pageSize.customHeight && x.customHeight == this.pageSize.customWidth))
+        });
+        if (size != null) {
+            size.orientation =
+                this.pageSize.customHeight >= this.pageSize.customWidth ? PageOrientations.Portrait : PageOrientations.Landscape;
+            size.isCustom = false;
+            this.pageSize = size;
+            return;
+        }
+        this.pageSize = new PageSizeModel({
+            ...this.pageSizes.find(x => x.name == 'A4')
+        });
+    }
+    onIncrementWidth() {
+        if (this.pageSize.unit === PageSizeUnits.Millimeters) {
+            this.pageSize.customWidth += 1;
+        }
+        else {
+            this.pageSize.customWidth = Math.round((this.pageSize.customWidth + 0.01) * 100) / 100;
+        }
+    }
+    onDecrementWidth() {
+        if (this.pageSize.unit === PageSizeUnits.Millimeters) {
+            this.pageSize.customWidth -= 1;
+        }
+        else {
+            this.pageSize.customWidth = Math.round((this.pageSize.customWidth - 0.01) * 100) / 100;
+        }
+    }
+    onIncrementHeight() {
+        if (this.pageSize.unit === PageSizeUnits.Millimeters) {
+            this.pageSize.customHeight += 1;
+        }
+        else {
+            this.pageSize.customHeight = Math.round((this.pageSize.customHeight + 0.01) * 100) / 100;
+        }
+    }
+    onDecrementHeight() {
+        if (this.pageSize.unit === PageSizeUnits.Millimeters) {
+            this.pageSize.customHeight -= 1;
+        }
+        else {
+            this.pageSize.customHeight = Math.round((this.pageSize.customHeight - 0.01) * 100) / 100;
+        }
+    }
+    onClose() {
+        this.toolbarCoreService.reset();
+    }
+    onApply() {
+        if (this.pageSize.isCustom) {
+            const rate = this.pageSize.unit === PageSizeUnits.Millimeters ? this.rateMillimeter : this.rateInch;
+            this.pageSize.width = Math.round(this.pageSize.customWidth * rate);
+            this.pageSize.height = Math.round(this.pageSize.customHeight * rate);
+        }
+        const pageFormat = new PageFormatModel({
+            pageHeight: this.pageSize.orientation == PageOrientations.Portrait ? this.pageSize.height : this.pageSize.width,
+            pageWidth: this.pageSize.orientation == PageOrientations.Portrait ? this.pageSize.width : this.pageSize.height,
+            unit: this.pageSize.unit,
+            pageOrientation: this.pageSize.orientation
+        });
+        switch (this.selectedDocumentArea) {
+            case DocumentAreas.SelectedText:
+                this.editorService.insertPageFormat(pageFormat);
+                break;
+            case DocumentAreas.ThisSection:
+                this.editorService.applyPageFormat(pageFormat);
+                break;
+            case DocumentAreas.WholeDocument:
+                this.editorService.applyDocumentPageFormat(pageFormat);
+                break;
+        }
+        this.toolbarCoreService.reset();
+    }
+    getPageSize(pageFormat) {
+        const pageSize = new PageSizeModel({
+            ...this.pageSizes.find(x => (x.width == pageFormat.pageWidth && x.height == pageFormat.pageHeight) ||
+                (x.width == pageFormat.pageHeight && x.height == pageFormat.pageWidth))
+        });
+        if (pageSize != null) {
+            pageSize.orientation = pageFormat.pageHeight >= pageFormat.pageWidth ? PageOrientations.Portrait : PageOrientations.Landscape;
+            pageSize.isCustom = false;
+            return pageSize;
+        }
+        const rate = pageFormat.unit === PageSizeUnits.Millimeters ? this.rateMillimeter : this.rateInch;
+        const customPageSize = new PageSizeModel({
+            name: 'Custom Size',
+            customHeight: Math.round(pageFormat.pageHeight / rate),
+            customWidth: Math.round(pageFormat.pageWidth / rate),
+            size: 'custom',
+            isCustom: true,
+            orientation: pageFormat.pageHeight > pageFormat.pageWidth ? PageOrientations.Portrait : PageOrientations.Landscape,
+            unit: pageFormat.unit
+        });
+        return customPageSize;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PageSetupComponent, deps: [{ token: EditorService }, { token: ToolbarCoreService }, { token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PageSetupComponent, isStandalone: true, selector: "app-nod-page-setup", viewQueries: [{ propertyName: "pageSizeForm", first: true, predicate: ["pageSizeForm"], descendants: true }], ngImport: i0, template: "<div class=\"title\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        (click)=\"onClose()\"\n        fontIcon=\"icon-arrow-forward\" />\n    <span>{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n</div>\n<form #pageSizeForm=\"ngForm\">\n    <div class=\"content\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.APPLY_TO' | translate }}</mat-label>\n            <mat-select [(value)]=\"selectedDocumentArea\">\n                <mat-option [value]=\"documentAreas.WholeDocument\">{{ 'NODER.LABEL.WHOLE_DOCUMENT' | translate }}</mat-option>\n                <mat-option [value]=\"documentAreas.ThisSection\">{{ 'NODER.LABEL.THIS_SECTION' | translate }}</mat-option>\n                @if (hasSelection$ | async) {\n                    <mat-option [value]=\"documentAreas.SelectedText\">{{ 'NODER.LABEL.SELECTED_TEXT' | translate }}</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n        <div class=\"orientation\">\n            <div class=\"label\">{{ 'NODER.LABEL.ORIENTATION' | translate }}</div>\n            <mat-radio-group\n                aria-label=\"Select an option\"\n                [(ngModel)]=\"pageSize.orientation\"\n                name=\"orientation\"\n                (change)=\"onPageOrientationChanged()\">\n                <mat-radio-button [value]=\"pageOrientations.Portrait\">\n                    <span>{{ 'NODER.LABEL.PORTRAIT' | translate }}</span>\n                </mat-radio-button>\n                <mat-radio-button [value]=\"pageOrientations.Landscape\">\n                    <span>{{ 'NODER.LABEL.LANDSCAPE' | translate }}</span>\n                </mat-radio-button>\n            </mat-radio-group>\n        </div>\n        <div class=\"page-format\">\n            <div class=\"page-format-tile\">\n                <div class=\"label\">{{ 'NODER.LABEL.PAGE_FORMAT' | translate }}</div>\n                <div class=\"checkbox-area\">\n                    <div class=\"checkbox-label\">{{ 'NODER.LABEL.CUSTOM_SIZE' | translate }}</div>\n                    <mat-checkbox\n                        [checked]=\"pageSize.isCustom\"\n                        (change)=\"toggleCustomSize($event)\" />\n                </div>\n            </div>\n            @if (!pageSize.isCustom) {\n                <div class=\"page-size\">\n                    <mat-form-field appearance=\"outline\">\n                        <mat-label>{{ 'NODER.LABEL.SIZE' | translate }}</mat-label>\n                        <mat-select\n                            [(value)]=\"pageSizeName\"\n                            (selectionChange)=\"onPageSizeChange()\">\n                            @for (option of pageSizes; track option) {\n                                <mat-option [value]=\"option.name\">\n                                    <div class=\"size-option\">\n                                        <span class=\"option-name\">{{ option.name + ' ' }}</span>\n                                        <span class=\"option-size\">{{ option.size }}</span>\n                                    </div>\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n            } @else {\n                <div class=\"page-custom-size\">\n                    <mat-form-field\n                        appearance=\"outline\"\n                        class=\"size-unit\">\n                        <mat-label>{{ 'NODER.LABEL.MEASURE' | translate }}</mat-label>\n                        <mat-select\n                            [(ngModel)]=\"pageSize.unit\"\n                            name=\"unit\"\n                            (valueChange)=\"onUnitChanged($event)\">\n                            <mat-option [value]=\"sizeUnits.Millimeters\">{{ 'NODER.LABEL.MILLIMETERS' | translate }}</mat-option>\n                            <mat-option [value]=\"sizeUnits.Inches\">{{ 'NODER.LABEL.INCHES' | translate }}</mat-option>\n                        </mat-select>\n                    </mat-form-field>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-width\">\n                            <mat-label>{{ ('NODER.LABEL.WIDTH' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customWidth\"\n                                name=\"customWidth\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-height\">\n                            <mat-label>{{ ('NODER.LABEL.HEIGHT' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customHeight\"\n                                name=\"customHeight\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n    <div class=\"actions\">\n        <button\n            mat-stroked-button\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-cancel-thin\" />\n        </button>\n        <button\n            mat-flat-button\n            color=\"primary\"\n            (click)=\"onApply()\"\n            [disabled]=\"pageSizeForm.pristine\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-done-thin\" />\n        </button>\n    </div>\n</form>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:400px}.title{margin:12px 16px;height:32px;display:flex;align-items:center;gap:8px}.title span{overflow:hidden;text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:normal}.content{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:8px 16px 0;gap:24px}.actions{display:flex;justify-content:flex-end;margin:0 16px 16px;gap:10px}.actions .mdc-button{width:32px;height:32px;min-width:32px;padding:0}.actions .mdc-button .mat-icon{margin-right:0;margin-left:0}.orientation{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.orientation mat-radio-group{display:flex;width:100%;gap:16px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.page-format{display:flex;flex-direction:column;gap:16px}.page-format-tile{display:flex;align-items:center;justify-content:space-between}.page-format-tile .checkbox-area{display:flex;align-items:center}.checkbox-label{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.custom-width,.custom-height,.size-unit{width:120px}.page-custom-size{display:flex;flex-direction:column}.size-panel{display:flex;gap:10px}.size-panel .mdc-button{width:40px;height:40px;min-width:40px;padding:0}.size-panel .mdc-button .mat-icon{margin-right:0;margin-left:0}.size-option{display:flex;flex-direction:column}.option-name{font-weight:400}.option-size{font-size:12px}form{display:flex;flex-direction:column;flex:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PageSetupComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        AsyncPipe,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        TranslateModule,
+                        MatSelectModule,
+                        MatCheckboxModule,
+                        FormsModule,
+                        MatRadioModule
+                    ], selector: 'app-nod-page-setup', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"title\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        (click)=\"onClose()\"\n        fontIcon=\"icon-arrow-forward\" />\n    <span>{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n</div>\n<form #pageSizeForm=\"ngForm\">\n    <div class=\"content\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.APPLY_TO' | translate }}</mat-label>\n            <mat-select [(value)]=\"selectedDocumentArea\">\n                <mat-option [value]=\"documentAreas.WholeDocument\">{{ 'NODER.LABEL.WHOLE_DOCUMENT' | translate }}</mat-option>\n                <mat-option [value]=\"documentAreas.ThisSection\">{{ 'NODER.LABEL.THIS_SECTION' | translate }}</mat-option>\n                @if (hasSelection$ | async) {\n                    <mat-option [value]=\"documentAreas.SelectedText\">{{ 'NODER.LABEL.SELECTED_TEXT' | translate }}</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n        <div class=\"orientation\">\n            <div class=\"label\">{{ 'NODER.LABEL.ORIENTATION' | translate }}</div>\n            <mat-radio-group\n                aria-label=\"Select an option\"\n                [(ngModel)]=\"pageSize.orientation\"\n                name=\"orientation\"\n                (change)=\"onPageOrientationChanged()\">\n                <mat-radio-button [value]=\"pageOrientations.Portrait\">\n                    <span>{{ 'NODER.LABEL.PORTRAIT' | translate }}</span>\n                </mat-radio-button>\n                <mat-radio-button [value]=\"pageOrientations.Landscape\">\n                    <span>{{ 'NODER.LABEL.LANDSCAPE' | translate }}</span>\n                </mat-radio-button>\n            </mat-radio-group>\n        </div>\n        <div class=\"page-format\">\n            <div class=\"page-format-tile\">\n                <div class=\"label\">{{ 'NODER.LABEL.PAGE_FORMAT' | translate }}</div>\n                <div class=\"checkbox-area\">\n                    <div class=\"checkbox-label\">{{ 'NODER.LABEL.CUSTOM_SIZE' | translate }}</div>\n                    <mat-checkbox\n                        [checked]=\"pageSize.isCustom\"\n                        (change)=\"toggleCustomSize($event)\" />\n                </div>\n            </div>\n            @if (!pageSize.isCustom) {\n                <div class=\"page-size\">\n                    <mat-form-field appearance=\"outline\">\n                        <mat-label>{{ 'NODER.LABEL.SIZE' | translate }}</mat-label>\n                        <mat-select\n                            [(value)]=\"pageSizeName\"\n                            (selectionChange)=\"onPageSizeChange()\">\n                            @for (option of pageSizes; track option) {\n                                <mat-option [value]=\"option.name\">\n                                    <div class=\"size-option\">\n                                        <span class=\"option-name\">{{ option.name + ' ' }}</span>\n                                        <span class=\"option-size\">{{ option.size }}</span>\n                                    </div>\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n            } @else {\n                <div class=\"page-custom-size\">\n                    <mat-form-field\n                        appearance=\"outline\"\n                        class=\"size-unit\">\n                        <mat-label>{{ 'NODER.LABEL.MEASURE' | translate }}</mat-label>\n                        <mat-select\n                            [(ngModel)]=\"pageSize.unit\"\n                            name=\"unit\"\n                            (valueChange)=\"onUnitChanged($event)\">\n                            <mat-option [value]=\"sizeUnits.Millimeters\">{{ 'NODER.LABEL.MILLIMETERS' | translate }}</mat-option>\n                            <mat-option [value]=\"sizeUnits.Inches\">{{ 'NODER.LABEL.INCHES' | translate }}</mat-option>\n                        </mat-select>\n                    </mat-form-field>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-width\">\n                            <mat-label>{{ ('NODER.LABEL.WIDTH' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customWidth\"\n                                name=\"customWidth\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-height\">\n                            <mat-label>{{ ('NODER.LABEL.HEIGHT' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customHeight\"\n                                name=\"customHeight\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n    <div class=\"actions\">\n        <button\n            mat-stroked-button\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-cancel-thin\" />\n        </button>\n        <button\n            mat-flat-button\n            color=\"primary\"\n            (click)=\"onApply()\"\n            [disabled]=\"pageSizeForm.pristine\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-done-thin\" />\n        </button>\n    </div>\n</form>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:400px}.title{margin:12px 16px;height:32px;display:flex;align-items:center;gap:8px}.title span{overflow:hidden;text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:normal}.content{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:8px 16px 0;gap:24px}.actions{display:flex;justify-content:flex-end;margin:0 16px 16px;gap:10px}.actions .mdc-button{width:32px;height:32px;min-width:32px;padding:0}.actions .mdc-button .mat-icon{margin-right:0;margin-left:0}.orientation{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.orientation mat-radio-group{display:flex;width:100%;gap:16px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.page-format{display:flex;flex-direction:column;gap:16px}.page-format-tile{display:flex;align-items:center;justify-content:space-between}.page-format-tile .checkbox-area{display:flex;align-items:center}.checkbox-label{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.custom-width,.custom-height,.size-unit{width:120px}.page-custom-size{display:flex;flex-direction:column}.size-panel{display:flex;gap:10px}.size-panel .mdc-button{width:40px;height:40px;min-width:40px;padding:0}.size-panel .mdc-button .mat-icon{margin-right:0;margin-left:0}.size-option{display:flex;flex-direction:column}.option-name{font-weight:400}.option-size{font-size:12px}form{display:flex;flex-direction:column;flex:1}\n"] }]
+        }], ctorParameters: () => [{ type: EditorService }, { type: ToolbarCoreService }, { type: i3$1.TranslateService }], propDecorators: { pageSizeForm: [{
+                type: ViewChild,
+                args: ['pageSizeForm']
+            }] } });
+
 class RevisionHelper {
     static applyOperationsToRevision(revision, operations) {
         operations.sort((a, b) => a.createTime - b.createTime);
@@ -16315,7 +16808,7 @@ class AddLinkDialogComponent {
         this.dialogRef.close({ text: this.form.controls.text.value, link: this.form.controls.link.value });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AddLinkDialogComponent, isStandalone: true, selector: "app-nod-add-link-dialog", host: { listeners: { "keydown.esc": "onClose()", "keydown.enter": "onApply()" }, properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<div mat-dialog-title>{{ 'NODER.LABEL.ADD_LINK' | translate }}</div>\n<div\n    mat-dialog-content\n    [formGroup]=\"form\">\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.TEXT' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.text\"\n            required />\n        <mat-error>{{ 'NODER.LABEL.THE_TEXT_IS_REQUIRED' | translate }}.</mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.LINK' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.link\"\n            required />\n        <mat-error>{{ 'NODER.LABEL.THE_LINK_IS_REQUIRED' | translate }}.</mat-error>\n    </mat-form-field>\n</div>\n<div mat-dialog-actions>\n    <button\n        mat-button\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n        {{ 'NODER.LABEL.CANCEL' | translate }}\n    </button>\n    <button\n        mat-raised-button\n        color=\"primary\"\n        class=\"apply-btn\"\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n        {{ 'NODER.LABEL.APPLY' | translate }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:300px;width:430px;overflow:hidden}:host ::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 12px;height:48px}:host ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:12px}.mat-mdc-dialog-title{font-weight:600;padding-top:5px}mat-form-field{width:100%}.mat-mdc-dialog-content{padding-top:10px!important;padding-bottom:0}.mat-mdc-dialog-actions{display:flex;justify-content:center;padding-top:5px;height:40px;margin-bottom:30px}.mat-mdc-dialog-actions button{width:30%;height:100%;letter-spacing:1px;border-radius:8px;text-transform:uppercase}.mat-mdc-dialog-actions button .apply-btn{font-weight:400}.mat-mdc-dialog-actions button .mat-icon{font-size:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AddLinkDialogComponent, isStandalone: true, selector: "app-nod-add-link-dialog", host: { listeners: { "keydown.esc": "onClose()", "keydown.enter": "onApply()" }, properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<div mat-dialog-title>{{ 'NODER.LABEL.ADD_LINK' | translate }}</div>\n<div\n    mat-dialog-content\n    [formGroup]=\"form\">\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.TEXT' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.text\"\n            required />\n        <mat-error>{{ 'NODER.LABEL.THE_TEXT_IS_REQUIRED' | translate }}.</mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.LINK' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.link\"\n            required />\n        <mat-error>{{ 'NODER.LABEL.THE_LINK_IS_REQUIRED' | translate }}.</mat-error>\n    </mat-form-field>\n</div>\n<div mat-dialog-actions>\n    <button\n        mat-button\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n        {{ 'NODER.LABEL.CANCEL' | translate }}\n    </button>\n    <button\n        mat-raised-button\n        color=\"primary\"\n        class=\"apply-btn\"\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n        {{ 'NODER.LABEL.APPLY' | translate }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:300px;width:430px;overflow:hidden}:host ::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 12px;height:48px}:host ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:12px}.mat-mdc-dialog-title{font-weight:600;padding-top:5px}mat-form-field{width:100%}.mat-mdc-dialog-content{padding-top:10px!important;padding-bottom:0}.mat-mdc-dialog-actions{display:flex;justify-content:center;padding-top:5px;height:40px;margin-bottom:30px}.mat-mdc-dialog-actions button{width:30%;height:100%;letter-spacing:1px;border-radius:8px;text-transform:uppercase}.mat-mdc-dialog-actions button .apply-btn{font-weight:400}.mat-mdc-dialog-actions button .mat-icon{font-size:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkDialogComponent, decorators: [{
             type: Component,
@@ -16364,7 +16857,7 @@ class AddLinkMobileComponent {
         this.onApply();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkMobileComponent, deps: [{ token: EditorService }, { token: i2.FormBuilder }, { token: ToolbarCoreService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AddLinkMobileComponent, isStandalone: true, selector: "app-nod-add-link-mobile", ngImport: i0, template: "<div class=\"content\">\n    <div class=\"title\">{{ 'NODER.LABEL.LINK_OPTIONS' | translate }}</div>\n    <div\n        class=\"inputs\"\n        [formGroup]=\"form\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.TEXT' | translate }}</mat-label>\n            <input\n                matInput\n                [formControl]=\"form.controls.text\"\n                (keydown.enter)=\"onEnter()\"\n                required />\n            <mat-error>{{ 'NODER.LABEL.THE_TEXT_IS_REQUIRED' | translate }}.</mat-error>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.LINK' | translate }}</mat-label>\n            <input\n                matInput\n                [formControl]=\"form.controls.link\"\n                (keydown.enter)=\"onEnter()\"\n                required />\n            <mat-error>{{ 'NODER.LABEL.THE_LINK_IS_REQUIRED' | translate }}.</mat-error>\n        </mat-form-field>\n    </div>\n</div>\n<div class=\"actions\">\n    <button\n        mat-mini-fab\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n    </button>\n    <button\n        mat-mini-fab\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;padding:30px;justify-content:space-between;overflow:hidden}:host ::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 12px;height:48px}:host ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:12px}.title{font-size:16px;font-weight:500}mat-form-field{width:100%}.inputs{padding-top:10px;padding-bottom:0}.actions{text-align:end}.actions .mdc-fab:first-child{margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AddLinkMobileComponent, isStandalone: true, selector: "app-nod-add-link-mobile", ngImport: i0, template: "<div class=\"content\">\n    <div class=\"title\">{{ 'NODER.LABEL.LINK_OPTIONS' | translate }}</div>\n    <div\n        class=\"inputs\"\n        [formGroup]=\"form\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.TEXT' | translate }}</mat-label>\n            <input\n                matInput\n                [formControl]=\"form.controls.text\"\n                (keydown.enter)=\"onEnter()\"\n                required />\n            <mat-error>{{ 'NODER.LABEL.THE_TEXT_IS_REQUIRED' | translate }}.</mat-error>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.LINK' | translate }}</mat-label>\n            <input\n                matInput\n                [formControl]=\"form.controls.link\"\n                (keydown.enter)=\"onEnter()\"\n                required />\n            <mat-error>{{ 'NODER.LABEL.THE_LINK_IS_REQUIRED' | translate }}.</mat-error>\n        </mat-form-field>\n    </div>\n</div>\n<div class=\"actions\">\n    <button\n        mat-mini-fab\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n    </button>\n    <button\n        mat-mini-fab\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;padding:30px;justify-content:space-between;overflow:hidden}:host ::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 12px;height:48px}:host ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:12px}.title{font-size:16px;font-weight:500}mat-form-field{width:100%}.inputs{padding-top:10px;padding-bottom:0}.actions{text-align:end}.actions .mdc-fab:first-child{margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkMobileComponent, decorators: [{
             type: Component,
@@ -16381,7 +16874,7 @@ class ConfirmDialogComponent {
         this.ref.close(status);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ConfirmDialogComponent, isStandalone: true, selector: "app-nod-confirm-dialog", host: { properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<p class=\"title\">{{ data.title ? data.title : ('NODER.LABEL.CONFIRMATION' | translate) }}</p>\n<div class=\"content\">\n    <p>{{ data.message }}</p>\n</div>\n<div class=\"actions\">\n    <button\n        id=\"confirm-dialog-cancel-btn\"\n        mat-button\n        (click)=\"onClose(false)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n        {{ data.cancel ? data.cancel : ('NODER.LABEL.CANCEL' | translate) }}\n    </button>\n    <button\n        id=\"confirm-dialog-confirm-btn\"\n        mat-raised-button\n        class=\"delete-btn\"\n        color=\"primary\"\n        (click)=\"onClose(true)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\"></mat-icon>\n        {{ data.confirm ? data.confirm : ('NODER.LABEL.DELETE' | translate) }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:400px;max-width:440px;min-height:208px}.title{font-size:18px;font-weight:700;text-transform:capitalize;padding:24px 24px 12px;margin:0;border-bottom-width:1px;border-bottom-style:solid}.content{display:flex;flex:1;font-size:16px;line-height:20px;padding:20px 24px 16px}.content p{margin:0;overflow:hidden;text-overflow:ellipsis}.actions{display:flex;justify-content:center;margin-bottom:24px;gap:8px}.actions button{height:40px;width:120px;text-transform:uppercase}.actions button mat-icon{font-size:24px;height:24px;width:24px}.actions button .mat-button-toggle-label-content{padding:0 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ConfirmDialogComponent, isStandalone: true, selector: "app-nod-confirm-dialog", host: { properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<p class=\"title\">{{ data.title ? data.title : ('NODER.LABEL.CONFIRMATION' | translate) }}</p>\n<div class=\"content\">\n    <p>{{ data.message }}</p>\n</div>\n<div class=\"actions\">\n    <button\n        id=\"confirm-dialog-cancel-btn\"\n        mat-button\n        (click)=\"onClose(false)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n        {{ data.cancel ? data.cancel : ('NODER.LABEL.CANCEL' | translate) }}\n    </button>\n    <button\n        id=\"confirm-dialog-confirm-btn\"\n        mat-raised-button\n        class=\"delete-btn\"\n        color=\"primary\"\n        (click)=\"onClose(true)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\"></mat-icon>\n        {{ data.confirm ? data.confirm : ('NODER.LABEL.DELETE' | translate) }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:400px;max-width:440px;min-height:208px}.title{font-size:18px;font-weight:700;text-transform:capitalize;padding:24px 24px 12px;margin:0;border-bottom-width:1px;border-bottom-style:solid}.content{display:flex;flex:1;font-size:16px;line-height:20px;padding:20px 24px 16px}.content p{margin:0;overflow:hidden;text-overflow:ellipsis}.actions{display:flex;justify-content:center;margin-bottom:24px;gap:8px}.actions button{height:40px;width:120px;text-transform:uppercase}.actions button mat-icon{font-size:24px;height:24px;width:24px}.actions button .mat-button-toggle-label-content{padding:0 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
@@ -16455,5 +16948,5 @@ class OperationModel {
  * Generated bundle index. Do not edit.
  */
 
-export { AddLinkDialogComponent, AddLinkMobileComponent, Alignment, BaseNoderComponent, BreakTypes, CommandModel, CommandType, CommandsService, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_STYLES, DefaultImageApiService, DestroyComponent, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorMobileToolbarComponent, EditorModule, EditorSearchDialogComponent, EditorService, EditorTitleComponent, EditorTitleMobileComponent, EditorToolbarComponent, EditorToolbarMode, EditorToolbarModule, EditorToolbarService, ElementDataModel, ElementModel, ExternalComponent, ExternalElementModel, ExternalElementService, FileSourceModel, FormatStyleHelper, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, MenuDropdownsComponent, MenuDropdownsMobileComponent, Mode, NEW_LINE_MARKUP, NoderTranslateLoader, NumberingLevelModel, OperationModel, OperationsHistoryInfoModel, PageType, ParagraphStyleModel, RevisionHelper, RevisionModel, TextFormatMobileComponent, TextStyleModel, ToolbarActionsComponent };
+export { AddLinkDialogComponent, AddLinkMobileComponent, Alignment, BaseNoderComponent, BreakTypes, CommandModel, CommandType, CommandsService, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_STYLES, DefaultImageApiService, DestroyComponent, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorMobileToolbarComponent, EditorModule, EditorSearchDialogComponent, EditorService, EditorTitleComponent, EditorTitleMobileComponent, EditorToolbarComponent, EditorToolbarMode, EditorToolbarModule, EditorToolbarService, ElementDataModel, ElementModel, ExternalComponent, ExternalElementModel, ExternalElementService, FileSourceModel, FormatStyleHelper, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, MenuDropdownsComponent, MenuDropdownsMobileComponent, Mode, NEW_LINE_MARKUP, NoderTranslateLoader, NumberingLevelModel, OperationModel, OperationsHistoryInfoModel, PageSetupComponent, PageType, ParagraphStyleModel, RevisionHelper, RevisionModel, TextFormatMobileComponent, TextStyleModel, ToolbarActionsComponent };
 //# sourceMappingURL=talrace-ngx-noder.mjs.map