@talrace/ngx-noder 0.0.26 → 0.0.28

package/fesm2022/talrace-ngx-noder.mjs

@@ -8,14 +8,14 @@ import { 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 i3$1 from '@ngx-translate/core';
+import * as i4 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 i6 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i4 from '@angular/material/button';
+import * as i4$1 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,22 +24,22 @@ 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$1 from '@angular/material/menu';
+import * as i4$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i6$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4$2 from '@angular/material/form-field';
+import * as i4$3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4$3 from '@angular/material/expansion';
+import * as i4$4 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i2$1 from '@angular/platform-browser';
 import * as i2$2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatSelectModule } from '@angular/material/select';
-import * as i3$2 from '@angular/material/core';
+import * as i3$1 from '@angular/material/core';
 import * as i5$3 from 'ngx-colors';
 import { NgxColorsModule } from 'ngx-colors';
-import * as i3$3 from '@angular/material/button-toggle';
+import * as i3$2 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 
 const DocumentInfo = {
@@ -385,19 +385,21 @@ class FormatStyleHelper {
 }
 
 class ElementDataModel {
-    constructor(type, guid) {
-        this.type = type;
+    constructor(id, guid, type) {
+        this.id = id;
         this.guid = guid;
+        this.type = type;
     }
 }
 
 class ExternalElementModel {
-    constructor(nameTranslate = 'NODER.LABEL.NONE', nameId = 'none', icon, type, componentType, factoryMethod) {
+    constructor(nameTranslate = 'NODER.LABEL.NONE', nameId = 'none', icon, type, componentType, tooltip = 'NODER.TOOLTIP.NONE', factoryMethod) {
         this.nameTranslate = nameTranslate;
         this.nameId = nameId;
         this.icon = icon;
         this.type = type;
         this.componentType = componentType;
+        this.tooltip = tooltip;
         this.factoryMethod = factoryMethod;
     }
 }
@@ -5436,7 +5438,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.replaceSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), this.searchOptionSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription());
+        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.replaceSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), this.searchOptionSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -5701,6 +5703,7 @@ class Editor {
         const endIndex = this.session.model.paragraphs[range.end.row].insertIndex;
         this.saveApplyParagraphStyleToHistory(startIndex, endIndex, paragraphStyle);
         this.session.applyParagraphStyle(startIndex, endIndex, paragraphStyle);
+        this.renderer.updateCursor();
     }
     setNumberingTemplate(templateLevels) {
         const range = this.selection.range;
@@ -6537,6 +6540,11 @@ class Editor {
     receiveTextStyleSubscription() {
         return this.editorService.receiveTextStyle$.subscribe(x => this.provideTextStyle(x));
     }
+    viewOnlyModeSubscription() {
+        return this.editorService.isViewOnly$.subscribe(() => {
+            this.selection?.clearSelection();
+        });
+    }
     searchOptionSubscription() {
         return this.editorService.searchOptions$.subscribe(searchOptions => {
             this.find(searchOptions);
@@ -7440,13 +7448,13 @@ class TableOverlayMenuComponent {
         this.editorService.removeTableColumns(this.tableInsertIndex, this.selectionRange.cellIndexes.startIndex, this.selectionRange.cellIndexes.endIndex, 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: i3$1.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: i4.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</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</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: i3$1.TranslateService }], propDecorators: { selectionRange: [{
+        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }, { type: i4.TranslateService }], propDecorators: { selectionRange: [{
                 type: Input
             }], targets: [{
                 type: Input
@@ -9488,13 +9496,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: i0.ChangeDetectorRef }, { token: i3$1.TranslateService }], 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: i0.ChangeDetectorRef }, { token: i4.TranslateService }], 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: i0.ChangeDetectorRef }, { type: i3$1.TranslateService }], propDecorators: { model: [{
+        }], ctorParameters: () => [{ type: RegulatorService }, { type: EditorService }, { type: i0.ChangeDetectorRef }, { type: i4.TranslateService }], propDecorators: { model: [{
                 type: Input
             }], generalProperties: [{
                 type: Input
@@ -10920,18 +10928,20 @@ class TableOperationsHelper {
         table.rows.forEach(row => {
             let columnIndex = 0;
             for (let i = 0; i < row.cells.length; i++) {
-                if (row.cells[i].horizontalMerge) {
+                let cell = row.cells[i];
+                if (cell.horizontalMerge) {
                     let width = table.columns[columnIndex].width;
-                    for (let j = 1; j < row.cells[i].horizontalMerge; j++) {
+                    for (let j = 1; j < cell.horizontalMerge; j++) {
                         width += table.columns[columnIndex + j].width;
                     }
-                    row.cells[i].width = width;
-                    columnIndex += row.cells[i].horizontalMerge;
+                    cell.width = width;
+                    columnIndex += cell.horizontalMerge;
                 }
                 else {
-                    row.cells[i].width = table.columns[columnIndex].width;
+                    cell.width = table.columns[columnIndex].width;
                     columnIndex++;
                 }
+                cell.widthType = 'dxa';
             }
         });
     }
@@ -13507,13 +13517,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: 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 }); }
+    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 }); }
 }
 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: i3$1.TranslateService }], propDecorators: { selectedMode: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i4.TranslateService }], propDecorators: { selectedMode: [{
                 type: Input
             }], showTitle: [{
                 type: Input
@@ -13534,7 +13544,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.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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorTitleMobileComponent, decorators: [{
             type: Component,
@@ -13579,7 +13589,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.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$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.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 }); }
+    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$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorSearchDialogComponent, decorators: [{
             type: Component,
@@ -13668,7 +13678,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                    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$3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i4$3.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 }); }
+    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                    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MenuDropdownsMobileComponent, decorators: [{
             type: Component,
@@ -13950,7 +13960,7 @@ class BaseToolbarComponent extends DestroyComponent {
     }
     async onCreateElement(model) {
         const data = await model.factoryMethod();
-        const element = new ElementDataModel(model.type, data.guid);
+        const element = new ElementDataModel(data.id, data.guid, data.type);
         this.createElement.emit(element);
     }
     checkFontLoadedAndApplyStyle(style) {
@@ -14116,7 +14126,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", 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=\"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 }); }
+    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", 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=\"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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MenuDropdownsComponent, decorators: [{
             type: Component,
@@ -14187,11 +14197,11 @@ 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    <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"] }], 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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule], selector: 'app-nod-font', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    mat-button\n    [matMenuTriggerFor]=\"fontMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\">\n    <div class=\"font-menu\">\n        <span>{{ font }}</span>\n        <mat-icon\n            fontSet=\"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"] }]
+            args: [{ imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule, TranslateModule], selector: 'app-nod-font', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }], propDecorators: { isDisabled: [{
                 type: Input
             }], styles: [{
@@ -14259,11 +14269,20 @@ 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    <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<mat-autocomplete\n    #auto=\"matAutocomplete\"\n    panelWidth=\"60\"\n    disableRipple=\"false\"\n    hideSingleSelectionIndicator=\"true\">\n    <mat-option\n        *ngFor=\"let fontSize of fontSizes\"\n        [value]=\"fontSize\"\n        (click)=\"onSelectFontSize(fontSize)\">\n        {{ fontSize }}\n    </mat-option>\n</mat-autocomplete>\n<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onIncrementFontSize()\">\n    <mat-icon\n        fontSet=\"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"] }], 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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontSizeComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule, MatAutocompleteModule, MatButtonModule, MatIconModule, MatSelectModule, ReactiveFormsModule], selector: 'app-nod-font-size', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onDecrementFontSize()\">\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<mat-autocomplete\n    #auto=\"matAutocomplete\"\n    panelWidth=\"60\"\n    disableRipple=\"false\"\n    hideSingleSelectionIndicator=\"true\">\n    <mat-option\n        *ngFor=\"let fontSize of fontSizes\"\n        [value]=\"fontSize\"\n        (click)=\"onSelectFontSize(fontSize)\">\n        {{ fontSize }}\n    </mat-option>\n</mat-autocomplete>\n<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onIncrementFontSize()\">\n    <mat-icon\n        fontSet=\"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"] }]
+            args: [{ imports: [
+                        CommonModule,
+                        MatAutocompleteModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatSelectModule,
+                        ReactiveFormsModule,
+                        MatTooltipModule,
+                        TranslateModule
+                    ], selector: 'app-nod-font-size', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }], propDecorators: { isDisabled: [{
                 type: Input
             }], fontSize: [{
@@ -14283,11 +14302,11 @@ 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" }, 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    <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$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"] }], 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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule, FormsModule, MatButtonModule, MatIconModule, NgxColorsModule], selector: 'app-nod-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, 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    <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"] }]
+            args: [{ imports: [CommonModule, FormsModule, MatButtonModule, MatIconModule, NgxColorsModule, MatTooltipModule], selector: 'app-nod-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], icon: [{
@@ -14296,6 +14315,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Input
             }], palette: [{
                 type: Input
+            }], tooltip: [{
+                type: Input
             }], colorChange: [{
                 type: Output
             }] } });
