@talrace/ngx-noder 19.0.36 → 19.0.38

package/fesm2022/talrace-ngx-noder.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Injectable, signal, inject, ChangeDetectorRef, HostBinding, Input, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, createComponent, EventEmitter, Output, HostListener, ApplicationRef, Injector, Inject, input, computed, effect, NgModule } from '@angular/core';
+import { Directive, Injectable, signal, inject, ChangeDetectorRef, HostBinding, Input, InjectionToken, Component, ChangeDetectionStrategy, Inject, ViewChild, createComponent, EventEmitter, Output, HostListener, ApplicationRef, Injector, input, computed, effect, NgModule, output } from '@angular/core';
 import { Subject, BehaviorSubject, distinctUntilChanged, debounceTime, filter, fromEvent, take, throttleTime, startWith, takeUntil, tap, map, catchError } from 'rxjs';
 import * as i1$2 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
@@ -10,26 +10,26 @@ 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 i3 from '@ngx-translate/core';
+import * as i5$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i6 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i3$1 from '@angular/common';
+import * as i3 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 i6 from '@angular/material/input';
+import * as i6$1 from '@angular/material/input';
 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 i5$1 from '@angular/material/form-field';
+import * as i5$2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i6$1 from '@angular/cdk/clipboard';
+import * as i6$2 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 i3$1 from '@angular/material/core';
 import * as i10 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import * as i4$1 from '@angular/material/menu';
