@talrace/ngx-noder 0.0.45 → 0.0.47

package/fesm2022/talrace-ngx-noder.mjs

@@ -1,14 +1,19 @@
 import * as i0 from '@angular/core';
 import { Directive, Injectable, signal, inject, ChangeDetectorRef, HostBinding, Input, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, createComponent, EventEmitter, Output, HostListener, Inject, input, computed, effect, NgModule } from '@angular/core';
-import { Subject, BehaviorSubject, fromEvent, throttleTime, take, filter, debounceTime, distinctUntilChanged, startWith, takeUntil, tap, map, catchError } from 'rxjs';
+import { Subject, BehaviorSubject, distinctUntilChanged, debounceTime, filter, fromEvent, throttleTime, take, startWith, takeUntil, tap, map, catchError } from 'rxjs';
 import * as i1$2 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
-import * as i3 from '@angular/common';
+import * as i4 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { ComponentPortal } from '@angular/cdk/portal';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayConfig } from '@angular/cdk/overlay';
+import * as i3$1 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
-import * as i4 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
 import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i6 from '@angular/material/input';
@@ -16,21 +21,16 @@ import { MatInputModule } from '@angular/material/input';
 import * as i5$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i3$1 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
 import * as i5$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { ComponentPortal } from '@angular/cdk/portal';
-import * as i1 from '@angular/cdk/overlay';
-import { OverlayConfig } from '@angular/cdk/overlay';
-import * as i5$3 from '@angular/cdk/clipboard';
+import * as i6$1 from '@angular/cdk/clipboard';
 import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import * as i7 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i3$2 from '@angular/material/core';
-import * as i8 from '@angular/material/sidenav';
+import * as i9 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i4$1 from '@angular/material/menu';
@@ -40,7 +40,9 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import * as i2$1 from '@angular/platform-browser';
 import * as i2$2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i5$4 from 'ngx-colors';
+import * as i2$3 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i5$3 from 'ngx-colors';
 import { NgxColorsModule } from 'ngx-colors';
 import * as i3$3 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -540,6 +542,9 @@ class EditorService {
         this._hasSelection$ = new BehaviorSubject(false);
         this._historyInfo$ = new BehaviorSubject(new OperationsHistoryInfoModel(-1, -1));
         this._toggleSidenav$ = new Subject();
+        this._displayGrammarError$ = new Subject();
+        this._applyGrammarSuggestion$ = new Subject();
+        this._ignoreGrammarError$ = new Subject();
         this._displaySearchBar$ = new Subject();
         this._searchTerm$ = new Subject();
         this._dialogSearchTerm$ = new Subject();
@@ -573,6 +578,10 @@ class EditorService {
         this._removeRight$ = new Subject();
         this._resizeTableColumns$ = new Subject();
         this._insertTable$ = new Subject();
+        this._updateTableBorderStyle$ = new Subject();
+        this._updateTableBorderWidth$ = new Subject();
+        this._updateTableBorders$ = new Subject();
+        this._isTableSelected$ = new BehaviorSubject(false);
         this._redo$ = new Subject();
         this._undo$ = new Subject();
         this._print$ = new Subject();
@@ -598,7 +607,10 @@ class EditorService {
         this._leftIndentParagraph$ = new Subject();
         this._tabSettings$ = new Subject();
         this._rightIndentParagraph$ = new Subject();
-        this._paragraphStyle$ = new BehaviorSubject(new ParagraphStyleModel());
+        this._paragraphStyle$ = new BehaviorSubject({
+            paragraphStyle: new ParagraphStyleModel(),
+            numberingModel: null
+        });
     }
     set styles(value) {
         this._styles$.next({ ...value });
@@ -633,6 +645,15 @@ class EditorService {
     get toggleSidenav$() {
         return this._toggleSidenav$.asObservable();
     }
+    get displayGrammarError$() {
+        return this._displayGrammarError$.asObservable();
+    }
+    get applyGrammarSuggestion$() {
+        return this._applyGrammarSuggestion$.asObservable();
+    }
+    get ignoreGrammarError$() {
+        return this._ignoreGrammarError$.asObservable();
+    }
     get displaySearchBar$() {
         return this._displaySearchBar$.asObservable();
     }
@@ -735,6 +756,21 @@ class EditorService {
     get insertTable$() {
         return this._insertTable$.asObservable();
     }
+    get updateTableBorderStyle$() {
+        return this._updateTableBorderStyle$.asObservable();
+    }
+    get updateTableBorderWidth$() {
+        return this._updateTableBorderWidth$.asObservable();
+    }
+    get updateTableBorders$() {
+        return this._updateTableBorders$.asObservable();
+    }
+    get isTableSelected() {
+        return this._isTableSelected$.value;
+    }
+    get isTableSelected$() {
+        return this._isTableSelected$.asObservable();
+    }
     get redo$() {
         return this._redo$.asObservable();
     }
@@ -835,8 +871,8 @@ class EditorService {
     applyRightIndentParagraph(value) {
         this._rightIndentParagraph$.next(value);
     }
-    paragraphStyle(value) {
-        this._paragraphStyle$.next(value);
+    paragraphStyle(value, numbering = null) {
+        this._paragraphStyle$.next({ paragraphStyle: value, numberingModel: numbering });
     }
     applyRightMarginPageFormat(value) {
         this._rightMarginPageFormat$.next(value);
@@ -968,6 +1004,21 @@ class EditorService {
     insertTable(tableData) {
         this._insertTable$.next(tableData);
     }
+    updateTableBorderStyle(style) {
+        this._updateTableBorderStyle$.next(style);
+    }
+    updateTableBorderWidth(width) {
+        this._updateTableBorderWidth$.next(width);
+    }
+    updateTableBorders(borders) {
+        this._updateTableBorders$.next(borders);
+    }
+    setIsTableSelected(value) {
+        if (this.isTableSelected === value) {
+            return;
+        }
+        this._isTableSelected$.next(value);
+    }
     undo() {
         this._undo$.next();
     }
@@ -1034,6 +1085,15 @@ class EditorService {
     setCurrentSearchResultIndex(index) {
         this._currentSearchResultIndex$.next(index);
     }
+    showGrammarError(error) {
+        this._displayGrammarError$.next(error);
+    }
+    applyGrammarSuggestion(error, suggestionIndex, paragraphIndex) {
+        this._applyGrammarSuggestion$.next({ error, suggestionIndex, paragraphIndex });
+    }
+    ignoreGrammarSuggestion(error) {
+        this._ignoreGrammarError$.next(error);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorService }); }
 }
@@ -1175,6 +1235,104 @@ class DefaultImageApiService {
     }
 }
 
+class GrammarService {
+    constructor() {
+        this.debounceTime = 3000;
+        this.maxConcurrentRequests = 3;
+        this.paragraphSubjects = new Map();
+        this.debounceSubscriptions = new Map();
+        this.grammarCheckRequests = new Subject();
+        this.grammarCheckResults = new Subject();
+        this.requestQueue = [];
+        this.requestsInFlight = 0;
+    }
+    get grammarCheckRequests$() {
+        return this.grammarCheckRequests.asObservable();
+    }
+    get grammarCheckResults$() {
+        return this.grammarCheckResults.asObservable();
+    }
+    updateParagraphContent(sessionId, paragraph) {
+        if (!this.paragraphSubjects.has(`${sessionId}-${paragraph.id}`)) {
+            this.registerParagraph(sessionId, paragraph);
+        }
+        const subject = this.paragraphSubjects.get(`${sessionId}-${paragraph.id}`);
+        subject.next(paragraph);
+    }
+    removeParagraph(sessionId, paragraphId) {
+        const key = `${sessionId}-${paragraphId}`;
+        const subject = this.paragraphSubjects.get(key);
+        const subscription = this.debounceSubscriptions.get(key);
+        this.requestQueue = this.requestQueue.filter(x => x.id !== key);
+        if (subject) {
+            subject.complete();
+            this.paragraphSubjects.delete(key);
+        }
+        if (subscription) {
+            subscription.unsubscribe();
+            this.debounceSubscriptions.delete(key);
+        }
+    }
+    publishGrammarCheckResults(paragraphId, errors) {
+        this.grammarCheckResults.next({ paragraphId, errors });
+        this.requestsInFlight--;
+        this.processQueue();
+    }
+    enqueueParagraphs(sessionId, paragraphs) {
+        const requests = paragraphs
+            .filter(x => x.content.trim().length > 0 && !this.requestQueue.some(y => y.id === `${sessionId}-${x.id}`))
+            .map(x => ({ id: `${sessionId}-${x.id}`, paragraph: x.content }));
+        this.requestQueue.unshift(...requests);
+        this.processQueue();
+    }
+    destroy() {
+        for (const [, subject] of this.paragraphSubjects) {
+            subject.complete();
+        }
+        this.paragraphSubjects.clear();
+        for (const [, subscription] of this.debounceSubscriptions) {
+            subscription.unsubscribe();
+        }
+        this.debounceSubscriptions.clear();
+        this.grammarCheckRequests.complete();
+        this.grammarCheckResults.complete();
+        this.requestQueue = [];
+        this.requestsInFlight = 0;
+    }
+    registerParagraph(sessionId, paragraph) {
+        if (this.paragraphSubjects.has(`${sessionId}-${paragraph.id}`)) {
+            return;
+        }
+        const subject = new Subject();
+        this.paragraphSubjects.set(`${sessionId}-${paragraph.id}`, subject);
+        const subscription = subject
+            .pipe(distinctUntilChanged((x, y) => x.content.trim() === y.content.trim()), debounceTime(this.debounceTime), filter(x => x.content.trim().length > 0))
+            .subscribe(x => this.enqueueGrammarCheck(`${sessionId}-${x.id}`, x.content));
+        this.debounceSubscriptions.set(`${sessionId}-${paragraph.id}`, subscription);
+    }
+    enqueueGrammarCheck(id, paragraph) {
+        this.requestQueue = this.requestQueue.filter(x => x.id !== id);
+        const request = { id, paragraph };
+        this.requestQueue.unshift(request);
+        this.processQueue();
+    }
+    processQueue() {
+        while (this.requestsInFlight <= this.maxConcurrentRequests && this.requestQueue.length > 0) {
+            const request = this.requestQueue.shift();
+            this.requestsInFlight++;
+            this.grammarCheckRequests.next(request);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 var CommandType;
 (function (CommandType) {
     CommandType[CommandType["Delete"] = 0] = "Delete";
@@ -1214,6 +1372,7 @@ var CommandType;
     CommandType[CommandType["RemoveInsertedPageFormat"] = 34] = "RemoveInsertedPageFormat";
     CommandType[CommandType["RestorePageFormats"] = 35] = "RestorePageFormats";
     CommandType[CommandType["ApplyParagraphs"] = 36] = "ApplyParagraphs";
+    CommandType[CommandType["ApplyTableCellsStyles"] = 37] = "ApplyTableCellsStyles";
 })(CommandType || (CommandType = {}));
 
 class PageNumbersModel {
@@ -1292,6 +1451,14 @@ class ApplyParagraphStyleModel {
     }
 }
 
+class ApplyTableCellsStylesModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class ApplyTextStyleModel {
     constructor(fields) {
         if (fields) {
@@ -1517,6 +1684,86 @@ class FormatHelper {
     }
 }
 
+const POPUP_HEIGHT = 150;
+
+class OverlayService {
+    constructor(overlay) {
+        this.overlay = overlay;
+        this.overlayResult = new Subject();
+    }
+    open(component, data, xPosition, yPosition) {
+        this.close();
+        this.overlayRef = this.overlay.create(this.getOverlayConfig(xPosition, yPosition));
+        const ref = this.overlayRef.attach(new ComponentPortal(component));
+        Object.assign(ref.instance, data);
+        this.clickSubscription();
+        return this.overlayResult.asObservable();
+    }
+    close(value) {
+        this.overlayResult.next(value);
+        this.openedSubscription?.unsubscribe();
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    clickSubscription() {
+        this.openedSubscription = fromEvent(document, 'mousedown')
+            .pipe(filter(event => {
+            const clickTarget = event.target;
+            return this.overlayRef && !this.overlayRef.overlayElement.contains(clickTarget);
+        }), take(1))
+            .subscribe(() => {
+            this.close();
+        });
+    }
+    getOverlayConfig(xPosition, yPosition) {
+        return new OverlayConfig({
+            hasBackdrop: false,
+            backdropClass: 'noder-backdrop',
+            positionStrategy: this.getOverlayPosition(xPosition, yPosition),
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        });
+    }
+    getOverlayPosition(xPosition, yPosition) {
+        return this.overlay.position().global().left(`${xPosition}px`).top(`${yPosition}px`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OverlayService, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OverlayService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OverlayService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.Overlay }] });
+
+class GrammarPopupComponent {
+    constructor(editorService, overlayService) {
+        this.editorService = editorService;
+        this.overlayService = overlayService;
+        this.hostHeight = `${POPUP_HEIGHT}px`;
+    }
+    onSuggestionClick(index) {
+        this.editorService.applyGrammarSuggestion(this.error, index, this.paragraphIndex);
+        this.overlayService.close();
+    }
+    onIgnoreClick() {
+        this.editorService.ignoreGrammarSuggestion(this.error);
+        this.overlayService.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarPopupComponent, deps: [{ token: EditorService }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: GrammarPopupComponent, isStandalone: true, selector: "app-nod-grammar-popup", inputs: { error: "error", paragraphIndex: "paragraphIndex" }, host: { properties: { "style.height": "this.hostHeight" } }, ngImport: i0, template: "<span\n    class=\"ignore\"\n    (click)=\"onIgnoreClick()\">\n    {{ 'NODER.LABEL.IGNORE' | translate }}\n</span>\n<span class=\"message\">{{ error.message }}</span>\n<div class=\"options\">\n    @for (suggestion of error.replacements; track i; let i = $index) {\n        <span\n            class=\"suggestion\"\n            (click)=\"onSuggestionClick(i)\">\n            {{ suggestion }}\n        </span>\n    }\n</div>\n", styles: [":host{border-radius:8px;display:flex;flex-direction:column;padding:8px;max-width:500px;gap:5px;box-shadow:0 8px 20px #00000026,0 4px 10px #0000001a}.message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-style:italic;font-size:14px;padding:0 10px;border-bottom-width:1px;border-bottom-style:solid}.options{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;padding:5px 0}.suggestion{font-weight:600;cursor:pointer;text-decoration:underline;padding:3px 8px}.ignore{border-radius:4px;margin-left:auto;font-weight:600;cursor:pointer;transition:all .3s ease;padding:3px 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nod-grammar-popup', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, TranslateModule], standalone: true, template: "<span\n    class=\"ignore\"\n    (click)=\"onIgnoreClick()\">\n    {{ 'NODER.LABEL.IGNORE' | translate }}\n</span>\n<span class=\"message\">{{ error.message }}</span>\n<div class=\"options\">\n    @for (suggestion of error.replacements; track i; let i = $index) {\n        <span\n            class=\"suggestion\"\n            (click)=\"onSuggestionClick(i)\">\n            {{ suggestion }}\n        </span>\n    }\n</div>\n", styles: [":host{border-radius:8px;display:flex;flex-direction:column;padding:8px;max-width:500px;gap:5px;box-shadow:0 8px 20px #00000026,0 4px 10px #0000001a}.message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-style:italic;font-size:14px;padding:0 10px;border-bottom-width:1px;border-bottom-style:solid}.options{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;padding:5px 0}.suggestion{font-weight:600;cursor:pointer;text-decoration:underline;padding:3px 8px}.ignore{border-radius:4px;margin-left:auto;font-weight:600;cursor:pointer;transition:all .3s ease;padding:3px 8px}\n"] }]
+        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }], propDecorators: { hostHeight: [{
+                type: HostBinding,
+                args: ['style.height']
+            }], error: [{
+                type: Input
+            }], paragraphIndex: [{
+                type: Input
+            }] } });
+
 class ImageDataModel {
     constructor(fields) {
         if (fields) {
@@ -1921,6 +2168,14 @@ class MoveRangeModel {
     }
 }
 
+let CellDataModel$1 = class CellDataModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+};
+
 class RemoveEdgesModel {
     constructor(fields) {
         if (fields) {
@@ -2052,6 +2307,19 @@ class OperationHistory {
         const undoStep = new DeleteModel({ startIndex: model.insertIndex, count });
         this.addToHistory(undoStep, model);
     }
+    pushApplyTableCellsStyles(currentTable, model, targets) {
+        const undoStep = new ApplyTableCellsStylesModel({
+            insertIndex: model.insertIndex,
+            cellsData: model.cellsData.map(x => {
+                return new CellDataModel$1({
+                    rowIndex: x.rowIndex,
+                    cellIndex: x.cellIndex,
+                    borders: currentTable.rows[x.rowIndex].cells[x.cellIndex].borders
+                });
+            })
+        });
+        this.addToHistory(undoStep, model, null, targets);
+    }
     pushInsertStyledText(insertIndex, text, style) {
         const redoStep = new InsertStyledTextModel({ insertIndex, text, textStyle: style });
         const undoStep = new DeleteModel({ startIndex: insertIndex, count: text.length });
@@ -4095,6 +4363,18 @@ class ParagraphOperationsHelper {
     }
 }
 
+var Borders;
+(function (Borders) {
+    Borders[Borders["Bottom"] = 0] = "Bottom";
+    Borders[Borders["Top"] = 1] = "Top";
+    Borders[Borders["Left"] = 2] = "Left";
+    Borders[Borders["Right"] = 3] = "Right";
+    Borders[Borders["Empty"] = 4] = "Empty";
+    Borders[Borders["All"] = 5] = "All";
+    Borders[Borders["Outside"] = 6] = "Outside";
+    Borders[Borders["Inside"] = 7] = "Inside";
+})(Borders || (Borders = {}));
+
 class ColumnModel {
     constructor(fields) {
         if (fields) {
@@ -4103,6 +4383,55 @@ class ColumnModel {
     }
 }
 
+var LineStyles;
+(function (LineStyles) {
+    LineStyles[LineStyles["SolidLine"] = 0] = "SolidLine";
+    LineStyles[LineStyles["RoundDot"] = 1] = "RoundDot";
+    LineStyles[LineStyles["SquareDot"] = 2] = "SquareDot";
+    LineStyles[LineStyles["Dash"] = 3] = "Dash";
+    LineStyles[LineStyles["DashDot"] = 4] = "DashDot";
+    LineStyles[LineStyles["LongDash"] = 5] = "LongDash";
+    LineStyles[LineStyles["LongDashDot"] = 6] = "LongDashDot";
+    LineStyles[LineStyles["LongDashDotDot"] = 7] = "LongDashDotDot";
+    LineStyles[LineStyles["Single"] = 8] = "Single";
+    LineStyles[LineStyles["Thick"] = 9] = "Thick";
+    LineStyles[LineStyles["Double"] = 10] = "Double";
+    LineStyles[LineStyles["Dotted"] = 11] = "Dotted";
+    LineStyles[LineStyles["Dashed"] = 12] = "Dashed";
+    LineStyles[LineStyles["DotDash"] = 13] = "DotDash";
+    LineStyles[LineStyles["DotDotDash"] = 14] = "DotDotDash";
+    LineStyles[LineStyles["Triple"] = 15] = "Triple";
+    LineStyles[LineStyles["ThinThickSmallGap"] = 16] = "ThinThickSmallGap";
+    LineStyles[LineStyles["ThickThinSmallGap"] = 17] = "ThickThinSmallGap";
+    LineStyles[LineStyles["ThinThickThinSmallGap"] = 18] = "ThinThickThinSmallGap";
+    LineStyles[LineStyles["ThinThickMediumGap"] = 19] = "ThinThickMediumGap";
+    LineStyles[LineStyles["ThickThinMediumGap"] = 20] = "ThickThinMediumGap";
+    LineStyles[LineStyles["ThinThickThinMediumGap"] = 21] = "ThinThickThinMediumGap";
+    LineStyles[LineStyles["ThinThickLargeGap"] = 22] = "ThinThickLargeGap";
+    LineStyles[LineStyles["ThickThinLargeGap"] = 23] = "ThickThinLargeGap";
+    LineStyles[LineStyles["ThinThickThinLargeGap"] = 24] = "ThinThickThinLargeGap";
+    LineStyles[LineStyles["Wave"] = 25] = "Wave";
+    LineStyles[LineStyles["DoubleWave"] = 26] = "DoubleWave";
+    LineStyles[LineStyles["DashSmallGap"] = 27] = "DashSmallGap";
+    LineStyles[LineStyles["DashDotStroked"] = 28] = "DashDotStroked";
+    LineStyles[LineStyles["ThreeDEmboss"] = 29] = "ThreeDEmboss";
+    LineStyles[LineStyles["ThreeDEngrave"] = 30] = "ThreeDEngrave";
+    LineStyles[LineStyles["Outset"] = 31] = "Outset";
+    LineStyles[LineStyles["Inset"] = 32] = "Inset";
+    LineStyles[LineStyles["Nil"] = 33] = "Nil";
+})(LineStyles || (LineStyles = {}));
+
+var Positions;
+(function (Positions) {
+    Positions[Positions["Top"] = 0] = "Top";
+    Positions[Positions["Right"] = 1] = "Right";
+    Positions[Positions["Bottom"] = 2] = "Bottom";
+    Positions[Positions["Left"] = 3] = "Left";
+    Positions[Positions["All"] = 4] = "All";
+    Positions[Positions["InsideHorizontal"] = 5] = "InsideHorizontal";
+    Positions[Positions["InsideVertical"] = 6] = "InsideVertical";
+})(Positions || (Positions = {}));
+
 var ResizerSide;
 (function (ResizerSide) {
     ResizerSide[ResizerSide["Left"] = 0] = "Left";
@@ -4119,6 +4448,13 @@ class RowModel {
     }
 }
 
+class SelectionRangeModel {
+    constructor(rowIndexes, cellIndexes) {
+        this.rowIndexes = rowIndexes;
+        this.cellIndexes = cellIndexes;
+    }
+}
+
 var VerticalMerge;
 (function (VerticalMerge) {
     VerticalMerge["Restart"] = "restart";
@@ -4471,6 +4807,206 @@ class TableOperationsHelper {
             }
         });
     }
+    static applyTableCellsStyles(tables, insertIndex, cellData) {
+        const table = tables.find(x => x.insertIndex === insertIndex);
+        for (const cellDataItem of cellData) {
+            if (cellDataItem.rowIndex < 0 || cellDataItem.rowIndex >= table.rows.length) {
+                continue;
+            }
+            if (cellDataItem.cellIndex < 0 || cellDataItem.cellIndex >= table.rows[cellDataItem.rowIndex].cells.length) {
+                continue;
+            }
+            table.rows[cellDataItem.rowIndex].cells[cellDataItem.cellIndex].borders = cellDataItem.borders?.length
+                ? cellDataItem.borders
+                : null;
+        }
+    }
+    static getApplyTableCellsBordersStyle(style, table, selection) {
+        const cellsMap = this.getApplyBordersStylesCells(table, selection, [
+            Positions.Top,
+            Positions.Bottom,
+            Positions.Right,
+            Positions.Left
+        ]);
+        if (!cellsMap.size) {
+            return null;
+        }
+        return new ApplyTableCellsStylesModel({
+            cellsData: this.getCellDataFromBorderCells(cellsMap, new BordersStyleModel({ lineStyle: style })),
+            insertIndex: table.insertIndex
+        });
+    }
+    static getApplyTableCellsBordersWidth(width, table, selection) {
+        const cellsMap = this.getApplyBordersStylesCells(table, selection, [
+            Positions.Top,
+            Positions.Bottom,
+            Positions.Right,
+            Positions.Left
+        ]);
+        if (!cellsMap.size) {
+            return null;
+        }
+        return new ApplyTableCellsStylesModel({
+            cellsData: this.getCellDataFromBorderCells(cellsMap, new BordersStyleModel({ width })),
+            insertIndex: table.insertIndex
+        });
+    }
+    static getApplyTableCellsBorders(border, table, selection) {
+        let cellsMap = new Map();
+        let targetBorderStyle = new BordersStyleModel({ lineStyle: LineStyles.Single });
+        switch (border) {
+            case Borders.Top:
+                // Upper border - only for the top row and their upper neighbors
+                cellsMap = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.startIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Top]);
+                break;
+            case Borders.Bottom:
+                // The bottom border is only for the bottom row and their lower neighbors
+                cellsMap = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.endIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Bottom]);
+                break;
+            case Borders.Left:
+                // Left border - only for the left column and its left neighbors
+                cellsMap = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.startIndex }), [Positions.Left]);
+                break;
+            case Borders.Right:
+                // Right border - only for the right column and its right neighbors
+                cellsMap = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.endIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Right]);
+                break;
+            case Borders.All:
+                // Add all borders from the selected cells
+                cellsMap = this.getApplyBordersStylesCells(table, selection, [
+                    Positions.Top,
+                    Positions.Bottom,
+                    Positions.Right,
+                    Positions.Left
+                ]);
+                break;
+            case Borders.Outside: {
+                // Outer borders - combination of Top, Bottom, Left, Right
+                cellsMap = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.startIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Top]);
+                const bottomCells = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.endIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Bottom]);
+                this.mergeCellStyles(cellsMap, bottomCells);
+                const leftCells = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.startIndex }), [Positions.Left]);
+                this.mergeCellStyles(cellsMap, leftCells);
+                const rightCells = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.endIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Right]);
+                this.mergeCellStyles(cellsMap, rightCells);
+                break;
+            }
+            case Borders.Inside: {
+                // Horizontal inner borders (between lines)
+                for (let rowIndex = selection.rowIndexes.startIndex + 1; rowIndex <= selection.rowIndexes.endIndex; rowIndex++) {
+                    const horizontalCells = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: rowIndex, endIndex: rowIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Top]);
+                    this.mergeCellStyles(cellsMap, horizontalCells);
+                }
+                // Vertical inner borders (between columns)
+                for (let cellIndex = selection.cellIndexes.startIndex + 1; cellIndex <= selection.cellIndexes.endIndex; cellIndex++) {
+                    const verticalCells = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: cellIndex, endIndex: cellIndex }), [Positions.Left]);
+                    this.mergeCellStyles(cellsMap, verticalCells);
+                }
+                break;
+            }
+            case Borders.Empty:
+                // Remove all borders from the selected cells
+                cellsMap = this.getApplyBordersStylesCells(table, selection, [
+                    Positions.Top,
+                    Positions.Bottom,
+                    Positions.Right,
+                    Positions.Left
+                ]);
+                targetBorderStyle = new BordersStyleModel({ lineStyle: LineStyles.Nil });
+                break;
+        }
+        if (!cellsMap.size) {
+            return null;
+        }
+        return new ApplyTableCellsStylesModel({
+            cellsData: this.getCellDataFromBorderCells(cellsMap, targetBorderStyle),
+            insertIndex: table.insertIndex
+        });
+    }
+    static mergeCellStyles(existingCellsMap, newCellsMap) {
+        for (const [key, newCell] of newCellsMap) {
+            if (existingCellsMap.has(key)) {
+                // Add the position to the existing cell
+                const existingCell = existingCellsMap.get(key);
+                const newPositions = newCell.updatePositions.filter(y => !existingCell.updatePositions.includes(y));
+                existingCell.updatePositions.push(...newPositions);
+            }
+            else {
+                existingCellsMap.set(key, { ...newCell });
+            }
+        }
+    }
+    static getApplyBordersStylesCells(table, selection, defaultPositions) {
+        const result = new Map();
+        for (let rowIndex = selection.rowIndexes.startIndex; rowIndex <= selection.rowIndexes.endIndex; rowIndex++) {
+            for (let cellIndex = selection.cellIndexes.startIndex; cellIndex <= selection.cellIndexes.endIndex; cellIndex++) {
+                // Upper border - add to the current cell and its upper neighbor
+                if (rowIndex === selection.rowIndexes.startIndex && defaultPositions.includes(Positions.Top)) {
+                    this.addPositionsToCell(result, table, rowIndex - 1, cellIndex, [Positions.Bottom]);
+                }
+                // Bottom border - add to the current cell and its lower neighbor
+                if (rowIndex === selection.rowIndexes.endIndex && defaultPositions.includes(Positions.Bottom)) {
+                    this.addPositionsToCell(result, table, rowIndex + 1, cellIndex, [Positions.Top]);
+                }
+                // Left border - add to the current cell and its left neighbor
+                if (cellIndex === selection.cellIndexes.startIndex && defaultPositions.includes(Positions.Left)) {
+                    this.addPositionsToCell(result, table, rowIndex, cellIndex - 1, [Positions.Right]);
+                }
+                // Right border - add to the current cell and its right neighbor
+                if (cellIndex === selection.cellIndexes.endIndex && defaultPositions.includes(Positions.Right)) {
+                    this.addPositionsToCell(result, table, rowIndex, cellIndex + 1, [Positions.Left]);
+                }
+                this.addPositionsToCell(result, table, rowIndex, cellIndex, defaultPositions);
+            }
+        }
+        return result;
+    }
+    static addPositionsToCell(cellsMap, table, rowIndex, cellIndex, positions) {
+        if (rowIndex < 0 || rowIndex >= table.rows.length || cellIndex < 0 || cellIndex >= table.rows[rowIndex].cells.length) {
+            return;
+        }
+        const key = `${rowIndex},${cellIndex}`;
+        const cell = table.rows[rowIndex].cells[cellIndex];
+        if (cellsMap.has(key)) {
+            // Combine positions if the cell already exists in the Map
+            const existing = cellsMap.get(key);
+            positions.forEach(x => {
+                if (!existing.updatePositions.includes(x)) {
+                    existing.updatePositions.push(x);
+                }
+            });
+        }
+        else {
+            // Add a new cell
+            cellsMap.set(key, { cell, rowIndex, cellIndex, updatePositions: [...positions] });
+        }
+    }
+    static getCellDataFromBorderCells(cellsMap, updateBorderData) {
+        if (!cellsMap.size) {
+            return [];
+        }
+        const cellsData = [];
+        for (const cellData of cellsMap.values()) {
+            const newBorders = [];
+            const existingBorders = cellData.cell.borders ?? [];
+            // Add or update borders with new data
+            cellData.updatePositions.forEach(x => {
+                const border = existingBorders.find(y => y.position === x) ??
+                    new BordersStyleModel({ position: x, lineStyle: LineStyles.Single, width: 1 });
+                newBorders.push(new BordersStyleModel({ ...border, ...updateBorderData }));
+            });
+            // Add existing borders without updates
+            existingBorders
+                .filter(x => !cellData.updatePositions.includes(x.position))
+                .forEach(x => newBorders.push(new BordersStyleModel({ ...x })));
+            cellsData.push(new CellDataModel$1({
+                rowIndex: cellData.rowIndex,
+                cellIndex: cellData.cellIndex,
+                borders: newBorders.length ? newBorders : null
+            }));
+        }
+        return cellsData;
+    }
 }
 
 class TabOperationsHelper {
@@ -4727,6 +5263,11 @@ class OperationsHelper {
                     this.applyParagraphs(contents, model.paragraphs);
                     break;
                 }
+                case CommandType.ApplyTableCellsStyles: {
+                    const model = command.applyTableCellsStyles;
+                    this.applyTableCellsStyles(contents, model);
+                    break;
+                }
             }
         });
     }