@@ -14345,11 +14366,11 @@ 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        <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        <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        <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<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", 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"], 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"] }], 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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontStyleComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-font-style', standalone: false, 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        <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        <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        <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<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", 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"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-font-style', standalone: false, 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"] }]
         }], propDecorators: { isDisabled: [{
                 type: Input
             }], bold: [{
@@ -14384,11 +14405,11 @@ 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 [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-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"] }], 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-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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FormatComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-format', standalone: false, 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 [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-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"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-format', standalone: false, 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-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"] }]
         }], propDecorators: { isDisabled: [{
                 type: Input
             }], alignment: [{
@@ -14425,11 +14446,11 @@ 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        <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        <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        <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"] }], 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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NumberingComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-numbering', standalone: false, 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        <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        <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        <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"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-numbering', standalone: false, 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"] }]
         }], propDecorators: { isDisabled: [{
                 type: Input
             }], selectedNumberingType: [{
@@ -14447,11 +14468,11 @@ 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    <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"] }], 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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PrintComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-print', standalone: false, template: "<button\n    mat-button\n    (click)=\"print.emit()\">\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"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-print', standalone: false, 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"] }]
         }], propDecorators: { print: [{
                 type: Output
             }] } });
@@ -14464,11 +14485,11 @@ 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    <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    <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"] }], 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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UndoRedoComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-undo-redo', standalone: false, template: "<button\n    mat-button\n    [disabled]=\"!canUndo\"\n    (click)=\"undo.emit()\">\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    <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"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-undo-redo', standalone: false, 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"] }]
         }], propDecorators: { canUndo: [{
                 type: Input
             }], canRedo: [{
@@ -14513,11 +14534,11 @@ 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 (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            <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            <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            <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            <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}\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: "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" }], 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 (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}\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToolbarActionsComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-toolbar-actions', standalone: false, 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 (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            <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            <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            <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            <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}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-toolbar-actions', standalone: false, 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 (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}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CustomIconService }, { type: i0.Injector }, { type: EditorService }], propDecorators: { tableInsertMenu: [{
                 type: ViewChild,
                 args: ['tableInsert']
@@ -14579,13 +14600,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: 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 }); }
+    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 }); }
 }
 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: i3$1.TranslateService }], propDecorators: { openFileFromDisk: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CustomIconService }, { type: EditorService }, { type: i0.Injector }, { type: ToolbarCoreService }, { type: i4.TranslateService }], propDecorators: { openFileFromDisk: [{
                 type: Output
             }], createDocument: [{
                 type: Output
@@ -14774,7 +14795,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.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: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.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$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "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 }); }
+    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$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InsertTableMobileComponent, decorators: [{
             type: Component,
@@ -14875,7 +14896,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"], 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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TextFormatMobileComponent, decorators: [{
             type: Component,
@@ -14943,7 +14964,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$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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ZoomComponent, decorators: [{
             type: Component,
@@ -14977,6 +14998,7 @@ class EditorToolbarModule {
             MatExpansionModule,
             MatIconModule,
             MatMenuModule,
+            MatTooltipModule,
             ReactiveFormsModule,
             TextFormatMobileComponent,
             TranslateModule], exports: [EditorMobileToolbarComponent,
@@ -14996,6 +15018,7 @@ class EditorToolbarModule {
             MatExpansionModule,
             MatIconModule,
             MatMenuModule,
+            MatTooltipModule,
             ReactiveFormsModule,
             TextFormatMobileComponent,
             TranslateModule] }); }
@@ -15029,6 +15052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         MatExpansionModule,
                         MatIconModule,
                         MatMenuModule,
+                        MatTooltipModule,
                         ReactiveFormsModule,
                         TextFormatMobileComponent,
                         TranslateModule
@@ -15168,7 +15192,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.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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.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$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "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 }); }
+    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$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkDialogComponent, decorators: [{
             type: Component,
@@ -15217,7 +15241,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.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.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$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "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 }); }
+    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$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkMobileComponent, decorators: [{
             type: Component,
@@ -15234,7 +15258,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.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" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,