@@ -45,7 +45,7 @@ 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 * as i3$2 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i10$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -530,11 +530,7 @@ class FontMetrics {
         return {
             width: textMetrics.width,
             height: textMetrics.fontBoundingBoxAscent + textMetrics.fontBoundingBoxDescent,
-            baseline: fontBaseLine.baseline,
-            content: fontBaseLine.content,
             font: fontBaseLine.font,
-            line: fontBaseLine.line,
-            multiplier: fontBaseLine.multiplier,
             ascent: textMetrics.fontBoundingBoxAscent,
             descent: textMetrics.fontBoundingBoxDescent
         };
@@ -678,6 +674,9 @@ class EditorService {
         this._updateTableBorderStyle$ = new Subject();
         this._updateTableBorderWidth$ = new Subject();
         this._updateTableBorders$ = new Subject();
+        this._selectSpacing$ = new Subject();
+        this._selectBefore$ = new Subject();
+        this._selectAfter$ = new Subject();
         this._isTableSelected$ = new BehaviorSubject(false);
         this._redo$ = new Subject();
         this._undo$ = new Subject();
@@ -717,6 +716,8 @@ class EditorService {
         this._removeComment$ = new Subject();
         this._setCommentSelected$ = new Subject();
         this._setCommentsVisibility$ = new Subject();
+        this._getCommentText$ = new Subject();
+        this._replaceCommentText$ = new Subject();
     }
     set styles(value) {
         this._styles$.next({ ...value });
@@ -877,6 +878,15 @@ class EditorService {
     get updateTableBorders$() {
         return this._updateTableBorders$.asObservable();
     }
+    get selectSpacing$() {
+        return this._selectSpacing$.asObservable();
+    }
+    get selectBefore$() {
+        return this._selectBefore$.asObservable();
+    }
+    get selectAfter$() {
+        return this._selectAfter$.asObservable();
+    }
     get isTableSelected() {
         return this._isTableSelected$.value;
     }
@@ -1001,6 +1011,12 @@ class EditorService {
     get setCommentsVisibility$() {
         return this._setCommentsVisibility$.asObservable();
     }
+    get getCommentText$() {
+        return this._getCommentText$.asObservable();
+    }
+    get replaceCommentText$() {
+        return this._replaceCommentText$.asObservable();
+    }
     tabSettings(value) {
         this._tabSettings$.next(value);
     }
@@ -1158,6 +1174,15 @@ class EditorService {
     updateTableBorders(borders) {
         this._updateTableBorders$.next(borders);
     }
+    selectSpacing(value) {
+        this._selectSpacing$.next(value);
+    }
+    selectBefore(value) {
+        this._selectBefore$.next(value);
+    }
+    selectAfter(value) {
+        this._selectAfter$.next(value);
+    }
     setIsTableSelected(value) {
         if (this.isTableSelected === value) {
             return;
@@ -1248,14 +1273,14 @@ class EditorService {
     ignoreGrammarSuggestion(error) {
         this._ignoreGrammarError$.next(error);
     }
-    addCommentAtSelection() {
-        this._addCommentAtSelection$.next();
+    addCommentAtSelection(commentType) {
+        this._addCommentAtSelection$.next(commentType);
     }
     commentSizeChanged() {
         this._commentSizeChanged$.next();
     }
-    createComment(reqId) {
-        this._createComment$.next(reqId);
+    createComment(reqId, commentType) {
+        this._createComment$.next({ reqId, commentType });
     }
     commentCreated(commentId, reqId) {
         this._commentCreated$.next({ commentId, reqId });
@@ -1269,6 +1294,12 @@ class EditorService {
     setCommentsVisibility(value) {
         this._setCommentsVisibility$.next(value);
     }
+    getCommentText(commentId, continueWith) {
+        this._getCommentText$.next({ commentId, continueWith });
+    }
+    replaceCommentText(commentId, content) {
+        this._replaceCommentText$.next({ commentId, newContent: content });
+    }
     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 }); }
 }
@@ -1347,6 +1378,10 @@ class ExternalComponent extends BaseNoderComponent {
     constructor() {
         super(...arguments);
         this.focusSidenav = true;
+        this.isText = false;
+    }
+    getText() {
+        return '';
     }
     skipSidenav() {
         return this.editorService.isViewOnly;
@@ -1443,6 +1478,14 @@ class BaseCommentComponent {
     }
 }
 
+class CommentTypeModel {
+    constructor(typeId, nameTranslated, icon) {
+        this.typeId = typeId;
+        this.nameTranslated = nameTranslated;
+        this.icon = icon;
+    }
+}
+
 class GrammarService {
     constructor() {
         this.debounceTime = 3000;
@@ -1703,11 +1746,11 @@ const CUSTOM_ELEMENT_MARKER = '*';
 const TABLE_MARKER = '#';
 
 class BreakHelper {
-    static getBreakType(model, char, insertIndex) {
+    static getBreakType(breaks, char, insertIndex) {
         if (char !== CUSTOM_ELEMENT_MARKER) {
             return null;
         }
-        return model.breaks.find(x => x.insertIndex === insertIndex)?.breakType ?? null;
+        return breaks.find(x => x.insertIndex === insertIndex)?.breakType ?? null;
     }
     static removeBreakMarker(breaks, text, fragmentStartIndex) {
         const index = text.at(-1) === NEW_LINE_MARKUP ? -2 : -1;
@@ -1718,6 +1761,8 @@ class BreakHelper {
     }
 }
 
+const COMMENT_TYPES = new InjectionToken('COMMENT_TYPES');
+
 class OverlayService {
     constructor(overlay) {
         this.overlay = overlay;
@@ -1778,21 +1823,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }], ctorParameters: () => [{ type: i1.Overlay }] });
 
 class CommentPopupComponent {
-    constructor(editorService, overlayService) {
+    constructor(editorService, overlayService, commentTypes) {
         this.editorService = editorService;
         this.overlayService = overlayService;
+        this.commentTypes = commentTypes;
     }
-    addComment() {
-        this.editorService.addCommentAtSelection();
+    addComment(type) {
+        this.editorService.addCommentAtSelection(type);
         this.overlayService.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CommentPopupComponent, deps: [{ token: EditorService }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: CommentPopupComponent, isStandalone: false, selector: "app-nod-comment-popup", ngImport: i0, template: "<button\n    mat-stroked-button\n    (click)=\"addComment()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-comment\"></mat-icon>\n</button>\n", styles: [":host{min-height:30px;border-radius:8px}button{min-width:0}.mat-icon{display:flex;justify-content:center;align-items:center;margin:0}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CommentPopupComponent, deps: [{ token: EditorService }, { token: OverlayService }, { token: COMMENT_TYPES }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: CommentPopupComponent, isStandalone: false, selector: "app-nod-comment-popup", ngImport: i0, template: "@for (type of commentTypes; track type.typeId) {\n    <button\n        mat-stroked-button\n        [matTooltip]=\"type.nameTranslated | translate\"\n        (click)=\"addComment(type)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            [fontIcon]=\"type.icon\"></mat-icon>\n    </button>\n}\n", styles: [":host{min-height:30px;border-radius:8px;display:flex;flex-direction:column}button{min-width:0;border-radius:0;border-style:none}button:not(:last-child){border-bottom-style:solid;border-bottom-width:1px}button:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}button:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.mat-icon{display:flex;justify-content:center;align-items:center;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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CommentPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nod-comment-popup', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button\n    mat-stroked-button\n    (click)=\"addComment()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-comment\"></mat-icon>\n</button>\n", styles: [":host{min-height:30px;border-radius:8px}button{min-width:0}.mat-icon{display:flex;justify-content:center;align-items:center;margin:0}\n"] }]
-        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }] });
+            args: [{ selector: 'app-nod-comment-popup', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@for (type of commentTypes; track type.typeId) {\n    <button\n        mat-stroked-button\n        [matTooltip]=\"type.nameTranslated | translate\"\n        (click)=\"addComment(type)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            [fontIcon]=\"type.icon\"></mat-icon>\n    </button>\n}\n", styles: [":host{min-height:30px;border-radius:8px;display:flex;flex-direction:column}button{min-width:0;border-radius:0;border-style:none}button:not(:last-child){border-bottom-style:solid;border-bottom-width:1px}button:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}button:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.mat-icon{display:flex;justify-content:center;align-items:center;margin:0}\n"] }]
+        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [COMMENT_TYPES]
+                }] }] });
 
 class CursorParagraph {
     constructor(row, column) {
@@ -2009,7 +2058,7 @@ class GrammarPopupComponent {
         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 }); }
+    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: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarPopupComponent, decorators: [{
             type: Component,
@@ -2905,7 +2954,7 @@ class RangeElementHelper {
                     element.endIndex -= length;
                 }
                 else {
-                    element.endIndex = startIndex;
+                    element.endIndex = startIndex - 1;
                 }
                 continue;
             }
@@ -2914,7 +2963,8 @@ class RangeElementHelper {
                     elements.splice(i, 1);
                     continue;
                 }
-                element.startIndex = endIndex;
+                element.startIndex -= element.startIndex - startIndex;
+                element.endIndex -= endIndex - element.startIndex;
                 continue;
             }
             element.startIndex -= length;
@@ -5950,24 +6000,191 @@ class PageHelper {
     }
 }
 
-const DisplayValue = {
-    char: 1,
-    customContent: 3,
-    punctuation: 9,
-    space: 10,
-    trailingSpace: 11,
-    emptyLine: 13
-};
+class NumberingDataModel {
+    constructor(fields) {
+        if (!fields) {
+            return;
+        }
+        Object.assign(this, fields);
+    }
+}
+
+class NumberingParagraphStyleModel extends ParagraphStyleModel {
+    constructor(fields) {
+        super();
+        this.numberingType = null;
+        this.numberingLevelsStyles = null;
+        if (!fields) {
+            return;
+        }
+        Object.assign(this, fields);
+    }
+}
 
-class LineWidthHelper {
-    static getParagraphLineDisplayTokens(session, paragraphIndex, lineIndex) {
-        const docPos = session.displayData.positionToIndex(new CursorParagraph(paragraphIndex, 0), 0);
-        const rowWrap = session.displayData.paragraphs[paragraphIndex]?.nextLineIndexes || [];
-        const startWrapIndex = lineIndex > 0 ? rowWrap[lineIndex - 1] : 0;
-        const endIndex = rowWrap[lineIndex];
-        const docLine = session.displayData.getParagraphContent(paragraphIndex);
-        const offset = startWrapIndex ? docPos + startWrapIndex : docPos;
-        return session.displayData.getLineTokens(session.model, docLine.substring(startWrapIndex, endIndex || undefined), offset);
+class NumberingHelper {
+    static addValueToNumberingInfo(numberingId, numberingInfo, numberingLevels) {
+        if (numberingInfo[numberingId]) {
+            return;
+        }
+        numberingInfo[numberingId] = [];
+        for (let numberingLevel of numberingLevels) {
+            numberingInfo[numberingId][numberingLevel.level] = {
+                markerIndex: numberingLevel.startValue,
+                start: numberingLevel.startValue,
+                needToRecalculate: true,
+                needToCalculateFirstMarker: false
+            };
+        }
+    }
+    static setNumberingNeedToRecalculate(numberingInfo, numberingId) {
+        numberingInfo[numberingId].forEach(x => {
+            x.needToRecalculate = true;
+            x.markerIndex = x.start;
+            x.needToCalculateFirstMarker = false;
+        });
+    }
+    static setAllNumberingIsCalculated(numberingInfo) {
+        for (let numberingId in numberingInfo) {
+            numberingInfo[numberingId].forEach(x => {
+                x.needToRecalculate = false;
+                x.needToCalculateFirstMarker = false;
+            });
+        }
+    }
+    static getStyles(paragraphStyle, numberings) {
+        const numberingLevels = numberings.find(x => x.numberingId === paragraphStyle.numberingId).levels;
+        const numberingLevelsStyles = numberingLevels.reduce((prev, next) => `${prev}${next.marker}${next.markerType}`, '');
+        const level = numberingLevels.find(x => x.level === paragraphStyle.numberingLevel);
+        return new NumberingParagraphStyleModel({ ...paragraphStyle, numberingType: level.markerType, numberingLevelsStyles });
+    }
+    static findNumberingLevel(numberings, id, level) {
+        const numbering = numberings.find(x => x.numberingId === id);
+        return numbering?.levels.find(x => x.level === level);
+    }
+    static findNumberingLevels(numberings, id) {
+        const numbering = numberings.find(x => x.numberingId === id);
+        return numbering?.levels;
+    }
+    static calculateNumberingInfo(numberingId, level, numberingInfo, numberings) {
+        const numberingModel = this.findNumberingLevel(numberings, numberingId, level);
+        if (numberingModel?.markerType === NumberingMarkerType.Bullet) {
+            return;
+        }
+        this.calculateMarkerIndexes(numberingId, level, numberingInfo);
+    }
+    static calculateMarkerIndexes(numberingId, level, numberingInfo) {
+        if (numberingInfo[numberingId][level].needToRecalculate) {
+            if (numberingInfo[numberingId][level].needToCalculateFirstMarker) {
+                numberingInfo[numberingId][level].markerIndex++;
+            }
+            else {
+                numberingInfo[numberingId][level].needToCalculateFirstMarker = true;
+            }
+            for (let i = level + 1; i < numberingInfo[numberingId].length; i++) {
+                numberingInfo[numberingId][i].markerIndex = numberingInfo[numberingId][i].start;
+                numberingInfo[numberingId][i].needToCalculateFirstMarker = false;
+            }
+            for (let i = 0; i < level; i++) {
+                if (numberingInfo[numberingId][i].markerIndex === numberingInfo[numberingId][i].start) {
+                    numberingInfo[numberingId][i].needToCalculateFirstMarker = true;
+                }
+            }
+        }
+    }
+    static getMarker(levelModels, level, numberingId, numberingInfo) {
+        let levelMarker = levelModels[level].marker;
+        let index = levelMarker.indexOf('%');
+        if (index === -1) {
+            return levelMarker;
+        }
+        const splittedMarker = levelMarker.split('.');
+        return this.createMarkerString(numberingInfo, numberingId, splittedMarker);
+    }
+    static createDataModel(numberings, paragraphs, paragraphIndex, numberingInfo) {
+        const paragraph = paragraphs[paragraphIndex];
+        const numberingId = paragraph?.paragraphStyle.numberingId;
+        if (!numberingId) {
+            return new NumberingDataModel({ numberingId: null });
+        }
+        const level = paragraph.paragraphStyle.numberingLevel;
+        const numberingLevelModel = this.findNumberingLevels(numberings, numberingId);
+        const marker = this.getMarker(numberingLevelModel, level, numberingId, numberingInfo);
+        return new NumberingDataModel({ numberingId, level, marker });
+    }
+    static updateMarkerData(numberings, paragraph, paragraphTextStyle, paragraphStyle) {
+        const numberingLevel = NumberingHelper.findNumberingLevel(numberings, paragraph.numberingData.numberingId, paragraph.numberingData.level);
+        const markerTextStyle = ContentStyleHelper.combineTextStyles(numberingLevel.markerStyle, paragraphTextStyle);
+        const markerSizes = NumberingHelper.getMarkerSizes(paragraph.numberingData.marker, markerTextStyle);
+        paragraph.numberingData.markerTextStyle = markerTextStyle;
+        paragraph.numberingData.width = markerSizes.width;
+        paragraph.numberingData.height = markerSizes.height;
+        const indentLeft = paragraphStyle.indentLeft !== null ? paragraphStyle.indentLeft : numberingLevel.indentLeft;
+        let indent = 0;
+        if (paragraphStyle.indentHanging === null && paragraphStyle.indentFirstLine === null) {
+            indent = -numberingLevel.indentHanging;
+        }
+        else {
+            indent = paragraphStyle.indentHanging !== null ? -paragraphStyle.indentHanging : paragraphStyle.indentFirstLine;
+        }
+        paragraph.numberingData.paddingLeft = indentLeft + indent;
+    }
+    static getMarkerSizes(marker, markerStyle) {
+        let width = 0;
+        let height = 0;
+        const markerStylesString = ContentStyleHelper.getFontStylesString(markerStyle);
+        for (let char of marker) {
+            const markerCharSizes = FontMetrics.measureCharSize(char, markerStylesString);
+            width += markerCharSizes.width;
+            if (height < markerCharSizes.height) {
+                height = markerCharSizes.height;
+            }
+        }
+        return { height, width };
+    }
+    static updateNumberingInfo(numberingInfo, marker, numberingId, level) {
+        const markerLevels = this.getLevelInfo(marker);
+        const lastMarkerLevel = markerLevels.length - 1;
+        numberingInfo[numberingId][level].markerIndex = markerLevels[lastMarkerLevel];
+        numberingInfo[numberingId][level].needToRecalculate = true;
+    }
+    static getLevelInfo(input) {
+        return input
+            .split('.')
+            .filter(x => !!x)
+            .map(x => parseInt(x));
+    }
+    static createMarkerString(numberingInfo, numberingId, splittedMarker) {
+        const markers = splittedMarker.map(x => {
+            if (x === '') {
+                return '';
+            }
+            if (x.indexOf('%') === -1) {
+                return x;
+            }
+            const markerLevel = parseInt(x.slice(1));
+            const markerIndex = numberingInfo[numberingId][markerLevel - 1]?.markerIndex;
+            return `${markerIndex}`;
+        });
+        return markers.join('.');
+    }
+    static getMarkerOffset(paragraphSettings) {
+        const numberingData = paragraphSettings.numberingData;
+        const info = paragraphSettings.textLinesInfo[0];
+        if (numberingData.numberingId === null) {
+            return { offset: 0, markerWidth: 0 };
+        }
+        const offset = numberingData.width + numberingData.paddingLeft;
+        let markerWidth = info.indentFirstLine !== null || (offset - info.indentLeft > 0 && offset - info.indentLeft < info.indent.markerWidth)
+            ? info.indent.markerWidth
+            : 0;
+        return { offset, markerWidth };
+    }
+    static getOffsetCausedByMarker(numberingData, info) {
+        if (!info.isNumbering) {
+            return 0;
+        }
+        const offset = numberingData.width + numberingData.paddingLeft - info.indentLeft;
+        return info.indentFirstLine !== null || (offset > 0 && offset <= info.indent.markerWidth) ? info.indent.markerWidth : 0;
     }
 }
 
@@ -5995,8 +6212,8 @@ class PositionHelper {
             paragraphIndex,
             lineIndex,
             lineTopOffset,
-            indentBefore: paragraphLineInfo.offsetBefore,
-            lineHeight: paragraphLineInfo.height
+            lineHeight: paragraphLineInfo.height,
+            lineAscent: paragraphLineInfo.ascent
         };
     }
     static documentToScreen(session, paragraph, indexInParagraph) {
@@ -6034,34 +6251,14 @@ class PositionHelper {
     static screenToPixel(session, row, column) {
         const paragraphs = session.displayData.paragraphs;
         const paragraphInfo = this.getParagraphInfoByRow(paragraphs, row);
-        const tokens = LineWidthHelper.getParagraphLineDisplayTokens(session, paragraphInfo.paragraphIndex, paragraphInfo.lineIndex);
-        let size = {
-            width: 8,
-            height: paragraphInfo.lineHeight,
-            baseline: paragraphInfo.lineHeight,
-            content: paragraphInfo.lineHeight,
-            font: paragraphInfo.lineHeight,
-            line: paragraphInfo.lineHeight,
-            multiplier: paragraphInfo.lineHeight,
-            ascent: 0,
-            descent: 0
-        };
+        const tokens = session.displayData.getParagraphLineTokens(paragraphInfo.paragraphIndex, paragraphInfo.lineIndex);
         let tokenIndex = column > 0 ? column - 1 : column;
-        if (tokens.length > 0) {
-            size = tokens[tokenIndex];
-        }
-        const sizeNext = tokens[tokenIndex + 1];
-        let sizeMax = { ...size };
+        let sizeMax = { ...tokens[tokenIndex] };
         let lineWidthToPosition = session.displayData.pagesFormat[0].pageFormatModel.marginLeft; // this value is the same for all page formats.
-        const { paragraphIndex, lineIndex } = this.findLineInParagraphs(paragraphs, row);
-        const lineInfo = paragraphs[paragraphIndex].paragraphSettings.textLinesInfo[lineIndex];
         for (let currentColumn = 0; currentColumn < tokens.length; currentColumn++) {
             const currentToken = tokens[currentColumn];
             if (currentColumn < column) {
                 lineWidthToPosition += currentToken.width;
-                if (currentToken.displayValue === DisplayValue.space && lineInfo.wordSpacing) {
-                    lineWidthToPosition += lineInfo.wordSpacing;
-                }
             }
             if (sizeMax.ascent < currentToken.ascent) {
                 sizeMax = currentToken;
@@ -6072,18 +6269,14 @@ class PositionHelper {
         }
         const paragraph = paragraphs[paragraphInfo.paragraphIndex];
         const paragraphTop = paragraph.paragraphSettings.distanceFromTop || 0;
-        const linePaddingLeft = paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex].paddingLeft;
-        const offsetMargin = paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex].offsetMargin;
-        const markerWidth = this.getMarkerWidth(paragraph.paragraphSettings, paragraph.paragraphSettings.textLinesInfo[0], paragraphInfo.lineIndex);
+        const info = paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex];
+        const markerOffset = NumberingHelper.getOffsetCausedByMarker(paragraph.paragraphSettings.numberingData, info); // todo: verify (case - 1) numbering paragraph with multi-lines; 2) marker is moved far left so it not affect line offset)
         return {
-            pageX: lineWidthToPosition + linePaddingLeft + offsetMargin + markerWidth,
+            pageX: lineWidthToPosition + info.paddingLeft + info.offsetMargin + markerOffset,
             pageY: paragraphTop + paragraphInfo.lineTopOffset - session.scrollTop,
-            lineHeight: paragraphInfo.lineHeight,
-            sizeCurrent: size,
-            sizeMax,
-            sizeNext,
-            firstChar: column === 0,
-            lastChar: column === tokens.length - 1
+            width: tokens[tokenIndex].width,
+            height: paragraphInfo.lineHeight,
+            ascent: paragraphInfo.lineAscent
         };
     }
     /**
@@ -6119,24 +6312,17 @@ class PositionHelper {
     static mapPixelToClosestTokenMidpoint(session, xPixel, paragraphIndex, lineIndex, leftOffset) {
         const paragraphSettings = session.displayData.paragraphs[paragraphIndex].paragraphSettings;
         const marginLeft = session.displayData.pagesFormat[0].pageFormatModel.marginLeft; // this value is the same for all page formats.
-        const tokens = LineWidthHelper.getParagraphLineDisplayTokens(session, paragraphIndex, lineIndex);
+        const tokens = session.displayData.getParagraphLineTokens(paragraphIndex, lineIndex);
         const lineInfo = paragraphSettings.textLinesInfo[lineIndex];
         const line = lineInfo.screenLine;
-        if (tokens[0].displayValue === DisplayValue.emptyLine) {
+        if (tokens[0].isParagraph) {
             return { line, indexInLine: 0 };
         }
         let indexInLine = 0;
-        const markerWidth = this.getMarkerWidth(paragraphSettings, lineInfo, lineIndex);
-        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerWidth;
-        const wordSpacing = lineInfo.wordSpacing ?? 0;
-        while (indexInLine < tokens.length) {
-            const token = tokens[indexInLine];
-            const isSpace = token.displayValue === DisplayValue.space;
-            const width = token.width + (isSpace ? wordSpacing : 0);
-            if (relativeX < width / 2) {
-                break;
-            }
-            relativeX -= width;
+        const markerOffset = NumberingHelper.getOffsetCausedByMarker(paragraphSettings.numberingData, lineInfo);
+        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerOffset;
+        while (indexInLine < tokens.length && relativeX >= tokens[indexInLine].width / 2) {
+            relativeX -= tokens[indexInLine].width;
             indexInLine++;
         }
         return { line, indexInLine };
@@ -6147,24 +6333,17 @@ class PositionHelper {
     static mapPixelToNextTokenBoundary(session, xPixel, paragraphIndex, lineIndex, leftOffset) {
         const paragraphSettings = session.displayData.paragraphs[paragraphIndex].paragraphSettings;
         const marginLeft = session.displayData.pagesFormat[0].pageFormatModel.marginLeft; // this value is the same for all page formats.
-        const tokens = LineWidthHelper.getParagraphLineDisplayTokens(session, paragraphIndex, lineIndex);
+        const tokens = session.displayData.getParagraphLineTokens(paragraphIndex, lineIndex);
         const lineInfo = paragraphSettings.textLinesInfo[lineIndex];
         const line = lineInfo.screenLine;
-        if (tokens[0].displayValue === DisplayValue.emptyLine) {
+        if (tokens[0].isParagraph) {
             return { line, indexInLine: 0 };
         }
         let indexInLine = 0;
-        const markerWidth = this.getMarkerWidth(paragraphSettings, lineInfo, lineIndex);
-        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerWidth;
-        const wordSpacing = lineInfo.wordSpacing ?? 0;
-        while (indexInLine < tokens.length) {
-            const token = tokens[indexInLine];
-            const isSpace = token.displayValue === DisplayValue.space;
-            const width = token.width + (isSpace ? wordSpacing : 0);
-            if (relativeX < width) {
-                break;
-            }
-            relativeX -= width;
+        const markerOffset = NumberingHelper.getOffsetCausedByMarker(paragraphSettings.numberingData, lineInfo);
+        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerOffset;
+        while (indexInLine < tokens.length && relativeX >= tokens[indexInLine].width) {
+            relativeX -= tokens[indexInLine].width;
             indexInLine++;
         }
         return { line, indexInLine };
@@ -6186,38 +6365,19 @@ class PositionHelper {
         const paragraphs = session.displayData.paragraphs;
         const marginLeft = session.displayData.pagesFormat[0].pageFormatModel.marginLeft; // this value is the same for all page formats.
         const { paragraphIndex, lineIndex } = PositionHelper.findLineInParagraphs(paragraphs, documentLine);
-        let column = 0;
-        const tokens = LineWidthHelper.getParagraphLineDisplayTokens(session, paragraphIndex, lineIndex);
-        if (tokens.length === 1 && tokens[0].displayValue === DisplayValue.emptyLine) {
-            return column;
-        }
-        const textLineInfo = paragraphs[paragraphIndex].paragraphSettings.textLinesInfo[lineIndex];
-        const wordSpacing = textLineInfo.wordSpacing ?? 0;
-        const markerWidth = this.getMarkerWidth(paragraphs[paragraphIndex].paragraphSettings, textLineInfo, lineIndex);
-        let width = positionWidth - textLineInfo.paddingLeft - marginLeft - textLineInfo.offsetMargin - markerWidth;
-        while (column < tokens.length) {
-            const token = tokens[column];
-            if (width < token.width) {
-                break;
-            }
-            const isSpace = token.displayValue === DisplayValue.space;
-            width -= token.width + (isSpace ? wordSpacing : 0);
-            column++;
+        const tokens = session.displayData.getParagraphLineTokens(paragraphIndex, lineIndex);
+        if (tokens[0].isParagraph) {
+            return 0;
         }
-        return column;
-    }
-    static getMarkerWidth(paragraphSettings, textLineInfo, lineIndex) {
-        const numberingOffsetLeft = paragraphSettings.numberingData.numberingId === null
-            ? 0
-            : paragraphSettings.numberingData.width + paragraphSettings.numberingData.paddingLeft;
-        if (textLineInfo.isNumbering &&
-            lineIndex === 0 &&
-            (textLineInfo.indentFirstLine !== null ||
-                (numberingOffsetLeft - textLineInfo.indentLeft > 0 &&
-                    numberingOffsetLeft - textLineInfo.indentLeft <= textLineInfo.markerWidth))) {
-            return textLineInfo.markerWidth;
+        let index = 0;
+        const lineInfo = paragraphs[paragraphIndex].paragraphSettings.textLinesInfo[lineIndex];
+        const markerOffset = NumberingHelper.getOffsetCausedByMarker(paragraphs[paragraphIndex].paragraphSettings.numberingData, lineInfo);
+        let width = positionWidth - lineInfo.paddingLeft - marginLeft - lineInfo.offsetMargin - markerOffset;
+        while (index < tokens.length && width >= tokens[index].width) {
+            width -= tokens[index].width;
+            index++;
         }
-        return 0;
+        return index;
     }
 }
 
@@ -6268,15 +6428,6 @@ class EdgeElementModel {
     }
 }
 
-class FormatExtModel extends FormatModel {
-    constructor(fields) {
-        super(fields);
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
 class ScalingHelper {
     static getRatio(current, original) {
         return parseFloat((current / original).toFixed(1));
@@ -6290,100 +6441,55 @@ class RenderingHelper {
     static createLineElement(lineInfo, numberingOffsetLeft, scalingRatio) {
         let lineEl = document.createElement('div');
         lineEl.className = 'noder-line';
-        if (lineInfo) {
-            const paddingLeft = ScalingHelper.scale(lineInfo.paddingLeft, scalingRatio);
-            const marginLeft = numberingOffsetLeft !== null ? -numberingOffsetLeft : 0;
-            // eslint-disable-next-line prettier/prettier
-            let styleString = `padding-left:${paddingLeft}px;height:${lineInfo.height + lineInfo.offsetAfter}px;margin-top:${lineInfo.offsetBefore}px;margin-bottom:${lineInfo.endPageOffset}px;margin-left:${marginLeft}px;background-color:${lineInfo.backgroundColor};`;
-            if (lineInfo.wordSpacing) {
-                styleString += `word-spacing:${lineInfo.wordSpacing}px;`;
-            }
-            lineEl.setAttribute('style', styleString);
-            lineEl.setAttribute('screen-index', `${lineInfo.screenLine}`);
-        }
+        const paddingLeft = ScalingHelper.scale(lineInfo.paddingLeft, scalingRatio);
+        const marginLeft = numberingOffsetLeft !== null ? -numberingOffsetLeft : 0;
+        let styleString = `padding-left:${paddingLeft}px;height:${lineInfo.height + lineInfo.offsetAfter}px;margin-top:${lineInfo.offsetBefore}px;margin-bottom:${lineInfo.endPageOffset}px;margin-left:${marginLeft}px;background-color:${lineInfo.backgroundColor};`;
+        lineEl.setAttribute('style', styleString);
+        lineEl.setAttribute('screen-index', `${lineInfo.screenLine}`);
         return lineEl;
     }
-    static renderContentSimpleLine(domContent, formatsExt, rowDistance, customContentService, customComponents, lineInfo, breaks = []) {
-        const valueFragment = DomHelper.createFragment(domContent.currentElement);
-        for (const formatExt of formatsExt) {
-            const fragmentDocumentStartIndex = rowDistance.start > formatExt.startIndex ? rowDistance.start : formatExt.startIndex;
-            const fragmentDocumentEndIndex = formatExt.endIndex > rowDistance.end ? rowDistance.end : formatExt.endIndex;
-            const fragmentDocumentDistance = new DistanceModel({ start: fragmentDocumentStartIndex, end: fragmentDocumentEndIndex });
-            const fragmentStartIndex = rowDistance.start > formatExt.startIndex ? rowDistance.start - formatExt.startIndex : 0;
-            const fragmentEndIndex = formatExt.endIndex > rowDistance.end ? rowDistance.end - formatExt.startIndex : formatExt.endIndex - formatExt.startIndex;
-            const fragmentDistance = new DistanceModel({ start: fragmentStartIndex, end: fragmentEndIndex });
-            this.renderFormatContent(valueFragment, formatExt, fragmentDocumentDistance, fragmentDistance, customContentService, customComponents, breaks, lineInfo, true);
-        }
-        domContent.parentNode.appendChild(valueFragment);
-    }
-    static renderContentWrappedLine(domContent, splits, currentParagraph, formatsExt, distance, customContentService, customComponents, scalingRatio, breaks = []) {
-        let splitIndex = 0;
-        const numberingOffsetLeft = currentParagraph.numberingData.numberingId === null
-            ? 0
-            : currentParagraph.numberingData.width + currentParagraph.numberingData.paddingLeft;
-        let markerWidth = 0;
-        if (currentParagraph.textLinesInfo[0].isNumbering &&
-            (currentParagraph.textLinesInfo[0].indentFirstLine !== null ||
-                (numberingOffsetLeft - currentParagraph.textLinesInfo[0].indentLeft > 0 &&
-                    numberingOffsetLeft - currentParagraph.textLinesInfo[0].indentLeft < currentParagraph.textLinesInfo[0].markerWidth))) {
-            markerWidth = currentParagraph.textLinesInfo[0].markerWidth;
-        }
-        let lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft - markerWidth, scalingRatio);
-        domContent.parentNode.appendChild(lineEl);
-        const valueFragment = DomHelper.createFragment(domContent.currentElement);
-        let isLastLineFragment = false;
-        let paragraphChars = 0;
-        let split = splits[splitIndex];
-        let lineInfo = currentParagraph.textLinesInfo[splitIndex];
-        for (const formatExt of formatsExt) {
-            const beforeSplitIndex = split ? split - 1 : distance.end - distance.start;
-            const beforeSplitDocumentIndex = distance.start + beforeSplitIndex;
-            const fragmentDocumentStartIndex = distance.start + paragraphChars;
-            const fragmentDocumentEndIndex = formatExt.endIndex < beforeSplitDocumentIndex ? formatExt.endIndex : beforeSplitDocumentIndex;
-            const fragmentDocumentDistance = new DistanceModel({ start: fragmentDocumentStartIndex, end: fragmentDocumentEndIndex });
-            const fragmentStartIndex = distance.start > formatExt.startIndex ? distance.start - formatExt.startIndex : 0;
-            const fragmentEndIndex = formatExt.endIndex < beforeSplitDocumentIndex
-                ? fragmentStartIndex + formatExt.endIndex - formatExt.startIndex
-                : distance.start + beforeSplitIndex - formatExt.startIndex;
-            const fragmentDistance = new DistanceModel({ start: fragmentStartIndex, end: fragmentEndIndex });
-            isLastLineFragment = split === fragmentDocumentDistance.end + 1;
-            paragraphChars += this.renderFormatContent(valueFragment, formatExt, fragmentDocumentDistance, fragmentDistance, customContentService, customComponents, breaks, lineInfo, isLastLineFragment);
-            lineEl.appendChild(valueFragment);
-            let nextFragmentStartIndex = fragmentEndIndex + 1;
-            while (paragraphChars === split && nextFragmentStartIndex !== distance.end) {
-                split = splits[++splitIndex];
-                lineInfo = currentParagraph.textLinesInfo[splitIndex];
-                const nextFragmentDocumentStartIndex = fragmentDocumentStartIndex + nextFragmentStartIndex - fragmentStartIndex;
-                lineEl = RenderingHelper.createLineElement(lineInfo, numberingOffsetLeft, scalingRatio);
-                if (split > formatExt.endIndex) {
-                    const nextFragmentEndIndex = formatExt.content.length - 1;
-                    const nextFragmentDistance = new DistanceModel({ start: nextFragmentStartIndex, end: nextFragmentEndIndex });
-                    const nextFragmentDocumentEndIndex = nextFragmentDocumentStartIndex + nextFragmentEndIndex - nextFragmentStartIndex;
-                    const nextFragmentDocumentDistance = new DistanceModel({
-                        start: nextFragmentDocumentStartIndex,
-                        end: nextFragmentDocumentEndIndex
-                    });
-                    isLastLineFragment = split === nextFragmentDocumentDistance.end + 1;
-                    paragraphChars += this.renderFormatContent(valueFragment, formatExt, nextFragmentDocumentDistance, nextFragmentDistance, customContentService, customComponents, breaks, lineInfo, isLastLineFragment);
-                    lineEl.appendChild(valueFragment);
+    static renderParagraph(domContent, paragraph, formats, customContentService, customComponents, scalingRatio, breaks = []) {
+        const { offset, markerWidth } = NumberingHelper.getMarkerOffset(paragraph.paragraphSettings);
+        const lineInfos = paragraph.paragraphSettings.textLinesInfo;
+        const start = paragraph.startIndex;
+        const end = paragraph.startIndex + paragraph.content.length;
+        const fragment = DomHelper.createFragment(domContent.currentElement);
+        let lineIndex = 0;
+        let renderedCount = 0;
+        let lineEl = RenderingHelper.createLineElement(paragraph.paragraphSettings.textLinesInfo[0], offset - markerWidth, scalingRatio);
+        for (const format of formats) {
+            do {
+                const lineEnd = paragraph.nextLineIndexes[lineIndex]
+                    ? paragraph.startIndex + paragraph.nextLineIndexes[lineIndex] - 1
+                    : end;
+                let fragmentEnd = format.endIndex < lineEnd ? format.endIndex : lineEnd;
+                let wordSpacing = lineInfos[lineIndex].wordSpacing;
+                if (wordSpacing) {
+                    const lineStart = lineIndex > 0 ? paragraph.nextLineIndexes[lineIndex - 1] : 0;
+                    const lineStartIndex = start + lineStart;
+                    const wordSpacingStart = lineInfos[lineIndex].wordSpacingStart;
+                    const wordSpacingEnd = lineInfos[lineIndex].wordSpacingEnd;
+                    if (renderedCount - lineStart < wordSpacingStart && lineStartIndex + wordSpacingStart < fragmentEnd) {
+                        fragmentEnd = lineStartIndex + wordSpacingStart;
+                    }
+                    else if (renderedCount - lineStart < wordSpacingEnd && lineStartIndex + wordSpacingEnd < fragmentEnd) {
+                        fragmentEnd = lineStartIndex + wordSpacingEnd;
+                    }
+                    if (renderedCount - lineStart < wordSpacingStart || renderedCount - lineStart > wordSpacingEnd) {
+                        wordSpacing = null;
+                    }
+                }
+                const fragmentLength = fragmentEnd - start - renderedCount + 1;
+                this.renderFormatContent(fragment, format.textStyle, start + renderedCount, fragmentEnd, paragraph.content.substring(renderedCount, renderedCount + fragmentLength), customContentService, customComponents, breaks, wordSpacing);
+                lineEl.appendChild(fragment);
+                renderedCount += fragmentLength;
+                if (paragraph.nextLineIndexes.length > lineIndex && start + renderedCount > lineEnd) {
+                    lineIndex++;
                     domContent.parentNode.appendChild(lineEl);
-                    break;
+                    lineEl = RenderingHelper.createLineElement(lineInfos[lineIndex], offset, scalingRatio);
                 }
-                const textIndexLength = RenderingHelper.getTextIndexLengthForInsert(formatExt, nextFragmentDocumentStartIndex, distance, split, paragraphChars);
-                const nextFragmentDocumentEndIndex = nextFragmentDocumentStartIndex + textIndexLength;
-                const nextFragmentEndIndex = nextFragmentStartIndex + textIndexLength;
-                const nextFragmentDistance = new DistanceModel({ start: nextFragmentStartIndex, end: nextFragmentEndIndex });
-                const nextFragmentDocumentDistance = new DistanceModel({
-                    start: nextFragmentDocumentStartIndex,
-                    end: nextFragmentDocumentEndIndex
-                });
-                isLastLineFragment = split === nextFragmentDocumentDistance.end + 1;
-                const renderedChars = this.renderFormatContent(valueFragment, formatExt, nextFragmentDocumentDistance, nextFragmentDistance, customContentService, customComponents, breaks, lineInfo, isLastLineFragment);
-                lineEl.appendChild(valueFragment);
-                domContent.parentNode.appendChild(lineEl);
-                nextFragmentStartIndex += renderedChars;
-                paragraphChars += renderedChars;
-            }
+            } while (renderedCount < paragraph.content.length && format.endIndex > start + renderedCount);
+            domContent.parentNode.appendChild(lineEl);
         }
     }
     static renderNumberingMarker(paragraph, layerElement, scalingRatio) {
@@ -6400,11 +6506,7 @@ class RenderingHelper {
         const numberingLineEl = this.createLineElement(markerLineInfo, 0, scalingRatio);
         const markerFragment = DomHelper.createFragment(layerElement);
         const marker = paragraph.numberingData.marker;
-        const markerExtModel = new FormatExtModel({
-            textStyle: paragraph.numberingData.markerTextStyle,
-            content: marker
-        });
-        this.renderText(markerFragment, markerExtModel, marker);
+        this.renderText(markerFragment, paragraph.numberingData.markerTextStyle, marker, null);
         numberingLineEl.appendChild(markerFragment);
         return numberingLineEl;
     }
@@ -6413,60 +6515,35 @@ class RenderingHelper {
         containerElement.className = className;
         return containerElement;
     }
-    static renderFormatContent(fragment, formatExt, fragmentDocumentDistance, fragmentDistance, customContentService, customComponents, breaks, lineInfo, isLastLineFragment) {
-        let textFragment = formatExt.content.substring(fragmentDistance.start, fragmentDistance.end + 1);
+    static renderFormatContent(fragment, textStyle, start, end, textFragment, customContentService, customComponents, breaks, wordSpacing) {
         if (!textFragment) {
-            return 0;
-        }
-        const textFragmentWithoutBreaks = BreakHelper.removeBreakMarker(breaks, textFragment, fragmentDocumentDistance.start);
-        if (customContentService.isFragmentContainComponent(customComponents, textFragment, fragmentDocumentDistance)) {
-            this.renderTextWithCustomContent(fragment, formatExt, fragmentDocumentDistance, textFragmentWithoutBreaks, customContentService, customComponents, lineInfo);
-        }
-        else if (isLastLineFragment) {
-            this.renderTextWithSpacingHandling(fragment, formatExt, textFragmentWithoutBreaks, lineInfo);
-        }
-        else {
-            const paddingLeft = textFragment.startsWith(' ') && lineInfo.wordSpacing ? lineInfo.wordSpacing : null;
-            this.renderText(fragment, formatExt, textFragmentWithoutBreaks, paddingLeft);
-        }
-        return textFragment.length;
-    }
-    static renderTextWithCustomContent(fragment, formatExt, fragmentDocumentDistance, textFragment, customContentService, customComponents, lineInfo) {
-        const components = customContentService.getComponents(customComponents, fragmentDocumentDistance);
-        if (!components.length) {
-            this.renderTextWithSpacingHandling(fragment, formatExt, textFragment, lineInfo);
             return;
         }
-        let newTextFragmentStartIndex = fragmentDocumentDistance.start;
-        let nextTextFragment = textFragment;
-        for (const component of components) {
-            const textBeforeElement = nextTextFragment.substring(0, component.instance.insertIndex - newTextFragmentStartIndex);
-            nextTextFragment = nextTextFragment.substring(textBeforeElement.length + 1, nextTextFragment.length);
-            newTextFragmentStartIndex = newTextFragmentStartIndex + (textBeforeElement.length ? textBeforeElement.length + 1 : 1);
-            if (textBeforeElement.length) {
-                const paddingLeft = textBeforeElement.startsWith(' ') && lineInfo.wordSpacing ? lineInfo.wordSpacing : null;
-                this.renderText(fragment, formatExt, textBeforeElement, paddingLeft);
+        const textFragmentWithoutBreaks = BreakHelper.removeBreakMarker(breaks, textFragment, start);
+        const components = customContentService.getComponents(customComponents, start, end);
+        if (components.length) {
+            let newTextFragmentStartIndex = start;
+            let nextTextFragment = textFragmentWithoutBreaks;
+            for (const component of components) {
+                const textBeforeElement = nextTextFragment.substring(0, component.instance.insertIndex - newTextFragmentStartIndex);
+                nextTextFragment = nextTextFragment.substring(textBeforeElement.length + 1, nextTextFragment.length);
+                newTextFragmentStartIndex = newTextFragmentStartIndex + (textBeforeElement.length ? textBeforeElement.length + 1 : 1);
+                if (textBeforeElement.length) {
+                    this.renderText(fragment, textStyle, textBeforeElement, wordSpacing);
+                }
+                customContentService.componentService.attachComponent(fragment, component);
+            }
+            if (nextTextFragment.length) {
+                this.renderText(fragment, textStyle, nextTextFragment, wordSpacing);
             }
-            this.attachComponent(fragment, component, customContentService);
-        }
-        if (nextTextFragment.length) {
-            this.renderTextWithSpacingHandling(fragment, formatExt, nextTextFragment, lineInfo);
-        }
-    }
-    static renderTextWithSpacingHandling(fragment, formatExt, textFragment, lineInfo) {
-        const paddingLeft = textFragment.startsWith(' ') && lineInfo.wordSpacing ? lineInfo.wordSpacing : null;
-        if (lineInfo.wordSpacing && textFragment.endsWith(' ')) {
-            this.renderText(fragment, formatExt, textFragment.slice(0, -1), paddingLeft);
-            this.renderText(fragment, formatExt, ' ');
         }
         else {
-            this.renderText(fragment, formatExt, textFragment, paddingLeft);
+            this.renderText(fragment, textStyle, textFragmentWithoutBreaks, wordSpacing);
         }
     }
-    static renderText(fragment, formatExt, textFragment, paddingLeft = null) {
+    static renderText(fragment, textStyle, content, wordSpacing) {
         const span = document.createElement('span');
-        const textStyle = new TextStyleModel({ ...formatExt.textStyle });
-        if (textFragment === NEW_LINE_MARKUP) {
+        if (content === NEW_LINE_MARKUP) {
             span.className = 'paragraph-symbol';
         }
         if (textStyle.headingStyleId === HYPERLINK_HEADING_STYLE_ID) {
@@ -6481,21 +6558,14 @@ class RenderingHelper {
             };
             span.onmouseleave = () => span.classList.remove('hyperlink-hover');
         }
-        span.textContent = textFragment;
+        span.textContent = content;
         let styleString = ContentStyleHelper.getTextStylesString(textStyle);
-        if (paddingLeft) {
-            styleString += `padding-left:${paddingLeft}px;`;
+        if (wordSpacing) {
+            styleString += `word-spacing:${wordSpacing}px;`;
         }
         span.setAttribute('style', styleString);
         fragment.appendChild(span);
     }
-    static getTextIndexLengthForInsert(formatExt, fragmentDocumentStartIndex, paragraphDistance, split, paragraphChars) {
-        const maxLength = Math.max(paragraphDistance.end - paragraphChars - paragraphDistance.start, 0);
-        return (Math.min(split - paragraphChars || Number.MAX_VALUE, maxLength, formatExt.endIndex - fragmentDocumentStartIndex + 1, formatExt.content.length) - 1);
-    }
-    static attachComponent(fragment, component, customContentService) {
-        customContentService.componentService.attachComponent(fragment, component);
-    }
 }
 
 class EdgesLayer {
@@ -6810,12 +6880,6 @@ class PrintPagesLayer extends PagesLayer {
     }
 }
 
-class PrintRenderingHelper extends RenderingHelper {
-    static attachComponent(fragment, component, customContentService) {
-        customContentService.componentService.cloneAndAttachComponent(fragment, component);
-    }
-}
-
 class Lines {
     get length() {
         return this.cells.length;
@@ -7091,10 +7155,9 @@ class ParagraphHelper {
 }
 
 class TextLayer {
-    constructor(parentElement, session, renderingHelper = RenderingHelper) {
+    constructor(parentElement, session) {
         this.parentElement = parentElement;
         this.session = session;
-        this.renderingHelper = renderingHelper;
         this.pagesCountChangedHandler = (event) => {
             this.lines.setSizes(event.pagesCount, event.pageHeight);
         };
@@ -7169,46 +7232,22 @@ class TextLayer {
             DomHelper.setStyle(paragraphCell.element.style, 'margin-right', `${offsetForLittlePages}px`);
             const paragraphSettings = this.session.displayData.getParagraphSettings(row);
             if (paragraphSettings.numberingData.numberingId !== null) {
-                const numberingElement = this.renderingHelper.renderNumberingMarker(paragraphSettings, this.element, this.session.generalProperties.scalingRatio);
+                const numberingElement = RenderingHelper.renderNumberingMarker(paragraphSettings, this.element, this.session.generalProperties.scalingRatio);
                 numberingElement.className = 'numberingMarker';
                 paragraphCell.element.appendChild(numberingElement);
             }
-            this.renderTextLines(paragraphCell.element, row);
+            this.renderParagraph(paragraphCell.element, this.session.displayData.paragraphs[row]);
             fragment.push(paragraphCell);
         }
         return fragment;
     }
-    renderTextLines(parent, row) {
-        const linesContainerElement = this.renderingHelper.createDivContainer('lines-container');
-        const paragraphSettings = this.session.displayData.getParagraphSettings(row);
-        const paragraphHeight = ParagraphHelper.getParagraphHeight(paragraphSettings.textLinesInfo);
+    renderParagraph(parent, paragraph) {
+        const linesContainerElement = RenderingHelper.createDivContainer('lines-container');
+        const paragraphHeight = ParagraphHelper.getParagraphHeight(paragraph.paragraphSettings.textLinesInfo);
         DomHelper.setStyle(linesContainerElement.style, 'height', `${paragraphHeight}px`);
         parent.appendChild(linesContainerElement);
-        const startIndex = this.session.displayData.positionToIndex({ row, column: 0 });
-        const endIndex = this.session.displayData.positionToIndex({ row: row + 1, column: 0 }) - 1;
-        const combinedFormats = FormatStyleHelper.combineSection(this.session.model.formats, this.session.model.links, startIndex, endIndex).map(x => new FormatExtModel({ ...x, content: this.session.model.content.substring(x.startIndex, x.endIndex + 1) }));
-        const splits = this.session.displayData.paragraphs[row].nextLineIndexes;
-        if (splits?.length) {
-            const distance = new DistanceModel({ start: startIndex, end: endIndex });
-            this.renderingHelper.renderContentWrappedLine({ currentElement: this.element, parentNode: linesContainerElement }, splits, paragraphSettings, combinedFormats, distance, this.session.customContentService, this.session.customComponents, this.session.generalProperties.scalingRatio, this.session.model.breaks);
-        }
-        else {
-            const markerWidth = paragraphSettings.textLinesInfo[0].indentFirstLine ? paragraphSettings.textLinesInfo[0].markerWidth : 0;
-            const numberingOffsetLeft = paragraphSettings.numberingData.numberingId === null
-                ? 0
-                : paragraphSettings.numberingData.width + paragraphSettings.numberingData.paddingLeft - markerWidth;
-            let offset = 0;
-            if (paragraphSettings.textLinesInfo[0].isNumbering &&
-                numberingOffsetLeft - paragraphSettings.textLinesInfo[0].indentLeft > 0 &&
-                numberingOffsetLeft - paragraphSettings.textLinesInfo[0].indentLeft < paragraphSettings.textLinesInfo[0].markerWidth) {
-                offset = paragraphSettings.textLinesInfo[0].markerWidth;
-            }
-            const lineInfo = paragraphSettings.textLinesInfo[0];
-            const lastLineEl = this.renderingHelper.createLineElement(lineInfo, numberingOffsetLeft - offset, this.session.generalProperties.scalingRatio);
-            linesContainerElement.appendChild(lastLineEl);
-            const rowDistance = new DistanceModel({ start: startIndex, end: endIndex });
-            this.renderingHelper.renderContentSimpleLine({ currentElement: this.element, parentNode: lastLineEl }, combinedFormats, rowDistance, this.session.customContentService, this.session.customComponents, lineInfo, this.session.model.breaks);
-        }
+        const combinedFormats = FormatStyleHelper.combineSection(this.session.model.formats, this.session.model.links, paragraph.startIndex, paragraph.startIndex + paragraph.content.length);
+        RenderingHelper.renderParagraph({ currentElement: this.element, parentNode: linesContainerElement }, paragraph, combinedFormats, this.session.customContentService, this.session.customComponents, this.session.generalProperties.scalingRatio, this.session.model.breaks);
     }
 }
 
@@ -7254,7 +7293,7 @@ class PrintRenderer {
         this.content.className = 'noder-content print';
     }
     createLayers() {
-        this.textLayer = new PrintTextLayer(this.content, this.mainSession, PrintRenderingHelper);
+        this.textLayer = new PrintTextLayer(this.content, this.mainSession);
         this.pagesLayer = new PrintPagesLayer(this.content, this.mainSession);
         this.edgesLayer = new EdgesLayer(this.content, this.mainSession);
     }
@@ -8600,7 +8639,7 @@ class Editor {
         this.session.applyToolbarStyles();
         this.onSetCommentsVisibility(!!this.model.comments.length);
         this.search = new Search(editorService);
-        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.replaceByCustomComponentSubscription(), 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(), ...this.commentCreationSubscriptions(), this.removeCommentSubscription(), this.rerenderCommentsSubscription(), this.selectCommentSubscription(), this.setComentsVisibilitySubscription());
+        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.replaceByCustomComponentSubscription(), 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.selectSpacingSubscription(), this.selectBeforeSubscription(), this.selectAfterSubscription(), 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(), ...this.commentCreationSubscriptions(), this.removeCommentSubscription(), this.rerenderCommentsSubscription(), this.selectCommentSubscription(), this.setComentsVisibilitySubscription(), this.getCommentTextSubscription(), this.replaceCommentTextSubscription());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -8656,7 +8695,7 @@ class Editor {
         const cursor = PositionHelper.documentToPixel(this.session, this.session.selection.cursor);
         const rect = this.renderer.container.getBoundingClientRect();
         const x = rect.left + cursor.pageX;
-        const y = rect.top + cursor.pageY + cursor.lineHeight;
+        const y = rect.top + cursor.pageY + cursor.height;
         this.overlayService.open(component, { textKey }, x, y);
     }
     cut() {
@@ -9033,9 +9072,9 @@ class Editor {
             const replaceModel = new ReplaceModel({ insertText, delete: deleteModel });
             this.saveReplaceToHistory(this.search.currentMatch.range, replaceModel);
             const endPosition = this.session.replace(replaceModel);
-            const range = new Range(this.search.currentMatch.range.start, endPosition);
-            let lastRow = range.start.row === range.end.row ? range.end.row : Infinity;
-            this.renderer.updateLines(range.start.row, lastRow);
+            const matchStart = this.search.currentMatch.range.start;
+            let lastRow = matchStart.row === endPosition.row ? endPosition.row : Infinity;
+            this.renderer.updateLines(matchStart.row, lastRow);
         }
         else {
             const range = this.search.currentMatch.range;
@@ -9306,7 +9345,7 @@ class Editor {
     saveInsertBreakToHistory(model) {
         model.isOnNewParagraph =
             model.breakType === BreakTypes.Page &&
-                BreakHelper.getBreakType(this.session.model, CUSTOM_ELEMENT_MARKER, model.insertIndex - 1) !== BreakTypes.Page;
+                BreakHelper.getBreakType(this.session.model.breaks, CUSTOM_ELEMENT_MARKER, model.insertIndex - 1) !== BreakTypes.Page;
         const count = model.isOnNewParagraph ? NEW_LINE_MARKUP.length + 1 : 1;
         this.history.pushInsertBreak(model, count);
         this.commandsService.createCommand(SaveCommandsHelper.getInsertBreakCommand(model, this.targets));
@@ -9479,8 +9518,7 @@ class Editor {
         this.onContentChange();
     }
     removeExternalData() {
-        const startIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start);
-        const endIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.end) - 1;
+        const { startIndex, endIndex } = ContentHelper.getSelectedPartDocumentIndexes(this.session.displayData.paragraphs, this.selection.range);
         const elements = IndexedElementHelper.sliceSection(this.session.model.elements, startIndex, endIndex).slice();
         if (elements.length) {
             this.editorService.removeCustomElementsData(elements);
@@ -9532,13 +9570,12 @@ class Editor {
         const data = this.textInput.getClipboardData(event);
         this.pasteData(data);
     }
-    onCreateComment() {
-        const startIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start);
-        const endIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.end);
+    onCreateComment(commentType) {
+        const { startIndex, endIndex } = ContentHelper.getSelectedPartDocumentIndexes(this.session.displayData.paragraphs, this.selection.range);
         const reqId = Date.now();
         const comment = new CommentModel({ startIndex, endIndex });
         this.commentCreateRequests.push({ sessionId: this.session.sessionId, reqId, comment });
-        this.editorService.createComment(reqId);
+        this.editorService.createComment(reqId, commentType);
     }
     onCommentCreated(reqId, commentId) {
         const request = this.commentCreateRequests.find(x => x.reqId === reqId);
@@ -9561,6 +9598,26 @@ class Editor {
         this.editorService.removeCommentData([id]);
         session.renderer.loop.schedule({ comments: true });
     }
+    onCommentTextReplace(commentId, newText) {
+        const { session, comment } = this.regulatorService.getComment(commentId);
+        const paragraphRange = new Range(ContentHelper.documentIndexToParagraphIndex(session.session.displayData.paragraphs, comment.startIndex), ContentHelper.documentIndexToParagraphIndex(session.session.displayData.paragraphs, comment.endIndex + 1));
+        const insertText = new InsertTextModel({ insertIndex: comment.startIndex, text: newText });
+        const deleteModel = new DeleteModel({
+            startIndex: comment.startIndex,
+            count: comment.endIndex - comment.startIndex + 1
+        });
+        const replaceModel = new ReplaceModel({ insertText, delete: deleteModel });
+        this.saveReplaceToHistory(paragraphRange, replaceModel);
+        const endPosition = session.session.replace(replaceModel);
+        let lastRow = paragraphRange.start.row === endPosition.row ? endPosition.row : Infinity;
+        this.renderer.updateLines(paragraphRange.start.row, lastRow);
+        this.onContentChange();
+    }
+    onGetCommentText(commentId, continueWith) {
+        const { session, comment } = this.regulatorService.getComment(commentId);
+        const text = session.session.model.content.slice(comment.startIndex, comment.endIndex + 1);
+        continueWith(text);
+    }
     onSetCommentsVisibility(value) {
         this.commentsVisible = value;
         this.regulatorService.setCommentsVisibility(value);
@@ -9900,7 +9957,7 @@ class Editor {
             const mainRect = this.mainRenderer.container.getBoundingClientRect();
             const rect = this.renderer.container.getBoundingClientRect();
             const hintX = mainRect.right - 20;
-            const hintY = rect.top + cursor.pageY + cursor.lineHeight / 2 - 20;
+            const hintY = rect.top + cursor.pageY + cursor.height / 2 - 20;
             this.overlayService.open(CommentPopupComponent, {}, hintX, hintY);
         }
     }
@@ -9950,9 +10007,7 @@ class Editor {
     changedTableSize(insertIndex, sessionId) {
         const session = this.regulatorService.getSession(sessionId);
         const paragraph = ContentHelper.documentIndexToParagraphIndex(session.displayData.paragraphs, insertIndex).row;
-        session.displayData.resetAllNumberingInfo(paragraph);
         session.displayData.updateNextLineIndexes(paragraph, paragraph);
-        session.displayData.updateNumberingsDataOnChange(paragraph + 1);
         this.focus();
         this.onContentChange();
     }
@@ -10308,6 +10363,15 @@ class Editor {
     updateTableBordersSubscription() {
         return this.editorService.updateTableBorders$.subscribe(x => this.applyTableCellsStyles(x, (data, table, selection) => TableOperationsHelper.getApplyTableCellsBorders(data, table, selection)));
     }
+    selectSpacingSubscription() {
+        return this.editorService.selectSpacing$.subscribe(x => this.applyParagraphStyles(new ParagraphStyleModel({ lineSpacing: x })));
+    }
+    selectBeforeSubscription() {
+        return this.editorService.selectBefore$.subscribe(x => this.applyParagraphStyles(new ParagraphStyleModel({ spaceBefore: x })));
+    }
+    selectAfterSubscription() {
+        return this.editorService.selectAfter$.subscribe(x => this.applyParagraphStyles(new ParagraphStyleModel({ spaceAfter: x })));
+    }
     insertTextSubscription() {
         return this.editorService.insertText$.subscribe(x => {
             this.insert(x);
@@ -10412,24 +10476,18 @@ class Editor {
             let existed = this.mainSession.customComponents.edges.headersComponents.findIndex(x => x.instance.sessionId === sessionId);
             if (existed !== -1) {
                 const headers = this.mainSession.customComponents.edges.headersComponents.slice(existed + 1);
-                headers.forEach(x => {
-                    x.instance.session.displayData.resetAllNumberingInfo(0);
-                    x.instance.session.displayData.updateNextLineIndexes(0, x.instance.session.displayData.paragraphs.length - 1);
-                });
+                headers.forEach(x => x.instance.session.displayData.updateNextLineIndexes(0, x.instance.session.displayData.paragraphs.length - 1));
             }
             else {
                 existed = this.mainSession.customComponents.edges.footersComponents.findIndex(x => x.instance.sessionId === sessionId);
                 const footers = this.mainSession.customComponents.edges.footersComponents.slice(existed + 1);
-                footers.forEach(x => {
-                    x.instance.session.displayData.resetAllNumberingInfo(0);
-                    x.instance.session.displayData.updateNextLineIndexes(0, x.instance.session.displayData.paragraphs.length - 1);
-                });
+                footers.forEach(x => x.instance.session.displayData.updateNextLineIndexes(0, x.instance.session.displayData.paragraphs.length - 1));
             }
         });
     }
     commentCreationSubscriptions() {
         return [
-            this.editorService.addCommentAtSelection$.subscribe(() => this.onCreateComment()),
+            this.editorService.addCommentAtSelection$.subscribe(x => this.onCreateComment(x)),
             this.editorService.commentCreated$.subscribe(x => this.onCommentCreated(x.reqId, x.commentId))
         ];
     }
@@ -10449,6 +10507,12 @@ class Editor {
     setComentsVisibilitySubscription() {
         return this.editorService.setCommentsVisibility$.subscribe(x => this.onSetCommentsVisibility(x));
     }
+    getCommentTextSubscription() {
+        return this.editorService.getCommentText$.subscribe(x => this.onGetCommentText(x.commentId, x.continueWith));
+    }
+    replaceCommentTextSubscription() {
+        return this.editorService.replaceCommentText$.subscribe(x => this.onCommentTextReplace(x.commentId, x.newContent));
+    }
     recreateMainSession() {
         while (this.regulatorService.sessions.length > 0) {
             const session = this.regulatorService.sessions[0];
@@ -10502,7 +10566,7 @@ class Editor {
         const mainRect = this.mainRenderer.container.getBoundingClientRect();
         const rect = this.renderer.container.getBoundingClientRect();
         const hintX = mainRect.right - 20;
-        const hintY = rect.top + cursor.pageY + cursor.lineHeight / 2 - 20;
+        const hintY = rect.top + cursor.pageY + cursor.height / 2 - 20;
         this.overlayService.open(CommentPopupComponent, {}, hintX, hintY);
         event?.stopPropagation();
     }
@@ -10570,7 +10634,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$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 }); }
+    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$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.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: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorSearchBarComponent, decorators: [{
             type: Component,
@@ -10687,10 +10751,47 @@ class CellSessionSourceModel {
     }
 }
 
+const DisplayValue = {
+    char: 1,
+    customContent: 3,
+    table: 4,
+    pageBreak: 5,
+    lineBreak: 6,
+    punctuation: 9,
+    space: 10,
+    tab: 11,
+    paragraph: 13,
+    hyphen: 14
+};
+
 class DisplayToken {
+    get isSpace() {
+        return this.displayValue === DisplayValue.space;
+    }
+    get isParagraph() {
+        return this.displayValue === DisplayValue.paragraph;
+    }
+    get isPageBreak() {
+        return this.displayValue === DisplayValue.pageBreak;
+    }
+    get isLineBreak() {
+        return this.displayValue === DisplayValue.lineBreak;
+    }
+    get isTab() {
+        return this.displayValue === DisplayValue.tab;
+    }
+    get isTable() {
+        return this.displayValue === DisplayValue.table;
+    }
+    get isWhiteSpace() {
+        return this.isSpace || this.isParagraph;
+    }
     get breaksLine() {
         return this.isPageBreak || this.isLineBreak;
     }
+    get breakable() {
+        return this.displayValue !== DisplayValue.char && this.displayValue !== DisplayValue.punctuation;
+    }
     constructor(fields) {
         if (!fields) {
             return;
@@ -10699,79 +10800,28 @@ class DisplayToken {
     }
 }
 
-class IndentModel {
-    constructor(firstLine, hanging, left, right) {
-        this.firstLine = firstLine;
-        this.hanging = hanging;
-        this.left = left;
-        this.right = right;
+class NoderTabComponent extends BaseNoderComponent {
+    get tab() {
+        return this.content;
     }
-}
-
-class LineInfoModel {
-    constructor(fields) {
-        if (!fields) {
-            return;
-        }
-        Object.assign(this, fields);
-    }
-}
-
-class DisplayTokenHelper {
-    static getDisplayValue(charCode) {
-        if (charCode === 32) {
-            return DisplayValue.space;
-        }
-        if ((charCode > 39 && charCode < 48) || (charCode > 57 && charCode < 64)) {
-            return DisplayValue.punctuation;
-        }
-        return DisplayValue.char;
-    }
-    static getLineInfoFromToken(prevToken, firstWrapToken, wrapTokens, isAfterPageBreak) {
-        const info = new LineInfoModel({
-            width: 0,
-            height: 0,
-            align: prevToken.align,
-            indent: new IndentModel(prevToken.indentFirstLine, prevToken.indentHanging, prevToken.indentLeft, prevToken.indentRight),
-            offsetBefore: prevToken.indentBefore,
-            offsetAfter: prevToken.indentAfter,
-            lineSpacing: prevToken.lineSpacing,
-            markerWidth: prevToken.markerWidth,
-            isAfterPageBreak,
-            isEndedByPageBreak: prevToken.isPageBreak,
-            isNumbering: prevToken.isNumbering
-        });
-        if (firstWrapToken) {
-            info.align = firstWrapToken.align;
-            info.indent.firstLine = firstWrapToken.indentFirstLine;
-            info.indent.hanging = firstWrapToken.indentHanging;
-            info.indent.left = firstWrapToken.indentLeft;
-            info.indent.right = firstWrapToken.indentRight;
-            info.offsetBefore = firstWrapToken.indentBefore;
-            info.offsetAfter = firstWrapToken.indentAfter;
-            info.lineSpacing = firstWrapToken.lineSpacing;
-            info.hasTable = firstWrapToken.isTable;
-            info.isNumbering = firstWrapToken.isNumbering;
-            info.markerWidth = firstWrapToken.markerWidth;
-        }
-        let maxAscent = 0;
-        let maxDescent = 0;
-        const tokens = isAfterPageBreak && !wrapTokens.length ? [prevToken] : wrapTokens;
-        for (const wrapToken of tokens) {
-            if (maxAscent < wrapToken.ascent) {
-                maxAscent = wrapToken.ascent;
-            }
-            if (maxDescent < wrapToken.descent) {
-                maxDescent = wrapToken.descent;
-            }
-            info.width += wrapToken.width;
-        }
-        info.maxAscent = maxAscent;
-        info.height = maxAscent + maxDescent;
-        info.offsetAfter = info.height * (info.lineSpacing - 1);
-        return info;
+    set tab(val) {
+        this.content = val;
     }
+    initialize() {
+        this.applySize(this.tab.width);
+    }
+    applySize(width) {
+        this.width.set(ScalingHelper.scale(width, this.generalProperties.scalingRatio));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTabComponent, isStandalone: false, selector: "app-nod-tab", host: { properties: { "style.min-width.px": "width()" } }, usesInheritance: true, ngImport: i0, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nod-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, host: {
+                        '[style.min-width.px]': 'width()'
+                    }, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"] }]
+        }] });
 
 class CellDataModel {
     constructor(cell, cellContentHeight, componentRef) {
@@ -11000,7 +11050,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$1.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.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,
@@ -11195,13 +11245,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableOverlayMenuComponent, deps: [{ token: EditorService }, { token: OverlayService }, { token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TableOverlayMenuComponent, isStandalone: false, selector: "app-nod-table-overlay-menu", inputs: { selectionRange: "selectionRange", targets: "targets", canRemoveRows: "canRemoveRows", canRemoveColumns: "canRemoveColumns", tableInsertIndex: "tableInsertIndex", sessionId: "sessionId" }, ngImport: i0, template: "<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsAbove()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsAboveMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsBelow()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsBelowMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsLeft()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsLeftMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsRight()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsRightMessage }}\n</div>\n<ng-container *ngIf=\"canRemoveRows || canRemoveColumns\">\n    <div class=\"menu-separator\">\n        <div class=\"menu-separator-top\"></div>\n        <div class=\"menu-separator-bottom\"></div>\n    </div>\n    <div\n        *ngIf=\"canRemoveRows\"\n        class=\"menu-item\"\n        (click)=\"onRemoveRows()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeRowsMessage }}\n    </div>\n    <div\n        *ngIf=\"canRemoveColumns\"\n        class=\"menu-item\"\n        (click)=\"onRemoveColumns()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeColumnsMessage }}\n    </div>\n    <div\n        class=\"menu-item\"\n        (click)=\"onRemoveTable()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeTableMessage }}\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;border:1px solid transparent;border-radius:4px;box-shadow:0 2px 6px 2px #3c404326;overflow-y:auto;background:#fff;cursor:default;font-size:13px;margin:0;padding:6px 0}.menu-item{display:flex;flex-direction:row;align-items:center;cursor:pointer;min-height:20px;color:#202124;font-size:16px;letter-spacing:.2px;line-height:20px;padding:6px}.menu-item:hover{background-color:#0000001a}.mat-icon{margin-right:6px;width:20px;height:20px;font-size:20px}.menu-separator{-webkit-user-select:none;user-select:none}.menu-separator .menu-separator-top{padding:4px}.menu-separator .menu-separator-bottom{border-top:1px solid #dadce0;padding:4px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableOverlayMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-nod-table-overlay-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsAbove()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsAboveMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsBelow()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsBelowMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsLeft()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsLeftMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsRight()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsRightMessage }}\n</div>\n<ng-container *ngIf=\"canRemoveRows || canRemoveColumns\">\n    <div class=\"menu-separator\">\n        <div class=\"menu-separator-top\"></div>\n        <div class=\"menu-separator-bottom\"></div>\n    </div>\n    <div\n        *ngIf=\"canRemoveRows\"\n        class=\"menu-item\"\n        (click)=\"onRemoveRows()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeRowsMessage }}\n    </div>\n    <div\n        *ngIf=\"canRemoveColumns\"\n        class=\"menu-item\"\n        (click)=\"onRemoveColumns()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeColumnsMessage }}\n    </div>\n    <div\n        class=\"menu-item\"\n        (click)=\"onRemoveTable()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeTableMessage }}\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;border:1px solid transparent;border-radius:4px;box-shadow:0 2px 6px 2px #3c404326;overflow-y:auto;background:#fff;cursor:default;font-size:13px;margin:0;padding:6px 0}.menu-item{display:flex;flex-direction:row;align-items:center;cursor:pointer;min-height:20px;color:#202124;font-size:16px;letter-spacing:.2px;line-height:20px;padding:6px}.menu-item:hover{background-color:#0000001a}.mat-icon{margin-right:6px;width:20px;height:20px;font-size:20px}.menu-separator{-webkit-user-select:none;user-select:none}.menu-separator .menu-separator-top{padding:4px}.menu-separator .menu-separator-bottom{border-top:1px solid #dadce0;padding:4px}\n"] }]
-        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }, { type: i3.TranslateService }], propDecorators: { selectionRange: [{
+        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }, { type: i6.TranslateService }], propDecorators: { selectionRange: [{
                 type: Input
             }], targets: [{
                 type: Input
@@ -12008,195 +12058,156 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{ selector: 'app-nod-table', template: '', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{position:relative}:host::ng-deep table{position:relative;border-collapse:collapse;background:transparent;empty-cells:show;border-spacing:0;overflow:visible;table-layout:fixed}:host::ng-deep td{position:relative;vertical-align:top;border:1px solid #000;margin:0;padding:0;height:inherit}:host::ng-deep .hidden-cell{display:none;cursor:not-allowed}:host::ng-deep .resizer-border{position:absolute;border:solid .5px blue;z-index:1}\n"] }]
         }], ctorParameters: () => [{ type: ComponentService }, { type: i0.ElementRef }, { type: OverlayService }, { type: RegulatorService }] });
 
-class NumberingDataModel {
-    constructor(fields) {
-        if (!fields) {
-            return;
-        }
-        Object.assign(this, fields);
-    }
-}
-
-class NumberingParagraphStyleModel extends ParagraphStyleModel {
-    constructor(fields) {
-        super();
-        this.numberingType = null;
-        this.numberingLevelsStyles = null;
-        if (!fields) {
-            return;
-        }
-        Object.assign(this, fields);
-    }
-}
-
-class NumberingHelper {
-    static getStyles(paragraphStyle, numberings) {
-        const numberingLevels = numberings.find(x => x.numberingId === paragraphStyle.numberingId).levels;
-        const numberingLevelsStyles = numberingLevels.reduce((prev, next) => `${prev}${next.marker}${next.markerType}`, '');
-        const level = numberingLevels.find(x => x.level === paragraphStyle.numberingLevel);
-        return new NumberingParagraphStyleModel({ ...paragraphStyle, numberingType: level.markerType, numberingLevelsStyles });
-    }
-    static find(numberings, id, level) {
-        const numbering = numberings.find(x => x.numberingId === id);
-        return numbering?.levels.find(x => x.level === level);
-    }
-    static calculateNumberingInfo(numberingId, level, marker, numberingInfo, numberings) {
-        const numberingModel = this.find(numberings, numberingId, level);
-        if (numberingModel?.markerType === NumberingMarkerType.Bullet) {
-            return;
+class DisplayTokenHelper {
+    static getDisplayValue(charCode, breakType) {
+        if (breakType === BreakTypes.Page) {
+            return DisplayValue.pageBreak;
         }
-        this.calculateMarkerIndexes(numberingId, level, marker, numberingInfo);
-    }
-    static calculateMarkerIndexes(numberingId, level, marker, numberingInfo) {
-        if (!numberingId) {
-            return;
+        if (breakType === BreakTypes.TextWrapping) {
+            return DisplayValue.lineBreak;
         }
-        if (!numberingInfo[numberingId]?.length || !numberingInfo[numberingId][level]) {
-            numberingInfo[numberingId] ??= [];
-            return;
+        if (charCode === 32) {
+            return DisplayValue.space;
         }
-        if (!numberingInfo[numberingId][level]?.visited) {
-            if (!marker) {
-                numberingInfo[numberingId][level].markerIndex++;
-                return;
-            }
-            this.updateNumberingInfo(numberingInfo, marker, numberingId, level);
+        if (charCode === 45) {
+            return DisplayValue.hyphen;
         }
-        else {
-            numberingInfo[numberingId][level].markerIndex++;
-            for (let i = 0; i < numberingInfo[numberingId].length; i++) {
-                if (i >= level + 1) {
-                    numberingInfo[numberingId][i].markerIndex = 0;
-                }
-                else {
-                    if (numberingInfo[numberingId][i].markerIndex === 0) {
-                        numberingInfo[numberingId][i].markerIndex++;
-                    }
-                }
-            }
+        if ((charCode > 39 && charCode < 48) || (charCode > 57 && charCode < 64)) {
+            return DisplayValue.punctuation;
         }
+        return DisplayValue.char;
     }
-    static getMarker(levelModel, numberingId, paragraphs, paragraphIndex, numberingInfo) {
-        let resultMarker = levelModel.marker;
-        let index = resultMarker.indexOf('%');
-        if (index === -1) {
-            return resultMarker;
-        }
-        if (numberingInfo[numberingId]?.length && numberingInfo[numberingId][levelModel.level]) {
-            return this.createMarkerString(numberingInfo, numberingId, levelModel.level);
-        }
-        while (index !== -1) {
-            const symbolLevelNumber = Number(resultMarker[index + 1]) - 1;
-            const levelIndex = this.getLevelIndex(paragraphs, paragraphIndex, numberingId, symbolLevelNumber);
-            const count = levelModel.startValue + levelIndex;
-            resultMarker = resultMarker.slice(0, index) + count.toString() + resultMarker.slice(index + 2);
-            index = resultMarker.indexOf('%');
-        }
-        numberingInfo[numberingId] ??= [];
-        this.updateNumberingInfo(numberingInfo, resultMarker, numberingId, levelModel.level);
-        const markerLevels = resultMarker.split('.');
-        if (levelModel.level !== 0 && markerLevels[markerLevels.length - 1] === '') {
-            return resultMarker.slice(0, -1);
-        }
-        return resultMarker;
+    static getParagraphToken(paragraphSymbolStyle) {
+        const size = FontMetrics.measureCharSize('0', ContentStyleHelper.getFontStylesString(paragraphSymbolStyle));
+        return new DisplayToken({ ...size, displayValue: DisplayValue.paragraph });
     }
-    static createDataModel(numberings, paragraphs, paragraphIndex, numberingInfo) {
-        const paragraph = paragraphs[paragraphIndex];
-        const numberingId = paragraph?.paragraphStyle.numberingId;
-        if (!numberingId) {
-            return new NumberingDataModel({ numberingId: null });
-        }
-        const level = paragraph.paragraphStyle.numberingLevel;
-        const numberingLevelModel = this.find(numberings, numberingId, level);
-        for (let i = 0; i < level; i++) {
-            if (!numberingInfo[numberingId] || !numberingInfo[numberingId][i]) {
-                const numberingLevel = this.find(numberings, numberingId, i);
-                this.getMarker(numberingLevel, numberingId, paragraphs, paragraphIndex, numberingInfo);
-            }
+    static getSymbolToken(code, size, breakType) {
+        const result = new DisplayToken({ ...size, displayValue: DisplayTokenHelper.getDisplayValue(code, breakType) });
+        if (result.isSpace) {
+            result.ascent = 0;
+            result.descent = 0;
+            result.height = 0;
         }
-        const marker = this.getMarker(numberingLevelModel, numberingId, paragraphs, paragraphIndex, numberingInfo);
-        return new NumberingDataModel({ numberingId, level, marker });
+        return result;
     }
-    static updateMarkerData(properties, paragraph, paragraphTextStyle, paragraphStyle) {
-        const numberingLevel = NumberingHelper.find(properties.numberings, paragraph.numberingData.numberingId, paragraph.numberingData.level);
-        const markerTextStyle = ContentStyleHelper.combineTextStyles(numberingLevel.markerStyle, paragraphTextStyle);
-        const markerSizes = NumberingHelper.getMarkerSizes(paragraph.numberingData.marker, markerTextStyle);
-        paragraph.numberingData.markerTextStyle = markerTextStyle;
-        paragraph.numberingData.width = markerSizes.width;
-        paragraph.numberingData.height = markerSizes.height;
-        const indentLeft = paragraphStyle.indentLeft !== null ? paragraphStyle.indentLeft : numberingLevel.indentLeft;
-        let indent = 0;
-        if (paragraphStyle.indentHanging === null && paragraphStyle.indentFirstLine === null) {
-            indent = -numberingLevel.indentHanging;
-        }
-        else {
-            indent = paragraphStyle.indentHanging !== null ? -paragraphStyle.indentHanging : paragraphStyle.indentFirstLine;
-        }
-        paragraph.numberingData.paddingLeft = indentLeft + indent;
+    static getComponentToken(component, size) {
+        const ascent = component.instance.ascent() ?? 0;
+        const descent = component.instance.descent() ?? 0;
+        let displayValue = component.instance instanceof NoderTabComponent ? DisplayValue.tab : DisplayValue.customContent;
+        displayValue = component.instance instanceof NoderTableComponent ? DisplayValue.table : displayValue;
+        return new DisplayToken({
+            width: component.instance.width(),
+            height: ascent + descent,
+            font: size.font,
+            ascent,
+            descent,
+            displayValue
+        });
     }
-    static getMarkerSizes(marker, markerStyle) {
-        let width = 0;
-        let height = 0;
-        const markerStylesString = ContentStyleHelper.getFontStylesString(markerStyle);
-        for (let char of marker) {
-            const markerCharSizes = FontMetrics.measureCharSize(char, markerStylesString);
-            width += markerCharSizes.width;
-            if (height < markerCharSizes.height) {
-                height = markerCharSizes.height;
-            }
-        }
-        return { height, width };
+}
+
+class IndentModel {
+    constructor(firstLine, hanging, left, right, markerWidth) {
+        this.firstLine = firstLine;
+        this.hanging = hanging;
+        this.left = left;
+        this.right = right;
+        this.markerWidth = markerWidth;
     }
-    static updateNumberingInfo(numberingInfo, marker, numberingId, level) {
-        if (!numberingInfo[numberingId]) {
+}
+
+class LineInfoModel {
+    constructor(fields) {
+        if (!fields) {
             return;
         }
-        const markerLevels = this.getLevelInfo(marker);
-        const lastMarkerLevel = markerLevels.length - 1;
-        numberingInfo[numberingId][level] = {
-            markerIndex: markerLevels[lastMarkerLevel],
-            markerLevel: Math.min(lastMarkerLevel, level),
-            visited: true
-        };
+        Object.assign(this, fields);
     }
-    static getLevelIndex(paragraphs, paragraphIndex, numberingId, numberingLevel) {
-        let index = 0;
-        let isOnlySubLevelsBefore = false;
-        for (let i = paragraphIndex; i >= 0; i--) {
-            if (paragraphs[i].paragraphStyle.numberingId !== numberingId) {
-                continue;
-            }
-            if (paragraphs[i].paragraphStyle.numberingLevel < numberingLevel) {
-                break;
-            }
-            if (paragraphs[i].paragraphStyle.numberingLevel > numberingLevel) {
-                isOnlySubLevelsBefore = true;
+}
+
+class LineInfoHelper {
+    static get(tokens, isAfterPageBreak, isLastLine, style, indent, isNumbering, width, defaultHeight, defaultAscent) {
+        const result = new LineInfoModel({
+            isAfterPageBreak,
+            isEndedByPageBreak: tokens[tokens.length - 1].isPageBreak,
+            backgroundColor: style.backgroundColor,
+            align: style.alignment ?? DEFAULT_PARAGRAPH_STYLE.alignment,
+            indent,
+            offsetBefore: DEFAULT_PARAGRAPH_STYLE.spaceBefore,
+            lineSpacing: style.lineSpacing ?? DEFAULT_PARAGRAPH_STYLE.lineSpacing,
+            isNumbering,
+            hasTable: false,
+            width: 0
+        });
+        let maxAscent = 0;
+        let maxDescent = 0;
+        for (const token of tokens) {
+            if (maxAscent < token.ascent) {
+                maxAscent = token.ascent;
+            }
+            if (maxDescent < token.descent) {
+                maxDescent = token.descent;
+            }
+            result.width += token.width;
+        }
+        result.height = maxAscent + maxDescent;
+        result.ascent = maxAscent;
+        if (result.height === 0) {
+            result.height = defaultHeight;
+            result.ascent = defaultAscent;
+        }
+        result.offsetAfter = result.height * (result.lineSpacing - 1);
+        if (style.alignment === Alignment$1.justify && !isLastLine) {
+            let right = tokens.length - 1;
+            let adjustableWidth = result.width;
+            while (right > 0 && tokens[right].isSpace) {
+                adjustableWidth -= tokens[right].width;
+                right--;
+            }
+            let left = 0;
+            while (left < tokens.length - 1 && tokens[left].isSpace) {
+                left++;
+            }
+            let spaces = 0;
+            for (let i = right; i > left; i--) {
+                if (tokens[i].isTab) {
+                    left = i;
+                }
+                if (tokens[i].isSpace) {
+                    spaces++;
+                }
             }
-            else {
-                index++;
-                isOnlySubLevelsBefore = false;
+            const indentWidth = (indent.left ?? 0) + (indent.right ?? 0) + (indent.firstLine ?? 0) - (indent.hanging ?? 0);
+            const availableWidth = width - indentWidth - indent.markerWidth; // todo: use NumberingHelper.getOffsetCausedByMarker
+            const whitespaceDeficit = availableWidth - adjustableWidth;
+            if (spaces > 0 && whitespaceDeficit > 0) {
+                result.wordSpacing = whitespaceDeficit / spaces;
+                result.width = availableWidth;
+                result.wordSpacingStart = left;
+                result.wordSpacingEnd = right;
+                for (let i = right; i > left; i--) {
+                    if (tokens[i].isSpace) {
+                        tokens[i].width += result.wordSpacing;
+                    }
+                }
             }
         }
-        index = isOnlySubLevelsBefore ? index + 1 : index;
-        return index <= 0 ? 0 : index - 1;
-    }
-    static getLevelInfo(input) {
-        return input
-            .split('.')
-            .filter(x => !!x)
-            .map(x => parseInt(x));
+        return result;
     }
-    static createMarkerString(numberingInfo, numberingId, level) {
-        if (level === 0) {
-            return numberingInfo[numberingId][level].markerIndex + '.';
-        }
-        let marker = [];
-        let { markerLevel, markerIndex } = numberingInfo[numberingId][level];
-        for (let i = 0; i < markerLevel; i++) {
-            marker.push(numberingInfo[numberingId][i].markerIndex);
+    static getFirstLineIndent(model, paragraphIndex, generalProperties) {
+        const paragraph = model.paragraphs[paragraphIndex];
+        const paragraphStyle = paragraph.paragraphStyle;
+        if (paragraphStyle.numberingId === null) {
+            return 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, 0);
         }
-        marker.push(markerIndex);
-        return marker.join('.');
+        const levelsModel = NumberingHelper.findNumberingLevels(generalProperties.numberings, paragraphStyle.numberingId);
+        const paragraphFormat = FormatStyleHelper.getFormatAtIndex(model.formats, paragraph.insertIndex);
+        const markerTextStyle = ContentStyleHelper.combineTextStyles(levelsModel[paragraphStyle.numberingLevel].markerStyle, paragraphFormat.textStyle);
+        const marker = NumberingHelper.getMarker(levelsModel, paragraphStyle.numberingLevel, paragraphStyle.numberingId, generalProperties.numberingInfo);
+        const markerWidth = NumberingHelper.getMarkerSizes(marker, markerTextStyle).width;
+        return new IndentModel(paragraph.paragraphStyle.indentFirstLine ?? DEFAULT_PARAGRAPH_STYLE.indentFirstLine, DEFAULT_PARAGRAPH_STYLE.indentHanging, paragraph.paragraphStyle.indentLeft !== null
+            ? paragraph.paragraphStyle.indentLeft
+            : levelsModel[paragraphStyle.numberingLevel].indentLeft, paragraph.paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight, markerWidth + markerWidth / marker.length);
     }
 }
 
@@ -12279,20 +12290,14 @@ class PageFormat {
     }
 }
 
-class TextLineInfo {
+class TextLineInfo extends LineInfoModel {
     constructor(offsetMargin, contentWidth, align, indent, fields) {
+        super(fields);
         this.paddingLeft = 0;
         this.offsetMargin = 0;
-        this.offsetBefore = 0;
-        this.offsetAfter = 0;
         this.firstLinePageOffset = 0; // for selection
         this.endPageOffset = 0; // for selection
         this.screenLine = 0;
-        this.isAfterPageBreak = false;
-        this.isEndedByPageBreak = false;
-        if (fields) {
-            Object.assign(this, fields);
-        }
         this.indentFirstLine = indent.firstLine;
         this.offsetMargin = offsetMargin;
         this.indentLeft = indent.left;
@@ -12414,47 +12419,6 @@ class ParagraphInfosRemoved {
     }
 }
 
-class ParagraphStyleHelper {
-    static getParagraphsAtRange(paragraphs, startIndex, endIndex) {
-        if (!paragraphs?.length) {
-            return [];
-        }
-        let firstModifierIndexInRange = paragraphs.findIndex(paragraph => paragraph.insertIndex >= startIndex);
-        firstModifierIndexInRange = firstModifierIndexInRange === -1 ? paragraphs.length : firstModifierIndexInRange;
-        let lastModifierIndexInRange = paragraphs.findIndex(x => x.insertIndex >= endIndex);
-        lastModifierIndexInRange =
-            startIndex === endIndex || lastModifierIndexInRange === -1 ? firstModifierIndexInRange : lastModifierIndexInRange;
-        return paragraphs.slice(firstModifierIndexInRange, lastModifierIndexInRange + 1);
-    }
-    static getParagraphAtIndex(paragraphs, insertIndex) {
-        if (!paragraphs?.length) {
-            return null;
-        }
-        let startIndex = 0;
-        let endIndex = paragraphs.length - 1;
-        while (startIndex <= endIndex) {
-            const middleIndex = Math.round((startIndex + endIndex) / 2);
-            const paragraph = paragraphs[middleIndex];
-            if (paragraph.insertIndex < insertIndex) {
-                startIndex = middleIndex + 1;
-            }
-            else {
-                endIndex = middleIndex - 1;
-            }
-        }
-        return paragraphs[startIndex];
-    }
-    static isEndOfParagraph(paragraphs, endIndex) {
-        const paragraph = this.getParagraphAtIndex(paragraphs, endIndex);
-        let paragraphIndex = paragraphs.findIndex(x => x === paragraph);
-        const endOfParagraphIsParagraph = paragraph && endIndex === paragraph.insertIndex && paragraphs.length - 1 > paragraphIndex;
-        if (endOfParagraphIsParagraph) {
-            paragraphIndex += 1;
-        }
-        return paragraphs[paragraphIndex].insertIndex === endIndex + 1;
-    }
-}
-
 var TabAlignment;
 (function (TabAlignment) {
     TabAlignment[TabAlignment["Left"] = 0] = "Left";
@@ -12464,14 +12428,6 @@ var TabAlignment;
     TabAlignment[TabAlignment["Bar"] = 4] = "Bar";
 })(TabAlignment || (TabAlignment = {}));
 
-class TabHelper {
-    static calculateTabWidth(rowWidth, defaultTabWidth, tabSettings) {
-        const tabs = tabSettings ?? [];
-        const nextSetting = tabs.find(x => x.position > rowWidth);
-        return nextSetting ? nextSetting.position - rowWidth : defaultTabWidth - (rowWidth % defaultTabWidth);
-    }
-}
-
 class DisplayData extends EventEmitting {
     get maxPageWidth() {
         let max = 0;
@@ -12498,7 +12454,6 @@ class DisplayData extends EventEmitting {
         this.paragraphs = [];
         this.pagesFormat = [];
         this.allPagesHeight = 0;
-        this.tabTokens = [];
         this.ParagraphInfoChanges = new Subject();
         this.lastParagraphId = 0;
         this.updateDataForModel();
@@ -12765,26 +12720,36 @@ class DisplayData extends EventEmitting {
         }
         if (paragraphSettings.numberingData.numberingId !== null) {
             const paragraphFormat = FormatStyleHelper.getFormatAtIndex(this.model.formats, this.model.paragraphs[index].insertIndex);
-            NumberingHelper.updateMarkerData(this.generalProperties, paragraphSettings, paragraphFormat.textStyle, this.model.paragraphs[index].paragraphStyle);
+            NumberingHelper.updateMarkerData(this.generalProperties.numberings, paragraphSettings, paragraphFormat.textStyle, this.model.paragraphs[index].paragraphStyle);
         }
     }
     updateNextLineIndexes(firstParagraph, lastParagraph) {
         this.updateParagraphStartIndex(firstParagraph);
         let indexOfParagraphAfterPageBreak = this.getParagraphSettings(firstParagraph - 1)?.isEndedByPageBreak ? firstParagraph : -1;
-        let firstUsedTabIndex = this.model.tabs.findIndex(x => x.insertIndex >= this.paragraphs[firstParagraph].startIndex);
+        let updateNumberingFromIndex = null;
         for (let i = firstParagraph; i <= lastParagraph; i++) {
             if (!this.paragraphs[i]) {
                 continue;
             }
-            this.tabTokens = [];
-            const sameNumberingIndex = this.findSameNumberingIndex(i);
-            let marker = this.getParagraphSettings(sameNumberingIndex)?.numberingData.marker;
-            if (sameNumberingIndex < 0 && this.getParagraphSettings(i)?.numberingData.numberingId) {
-                marker = '0.';
+            const numberingId = this.model.paragraphs[i].paragraphStyle.numberingId ?? this.getParagraphSettings(i)?.numberingData.numberingId;
+            if (numberingId) {
+                const numberingsLevels = NumberingHelper.findNumberingLevels(this.generalProperties.numberings, numberingId);
+                NumberingHelper.addValueToNumberingInfo(numberingId, this.generalProperties.numberingInfo, numberingsLevels);
+                let startNumberingParagraphIndex = i;
+                while (this.isSameNumberingId(startNumberingParagraphIndex, numberingId)) {
+                    startNumberingParagraphIndex -= 1;
+                }
+                if (updateNumberingFromIndex === null || updateNumberingFromIndex > startNumberingParagraphIndex) {
+                    updateNumberingFromIndex = startNumberingParagraphIndex;
+                }
+                if (this.model.paragraphs[i].paragraphStyle.numberingId !== this.getParagraphSettings(i)?.numberingData.numberingId) {
+                    const updatedNumberingId = this.getParagraphSettings(i)?.numberingData.numberingId ?? this.model.paragraphs[i].paragraphStyle.numberingId;
+                    NumberingHelper.setNumberingNeedToRecalculate(this.generalProperties.numberingInfo, updatedNumberingId);
+                }
+                NumberingHelper.setNumberingNeedToRecalculate(this.generalProperties.numberingInfo, numberingId);
             }
-            NumberingHelper.calculateNumberingInfo(this.model.paragraphs[i].paragraphStyle.numberingId ?? this.getParagraphSettings(i)?.numberingData.numberingId ?? null, this.model.paragraphs[i].paragraphStyle.numberingLevel ?? this.getParagraphSettings(i)?.numberingData.level ?? null, marker, this.generalProperties.numberingInfo, this.generalProperties.numberings);
             const numberingData = NumberingHelper.createDataModel(this.generalProperties.numberings, this.model.paragraphs, i, this.generalProperties.numberingInfo);
-            const { splits, rowInfos } = this.getSplits(this.model, i);
+            const { splits, rowInfos } = this.splitParagraphByLines(i);
             this.paragraphs[i].nextLineIndexes = splits;
             if (indexOfParagraphAfterPageBreak === i) {
                 rowInfos[0].isAfterPageBreak = true;
@@ -12792,235 +12757,134 @@ class DisplayData extends EventEmitting {
             indexOfParagraphAfterPageBreak = rowInfos[rowInfos.length - 1].isEndedByPageBreak ? i + 1 : -1;
             this.setParagraphSettings(i, rowInfos, numberingData);
             this.updateParagraphSettingsNumberingData(i);
-            firstUsedTabIndex = this.updateParagraphTabs(firstUsedTabIndex, i);
         }
+        this.updateNumberingsDataOnChange(updateNumberingFromIndex);
         this.getParagraphSettings(lastParagraph + 1)?.setIsAfterPageBreak(indexOfParagraphAfterPageBreak > -1);
         this.updateParagraphLineNumber(firstParagraph);
         this.processParagraphsProperties(firstParagraph);
     }
+    isSameNumberingId(paragraphIndex, numberingId) {
+        if (paragraphIndex === 0) {
+            return false;
+        }
+        const startNumberingId = this.model.paragraphs[paragraphIndex].paragraphStyle.numberingId ??
+            this.getParagraphSettings(paragraphIndex)?.numberingData.numberingId;
+        return numberingId === startNumberingId;
+    }
     updateNumberingsDataOnChange(index) {
+        if (index === null) {
+            return;
+        }
         for (let i = index; i < this.paragraphs.length; i++) {
             const paragraphStyle = this.model.paragraphs[i].paragraphStyle;
             const paragraphSettings = this.getParagraphSettings(i);
             if (this.model.paragraphs[i].paragraphStyle.numberingId !== null) {
-                NumberingHelper.calculateNumberingInfo(paragraphStyle.numberingId, paragraphStyle.numberingLevel, paragraphSettings.numberingData.marker, this.generalProperties.numberingInfo, this.generalProperties.numberings);
-                paragraphSettings.numberingData = NumberingHelper.createDataModel(this.generalProperties.numberings, this.model.paragraphs, i, this.generalProperties.numberingInfo);
-                const paragraphFormat = FormatStyleHelper.getFormatAtIndex(this.model.formats, this.model.paragraphs[i].insertIndex);
-                NumberingHelper.updateMarkerData(this.generalProperties, paragraphSettings, paragraphFormat.textStyle, paragraphStyle);
+                if (this.generalProperties.numberingInfo[paragraphStyle.numberingId][paragraphStyle.numberingLevel].needToRecalculate) {
+                    NumberingHelper.calculateNumberingInfo(paragraphStyle.numberingId, paragraphStyle.numberingLevel, this.generalProperties.numberingInfo, this.generalProperties.numberings);
+                    paragraphSettings.numberingData = NumberingHelper.createDataModel(this.generalProperties.numberings, this.model.paragraphs, i, this.generalProperties.numberingInfo);
+                    const paragraphFormat = FormatStyleHelper.getFormatAtIndex(this.model.formats, this.model.paragraphs[i].insertIndex);
+                    NumberingHelper.updateMarkerData(this.generalProperties.numberings, paragraphSettings, paragraphFormat.textStyle, paragraphStyle);
+                }
             }
             const table = this.customContentService.findComponent(this.customComponents.tables, paragraphSettings.startInsertIndex);
             if (table) {
                 table.instance.updateCells();
             }
         }
+        NumberingHelper.setAllNumberingIsCalculated(this.generalProperties.numberingInfo);
         if ('pageType' in this.model) {
             this.editorService.updateEdges(this.sessionId);
         }
     }
-    resetAllNumberingInfo(paragraphIndex) {
-        for (let i = paragraphIndex; i < this.model.paragraphs.length; i++) {
-            const { numberingId } = this.model.paragraphs[i].paragraphStyle;
-            if (numberingId !== null && this.generalProperties.numberingInfo[numberingId]) {
-                this.generalProperties.numberingInfo[numberingId] = [];
-            }
-        }
-    }
-    resetNumberingInfoByTableCell(table) {
-        for (const element of table.instance.rowMatrix) {
-            for (let cell of element.cells) {
-                const { marker, numberingId, level } = cell.componentRef.instance.session.displayData.paragraphs[0].paragraphSettings.numberingData;
-                if (marker && numberingId) {
-                    NumberingHelper.updateNumberingInfo(this.generalProperties.numberingInfo, marker, numberingId, level);
-                    this.resetAllNumberingInfo(0);
-                    return;
-                }
-            }
-        }
-    }
-    updateParagraphTabs(tabIndex, paragraphIndex) {
-        const paragraphContentLength = this.getParagraphContent(paragraphIndex).length;
-        const paragraphLastIndex = this.paragraphs[paragraphIndex].startIndex + paragraphContentLength;
-        if (tabIndex === -1 ||
-            tabIndex >= this.customComponents.tabs.length ||
-            this.customComponents.tabs[tabIndex].instance.insertIndex > paragraphLastIndex) {
-            return tabIndex;
-        }
-        const startIndex = tabIndex;
-        while (this.customComponents.tabs[tabIndex] && this.customComponents.tabs[tabIndex].instance.insertIndex <= paragraphLastIndex) {
-            this.customComponents.tabs[tabIndex].instance.applySize(this.tabTokens[tabIndex - startIndex].width);
-            tabIndex++;
-        }
-        return tabIndex;
-    }
-    getSplits(model, paragraphIndex) {
-        const paragraphContent = this.getParagraphContent(paragraphIndex);
-        const strTokens = this.getDisplayTokens(model, paragraphContent, this.paragraphs[paragraphIndex].startIndex);
-        if (!strTokens.length) {
-            const defaultRowInfo = new LineInfoModel({
-                height: (DEFAULT_FONT_SIZE * 4) / 3,
-                width: 0,
-                align: DEFAULT_PARAGRAPH_STYLE.alignment,
-                indent: new IndentModel(DEFAULT_PARAGRAPH_STYLE.indentFirstLine, DEFAULT_PARAGRAPH_STYLE.indentHanging, DEFAULT_PARAGRAPH_STYLE.indentLeft, DEFAULT_PARAGRAPH_STYLE.indentRight),
-                offsetAfter: DEFAULT_PARAGRAPH_STYLE.spaceAfter,
-                offsetBefore: DEFAULT_PARAGRAPH_STYLE.spaceBefore,
-                lineSpacing: DEFAULT_PARAGRAPH_STYLE.lineSpacing,
-                isAfterPageBreak: false,
-                isEndedByPageBreak: false,
-                markerWidth: 0,
-                isNumbering: false,
-                backgroundColor: DEFAULT_PARAGRAPH_STYLE.backgroundColor
-            });
-            return { splits: [], rowInfos: [defaultRowInfo] };
-        }
+    splitParagraphByLines(paragraphIndex) {
+        const paragraph = this.paragraphs[paragraphIndex];
+        const { paragraphTokens, paragraphToken } = this.getParagraphTokens(paragraph);
         const splits = [];
         const rowInfos = [];
-        let prevToken;
-        let index = -1;
-        let initial = paragraphContent;
-        const pageFormat = this.getPageFormatAtPosition(this.paragraphs[paragraphIndex].startIndex);
-        while (index) {
-            initial = initial.slice(index > 0 ? index : 0);
-            const tokens = strTokens.slice(paragraphContent.length - initial.length);
-            if (!tokens.length) {
-                tokens.push(...this.getEmptyDisplayTokens(model, this.paragraphs[paragraphIndex].startIndex + index));
-            }
-            let wrapLimit = this.computeWrapIndex(tokens, pageFormat.contentWidth, this.generalProperties.defaultTabWidth, model.paragraphs[paragraphIndex].paragraphStyle.tabSettings);
-            if (tokens[tokens.length - 1].isPageBreak && wrapLimit === tokens.length && this.paragraphs.length > paragraphIndex + 1) {
-                wrapLimit = 0;
-            }
-            const wrapSplit = tokens[wrapLimit - 1]?.breaksLine || tokens[wrapLimit - 1]?.isTable ? wrapLimit : this.computeWrapSplit(tokens, wrapLimit);
-            const wrapTokens = tokens.slice(0, wrapSplit || undefined);
-            if (wrapTokens.length) {
-                prevToken = wrapTokens[wrapTokens.length - 1];
-            }
-            const isAfterPageBreak = !rowInfos.length ? false : rowInfos[rowInfos.length - 1].isEndedByPageBreak;
-            const lineInfo = DisplayTokenHelper.getLineInfoFromToken(prevToken, wrapTokens[0], wrapTokens, isAfterPageBreak);
-            const paragraphStyle = model.paragraphs[paragraphIndex].paragraphStyle;
-            lineInfo.backgroundColor = paragraphStyle.backgroundColor;
-            const isLastLineOfParagraph = !wrapLimit || prevToken.isLineBreak;
-            if (paragraphStyle.alignment === Alignment$1.justify && !isLastLineOfParagraph && wrapTokens.length > 1) {
-                let currentLineWidth = 0;
-                let spaceCount = wrapTokens[0].markerWidth ? 1 : 0;
-                for (let i = 0; i < wrapTokens.length; i++) {
-                    const token = wrapTokens[i];
-                    currentLineWidth += token.width;
-                    if (token.displayValue === DisplayValue.space) {
-                        if (i === wrapTokens.length - 1) {
-                            token.displayValue = DisplayValue.trailingSpace;
-                        }
-                        else {
-                            spaceCount++;
-                        }
-                    }
+        const style = this.model.paragraphs[paragraphIndex].paragraphStyle;
+        const pageFormat = this.getPageFormatAtPosition(paragraph.startIndex);
+        const defaultHeight = paragraphToken.height;
+        const defaultAscent = paragraphToken.ascent;
+        let index = 0;
+        let indent = LineInfoHelper.getFirstLineIndent(this.model, paragraphIndex, this.generalProperties);
+        do {
+            let tokens = paragraphTokens.slice(index);
+            const maxWidth = pageFormat.contentWidth - indent.right - indent.markerWidth;
+            let startWidth = indent.left + indent.firstLine - indent.hanging || 0;
+            let last = this.computeWrapIndex(tokens, startWidth, maxWidth, style.tabSettings ?? []);
+            tokens = tokens.slice(0, last + 1);
+            const width = pageFormat.contentWidth;
+            const isNumbering = index === 0 && !!indent.markerWidth;
+            const isBreak = !rowInfos.length ? false : rowInfos[rowInfos.length - 1].isEndedByPageBreak;
+            const isLast = index + last + 1 === paragraphTokens.length;
+            const info = LineInfoHelper.get(tokens, isBreak, isLast, style, indent, isNumbering, width, defaultHeight, defaultAscent);
+            for (let i = 0; i < tokens.length; i++) {
+                if (tokens[i].isTab) {
+                    const tab = this.customComponents.tabs.find(x => x.instance.insertIndex === paragraph.startIndex + index + i);
+                    tab.instance.applySize(tokens[i].width);
                 }
-                const { left, right, firstLine, hanging } = lineInfo.indent;
-                const indent = left + right + firstLine - hanging || 0;
-                const availableWidth = pageFormat.contentWidth - indent - wrapTokens[0].markerWidth;
-                const whitespaceDeficit = availableWidth - currentLineWidth;
-                if (spaceCount > 0 && whitespaceDeficit > 0) {
-                    lineInfo.wordSpacing = whitespaceDeficit / spaceCount;
-                    lineInfo.wordSpacingWidth = whitespaceDeficit;
+                else if (tokens[i].isTable) {
+                    info.hasTable = true;
                 }
             }
-            rowInfos.push(lineInfo);
-            if (!wrapLimit) {
-                break;
+            rowInfos.push(info);
+            index += last + 1;
+            if (index < paragraphTokens.length) {
+                splits.push(index);
+                indent = new IndentModel(null, null, indent.left, indent.right, 0);
             }
-            index = wrapSplit;
-            const splitsLength = splits.length;
-            const splitIndex = splitsLength ? index + splits[splitsLength - 1] : index;
-            splits.push(splitIndex);
-        }
-        this.tabTokens.push(...strTokens.filter(x => x.isTab));
-        ParagraphHelper.applyParagraphIndentsToLines(rowInfos, paragraphIndex, model.paragraphs);
+        } while (index < paragraphTokens.length);
+        ParagraphHelper.applyParagraphIndentsToLines(rowInfos, paragraphIndex, this.model.paragraphs);
         return { splits, rowInfos };
     }
-    /**
-     * Given a string, returns an array of the display characters, including tabs and spaces and custom components.
-     */
-    getDisplayTokens(model, str, startIndex) {
-        if (!str.length) {
-            return this.getEmptyDisplayTokens(model, startIndex);
-        }
-        return this.fillLineTokens(startIndex, str, model);
+    getParagraphTokens(paragraphInfo) {
+        const paragraphSymbolIndex = paragraphInfo.startIndex + paragraphInfo.content.length;
+        const { tokens, paragraphToken } = this.getTokens(paragraphInfo.startIndex, paragraphInfo.content, paragraphSymbolIndex);
+        return { paragraphTokens: tokens, paragraphToken };
+    }
+    getParagraphLineTokens(paragraphIndex, lineIndex) {
+        const paragraph = this.paragraphs[paragraphIndex];
+        const lineStart = lineIndex > 0 ? paragraph.nextLineIndexes[lineIndex - 1] : 0;
+        const lineEnd = paragraph.nextLineIndexes[lineIndex] ? paragraph.nextLineIndexes[lineIndex] : paragraph.content.length;
+        const lineContent = paragraph.content.substring(lineStart, lineEnd);
+        const paragraphSymbolIndex = paragraph.paragraphSettings.startInsertIndex + paragraph.content.length;
+        const { tokens } = this.getTokens(lineStart + paragraph.startIndex, lineContent, paragraphSymbolIndex);
+        const pageFormat = this.getPageFormatAtPosition(this.paragraphs[paragraphIndex].startIndex);
+        const paragraphStyle = this.model.paragraphs[paragraphIndex].paragraphStyle;
+        const lineInfo = paragraph.paragraphSettings.textLinesInfo[lineIndex];
+        const maxWidth = pageFormat.contentWidth - lineInfo.indent.right - lineInfo.indent.markerWidth;
+        const startWidth = lineInfo.indentLeft + lineInfo.indentFirstLine - lineInfo.indent.hanging || 0;
+        this.computeWrapIndex(tokens, startWidth, maxWidth, paragraphStyle.tabSettings ?? []); // needed to proceed a tab width correction according to the tabs complex positioning
+        const isLast = lineIndex === paragraph.nextLineIndexes.length;
+        LineInfoHelper.get(tokens, false, isLast, paragraphStyle, lineInfo.indent, lineInfo.isNumbering, pageFormat.contentWidth, 0, 0); // needed to proceed a space width correction according to the wordSpacing in case of justify alignment
+        return tokens;
     }
-    fillLineTokens(startIndex, line, model) {
-        const lineInfo = this.getLineInfoByBreakModifier(model, startIndex + line.length);
+    getTokens(contentIndex, content, paragraphSymbolIndex) {
         const tokens = [];
-        let characters = [];
-        let format = FormatStyleHelper.getFormatAtIndex(model.formats, startIndex);
-        let prevFormat = null;
-        let prevCharCode = null;
-        let prevFontString = null;
-        let prevChar = null;
-        let fontString = ContentStyleHelper.getFontStylesString(format?.textStyle);
-        let symbolChange = false;
-        for (let i = 0; i < line.length; i++) {
-            const char = line[i];
-            const size = FontMetrics.measureCharSize(char, fontString);
-            const customComponent = this.getOrGenerateComponent(startIndex, char);
-            const breakType = BreakHelper.getBreakType(model, char, startIndex);
-            if (customComponent && !breakType) {
-                const token = this.customContentService.getTokenFromComponent(customComponent, lineInfo, DisplayValue.customContent, i === 0, size);
-                tokens.push(token);
-                prevCharCode = -1;
-                prevChar = '';
-                characters = [];
-            }
-            else {
-                const charCode = char.charCodeAt(0);
-                const displayValue = DisplayTokenHelper.getDisplayValue(charCode);
-                const isFirstCharacter = i === 0;
-                const token = new DisplayToken({
-                    ...size,
-                    displayValue,
-                    align: lineInfo.align,
-                    indentFirstLine: isFirstCharacter ? lineInfo.indent.firstLine : DEFAULT_PARAGRAPH_STYLE.indentFirstLine,
-                    indentHanging: isFirstCharacter && !lineInfo.isNumbering ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
-                    indentLeft: lineInfo.indent.left,
-                    indentRight: lineInfo.indent.right,
-                    indentBefore: lineInfo.offsetBefore,
-                    indentAfter: lineInfo.offsetAfter,
-                    lineSpacing: lineInfo.lineSpacing,
-                    markerWidth: isFirstCharacter && lineInfo.isNumbering ? lineInfo.markerWidth : 0,
-                    isNumbering: lineInfo.isNumbering,
-                    isPageBreak: breakType === BreakTypes.Page,
-                    isLineBreak: breakType === BreakTypes.TextWrapping,
-                    isTab: false
-                });
-                tokens.push(token);
-                if (charCode !== prevCharCode ||
-                    !prevFormat ||
-                    !ContentStyleHelper.areSameTextStyles(format?.textStyle, prevFormat?.textStyle)) {
-                    symbolChange = true;
-                }
-                else if (i === line.length - 1) {
-                    characters.push(token);
-                    symbolChange = true;
-                }
-                else {
-                    characters.push(token);
-                }
-                if (characters.length > 1 && symbolChange) {
-                    this.processCharSizes(prevChar, prevFontString, characters);
-                    characters = [token];
-                    symbolChange = false;
-                }
-                else if (symbolChange) {
-                    characters = [token];
-                }
-                prevCharCode = charCode;
-                prevChar = char;
-            }
-            prevFormat = format;
-            prevFontString = fontString;
-            startIndex++;
-            if (startIndex > format?.endIndex) {
-                format = FormatStyleHelper.getFormatAtIndex(model.formats, startIndex);
-                fontString = ContentStyleHelper.getFontStylesString(format?.textStyle);
-            }
-        }
-        return tokens;
+        const prev = { char: '', style: null, size: null };
+        let format = FormatStyleHelper.getFormatAtIndex(this.model.formats, contentIndex);
+        let fontString = ContentStyleHelper.getFontStylesString(format.textStyle);
+        for (let i = 0; i < content.length; i++) {
+            if (content[i] !== prev.char || !prev.style || !ContentStyleHelper.areSameTextStyles(format.textStyle, prev.style)) {
+                prev.size = FontMetrics.measureCharSize(content[i], fontString);
+                prev.char = content[i];
+                prev.style = format.textStyle;
+            }
+            const customComponent = this.getOrGenerateComponent(contentIndex, content[i]);
+            const breakType = BreakHelper.getBreakType(this.model.breaks, content[i], contentIndex);
+            const token = customComponent && !breakType
+                ? DisplayTokenHelper.getComponentToken(customComponent, prev.size)
+                : DisplayTokenHelper.getSymbolToken(content.charCodeAt(i), prev.size, breakType);
+            contentIndex++;
+            if (contentIndex > format.endIndex) {
+                format = FormatStyleHelper.getFormatAtIndex(this.model.formats, contentIndex);
+                fontString = ContentStyleHelper.getFontStylesString(format.textStyle);
+            }
+            tokens.push(token);
+        }
+        const paragraphFormat = FormatStyleHelper.getFormatAtIndex(this.model.formats, paragraphSymbolIndex);
+        const paragraphToken = DisplayTokenHelper.getParagraphToken(paragraphFormat.textStyle);
+        return tokens.length ? { tokens, paragraphToken } : { tokens: [paragraphToken], paragraphToken };
     }
     getOrGenerateComponent(charIndex, char) {
         if (!this.customContentService.isSpecialMarker(char)) {
@@ -13036,12 +12900,6 @@ class DisplayData extends EventEmitting {
         const pageFormat = this.getPageFormatAtPosition(charIndex);
         return this.customContentService.generateComponent(this.model, this.customComponents, this.sessionId, this.generalProperties, pageFormat.contentWidth, charIndex);
     }
-    processCharSizes(prevChar, prevFontString, characters) {
-        const newSize = FontMetrics.measureCharSize(prevChar, prevFontString);
-        for (let item of characters) {
-            Object.assign(item, newSize);
-        }
-    }
     getPageFormatParagraphs(pageFormatIndex) {
         if (pageFormatIndex === this.pagesFormat.length - 1) {
             return this.paragraphs.filter(x => x.startIndex >= this.pagesFormat[pageFormatIndex].pageFormatModel.insertIndex);
@@ -13072,303 +12930,65 @@ class DisplayData extends EventEmitting {
         }
         return -1;
     }
-    getLineTokens(model, line, startIndex) {
-        const lineInfo = this.getLineInfoFromTextLine(startIndex + line.length);
-        if (!line.length) {
-            return this.getEmptyLineTokens(model, startIndex, lineInfo);
-        }
-        const tokens = [];
-        let characters = [];
-        let format = FormatStyleHelper.getFormatAtIndex(model.formats, startIndex);
-        let prevFormat = null;
-        let prevCharCode = null;
-        let prevFontString = null;
-        let prevChar = null;
-        let fontString = ContentStyleHelper.getFontStylesString(format?.textStyle);
-        let symbolChange = false;
-        for (let i = 0; i < line.length; i++) {
-            const char = line[i];
-            const size = FontMetrics.measureCharSize(char, fontString);
-            const customComponent = this.customContentService.getComponent(this.customComponents, char, startIndex);
-            const breakType = BreakHelper.getBreakType(model, char, startIndex);
-            if (customComponent && !breakType) {
-                const token = this.customContentService.getTokenFromComponent(customComponent, lineInfo, DisplayValue.customContent, i === 0, size);
-                tokens.push(token);
-                prevCharCode = -1;
-                prevChar = '';
-                characters = [];
+    // The index of a token which should be the last on the line
+    computeWrapIndex(displayTokens, startWidth, maxWidth, tabSettings) {
+        let width = startWidth;
+        let lastBreakable = -1;
+        const lastTab = { token: null, alignment: TabAlignment.Left, usedWidth: 0, tokenWidth: 0 };
+        for (let i = 0; i < displayTokens.length; i++) {
+            const token = displayTokens[i];
+            if (token.breaksLine) {
+                return i;
             }
-            else {
-                const charCode = char.charCodeAt(0);
-                const displayValue = DisplayTokenHelper.getDisplayValue(charCode);
-                const isFirstCharacter = i === 0;
-                const token = new DisplayToken({
-                    ...size,
-                    displayValue,
-                    align: lineInfo.align,
-                    indentFirstLine: isFirstCharacter ? lineInfo.indent.firstLine : DEFAULT_PARAGRAPH_STYLE.indentFirstLine,
-                    indentHanging: isFirstCharacter && !lineInfo.isNumbering ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
-                    indentLeft: lineInfo.indent.left,
-                    indentRight: lineInfo.indent.right,
-                    indentBefore: lineInfo.offsetBefore,
-                    indentAfter: lineInfo.offsetAfter,
-                    lineSpacing: lineInfo.lineSpacing,
-                    markerWidth: isFirstCharacter && lineInfo.isNumbering ? lineInfo.markerWidth : 0,
-                    isPageBreak: breakType === BreakTypes.Page,
-                    isLineBreak: breakType === BreakTypes.TextWrapping,
-                    isTab: false,
-                    isNumbering: lineInfo.isNumbering
-                });
-                tokens.push(token);
-                if (charCode !== prevCharCode ||
-                    !prevFormat ||
-                    !ContentStyleHelper.areSameTextStyles(format?.textStyle, prevFormat?.textStyle)) {
-                    symbolChange = true;
+            if (token.isTable) {
+                return i > 0 ? i - 1 : 0;
+            }
+            width += this.adjustLastTab(token, width, lastTab, tabSettings);
+            if (width > maxWidth && !token.isParagraph) {
+                if (i > 0) {
+                    i--;
                 }
-                else if (i === line.length - 1) {
-                    characters.push(token);
-                    symbolChange = true;
+                while (i + 1 < displayTokens.length && displayTokens[i + 1].isWhiteSpace) {
+                    i++;
                 }
-                else {
-                    characters.push(token);
+                if (displayTokens[i].isTab) {
+                    return i > 0 ? i - 1 : 0;
                 }
-                if (characters.length > 1 && symbolChange) {
-                    this.processCharSizes(prevChar, prevFontString, characters);
-                    characters = [token];
-                    symbolChange = false;
+                const breakable = displayTokens[i].breakable && !displayTokens[i].isTab;
+                if (i + 1 === displayTokens.length || breakable || displayTokens[i + 1].breakable || lastBreakable === -1) {
+                    return i;
                 }
-                else if (symbolChange) {
-                    characters = [token];
+                if (displayTokens[lastBreakable].isTab) {
+                    return lastBreakable > 0 ? lastBreakable - 1 : i;
                 }
-                prevCharCode = charCode;
-                prevChar = char;
-            }
-            prevFormat = format;
-            prevFontString = fontString;
-            startIndex++;
-            if (startIndex > format?.endIndex) {
-                format = FormatStyleHelper.getFormatAtIndex(model.formats, startIndex);
-                fontString = ContentStyleHelper.getFontStylesString(format?.textStyle);
-            }
-        }
-        return tokens;
-    }
-    findSameNumberingIndex(index) {
-        let sameNumberingIndex = index;
-        if (this.getParagraphSettings(index)?.numberingData.numberingId) {
-            while (sameNumberingIndex >= 0 &&
-                this.model.paragraphs[sameNumberingIndex].paragraphStyle.numberingId !==
-                    this.getParagraphSettings(index)?.numberingData.numberingId) {
-                sameNumberingIndex--;
-            }
-        }
-        else if (this.model.paragraphs[index].paragraphStyle.numberingId) {
-            while (sameNumberingIndex < this.paragraphs.length &&
-                this.model.paragraphs[index].paragraphStyle.numberingId !==
-                    this.getParagraphSettings(sameNumberingIndex)?.numberingData.numberingId) {
-                sameNumberingIndex++;
-            }
-        }
-        return sameNumberingIndex;
-    }
-    getEmptyDisplayTokens(model, startIndex) {
-        const lineInfo = this.getLineInfoByBreakModifier(model, startIndex);
-        return this.getEmptyLineTokens(model, startIndex, lineInfo);
-    }
-    getEmptyLineTokens(model, startIndex, lineInfo) {
-        const storedFormat = FormatStyleHelper.getFormatAtIndex(model.formats, startIndex);
-        if (!storedFormat) {
-            return [];
-        }
-        const size = FontMetrics.measureCharSize('EMPTY_LINE', ContentStyleHelper.getFontStylesString(storedFormat.textStyle));
-        size.width = 3;
-        return [
-            new DisplayToken({
-                ...size,
-                displayValue: DisplayValue.emptyLine,
-                align: lineInfo.align,
-                indentFirstLine: lineInfo.indent.firstLine,
-                indentHanging: lineInfo.isNumbering ? 0 : lineInfo.indent.hanging,
-                indentLeft: lineInfo.indent.left,
-                indentRight: lineInfo.indent.right,
-                indentBefore: lineInfo.offsetBefore,
-                indentAfter: lineInfo.offsetAfter,
-                markerWidth: lineInfo.markerWidth,
-                isNumbering: lineInfo.isNumbering,
-                isPageBreak: false,
-                isLineBreak: false,
-                isTab: false,
-                lineSpacing: lineInfo.lineSpacing
-            })
-        ];
-    }
-    getLineInfoByBreakModifier(model, index) {
-        const paragraph = ParagraphStyleHelper.getParagraphAtIndex(model.paragraphs, index);
-        if (!paragraph) {
-            return new LineInfoModel({
-                align: DEFAULT_PARAGRAPH_STYLE.alignment,
-                indent: new IndentModel(DEFAULT_PARAGRAPH_STYLE.indentFirstLine, DEFAULT_PARAGRAPH_STYLE.indentHanging, DEFAULT_PARAGRAPH_STYLE.indentLeft, DEFAULT_PARAGRAPH_STYLE.indentRight),
-                offsetBefore: DEFAULT_PARAGRAPH_STYLE.spaceBefore,
-                offsetAfter: DEFAULT_PARAGRAPH_STYLE.spaceAfter,
-                lineSpacing: DEFAULT_PARAGRAPH_STYLE.lineSpacing
-            });
-        }
-        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 {
-                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);
-        const levelModel = NumberingHelper.find(this.generalProperties.numberings, numberingId, level);
-        const paragraphFormat = FormatStyleHelper.getFormatAtIndex(model.formats, paragraph.insertIndex);
-        const markerTextStyle = ContentStyleHelper.combineTextStyles(levelModel.markerStyle, paragraphFormat.textStyle);
-        const paragraphSettings = this.getParagraphSettings(paragraphIndex);
-        let markerWidth = paragraphSettings?.numberingData?.width;
-        const marker = NumberingHelper.getMarker(levelModel, numberingId, model.paragraphs, paragraphIndex, this.generalProperties.numberingInfo);
-        const markerSizes = NumberingHelper.getMarkerSizes(marker, markerTextStyle);
-        markerWidth = markerSizes.width;
-        let indentHanging = levelModel.indentHanging;
-        let indentFirstLine = DEFAULT_PARAGRAPH_STYLE.indentFirstLine;
-        if (paragraph.paragraphStyle.indentFirstLine !== null || paragraph.paragraphStyle.indentHanging !== null) {
-            if (paragraph.paragraphStyle.indentFirstLine !== null) {
-                indentFirstLine = paragraph.paragraphStyle.indentFirstLine;
-                indentHanging = null;
+                return lastBreakable;
             }
-            else {
-                indentHanging =
-                    paragraph.paragraphStyle.indentHanging !== null ? paragraph.paragraphStyle.indentHanging : levelModel.indentHanging;
-            }
-        }
-        const indent = new IndentModel(indentFirstLine, indentHanging, paragraph.paragraphStyle.indentLeft !== null ? 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);
-        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, indent, markerWidth) {
-        return new LineInfoModel({
-            align: paragraph.paragraphStyle.alignment ?? DEFAULT_PARAGRAPH_STYLE.alignment,
-            indent,
-            offsetBefore: DEFAULT_PARAGRAPH_STYLE.spaceBefore,
-            offsetAfter: DEFAULT_PARAGRAPH_STYLE.spaceAfter,
-            lineSpacing: paragraph.paragraphStyle.lineSpacing ?? DEFAULT_PARAGRAPH_STYLE.lineSpacing,
-            isNumbering: !!markerWidth,
-            markerWidth
-        });
-    }
-    getIndentLeftFromTextLine(insertIndex) {
-        let startIndex = 0;
-        let endIndex = this.paragraphs.length - 1;
-        while (startIndex <= endIndex) {
-            const middleIndex = Math.round((startIndex + endIndex) / 2);
-            const paragraphInfo = this.paragraphs[middleIndex];
-            if (paragraphInfo.startIndex > insertIndex) {
-                startIndex = middleIndex + 1;
-            }
-            else {
-                endIndex = middleIndex - 1;
+            if (token.breakable) {
+                lastBreakable = i;
             }
         }
-        const textLinesInfo = this.paragraphs[startIndex]?.paragraphSettings.textLinesInfo;
-        return textLinesInfo ? Math.max(...textLinesInfo.map(x => x.indentLeft)) : null;
+        return displayTokens.length - 1;
     }
-    computeWrapSplit(tokens, wrapLimit) {
-        if (!tokens.length || tokens.length <= wrapLimit) {
-            return null;
+    adjustLastTab(token, position, tab, tabSettings) {
+        if (token.isTab) {
+            tab.token = token;
+            const setting = tabSettings.find(x => x.position > position);
+            const defaultTabWidth = this.generalProperties.defaultTabWidth;
+            tab.token.width = setting ? setting.position - position : defaultTabWidth - (position % defaultTabWidth);
+            tab.alignment = setting?.alignment ?? TabAlignment.Left;
+            return token.width;
         }
-        // If there is a space or tab at this split position, then making
-        // a split is simple.
-        if (wrapLimit === 0 ||
-            tokens[wrapLimit].displayValue === DisplayValue.customContent ||
-            (this.isWhiteSpace(tokens[wrapLimit - 1]) && this.isWhiteSpace(tokens[wrapLimit]))) {
-            return wrapLimit;
+        else if (tab.alignment === TabAlignment.Center && tab.token.width > 0) {
+            const width = tab.token.width > token.width / 2 ? token.width / 2 : token.width - tab.token.width;
+            tab.token.width -= tab.token.width > width ? width : tab.token.width;
+            return width;
         }
-        return this.calculateSplit(wrapLimit, tokens);
-    }
-    calculateSplit(index, tokens) {
-        for (let i = index; i >= 0; i--) {
-            if (this.isWhiteSpace(tokens[i]) || tokens[i].displayValue === DisplayValue.customContent) {
-                return i + 1;
-            }
+        else if (tab.alignment === TabAlignment.Right && tab.token.width > 0) {
+            const width = tab.token.width > token.width ? token.width : tab.token.width;
+            tab.token.width -= tab.token.width > width ? width : tab.token.width;
+            return token.width - width;
         }
-        return index;
-    }
-    isWhiteSpace(token) {
-        return [DisplayValue.space, DisplayValue.emptyLine].includes(token.displayValue);
-    }
-    /**
-     * Computes wrap index based on max row width
-     */
-    computeWrapIndex(displayTokens, contentWidth, defaultTabWidth, tabSettings) {
-        if (!displayTokens[0]) {
-            return 0;
-        }
-        if (displayTokens[0].isTable || (displayTokens[0].breaksLine && displayTokens.length === 1)) {
-            return 1;
-        }
-        const maxRowWidth = contentWidth - displayTokens[0].indentRight - displayTokens[0].markerWidth;
-        let sum = displayTokens[0].indentLeft + displayTokens[0].indentFirstLine - displayTokens[0].indentHanging || 0;
-        let prevTabIndex = null;
-        let tabCenter = null;
-        let prevTabAlignment = TabAlignment.Left;
-        for (let i = 0; i < displayTokens.length; i++) {
-            const token = displayTokens[i];
-            const prevToken = i > 0 ? displayTokens[i - 1] : null;
-            if (token.isTab) {
-                const tabs = tabSettings ?? [];
-                const nextSettingIndex = tabs.findIndex(x => x.position > sum);
-                const tokenWidth = TabHelper.calculateTabWidth(sum, defaultTabWidth, tabSettings);
-                if (nextSettingIndex >= 0 && tabs[nextSettingIndex].alignment === TabAlignment.Center) {
-                    prevTabAlignment = TabAlignment.Center;
-                    tabCenter = { stringWidth: 0, tokenWidth };
-                    token.width = tokenWidth;
-                }
-                else {
-                    prevTabAlignment = nextSettingIndex >= 0 ? tabs[nextSettingIndex].alignment : TabAlignment.Left;
-                    token.width = tokenWidth;
-                    tabCenter = null;
-                }
-                prevTabIndex = i;
-            }
-            if (prevTabAlignment === TabAlignment.Center && !token.isTab && tabCenter.stringWidth < tabCenter.tokenWidth) {
-                const tokenWidth = token.width / 2;
-                displayTokens[prevTabIndex].width -= tokenWidth;
-                tabCenter.stringWidth += tokenWidth;
-                sum += tokenWidth;
-            }
-            else if (prevTabAlignment === TabAlignment.Right && !token.isTab && displayTokens[prevTabIndex].width !== 0) {
-                if (displayTokens[prevTabIndex].width - token.width < 0) {
-                    sum += token.width - displayTokens[prevTabIndex].width;
-                    displayTokens[prevTabIndex].width = 0;
-                }
-                else {
-                    displayTokens[prevTabIndex].width -= token.width;
-                }
-            }
-            else {
-                sum += token.width;
-            }
-            if (sum >= maxRowWidth) {
-                return i > 0 ? i - 1 : 0;
-            }
-            if (prevToken?.breaksLine || token.isTable) {
-                return i;
-            }
-            if (token.isLineBreak || (i === displayTokens.length - 1 && token.isPageBreak)) {
-                return i + 1;
-            }
-        }
-        return 0;
+        return token.width;
     }
     getPreviousParagraphInfo(row) {
         if (!row || !this.paragraphs.length) {
@@ -13626,13 +13246,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.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: i6.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.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { model: [{
+        }], ctorParameters: () => [{ type: RegulatorService }, { type: EditorService }, { type: i6.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { model: [{
                 type: Input
             }], generalProperties: [{
                 type: Input
@@ -14144,35 +13764,47 @@ 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$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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-nod-image', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ImageApiService }] });
 
-class NoderTabComponent extends BaseNoderComponent {
-    get tab() {
-        return this.content;
-    }
-    set tab(val) {
-        this.content = val;
+class ParagraphStyleHelper {
+    static getParagraphsAtRange(paragraphs, startIndex, endIndex) {
+        let firstModifierIndexInRange = paragraphs.findIndex(paragraph => paragraph.insertIndex >= startIndex);
+        firstModifierIndexInRange = firstModifierIndexInRange === -1 ? paragraphs.length : firstModifierIndexInRange;
+        let lastModifierIndexInRange = paragraphs.findIndex(x => x.insertIndex >= endIndex);
+        lastModifierIndexInRange =
+            startIndex === endIndex || lastModifierIndexInRange === -1 ? firstModifierIndexInRange : lastModifierIndexInRange;
+        return paragraphs.slice(firstModifierIndexInRange, lastModifierIndexInRange + 1);
     }
-    initialize() {
-        this.applySize(this.tab.width);
+    static getParagraphAtIndex(paragraphs, insertIndex) {
+        let startIndex = 0;
+        let endIndex = paragraphs.length - 1;
+        while (startIndex <= endIndex) {
+            const middleIndex = Math.round((startIndex + endIndex) / 2);
+            const paragraph = paragraphs[middleIndex];
+            if (paragraph.insertIndex < insertIndex) {
+                startIndex = middleIndex + 1;
+            }
+            else {
+                endIndex = middleIndex - 1;
+            }
+        }
+        return paragraphs[startIndex];
     }
-    applySize(width) {
-        this.width.set(ScalingHelper.scale(width, this.generalProperties.scalingRatio));
+    static isEndOfParagraph(paragraphs, endIndex) {
+        const paragraph = this.getParagraphAtIndex(paragraphs, endIndex);
+        let paragraphIndex = paragraphs.findIndex(x => x === paragraph);
+        const endOfParagraphIsParagraph = paragraph && endIndex === paragraph.insertIndex && paragraphs.length - 1 > paragraphIndex;
+        if (endOfParagraphIsParagraph) {
+            paragraphIndex += 1;
+        }
+        return paragraphs[paragraphIndex].insertIndex === endIndex + 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTabComponent, isStandalone: false, selector: "app-nod-tab", host: { properties: { "style.width.px": "width()" } }, usesInheritance: true, ngImport: i0, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTabComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-nod-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, host: {
-                        '[style.width.px]': 'width()'
-                    }, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"] }]
-        }] });
 
 const CHARS = [
     // eslint-disable-next-line prettier/prettier
@@ -14377,7 +14009,6 @@ class EditSession {
         const endParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, endIndex).row;
         OperationsHelper.applyTextStyle(this.model, startIndex, endIndex, textStyle);
         this.provideTextStyle(startIndex, endIndex);
-        this.displayData.resetAllNumberingInfo(startParagraph);
         this.displayData.updateNextLineIndexes(startParagraph, endParagraph);
         this.setTextStyle(textStyle);
     }
@@ -14390,36 +14021,25 @@ class EditSession {
             startParagraph = this.displayData.paragraphs.findIndex(x => x.paragraphSettings.numberingData.numberingId === numberingId);
             endParagraph = this.displayData.paragraphs.findLastIndex(x => x.paragraphSettings.numberingData.numberingId === numberingId);
         }
-        this.displayData.resetAllNumberingInfo(startParagraph);
         this.displayData.updateNextLineIndexes(startParagraph, endParagraph);
         this.applyToolbarStyles();
     }
     rerender(insertIndex) {
         const paragraphIndex = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, insertIndex).row;
-        this.displayData.resetAllNumberingInfo(paragraphIndex);
         this.displayData.updateNextLineIndexes(paragraphIndex, paragraphIndex);
     }
     addNumbering(levels, startIndex, endIndex, numberingId) {
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
         const endParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, endIndex).row;
         OperationsHelper.addNumbering(this.model, this.generalProperties.numberings, startIndex, endIndex, levels, numberingId);
-        this.generalProperties.numberingInfo = {};
         this.displayData.updateNextLineIndexes(startParagraph, endParagraph);
-        for (let i = startParagraph; i <= endParagraph; i++) {
-            if (this.displayData.getParagraphSettings(i).numberingData.numberingId !== null) {
-                this.displayData.updateNumberingsDataOnChange(endParagraph + 1);
-                break;
-            }
-        }
         this.applyToolbarStyles();
     }
     removeNumberings(startIndex, endIndex) {
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
         const endParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, endIndex).row;
-        this.displayData.resetAllNumberingInfo(startParagraph);
         OperationsHelper.removeNumberings(this.model, this.generalProperties.numberings, startIndex, endIndex);
         this.displayData.updateNextLineIndexes(startParagraph, endParagraph);
-        this.displayData.updateNumberingsDataOnChange(endParagraph);
         this.applyToolbarStyles();
     }
     restoreNumberings(paragraphs, numberings) {
@@ -14427,15 +14047,8 @@ class EditSession {
         const endIndex = paragraphs[paragraphs.length - 1].insertIndex;
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
         const endPosition = ContentHelper.documentIndexToParagraphWithOffset(this.displayData.paragraphs, endIndex);
-        this.displayData.resetAllNumberingInfo(startParagraph);
         OperationsHelper.restoreNumberings(this.model, this.generalProperties.numberings, paragraphs, numberings);
         this.displayData.updateNextLineIndexes(startParagraph, endPosition.row);
-        for (const paragraph of paragraphs) {
-            if (paragraph.paragraphStyle.numberingId !== null) {
-                this.displayData.updateNumberingsDataOnChange(endPosition.row + 1);
-                break;
-            }
-        }
         this.selection.placeCursor(endPosition);
         this.applyToolbarStyles();
     }
@@ -14444,7 +14057,6 @@ class EditSession {
         imageComponentRef.instance.resize({ width: applyImage.width, height: applyImage.height });
         OperationsHelper.applyImageStyle(this.model, applyImage);
         const start = this.displayData.indexToPosition(applyImage.insertIndex, 0);
-        this.displayData.resetAllNumberingInfo(start.row);
         this.displayData.updateNextLineIndexes(start.row, this.displayData.paragraphs.length - 1);
     }
     restoreTextStyles(formats, linkFormats) {
@@ -14454,7 +14066,6 @@ class EditSession {
         const endPosition = ContentHelper.documentIndexToParagraphWithOffset(this.displayData.paragraphs, endIndex);
         OperationsHelper.restoreTextStyles(this.model, formats, linkFormats);
         this.provideTextStyle(startIndex, endIndex);
-        this.displayData.resetAllNumberingInfo(startParagraph);
         this.displayData.updateNextLineIndexes(startParagraph, endPosition.row);
         this.selection.placeCursor(endPosition);
         this.applyToolbarStyles();
@@ -14465,7 +14076,6 @@ class EditSession {
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
         const endPosition = ContentHelper.documentIndexToParagraphWithOffset(this.displayData.paragraphs, endIndex);
         OperationsHelper.restoreParagraphStyles(this.model, paragraphs);
-        this.displayData.resetAllNumberingInfo(0);
         this.displayData.updateNextLineIndexes(startParagraph, endPosition.row);
         this.selection.placeCursor(endPosition);
         this.applyToolbarStyles();
@@ -14476,7 +14086,6 @@ class EditSession {
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
         const endParagraph = ContentHelper.documentIndexToParagraphWithOffset(this.displayData.paragraphs, endIndex).row;
         OperationsHelper.applyParagraphs(this.model, paragraphs);
-        this.displayData.resetAllNumberingInfo(startParagraph);
         this.displayData.updateNextLineIndexes(startParagraph, endParagraph);
         this.applyToolbarStyles();
     }
@@ -14496,11 +14105,7 @@ class EditSession {
         CustomComponentHelper.applyRemovingComponents(this.customComponents.tabs, partIndexes.startIndex, partIndexes.endIndex);
         OperationsHelper.delete(this.model, partIndexes.startIndex, partIndexes.endIndex - partIndexes.startIndex + 1);
         this.selection.placeCursor(range.start);
-        this.displayData.resetAllNumberingInfo(range.start.row);
         this.displayData.updateNextLineIndexes(range.start.row, range.start.row);
-        if (range.end.row - range.start.row && this.type !== 'cell') {
-            this.displayData.updateNumberingsDataOnChange(range.start.row + 1);
-        }
         this.applyToolbarStyles();
     }
     replace(model) {
@@ -14562,11 +14167,7 @@ class EditSession {
             OperationsHelper.insertText(this.model, text, insertIndex);
         }
         const endPosition = this.displayData.insertText(position, text);
-        this.displayData.resetAllNumberingInfo(position.row);
         this.displayData.updateNextLineIndexes(position.row, endPosition.row);
-        if (endPosition.row - position.row && this.type !== 'cell') {
-            this.displayData.updateNumberingsDataOnChange(endPosition.row + 1);
-        }
         this.selection.placeCursor(endPosition);
         return endPosition;
     }
@@ -14589,7 +14190,6 @@ class EditSession {
         const model = this.model.elements.find(x => x.insertIndex === insertIndex);
         const type = this.customContentService.findComponentType(model.type);
         this.addComponent(this.customComponents.customElements, model, type);
-        this.displayData.resetAllNumberingInfo(position.row);
         this.displayData.updateNextLineIndexes(position.row, endPosition.row);
         this.selection.placeCursor(endPosition);
         return endPosition;
@@ -14597,15 +14197,11 @@ class EditSession {
     insertBreak(position, breakType) {
         const insertIndex = ContentHelper.paragraphPositionToDocumentIndex(this.displayData.paragraphs, position);
         const isOnNewParagraph = breakType === BreakTypes.Page &&
-            BreakHelper.getBreakType(this.model, CUSTOM_ELEMENT_MARKER, insertIndex - 1) !== BreakTypes.Page;
+            BreakHelper.getBreakType(this.model.breaks, CUSTOM_ELEMENT_MARKER, insertIndex - 1) !== BreakTypes.Page;
         const text = isOnNewParagraph ? `${NEW_LINE_MARKUP}${CUSTOM_ELEMENT_MARKER}` : CUSTOM_ELEMENT_MARKER;
         OperationsHelper.insertBreak(this.model, text, insertIndex, breakType);
         const endPosition = this.displayData.insertText(position, text);
-        this.displayData.resetAllNumberingInfo(position.row);
         this.displayData.updateNextLineIndexes(position.row, endPosition.row);
-        if (isOnNewParagraph && endPosition.row - position.row) {
-            this.displayData.updateNumberingsDataOnChange(endPosition.row);
-        }
         const cursorPosition = this.displayData.getPositionAfterBreak(endPosition, breakType);
         this.selection.placeCursor(cursorPosition);
         return endPosition;
@@ -14616,7 +14212,6 @@ class EditSession {
         const model = this.model.tabs.find(x => x.insertIndex === insertIndex);
         this.addComponent(this.customComponents.tabs, model, NoderTabComponent);
         const endPosition = this.displayData.insertText(position, CUSTOM_ELEMENT_MARKER);
-        this.displayData.resetAllNumberingInfo(position.row);
         this.displayData.updateNextLineIndexes(position.row, position.row);
         this.selection.placeCursor(endPosition);
         return endPosition;
@@ -14627,7 +14222,6 @@ class EditSession {
         const model = this.model.images.find(x => x.insertIndex === insertIndex);
         this.addComponent(this.customComponents.images, model, NoderImageComponent);
         const endPosition = this.displayData.insertText(position, CUSTOM_ELEMENT_MARKER);
-        this.displayData.resetAllNumberingInfo(position.row);
         this.displayData.updateNextLineIndexes(position.row, position.row);
         this.selection.placeCursor(endPosition);
         return endPosition;
@@ -14636,7 +14230,6 @@ class EditSession {
         const insertIndex = ContentHelper.paragraphPositionToDocumentIndex(this.displayData.paragraphs, position);
         OperationsHelper.insertLink(this.model, linkData.text, linkData.link, insertIndex);
         const endPosition = this.displayData.insertText(position, linkData.text);
-        this.displayData.resetAllNumberingInfo(position.row);
         this.displayData.updateNextLineIndexes(position.row, position.row);
         this.selection.placeCursor(endPosition);
         return endPosition;
@@ -14647,11 +14240,7 @@ class EditSession {
         const model = this.model.tables.find(x => x.insertIndex >= tableModel.insertIndex);
         this.addComponent(this.customComponents.tables, model, NoderTableComponent);
         const endPosition = this.displayData.insertText(position, text);
-        this.displayData.resetAllNumberingInfo(position.row);
         this.displayData.updateNextLineIndexes(position.row, endPosition.row);
-        if (endPosition.row - position.row) {
-            this.displayData.updateNumberingsDataOnChange(endPosition.row);
-        }
         this.selection.placeCursor(endPosition);
         return endPosition;
     }
@@ -14672,11 +14261,7 @@ class EditSession {
         CustomComponentHelper.applyRemovingComponents(this.customComponents.tabs, moveModel.sourceStartIndex, endIndex);
         const restoreModel = OperationsHelper.removeMoveRange(this.model, moveModel);
         this.selection.placeCursor(startPosition);
-        this.displayData.resetAllNumberingInfo(startPosition.row);
         this.displayData.updateNextLineIndexes(startPosition.row, endPosition.row);
-        if (endPosition.row - startPosition.row && this.type !== 'cell') {
-            this.displayData.updateNumberingsDataOnChange(startPosition.row + 1);
-        }
         this.applyToolbarStyles();
         return restoreModel;
     }
@@ -14689,11 +14274,7 @@ class EditSession {
         this.restoreElementComponents(this.model.elements, moveIndex, endIndex);
         const startPosition = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, moveIndex);
         const endPosition = this.displayData.insertText(startPosition, restoreModel.text);
-        this.displayData.resetAllNumberingInfo(startPosition.row);
         this.displayData.updateNextLineIndexes(startPosition.row, endPosition.row);
-        if (endPosition.row - startPosition.row && this.type !== 'cell') {
-            this.displayData.updateNumberingsDataOnChange(endPosition.row);
-        }
         this.selection.placeCursor(endPosition);
         this.applyToolbarStyles();
         const newStartPosition = this.displayData.indexToPosition(moveIndex, 0);
@@ -14784,11 +14365,7 @@ class EditSession {
         this.restoreComponents(this.model.images, this.customComponents.images, NoderImageComponent, model.insertIndex, restoreEndIndex);
         this.restoreComponents(this.model.tabs, this.customComponents.tabs, NoderTabComponent, model.insertIndex, restoreEndIndex);
         this.restoreElementComponents(this.model.elements, model.insertIndex, restoreEndIndex);
-        this.displayData.resetAllNumberingInfo(paragraphPosition.row);
         this.displayData.updateNextLineIndexes(paragraphPosition.row, endPoint.row);
-        if (endPoint.row - paragraphPosition.row && this.type !== 'cell') {
-            this.displayData.updateNumberingsDataOnChange(endPoint.row + 1);
-        }
         this.selection.placeCursor(endPoint);
         this.applyToolbarStyles();
     }
@@ -14821,33 +14398,28 @@ class EditSession {
     }
     insertTableRows(insertIndex, rowsCount, targetIndex, inheritIndex) {
         const table = this.customComponents.tables.find(x => x.instance.insertIndex === insertIndex);
-        this.displayData.resetNumberingInfoByTableCell(table);
         OperationsHelper.insertTableRows(this.model, insertIndex, rowsCount, targetIndex, inheritIndex);
         table.instance.updateTable();
     }
     insertTableColumns(insertIndex, columnsCount, targetIndex, inheritIndex) {
         const table = this.customComponents.tables.find(x => x.instance.insertIndex === insertIndex);
         const pageFormat = this.displayData.getPageFormatAtPosition(insertIndex);
-        this.displayData.resetNumberingInfoByTableCell(table);
         OperationsHelper.insertTableColumns(this.model, insertIndex, columnsCount, targetIndex, inheritIndex, pageFormat.contentWidth);
         table.instance.updateTable();
     }
     removeTableRows(insertIndex, startIndex, endIndex) {
         const table = this.customComponents.tables.find(x => x.instance.insertIndex === insertIndex);
-        this.displayData.resetNumberingInfoByTableCell(table);
         OperationsHelper.removeTableRows(this.model, insertIndex, startIndex, endIndex);
         table.instance.updateTable();
     }
     removeTableColumns(insertIndex, startIndex, endIndex) {
         const table = this.customComponents.tables.find(x => x.instance.insertIndex === insertIndex);
-        this.displayData.resetNumberingInfoByTableCell(table);
         const pageFormat = this.displayData.getPageFormatAtPosition(insertIndex);
         OperationsHelper.removeTableColumns(this.model, insertIndex, startIndex, endIndex, pageFormat.contentWidth);
         table.instance.updateTable();
     }
     resizeTableColumns(resizeTableColumns) {
         const table = this.customComponents.tables.find(x => x.instance.insertIndex === resizeTableColumns.insertIndex);
-        this.displayData.resetNumberingInfoByTableCell(table);
         OperationsHelper.resizeTableColumns(this.model, resizeTableColumns);
         table.instance.updateTable();
     }
@@ -15099,26 +14671,16 @@ class HighlightLayer {
         const results = [];
         for (let i = 0; i < textLinesInfo.length; i++) {
             const lineInfo = textLinesInfo[i].textLinesInfo;
-            const paragraphLineIndex = textLinesInfo[i].paragraphSettings.textLinesInfo.findIndex(x => x === textLinesInfo[i].textLinesInfo);
             if (i !== 0) {
                 top += lineInfo.firstLinePageOffset;
                 top += lineInfo.offsetBefore;
             }
-            let markerWidth = 0;
-            const numberingOffsetLeft = textLinesInfo[i].paragraphSettings.numberingData.numberingId === null
-                ? 0
-                : textLinesInfo[i].paragraphSettings.numberingData.width + textLinesInfo[i].paragraphSettings.numberingData.paddingLeft;
-            if (paragraphLineIndex === 0 &&
-                lineInfo.isNumbering &&
-                (lineInfo.indentFirstLine ||
-                    (numberingOffsetLeft - lineInfo.indentLeft > 0 && numberingOffsetLeft - lineInfo.indentLeft <= lineInfo.markerWidth))) {
-                markerWidth = lineInfo.markerWidth;
-            }
-            const left = lineInfo.paddingLeft + padding + lineInfo.offsetMargin + markerWidth;
+            const markerOffset = NumberingHelper.getOffsetCausedByMarker(textLinesInfo[i].paragraphSettings.numberingData, lineInfo);
+            const left = lineInfo.paddingLeft + padding + lineInfo.offsetMargin + markerOffset;
             let style;
             if (i === 0) {
                 const rangeInfo = this.getRangeInfo(this.session, range);
-                const width = lineInfo.width - rangeInfo.leftPos + left + (lineInfo.wordSpacingWidth ?? 0);
+                const width = lineInfo.width - rangeInfo.leftPos + left;
                 style = this.getMarkerStyle(lineInfo.height, width, top, rangeInfo.leftPos);
             }
             else if (i === textLinesInfo.length - 1) {
@@ -15127,7 +14689,7 @@ class HighlightLayer {
                 style = this.getMarkerStyle(lineInfo.height, rangeInfo.screenWidth, top, left);
             }
             else {
-                let width = lineInfo.width + (lineInfo.wordSpacingWidth ?? 0);
+                let width = lineInfo.width;
                 style = this.getMarkerStyle(lineInfo.height, width, top, left);
             }
             const result = this.renderHighlight(style, cssClass);
@@ -15157,7 +14719,7 @@ class HighlightLayer {
         }
         const top = this.getTop(screenParentRange.start.row);
         const info = this.getRangeInfo(this.session, screenParentRange);
-        this.renderHighlight(this.getMarkerStyle(elementInfo.location.height, elementInfo.location.width, top + lineInfo.maxAscent - elementInfo.location.height + elementInfo.location.top, info.leftPos + elementInfo.location.left), cssClass);
+        this.renderHighlight(this.getMarkerStyle(elementInfo.location.height, elementInfo.location.width, top + lineInfo.ascent - elementInfo.location.height + elementInfo.location.top, info.leftPos + elementInfo.location.left), cssClass);
     }
     getRangeInfo(session, range) {
         const start = range.start;
@@ -15195,7 +14757,7 @@ class CommentHighlightLayer extends HighlightLayer {
         const commentRenderRequests = [];
         for (const comment of comments) {
             const startPosition = ContentHelper.documentIndexToParagraphIndex(this.session.displayData.paragraphs, comment.startIndex);
-            const endPosition = ContentHelper.documentIndexToParagraphIndex(this.session.displayData.paragraphs, comment.endIndex);
+            const endPosition = ContentHelper.documentIndexToParagraphIndex(this.session.displayData.paragraphs, comment.endIndex + 1);
             const range = new Range(startPosition, endPosition);
             const screenRange = range.toScreenRange(this.session);
             if (config.visibleRange &&
@@ -15297,16 +14859,9 @@ class CursorLayer {
             fontSize: textStyle.fontSize,
             fontFamily: textStyle.fontFamily
         })));
-        const fontMetricHeight = metricSize.ascent + metricSize.descent;
-        const maxHeight = this.cursorPosition.sizeMax.ascent + this.cursorPosition.sizeMax.descent;
-        const fontShoulders = fontMetricHeight - metricSize.font;
-        const offset = metricSize.descent - fontShoulders;
-        let top = this.cursorPosition.pageY + this.cursorPosition.sizeMax.ascent - metricSize.font + offset;
-        if (fontMetricHeight !== maxHeight && maxHeight >= this.cursorPosition.lineHeight) {
-            top -= maxHeight - this.cursorPosition.lineHeight;
-        }
-        DomHelper.setStyle(this.cursor.style, 'top', `${top < 0 ? 0 : top}px`);
-        DomHelper.setStyle(this.cursor.style, 'height', `${fontMetricHeight}px`);
+        const top = this.cursorPosition.pageY + this.cursorPosition.ascent - metricSize.ascent;
+        DomHelper.setStyle(this.cursor.style, 'top', `${top}px`);
+        DomHelper.setStyle(this.cursor.style, 'height', `${metricSize.height}px`);
     }
     restartAnimation() {
         this.removeAnimationClass();
@@ -15322,9 +14877,8 @@ class CursorLayer {
             return;
         }
         DomHelper.setStyle(this.cursor.style, 'display', 'block');
-        const currentSize = this.cursorPosition.sizeCurrent;
         DomHelper.setStyle(this.cursor.style, 'left', `${this.cursorPosition.pageX}px`);
-        DomHelper.setStyle(this.cursor.style, 'width', `${currentSize.width}px`);
+        DomHelper.setStyle(this.cursor.style, 'width', `${this.cursorPosition.width}px`);
         this.addTextStylesToCursor();
     }
     removeAnimationClass() {
@@ -15639,7 +15193,7 @@ class Renderer extends EventEmitting {
         this.session = session;
         this.layerConfig = {
             width: 1,
-            contentRange: new DistanceModel({ start: 0, end: 0 }),
+            contentRange: new DistanceModel({ start: 0, end: 0 }), // paragraphs
             maxHeight: 1,
             offset: 0,
             height: 1,
@@ -16396,11 +15950,11 @@ class VirtualRenderer {
             this.scrollBar.setScrollTop(top);
             this.loop.schedule({ scroll: true });
         }
-        else if (this.scrollBar.scrollTop + this.container.scrollHeight < top + position.lineHeight) {
+        else if (this.scrollBar.scrollTop + this.container.scrollHeight < top + position.height) {
             if (offset) {
                 top += offset * this.container.scrollHeight;
             }
-            top += position.lineHeight - this.container.scrollHeight;
+            top += position.height - this.container.scrollHeight;
             this.scrollBar.setScrollTop(top);
             this.loop.schedule({ scroll: true });
         }
@@ -16569,22 +16123,11 @@ class CustomContentService {
         }
         return null;
     }
-    isFragmentContainComponent(components, textFragment, fragmentDistance) {
-        if (textFragment.includes(CUSTOM_ELEMENT_MARKER)) {
-            return (this.isFragmentContainComponents(components.images, fragmentDistance) ||
-                this.isFragmentContainComponents(components.tabs, fragmentDistance) ||
-                this.isFragmentContainComponents(components.customElements, fragmentDistance));
-        }
-        if (textFragment.includes(TABLE_MARKER)) {
-            return this.isFragmentContainComponents(components.tables, fragmentDistance);
-        }
-        return false;
-    }
-    getComponents(components, distance) {
-        const images = components.images.filter(x => x.instance.insertIndex >= distance.start && x.instance.insertIndex <= distance.end);
-        const tables = components.tables.filter(x => x.instance.insertIndex >= distance.start && x.instance.insertIndex <= distance.end);
-        const tabs = components.tabs.filter(x => x.instance.insertIndex >= distance.start && x.instance.insertIndex <= distance.end);
-        const custom = components.customElements.filter(x => x.instance.insertIndex >= distance.start && x.instance.insertIndex <= distance.end);
+    getComponents(components, start, end) {
+        const images = components.images.filter(x => x.instance.insertIndex >= start && x.instance.insertIndex <= end);
+        const tables = components.tables.filter(x => x.instance.insertIndex >= start && x.instance.insertIndex <= end);
+        const tabs = components.tabs.filter(x => x.instance.insertIndex >= start && x.instance.insertIndex <= end);
+        const custom = components.customElements.filter(x => x.instance.insertIndex >= start && x.instance.insertIndex <= end);
         return [...images, ...tables, ...tabs, ...custom].sort((a, b) => a.instance.insertIndex - b.instance.insertIndex);
     }
     getComponent(components, char, charIndex) {
@@ -16595,45 +16138,12 @@ class CustomContentService {
         }
         return this.findComponent(components.tables, charIndex);
     }
-    getTokenFromComponent(component, lineInfo, displayValue, isFirst, size) {
-        const ascent = component.instance.ascent() ?? 0;
-        const descent = component.instance.descent() ?? 0;
-        return new DisplayToken({
-            width: component.instance.width(),
-            height: ascent + descent,
-            baseline: 0,
-            content: 0,
-            font: size.font,
-            ascent,
-            descent,
-            line: 0,
-            lineSpacing: lineInfo.lineSpacing,
-            multiplier: 0,
-            align: lineInfo.align,
-            indentFirstLine: isFirst ? lineInfo.indent.firstLine : DEFAULT_PARAGRAPH_STYLE.indentFirstLine,
-            indentHanging: isFirst && !lineInfo.isNumbering ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
-            indentLeft: lineInfo.indent.left,
-            indentRight: lineInfo.indent.right,
-            indentBefore: lineInfo.offsetBefore,
-            indentAfter: lineInfo.offsetAfter,
-            markerWidth: isFirst && lineInfo.isNumbering ? lineInfo.markerWidth : 0,
-            isNumbering: lineInfo.isNumbering,
-            isPageBreak: false,
-            isLineBreak: false,
-            displayValue,
-            isTab: component.instance instanceof NoderTabComponent,
-            isTable: component.instance instanceof NoderTableComponent
-        });
-    }
     findComponentType(type) {
         return this.elements.find(x => x.type === type).componentType;
     }
     findComponent(components, insertIndex) {
         return components.find((x) => x.instance.insertIndex === insertIndex);
     }
-    isFragmentContainComponents(components, distance) {
-        return components.some(x => x.instance.insertIndex >= distance.start && x.instance.insertIndex <= distance.end);
-    }
     isSpecialMarker(char) {
         return char === CUSTOM_ELEMENT_MARKER || char === TABLE_MARKER;
     }
@@ -16926,6 +16436,16 @@ class RegulatorService {
         }
         return null;
     }
+    getComment(commentId) {
+        let comment = null;
+        for (const session of this.sessions) {
+            comment = session.session.model.comments.find(x => x.commentId === commentId);
+            if (comment) {
+                return { session, comment };
+            }
+        }
+        return null;
+    }
     setCommentsVisibility(value) {
         for (const sessionModel of this.sessions) {
             sessionModel.renderer.setCommentsVisibility(value);
@@ -17078,7 +16598,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.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$2.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: i6.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$1.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$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TabSettingsDialogComponent, decorators: [{
             type: Component,
@@ -17497,13 +17017,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: OverlayService }, { token: i0.Injector }, { token: RegulatorService }, { token: CommandsService }, { token: i6$1.Clipboard }, { token: InsertOverlays }], 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;overflow:hidden}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:calc(100% - 22px)}.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:3}\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: i10.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i10.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i10.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], 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$2.Clipboard }, { token: InsertOverlays }], 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;overflow:hidden}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:calc(100% - 22px)}.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:3}\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: i10.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i10.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i10.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "pipe", type: i3.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        <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;overflow:hidden}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:calc(100% - 22px)}.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:3}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentService }, { type: EditorService }, { type: OverlayService }, { type: i0.Injector }, { type: RegulatorService }, { type: CommandsService }, { type: i6$1.Clipboard }, { type: InsertOverlays }], propDecorators: { isMobile: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentService }, { type: EditorService }, { type: OverlayService }, { type: i0.Injector }, { type: RegulatorService }, { type: CommandsService }, { type: i6$2.Clipboard }, { type: InsertOverlays }], propDecorators: { isMobile: [{
                 type: Input
             }], externalElementTagNames: [{
                 type: Input
@@ -17550,6 +17070,7 @@ class EditorModule {
             providers: [
                 { provide: EXTERNAL_ELEMENT_SIDENAV, useValue: new ExternalSidenavModel(options?.sidenav) },
                 { provide: EXTERNAL_ELEMENT_SERVICE, useClass: options?.elementService ?? ExternalElementService },
+                { provide: COMMENT_TYPES, useValue: options?.commentTypes ?? [] },
                 { provide: InsertOverlays, useValue: new InsertOverlays(options?.insertOverlays) },
                 { provide: ImageApiService, useClass: options?.imageApiService ?? DefaultImageApiService },
                 {
@@ -17707,13 +17228,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorTitleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i6.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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.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.TranslateService }], propDecorators: { selectedMode: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i6.TranslateService }], propDecorators: { selectedMode: [{
                 type: Input
             }], showTitle: [{
                 type: Input
@@ -17734,7 +17255,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$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 }); }
+    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$1.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: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorTitleMobileComponent, decorators: [{
             type: Component,
@@ -17814,7 +17335,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$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 }); }
+    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: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MenuDropdownsMobileComponent, decorators: [{
             type: Component,
@@ -18080,6 +17601,9 @@ class BaseToolbarComponent extends DestroyComponent {
         this.updateTableBorderStyle = new EventEmitter();
         this.updateTableBorderWidth = new EventEmitter();
         this.updateTableBorders = new EventEmitter();
+        this.selectSpacing = new EventEmitter();
+        this.selectBefore = new EventEmitter();
+        this.selectAfter = new EventEmitter();
         this.elements = this.injector.get(EXTERNAL_ELEMENT_SERVICE).elements;
         this.customIconService.register();
         this.historyInfoSubscription();
@@ -18139,7 +17663,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", updateTableBorderStyle: "updateTableBorderStyle", updateTableBorderWidth: "updateTableBorderWidth", updateTableBorders: "updateTableBorders" }, 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", selectSpacing: "selectSpacing", selectBefore: "selectBefore", selectAfter: "selectAfter" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BaseToolbarComponent, decorators: [{
             type: Directive
@@ -18171,6 +17695,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Output
             }], updateTableBorders: [{
                 type: Output
+            }], selectSpacing: [{
+                type: Output
+            }], selectBefore: [{
+                type: Output
+            }], selectAfter: [{
+                type: Output
             }] } });
 
 class InsertTableComponent {
@@ -18214,7 +17744,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$1.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.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,
@@ -18273,7 +17803,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: "17.0.0", version: "19.0.5", type: MenuDropdownsComponent, isStandalone: false, selector: "app-nod-menu-dropdowns", inputs: { showFile: "showFile", showEdit: "showEdit", showInsert: "showInsert", showLayout: "showLayout", showFormat: "showFormat" }, outputs: { openFileFromDisk: "openFileFromDisk", saveAs: "saveAs", saveAsTemplate: "saveAsTemplate", downloadPdf: "downloadPdf", insertPageBreak: "insertPageBreak", createDocument: "createDocument", pageSetup: "pageSetup", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected" }, viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngIf=\"{\n        clipboardData: editorService.clipboardData$ | async,\n        hasSelection: editorService.hasSelection$ | async,\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <button\n        *ngIf=\"showFile\"\n        id=\"menu-dropdowns-menu-file\"\n        mat-button\n        [matMenuTriggerFor]=\"fileMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.FILE' | translate }}\n    </button>\n    <mat-menu\n        #fileMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"createDocument.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-new\"\n            mat-menu-item\n            (click)=\"createDocument.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-add-new\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.NEW' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"!data.isViewOnly\"\n            id=\"menu-dropdowns-menu-page-setup\"\n            mat-menu-item\n            (click)=\"pageSetup.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-system-file\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"openFileFromDisk.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-open-from\"\n            mat-menu-item\n            (click)=\"openFileFromDisk.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-open-from\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.OPEN_FROM' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+O</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"saveAs.observed\"\n            id=\"menu-dropdowns-menu-item-save-as\"\n            mat-menu-item\n            (click)=\"saveAs.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS' | translate }}</span>\n            </div>\n        </button>\n        @if (saveAsTemplate.observed) {\n            <button\n                id=\"menu-dropdowns-menu-item-save-as-template\"\n                mat-menu-item\n                (click)=\"saveAsTemplate.emit()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-save\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS_TEMPLATE' | translate }}</span>\n                </div>\n            </button>\n        }\n        <button\n            *ngIf=\"downloadPdf.observed\"\n            id=\"menu-dropdowns-menu-item-download-pdf\"\n            mat-menu-item\n            (click)=\"downloadPdf.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DOWNLOAD_PDF' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"rename.observed\"\n            id=\"menu-dropdowns-menu-item-rename\"\n            mat-menu-item\n            (click)=\"rename.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-rename\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.RENAME' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"print.observed\"\n            id=\"menu-dropdowns-menu-item-print\"\n            mat-menu-item\n            (click)=\"print.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-print\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PRINT' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+P</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"delete.observed\"\n            id=\"menu-dropdowns-menu-item-delete\"\n            mat-menu-item\n            (click)=\"delete.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showEdit\"\n        id=\"menu-dropdowns-menu-edit\"\n        mat-button\n        [matMenuTriggerFor]=\"editMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        (menuOpened)=\"openEditMenu.emit()\">\n        {{ 'NODER.LABEL.EDIT' | translate }}\n    </button>\n    <mat-menu\n        #editMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"undo.observed\"\n            id=\"menu-dropdowns-menu-item-undo\"\n            mat-menu-item\n            [disabled]=\"!canUndo\"\n            (click)=\"undo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-undo\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.UNDO' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Z</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"redo.observed\"\n            id=\"menu-dropdowns-menu-item-redo\"\n            mat-menu-item\n            [disabled]=\"!canRedo\"\n            (click)=\"redo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-redo\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.REDO' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Y</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"cutSelected.observed\"\n            id=\"menu-dropdowns-menu-item-cut\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"cutSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-cut\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.CUT' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+X</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"copySelected.observed\"\n            id=\"menu-dropdowns-menu-item-copy\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"copySelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-file-copy\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.COPY' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+C</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"pasteClipboardData.observed\"\n            id=\"menu-dropdowns-menu-item-paste\"\n            mat-menu-item\n            [disabled]=\"!data.clipboardData?.length\"\n            (click)=\"pasteClipboardData.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-paste\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PASTE' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+V</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"selectAll.observed\"\n            id=\"menu-dropdowns-menu-item-select-all\"\n            mat-menu-item\n            (click)=\"selectAll.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-select-all\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.SELECT_ALL' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+A</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"removeSelected.observed\"\n            id=\"menu-dropdowns-menu-item-delete-text\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"removeSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showInsert && !data.isViewOnly\"\n        #insertMenuTrigger=\"matMenuTrigger\"\n        id=\"menu-dropdowns-menu-insert\"\n        mat-button\n        [matMenuTriggerFor]=\"insertMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.INSERT' | translate }}\n    </button>\n    <mat-menu\n        #insertMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertImage.observed\"\n            id=\"menu-dropdowns-menu-item-image\"\n            mat-menu-item\n            (click)=\"insertImage.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-image\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.IMAGE' | translate }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-table\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\"></mat-icon>\n            {{ 'NODER.LABEL.TABLE' | translate }}\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"insertLink.observed\"\n            id=\"menu-dropdowns-menu-item-link\"\n            mat-menu-item\n            (click)=\"insertLink.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-link-on\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.LINK' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+K</span>\n            </div>\n        </button>\n        <button\n            *ngFor=\"let element of elements\"\n            id=\"menu-dropdowns-menu-item-{{ element.nameId }}\"\n            mat-menu-item\n            (click)=\"onCreateElement(element)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"{{ element.icon }}\"></mat-icon>\n                <span class=\"menu-item-text\">{{ element.nameTranslate | translate }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-headers-footers\"\n            mat-menu-item\n            class=\"hidden\"\n            [matMenuTriggerFor]=\"listHeadersFootersMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listHeadersFootersMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-header\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-header\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADER' | translate }}</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-footer\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-bottom\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.FOOTER' | translate }}</span>\n                </div>\n            </button>\n        </mat-menu>\n    </mat-menu>\n    <button\n        *ngIf=\"showLayout && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-layout\"\n        mat-button\n        [matMenuTriggerFor]=\"layoutMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.LAYOUT' | translate }}\n    </button>\n    <mat-menu\n        #layoutMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertPageBreak.observed\"\n            id=\"menu-dropdowns-menu-item-page-break\"\n            mat-menu-item\n            (click)=\"insertPageBreak.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-page-break\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_BREAK' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Enter</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showFormat && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-format\"\n        mat-button\n        [matMenuTriggerFor]=\"formatMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.FORMAT' | translate }}\n    </button>\n    <mat-menu\n        #formatMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-align\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listAlignMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-alignleft\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.ALIGN' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listAlignMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-align-left\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Left)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignleft\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.LEFT' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+L</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-center\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Center)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-aligncenter\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.CENTER' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+E</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-right\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Right)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignright\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.RIGHT' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+R</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-bullets-numbering\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listBulletsNumberingMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bulleted\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.BULLETS_AND_NUMBERING' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listBulletsNumberingMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bullets\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listBulletedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bulleted\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.BULLET_LIST_MENU' | translate }}</span>\n                </div>\n            </button>\n            <mat-menu\n                #listBulletedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n            <button\n                id=\"menu-dropdowns-menu-item-numbering\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listNumberedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-numbered\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.NUMBERED_LIST_MENU' | translate }}</span>\n                </div>\n            </button>\n            <mat-menu\n                #listNumberedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-text\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listTextMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bold\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.TEXT' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listTextMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bold\"\n                mat-menu-item\n                (click)=\"onApplyBold()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bold\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.BOLD' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+B</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-italic\"\n                mat-menu-item\n                (click)=\"onApplyItalic()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-italic\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.ITALIC' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+I</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-underlined\"\n                mat-menu-item\n                (click)=\"onApplyUnderline()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-underlined\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.UNDERLINED' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+U</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-header-footer\"\n            mat-menu-item\n            class=\"hidden\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <mat-menu\n        #tableInsert=\"matMenu\"\n        class=\"insert-table noder-modal\">\n        <app-nod-insert-table\n            *ngIf=\"showInsertTableMenu\"\n            (selectSizes)=\"insertTable.emit($event)\" />\n    </mat-menu>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;height:100%}button.mat-mdc-button{letter-spacing:0}.menu-buttons mat-icon{width:24px;height:24px;font-size:24px}.heading-menu{display:inline-flex;width:210px}.hot-keys{text-align:end;width:auto}.menu-item-text{white-space:nowrap;width:64%}.mat-mdc-menu-item .mat-icon{margin-right:4px;width:28px}.hidden{display:none}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none}.list-icon .selected,.list-icon .selected:hover,.list-number .selected,.list-number .selected:hover{border-width:2px;border-style:solid}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: MenuDropdownsComponent, isStandalone: false, selector: "app-nod-menu-dropdowns", inputs: { showFile: "showFile", showEdit: "showEdit", showInsert: "showInsert", showLayout: "showLayout", showFormat: "showFormat" }, outputs: { openFileFromDisk: "openFileFromDisk", saveAs: "saveAs", saveAsTemplate: "saveAsTemplate", downloadPdf: "downloadPdf", insertPageBreak: "insertPageBreak", createDocument: "createDocument", pageSetup: "pageSetup", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected" }, viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngIf=\"{\n        clipboardData: editorService.clipboardData$ | async,\n        hasSelection: editorService.hasSelection$ | async,\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <button\n        *ngIf=\"showFile\"\n        id=\"menu-dropdowns-menu-file\"\n        mat-button\n        [matMenuTriggerFor]=\"fileMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.FILE' | translate }}\n    </button>\n    <mat-menu\n        #fileMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"createDocument.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-new\"\n            mat-menu-item\n            (click)=\"createDocument.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-add-new\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.NEW' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"!data.isViewOnly\"\n            id=\"menu-dropdowns-menu-page-setup\"\n            mat-menu-item\n            (click)=\"pageSetup.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-system-file\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"openFileFromDisk.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-open-from\"\n            mat-menu-item\n            (click)=\"openFileFromDisk.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-open-from\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.OPEN_FROM' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+O</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"saveAs.observed\"\n            id=\"menu-dropdowns-menu-item-save-as\"\n            mat-menu-item\n            (click)=\"saveAs.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS' | translate }}</span>\n            </div>\n        </button>\n        @if (saveAsTemplate.observed) {\n            <button\n                id=\"menu-dropdowns-menu-item-save-as-template\"\n                mat-menu-item\n                (click)=\"saveAsTemplate.emit()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-save\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS_TEMPLATE' | translate }}</span>\n                </div>\n            </button>\n        }\n        <button\n            *ngIf=\"downloadPdf.observed\"\n            id=\"menu-dropdowns-menu-item-download-pdf\"\n            mat-menu-item\n            (click)=\"downloadPdf.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DOWNLOAD_PDF' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"rename.observed\"\n            id=\"menu-dropdowns-menu-item-rename\"\n            mat-menu-item\n            (click)=\"rename.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-rename\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.RENAME' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"print.observed\"\n            id=\"menu-dropdowns-menu-item-print\"\n            mat-menu-item\n            (click)=\"print.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-print\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PRINT' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+P</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"delete.observed\"\n            id=\"menu-dropdowns-menu-item-delete\"\n            mat-menu-item\n            (click)=\"delete.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showEdit\"\n        id=\"menu-dropdowns-menu-edit\"\n        mat-button\n        [matMenuTriggerFor]=\"editMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        (menuOpened)=\"openEditMenu.emit()\">\n        {{ 'NODER.LABEL.EDIT' | translate }}\n    </button>\n    <mat-menu\n        #editMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"undo.observed\"\n            id=\"menu-dropdowns-menu-item-undo\"\n            mat-menu-item\n            [disabled]=\"!canUndo\"\n            (click)=\"undo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-undo\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.UNDO' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Z</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"redo.observed\"\n            id=\"menu-dropdowns-menu-item-redo\"\n            mat-menu-item\n            [disabled]=\"!canRedo\"\n            (click)=\"redo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-redo\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.REDO' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Y</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"cutSelected.observed\"\n            id=\"menu-dropdowns-menu-item-cut\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"cutSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-cut\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.CUT' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+X</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"copySelected.observed\"\n            id=\"menu-dropdowns-menu-item-copy\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"copySelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-file-copy\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.COPY' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+C</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"pasteClipboardData.observed\"\n            id=\"menu-dropdowns-menu-item-paste\"\n            mat-menu-item\n            [disabled]=\"!data.clipboardData?.length\"\n            (click)=\"pasteClipboardData.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-paste\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PASTE' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+V</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"selectAll.observed\"\n            id=\"menu-dropdowns-menu-item-select-all\"\n            mat-menu-item\n            (click)=\"selectAll.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-select-all\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.SELECT_ALL' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+A</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"removeSelected.observed\"\n            id=\"menu-dropdowns-menu-item-delete-text\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"removeSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showInsert && !data.isViewOnly\"\n        #insertMenuTrigger=\"matMenuTrigger\"\n        id=\"menu-dropdowns-menu-insert\"\n        mat-button\n        [matMenuTriggerFor]=\"insertMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.INSERT' | translate }}\n    </button>\n    <mat-menu\n        #insertMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertImage.observed\"\n            id=\"menu-dropdowns-menu-item-image\"\n            mat-menu-item\n            (click)=\"insertImage.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-image\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.IMAGE' | translate }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-table\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\"></mat-icon>\n            {{ 'NODER.LABEL.TABLE' | translate }}\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"insertLink.observed\"\n            id=\"menu-dropdowns-menu-item-link\"\n            mat-menu-item\n            (click)=\"insertLink.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-link-on\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.LINK' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+K</span>\n            </div>\n        </button>\n        <button\n            *ngFor=\"let element of elements\"\n            id=\"menu-dropdowns-menu-item-{{ element.nameId }}\"\n            mat-menu-item\n            (click)=\"onCreateElement(element)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"{{ element.icon }}\"></mat-icon>\n                <span class=\"menu-item-text\">{{ element.nameTranslate | translate }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-headers-footers\"\n            mat-menu-item\n            class=\"hidden\"\n            [matMenuTriggerFor]=\"listHeadersFootersMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listHeadersFootersMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-header\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-header\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADER' | translate }}</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-footer\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-bottom\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.FOOTER' | translate }}</span>\n                </div>\n            </button>\n        </mat-menu>\n    </mat-menu>\n    <button\n        *ngIf=\"showLayout && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-layout\"\n        mat-button\n        [matMenuTriggerFor]=\"layoutMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.LAYOUT' | translate }}\n    </button>\n    <mat-menu\n        #layoutMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertPageBreak.observed\"\n            id=\"menu-dropdowns-menu-item-page-break\"\n            mat-menu-item\n            (click)=\"insertPageBreak.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-page-break\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_BREAK' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Enter</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showFormat && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-format\"\n        mat-button\n        [matMenuTriggerFor]=\"formatMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.FORMAT' | translate }}\n    </button>\n    <mat-menu\n        #formatMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-align\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listAlignMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-alignleft\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.ALIGN' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listAlignMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-align-left\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Left)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignleft\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.LEFT' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+L</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-center\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Center)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-aligncenter\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.CENTER' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+E</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-right\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Right)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignright\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.RIGHT' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+R</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-bullets-numbering\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listBulletsNumberingMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bulleted\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.BULLETS_AND_NUMBERING' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listBulletsNumberingMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bullets\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listBulletedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bulleted\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.BULLET_LIST_MENU' | translate }}</span>\n                </div>\n            </button>\n            <mat-menu\n                #listBulletedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n            <button\n                id=\"menu-dropdowns-menu-item-numbering\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listNumberedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-numbered\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.NUMBERED_LIST_MENU' | translate }}</span>\n                </div>\n            </button>\n            <mat-menu\n                #listNumberedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-text\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listTextMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bold\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.TEXT' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listTextMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bold\"\n                mat-menu-item\n                (click)=\"onApplyBold()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bold\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.BOLD' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+B</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-italic\"\n                mat-menu-item\n                (click)=\"onApplyItalic()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-italic\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.ITALIC' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+I</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-underlined\"\n                mat-menu-item\n                (click)=\"onApplyUnderline()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-underlined\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.UNDERLINED' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+U</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-header-footer\"\n            mat-menu-item\n            class=\"hidden\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <mat-menu\n        #tableInsert=\"matMenu\"\n        class=\"insert-table noder-modal\">\n        <app-nod-insert-table\n            *ngIf=\"showInsertTableMenu\"\n            (selectSizes)=\"insertTable.emit($event)\" />\n    </mat-menu>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;height:100%}button.mat-mdc-button{letter-spacing:0}.menu-buttons mat-icon{width:24px;height:24px;font-size:24px}.heading-menu{display:inline-flex;width:210px}.hot-keys{text-align:end;width:auto}.menu-item-text{white-space:nowrap;width:64%}.mat-mdc-menu-item .mat-icon{margin-right:4px;width:28px}.hidden{display:none}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none}.list-icon .selected,.list-icon .selected:hover,.list-number .selected,.list-number .selected:hover{border-width:2px;border-style:solid}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MenuDropdownsComponent, decorators: [{
             type: Component,
@@ -18348,7 +17878,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{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 }); }
+    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{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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontComponent, decorators: [{
             type: Component,
@@ -18420,7 +17950,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$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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FontSizeComponent, isStandalone: true, selector: "app-nod-font-size", inputs: { isDisabled: "isDisabled", fontSize: "fontSize" }, outputs: { selectFontSize: "selectFontSize" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onDecrementFontSize()\"\n    [matTooltip]=\"'NODER.TOOLTIP.DECREMENT' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-remove\"></mat-icon>\n</button>\n<input\n    type=\"text\"\n    [formControl]=\"fontSizeControl\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"onSetFontSize()\"\n    (blur)=\"resetFontSize()\"\n    [matTooltip]=\"'NODER.TOOLTIP.FONTSIZE' | translate\"\n    matTooltipPosition=\"below\" />\n<mat-autocomplete\n    #auto=\"matAutocomplete\"\n    panelWidth=\"60\"\n    disableRipple=\"false\"\n    hideSingleSelectionIndicator=\"true\">\n    <mat-option\n        *ngFor=\"let fontSize of fontSizes\"\n        [value]=\"fontSize\"\n        (click)=\"onSelectFontSize(fontSize)\">\n        {{ fontSize }}\n    </mat-option>\n</mat-autocomplete>\n<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onIncrementFontSize()\"\n    [matTooltip]=\"'NODER.TOOLTIP.INCREMENT' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n</button>\n", styles: ["input{width:48px;height:32px;text-align:center;border-color:transparent}button.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.mat-mdc-option{padding-left:6px;padding-right:6px;min-height:30px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontSizeComponent, decorators: [{
             type: Component,
@@ -18453,7 +17983,7 @@ class TableBordersComponent {
         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 }); }
+    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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBordersComponent, decorators: [{
             type: Component,
@@ -18472,7 +18002,7 @@ class TableBorderStyleComponent {
         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 }); }
+    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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBorderStyleComponent, decorators: [{
             type: Component,
@@ -18491,7 +18021,7 @@ class TableBorderWidthComponent {
         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 }); }
+    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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBorderWidthComponent, decorators: [{
             type: Component,
@@ -18510,7 +18040,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$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 }); }
+    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$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$1.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,
@@ -18574,7 +18104,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$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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FontStyleComponent, isStandalone: false, selector: "app-nod-font-style", inputs: { isDisabled: "isDisabled", bold: "bold", italic: "italic", underline: "underline", fontColor: "fontColor", highlightColor: "highlightColor" }, outputs: { toggleBold: "toggleBold", toggleItalic: "toggleItalic", toggleUnderline: "toggleUnderline", selectFontColor: "selectFontColor", selectHighlightColor: "selectHighlightColor" }, ngImport: i0, template: "<mat-button-toggle-group\n    multiple\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\">\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"bold\"\n        (click)=\"onToggleBold()\"\n        [matTooltip]=\"'NODER.TOOLTIP.BOLD' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-bold\" />\n    </mat-button-toggle>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"italic\"\n        (click)=\"onToggleItalic()\"\n        [matTooltip]=\"'NODER.TOOLTIP.ITALIC' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-italic\" />\n    </mat-button-toggle>\n    <mat-button-toggle\n        [disabled]=\"isDisabled\"\n        [checked]=\"underline\"\n        (click)=\"onToggleUnderline()\"\n        [matTooltip]=\"'NODER.TOOLTIP.UNDERLINE' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-underlined\" />\n    </mat-button-toggle>\n</mat-button-toggle-group>\n<app-nod-color-picker\n    *ngIf=\"selectFontColor.observed\"\n    id=\"icon-format-colortext\"\n    class=\"text-color\"\n    [color]=\"fontColor\"\n    [isDisabled]=\"isDisabled\"\n    icon=\"icon-format-colortext\"\n    [palette]=\"textColorPalette\"\n    (colorChange)=\"onSelectFontColor($event)\"\n    [tooltip]=\"'NODER.TOOLTIP.FONTCOLOR' | translate\" />\n<app-nod-color-picker\n    *ngIf=\"selectHighlightColor.observed\"\n    id=\"icon-link-highlighter\"\n    class=\"highlight-color\"\n    [color]=\"highlightColor\"\n    [isDisabled]=\"isDisabled\"\n    icon=\"icon-link-highlighter\"\n    [palette]=\"highlightColorPalette\"\n    (colorChange)=\"onSelectHighlightColor($event)\"\n    [tooltip]=\"'NODER.TOOLTIP.HIGHLIGHTCOLOR' | translate\" />\n", styles: ["mat-button-toggle,button{margin:0 4px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}:host{display:flex;align-items:center}:host ::ng-deep #format-color-highlight .circle.button:first-child,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child{flex:100%;width:100%;background:no-repeat left/20px url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_format_color_reset_48px-512.png);border-radius:unset}:host ::ng-deep #format-color-highlight .circle.button:first-child .circle.color.circle-border,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child .circle.color.circle-border{width:100%;border:unset}:host ::ng-deep #format-color-highlight .circle.button:first-child .circle.color.circle-border .selected,:host ::ng-deep #format-color-highlight .circle.wrapper.color:first-child .circle.color.circle-border .selected{display:none}\n"], dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "app-nod-color-picker", inputs: ["color", "icon", "isDisabled", "palette", "tooltip"], outputs: ["colorChange"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontStyleComponent, decorators: [{
             type: Component,
@@ -18613,7 +18143,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.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$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FormatComponent, decorators: [{
             type: Component,
@@ -18654,7 +18184,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.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$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NumberingComponent, decorators: [{
             type: Component,
@@ -18676,7 +18206,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.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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PrintComponent, decorators: [{
             type: Component,
@@ -18685,6 +18215,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Output
             }] } });
 
+class SpacingComponent {
+    constructor() {
+        this.isDisabled = input(false);
+        this.spacing = input(1);
+        this.before = input(0);
+        this.after = input(0);
+        this.selectSpacing = output();
+        this.selectBefore = output();
+        this.selectAfter = output();
+        this.spacings = ['1.0', '1.15', '1.5', '2.0', '2.5', '3'];
+    }
+    onSelectSpacing(value) {
+        this.selectSpacing.emit(value);
+    }
+    onSelectBefore(value) {
+        this.selectBefore.emit(value);
+    }
+    onSelectAfter(value) {
+        this.selectAfter.emit(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpacingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpacingComponent, isStandalone: false, selector: "app-nod-spacing", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, before: { classPropertyName: "before", publicName: "before", isSignal: true, isRequired: false, transformFunction: null }, after: { classPropertyName: "after", publicName: "after", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectSpacing: "selectSpacing", selectBefore: "selectBefore", selectAfter: "selectAfter" }, ngImport: i0, template: "<button\n    mat-button\n    class=\"spacing-button\"\n    [matMenuTriggerFor]=\"spacingMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matTooltip]=\"'NODER.TOOLTIP.FONT' | translate\"\n    matTooltipPosition=\"below\">\n    <div class=\"spacing-menu\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-spacing\"></mat-icon>\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </div>\n</button>\n<mat-menu\n    #spacingMenu=\"matMenu\"\n    class=\"noder-modal noder-spacing-modal-menu\">\n    <ng-container *ngFor=\"let value of spacings\">\n        <button\n            mat-menu-item\n            class=\"spacing-option\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"onSelectSpacing(+value)\">\n            {{ value }}\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-done-thin\"\n                class=\"hidden\"\n                [class.selected]=\"spacing() === +value\"></mat-icon>\n        </button>\n    </ng-container>\n    <span class=\"spacing-label\">{{ 'NODER.LABEL.LINE_SPACING_OPTIONS' | translate }}</span>\n    <hr class=\"noder-divider\" />\n    @if (before()) {\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled()\"\n            (click)=\"onSelectBefore(0)\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-space-before\"></mat-icon>\n            {{ 'NODER.LABEL.REMOVE_SPACE_BEFORE_PARAGRAPH' | translate }}\n        </button>\n    } @else {\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled()\"\n            (click)=\"onSelectBefore(16)\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-space-before\"></mat-icon>\n            {{ 'NODER.LABEL.ADD_SPACE_BEFORE_PARAGRAPH' | translate }}\n        </button>\n    }\n    @if (after()) {\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled()\"\n            (click)=\"onSelectAfter(0)\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-space-after\"></mat-icon>\n            {{ 'NODER.LABEL.REMOVE_SPACE_AFTER_PARAGRAPH' | translate }}\n        </button>\n    } @else {\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled()\"\n            (click)=\"onSelectAfter(16)\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-space-after\"></mat-icon>\n            {{ 'NODER.LABEL.ADD_SPACE_AFTER_PARAGRAPH' | translate }}\n        </button>\n    }\n</mat-menu>\n", styles: [".spacing-button{height:32px;margin:0 4px}button:not(.spacing-button){padding-left:4px;padding-right:8px}button.spacing-option{padding-left:8px}.spacing-menu{display:flex;justify-content:space-between;align-items:center}mat-icon{align-self:center}mat-icon.hidden:not(.selected){display:none}mat-icon.selected{position:absolute;right:0}.spacing-label{font-size:12px;padding-left:8px;cursor:default}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpacingComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-spacing', standalone: false, template: "<button\n    mat-button\n    class=\"spacing-button\"\n    [matMenuTriggerFor]=\"spacingMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matTooltip]=\"'NODER.TOOLTIP.FONT' | translate\"\n    matTooltipPosition=\"below\">\n    <div class=\"spacing-menu\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-spacing\"></mat-icon>\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </div>\n</button>\n<mat-menu\n    #spacingMenu=\"matMenu\"\n    class=\"noder-modal noder-spacing-modal-menu\">\n    <ng-container *ngFor=\"let value of spacings\">\n        <button\n            mat-menu-item\n            class=\"spacing-option\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"onSelectSpacing(+value)\">\n            {{ value }}\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-done-thin\"\n                class=\"hidden\"\n                [class.selected]=\"spacing() === +value\"></mat-icon>\n        </button>\n    </ng-container>\n    <span class=\"spacing-label\">{{ 'NODER.LABEL.LINE_SPACING_OPTIONS' | translate }}</span>\n    <hr class=\"noder-divider\" />\n    @if (before()) {\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled()\"\n            (click)=\"onSelectBefore(0)\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-space-before\"></mat-icon>\n            {{ 'NODER.LABEL.REMOVE_SPACE_BEFORE_PARAGRAPH' | translate }}\n        </button>\n    } @else {\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled()\"\n            (click)=\"onSelectBefore(16)\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-space-before\"></mat-icon>\n            {{ 'NODER.LABEL.ADD_SPACE_BEFORE_PARAGRAPH' | translate }}\n        </button>\n    }\n    @if (after()) {\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled()\"\n            (click)=\"onSelectAfter(0)\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-space-after\"></mat-icon>\n            {{ 'NODER.LABEL.REMOVE_SPACE_AFTER_PARAGRAPH' | translate }}\n        </button>\n    } @else {\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled()\"\n            (click)=\"onSelectAfter(16)\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-space-after\"></mat-icon>\n            {{ 'NODER.LABEL.ADD_SPACE_AFTER_PARAGRAPH' | translate }}\n        </button>\n    }\n</mat-menu>\n", styles: [".spacing-button{height:32px;margin:0 4px}button:not(.spacing-button){padding-left:4px;padding-right:8px}button.spacing-option{padding-left:8px}.spacing-menu{display:flex;justify-content:space-between;align-items:center}mat-icon{align-self:center}mat-icon.hidden:not(.selected){display:none}mat-icon.selected{position:absolute;right:0}.spacing-label{font-size:12px;padding-left:8px;cursor:default}\n"] }]
+        }] });
+
 class UndoRedoComponent {
     constructor() {
         this.canUndo = false;
@@ -18693,7 +18251,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.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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UndoRedoComponent, decorators: [{
             type: Component,
@@ -18729,6 +18287,15 @@ class ToolbarActionsComponent extends BaseToolbarComponent {
     onApplyAlignment(alignment) {
         this.changeParagraphStyle.emit(new ParagraphStyleModel({ alignment }));
     }
+    onApplySpacing(value) {
+        this.selectSpacing.emit(value);
+    }
+    onApplyBefore(value) {
+        this.selectBefore.emit(value);
+    }
+    onApplyAfter(value) {
+        this.selectAfter.emit(value);
+    }
     onSetNumberingTemplateType(templateType) {
         const templateLevels = NumberingTemplates.find(x => x.templateType === templateType).levels;
         this.setNumberingTemplateType.emit(templateLevels);
@@ -18742,11 +18309,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: "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 }); }
+    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-spacing\n    [isDisabled]=\"isViewOnly\"\n    [spacing]=\"styles.lineSpacing\"\n    [before]=\"styles.spaceBefore\"\n    [after]=\"styles.spaceAfter\"\n    (selectSpacing)=\"onApplySpacing($event)\"\n    (selectBefore)=\"onApplyBefore($event)\"\n    (selectAfter)=\"onApplyAfter($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.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$1.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: SpacingComponent, selector: "app-nod-spacing", inputs: ["isDisabled", "spacing", "before", "after"], outputs: ["selectSpacing", "selectBefore", "selectAfter"] }, { 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: i6.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: "@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"] }]
+            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-spacing\n    [isDisabled]=\"isViewOnly\"\n    [spacing]=\"styles.lineSpacing\"\n    [before]=\"styles.spaceBefore\"\n    [after]=\"styles.spaceAfter\"\n    (selectSpacing)=\"onApplySpacing($event)\"\n    (selectBefore)=\"onApplyBefore($event)\"\n    (selectAfter)=\"onApplyAfter($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']
@@ -18808,13 +18375,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.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 }); }
+    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: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorMobileToolbarComponent, isStandalone: false, selector: "app-nod-editor-mobile-toolbar", outputs: { openFileFromDisk: "openFileFromDisk", createDocument: "createDocument", saveAs: "saveAs", downloadPdf: "downloadPdf", rename: "rename", delete: "delete", insertPageBreak: "insertPageBreak", textFormat: "textFormat" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{ mode: toolbarCoreService.mode$ | async, isViewOnly: editorService.isViewOnly$ | async } as data\">\n    <div class=\"menu-action\">\n        <button\n            *ngIf=\"data.mode === editorToolbarMode.Base; else back\"\n            mat-button\n            id=\"editor-mobile-toolbar-sandwich\"\n            (click)=\"toolbarCoreService.openBurgerMenu()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-sandwich\" />\n        </button>\n        <ng-template #back>\n            <div class=\"back-container\">\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-back\"\n                    (click)=\"toolbarCoreService.back()\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-back\" />\n                </button>\n                <div class=\"back-title\">{{ toolbarCoreService.backTitle }}</div>\n            </div>\n        </ng-template>\n    </div>\n    <div\n        *ngIf=\"styles && !data.isViewOnly && actionsMenuMods.includes(data.mode)\"\n        class=\"actions\">\n        <app-nod-undo-redo\n            [canUndo]=\"canUndo\"\n            [canRedo]=\"canRedo\"\n            (undo)=\"undo.emit()\"\n            (redo)=\"redo.emit()\" />\n        <div class=\"separator\"></div>\n        <div\n            class=\"main-actions\"\n            [ngSwitch]=\"data.mode\">\n            <ng-container *ngSwitchCase=\"editorToolbarMode.Base\">\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-text-format\"\n                    (click)=\"toolbarCoreService.mode = editorToolbarMode.TextFormat\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-text\" />\n                </button>\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-style-format\"\n                    (click)=\"toolbarCoreService.mode = editorToolbarMode.StyleFormat\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-combined\" />\n                </button>\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-align-format\"\n                    (click)=\"toolbarCoreService.mode = editorToolbarMode.AlignFormat\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignleft\" />\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"editorToolbarMode.TextFormat\">\n                <app-nod-font\n                    [isDisabled]=\"data.isViewOnly\"\n                    [styles]=\"styles\"\n                    (selectFont)=\"onApplyFontFamily($event)\" />\n                <div class=\"separator\"></div>\n                <app-nod-font-size\n                    [isDisabled]=\"data.isViewOnly\"\n                    [fontSize]=\"styles.fontSize\"\n                    (selectFontSize)=\"onApplyFontSize($event)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"editorToolbarMode.StyleFormat\">\n                <app-nod-font-style\n                    [isDisabled]=\"data.isViewOnly\"\n                    [bold]=\"styles.bold\"\n                    [italic]=\"styles.italic\"\n                    [underline]=\"styles.underline\"\n                    (toggleBold)=\"onApplyBold($event)\"\n                    (toggleItalic)=\"onApplyItalic($event)\"\n                    (toggleUnderline)=\"onApplyUnderline($event)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"editorToolbarMode.AlignFormat\">\n                <app-nod-format\n                    [isDisabled]=\"data.isViewOnly\"\n                    [alignment]=\"styles.alignment\"\n                    (selectAlignment)=\"onApplyAlignment($event)\" />\n            </ng-container>\n        </div>\n    </div>\n</ng-container>\n", styles: ["button.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}button.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}:host::ng-deep{display:flex;position:relative;width:100%;height:32px}:host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.menu-action{display:flex;align-items:center;z-index:1}.actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}.main-actions{display:flex;align-items:center;height:100%}.separator{border-left:1px solid;opacity:.1;height:100%;margin:0 8px}app-nod-font{max-width:142px}.back-container{display:flex}.back-title{font-size:14px;font-weight:400;padding-left:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: FontComponent, selector: "app-nod-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-nod-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FontStyleComponent, selector: "app-nod-font-style", inputs: ["isDisabled", "bold", "italic", "underline", "fontColor", "highlightColor"], outputs: ["toggleBold", "toggleItalic", "toggleUnderline", "selectFontColor", "selectHighlightColor"] }, { kind: "component", type: FormatComponent, selector: "app-nod-format", inputs: ["isDisabled", "alignment"], outputs: ["selectAlignment"] }, { kind: "component", type: UndoRedoComponent, selector: "app-nod-undo-redo", inputs: ["canUndo", "canRedo"], outputs: ["undo", "redo"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorMobileToolbarComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-mobile-toolbar', standalone: false, template: "<ng-container *ngIf=\"{ mode: toolbarCoreService.mode$ | async, isViewOnly: editorService.isViewOnly$ | async } as data\">\n    <div class=\"menu-action\">\n        <button\n            *ngIf=\"data.mode === editorToolbarMode.Base; else back\"\n            mat-button\n            id=\"editor-mobile-toolbar-sandwich\"\n            (click)=\"toolbarCoreService.openBurgerMenu()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-sandwich\" />\n        </button>\n        <ng-template #back>\n            <div class=\"back-container\">\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-back\"\n                    (click)=\"toolbarCoreService.back()\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-back\" />\n                </button>\n                <div class=\"back-title\">{{ toolbarCoreService.backTitle }}</div>\n            </div>\n        </ng-template>\n    </div>\n    <div\n        *ngIf=\"styles && !data.isViewOnly && actionsMenuMods.includes(data.mode)\"\n        class=\"actions\">\n        <app-nod-undo-redo\n            [canUndo]=\"canUndo\"\n            [canRedo]=\"canRedo\"\n            (undo)=\"undo.emit()\"\n            (redo)=\"redo.emit()\" />\n        <div class=\"separator\"></div>\n        <div\n            class=\"main-actions\"\n            [ngSwitch]=\"data.mode\">\n            <ng-container *ngSwitchCase=\"editorToolbarMode.Base\">\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-text-format\"\n                    (click)=\"toolbarCoreService.mode = editorToolbarMode.TextFormat\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-text\" />\n                </button>\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-style-format\"\n                    (click)=\"toolbarCoreService.mode = editorToolbarMode.StyleFormat\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-combined\" />\n                </button>\n                <button\n                    mat-button\n                    id=\"editor-mobile-toolbar-align-format\"\n                    (click)=\"toolbarCoreService.mode = editorToolbarMode.AlignFormat\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignleft\" />\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"editorToolbarMode.TextFormat\">\n                <app-nod-font\n                    [isDisabled]=\"data.isViewOnly\"\n                    [styles]=\"styles\"\n                    (selectFont)=\"onApplyFontFamily($event)\" />\n                <div class=\"separator\"></div>\n                <app-nod-font-size\n                    [isDisabled]=\"data.isViewOnly\"\n                    [fontSize]=\"styles.fontSize\"\n                    (selectFontSize)=\"onApplyFontSize($event)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"editorToolbarMode.StyleFormat\">\n                <app-nod-font-style\n                    [isDisabled]=\"data.isViewOnly\"\n                    [bold]=\"styles.bold\"\n                    [italic]=\"styles.italic\"\n                    [underline]=\"styles.underline\"\n                    (toggleBold)=\"onApplyBold($event)\"\n                    (toggleItalic)=\"onApplyItalic($event)\"\n                    (toggleUnderline)=\"onApplyUnderline($event)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"editorToolbarMode.AlignFormat\">\n                <app-nod-format\n                    [isDisabled]=\"data.isViewOnly\"\n                    [alignment]=\"styles.alignment\"\n                    (selectAlignment)=\"onApplyAlignment($event)\" />\n            </ng-container>\n        </div>\n    </div>\n</ng-container>\n", styles: ["button.mdc-button{min-width:28px;min-height:28px;height:28px;padding:0;margin:0 4px}button.mdc-button mat-icon{font-size:24px;height:24px;width:24px;margin:0}:host::ng-deep{display:flex;position:relative;width:100%;height:32px}:host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.menu-action{display:flex;align-items:center;z-index:1}.actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}.main-actions{display:flex;align-items:center;height:100%}.separator{border-left:1px solid;opacity:.1;height:100%;margin:0 8px}app-nod-font{max-width:142px}.back-container{display:flex}.back-title{font-size:14px;font-weight:400;padding-left:10px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CustomIconService }, { type: EditorService }, { type: i0.Injector }, { type: ToolbarCoreService }, { type: i3.TranslateService }], propDecorators: { openFileFromDisk: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CustomIconService }, { type: EditorService }, { type: i0.Injector }, { type: ToolbarCoreService }, { type: i6.TranslateService }], propDecorators: { openFileFromDisk: [{
                 type: Output
             }], createDocument: [{
                 type: Output
@@ -18867,7 +18434,7 @@ class EditorToolbarComponent {
         this.updateTableBorders = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorToolbarComponent, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorToolbarComponent, isStandalone: false, selector: "app-nod-editor-toolbar", outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", saveAsTemplate: "saveAsTemplate", downloadPdf: "downloadPdf", print: "print", insertPageBreak: "insertPageBreak", createDocument: "createDocument", pageSetup: "pageSetup", insertImage: "insertImage", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", redo: "redo", undo: "undo", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected", insertLink: "insertLink", createElement: "createElement", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertTable: "insertTable", updateTableBorderStyle: "updateTableBorderStyle", updateTableBorderWidth: "updateTableBorderWidth", updateTableBorders: "updateTableBorders" }, ngImport: i0, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (saveAsTemplate)=\"saveAsTemplate.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\"\n    (updateTableBorders)=\"updateTableBorders.emit($event)\"\n    (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\"\n    (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", inputs: ["showFile", "showEdit", "showInsert", "showLayout", "showFormat"], outputs: ["openFileFromDisk", "saveAs", "saveAsTemplate", "downloadPdf", "insertPageBreak", "createDocument", "pageSetup", "rename", "delete", "openEditMenu", "cutSelected", "copySelected", "pasteClipboardData", "selectAll", "removeSelected"] }, { kind: "component", type: ToolbarActionsComponent, selector: "app-nod-toolbar-actions" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorToolbarComponent, isStandalone: false, selector: "app-nod-editor-toolbar", outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", saveAsTemplate: "saveAsTemplate", downloadPdf: "downloadPdf", print: "print", insertPageBreak: "insertPageBreak", createDocument: "createDocument", pageSetup: "pageSetup", insertImage: "insertImage", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", redo: "redo", undo: "undo", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected", insertLink: "insertLink", createElement: "createElement", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertTable: "insertTable", updateTableBorderStyle: "updateTableBorderStyle", updateTableBorderWidth: "updateTableBorderWidth", updateTableBorders: "updateTableBorders" }, ngImport: i0, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (saveAsTemplate)=\"saveAsTemplate.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\"\n    (updateTableBorders)=\"updateTableBorders.emit($event)\"\n    (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\"\n    (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", inputs: ["showFile", "showEdit", "showInsert", "showLayout", "showFormat"], outputs: ["openFileFromDisk", "saveAs", "saveAsTemplate", "downloadPdf", "insertPageBreak", "createDocument", "pageSetup", "rename", "delete", "openEditMenu", "cutSelected", "copySelected", "pasteClipboardData", "selectAll", "removeSelected"] }, { kind: "component", type: ToolbarActionsComponent, selector: "app-nod-toolbar-actions" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorToolbarComponent, decorators: [{
             type: Component,
@@ -19018,7 +18585,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$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 }); }
+    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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InsertTableMobileComponent, decorators: [{
             type: Component,
@@ -19119,7 +18686,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.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$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TextFormatMobileComponent, decorators: [{
             type: Component,
@@ -19187,7 +18754,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$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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ZoomComponent, isStandalone: false, selector: "app-nod-zoom", viewQueries: [{ propertyName: "zoom", first: true, predicate: ["zoom"], descendants: true }], ngImport: i0, template: "<input\n    [matAutocomplete]=\"auto\"\n    [formControl]=\"myControl\"\n    #trigger=\"matAutocompleteTrigger\"\n    #zoom\n    (focusout)=\"onSetPreviousValue()\"\n    (keydown)=\"onKeyDown($event, trigger)\" />\n<button\n    mat-button\n    (click)=\"openPanel($event, trigger)\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n</button>\n<mat-autocomplete\n    class=\"zoom-autocomplite\"\n    #auto=\"matAutocomplete\"\n    [panelWidth]=\"80\">\n    <mat-option\n        *ngFor=\"let zoomPercentage of zoomPercentages\"\n        (click)=\"onSelectZoom(zoomPercentage)\">\n        {{ zoomPercentage }}%\n    </mat-option>\n</mat-autocomplete>\n", styles: [":host{display:flex;align-items:center;width:90px}.zoom-menu{display:flex;justify-content:space-between;align-items:center;min-width:100px}span{padding-left:10%}.mdc-button{min-width:20px;height:25px;padding:0;margin-right:10px}mat-icon{width:20px;margin-right:5%}input{padding-left:10px;font-size:14px;width:60px;border-color:transparent;outline:none}::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel{max-height:100%!important}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.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,
@@ -19207,6 +18774,7 @@ class EditorToolbarModule {
             MenuDropdownsMobileComponent,
             NumberingComponent,
             PrintComponent,
+            SpacingComponent,
             ToolbarActionsComponent,
             UndoRedoComponent,
             ZoomComponent], imports: [ColorPickerComponent,
@@ -19264,6 +18832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         MenuDropdownsMobileComponent,
                         NumberingComponent,
                         PrintComponent,
+                        SpacingComponent,
                         ToolbarActionsComponent,
                         UndoRedoComponent,
                         ZoomComponent
@@ -19717,8 +19286,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.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$1.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: i6.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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$2.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$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i10$1.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,
@@ -19734,7 +19303,7 @@ 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.TranslateService }], propDecorators: { pageSizeForm: [{
+        }], ctorParameters: () => [{ type: EditorService }, { type: ToolbarCoreService }, { type: i6.TranslateService }], propDecorators: { pageSizeForm: [{
                 type: ViewChild,
                 args: ['pageSizeForm']
             }] } });
@@ -19824,7 +19393,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.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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkDialogComponent, decorators: [{
             type: Component,
@@ -19873,7 +19442,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.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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkMobileComponent, decorators: [{
             type: Component,
@@ -19890,7 +19459,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.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: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
@@ -19973,5 +19542,5 @@ class OperationModel {
  * Generated bundle index. Do not edit.
  */
 
-export { AddLinkDialogComponent, AddLinkMobileComponent, Alignment, BaseCommentComponent, BaseNoderComponent, Borders, 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_OFFSET_AFTER_NUMBERING_MARKER, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TABLE_MARGINS, 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, LineStyles, MenuDropdownsComponent, MenuDropdownsMobileComponent, Mode, NEW_LINE_MARKUP, NoderTranslateLoader, NumberingLevelModel, OperationModel, OperationsHistoryInfoModel, PageSetupComponent, PageType, ParagraphStyleModel, RevisionHelper, RevisionModel, SearchResultLocation, TextFormatMobileComponent, TextStyleModel, ToolbarActionsComponent };
+export { AddLinkDialogComponent, AddLinkMobileComponent, Alignment, BaseCommentComponent, BaseNoderComponent, Borders, BreakTypes, CommandModel, CommandType, CommandsService, CommentTypeModel, 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_OFFSET_AFTER_NUMBERING_MARKER, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TABLE_MARGINS, 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, LineStyles, 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