@talrace/ngx-noder 19.0.44 → 19.0.46

package/fesm2022/talrace-ngx-noder.mjs

@@ -14,15 +14,15 @@ 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 from '@angular/common';
-import { CommonModule, AsyncPipe } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormControl, ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
+import * as i5$2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i6$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
+import * as i3 from '@angular/common';
+import { CommonModule, AsyncPipe } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i5$2 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
 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';
@@ -636,6 +636,7 @@ class EditorService {
         this._displayGrammarError$ = new Subject();
         this._applyGrammarSuggestion$ = new Subject();
         this._ignoreGrammarError$ = new Subject();
+        this._toggleGrammarChecks$ = new Subject();
         this._displaySearchBar$ = new Subject();
         this._searchTerm$ = new Subject();
         this._dialogSearchTerm$ = new Subject();
@@ -718,6 +719,9 @@ class EditorService {
         this._setCommentsVisibility$ = new Subject();
         this._getCommentText$ = new Subject();
         this._replaceCommentText$ = new Subject();
+        this._startNewList$ = new Subject();
+        this._continueNumbering$ = new Subject();
+        this._setNumberingValue$ = new Subject();
     }
     set styles(value) {
         this._styles$.next({ ...value });
@@ -761,6 +765,9 @@ class EditorService {
     get ignoreGrammarError$() {
         return this._ignoreGrammarError$.asObservable();
     }
+    get toggleGrammarChecks$() {
+        return this._toggleGrammarChecks$.asObservable();
+    }
     get displaySearchBar$() {
         return this._displaySearchBar$.asObservable();
     }
@@ -1017,6 +1024,24 @@ class EditorService {
     get replaceCommentText$() {
         return this._replaceCommentText$.asObservable();
     }
+    get startNewList$() {
+        return this._startNewList$.asObservable();
+    }
+    get continueNumbering$() {
+        return this._continueNumbering$.asObservable();
+    }
+    get setNumberingValue$() {
+        return this._setNumberingValue$.asObservable();
+    }
+    startNewList() {
+        this._startNewList$.next();
+    }
+    continueNumbering() {
+        this._continueNumbering$.next();
+    }
+    setNumberingValue(value) {
+        this._setNumberingValue$.next(value);
+    }
     tabSettings(value) {
         this._tabSettings$.next(value);
     }
@@ -1273,6 +1298,9 @@ class EditorService {
     ignoreGrammarSuggestion(error) {
         this._ignoreGrammarError$.next(error);
     }
+    toggleGrammarChecks(value) {
+        this._toggleGrammarChecks$.next(value);
+    }
     addCommentAtSelection(commentType) {
         this._addCommentAtSelection$.next(commentType);
     }
@@ -1383,6 +1411,9 @@ class ExternalComponent extends BaseNoderComponent {
     getText() {
         return '';
     }
+    getAdditionalClasses() {
+        return [];
+    }
     skipSidenav() {
         return this.editorService.isViewOnly;
     }
@@ -1635,6 +1666,7 @@ var CommandType;
     CommandType[CommandType["AttachComment"] = 38] = "AttachComment";
     CommandType[CommandType["RemoveComment"] = 39] = "RemoveComment";
     CommandType[CommandType["ApplyNumberingLevels"] = 40] = "ApplyNumberingLevels";
+    CommandType[CommandType["ApplyNewNumberingForParagraphs"] = 41] = "ApplyNewNumberingForParagraphs";
 })(CommandType || (CommandType = {}));
 
 class PageNumbersModel {
@@ -1664,6 +1696,11 @@ class AddNumberingModel {
     }
 }
 
+var AfterCloseOverlayActions;
+(function (AfterCloseOverlayActions) {
+    AfterCloseOverlayActions[AfterCloseOverlayActions["OpenSetNumberingValue"] = 0] = "OpenSetNumberingValue";
+})(AfterCloseOverlayActions || (AfterCloseOverlayActions = {}));
+
 class ApplyDocumentPageFormatModel {
     constructor(fields) {
         if (fields) {
@@ -1683,6 +1720,14 @@ class ApplyImageStyleModel {
     }
 }
 
+class ApplyNewNumberingForParagraphsModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class ApplyNumberingLevelsModel {
     constructor(fields) {
         if (fields) {
@@ -1913,6 +1958,56 @@ class ContentHelper {
     }
 }
 
+const CONTEXT_MENU_HEIGHT = 210;
+const CONTEXT_MENU_WIDTH = 320;
+class ContextMenuComponent {
+    constructor(editorService, overlayService) {
+        this.editorService = editorService;
+        this.overlayService = overlayService;
+    }
+    ngOnDestroy() {
+        this.overlayService.close();
+    }
+    onCopy() {
+        this.editorService.copySelected();
+        this.overlayService.close();
+    }
+    onPaste() {
+        this.editorService.pasteFromClipboard();
+        this.overlayService.close();
+    }
+    onCut() {
+        this.editorService.cutSelected();
+        this.overlayService.close();
+    }
+    onStartNewList() {
+        this.editorService.startNewList();
+        this.overlayService.close();
+    }
+    onContinueNumbering() {
+        this.editorService.continueNumbering();
+        this.overlayService.close();
+    }
+    onSetNumberingValue() {
+        this.overlayService.close(AfterCloseOverlayActions.OpenSetNumberingValue);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContextMenuComponent, deps: [{ token: EditorService }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ContextMenuComponent, isStandalone: true, selector: "app-nod-context-menu", inputs: { hasNumbering: "hasNumbering", hasSelection: "hasSelection", disableContinueNumber: "disableContinueNumber" }, host: { properties: { "style.height.px": "210", "style.width.px": "320" } }, ngImport: i0, template: "<button\n    mat-button\n    (click)=\"onCopy()\"\n    [disabled]=\"!hasSelection\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-copy\" />\n    {{ 'NODER.LABEL.COPY' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onPaste()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-paste\" />\n    {{ 'NODER.LABEL.PASTE' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onCut()\"\n    [disabled]=\"!hasSelection\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-cut\" />\n    {{ 'NODER.LABEL.CUT' | translate }}\n</button>\n<div class=\"separator\"></div>\n<button\n    mat-button\n    (click)=\"onStartNewList()\"\n    [disabled]=\"!hasNumbering\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-restart-numbering\" />\n    {{ 'NODER.LABEL.START_NEW_LIST' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onContinueNumbering()\"\n    [disabled]=\"!hasNumbering || disableContinueNumber\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-continue-numbering\" />\n    {{ 'NODER.LABEL.CONTINUE_NUMBERING' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onSetNumberingValue()\"\n    [disabled]=\"!hasNumbering\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-starting-value\" />\n    {{ 'NODER.LABEL.SET_NUMBERING_VALUE' | translate }}\n</button>\n", styles: [":host{display:flex;padding:8px 16px;flex-direction:column;align-items:flex-start;gap:4px;border-radius:8px;box-shadow:2px 2px 8px #21212129}.separator{width:288px;height:1px}button{width:100%;justify-content:start;min-height:28px;height:28px}\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: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { 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: ContextMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nod-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, TranslateModule, MatIconModule], host: {
+                        '[style.height.px]': `${CONTEXT_MENU_HEIGHT}`,
+                        '[style.width.px]': `${CONTEXT_MENU_WIDTH}`
+                    }, template: "<button\n    mat-button\n    (click)=\"onCopy()\"\n    [disabled]=\"!hasSelection\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-copy\" />\n    {{ 'NODER.LABEL.COPY' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onPaste()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-paste\" />\n    {{ 'NODER.LABEL.PASTE' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onCut()\"\n    [disabled]=\"!hasSelection\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-cut\" />\n    {{ 'NODER.LABEL.CUT' | translate }}\n</button>\n<div class=\"separator\"></div>\n<button\n    mat-button\n    (click)=\"onStartNewList()\"\n    [disabled]=\"!hasNumbering\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-restart-numbering\" />\n    {{ 'NODER.LABEL.START_NEW_LIST' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onContinueNumbering()\"\n    [disabled]=\"!hasNumbering || disableContinueNumber\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-continue-numbering\" />\n    {{ 'NODER.LABEL.CONTINUE_NUMBERING' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onSetNumberingValue()\"\n    [disabled]=\"!hasNumbering\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-starting-value\" />\n    {{ 'NODER.LABEL.SET_NUMBERING_VALUE' | translate }}\n</button>\n", styles: [":host{display:flex;padding:8px 16px;flex-direction:column;align-items:flex-start;gap:4px;border-radius:8px;box-shadow:2px 2px 8px #21212129}.separator{width:288px;height:1px}button{width:100%;justify-content:start;min-height:28px;height:28px}\n"] }]
+        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }], propDecorators: { hasNumbering: [{
+                type: Input
+            }], hasSelection: [{
+                type: Input
+            }], disableContinueNumber: [{
+                type: Input
+            }] } });
+
 class CreateEdgesModel {
     constructor(fields) {
         if (fields) {
@@ -1964,10 +2059,12 @@ class DocumentHandler extends BaseHandler {
     constructor(editor) {
         super();
         this.documentKeyDown$ = fromEvent(document, 'keydown').subscribe((event) => this.onKeyDown(event));
+        this.contextMenu$ = fromEvent(document, 'contextmenu').subscribe(event => event.preventDefault());
         this.fillActions(editor);
     }
     destroy() {
         this.documentKeyDown$?.unsubscribe();
+        this.contextMenu$.unsubscribe();
     }
     onKeyDown(event) {
         const keyCombination = this.getKeyCombination(event);
@@ -2044,7 +2141,7 @@ class FormatHelper {
         let result = [];
         for (const format of formats) {
             if (format.startIndex >= startIndex && format.endIndex <= endIndex) {
-                result.push(new FormatModel({ ...format }));
+                result.push(new FormatModel({ ...format, textStyle: new TextStyleModel(format.textStyle) }));
             }
             else if (format.startIndex < startIndex && format.endIndex > endIndex) {
                 result.push(new FormatModel({ startIndex, endIndex, textStyle: new TextStyleModel(format.textStyle) }));
@@ -2066,13 +2163,10 @@ class FormatHelper {
     }
 }
 
-const POPUP_HEIGHT = 150;
-
 class GrammarPopupComponent {
     constructor(editorService, overlayService) {
         this.editorService = editorService;
         this.overlayService = overlayService;
-        this.hostHeight = `${POPUP_HEIGHT}px`;
     }
     onSuggestionClick(index) {
         this.editorService.applyGrammarSuggestion(this.error, index, this.paragraphIndex);
@@ -2083,15 +2177,12 @@ 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: i6.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" }, ngImport: i0, template: "<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<button\n    mat-button\n    class=\"ignore\"\n    (click)=\"onIgnoreClick()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-ignore\"></mat-icon>\n    <span>\n        {{ 'NODER.LABEL.IGNORE' | translate }}\n    </span>\n</button>\n", styles: [":host{border-radius:8px;display:flex;flex-direction:column;padding:8px;max-width:500px;gap:5px}.message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px}.options{display:flex;flex-flow:column wrap;justify-content:center;gap:5px;padding:10px 0;border-bottom-width:1px;border-bottom-style:solid}.suggestion{font-weight:600;font-size:14px;cursor:pointer;text-decoration:underline;padding:3px 8px}.ignore{margin-left:auto;font-size:12px;letter-spacing:0;cursor:pointer;height:32px}.ignore mat-icon{margin-right:4px}\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: 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,
-            args: [{ selector: 'app-nod-grammar-popup', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, TranslateModule], standalone: true, template: "<span\n    class=\"ignore\"\n    (click)=\"onIgnoreClick()\">\n    {{ 'NODER.LABEL.IGNORE' | translate }}\n</span>\n<span class=\"message\">{{ error.message }}</span>\n<div class=\"options\">\n    @for (suggestion of error.replacements; track i; let i = $index) {\n        <span\n            class=\"suggestion\"\n            (click)=\"onSuggestionClick(i)\">\n            {{ suggestion }}\n        </span>\n    }\n</div>\n", styles: [":host{border-radius:8px;display:flex;flex-direction:column;padding:8px;max-width:500px;gap:5px;box-shadow:0 8px 20px #00000026,0 4px 10px #0000001a}.message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-style:italic;font-size:14px;padding:0 10px;border-bottom-width:1px;border-bottom-style:solid}.options{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;padding:5px 0}.suggestion{font-weight:600;cursor:pointer;text-decoration:underline;padding:3px 8px}.ignore{border-radius:4px;margin-left:auto;font-weight:600;cursor:pointer;transition:all .3s ease;padding:3px 8px}\n"] }]
-        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }], propDecorators: { hostHeight: [{
-                type: HostBinding,
-                args: ['style.height']
-            }], error: [{
+            args: [{ selector: 'app-nod-grammar-popup', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, MatIconModule, TranslateModule], standalone: true, template: "<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<button\n    mat-button\n    class=\"ignore\"\n    (click)=\"onIgnoreClick()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-ignore\"></mat-icon>\n    <span>\n        {{ 'NODER.LABEL.IGNORE' | translate }}\n    </span>\n</button>\n", styles: [":host{border-radius:8px;display:flex;flex-direction:column;padding:8px;max-width:500px;gap:5px}.message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px}.options{display:flex;flex-flow:column wrap;justify-content:center;gap:5px;padding:10px 0;border-bottom-width:1px;border-bottom-style:solid}.suggestion{font-weight:600;font-size:14px;cursor:pointer;text-decoration:underline;padding:3px 8px}.ignore{margin-left:auto;font-size:12px;letter-spacing:0;cursor:pointer;height:32px}.ignore mat-icon{margin-right:4px}\n"] }]
+        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }], propDecorators: { error: [{
                 type: Input
             }], paragraphIndex: [{
                 type: Input
@@ -2407,11 +2498,7 @@ class LinkHelper {
     static sliceFormats(links, startIndex, endIndex) {
         const result = [];
         for (const link of links) {
-            const absoluteFormats = link.formats.map(x => ({
-                ...x,
-                startIndex: x.startIndex + link.startIndex,
-                endIndex: x.endIndex + link.startIndex
-            }));
+            const absoluteFormats = link.formats.map(x => new FormatModel({ ...x, startIndex: x.startIndex + link.startIndex, endIndex: x.endIndex + link.startIndex }));
             const slicedLinkFormats = FormatHelper.sliceSection(absoluteFormats, startIndex, endIndex);
             result.push(...slicedLinkFormats);
         }
@@ -2478,10 +2565,13 @@ class MouseHandler {
                 return;
             }
         }
-        if (event.button !== MouseButton.Left) {
+        if (event.button === MouseButton.Right) {
             editor.onMouseClick(event);
             return;
         }
+        if (event.button === MouseButton.Middle) {
+            return;
+        }
         editor.enableSelection();
         this.clicks = event.detail > 1 && this.clicks < 4 ? this.clicks + 1 : 1;
         switch (this.clicks) {
@@ -2509,6 +2599,17 @@ class MoveRangeModel {
     }
 }
 
+class NumberingLevelModel {
+    constructor(fields) {
+        if (fields) {
+            if (fields.markerStyle) {
+                fields.markerStyle = new TextStyleModel(fields.markerStyle);
+            }
+            Object.assign(this, fields);
+        }
+    }
+}
+
 let CellDataModel$1 = class CellDataModel {
     constructor(fields) {
         if (fields) {
@@ -2756,6 +2857,11 @@ class OperationHistory {
         const undoStep = new RestoreNumberingsModel({ paragraphs, numberings });
         this.addToHistory(undoStep, redoStep);
     }
+    pushApplyNewNumberingForParagraphs(oldParagraphs, levels, oldNumbering, insertIndexes) {
+        const redoStep = new ApplyNewNumberingForParagraphsModel({ insertIndexes, levels });
+        const undoStep = new RestoreNumberingsModel({ paragraphs: oldParagraphs, numberings: [oldNumbering] });
+        this.addToHistory(undoStep, redoStep);
+    }
     pushApplyNumbering(numberingId, newLevels, oldLevels) {
         const redoStep = new ApplyNumberingLevelsModel({ numberingId, levels: newLevels });
         const undoStep = new ApplyNumberingLevelsModel({ numberingId, levels: oldLevels });
@@ -3420,17 +3526,6 @@ var Alignment;
     Alignment[Alignment["Justify"] = 3] = "Justify";
 })(Alignment || (Alignment = {}));
 
-class NumberingLevelModel {
-    constructor(fields) {
-        if (fields) {
-            if (fields.markerStyle) {
-                fields.markerStyle = new TextStyleModel(fields.markerStyle);
-            }
-            Object.assign(this, fields);
-        }
-    }
-}
-
 var NumberingMarkerType;
 (function (NumberingMarkerType) {
     NumberingMarkerType[NumberingMarkerType["Bullet"] = 0] = "Bullet";
@@ -4761,6 +4856,17 @@ class ParagraphOperationsHelper {
         }
         return oldNumberingIds;
     }
+    static applyNumberingForParagraphs(paragraphs, insertIndexes, numberingId) {
+        let index = 0;
+        let paragraphIndex = paragraphs.findIndex(x => x.insertIndex == insertIndexes[index]);
+        while (index < insertIndexes.length) {
+            if (paragraphs[paragraphIndex].insertIndex == insertIndexes[index]) {
+                paragraphs[paragraphIndex].paragraphStyle.numberingId = numberingId;
+                index++;
+            }
+            paragraphIndex++;
+        }
+    }
     static apply(paragraphs, startIndex, endIndex, style) {
         let index = paragraphs.findIndex(x => x.insertIndex >= startIndex);
         for (; index < paragraphs.length && paragraphs[index].insertIndex <= endIndex; index++) {
@@ -5210,7 +5316,7 @@ class TableOperationsHelper {
             return null;
         }
         return new ApplyTableCellsStylesModel({
-            cellsData: this.getCellDataFromBorderCells(cellsMap, (oldBorder) => new BordersStyleModel({ ...oldBorder, ...new BordersStyleModel({ lineStyle: style }) })),
+            cellsData: this.getCellDataFromBorderCells(cellsMap, (oldBorder) => new BordersStyleModel({ ...oldBorder, lineStyle: style })),
             insertIndex: table.insertIndex
         });
     }
@@ -5225,7 +5331,7 @@ class TableOperationsHelper {
             return null;
         }
         return new ApplyTableCellsStylesModel({
-            cellsData: this.getCellDataFromBorderCells(cellsMap, (oldBorder) => new BordersStyleModel({ ...oldBorder, ...new BordersStyleModel({ width }) })),
+            cellsData: this.getCellDataFromBorderCells(cellsMap, (oldBorder) => new BordersStyleModel({ ...oldBorder, width })),
             insertIndex: table.insertIndex
         });
     }
@@ -5515,6 +5621,11 @@ class OperationsHelper {
                     this.insertBreak(document, text, model.insertIndex, model.breakType);
                     break;
                 }
+                case CommandType.ApplyNewNumberingForParagraphs: {
+                    const model = command.applyNewNumberingForParagraphs;
+                    this.applyNewNumberingForParagraphs(contents, document.numberings, model.levels, model.insertIndexes);
+                    break;
+                }
                 case CommandType.AddNumbering: {
                     const model = command.addNumbering;
                     this.addNumbering(contents, document.numberings, model.startIndex, model.endIndex, model.levels);
@@ -5794,6 +5905,11 @@ class OperationsHelper {
         NumberingOperationsHelper.addNumbering(numberings, newNumberingId, levels);
         NumberingOperationsHelper.deleteUnused(numberings, target.paragraphs, oldNumberingIds);
     }
+    static applyNewNumberingForParagraphs(target, numberings, levels, insertIndexes) {
+        const newNumberingId = NumberingOperationsHelper.generateNumberingId(numberings);
+        NumberingOperationsHelper.addNumbering(numberings, newNumberingId, levels);
+        ParagraphOperationsHelper.applyNumberingForParagraphs(target.paragraphs, insertIndexes, newNumberingId);
+    }
     static applyNumbering(numberings, levels, numberingId) {
         NumberingOperationsHelper.apply(numberings, numberingId, levels);
     }
@@ -6042,6 +6158,26 @@ class PageHelper {
     }
 }
 
+class ParagraphNumberingHelper {
+    static getNextParagraphsWithNumbering(paragraphs, paragraphIndex, numberingId) {
+        const paragraphsForUpdate = [];
+        for (let i = paragraphIndex; i < paragraphs.length; i++) {
+            if (numberingId === paragraphs[i].paragraphStyle.numberingId) {
+                paragraphsForUpdate.push(paragraphs[i]);
+            }
+        }
+        return paragraphsForUpdate;
+    }
+    static getPrevNumberingId(paragraphs, paragraphIndex) {
+        for (let i = paragraphIndex - 1; i >= 0; i--) {
+            if (paragraphs[i].paragraphStyle.numberingId) {
+                return paragraphs[i].paragraphStyle.numberingId;
+            }
+        }
+        return null;
+    }
+}
+
 class NumberingDataModel {
     constructor(fields) {
         if (!fields) {
@@ -6100,8 +6236,8 @@ class NumberingHelper {
             x.needToCalculateFirstMarker = false;
         });
     }
-    static setAllNumberingIsCalculated(numberingInfo) {
-        for (let numberingId in numberingInfo) {
+    static setAllNumberingIsCalculated(numberingInfo, numberingIds) {
+        for (let numberingId of numberingIds) {
             numberingInfo[numberingId].forEach(x => {
                 x.needToRecalculate = false;
                 x.needToCalculateFirstMarker = false;
@@ -6159,7 +6295,7 @@ class NumberingHelper {
         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 });
+        return new NumberingDataModel({ numberingId, level, marker, markerValue: numberingInfo[numberingId][level].markerIndex });
     }
     static updateMarkerData(numberings, paragraph, paragraphTextStyle, paragraphStyle) {
         const numberingLevel = NumberingHelper.findNumberingLevel(numberings, paragraph.numberingData.numberingId, paragraph.numberingData.level);
@@ -6592,6 +6728,7 @@ class RenderingHelper {
         let renderedIndexes = 0;
         const style = `max-height:${instance.ascent() + instance.descent()}px;`;
         const classes = instance.isFocused ? [CUSTOM_TAG, 'noder-focussed', 'noder-pointing'] : [CUSTOM_TAG, 'noder-pointing'];
+        classes.push(...instance.getAdditionalClasses());
         const attributes = [
             { name: 'data-session-id', value: `${instance.sessionId}` },
             { name: 'data-insert-index', value: `${instance.insertIndex}` }
@@ -7633,6 +7770,9 @@ class CommandModel {
             if (fields.applyImageStyle) {
                 fields.applyImageStyle = new ApplyImageStyleModel(fields.applyImageStyle);
             }
+            if (fields.applyNewNumberingForParagraphs) {
+                fields.applyNewNumberingForParagraphs = new ApplyNewNumberingForParagraphsModel(fields.applyNewNumberingForParagraphs);
+            }
             if (fields.applyNumberingLevels) {
                 fields.applyNumberingLevels = new ApplyNumberingLevelsModel(fields.applyNumberingLevels);
             }
@@ -7757,6 +7897,10 @@ class SaveCommandsHelper {
         const addNumbering = new AddNumberingModel({ startIndex, endIndex, levels });
         return new CommandModel({ commandType: CommandType.AddNumbering, addNumbering, targets });
     }
+    static getApplyNewNumberingForParagraphsCommand(insertIndexes, levels, targets) {
+        const applyNewNumberingForParagraphs = new ApplyNewNumberingForParagraphsModel({ insertIndexes, levels });
+        return new CommandModel({ commandType: CommandType.ApplyNewNumberingForParagraphs, applyNewNumberingForParagraphs, targets });
+    }
     static getApplyNumberingCommand(numberingId, levels, targets) {
         const applyNumberingLevels = new ApplyNumberingLevelsModel({ numberingId, levels });
         return new CommandModel({ commandType: CommandType.ApplyNumberingLevels, applyNumberingLevels, targets });
@@ -8585,6 +8729,35 @@ class Selection {
     }
 }
 
+const SET_NUMBERING_VALUE_HEIGHT = 175;
+const SET_NUMBERING_VALUE_WIDTH = 280;
+class SetNumberingValueComponent {
+    constructor(editorService, overlayService) {
+        this.editorService = editorService;
+        this.overlayService = overlayService;
+        this.markerValue = new FormControl(1);
+    }
+    ngOnDestroy() {
+        this.onClose();
+    }
+    onClose() {
+        this.overlayService.close();
+    }
+    onSetNumberingValue() {
+        this.editorService.setNumberingValue(this.markerValue.value);
+        this.onClose();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SetNumberingValueComponent, deps: [{ token: EditorService }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SetNumberingValueComponent, isStandalone: true, selector: "app-set-numbering-value", host: { properties: { "style.height.px": "175", "style.width.px": "280" } }, ngImport: i0, template: "<span class=\"title\">{{ 'NODER.LABEL.SET_DEFAULT_VALUE' | translate }}</span>\n<mat-form-field appearance=\"outline\">\n    <mat-label>{{ 'NODER.LABEL.DEFAULT_VALUE' | translate }}</mat-label>\n    <input\n        matInput\n        min=\"1\"\n        type=\"number\"\n        [formControl]=\"markerValue\" />\n</mat-form-field>\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)=\"onSetNumberingValue()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n    </button>\n</div>\n", styles: [":host{display:flex;padding:20px 24px;flex-direction:column;align-items:flex-start;border-radius:6px;box-shadow:2px 2px 8px #21212129}.title{font-size:16px;font-style:normal;font-weight:500;line-height:normal;margin-bottom:20px}.mat-mdc-form-field{width:100%}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}button{display:flex;justify-content:center;align-items:center;min-height:32px;height:32px;min-width:32px;width:32px}.mat-icon{font-size:16px;height:16px;min-width:16px;margin:0}.actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;align-self:stretch}\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: 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: MatFormFieldModule }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { 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" }, { kind: "ngmodule", type: MatIconModule }, { 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: SetNumberingValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-set-numbering-value', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, MatInputModule, MatFormFieldModule, ReactiveFormsModule, TranslateModule, MatIconModule], host: {
+                        '[style.height.px]': `${SET_NUMBERING_VALUE_HEIGHT}`,
+                        '[style.width.px]': `${SET_NUMBERING_VALUE_WIDTH}`
+                    }, template: "<span class=\"title\">{{ 'NODER.LABEL.SET_DEFAULT_VALUE' | translate }}</span>\n<mat-form-field appearance=\"outline\">\n    <mat-label>{{ 'NODER.LABEL.DEFAULT_VALUE' | translate }}</mat-label>\n    <input\n        matInput\n        min=\"1\"\n        type=\"number\"\n        [formControl]=\"markerValue\" />\n</mat-form-field>\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)=\"onSetNumberingValue()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n    </button>\n</div>\n", styles: [":host{display:flex;padding:20px 24px;flex-direction:column;align-items:flex-start;border-radius:6px;box-shadow:2px 2px 8px #21212129}.title{font-size:16px;font-style:normal;font-weight:500;line-height:normal;margin-bottom:20px}.mat-mdc-form-field{width:100%}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}button{display:flex;justify-content:center;align-items:center;min-height:32px;height:32px;min-width:32px;width:32px}.mat-icon{font-size:16px;height:16px;min-width:16px;margin:0}.actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;align-self:stretch}\n"] }]
+        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }] });
+
 class TextInput {
     constructor(parentElement) {
         this.lastValue = '';
@@ -8732,7 +8905,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.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.removeCommentSubscriptions(), this.rerenderCommentsSubscription(), this.selectCommentSubscription(), this.setComentsVisibilitySubscription(), this.getCommentTextSubscription(), this.replaceCommentTextSubscription());
+        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.toggleGrammarChecksSubscription(), 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(), this.startNewListSubscription(), this.continueNumberingSubscription(), this.setNumberingValueSubscription());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -9123,6 +9296,37 @@ class Editor {
         }
         this.renderer.updateCursor();
     }
+    startNewList(startValue) {
+        const startRow = this.selection.range.start.row;
+        const startParagraph = this.session.model.paragraphs[startRow];
+        const numbering = this.session.generalProperties.numberings.find(x => x.numberingId === startParagraph.paragraphStyle.numberingId);
+        const newNumberingLevels = numbering.levels.map(x => x.level === startParagraph.paragraphStyle.numberingLevel ? new NumberingLevelModel({ ...x, startValue }) : x);
+        const paragraphsForUpdate = ParagraphNumberingHelper.getNextParagraphsWithNumbering(this.session.model.paragraphs, startRow, startParagraph.paragraphStyle.numberingId);
+        const insertIndexes = paragraphsForUpdate.map(x => x.insertIndex);
+        this.saveApplyNewNumberingForParagraphsToHistory(newNumberingLevels, paragraphsForUpdate, numbering, insertIndexes);
+        this.session.applyNewNumberingForParagraphs(newNumberingLevels, insertIndexes);
+        this.renderer.updateCursor();
+    }
+    continueNumbering() {
+        const startRow = this.selection.range.start.row;
+        if (this.session.displayData.paragraphs[startRow].paragraphSettings.numberingData.level !== 0) {
+            return;
+        }
+        const startParagraph = this.session.model.paragraphs[startRow];
+        const prevNumberId = ParagraphNumberingHelper.getPrevNumberingId(this.session.model.paragraphs, startRow);
+        if (!prevNumberId) {
+            return;
+        }
+        const paragraphsForUpdate = ParagraphNumberingHelper.getNextParagraphsWithNumbering(this.session.model.paragraphs, startRow, startParagraph.paragraphStyle.numberingId);
+        const paragraphsDeepCopy = paragraphsForUpdate.map(x => new ParagraphModel({ insertIndex: x.insertIndex, paragraphStyle: new ParagraphStyleModel({ ...x.paragraphStyle }) }));
+        const updatedParagraphs = paragraphsForUpdate.map(x => new ParagraphModel({
+            insertIndex: x.insertIndex,
+            paragraphStyle: new ParagraphStyleModel({ ...x.paragraphStyle, numberingId: prevNumberId })
+        }));
+        this.saveApplyParagraphsToHistory(paragraphsDeepCopy, updatedParagraphs);
+        this.session.applyParagraphs(updatedParagraphs);
+        this.renderer.updateCursor();
+    }
     getUniformNumberingLevels(start, end) {
         const numberingId = this.session.model.paragraphs[start].paragraphStyle.numberingId;
         if (!numberingId) {
@@ -9432,6 +9636,10 @@ class Editor {
             this.session.applyNumbering(operation.levels, operation.numberingId);
             command = SaveCommandsHelper.getApplyNumberingCommand(operation.numberingId, operation.levels, this.targets);
         }
+        else if (operation instanceof ApplyNewNumberingForParagraphsModel) {
+            this.session.applyNewNumberingForParagraphs(operation.levels, operation.insertIndexes);
+            command = SaveCommandsHelper.getApplyNewNumberingForParagraphsCommand(operation.insertIndexes, operation.levels, this.targets);
+        }
         else {
             throw new Error('Undo/redo is not implemented for the Operation');
         }
@@ -9525,6 +9733,10 @@ class Editor {
         this.history.pushAddNumbering(startIndex, endIndex, templateLevels, paragraphsDeepCopy, numberings);
         this.commandsService.createCommand(SaveCommandsHelper.getAddNumberingCommand(startIndex, endIndex, templateLevels, this.targets));
     }
+    saveApplyNewNumberingForParagraphsToHistory(templateLevels, oldParagraphs, oldNumbering, insertIndexes) {
+        this.history.pushApplyNewNumberingForParagraphs(oldParagraphs, templateLevels, oldNumbering, insertIndexes);
+        this.commandsService.createCommand(SaveCommandsHelper.getApplyNewNumberingForParagraphsCommand(insertIndexes, templateLevels, this.targets));
+    }
     saveApplyNumberingListsToHistory(newNumberingLevels, oldNumberingLevels, numberingId) {
         this.history.pushApplyNumbering(numberingId, newNumberingLevels, oldNumberingLevels);
         this.commandsService.createCommand(SaveCommandsHelper.getApplyNumberingCommand(numberingId, newNumberingLevels, this.targets));
@@ -9803,6 +10015,11 @@ class Editor {
     }
     onMouseClick(event) {
         const customElement = this.setCurrentSession(event.target);
+        // todo need to add one logic for the right click for any element in the editor (tables, paragraphs, etc.)
+        if (!customElement) {
+            this.openContextMenu(event);
+            return;
+        }
         if (customElement && customElement.tagName !== TABLE_CELL_TAG && customElement.tagName !== EDGE_TAG) {
             this.focusCustomComponent(customElement);
         }
@@ -9810,6 +10027,31 @@ class Editor {
             this.selection.blur();
         }
     }
+    openContextMenu(event) {
+        const position = this.renderer.screenToParagraph(event.clientX, event.clientY);
+        const selection = this.selection.selectedRange;
+        if (this.selection.isEmpty ||
+            selection.start.row > position.row ||
+            selection.end.row < position.row ||
+            (selection.end.row === position.row && selection.end.column < position.column) ||
+            (selection.start.row === position.row && selection.start.column > position.column)) {
+            this.onShortLeftClick(event);
+        }
+        const topPosition = this.renderer.container.clientHeight < event.clientY + CONTEXT_MENU_HEIGHT
+            ? event.clientY - CONTEXT_MENU_HEIGHT
+            : event.clientY;
+        const paragraph = this.session.displayData.paragraphs[this.selection.range.start.row];
+        this.overlayService
+            .open(ContextMenuComponent, {
+            hasNumbering: !!paragraph.paragraphSettings.numberingData.numberingId,
+            hasSelection: !this.selection.isEmpty,
+            disableContinueNumber: paragraph.paragraphSettings.numberingData.markerValue !== 1
+        }, event.clientX, topPosition)
+            .pipe(take(1), filter(x => x === AfterCloseOverlayActions.OpenSetNumberingValue))
+            .subscribe(() => setTimeout(() => this.overlayService.open(SetNumberingValueComponent, {}, event.clientX, event.clientY)));
+        this.selection.blur();
+        event.stopPropagation();
+    }
     onLeftClick(event) {
         const position = this.renderer.screenToParagraph(event.clientX, event.clientY);
         if (!this.selection.isEmpty && this.session.isPositionInRange(position, this.selection.selectedRange)) {
@@ -9854,8 +10096,8 @@ class Editor {
             const cursor = PositionHelper.paragraphToPixel(this.session, paragraphPos.row, paragraphPos.column);
             const rect = this.renderer.container.getBoundingClientRect();
             const hintLeft = rect.left + cursor.pageX;
-            const hintTop = rect.top + cursor.pageY - POPUP_HEIGHT;
-            this.overlayService.open(GrammarPopupComponent, { error, paragraphIndex: position.row }, hintLeft - 100, hintTop);
+            const hintTop = rect.top + cursor.pageY + cursor.height + 5;
+            this.overlayService.open(GrammarPopupComponent, { error, paragraphIndex: position.row }, hintLeft, hintTop);
             event.stopPropagation();
         }
         event.preventDefault();
@@ -10364,6 +10606,9 @@ class Editor {
     ignoreGrammarErrorSubscription() {
         return this.editorService.ignoreGrammarError$.subscribe(x => this.grammarChecker.addErrorToIgnoreList(x));
     }
+    toggleGrammarChecksSubscription() {
+        return this.editorService.toggleGrammarChecks$.subscribe(x => this.regulatorService.toggleGrammarChecks(x));
+    }
     setTextStylesSubscription() {
         return this.editorService.setTextStyles$.subscribe(textStyles => {
             this.applyTextStyles(textStyles);
@@ -10659,7 +10904,7 @@ class Editor {
             }
         });
     }
-    removeCommentSubscriptions() {
+    removeCommentSubscription() {
         return this.editorService.removeComment$.subscribe(x => this.onCommentRemoved(x));
     }
     setComentsVisibilitySubscription() {
@@ -10671,6 +10916,15 @@ class Editor {
     replaceCommentTextSubscription() {
         return this.editorService.replaceCommentText$.subscribe(x => this.onCommentTextReplace(x.commentId, x.newContent));
     }
+    startNewListSubscription() {
+        return this.editorService.startNewList$.subscribe(() => this.startNewList(1));
+    }
+    continueNumberingSubscription() {
+        return this.editorService.continueNumbering$.subscribe(() => this.continueNumbering());
+    }
+    setNumberingValueSubscription() {
+        return this.editorService.setNumberingValue$.subscribe(x => this.startNewList(x));
+    }
     recreateMainSession() {
         while (this.regulatorService.sessions.length > 0) {
             const session = this.regulatorService.sessions[0];
@@ -11026,11 +11280,12 @@ class CellResizer {
             this.columnPositionChanged(positionX);
         };
     }
-    onStartResizing(cellResizerParameters) {
+    onStartResizing(cellResizerParameters, maxExpansionSpace = 0) {
         if (this.editorService.isViewOnly) {
             return;
         }
         this.cellResizerParameters = cellResizerParameters;
+        this.maxExpansionSpace = maxExpansionSpace;
         switch (this.cellResizerParameters.cellSide) {
             case ResizerSide.Left:
                 this.startResizingFromLeft();
@@ -11061,9 +11316,13 @@ class CellResizer {
         this.spaceLeft = this.table.columns[columnIndex].width - this.minCellWidth;
         this.spaceRight = 0;
         const nextColumnIndex = columnIndex + 1;
+        const isLast = columnIndex === this.table.columns.length - 1;
         if (this.table.columns.length > nextColumnIndex) {
             this.spaceRight = this.table.columns[nextColumnIndex].width - this.minCellWidth;
         }
+        else if (isLast) {
+            this.spaceRight = this.maxExpansionSpace;
+        }
         const cellRect = this.tableEl.rows[this.splitRowIndex].cells[this.cellResizerParameters.columnIndex].getBoundingClientRect();
         this.startX = this.tableEl.offsetLeft + cellRect.left + cellRect.width - this.resizerBorderSize;
         this.columnPositionChanged(this.startX);
@@ -11274,6 +11533,9 @@ class TableCellHelper {
         if (border.color && border.color !== 'auto') {
             style += ` ${border.color}`;
         }
+        else {
+            style += ` #000`;
+        }
         return style;
     }
     static getBorderLineStyle(lineStyle) {
@@ -11837,11 +12099,12 @@ class NoderTableComponent extends BaseNoderComponent {
         this.borderSize = 1;
         this.startResizing = (cellResizerParameters) => {
             const splitRowIndex = this.getSplitRowIndex(cellResizerParameters.rowIndex);
+            const availableTableSpace = this.getAvailableTableSpace();
             this.resizer.resizerHeight = this.getRowsHeightBetweenSplits(splitRowIndex);
             this.resizer.startY = this.getRowsHeightBefore(splitRowIndex);
             this.resizer.splitRowIndex = splitRowIndex;
             this.resizer.tableInsertIndex = this.insertIndex;
-            this.resizer.onStartResizing(cellResizerParameters);
+            this.resizer.onStartResizing(cellResizerParameters, availableTableSpace);
         };
         this.cellHeightChanged = (rowIndex, cellIndex, height) => {
             const tableRow = this.table.rows[rowIndex];
@@ -12199,6 +12462,13 @@ class NoderTableComponent extends BaseNoderComponent {
         }
         return sum;
     }
+    getAvailableTableSpace() {
+        const parent = this.el.nativeElement.parentElement;
+        if (!parent || !parent.classList.contains('noder-line')) {
+            return 0;
+        }
+        return Math.max(0, parent.clientWidth - this.tableEl.clientWidth);
+    }
     updateCells() {
         const rows = this.rowMatrix.length;
         const cols = rows > 0 ? this.rowMatrix[0].cells.length : 0;
@@ -12666,8 +12936,8 @@ class DisplayData extends EventEmitting {
         });
         return max;
     }
-    get ParagraphInfoChanges$() {
-        return this.ParagraphInfoChanges.asObservable();
+    get paragraphInfoChanges$() {
+        return this.paragraphInfoChanges.asObservable();
     }
     constructor(model, generalProperties, sessionId, pageFormatModels, pagesSpace, customComponents, customContentService, editorService) {
         super();
@@ -12682,7 +12952,7 @@ class DisplayData extends EventEmitting {
         this.paragraphs = [];
         this.pagesFormat = [];
         this.allPagesHeight = 0;
-        this.ParagraphInfoChanges = new Subject();
+        this.paragraphInfoChanges = new Subject();
         this.lastParagraphId = 0;
         this.updateDataForModel();
     }
@@ -12707,10 +12977,10 @@ class DisplayData extends EventEmitting {
             ? range.end.column - range.start.column
             : this.paragraphs[range.start.row].content.length - range.start.column;
         const spliced = this.paragraphs.splice(range.start.row, range.end.row - range.start.row + 1, changedParagraph);
-        this.ParagraphInfoChanges.next(new ParagraphInfoContentChanged(changedParagraph, range.start.column, removedLength));
+        this.paragraphInfoChanges.next(new ParagraphInfoContentChanged(changedParagraph, range.start.column, removedLength));
         const removedParagraphs = spliced.filter(x => x.id !== changedParagraph.id).map(x => x.id);
         if (removedParagraphs.length) {
-            this.ParagraphInfoChanges.next(new ParagraphInfosRemoved(removedParagraphs));
+            this.paragraphInfoChanges.next(new ParagraphInfosRemoved(removedParagraphs));
         }
         this.paragraphs[range.start.row].paragraphSettings = paragraphSettings;
     }
@@ -12963,10 +13233,7 @@ class DisplayData extends EventEmitting {
             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;
-                }
+                let startNumberingParagraphIndex = this.findFirstNumberingParagraph(updateNumberingFromIndex ?? i, numberingId);
                 if (updateNumberingFromIndex === null || updateNumberingFromIndex > startNumberingParagraphIndex) {
                     updateNumberingFromIndex = startNumberingParagraphIndex;
                 }
@@ -12990,23 +13257,27 @@ class DisplayData extends EventEmitting {
         this.updateParagraphLineNumber(firstParagraph);
         this.processParagraphsProperties(firstParagraph);
     }
-    isSameNumberingId(paragraphIndex, numberingId) {
-        if (paragraphIndex === 0) {
-            return false;
+    findFirstNumberingParagraph(paragraphIndex, numberingId) {
+        for (let i = 0; i <= paragraphIndex; i++) {
+            const startNumberingId = this.model.paragraphs[paragraphIndex].paragraphStyle.numberingId ??
+                this.getParagraphSettings(paragraphIndex)?.numberingData.numberingId;
+            if (numberingId === startNumberingId) {
+                return i;
+            }
         }
-        const startNumberingId = this.model.paragraphs[paragraphIndex].paragraphStyle.numberingId ??
-            this.getParagraphSettings(paragraphIndex)?.numberingData.numberingId;
-        return numberingId === startNumberingId;
+        return paragraphIndex;
     }
     updateNumberingsDataOnChange(index) {
         if (index === null) {
             return;
         }
+        const updatedNumberingsIds = new Set();
         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) {
                 if (this.generalProperties.numberingInfo[paragraphStyle.numberingId][paragraphStyle.numberingLevel].needToRecalculate) {
+                    updatedNumberingsIds.add(paragraphStyle.numberingId);
                     NumberingHelper.calculateMarkerIndexes(paragraphStyle.numberingId, paragraphStyle.numberingLevel, this.generalProperties.numberingInfo);
                     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);
@@ -13018,7 +13289,7 @@ class DisplayData extends EventEmitting {
                 table.instance.updateCells();
             }
         }
-        NumberingHelper.setAllNumberingIsCalculated(this.generalProperties.numberingInfo);
+        NumberingHelper.setAllNumberingIsCalculated(this.generalProperties.numberingInfo, updatedNumberingsIds);
         if ('pageType' in this.model) {
             this.editorService.updateEdges(this.sessionId);
         }
@@ -13066,8 +13337,11 @@ class DisplayData extends EventEmitting {
     getParagraphLineTokens(paragraphIndex, paragraphLine) {
         const paragraph = this.paragraphs[paragraphIndex];
         const isLastParagraph = paragraphIndex === this.paragraphs.length - 1;
-        const line = paragraph.paragraphSettings.textLinesInfo[paragraphLine];
-        const lineContent = paragraph.content.substring(line.startIndex, line.endIndex + 1);
+        const lines = paragraph.paragraphSettings.textLinesInfo;
+        const line = lines[paragraphLine];
+        const isLastLine = paragraphLine === lines.length - 1;
+        const crucialContentEnd = isLastLine ? paragraph.content.length : lines[paragraphLine + 1].endIndex + 1;
+        const lineContent = paragraph.content.substring(line.startIndex, crucialContentEnd);
         const paragraphSymbolIndex = paragraph.paragraphSettings.startInsertIndex + paragraph.content.length;
         const tokens = this.getTokens(line.startIndex + paragraph.startIndex, lineContent, paragraphSymbolIndex);
         if (line.customTexts && line.customTexts[0].index === line.startIndex) {
@@ -13079,7 +13353,6 @@ class DisplayData extends EventEmitting {
         const startWidth = line.indentLeft + line.indentFirstLine - line.indent.hanging || 0;
         const last = this.computeWrapToken(tokens, startWidth, maxWidth, paragraphStyle.tabSettings ?? [], isLastParagraph); // tab width correction for tokens according to the tabs complex positioning
         tokens.splice(last + 1); // cut additional tokens in case when line ends in the middle of the textual custom component
-        const isLastLine = paragraphLine === paragraph.paragraphSettings.textLinesInfo.length - 1;
         const position = { isLastLine, isNumbering: line.isNumbering, isAfterPageBreak: false };
         LineInfoHelper.get(tokens, paragraphStyle, line.indent, pageFormat.contentWidth, 0, position); // space width correction for tokens according to the wordSpacing in case of justify alignment
         return tokens;
@@ -13329,9 +13602,9 @@ class DisplayData extends EventEmitting {
                 const change = addedLength
                     ? new ParagraphInfoContentInserted(insertParagraphs[i], position.column, addedLength)
                     : new ParagraphInfoContentChanged(insertParagraphs[i], position.column, removedLength);
-                this.ParagraphInfoChanges.next(change);
+                this.paragraphInfoChanges.next(change);
             }
-            this.ParagraphInfoChanges.next(new ParagraphInfoAdded(insertParagraphs[i]));
+            this.paragraphInfoChanges.next(new ParagraphInfoAdded(insertParagraphs[i]));
         }
         return new CursorParagraph(position.row + insertParagraphs.length - 1, insertParagraphs[insertParagraphs.length - 1].content.length - right.length);
     }
@@ -14061,7 +14334,7 @@ class EditSession {
         return this.scrollBar?.element.clientHeight ?? 0; // only main session is scrollable
     }
     get paragraphInfoChanges$() {
-        return this.displayData.ParagraphInfoChanges$;
+        return this.displayData.paragraphInfoChanges$;
     }
     constructor(displayData, sessionId, customContentService, commentRenderService, model, selection, generalProperties, editorService, customComponents, type, scrollBar, edgeType, pageType) {
         this.displayData = displayData;
@@ -14252,6 +14525,15 @@ class EditSession {
         this.displayData.updateNextLineIndexes(startParagraph, endParagraph);
         this.applyToolbarStyles();
     }
+    applyNewNumberingForParagraphs(levels, insertIndexes) {
+        const startIndex = insertIndexes[0];
+        const endIndex = insertIndexes[insertIndexes.length - 1];
+        const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
+        const endParagraph = ContentHelper.documentIndexToParagraphWithOffset(this.displayData.paragraphs, endIndex).row;
+        OperationsHelper.applyNewNumberingForParagraphs(this.model, this.generalProperties.numberings, levels, insertIndexes);
+        this.displayData.updateNextLineIndexes(startParagraph, endParagraph);
+        this.applyToolbarStyles();
+    }
     applyNumbering(levels, numberingId) {
         const paragraphIndex = this.displayData.paragraphs.findIndex(x => x.paragraphSettings.numberingData.numberingId === numberingId);
         OperationsHelper.applyNumbering(this.generalProperties.numberings, levels, numberingId);
@@ -14703,7 +14985,7 @@ class GrammarChecker {
         this.sessionMap.set(session.sessionId, session);
         const updateSubscription = session.session.paragraphInfoChanges$.subscribe(x => this.processParagraphChange(session, x));
         this.sessionSubscriptions.set(session.sessionId, [updateSubscription]);
-        this.visibilitySubscriptions.set(session.sessionId, session.renderer.ParagraphsAppeared$.subscribe(x => {
+        this.visibilitySubscriptions.set(session.sessionId, session.renderer.paragraphsAppeared$.subscribe(x => {
             if (session.session.editorService.isViewOnly) {
                 return;
             }
@@ -15162,6 +15444,9 @@ class GrammarHighlightLayer extends HighlightLayer {
     removeParagraphHighlights(paragraphId) {
         this.errorsByParagraph.delete(paragraphId);
     }
+    clearHighlights() {
+        this.errorsByParagraph.clear();
+    }
 }
 
 class RenderChangesModel {
@@ -15411,8 +15696,8 @@ class SelectionLayer extends HighlightLayer {
 }
 
 class Renderer extends EventEmitting {
-    get ParagraphsAppeared$() {
-        return this.ParagraphsAppeared.asObservable();
+    get paragraphsAppeared$() {
+        return this.paragraphsAppeared.asObservable();
     }
     constructor(parentContainer, commentsService, session) {
         super();
@@ -15439,7 +15724,7 @@ class Renderer extends EventEmitting {
         };
         this.isVisible = false;
         this.changes = new RenderChangesModel();
-        this.ParagraphsAppeared = new Subject();
+        this.paragraphsAppeared = new Subject();
         this.visibilitySubject = new Subject();
         this.textareaSize = {
             height: 1,
@@ -15581,6 +15866,18 @@ class Renderer extends EventEmitting {
     removeGrammarHighlights(paragraphId) {
         this.grammarHighlightLayer.removeParagraphHighlights(paragraphId);
     }
+    clearGrammarHighlights() {
+        this.grammarHighlightLayer.clearHighlights();
+        this.loop.schedule({ grammar: true });
+    }
+    paragraphsScrolledIntoView() {
+        if (!this.layerConfig.visibleRange) {
+            this.paragraphsAppeared.next(this.session.displayData.paragraphs);
+            return;
+        }
+        const paragraphs = this.session.displayData.paragraphs.slice(this.layerConfig.visibleRange.startParagraph, this.layerConfig.visibleRange.endParagraph + 1);
+        this.paragraphsAppeared.next(paragraphs);
+    }
     updateDragAndDropSelection(range) {
         if (range.isEmpty && this.dragAndDropSelectionLayer.marker) {
             this.dragAndDropSelectionLayer.marker = null;
@@ -15708,14 +16005,6 @@ class Renderer extends EventEmitting {
             this.container.appendChild(this.content);
         }
     }
-    paragraphsScrolledIntoView() {
-        if (!this.layerConfig.visibleRange) {
-            this.ParagraphsAppeared.next(this.session.displayData.paragraphs);
-            return;
-        }
-        const paragraphs = this.session.displayData.paragraphs.slice(this.layerConfig.visibleRange.startParagraph, this.layerConfig.visibleRange.endParagraph);
-        this.ParagraphsAppeared.next(paragraphs);
-    }
 }
 
 /**
@@ -15947,8 +16236,8 @@ class VirtualRenderer {
     set layerConfig(val) {
         this.renderer.layerConfig = val;
     }
-    get ParagraphsAppeared$() {
-        return this.renderer.ParagraphsAppeared.asObservable();
+    get paragraphsAppeared$() {
+        return this.renderer.paragraphsAppeared.asObservable();
     }
     constructor(parentContainer, mainSession, commentService, scrollBar) {
         this.scrollBar = scrollBar;
@@ -16197,6 +16486,13 @@ class VirtualRenderer {
     showStaticCursor() {
         this.renderer.showStaticCursor();
     }
+    clearGrammarHighlights() {
+        this.renderer.clearGrammarHighlights();
+    }
+    paragraphsScrolledIntoView() {
+        const paragraphs = this.renderer.session.displayData.paragraphs.slice(this.layerConfig.visibleRange.startParagraph, this.layerConfig.visibleRange.endParagraph + 1);
+        this.renderer.paragraphsAppeared.next(paragraphs);
+    }
     destroy() {
         DomHelper.removeElement(this.scrollBar.element);
         this.pagesLayer.destroy();
@@ -16294,10 +16590,6 @@ class VirtualRenderer {
     renderComments() {
         this.renderer.renderComments();
     }
-    paragraphsScrolledIntoView() {
-        const paragraphs = this.renderer.session.displayData.paragraphs.slice(this.layerConfig.visibleRange.startParagraph, this.layerConfig.visibleRange.endParagraph);
-        this.renderer.ParagraphsAppeared.next(paragraphs);
-    }
 }
 
 class CustomContentService {
@@ -16450,6 +16742,7 @@ class RegulatorService {
         this.commentRenderService = commentRenderService;
         this.sessions = [];
         this.sessionIdIncrement = 0;
+        this.grammarEnabled = false;
         this.grammarChecker = new GrammarChecker(this.grammarService);
     }
     addMainSession(model, scalingRatio, container) {
@@ -16483,7 +16776,9 @@ class RegulatorService {
         this.sessions.push(this.mainSession);
         this.currentSession = this.mainSession;
         displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
-        this.grammarChecker.registerSession(this.mainSession);
+        if (this.grammarEnabled) {
+            this.grammarChecker.registerSession(this.mainSession);
+        }
     }
     addCellSession(table, margins, component, properties) {
         const sessionId = ++this.sessionIdIncrement;
@@ -16499,7 +16794,9 @@ class RegulatorService {
         this.sessions.push(newSession);
         displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
         newSession.renderer.updateText();
-        this.grammarChecker.registerSession(newSession);
+        if (this.grammarEnabled) {
+            this.grammarChecker.registerSession(newSession);
+        }
         return newSession;
     }
     addEdgeSession(component) {
@@ -16513,7 +16810,9 @@ class RegulatorService {
         this.sessions.push(newSession);
         displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
         newSession.renderer.updateText();
-        this.grammarChecker.registerSession(newSession);
+        if (this.grammarEnabled) {
+            this.grammarChecker.registerSession(newSession);
+        }
         return newSession;
     }
     removeSession(sessionId) {
@@ -16687,6 +16986,20 @@ class RegulatorService {
             }
         });
     }
+    toggleGrammarChecks(value) {
+        this.grammarEnabled = value;
+        if (this.grammarEnabled) {
+            for (const session of this.sessions) {
+                this.grammarChecker.registerSession(session);
+                session.renderer.paragraphsScrolledIntoView();
+            }
+            return;
+        }
+        for (const session of this.sessions) {
+            this.grammarChecker.unregisterSession(session.sessionId);
+            session.renderer.clearGrammarHighlights();
+        }
+    }
     getEdgeSessionId(sessionId) {
         let session = this.getSession(sessionId);
         while (session && !session.isEdge()) {
@@ -18450,11 +18763,11 @@ class SpacingComponent {
         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 }); }
+    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.LINE_SPACING' | 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"] }]
+            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.LINE_SPACING' | 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 {
@@ -18523,11 +18836,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-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 }); }
+    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 (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<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-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"] }]
+            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 (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<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']