@talrace/ngx-noder 19.0.71 → 19.0.72

package/fesm2022/talrace-ngx-noder.mjs

@@ -17,19 +17,19 @@ import { TranslateModule } from '@ngx-translate/core';
 import * as i3 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { FormsModule, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import * as i1$1 from '@angular/material/dialog';
-import { MatDialogRef, MatDialogModule, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import * as i6$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
+import * as i5$3 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
 import * as i5$2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3$1 from '@angular/material/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i6$2 from '@angular/cdk/clipboard';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
-import * as i7 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i3$1 from '@angular/material/core';
 import * as i10 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import * as i4$1 from '@angular/material/menu';
@@ -43,7 +43,7 @@ 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 * as i5$4 from 'ngx-colors';
 import { NgxColorsModule } from 'ngx-colors';
 import * as i3$2 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -1171,8 +1171,8 @@ class EditorService {
     insertTableColumns(insertIndex, columnsCount, targetIndex, inheritIndex, sessionId) {
         this._insertTableColumns$.next({ insertIndex, columnsCount, targetIndex, inheritIndex, sessionId });
     }
-    mergeTableCells(insertIndex, rowStartIndex, rowEndIndex, columnStartIndex, columnEndIndex, sessionId) {
-        this._mergeTableCells$.next({ insertIndex, rowStartIndex, rowEndIndex, columnStartIndex, columnEndIndex, sessionId });
+    mergeTableCells(insertIndex, rowIndex, rowCount, columnIndex, columnCount, sessionId) {
+        this._mergeTableCells$.next({ insertIndex, rowIndex, rowCount, columnIndex, columnCount, sessionId });
     }
     splitTableCells(insertIndex, rowIndex, columnIndex, targetRowsCount, targetColumnsCount, sessionId) {
         this._splitTableCells$.next({ insertIndex, rowIndex, columnIndex, targetRowsCount, targetColumnsCount, sessionId });
@@ -1678,6 +1678,8 @@ var CommandType;
     CommandType[CommandType["ReplaceByContents"] = 43] = "ReplaceByContents";
     CommandType[CommandType["MergeTableCells"] = 44] = "MergeTableCells";
     CommandType[CommandType["SplitTableCells"] = 45] = "SplitTableCells";
+    CommandType[CommandType["RestoreTableCells"] = 46] = "RestoreTableCells";
+    CommandType[CommandType["RestoreTableSplitCells"] = 47] = "RestoreTableSplitCells";
 })(CommandType || (CommandType = {}));
 
 class PageNumbersModel {
@@ -3096,14 +3098,6 @@ class RestoreTextStylesModel {
     }
 }
 
-class SplitTableCellsModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
 class OperationHistory {
     constructor(editorService, regulatorService) {
         this.editorService = editorService;
@@ -3206,27 +3200,11 @@ class OperationHistory {
         const undoStep = new RemoveTableColumnsModel({ insertIndex, startIndex: targetIndex, endIndex: targetIndex + columnsCount - 1 });
         this.addToHistory(undoStep, redoStep);
     }
-    pushMergeTableCells(insertIndex, rowStartIndex, rowsCount, columnStartIndex, columnCount) {
-        const redoStep = new MergeTableCellsModel({ insertIndex, rowStartIndex, rowsCount, columnStartIndex, columnCount });
-        const undoStep = new SplitTableCellsModel({
-            insertIndex,
-            rowIndex: rowStartIndex,
-            columnIndex: columnStartIndex,
-            targetRowsCount: rowsCount,
-            targetColumnsCount: columnCount
-        });
-        this.addToHistory(undoStep, redoStep);
+    pushMergeTableCells(undo, redo) {
+        this.addToHistory(undo, redo);
     }
-    pushSplitTableCells(insertIndex, rowIndex, columnIndex, targetRowsCount, targetColumnsCount) {
-        const redoStep = new SplitTableCellsModel({ insertIndex, rowIndex, columnIndex, targetRowsCount, targetColumnsCount });
-        const undoStep = new MergeTableCellsModel({
-            insertIndex,
-            rowStartIndex: rowIndex,
-            rowsCount: targetRowsCount,
-            columnStartIndex: columnIndex,
-            columnCount: targetColumnsCount
-        });
-        this.addToHistory(undoStep, redoStep);
+    pushSplitTableCells(undo, redo) {
+        this.addToHistory(undo, redo);
     }
     pushRemoveTableRows(insertIndex, startIndex, endIndex) {
         const redoStep = new RemoveTableRowsModel({ insertIndex, startIndex, endIndex });
@@ -3440,6 +3418,14 @@ class CellModel {
     }
 }
 
+class ColumnModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class EdgeModel {
     constructor(fields) {
         if (fields) {
@@ -5193,7 +5179,7 @@ class ParagraphOperationsHelper {
     }
 }
 
-class ColumnModel {
+class RowModel {
     constructor(fields) {
         if (fields) {
             Object.assign(this, fields);
@@ -5220,7 +5206,7 @@ var ResizerSide;
     ResizerSide[ResizerSide["Bottom"] = 3] = "Bottom";
 })(ResizerSide || (ResizerSide = {}));
 
-class RowModel {
+class RestoreCellModel {
     constructor(fields) {
         if (fields) {
             Object.assign(this, fields);
@@ -5242,6 +5228,24 @@ var VerticalMerge;
 })(VerticalMerge || (VerticalMerge = {}));
 
 class TableOperationsHelper {
+    static { this.MinColumnWidth = 15; }
+    static createEmptyCell(columnWidth) {
+        return new CellModel({
+            breaks: [],
+            borders: this.getDefaultCellBorders(),
+            content: '',
+            elements: [],
+            formats: [new FormatModel({ startIndex: 0, endIndex: 0, textStyle: DEFAULT_TEXT_STYLE })],
+            images: [],
+            paragraphs: [new ParagraphModel({ insertIndex: 0, paragraphStyle: DEFAULT_PARAGRAPH_STYLE })],
+            tables: [],
+            tabs: [],
+            links: [],
+            comments: [],
+            width: columnWidth,
+            widthType: 'dxa'
+        });
+    }
     static insertContent(tables, insertIndex, columnsCount, rowsCount, contentWidth) {
         let rows = [];
         const columnWidth = Math.round(contentWidth / columnsCount);
@@ -5738,6 +5742,7 @@ class TableOperationsHelper {
             const isTargetRow = i >= startRow && i < startRow + anchorCellRows;
             if (isTargetRow) {
                 const anchorColumnCell = matrix[i].cells[insertColumnIndex - 1];
+                anchorColumnCell.width = newColumnWidth;
                 let insertCellIndex = row.cells.indexOf(anchorColumnCell) + 1;
                 for (let j = 0; j < columnsToAdd; j++) {
                     const newCell = this.createEmptyCell(newColumnWidth);
@@ -5804,6 +5809,64 @@ class TableOperationsHelper {
         }
         return count;
     }
+    static sliceCells(rows, rowIndex, rowCount, columnIndex, columnCount) {
+        const result = [];
+        for (let i = 0; i < rowCount; i++) {
+            result[i] = [];
+            const cellIndex = this.getCellIndex(columnIndex, rows[rowIndex + i].cells);
+            let count = 0;
+            for (let j = 0; count < columnCount; j++) {
+                result[i][j] = structuredClone(rows[rowIndex + i].cells[cellIndex + j]);
+                count += rows[rowIndex + i].cells[cellIndex + j].horizontalMerge ?? 1;
+            }
+        }
+        return result;
+    }
+    static sliceSplitCells(rows, rowIndex, columnIndex) {
+        const cellIndex = this.getCellIndex(columnIndex, rows[rowIndex].cells);
+        const count = rows[rowIndex].cells[cellIndex].horizontalMerge ?? 1;
+        const result = [];
+        for (let i = 0; i < rows.length; i++) {
+            const startIndex = this.getCellIndex(columnIndex, rows[i].cells);
+            let endIndex = startIndex;
+            for (let j = 1; j < count && endIndex + 1 < rows[i].cells.length; j += rows[i].cells[endIndex].horizontalMerge ?? 1) {
+                endIndex++;
+            }
+            result[i] = rows[i].cells.slice(startIndex, endIndex + 1).map(y => new RestoreCellModel(y));
+        }
+        return result;
+    }
+    static sliceColumns(table, rowIndex, columnIndex) {
+        const cellIndex = this.getCellIndex(columnIndex, table.rows[rowIndex].cells);
+        const count = table.rows[rowIndex].cells[cellIndex].horizontalMerge ?? 1;
+        return table.columns.slice(columnIndex, columnIndex + count).map(x => new ColumnModel(x));
+    }
+    static getCellMatrixIndex(cellIndex, cells) {
+        let index = 0;
+        for (let i = 0; i < cellIndex; i++) {
+            index += cells[i].horizontalMerge ?? 1;
+        }
+        return index;
+    }
+    static getCellIndex(cellMatrixIndex, cells) {
+        let index = 0;
+        while (cellMatrixIndex >= (cells[index].horizontalMerge ?? 1)) {
+            cellMatrixIndex -= cells[index].horizontalMerge ?? 1;
+            index++;
+        }
+        return index;
+    }
+    static getVerticalMerge(columnIndex, rowIndex, rows) {
+        let result = 1;
+        while (rowIndex + result < rows.length) {
+            const index = TableOperationsHelper.getCellIndex(columnIndex, rows[rowIndex + result].cells);
+            if (rows[rowIndex + result].cells[index].verticalMerge !== VerticalMerge.Merge.toString()) {
+                break;
+            }
+            result++;
+        }
+        return result - 1;
+    }
     static cloneBorders(borders) {
         if (!borders) {
             return null;
@@ -5902,23 +5965,6 @@ class TableOperationsHelper {
             new BordersStyleModel({ position: Positions.Right, width: 1, lineStyle: LineStyles.Single })
         ];
     }
-    static createEmptyCell(columnWidth) {
-        return new CellModel({
-            breaks: [],
-            borders: this.getDefaultCellBorders(),
-            content: '',
-            elements: [],
-            formats: [new FormatModel({ startIndex: 0, endIndex: 0, textStyle: DEFAULT_TEXT_STYLE })],
-            images: [],
-            paragraphs: [new ParagraphModel({ insertIndex: 0, paragraphStyle: DEFAULT_PARAGRAPH_STYLE })],
-            tables: [],
-            tabs: [],
-            links: [],
-            comments: [],
-            width: columnWidth,
-            widthType: 'dxa'
-        });
-    }
 }
 
 class TabOperationsHelper {
@@ -6216,6 +6262,16 @@ class OperationsHelper {
                     this.splitTableCells(contents, insertIndex, rowIndex, columnIndex, targetRowsCount, targetColumnsCount);
                     break;
                 }
+                case CommandType.RestoreTableCells: {
+                    const { insertIndex, rowIndex, columnIndex, cells } = command.restoreTableCells;
+                    this.restoreTableCells(contents, insertIndex, rowIndex, columnIndex, cells);
+                    break;
+                }
+                case CommandType.RestoreTableSplitCells: {
+                    const { insertIndex, rowIndex, rowCount, columnIndex, columnCount, cells, columns } = command.restoreTableSplitCells;
+                    this.restoreTableSplitCells(contents, insertIndex, rowIndex, rowCount, columnIndex, columnCount, cells, columns);
+                    break;
+                }
             }
         });
     }
@@ -6546,70 +6602,172 @@ class OperationsHelper {
     }
     static mergeTableCells(document, insertIndex, rowStartIndex, rowsCount, columnStartIndex, columnsCount) {
         const table = document.tables.find(x => x.insertIndex === insertIndex);
-        const matrix = TableOperationsHelper.getMatrix(table);
-        const anchorCell = matrix[rowStartIndex].cells[columnStartIndex];
-        anchorCell.horizontalMerge = columnsCount > 1 ? columnsCount : null;
-        if (rowsCount > 1) {
-            anchorCell.verticalMerge = VerticalMerge.Restart;
-        }
-        anchorCell.width = 0;
-        for (let i = columnStartIndex; i < columnStartIndex + columnsCount; i++) {
-            anchorCell.width += table.columns[i].width || 0;
+        const cellIndex = TableOperationsHelper.getCellIndex(columnStartIndex, table.rows[rowStartIndex].cells);
+        const borders = table.rows[rowStartIndex].cells[cellIndex].borders;
+        const backgroundColor = table.rows[rowStartIndex].cells[cellIndex].backgroundColor;
+        let width = 0;
+        for (let i = 0; i < columnsCount; i++) {
+            width += table.columns[columnStartIndex + i].width ?? 0;
         }
-        const visitedCells = new Set([anchorCell]);
         for (let i = rowStartIndex; i < rowStartIndex + rowsCount; i++) {
-            const row = table.rows[i];
-            const rowAnchorCell = i === rowStartIndex ? anchorCell : matrix[i].cells[columnStartIndex];
-            if (i > rowStartIndex) {
-                rowAnchorCell.horizontalMerge = columnsCount > 1 ? columnsCount : null;
-                rowAnchorCell.verticalMerge = VerticalMerge.Merge;
-                rowAnchorCell.width = anchorCell.width;
-                rowAnchorCell.borders = anchorCell.borders;
-                rowAnchorCell.backgroundColor = anchorCell.backgroundColor;
-                visitedCells.add(rowAnchorCell);
-            }
-            this.mergeAndCleanupRowCells(row, matrix[i], rowAnchorCell, anchorCell, visitedCells, columnStartIndex, columnsCount);
-        }
-    }
-    static mergeAndCleanupRowCells(row, matrixRow, rowAnchorCell, anchorCell, visitedCells, columnStartIndex, columnsCount) {
-        for (let i = columnStartIndex; i < columnStartIndex + columnsCount; i++) {
-            const rowCell = matrixRow.cells[i];
-            if (rowCell === rowAnchorCell) {
-                continue;
-            }
-            if (!visitedCells.has(rowCell)) {
-                visitedCells.add(rowCell);
-                if (rowCell.content) {
-                    this.insertText(anchorCell, '\n', anchorCell.content.length);
-                    this.insertContents(anchorCell, rowCell, anchorCell.content.length);
+            let index = TableOperationsHelper.getCellIndex(columnStartIndex, table.rows[i].cells);
+            table.rows[i].cells.splice(index, 0, TableOperationsHelper.createEmptyCell(width));
+            const mergedCell = table.rows[rowStartIndex].cells[cellIndex];
+            table.rows[i].cells[index].horizontalMerge = columnsCount > 1 ? columnsCount : null;
+            table.rows[i].cells[index].verticalMerge = rowsCount > 1 ? VerticalMerge.Merge : null;
+            table.rows[i].cells[index].borders = borders;
+            table.rows[i].cells[index].backgroundColor = backgroundColor;
+            index++;
+            let count = 0;
+            while (count < columnsCount) {
+                const cell = table.rows[i].cells[index];
+                count += cell.horizontalMerge ?? 1;
+                if (cell.content) {
+                    this.insertText(mergedCell, '\n', mergedCell.content.length);
+                    this.insertContents(mergedCell, cell, mergedCell.content.length);
                 }
-            }
-            const cellIndex = row.cells.indexOf(rowCell);
-            if (cellIndex > -1) {
-                row.cells.splice(cellIndex, 1);
+                table.rows[i].cells.splice(index, 1);
             }
         }
+        table.rows[rowStartIndex].cells[cellIndex].verticalMerge = rowsCount > 1 ? VerticalMerge.Restart : null;
+    }
+    static restoreTableCells(document, insertIndex, rowIndex, columnIndex, cells) {
+        const table = document.tables.find(x => x.insertIndex === insertIndex);
+        for (let i = 0; i < cells.length; i++) {
+            const cellIndex = TableOperationsHelper.getCellIndex(columnIndex, table.rows[rowIndex + i].cells);
+            table.rows[rowIndex + i].cells.splice(cellIndex, 1);
+            table.rows[rowIndex + i].cells.splice(cellIndex, 0, ...cells[i].map(x => structuredClone(x)));
+        }
     }
     static splitTableCells(document, insertIndex, rowIndex, columnIndex, targetRowsCount, targetColumnsCount) {
         const table = document.tables.find(x => x.insertIndex === insertIndex);
-        let matrix = TableOperationsHelper.getMatrix(table);
-        const anchorCell = matrix[rowIndex].cells[columnIndex];
-        let anchorCellColumns = anchorCell.horizontalMerge ?? 1;
-        const anchorCellRows = TableOperationsHelper.getVerticalSize(table, matrix, rowIndex, columnIndex);
-        if (targetRowsCount === 1 && targetColumnsCount === 1 && anchorCellColumns === 1 && anchorCellRows === 1) {
+        const cellIndex = TableOperationsHelper.getCellIndex(columnIndex, table.rows[rowIndex].cells);
+        const fullWidth = table.rows[rowIndex].cells[cellIndex].width;
+        const endIndex = rowIndex + TableOperationsHelper.getVerticalMerge(columnIndex, rowIndex, table.rows);
+        const width = Math.floor(fullWidth / targetColumnsCount);
+        let start = columnIndex;
+        for (let i = 0; i < targetColumnsCount; i++) {
+            let merge = 0;
+            let currentWidth = 0;
+            while (currentWidth < width) {
+                if (start + merge === table.columns.length) {
+                    table.columns.push(new ColumnModel({
+                        spaceBetweenColumns: table.columns[table.columns.length - 1].spaceBetweenColumns,
+                        width: width - currentWidth
+                    }));
+                }
+                const column = table.columns[start + merge];
+                if (Math.abs(currentWidth + column.width - width) <= TableOperationsHelper.MinColumnWidth) {
+                    merge++;
+                    break;
+                }
+                if (currentWidth + column.width < width) {
+                    currentWidth += column.width ?? 0;
+                }
+                else {
+                    const splitWidth = width - currentWidth;
+                    column.width -= splitWidth;
+                    currentWidth += splitWidth;
+                    table.columns.splice(start + merge, 0, new ColumnModel({ spaceBetweenColumns: column.spaceBetweenColumns, width: splitWidth }));
+                    for (let j = 0; j < table.rows.length; j++) {
+                        if (j >= rowIndex && j <= endIndex) {
+                            continue;
+                        }
+                        const index = TableOperationsHelper.getCellIndex(start + merge, table.rows[j].cells);
+                        table.rows[j].cells[index].horizontalMerge ??= 1;
+                        table.rows[j].cells[index].horizontalMerge++;
+                    }
+                }
+                merge++;
+            }
+            let actualWidth = 0;
+            for (let j = 0; j < merge; j++) {
+                actualWidth += table.columns[start + j].width;
+            }
+            for (let j = rowIndex; j <= endIndex; j++) {
+                const index = TableOperationsHelper.getCellIndex(columnIndex, table.rows[j].cells);
+                if (i === 0) {
+                    table.rows[j].cells[index].width = actualWidth;
+                    table.rows[j].cells[index].horizontalMerge = merge === 1 ? null : merge;
+                }
+                else {
+                    const cell = TableOperationsHelper.createEmptyCell(actualWidth);
+                    cell.horizontalMerge = merge === 1 ? null : merge;
+                    cell.verticalMerge = table.rows[j].cells[index].verticalMerge;
+                    cell.borders = table.rows[j].cells[index].borders;
+                    cell.backgroundColor = table.rows[j].cells[index].backgroundColor;
+                    table.rows[j].cells.splice(index + i, 0, cell);
+                }
+            }
+            start += merge;
+        }
+        if (targetRowsCount == 1) {
+            return;
+        }
+        if (table.rows[rowIndex].cells[cellIndex].verticalMerge) {
+            const step = (endIndex - rowIndex + 1) / targetRowsCount;
+            const verticalMerge = step > 1 ? VerticalMerge.Restart : null;
+            for (let i = rowIndex; i <= endIndex; i += step) {
+                const index = TableOperationsHelper.getCellIndex(columnIndex, table.rows[i].cells);
+                for (let j = 0; j < targetColumnsCount; j++) {
+                    table.rows[i].cells[index + j].verticalMerge = verticalMerge;
+                }
+            }
             return;
         }
-        TableOperationsHelper.unmergeCellToBaseGrid(table, matrix, rowIndex, columnIndex, anchorCellRows, anchorCellColumns);
-        matrix = TableOperationsHelper.getMatrix(table);
-        if (targetColumnsCount > anchorCellColumns) {
-            const columnsToAdd = targetColumnsCount - anchorCellColumns;
-            TableOperationsHelper.splitGridColumns(table, matrix, rowIndex, columnIndex, anchorCellRows, anchorCellColumns, columnsToAdd);
-            anchorCellColumns = targetColumnsCount;
+        for (let i = 0; i < table.rows[rowIndex].cells.length; i++) {
+            if (i >= cellIndex && i < cellIndex + targetColumnsCount) {
+                continue;
+            }
+            table.rows[rowIndex].cells[i].verticalMerge ??= VerticalMerge.Restart;
+        }
+        for (let i = 1; i < targetRowsCount; i++) {
+            const cells = table.rows[rowIndex].cells.map(x => {
+                const result = TableOperationsHelper.createEmptyCell(x.width);
+                result.horizontalMerge = x.horizontalMerge;
+                result.verticalMerge = x.verticalMerge ? VerticalMerge.Merge : null;
+                result.borders = x.borders;
+                result.backgroundColor = x.backgroundColor;
+                return result;
+            });
+            const row = new RowModel({
+                cellSpacing: table.rows[rowIndex].cellSpacing,
+                height: table.rows[rowIndex].height,
+                hRule: table.rows[rowIndex].hRule,
+                cells: cells
+            });
+            table.rows.splice(rowIndex + i, 0, row);
         }
-        matrix = TableOperationsHelper.getMatrix(table);
-        if (targetRowsCount > anchorCellRows) {
-            const rowsToAdd = targetRowsCount - anchorCellRows;
-            TableOperationsHelper.splitGridRows(table, matrix, rowIndex, columnIndex, anchorCellRows, anchorCellColumns, rowsToAdd);
+    }
+    static restoreTableSplitCells(document, insertIndex, rowIndex, rowCount, columnIndex, columnCount, cells, columns) {
+        const table = document.tables.find(x => x.insertIndex === insertIndex);
+        const cellIndex = TableOperationsHelper.getCellIndex(columnIndex, table.rows[rowIndex].cells);
+        let count = 0;
+        for (let i = 0; i < columnCount; i++) {
+            count += table.rows[rowIndex].cells[cellIndex + i].horizontalMerge ?? 1;
+        }
+        table.columns.splice(columnIndex, count);
+        table.columns.splice(columnIndex, 0, ...columns.map(x => new ColumnModel(x)));
+        if (rowCount > 1 && !cells[rowIndex][0].verticalMerge) {
+            table.rows.splice(rowIndex + 1, rowCount - 1);
+        }
+        if (columnCount > 1) {
+            table.rows[rowIndex].cells.splice(cellIndex + 1, columnCount - 1);
+            for (let i = rowIndex + 1; i < table.rows.length; i++) {
+                const index = TableOperationsHelper.getCellIndex(columnIndex, table.rows[i].cells);
+                if (cells[i][0].verticalMerge != VerticalMerge.Merge) {
+                    break;
+                }
+                table.rows[i].cells.splice(index + 1, columnCount - 1);
+            }
+        }
+        for (let i = 0; i < cells.length; i++) {
+            const index = TableOperationsHelper.getCellIndex(columnIndex, table.rows[i].cells);
+            for (let j = 0; j < cells[i].length; j++) {
+                table.rows[i].cells[index + j].verticalMerge = cells[i][j].verticalMerge;
+                table.rows[i].cells[index + j].horizontalMerge = cells[i][j].horizontalMerge;
+                table.rows[i].cells[index + j].width = cells[i][j].width;
+            }
         }
     }
     static removeTableRows(document, insertIndex, startIndex, endIndex) {
@@ -10139,15 +10297,47 @@ class EditSession {
         OperationsHelper.insertTableColumns(this.model, insertIndex, columnsCount, targetIndex, inheritIndex, pageFormat.contentWidth);
         table.instance.updateTable();
     }
-    mergeTableCells(insertIndex, rowStartIndex, rowsCount, columnStartIndex, columnsCount) {
-        const table = this.customComponents.tables.find(x => x.instance.insertIndex === insertIndex);
-        OperationsHelper.mergeTableCells(this.model, insertIndex, rowStartIndex, rowsCount, columnStartIndex, columnsCount);
-        table.instance.updateTable();
+    mergeCells(insertIndex, rowIndex, rowCount, columnIndex, columnCount) {
+        const tableComponent = this.customComponents.tables.find(x => x.instance.insertIndex === insertIndex).instance;
+        return this.mergeTableCells(tableComponent, insertIndex, rowIndex, rowCount, columnIndex, columnCount);
+    }
+    mergeTableCells(tableComponent, insertIndex, rowIndex, rowCount, columnIndex, columnCount) {
+        OperationsHelper.mergeTableCells(this.model, insertIndex, rowIndex, rowCount, columnIndex, columnCount);
+        tableComponent.updateTable();
+        const paragraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, insertIndex).row;
+        this.displayData.updateNextLineIndexes(paragraph, paragraph);
+        this.selection.placeCursor(new CursorParagraph(0, 0));
+        return tableComponent.getCellSession(rowIndex, columnIndex);
+    }
+    restoreCells(insertIndex, rowIndex, columnIndex, cells) {
+        const tableComponent = this.customComponents.tables.find(x => x.instance.insertIndex === insertIndex).instance;
+        OperationsHelper.restoreTableCells(this.model, insertIndex, rowIndex, columnIndex, cells);
+        tableComponent.updateTable();
+        const paragraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, insertIndex).row;
+        this.displayData.updateNextLineIndexes(paragraph, paragraph);
+        const position = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, insertIndex);
+        this.selection.placeCursor(position);
+        return tableComponent.getCellSession(rowIndex, columnIndex);
     }
     splitTableCells(insertIndex, rowIndex, columnIndex, targetRowsCount, targetColumnsCount) {
-        const table = this.customComponents.tables.find(x => x.instance.insertIndex === insertIndex);
+        const tableComponent = this.customComponents.tables.find(x => x.instance.insertIndex === insertIndex).instance;
         OperationsHelper.splitTableCells(this.model, insertIndex, rowIndex, columnIndex, targetRowsCount, targetColumnsCount);
-        table.instance.updateTable();
+        tableComponent.updateTable();
+        const paragraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, insertIndex).row;
+        this.displayData.updateNextLineIndexes(paragraph, paragraph);
+        const position = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, insertIndex);
+        this.selection.placeCursor(position);
+        return tableComponent.getCellSession(rowIndex, columnIndex);
+    }
+    restoreSplitCells(insertIndex, rowIndex, rowCount, columnIndex, columnCount, cells, columns) {
+        const tableComponent = this.customComponents.tables.find(x => x.instance.insertIndex === insertIndex).instance;
+        OperationsHelper.restoreTableSplitCells(this.model, insertIndex, rowIndex, rowCount, columnIndex, columnCount, cells, columns);
+        tableComponent.updateTable();
+        const paragraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, insertIndex).row;
+        this.displayData.updateNextLineIndexes(paragraph, paragraph);
+        const position = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, insertIndex);
+        this.selection.placeCursor(position);
+        return tableComponent.getCellSession(rowIndex, columnIndex);
     }
     removeTableRows(insertIndex, startIndex, endIndex) {
         const table = this.customComponents.tables.find(x => x.instance.insertIndex === insertIndex);
@@ -12797,6 +12987,7 @@ class NoderTableCellComponent {
         });
         this.cellSession = this.regulatorService.addCellSession(marginModel, this, this.elementRef.nativeElement);
         this.sessionId = this.cellSession.sessionId;
+        this.elementRef.nativeElement.setAttribute('data-session-id', this.sessionId.toString());
         this.addEventListeners();
     }
     getCellContentHeight() {
@@ -12817,7 +13008,7 @@ class NoderTableCellComponent {
         this.session.displayData.addEventListener('pagesCountChanged', this.pagesCountChangedHandler);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTableCellComponent, deps: [{ token: EditorService }, { token: RegulatorService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTableCellComponent, isStandalone: false, selector: "app-nod-table-cell", inputs: { table: "table", cell: "cell", rowIndex: "rowIndex", cellIndex: "cellIndex", columnIndex: "columnIndex", width: "width", parentSessionId: "parentSessionId", generalProperties: "generalProperties", heightChanged: "heightChanged", startResizing: "startResizing" }, host: { properties: { "class.highlighted": "this.isHighlighted", "attr.data-session-id": "this.sessionId" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div\n    *ngIf=\"cellIndex === 0\"\n    class=\"resizer left-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Left)\"></div>\n<div\n    #container\n    class=\"edit-container\"></div>\n<div class=\"highlight-container\"></div>\n<div\n    class=\"resizer right-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Right)\"></div>\n", styles: [".highlight-container{visibility:hidden;position:absolute;width:100%;height:100%;background-color:#5ea8f766;pointer-events:none;overflow:hidden}:host{display:flex;position:relative;min-height:19px;height:100%;background:transparent}:host.highlighted .highlight-container{visibility:visible}.edit-container{min-height:1px;overflow:hidden}.left-border{left:-6px}.resizer{cursor:col-resize;width:11px;height:100%;position:absolute;z-index:1}.right-border{right:-6px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTableCellComponent, isStandalone: false, selector: "app-nod-table-cell", inputs: { table: "table", cell: "cell", rowIndex: "rowIndex", cellIndex: "cellIndex", columnIndex: "columnIndex", width: "width", parentSessionId: "parentSessionId", generalProperties: "generalProperties", heightChanged: "heightChanged", startResizing: "startResizing" }, host: { properties: { "class.highlighted": "this.isHighlighted" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div\n    *ngIf=\"cellIndex === 0\"\n    class=\"resizer left-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Left)\"></div>\n<div\n    #container\n    class=\"edit-container\"></div>\n<div class=\"highlight-container\"></div>\n<div\n    class=\"resizer right-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Right)\"></div>\n", styles: [".highlight-container{visibility:hidden;position:absolute;width:100%;height:100%;background-color:#5ea8f766;pointer-events:none;overflow:hidden}:host{display:flex;position:relative;min-height:19px;height:100%;background:transparent}:host.highlighted .highlight-container{visibility:visible}.edit-container{min-height:1px;overflow:hidden}.left-border{left:-6px}.resizer{cursor:col-resize;width:11px;height:100%;position:absolute;z-index:1}.right-border{right:-6px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTableCellComponent, decorators: [{
             type: Component,
@@ -12845,9 +13036,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }], isHighlighted: [{
                 type: HostBinding,
                 args: ['class.highlighted']
-            }], sessionId: [{
-                type: HostBinding,
-                args: ['attr.data-session-id']
             }], container: [{
                 type: ViewChild,
                 args: ['container', { static: true }]
@@ -12954,10 +13142,20 @@ class TableCellHelper {
 }
 
 class SplitCellDialogComponent {
-    constructor() {
-        this.dialogRef = inject((MatDialogRef));
+    constructor(data, dialogRef) {
+        this.dialogRef = dialogRef;
         this.columns = signal(2);
         this.rows = signal(1);
+        this.rowsControl = new FormControl(1);
+        if (data.verticalMerge > 1) {
+            this.availableRows = [];
+            for (let i = 1; i <= data.verticalMerge / 2; i++) {
+                if (data.verticalMerge % i === 0) {
+                    this.availableRows.push(i);
+                }
+            }
+            this.availableRows.push(data.verticalMerge);
+        }
     }
     onApply() {
         const columns = this.columns();
@@ -12967,13 +13165,16 @@ class SplitCellDialogComponent {
     onCancel() {
         this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SplitCellDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SplitCellDialogComponent, isStandalone: true, selector: "app-nod-split-cell-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{ 'NODER.LABEL.SPLIT_CELLS' | translate }}</h2>\n\n<mat-dialog-content>\n    <div class=\"split-dialog-container\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.NUMBER_OF_COLUMNS' | translate }}</mat-label>\n            <input\n                matInput\n                type=\"number\"\n                min=\"1\"\n                [(ngModel)]=\"columns\" />\n        </mat-form-field>\n\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.NUMBER_OF_ROWS' | translate }}</mat-label>\n            <input\n                matInput\n                type=\"number\"\n                min=\"1\"\n                [(ngModel)]=\"rows\" />\n        </mat-form-field>\n    </div>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button\n        mat-button\n        (click)=\"onCancel()\">\n        {{ 'NODER.LABEL.CANCEL' | translate }}\n    </button>\n    <button\n        mat-flat-button\n        color=\"primary\"\n        (click)=\"onApply()\"\n        [disabled]=\"columns() < 1 || rows() < 1\">\n        {{ 'NODER.LABEL.APPLY' | translate }}\n    </button>\n</mat-dialog-actions>\n", styles: [".split-dialog-container{display:flex;flex-direction:column;gap:16px;margin-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SplitCellDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SplitCellDialogComponent, isStandalone: true, selector: "app-nod-split-cell-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{ 'NODER.LABEL.SPLIT_CELLS' | translate }}</h2>\n\n<mat-dialog-content>\n    <div class=\"split-dialog-container\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.NUMBER_OF_COLUMNS' | translate }}</mat-label>\n            <input\n                matInput\n                type=\"number\"\n                min=\"1\"\n                [(ngModel)]=\"columns\" />\n        </mat-form-field>\n\n        @if (!availableRows) {\n            <mat-form-field appearance=\"outline\">\n                <mat-label>{{ 'NODER.LABEL.NUMBER_OF_ROWS' | translate }}</mat-label>\n                <input\n                    matInput\n                    type=\"number\"\n                    min=\"1\"\n                    [(ngModel)]=\"rows\" />\n            </mat-form-field>\n        } @else {\n            <mat-form-field appearance=\"outline\">\n                <mat-label>{{ 'NODER.LABEL.NUMBER_OF_ROWS' | translate }}</mat-label>\n                <mat-select [(value)]=\"rows\">\n                    @for (row of availableRows; track row) {\n                        <mat-option [value]=\"row\">{{ row }}</mat-option>\n                    }\n                </mat-select>\n            </mat-form-field>\n        }\n    </div>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button\n        mat-button\n        (click)=\"onCancel()\">\n        {{ 'NODER.LABEL.CANCEL' | translate }}\n    </button>\n    <button\n        mat-flat-button\n        color=\"primary\"\n        (click)=\"onApply()\"\n        [disabled]=\"columns() < 1 || rows() < 1\">\n        {{ 'NODER.LABEL.APPLY' | translate }}\n    </button>\n</mat-dialog-actions>\n", styles: [".split-dialog-container{display:flex;flex-direction:column;gap:16px;margin-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SplitCellDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nod-split-cell-dialog', standalone: true, imports: [MatDialogModule, MatButtonModule, MatInputModule, FormsModule, TranslateModule], template: "<h2 mat-dialog-title>{{ 'NODER.LABEL.SPLIT_CELLS' | translate }}</h2>\n\n<mat-dialog-content>\n    <div class=\"split-dialog-container\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.NUMBER_OF_COLUMNS' | translate }}</mat-label>\n            <input\n                matInput\n                type=\"number\"\n                min=\"1\"\n                [(ngModel)]=\"columns\" />\n        </mat-form-field>\n\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.NUMBER_OF_ROWS' | translate }}</mat-label>\n            <input\n                matInput\n                type=\"number\"\n                min=\"1\"\n                [(ngModel)]=\"rows\" />\n        </mat-form-field>\n    </div>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button\n        mat-button\n        (click)=\"onCancel()\">\n        {{ 'NODER.LABEL.CANCEL' | translate }}\n    </button>\n    <button\n        mat-flat-button\n        color=\"primary\"\n        (click)=\"onApply()\"\n        [disabled]=\"columns() < 1 || rows() < 1\">\n        {{ 'NODER.LABEL.APPLY' | translate }}\n    </button>\n</mat-dialog-actions>\n", styles: [".split-dialog-container{display:flex;flex-direction:column;gap:16px;margin-top:4px}\n"] }]
-        }] });
+            args: [{ selector: 'app-nod-split-cell-dialog', standalone: true, imports: [MatDialogModule, MatButtonModule, MatInputModule, MatSelectModule, FormsModule, TranslateModule], template: "<h2 mat-dialog-title>{{ 'NODER.LABEL.SPLIT_CELLS' | translate }}</h2>\n\n<mat-dialog-content>\n    <div class=\"split-dialog-container\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.NUMBER_OF_COLUMNS' | translate }}</mat-label>\n            <input\n                matInput\n                type=\"number\"\n                min=\"1\"\n                [(ngModel)]=\"columns\" />\n        </mat-form-field>\n\n        @if (!availableRows) {\n            <mat-form-field appearance=\"outline\">\n                <mat-label>{{ 'NODER.LABEL.NUMBER_OF_ROWS' | translate }}</mat-label>\n                <input\n                    matInput\n                    type=\"number\"\n                    min=\"1\"\n                    [(ngModel)]=\"rows\" />\n            </mat-form-field>\n        } @else {\n            <mat-form-field appearance=\"outline\">\n                <mat-label>{{ 'NODER.LABEL.NUMBER_OF_ROWS' | translate }}</mat-label>\n                <mat-select [(value)]=\"rows\">\n                    @for (row of availableRows; track row) {\n                        <mat-option [value]=\"row\">{{ row }}</mat-option>\n                    }\n                </mat-select>\n            </mat-form-field>\n        }\n    </div>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button\n        mat-button\n        (click)=\"onCancel()\">\n        {{ 'NODER.LABEL.CANCEL' | translate }}\n    </button>\n    <button\n        mat-flat-button\n        color=\"primary\"\n        (click)=\"onApply()\"\n        [disabled]=\"columns() < 1 || rows() < 1\">\n        {{ 'NODER.LABEL.APPLY' | translate }}\n    </button>\n</mat-dialog-actions>\n", styles: [".split-dialog-container{display:flex;flex-direction:column;gap:16px;margin-top:4px}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$1.MatDialogRef }] });
 
 class TableOverlayMenuComponent {
     constructor(editorService, overlayService, translateService, dialog) {
@@ -13027,14 +13228,16 @@ class TableOverlayMenuComponent {
         this.overlayService.close();
     }
     onMergeCells() {
-        this.editorService.mergeTableCells(this.tableInsertIndex, this.targets.rowIndexes.startIndex, this.targets.rowIndexes.endIndex, this.targets.cellIndexes.startIndex, this.targets.cellIndexes.endIndex, this.sessionId);
+        this.editorService.mergeTableCells(this.tableInsertIndex, this.targets.rowIndexes.startIndex, this.targets.rowIndexes.endIndex - this.targets.rowIndexes.startIndex, this.targets.cellIndexes.startIndex, this.targets.cellIndexes.endIndex - this.targets.cellIndexes.startIndex, this.sessionId);
         this.overlayService.close();
     }
     onSplitCells() {
         this.overlayService.close();
         const dialogRef = this.dialog.open(SplitCellDialogComponent, {
             width: '320px',
-            disableClose: true
+            panelClass: 'noder-modal',
+            disableClose: true,
+            data: { verticalMerge: this.verticalMerge }
         });
         dialogRef
             .afterClosed()
@@ -13056,7 +13259,7 @@ class TableOverlayMenuComponent {
         this.overlayService.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableOverlayMenuComponent, deps: [{ token: EditorService }, { token: OverlayService }, { token: i6.TranslateService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: TableOverlayMenuComponent, isStandalone: false, selector: "app-nod-table-overlay-menu", inputs: { selectionRange: "selectionRange", targets: "targets", canRemoveRows: "canRemoveRows", canRemoveColumns: "canRemoveColumns", canMergeCells: "canMergeCells", canSplitCells: "canSplitCells", tableInsertIndex: "tableInsertIndex", sessionId: "sessionId" }, ngImport: i0, template: "<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsAbove()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsAboveMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsBelow()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsBelowMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsLeft()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsLeftMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsRight()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsRightMessage }}\n</div>\n@if (canSplitCells || canMergeCells) {\n    <div class=\"menu-separator\">\n        <div class=\"menu-separator-top\"></div>\n        <div class=\"menu-separator-bottom\"></div>\n    </div>\n    @if (canMergeCells) {\n        <div\n            class=\"menu-item\"\n            (click)=\"onMergeCells()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-merge-cells\"></mat-icon>\n            {{ 'NODER.LABEL.MERGE_CELLS' | translate }}\n        </div>\n    } @else if (canSplitCells) {\n        <div\n            class=\"menu-item\"\n            (click)=\"onSplitCells()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-split-cells\"></mat-icon>\n            {{ 'NODER.LABEL.SPLIT_CELLS' | translate }}\n        </div>\n    }\n}\n@if (canRemoveRows || canRemoveColumns) {\n    <div class=\"menu-separator\">\n        <div class=\"menu-separator-top\"></div>\n        <div class=\"menu-separator-bottom\"></div>\n    </div>\n    @if (canRemoveRows) {\n        <div\n            class=\"menu-item\"\n            (click)=\"onRemoveRows()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-delete\"></mat-icon>\n            {{ removeMessages.removeRowsMessage }}\n        </div>\n    }\n    @if (canRemoveColumns) {\n        <div\n            class=\"menu-item\"\n            (click)=\"onRemoveColumns()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-delete\"></mat-icon>\n            {{ removeMessages.removeColumnsMessage }}\n        </div>\n    }\n    <div\n        class=\"menu-item\"\n        (click)=\"onRemoveTable()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeTableMessage }}\n    </div>\n}\n", styles: [":host{position:absolute;border:1px solid transparent;border-radius:4px;box-shadow:0 2px 6px 2px #3c404326;overflow-y:auto;background:#fff;cursor:default;font-size:13px;margin:0;padding:6px 0}.menu-item{display:flex;flex-direction:row;align-items:center;cursor:pointer;min-height:20px;color:#202124;font-size:16px;letter-spacing:.2px;line-height:20px;padding:6px}.menu-item:hover{background-color:#0000001a}.mat-icon{margin-right:6px;width:20px;height:20px;font-size:20px}.menu-separator{-webkit-user-select:none;user-select:none}.menu-separator .menu-separator-top{padding:4px}.menu-separator .menu-separator-bottom{border-top:1px solid #dadce0;padding:4px}\n"], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: TableOverlayMenuComponent, isStandalone: false, selector: "app-nod-table-overlay-menu", inputs: { selectionRange: "selectionRange", targets: "targets", canRemoveRows: "canRemoveRows", canRemoveColumns: "canRemoveColumns", canMergeCells: "canMergeCells", canSplitCells: "canSplitCells", verticalMerge: "verticalMerge", tableInsertIndex: "tableInsertIndex", sessionId: "sessionId" }, ngImport: i0, template: "<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsAbove()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsAboveMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsBelow()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsBelowMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsLeft()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsLeftMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsRight()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsRightMessage }}\n</div>\n@if (canSplitCells || canMergeCells) {\n    <div class=\"menu-separator\">\n        <div class=\"menu-separator-top\"></div>\n        <div class=\"menu-separator-bottom\"></div>\n    </div>\n    @if (canMergeCells) {\n        <div\n            class=\"menu-item\"\n            (click)=\"onMergeCells()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-merge-cells\"></mat-icon>\n            {{ 'NODER.LABEL.MERGE_CELLS' | translate }}\n        </div>\n    } @else if (canSplitCells) {\n        <div\n            class=\"menu-item\"\n            (click)=\"onSplitCells()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-split-cells\"></mat-icon>\n            {{ 'NODER.LABEL.SPLIT_CELLS' | translate }}\n        </div>\n    }\n}\n@if (canRemoveRows || canRemoveColumns) {\n    <div class=\"menu-separator\">\n        <div class=\"menu-separator-top\"></div>\n        <div class=\"menu-separator-bottom\"></div>\n    </div>\n    @if (canRemoveRows) {\n        <div\n            class=\"menu-item\"\n            (click)=\"onRemoveRows()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-delete\"></mat-icon>\n            {{ removeMessages.removeRowsMessage }}\n        </div>\n    }\n    @if (canRemoveColumns) {\n        <div\n            class=\"menu-item\"\n            (click)=\"onRemoveColumns()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-delete\"></mat-icon>\n            {{ removeMessages.removeColumnsMessage }}\n        </div>\n    }\n    <div\n        class=\"menu-item\"\n        (click)=\"onRemoveTable()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeTableMessage }}\n    </div>\n}\n", styles: [":host{position:absolute;border:1px solid transparent;border-radius:4px;box-shadow:0 2px 6px 2px #3c404326;overflow-y:auto;background:#fff;cursor:default;font-size:13px;margin:0;padding:6px 0}.menu-item{display:flex;flex-direction:row;align-items:center;cursor:pointer;min-height:20px;color:#202124;font-size:16px;letter-spacing:.2px;line-height:20px;padding:6px}.menu-item:hover{background-color:#0000001a}.mat-icon{margin-right:6px;width:20px;height:20px;font-size:20px}.menu-separator{-webkit-user-select:none;user-select:none}.menu-separator .menu-separator-top{padding:4px}.menu-separator .menu-separator-bottom{border-top:1px solid #dadce0;padding:4px}\n"], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableOverlayMenuComponent, decorators: [{
             type: Component,
@@ -13073,6 +13276,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Input
             }], canSplitCells: [{
                 type: Input
+            }], verticalMerge: [{
+                type: Input
             }], tableInsertIndex: [{
                 type: Input
             }], sessionId: [{
@@ -13124,7 +13329,11 @@ class TableSelection {
             const selectedColumnsCount = targets.cellIndexes.endIndex - targets.cellIndexes.startIndex;
             const canRemoveRows = selectedRowsCount < this.rowMatrix.length;
             const canRemoveColumns = selectedColumnsCount < this.rowMatrix[0].cells.length;
+            const cellIndex = selectionRange.cellIndexes.startIndex;
+            const rowIndex = selectionRange.rowIndexes.startIndex;
+            const verticalMerge = TableOperationsHelper.getVerticalMerge(cellIndex, rowIndex, this.table.rows) + 1;
             const data = {
+                verticalMerge,
                 selectionRange,
                 targets,
                 canRemoveRows,
@@ -14444,6 +14653,22 @@ class RestorePageFormatsModel {
     }
 }
 
+class RestoreTableCellsModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class RestoreTableSplitCellsModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class RestoreWithParagraphModel {
     constructor(fields) {
         if (fields) {
@@ -14458,6 +14683,14 @@ class RestoreWithParagraphModel {
     }
 }
 
+class SplitTableCellsModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class CommandModel {
     constructor(fields) {
         if (fields) {
@@ -14587,6 +14820,12 @@ class CommandModel {
             if (fields.restoreParagraphStyles) {
                 fields.restoreParagraphStyles = new RestoreParagraphStylesModel(fields.restoreParagraphStyles);
             }
+            if (fields.restoreTableCells) {
+                fields.restoreTableCells = new RestoreTableCellsModel(fields.restoreTableCells);
+            }
+            if (fields.restoreTableSplitCells) {
+                fields.restoreTableSplitCells = new RestoreTableSplitCellsModel(fields.restoreTableSplitCells);
+            }
             if (fields.restoreTextStyles) {
                 fields.restoreTextStyles = new RestoreTextStylesModel(fields.restoreTextStyles);
             }
@@ -14670,14 +14909,18 @@ class SaveCommandsHelper {
         const insertTableColumns = new InsertTableColumnsModel({ count: columnsCount, inheritIndex, insertIndex, targetIndex });
         return new CommandModel({ commandType: CommandType.InsertTableColumns, insertTableColumns, targets });
     }
-    static getMergeTableCellsCommand(insertIndex, rowStartIndex, rowsCount, columnStartIndex, columnCount, targets) {
-        const mergeTableCells = new MergeTableCellsModel({ insertIndex, rowStartIndex, rowsCount, columnStartIndex, columnCount });
+    static getMergeTableCellsCommand(mergeTableCells, targets) {
         return new CommandModel({ commandType: CommandType.MergeTableCells, mergeTableCells, targets });
     }
-    static getSplitTableCellsCommand(insertIndex, rowIndex, columnIndex, targetRowsCount, targetColumnsCount, targets) {
-        const splitTableCells = new SplitTableCellsModel({ insertIndex, rowIndex, columnIndex, targetRowsCount, targetColumnsCount });
+    static getRestoreTableCellsCommand(restoreTableCells, targets) {
+        return new CommandModel({ commandType: CommandType.RestoreTableCells, restoreTableCells, targets });
+    }
+    static getSplitTableCellsCommand(splitTableCells, targets) {
         return new CommandModel({ commandType: CommandType.SplitTableCells, splitTableCells, targets });
     }
+    static getRestoreTableSplitCellsCommand(restoreTableSplitCells, targets) {
+        return new CommandModel({ commandType: CommandType.RestoreTableSplitCells, restoreTableSplitCells, targets });
+    }
     static getInsertTableRowsCommand(rowsCount, inheritIndex, insertIndex, targetIndex, targets) {
         const insertTableRows = new InsertTableRowsModel({ count: rowsCount, inheritIndex, insertIndex, targetIndex });
         return new CommandModel({ commandType: CommandType.InsertTableRows, insertTableRows, targets });
@@ -16356,14 +16599,28 @@ class Editor {
             command = SaveCommandsHelper.getReplaceByContentsModel(operation, this.targets);
         }
         else if (operation instanceof MergeTableCellsModel) {
-            this.session.mergeTableCells(operation.insertIndex, operation.rowStartIndex, operation.rowsCount, operation.columnStartIndex, operation.columnCount);
-            this.changedTableSize(operation.insertIndex, this.session.sessionId);
-            command = SaveCommandsHelper.getMergeTableCellsCommand(operation.insertIndex, operation.rowStartIndex, operation.rowsCount, operation.columnStartIndex, operation.columnCount, this.targets);
+            command = SaveCommandsHelper.getMergeTableCellsCommand(operation, this.targets);
+            const x = operation;
+            const session = this.session.mergeCells(x.insertIndex, x.rowStartIndex, x.rowsCount, x.columnStartIndex, x.columnCount);
+            this.regulatorService.setCurrentSessionById(session.sessionId);
+            this.focus();
+        }
+        else if (operation instanceof RestoreTableCellsModel) {
+            command = SaveCommandsHelper.getRestoreTableCellsCommand(operation, this.targets);
+            const session = this.session.restoreCells(operation.insertIndex, operation.rowIndex, operation.columnIndex, operation.cells);
+            this.regulatorService.setCurrentSessionById(session.sessionId);
+        }
+        else if (operation instanceof RestoreTableSplitCellsModel) {
+            command = SaveCommandsHelper.getRestoreTableSplitCellsCommand(operation, this.targets);
+            const session = this.session.restoreSplitCells(operation.insertIndex, operation.rowIndex, operation.rowCount, operation.columnIndex, operation.columnCount, operation.cells, operation.columns);
+            this.regulatorService.setCurrentSessionById(session.sessionId);
         }
         else if (operation instanceof SplitTableCellsModel) {
-            this.session.splitTableCells(operation.insertIndex, operation.rowIndex, operation.columnIndex, operation.targetRowsCount, operation.targetColumnsCount);
-            this.changedTableSize(operation.insertIndex, this.session.sessionId);
-            command = SaveCommandsHelper.getSplitTableCellsCommand(operation.insertIndex, operation.rowIndex, operation.columnIndex, operation.targetRowsCount, operation.targetColumnsCount, this.targets);
+            command = SaveCommandsHelper.getSplitTableCellsCommand(operation, this.targets);
+            const x = operation;
+            const session = this.session.splitTableCells(x.insertIndex, x.rowIndex, x.columnIndex, x.targetRowsCount, x.targetColumnsCount);
+            this.regulatorService.setCurrentSessionById(session.sessionId);
+            this.focus();
         }
         else {
             throw new Error('Undo/redo is not implemented for the Operation');
@@ -16434,6 +16691,26 @@ class Editor {
         this.history.pushApplyTableCellsStyles(table, model, targets);
         this.commandsService.createCommand(SaveCommandsHelper.getApplyTableCellsStylesCommand(model, targets));
     }
+    saveMergeTableCellsToHistory(table, redo, targets) {
+        const rowIndex = redo.rowStartIndex;
+        const columnIndex = redo.columnStartIndex;
+        const cells = TableOperationsHelper.sliceCells(table.rows, rowIndex, redo.rowsCount, columnIndex, redo.columnCount);
+        const undo = new RestoreTableCellsModel({ insertIndex: table.insertIndex, rowIndex, columnIndex, cells });
+        this.history.pushMergeTableCells(undo, redo);
+        this.commandsService.createCommand(SaveCommandsHelper.getMergeTableCellsCommand(redo, targets));
+    }
+    saveSplitTableCellsToHistory(table, redo, targets) {
+        const insertIndex = table.insertIndex;
+        const rowIndex = redo.rowIndex;
+        const rowCount = redo.targetRowsCount;
+        const columnIndex = redo.columnIndex;
+        const columnCount = redo.targetColumnsCount;
+        const columns = TableOperationsHelper.sliceColumns(table, rowIndex, columnIndex);
+        const cells = TableOperationsHelper.sliceSplitCells(table.rows, rowIndex, columnIndex);
+        const undo = new RestoreTableSplitCellsModel({ insertIndex, rowIndex, rowCount, columnIndex, columnCount, cells, columns });
+        this.history.pushSplitTableCells(undo, redo);
+        this.commandsService.createCommand(SaveCommandsHelper.getSplitTableCellsCommand(redo, 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);
@@ -17244,26 +17521,26 @@ class Editor {
         this.changedTableSize(insertIndex, sessionId);
         this.onContentChange();
     }
-    mergeTableCells(insertIndex, rowStartIndex, rowEndIndex, columnStartIndex, columnEndIndex, sessionId) {
+    mergeTableCells(insertIndex, rowStartIndex, rowsCount, columnStartIndex, columnCount, sessionId) {
         this.regulatorService.setCustomSessionAsCurrent(sessionId);
-        const beforeTable = ContentHelper.documentIndexToParagraphIndex(this.session.displayData.paragraphs, insertIndex);
-        this.selection.placeCursor(beforeTable);
-        const rowsCount = rowEndIndex - rowStartIndex;
-        const columnsCount = columnEndIndex - columnStartIndex;
-        this.history.pushMergeTableCells(insertIndex, rowStartIndex, rowsCount, columnStartIndex, columnsCount);
-        this.commandsService.createCommand(SaveCommandsHelper.getMergeTableCellsCommand(insertIndex, rowStartIndex, rowsCount, columnStartIndex, columnsCount, this.targets));
-        this.session.mergeTableCells(insertIndex, rowStartIndex, rowsCount, columnStartIndex, columnsCount);
-        this.changedTableSize(insertIndex, sessionId);
+        const table = this.session.customComponents.tables.find(x => x.instance.insertIndex === insertIndex).instance;
+        const model = new MergeTableCellsModel({ insertIndex, rowStartIndex, rowsCount, columnStartIndex, columnCount });
+        this.saveMergeTableCellsToHistory(table.table, model, this.targets);
+        const session = this.session.mergeTableCells(table, insertIndex, rowStartIndex, rowsCount, columnStartIndex, columnCount);
+        this.regulatorService.setCurrentSessionById(session.sessionId);
+        this.onSelectionChange();
+        this.focus();
         this.onContentChange();
     }
     splitTableCells(insertIndex, rowIndex, columnIndex, targetRowsCount, targetColumnsCount, sessionId) {
         this.regulatorService.setCustomSessionAsCurrent(sessionId);
-        const beforeTable = ContentHelper.documentIndexToParagraphIndex(this.session.displayData.paragraphs, insertIndex);
-        this.selection.placeCursor(beforeTable);
-        this.history.pushSplitTableCells(insertIndex, rowIndex, columnIndex, targetRowsCount, targetColumnsCount);
-        this.commandsService.createCommand(SaveCommandsHelper.getSplitTableCellsCommand(insertIndex, rowIndex, columnIndex, targetRowsCount, targetColumnsCount, this.targets));
-        this.session.splitTableCells(insertIndex, rowIndex, columnIndex, targetRowsCount, targetColumnsCount);
-        this.changedTableSize(insertIndex, sessionId);
+        const table = this.session.customComponents.tables.find(x => x.instance.insertIndex === insertIndex).instance;
+        const model = new SplitTableCellsModel({ insertIndex, rowIndex, targetRowsCount, columnIndex, targetColumnsCount });
+        this.saveSplitTableCellsToHistory(table.table, model, this.targets);
+        const session = this.session.splitTableCells(insertIndex, rowIndex, columnIndex, targetRowsCount, targetColumnsCount);
+        this.regulatorService.setCurrentSessionById(session.sessionId);
+        this.onSelectionChange();
+        this.focus();
         this.onContentChange();
     }
     removeTableRows(insertIndex, startIndex, endIndex, sessionId) {
@@ -17563,7 +17840,7 @@ class Editor {
     }
     mergeTableCellsSubscription() {
         return this.editorService.mergeTableCells$.subscribe(data => {
-            this.mergeTableCells(data.insertIndex, data.rowStartIndex, data.rowEndIndex, data.columnStartIndex, data.columnEndIndex, data.sessionId);
+            this.mergeTableCells(data.insertIndex, data.rowIndex, data.rowCount, data.columnIndex, data.columnCount, data.sessionId);
         });
     }
     splitTableCellsSubscription() {
@@ -17988,7 +18265,7 @@ class TabSettingsDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TabSettingsDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: TabSettingsDialogComponent, isStandalone: true, selector: "app-nod-tab-settings-dialog", host: { properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<div class=\"columns\">\n    <span class=\"position\">{{ 'NODER.LABEL.POSITION' | translate }}</span>\n    <span class=\"alignment\">{{ 'NODER.LABEL.ALIGNMENT' | translate }}</span>\n</div>\n<form\n    [formGroup]=\"form\"\n    class=\"form\">\n    <div\n        class=\"tabs\"\n        formArrayName=\"tabs\">\n        @for (tabCtrl of tabsArray().controls; let i = $index; track i) {\n            <div\n                class=\"item\"\n                [formGroupName]=\"i\">\n                <div class=\"tab\">\n                    <mat-form-field class=\"position\">\n                        <input\n                            matInput\n                            type=\"number\"\n                            formControlName=\"position\" />\n                    </mat-form-field>\n                    <mat-form-field class=\"alignment\">\n                        <mat-select formControlName=\"alignment\">\n                            @for (alignment of alignments; track alignment) {\n                                <mat-option [value]=\"alignment.type\">\n                                    {{ alignment.title | translate }}\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                    <button\n                        id=\"tab-setting-dialog-delete-btn\"\n                        mat-icon-button\n                        type=\"button\"\n                        (click)=\"onRemove(i)\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-delete\"></mat-icon>\n                    </button>\n                </div>\n            </div>\n        }\n    </div>\n</form>\n<div class=\"tab-actions\">\n    <button\n        id=\"tab-setting-dialog-add-btn\"\n        mat-stroked-button\n        (click)=\"onAddTab()\">\n        {{ 'NODER.LABEL.ADD' | translate }}\n    </button>\n    <button\n        id=\"tab-setting-dialog-clear-all-btn\"\n        mat-stroked-button\n        (click)=\"tabsArray().clear()\">\n        {{ 'NODER.LABEL.CLEAR_ALL' | translate }}\n    </button>\n</div>\n<div class=\"actions\">\n    <button\n        id=\"tab-setting-dialog-cancel-btn\"\n        mat-stroked-button\n        (click)=\"onClose()\">\n        {{ 'NODER.LABEL.CANCEL' | translate }}\n    </button>\n    <button\n        id=\"tab-setting-dialog-ok-btn\"\n        mat-stroked-button\n        (click)=\"onSave()\">\n        {{ 'NODER.LABEL.SAVE' | translate }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:550px;width:360px;padding:20px 0 20px 20px;gap:20px}.tabs{flex:1;overflow:hidden auto;display:flex;flex-direction:column}.form{height:350px;display:flex}.item{display:flex}.tab{display:flex;flex:1;gap:20px}.mat-mdc-form-field{width:120px}.columns{display:flex;gap:30%}.columns .position,.columns .alignment{font-weight:700}.tab-actions{display:flex;justify-content:start;gap:10px}.actions{display:flex;justify-content:end;gap:10px;margin-right:20px}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: TabSettingsDialogComponent, isStandalone: true, selector: "app-nod-tab-settings-dialog", host: { properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<div class=\"columns\">\n    <span class=\"position\">{{ 'NODER.LABEL.POSITION' | translate }}</span>\n    <span class=\"alignment\">{{ 'NODER.LABEL.ALIGNMENT' | translate }}</span>\n</div>\n<form\n    [formGroup]=\"form\"\n    class=\"form\">\n    <div\n        class=\"tabs\"\n        formArrayName=\"tabs\">\n        @for (tabCtrl of tabsArray().controls; let i = $index; track i) {\n            <div\n                class=\"item\"\n                [formGroupName]=\"i\">\n                <div class=\"tab\">\n                    <mat-form-field class=\"position\">\n                        <input\n                            matInput\n                            type=\"number\"\n                            formControlName=\"position\" />\n                    </mat-form-field>\n                    <mat-form-field class=\"alignment\">\n                        <mat-select formControlName=\"alignment\">\n                            @for (alignment of alignments; track alignment) {\n                                <mat-option [value]=\"alignment.type\">\n                                    {{ alignment.title | translate }}\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                    <button\n                        id=\"tab-setting-dialog-delete-btn\"\n                        mat-icon-button\n                        type=\"button\"\n                        (click)=\"onRemove(i)\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-delete\"></mat-icon>\n                    </button>\n                </div>\n            </div>\n        }\n    </div>\n</form>\n<div class=\"tab-actions\">\n    <button\n        id=\"tab-setting-dialog-add-btn\"\n        mat-stroked-button\n        (click)=\"onAddTab()\">\n        {{ 'NODER.LABEL.ADD' | translate }}\n    </button>\n    <button\n        id=\"tab-setting-dialog-clear-all-btn\"\n        mat-stroked-button\n        (click)=\"tabsArray().clear()\">\n        {{ 'NODER.LABEL.CLEAR_ALL' | translate }}\n    </button>\n</div>\n<div class=\"actions\">\n    <button\n        id=\"tab-setting-dialog-cancel-btn\"\n        mat-stroked-button\n        (click)=\"onClose()\">\n        {{ 'NODER.LABEL.CANCEL' | translate }}\n    </button>\n    <button\n        id=\"tab-setting-dialog-ok-btn\"\n        mat-stroked-button\n        (click)=\"onSave()\">\n        {{ 'NODER.LABEL.SAVE' | translate }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:550px;width:360px;padding:20px 0 20px 20px;gap:20px}.tabs{flex:1;overflow:hidden auto;display:flex;flex-direction:column}.form{height:350px;display:flex}.item{display:flex}.tab{display:flex;flex:1;gap:20px}.mat-mdc-form-field{width:120px}.columns{display:flex;gap:30%}.columns .position,.columns .alignment{font-weight:700}.tab-actions{display:flex;justify-content:start;gap:10px}.actions{display:flex;justify-content:end;gap:10px;margin-right:20px}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TabSettingsDialogComponent, decorators: [{
             type: Component,
@@ -19434,7 +19711,7 @@ class ColorPickerComponent {
         this.colorChange.emit(color);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ColorPickerComponent, isStandalone: true, selector: "app-nod-color-picker", inputs: { color: "color", icon: "icon", isDisabled: "isDisabled", palette: "palette", tooltip: "tooltip" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<button\n    mat-button\n    ngx-colors-trigger\n    overlayClassName=\"noder-color-picker-overlay\"\n    [disabled]=\"isDisabled\"\n    [(ngModel)]=\"color\"\n    [palette]=\"palette\"\n    [hideTextInput]=\"true\"\n    [attachTo]=\"icon\"\n    (input)=\"onChangeColor(color)\"\n    [matTooltip]=\"tooltip\"\n    matTooltipPosition=\"below\">\n    <div class=\"color-text\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            [ngStyle]=\"{ color: color && color !== 'transparent' ? color : 'inherit' }\"\n            [fontIcon]=\"icon\"></mat-icon>\n    </div>\n</button>\n", styles: ["button{margin:0 3px}.color-text{display:inline-flex;height:22px}.mdc-button{min-width:32px;height:32px;width:32px;padding:0}.mdc-button mat-icon{height:24px;width:24px;font-size:22px}.mdc-button::ng-deep .mdc-button__label{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: NgxColorsModule }, { kind: "directive", type: i5$3.NgxColorsTriggerDirective, selector: "[ngx-colors-trigger]", inputs: ["colorsAnimation", "palette", "format", "formats", "position", "hideTextInput", "hideColorPicker", "attachTo", "overlayClassName", "colorPickerControls", "acceptLabel", "cancelLabel"], outputs: ["change", "input", "slider", "close", "open"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ColorPickerComponent, isStandalone: true, selector: "app-nod-color-picker", inputs: { color: "color", icon: "icon", isDisabled: "isDisabled", palette: "palette", tooltip: "tooltip" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<button\n    mat-button\n    ngx-colors-trigger\n    overlayClassName=\"noder-color-picker-overlay\"\n    [disabled]=\"isDisabled\"\n    [(ngModel)]=\"color\"\n    [palette]=\"palette\"\n    [hideTextInput]=\"true\"\n    [attachTo]=\"icon\"\n    (input)=\"onChangeColor(color)\"\n    [matTooltip]=\"tooltip\"\n    matTooltipPosition=\"below\">\n    <div class=\"color-text\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            [ngStyle]=\"{ color: color && color !== 'transparent' ? color : 'inherit' }\"\n            [fontIcon]=\"icon\"></mat-icon>\n    </div>\n</button>\n", styles: ["button{margin:0 3px}.color-text{display:inline-flex;height:22px}.mdc-button{min-width:32px;height:32px;width:32px;padding:0}.mdc-button mat-icon{height:24px;width:24px;font-size:22px}.mdc-button::ng-deep .mdc-button__label{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: NgxColorsModule }, { kind: "directive", type: i5$4.NgxColorsTriggerDirective, selector: "[ngx-colors-trigger]", inputs: ["colorsAnimation", "palette", "format", "formats", "position", "hideTextInput", "hideColorPicker", "attachTo", "overlayClassName", "colorPickerControls", "acceptLabel", "cancelLabel"], outputs: ["change", "input", "slider", "close", "open"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
@@ -20681,7 +20958,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: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PageSetupComponent, isStandalone: true, selector: "app-nod-page-setup", viewQueries: [{ propertyName: "pageSizeForm", first: true, predicate: ["pageSizeForm"], descendants: true }], ngImport: i0, template: "<div class=\"title\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        (click)=\"onClose()\"\n        fontIcon=\"icon-arrow-forward\" />\n    <span>{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n</div>\n<form #pageSizeForm=\"ngForm\">\n    <div class=\"content\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.APPLY_TO' | translate }}</mat-label>\n            <mat-select [(value)]=\"selectedDocumentArea\">\n                <mat-option [value]=\"documentAreas.WholeDocument\">{{ 'NODER.LABEL.WHOLE_DOCUMENT' | translate }}</mat-option>\n                <mat-option [value]=\"documentAreas.ThisSection\">{{ 'NODER.LABEL.THIS_SECTION' | translate }}</mat-option>\n                @if (hasSelection$ | async) {\n                    <mat-option [value]=\"documentAreas.SelectedText\">{{ 'NODER.LABEL.SELECTED_TEXT' | translate }}</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n        <div class=\"orientation\">\n            <div class=\"label\">{{ 'NODER.LABEL.ORIENTATION' | translate }}</div>\n            <mat-radio-group\n                aria-label=\"Select an option\"\n                [(ngModel)]=\"pageSize.orientation\"\n                name=\"orientation\"\n                (change)=\"onPageOrientationChanged()\">\n                <mat-radio-button [value]=\"pageOrientations.Portrait\">\n                    <span>{{ 'NODER.LABEL.PORTRAIT' | translate }}</span>\n                </mat-radio-button>\n                <mat-radio-button [value]=\"pageOrientations.Landscape\">\n                    <span>{{ 'NODER.LABEL.LANDSCAPE' | translate }}</span>\n                </mat-radio-button>\n            </mat-radio-group>\n        </div>\n        <div class=\"page-format\">\n            <div class=\"page-format-tile\">\n                <div class=\"label\">{{ 'NODER.LABEL.PAGE_FORMAT' | translate }}</div>\n                <div class=\"checkbox-area\">\n                    <div class=\"checkbox-label\">{{ 'NODER.LABEL.CUSTOM_SIZE' | translate }}</div>\n                    <mat-checkbox\n                        [checked]=\"pageSize.isCustom\"\n                        (change)=\"toggleCustomSize($event)\" />\n                </div>\n            </div>\n            @if (!pageSize.isCustom) {\n                <div class=\"page-size\">\n                    <mat-form-field appearance=\"outline\">\n                        <mat-label>{{ 'NODER.LABEL.SIZE' | translate }}</mat-label>\n                        <mat-select\n                            [(value)]=\"pageSizeName\"\n                            (selectionChange)=\"onPageSizeChange()\">\n                            @for (option of pageSizes; track option) {\n                                <mat-option [value]=\"option.name\">\n                                    <div class=\"size-option\">\n                                        <span class=\"option-name\">{{ option.name + ' ' }}</span>\n                                        <span class=\"option-size\">{{ option.size }}</span>\n                                    </div>\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n            } @else {\n                <div class=\"page-custom-size\">\n                    <mat-form-field\n                        appearance=\"outline\"\n                        class=\"size-unit\">\n                        <mat-label>{{ 'NODER.LABEL.MEASURE' | translate }}</mat-label>\n                        <mat-select\n                            [(ngModel)]=\"pageSize.unit\"\n                            name=\"unit\"\n                            (valueChange)=\"onUnitChanged($event)\">\n                            <mat-option [value]=\"sizeUnits.Millimeters\">{{ 'NODER.LABEL.MILLIMETERS' | translate }}</mat-option>\n                            <mat-option [value]=\"sizeUnits.Inches\">{{ 'NODER.LABEL.INCHES' | translate }}</mat-option>\n                        </mat-select>\n                    </mat-form-field>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-width\">\n                            <mat-label>{{ ('NODER.LABEL.WIDTH' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customWidth\"\n                                name=\"customWidth\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-height\">\n                            <mat-label>{{ ('NODER.LABEL.HEIGHT' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customHeight\"\n                                name=\"customHeight\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n    <div class=\"actions\">\n        <button\n            mat-stroked-button\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-cancel-thin\" />\n        </button>\n        <button\n            mat-flat-button\n            color=\"primary\"\n            (click)=\"onApply()\"\n            [disabled]=\"pageSizeForm.pristine\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-done-thin\" />\n        </button>\n    </div>\n</form>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:400px}.title{margin:12px 16px;height:32px;display:flex;align-items:center;gap:8px}.title span{overflow:hidden;text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:normal}.content{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:8px 16px 0;gap:24px}.actions{display:flex;justify-content:flex-end;margin:0 16px 16px;gap:10px}.actions .mdc-button{width:32px;height:32px;min-width:32px;padding:0}.actions .mdc-button .mat-icon{margin-right:0;margin-left:0}.orientation{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.orientation mat-radio-group{display:flex;width:100%;gap:16px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.page-format{display:flex;flex-direction:column;gap:16px}.page-format-tile{display:flex;align-items:center;justify-content:space-between}.page-format-tile .checkbox-area{display:flex;align-items:center}.checkbox-label{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.custom-width,.custom-height,.size-unit{width:120px}.page-custom-size{display:flex;flex-direction:column}.size-panel{display:flex;gap:10px}.size-panel .mdc-button{width:40px;height:40px;min-width:40px;padding:0}.size-panel .mdc-button .mat-icon{margin-right:0;margin-left:0}.size-option{display:flex;flex-direction:column}.option-name{font-weight:400}.option-size{font-size:12px}form{display:flex;flex-direction:column;flex:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i10$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PageSetupComponent, isStandalone: true, selector: "app-nod-page-setup", viewQueries: [{ propertyName: "pageSizeForm", first: true, predicate: ["pageSizeForm"], descendants: true }], ngImport: i0, template: "<div class=\"title\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        (click)=\"onClose()\"\n        fontIcon=\"icon-arrow-forward\" />\n    <span>{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n</div>\n<form #pageSizeForm=\"ngForm\">\n    <div class=\"content\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.APPLY_TO' | translate }}</mat-label>\n            <mat-select [(value)]=\"selectedDocumentArea\">\n                <mat-option [value]=\"documentAreas.WholeDocument\">{{ 'NODER.LABEL.WHOLE_DOCUMENT' | translate }}</mat-option>\n                <mat-option [value]=\"documentAreas.ThisSection\">{{ 'NODER.LABEL.THIS_SECTION' | translate }}</mat-option>\n                @if (hasSelection$ | async) {\n                    <mat-option [value]=\"documentAreas.SelectedText\">{{ 'NODER.LABEL.SELECTED_TEXT' | translate }}</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n        <div class=\"orientation\">\n            <div class=\"label\">{{ 'NODER.LABEL.ORIENTATION' | translate }}</div>\n            <mat-radio-group\n                aria-label=\"Select an option\"\n                [(ngModel)]=\"pageSize.orientation\"\n                name=\"orientation\"\n                (change)=\"onPageOrientationChanged()\">\n                <mat-radio-button [value]=\"pageOrientations.Portrait\">\n                    <span>{{ 'NODER.LABEL.PORTRAIT' | translate }}</span>\n                </mat-radio-button>\n                <mat-radio-button [value]=\"pageOrientations.Landscape\">\n                    <span>{{ 'NODER.LABEL.LANDSCAPE' | translate }}</span>\n                </mat-radio-button>\n            </mat-radio-group>\n        </div>\n        <div class=\"page-format\">\n            <div class=\"page-format-tile\">\n                <div class=\"label\">{{ 'NODER.LABEL.PAGE_FORMAT' | translate }}</div>\n                <div class=\"checkbox-area\">\n                    <div class=\"checkbox-label\">{{ 'NODER.LABEL.CUSTOM_SIZE' | translate }}</div>\n                    <mat-checkbox\n                        [checked]=\"pageSize.isCustom\"\n                        (change)=\"toggleCustomSize($event)\" />\n                </div>\n            </div>\n            @if (!pageSize.isCustom) {\n                <div class=\"page-size\">\n                    <mat-form-field appearance=\"outline\">\n                        <mat-label>{{ 'NODER.LABEL.SIZE' | translate }}</mat-label>\n                        <mat-select\n                            [(value)]=\"pageSizeName\"\n                            (selectionChange)=\"onPageSizeChange()\">\n                            @for (option of pageSizes; track option) {\n                                <mat-option [value]=\"option.name\">\n                                    <div class=\"size-option\">\n                                        <span class=\"option-name\">{{ option.name + ' ' }}</span>\n                                        <span class=\"option-size\">{{ option.size }}</span>\n                                    </div>\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n            } @else {\n                <div class=\"page-custom-size\">\n                    <mat-form-field\n                        appearance=\"outline\"\n                        class=\"size-unit\">\n                        <mat-label>{{ 'NODER.LABEL.MEASURE' | translate }}</mat-label>\n                        <mat-select\n                            [(ngModel)]=\"pageSize.unit\"\n                            name=\"unit\"\n                            (valueChange)=\"onUnitChanged($event)\">\n                            <mat-option [value]=\"sizeUnits.Millimeters\">{{ 'NODER.LABEL.MILLIMETERS' | translate }}</mat-option>\n                            <mat-option [value]=\"sizeUnits.Inches\">{{ 'NODER.LABEL.INCHES' | translate }}</mat-option>\n                        </mat-select>\n                    </mat-form-field>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-width\">\n                            <mat-label>{{ ('NODER.LABEL.WIDTH' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customWidth\"\n                                name=\"customWidth\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-height\">\n                            <mat-label>{{ ('NODER.LABEL.HEIGHT' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customHeight\"\n                                name=\"customHeight\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n    <div class=\"actions\">\n        <button\n            mat-stroked-button\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-cancel-thin\" />\n        </button>\n        <button\n            mat-flat-button\n            color=\"primary\"\n            (click)=\"onApply()\"\n            [disabled]=\"pageSizeForm.pristine\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-done-thin\" />\n        </button>\n    </div>\n</form>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:400px}.title{margin:12px 16px;height:32px;display:flex;align-items:center;gap:8px}.title span{overflow:hidden;text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:normal}.content{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:8px 16px 0;gap:24px}.actions{display:flex;justify-content:flex-end;margin:0 16px 16px;gap:10px}.actions .mdc-button{width:32px;height:32px;min-width:32px;padding:0}.actions .mdc-button .mat-icon{margin-right:0;margin-left:0}.orientation{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.orientation mat-radio-group{display:flex;width:100%;gap:16px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.page-format{display:flex;flex-direction:column;gap:16px}.page-format-tile{display:flex;align-items:center;justify-content:space-between}.page-format-tile .checkbox-area{display:flex;align-items:center}.checkbox-label{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.custom-width,.custom-height,.size-unit{width:120px}.page-custom-size{display:flex;flex-direction:column}.size-panel{display:flex;gap:10px}.size-panel .mdc-button{width:40px;height:40px;min-width:40px;padding:0}.size-panel .mdc-button .mat-icon{margin-right:0;margin-left:0}.size-option{display:flex;flex-direction:column}.option-name{font-weight:400}.option-size{font-size:12px}form{display:flex;flex-direction:column;flex:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i10$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PageSetupComponent, decorators: [{
             type: Component,