@talrace/ngx-noder 0.0.46 → 19.0.24

package/fesm2022/talrace-ngx-noder.mjs

@@ -30,7 +30,7 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import * as i7 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i3$2 from '@angular/material/core';
-import * as i9 from '@angular/material/sidenav';
+import * as i10 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i4$1 from '@angular/material/menu';
@@ -40,11 +40,13 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import * as i2$1 from '@angular/platform-browser';
 import * as i2$2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i2$3 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
 import * as i5$3 from 'ngx-colors';
 import { NgxColorsModule } from 'ngx-colors';
 import * as i3$3 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i10 from '@angular/material/checkbox';
+import * as i10$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i12 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
@@ -559,6 +561,7 @@ class EditorService {
         this._changeImageStyle$ = new Subject();
         this._rerender$ = new Subject();
         this._createCustomComponent$ = new Subject();
+        this._replaceByCustomComponent$ = new Subject();
         this._insertBreak$ = new Subject();
         this._insertImage$ = new Subject();
         this._insertLink$ = new Subject();
@@ -576,6 +579,10 @@ class EditorService {
         this._removeRight$ = new Subject();
         this._resizeTableColumns$ = new Subject();
         this._insertTable$ = new Subject();
+        this._updateTableBorderStyle$ = new Subject();
+        this._updateTableBorderWidth$ = new Subject();
+        this._updateTableBorders$ = new Subject();
+        this._isTableSelected$ = new BehaviorSubject(false);
         this._redo$ = new Subject();
         this._undo$ = new Subject();
         this._print$ = new Subject();
@@ -601,7 +608,10 @@ class EditorService {
         this._leftIndentParagraph$ = new Subject();
         this._tabSettings$ = new Subject();
         this._rightIndentParagraph$ = new Subject();
-        this._paragraphStyle$ = new BehaviorSubject(new ParagraphStyleModel());
+        this._paragraphStyle$ = new BehaviorSubject({
+            paragraphStyle: new ParagraphStyleModel(),
+            numberingModel: null
+        });
     }
     set styles(value) {
         this._styles$.next({ ...value });
@@ -696,6 +706,9 @@ class EditorService {
     get createCustomComponent$() {
         return this._createCustomComponent$.asObservable();
     }
+    get replaceByCustomComponent$() {
+        return this._replaceByCustomComponent$.asObservable();
+    }
     get insertBreak$() {
         return this._insertBreak$.asObservable();
     }
@@ -747,6 +760,21 @@ class EditorService {
     get insertTable$() {
         return this._insertTable$.asObservable();
     }
+    get updateTableBorderStyle$() {
+        return this._updateTableBorderStyle$.asObservable();
+    }
+    get updateTableBorderWidth$() {
+        return this._updateTableBorderWidth$.asObservable();
+    }
+    get updateTableBorders$() {
+        return this._updateTableBorders$.asObservable();
+    }
+    get isTableSelected() {
+        return this._isTableSelected$.value;
+    }
+    get isTableSelected$() {
+        return this._isTableSelected$.asObservable();
+    }
     get redo$() {
         return this._redo$.asObservable();
     }
@@ -847,8 +875,8 @@ class EditorService {
     applyRightIndentParagraph(value) {
         this._rightIndentParagraph$.next(value);
     }
-    paragraphStyle(value) {
-        this._paragraphStyle$.next(value);
+    paragraphStyle(value, numbering = null) {
+        this._paragraphStyle$.next({ paragraphStyle: value, numberingModel: numbering });
     }
     applyRightMarginPageFormat(value) {
         this._rightMarginPageFormat$.next(value);
@@ -917,6 +945,9 @@ class EditorService {
     createCustomComponent(model) {
         this._createCustomComponent$.next(model);
     }
+    replaceByCustomComponent(textKey, model) {
+        this._replaceByCustomComponent$.next({ textKey, model });
+    }
     insertBreak(value) {
         this._insertBreak$.next(value);
     }
@@ -980,6 +1011,21 @@ class EditorService {
     insertTable(tableData) {
         this._insertTable$.next(tableData);
     }
+    updateTableBorderStyle(style) {
+        this._updateTableBorderStyle$.next(style);
+    }
+    updateTableBorderWidth(width) {
+        this._updateTableBorderWidth$.next(width);
+    }
+    updateTableBorders(borders) {
+        this._updateTableBorders$.next(borders);
+    }
+    setIsTableSelected(value) {
+        if (this.isTableSelected === value) {
+            return;
+        }
+        this._isTableSelected$.next(value);
+    }
     undo() {
         this._undo$.next();
     }
@@ -1199,10 +1245,13 @@ class DefaultImageApiService {
 class GrammarService {
     constructor() {
         this.debounceTime = 3000;
+        this.maxConcurrentRequests = 3;
         this.paragraphSubjects = new Map();
         this.debounceSubscriptions = new Map();
         this.grammarCheckRequests = new Subject();
         this.grammarCheckResults = new Subject();
+        this.requestQueue = [];
+        this.requestsInFlight = 0;
     }
     get grammarCheckRequests$() {
         return this.grammarCheckRequests.asObservable();
@@ -1218,27 +1267,44 @@ class GrammarService {
         subject.next(paragraph);
     }
     removeParagraph(sessionId, paragraphId) {
-        const subject = this.paragraphSubjects.get(`${sessionId}-${paragraphId}`);
-        const subscription = this.debounceSubscriptions.get(`${sessionId}-${paragraphId}`);
+        const key = `${sessionId}-${paragraphId}`;
+        const subject = this.paragraphSubjects.get(key);
+        const subscription = this.debounceSubscriptions.get(key);
+        this.requestQueue = this.requestQueue.filter(x => x.id !== key);
         if (subject) {
             subject.complete();
-            this.paragraphSubjects.delete(`${sessionId}-${paragraphId}`);
+            this.paragraphSubjects.delete(key);
         }
         if (subscription) {
             subscription.unsubscribe();
-            this.debounceSubscriptions.delete(`${sessionId}-${paragraphId}`);
+            this.debounceSubscriptions.delete(key);
         }
     }
     publishGrammarCheckResults(paragraphId, errors) {
         this.grammarCheckResults.next({ paragraphId, errors });
+        this.requestsInFlight--;
+        this.processQueue();
+    }
+    enqueueParagraphs(sessionId, paragraphs) {
+        const requests = paragraphs
+            .filter(x => x.content.trim().length > 0 && !this.requestQueue.some(y => y.id === `${sessionId}-${x.id}`))
+            .map(x => ({ id: `${sessionId}-${x.id}`, paragraph: x.content }));
+        this.requestQueue.unshift(...requests);
+        this.processQueue();
     }
     destroy() {
-        this.paragraphSubjects.forEach(subject => subject.complete());
+        for (const [, subject] of this.paragraphSubjects) {
+            subject.complete();
+        }
         this.paragraphSubjects.clear();
-        this.debounceSubscriptions.forEach(subscription => subscription.unsubscribe());
+        for (const [, subscription] of this.debounceSubscriptions) {
+            subscription.unsubscribe();
+        }
         this.debounceSubscriptions.clear();
         this.grammarCheckRequests.complete();
         this.grammarCheckResults.complete();
+        this.requestQueue = [];
+        this.requestsInFlight = 0;
     }
     registerParagraph(sessionId, paragraph) {
         if (this.paragraphSubjects.has(`${sessionId}-${paragraph.id}`)) {
@@ -1248,9 +1314,22 @@ class GrammarService {
         this.paragraphSubjects.set(`${sessionId}-${paragraph.id}`, subject);
         const subscription = subject
             .pipe(distinctUntilChanged((x, y) => x.content.trim() === y.content.trim()), debounceTime(this.debounceTime), filter(x => x.content.trim().length > 0))
-            .subscribe(x => this.grammarCheckRequests.next({ id: `${sessionId}-${x.id}`, paragraph: x.content }));
+            .subscribe(x => this.enqueueGrammarCheck(`${sessionId}-${x.id}`, x.content));
         this.debounceSubscriptions.set(`${sessionId}-${paragraph.id}`, subscription);
     }
+    enqueueGrammarCheck(id, paragraph) {
+        this.requestQueue = this.requestQueue.filter(x => x.id !== id);
+        const request = { id, paragraph };
+        this.requestQueue.unshift(request);
+        this.processQueue();
+    }
+    processQueue() {
+        while (this.requestsInFlight <= this.maxConcurrentRequests && this.requestQueue.length > 0) {
+            const request = this.requestQueue.shift();
+            this.requestsInFlight++;
+            this.grammarCheckRequests.next(request);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarService, providedIn: 'root' }); }
 }
@@ -1300,6 +1379,7 @@ var CommandType;
     CommandType[CommandType["RemoveInsertedPageFormat"] = 34] = "RemoveInsertedPageFormat";
     CommandType[CommandType["RestorePageFormats"] = 35] = "RestorePageFormats";
     CommandType[CommandType["ApplyParagraphs"] = 36] = "ApplyParagraphs";
+    CommandType[CommandType["ApplyTableCellsStyles"] = 37] = "ApplyTableCellsStyles";
 })(CommandType || (CommandType = {}));
 
 class PageNumbersModel {
@@ -1378,6 +1458,14 @@ class ApplyParagraphStyleModel {
     }
 }
 
+class ApplyTableCellsStylesModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class ApplyTextStyleModel {
     constructor(fields) {
         if (fields) {
@@ -1647,6 +1735,16 @@ class OverlayService {
     getOverlayPosition(xPosition, yPosition) {
         return this.overlay.position().global().left(`${xPosition}px`).top(`${yPosition}px`);
     }
+    scroll(deltaY) {
+        // todo: close overlay when out of visible area
+        if (!this.overlayRef) {
+            return;
+        }
+        const x = this.overlayRef.overlayElement.offsetLeft;
+        const y = this.overlayRef.overlayElement.offsetTop - deltaY;
+        const strategy = this.overlay.position().global().left(`${x}px`).top(`${y}px`);
+        this.overlayRef.updatePositionStrategy(strategy);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OverlayService, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OverlayService }); }
 }
@@ -2087,6 +2185,14 @@ class MoveRangeModel {
     }
 }
 
+let CellDataModel$1 = class CellDataModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+};
+
 class RemoveEdgesModel {
     constructor(fields) {
         if (fields) {
@@ -2218,6 +2324,19 @@ class OperationHistory {
         const undoStep = new DeleteModel({ startIndex: model.insertIndex, count });
         this.addToHistory(undoStep, model);
     }
+    pushApplyTableCellsStyles(currentTable, model, targets) {
+        const undoStep = new ApplyTableCellsStylesModel({
+            insertIndex: model.insertIndex,
+            cellsData: model.cellsData.map(x => {
+                return new CellDataModel$1({
+                    rowIndex: x.rowIndex,
+                    cellIndex: x.cellIndex,
+                    borders: currentTable.rows[x.rowIndex].cells[x.cellIndex].borders
+                });
+            })
+        });
+        this.addToHistory(undoStep, model, null, targets);
+    }
     pushInsertStyledText(insertIndex, text, style) {
         const redoStep = new InsertStyledTextModel({ insertIndex, text, textStyle: style });
         const undoStep = new DeleteModel({ startIndex: insertIndex, count: text.length });
@@ -4261,6 +4380,18 @@ class ParagraphOperationsHelper {
     }
 }
 
+var Borders;
+(function (Borders) {
+    Borders[Borders["Bottom"] = 0] = "Bottom";
+    Borders[Borders["Top"] = 1] = "Top";
+    Borders[Borders["Left"] = 2] = "Left";
+    Borders[Borders["Right"] = 3] = "Right";
+    Borders[Borders["Empty"] = 4] = "Empty";
+    Borders[Borders["All"] = 5] = "All";
+    Borders[Borders["Outside"] = 6] = "Outside";
+    Borders[Borders["Inside"] = 7] = "Inside";
+})(Borders || (Borders = {}));
+
 class ColumnModel {
     constructor(fields) {
         if (fields) {
@@ -4269,6 +4400,55 @@ class ColumnModel {
     }
 }
 
+var LineStyles;
+(function (LineStyles) {
+    LineStyles[LineStyles["SolidLine"] = 0] = "SolidLine";
+    LineStyles[LineStyles["RoundDot"] = 1] = "RoundDot";
+    LineStyles[LineStyles["SquareDot"] = 2] = "SquareDot";
+    LineStyles[LineStyles["Dash"] = 3] = "Dash";
+    LineStyles[LineStyles["DashDot"] = 4] = "DashDot";
+    LineStyles[LineStyles["LongDash"] = 5] = "LongDash";
+    LineStyles[LineStyles["LongDashDot"] = 6] = "LongDashDot";
+    LineStyles[LineStyles["LongDashDotDot"] = 7] = "LongDashDotDot";
+    LineStyles[LineStyles["Single"] = 8] = "Single";
+    LineStyles[LineStyles["Thick"] = 9] = "Thick";
+    LineStyles[LineStyles["Double"] = 10] = "Double";
+    LineStyles[LineStyles["Dotted"] = 11] = "Dotted";
+    LineStyles[LineStyles["Dashed"] = 12] = "Dashed";
+    LineStyles[LineStyles["DotDash"] = 13] = "DotDash";
+    LineStyles[LineStyles["DotDotDash"] = 14] = "DotDotDash";
+    LineStyles[LineStyles["Triple"] = 15] = "Triple";
+    LineStyles[LineStyles["ThinThickSmallGap"] = 16] = "ThinThickSmallGap";
+    LineStyles[LineStyles["ThickThinSmallGap"] = 17] = "ThickThinSmallGap";
+    LineStyles[LineStyles["ThinThickThinSmallGap"] = 18] = "ThinThickThinSmallGap";
+    LineStyles[LineStyles["ThinThickMediumGap"] = 19] = "ThinThickMediumGap";
+    LineStyles[LineStyles["ThickThinMediumGap"] = 20] = "ThickThinMediumGap";
+    LineStyles[LineStyles["ThinThickThinMediumGap"] = 21] = "ThinThickThinMediumGap";
+    LineStyles[LineStyles["ThinThickLargeGap"] = 22] = "ThinThickLargeGap";
+    LineStyles[LineStyles["ThickThinLargeGap"] = 23] = "ThickThinLargeGap";
+    LineStyles[LineStyles["ThinThickThinLargeGap"] = 24] = "ThinThickThinLargeGap";
+    LineStyles[LineStyles["Wave"] = 25] = "Wave";
+    LineStyles[LineStyles["DoubleWave"] = 26] = "DoubleWave";
+    LineStyles[LineStyles["DashSmallGap"] = 27] = "DashSmallGap";
+    LineStyles[LineStyles["DashDotStroked"] = 28] = "DashDotStroked";
+    LineStyles[LineStyles["ThreeDEmboss"] = 29] = "ThreeDEmboss";
+    LineStyles[LineStyles["ThreeDEngrave"] = 30] = "ThreeDEngrave";
+    LineStyles[LineStyles["Outset"] = 31] = "Outset";
+    LineStyles[LineStyles["Inset"] = 32] = "Inset";
+    LineStyles[LineStyles["Nil"] = 33] = "Nil";
+})(LineStyles || (LineStyles = {}));
+
+var Positions;
+(function (Positions) {
+    Positions[Positions["Top"] = 0] = "Top";
+    Positions[Positions["Right"] = 1] = "Right";
+    Positions[Positions["Bottom"] = 2] = "Bottom";
+    Positions[Positions["Left"] = 3] = "Left";
+    Positions[Positions["All"] = 4] = "All";
+    Positions[Positions["InsideHorizontal"] = 5] = "InsideHorizontal";
+    Positions[Positions["InsideVertical"] = 6] = "InsideVertical";
+})(Positions || (Positions = {}));
+
 var ResizerSide;
 (function (ResizerSide) {
     ResizerSide[ResizerSide["Left"] = 0] = "Left";
@@ -4285,6 +4465,13 @@ class RowModel {
     }
 }
 
+class SelectionRangeModel {
+    constructor(rowIndexes, cellIndexes) {
+        this.rowIndexes = rowIndexes;
+        this.cellIndexes = cellIndexes;
+    }
+}
+
 var VerticalMerge;
 (function (VerticalMerge) {
     VerticalMerge["Restart"] = "restart";
@@ -4637,6 +4824,213 @@ class TableOperationsHelper {
             }
         });
     }
+    static applyTableCellsStyles(tables, insertIndex, cellData) {
+        const table = tables.find(x => x.insertIndex === insertIndex);
+        for (const cellDataItem of cellData) {
+            if (cellDataItem.rowIndex < 0 || cellDataItem.rowIndex >= table.rows.length) {
+                continue;
+            }
+            if (cellDataItem.cellIndex < 0 || cellDataItem.cellIndex >= table.rows[cellDataItem.rowIndex].cells.length) {
+                continue;
+            }
+            table.rows[cellDataItem.rowIndex].cells[cellDataItem.cellIndex].borders = cellDataItem.borders?.length
+                ? cellDataItem.borders
+                : null;
+        }
+    }
+    static getApplyTableCellsBordersStyle(style, table, selection) {
+        const cellsMap = this.getApplyBordersStylesCells(table, selection, [
+            Positions.Top,
+            Positions.Bottom,
+            Positions.Right,
+            Positions.Left
+        ]);
+        if (!cellsMap.size) {
+            return null;
+        }
+        return new ApplyTableCellsStylesModel({
+            cellsData: this.getCellDataFromBorderCells(cellsMap, (oldBorder) => new BordersStyleModel({ ...oldBorder, ...new BordersStyleModel({ lineStyle: style }) })),
+            insertIndex: table.insertIndex
+        });
+    }
+    static getApplyTableCellsBordersWidth(width, table, selection) {
+        const cellsMap = this.getApplyBordersStylesCells(table, selection, [
+            Positions.Top,
+            Positions.Bottom,
+            Positions.Right,
+            Positions.Left
+        ]);
+        if (!cellsMap.size) {
+            return null;
+        }
+        return new ApplyTableCellsStylesModel({
+            cellsData: this.getCellDataFromBorderCells(cellsMap, (oldBorder) => new BordersStyleModel({ ...oldBorder, ...new BordersStyleModel({ width }) })),
+            insertIndex: table.insertIndex
+        });
+    }
+    static getApplyTableCellsBorders(border, table, selection) {
+        let cellsMap = new Map();
+        let targetBorderStyle = new BordersStyleModel();
+        switch (border) {
+            case Borders.Top:
+                // Upper border - only for the top row and their upper neighbors
+                cellsMap = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.startIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Top]);
+                break;
+            case Borders.Bottom:
+                // The bottom border is only for the bottom row and their lower neighbors
+                cellsMap = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.endIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Bottom]);
+                break;
+            case Borders.Left:
+                // Left border - only for the left column and its left neighbors
+                cellsMap = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.startIndex }), [Positions.Left]);
+                break;
+            case Borders.Right:
+                // Right border - only for the right column and its right neighbors
+                cellsMap = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.endIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Right]);
+                break;
+            case Borders.All:
+                // Add all borders from the selected cells
+                cellsMap = this.getApplyBordersStylesCells(table, selection, [
+                    Positions.Top,
+                    Positions.Bottom,
+                    Positions.Right,
+                    Positions.Left
+                ]);
+                break;
+            case Borders.Outside: {
+                // Outer borders - combination of Top, Bottom, Left, Right
+                cellsMap = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.startIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Top]);
+                const bottomCells = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.endIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Bottom]);
+                this.mergeCellStyles(cellsMap, bottomCells);
+                const leftCells = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.startIndex }), [Positions.Left]);
+                this.mergeCellStyles(cellsMap, leftCells);
+                const rightCells = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.endIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Right]);
+                this.mergeCellStyles(cellsMap, rightCells);
+                break;
+            }
+            case Borders.Inside: {
+                // Horizontal inner borders (between lines)
+                for (let rowIndex = selection.rowIndexes.startIndex + 1; rowIndex <= selection.rowIndexes.endIndex; rowIndex++) {
+                    const horizontalCells = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: rowIndex, endIndex: rowIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Top]);
+                    this.mergeCellStyles(cellsMap, horizontalCells);
+                }
+                // Vertical inner borders (between columns)
+                for (let cellIndex = selection.cellIndexes.startIndex + 1; cellIndex <= selection.cellIndexes.endIndex; cellIndex++) {
+                    const verticalCells = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: cellIndex, endIndex: cellIndex }), [Positions.Left]);
+                    this.mergeCellStyles(cellsMap, verticalCells);
+                }
+                break;
+            }
+            case Borders.Empty:
+                // Remove all borders from the selected cells
+                cellsMap = this.getApplyBordersStylesCells(table, selection, [
+                    Positions.Top,
+                    Positions.Bottom,
+                    Positions.Right,
+                    Positions.Left
+                ]);
+                targetBorderStyle = new BordersStyleModel({ lineStyle: LineStyles.Nil });
+                break;
+        }
+        if (!cellsMap.size) {
+            return null;
+        }
+        const getNewBorder = (oldBorder) => {
+            if (!targetBorderStyle.lineStyle) {
+                targetBorderStyle.lineStyle =
+                    oldBorder.lineStyle && oldBorder.lineStyle !== LineStyles.Nil ? oldBorder.lineStyle : LineStyles.Single;
+            }
+            return new BordersStyleModel({ ...oldBorder, ...targetBorderStyle });
+        };
+        return new ApplyTableCellsStylesModel({
+            cellsData: this.getCellDataFromBorderCells(cellsMap, getNewBorder),
+            insertIndex: table.insertIndex
+        });
+    }
+    static mergeCellStyles(existingCellsMap, newCellsMap) {
+        for (const [key, newCell] of newCellsMap) {
+            if (existingCellsMap.has(key)) {
+                // Add the position to the existing cell
+                const existingCell = existingCellsMap.get(key);
+                const newPositions = newCell.updatePositions.filter(y => !existingCell.updatePositions.includes(y));
+                existingCell.updatePositions.push(...newPositions);
+            }
+            else {
+                existingCellsMap.set(key, { ...newCell });
+            }
+        }
+    }
+    static getApplyBordersStylesCells(table, selection, defaultPositions) {
+        const result = new Map();
+        for (let rowIndex = selection.rowIndexes.startIndex; rowIndex <= selection.rowIndexes.endIndex; rowIndex++) {
+            for (let cellIndex = selection.cellIndexes.startIndex; cellIndex <= selection.cellIndexes.endIndex; cellIndex++) {
+                // Upper border - add to the current cell and its upper neighbor
+                if (rowIndex === selection.rowIndexes.startIndex && defaultPositions.includes(Positions.Top)) {
+                    this.addPositionsToCell(result, table, rowIndex - 1, cellIndex, [Positions.Bottom]);
+                }
+                // Bottom border - add to the current cell and its lower neighbor
+                if (rowIndex === selection.rowIndexes.endIndex && defaultPositions.includes(Positions.Bottom)) {
+                    this.addPositionsToCell(result, table, rowIndex + 1, cellIndex, [Positions.Top]);
+                }
+                // Left border - add to the current cell and its left neighbor
+                if (cellIndex === selection.cellIndexes.startIndex && defaultPositions.includes(Positions.Left)) {
+                    this.addPositionsToCell(result, table, rowIndex, cellIndex - 1, [Positions.Right]);
+                }
+                // Right border - add to the current cell and its right neighbor
+                if (cellIndex === selection.cellIndexes.endIndex && defaultPositions.includes(Positions.Right)) {
+                    this.addPositionsToCell(result, table, rowIndex, cellIndex + 1, [Positions.Left]);
+                }
+                this.addPositionsToCell(result, table, rowIndex, cellIndex, defaultPositions);
+            }
+        }
+        return result;
+    }
+    static addPositionsToCell(cellsMap, table, rowIndex, cellIndex, positions) {
+        if (rowIndex < 0 || rowIndex >= table.rows.length || cellIndex < 0 || cellIndex >= table.rows[rowIndex].cells.length) {
+            return;
+        }
+        const key = `${rowIndex},${cellIndex}`;
+        const cell = table.rows[rowIndex].cells[cellIndex];
+        if (cellsMap.has(key)) {
+            // Combine positions if the cell already exists in the Map
+            const existing = cellsMap.get(key);
+            positions.forEach(x => {
+                if (!existing.updatePositions.includes(x)) {
+                    existing.updatePositions.push(x);
+                }
+            });
+        }
+        else {
+            // Add a new cell
+            cellsMap.set(key, { cell, rowIndex, cellIndex, updatePositions: [...positions] });
+        }
+    }
+    static getCellDataFromBorderCells(cellsMap, getNewBorder) {
+        if (!cellsMap.size) {
+            return [];
+        }
+        const cellsData = [];
+        for (const cellData of cellsMap.values()) {
+            const newBorders = [];
+            const existingBorders = cellData.cell.borders ?? [];
+            // Add or update borders with new data
+            cellData.updatePositions.forEach(x => {
+                const border = existingBorders.find(y => y.position === x) ??
+                    new BordersStyleModel({ position: x, lineStyle: LineStyles.Single, width: 1 });
+                newBorders.push(getNewBorder(border));
+            });
+            // Add existing borders without updates
+            existingBorders
+                .filter(x => !cellData.updatePositions.includes(x.position))
+                .forEach(x => newBorders.push(new BordersStyleModel({ ...x })));
+            cellsData.push(new CellDataModel$1({
+                rowIndex: cellData.rowIndex,
+                cellIndex: cellData.cellIndex,
+                borders: newBorders.length ? newBorders : null
+            }));
+        }
+        return cellsData;
+    }
 }
 
 class TabOperationsHelper {
@@ -4893,6 +5287,11 @@ class OperationsHelper {
                     this.applyParagraphs(contents, model.paragraphs);
                     break;
                 }
+                case CommandType.ApplyTableCellsStyles: {
+                    const model = command.applyTableCellsStyles;
+                    this.applyTableCellsStyles(contents, model);
+                    break;
+                }
             }
         });
     }