@@ -4916,6 +5457,9 @@ class OperationsHelper {
         }
         return result;
     }
+    static applyTableCellsStyles(document, model) {
+        TableOperationsHelper.applyTableCellsStyles(document.tables, model.insertIndex, model.cellsData);
+    }
     static insertStyledText(document, text, index, style) {
         document.content = ContentOperationsHelper.insertContent(document.content, text, index);
         FormatOperationsHelper.insertStyledContent(document.formats, index, text.length, style);
@@ -5192,9 +5736,10 @@ class PositionHelper {
         const paragraph = paragraphs[paragraphInfo.paragraphIndex];
         const paragraphTop = paragraph.paragraphSettings.distanceFromTop || 0;
         const linePaddingLeft = paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex].paddingLeft;
+        const markerWidth = paragraphInfo.lineIndex === 0 ? (paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex].markerWidth ?? 0) : 0;
         const offsetMargin = paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex].offsetMargin;
         return {
-            pageX: lineWidthToPosition + linePaddingLeft + offsetMargin,
+            pageX: lineWidthToPosition + linePaddingLeft + offsetMargin + markerWidth,
             pageY: paragraphTop + paragraphInfo.lineTopOffset - session.scrollTop,
             lineHeight: paragraphInfo.lineHeight,
             sizeCurrent: size,
@@ -5244,7 +5789,8 @@ class PositionHelper {
             return { line, indexInLine: 0 };
         }
         let indexInLine = 0;
-        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin;
+        const markerWidth = lineIndex === 0 ? (lineInfo.markerWidth ?? 0) : 0;
+        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerWidth;
         const wordSpacing = lineInfo.wordSpacing ?? 0;
         while (indexInLine < tokens.length) {
             const token = tokens[indexInLine];
@@ -5271,7 +5817,8 @@ class PositionHelper {
             return { line, indexInLine: 0 };
         }
         let indexInLine = 0;
-        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin;
+        const markerWidth = lineIndex === 0 ? (lineInfo.markerWidth ?? 0) : 0;
+        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerWidth;
         const wordSpacing = lineInfo.wordSpacing ?? 0;
         while (indexInLine < tokens.length) {
             const token = tokens[indexInLine];
@@ -5309,7 +5856,8 @@ class PositionHelper {
         }
         const textLineInfo = paragraphs[paragraphIndex].paragraphSettings.textLinesInfo[lineIndex];
         const wordSpacing = textLineInfo.wordSpacing ?? 0;
-        let width = positionWidth - textLineInfo.paddingLeft - marginLeft - textLineInfo.offsetMargin;
+        const markerWidth = lineIndex === 0 ? (textLineInfo.markerWidth ?? 0) : 0;
+        let width = positionWidth - textLineInfo.paddingLeft - marginLeft - textLineInfo.offsetMargin - markerWidth;
         while (column < tokens.length) {
             const token = tokens[column];
             if (width < token.width) {
@@ -5423,7 +5971,7 @@ class RenderingHelper {
         const numberingOffsetLeft = currentParagraph.numberingData.numberingId === null
             ? 0
             : currentParagraph.numberingData.width + currentParagraph.numberingData.paddingLeft;
-        let lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft, scalingRatio);
+        let lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft - currentParagraph.textLinesInfo[splitIndex].markerWidth, scalingRatio);
         domContent.parentNode.appendChild(lineEl);
         const valueFragment = DomHelper.createFragment(domContent.currentElement);
         let isLastLineFragment = false;
@@ -6290,7 +6838,9 @@ class TextLayer {
         else {
             const numberingOffsetLeft = paragraphSettings.numberingData.numberingId === null
                 ? 0
-                : paragraphSettings.numberingData.width + paragraphSettings.numberingData.paddingLeft;
+                : paragraphSettings.numberingData.width +
+                    paragraphSettings.numberingData.paddingLeft -
+                    paragraphSettings.textLinesInfo[0].markerWidth;
             const lineInfo = paragraphSettings.textLinesInfo[0];
             const lastLineEl = this.renderingHelper.createLineElement(lineInfo, numberingOffsetLeft, this.session.generalProperties.scalingRatio);
             linesContainerElement.appendChild(lastLineEl);
@@ -6606,6 +7156,9 @@ class CommandModel {
             if (fields.applyParagraphStyle) {
                 fields.applyParagraphStyle = new ApplyParagraphStyleModel(fields.applyParagraphStyle);
             }
+            if (fields.applyTableCellsStyles) {
+                fields.applyTableCellsStyles = new ApplyTableCellsStylesModel(fields.applyTableCellsStyles);
+            }
             if (fields.applyTextStyle) {
                 fields.applyTextStyle = new ApplyTextStyleModel(fields.applyTextStyle);
             }
@@ -6758,6 +7311,9 @@ class SaveCommandsHelper {
     static getInsertTableCommand(insertTable, targets) {
         return new CommandModel({ commandType: CommandType.InsertTable, insertTable, targets });
     }
+    static getApplyTableCellsStylesCommand(applyTableCellsStyles, targets) {
+        return new CommandModel({ commandType: CommandType.ApplyTableCellsStyles, applyTableCellsStyles, targets });
+    }
     static getInsertTableColumnsCommand(columnsCount, inheritIndex, insertIndex, targetIndex, targets) {
         const insertTableColumns = new InsertTableColumnsModel({ count: columnsCount, inheritIndex, insertIndex, targetIndex });
         return new CommandModel({ commandType: CommandType.InsertTableColumns, insertTableColumns, targets });
@@ -7618,10 +8174,14 @@ class Editor {
     get targets() {
         return this.regulatorService.getCurrentSessionTargets();
     }
-    constructor(model, container, editorService, regulatorService, commandsService, clipboard, externalElementTagNames, customPageWidth) {
+    get grammarChecker() {
+        return this.regulatorService.grammarChecker;
+    }
+    constructor(model, container, editorService, overlayService, regulatorService, commandsService, clipboard, externalElementTagNames, customPageWidth) {
         this.model = model;
         this.container = container;
         this.editorService = editorService;
+        this.overlayService = overlayService;
         this.regulatorService = regulatorService;
         this.commandsService = commandsService;
         this.clipboard = clipboard;
@@ -7661,7 +8221,7 @@ class Editor {
         this.focus();
         this.session.applyToolbarStyles();
         this.search = new Search(editorService);
-        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription(), this.applyFirstLinePositionSubscription(), this.applyRightIndentParagraphSubscription(), this.applyLeftIndentParagraphSubscription(), this.applyTabSettingsSubscription(), this.commandCreatedForEdges());
+        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.updateTableBorderStyleSubscription(), this.updateTableBorderWidthSubscription(), this.updateTableBordersSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.grammarReplaceSubscription(), this.ignoreGrammarErrorSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription(), this.applyFirstLinePositionSubscription(), this.applyRightIndentParagraphSubscription(), this.applyLeftIndentParagraphSubscription(), this.applyTabSettingsSubscription(), this.commandCreatedForEdges());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -7846,9 +8406,37 @@ class Editor {
         this.onContentChange();
         this.rerenderMarker();
     }
-    replaceBy(model) {
-        const partIndexes = ContentHelper.getSelectedPartDocumentIndexes(this.session.displayData.paragraphs, this.selection.range);
-        model.delete = new DeleteModel({ startIndex: partIndexes.startIndex, count: partIndexes.endIndex - partIndexes.startIndex + 1 });
+    applyTableCellsStyles(data, handler) {
+        if (!this.session.isCell()) {
+            return;
+        }
+        const source = this.regulatorService.getSessionModel(this.session.sessionId).source;
+        const tableSession = this.regulatorService.getSession(this.regulatorService.currentSession.parentSessionId);
+        const tableComponent = tableSession.customComponents.tables.find(x => x.instance.sessionId === tableSession.sessionId && x.instance.insertIndex === source.table.insertIndex)?.instance;
+        if (!tableComponent) {
+            return;
+        }
+        const selection = tableComponent.tableSelection.selectionRange
+            ? tableComponent.tableSelection.selectionRange
+            : new SelectionRangeModel({ startIndex: source.cellComponent.rowIndex, endIndex: source.cellComponent.rowIndex }, { startIndex: source.cellComponent.cellIndex, endIndex: source.cellComponent.cellIndex });
+        const applyModel = handler(data, tableComponent.table, selection);
+        if (!applyModel) {
+            return;
+        }
+        const tableSessionModel = this.regulatorService.getSessionModel(tableSession.sessionId);
+        this.saveApplyTableCellsStylesToHistory(tableComponent.table, applyModel, this.regulatorService.getTargets(tableSessionModel));
+        tableSession.applyTableCellsStyles(applyModel);
+        const newCellSession = tableComponent.getCellSession(source.cellComponent.rowIndex, source.cellComponent.cellIndex);
+        this.regulatorService.setCustomSessionAsCurrent(newCellSession.sessionId);
+        this.changedTableSize(applyModel.insertIndex, tableSession.sessionId);
+        // restore table cells selection and highlight
+        this.selection.disableSelection();
+        tableComponent.tableSelection.selectionRange = selection;
+        tableComponent.tableSelection.highlightCurrentSelectionCells();
+    }
+    replaceBy(model) {
+        const partIndexes = ContentHelper.getSelectedPartDocumentIndexes(this.session.displayData.paragraphs, this.selection.range);
+        model.delete = new DeleteModel({ startIndex: partIndexes.startIndex, count: partIndexes.endIndex - partIndexes.startIndex + 1 });
         this.saveReplaceToHistory(this.selection.range, model);
         this.removeCustomElementsData();
         const endPosition = this.session.replace(model);
@@ -8208,6 +8796,11 @@ class Editor {
             this.session.applyParagraphs(deepCopy.paragraphs);
             command = SaveCommandsHelper.getApplyParagraphsCommand(deepCopy.paragraphs, this.targets);
         }
+        else if (operation instanceof ApplyTableCellsStylesModel) {
+            this.session.applyTableCellsStyles(operation);
+            this.changedTableSize(operation.insertIndex, this.session.sessionId);
+            command = SaveCommandsHelper.getApplyTableCellsStylesCommand(operation, this.targets);
+        }
         else {
             throw new Error('Undo/redo is not implemented for the Operation');
         }
@@ -8265,6 +8858,10 @@ class Editor {
         this.history.pushInsertTable(model);
         this.commandsService.createCommand(SaveCommandsHelper.getInsertTableCommand(model, this.targets));
     }
+    saveApplyTableCellsStylesToHistory(table, model, targets) {
+        this.history.pushApplyTableCellsStyles(table, model, targets);
+        this.commandsService.createCommand(SaveCommandsHelper.getApplyTableCellsStylesCommand(model, targets));
+    }
     saveApplyTextStyleToHistory(startIndex, endIndex, textStyle) {
         const formats = FormatHelper.sliceSection(this.session.model.formats, startIndex, endIndex);
         const linkFormats = LinkHelper.sliceFormats(this.session.model.links, startIndex, endIndex);
@@ -8513,6 +9110,19 @@ class Editor {
         }
         this.focus();
         this.onSelectionChange();
+        const paragraph = this.session.displayData.paragraphs[position.row];
+        const error = this.grammarChecker.getError(this.session.sessionId, paragraph.id, position.column);
+        if (!this.editorService.isViewOnly && error && !this.overlayService.overlayRef) {
+            const target = event.target;
+            const lineEl = target.closest('.noder-line');
+            if (lineEl) {
+                const lineRect = lineEl.getBoundingClientRect();
+                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                const hintTop = lineRect.top + scrollTop - POPUP_HEIGHT;
+                this.overlayService.open(GrammarPopupComponent, { error, paragraphIndex: position.row }, event.clientX - 100, hintTop);
+                event.stopPropagation();
+            }
+        }
         event.preventDefault();
         if (event.ctrlKey) {
             const link = this.getLinkModel(event);
@@ -8588,6 +9198,7 @@ class Editor {
         const scrollSpeed = 4;
         const deltaY = event.deltaY * factor * scrollSpeed;
         this.onScroll(deltaY);
+        this.overlayService.close();
         event.stopPropagation();
         event.preventDefault();
     }
@@ -8726,6 +9337,7 @@ class Editor {
     initMainSession() {
         const pageWidth = this.customPageWidth ?? Math.max(...this.model.pageFormats.map(x => x.pageWidth));
         this.container.nativeElement.style.maxWidth = `${pageWidth}px`;
+        this.container.nativeElement.style.width = `${pageWidth}px`;
         const scalingRatio = this.customPageWidth ? ScalingHelper.getRatio(this.customPageWidth, pageWidth) : 1;
         this.editorService.setPageFormat(this.model.pageFormats[0]);
         this.editorService.paragraphStyle(this.model.paragraphs[0].paragraphStyle);
@@ -8741,11 +9353,14 @@ class Editor {
         this.editorService.setHasSelection(!this.selection.isEmpty);
         const position = this.mainSession.displayData.positionToIndex(this.selection.selectedRange.start);
         const pageFormat = this.mainSession.displayData.getPageFormatAtPosition(position);
-        this.editorService.paragraphStyle(this.session.model.paragraphs[this.selection.selectedRange.start.row].paragraphStyle);
+        const paragraphStyle = this.session.model.paragraphs[this.selection.selectedRange.start.row].paragraphStyle;
+        const numbering = this.session.generalProperties.numberings.find(x => x.numberingId === paragraphStyle.numberingId) ?? null;
+        this.editorService.paragraphStyle(paragraphStyle, numbering);
         this.editorService.setPageFormat(pageFormat.pageFormatModel);
         this.rerenderMarker();
     }
     onContentChange() {
+        this.overlayService.close();
         if (this.search.term) {
             this.find(this.search.term);
         }
@@ -8921,12 +9536,29 @@ class Editor {
         OperationsHelper.setDefaultPageFormat(this.model, defaultPageFormat);
         this.recreateMainSession();
     }
+    applyGrammarSuggestion(error, paragraphIndex, suggestionIndex) {
+        const startIndex = new CursorParagraph(paragraphIndex, error.offset);
+        const range = new Range(startIndex, new CursorParagraph(paragraphIndex, error.offset + error.length));
+        const partIndexes = ContentHelper.getSelectedPartDocumentIndexes(this.session.displayData.paragraphs, range);
+        const deleteModel = new DeleteModel({ startIndex: partIndexes.startIndex, count: error.length });
+        const insertText = new InsertTextModel({
+            insertIndex: partIndexes.startIndex,
+            text: error.replacements[suggestionIndex]
+        });
+        const model = new ReplaceModel({ delete: deleteModel, insertText });
+        this.saveReplaceToHistory(this.selection.range, model);
+        const endPosition = this.session.replace(model);
+        this.onDocumentChange(new Range(startIndex, endPosition));
+        this.onSelectionChange();
+        this.onContentChange();
+    }
     receiveTextStyleSubscription() {
         return this.editorService.receiveTextStyle$.subscribe(x => this.provideTextStyle(x));
     }
     viewOnlyModeSubscription() {
         return this.editorService.isViewOnly$.subscribe(() => {
             this.selection?.clearSelection();
+            this.renderer.loop.schedule({ grammar: true });
         });
     }
     applyLeftMarginPageFormatSubscription() {
@@ -8960,6 +9592,12 @@ class Editor {
             this.editorService.replaceCurrent$.subscribe(() => this.replace())
         ];
     }
+    grammarReplaceSubscription() {
+        return this.editorService.applyGrammarSuggestion$.subscribe(x => this.applyGrammarSuggestion(x.error, x.paragraphIndex, x.suggestionIndex));
+    }
+    ignoreGrammarErrorSubscription() {
+        return this.editorService.ignoreGrammarError$.subscribe(x => this.grammarChecker.addErrorToIgnoreList(x));
+    }
     setTextStylesSubscription() {
         return this.editorService.setTextStyles$.subscribe(textStyles => {
             this.applyTextStyles(textStyles);
@@ -9099,9 +9737,16 @@ class Editor {
         });
     }
     insertTableSubscription() {
-        return this.editorService.insertTable$.subscribe(data => {
-            this.insertTable(data);
-        });
+        return this.editorService.insertTable$.subscribe(data => this.insertTable(data));
+    }
+    updateTableBorderStyleSubscription() {
+        return this.editorService.updateTableBorderStyle$.subscribe(x => this.applyTableCellsStyles(x, (data, table, selection) => TableOperationsHelper.getApplyTableCellsBordersStyle(data, table, selection)));
+    }
+    updateTableBorderWidthSubscription() {
+        return this.editorService.updateTableBorderWidth$.subscribe(x => this.applyTableCellsStyles(x, (data, table, selection) => TableOperationsHelper.getApplyTableCellsBordersWidth(data, table, selection)));
+    }
+    updateTableBordersSubscription() {
+        return this.editorService.updateTableBorders$.subscribe(x => this.applyTableCellsStyles(x, (data, table, selection) => TableOperationsHelper.getApplyTableCellsBorders(data, table, selection)));
     }
     insertTextSubscription() {
         return this.editorService.insertText$.subscribe(x => {
@@ -9228,6 +9873,7 @@ class Editor {
         }
         const pageWidth = this.customPageWidth ?? Math.max(...this.model.pageFormats.map(x => x.pageWidth));
         this.container.nativeElement.style.maxWidth = `${pageWidth}px`;
+        this.container.nativeElement.style.width = `${pageWidth}px`;
         const scalingRatio = this.customPageWidth ? ScalingHelper.getRatio(this.customPageWidth, pageWidth) : 1;
         this.model.tables.forEach(table => {
             this.changeColumnsWidth(table.columns, scalingRatio);
@@ -9318,7 +9964,7 @@ class EditorSearchBarComponent {
         this.editorService.replaceCurrentSearchResult();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorSearchBarComponent, deps: [{ token: EditorService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorSearchBarComponent, isStandalone: true, selector: "app-nod-editor-search-bar", providers: [ExternalElementService], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "@let searchResultCount = searchResultCount$ | async;\n@let searchResultIndex = searchResultIndex$ | async;\n@let isViewOnly = isViewOnly$ | async;\n<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            #searchInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <div>\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</div>\n@if (isReplace) {\n    <div class=\"replace-form\">\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}\n<div class=\"search-options\">\n    <button\n        type=\"button\"\n        [disabled]=\"isViewOnly\"\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        @if (searchResultCount) {\n            <span>\n                {{ 'NODER.COMPLEX_LABEL.OF_COUNTER' | translate: { current: searchResultIndex, total: searchResultCount ?? 0 } }}\n            </span>\n        } @else {\n            <span>{{ 'NODER.LABEL.NO_RESULTS' | translate }}</span>\n        }\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", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;border-style:solid;border-radius:0 0 4px 4px;border-width:1px;border-top:none}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{margin:8px 6px 0 0;display:flex;gap:8px}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: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.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: "17.0.0", version: "19.0.5", type: EditorSearchBarComponent, isStandalone: true, selector: "app-nod-editor-search-bar", providers: [ExternalElementService], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "@let searchResultCount = searchResultCount$ | async;\n@let searchResultIndex = searchResultIndex$ | async;\n@let isViewOnly = isViewOnly$ | async;\n<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            #searchInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <div>\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</div>\n@if (isReplace) {\n    <div class=\"replace-form\">\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}\n<div class=\"search-options\">\n    <button\n        type=\"button\"\n        [disabled]=\"isViewOnly\"\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        @if (searchResultCount) {\n            <span>\n                {{ 'NODER.COMPLEX_LABEL.OF_COUNTER' | translate: { current: searchResultIndex, total: searchResultCount ?? 0 } }}\n            </span>\n        } @else {\n            <span>{{ 'NODER.LABEL.NO_RESULTS' | translate }}</span>\n        }\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", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;border-style:solid;border-radius:0 0 4px 4px;border-width:1px;border-top:none}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{margin:8px 6px 0 0;display:flex;gap:8px}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: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.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.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorSearchBarComponent, decorators: [{
             type: Component,
@@ -9484,8 +10130,10 @@ class DisplayTokenHelper {
             offsetBefore: prevToken.indentBefore,
             offsetAfter: prevToken.indentAfter,
             lineSpacing: prevToken.lineSpacing,
+            markerWidth: prevToken.markerWidth,
             isAfterPageBreak,
-            isEndedByPageBreak: prevToken.isPageBreak
+            isEndedByPageBreak: prevToken.isPageBreak,
+            isNumbering: prevToken.isNumbering
         });
         if (firstWrapToken) {
             info.align = firstWrapToken.align;
@@ -9497,6 +10145,8 @@ class DisplayTokenHelper {
             info.offsetAfter = firstWrapToken.indentAfter;
             info.lineSpacing = firstWrapToken.lineSpacing;
             info.hasTable = firstWrapToken.isTable;
+            info.isNumbering = firstWrapToken.isNumbering;
+            info.markerWidth = firstWrapToken.markerWidth;
         }
         let fontSize = 0;
         let ascent = 0;
@@ -9740,7 +10390,7 @@ class NoderTableCellComponent {
         this.editorService.disableSelection();
     }
     onStartResizing(event, border) {
-        if (this.session.isWithinEdge() && !this.regulatorService.mainSession.session.customComponents.edges.isEdit) {
+        if (this.session.isCellWithinEdge() && !this.regulatorService.mainSession.session.customComponents.edges.isEdit) {
             return;
         }
         event.stopPropagation();
@@ -9766,7 +10416,7 @@ class NoderTableCellComponent {
         }, options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTableCellComponent, deps: [{ token: EditorService }, { token: RegulatorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTableCellComponent, isStandalone: false, selector: "app-nod-table-cell", inputs: { table: "table", cell: "cell", rowIndex: "rowIndex", cellIndex: "cellIndex", columnIndex: "columnIndex", width: "width", parentSessionId: "parentSessionId", generalProperties: "generalProperties", heightChanged: "heightChanged", startResizing: "startResizing" }, host: { properties: { "class.highlighted": "this.isHighlighted", "attr.data-session-id": "this.sessionId" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div\n    *ngIf=\"cellIndex === 0\"\n    class=\"resizer left-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Left)\"></div>\n<div\n    #container\n    class=\"edit-container\"></div>\n<div class=\"highlight-container\"></div>\n<div\n    class=\"resizer right-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Right)\"></div>\n", styles: [".highlight-container{visibility:hidden;position:absolute;width:100%;height:100%;background-color:#5ea8f766;pointer-events:none;overflow:hidden}:host{display:flex;position:relative;min-height:19px;height:100%;background:transparent}:host.highlighted .highlight-container{visibility:visible}.edit-container{min-height:1px;overflow:hidden}.left-border{left:-6px}.resizer{cursor:col-resize;width:11px;height:100%;position:absolute;z-index:1}.right-border{right:-6px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTableCellComponent, isStandalone: false, selector: "app-nod-table-cell", inputs: { table: "table", cell: "cell", rowIndex: "rowIndex", cellIndex: "cellIndex", columnIndex: "columnIndex", width: "width", parentSessionId: "parentSessionId", generalProperties: "generalProperties", heightChanged: "heightChanged", startResizing: "startResizing" }, host: { properties: { "class.highlighted": "this.isHighlighted", "attr.data-session-id": "this.sessionId" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div\n    *ngIf=\"cellIndex === 0\"\n    class=\"resizer left-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Left)\"></div>\n<div\n    #container\n    class=\"edit-container\"></div>\n<div class=\"highlight-container\"></div>\n<div\n    class=\"resizer right-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Right)\"></div>\n", styles: [".highlight-container{visibility:hidden;position:absolute;width:100%;height:100%;background-color:#5ea8f766;pointer-events:none;overflow:hidden}:host{display:flex;position:relative;min-height:19px;height:100%;background:transparent}:host.highlighted .highlight-container{visibility:visible}.edit-container{min-height:1px;overflow:hidden}.left-border{left:-6px}.resizer{cursor:col-resize;width:11px;height:100%;position:absolute;z-index:1}.right-border{right:-6px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTableCellComponent, decorators: [{
             type: Component,
@@ -9810,55 +10460,6 @@ class RowDataModel {
     }
 }
 
-var LineStyles;
-(function (LineStyles) {
-    LineStyles[LineStyles["SolidLine"] = 0] = "SolidLine";
-    LineStyles[LineStyles["RoundDot"] = 1] = "RoundDot";
-    LineStyles[LineStyles["SquareDot"] = 2] = "SquareDot";
-    LineStyles[LineStyles["Dash"] = 3] = "Dash";
-    LineStyles[LineStyles["DashDot"] = 4] = "DashDot";
-    LineStyles[LineStyles["LongDash"] = 5] = "LongDash";
-    LineStyles[LineStyles["LongDashDot"] = 6] = "LongDashDot";
-    LineStyles[LineStyles["LongDashDotDot"] = 7] = "LongDashDotDot";
-    LineStyles[LineStyles["Single"] = 8] = "Single";
-    LineStyles[LineStyles["Thick"] = 9] = "Thick";
-    LineStyles[LineStyles["Double"] = 10] = "Double";
-    LineStyles[LineStyles["Dotted"] = 11] = "Dotted";
-    LineStyles[LineStyles["Dashed"] = 12] = "Dashed";
-    LineStyles[LineStyles["DotDash"] = 13] = "DotDash";
-    LineStyles[LineStyles["DotDotDash"] = 14] = "DotDotDash";
-    LineStyles[LineStyles["Triple"] = 15] = "Triple";
-    LineStyles[LineStyles["ThinThickSmallGap"] = 16] = "ThinThickSmallGap";
-    LineStyles[LineStyles["ThickThinSmallGap"] = 17] = "ThickThinSmallGap";
-    LineStyles[LineStyles["ThinThickThinSmallGap"] = 18] = "ThinThickThinSmallGap";
-    LineStyles[LineStyles["ThinThickMediumGap"] = 19] = "ThinThickMediumGap";
-    LineStyles[LineStyles["ThickThinMediumGap"] = 20] = "ThickThinMediumGap";
-    LineStyles[LineStyles["ThinThickThinMediumGap"] = 21] = "ThinThickThinMediumGap";
-    LineStyles[LineStyles["ThinThickLargeGap"] = 22] = "ThinThickLargeGap";
-    LineStyles[LineStyles["ThickThinLargeGap"] = 23] = "ThickThinLargeGap";
-    LineStyles[LineStyles["ThinThickThinLargeGap"] = 24] = "ThinThickThinLargeGap";
-    LineStyles[LineStyles["Wave"] = 25] = "Wave";
-    LineStyles[LineStyles["DoubleWave"] = 26] = "DoubleWave";
-    LineStyles[LineStyles["DashSmallGap"] = 27] = "DashSmallGap";
-    LineStyles[LineStyles["DashDotStroked"] = 28] = "DashDotStroked";
-    LineStyles[LineStyles["ThreeDEmboss"] = 29] = "ThreeDEmboss";
-    LineStyles[LineStyles["ThreeDEngrave"] = 30] = "ThreeDEngrave";
-    LineStyles[LineStyles["Outset"] = 31] = "Outset";
-    LineStyles[LineStyles["Inset"] = 32] = "Inset";
-    LineStyles[LineStyles["Nil"] = 33] = "Nil";
-})(LineStyles || (LineStyles = {}));
-
-var Positions;
-(function (Positions) {
-    Positions[Positions["Top"] = 0] = "Top";
-    Positions[Positions["Right"] = 1] = "Right";
-    Positions[Positions["Bottom"] = 2] = "Bottom";
-    Positions[Positions["Left"] = 3] = "Left";
-    Positions[Positions["All"] = 4] = "All";
-    Positions[Positions["InsideHorizontal"] = 5] = "InsideHorizontal";
-    Positions[Positions["InsideVertical"] = 6] = "InsideVertical";
-})(Positions || (Positions = {}));
-
 class TableCellHelper {
     static setCellBorders(cell, borders) {
         if (!borders?.length || !cell) {
@@ -9948,62 +10549,6 @@ class TableCellHelper {
     }
 }
 
-class SelectionRangeModel {
-    constructor(rowIndexes, cellIndexes) {
-        this.rowIndexes = rowIndexes;
-        this.cellIndexes = cellIndexes;
-    }
-}
-
-class OverlayService {
-    constructor(overlay) {
-        this.overlay = overlay;
-        this.overlayResult = new Subject();
-    }
-    open(component, data, xPosition, yPosition) {
-        this.close();
-        this.overlayRef = this.overlay.create(this.getOverlayConfig(xPosition, yPosition));
-        const ref = this.overlayRef.attach(new ComponentPortal(component));
-        Object.assign(ref.instance, data);
-        this.clickSubscription();
-        return this.overlayResult.asObservable();
-    }
-    close(value) {
-        this.overlayResult.next(value);
-        this.openedSubscription?.unsubscribe();
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-            this.overlayRef = null;
-        }
-    }
-    clickSubscription() {
-        this.openedSubscription = fromEvent(document, 'click')
-            .pipe(filter(event => {
-            const clickTarget = event.target;
-            return this.overlayRef && !this.overlayRef.overlayElement.contains(clickTarget);
-        }), take(1))
-            .subscribe(() => {
-            this.close();
-        });
-    }
-    getOverlayConfig(xPosition, yPosition) {
-        return new OverlayConfig({
-            hasBackdrop: false,
-            backdropClass: 'noder-backdrop',
-            positionStrategy: this.getOverlayPosition(xPosition, yPosition),
-            scrollStrategy: this.overlay.scrollStrategies.reposition()
-        });
-    }
-    getOverlayPosition(xPosition, yPosition) {
-        return this.overlay.position().global().left(`${xPosition}px`).top(`${yPosition}px`);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OverlayService, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OverlayService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OverlayService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1.Overlay }] });
-
 class TableOverlayMenuComponent {
     constructor(editorService, overlayService, translateService) {
         this.editorService = editorService;
@@ -10066,13 +10611,13 @@ class TableOverlayMenuComponent {
         this.editorService.removeTable(this.tableInsertIndex, this.sessionId);
         this.overlayService.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableOverlayMenuComponent, deps: [{ token: EditorService }, { token: OverlayService }, { token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TableOverlayMenuComponent, isStandalone: false, selector: "app-nod-table-overlay-menu", inputs: { selectionRange: "selectionRange", targets: "targets", canRemoveRows: "canRemoveRows", canRemoveColumns: "canRemoveColumns", tableInsertIndex: "tableInsertIndex", sessionId: "sessionId" }, ngImport: i0, template: "<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsAbove()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsAboveMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsBelow()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsBelowMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsLeft()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsLeftMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsRight()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsRightMessage }}\n</div>\n<ng-container *ngIf=\"canRemoveRows || canRemoveColumns\">\n    <div class=\"menu-separator\">\n        <div class=\"menu-separator-top\"></div>\n        <div class=\"menu-separator-bottom\"></div>\n    </div>\n    <div\n        *ngIf=\"canRemoveRows\"\n        class=\"menu-item\"\n        (click)=\"onRemoveRows()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeRowsMessage }}\n    </div>\n    <div\n        *ngIf=\"canRemoveColumns\"\n        class=\"menu-item\"\n        (click)=\"onRemoveColumns()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeColumnsMessage }}\n    </div>\n    <div\n        class=\"menu-item\"\n        (click)=\"onRemoveTable()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeTableMessage }}\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;border:1px solid transparent;border-radius:4px;box-shadow:0 2px 6px 2px #3c404326;overflow-y:auto;background:#fff;cursor:default;font-size:13px;margin:0;padding:6px 0}.menu-item{display:flex;flex-direction:row;align-items:center;cursor:pointer;min-height:20px;color:#202124;font-size:16px;letter-spacing:.2px;line-height:20px;padding:6px}.menu-item:hover{background-color:#0000001a}.mat-icon{margin-right:6px;width:20px;height:20px;font-size:20px}.menu-separator{-webkit-user-select:none;user-select:none}.menu-separator .menu-separator-top{padding:4px}.menu-separator .menu-separator-bottom{border-top:1px solid #dadce0;padding:4px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableOverlayMenuComponent, deps: [{ token: EditorService }, { token: OverlayService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TableOverlayMenuComponent, isStandalone: false, selector: "app-nod-table-overlay-menu", inputs: { selectionRange: "selectionRange", targets: "targets", canRemoveRows: "canRemoveRows", canRemoveColumns: "canRemoveColumns", tableInsertIndex: "tableInsertIndex", sessionId: "sessionId" }, ngImport: i0, template: "<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsAbove()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsAboveMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsBelow()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsBelowMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsLeft()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsLeftMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsRight()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsRightMessage }}\n</div>\n<ng-container *ngIf=\"canRemoveRows || canRemoveColumns\">\n    <div class=\"menu-separator\">\n        <div class=\"menu-separator-top\"></div>\n        <div class=\"menu-separator-bottom\"></div>\n    </div>\n    <div\n        *ngIf=\"canRemoveRows\"\n        class=\"menu-item\"\n        (click)=\"onRemoveRows()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeRowsMessage }}\n    </div>\n    <div\n        *ngIf=\"canRemoveColumns\"\n        class=\"menu-item\"\n        (click)=\"onRemoveColumns()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeColumnsMessage }}\n    </div>\n    <div\n        class=\"menu-item\"\n        (click)=\"onRemoveTable()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeTableMessage }}\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;border:1px solid transparent;border-radius:4px;box-shadow:0 2px 6px 2px #3c404326;overflow-y:auto;background:#fff;cursor:default;font-size:13px;margin:0;padding:6px 0}.menu-item{display:flex;flex-direction:row;align-items:center;cursor:pointer;min-height:20px;color:#202124;font-size:16px;letter-spacing:.2px;line-height:20px;padding:6px}.menu-item:hover{background-color:#0000001a}.mat-icon{margin-right:6px;width:20px;height:20px;font-size:20px}.menu-separator{-webkit-user-select:none;user-select:none}.menu-separator .menu-separator-top{padding:4px}.menu-separator .menu-separator-bottom{border-top:1px solid #dadce0;padding:4px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableOverlayMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-nod-table-overlay-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsAbove()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsAboveMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsBelow()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsBelowMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsLeft()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsLeftMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsRight()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsRightMessage }}\n</div>\n<ng-container *ngIf=\"canRemoveRows || canRemoveColumns\">\n    <div class=\"menu-separator\">\n        <div class=\"menu-separator-top\"></div>\n        <div class=\"menu-separator-bottom\"></div>\n    </div>\n    <div\n        *ngIf=\"canRemoveRows\"\n        class=\"menu-item\"\n        (click)=\"onRemoveRows()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeRowsMessage }}\n    </div>\n    <div\n        *ngIf=\"canRemoveColumns\"\n        class=\"menu-item\"\n        (click)=\"onRemoveColumns()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeColumnsMessage }}\n    </div>\n    <div\n        class=\"menu-item\"\n        (click)=\"onRemoveTable()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeTableMessage }}\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;border:1px solid transparent;border-radius:4px;box-shadow:0 2px 6px 2px #3c404326;overflow-y:auto;background:#fff;cursor:default;font-size:13px;margin:0;padding:6px 0}.menu-item{display:flex;flex-direction:row;align-items:center;cursor:pointer;min-height:20px;color:#202124;font-size:16px;letter-spacing:.2px;line-height:20px;padding:6px}.menu-item:hover{background-color:#0000001a}.mat-icon{margin-right:6px;width:20px;height:20px;font-size:20px}.menu-separator{-webkit-user-select:none;user-select:none}.menu-separator .menu-separator-top{padding:4px}.menu-separator .menu-separator-bottom{border-top:1px solid #dadce0;padding:4px}\n"] }]
-        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }, { type: i3$1.TranslateService }], propDecorators: { selectionRange: [{
+        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }, { type: i3.TranslateService }], propDecorators: { selectionRange: [{
                 type: Input
             }], targets: [{
                 type: Input
@@ -10302,10 +10847,20 @@ class TableSelection {
         };
         const cellIndexes = {
             startIndex: 0,
-            endIndex: Math.max(...this.rowMatrix.map(x => x.cells.length))
+            endIndex: Math.max(...this.rowMatrix.map(x => x.cells.length - 1))
         };
         this.selectionRange = new SelectionRangeModel(rowIndexes, cellIndexes);
     }
+    highlightCurrentSelectionCells() {
+        if (!this.selectionRange) {
+            return;
+        }
+        for (let i = this.selectionRange.rowIndexes.startIndex; i <= this.selectionRange.rowIndexes.endIndex; i++) {
+            for (let j = this.selectionRange.cellIndexes.startIndex; j <= this.selectionRange.cellIndexes.endIndex; j++) {
+                this.rowMatrix[i].cells[j].highlightCell();
+            }
+        }
+    }
     clearSelection() {
         if (!this.selectionRange) {
             return;
@@ -10966,8 +11521,15 @@ class NumberingHelper {
         paragraph.numberingData.markerTextStyle = markerTextStyle;
         paragraph.numberingData.width = markerSizes.width;
         paragraph.numberingData.height = markerSizes.height;
-        const indentHanging = paragraphStyle.indentHanging ? paragraphStyle.indentHanging : numberingLevel.indentHanging;
-        paragraph.numberingData.paddingLeft = numberingLevel.indentLeft - indentHanging;
+        const indentLeft = paragraphStyle.indentLeft ? paragraphStyle.indentLeft : numberingLevel.indentLeft;
+        let indent = 0;
+        if (!paragraphStyle.indentHanging && !paragraphStyle.indentFirstLine) {
+            indent = -numberingLevel.indentHanging;
+        }
+        else {
+            indent = paragraphStyle.indentHanging ? -paragraphStyle.indentHanging : paragraphStyle.indentFirstLine;
+        }
+        paragraph.numberingData.paddingLeft = indentLeft + indent;
     }
     static getMarkerSizes(marker, markerStyle) {
         let width = 0;
@@ -11206,6 +11768,28 @@ class Paragraph {
     }
 }
 
+class ParagraphInfoAdded {
+    constructor(paragraph) {
+        this.paragraph = paragraph;
+    }
+}
+
+class ParagraphInfoContentChanged {
+    constructor(paragraph, index, length) {
+        this.paragraph = paragraph;
+        this.index = index;
+        this.length = length;
+    }
+}
+
+class ParagraphInfoContentInserted {
+    constructor(paragraph, index, length) {
+        this.paragraph = paragraph;
+        this.index = index;
+        this.length = length;
+    }
+}
+
 class ParagraphInfoModel {
     constructor(fields) {
         if (fields) {
@@ -11214,6 +11798,12 @@ class ParagraphInfoModel {
     }
 }
 
+class ParagraphInfosRemoved {
+    constructor(id) {
+        this.ids = id;
+    }
+}
+
 class ParagraphStyleHelper {
     static getParagraphsAtRange(paragraphs, startIndex, endIndex) {
         if (!paragraphs?.length) {
@@ -11282,6 +11872,9 @@ class DisplayData extends EventEmitting {
         });
         return max;
     }
+    get ParagraphInfoChanges$() {
+        return this.ParagraphInfoChanges.asObservable();
+    }
     constructor(model, generalProperties, sessionId, pageFormatModels, pagesSpace, customComponents, customContentService, editorService) {
         super();
         this.model = model;
@@ -11296,10 +11889,16 @@ class DisplayData extends EventEmitting {
         this.pagesFormat = [];
         this.allPagesHeight = 0;
         this.tabTokens = [];
+        this.ParagraphInfoChanges = new Subject();
+        this.lastParagraphId = 0;
         this.updateDataForModel();
     }
     updateDataForModel() {
-        this.paragraphs = this.splitByParagraphs(this.model.content).map(x => new ParagraphInfoModel({ content: x }));
+        this.paragraphs = this.splitByParagraphs(this.model.content).map(x => {
+            this.lastParagraphId++;
+            const id = this.lastParagraphId;
+            return new ParagraphInfoModel({ content: x, id });
+        });
         this.pagesFormat = this.pageFormatModels.map(x => new PageFormat(x, this.pagesSpace, this.customComponents));
     }
     insertText(position, text) {
@@ -11310,7 +11909,16 @@ class DisplayData extends EventEmitting {
         const paragraphText = this.paragraphs[range.start.row].content.slice(0, range.start.column) +
             this.paragraphs[range.end.row].content.slice(range.end.column);
         const paragraphSettings = this.getParagraphSettings(range.start.row);
-        this.paragraphs.splice(range.start.row, range.end.row - range.start.row + 1, new ParagraphInfoModel({ content: paragraphText }));
+        const changedParagraph = new ParagraphInfoModel({ content: paragraphText, id: this.paragraphs[range.start.row].id });
+        const removedLength = range.end.row === range.start.row
+            ? range.end.column - range.start.column
+            : this.paragraphs[range.start.row].content.length - range.start.column;
+        const spliced = this.paragraphs.splice(range.start.row, range.end.row - range.start.row + 1, changedParagraph);
+        this.ParagraphInfoChanges.next(new ParagraphInfoContentChanged(changedParagraph, range.start.column, removedLength));
+        const removedParagraphs = spliced.filter(x => x.id !== changedParagraph.id).map(x => x.id);
+        if (removedParagraphs.length) {
+            this.ParagraphInfoChanges.next(new ParagraphInfosRemoved(removedParagraphs));
+        }
         this.paragraphs[range.start.row].paragraphSettings = paragraphSettings;
     }
     getParagraphContent(index) {
@@ -11764,6 +12372,8 @@ class DisplayData extends EventEmitting {
                     indentBefore: lineInfo.offsetBefore,
                     indentAfter: lineInfo.offsetAfter,
                     lineSpacing: lineInfo.lineSpacing,
+                    markerWidth: lineInfo.markerWidth,
+                    isNumbering: lineInfo.isNumbering,
                     isPageBreak: breakType === BreakTypes.Page,
                     isLineBreak: breakType === BreakTypes.TextWrapping,
                     isTab: false
@@ -11893,9 +12503,11 @@ class DisplayData extends EventEmitting {
                     indentBefore: lineInfo.offsetBefore,
                     indentAfter: lineInfo.offsetAfter,
                     lineSpacing: lineInfo.lineSpacing,
+                    markerWidth: lineInfo.markerWidth,
                     isPageBreak: breakType === BreakTypes.Page,
                     isLineBreak: breakType === BreakTypes.TextWrapping,
-                    isTab: false
+                    isTab: false,
+                    isNumbering: lineInfo.isNumbering
                 });
                 tokens.push(token);
                 if (charCode !== prevCharCode ||
@@ -11971,6 +12583,8 @@ class DisplayData extends EventEmitting {
                 indentRight: lineInfo.indent.right,
                 indentBefore: lineInfo.offsetBefore,
                 indentAfter: lineInfo.offsetAfter,
+                markerWidth: lineInfo.markerWidth,
+                isNumbering: lineInfo.isNumbering,
                 isPageBreak: false,
                 isLineBreak: false,
                 isTab: false,
@@ -11989,13 +12603,16 @@ class DisplayData extends EventEmitting {
                 lineSpacing: DEFAULT_PARAGRAPH_STYLE.lineSpacing
             });
         }
-        const indentLeft = this.getParagraphIndentLeft(model, paragraph);
-        return this.getLineInfoModel(paragraph, indentLeft);
+        const { indent, markerWidth } = this.getParagraphIndentLeft(model, paragraph);
+        return this.getLineInfoModel(paragraph, indent, markerWidth);
     }
     getParagraphIndentLeft(model, paragraph) {
         const numberingId = paragraph.paragraphStyle.numberingId;
         if (numberingId === null) {
-            return paragraph.paragraphStyle.indentLeft;
+            return {
+                indent: new IndentModel(paragraph.paragraphStyle.indentFirstLine ?? DEFAULT_PARAGRAPH_STYLE.indentFirstLine, paragraph.paragraphStyle.indentHanging ?? DEFAULT_PARAGRAPH_STYLE.indentHanging, paragraph.paragraphStyle.indentLeft ?? DEFAULT_PARAGRAPH_STYLE.indentLeft, paragraph.paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight),
+                markerWidth: 0
+            };
         }
         const level = paragraph.paragraphStyle.numberingLevel;
         const paragraphIndex = model.paragraphs.indexOf(paragraph);
@@ -12007,23 +12624,35 @@ class DisplayData extends EventEmitting {
         const marker = NumberingHelper.getMarker(levelModel, numberingId, model.paragraphs, paragraphIndex, this.generalProperties.numberingInfo);
         const markerSizes = NumberingHelper.getMarkerSizes(marker, markerTextStyle);
         markerWidth = markerSizes.width;
-        const hangingIndent = paragraph.paragraphStyle.indentHanging ? paragraph.paragraphStyle.indentHanging : levelModel.indentHanging;
-        let paragraphIndent = levelModel.indentLeft - hangingIndent + markerWidth + markerWidth / marker.length;
-        return paragraphIndent;
+        let indentHanging = levelModel.indentHanging;
+        let indentFirstLine = DEFAULT_PARAGRAPH_STYLE.indentFirstLine;
+        if (paragraph.paragraphStyle.indentFirstLine || paragraph.paragraphStyle.indentHanging) {
+            if (paragraph.paragraphStyle.indentFirstLine) {
+                indentFirstLine = paragraph.paragraphStyle.indentFirstLine;
+                indentHanging = 0;
+            }
+            else {
+                indentHanging = paragraph.paragraphStyle.indentHanging ? paragraph.paragraphStyle.indentHanging : levelModel.indentHanging;
+            }
+        }
+        const indent = new IndentModel(indentFirstLine, indentHanging, paragraph.paragraphStyle.indentLeft ? paragraph.paragraphStyle.indentLeft : levelModel.indentLeft, paragraph.paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight);
+        return { indent, markerWidth: markerWidth + markerWidth / marker.length };
     }
     getLineInfoFromTextLine(index) {
         const paragraph = ParagraphStyleHelper.getParagraphAtIndex(this.model.paragraphs, index);
         const indentLeft = this.getIndentLeftFromTextLine(index);
-        return this.getLineInfoModel(paragraph, indentLeft);
+        const indent = new IndentModel(paragraph.paragraphStyle.indentFirstLine ?? DEFAULT_PARAGRAPH_STYLE.indentFirstLine, paragraph.paragraphStyle.indentHanging ?? DEFAULT_PARAGRAPH_STYLE.indentHanging, indentLeft ?? DEFAULT_PARAGRAPH_STYLE.indentLeft, paragraph.paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight);
+        return this.getLineInfoModel(paragraph, indent, 0);
     }
-    getLineInfoModel(paragraph, indentLeft) {
-        const indentHanging = paragraph.paragraphStyle.numberingId === null ? paragraph.paragraphStyle.indentHanging : 0;
+    getLineInfoModel(paragraph, indent, markerWidth) {
         return new LineInfoModel({
             align: paragraph.paragraphStyle.alignment ?? DEFAULT_PARAGRAPH_STYLE.alignment,
-            indent: new IndentModel(paragraph.paragraphStyle.indentFirstLine ?? DEFAULT_PARAGRAPH_STYLE.indentFirstLine, indentHanging ?? DEFAULT_PARAGRAPH_STYLE.indentHanging, indentLeft ?? DEFAULT_PARAGRAPH_STYLE.indentLeft, paragraph.paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight),
+            indent,
             offsetBefore: DEFAULT_PARAGRAPH_STYLE.spaceBefore,
             offsetAfter: DEFAULT_PARAGRAPH_STYLE.spaceAfter,
-            lineSpacing: paragraph.paragraphStyle.lineSpacing ?? DEFAULT_PARAGRAPH_STYLE.lineSpacing
+            lineSpacing: paragraph.paragraphStyle.lineSpacing ?? DEFAULT_PARAGRAPH_STYLE.lineSpacing,
+            isNumbering: !!markerWidth,
+            markerWidth
         });
     }
     getIndentLeftFromTextLine(insertIndex) {
@@ -12230,9 +12859,30 @@ class DisplayData extends EventEmitting {
     insertTextAndReturnEndCursorPosition(text, position) {
         const left = this.paragraphs[position.row].content.slice(0, position.column);
         const right = this.paragraphs[position.row].content.slice(position.column);
-        const insertParagraphs = this.splitByParagraphs(`${left}${text}${right}`).map(x => new ParagraphInfoModel({ content: x, nextLineIndexes: [] }));
+        const originalParagraphId = this.paragraphs[position.row].id;
+        const insertParagraphs = this.splitByParagraphs(`${left}${text}${right}`).map((x, i) => {
+            const newParagraph = new ParagraphInfoModel({ content: x, nextLineIndexes: [] });
+            if (i === 0) {
+                newParagraph.id = originalParagraphId;
+            }
+            else {
+                newParagraph.id = ++this.lastParagraphId;
+            }
+            return newParagraph;
+        });
         insertParagraphs[0].paragraphSettings = this.getParagraphSettings(position.row);
         this.paragraphs.splice(position.row, 1, ...insertParagraphs);
+        for (let i = 0; i < insertParagraphs.length; i++) {
+            if (i === 0) {
+                const addedLength = insertParagraphs.length === 1 ? text.length : null;
+                const removedLength = insertParagraphs.length > 1 ? right.length : null;
+                const change = addedLength
+                    ? new ParagraphInfoContentInserted(insertParagraphs[i], position.column, addedLength)
+                    : new ParagraphInfoContentChanged(insertParagraphs[i], position.column, removedLength);
+                this.ParagraphInfoChanges.next(change);
+            }
+            this.ParagraphInfoChanges.next(new ParagraphInfoAdded(insertParagraphs[i]));
+        }
         return new CursorParagraph(position.row + insertParagraphs.length - 1, insertParagraphs[insertParagraphs.length - 1].content.length - right.length);
     }
     splitByParagraphs(text) {
@@ -12369,13 +13019,13 @@ class NoderEdgeComponent extends DestroyComponent {
             });
         }, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderEdgeComponent, deps: [{ token: RegulatorService }, { token: EditorService }, { token: i3$1.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderEdgeComponent, deps: [{ token: RegulatorService }, { token: EditorService }, { token: i3.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderEdgeComponent, isStandalone: false, selector: "app-nod-edge", inputs: { model: "model", generalProperties: "generalProperties", margins: "margins", width: "width", parentSessionId: "parentSessionId", isEvenEdgesExist: "isEvenEdgesExist", type: "type" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "typeContainer", first: true, predicate: ["locationType"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    #container\n    class=\"edit-container\"></div>\n<div\n    #locationType\n    class=\"location-type\">\n    <span>{{ edgeNameByType }}</span>\n</div>\n", styles: [":host{height:100%;width:100%;background:transparent;display:block}.location-type{position:absolute;height:auto;width:auto;font-size:9pt;color:#333;background-color:#f2f2f2;border:1px solid #838282;border-radius:2px;padding:4px;margin-left:5px;z-index:2}.header-edit-mode{border-bottom:1px dashed #838282}.footer-edit-mode{border-top:1px dashed #838282}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderEdgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-nod-edge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n    #container\n    class=\"edit-container\"></div>\n<div\n    #locationType\n    class=\"location-type\">\n    <span>{{ edgeNameByType }}</span>\n</div>\n", styles: [":host{height:100%;width:100%;background:transparent;display:block}.location-type{position:absolute;height:auto;width:auto;font-size:9pt;color:#333;background-color:#f2f2f2;border:1px solid #838282;border-radius:2px;padding:4px;margin-left:5px;z-index:2}.header-edit-mode{border-bottom:1px dashed #838282}.footer-edit-mode{border-top:1px dashed #838282}\n"] }]
-        }], ctorParameters: () => [{ type: RegulatorService }, { type: EditorService }, { type: i3$1.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { model: [{
+        }], ctorParameters: () => [{ type: RegulatorService }, { type: EditorService }, { type: i3.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { model: [{
                 type: Input
             }], generalProperties: [{
                 type: Input
@@ -12887,7 +13537,7 @@ class NoderImageComponent extends BaseNoderComponent {
         image.style.height = `${size.height}px`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderImageComponent, deps: [{ token: i0.ElementRef }, { token: ImageApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderImageComponent, isStandalone: false, selector: "app-nod-image", usesInheritance: true, ngImport: i0, template: "<app-nod-resizer\n    *ngIf=\"isFocused\"\n    class=\"resizer\"\n    [isDisabled]=\"isViewOnly$ | async\"\n    [size]=\"size\"\n    (resizeEnd)=\"onResizeEnd($event)\" />\n", styles: [":host{position:relative;outline:none}.resizer{position:absolute;z-index:1}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizerComponent, selector: "app-nod-resizer", inputs: ["isDisabled", "size"], outputs: ["resizeEnd"] }, { 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: NoderImageComponent, isStandalone: false, selector: "app-nod-image", usesInheritance: true, ngImport: i0, template: "<app-nod-resizer\n    *ngIf=\"isFocused\"\n    class=\"resizer\"\n    [isDisabled]=\"isViewOnly$ | async\"\n    [size]=\"size\"\n    (resizeEnd)=\"onResizeEnd($event)\" />\n", styles: [":host{position:relative;outline:none}.resizer{position:absolute;z-index:1}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizerComponent, selector: "app-nod-resizer", inputs: ["isDisabled", "size"], outputs: ["resizeEnd"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderImageComponent, decorators: [{
             type: Component,
@@ -12950,6 +13600,9 @@ class EditSession {
     get scrollBarHeight() {
         return this.scrollBar?.element.clientHeight ?? 0; // only main session is scrollable
     }
+    get paragraphInfoChanges$() {
+        return this.displayData.ParagraphInfoChanges$;
+    }
     constructor(displayData, sessionId, customContentService, model, selection, generalProperties, editorService, customComponents, type, scrollBar, edgeType) {
         this.displayData = displayData;
         this.sessionId = sessionId;
@@ -13048,12 +13701,15 @@ class EditSession {
         return paragraphContent.substring(startColumn || 0, endColumn || paragraphContent.length);
     }
     isEdgeOrWithinEdge() {
-        return this.isEdge() || this.isWithinEdge();
+        return this.isEdge() || this.isCellWithinEdge();
     }
     isEdge() {
         return this.type === 'edge';
     }
-    isWithinEdge() {
+    isCell() {
+        return this.type === 'cell' || this.type === 'cellWithinEdge';
+    }
+    isCellWithinEdge() {
         return this.type === 'cellWithinEdge';
     }
     onRendered() {
@@ -13374,6 +14030,11 @@ class EditSession {
         this.selection.placeCursor(endPosition);
         return endPosition;
     }
+    applyTableCellsStyles(model) {
+        const table = this.customComponents.tables.find(x => x.instance.insertIndex === model.insertIndex);
+        OperationsHelper.applyTableCellsStyles(this.model, model);
+        table.instance.updateTable();
+    }
     removeMoveRange(moveModel) {
         const endIndex = moveModel.sourceStartIndex + moveModel.sourceCount - 1;
         const startPosition = this.displayData.indexToPosition(moveModel.sourceStartIndex, 0);
@@ -13596,6 +14257,169 @@ class GeneralPropertiesModel {
     }
 }
 
+class GrammarChecker {
+    constructor(grammarService) {
+        this.grammarService = grammarService;
+        this.ignoreKey = 'grammar-ignore';
+        this.sessionMap = new Map();
+        this.paragraphErrorMap = new Map();
+        this.checkedParagraphs = new Map();
+        this.sessionSubscriptions = new Map();
+        this.ignoreList = [];
+        this.visibilitySubscriptions = new Map();
+        try {
+            const ignoreListJson = sessionStorage.getItem(this.ignoreKey);
+            this.ignoreList = JSON.parse(ignoreListJson) ?? [];
+        }
+        catch {
+            this.ignoreList = [];
+        }
+        this.checkResultsSubscription = grammarService.grammarCheckResults$.subscribe(x => this.processGrammarCheckResults(x));
+    }
+    registerSession(session) {
+        if (this.sessionMap.has(session.sessionId)) {
+            return;
+        }
+        this.sessionMap.set(session.sessionId, session);
+        const updateSubscription = session.session.paragraphInfoChanges$.subscribe(x => this.processParagraphChange(session, x));
+        this.sessionSubscriptions.set(session.sessionId, [updateSubscription]);
+        this.visibilitySubscriptions.set(session.sessionId, session.renderer.ParagraphsAppeared$.subscribe(x => {
+            if (session.session.editorService.isViewOnly) {
+                return;
+            }
+            const filtered = x.filter(y => !this.checkedParagraphs.get(session.sessionId)?.has(y.id));
+            this.grammarService.enqueueParagraphs(session.sessionId, filtered);
+        }));
+    }
+    unregisterSession(sessionId) {
+        const session = this.sessionMap.get(sessionId);
+        if (!session) {
+            return;
+        }
+        this.sessionMap.delete(sessionId);
+        const subscriptions = this.sessionSubscriptions.get(sessionId);
+        if (subscriptions?.length) {
+            for (const subscription of subscriptions) {
+                subscription.unsubscribe();
+            }
+        }
+        const visibilitySubscription = this.visibilitySubscriptions.get(sessionId);
+        visibilitySubscription?.unsubscribe();
+        this.visibilitySubscriptions.delete(sessionId);
+        this.sessionSubscriptions.delete(sessionId);
+        this.checkedParagraphs.delete(sessionId);
+        for (const paragraph of session.session.displayData.paragraphs) {
+            this.grammarService.removeParagraph(sessionId, paragraph.id);
+            this.paragraphErrorMap.delete(`${sessionId}-${paragraph.id}`);
+        }
+    }
+    getError(sessionId, paragraphId, cursorIndex) {
+        const paragraphErrors = this.paragraphErrorMap.get(`${sessionId}-${paragraphId}`);
+        if (!paragraphErrors) {
+            return null;
+        }
+        return paragraphErrors.find(x => cursorIndex >= x.offset && cursorIndex <= x.offset + x.length);
+    }
+    addErrorToIgnoreList(grammarError) {
+        this.ignoreList.push({ text: grammarError.text, type: grammarError.type });
+        const ignoreJson = JSON.stringify(this.ignoreList);
+        sessionStorage.setItem(this.ignoreKey, ignoreJson);
+        for (const [key, errors] of this.paragraphErrorMap) {
+            const session = this.sessionMap.get(this.getSessionIdFromKey(key));
+            const paragraphId = key.split('-')[1];
+            const filteredErrors = this.filterErrors(errors);
+            this.paragraphErrorMap.set(key, filteredErrors);
+            session.renderer.updateGrammarHighlights(+paragraphId, filteredErrors);
+        }
+    }
+    destroy() {
+        this.checkResultsSubscription.unsubscribe();
+        for (const subscriptions of this.sessionSubscriptions.values()) {
+            for (const subscription of subscriptions) {
+                subscription.unsubscribe();
+            }
+        }
+        this.sessionSubscriptions.clear();
+        this.sessionMap.clear();
+        this.checkedParagraphs.clear();
+        this.grammarService.destroy();
+    }
+    filterErrors(grammarErrors) {
+        return grammarErrors.filter(x => !this.ignoreList.some(y => y.type === x.type && y.text.toLowerCase() === x.text.toLowerCase()));
+    }
+    processGrammarCheckResults(result) {
+        const session = this.sessionMap.get(this.getSessionIdFromKey(result.paragraphId));
+        if (session) {
+            const paragraphId = +result.paragraphId.split('-')[1];
+            if (this.checkedParagraphs.has(session.sessionId)) {
+                this.checkedParagraphs.get(session.sessionId).add(paragraphId);
+            }
+            else {
+                this.checkedParagraphs.set(session.sessionId, new Set([paragraphId]));
+            }
+            const filteredErrors = this.filterErrors(result.errors);
+            this.paragraphErrorMap.set(result.paragraphId, filteredErrors);
+            const id = +result.paragraphId.split('-')[1];
+            session.renderer.updateGrammarHighlights(id, filteredErrors);
+        }
+    }
+    processParagraphChange(session, change) {
+        if (change instanceof ParagraphInfosRemoved) {
+            for (const id of change.ids) {
+                const errors = this.paragraphErrorMap.get(`${session.sessionId}-${id}`);
+                if (errors?.length) {
+                    session.renderer.removeGrammarHighlights(id);
+                }
+                this.grammarService.removeParagraph(session.sessionId, id);
+                this.paragraphErrorMap.delete(`${session.sessionId}-${id}`);
+                this.checkedParagraphs.get(session.sessionId).delete(id);
+            }
+            return;
+        }
+        this.adjustHighlights(change, session);
+        this.grammarService.updateParagraphContent(session.sessionId, change.paragraph);
+    }
+    adjustHighlights(changes, session) {
+        const errors = this.paragraphErrorMap.get(`${session.sessionId}-${changes.paragraph.id}`);
+        if (!errors?.length || changes instanceof ParagraphInfoAdded) {
+            return;
+        }
+        if (changes instanceof ParagraphInfoContentInserted) {
+            const newErrors = [];
+            for (const error of errors) {
+                if (changes.index >= error.offset && changes.index <= error.offset + error.length) {
+                    continue;
+                }
+                if (error.offset + error.length > changes.index) {
+                    error.offset += changes.length;
+                }
+                newErrors.push(error);
+            }
+            this.paragraphErrorMap.set(`${session.sessionId}-${changes.paragraph.id}`, newErrors);
+            session.renderer.updateGrammarHighlights(changes.paragraph.id, newErrors);
+            return;
+        }
+        const newErrors = [];
+        for (const error of errors) {
+            if ((changes.index >= error.offset && changes.index <= error.offset + error.length) ||
+                (changes.index + changes.length >= error.offset && changes.index + changes.length <= error.offset + error.length) ||
+                (changes.index <= error.offset && changes.index + changes.length >= error.offset + error.length)) {
+                continue;
+            }
+            if (changes.index + changes.length < error.offset) {
+                error.offset -= changes.length;
+            }
+            newErrors.push(error);
+        }
+        this.paragraphErrorMap.set(`${session.sessionId}-${changes.paragraph.id}`, newErrors);
+        session.renderer.updateGrammarHighlights(changes.paragraph.id, newErrors);
+    }
+    getSessionIdFromKey(paragraphKey) {
+        const parts = paragraphKey.split('-');
+        return parts.length > 1 ? +parts[0] : null;
+    }
+}
+
 class MainSessionSourceModel {
     getTarget() {
         return new TargetModel({ type: TargetType.Document });
@@ -13704,86 +14528,6 @@ class CursorLayer {
     }
 }
 
-class RenderChangesModel {
-    get any() {
-        return (this.cursor ||
-            this.full ||
-            this.lines ||
-            this.marker ||
-            this.selection ||
-            this.search ||
-            this.scroll ||
-            this.size ||
-            this.text ||
-            this.dragAndDrop ||
-            this.visibilityChanged);
-    }
-    constructor(fields) {
-        this.cursor = false;
-        this.full = false;
-        this.lines = false;
-        this.marker = false;
-        this.selection = false;
-        this.search = false;
-        this.scroll = false;
-        this.size = false;
-        this.text = false;
-        this.dragAndDrop = false;
-        this.visibilityChanged = false;
-        if (!fields) {
-            return;
-        }
-        Object.assign(this, fields);
-    }
-    apply(changes) {
-        for (let key of Object.keys(this)) {
-            this[key] ||= changes[key];
-        }
-    }
-}
-
-class EventHelper {
-    static get nextFrame() {
-        if (!this._nextFrame) {
-            const nextFrame = (callback) => {
-                setTimeout(callback, 17);
-            };
-            this._nextFrame =
-                window.requestAnimationFrame ||
-                    window['webkitRequestAnimationFrame'] ||
-                    window['mozRequestAnimationFrame'] ||
-                    window['msRequestAnimationFrame'] ||
-                    window['oRequestAnimationFrame'] ||
-                    nextFrame;
-        }
-        return this._nextFrame;
-    }
-}
-
-class RenderLoop {
-    constructor(onRender) {
-        this.changes = new RenderChangesModel();
-        this.flush = () => {
-            const changes = this.changes;
-            if (changes.any) {
-                this.changes = new RenderChangesModel();
-                onRender(changes);
-            }
-            if (this.changes.any) {
-                this.schedule();
-            }
-        };
-    }
-    schedule(changes) {
-        if (changes) {
-            this.changes.apply(changes);
-        }
-        if (this.changes) {
-            EventHelper.nextFrame(this.flush);
-        }
-    }
-}
-
 class HighlightLayer {
     constructor(parentEl, cssClass, session) {
         this.session = session;
@@ -13832,7 +14576,7 @@ class HighlightLayer {
                 top += lineInfo.firstLinePageOffset;
                 top += lineInfo.offsetBefore;
             }
-            const left = lineInfo.paddingLeft + padding + lineInfo.offsetMargin;
+            const left = lineInfo.paddingLeft + padding + lineInfo.offsetMargin + (lineInfo.markerWidth ?? 0);
             let style;
             if (i === 0) {
                 const rangeInfo = this.getRangeInfo(this.session, range);
@@ -13888,6 +14632,133 @@ class HighlightLayer {
     }
 }
 
+class GrammarHighlightLayer extends HighlightLayer {
+    constructor(parentEl, cssClass, session) {
+        super(parentEl, cssClass, session);
+        this.className = 'noder-highlight';
+        this.errorsByParagraph = new Map();
+    }
+    update(config) {
+        if (!config?.isVisible || !this.errorsByParagraph.size || this.session.editorService.isViewOnly) {
+            this.element.innerHTML = '';
+            return;
+        }
+        this.config = config;
+        this.selectionIndex = 0;
+        for (const [paragraphId, grammarErrors] of this.errorsByParagraph.entries()) {
+            const index = this.session.displayData.paragraphs.findIndex(x => x.id === paragraphId);
+            for (const error of grammarErrors) {
+                const range = new Range(new CursorParagraph(index, error.offset), new CursorParagraph(index, error.offset + error.length)).toScreenRange(this.session);
+                if (config.visibleRange &&
+                    (range.end.row < config.visibleRange.startScreenLine || range.start.row > config.visibleRange.endScreenLine)) {
+                    continue;
+                }
+                if (!range.isEmpty) {
+                    if (range.isSingleLine) {
+                        this.drawSingleLineMarker(range, this.className);
+                    }
+                    else {
+                        this.drawMultiLineMarker(range, this.className);
+                    }
+                }
+            }
+        }
+        if (this.selectionIndex !== -1) {
+            while (this.selectionIndex < this.element.childElementCount) {
+                this.element.removeChild(this.element.lastChild);
+            }
+        }
+    }
+    setErrors(paragraphId, errors) {
+        this.errorsByParagraph.set(paragraphId, errors);
+    }
+    removeParagraphHighlights(paragraphId) {
+        this.errorsByParagraph.delete(paragraphId);
+    }
+}
+
+class RenderChangesModel {
+    get any() {
+        return (this.cursor ||
+            this.full ||
+            this.lines ||
+            this.marker ||
+            this.selection ||
+            this.search ||
+            this.grammar ||
+            this.scroll ||
+            this.size ||
+            this.text ||
+            this.dragAndDrop ||
+            this.visibilityChanged);
+    }
+    constructor(fields) {
+        this.cursor = false;
+        this.full = false;
+        this.lines = false;
+        this.marker = false;
+        this.selection = false;
+        this.search = false;
+        this.grammar = false;
+        this.scroll = false;
+        this.size = false;
+        this.text = false;
+        this.dragAndDrop = false;
+        this.visibilityChanged = false;
+        if (!fields) {
+            return;
+        }
+        Object.assign(this, fields);
+    }
+    apply(changes) {
+        for (let key of Object.keys(this)) {
+            this[key] ||= changes[key];
+        }
+    }
+}
+
+class EventHelper {
+    static get nextFrame() {
+        if (!this._nextFrame) {
+            const nextFrame = (callback) => {
+                setTimeout(callback, 17);
+            };
+            this._nextFrame =
+                window.requestAnimationFrame ||
+                    window['webkitRequestAnimationFrame'] ||
+                    window['mozRequestAnimationFrame'] ||
+                    window['msRequestAnimationFrame'] ||
+                    window['oRequestAnimationFrame'] ||
+                    nextFrame;
+        }
+        return this._nextFrame;
+    }
+}
+
+class RenderLoop {
+    constructor(onRender) {
+        this.changes = new RenderChangesModel();
+        this.flush = () => {
+            const changes = this.changes;
+            if (changes.any) {
+                this.changes = new RenderChangesModel();
+                onRender(changes);
+            }
+            if (this.changes.any) {
+                this.schedule();
+            }
+        };
+    }
+    schedule(changes) {
+        if (changes) {
+            this.changes.apply(changes);
+        }
+        if (this.changes) {
+            EventHelper.nextFrame(this.flush);
+        }
+    }
+}
+
 class SearchHighlightLayer extends HighlightLayer {
     constructor(parentEl, cssClass, session) {
         super(parentEl, cssClass, session);
@@ -14051,6 +14922,9 @@ class SelectionLayer extends HighlightLayer {
 }
 
 class Renderer extends EventEmitting {
+    get ParagraphsAppeared$() {
+        return this.ParagraphsAppeared.asObservable();
+    }
     constructor(parentContainer, session) {
         super();
         this.session = session;
@@ -14076,6 +14950,8 @@ class Renderer extends EventEmitting {
         };
         this.isVisible = false;
         this.changes = new RenderChangesModel();
+        this.ParagraphsAppeared = new Subject();
+        this.visibilitySubject = new Subject();
         this.textareaSize = {
             height: 1,
             width: 1
@@ -14089,10 +14965,14 @@ class Renderer extends EventEmitting {
         this.textLayer = new TextLayer(this.content, this.session);
         this.selectionLayer = new SelectionLayer(this.content, 'text-selection', this.session);
         this.searchHighlightLayer = new SearchHighlightLayer(this.content, 'text-search-highlight', this.session);
+        this.grammarHighlightLayer = new GrammarHighlightLayer(this.content, 'grammar-highlight', this.session);
         this.cursorLayer = new CursorLayer(this.content, this.session);
         this.dragAndDropSelectionLayer = new SelectionLayer(this.content, 'drag-and-drop-selection', this.session);
         this.loop = new RenderLoop(changes => this.renderChanges(changes));
         this.session.displayData.addEventListener('pagesCountChanged', this.pagesCountChangedHandler);
+        this.visibilitySubscription = this.visibilitySubject
+            .pipe(debounceTime(3000), filter(x => x))
+            .subscribe(() => this.paragraphsScrolledIntoView());
     }
     renderChanges(changes, force) {
         changes.apply(this.changes);
@@ -14131,11 +15011,16 @@ class Renderer extends EventEmitting {
         if (changes.search) {
             this.renderSearchHighlights();
         }
+        if (changes.grammar) {
+            this.renderGrammarHighlights();
+        }
         if (changes.dragAndDrop) {
             this.renderDragAndDropSelection();
         }
         if (changes.visibilityChanged) {
             this.renderSearchHighlights();
+            this.renderGrammarHighlights();
+            this.visibilitySubject.next(this.isVisible);
         }
         this.session.onRendered();
     }
@@ -14193,6 +15078,13 @@ class Renderer extends EventEmitting {
         this.searchHighlightLayer.active = active;
         this.loop.schedule({ search: true });
     }
+    updateGrammarHighlights(paragraphId, errors) {
+        this.grammarHighlightLayer.setErrors(paragraphId, errors);
+        this.loop.schedule({ grammar: true });
+    }
+    removeGrammarHighlights(paragraphId) {
+        this.grammarHighlightLayer.removeParagraphHighlights(paragraphId);
+    }
     updateDragAndDropSelection(range) {
         if (range.isEmpty && this.dragAndDropSelectionLayer.marker) {
             this.dragAndDropSelectionLayer.marker = null;
@@ -14261,6 +15153,7 @@ class Renderer extends EventEmitting {
     destroy() {
         this.session.displayData.removeEventListener('pagesCountChanged', this.pagesCountChangedHandler);
         this.textLayer.destroy();
+        this.visibilitySubscription.unsubscribe();
         DomHelper.removeChildren(this.container);
     }
     renderFull() {
@@ -14286,6 +15179,9 @@ class Renderer extends EventEmitting {
     renderSearchHighlights() {
         this.searchHighlightLayer.update(this.layerConfig);
     }
+    renderGrammarHighlights() {
+        this.grammarHighlightLayer.update(this.layerConfig);
+    }
     renderDragAndDropSelection() {
         this.dragAndDropSelectionLayer.update(this.layerConfig);
     }
@@ -14314,6 +15210,14 @@ class Renderer extends EventEmitting {
             this.container.appendChild(this.content);
         }
     }
+    paragraphsScrolledIntoView() {
+        if (!this.layerConfig.visibleRange) {
+            this.ParagraphsAppeared.next(this.session.displayData.paragraphs);
+            return;
+        }
+        const paragraphs = this.session.displayData.paragraphs.slice(this.layerConfig.visibleRange.startParagraph, this.layerConfig.visibleRange.endParagraph);
+        this.ParagraphsAppeared.next(paragraphs);
+    }
 }
 
 /**
@@ -14423,6 +15327,9 @@ class VirtualRenderer {
     set layerConfig(val) {
         this.renderer.layerConfig = val;
     }
+    get ParagraphsAppeared$() {
+        return this.renderer.ParagraphsAppeared.asObservable();
+    }
     constructor(parentContainer, mainSession, scrollBar) {
         this.scrollBar = scrollBar;
         this.changes = new RenderChangesModel();
@@ -14433,6 +15340,7 @@ class VirtualRenderer {
             scrollerWidth: 0,
             dirty: true
         };
+        this.paragraphsScrolledIntoViewSubject = new Subject();
         this.container = parentContainer;
         this.createScroller();
         this.renderer = new Renderer(parentContainer, mainSession);
@@ -14440,6 +15348,9 @@ class VirtualRenderer {
         this.edgesLayer = new EdgesLayer(this.renderer.content, mainSession);
         this.scrollSubscription = this.scrollBar.scrolled$.subscribe(() => this.loop.schedule({ scroll: true }));
         this.createRenderLoop();
+        this.paragraphsScrolledIntoViewSubscription = this.paragraphsScrolledIntoViewSubject
+            .pipe(debounceTime(3000))
+            .subscribe(() => this.paragraphsScrolledIntoView());
     }
     renderChanges(changes, force) {
         changes.apply(this.changes);
@@ -14460,6 +15371,7 @@ class VirtualRenderer {
             changes.lines ||
             changes.scroll ||
             changes.search ||
+            changes.grammar ||
             changes.visibilityChanged) {
             changes.apply(this.computeLayerConfig());
             DomHelper.translate(this.renderer.content, 0, -this.layerConfig.offset);
@@ -14474,6 +15386,7 @@ class VirtualRenderer {
         // scrolling
         if (changes.scroll) {
             this.renderScroll(changes);
+            this.paragraphsScrolledIntoViewSubject.next();
         }
         if (changes.text) {
             this.renderText();
@@ -14487,6 +15400,9 @@ class VirtualRenderer {
         if (changes.search) {
             this.renderSearchHighlights();
         }
+        if (changes.grammar) {
+            this.renderGrammarHighlights();
+        }
         if (changes.dragAndDrop) {
             this.renderDragAndDropSelection();
         }
@@ -14565,6 +15481,12 @@ class VirtualRenderer {
     updateActiveSearchHighlight(active) {
         this.renderer.updateActiveSearchHighlight(active);
     }
+    updateGrammarHighlights(paragraphIndex, errors) {
+        this.renderer.updateGrammarHighlights(paragraphIndex, errors);
+    }
+    removeGrammarHighlights(paragraphIndex) {
+        this.renderer.removeGrammarHighlights(paragraphIndex);
+    }
     updateDragAndDropSelection(range) {
         this.renderer.updateDragAndDropSelection(range);
     }
@@ -14647,6 +15569,7 @@ class VirtualRenderer {
         this.pagesLayer.destroy();
         this.renderer.destroy();
         this.scrollSubscription?.unsubscribe();
+        this.paragraphsScrolledIntoViewSubscription?.unsubscribe();
     }
     computeLayerConfig() {
         const displayData = this.renderer.session.displayData;
@@ -14663,7 +15586,7 @@ class VirtualRenderer {
         }
         const changes = scrollChanged
             ? this.updateCachedSize(true, this.size.width, this.size.height)
-            : new RenderChangesModel({ scroll: true });
+            : new RenderChangesModel({ scroll: true }); // TODO: stop triggering scroll for no reason
         const visibleRange = displayData.getVisibleRange(this.scrollBar.scrollTop, this.size.scrollerHeight);
         this.layerConfig = {
             width: this.renderer.textLayer.element.clientWidth,
@@ -14699,6 +15622,7 @@ class VirtualRenderer {
         }
         this.renderer.selectionLayer.update(this.layerConfig);
         this.renderer.searchHighlightLayer.update(this.layerConfig);
+        this.renderer.grammarHighlightLayer.update(this.layerConfig);
         if (!this.renderer.cursorLayer.isVisible) {
             return;
         }
@@ -14708,6 +15632,7 @@ class VirtualRenderer {
     renderFull() {
         this.pagesLayer.update(this.layerConfig);
         this.edgesLayer.update(this.layerConfig);
+        this.paragraphsScrolledIntoViewSubject.next();
         this.renderer.renderFull();
     }
     renderText() {
@@ -14723,9 +15648,16 @@ class VirtualRenderer {
     renderSearchHighlights() {
         this.renderer.renderSearchHighlights();
     }
+    renderGrammarHighlights() {
+        this.renderer.renderGrammarHighlights();
+    }
     renderDragAndDropSelection() {
         this.renderer.renderDragAndDropSelection();
     }
+    paragraphsScrolledIntoView() {
+        const paragraphs = this.renderer.session.displayData.paragraphs.slice(this.layerConfig.visibleRange.startParagraph, this.layerConfig.visibleRange.endParagraph);
+        this.renderer.ParagraphsAppeared.next(paragraphs);
+    }
 }
 
 class CustomContentService {
@@ -14817,6 +15749,8 @@ class CustomContentService {
             indentRight: lineInfo.indent.right,
             indentBefore: lineInfo.offsetBefore,
             indentAfter: lineInfo.offsetAfter,
+            markerWidth: lineInfo.markerWidth,
+            isNumbering: lineInfo.isNumbering,
             isPageBreak: false,
             isLineBreak: false,
             displayValue,
@@ -14844,12 +15778,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }], ctorParameters: () => [{ type: ComponentService }, { type: i0.Injector }] });
 
 class RegulatorService {
-    constructor(customContentService, editorService, componentService) {
+    constructor(customContentService, editorService, componentService, grammarService) {
         this.customContentService = customContentService;
         this.editorService = editorService;
         this.componentService = componentService;
+        this.grammarService = grammarService;
         this.sessions = [];
         this.sessionIdIncrement = 0;
+        this.grammarChecker = new GrammarChecker(this.grammarService);
     }
     addMainSession(model, scalingRatio, container) {
         const sessionId = ++this.sessionIdIncrement;
@@ -14882,6 +15818,7 @@ class RegulatorService {
         this.sessions.push(this.mainSession);
         this.currentSession = this.mainSession;
         displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
+        this.grammarChecker.registerSession(this.mainSession);
     }
     addCellSession(table, margins, component, properties) {
         const sessionId = ++this.sessionIdIncrement;
@@ -14897,6 +15834,7 @@ class RegulatorService {
         this.sessions.push(newSession);
         displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
         newSession.renderer.updateText();
+        this.grammarChecker.registerSession(newSession);
         return newSession;
     }
     addEdgeSession(component) {
@@ -14910,6 +15848,7 @@ class RegulatorService {
         this.sessions.push(newSession);
         displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
         newSession.renderer.updateText();
+        this.grammarChecker.registerSession(newSession);
         return newSession;
     }
     removeSession(sessionId) {
@@ -14917,6 +15856,7 @@ class RegulatorService {
         this.sessions[index].session.destroy();
         this.sessions[index].renderer.destroy();
         this.sessions.splice(index, 1);
+        this.grammarChecker.unregisterSession(sessionId);
     }
     setMainSessionAsCurrent() {
         if (this.mainSession.sessionId === this.currentSession.sessionId) {
@@ -14969,6 +15909,7 @@ class RegulatorService {
             this.currentSession.renderer.showCursor();
             this.arrangeEdgesForSessionChange(previous.session, session.session);
         }
+        this.editorService.setIsTableSelected(session.session.isCell());
     }
     updateCursorPosition() {
         if (!this.currentSession.session.isEdge()) {
@@ -15088,12 +16029,12 @@ class RegulatorService {
             })
         ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RegulatorService, deps: [{ token: CustomContentService }, { token: EditorService }, { token: ComponentService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RegulatorService, deps: [{ token: CustomContentService }, { token: EditorService }, { token: ComponentService }, { token: GrammarService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RegulatorService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RegulatorService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: CustomContentService }, { type: EditorService }, { type: ComponentService }] });
+        }], ctorParameters: () => [{ type: CustomContentService }, { type: EditorService }, { type: ComponentService }, { type: GrammarService }] });
 
 class CommandsService {
     constructor() {
@@ -15168,7 +16109,7 @@ class TabSettingsDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TabSettingsDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: TabSettingsDialogComponent, isStandalone: true, selector: "app-nod-tab-settings-dialog", host: { properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<div class=\"columns\">\n    <span class=\"position\">{{ 'NODER.LABEL.POSITION' | translate }}</span>\n    <span class=\"alignment\">{{ 'NODER.LABEL.ALIGNMENT' | translate }}</span>\n</div>\n<form\n    [formGroup]=\"form\"\n    class=\"form\">\n    <div\n        class=\"tabs\"\n        formArrayName=\"tabs\">\n        @for (tabCtrl of tabsArray().controls; let i = $index; track i) {\n            <div\n                class=\"item\"\n                [formGroupName]=\"i\">\n                <div class=\"tab\">\n                    <mat-form-field class=\"position\">\n                        <input\n                            matInput\n                            type=\"number\"\n                            formControlName=\"position\" />\n                    </mat-form-field>\n                    <mat-form-field class=\"alignment\">\n                        <mat-select formControlName=\"alignment\">\n                            @for (alignment of alignments; track alignment) {\n                                <mat-option [value]=\"alignment.type\">\n                                    {{ alignment.title | translate }}\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                    <button\n                        id=\"tab-setting-dialog-delete-btn\"\n                        mat-icon-button\n                        type=\"button\"\n                        (click)=\"onRemove(i)\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-delete\"></mat-icon>\n                    </button>\n                </div>\n            </div>\n        }\n    </div>\n</form>\n<div class=\"tab-actions\">\n    <button\n        id=\"tab-setting-dialog-add-btn\"\n        mat-stroked-button\n        (click)=\"onAddTab()\">\n        {{ 'NODER.LABEL.ADD' | translate }}\n    </button>\n    <button\n        id=\"tab-setting-dialog-clear-all-btn\"\n        mat-stroked-button\n        (click)=\"tabsArray().clear()\">\n        {{ 'NODER.LABEL.CLEAR_ALL' | translate }}\n    </button>\n</div>\n<div class=\"actions\">\n    <button\n        id=\"tab-setting-dialog-cancel-btn\"\n        mat-stroked-button\n        (click)=\"onClose()\">\n        {{ 'NODER.LABEL.CANCEL' | translate }}\n    </button>\n    <button\n        id=\"tab-setting-dialog-ok-btn\"\n        mat-stroked-button\n        (click)=\"onSave()\">\n        {{ 'NODER.LABEL.SAVE' | translate }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:550px;width:360px;padding:20px 0 20px 20px;gap:20px}.tabs{flex:1;overflow:hidden auto;display:flex;flex-direction:column}.form{height:350px;display:flex}.item{display:flex}.tab{display:flex;flex:1;gap:20px}.mat-mdc-form-field{width:120px}.columns{display:flex;gap:30%}.columns .position,.columns .alignment{font-weight:700}.tab-actions{display:flex;justify-content:start;gap:10px}.actions{display:flex;justify-content:end;gap:10px;margin-right:20px}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: TabSettingsDialogComponent, isStandalone: true, selector: "app-nod-tab-settings-dialog", host: { properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<div class=\"columns\">\n    <span class=\"position\">{{ 'NODER.LABEL.POSITION' | translate }}</span>\n    <span class=\"alignment\">{{ 'NODER.LABEL.ALIGNMENT' | translate }}</span>\n</div>\n<form\n    [formGroup]=\"form\"\n    class=\"form\">\n    <div\n        class=\"tabs\"\n        formArrayName=\"tabs\">\n        @for (tabCtrl of tabsArray().controls; let i = $index; track i) {\n            <div\n                class=\"item\"\n                [formGroupName]=\"i\">\n                <div class=\"tab\">\n                    <mat-form-field class=\"position\">\n                        <input\n                            matInput\n                            type=\"number\"\n                            formControlName=\"position\" />\n                    </mat-form-field>\n                    <mat-form-field class=\"alignment\">\n                        <mat-select formControlName=\"alignment\">\n                            @for (alignment of alignments; track alignment) {\n                                <mat-option [value]=\"alignment.type\">\n                                    {{ alignment.title | translate }}\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                    <button\n                        id=\"tab-setting-dialog-delete-btn\"\n                        mat-icon-button\n                        type=\"button\"\n                        (click)=\"onRemove(i)\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-delete\"></mat-icon>\n                    </button>\n                </div>\n            </div>\n        }\n    </div>\n</form>\n<div class=\"tab-actions\">\n    <button\n        id=\"tab-setting-dialog-add-btn\"\n        mat-stroked-button\n        (click)=\"onAddTab()\">\n        {{ 'NODER.LABEL.ADD' | translate }}\n    </button>\n    <button\n        id=\"tab-setting-dialog-clear-all-btn\"\n        mat-stroked-button\n        (click)=\"tabsArray().clear()\">\n        {{ 'NODER.LABEL.CLEAR_ALL' | translate }}\n    </button>\n</div>\n<div class=\"actions\">\n    <button\n        id=\"tab-setting-dialog-cancel-btn\"\n        mat-stroked-button\n        (click)=\"onClose()\">\n        {{ 'NODER.LABEL.CANCEL' | translate }}\n    </button>\n    <button\n        id=\"tab-setting-dialog-ok-btn\"\n        mat-stroked-button\n        (click)=\"onSave()\">\n        {{ 'NODER.LABEL.SAVE' | translate }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:550px;width:360px;padding:20px 0 20px 20px;gap:20px}.tabs{flex:1;overflow:hidden auto;display:flex;flex-direction:column}.form{height:350px;display:flex}.item{display:flex}.tab{display:flex;flex:1;gap:20px}.mat-mdc-form-field{width:120px}.columns{display:flex;gap:30%}.columns .position,.columns .alignment{font-weight:700}.tab-actions{display:flex;justify-content:start;gap:10px}.actions{display:flex;justify-content:end;gap:10px;margin-right:20px}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TabSettingsDialogComponent, decorators: [{
             type: Component,
@@ -15194,6 +16135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class EditorRulerComponent {
     constructor() {
         this.unit = input.required();
+        this.disabled = input(false);
         this.editorService = inject(EditorService);
         this.dialog = inject(MatDialog);
         this.defaultPaddingCm = 2.5;
@@ -15286,12 +16228,16 @@ class EditorRulerComponent {
             window.removeEventListener('touchend', this.onUp);
         };
         this.editorService.paragraphStyle$
-            .pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(x => !!x.tabSettings), map(x => x.tabSettings?.map(y => new TabSettingModel({ alignment: y.alignment, position: y.position })) ?? []))
+            .pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(x => !!x.paragraphStyle.tabSettings), map(x => x.paragraphStyle.tabSettings?.map(y => new TabSettingModel({ alignment: y.alignment, position: y.position })) ?? []))
             .subscribe(x => this.tabSettings.set(x));
-        this.editorService.paragraphStyle$.pipe(takeUntilDestroyed()).subscribe(x => {
-            this.firstLine.set(x.indentHanging ? -x.indentHanging : x.indentFirstLine);
-            this.leftIndent.set(x.indentLeft);
-            this.rightIndent.set(x.indentRight);
+        this.editorService.paragraphStyle$.pipe(takeUntilDestroyed()).subscribe(({ paragraphStyle, numberingModel }) => {
+            const numberingIndentLeft = numberingModel?.levels[paragraphStyle.numberingLevel].indentLeft ?? 0;
+            const numberingIndentHanging = numberingModel?.levels[paragraphStyle.numberingLevel].indentHanging ?? 0;
+            const indentLeft = paragraphStyle.indentLeft === 0 ? numberingIndentLeft : paragraphStyle.indentLeft;
+            const firstLine = paragraphStyle.indentHanging ? -paragraphStyle.indentHanging : paragraphStyle.indentFirstLine;
+            this.firstLine.set(firstLine === 0 ? -numberingIndentHanging : firstLine);
+            this.leftIndent.set(indentLeft);
+            this.rightIndent.set(paragraphStyle.indentRight);
         });
         effect(() => (this.unit() === 'inch' ? this.buildTicksInch() : this.buildTicksCm()));
     }
@@ -15480,11 +16426,11 @@ class EditorRulerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorRulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorRulerComponent, isStandalone: true, selector: "app-nod-editor-ruler", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "rulerContainer", first: true, predicate: ["rulerContainer"], descendants: true, static: true }], ngImport: i0, template: "<div\n    class=\"ruler-container\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorRulerComponent, isStandalone: true, selector: "app-nod-editor-ruler", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "rulerContainer", first: true, predicate: ["rulerContainer"], descendants: true, static: true }], ngImport: i0, template: "<div\n    class=\"ruler-container\"\n    [class.disabled]=\"disabled()\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;position:relative;z-index:10;width:100%;height:22px;justify-content:center;align-items:center}.disabled{pointer-events:none}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorRulerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-ruler', imports: [MatIconModule, AsyncPipe], template: "<div\n    class=\"ruler-container\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-ruler', imports: [MatIconModule, AsyncPipe], template: "<div\n    class=\"ruler-container\"\n    [class.disabled]=\"disabled()\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;position:relative;z-index:10;width:100%;height:22px;justify-content:center;align-items:center}.disabled{pointer-events:none}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { rulerContainer: [{
                 type: ViewChild,
                 args: ['rulerContainer', { static: true }]
@@ -15507,10 +16453,11 @@ class EditorComponent {
     get content() {
         return this._content;
     }
-    constructor(cdr, componentService, editorService, injector, regulatorService, commandsService, clipboard) {
+    constructor(cdr, componentService, editorService, overlayService, injector, regulatorService, commandsService, clipboard) {
         this.cdr = cdr;
         this.componentService = componentService;
         this.editorService = editorService;
+        this.overlayService = overlayService;
         this.injector = injector;
         this.regulatorService = regulatorService;
         this.commandsService = commandsService;
@@ -15532,7 +16479,7 @@ class EditorComponent {
     }
     initEditor(content) {
         this.ngOnDestroy();
-        this.editor = new Editor(content, this.container, this.editorService, this.regulatorService, this.commandsService, this.clipboard, this.externalElementTagNames, this.customPageWidth);
+        this.editor = new Editor(content, this.container, this.editorService, this.overlayService, this.regulatorService, this.commandsService, this.clipboard, this.externalElementTagNames, this.customPageWidth);
         this.subscriptions.push(this.toggleSidenavSubscription(), this.searchBarSubscription());
     }
     toggleSidenavSubscription() {
@@ -15570,6 +16517,9 @@ class EditorComponent {
             this.cdr.markForCheck();
         });
     }
+    displayGrammarErrorPopupSubscription() {
+        return this.editorService.displayGrammarError$.subscribe();
+    }
     removeSidenavComponent() {
         if (!this.sidenavComponentRef) {
             return;
@@ -15577,13 +16527,13 @@ class EditorComponent {
         this.componentService.removeComponent(this.sidenavComponentRef);
         this.sidenavComponentRef = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ComponentService }, { token: EditorService }, { token: i0.Injector }, { token: RegulatorService }, { token: CommandsService }, { token: i5$3.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorComponent, isStandalone: false, selector: "app-nod-editor", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: false, isRequired: false, transformFunction: null }, externalElementTagNames: { classPropertyName: "externalElementTagNames", publicName: "externalElementTagNames", isSignal: false, isRequired: false, transformFunction: null }, customPageWidth: { classPropertyName: "customPageWidth", publicName: "customPageWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, rulerUnit: { classPropertyName: "rulerUnit", publicName: "rulerUnit", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }, { propertyName: "searchBar", first: true, predicate: EditorSearchBarComponent, descendants: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <app-nod-editor-ruler [unit]=\"rulerUnit()\" />\n        @if (showSearchBar) {\n            <app-nod-editor-search-bar />\n        }\n        <div class=\"container\">\n            <div\n                #container\n                class=\"edit-container\"></div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:hidden}.container{height:100%;display:flex;justify-content:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"], dependencies: [{ kind: "component", type: EditorRulerComponent, selector: "app-nod-editor-ruler", inputs: ["unit"] }, { kind: "component", type: EditorSearchBarComponent, selector: "app-nod-editor-search-bar" }, { kind: "component", type: i8.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i8.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i8.MatDrawerContent, selector: "mat-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ComponentService }, { token: EditorService }, { token: OverlayService }, { token: i0.Injector }, { token: RegulatorService }, { token: CommandsService }, { token: i6$1.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorComponent, isStandalone: false, selector: "app-nod-editor", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: false, isRequired: false, transformFunction: null }, externalElementTagNames: { classPropertyName: "externalElementTagNames", publicName: "externalElementTagNames", isSignal: false, isRequired: false, transformFunction: null }, customPageWidth: { classPropertyName: "customPageWidth", publicName: "customPageWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, rulerUnit: { classPropertyName: "rulerUnit", publicName: "rulerUnit", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }, { propertyName: "searchBar", first: true, predicate: EditorSearchBarComponent, descendants: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"editor\">\n            <app-nod-editor-ruler\n                [unit]=\"rulerUnit()\"\n                [disabled]=\"isViewOnly$ | async\" />\n            @if (showSearchBar) {\n                <app-nod-editor-search-bar />\n            }\n            <div class=\"container\">\n                <div\n                    #container\n                    class=\"edit-container\"></div>\n            </div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:100%}.editor{display:inline-block;height:100%;min-width:100%;text-align:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"], dependencies: [{ kind: "component", type: EditorRulerComponent, selector: "app-nod-editor-ruler", inputs: ["unit", "disabled"] }, { kind: "component", type: EditorSearchBarComponent, selector: "app-nod-editor-search-bar" }, { kind: "component", type: i9.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i9.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nod-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <app-nod-editor-ruler [unit]=\"rulerUnit()\" />\n        @if (showSearchBar) {\n            <app-nod-editor-search-bar />\n        }\n        <div class=\"container\">\n            <div\n                #container\n                class=\"edit-container\"></div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:hidden}.container{height:100%;display:flex;justify-content:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentService }, { type: EditorService }, { type: i0.Injector }, { type: RegulatorService }, { type: CommandsService }, { type: i5$3.Clipboard }], propDecorators: { isMobile: [{
+            args: [{ selector: 'app-nod-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"editor\">\n            <app-nod-editor-ruler\n                [unit]=\"rulerUnit()\"\n                [disabled]=\"isViewOnly$ | async\" />\n            @if (showSearchBar) {\n                <app-nod-editor-search-bar />\n            }\n            <div class=\"container\">\n                <div\n                    #container\n                    class=\"edit-container\"></div>\n            </div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:100%}.editor{display:inline-block;height:100%;min-width:100%;text-align:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentService }, { type: EditorService }, { type: OverlayService }, { type: i0.Injector }, { type: RegulatorService }, { type: CommandsService }, { type: i6$1.Clipboard }], propDecorators: { isMobile: [{
                 type: Input
             }], externalElementTagNames: [{
                 type: Input
@@ -15774,13 +16724,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: i3.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.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.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: i3.TranslateService }], propDecorators: { selectedMode: [{
                 type: Input
             }], showTitle: [{
                 type: Input
@@ -15801,7 +16751,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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.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.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorTitleMobileComponent, decorators: [{
             type: Component,
@@ -15881,7 +16831,7 @@ class MenuDropdownsMobileComponent {
         this.elements = this.injector.get(EXTERNAL_ELEMENT_SERVICE).elements;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MenuDropdownsMobileComponent, deps: [{ token: i0.Injector }, { token: EditorService }, { token: ToolbarCoreService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: MenuDropdownsMobileComponent, isStandalone: false, selector: "app-nod-menu-dropdowns-mobile", ngImport: i0, template: "<ng-container\n    *ngIf=\"{\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <mat-accordion>\n        <mat-expansion-panel hideToggle>\n            <mat-expansion-panel-header>\n                <mat-panel-title>{{ 'NODER.LABEL.FILE' | translate }}</mat-panel-title>\n                <mat-panel-description>\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-arrow-dropdown\" />\n                </mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-panel-content\">\n                <button\n                    *ngIf=\"!data.isViewOnly\"\n                    id=\"menu-dropdowns-mobile-item-new\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.new(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-add-new\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.NEW' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    *ngIf=\"!data.isViewOnly\"\n                    id=\"menu-dropdowns-mobile-item-open-from\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.openFrom(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-open-from\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.OPEN_FROM' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-save-as\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.saveAs(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-save\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-rename\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.rename(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-rename\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.RENAME' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    class=\"hidden\"\n                    id=\"menu-dropdowns-mobile-item-print\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.print(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-print\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.PRINT' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-delete\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.delete(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-delete\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n                    </div>\n                </button>\n            </div>\n        </mat-expansion-panel>\n        <ng-container *ngIf=\"!data.isViewOnly\">\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>{{ 'NODER.LABEL.INSERT' | translate }}</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <button\n                        id=\"menu-dropdowns-mobile-item-image\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertImage(); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-image\" />\n                            <span class=\"menu-item-text\">{{ 'NODER.LABEL.IMAGE' | translate }}</span>\n                        </div>\n                    </button>\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-table\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.insertTable()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-table\" />\n                            {{ 'NODER.LABEL.TABLE' | translate }}\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-link\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.insertLink()\">\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-link-on\" />\n                                <span class=\"menu-item-text\">{{ 'NODER.LABEL.LINK' | translate }}</span>\n                            </div>\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                    <button\n                        *ngFor=\"let element of elements\"\n                        id=\"menu-dropdowns-mobile-item-{{ element.nameId }}\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertCustomElement(element); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"{{ element.icon }}\" />\n                            <span class=\"menu-item-text\">{{ element.nameTranslate | translate }}</span>\n                        </div>\n                    </button>\n                    <div class=\"composition-button hidden\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-headers-footers\"\n                            mat-menu-item>\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-headers-footers\" />\n                                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n                            </div>\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                </div>\n            </mat-expansion-panel>\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>{{ 'NODER.LABEL.LAYOUT' | translate }}</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <button\n                        id=\"menu-dropdowns-mobile-item-page-break\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertPageBreak(); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-page-break\" />\n                            <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_BREAK' | translate }}</span>\n                        </div>\n                    </button>\n                </div>\n            </mat-expansion-panel>\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>{{ 'NODER.LABEL.FORMAT' | translate }}</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-text-format\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.textFormat()\">\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-text\" />\n                                <span class=\"menu-item-text\">{{ 'NODER.LABEL.TEXT_FORMAT' | translate }}</span>\n                            </div>\n                            <mat-icon\n                                class=\"composition-icon\"\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-arrow-dropdown\" />\n                        </button>\n                    </div>\n                    <div class=\"composition-button hidden\">\n                        <button\n                            id=\"menu-dropdowns-mobile-header-footer\"\n                            mat-menu-item>\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-headers-footers\" />\n                                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n                            </div>\n                            <mat-icon\n                                class=\"composition-icon\"\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-arrow-dropdown\" />\n                        </button>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </ng-container>\n    </mat-accordion>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;padding:25px}mat-expansion-panel.mat-expansion-panel ::ng-deep{box-shadow:none;border-bottom-width:1px;border-bottom-style:solid}mat-expansion-panel.mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0 18px}mat-panel-description{margin:0;justify-content:flex-end}.mat-expansion-panel-spacing{margin:0}.mat-expansion-panel-header,.mat-expansion-panel-header.mat-expanded{height:48px;padding-right:10px}.mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-description .mat-icon{transform:rotate(180deg)}.heading-menu{display:inline-flex;width:100%}.menu-item-text{white-space:nowrap;align-self:center}.composition-button{display:flex;flex-direction:row;align-items:center;position:relative}.composition-icon{position:absolute;right:0;transform:rotate(270deg)}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i4$2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: MenuDropdownsMobileComponent, isStandalone: false, selector: "app-nod-menu-dropdowns-mobile", ngImport: i0, template: "<ng-container\n    *ngIf=\"{\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <mat-accordion>\n        <mat-expansion-panel hideToggle>\n            <mat-expansion-panel-header>\n                <mat-panel-title>{{ 'NODER.LABEL.FILE' | translate }}</mat-panel-title>\n                <mat-panel-description>\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-arrow-dropdown\" />\n                </mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-panel-content\">\n                <button\n                    *ngIf=\"!data.isViewOnly\"\n                    id=\"menu-dropdowns-mobile-item-new\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.new(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-add-new\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.NEW' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    *ngIf=\"!data.isViewOnly\"\n                    id=\"menu-dropdowns-mobile-item-open-from\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.openFrom(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-open-from\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.OPEN_FROM' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-save-as\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.saveAs(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-save\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-rename\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.rename(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-rename\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.RENAME' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    class=\"hidden\"\n                    id=\"menu-dropdowns-mobile-item-print\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.print(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-print\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.PRINT' | translate }}</span>\n                    </div>\n                </button>\n                <button\n                    id=\"menu-dropdowns-mobile-item-delete\"\n                    mat-menu-item\n                    (click)=\"toolbarCoreService.actions.delete(); toolbarCoreService.reset()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-delete\" />\n                        <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n                    </div>\n                </button>\n            </div>\n        </mat-expansion-panel>\n        <ng-container *ngIf=\"!data.isViewOnly\">\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>{{ 'NODER.LABEL.INSERT' | translate }}</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <button\n                        id=\"menu-dropdowns-mobile-item-image\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertImage(); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-image\" />\n                            <span class=\"menu-item-text\">{{ 'NODER.LABEL.IMAGE' | translate }}</span>\n                        </div>\n                    </button>\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-table\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.insertTable()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-table\" />\n                            {{ 'NODER.LABEL.TABLE' | translate }}\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-link\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.insertLink()\">\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-link-on\" />\n                                <span class=\"menu-item-text\">{{ 'NODER.LABEL.LINK' | translate }}</span>\n                            </div>\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                    <button\n                        *ngFor=\"let element of elements\"\n                        id=\"menu-dropdowns-mobile-item-{{ element.nameId }}\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertCustomElement(element); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"{{ element.icon }}\" />\n                            <span class=\"menu-item-text\">{{ element.nameTranslate | translate }}</span>\n                        </div>\n                    </button>\n                    <div class=\"composition-button hidden\">\n                        <button\n                            id=\"menu-dropdowns-mobile-item-headers-footers\"\n                            mat-menu-item>\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-headers-footers\" />\n                                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n                            </div>\n                        </button>\n                        <mat-icon\n                            class=\"composition-icon\"\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </div>\n                </div>\n            </mat-expansion-panel>\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>{{ 'NODER.LABEL.LAYOUT' | translate }}</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <button\n                        id=\"menu-dropdowns-mobile-item-page-break\"\n                        mat-menu-item\n                        (click)=\"toolbarCoreService.actions.insertPageBreak(); toolbarCoreService.reset()\">\n                        <div class=\"heading-menu\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-page-break\" />\n                            <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_BREAK' | translate }}</span>\n                        </div>\n                    </button>\n                </div>\n            </mat-expansion-panel>\n            <mat-expansion-panel hideToggle>\n                <mat-expansion-panel-header>\n                    <mat-panel-title>{{ 'NODER.LABEL.FORMAT' | translate }}</mat-panel-title>\n                    <mat-panel-description>\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-arrow-dropdown\" />\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-panel-content\">\n                    <div class=\"composition-button\">\n                        <button\n                            id=\"menu-dropdowns-mobile-text-format\"\n                            mat-menu-item\n                            (click)=\"toolbarCoreService.actions.textFormat()\">\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-text\" />\n                                <span class=\"menu-item-text\">{{ 'NODER.LABEL.TEXT_FORMAT' | translate }}</span>\n                            </div>\n                            <mat-icon\n                                class=\"composition-icon\"\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-arrow-dropdown\" />\n                        </button>\n                    </div>\n                    <div class=\"composition-button hidden\">\n                        <button\n                            id=\"menu-dropdowns-mobile-header-footer\"\n                            mat-menu-item>\n                            <div class=\"heading-menu\">\n                                <mat-icon\n                                    fontSet=\"noder-icon\"\n                                    fontIcon=\"icon-headers-footers\" />\n                                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n                            </div>\n                            <mat-icon\n                                class=\"composition-icon\"\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-arrow-dropdown\" />\n                        </button>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </ng-container>\n    </mat-accordion>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;padding:25px}mat-expansion-panel.mat-expansion-panel ::ng-deep{box-shadow:none;border-bottom-width:1px;border-bottom-style:solid}mat-expansion-panel.mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0 18px}mat-panel-description{margin:0;justify-content:flex-end}.mat-expansion-panel-spacing{margin:0}.mat-expansion-panel-header,.mat-expansion-panel-header.mat-expanded{height:48px;padding-right:10px}.mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-description .mat-icon{transform:rotate(180deg)}.heading-menu{display:inline-flex;width:100%}.menu-item-text{white-space:nowrap;align-self:center}.composition-button{display:flex;flex-direction:row;align-items:center;position:relative}.composition-icon{position:absolute;right:0;transform:rotate(270deg)}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i4$2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MenuDropdownsMobileComponent, decorators: [{
             type: Component,
@@ -16144,6 +17094,9 @@ class BaseToolbarComponent extends DestroyComponent {
         this.insertImage = new EventEmitter();
         this.insertLink = new EventEmitter();
         this.insertTable = new EventEmitter();
+        this.updateTableBorderStyle = new EventEmitter();
+        this.updateTableBorderWidth = new EventEmitter();
+        this.updateTableBorders = new EventEmitter();
         this.elements = this.injector.get(EXTERNAL_ELEMENT_SERVICE).elements;
         this.customIconService.register();
         this.historyInfoSubscription();
@@ -16203,7 +17156,7 @@ class BaseToolbarComponent extends DestroyComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BaseToolbarComponent, deps: [{ token: CustomIconService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: BaseToolbarComponent, isStandalone: true, outputs: { print: "print", redo: "redo", undo: "undo", createElement: "createElement", changeTextStyle: "changeTextStyle", changeParagraphStyle: "changeParagraphStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertImage: "insertImage", insertLink: "insertLink", insertTable: "insertTable" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: BaseToolbarComponent, isStandalone: true, outputs: { print: "print", redo: "redo", undo: "undo", createElement: "createElement", changeTextStyle: "changeTextStyle", changeParagraphStyle: "changeParagraphStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertImage: "insertImage", insertLink: "insertLink", insertTable: "insertTable", updateTableBorderStyle: "updateTableBorderStyle", updateTableBorderWidth: "updateTableBorderWidth", updateTableBorders: "updateTableBorders" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BaseToolbarComponent, decorators: [{
             type: Directive
@@ -16229,6 +17182,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Output
             }], insertTable: [{
                 type: Output
+            }], updateTableBorderStyle: [{
+                type: Output
+            }], updateTableBorderWidth: [{
+                type: Output
+            }], updateTableBorders: [{
+                type: Output
             }] } });
 
 class InsertTableComponent {
@@ -16272,7 +17231,7 @@ class InsertTableComponent {
         return arrayValues;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InsertTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: InsertTableComponent, isStandalone: true, selector: "app-nod-insert-table", outputs: { selectSizes: "selectSizes" }, ngImport: i0, template: "<div class=\"table-size-container\">\n    <ng-container *ngFor=\"let row of rows\">\n        <div class=\"row\">\n            <ng-container *ngFor=\"let column of columns\">\n                <div\n                    class=\"cell-container\"\n                    (mouseenter)=\"onCellHover(row, column)\"\n                    (click)=\"onCreateTable(row, column)\">\n                    <div\n                        class=\"cell\"\n                        [class.highlighted]=\"row <= currentRow && column <= currentColumn\"></div>\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n    <div class=\"table-size\">{{ currentColumn }} x {{ currentRow }}</div>\n</div>\n", styles: [":host{border-radius:4px}.table-size-container{padding:14px 10px 8px}.row{display:flex;flex-direction:row}.cell-container{padding:2px}.cell{height:16px;width:16px}.table-size{display:flex;justify-content:center;padding-top:14px;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: InsertTableComponent, isStandalone: true, selector: "app-nod-insert-table", outputs: { selectSizes: "selectSizes" }, ngImport: i0, template: "<div class=\"table-size-container\">\n    <ng-container *ngFor=\"let row of rows\">\n        <div class=\"row\">\n            <ng-container *ngFor=\"let column of columns\">\n                <div\n                    class=\"cell-container\"\n                    (mouseenter)=\"onCellHover(row, column)\"\n                    (click)=\"onCreateTable(row, column)\">\n                    <div\n                        class=\"cell\"\n                        [class.highlighted]=\"row <= currentRow && column <= currentColumn\"></div>\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n    <div class=\"table-size\">{{ currentColumn }} x {{ currentRow }}</div>\n</div>\n", styles: [":host{border-radius:4px}.table-size-container{padding:14px 10px 8px}.row{display:flex;flex-direction:row}.cell-container{padding:2px}.cell{height:16px;width:16px}.table-size{display:flex;justify-content:center;padding-top:14px;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InsertTableComponent, decorators: [{
             type: Component,
@@ -16330,7 +17289,7 @@ class MenuDropdownsComponent extends BaseToolbarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MenuDropdownsComponent, deps: [{ token: CustomIconService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: MenuDropdownsComponent, isStandalone: false, selector: "app-nod-menu-dropdowns", inputs: { showFile: "showFile", showEdit: "showEdit", showInsert: "showInsert", showLayout: "showLayout", showFormat: "showFormat" }, outputs: { openFileFromDisk: "openFileFromDisk", saveAs: "saveAs", downloadPdf: "downloadPdf", insertPageBreak: "insertPageBreak", createDocument: "createDocument", pageSetup: "pageSetup", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected" }, viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngIf=\"{\n        clipboardData: editorService.clipboardData$ | async,\n        hasSelection: editorService.hasSelection$ | async,\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <button\n        *ngIf=\"showFile\"\n        id=\"menu-dropdowns-menu-file\"\n        mat-button\n        [matMenuTriggerFor]=\"fileMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.FILE' | translate }}\n    </button>\n    <mat-menu\n        #fileMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"createDocument.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-new\"\n            mat-menu-item\n            (click)=\"createDocument.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-add-new\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.NEW' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"!data.isViewOnly\"\n            id=\"menu-dropdowns-menu-page-setup\"\n            mat-menu-item\n            (click)=\"pageSetup.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-system-file\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"openFileFromDisk.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-open-from\"\n            mat-menu-item\n            (click)=\"openFileFromDisk.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-open-from\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.OPEN_FROM' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+O</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"saveAs.observed\"\n            id=\"menu-dropdowns-menu-item-save-as\"\n            mat-menu-item\n            (click)=\"saveAs.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"downloadPdf.observed\"\n            id=\"menu-dropdowns-menu-item-download-pdf\"\n            mat-menu-item\n            (click)=\"downloadPdf.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DOWNLOAD_PDF' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"rename.observed\"\n            id=\"menu-dropdowns-menu-item-rename\"\n            mat-menu-item\n            (click)=\"rename.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-rename\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.RENAME' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"print.observed\"\n            id=\"menu-dropdowns-menu-item-print\"\n            mat-menu-item\n            (click)=\"print.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-print\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PRINT' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+P</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"delete.observed\"\n            id=\"menu-dropdowns-menu-item-delete\"\n            mat-menu-item\n            (click)=\"delete.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showEdit\"\n        id=\"menu-dropdowns-menu-edit\"\n        mat-button\n        [matMenuTriggerFor]=\"editMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        (menuOpened)=\"openEditMenu.emit()\">\n        {{ 'NODER.LABEL.EDIT' | translate }}\n    </button>\n    <mat-menu\n        #editMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"undo.observed\"\n            id=\"menu-dropdowns-menu-item-undo\"\n            mat-menu-item\n            [disabled]=\"!canUndo\"\n            (click)=\"undo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-undo\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.UNDO' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Z</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"redo.observed\"\n            id=\"menu-dropdowns-menu-item-redo\"\n            mat-menu-item\n            [disabled]=\"!canRedo\"\n            (click)=\"redo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-redo\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.REDO' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Y</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"cutSelected.observed\"\n            id=\"menu-dropdowns-menu-item-cut\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"cutSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-cut\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.CUT' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+X</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"copySelected.observed\"\n            id=\"menu-dropdowns-menu-item-copy\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"copySelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-file-copy\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.COPY' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+C</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"pasteClipboardData.observed\"\n            id=\"menu-dropdowns-menu-item-paste\"\n            mat-menu-item\n            [disabled]=\"!data.clipboardData?.length\"\n            (click)=\"pasteClipboardData.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-paste\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PASTE' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+V</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"selectAll.observed\"\n            id=\"menu-dropdowns-menu-item-select-all\"\n            mat-menu-item\n            (click)=\"selectAll.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-select-all\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.SELECT_ALL' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+A</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"removeSelected.observed\"\n            id=\"menu-dropdowns-menu-item-delete-text\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"removeSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showInsert && !data.isViewOnly\"\n        #insertMenuTrigger=\"matMenuTrigger\"\n        id=\"menu-dropdowns-menu-insert\"\n        mat-button\n        [matMenuTriggerFor]=\"insertMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.INSERT' | translate }}\n    </button>\n    <mat-menu\n        #insertMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertImage.observed\"\n            id=\"menu-dropdowns-menu-item-image\"\n            mat-menu-item\n            (click)=\"insertImage.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-image\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.IMAGE' | translate }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-table\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\"></mat-icon>\n            {{ 'NODER.LABEL.TABLE' | translate }}\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"insertLink.observed\"\n            id=\"menu-dropdowns-menu-item-link\"\n            mat-menu-item\n            (click)=\"insertLink.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-link-on\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.LINK' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+K</span>\n            </div>\n        </button>\n        <button\n            *ngFor=\"let element of elements\"\n            id=\"menu-dropdowns-menu-item-{{ element.nameId }}\"\n            mat-menu-item\n            (click)=\"onCreateElement(element)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"{{ element.icon }}\"></mat-icon>\n                <span class=\"menu-item-text\">{{ element.nameTranslate | translate }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-headers-footers\"\n            mat-menu-item\n            class=\"hidden\"\n            [matMenuTriggerFor]=\"listHeadersFootersMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listHeadersFootersMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-header\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-header\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADER' | translate }}</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-footer\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-bottom\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.FOOTER' | translate }}</span>\n                </div>\n            </button>\n        </mat-menu>\n    </mat-menu>\n    <button\n        *ngIf=\"showLayout && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-layout\"\n        mat-button\n        [matMenuTriggerFor]=\"layoutMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.LAYOUT' | translate }}\n    </button>\n    <mat-menu\n        #layoutMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertPageBreak.observed\"\n            id=\"menu-dropdowns-menu-item-page-break\"\n            mat-menu-item\n            (click)=\"insertPageBreak.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-page-break\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_BREAK' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Enter</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showFormat && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-format\"\n        mat-button\n        [matMenuTriggerFor]=\"formatMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.FORMAT' | translate }}\n    </button>\n    <mat-menu\n        #formatMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-align\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listAlignMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-alignleft\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.ALIGN' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listAlignMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-align-left\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Left)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignleft\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.LEFT' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+L</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-center\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Center)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-aligncenter\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.CENTER' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+E</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-right\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Right)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignright\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.RIGHT' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+R</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-bullets-numbering\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listBulletsNumberingMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bulleted\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.BULLETS_AND_NUMBERING' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listBulletsNumberingMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bullets\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listBulletedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bulleted\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.BULLET_LIST_MENU' | translate }}</span>\n                </div>\n            </button>\n            <mat-menu\n                #listBulletedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n            <button\n                id=\"menu-dropdowns-menu-item-numbering\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listNumberedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-numbered\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.NUMBERED_LIST_MENU' | translate }}</span>\n                </div>\n            </button>\n            <mat-menu\n                #listNumberedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-text\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listTextMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bold\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.TEXT' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listTextMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bold\"\n                mat-menu-item\n                (click)=\"onApplyBold()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bold\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.BOLD' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+B</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-italic\"\n                mat-menu-item\n                (click)=\"onApplyItalic()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-italic\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.ITALIC' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+I</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-underlined\"\n                mat-menu-item\n                (click)=\"onApplyUnderline()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-underlined\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.UNDERLINED' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+U</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-header-footer\"\n            mat-menu-item\n            class=\"hidden\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <mat-menu\n        #tableInsert=\"matMenu\"\n        class=\"insert-table noder-modal\">\n        <app-nod-insert-table\n            *ngIf=\"showInsertTableMenu\"\n            (selectSizes)=\"insertTable.emit($event)\" />\n    </mat-menu>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;height:100%}.menu-buttons mat-icon{width:24px;height:24px;font-size:24px}.heading-menu{display:inline-flex;width:210px}.hot-keys{text-align:end;width:auto}.menu-item-text{white-space:nowrap;width:64%}.mat-mdc-menu-item .mat-icon{margin-right:4px;width:28px}.hidden{display:none}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none}.list-icon .selected,.list-icon .selected:hover,.list-number .selected,.list-number .selected:hover{border-width:2px;border-style:solid}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4.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", pageSetup: "pageSetup", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected" }, viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngIf=\"{\n        clipboardData: editorService.clipboardData$ | async,\n        hasSelection: editorService.hasSelection$ | async,\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <button\n        *ngIf=\"showFile\"\n        id=\"menu-dropdowns-menu-file\"\n        mat-button\n        [matMenuTriggerFor]=\"fileMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.FILE' | translate }}\n    </button>\n    <mat-menu\n        #fileMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"createDocument.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-new\"\n            mat-menu-item\n            (click)=\"createDocument.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-add-new\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.NEW' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"!data.isViewOnly\"\n            id=\"menu-dropdowns-menu-page-setup\"\n            mat-menu-item\n            (click)=\"pageSetup.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-system-file\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"openFileFromDisk.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-open-from\"\n            mat-menu-item\n            (click)=\"openFileFromDisk.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-open-from\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.OPEN_FROM' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+O</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"saveAs.observed\"\n            id=\"menu-dropdowns-menu-item-save-as\"\n            mat-menu-item\n            (click)=\"saveAs.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"downloadPdf.observed\"\n            id=\"menu-dropdowns-menu-item-download-pdf\"\n            mat-menu-item\n            (click)=\"downloadPdf.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DOWNLOAD_PDF' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"rename.observed\"\n            id=\"menu-dropdowns-menu-item-rename\"\n            mat-menu-item\n            (click)=\"rename.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-rename\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.RENAME' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"print.observed\"\n            id=\"menu-dropdowns-menu-item-print\"\n            mat-menu-item\n            (click)=\"print.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-print\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PRINT' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+P</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"delete.observed\"\n            id=\"menu-dropdowns-menu-item-delete\"\n            mat-menu-item\n            (click)=\"delete.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showEdit\"\n        id=\"menu-dropdowns-menu-edit\"\n        mat-button\n        [matMenuTriggerFor]=\"editMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        (menuOpened)=\"openEditMenu.emit()\">\n        {{ 'NODER.LABEL.EDIT' | translate }}\n    </button>\n    <mat-menu\n        #editMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"undo.observed\"\n            id=\"menu-dropdowns-menu-item-undo\"\n            mat-menu-item\n            [disabled]=\"!canUndo\"\n            (click)=\"undo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-undo\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.UNDO' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Z</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"redo.observed\"\n            id=\"menu-dropdowns-menu-item-redo\"\n            mat-menu-item\n            [disabled]=\"!canRedo\"\n            (click)=\"redo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-redo\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.REDO' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Y</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"cutSelected.observed\"\n            id=\"menu-dropdowns-menu-item-cut\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"cutSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-cut\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.CUT' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+X</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"copySelected.observed\"\n            id=\"menu-dropdowns-menu-item-copy\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"copySelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-file-copy\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.COPY' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+C</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"pasteClipboardData.observed\"\n            id=\"menu-dropdowns-menu-item-paste\"\n            mat-menu-item\n            [disabled]=\"!data.clipboardData?.length\"\n            (click)=\"pasteClipboardData.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-paste\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PASTE' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+V</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"selectAll.observed\"\n            id=\"menu-dropdowns-menu-item-select-all\"\n            mat-menu-item\n            (click)=\"selectAll.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-select-all\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.SELECT_ALL' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+A</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"removeSelected.observed\"\n            id=\"menu-dropdowns-menu-item-delete-text\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"removeSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showInsert && !data.isViewOnly\"\n        #insertMenuTrigger=\"matMenuTrigger\"\n        id=\"menu-dropdowns-menu-insert\"\n        mat-button\n        [matMenuTriggerFor]=\"insertMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.INSERT' | translate }}\n    </button>\n    <mat-menu\n        #insertMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertImage.observed\"\n            id=\"menu-dropdowns-menu-item-image\"\n            mat-menu-item\n            (click)=\"insertImage.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-image\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.IMAGE' | translate }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-table\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\"></mat-icon>\n            {{ 'NODER.LABEL.TABLE' | translate }}\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"insertLink.observed\"\n            id=\"menu-dropdowns-menu-item-link\"\n            mat-menu-item\n            (click)=\"insertLink.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-link-on\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.LINK' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+K</span>\n            </div>\n        </button>\n        <button\n            *ngFor=\"let element of elements\"\n            id=\"menu-dropdowns-menu-item-{{ element.nameId }}\"\n            mat-menu-item\n            (click)=\"onCreateElement(element)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"{{ element.icon }}\"></mat-icon>\n                <span class=\"menu-item-text\">{{ element.nameTranslate | translate }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-headers-footers\"\n            mat-menu-item\n            class=\"hidden\"\n            [matMenuTriggerFor]=\"listHeadersFootersMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listHeadersFootersMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-header\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-header\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADER' | translate }}</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-footer\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-bottom\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.FOOTER' | translate }}</span>\n                </div>\n            </button>\n        </mat-menu>\n    </mat-menu>\n    <button\n        *ngIf=\"showLayout && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-layout\"\n        mat-button\n        [matMenuTriggerFor]=\"layoutMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.LAYOUT' | translate }}\n    </button>\n    <mat-menu\n        #layoutMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertPageBreak.observed\"\n            id=\"menu-dropdowns-menu-item-page-break\"\n            mat-menu-item\n            (click)=\"insertPageBreak.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-page-break\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_BREAK' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Enter</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showFormat && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-format\"\n        mat-button\n        [matMenuTriggerFor]=\"formatMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.FORMAT' | translate }}\n    </button>\n    <mat-menu\n        #formatMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-align\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listAlignMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-alignleft\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.ALIGN' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listAlignMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-align-left\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Left)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignleft\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.LEFT' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+L</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-center\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Center)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-aligncenter\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.CENTER' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+E</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-right\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Right)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignright\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.RIGHT' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+R</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-bullets-numbering\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listBulletsNumberingMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bulleted\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.BULLETS_AND_NUMBERING' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listBulletsNumberingMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bullets\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listBulletedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bulleted\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.BULLET_LIST_MENU' | translate }}</span>\n                </div>\n            </button>\n            <mat-menu\n                #listBulletedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n            <button\n                id=\"menu-dropdowns-menu-item-numbering\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listNumberedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-numbered\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.NUMBERED_LIST_MENU' | translate }}</span>\n                </div>\n            </button>\n            <mat-menu\n                #listNumberedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-text\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listTextMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bold\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.TEXT' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listTextMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bold\"\n                mat-menu-item\n                (click)=\"onApplyBold()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bold\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.BOLD' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+B</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-italic\"\n                mat-menu-item\n                (click)=\"onApplyItalic()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-italic\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.ITALIC' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+I</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-underlined\"\n                mat-menu-item\n                (click)=\"onApplyUnderline()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-underlined\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.UNDERLINED' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+U</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-header-footer\"\n            mat-menu-item\n            class=\"hidden\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <mat-menu\n        #tableInsert=\"matMenu\"\n        class=\"insert-table noder-modal\">\n        <app-nod-insert-table\n            *ngIf=\"showInsertTableMenu\"\n            (selectSizes)=\"insertTable.emit($event)\" />\n    </mat-menu>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;height:100%}.menu-buttons mat-icon{width:24px;height:24px;font-size:24px}.heading-menu{display:inline-flex;width:210px}.hot-keys{text-align:end;width:auto}.menu-item-text{white-space:nowrap;width:64%}.mat-mdc-menu-item .mat-icon{margin-right:4px;width:28px}.hidden{display:none}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none}.list-icon .selected,.list-icon .selected:hover,.list-number .selected,.list-number .selected:hover{border-width:2px;border-style:solid}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MenuDropdownsComponent, decorators: [{
             type: Component,
@@ -16403,7 +17362,7 @@ class FontComponent {
         this.selectFont.emit(font);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FontComponent, isStandalone: true, selector: "app-nod-font", inputs: { isDisabled: "isDisabled", styles: "styles" }, outputs: { selectFont: "selectFont" }, ngImport: i0, template: "<button\n    mat-button\n    [matMenuTriggerFor]=\"fontMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matTooltip]=\"'NODER.TOOLTIP.FONT' | translate\"\n    matTooltipPosition=\"below\">\n    <div class=\"font-menu\">\n        <span>{{ font }}</span>\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </div>\n</button>\n<mat-menu\n    #fontMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <ng-container *ngFor=\"let font of fonts\">\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled\"\n            (click)=\"onSelectFont(font)\">\n            {{ font }}\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [".font-menu{display:flex;justify-content:space-between;align-items:center;width:130px}span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:start}button{height:28px;margin:0 4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontComponent, decorators: [{
             type: Component,
@@ -16475,7 +17434,7 @@ class FontSizeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FontSizeComponent, isStandalone: true, selector: "app-nod-font-size", inputs: { isDisabled: "isDisabled", fontSize: "fontSize" }, outputs: { selectFontSize: "selectFontSize" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onDecrementFontSize()\"\n    [matTooltip]=\"'NODER.TOOLTIP.DECREMENT' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-remove\"></mat-icon>\n</button>\n<input\n    type=\"text\"\n    [formControl]=\"fontSizeControl\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"onSetFontSize()\"\n    (blur)=\"resetFontSize()\"\n    [matTooltip]=\"'NODER.TOOLTIP.FONTSIZE' | translate\"\n    matTooltipPosition=\"below\" />\n<mat-autocomplete\n    #auto=\"matAutocomplete\"\n    panelWidth=\"60\"\n    disableRipple=\"false\"\n    hideSingleSelectionIndicator=\"true\">\n    <mat-option\n        *ngFor=\"let fontSize of fontSizes\"\n        [value]=\"fontSize\"\n        (click)=\"onSelectFontSize(fontSize)\">\n        {{ fontSize }}\n    </mat-option>\n</mat-autocomplete>\n<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onIncrementFontSize()\"\n    [matTooltip]=\"'NODER.TOOLTIP.INCREMENT' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n</button>\n", styles: ["input{width:48px;height:32px;text-align:center;border-color:transparent}button.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.mat-mdc-option{padding-left:6px;padding-right:6px;min-height:30px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontSizeComponent, decorators: [{
             type: Component,
@@ -16500,6 +17459,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 args: ['auto']
             }] } });
 
+class TableBordersComponent {
+    constructor() {
+        this.isDisabled = false;
+        this.active = false;
+        this.borders = Borders;
+        this.updateTableBorders = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBordersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TableBordersComponent, isStandalone: true, selector: "app-nod-table-borders", inputs: { isDisabled: "isDisabled" }, outputs: { updateTableBorders: "updateTableBorders" }, ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.LABEL.BORDERS' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-bottom\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Bottom)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-bottom\" />\n        <div class=\"label\">{{ 'NODER.LABEL.BOTTOM_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Top)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-top\" />\n        <div class=\"label\">{{ 'NODER.LABEL.TOP_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Left)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-left\" />\n        <div class=\"label\">{{ 'NODER.LABEL.LEFT_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Right)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-right\" />\n        <div class=\"label\">{{ 'NODER.LABEL.RIGHT_BORDER' | translate }}</div>\n    </div>\n    <mat-divider />\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Empty)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-none\" />\n        <div class=\"label\">{{ 'NODER.LABEL.NO_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.All)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-all\" />\n        <div class=\"label\">{{ 'NODER.LABEL.ALL_BORDERS' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Outside)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-outside\" />\n        <div class=\"label\">{{ 'NODER.LABEL.OUTSIDE_BORDERS' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Inside)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-inside\" />\n        <div class=\"label\">{{ 'NODER.LABEL.INSIDE_BORDERS' | translate }}</div>\n    </div>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.mat-divider{margin:0 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBordersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nod-table-borders', imports: [MatButtonModule, MatDividerModule, MatIconModule, MatMenuModule, MatTooltipModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.LABEL.BORDERS' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-bottom\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Bottom)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-bottom\" />\n        <div class=\"label\">{{ 'NODER.LABEL.BOTTOM_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Top)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-top\" />\n        <div class=\"label\">{{ 'NODER.LABEL.TOP_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Left)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-left\" />\n        <div class=\"label\">{{ 'NODER.LABEL.LEFT_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Right)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-right\" />\n        <div class=\"label\">{{ 'NODER.LABEL.RIGHT_BORDER' | translate }}</div>\n    </div>\n    <mat-divider />\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Empty)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-none\" />\n        <div class=\"label\">{{ 'NODER.LABEL.NO_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.All)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-all\" />\n        <div class=\"label\">{{ 'NODER.LABEL.ALL_BORDERS' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Outside)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-outside\" />\n        <div class=\"label\">{{ 'NODER.LABEL.OUTSIDE_BORDERS' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Inside)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-inside\" />\n        <div class=\"label\">{{ 'NODER.LABEL.INSIDE_BORDERS' | translate }}</div>\n    </div>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.mat-divider{margin:0 8px}\n"] }]
+        }], propDecorators: { isDisabled: [{
+                type: Input
+            }], updateTableBorders: [{
+                type: Output
+            }] } });
+
+class TableBorderStyleComponent {
+    constructor() {
+        this.isDisabled = false;
+        this.active = false;
+        this.lineStyles = LineStyles;
+        this.updateTableBorderStyle = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBorderStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TableBorderStyleComponent, isStandalone: true, selector: "app-nod-table-border-style", inputs: { isDisabled: "isDisabled" }, outputs: { updateTableBorderStyle: "updateTableBorderStyle" }, ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.TOOLTIP.BORDER_STYLE' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-dash\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Single)\">\n        <div class=\"solid-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Dashed)\">\n        <div class=\"dashed-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Dotted)\">\n        <div class=\"dotted-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Double)\">\n        <div class=\"double-border\"></div>\n    </div>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.solid-border{border-bottom:1px solid}.dashed-border{border-bottom:1px dashed}.dotted-border{border-bottom:1px dotted}.double-border{border-bottom:4px double}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBorderStyleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nod-table-border-style', imports: [MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.TOOLTIP.BORDER_STYLE' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-dash\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Single)\">\n        <div class=\"solid-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Dashed)\">\n        <div class=\"dashed-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Dotted)\">\n        <div class=\"dotted-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Double)\">\n        <div class=\"double-border\"></div>\n    </div>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.solid-border{border-bottom:1px solid}.dashed-border{border-bottom:1px dashed}.dotted-border{border-bottom:1px dotted}.double-border{border-bottom:4px double}\n"] }]
+        }], propDecorators: { isDisabled: [{
+                type: Input
+            }], updateTableBorderStyle: [{
+                type: Output
+            }] } });
+
+class TableBorderWidthComponent {
+    constructor() {
+        this.isDisabled = false;
+        this.active = false;
+        this.widths = [0.5, 1, 1.5, 2, 3];
+        this.updateTableBorderWidth = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBorderWidthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: TableBorderWidthComponent, isStandalone: true, selector: "app-nod-table-border-width", inputs: { isDisabled: "isDisabled" }, outputs: { updateTableBorderWidth: "updateTableBorderWidth" }, ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.TOOLTIP.BORDER_WIDTH' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-width\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    @for (width of widths; track $index) {\n        <div\n            mat-menu-item\n            class=\"border-width\"\n            (click)=\"updateTableBorderWidth.emit(width)\">\n            {{ width }} pt\n        </div>\n    }\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.border-width{font-size:14px;font-style:normal;font-weight:400;line-height:normal}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBorderWidthComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nod-table-border-width', imports: [MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.TOOLTIP.BORDER_WIDTH' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-width\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    @for (width of widths; track $index) {\n        <div\n            mat-menu-item\n            class=\"border-width\"\n            (click)=\"updateTableBorderWidth.emit(width)\">\n            {{ width }} pt\n        </div>\n    }\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.border-width{font-size:14px;font-style:normal;font-weight:400;line-height:normal}\n"] }]
+        }], propDecorators: { isDisabled: [{
+                type: Input
+            }], updateTableBorderWidth: [{
+                type: Output
+            }] } });
+
 class ColorPickerComponent {
     constructor() {
         this.colorChange = new EventEmitter();
@@ -16508,7 +17524,7 @@ class ColorPickerComponent {
         this.colorChange.emit(color);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ColorPickerComponent, isStandalone: true, selector: "app-nod-color-picker", inputs: { color: "color", icon: "icon", isDisabled: "isDisabled", palette: "palette", tooltip: "tooltip" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<button\n    mat-button\n    ngx-colors-trigger\n    overlayClassName=\"noder-color-picker-overlay\"\n    [disabled]=\"isDisabled\"\n    [(ngModel)]=\"color\"\n    [palette]=\"palette\"\n    [hideTextInput]=\"true\"\n    [attachTo]=\"icon\"\n    (input)=\"onChangeColor(color)\"\n    [matTooltip]=\"tooltip\"\n    matTooltipPosition=\"below\">\n    <div class=\"color-text\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            [ngStyle]=\"{ color: color && color !== 'transparent' ? color : 'inherit' }\"\n            [fontIcon]=\"icon\"></mat-icon>\n    </div>\n</button>\n", styles: ["button{margin:0 3px}.color-text{display:inline-flex;height:22px}.mdc-button{min-width:32px;height:32px;width:32px;padding:0}.mdc-button mat-icon{height:24px;width:24px;font-size:22px}.mdc-button::ng-deep .mdc-button__label{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: NgxColorsModule }, { kind: "directive", type: i5$4.NgxColorsTriggerDirective, selector: "[ngx-colors-trigger]", inputs: ["colorsAnimation", "palette", "format", "formats", "position", "hideTextInput", "hideColorPicker", "attachTo", "overlayClassName", "colorPickerControls", "acceptLabel", "cancelLabel"], outputs: ["change", "input", "slider", "close", "open"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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$1.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"] }, { 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,
@@ -16572,7 +17588,7 @@ class FontStyleComponent {
         this.selectHighlightColor.emit(color);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FontStyleComponent, isStandalone: false, selector: "app-nod-font-style", inputs: { isDisabled: "isDisabled", bold: "bold", italic: "italic", underline: "underline", fontColor: "fontColor", highlightColor: "highlightColor" }, outputs: { toggleBold: "toggleBold", toggleItalic: "toggleItalic", toggleUnderline: "toggleUnderline", selectFontColor: "selectFontColor", selectHighlightColor: "selectHighlightColor" }, ngImport: i0, template: "<mat-button-toggle-group\n    multiple\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\">\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"bold\"\n        (click)=\"onToggleBold()\"\n        [matTooltip]=\"'NODER.TOOLTIP.BOLD' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-bold\" />\n    </mat-button-toggle>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"italic\"\n        (click)=\"onToggleItalic()\"\n        [matTooltip]=\"'NODER.TOOLTIP.ITALIC' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-italic\" />\n    </mat-button-toggle>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"underline\"\n        (click)=\"onToggleUnderline()\"\n        [matTooltip]=\"'NODER.TOOLTIP.UNDERLINE' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-underlined\" />\n    </mat-button-toggle>\n</mat-button-toggle-group>\n<app-nod-color-picker\n    *ngIf=\"selectFontColor.observed\"\n    id=\"icon-format-colortext\"\n    class=\"text-color\"\n    [color]=\"fontColor\"\n    [isDisabled]=\"isDisabled\"\n    icon=\"icon-format-colortext\"\n    [palette]=\"textColorPalette\"\n    (colorChange)=\"onSelectFontColor($event)\"\n    [tooltip]=\"'NODER.TOOLTIP.FONTCOLOR' | translate\" />\n<app-nod-color-picker\n    *ngIf=\"selectHighlightColor.observed\"\n    id=\"icon-link-highlighter\"\n    class=\"highlight-color\"\n    [color]=\"highlightColor\"\n    [isDisabled]=\"isDisabled\"\n    icon=\"icon-link-highlighter\"\n    [palette]=\"highlightColorPalette\"\n    (colorChange)=\"onSelectHighlightColor($event)\"\n    [tooltip]=\"'NODER.TOOLTIP.HIGHLIGHTCOLOR' | translate\" />\n", styles: ["mat-button-toggle,button{margin:0 4px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}:host{display:flex;align-items:center}:host ::ng-deep #format-color-highlight .circle.button:first-child,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child{flex:100%;width:100%;background:no-repeat left/20px url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_format_color_reset_48px-512.png);border-radius:unset}:host ::ng-deep #format-color-highlight .circle.button:first-child .circle.color.circle-border,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child .circle.color.circle-border{width:100%;border:unset}:host ::ng-deep #format-color-highlight .circle.button:first-child .circle.color.circle-border .selected,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child .circle.color.circle-border .selected{display:none}\n"], dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "app-nod-color-picker", inputs: ["color", "icon", "isDisabled", "palette", "tooltip"], outputs: ["colorChange"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontStyleComponent, decorators: [{
             type: Component,
@@ -16611,7 +17627,7 @@ class FormatComponent {
         this.selectAlignment.emit(format);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FormatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FormatComponent, isStandalone: false, selector: "app-nod-format", inputs: { isDisabled: "isDisabled", alignment: "alignment" }, outputs: { selectAlignment: "selectAlignment" }, ngImport: i0, template: "<mat-button-toggle-group\n    name=\"format\"\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\"\n    [disabled]=\"isDisabled\"\n    [value]=\"alignment\"\n    (change)=\"onSelectFormat($event.value)\">\n    <mat-button-toggle\n        [value]=\"alignments.Left\"\n        [matTooltip]=\"'NODER.TOOLTIP.LEFT' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-alignleft\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Center\"\n        [matTooltip]=\"'NODER.TOOLTIP.CENTER' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-aligncenter\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Right\"\n        [matTooltip]=\"'NODER.TOOLTIP.RIGHT' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-alignright\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Justify\"\n        [matTooltip]=\"'NODER.TOOLTIP.JUSTIFY' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-align\"></mat-icon>\n    </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}\n"], dependencies: [{ kind: "directive", type: i3$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FormatComponent, isStandalone: false, selector: "app-nod-format", inputs: { isDisabled: "isDisabled", alignment: "alignment" }, outputs: { selectAlignment: "selectAlignment" }, ngImport: i0, template: "<mat-button-toggle-group\n    name=\"format\"\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\"\n    [disabled]=\"isDisabled\"\n    [value]=\"alignment\"\n    (change)=\"onSelectFormat($event.value)\">\n    <mat-button-toggle\n        [value]=\"alignments.Left\"\n        [matTooltip]=\"'NODER.TOOLTIP.LEFT' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-alignleft\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Center\"\n        [matTooltip]=\"'NODER.TOOLTIP.CENTER' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-aligncenter\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Right\"\n        [matTooltip]=\"'NODER.TOOLTIP.RIGHT' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-alignright\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Justify\"\n        [matTooltip]=\"'NODER.TOOLTIP.JUSTIFY' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-align\"></mat-icon>\n    </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}\n"], dependencies: [{ kind: "directive", type: i3$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FormatComponent, decorators: [{
             type: Component,
@@ -16652,7 +17668,7 @@ class NumberingComponent {
         this.selectNumberingTemplate.emit(numberingTemplateType);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NumberingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NumberingComponent, isStandalone: false, selector: "app-nod-numbering", inputs: { isDisabled: "isDisabled", selectedNumberingType: "selectedNumberingType", selectedNumberingTemplate: "selectedNumberingTemplate" }, outputs: { selectNumberingTemplate: "selectNumberingTemplate", removeNumberings: "removeNumberings" }, ngImport: i0, template: "<mat-button-toggle-group\n    name=\"format\"\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\"\n    [disabled]=\"isDisabled\">\n    <mat-button-toggle\n        (click)=\"onToggleBulletedNumbering()\"\n        [value]=\"numberingType.Bullet\"\n        [checked]=\"selectedNumberingType === numberingType.Bullet\"\n        [matTooltip]=\"'NODER.TOOLTIP.BULLETED_LIST' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-bulleted\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listBulletedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        [matTooltip]=\"'NODER.TOOLTIP.BULLETED_MENU' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listBulletedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList6\"></mat-icon>\n        </div>\n    </mat-menu>\n    <mat-button-toggle\n        (click)=\"onToggleNumberedNumbering()\"\n        [value]=\"numberingType.Number\"\n        [checked]=\"selectedNumberingType === numberingType.Number\"\n        [matTooltip]=\"'NODER.TOOLTIP.NUMBERED_LIST' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-numbered\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listNumberedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        style=\"display: none\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listNumberedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList6\"></mat-icon>\n        </div>\n    </mat-menu>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle-group,button{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}.mdc-button{min-width:32px;min-height:32px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.mat-button-toggle-group{align-items:center}.mat-button-toggle-group .mdc-button{min-width:20px;height:32px;padding:0}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none!important}.list-icon .selected,.list-icon .selected:hover{border-width:2px;border-style:solid}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NumberingComponent, isStandalone: false, selector: "app-nod-numbering", inputs: { isDisabled: "isDisabled", selectedNumberingType: "selectedNumberingType", selectedNumberingTemplate: "selectedNumberingTemplate" }, outputs: { selectNumberingTemplate: "selectNumberingTemplate", removeNumberings: "removeNumberings" }, ngImport: i0, template: "<mat-button-toggle-group\n    name=\"format\"\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\"\n    [disabled]=\"isDisabled\">\n    <mat-button-toggle\n        (click)=\"onToggleBulletedNumbering()\"\n        [value]=\"numberingType.Bullet\"\n        [checked]=\"selectedNumberingType === numberingType.Bullet\"\n        [matTooltip]=\"'NODER.TOOLTIP.BULLETED_LIST' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-bulleted\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listBulletedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        [matTooltip]=\"'NODER.TOOLTIP.BULLETED_MENU' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listBulletedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList6\"></mat-icon>\n        </div>\n    </mat-menu>\n    <mat-button-toggle\n        (click)=\"onToggleNumberedNumbering()\"\n        [value]=\"numberingType.Number\"\n        [checked]=\"selectedNumberingType === numberingType.Number\"\n        [matTooltip]=\"'NODER.TOOLTIP.NUMBERED_LIST' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-numbered\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listNumberedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        style=\"display: none\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listNumberedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList6\"></mat-icon>\n        </div>\n    </mat-menu>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle-group,button{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}.mdc-button{min-width:32px;min-height:32px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.mat-button-toggle-group{align-items:center}.mat-button-toggle-group .mdc-button{min-width:20px;height:32px;padding:0}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none!important}.list-icon .selected,.list-icon .selected:hover{border-width:2px;border-style:solid}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NumberingComponent, decorators: [{
             type: Component,
@@ -16674,7 +17690,7 @@ class PrintComponent {
         this.print = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PrintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: PrintComponent, isStandalone: false, selector: "app-nod-print", outputs: { print: "print" }, ngImport: i0, template: "<button\n    mat-button\n    (click)=\"print.emit()\"\n    [matTooltip]=\"'NODER.TOOLTIP.PRINT' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-print\"></mat-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: PrintComponent, isStandalone: false, selector: "app-nod-print", outputs: { print: "print" }, ngImport: i0, template: "<button\n    mat-button\n    (click)=\"print.emit()\"\n    [matTooltip]=\"'NODER.TOOLTIP.PRINT' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-print\"></mat-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PrintComponent, decorators: [{
             type: Component,
@@ -16691,7 +17707,7 @@ class UndoRedoComponent {
         this.redo = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UndoRedoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: UndoRedoComponent, isStandalone: false, selector: "app-nod-undo-redo", inputs: { canUndo: "canUndo", canRedo: "canRedo" }, outputs: { undo: "undo", redo: "redo" }, ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"!canUndo\"\n    (click)=\"undo.emit()\"\n    [matTooltip]=\"'NODER.TOOLTIP.UNDO' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-undo\"></mat-icon>\n</button>\n<button\n    mat-button\n    [disabled]=\"!canRedo\"\n    (click)=\"redo.emit()\"\n    [matTooltip]=\"'NODER.TOOLTIP.REDO' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-redo\"></mat-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: UndoRedoComponent, isStandalone: false, selector: "app-nod-undo-redo", inputs: { canUndo: "canUndo", canRedo: "canRedo" }, outputs: { undo: "undo", redo: "redo" }, ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"!canUndo\"\n    (click)=\"undo.emit()\"\n    [matTooltip]=\"'NODER.TOOLTIP.UNDO' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-undo\"></mat-icon>\n</button>\n<button\n    mat-button\n    [disabled]=\"!canRedo\"\n    (click)=\"redo.emit()\"\n    [matTooltip]=\"'NODER.TOOLTIP.REDO' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-redo\"></mat-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UndoRedoComponent, decorators: [{
             type: Component,
@@ -16740,11 +17756,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\n        class=\"hidden\"\n        (print)=\"print.emit()\" />\n    <div class=\"separator\"></div>\n    <app-nod-font\n        [isDisabled]=\"data.isViewOnly\"\n        [styles]=\"styles\"\n        (selectFont)=\"onApplyFontFamily($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-size\n        [isDisabled]=\"data.isViewOnly\"\n        [fontSize]=\"styles.fontSize\"\n        (selectFontSize)=\"onApplyFontSize($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-style\n        [isDisabled]=\"data.isViewOnly\"\n        [bold]=\"styles.bold\"\n        [italic]=\"styles.italic\"\n        [underline]=\"styles.underline\"\n        [fontColor]=\"styles.fontColor\"\n        [highlightColor]=\"styles.highlightColor\"\n        (selectFontColor)=\"onApplyFontColor($event)\"\n        (toggleBold)=\"onApplyBold()\"\n        (toggleItalic)=\"onApplyItalic()\"\n        (toggleUnderline)=\"onApplyUnderline()\"\n        (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-format\n        [isDisabled]=\"data.isViewOnly\"\n        [alignment]=\"styles.alignment\"\n        (selectAlignment)=\"onApplyAlignment($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-numbering\n        [isDisabled]=\"data.isViewOnly\"\n        [selectedNumberingType]=\"numberingType\"\n        [selectedNumberingTemplate]=\"numberingTemplateType\"\n        (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n        (removeNumberings)=\"removeNumberings.emit()\" />\n    <div class=\"separator\"></div>\n    <div class=\"insert-buttons\">\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-image\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertImage.emit()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_IMAGE' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-image\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-table\"\n            [class.active-button]=\"showInsertTableMenu\"\n            [disabled]=\"data.isViewOnly\"\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_TABLE' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-link\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertLink.emit()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_LINK' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-link-on\" />\n        </button>\n    </div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"separator\"></div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"custom-elements\">\n        <button\n            *ngFor=\"let element of elements\"\n            mat-button\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"onCreateElement(element)\"\n            [matTooltip]=\"element.tooltip | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"{{ element.icon }}\"></mat-icon>\n        </button>\n    </div>\n</ng-container>\n<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-nod-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:2px solid;height:24px;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FontComponent, selector: "app-nod-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-nod-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FontStyleComponent, selector: "app-nod-font-style", inputs: ["isDisabled", "bold", "italic", "underline", "fontColor", "highlightColor"], outputs: ["toggleBold", "toggleItalic", "toggleUnderline", "selectFontColor", "selectHighlightColor"] }, { kind: "component", type: FormatComponent, selector: "app-nod-format", inputs: ["isDisabled", "alignment"], outputs: ["selectAlignment"] }, { kind: "component", type: NumberingComponent, selector: "app-nod-numbering", inputs: ["isDisabled", "selectedNumberingType", "selectedNumberingTemplate"], outputs: ["selectNumberingTemplate", "removeNumberings"] }, { kind: "component", type: PrintComponent, selector: "app-nod-print", outputs: ["print"] }, { kind: "component", type: UndoRedoComponent, selector: "app-nod-undo-redo", inputs: ["canUndo", "canRedo"], outputs: ["undo", "redo"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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: "@let isViewOnly = editorService.isViewOnly$ | async;\n@let isTableSelected = editorService.isTableSelected$ | async;\n<app-nod-undo-redo\n    [canUndo]=\"canUndo\"\n    [canRedo]=\"canRedo\"\n    (undo)=\"undo.emit()\"\n    (redo)=\"redo.emit()\" />\n<app-nod-print\n    class=\"hidden\"\n    (print)=\"print.emit()\" />\n<div class=\"separator\"></div>\n<app-nod-font\n    [isDisabled]=\"isViewOnly\"\n    [styles]=\"styles\"\n    (selectFont)=\"onApplyFontFamily($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-size\n    [isDisabled]=\"isViewOnly\"\n    [fontSize]=\"styles.fontSize\"\n    (selectFontSize)=\"onApplyFontSize($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-style\n    [isDisabled]=\"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]=\"isViewOnly\"\n    [alignment]=\"styles.alignment\"\n    (selectAlignment)=\"onApplyAlignment($event)\" />\n<div class=\"separator\"></div>\n<app-nod-numbering\n    [isDisabled]=\"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]=\"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]=\"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]=\"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@if (isTableSelected) {\n    <div class=\"separator\"></div>\n    <app-nod-table-borders\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorders)=\"updateTableBorders.emit($event)\" />\n    <app-nod-table-border-width\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\" />\n    <app-nod-table-border-style\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n}\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]=\"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<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-nod-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:2px solid;height:24px;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FontComponent, selector: "app-nod-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-nod-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TableBordersComponent, selector: "app-nod-table-borders", inputs: ["isDisabled"], outputs: ["updateTableBorders"] }, { kind: "component", type: TableBorderStyleComponent, selector: "app-nod-table-border-style", inputs: ["isDisabled"], outputs: ["updateTableBorderStyle"] }, { kind: "component", type: TableBorderWidthComponent, selector: "app-nod-table-border-width", inputs: ["isDisabled"], outputs: ["updateTableBorderWidth"] }, { 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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: 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\n        class=\"hidden\"\n        (print)=\"print.emit()\" />\n    <div class=\"separator\"></div>\n    <app-nod-font\n        [isDisabled]=\"data.isViewOnly\"\n        [styles]=\"styles\"\n        (selectFont)=\"onApplyFontFamily($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-size\n        [isDisabled]=\"data.isViewOnly\"\n        [fontSize]=\"styles.fontSize\"\n        (selectFontSize)=\"onApplyFontSize($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-style\n        [isDisabled]=\"data.isViewOnly\"\n        [bold]=\"styles.bold\"\n        [italic]=\"styles.italic\"\n        [underline]=\"styles.underline\"\n        [fontColor]=\"styles.fontColor\"\n        [highlightColor]=\"styles.highlightColor\"\n        (selectFontColor)=\"onApplyFontColor($event)\"\n        (toggleBold)=\"onApplyBold()\"\n        (toggleItalic)=\"onApplyItalic()\"\n        (toggleUnderline)=\"onApplyUnderline()\"\n        (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-format\n        [isDisabled]=\"data.isViewOnly\"\n        [alignment]=\"styles.alignment\"\n        (selectAlignment)=\"onApplyAlignment($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-numbering\n        [isDisabled]=\"data.isViewOnly\"\n        [selectedNumberingType]=\"numberingType\"\n        [selectedNumberingTemplate]=\"numberingTemplateType\"\n        (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n        (removeNumberings)=\"removeNumberings.emit()\" />\n    <div class=\"separator\"></div>\n    <div class=\"insert-buttons\">\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-image\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertImage.emit()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_IMAGE' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-image\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-table\"\n            [class.active-button]=\"showInsertTableMenu\"\n            [disabled]=\"data.isViewOnly\"\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_TABLE' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-link\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertLink.emit()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_LINK' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-link-on\" />\n        </button>\n    </div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"separator\"></div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"custom-elements\">\n        <button\n            *ngFor=\"let element of elements\"\n            mat-button\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"onCreateElement(element)\"\n            [matTooltip]=\"element.tooltip | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"{{ element.icon }}\"></mat-icon>\n        </button>\n    </div>\n</ng-container>\n<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-nod-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:2px solid;height:24px;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.hidden{display:none}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-toolbar-actions', standalone: false, template: "@let isViewOnly = editorService.isViewOnly$ | async;\n@let isTableSelected = editorService.isTableSelected$ | async;\n<app-nod-undo-redo\n    [canUndo]=\"canUndo\"\n    [canRedo]=\"canRedo\"\n    (undo)=\"undo.emit()\"\n    (redo)=\"redo.emit()\" />\n<app-nod-print\n    class=\"hidden\"\n    (print)=\"print.emit()\" />\n<div class=\"separator\"></div>\n<app-nod-font\n    [isDisabled]=\"isViewOnly\"\n    [styles]=\"styles\"\n    (selectFont)=\"onApplyFontFamily($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-size\n    [isDisabled]=\"isViewOnly\"\n    [fontSize]=\"styles.fontSize\"\n    (selectFontSize)=\"onApplyFontSize($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-style\n    [isDisabled]=\"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]=\"isViewOnly\"\n    [alignment]=\"styles.alignment\"\n    (selectAlignment)=\"onApplyAlignment($event)\" />\n<div class=\"separator\"></div>\n<app-nod-numbering\n    [isDisabled]=\"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]=\"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]=\"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]=\"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@if (isTableSelected) {\n    <div class=\"separator\"></div>\n    <app-nod-table-borders\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorders)=\"updateTableBorders.emit($event)\" />\n    <app-nod-table-border-width\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\" />\n    <app-nod-table-border-style\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n}\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]=\"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<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-nod-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:2px solid;height:24px;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.hidden{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CustomIconService }, { type: i0.Injector }, { type: EditorService }], propDecorators: { tableInsertMenu: [{
                 type: ViewChild,
                 args: ['tableInsert']
@@ -16806,13 +17822,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: i3.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.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$1.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: i3.TranslateService }], propDecorators: { openFileFromDisk: [{
                 type: Output
             }], createDocument: [{
                 type: Output
@@ -16859,13 +17875,16 @@ class EditorToolbarComponent {
         this.setNumberingTemplateType = new EventEmitter();
         this.removeNumberings = new EventEmitter();
         this.insertTable = new EventEmitter();
+        this.updateTableBorderStyle = new EventEmitter();
+        this.updateTableBorderWidth = new EventEmitter();
+        this.updateTableBorders = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorToolbarComponent, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorToolbarComponent, isStandalone: false, selector: "app-nod-editor-toolbar", outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", downloadPdf: "downloadPdf", print: "print", insertPageBreak: "insertPageBreak", createDocument: "createDocument", pageSetup: "pageSetup", insertImage: "insertImage", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", redo: "redo", undo: "undo", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected", insertLink: "insertLink", createElement: "createElement", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertTable: "insertTable" }, ngImport: i0, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", inputs: ["showFile", "showEdit", "showInsert", "showLayout", "showFormat"], outputs: ["openFileFromDisk", "saveAs", "downloadPdf", "insertPageBreak", "createDocument", "pageSetup", "rename", "delete", "openEditMenu", "cutSelected", "copySelected", "pasteClipboardData", "selectAll", "removeSelected"] }, { kind: "component", type: ToolbarActionsComponent, selector: "app-nod-toolbar-actions" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorToolbarComponent, isStandalone: false, selector: "app-nod-editor-toolbar", outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", downloadPdf: "downloadPdf", print: "print", insertPageBreak: "insertPageBreak", createDocument: "createDocument", pageSetup: "pageSetup", insertImage: "insertImage", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", redo: "redo", undo: "undo", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected", insertLink: "insertLink", createElement: "createElement", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertTable: "insertTable", updateTableBorderStyle: "updateTableBorderStyle", updateTableBorderWidth: "updateTableBorderWidth", updateTableBorders: "updateTableBorders" }, ngImport: i0, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\"\n    (updateTableBorders)=\"updateTableBorders.emit($event)\"\n    (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\"\n    (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", inputs: ["showFile", "showEdit", "showInsert", "showLayout", "showFormat"], outputs: ["openFileFromDisk", "saveAs", "downloadPdf", "insertPageBreak", "createDocument", "pageSetup", "rename", "delete", "openEditMenu", "cutSelected", "copySelected", "pasteClipboardData", "selectAll", "removeSelected"] }, { kind: "component", type: ToolbarActionsComponent, selector: "app-nod-toolbar-actions" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorToolbarComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-toolbar', standalone: false, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-toolbar', standalone: false, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\"\n    (updateTableBorders)=\"updateTableBorders.emit($event)\"\n    (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\"\n    (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: EditorService }], propDecorators: { openFileFromDisk: [{
                 type: Output
             }], addCustomElement: [{
@@ -16918,6 +17937,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Output
             }], insertTable: [{
                 type: Output
+            }], updateTableBorderStyle: [{
+                type: Output
+            }], updateTableBorderWidth: [{
+                type: Output
+            }], updateTableBorders: [{
+                type: Output
             }] } });
 
 class EditorToolbarService {
@@ -17004,7 +18029,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: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InsertTableMobileComponent, decorators: [{
             type: Component,
@@ -17105,7 +18130,7 @@ class TextFormatMobileComponent {
         this.styles = { ...this.styles, ...style };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TextFormatMobileComponent, deps: [{ token: CustomIconService }, { token: EditorService }, { token: ToolbarCoreService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TextFormatMobileComponent, isStandalone: true, selector: "app-nod-text-format-mobile", ngImport: i0, template: "<div class=\"content\">\n    <div class=\"content-container\">\n        <div class=\"title\">{{ 'NODER.LABEL.FONT' | translate }}</div>\n        <div class=\"font\">\n            <app-nod-font\n                [styles]=\"styles\"\n                (selectFont)=\"onApplyFontFamily($event)\" />\n            <app-nod-font-size\n                [fontSize]=\"styles.fontSize\"\n                (selectFontSize)=\"onApplyFontSize($event)\" />\n        </div>\n    </div>\n    <div class=\"content-container\">\n        <div class=\"title\">{{ 'NODER.LABEL.TEXT_STYLE' | translate }}</div>\n        <div class=\"text-style-container\">\n            <mat-button-toggle\n                [checked]=\"styles.bold\"\n                (click)=\"onToggleBold()\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bold\" />\n            </mat-button-toggle>\n            <mat-button-toggle\n                [checked]=\"styles.italic\"\n                (click)=\"onToggleItalic()\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-italic\" />\n            </mat-button-toggle>\n            <mat-button-toggle\n                [checked]=\"styles.underline\"\n                (click)=\"onToggleUnderline()\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-underlined\" />\n            </mat-button-toggle>\n            <app-nod-color-picker\n                id=\"icon-format-colortext\"\n                class=\"text-color\"\n                icon=\"icon-format-colortext\"\n                [color]=\"styles.fontColor\"\n                [palette]=\"textColorPalette\"\n                (colorChange)=\"onSelectFontColor($event)\" />\n            <app-nod-color-picker\n                id=\"icon-link-highlighter\"\n                class=\"highlight-color\"\n                icon=\"icon-link-highlighter\"\n                [color]=\"styles.highlightColor\"\n                [palette]=\"highlightColorPalette\"\n                (colorChange)=\"onSelectHighlightColor($event)\" />\n        </div>\n    </div>\n    <div class=\"content-container\">\n        <div class=\"title\">{{ 'NODER.LABEL.ALIGNMENT' | translate }}</div>\n        <mat-button-toggle-group\n            name=\"format\"\n            [hideMultipleSelectionIndicator]=\"true\"\n            [hideSingleSelectionIndicator]=\"true\"\n            [value]=\"styles.alignment\"\n            (change)=\"onApplyAlignment($event.value)\">\n            <mat-button-toggle [value]=\"alignments.Left\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-alignleft\"></mat-icon>\n            </mat-button-toggle>\n            <mat-button-toggle [value]=\"alignments.Center\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-aligncenter\"></mat-icon>\n            </mat-button-toggle>\n            <mat-button-toggle [value]=\"alignments.Right\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-alignright\"></mat-icon>\n            </mat-button-toggle>\n            <mat-button-toggle\n                class=\"hide\"\n                [value]=\"alignments.Justify\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-align\"></mat-icon>\n            </mat-button-toggle>\n        </mat-button-toggle-group>\n    </div>\n    <div class=\"content-container\">\n        <div class=\"title\">{{ 'NODER.LABEL.BULLETED_AND_NUMBERED_LIST' | translate }}</div>\n        <div class=\"numbering-container\">\n            <div class=\"numbering-line\">\n                <div\n                    class=\"empty-numbering\"\n                    [class.selected]=\"selectedNumberingTemplate === null\"\n                    (click)=\"selectedNumberingTemplate = null\">\n                    {{ 'NODER.LABEL.NONE' | translate }}\n                </div>\n                <mat-icon\n                    svgIcon=\"marker-1\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList1\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList1\" />\n                <mat-icon\n                    svgIcon=\"marker-2\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList2\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList2\" />\n                <mat-icon\n                    svgIcon=\"marker-3\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList3\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList3\" />\n            </div>\n            <div class=\"numbering-line\">\n                <mat-icon\n                    svgIcon=\"marker-4\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList4\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList4\" />\n                <mat-icon\n                    svgIcon=\"marker-5\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList5\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList5\" />\n                <mat-icon\n                    svgIcon=\"marker-6\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList6\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.BulletList6\" />\n                <mat-icon\n                    svgIcon=\"number-1\"\n                    class=\"list-number\"\n                    [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList1\"\n                    (click)=\"selectedNumberingTemplate = numberingTemplateType.NumberList1\" />\n            </div>\n        </div>\n    </div>\n</div>\n<div class=\"actions\">\n    <button\n        mat-mini-fab\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n    </button>\n    <button\n        mat-mini-fab\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;padding:30px;justify-content:space-between;overflow:hidden}.content-container{padding-bottom:30px}.title{font-size:16px;font-weight:500;padding-bottom:10px}.font{display:flex;justify-content:space-between}.numbering-container{display:flex;flex-direction:column}.numbering-container .mat-icon{width:102px;height:120px;border-width:1px;border-style:solid}app-nod-font{width:65%}app-nod-font ::ng-deep .mat-mdc-button{height:48px;width:100%}app-nod-font ::ng-deep .mat-mdc-button .mdc-button__label{width:100%}app-nod-font ::ng-deep .mat-mdc-button .font-menu span{padding-left:5px}app-nod-font ::ng-deep .mat-mdc-button .mat-icon{margin:0}app-nod-font-size{display:flex;align-items:center;width:30%;border:1px solid;border-radius:4px;margin:0}app-nod-font-size ::ng-deep .mdc-button.mat-mdc-button{border:none}app-nod-font-size ::ng-deep input{flex:1}mat-button-toggle-group{display:flex;justify-content:space-between;border:none;box-shadow:none}mat-button-toggle-group .mat-button-toggle{width:102px;height:48px;border:none}.text-style-container{display:flex;justify-content:space-between}.text-style-container ::ng-deep .mdc-button.mat-mdc-button{border:none}.text-style-container ::ng-deep .mat-button-toggle,.text-style-container ::ng-deep .mat-mdc-button{width:80px;height:48px;margin:0;border:none}.empty-numbering{display:flex;justify-content:center;align-items:center;text-transform:uppercase;font-size:13;font-weight:400;border-width:1px;border-style:solid;width:102px;height:120px}.numbering-line{display:flex;flex-direction:row;justify-content:space-between;padding-bottom:10px}.actions{text-align:end}.actions .mdc-fab:first-child{margin-right:10px}.hide{display:none}\n"], dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "app-nod-color-picker", inputs: ["color", "icon", "isDisabled", "palette", "tooltip"], outputs: ["colorChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: FontComponent, selector: "app-nod-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-nod-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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.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.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TextFormatMobileComponent, decorators: [{
             type: Component,
@@ -17173,7 +18198,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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ZoomComponent, decorators: [{
             type: Component,
@@ -17209,6 +18234,9 @@ class EditorToolbarModule {
             MatMenuModule,
             MatTooltipModule,
             ReactiveFormsModule,
+            TableBordersComponent,
+            TableBorderStyleComponent,
+            TableBorderWidthComponent,
             TextFormatMobileComponent,
             TranslateModule], exports: [EditorMobileToolbarComponent,
             EditorToolbarComponent,
@@ -17229,6 +18257,9 @@ class EditorToolbarModule {
             MatMenuModule,
             MatTooltipModule,
             ReactiveFormsModule,
+            TableBordersComponent,
+            TableBorderStyleComponent,
+            TableBorderWidthComponent,
             TextFormatMobileComponent,
             TranslateModule] }); }
 }
@@ -17263,6 +18294,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         MatMenuModule,
                         MatTooltipModule,
                         ReactiveFormsModule,
+                        TableBordersComponent,
+                        TableBorderStyleComponent,
+                        TableBorderWidthComponent,
                         TextFormatMobileComponent,
                         TranslateModule
                     ],
@@ -17694,8 +18728,8 @@ class PageSetupComponent {
         });
         return customPageSize;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PageSetupComponent, deps: [{ token: EditorService }, { token: ToolbarCoreService }, { token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PageSetupComponent, isStandalone: true, selector: "app-nod-page-setup", viewQueries: [{ propertyName: "pageSizeForm", first: true, predicate: ["pageSizeForm"], descendants: true }], ngImport: i0, template: "<div class=\"title\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        (click)=\"onClose()\"\n        fontIcon=\"icon-arrow-forward\" />\n    <span>{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n</div>\n<form #pageSizeForm=\"ngForm\">\n    <div class=\"content\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.APPLY_TO' | translate }}</mat-label>\n            <mat-select [(value)]=\"selectedDocumentArea\">\n                <mat-option [value]=\"documentAreas.WholeDocument\">{{ 'NODER.LABEL.WHOLE_DOCUMENT' | translate }}</mat-option>\n                <mat-option [value]=\"documentAreas.ThisSection\">{{ 'NODER.LABEL.THIS_SECTION' | translate }}</mat-option>\n                @if (hasSelection$ | async) {\n                    <mat-option [value]=\"documentAreas.SelectedText\">{{ 'NODER.LABEL.SELECTED_TEXT' | translate }}</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n        <div class=\"orientation\">\n            <div class=\"label\">{{ 'NODER.LABEL.ORIENTATION' | translate }}</div>\n            <mat-radio-group\n                aria-label=\"Select an option\"\n                [(ngModel)]=\"pageSize.orientation\"\n                name=\"orientation\"\n                (change)=\"onPageOrientationChanged()\">\n                <mat-radio-button [value]=\"pageOrientations.Portrait\">\n                    <span>{{ 'NODER.LABEL.PORTRAIT' | translate }}</span>\n                </mat-radio-button>\n                <mat-radio-button [value]=\"pageOrientations.Landscape\">\n                    <span>{{ 'NODER.LABEL.LANDSCAPE' | translate }}</span>\n                </mat-radio-button>\n            </mat-radio-group>\n        </div>\n        <div class=\"page-format\">\n            <div class=\"page-format-tile\">\n                <div class=\"label\">{{ 'NODER.LABEL.PAGE_FORMAT' | translate }}</div>\n                <div class=\"checkbox-area\">\n                    <div class=\"checkbox-label\">{{ 'NODER.LABEL.CUSTOM_SIZE' | translate }}</div>\n                    <mat-checkbox\n                        [checked]=\"pageSize.isCustom\"\n                        (change)=\"toggleCustomSize($event)\" />\n                </div>\n            </div>\n            @if (!pageSize.isCustom) {\n                <div class=\"page-size\">\n                    <mat-form-field appearance=\"outline\">\n                        <mat-label>{{ 'NODER.LABEL.SIZE' | translate }}</mat-label>\n                        <mat-select\n                            [(value)]=\"pageSizeName\"\n                            (selectionChange)=\"onPageSizeChange()\">\n                            @for (option of pageSizes; track option) {\n                                <mat-option [value]=\"option.name\">\n                                    <div class=\"size-option\">\n                                        <span class=\"option-name\">{{ option.name + ' ' }}</span>\n                                        <span class=\"option-size\">{{ option.size }}</span>\n                                    </div>\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n            } @else {\n                <div class=\"page-custom-size\">\n                    <mat-form-field\n                        appearance=\"outline\"\n                        class=\"size-unit\">\n                        <mat-label>{{ 'NODER.LABEL.MEASURE' | translate }}</mat-label>\n                        <mat-select\n                            [(ngModel)]=\"pageSize.unit\"\n                            name=\"unit\"\n                            (valueChange)=\"onUnitChanged($event)\">\n                            <mat-option [value]=\"sizeUnits.Millimeters\">{{ 'NODER.LABEL.MILLIMETERS' | translate }}</mat-option>\n                            <mat-option [value]=\"sizeUnits.Inches\">{{ 'NODER.LABEL.INCHES' | translate }}</mat-option>\n                        </mat-select>\n                    </mat-form-field>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-width\">\n                            <mat-label>{{ ('NODER.LABEL.WIDTH' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customWidth\"\n                                name=\"customWidth\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-height\">\n                            <mat-label>{{ ('NODER.LABEL.HEIGHT' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customHeight\"\n                                name=\"customHeight\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n    <div class=\"actions\">\n        <button\n            mat-stroked-button\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-cancel-thin\" />\n        </button>\n        <button\n            mat-flat-button\n            color=\"primary\"\n            (click)=\"onApply()\"\n            [disabled]=\"pageSizeForm.pristine\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-done-thin\" />\n        </button>\n    </div>\n</form>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:400px}.title{margin:12px 16px;height:32px;display:flex;align-items:center;gap:8px}.title span{overflow:hidden;text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:normal}.content{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:8px 16px 0;gap:24px}.actions{display:flex;justify-content:flex-end;margin:0 16px 16px;gap:10px}.actions .mdc-button{width:32px;height:32px;min-width:32px;padding:0}.actions .mdc-button .mat-icon{margin-right:0;margin-left:0}.orientation{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.orientation mat-radio-group{display:flex;width:100%;gap:16px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.page-format{display:flex;flex-direction:column;gap:16px}.page-format-tile{display:flex;align-items:center;justify-content:space-between}.page-format-tile .checkbox-area{display:flex;align-items:center}.checkbox-label{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.custom-width,.custom-height,.size-unit{width:120px}.page-custom-size{display:flex;flex-direction:column}.size-panel{display:flex;gap:10px}.size-panel .mdc-button{width:40px;height:40px;min-width:40px;padding:0}.size-panel .mdc-button .mat-icon{margin-right:0;margin-left:0}.size-option{display:flex;flex-direction:column}.option-name{font-weight:400}.option-size{font-size:12px}form{display:flex;flex-direction:column;flex:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PageSetupComponent, deps: [{ token: EditorService }, { token: ToolbarCoreService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PageSetupComponent, isStandalone: true, selector: "app-nod-page-setup", viewQueries: [{ propertyName: "pageSizeForm", first: true, predicate: ["pageSizeForm"], descendants: true }], ngImport: i0, template: "<div class=\"title\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        (click)=\"onClose()\"\n        fontIcon=\"icon-arrow-forward\" />\n    <span>{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n</div>\n<form #pageSizeForm=\"ngForm\">\n    <div class=\"content\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.APPLY_TO' | translate }}</mat-label>\n            <mat-select [(value)]=\"selectedDocumentArea\">\n                <mat-option [value]=\"documentAreas.WholeDocument\">{{ 'NODER.LABEL.WHOLE_DOCUMENT' | translate }}</mat-option>\n                <mat-option [value]=\"documentAreas.ThisSection\">{{ 'NODER.LABEL.THIS_SECTION' | translate }}</mat-option>\n                @if (hasSelection$ | async) {\n                    <mat-option [value]=\"documentAreas.SelectedText\">{{ 'NODER.LABEL.SELECTED_TEXT' | translate }}</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n        <div class=\"orientation\">\n            <div class=\"label\">{{ 'NODER.LABEL.ORIENTATION' | translate }}</div>\n            <mat-radio-group\n                aria-label=\"Select an option\"\n                [(ngModel)]=\"pageSize.orientation\"\n                name=\"orientation\"\n                (change)=\"onPageOrientationChanged()\">\n                <mat-radio-button [value]=\"pageOrientations.Portrait\">\n                    <span>{{ 'NODER.LABEL.PORTRAIT' | translate }}</span>\n                </mat-radio-button>\n                <mat-radio-button [value]=\"pageOrientations.Landscape\">\n                    <span>{{ 'NODER.LABEL.LANDSCAPE' | translate }}</span>\n                </mat-radio-button>\n            </mat-radio-group>\n        </div>\n        <div class=\"page-format\">\n            <div class=\"page-format-tile\">\n                <div class=\"label\">{{ 'NODER.LABEL.PAGE_FORMAT' | translate }}</div>\n                <div class=\"checkbox-area\">\n                    <div class=\"checkbox-label\">{{ 'NODER.LABEL.CUSTOM_SIZE' | translate }}</div>\n                    <mat-checkbox\n                        [checked]=\"pageSize.isCustom\"\n                        (change)=\"toggleCustomSize($event)\" />\n                </div>\n            </div>\n            @if (!pageSize.isCustom) {\n                <div class=\"page-size\">\n                    <mat-form-field appearance=\"outline\">\n                        <mat-label>{{ 'NODER.LABEL.SIZE' | translate }}</mat-label>\n                        <mat-select\n                            [(value)]=\"pageSizeName\"\n                            (selectionChange)=\"onPageSizeChange()\">\n                            @for (option of pageSizes; track option) {\n                                <mat-option [value]=\"option.name\">\n                                    <div class=\"size-option\">\n                                        <span class=\"option-name\">{{ option.name + ' ' }}</span>\n                                        <span class=\"option-size\">{{ option.size }}</span>\n                                    </div>\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n            } @else {\n                <div class=\"page-custom-size\">\n                    <mat-form-field\n                        appearance=\"outline\"\n                        class=\"size-unit\">\n                        <mat-label>{{ 'NODER.LABEL.MEASURE' | translate }}</mat-label>\n                        <mat-select\n                            [(ngModel)]=\"pageSize.unit\"\n                            name=\"unit\"\n                            (valueChange)=\"onUnitChanged($event)\">\n                            <mat-option [value]=\"sizeUnits.Millimeters\">{{ 'NODER.LABEL.MILLIMETERS' | translate }}</mat-option>\n                            <mat-option [value]=\"sizeUnits.Inches\">{{ 'NODER.LABEL.INCHES' | translate }}</mat-option>\n                        </mat-select>\n                    </mat-form-field>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-width\">\n                            <mat-label>{{ ('NODER.LABEL.WIDTH' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customWidth\"\n                                name=\"customWidth\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-height\">\n                            <mat-label>{{ ('NODER.LABEL.HEIGHT' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customHeight\"\n                                name=\"customHeight\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n    <div class=\"actions\">\n        <button\n            mat-stroked-button\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-cancel-thin\" />\n        </button>\n        <button\n            mat-flat-button\n            color=\"primary\"\n            (click)=\"onApply()\"\n            [disabled]=\"pageSizeForm.pristine\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-done-thin\" />\n        </button>\n    </div>\n</form>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:400px}.title{margin:12px 16px;height:32px;display:flex;align-items:center;gap:8px}.title span{overflow:hidden;text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:normal}.content{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:8px 16px 0;gap:24px}.actions{display:flex;justify-content:flex-end;margin:0 16px 16px;gap:10px}.actions .mdc-button{width:32px;height:32px;min-width:32px;padding:0}.actions .mdc-button .mat-icon{margin-right:0;margin-left:0}.orientation{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.orientation mat-radio-group{display:flex;width:100%;gap:16px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.page-format{display:flex;flex-direction:column;gap:16px}.page-format-tile{display:flex;align-items:center;justify-content:space-between}.page-format-tile .checkbox-area{display:flex;align-items:center}.checkbox-label{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.custom-width,.custom-height,.size-unit{width:120px}.page-custom-size{display:flex;flex-direction:column}.size-panel{display:flex;gap:10px}.size-panel .mdc-button{width:40px;height:40px;min-width:40px;padding:0}.size-panel .mdc-button .mat-icon{margin-right:0;margin-left:0}.size-option{display:flex;flex-direction:column}.option-name{font-weight:400}.option-size{font-size:12px}form{display:flex;flex-direction:column;flex:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PageSetupComponent, decorators: [{
             type: Component,
@@ -17711,16 +18745,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         FormsModule,
                         MatRadioModule
                     ], selector: 'app-nod-page-setup', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"title\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        (click)=\"onClose()\"\n        fontIcon=\"icon-arrow-forward\" />\n    <span>{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n</div>\n<form #pageSizeForm=\"ngForm\">\n    <div class=\"content\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.APPLY_TO' | translate }}</mat-label>\n            <mat-select [(value)]=\"selectedDocumentArea\">\n                <mat-option [value]=\"documentAreas.WholeDocument\">{{ 'NODER.LABEL.WHOLE_DOCUMENT' | translate }}</mat-option>\n                <mat-option [value]=\"documentAreas.ThisSection\">{{ 'NODER.LABEL.THIS_SECTION' | translate }}</mat-option>\n                @if (hasSelection$ | async) {\n                    <mat-option [value]=\"documentAreas.SelectedText\">{{ 'NODER.LABEL.SELECTED_TEXT' | translate }}</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n        <div class=\"orientation\">\n            <div class=\"label\">{{ 'NODER.LABEL.ORIENTATION' | translate }}</div>\n            <mat-radio-group\n                aria-label=\"Select an option\"\n                [(ngModel)]=\"pageSize.orientation\"\n                name=\"orientation\"\n                (change)=\"onPageOrientationChanged()\">\n                <mat-radio-button [value]=\"pageOrientations.Portrait\">\n                    <span>{{ 'NODER.LABEL.PORTRAIT' | translate }}</span>\n                </mat-radio-button>\n                <mat-radio-button [value]=\"pageOrientations.Landscape\">\n                    <span>{{ 'NODER.LABEL.LANDSCAPE' | translate }}</span>\n                </mat-radio-button>\n            </mat-radio-group>\n        </div>\n        <div class=\"page-format\">\n            <div class=\"page-format-tile\">\n                <div class=\"label\">{{ 'NODER.LABEL.PAGE_FORMAT' | translate }}</div>\n                <div class=\"checkbox-area\">\n                    <div class=\"checkbox-label\">{{ 'NODER.LABEL.CUSTOM_SIZE' | translate }}</div>\n                    <mat-checkbox\n                        [checked]=\"pageSize.isCustom\"\n                        (change)=\"toggleCustomSize($event)\" />\n                </div>\n            </div>\n            @if (!pageSize.isCustom) {\n                <div class=\"page-size\">\n                    <mat-form-field appearance=\"outline\">\n                        <mat-label>{{ 'NODER.LABEL.SIZE' | translate }}</mat-label>\n                        <mat-select\n                            [(value)]=\"pageSizeName\"\n                            (selectionChange)=\"onPageSizeChange()\">\n                            @for (option of pageSizes; track option) {\n                                <mat-option [value]=\"option.name\">\n                                    <div class=\"size-option\">\n                                        <span class=\"option-name\">{{ option.name + ' ' }}</span>\n                                        <span class=\"option-size\">{{ option.size }}</span>\n                                    </div>\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n            } @else {\n                <div class=\"page-custom-size\">\n                    <mat-form-field\n                        appearance=\"outline\"\n                        class=\"size-unit\">\n                        <mat-label>{{ 'NODER.LABEL.MEASURE' | translate }}</mat-label>\n                        <mat-select\n                            [(ngModel)]=\"pageSize.unit\"\n                            name=\"unit\"\n                            (valueChange)=\"onUnitChanged($event)\">\n                            <mat-option [value]=\"sizeUnits.Millimeters\">{{ 'NODER.LABEL.MILLIMETERS' | translate }}</mat-option>\n                            <mat-option [value]=\"sizeUnits.Inches\">{{ 'NODER.LABEL.INCHES' | translate }}</mat-option>\n                        </mat-select>\n                    </mat-form-field>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-width\">\n                            <mat-label>{{ ('NODER.LABEL.WIDTH' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customWidth\"\n                                name=\"customWidth\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-height\">\n                            <mat-label>{{ ('NODER.LABEL.HEIGHT' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customHeight\"\n                                name=\"customHeight\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n    <div class=\"actions\">\n        <button\n            mat-stroked-button\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-cancel-thin\" />\n        </button>\n        <button\n            mat-flat-button\n            color=\"primary\"\n            (click)=\"onApply()\"\n            [disabled]=\"pageSizeForm.pristine\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-done-thin\" />\n        </button>\n    </div>\n</form>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:400px}.title{margin:12px 16px;height:32px;display:flex;align-items:center;gap:8px}.title span{overflow:hidden;text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:normal}.content{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:8px 16px 0;gap:24px}.actions{display:flex;justify-content:flex-end;margin:0 16px 16px;gap:10px}.actions .mdc-button{width:32px;height:32px;min-width:32px;padding:0}.actions .mdc-button .mat-icon{margin-right:0;margin-left:0}.orientation{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.orientation mat-radio-group{display:flex;width:100%;gap:16px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.page-format{display:flex;flex-direction:column;gap:16px}.page-format-tile{display:flex;align-items:center;justify-content:space-between}.page-format-tile .checkbox-area{display:flex;align-items:center}.checkbox-label{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.custom-width,.custom-height,.size-unit{width:120px}.page-custom-size{display:flex;flex-direction:column}.size-panel{display:flex;gap:10px}.size-panel .mdc-button{width:40px;height:40px;min-width:40px;padding:0}.size-panel .mdc-button .mat-icon{margin-right:0;margin-left:0}.size-option{display:flex;flex-direction:column}.option-name{font-weight:400}.option-size{font-size:12px}form{display:flex;flex-direction:column;flex:1}\n"] }]
-        }], ctorParameters: () => [{ type: EditorService }, { type: ToolbarCoreService }, { type: i3$1.TranslateService }], propDecorators: { pageSizeForm: [{
+        }], ctorParameters: () => [{ type: EditorService }, { type: ToolbarCoreService }, { type: i3.TranslateService }], propDecorators: { pageSizeForm: [{
                 type: ViewChild,
                 args: ['pageSizeForm']
             }] } });
 
 class RevisionHelper {
-    static applyOperationsToRevision(revision, operations) {
+    static applyOperationsToRevision(content, operations) {
         operations.sort((a, b) => a.createTime - b.createTime);
         const actions = operations.map(x => x.command);
-        OperationsHelper.applyOperations(revision.content, actions);
+        OperationsHelper.applyOperations(content, actions);
     }
     static fillTablesDefaultStyles(tables) {
         for (const table of tables) {
@@ -17847,7 +18881,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$1.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$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkDialogComponent, decorators: [{
             type: Component,
@@ -17896,7 +18930,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: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AddLinkMobileComponent, isStandalone: true, selector: "app-nod-add-link-mobile", ngImport: i0, template: "<div class=\"content\">\n    <div class=\"title\">{{ 'NODER.LABEL.LINK_OPTIONS' | translate }}</div>\n    <div\n        class=\"inputs\"\n        [formGroup]=\"form\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.TEXT' | translate }}</mat-label>\n            <input\n                matInput\n                [formControl]=\"form.controls.text\"\n                (keydown.enter)=\"onEnter()\"\n                required />\n            <mat-error>{{ 'NODER.LABEL.THE_TEXT_IS_REQUIRED' | translate }}.</mat-error>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.LINK' | translate }}</mat-label>\n            <input\n                matInput\n                [formControl]=\"form.controls.link\"\n                (keydown.enter)=\"onEnter()\"\n                required />\n            <mat-error>{{ 'NODER.LABEL.THE_LINK_IS_REQUIRED' | translate }}.</mat-error>\n        </mat-form-field>\n    </div>\n</div>\n<div class=\"actions\">\n    <button\n        mat-mini-fab\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n    </button>\n    <button\n        mat-mini-fab\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;padding:30px;justify-content:space-between;overflow:hidden}:host ::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 12px;height:48px}:host ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:12px}.title{font-size:16px;font-weight:500}mat-form-field{width:100%}.inputs{padding-top:10px;padding-bottom:0}.actions{text-align:end}.actions .mdc-fab:first-child{margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkMobileComponent, decorators: [{
             type: Component,
@@ -17913,7 +18947,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$1.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.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.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
@@ -17996,5 +19030,5 @@ class OperationModel {
  * Generated bundle index. Do not edit.
  */
 
-export { AddLinkDialogComponent, AddLinkMobileComponent, Alignment, BaseNoderComponent, BreakTypes, CommandModel, CommandType, CommandsService, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_STYLES, DefaultImageApiService, DestroyComponent, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorMobileToolbarComponent, EditorModule, EditorService, EditorTitleComponent, EditorTitleMobileComponent, EditorToolbarComponent, EditorToolbarMode, EditorToolbarModule, EditorToolbarService, ElementDataModel, ElementModel, ExternalComponent, ExternalElementModel, ExternalElementService, FileSourceModel, FontMetrics, FormatStyleHelper, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, MenuDropdownsComponent, MenuDropdownsMobileComponent, Mode, NEW_LINE_MARKUP, NoderTranslateLoader, NumberingLevelModel, OperationModel, OperationsHistoryInfoModel, PageSetupComponent, PageType, ParagraphStyleModel, RevisionHelper, RevisionModel, SearchResultLocation, TextFormatMobileComponent, TextStyleModel, ToolbarActionsComponent };
+export { AddLinkDialogComponent, AddLinkMobileComponent, Alignment, BaseNoderComponent, BreakTypes, CommandModel, CommandType, CommandsService, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_STYLES, DefaultImageApiService, DestroyComponent, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorMobileToolbarComponent, EditorModule, EditorService, EditorTitleComponent, EditorTitleMobileComponent, EditorToolbarComponent, EditorToolbarMode, EditorToolbarModule, EditorToolbarService, ElementDataModel, ElementModel, ExternalComponent, ExternalElementModel, ExternalElementService, FileSourceModel, FontMetrics, FormatStyleHelper, GrammarService, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, MenuDropdownsComponent, MenuDropdownsMobileComponent, Mode, NEW_LINE_MARKUP, NoderTranslateLoader, NumberingLevelModel, OperationModel, OperationsHistoryInfoModel, PageSetupComponent, PageType, ParagraphStyleModel, RevisionHelper, RevisionModel, SearchResultLocation, TextFormatMobileComponent, TextStyleModel, ToolbarActionsComponent };
 //# sourceMappingURL=talrace-ngx-noder.mjs.map