@@ -5082,6 +5481,9 @@ class OperationsHelper {
         }
         return result;
     }
+    static applyTableCellsStyles(document, model) {
+        TableOperationsHelper.applyTableCellsStyles(document.tables, model.insertIndex, model.cellsData);
+    }
     static insertStyledText(document, text, index, style) {
         document.content = ContentOperationsHelper.insertContent(document.content, text, index);
         FormatOperationsHelper.insertStyledContent(document.formats, index, text.length, style);
@@ -5359,8 +5761,9 @@ class PositionHelper {
         const paragraphTop = paragraph.paragraphSettings.distanceFromTop || 0;
         const linePaddingLeft = paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex].paddingLeft;
         const offsetMargin = paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex].offsetMargin;
+        const markerWidth = this.getMarkerWidth(paragraph.paragraphSettings, paragraph.paragraphSettings.textLinesInfo[0], paragraphInfo.lineIndex);
         return {
-            pageX: lineWidthToPosition + linePaddingLeft + offsetMargin,
+            pageX: lineWidthToPosition + linePaddingLeft + offsetMargin + markerWidth,
             pageY: paragraphTop + paragraphInfo.lineTopOffset - session.scrollTop,
             lineHeight: paragraphInfo.lineHeight,
             sizeCurrent: size,
@@ -5410,7 +5813,8 @@ class PositionHelper {
             return { line, indexInLine: 0 };
         }
         let indexInLine = 0;
-        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin;
+        const markerWidth = this.getMarkerWidth(paragraphSettings, lineInfo, lineIndex);
+        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerWidth;
         const wordSpacing = lineInfo.wordSpacing ?? 0;
         while (indexInLine < tokens.length) {
             const token = tokens[indexInLine];
@@ -5437,7 +5841,8 @@ class PositionHelper {
             return { line, indexInLine: 0 };
         }
         let indexInLine = 0;
-        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin;
+        const markerWidth = this.getMarkerWidth(paragraphSettings, lineInfo, lineIndex);
+        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerWidth;
         const wordSpacing = lineInfo.wordSpacing ?? 0;
         while (indexInLine < tokens.length) {
             const token = tokens[indexInLine];
@@ -5475,7 +5880,8 @@ class PositionHelper {
         }
         const textLineInfo = paragraphs[paragraphIndex].paragraphSettings.textLinesInfo[lineIndex];
         const wordSpacing = textLineInfo.wordSpacing ?? 0;
-        let width = positionWidth - textLineInfo.paddingLeft - marginLeft - textLineInfo.offsetMargin;
+        const markerWidth = this.getMarkerWidth(paragraphs[paragraphIndex].paragraphSettings, textLineInfo, lineIndex);
+        let width = positionWidth - textLineInfo.paddingLeft - marginLeft - textLineInfo.offsetMargin - markerWidth;
         while (column < tokens.length) {
             const token = tokens[column];
             if (width < token.width) {
@@ -5487,6 +5893,18 @@ class PositionHelper {
         }
         return column;
     }
+    static getMarkerWidth(paragraphSettings, textLineInfo, lineIndex) {
+        const numberingOffsetLeft = paragraphSettings.numberingData.numberingId === null
+            ? 0
+            : paragraphSettings.numberingData.width + paragraphSettings.numberingData.paddingLeft;
+        if (lineIndex === 0 &&
+            (textLineInfo.indentFirstLine ||
+                (numberingOffsetLeft - textLineInfo.indentLeft > 0 &&
+                    numberingOffsetLeft - textLineInfo.indentLeft < textLineInfo.markerWidth))) {
+            return textLineInfo.markerWidth;
+        }
+        return 0;
+    }
 }
 
 class DistanceModel {
@@ -5589,7 +6007,13 @@ class RenderingHelper {
         const numberingOffsetLeft = currentParagraph.numberingData.numberingId === null
             ? 0
             : currentParagraph.numberingData.width + currentParagraph.numberingData.paddingLeft;
-        let lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft, scalingRatio);
+        let markerWidth = 0;
+        if (currentParagraph.textLinesInfo[0].indentFirstLine ||
+            (numberingOffsetLeft - currentParagraph.textLinesInfo[0].indentLeft > 0 &&
+                numberingOffsetLeft - currentParagraph.textLinesInfo[0].indentLeft < currentParagraph.textLinesInfo[0].markerWidth)) {
+            markerWidth = currentParagraph.textLinesInfo[0].markerWidth;
+        }
+        let lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft - markerWidth, scalingRatio);
         domContent.parentNode.appendChild(lineEl);
         const valueFragment = DomHelper.createFragment(domContent.currentElement);
         let isLastLineFragment = false;
@@ -6454,11 +6878,17 @@ class TextLayer {
             this.renderingHelper.renderContentWrappedLine({ currentElement: this.element, parentNode: linesContainerElement }, splits, paragraphSettings, combinedFormats, distance, this.session.customContentService, this.session.customComponents, this.session.generalProperties.scalingRatio, this.session.model.breaks);
         }
         else {
+            const markerWidth = paragraphSettings.textLinesInfo[0].indentFirstLine ? paragraphSettings.textLinesInfo[0].markerWidth : 0;
             const numberingOffsetLeft = paragraphSettings.numberingData.numberingId === null
                 ? 0
-                : paragraphSettings.numberingData.width + paragraphSettings.numberingData.paddingLeft;
+                : paragraphSettings.numberingData.width + paragraphSettings.numberingData.paddingLeft - markerWidth;
+            let offset = 0;
+            if (numberingOffsetLeft - paragraphSettings.textLinesInfo[0].indentLeft > 0 &&
+                numberingOffsetLeft - paragraphSettings.textLinesInfo[0].indentLeft < paragraphSettings.textLinesInfo[0].markerWidth) {
+                offset = paragraphSettings.textLinesInfo[0].markerWidth;
+            }
             const lineInfo = paragraphSettings.textLinesInfo[0];
-            const lastLineEl = this.renderingHelper.createLineElement(lineInfo, numberingOffsetLeft, this.session.generalProperties.scalingRatio);
+            const lastLineEl = this.renderingHelper.createLineElement(lineInfo, numberingOffsetLeft - offset, this.session.generalProperties.scalingRatio);
             linesContainerElement.appendChild(lastLineEl);
             const rowDistance = new DistanceModel({ start: startIndex, end: endIndex });
             this.renderingHelper.renderContentSimpleLine({ currentElement: this.element, parentNode: lastLineEl }, combinedFormats, rowDistance, this.session.customContentService, this.session.customComponents, lineInfo, this.session.model.breaks);
@@ -6772,6 +7202,9 @@ class CommandModel {
             if (fields.applyParagraphStyle) {
                 fields.applyParagraphStyle = new ApplyParagraphStyleModel(fields.applyParagraphStyle);
             }
+            if (fields.applyTableCellsStyles) {
+                fields.applyTableCellsStyles = new ApplyTableCellsStylesModel(fields.applyTableCellsStyles);
+            }
             if (fields.applyTextStyle) {
                 fields.applyTextStyle = new ApplyTextStyleModel(fields.applyTextStyle);
             }
@@ -6924,6 +7357,9 @@ class SaveCommandsHelper {
     static getInsertTableCommand(insertTable, targets) {
         return new CommandModel({ commandType: CommandType.InsertTable, insertTable, targets });
     }
+    static getApplyTableCellsStylesCommand(applyTableCellsStyles, targets) {
+        return new CommandModel({ commandType: CommandType.ApplyTableCellsStyles, applyTableCellsStyles, targets });
+    }
     static getInsertTableColumnsCommand(columnsCount, inheritIndex, insertIndex, targetIndex, targets) {
         const insertTableColumns = new InsertTableColumnsModel({ count: columnsCount, inheritIndex, insertIndex, targetIndex });
         return new CommandModel({ commandType: CommandType.InsertTableColumns, insertTableColumns, targets });
@@ -7336,13 +7772,6 @@ class Search {
 }
 
 class Selection {
-    constructor() {
-        this.anchor = null;
-        this.cursor = new CursorParagraph(0, 0);
-        this.isDisabled = false;
-        this.focusedComponent = null;
-        this.keepLinePositionX = null;
-    }
     get isFocused() {
         return !!this.focusedComponent;
     }
@@ -7367,6 +7796,14 @@ class Selection {
         const anchor = new CursorParagraph(this.anchor.row, this.anchor.column);
         return this.isBackwards ? new Range(cursor, anchor) : new Range(anchor, cursor);
     }
+    constructor(overlayService) {
+        this.overlayService = overlayService;
+        this.anchor = null;
+        this.cursor = new CursorParagraph(0, 0);
+        this.isDisabled = false;
+        this.focusedComponent = null;
+        this.keepLinePositionX = null;
+    }
     focus(component, position) {
         if (component === this.focusedComponent) {
             return;
@@ -7383,17 +7820,15 @@ class Selection {
         this.focusedComponent = null;
     }
     placeCursor(cursor) {
-        this.cursor = cursor;
         this.anchor = null;
-        this.keepLinePositionX = null;
-        this.focusedComponent?.instance.blur();
-        this.focusedComponent = null;
+        this.moveCursor(cursor);
     }
     moveCursor(cursor) {
         this.cursor = cursor;
         this.keepLinePositionX = null;
         this.focusedComponent?.instance.blur();
         this.focusedComponent = null;
+        this.overlayService.close();
     }
     placeSelection(cursor, anchor) {
         this.cursor = cursor;
@@ -7401,6 +7836,7 @@ class Selection {
         this.keepLinePositionX = null;
         this.focusedComponent?.instance.blur();
         this.focusedComponent = null;
+        this.overlayService.close();
     }
     moveSelection(position) {
         if (!this.anchor) {
@@ -7413,6 +7849,7 @@ class Selection {
         this.keepLinePositionX = null;
         this.focusedComponent?.instance.blur();
         this.focusedComponent = null;
+        this.overlayService.close();
     }
     disableSelection() {
         this.isDisabled = true;
@@ -7787,7 +8224,7 @@ class Editor {
     get grammarChecker() {
         return this.regulatorService.grammarChecker;
     }
-    constructor(model, container, editorService, overlayService, regulatorService, commandsService, clipboard, externalElementTagNames, customPageWidth) {
+    constructor(model, container, editorService, overlayService, regulatorService, commandsService, clipboard, externalElementTagNames, insertOverlays, customPageWidth) {
         this.model = model;
         this.container = container;
         this.editorService = editorService;
@@ -7796,6 +8233,7 @@ class Editor {
         this.commandsService = commandsService;
         this.clipboard = clipboard;
         this.externalElementTagNames = externalElementTagNames;
+        this.insertOverlays = insertOverlays;
         this.customPageWidth = customPageWidth;
         this.MAX_COUNT = 999;
         this.parentTagName = 'APP-NOD-EDITOR';
@@ -7817,7 +8255,7 @@ class Editor {
         this.subscriptions.push(this.receiveTextStyleSubscription());
         this.customElementTagNames = [...this.externalElementTagNames, this.imageTagName, this.tableCellTagName, this.edgeElementTagName];
         this.history = new OperationHistory(editorService, regulatorService);
-        this.selection = new Selection();
+        this.selection = new Selection(this.overlayService);
         this.regulatorService.setSelection(this.selection);
         this.initMainSession();
         this.textInput = new TextInput(this.mainRenderer.container);
@@ -7831,7 +8269,7 @@ class Editor {
         this.focus();
         this.session.applyToolbarStyles();
         this.search = new Search(editorService);
-        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.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.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.replaceByCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.updateTableBorderStyleSubscription(), this.updateTableBorderWidthSubscription(), this.updateTableBordersSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.grammarReplaceSubscription(), this.ignoreGrammarErrorSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription(), this.applyFirstLinePositionSubscription(), this.applyRightIndentParagraphSubscription(), this.applyLeftIndentParagraphSubscription(), this.applyTabSettingsSubscription(), this.commandCreatedForEdges());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -7879,6 +8317,17 @@ class Editor {
         this.scrollCursorIntoMainView(0.5);
         this.onSelectionChange();
     }
+    showInsertOverlay(textKey) {
+        const component = this.insertOverlays.getComponent(textKey);
+        if (!component) {
+            return;
+        }
+        const cursor = PositionHelper.documentToPixel(this.session, this.session.selection.cursor);
+        const rect = this.renderer.container.getBoundingClientRect();
+        const x = rect.left + cursor.pageX;
+        const y = rect.top + cursor.pageY + cursor.lineHeight;
+        this.overlayService.open(component, { textKey }, x, y);
+    }
     cut() {
         this.removeSelected();
     }
@@ -7947,6 +8396,7 @@ class Editor {
         this.renderer.updateCursor();
         this.rerenderMarker();
         this.scrollCursorIntoMainView(0.1);
+        this.onContentChange();
     }
     insertTab() {
         const insertIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start);
@@ -7955,6 +8405,18 @@ class Editor {
             this.replaceBy(new ReplaceModel({ insertTab }));
             return;
         }
+        if (this.selection.range.start.column === 0) {
+            const paragraph = this.session.displayData.paragraphs[this.selection.range.start.row];
+            if (paragraph.paragraphSettings.numberingData.numberingId) {
+                this.applyParagraphStyles(new ParagraphStyleModel({
+                    numberingLevel: paragraph.paragraphSettings.numberingData.level + 1,
+                    indentLeft: 0,
+                    indentFirstLine: 0,
+                    indentHanging: 0
+                }));
+                return;
+            }
+        }
         this.saveInsertTabToHistory(insertTab);
         const endPoint = this.session.insertTab(this.selection.cursor);
         this.onDocumentChange(new Range(this.selection.cursor, endPoint));
@@ -7976,6 +8438,7 @@ class Editor {
         this.renderer.updateLines(this.selection.cursor.row, lastRow);
         this.renderer.updateCursor();
         this.rerenderMarker();
+        this.onContentChange();
     }
     insertLink(linkDataModel) {
         const insertIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start);
@@ -7988,6 +8451,7 @@ class Editor {
         this.session.insertLink(this.selection.cursor, linkDataModel);
         this.renderer.updateCursor();
         this.rerenderMarker();
+        this.onContentChange();
     }
     insertTable(tableData) {
         const start = this.selection.range.start;
@@ -8016,6 +8480,36 @@ class Editor {
         this.onContentChange();
         this.rerenderMarker();
     }
+    applyTableCellsStyles(data, handler) {
+        if (!this.session.isCell()) {
+            return;
+        }
+        const source = this.regulatorService.getSessionModel(this.session.sessionId).source;
+        const tableSession = this.regulatorService.getSession(this.regulatorService.currentSession.parentSessionId);
+        const tableComponent = tableSession.customComponents.tables.find(x => x.instance.sessionId === tableSession.sessionId && x.instance.insertIndex === source.table.insertIndex)?.instance;
+        if (!tableComponent) {
+            return;
+        }
+        const selection = tableComponent.tableSelection.selectionRange
+            ? tableComponent.tableSelection.selectionRange
+            : new SelectionRangeModel({ startIndex: source.cellComponent.rowIndex, endIndex: source.cellComponent.rowIndex }, { startIndex: source.cellComponent.cellIndex, endIndex: source.cellComponent.cellIndex });
+        tableComponent.tableSelection.removeMouseSubscriptions();
+        const applyModel = handler(data, tableComponent.table, selection);
+        if (!applyModel) {
+            return;
+        }
+        const tableSessionModel = this.regulatorService.getSessionModel(tableSession.sessionId);
+        this.saveApplyTableCellsStylesToHistory(tableComponent.table, applyModel, this.regulatorService.getTargets(tableSessionModel));
+        tableSession.applyTableCellsStyles(applyModel);
+        const newCellSession = tableComponent.getCellSession(source.cellComponent.rowIndex, source.cellComponent.cellIndex);
+        this.regulatorService.setCustomSessionAsCurrent(newCellSession.sessionId);
+        this.changedTableSize(applyModel.insertIndex, tableSession.sessionId);
+        // restore table cells selection and highlight
+        this.selection.disableSelection();
+        tableComponent.tableSelection.selectionRange = selection;
+        tableComponent.tableSelection.addDocumentMouseDownSubscriptions();
+        tableComponent.tableSelection.highlightCurrentSelectionCells();
+    }
     replaceBy(model) {
         const partIndexes = ContentHelper.getSelectedPartDocumentIndexes(this.session.displayData.paragraphs, this.selection.range);
         model.delete = new DeleteModel({ startIndex: partIndexes.startIndex, count: partIndexes.endIndex - partIndexes.startIndex + 1 });
@@ -8378,6 +8872,11 @@ class Editor {
             this.session.applyParagraphs(deepCopy.paragraphs);
             command = SaveCommandsHelper.getApplyParagraphsCommand(deepCopy.paragraphs, this.targets);
         }
+        else if (operation instanceof ApplyTableCellsStylesModel) {
+            this.session.applyTableCellsStyles(operation);
+            this.changedTableSize(operation.insertIndex, this.session.sessionId);
+            command = SaveCommandsHelper.getApplyTableCellsStylesCommand(operation, this.targets);
+        }
         else {
             throw new Error('Undo/redo is not implemented for the Operation');
         }
@@ -8435,6 +8934,10 @@ class Editor {
         this.history.pushInsertTable(model);
         this.commandsService.createCommand(SaveCommandsHelper.getInsertTableCommand(model, this.targets));
     }
+    saveApplyTableCellsStylesToHistory(table, model, targets) {
+        this.history.pushApplyTableCellsStyles(table, model, targets);
+        this.commandsService.createCommand(SaveCommandsHelper.getApplyTableCellsStylesCommand(model, targets));
+    }
     saveApplyTextStyleToHistory(startIndex, endIndex, textStyle) {
         const formats = FormatHelper.sliceSection(this.session.model.formats, startIndex, endIndex);
         const linkFormats = LinkHelper.sliceFormats(this.session.model.links, startIndex, endIndex);
@@ -8526,6 +9029,15 @@ class Editor {
         this.onSelectionChange();
         this.onContentChange();
     }
+    replaceByCustomElement(textKey, model) {
+        const index = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.cursor);
+        const text = this.session.model.content.slice(index - textKey.length, index);
+        if (text === textKey) {
+            const position = new CursorParagraph(this.selection.cursor.row, this.selection.cursor.column - textKey.length);
+            this.selection.moveSelection(position);
+        }
+        this.createCustomElement(model);
+    }
     removeSelected() {
         const range = this.selection.range;
         const isNumbering = this.session.paragraphIsNumbering(range.end.row);
@@ -8587,6 +9099,7 @@ class Editor {
         }
         this.insert(text);
         this.scrollCursorIntoMainView();
+        this.showInsertOverlay(text);
     }
     onCut(event) {
         event.preventDefault();
@@ -8685,16 +9198,13 @@ class Editor {
         this.onSelectionChange();
         const paragraph = this.session.displayData.paragraphs[position.row];
         const error = this.grammarChecker.getError(this.session.sessionId, paragraph.id, position.column);
-        if (error && !this.overlayService.overlayRef) {
-            const target = event.target;
-            const lineEl = target.closest('.noder-line');
-            if (lineEl) {
-                const lineRect = lineEl.getBoundingClientRect();
-                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-                const hintTop = lineRect.top + scrollTop - POPUP_HEIGHT;
-                this.overlayService.open(GrammarPopupComponent, { error, paragraphIndex: position.row }, event.clientX - 100, hintTop);
-                event.stopPropagation();
-            }
+        if (!this.editorService.isViewOnly && error) {
+            const cursor = PositionHelper.documentToPixel(this.session, this.session.selection.cursor);
+            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);
+            event.stopPropagation();
         }
         event.preventDefault();
         if (event.ctrlKey) {
@@ -8771,7 +9281,7 @@ class Editor {
         const scrollSpeed = 4;
         const deltaY = event.deltaY * factor * scrollSpeed;
         this.onScroll(deltaY);
-        this.overlayService.close();
+        this.overlayService.scroll(deltaY);
         event.stopPropagation();
         event.preventDefault();
     }
@@ -8910,6 +9420,7 @@ class Editor {
     initMainSession() {
         const pageWidth = this.customPageWidth ?? Math.max(...this.model.pageFormats.map(x => x.pageWidth));
         this.container.nativeElement.style.maxWidth = `${pageWidth}px`;
+        this.container.nativeElement.style.width = `${pageWidth}px`;
         const scalingRatio = this.customPageWidth ? ScalingHelper.getRatio(this.customPageWidth, pageWidth) : 1;
         this.editorService.setPageFormat(this.model.pageFormats[0]);
         this.editorService.paragraphStyle(this.model.paragraphs[0].paragraphStyle);
@@ -8925,12 +9436,13 @@ class Editor {
         this.editorService.setHasSelection(!this.selection.isEmpty);
         const position = this.mainSession.displayData.positionToIndex(this.selection.selectedRange.start);
         const pageFormat = this.mainSession.displayData.getPageFormatAtPosition(position);
-        this.editorService.paragraphStyle(this.session.model.paragraphs[this.selection.selectedRange.start.row].paragraphStyle);
+        const paragraphStyle = this.session.model.paragraphs[this.selection.selectedRange.start.row].paragraphStyle;
+        const numbering = this.session.generalProperties.numberings.find(x => x.numberingId === paragraphStyle.numberingId) ?? null;
+        this.editorService.paragraphStyle(paragraphStyle, numbering);
         this.editorService.setPageFormat(pageFormat.pageFormatModel);
         this.rerenderMarker();
     }
     onContentChange() {
-        this.overlayService.close();
         if (this.search.term) {
             this.find(this.search.term);
         }
@@ -8979,6 +9491,7 @@ class Editor {
         session.displayData.updateNextLineIndexes(paragraph, paragraph);
         session.displayData.updateNumberingsDataOnChange(paragraph + 1);
         this.focus();
+        this.onContentChange();
     }
     insertTableRows(insertIndex, rowsCount, targetIndex, inheritIndex, sessionId) {
         this.regulatorService.setCustomSessionAsCurrent(sessionId);
@@ -8988,6 +9501,7 @@ class Editor {
         this.commandsService.createCommand(SaveCommandsHelper.getInsertTableRowsCommand(rowsCount, inheritIndex, insertIndex, targetIndex, this.targets));
         this.session.insertTableRows(insertIndex, rowsCount, targetIndex, inheritIndex);
         this.changedTableSize(insertIndex, sessionId);
+        this.onContentChange();
     }
     insertTableColumns(insertIndex, columnsCount, targetIndex, inheritIndex, sessionId) {
         this.regulatorService.setCustomSessionAsCurrent(sessionId);
@@ -8997,6 +9511,7 @@ class Editor {
         this.commandsService.createCommand(SaveCommandsHelper.getInsertTableColumnsCommand(columnsCount, inheritIndex, insertIndex, targetIndex, this.targets));
         this.session.insertTableColumns(insertIndex, columnsCount, targetIndex, inheritIndex);
         this.changedTableSize(insertIndex, sessionId);
+        this.onContentChange();
     }
     removeTableRows(insertIndex, startIndex, endIndex, sessionId) {
         this.regulatorService.setCustomSessionAsCurrent(sessionId);
@@ -9006,6 +9521,7 @@ class Editor {
         this.commandsService.createCommand(SaveCommandsHelper.getRemoveTableRowsCommand(startIndex, endIndex, insertIndex, this.targets));
         this.session.removeTableRows(insertIndex, startIndex, endIndex);
         this.changedTableSize(insertIndex, sessionId);
+        this.onContentChange();
     }
     removeTableColumns(insertIndex, startIndex, endIndex, sessionId) {
         this.regulatorService.setCustomSessionAsCurrent(sessionId);
@@ -9015,6 +9531,7 @@ class Editor {
         this.commandsService.createCommand(SaveCommandsHelper.getRemoveTableColumnsCommand(startIndex, endIndex, insertIndex, this.targets));
         this.session.removeTableColumns(insertIndex, startIndex, endIndex);
         this.changedTableSize(insertIndex, sessionId);
+        this.onContentChange();
     }
     resizeTableColumns(resizeTableColumns, sessionId) {
         this.regulatorService.setCustomSessionAsCurrent(sessionId);
@@ -9024,6 +9541,7 @@ class Editor {
         this.commandsService.createCommand(SaveCommandsHelper.getResizeTableColumnsCommand(resizeTableColumns, this.targets));
         this.session.resizeTableColumns(resizeTableColumns);
         this.changedTableSize(resizeTableColumns.insertIndex, sessionId);
+        this.onContentChange();
     }
     onMousePressedMove(event) {
         const position = this.renderer.screenToTextCoordinatesUsingMidpoint(event.clientX, event.clientY);
@@ -9128,6 +9646,7 @@ class Editor {
     viewOnlyModeSubscription() {
         return this.editorService.isViewOnly$.subscribe(() => {
             this.selection?.clearSelection();
+            this.renderer.loop.schedule({ grammar: true });
         });
     }
     applyLeftMarginPageFormatSubscription() {
@@ -9220,6 +9739,12 @@ class Editor {
             this.focus();
         });
     }
+    replaceByCustomComponentSubscription() {
+        return this.editorService.replaceByCustomComponent$.subscribe(data => {
+            this.replaceByCustomElement(data.textKey, data.model);
+            this.focus();
+        });
+    }
     insertBreakSubscription() {
         return this.editorService.insertBreak$.subscribe(breakType => {
             this.insertBreak(breakType);
@@ -9306,14 +9831,22 @@ class Editor {
         });
     }
     insertTableSubscription() {
-        return this.editorService.insertTable$.subscribe(data => {
-            this.insertTable(data);
-        });
+        return this.editorService.insertTable$.subscribe(data => this.insertTable(data));
+    }
+    updateTableBorderStyleSubscription() {
+        return this.editorService.updateTableBorderStyle$.subscribe(x => this.applyTableCellsStyles(x, (data, table, selection) => TableOperationsHelper.getApplyTableCellsBordersStyle(data, table, selection)));
+    }
+    updateTableBorderWidthSubscription() {
+        return this.editorService.updateTableBorderWidth$.subscribe(x => this.applyTableCellsStyles(x, (data, table, selection) => TableOperationsHelper.getApplyTableCellsBordersWidth(data, table, selection)));
+    }
+    updateTableBordersSubscription() {
+        return this.editorService.updateTableBorders$.subscribe(x => this.applyTableCellsStyles(x, (data, table, selection) => TableOperationsHelper.getApplyTableCellsBorders(data, table, selection)));
     }
     insertTextSubscription() {
         return this.editorService.insertText$.subscribe(x => {
             this.insert(x);
             this.focus();
+            this.showInsertOverlay(x);
         });
     }
     undoSubscription() {
@@ -9435,6 +9968,7 @@ class Editor {
         }
         const pageWidth = this.customPageWidth ?? Math.max(...this.model.pageFormats.map(x => x.pageWidth));
         this.container.nativeElement.style.maxWidth = `${pageWidth}px`;
+        this.container.nativeElement.style.width = `${pageWidth}px`;
         const scalingRatio = this.customPageWidth ? ScalingHelper.getRatio(this.customPageWidth, pageWidth) : 1;
         this.model.tables.forEach(table => {
             this.changeColumnsWidth(table.columns, scalingRatio);
@@ -9455,6 +9989,7 @@ class Editor {
         this.initResizeListener();
         this.focus();
         this.session.applyToolbarStyles();
+        this.onContentChange();
     }
     changeColumnsWidth(columns, widthScale) {
         columns.forEach(column => (column.width = Math.round(column.width / widthScale)));
@@ -9691,8 +10226,10 @@ class DisplayTokenHelper {
             offsetBefore: prevToken.indentBefore,
             offsetAfter: prevToken.indentAfter,
             lineSpacing: prevToken.lineSpacing,
+            markerWidth: prevToken.markerWidth,
             isAfterPageBreak,
-            isEndedByPageBreak: prevToken.isPageBreak
+            isEndedByPageBreak: prevToken.isPageBreak,
+            isNumbering: prevToken.isNumbering
         });
         if (firstWrapToken) {
             info.align = firstWrapToken.align;
@@ -9704,6 +10241,8 @@ class DisplayTokenHelper {
             info.offsetAfter = firstWrapToken.indentAfter;
             info.lineSpacing = firstWrapToken.lineSpacing;
             info.hasTable = firstWrapToken.isTable;
+            info.isNumbering = firstWrapToken.isNumbering;
+            info.markerWidth = firstWrapToken.markerWidth;
         }
         let fontSize = 0;
         let ascent = 0;
@@ -9947,7 +10486,7 @@ class NoderTableCellComponent {
         this.editorService.disableSelection();
     }
     onStartResizing(event, border) {
-        if (this.session.isWithinEdge() && !this.regulatorService.mainSession.session.customComponents.edges.isEdit) {
+        if (this.session.isCellWithinEdge() && !this.regulatorService.mainSession.session.customComponents.edges.isEdit) {
             return;
         }
         event.stopPropagation();
@@ -10017,55 +10556,6 @@ class RowDataModel {
     }
 }
 
-var LineStyles;
-(function (LineStyles) {
-    LineStyles[LineStyles["SolidLine"] = 0] = "SolidLine";
-    LineStyles[LineStyles["RoundDot"] = 1] = "RoundDot";
-    LineStyles[LineStyles["SquareDot"] = 2] = "SquareDot";
-    LineStyles[LineStyles["Dash"] = 3] = "Dash";
-    LineStyles[LineStyles["DashDot"] = 4] = "DashDot";
-    LineStyles[LineStyles["LongDash"] = 5] = "LongDash";
-    LineStyles[LineStyles["LongDashDot"] = 6] = "LongDashDot";
-    LineStyles[LineStyles["LongDashDotDot"] = 7] = "LongDashDotDot";
-    LineStyles[LineStyles["Single"] = 8] = "Single";
-    LineStyles[LineStyles["Thick"] = 9] = "Thick";
-    LineStyles[LineStyles["Double"] = 10] = "Double";
-    LineStyles[LineStyles["Dotted"] = 11] = "Dotted";
-    LineStyles[LineStyles["Dashed"] = 12] = "Dashed";
-    LineStyles[LineStyles["DotDash"] = 13] = "DotDash";
-    LineStyles[LineStyles["DotDotDash"] = 14] = "DotDotDash";
-    LineStyles[LineStyles["Triple"] = 15] = "Triple";
-    LineStyles[LineStyles["ThinThickSmallGap"] = 16] = "ThinThickSmallGap";
-    LineStyles[LineStyles["ThickThinSmallGap"] = 17] = "ThickThinSmallGap";
-    LineStyles[LineStyles["ThinThickThinSmallGap"] = 18] = "ThinThickThinSmallGap";
-    LineStyles[LineStyles["ThinThickMediumGap"] = 19] = "ThinThickMediumGap";
-    LineStyles[LineStyles["ThickThinMediumGap"] = 20] = "ThickThinMediumGap";
-    LineStyles[LineStyles["ThinThickThinMediumGap"] = 21] = "ThinThickThinMediumGap";
-    LineStyles[LineStyles["ThinThickLargeGap"] = 22] = "ThinThickLargeGap";
-    LineStyles[LineStyles["ThickThinLargeGap"] = 23] = "ThickThinLargeGap";
-    LineStyles[LineStyles["ThinThickThinLargeGap"] = 24] = "ThinThickThinLargeGap";
-    LineStyles[LineStyles["Wave"] = 25] = "Wave";
-    LineStyles[LineStyles["DoubleWave"] = 26] = "DoubleWave";
-    LineStyles[LineStyles["DashSmallGap"] = 27] = "DashSmallGap";
-    LineStyles[LineStyles["DashDotStroked"] = 28] = "DashDotStroked";
-    LineStyles[LineStyles["ThreeDEmboss"] = 29] = "ThreeDEmboss";
-    LineStyles[LineStyles["ThreeDEngrave"] = 30] = "ThreeDEngrave";
-    LineStyles[LineStyles["Outset"] = 31] = "Outset";
-    LineStyles[LineStyles["Inset"] = 32] = "Inset";
-    LineStyles[LineStyles["Nil"] = 33] = "Nil";
-})(LineStyles || (LineStyles = {}));
-
-var Positions;
-(function (Positions) {
-    Positions[Positions["Top"] = 0] = "Top";
-    Positions[Positions["Right"] = 1] = "Right";
-    Positions[Positions["Bottom"] = 2] = "Bottom";
-    Positions[Positions["Left"] = 3] = "Left";
-    Positions[Positions["All"] = 4] = "All";
-    Positions[Positions["InsideHorizontal"] = 5] = "InsideHorizontal";
-    Positions[Positions["InsideVertical"] = 6] = "InsideVertical";
-})(Positions || (Positions = {}));
-
 class TableCellHelper {
     static setCellBorders(cell, borders) {
         if (!borders?.length || !cell) {
@@ -10155,13 +10645,6 @@ class TableCellHelper {
     }
 }
 
-class SelectionRangeModel {
-    constructor(rowIndexes, cellIndexes) {
-        this.rowIndexes = rowIndexes;
-        this.cellIndexes = cellIndexes;
-    }
-}
-
 class TableOverlayMenuComponent {
     constructor(editorService, overlayService, translateService) {
         this.editorService = editorService;
@@ -10460,10 +10943,20 @@ class TableSelection {
         };
         const cellIndexes = {
             startIndex: 0,
-            endIndex: Math.max(...this.rowMatrix.map(x => x.cells.length))
+            endIndex: Math.max(...this.rowMatrix.map(x => x.cells.length - 1))
         };
         this.selectionRange = new SelectionRangeModel(rowIndexes, cellIndexes);
     }
+    highlightCurrentSelectionCells() {
+        if (!this.selectionRange) {
+            return;
+        }
+        for (let i = this.selectionRange.rowIndexes.startIndex; i <= this.selectionRange.rowIndexes.endIndex; i++) {
+            for (let j = this.selectionRange.cellIndexes.startIndex; j <= this.selectionRange.cellIndexes.endIndex; j++) {
+                this.rowMatrix[i].cells[j].highlightCell();
+            }
+        }
+    }
     clearSelection() {
         if (!this.selectionRange) {
             return;
@@ -11124,8 +11617,15 @@ class NumberingHelper {
         paragraph.numberingData.markerTextStyle = markerTextStyle;
         paragraph.numberingData.width = markerSizes.width;
         paragraph.numberingData.height = markerSizes.height;
-        const indentHanging = paragraphStyle.indentHanging ? paragraphStyle.indentHanging : numberingLevel.indentHanging;
-        paragraph.numberingData.paddingLeft = numberingLevel.indentLeft - indentHanging;
+        const indentLeft = paragraphStyle.indentLeft ? paragraphStyle.indentLeft : numberingLevel.indentLeft;
+        let indent = 0;
+        if (!paragraphStyle.indentHanging && !paragraphStyle.indentFirstLine) {
+            indent = -numberingLevel.indentHanging;
+        }
+        else {
+            indent = paragraphStyle.indentHanging ? -paragraphStyle.indentHanging : paragraphStyle.indentFirstLine;
+        }
+        paragraph.numberingData.paddingLeft = indentLeft + indent;
     }
     static getMarkerSizes(marker, markerStyle) {
         let width = 0;
@@ -11280,6 +11780,7 @@ class TextLineInfo {
         if (fields) {
             Object.assign(this, fields);
         }
+        this.indentFirstLine = indent.firstLine;
         this.offsetMargin = offsetMargin;
         this.indentLeft = indent.left;
         const diff = contentWidth - this.width;
@@ -11497,11 +11998,6 @@ class DisplayData extends EventEmitting {
         });
         this.pagesFormat = this.pageFormatModels.map(x => new PageFormat(x, this.pagesSpace, this.customComponents));
     }
-    emitAllParagraphs() {
-        for (const paragraph of this.paragraphs) {
-            this.ParagraphInfoChanges.next(new ParagraphInfoAdded(paragraph));
-        }
-    }
     insertText(position, text) {
         const endPoint = this.insertTextAndReturnEndCursorPosition(text, position);
         return endPoint;
@@ -11859,6 +12355,8 @@ class DisplayData extends EventEmitting {
                 lineSpacing: DEFAULT_PARAGRAPH_STYLE.lineSpacing,
                 isAfterPageBreak: false,
                 isEndedByPageBreak: false,
+                markerWidth: 0,
+                isNumbering: false,
                 backgroundColor: DEFAULT_PARAGRAPH_STYLE.backgroundColor
             });
             return { splits: [], rowInfos: [defaultRowInfo] };
@@ -11967,12 +12465,14 @@ class DisplayData extends EventEmitting {
                     displayValue,
                     align: lineInfo.align,
                     indentFirstLine: isFirstCharacter ? lineInfo.indent.firstLine : DEFAULT_PARAGRAPH_STYLE.indentFirstLine,
-                    indentHanging: isFirstCharacter ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
+                    indentHanging: isFirstCharacter && !lineInfo.isNumbering ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
                     indentLeft: lineInfo.indent.left,
                     indentRight: lineInfo.indent.right,
                     indentBefore: lineInfo.offsetBefore,
                     indentAfter: lineInfo.offsetAfter,
                     lineSpacing: lineInfo.lineSpacing,
+                    markerWidth: lineInfo.markerWidth,
+                    isNumbering: lineInfo.isNumbering,
                     isPageBreak: breakType === BreakTypes.Page,
                     isLineBreak: breakType === BreakTypes.TextWrapping,
                     isTab: false
@@ -12096,15 +12596,17 @@ class DisplayData extends EventEmitting {
                     displayValue,
                     align: lineInfo.align,
                     indentFirstLine: isFirstCharacter ? lineInfo.indent.firstLine : DEFAULT_PARAGRAPH_STYLE.indentFirstLine,
-                    indentHanging: isFirstCharacter ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
+                    indentHanging: isFirstCharacter && !lineInfo.isNumbering ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
                     indentLeft: lineInfo.indent.left,
                     indentRight: lineInfo.indent.right,
                     indentBefore: lineInfo.offsetBefore,
                     indentAfter: lineInfo.offsetAfter,
                     lineSpacing: lineInfo.lineSpacing,
+                    markerWidth: lineInfo.markerWidth,
                     isPageBreak: breakType === BreakTypes.Page,
                     isLineBreak: breakType === BreakTypes.TextWrapping,
-                    isTab: false
+                    isTab: false,
+                    isNumbering: lineInfo.isNumbering
                 });
                 tokens.push(token);
                 if (charCode !== prevCharCode ||
@@ -12175,11 +12677,13 @@ class DisplayData extends EventEmitting {
                 displayValue: DisplayValue.emptyLine,
                 align: lineInfo.align,
                 indentFirstLine: lineInfo.indent.firstLine,
-                indentHanging: lineInfo.indent.hanging,
+                indentHanging: lineInfo.isNumbering ? 0 : lineInfo.indent.hanging,
                 indentLeft: lineInfo.indent.left,
                 indentRight: lineInfo.indent.right,
                 indentBefore: lineInfo.offsetBefore,
                 indentAfter: lineInfo.offsetAfter,
+                markerWidth: lineInfo.markerWidth,
+                isNumbering: lineInfo.isNumbering,
                 isPageBreak: false,
                 isLineBreak: false,
                 isTab: false,
@@ -12198,13 +12702,16 @@ class DisplayData extends EventEmitting {
                 lineSpacing: DEFAULT_PARAGRAPH_STYLE.lineSpacing
             });
         }
-        const indentLeft = this.getParagraphIndentLeft(model, paragraph);
-        return this.getLineInfoModel(paragraph, indentLeft);
+        const { indent, markerWidth } = this.getParagraphIndentLeft(model, paragraph);
+        return this.getLineInfoModel(paragraph, indent, markerWidth);
     }
     getParagraphIndentLeft(model, paragraph) {
         const numberingId = paragraph.paragraphStyle.numberingId;
         if (numberingId === null) {
-            return paragraph.paragraphStyle.indentLeft;
+            return {
+                indent: new IndentModel(paragraph.paragraphStyle.indentFirstLine ?? DEFAULT_PARAGRAPH_STYLE.indentFirstLine, paragraph.paragraphStyle.indentHanging ?? DEFAULT_PARAGRAPH_STYLE.indentHanging, paragraph.paragraphStyle.indentLeft ?? DEFAULT_PARAGRAPH_STYLE.indentLeft, paragraph.paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight),
+                markerWidth: 0
+            };
         }
         const level = paragraph.paragraphStyle.numberingLevel;
         const paragraphIndex = model.paragraphs.indexOf(paragraph);
@@ -12216,23 +12723,35 @@ class DisplayData extends EventEmitting {
         const marker = NumberingHelper.getMarker(levelModel, numberingId, model.paragraphs, paragraphIndex, this.generalProperties.numberingInfo);
         const markerSizes = NumberingHelper.getMarkerSizes(marker, markerTextStyle);
         markerWidth = markerSizes.width;
-        const hangingIndent = paragraph.paragraphStyle.indentHanging ? paragraph.paragraphStyle.indentHanging : levelModel.indentHanging;
-        let paragraphIndent = levelModel.indentLeft - hangingIndent + markerWidth + markerWidth / marker.length;
-        return paragraphIndent;
+        let indentHanging = levelModel.indentHanging;
+        let indentFirstLine = DEFAULT_PARAGRAPH_STYLE.indentFirstLine;
+        if (paragraph.paragraphStyle.indentFirstLine || paragraph.paragraphStyle.indentHanging) {
+            if (paragraph.paragraphStyle.indentFirstLine) {
+                indentFirstLine = paragraph.paragraphStyle.indentFirstLine;
+                indentHanging = 0;
+            }
+            else {
+                indentHanging = paragraph.paragraphStyle.indentHanging ? paragraph.paragraphStyle.indentHanging : levelModel.indentHanging;
+            }
+        }
+        const indent = new IndentModel(indentFirstLine, indentHanging, paragraph.paragraphStyle.indentLeft ? paragraph.paragraphStyle.indentLeft : levelModel.indentLeft, paragraph.paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight);
+        return { indent, markerWidth: markerWidth + markerWidth / marker.length };
     }
     getLineInfoFromTextLine(index) {
         const paragraph = ParagraphStyleHelper.getParagraphAtIndex(this.model.paragraphs, index);
         const indentLeft = this.getIndentLeftFromTextLine(index);
-        return this.getLineInfoModel(paragraph, indentLeft);
+        const indent = new IndentModel(paragraph.paragraphStyle.indentFirstLine ?? DEFAULT_PARAGRAPH_STYLE.indentFirstLine, paragraph.paragraphStyle.indentHanging ?? DEFAULT_PARAGRAPH_STYLE.indentHanging, indentLeft ?? DEFAULT_PARAGRAPH_STYLE.indentLeft, paragraph.paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight);
+        return this.getLineInfoModel(paragraph, indent, 0);
     }
-    getLineInfoModel(paragraph, indentLeft) {
-        const indentHanging = paragraph.paragraphStyle.numberingId === null ? paragraph.paragraphStyle.indentHanging : 0;
+    getLineInfoModel(paragraph, indent, markerWidth) {
         return new LineInfoModel({
             align: paragraph.paragraphStyle.alignment ?? DEFAULT_PARAGRAPH_STYLE.alignment,
-            indent: new IndentModel(paragraph.paragraphStyle.indentFirstLine ?? DEFAULT_PARAGRAPH_STYLE.indentFirstLine, indentHanging ?? DEFAULT_PARAGRAPH_STYLE.indentHanging, indentLeft ?? DEFAULT_PARAGRAPH_STYLE.indentLeft, paragraph.paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight),
+            indent,
             offsetBefore: DEFAULT_PARAGRAPH_STYLE.spaceBefore,
             offsetAfter: DEFAULT_PARAGRAPH_STYLE.spaceAfter,
-            lineSpacing: paragraph.paragraphStyle.lineSpacing ?? DEFAULT_PARAGRAPH_STYLE.lineSpacing
+            lineSpacing: paragraph.paragraphStyle.lineSpacing ?? DEFAULT_PARAGRAPH_STYLE.lineSpacing,
+            isNumbering: !!markerWidth,
+            markerWidth
         });
     }
     getIndentLeftFromTextLine(insertIndex) {
@@ -13281,12 +13800,15 @@ class EditSession {
         return paragraphContent.substring(startColumn || 0, endColumn || paragraphContent.length);
     }
     isEdgeOrWithinEdge() {
-        return this.isEdge() || this.isWithinEdge();
+        return this.isEdge() || this.isCellWithinEdge();
     }
     isEdge() {
         return this.type === 'edge';
     }
-    isWithinEdge() {
+    isCell() {
+        return this.type === 'cell' || this.type === 'cellWithinEdge';
+    }
+    isCellWithinEdge() {
         return this.type === 'cellWithinEdge';
     }
     onRendered() {
@@ -13440,7 +13962,9 @@ class EditSession {
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
         const endPosition = ContentHelper.documentIndexToParagraphWithOffset(this.displayData.paragraphs, endIndex);
         OperationsHelper.applyParagraphs(this.model, paragraphs);
+        this.displayData.resetAllNumberingInfo(startParagraph);
         this.displayData.updateNextLineIndexes(startParagraph, endPosition.row);
+        this.displayData.updateNumberingsDataOnChange(startParagraph + 1);
         this.applyToolbarStyles();
     }
     setTextStyle(textStyle) {
@@ -13607,6 +14131,11 @@ class EditSession {
         this.selection.placeCursor(endPosition);
         return endPosition;
     }
+    applyTableCellsStyles(model) {
+        const table = this.customComponents.tables.find(x => x.instance.insertIndex === model.insertIndex);
+        OperationsHelper.applyTableCellsStyles(this.model, model);
+        table.instance.updateTable();
+    }
     removeMoveRange(moveModel) {
         const endIndex = moveModel.sourceStartIndex + moveModel.sourceCount - 1;
         const startPosition = this.displayData.indexToPosition(moveModel.sourceStartIndex, 0);
@@ -13833,11 +14362,12 @@ class GrammarChecker {
     constructor(grammarService) {
         this.grammarService = grammarService;
         this.ignoreKey = 'grammar-ignore';
-        this.paragraphSessionMap = new Map();
+        this.sessionMap = new Map();
         this.paragraphErrorMap = new Map();
+        this.checkedParagraphs = new Map();
         this.sessionSubscriptions = new Map();
-        this.sessions = [];
         this.ignoreList = [];
+        this.visibilitySubscriptions = new Map();
         try {
             const ignoreListJson = sessionStorage.getItem(this.ignoreKey);
             this.ignoreList = JSON.parse(ignoreListJson) ?? [];
@@ -13845,59 +14375,43 @@ class GrammarChecker {
         catch {
             this.ignoreList = [];
         }
-        this.checkResultsSubscription = grammarService.grammarCheckResults$.subscribe(result => {
-            const session = this.paragraphSessionMap.get(result.paragraphId);
-            if (session) {
-                const filteredErrors = this.filterErrors(result.errors);
-                this.paragraphErrorMap.set(result.paragraphId, filteredErrors);
-                const id = +result.paragraphId.split('-')[1];
-                session.renderer.updateGrammarHighlights(id, filteredErrors);
-            }
-        });
+        this.checkResultsSubscription = grammarService.grammarCheckResults$.subscribe(x => this.processGrammarCheckResults(x));
     }
     registerSession(session) {
-        if (this.sessions.some(x => x.sessionId === session.sessionId)) {
+        if (this.sessionMap.has(session.sessionId)) {
             return;
         }
-        this.sessions.push(session);
-        const updateSubscription = session.session.paragraphInfoChanges$.subscribe(x => {
-            if (x instanceof ParagraphInfosRemoved) {
-                for (const id of x.ids) {
-                    const errors = this.paragraphErrorMap.get(`${session.sessionId}-${id}`);
-                    if (errors?.length) {
-                        session.renderer.removeGrammarHighlights(id);
-                    }
-                    this.grammarService.removeParagraph(session.sessionId, id);
-                    this.paragraphSessionMap.delete(`${session.sessionId}-${id}`);
-                    this.paragraphErrorMap.delete(`${session.sessionId}-${id}`);
-                }
+        this.sessionMap.set(session.sessionId, session);
+        const updateSubscription = session.session.paragraphInfoChanges$.subscribe(x => this.processParagraphChange(session, x));
+        this.sessionSubscriptions.set(session.sessionId, [updateSubscription]);
+        this.visibilitySubscriptions.set(session.sessionId, session.renderer.ParagraphsAppeared$.subscribe(x => {
+            if (session.session.editorService.isViewOnly) {
                 return;
             }
-            this.adjustHighlights(x, session);
-            this.grammarService.updateParagraphContent(session.sessionId, x.paragraph);
-            this.paragraphSessionMap.set(`${session.sessionId}-${x.paragraph.id}`, session);
-        });
-        this.sessionSubscriptions.set(session.sessionId, [updateSubscription]);
+            const filtered = x.filter(y => !this.checkedParagraphs.get(session.sessionId)?.has(y.id));
+            this.grammarService.enqueueParagraphs(session.sessionId, filtered);
+        }));
     }
     unregisterSession(sessionId) {
-        const session = this.sessions.find(x => x.sessionId === sessionId);
+        const session = this.sessionMap.get(sessionId);
         if (!session) {
             return;
         }
-        this.sessions.splice(this.sessions.indexOf(session), 1);
+        this.sessionMap.delete(sessionId);
         const subscriptions = this.sessionSubscriptions.get(sessionId);
         if (subscriptions?.length) {
             for (const subscription of subscriptions) {
                 subscription.unsubscribe();
             }
         }
+        const visibilitySubscription = this.visibilitySubscriptions.get(sessionId);
+        visibilitySubscription?.unsubscribe();
+        this.visibilitySubscriptions.delete(sessionId);
         this.sessionSubscriptions.delete(sessionId);
-        for (const [id, mappedSession] of this.paragraphSessionMap.entries()) {
-            if (mappedSession.sessionId === sessionId) {
-                const paragraphId = +id.split('-')[1];
-                this.grammarService.removeParagraph(sessionId, paragraphId);
-                this.paragraphSessionMap.delete(id);
-            }
+        this.checkedParagraphs.delete(sessionId);
+        for (const paragraph of session.session.displayData.paragraphs) {
+            this.grammarService.removeParagraph(sessionId, paragraph.id);
+            this.paragraphErrorMap.delete(`${sessionId}-${paragraph.id}`);
         }
     }
     getError(sessionId, paragraphId, cursorIndex) {
@@ -13912,16 +14426,13 @@ class GrammarChecker {
         const ignoreJson = JSON.stringify(this.ignoreList);
         sessionStorage.setItem(this.ignoreKey, ignoreJson);
         for (const [key, errors] of this.paragraphErrorMap) {
-            const session = this.paragraphSessionMap.get(key);
+            const session = this.sessionMap.get(this.getSessionIdFromKey(key));
             const paragraphId = key.split('-')[1];
             const filteredErrors = this.filterErrors(errors);
             this.paragraphErrorMap.set(key, filteredErrors);
             session.renderer.updateGrammarHighlights(+paragraphId, filteredErrors);
         }
     }
-    filterErrors(grammarErrors) {
-        return grammarErrors.filter(x => !this.ignoreList.some(y => y.type === x.type && y.text.toLowerCase() === x.text.toLowerCase()));
-    }
     destroy() {
         this.checkResultsSubscription.unsubscribe();
         for (const subscriptions of this.sessionSubscriptions.values()) {
@@ -13930,10 +14441,45 @@ class GrammarChecker {
             }
         }
         this.sessionSubscriptions.clear();
-        this.paragraphSessionMap.clear();
-        this.sessions.length = 0;
+        this.sessionMap.clear();
+        this.checkedParagraphs.clear();
         this.grammarService.destroy();
     }
+    filterErrors(grammarErrors) {
+        return grammarErrors.filter(x => !this.ignoreList.some(y => y.type === x.type && y.text.toLowerCase() === x.text.toLowerCase()));
+    }
+    processGrammarCheckResults(result) {
+        const session = this.sessionMap.get(this.getSessionIdFromKey(result.paragraphId));
+        const paragraphId = +result.paragraphId.split('-')[1];
+        if (session && session.session.displayData.paragraphs.some(x => x.id === paragraphId)) {
+            if (this.checkedParagraphs.has(session.sessionId)) {
+                this.checkedParagraphs.get(session.sessionId).add(paragraphId);
+            }
+            else {
+                this.checkedParagraphs.set(session.sessionId, new Set([paragraphId]));
+            }
+            const filteredErrors = this.filterErrors(result.errors);
+            this.paragraphErrorMap.set(result.paragraphId, filteredErrors);
+            const id = +result.paragraphId.split('-')[1];
+            session.renderer.updateGrammarHighlights(id, filteredErrors);
+        }
+    }
+    processParagraphChange(session, change) {
+        if (change instanceof ParagraphInfosRemoved) {
+            for (const id of change.ids) {
+                const errors = this.paragraphErrorMap.get(`${session.sessionId}-${id}`);
+                if (errors?.length) {
+                    session.renderer.removeGrammarHighlights(id);
+                }
+                this.grammarService.removeParagraph(session.sessionId, id);
+                this.paragraphErrorMap.delete(`${session.sessionId}-${id}`);
+                this.checkedParagraphs.get(session.sessionId)?.delete(id);
+            }
+            return;
+        }
+        this.adjustHighlights(change, session);
+        this.grammarService.updateParagraphContent(session.sessionId, change.paragraph);
+    }
     adjustHighlights(changes, session) {
         const errors = this.paragraphErrorMap.get(`${session.sessionId}-${changes.paragraph.id}`);
         if (!errors?.length || changes instanceof ParagraphInfoAdded) {
@@ -13969,6 +14515,10 @@ class GrammarChecker {
         this.paragraphErrorMap.set(`${session.sessionId}-${changes.paragraph.id}`, newErrors);
         session.renderer.updateGrammarHighlights(changes.paragraph.id, newErrors);
     }
+    getSessionIdFromKey(paragraphKey) {
+        const parts = paragraphKey.split('-');
+        return parts.length > 1 ? +parts[0] : null;
+    }
 }
 
 class MainSessionSourceModel {
@@ -14114,7 +14664,9 @@ class HighlightLayer {
         const paragraphs = this.session.displayData.paragraphs;
         const visibleParagraphs = paragraphs.filter(x => x.paragraphSettings.lastScreenLine >= start && x.paragraphSettings.firstScreenLine <= end);
         const textLinesInfo = visibleParagraphs
-            .map(x => x.paragraphSettings.textLinesInfo.filter(l => start <= l.screenLine && l.screenLine <= end))
+            .map(x => x.paragraphSettings.textLinesInfo
+            .filter(l => start <= l.screenLine && l.screenLine <= end)
+            .map(y => ({ textLinesInfo: y, paragraphSettings: x.paragraphSettings })))
             .flat();
         const paragraphInfo = PositionHelper.getParagraphInfoByRow(paragraphs, start);
         let top = paragraphs[paragraphInfo.paragraphIndex].paragraphSettings.distanceFromTop +
@@ -14122,12 +14674,22 @@ class HighlightLayer {
             this.session.scrollTop;
         const padding = this.session.displayData.pagesFormat[this.session.displayData.pagesFormat.length - 1].pageFormatModel.marginLeft;
         for (let i = 0; i < textLinesInfo.length; i++) {
-            const lineInfo = textLinesInfo[i];
+            const lineInfo = textLinesInfo[i].textLinesInfo;
+            const paragraphLineIndex = textLinesInfo[i].paragraphSettings.textLinesInfo.findIndex(x => x === textLinesInfo[i].textLinesInfo);
             if (i !== 0) {
                 top += lineInfo.firstLinePageOffset;
                 top += lineInfo.offsetBefore;
             }
-            const left = lineInfo.paddingLeft + padding + lineInfo.offsetMargin;
+            let markerWidth = 0;
+            const numberingOffsetLeft = textLinesInfo[i].paragraphSettings.numberingData.numberingId === null
+                ? 0
+                : textLinesInfo[i].paragraphSettings.numberingData.width + textLinesInfo[i].paragraphSettings.numberingData.paddingLeft;
+            if (paragraphLineIndex === 0 &&
+                (lineInfo.indentFirstLine ||
+                    (numberingOffsetLeft - lineInfo.indentLeft > 0 && numberingOffsetLeft - lineInfo.indentLeft < lineInfo.markerWidth))) {
+                markerWidth = lineInfo.markerWidth ?? 0;
+            }
+            const left = lineInfo.paddingLeft + padding + lineInfo.offsetMargin + markerWidth;
             let style;
             if (i === 0) {
                 const rangeInfo = this.getRangeInfo(this.session, range);
@@ -14190,13 +14752,17 @@ class GrammarHighlightLayer extends HighlightLayer {
         this.errorsByParagraph = new Map();
     }
     update(config) {
-        if (!config?.isVisible || !this.errorsByParagraph.size) {
+        if (!config?.isVisible || !this.errorsByParagraph.size || this.session.editorService.isViewOnly) {
+            this.element.innerHTML = '';
             return;
         }
         this.config = config;
         this.selectionIndex = 0;
         for (const [paragraphId, grammarErrors] of this.errorsByParagraph.entries()) {
             const index = this.session.displayData.paragraphs.findIndex(x => x.id === paragraphId);
+            if (index < 0) {
+                continue;
+            }
             for (const error of grammarErrors) {
                 const range = new Range(new CursorParagraph(index, error.offset), new CursorParagraph(index, error.offset + error.length)).toScreenRange(this.session);
                 if (config.visibleRange &&
@@ -14472,6 +15038,9 @@ class SelectionLayer extends HighlightLayer {
 }
 
 class Renderer extends EventEmitting {
+    get ParagraphsAppeared$() {
+        return this.ParagraphsAppeared.asObservable();
+    }
     constructor(parentContainer, session) {
         super();
         this.session = session;
@@ -14497,6 +15066,8 @@ class Renderer extends EventEmitting {
         };
         this.isVisible = false;
         this.changes = new RenderChangesModel();
+        this.ParagraphsAppeared = new Subject();
+        this.visibilitySubject = new Subject();
         this.textareaSize = {
             height: 1,
             width: 1
@@ -14515,6 +15086,9 @@ class Renderer extends EventEmitting {
         this.dragAndDropSelectionLayer = new SelectionLayer(this.content, 'drag-and-drop-selection', this.session);
         this.loop = new RenderLoop(changes => this.renderChanges(changes));
         this.session.displayData.addEventListener('pagesCountChanged', this.pagesCountChangedHandler);
+        this.visibilitySubscription = this.visibilitySubject
+            .pipe(debounceTime(3000), filter(x => x))
+            .subscribe(() => this.paragraphsScrolledIntoView());
     }
     renderChanges(changes, force) {
         changes.apply(this.changes);
@@ -14562,6 +15136,7 @@ class Renderer extends EventEmitting {
         if (changes.visibilityChanged) {
             this.renderSearchHighlights();
             this.renderGrammarHighlights();
+            this.visibilitySubject.next(this.isVisible);
         }
         this.session.onRendered();
     }
@@ -14694,6 +15269,7 @@ class Renderer extends EventEmitting {
     destroy() {
         this.session.displayData.removeEventListener('pagesCountChanged', this.pagesCountChangedHandler);
         this.textLayer.destroy();
+        this.visibilitySubscription.unsubscribe();
         DomHelper.removeChildren(this.container);
     }
     renderFull() {
@@ -14750,6 +15326,14 @@ class Renderer extends EventEmitting {
             this.container.appendChild(this.content);
         }
     }
+    paragraphsScrolledIntoView() {
+        if (!this.layerConfig.visibleRange) {
+            this.ParagraphsAppeared.next(this.session.displayData.paragraphs);
+            return;
+        }
+        const paragraphs = this.session.displayData.paragraphs.slice(this.layerConfig.visibleRange.startParagraph, this.layerConfig.visibleRange.endParagraph);
+        this.ParagraphsAppeared.next(paragraphs);
+    }
 }
 
 /**
@@ -14859,6 +15443,9 @@ class VirtualRenderer {
     set layerConfig(val) {
         this.renderer.layerConfig = val;
     }
+    get ParagraphsAppeared$() {
+        return this.renderer.ParagraphsAppeared.asObservable();
+    }
     constructor(parentContainer, mainSession, scrollBar) {
         this.scrollBar = scrollBar;
         this.changes = new RenderChangesModel();
@@ -14869,6 +15456,7 @@ class VirtualRenderer {
             scrollerWidth: 0,
             dirty: true
         };
+        this.paragraphsScrolledIntoViewSubject = new Subject();
         this.container = parentContainer;
         this.createScroller();
         this.renderer = new Renderer(parentContainer, mainSession);
@@ -14876,6 +15464,9 @@ class VirtualRenderer {
         this.edgesLayer = new EdgesLayer(this.renderer.content, mainSession);
         this.scrollSubscription = this.scrollBar.scrolled$.subscribe(() => this.loop.schedule({ scroll: true }));
         this.createRenderLoop();
+        this.paragraphsScrolledIntoViewSubscription = this.paragraphsScrolledIntoViewSubject
+            .pipe(debounceTime(3000))
+            .subscribe(() => this.paragraphsScrolledIntoView());
     }
     renderChanges(changes, force) {
         changes.apply(this.changes);
@@ -14911,6 +15502,7 @@ class VirtualRenderer {
         // scrolling
         if (changes.scroll) {
             this.renderScroll(changes);
+            this.paragraphsScrolledIntoViewSubject.next();
         }
         if (changes.text) {
             this.renderText();
@@ -15093,6 +15685,7 @@ class VirtualRenderer {
         this.pagesLayer.destroy();
         this.renderer.destroy();
         this.scrollSubscription?.unsubscribe();
+        this.paragraphsScrolledIntoViewSubscription?.unsubscribe();
     }
     computeLayerConfig() {
         const displayData = this.renderer.session.displayData;
@@ -15109,7 +15702,7 @@ class VirtualRenderer {
         }
         const changes = scrollChanged
             ? this.updateCachedSize(true, this.size.width, this.size.height)
-            : new RenderChangesModel({ scroll: true });
+            : new RenderChangesModel({ scroll: true }); // TODO: stop triggering scroll for no reason
         const visibleRange = displayData.getVisibleRange(this.scrollBar.scrollTop, this.size.scrollerHeight);
         this.layerConfig = {
             width: this.renderer.textLayer.element.clientWidth,
@@ -15155,6 +15748,7 @@ class VirtualRenderer {
     renderFull() {
         this.pagesLayer.update(this.layerConfig);
         this.edgesLayer.update(this.layerConfig);
+        this.paragraphsScrolledIntoViewSubject.next();
         this.renderer.renderFull();
     }
     renderText() {
@@ -15176,6 +15770,10 @@ class VirtualRenderer {
     renderDragAndDropSelection() {
         this.renderer.renderDragAndDropSelection();
     }
+    paragraphsScrolledIntoView() {
+        const paragraphs = this.renderer.session.displayData.paragraphs.slice(this.layerConfig.visibleRange.startParagraph, this.layerConfig.visibleRange.endParagraph);
+        this.renderer.ParagraphsAppeared.next(paragraphs);
+    }
 }
 
 class CustomContentService {
@@ -15262,11 +15860,13 @@ class CustomContentService {
             multiplier: 0,
             align: lineInfo.align,
             indentFirstLine: isFirst ? lineInfo.indent.firstLine : DEFAULT_PARAGRAPH_STYLE.indentFirstLine,
-            indentHanging: isFirst ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
+            indentHanging: isFirst && !lineInfo.isNumbering ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
             indentLeft: lineInfo.indent.left,
             indentRight: lineInfo.indent.right,
             indentBefore: lineInfo.offsetBefore,
             indentAfter: lineInfo.offsetAfter,
+            markerWidth: lineInfo.markerWidth,
+            isNumbering: lineInfo.isNumbering,
             isPageBreak: false,
             isLineBreak: false,
             displayValue,
@@ -15335,7 +15935,6 @@ class RegulatorService {
         this.currentSession = this.mainSession;
         displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
         this.grammarChecker.registerSession(this.mainSession);
-        displayData.emitAllParagraphs();
     }
     addCellSession(table, margins, component, properties) {
         const sessionId = ++this.sessionIdIncrement;
@@ -15352,7 +15951,6 @@ class RegulatorService {
         displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
         newSession.renderer.updateText();
         this.grammarChecker.registerSession(newSession);
-        displayData.emitAllParagraphs();
         return newSession;
     }
     addEdgeSession(component) {
@@ -15367,7 +15965,6 @@ class RegulatorService {
         displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
         newSession.renderer.updateText();
         this.grammarChecker.registerSession(newSession);
-        displayData.emitAllParagraphs();
         return newSession;
     }
     removeSession(sessionId) {
@@ -15428,6 +16025,7 @@ class RegulatorService {
             this.currentSession.renderer.showCursor();
             this.arrangeEdgesForSessionChange(previous.session, session.session);
         }
+        this.editorService.setIsTableSelected(session.session.isCell());
     }
     updateCursorPosition() {
         if (!this.currentSession.session.isEdge()) {
@@ -15578,6 +16176,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             type: Injectable
         }] });
 
+class InsertOverlays {
+    constructor(models = []) {
+        this.componentMap = {};
+        models.forEach(x => (this.componentMap[x.key] = x.component));
+    }
+    getComponent(key) {
+        return this.componentMap[key];
+    }
+}
+
 class TabSettingModel {
     constructor(fields) {
         if (fields) {
@@ -15653,6 +16261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class EditorRulerComponent {
     constructor() {
         this.unit = input.required();
+        this.disabled = input(false);
         this.editorService = inject(EditorService);
         this.dialog = inject(MatDialog);
         this.defaultPaddingCm = 2.5;
@@ -15745,12 +16354,16 @@ class EditorRulerComponent {
             window.removeEventListener('touchend', this.onUp);
         };
         this.editorService.paragraphStyle$
-            .pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(x => !!x.tabSettings), map(x => x.tabSettings?.map(y => new TabSettingModel({ alignment: y.alignment, position: y.position })) ?? []))
+            .pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(x => !!x.paragraphStyle.tabSettings), map(x => x.paragraphStyle.tabSettings?.map(y => new TabSettingModel({ alignment: y.alignment, position: y.position })) ?? []))
             .subscribe(x => this.tabSettings.set(x));
-        this.editorService.paragraphStyle$.pipe(takeUntilDestroyed()).subscribe(x => {
-            this.firstLine.set(x.indentHanging ? -x.indentHanging : x.indentFirstLine);
-            this.leftIndent.set(x.indentLeft);
-            this.rightIndent.set(x.indentRight);
+        this.editorService.paragraphStyle$.pipe(takeUntilDestroyed()).subscribe(({ paragraphStyle, numberingModel }) => {
+            const numberingIndentLeft = numberingModel?.levels[paragraphStyle.numberingLevel].indentLeft ?? 0;
+            const numberingIndentHanging = numberingModel?.levels[paragraphStyle.numberingLevel].indentHanging ?? 0;
+            const indentLeft = paragraphStyle.indentLeft === 0 ? numberingIndentLeft : paragraphStyle.indentLeft;
+            const firstLine = paragraphStyle.indentHanging ? -paragraphStyle.indentHanging : paragraphStyle.indentFirstLine;
+            this.firstLine.set(firstLine === 0 ? -numberingIndentHanging : firstLine);
+            this.leftIndent.set(indentLeft);
+            this.rightIndent.set(paragraphStyle.indentRight);
         });
         effect(() => (this.unit() === 'inch' ? this.buildTicksInch() : this.buildTicksCm()));
     }
@@ -15939,11 +16552,11 @@ class EditorRulerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorRulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorRulerComponent, isStandalone: true, selector: "app-nod-editor-ruler", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "rulerContainer", first: true, predicate: ["rulerContainer"], descendants: true, static: true }], ngImport: i0, template: "<div\n    class=\"ruler-container\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorRulerComponent, isStandalone: true, selector: "app-nod-editor-ruler", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "rulerContainer", first: true, predicate: ["rulerContainer"], descendants: true, static: true }], ngImport: i0, template: "<div\n    class=\"ruler-container\"\n    [class.disabled]=\"disabled()\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;position:relative;z-index:10;width:100%;height:22px;justify-content:center;align-items:center}.disabled{pointer-events:none}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorRulerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-ruler', imports: [MatIconModule, AsyncPipe], template: "<div\n    class=\"ruler-container\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-ruler', imports: [MatIconModule, AsyncPipe], template: "<div\n    class=\"ruler-container\"\n    [class.disabled]=\"disabled()\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;position:relative;z-index:10;width:100%;height:22px;justify-content:center;align-items:center}.disabled{pointer-events:none}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { rulerContainer: [{
                 type: ViewChild,
                 args: ['rulerContainer', { static: true }]
@@ -15966,7 +16579,7 @@ class EditorComponent {
     get content() {
         return this._content;
     }
-    constructor(cdr, componentService, editorService, overlayService, injector, regulatorService, commandsService, clipboard) {
+    constructor(cdr, componentService, editorService, overlayService, injector, regulatorService, commandsService, clipboard, insertOverlays) {
         this.cdr = cdr;
         this.componentService = componentService;
         this.editorService = editorService;
@@ -15975,6 +16588,7 @@ class EditorComponent {
         this.regulatorService = regulatorService;
         this.commandsService = commandsService;
         this.clipboard = clipboard;
+        this.insertOverlays = insertOverlays;
         this.isMobile = false;
         this.externalElementTagNames = ['APP-NODER-INPUT', 'APP-NODER-SIGNATURE', 'APP-NODER-DATEPICKER'];
         this.rulerUnit = input.required();
@@ -15992,7 +16606,7 @@ class EditorComponent {
     }
     initEditor(content) {
         this.ngOnDestroy();
-        this.editor = new Editor(content, this.container, this.editorService, this.overlayService, this.regulatorService, this.commandsService, this.clipboard, this.externalElementTagNames, this.customPageWidth);
+        this.editor = new Editor(content, this.container, this.editorService, this.overlayService, this.regulatorService, this.commandsService, this.clipboard, this.externalElementTagNames, this.insertOverlays, this.customPageWidth);
         this.subscriptions.push(this.toggleSidenavSubscription(), this.searchBarSubscription());
     }
     toggleSidenavSubscription() {
@@ -16040,13 +16654,13 @@ class EditorComponent {
         this.componentService.removeComponent(this.sidenavComponentRef);
         this.sidenavComponentRef = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ComponentService }, { token: EditorService }, { token: OverlayService }, { token: i0.Injector }, { token: RegulatorService }, { token: CommandsService }, { token: i6$1.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorComponent, isStandalone: false, selector: "app-nod-editor", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: false, isRequired: false, transformFunction: null }, externalElementTagNames: { classPropertyName: "externalElementTagNames", publicName: "externalElementTagNames", isSignal: false, isRequired: false, transformFunction: null }, customPageWidth: { classPropertyName: "customPageWidth", publicName: "customPageWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, rulerUnit: { classPropertyName: "rulerUnit", publicName: "rulerUnit", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }, { propertyName: "searchBar", first: true, predicate: EditorSearchBarComponent, descendants: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <app-nod-editor-ruler [unit]=\"rulerUnit()\" />\n        @if (showSearchBar) {\n            <app-nod-editor-search-bar />\n        }\n        <div class=\"container\">\n            <div\n                #container\n                class=\"edit-container\"></div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:hidden}.container{height:100%;display:flex;justify-content:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"], dependencies: [{ kind: "component", type: EditorRulerComponent, selector: "app-nod-editor-ruler", inputs: ["unit"] }, { kind: "component", type: EditorSearchBarComponent, selector: "app-nod-editor-search-bar" }, { kind: "component", type: i9.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i9.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9.MatDrawerContent, selector: "mat-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ComponentService }, { token: EditorService }, { token: OverlayService }, { token: i0.Injector }, { token: RegulatorService }, { token: CommandsService }, { token: i6$1.Clipboard }, { token: InsertOverlays }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorComponent, isStandalone: false, selector: "app-nod-editor", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: false, isRequired: false, transformFunction: null }, externalElementTagNames: { classPropertyName: "externalElementTagNames", publicName: "externalElementTagNames", isSignal: false, isRequired: false, transformFunction: null }, customPageWidth: { classPropertyName: "customPageWidth", publicName: "customPageWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, rulerUnit: { classPropertyName: "rulerUnit", publicName: "rulerUnit", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }, { propertyName: "searchBar", first: true, predicate: EditorSearchBarComponent, descendants: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"editor\">\n            <app-nod-editor-ruler\n                [unit]=\"rulerUnit()\"\n                [disabled]=\"isViewOnly$ | async\" />\n            @if (showSearchBar) {\n                <app-nod-editor-search-bar />\n            }\n            <div class=\"container\">\n                <div\n                    #container\n                    class=\"edit-container\"></div>\n            </div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:100%}.editor{display:inline-block;height:100%;min-width:100%;text-align:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"], dependencies: [{ kind: "component", type: EditorRulerComponent, selector: "app-nod-editor-ruler", inputs: ["unit", "disabled"] }, { kind: "component", type: EditorSearchBarComponent, selector: "app-nod-editor-search-bar" }, { kind: "component", type: i10.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i10.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i10.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nod-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <app-nod-editor-ruler [unit]=\"rulerUnit()\" />\n        @if (showSearchBar) {\n            <app-nod-editor-search-bar />\n        }\n        <div class=\"container\">\n            <div\n                #container\n                class=\"edit-container\"></div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:hidden}.container{height:100%;display:flex;justify-content:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentService }, { type: EditorService }, { type: OverlayService }, { type: i0.Injector }, { type: RegulatorService }, { type: CommandsService }, { type: i6$1.Clipboard }], propDecorators: { isMobile: [{
+            args: [{ selector: 'app-nod-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"editor\">\n            <app-nod-editor-ruler\n                [unit]=\"rulerUnit()\"\n                [disabled]=\"isViewOnly$ | async\" />\n            @if (showSearchBar) {\n                <app-nod-editor-search-bar />\n            }\n            <div class=\"container\">\n                <div\n                    #container\n                    class=\"edit-container\"></div>\n            </div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:100%}.editor{display:inline-block;height:100%;min-width:100%;text-align:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentService }, { type: EditorService }, { type: OverlayService }, { type: i0.Injector }, { type: RegulatorService }, { type: CommandsService }, { type: i6$1.Clipboard }, { type: InsertOverlays }], propDecorators: { isMobile: [{
                 type: Input
             }], externalElementTagNames: [{
                 type: Input
@@ -16093,6 +16707,7 @@ class EditorModule {
             providers: [
                 { provide: EXTERNAL_ELEMENT_SIDENAV, useValue: new ExternalSidenavModel(options?.sidenav) },
                 { provide: EXTERNAL_ELEMENT_SERVICE, useClass: options?.elementService ?? ExternalElementService },
+                { provide: InsertOverlays, useValue: new InsertOverlays(options?.insertOverlays) },
                 { provide: ImageApiService, useClass: options?.imageApiService ?? DefaultImageApiService }
             ]
         };
@@ -16607,6 +17222,9 @@ class BaseToolbarComponent extends DestroyComponent {
         this.insertImage = new EventEmitter();
         this.insertLink = new EventEmitter();
         this.insertTable = new EventEmitter();
+        this.updateTableBorderStyle = new EventEmitter();
+        this.updateTableBorderWidth = new EventEmitter();
+        this.updateTableBorders = new EventEmitter();
         this.elements = this.injector.get(EXTERNAL_ELEMENT_SERVICE).elements;
         this.customIconService.register();
         this.historyInfoSubscription();
@@ -16666,7 +17284,7 @@ class BaseToolbarComponent extends DestroyComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BaseToolbarComponent, deps: [{ token: CustomIconService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: BaseToolbarComponent, isStandalone: true, outputs: { print: "print", redo: "redo", undo: "undo", createElement: "createElement", changeTextStyle: "changeTextStyle", changeParagraphStyle: "changeParagraphStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertImage: "insertImage", insertLink: "insertLink", insertTable: "insertTable" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: BaseToolbarComponent, isStandalone: true, outputs: { print: "print", redo: "redo", undo: "undo", createElement: "createElement", changeTextStyle: "changeTextStyle", changeParagraphStyle: "changeParagraphStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertImage: "insertImage", insertLink: "insertLink", insertTable: "insertTable", updateTableBorderStyle: "updateTableBorderStyle", updateTableBorderWidth: "updateTableBorderWidth", updateTableBorders: "updateTableBorders" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BaseToolbarComponent, decorators: [{
             type: Directive
@@ -16692,6 +17310,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Output
             }], insertTable: [{
                 type: Output
+            }], updateTableBorderStyle: [{
+                type: Output
+            }], updateTableBorderWidth: [{
+                type: Output
+            }], updateTableBorders: [{
+                type: Output
             }] } });
 
 class InsertTableComponent {
@@ -16963,6 +17587,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 args: ['auto']
             }] } });
 
+class TableBordersComponent {
+    constructor() {
+        this.isDisabled = false;
+        this.active = false;
+        this.borders = Borders;
+        this.updateTableBorders = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBordersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TableBordersComponent, isStandalone: true, selector: "app-nod-table-borders", inputs: { isDisabled: "isDisabled" }, outputs: { updateTableBorders: "updateTableBorders" }, ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.LABEL.BORDERS' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-bottom\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Bottom)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-bottom\" />\n        <div class=\"label\">{{ 'NODER.LABEL.BOTTOM_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Top)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-top\" />\n        <div class=\"label\">{{ 'NODER.LABEL.TOP_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Left)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-left\" />\n        <div class=\"label\">{{ 'NODER.LABEL.LEFT_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Right)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-right\" />\n        <div class=\"label\">{{ 'NODER.LABEL.RIGHT_BORDER' | translate }}</div>\n    </div>\n    <mat-divider />\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Empty)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-none\" />\n        <div class=\"label\">{{ 'NODER.LABEL.NO_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.All)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-all\" />\n        <div class=\"label\">{{ 'NODER.LABEL.ALL_BORDERS' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Outside)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-outside\" />\n        <div class=\"label\">{{ 'NODER.LABEL.OUTSIDE_BORDERS' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Inside)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-inside\" />\n        <div class=\"label\">{{ 'NODER.LABEL.INSIDE_BORDERS' | translate }}</div>\n    </div>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.mat-divider{margin:0 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBordersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nod-table-borders', imports: [MatButtonModule, MatDividerModule, MatIconModule, MatMenuModule, MatTooltipModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.LABEL.BORDERS' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-bottom\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Bottom)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-bottom\" />\n        <div class=\"label\">{{ 'NODER.LABEL.BOTTOM_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Top)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-top\" />\n        <div class=\"label\">{{ 'NODER.LABEL.TOP_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Left)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-left\" />\n        <div class=\"label\">{{ 'NODER.LABEL.LEFT_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Right)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-right\" />\n        <div class=\"label\">{{ 'NODER.LABEL.RIGHT_BORDER' | translate }}</div>\n    </div>\n    <mat-divider />\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Empty)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-none\" />\n        <div class=\"label\">{{ 'NODER.LABEL.NO_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.All)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-all\" />\n        <div class=\"label\">{{ 'NODER.LABEL.ALL_BORDERS' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Outside)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-outside\" />\n        <div class=\"label\">{{ 'NODER.LABEL.OUTSIDE_BORDERS' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Inside)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-inside\" />\n        <div class=\"label\">{{ 'NODER.LABEL.INSIDE_BORDERS' | translate }}</div>\n    </div>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.mat-divider{margin:0 8px}\n"] }]
+        }], propDecorators: { isDisabled: [{
+                type: Input
+            }], updateTableBorders: [{
+                type: Output
+            }] } });
+
+class TableBorderStyleComponent {
+    constructor() {
+        this.isDisabled = false;
+        this.active = false;
+        this.lineStyles = LineStyles;
+        this.updateTableBorderStyle = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBorderStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TableBorderStyleComponent, isStandalone: true, selector: "app-nod-table-border-style", inputs: { isDisabled: "isDisabled" }, outputs: { updateTableBorderStyle: "updateTableBorderStyle" }, ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.TOOLTIP.BORDER_STYLE' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-dash\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Single)\">\n        <div class=\"solid-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Dashed)\">\n        <div class=\"dashed-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Dotted)\">\n        <div class=\"dotted-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Double)\">\n        <div class=\"double-border\"></div>\n    </div>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.solid-border{border-bottom:1px solid}.dashed-border{border-bottom:1px dashed}.dotted-border{border-bottom:1px dotted}.double-border{border-bottom:4px double}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBorderStyleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nod-table-border-style', imports: [MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.TOOLTIP.BORDER_STYLE' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-dash\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Single)\">\n        <div class=\"solid-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Dashed)\">\n        <div class=\"dashed-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Dotted)\">\n        <div class=\"dotted-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Double)\">\n        <div class=\"double-border\"></div>\n    </div>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.solid-border{border-bottom:1px solid}.dashed-border{border-bottom:1px dashed}.dotted-border{border-bottom:1px dotted}.double-border{border-bottom:4px double}\n"] }]
+        }], propDecorators: { isDisabled: [{
+                type: Input
+            }], updateTableBorderStyle: [{
+                type: Output
+            }] } });
+
+class TableBorderWidthComponent {
+    constructor() {
+        this.isDisabled = false;
+        this.active = false;
+        this.widths = [0.5, 1, 1.5, 2, 3];
+        this.updateTableBorderWidth = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBorderWidthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: TableBorderWidthComponent, isStandalone: true, selector: "app-nod-table-border-width", inputs: { isDisabled: "isDisabled" }, outputs: { updateTableBorderWidth: "updateTableBorderWidth" }, ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.TOOLTIP.BORDER_WIDTH' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-width\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    @for (width of widths; track $index) {\n        <div\n            mat-menu-item\n            class=\"border-width\"\n            (click)=\"updateTableBorderWidth.emit(width)\">\n            {{ width }} pt\n        </div>\n    }\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.border-width{font-size:14px;font-style:normal;font-weight:400;line-height:normal}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBorderWidthComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nod-table-border-width', imports: [MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.TOOLTIP.BORDER_WIDTH' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-width\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    @for (width of widths; track $index) {\n        <div\n            mat-menu-item\n            class=\"border-width\"\n            (click)=\"updateTableBorderWidth.emit(width)\">\n            {{ width }} pt\n        </div>\n    }\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.border-width{font-size:14px;font-style:normal;font-weight:400;line-height:normal}\n"] }]
+        }], propDecorators: { isDisabled: [{
+                type: Input
+            }], updateTableBorderWidth: [{
+                type: Output
+            }] } });
+
 class ColorPickerComponent {
     constructor() {
         this.colorChange = new EventEmitter();
@@ -17203,11 +17884,11 @@ class ToolbarActionsComponent extends BaseToolbarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToolbarActionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CustomIconService }, { token: i0.Injector }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ToolbarActionsComponent, isStandalone: false, selector: "app-nod-toolbar-actions", viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{ isViewOnly: editorService.isViewOnly$ | async } as data\">\n    <app-nod-undo-redo\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (undo)=\"undo.emit()\"\n        (redo)=\"redo.emit()\" />\n    <app-nod-print\n        class=\"hidden\"\n        (print)=\"print.emit()\" />\n    <div class=\"separator\"></div>\n    <app-nod-font\n        [isDisabled]=\"data.isViewOnly\"\n        [styles]=\"styles\"\n        (selectFont)=\"onApplyFontFamily($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-size\n        [isDisabled]=\"data.isViewOnly\"\n        [fontSize]=\"styles.fontSize\"\n        (selectFontSize)=\"onApplyFontSize($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-style\n        [isDisabled]=\"data.isViewOnly\"\n        [bold]=\"styles.bold\"\n        [italic]=\"styles.italic\"\n        [underline]=\"styles.underline\"\n        [fontColor]=\"styles.fontColor\"\n        [highlightColor]=\"styles.highlightColor\"\n        (selectFontColor)=\"onApplyFontColor($event)\"\n        (toggleBold)=\"onApplyBold()\"\n        (toggleItalic)=\"onApplyItalic()\"\n        (toggleUnderline)=\"onApplyUnderline()\"\n        (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-format\n        [isDisabled]=\"data.isViewOnly\"\n        [alignment]=\"styles.alignment\"\n        (selectAlignment)=\"onApplyAlignment($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-numbering\n        [isDisabled]=\"data.isViewOnly\"\n        [selectedNumberingType]=\"numberingType\"\n        [selectedNumberingTemplate]=\"numberingTemplateType\"\n        (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n        (removeNumberings)=\"removeNumberings.emit()\" />\n    <div class=\"separator\"></div>\n    <div class=\"insert-buttons\">\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-image\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertImage.emit()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_IMAGE' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-image\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-table\"\n            [class.active-button]=\"showInsertTableMenu\"\n            [disabled]=\"data.isViewOnly\"\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_TABLE' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-link\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertLink.emit()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_LINK' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-link-on\" />\n        </button>\n    </div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"separator\"></div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"custom-elements\">\n        <button\n            *ngFor=\"let element of elements\"\n            mat-button\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"onCreateElement(element)\"\n            [matTooltip]=\"element.tooltip | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"{{ element.icon }}\"></mat-icon>\n        </button>\n    </div>\n</ng-container>\n<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-nod-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:2px solid;height:24px;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FontComponent, selector: "app-nod-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-nod-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FontStyleComponent, selector: "app-nod-font-style", inputs: ["isDisabled", "bold", "italic", "underline", "fontColor", "highlightColor"], outputs: ["toggleBold", "toggleItalic", "toggleUnderline", "selectFontColor", "selectHighlightColor"] }, { kind: "component", type: FormatComponent, selector: "app-nod-format", inputs: ["isDisabled", "alignment"], outputs: ["selectAlignment"] }, { kind: "component", type: NumberingComponent, selector: "app-nod-numbering", inputs: ["isDisabled", "selectedNumberingType", "selectedNumberingTemplate"], outputs: ["selectNumberingTemplate", "removeNumberings"] }, { kind: "component", type: PrintComponent, selector: "app-nod-print", outputs: ["print"] }, { kind: "component", type: UndoRedoComponent, selector: "app-nod-undo-redo", inputs: ["canUndo", "canRedo"], outputs: ["undo", "redo"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ToolbarActionsComponent, isStandalone: false, selector: "app-nod-toolbar-actions", viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@let isViewOnly = editorService.isViewOnly$ | async;\n@let isTableSelected = editorService.isTableSelected$ | async;\n<app-nod-undo-redo\n    [canUndo]=\"canUndo\"\n    [canRedo]=\"canRedo\"\n    (undo)=\"undo.emit()\"\n    (redo)=\"redo.emit()\" />\n<app-nod-print\n    class=\"hidden\"\n    (print)=\"print.emit()\" />\n<div class=\"separator\"></div>\n<app-nod-font\n    [isDisabled]=\"isViewOnly\"\n    [styles]=\"styles\"\n    (selectFont)=\"onApplyFontFamily($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-size\n    [isDisabled]=\"isViewOnly\"\n    [fontSize]=\"styles.fontSize\"\n    (selectFontSize)=\"onApplyFontSize($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-style\n    [isDisabled]=\"isViewOnly\"\n    [bold]=\"styles.bold\"\n    [italic]=\"styles.italic\"\n    [underline]=\"styles.underline\"\n    [fontColor]=\"styles.fontColor\"\n    [highlightColor]=\"styles.highlightColor\"\n    (selectFontColor)=\"onApplyFontColor($event)\"\n    (toggleBold)=\"onApplyBold()\"\n    (toggleItalic)=\"onApplyItalic()\"\n    (toggleUnderline)=\"onApplyUnderline()\"\n    (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n<div class=\"separator\"></div>\n<app-nod-format\n    [isDisabled]=\"isViewOnly\"\n    [alignment]=\"styles.alignment\"\n    (selectAlignment)=\"onApplyAlignment($event)\" />\n<div class=\"separator\"></div>\n<app-nod-numbering\n    [isDisabled]=\"isViewOnly\"\n    [selectedNumberingType]=\"numberingType\"\n    [selectedNumberingTemplate]=\"numberingTemplateType\"\n    (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\" />\n<div class=\"separator\"></div>\n<div class=\"insert-buttons\">\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-image\"\n        [disabled]=\"isViewOnly\"\n        (click)=\"insertImage.emit()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_IMAGE' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-image\" />\n    </button>\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-table\"\n        [class.active-button]=\"showInsertTableMenu\"\n        [disabled]=\"isViewOnly\"\n        [matMenuTriggerFor]=\"tableInsert\"\n        (menuOpened)=\"showInsertTableMenu = true\"\n        (menuClosed)=\"onTableInsertMenuClosed()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_TABLE' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-table\" />\n    </button>\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-link\"\n        [disabled]=\"isViewOnly\"\n        (click)=\"insertLink.emit()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_LINK' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-link-on\" />\n    </button>\n</div>\n@if (isTableSelected) {\n    <div class=\"separator\"></div>\n    <app-nod-table-borders\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorders)=\"updateTableBorders.emit($event)\" />\n    <app-nod-table-border-width\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\" />\n    <app-nod-table-border-style\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n}\n<div\n    *ngIf=\"elements.length\"\n    class=\"separator\"></div>\n<div\n    *ngIf=\"elements.length\"\n    class=\"custom-elements\">\n    <button\n        *ngFor=\"let element of elements\"\n        mat-button\n        [disabled]=\"isViewOnly\"\n        (click)=\"onCreateElement(element)\"\n        [matTooltip]=\"element.tooltip | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ element.icon }}\"></mat-icon>\n    </button>\n</div>\n<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-nod-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:2px solid;height:24px;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FontComponent, selector: "app-nod-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-nod-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TableBordersComponent, selector: "app-nod-table-borders", inputs: ["isDisabled"], outputs: ["updateTableBorders"] }, { kind: "component", type: TableBorderStyleComponent, selector: "app-nod-table-border-style", inputs: ["isDisabled"], outputs: ["updateTableBorderStyle"] }, { kind: "component", type: TableBorderWidthComponent, selector: "app-nod-table-border-width", inputs: ["isDisabled"], outputs: ["updateTableBorderWidth"] }, { kind: "component", type: FontStyleComponent, selector: "app-nod-font-style", inputs: ["isDisabled", "bold", "italic", "underline", "fontColor", "highlightColor"], outputs: ["toggleBold", "toggleItalic", "toggleUnderline", "selectFontColor", "selectHighlightColor"] }, { kind: "component", type: FormatComponent, selector: "app-nod-format", inputs: ["isDisabled", "alignment"], outputs: ["selectAlignment"] }, { kind: "component", type: NumberingComponent, selector: "app-nod-numbering", inputs: ["isDisabled", "selectedNumberingType", "selectedNumberingTemplate"], outputs: ["selectNumberingTemplate", "removeNumberings"] }, { kind: "component", type: PrintComponent, selector: "app-nod-print", outputs: ["print"] }, { kind: "component", type: UndoRedoComponent, selector: "app-nod-undo-redo", inputs: ["canUndo", "canRedo"], outputs: ["undo", "redo"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToolbarActionsComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-toolbar-actions', standalone: false, template: "<ng-container *ngIf=\"{ isViewOnly: editorService.isViewOnly$ | async } as data\">\n    <app-nod-undo-redo\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (undo)=\"undo.emit()\"\n        (redo)=\"redo.emit()\" />\n    <app-nod-print\n        class=\"hidden\"\n        (print)=\"print.emit()\" />\n    <div class=\"separator\"></div>\n    <app-nod-font\n        [isDisabled]=\"data.isViewOnly\"\n        [styles]=\"styles\"\n        (selectFont)=\"onApplyFontFamily($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-size\n        [isDisabled]=\"data.isViewOnly\"\n        [fontSize]=\"styles.fontSize\"\n        (selectFontSize)=\"onApplyFontSize($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-style\n        [isDisabled]=\"data.isViewOnly\"\n        [bold]=\"styles.bold\"\n        [italic]=\"styles.italic\"\n        [underline]=\"styles.underline\"\n        [fontColor]=\"styles.fontColor\"\n        [highlightColor]=\"styles.highlightColor\"\n        (selectFontColor)=\"onApplyFontColor($event)\"\n        (toggleBold)=\"onApplyBold()\"\n        (toggleItalic)=\"onApplyItalic()\"\n        (toggleUnderline)=\"onApplyUnderline()\"\n        (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-format\n        [isDisabled]=\"data.isViewOnly\"\n        [alignment]=\"styles.alignment\"\n        (selectAlignment)=\"onApplyAlignment($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-numbering\n        [isDisabled]=\"data.isViewOnly\"\n        [selectedNumberingType]=\"numberingType\"\n        [selectedNumberingTemplate]=\"numberingTemplateType\"\n        (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n        (removeNumberings)=\"removeNumberings.emit()\" />\n    <div class=\"separator\"></div>\n    <div class=\"insert-buttons\">\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-image\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertImage.emit()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_IMAGE' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-image\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-table\"\n            [class.active-button]=\"showInsertTableMenu\"\n            [disabled]=\"data.isViewOnly\"\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_TABLE' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-link\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertLink.emit()\"\n            [matTooltip]=\"'NODER.TOOLTIP.INSERT_LINK' | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-link-on\" />\n        </button>\n    </div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"separator\"></div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"custom-elements\">\n        <button\n            *ngFor=\"let element of elements\"\n            mat-button\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"onCreateElement(element)\"\n            [matTooltip]=\"element.tooltip | translate\"\n            matTooltipPosition=\"below\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"{{ element.icon }}\"></mat-icon>\n        </button>\n    </div>\n</ng-container>\n<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-nod-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:2px solid;height:24px;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.hidden{display:none}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-toolbar-actions', standalone: false, template: "@let isViewOnly = editorService.isViewOnly$ | async;\n@let isTableSelected = editorService.isTableSelected$ | async;\n<app-nod-undo-redo\n    [canUndo]=\"canUndo\"\n    [canRedo]=\"canRedo\"\n    (undo)=\"undo.emit()\"\n    (redo)=\"redo.emit()\" />\n<app-nod-print\n    class=\"hidden\"\n    (print)=\"print.emit()\" />\n<div class=\"separator\"></div>\n<app-nod-font\n    [isDisabled]=\"isViewOnly\"\n    [styles]=\"styles\"\n    (selectFont)=\"onApplyFontFamily($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-size\n    [isDisabled]=\"isViewOnly\"\n    [fontSize]=\"styles.fontSize\"\n    (selectFontSize)=\"onApplyFontSize($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-style\n    [isDisabled]=\"isViewOnly\"\n    [bold]=\"styles.bold\"\n    [italic]=\"styles.italic\"\n    [underline]=\"styles.underline\"\n    [fontColor]=\"styles.fontColor\"\n    [highlightColor]=\"styles.highlightColor\"\n    (selectFontColor)=\"onApplyFontColor($event)\"\n    (toggleBold)=\"onApplyBold()\"\n    (toggleItalic)=\"onApplyItalic()\"\n    (toggleUnderline)=\"onApplyUnderline()\"\n    (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n<div class=\"separator\"></div>\n<app-nod-format\n    [isDisabled]=\"isViewOnly\"\n    [alignment]=\"styles.alignment\"\n    (selectAlignment)=\"onApplyAlignment($event)\" />\n<div class=\"separator\"></div>\n<app-nod-numbering\n    [isDisabled]=\"isViewOnly\"\n    [selectedNumberingType]=\"numberingType\"\n    [selectedNumberingTemplate]=\"numberingTemplateType\"\n    (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\" />\n<div class=\"separator\"></div>\n<div class=\"insert-buttons\">\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-image\"\n        [disabled]=\"isViewOnly\"\n        (click)=\"insertImage.emit()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_IMAGE' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-image\" />\n    </button>\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-table\"\n        [class.active-button]=\"showInsertTableMenu\"\n        [disabled]=\"isViewOnly\"\n        [matMenuTriggerFor]=\"tableInsert\"\n        (menuOpened)=\"showInsertTableMenu = true\"\n        (menuClosed)=\"onTableInsertMenuClosed()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_TABLE' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-table\" />\n    </button>\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-link\"\n        [disabled]=\"isViewOnly\"\n        (click)=\"insertLink.emit()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_LINK' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-link-on\" />\n    </button>\n</div>\n@if (isTableSelected) {\n    <div class=\"separator\"></div>\n    <app-nod-table-borders\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorders)=\"updateTableBorders.emit($event)\" />\n    <app-nod-table-border-width\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\" />\n    <app-nod-table-border-style\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n}\n<div\n    *ngIf=\"elements.length\"\n    class=\"separator\"></div>\n<div\n    *ngIf=\"elements.length\"\n    class=\"custom-elements\">\n    <button\n        *ngFor=\"let element of elements\"\n        mat-button\n        [disabled]=\"isViewOnly\"\n        (click)=\"onCreateElement(element)\"\n        [matTooltip]=\"element.tooltip | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ element.icon }}\"></mat-icon>\n    </button>\n</div>\n<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-nod-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:2px solid;height:24px;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.hidden{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CustomIconService }, { type: i0.Injector }, { type: EditorService }], propDecorators: { tableInsertMenu: [{
                 type: ViewChild,
                 args: ['tableInsert']
@@ -17322,13 +18003,16 @@ class EditorToolbarComponent {
         this.setNumberingTemplateType = new EventEmitter();
         this.removeNumberings = new EventEmitter();
         this.insertTable = new EventEmitter();
+        this.updateTableBorderStyle = new EventEmitter();
+        this.updateTableBorderWidth = new EventEmitter();
+        this.updateTableBorders = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorToolbarComponent, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorToolbarComponent, isStandalone: false, selector: "app-nod-editor-toolbar", outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", downloadPdf: "downloadPdf", print: "print", insertPageBreak: "insertPageBreak", createDocument: "createDocument", pageSetup: "pageSetup", insertImage: "insertImage", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", redo: "redo", undo: "undo", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected", insertLink: "insertLink", createElement: "createElement", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertTable: "insertTable" }, ngImport: i0, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", inputs: ["showFile", "showEdit", "showInsert", "showLayout", "showFormat"], outputs: ["openFileFromDisk", "saveAs", "downloadPdf", "insertPageBreak", "createDocument", "pageSetup", "rename", "delete", "openEditMenu", "cutSelected", "copySelected", "pasteClipboardData", "selectAll", "removeSelected"] }, { kind: "component", type: ToolbarActionsComponent, selector: "app-nod-toolbar-actions" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorToolbarComponent, isStandalone: false, selector: "app-nod-editor-toolbar", outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", downloadPdf: "downloadPdf", print: "print", insertPageBreak: "insertPageBreak", createDocument: "createDocument", pageSetup: "pageSetup", insertImage: "insertImage", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", redo: "redo", undo: "undo", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected", insertLink: "insertLink", createElement: "createElement", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertTable: "insertTable", updateTableBorderStyle: "updateTableBorderStyle", updateTableBorderWidth: "updateTableBorderWidth", updateTableBorders: "updateTableBorders" }, ngImport: i0, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\"\n    (updateTableBorders)=\"updateTableBorders.emit($event)\"\n    (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\"\n    (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", inputs: ["showFile", "showEdit", "showInsert", "showLayout", "showFormat"], outputs: ["openFileFromDisk", "saveAs", "downloadPdf", "insertPageBreak", "createDocument", "pageSetup", "rename", "delete", "openEditMenu", "cutSelected", "copySelected", "pasteClipboardData", "selectAll", "removeSelected"] }, { kind: "component", type: ToolbarActionsComponent, selector: "app-nod-toolbar-actions" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorToolbarComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-toolbar', standalone: false, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-toolbar', standalone: false, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\"\n    (updateTableBorders)=\"updateTableBorders.emit($event)\"\n    (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\"\n    (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: EditorService }], propDecorators: { openFileFromDisk: [{
                 type: Output
             }], addCustomElement: [{
@@ -17381,6 +18065,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Output
             }], insertTable: [{
                 type: Output
+            }], updateTableBorderStyle: [{
+                type: Output
+            }], updateTableBorderWidth: [{
+                type: Output
+            }], updateTableBorders: [{
+                type: Output
             }] } });
 
 class EditorToolbarService {
@@ -17672,6 +18362,9 @@ class EditorToolbarModule {
             MatMenuModule,
             MatTooltipModule,
             ReactiveFormsModule,
+            TableBordersComponent,
+            TableBorderStyleComponent,
+            TableBorderWidthComponent,
             TextFormatMobileComponent,
             TranslateModule], exports: [EditorMobileToolbarComponent,
             EditorToolbarComponent,
@@ -17692,6 +18385,9 @@ class EditorToolbarModule {
             MatMenuModule,
             MatTooltipModule,
             ReactiveFormsModule,
+            TableBordersComponent,
+            TableBorderStyleComponent,
+            TableBorderWidthComponent,
             TextFormatMobileComponent,
             TranslateModule] }); }
 }
@@ -17726,6 +18422,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         MatMenuModule,
                         MatTooltipModule,
                         ReactiveFormsModule,
+                        TableBordersComponent,
+                        TableBorderStyleComponent,
+                        TableBorderWidthComponent,
                         TextFormatMobileComponent,
                         TranslateModule
                     ],
@@ -18158,7 +18857,7 @@ class PageSetupComponent {
         return customPageSize;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PageSetupComponent, deps: [{ token: EditorService }, { token: ToolbarCoreService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PageSetupComponent, isStandalone: true, selector: "app-nod-page-setup", viewQueries: [{ propertyName: "pageSizeForm", first: true, predicate: ["pageSizeForm"], descendants: true }], ngImport: i0, template: "<div class=\"title\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        (click)=\"onClose()\"\n        fontIcon=\"icon-arrow-forward\" />\n    <span>{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n</div>\n<form #pageSizeForm=\"ngForm\">\n    <div class=\"content\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.APPLY_TO' | translate }}</mat-label>\n            <mat-select [(value)]=\"selectedDocumentArea\">\n                <mat-option [value]=\"documentAreas.WholeDocument\">{{ 'NODER.LABEL.WHOLE_DOCUMENT' | translate }}</mat-option>\n                <mat-option [value]=\"documentAreas.ThisSection\">{{ 'NODER.LABEL.THIS_SECTION' | translate }}</mat-option>\n                @if (hasSelection$ | async) {\n                    <mat-option [value]=\"documentAreas.SelectedText\">{{ 'NODER.LABEL.SELECTED_TEXT' | translate }}</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n        <div class=\"orientation\">\n            <div class=\"label\">{{ 'NODER.LABEL.ORIENTATION' | translate }}</div>\n            <mat-radio-group\n                aria-label=\"Select an option\"\n                [(ngModel)]=\"pageSize.orientation\"\n                name=\"orientation\"\n                (change)=\"onPageOrientationChanged()\">\n                <mat-radio-button [value]=\"pageOrientations.Portrait\">\n                    <span>{{ 'NODER.LABEL.PORTRAIT' | translate }}</span>\n                </mat-radio-button>\n                <mat-radio-button [value]=\"pageOrientations.Landscape\">\n                    <span>{{ 'NODER.LABEL.LANDSCAPE' | translate }}</span>\n                </mat-radio-button>\n            </mat-radio-group>\n        </div>\n        <div class=\"page-format\">\n            <div class=\"page-format-tile\">\n                <div class=\"label\">{{ 'NODER.LABEL.PAGE_FORMAT' | translate }}</div>\n                <div class=\"checkbox-area\">\n                    <div class=\"checkbox-label\">{{ 'NODER.LABEL.CUSTOM_SIZE' | translate }}</div>\n                    <mat-checkbox\n                        [checked]=\"pageSize.isCustom\"\n                        (change)=\"toggleCustomSize($event)\" />\n                </div>\n            </div>\n            @if (!pageSize.isCustom) {\n                <div class=\"page-size\">\n                    <mat-form-field appearance=\"outline\">\n                        <mat-label>{{ 'NODER.LABEL.SIZE' | translate }}</mat-label>\n                        <mat-select\n                            [(value)]=\"pageSizeName\"\n                            (selectionChange)=\"onPageSizeChange()\">\n                            @for (option of pageSizes; track option) {\n                                <mat-option [value]=\"option.name\">\n                                    <div class=\"size-option\">\n                                        <span class=\"option-name\">{{ option.name + ' ' }}</span>\n                                        <span class=\"option-size\">{{ option.size }}</span>\n                                    </div>\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n            } @else {\n                <div class=\"page-custom-size\">\n                    <mat-form-field\n                        appearance=\"outline\"\n                        class=\"size-unit\">\n                        <mat-label>{{ 'NODER.LABEL.MEASURE' | translate }}</mat-label>\n                        <mat-select\n                            [(ngModel)]=\"pageSize.unit\"\n                            name=\"unit\"\n                            (valueChange)=\"onUnitChanged($event)\">\n                            <mat-option [value]=\"sizeUnits.Millimeters\">{{ 'NODER.LABEL.MILLIMETERS' | translate }}</mat-option>\n                            <mat-option [value]=\"sizeUnits.Inches\">{{ 'NODER.LABEL.INCHES' | translate }}</mat-option>\n                        </mat-select>\n                    </mat-form-field>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-width\">\n                            <mat-label>{{ ('NODER.LABEL.WIDTH' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customWidth\"\n                                name=\"customWidth\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-height\">\n                            <mat-label>{{ ('NODER.LABEL.HEIGHT' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customHeight\"\n                                name=\"customHeight\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n    <div class=\"actions\">\n        <button\n            mat-stroked-button\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-cancel-thin\" />\n        </button>\n        <button\n            mat-flat-button\n            color=\"primary\"\n            (click)=\"onApply()\"\n            [disabled]=\"pageSizeForm.pristine\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-done-thin\" />\n        </button>\n    </div>\n</form>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:400px}.title{margin:12px 16px;height:32px;display:flex;align-items:center;gap:8px}.title span{overflow:hidden;text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:normal}.content{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:8px 16px 0;gap:24px}.actions{display:flex;justify-content:flex-end;margin:0 16px 16px;gap:10px}.actions .mdc-button{width:32px;height:32px;min-width:32px;padding:0}.actions .mdc-button .mat-icon{margin-right:0;margin-left:0}.orientation{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.orientation mat-radio-group{display:flex;width:100%;gap:16px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.page-format{display:flex;flex-direction:column;gap:16px}.page-format-tile{display:flex;align-items:center;justify-content:space-between}.page-format-tile .checkbox-area{display:flex;align-items:center}.checkbox-label{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.custom-width,.custom-height,.size-unit{width:120px}.page-custom-size{display:flex;flex-direction:column}.size-panel{display:flex;gap:10px}.size-panel .mdc-button{width:40px;height:40px;min-width:40px;padding:0}.size-panel .mdc-button .mat-icon{margin-right:0;margin-left:0}.size-option{display:flex;flex-direction:column}.option-name{font-weight:400}.option-size{font-size:12px}form{display:flex;flex-direction:column;flex:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PageSetupComponent, isStandalone: true, selector: "app-nod-page-setup", viewQueries: [{ propertyName: "pageSizeForm", first: true, predicate: ["pageSizeForm"], descendants: true }], ngImport: i0, template: "<div class=\"title\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        (click)=\"onClose()\"\n        fontIcon=\"icon-arrow-forward\" />\n    <span>{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n</div>\n<form #pageSizeForm=\"ngForm\">\n    <div class=\"content\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.APPLY_TO' | translate }}</mat-label>\n            <mat-select [(value)]=\"selectedDocumentArea\">\n                <mat-option [value]=\"documentAreas.WholeDocument\">{{ 'NODER.LABEL.WHOLE_DOCUMENT' | translate }}</mat-option>\n                <mat-option [value]=\"documentAreas.ThisSection\">{{ 'NODER.LABEL.THIS_SECTION' | translate }}</mat-option>\n                @if (hasSelection$ | async) {\n                    <mat-option [value]=\"documentAreas.SelectedText\">{{ 'NODER.LABEL.SELECTED_TEXT' | translate }}</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n        <div class=\"orientation\">\n            <div class=\"label\">{{ 'NODER.LABEL.ORIENTATION' | translate }}</div>\n            <mat-radio-group\n                aria-label=\"Select an option\"\n                [(ngModel)]=\"pageSize.orientation\"\n                name=\"orientation\"\n                (change)=\"onPageOrientationChanged()\">\n                <mat-radio-button [value]=\"pageOrientations.Portrait\">\n                    <span>{{ 'NODER.LABEL.PORTRAIT' | translate }}</span>\n                </mat-radio-button>\n                <mat-radio-button [value]=\"pageOrientations.Landscape\">\n                    <span>{{ 'NODER.LABEL.LANDSCAPE' | translate }}</span>\n                </mat-radio-button>\n            </mat-radio-group>\n        </div>\n        <div class=\"page-format\">\n            <div class=\"page-format-tile\">\n                <div class=\"label\">{{ 'NODER.LABEL.PAGE_FORMAT' | translate }}</div>\n                <div class=\"checkbox-area\">\n                    <div class=\"checkbox-label\">{{ 'NODER.LABEL.CUSTOM_SIZE' | translate }}</div>\n                    <mat-checkbox\n                        [checked]=\"pageSize.isCustom\"\n                        (change)=\"toggleCustomSize($event)\" />\n                </div>\n            </div>\n            @if (!pageSize.isCustom) {\n                <div class=\"page-size\">\n                    <mat-form-field appearance=\"outline\">\n                        <mat-label>{{ 'NODER.LABEL.SIZE' | translate }}</mat-label>\n                        <mat-select\n                            [(value)]=\"pageSizeName\"\n                            (selectionChange)=\"onPageSizeChange()\">\n                            @for (option of pageSizes; track option) {\n                                <mat-option [value]=\"option.name\">\n                                    <div class=\"size-option\">\n                                        <span class=\"option-name\">{{ option.name + ' ' }}</span>\n                                        <span class=\"option-size\">{{ option.size }}</span>\n                                    </div>\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n            } @else {\n                <div class=\"page-custom-size\">\n                    <mat-form-field\n                        appearance=\"outline\"\n                        class=\"size-unit\">\n                        <mat-label>{{ 'NODER.LABEL.MEASURE' | translate }}</mat-label>\n                        <mat-select\n                            [(ngModel)]=\"pageSize.unit\"\n                            name=\"unit\"\n                            (valueChange)=\"onUnitChanged($event)\">\n                            <mat-option [value]=\"sizeUnits.Millimeters\">{{ 'NODER.LABEL.MILLIMETERS' | translate }}</mat-option>\n                            <mat-option [value]=\"sizeUnits.Inches\">{{ 'NODER.LABEL.INCHES' | translate }}</mat-option>\n                        </mat-select>\n                    </mat-form-field>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-width\">\n                            <mat-label>{{ ('NODER.LABEL.WIDTH' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customWidth\"\n                                name=\"customWidth\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-height\">\n                            <mat-label>{{ ('NODER.LABEL.HEIGHT' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customHeight\"\n                                name=\"customHeight\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n    <div class=\"actions\">\n        <button\n            mat-stroked-button\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-cancel-thin\" />\n        </button>\n        <button\n            mat-flat-button\n            color=\"primary\"\n            (click)=\"onApply()\"\n            [disabled]=\"pageSizeForm.pristine\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-done-thin\" />\n        </button>\n    </div>\n</form>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:400px}.title{margin:12px 16px;height:32px;display:flex;align-items:center;gap:8px}.title span{overflow:hidden;text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:normal}.content{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:8px 16px 0;gap:24px}.actions{display:flex;justify-content:flex-end;margin:0 16px 16px;gap:10px}.actions .mdc-button{width:32px;height:32px;min-width:32px;padding:0}.actions .mdc-button .mat-icon{margin-right:0;margin-left:0}.orientation{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.orientation mat-radio-group{display:flex;width:100%;gap:16px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.page-format{display:flex;flex-direction:column;gap:16px}.page-format-tile{display:flex;align-items:center;justify-content:space-between}.page-format-tile .checkbox-area{display:flex;align-items:center}.checkbox-label{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.custom-width,.custom-height,.size-unit{width:120px}.page-custom-size{display:flex;flex-direction:column}.size-panel{display:flex;gap:10px}.size-panel .mdc-button{width:40px;height:40px;min-width:40px;padding:0}.size-panel .mdc-button .mat-icon{margin-right:0;margin-left:0}.size-option{display:flex;flex-direction:column}.option-name{font-weight:400}.option-size{font-size:12px}form{display:flex;flex-direction:column;flex:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i10$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PageSetupComponent, decorators: [{
             type: Component,
@@ -18180,10 +18879,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class RevisionHelper {
-    static applyOperationsToRevision(revision, operations) {
+    static applyOperationsToRevision(content, operations) {
         operations.sort((a, b) => a.createTime - b.createTime);
         const actions = operations.map(x => x.command);
-        OperationsHelper.applyOperations(revision.content, actions);
+        OperationsHelper.applyOperations(content, actions);
     }
     static fillTablesDefaultStyles(tables) {
         for (const table of tables) {