@talrace/ngx-noder 0.0.2 → 0.0.4

package/fesm2022/talrace-ngx-noder.mjs

@@ -22,17 +22,17 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$4 from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import * as i2$3 from '@angular/forms';
-import { ReactiveFormsModule, FormsModule, FormControl } from '@angular/forms';
-import * as i7$1 from '@angular/material/form-field';
+import { ReactiveFormsModule, FormsModule, FormControl, Validators } from '@angular/forms';
+import * as i4$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i6 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4$1 from '@angular/material/menu';
+import * as i4$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i7$2 from '@angular/material/select';
+import * as i7$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i2$2 from '@angular/platform-browser';
-import * as i4$2 from '@angular/material/core';
+import * as i4$3 from '@angular/material/core';
 import * as i3$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i1$3 from '@angular/material/button-toggle';
@@ -40,6 +40,7 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i5$1 from 'ngx-colors';
 import { NgxColorsModule } from 'ngx-colors';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { TranslateModule } from '@ngx-translate/core';
 
 const DEFAULT_FILE_NAME = 'Untitled document';
 
@@ -302,8 +303,9 @@ class ElementDataModel {
 }
 
 class ExternalElementModel {
-    constructor(name, icon, type, componentType, factoryMethod) {
+    constructor(name, title, icon, type, componentType, factoryMethod) {
         this.name = name;
+        this.title = title;
         this.icon = icon;
         this.type = type;
         this.componentType = componentType;
@@ -1891,6 +1893,9 @@ class PositionHelper {
                 sizeMax = tokens[currentColumn];
             }
         }
+        if (tokens[tokenIndex]?.isTable) {
+            sizeMax.ascent = paragraphInfo.lineHeight;
+        }
         const paragraph = paragraphs[paragraphInfo.paragraphIndex];
         const paragraphTop = paragraph.distanceFromTop || 0;
         const linePaddingLeft = paragraph.textLinesInfo[paragraphInfo.lineIndex].paddingLeft;
@@ -2673,7 +2678,7 @@ class Lines {
 }
 
 class ParagraphHelper {
-    static processTextLinesProperties(currentParagraph, prevParagraphInfo, pagesInfo) {
+    static processTextLinesProperties(currentParagraph, prevParagraphInfo, pagesInfo, tables) {
         let currentPageContentHeight = prevParagraphInfo.paragraphHeight;
         let currentPage = prevParagraphInfo.lastPage;
         let previousLine = null;
@@ -2682,17 +2687,50 @@ class ParagraphHelper {
             textLineInfo.screenLine = ++prevParagraphInfo.paragraphLastLine;
             textLineInfo.firstLinePageOffset = 0;
             textLineInfo.endPageOffset = 0;
-            let contentHeightWithLine = currentPageContentHeight + textLineInfo.height + textLineInfo.offsetBefore;
-            const isFirstLineInDocument = prevParagraphInfo.paragraphLastLine === 0;
-            if (!isFirstLineInDocument &&
-                (contentHeightWithLine > currentPageVerticalData.contentHeight || textLineInfo.isAfterPageBreak)) {
-                const leftSpaceOnPage = currentPageVerticalData.contentHeight - currentPageContentHeight;
-                contentHeightWithLine -= currentPageContentHeight;
-                const nexPageVerticalData = PageHelper.getVerticalData(currentPage + 1, pagesInfo.pagesVerticalData);
-                const lineSpaceBefore = pagesInfo.pagesSpace + currentPageVerticalData.marginBottom + nexPageVerticalData.marginTop;
-                const pageOffset = lineSpaceBefore + leftSpaceOnPage;
-                currentPage++;
-                currentPageVerticalData = nexPageVerticalData;
+            textLineInfo.splitOffset = 0;
+            const textLineHeight = textLineInfo.height + textLineInfo.offsetBefore;
+            const leftSpaceOnPage = currentPageVerticalData.contentHeight - currentPageContentHeight;
+            if (!textLineInfo.hasTable &&
+                (prevParagraphInfo.paragraphLastLine === 0 || (textLineHeight <= leftSpaceOnPage && !textLineInfo.isAfterPageBreak))) {
+                if (previousLine?.hasTable && previousLine.page != currentPage) {
+                    textLineInfo.splitOffset = currentPageContentHeight;
+                }
+                currentPageContentHeight += textLineHeight + textLineInfo.offsetAfter;
+                textLineInfo.page = currentPage;
+                previousLine = textLineInfo;
+                continue;
+            }
+            const nextPageVerticalData = PageHelper.getVerticalData(currentPage + 1, pagesInfo.pagesVerticalData);
+            const spaceBetweenPagesContent = pagesInfo.pagesSpace + currentPageVerticalData.marginBottom + nextPageVerticalData.marginTop;
+            if (textLineInfo.hasTable) {
+                const { splitsCount, leftHeight, tableHeight } = ParagraphHelper.processTableSplit(tables, currentParagraph.startInsertIndex, leftSpaceOnPage, spaceBetweenPagesContent, currentPageVerticalData.contentHeight);
+                textLineInfo.height = tableHeight;
+                textLineInfo.page = currentPage;
+                currentPage += splitsCount;
+                if (splitsCount) {
+                    if (textLineInfo.height === leftHeight) {
+                        textLineInfo.page++;
+                        const pageOffset = spaceBetweenPagesContent + leftSpaceOnPage;
+                        if (previousLine) {
+                            previousLine.endPageOffset = pageOffset;
+                        }
+                        else {
+                            currentParagraph.pagePreviousContentHeight = 0;
+                            textLineInfo.firstLinePageOffset = pageOffset;
+                        }
+                    }
+                    currentPageContentHeight = leftHeight + textLineInfo.offsetBefore + textLineInfo.offsetAfter;
+                    currentPageVerticalData = nextPageVerticalData;
+                }
+                else {
+                    currentPageContentHeight += textLineInfo.height + textLineInfo.offsetBefore + textLineInfo.offsetAfter;
+                }
+            }
+            else if (prevParagraphInfo.paragraphLastLine !== 0 && (textLineHeight > leftSpaceOnPage || textLineInfo.isAfterPageBreak)) {
+                const pageOffset = spaceBetweenPagesContent + leftSpaceOnPage;
+                textLineInfo.page = ++currentPage;
+                currentPageVerticalData = nextPageVerticalData;
+                currentPageContentHeight = textLineHeight + textLineInfo.offsetAfter;
                 if (previousLine) {
                     previousLine.endPageOffset = pageOffset;
                 }
@@ -2701,8 +2739,6 @@ class ParagraphHelper {
                     textLineInfo.firstLinePageOffset = pageOffset;
                 }
             }
-            currentPageContentHeight = contentHeightWithLine + textLineInfo.offsetAfter;
-            textLineInfo.page = currentPage;
             previousLine = textLineInfo;
         }
     }
@@ -2748,7 +2784,9 @@ class ParagraphHelper {
         return paragraphTextLinesInfo.reduce((prev, next) => prev + next.height + next.endPageOffset + next.offsetBefore + next.offsetAfter, 0);
     }
     static getPageLinesHeight(paragraphTextLinesInfo, page) {
-        return paragraphTextLinesInfo.filter(line => line.page === page).reduce((prev, next) => prev + next.height + next.offsetAfter, 0);
+        return paragraphTextLinesInfo
+            .filter(line => line.page === page)
+            .reduce((prev, next) => prev + next.height + next.offsetAfter + next.splitOffset, 0);
     }
     static processOffsetLineWithNumberingMarker(textLineInfo, markerHeight, offsetBefore) {
         if (!markerHeight || textLineInfo.height >= markerHeight) {
@@ -2801,6 +2839,10 @@ class ParagraphHelper {
         }
         return indents;
     }
+    static processTableSplit(tables, startInsertIndex, leftSpaceOnPage, spaceBetweenPagesContent, contentHeight) {
+        const table = tables.find(x => x.instance.insertIndex >= startInsertIndex);
+        return table.instance.processSplit(leftSpaceOnPage, spaceBetweenPagesContent, contentHeight);
+    }
 }
 
 class TextLayer extends EventEmitting {
@@ -3972,7 +4014,7 @@ class Editor extends EventEmitting {
     get targets() {
         return this.regulatorService.getCurrentSessionTargets();
     }
-    constructor(model, container, editorService, regulatorService, commandsService, clipboard) {
+    constructor(model, container, editorService, regulatorService, commandsService, clipboard, customPageWidth) {
         super();
         this.model = model;
         this.container = container;
@@ -3980,6 +4022,7 @@ class Editor extends EventEmitting {
         this.regulatorService = regulatorService;
         this.commandsService = commandsService;
         this.clipboard = clipboard;
+        this.customPageWidth = customPageWidth;
         this.MAX_COUNT = 999;
         this.parentTagName = 'APP-EDITOR';
         this.tableCellTagName = 'APP-NODER-TABLE-CELL';
@@ -4826,7 +4869,8 @@ class Editor extends EventEmitting {
         return textInterval;
     }
     initMainSession() {
-        this.container.nativeElement.style.maxWidth = `${this.model.pageWidth}px`;
+        const pageWidth = this.customPageWidth ?? this.model.pageWidth;
+        this.container.nativeElement.style.maxWidth = `${pageWidth}px`;
         const pageMargin = new MarginModel({
             left: this.model.marginLeft,
             right: this.model.marginRight,
@@ -4835,7 +4879,7 @@ class Editor extends EventEmitting {
             header: this.model.marginHeader,
             footer: this.model.marginFooter
         });
-        this.regulatorService.addMainSession(this.model, pageMargin, this.container);
+        this.regulatorService.addMainSession(this.model, pageMargin, pageWidth, this.container);
         this.mainSession.addEventListener('changeScrollTop', this.onScrollTopChange);
         this.session.addEventListener('setStyles', this.setStyles);
         this.mainRenderer.scrollTo(0);
@@ -5090,7 +5134,7 @@ class Editor extends EventEmitting {
     }
     changedEdgeHeightSubscription() {
         return this.editorService.changedEdgeHeight$.subscribe(edgeType => {
-            this.mainSession.pagesWrap.updatePageVerticalData(edgeType, this.regulatorService.edgeEditingPage);
+            this.mainSession.pagesWrap.updatePageVerticalData(edgeType, this.regulatorService.edgeEditingPage, this.session.wrapParagraphIndex);
         });
     }
     undoSubscription() {
@@ -6029,7 +6073,7 @@ class CellResizer {
         this.spaceRight = this.table.columns[this.cellResizerParameters.columnIndex].width - this.minCellWidth;
         this.startX =
             this.tableEl.offsetLeft +
-                this.tableEl.rows[this.cellResizerParameters.rowIndex].cells[this.cellResizerParameters.cellIndex].getBoundingClientRect().left;
+                this.tableEl.rows[this.splitRowIndex].cells[this.cellResizerParameters.cellIndex].getBoundingClientRect().left;
         this.columnPositionChanged(this.startX - this.resizerBorderSize);
         this.addHorizontalMouseSubscriptions();
     }
@@ -6042,7 +6086,7 @@ class CellResizer {
         if (this.table.columns.length > nextColumnIndex) {
             this.spaceRight = this.table.columns[nextColumnIndex].width - this.minCellWidth;
         }
-        const cellRect = this.tableEl.rows[this.cellResizerParameters.rowIndex].cells[this.cellResizerParameters.columnIndex].getBoundingClientRect();
+        const cellRect = this.tableEl.rows[this.splitRowIndex].cells[this.cellResizerParameters.columnIndex].getBoundingClientRect();
         this.startX = this.tableEl.offsetLeft + cellRect.left + cellRect.width - this.resizerBorderSize;
         this.columnPositionChanged(this.startX);
         this.addHorizontalMouseSubscriptions();
@@ -6090,7 +6134,7 @@ class CellResizer {
             return;
         }
         this.resizerEl.setAttribute('style', `height:${this.resizerHeight}px; `);
-        this.resizerEl.setAttribute('style', `height:${this.resizerHeight}px;left:${position - this.resizerEl.getBoundingClientRect().x}px`);
+        this.resizerEl.setAttribute('style', `height:${this.resizerHeight}px;left:${position - this.resizerEl.getBoundingClientRect().x}px;top:${this.startY}px`);
     }
 }
 
@@ -6359,6 +6403,9 @@ class TableSelection {
                 return;
             }
             const selectionRange = this.getSelectionRangeForMenuOverlay(event.target);
+            if (!selectionRange) {
+                return;
+            }
             const targets = this.getTargetsForMenuOverlay(selectionRange);
             const canRemoveRows = selectionRange.rowIndexes.endIndex - selectionRange.rowIndexes.startIndex + 1 < this.rowMatrix.length;
             const canRemoveColumns = selectionRange.cellIndexes.endIndex - selectionRange.cellIndexes.startIndex + 1 < this.rowMatrix[0].cells.length;
@@ -6583,6 +6630,9 @@ class TableSelection {
     }
     getSelectionRangeForMenuOverlay(element) {
         const selectedCell = this.getCellIndexes(element);
+        if (!selectedCell) {
+            return null;
+        }
         const isCellInSelection = this.selectionRange &&
             this.selectionRange.rowIndexes.startIndex <= selectedCell.rowIndex &&
             this.selectionRange.rowIndexes.endIndex >= selectedCell.rowIndex &&
@@ -6703,10 +6753,14 @@ class NoderTableComponent extends BaseNoderComponent {
         this.el = el;
         this.overlayService = overlayService;
         this.rowMatrix = [];
+        this.splits = [];
         this.minRowHeight = 19;
-        this.borderSize = 0.8;
+        this.borderSize = 1;
         this.startResizing = (cellResizerParameters) => {
-            this.resizer.resizerHeight = this.height;
+            const splitRowIndex = this.getSplitRowIndex(cellResizerParameters.rowIndex);
+            this.resizer.resizerHeight = this.getRowsHeightBetweenSplits(splitRowIndex);
+            this.resizer.startY = this.getRowsHeightBefore(splitRowIndex);
+            this.resizer.splitRowIndex = splitRowIndex;
             this.resizer.tableInsertIndex = this.insertIndex;
             this.resizer.onStartResizing(cellResizerParameters);
         };
@@ -6716,7 +6770,8 @@ class NoderTableComponent extends BaseNoderComponent {
             if (tableRow.hRule === HRule.Exact) {
                 return;
             }
-            const row = this.tableEl.rows[rowIndex];
+            const rowIndexWithSplit = this.getIndexIncludingSplitRows(this.rowMatrix[rowIndex].row);
+            const row = this.tableEl.rows[rowIndexWithSplit];
             const currentHeight = row.offsetHeight;
             const cellHeights = this.rowMatrix[rowIndex].cells.map(x => x.cellContentHeight);
             const maxCellContentHeigh = Math.max(...cellHeights, height);
@@ -6757,6 +6812,14 @@ class NoderTableComponent extends BaseNoderComponent {
         } while (i < cellSpanCount);
         return width;
     }
+    getAdjustedWidth(tableRow, cellIndex, absoluteCellIndex) {
+        const cellWidth = this.getCellWidth(tableRow, cellIndex, absoluteCellIndex);
+        if (tableRow.cells[cellIndex].widthType === 'pct') {
+            tableRow.cells[cellIndex].widthType = 'dxa';
+            return (cellWidth * this._width) / 5000; // 5000 is equal to 100% in docx units of measurement
+        }
+        return cellWidth;
+    }
     createResizer() {
         this.resizerEl = document.createElement('div');
         this.resizerEl.className = 'resizer-border';
@@ -6780,6 +6843,7 @@ class NoderTableComponent extends BaseNoderComponent {
         this.initialize();
     }
     insertRows(rowsCount, targetIndex) {
+        this._width = this.getTableWidth();
         let rowIndex = 0;
         while (rowIndex < rowsCount) {
             const targetRowIndex = targetIndex + rowIndex;
@@ -6827,7 +6891,7 @@ class NoderTableComponent extends BaseNoderComponent {
                 rowIndex,
                 cellIndex: modelCellIndex,
                 columnIndex: currentTargetIndex,
-                width: this.getCellWidth(this.table.rows[rowIndex], modelCellIndex, currentTargetIndex),
+                width: this.getAdjustedWidth(this.table.rows[rowIndex], modelCellIndex, currentTargetIndex),
                 heightChanged: this.cellHeightChanged,
                 startResizing: this.startResizing,
                 properties: this.properties
@@ -6952,21 +7016,113 @@ class NoderTableComponent extends BaseNoderComponent {
         }
         this._height = rowsHeight + bordersHeight;
     }
+    processSplit(leftSpaceOnPage, spaceBetweenPagesContent, contentHeight) {
+        this.removeSplits();
+        if (leftSpaceOnPage >= this.height) {
+            return { splitsCount: 0, tableHeight: this.height, leftHeight: 0 };
+        }
+        if (leftSpaceOnPage < this.rowMatrix[0].height) {
+            return { splitsCount: 1, tableHeight: this.height, leftHeight: this.height };
+        }
+        return this.splitTable(leftSpaceOnPage, spaceBetweenPagesContent, contentHeight);
+    }
+    splitTable(leftSpaceOnPage, spaceBetweenPagesContent, contentHeight) {
+        let leftHeight = 0, tableHeightWithSplits = this.height, rowIndex = 0;
+        while (rowIndex < this.rowMatrix.length) {
+            let { index, rowsHeight } = this.getRowIndexByHeight(rowIndex, leftSpaceOnPage);
+            rowIndex = index;
+            if (index === this.rowMatrix.length) {
+                break;
+            }
+            leftHeight = this.rowMatrix
+                .slice(index)
+                .map(x => x.height)
+                .reduce((partialSum, curr) => partialSum + curr + this.borderSize);
+            const splitRowHeight = spaceBetweenPagesContent + leftSpaceOnPage - rowsHeight;
+            this.createSplitRow(index + this.splits.length, splitRowHeight);
+            this.splits.push(index + this.splits.length);
+            tableHeightWithSplits += splitRowHeight;
+            leftSpaceOnPage = contentHeight;
+        }
+        return {
+            splitsCount: this.splits.length,
+            tableHeight: tableHeightWithSplits,
+            leftHeight
+        };
+    }
+    getRowIndexByHeight(startIndex, height) {
+        if (startIndex >= this.rowMatrix.length) {
+            return { index: this.rowMatrix.length, rowsHeight: 0 };
+        }
+        let tableHeight = this.rowMatrix[startIndex].height + this.borderSize, i = startIndex;
+        while (tableHeight < height) {
+            tableHeight += this.rowMatrix[i + 1]?.height + this.borderSize;
+            i++;
+        }
+        return { index: i, rowsHeight: tableHeight - this.rowMatrix[i]?.height };
+    }
+    createSplitRow(index, height) {
+        this.tableEl.insertRow(index);
+        this.tableEl.rows[index].style.height = `${height}px`;
+        this.tableEl.rows[index].classList.add('split-row');
+    }
+    removeSplits() {
+        this.splits = [];
+        while (this.tableEl.querySelector('.split-row')) {
+            const el = this.tableEl.querySelector('.split-row');
+            el.remove();
+        }
+    }
     calculateProperties() {
         if (!this.tableEl) {
             return;
         }
         this.setTableHeight();
-        const bordersSize = this.borderSize * this.table.columns.length;
-        const width = this.table.columns.reduce((prev, next) => prev + next.width, 1);
-        this._width = width + bordersSize;
+    }
+    getTableWidth() {
+        return this.table.columns.reduce((prev, next) => prev + next.width + this.borderSize, 1);
+    }
+    getSplitRowIndex(rowIndex) {
+        return this.getIndexIncludingSplitRows(this.rowMatrix[rowIndex].row);
+    }
+    getIndexIncludingSplitRows(row) {
+        return Array.from(this.tableEl.rows).indexOf(row);
+    }
+    getRowsHeightBefore(rowIndex) {
+        let index = 0;
+        for (const element of this.splits) {
+            if (rowIndex < element) {
+                break;
+            }
+            index = element + 1;
+        }
+        return this.getRowsHeight(0, index);
+    }
+    getRowsHeightBetweenSplits(rowIndex) {
+        let startIndex = 0;
+        let endIndex = this.tableEl.rows.length;
+        for (const element of this.splits) {
+            if (rowIndex < element) {
+                endIndex = element;
+                break;
+            }
+            startIndex = element + 1;
+        }
+        return this.getRowsHeight(startIndex, endIndex);
+    }
+    getRowsHeight(start, end) {
+        let sum = 0;
+        for (let i = start; i < end; i++) {
+            sum += this.tableEl.rows[i].offsetHeight;
+        }
+        return sum;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NoderTableComponent, deps: [{ token: ComponentService }, { token: EditorService }, { token: i0.ElementRef }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: NoderTableComponent, selector: "app-noder-table", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host ::ng-deep table{position:relative;border-collapse:collapse;background:transparent;empty-cells:show;border-spacing:0;overflow:visible;table-layout:fixed}:host ::ng-deep td{position:relative;vertical-align:top;border:1px solid #000;margin:0;padding:0;height:inherit}:host ::ng-deep .hidden-cell{display:none;cursor:not-allowed}:host ::ng-deep .resizer-border{position:absolute;border:solid .5px blue;z-index:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: NoderTableComponent, selector: "app-noder-table", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{position:relative}:host::ng-deep table{position:relative;border-collapse:collapse;background:transparent;empty-cells:show;border-spacing:0;overflow:visible;table-layout:fixed}:host::ng-deep td{position:relative;vertical-align:top;border:1px solid #000;margin:0;padding:0;height:inherit}:host::ng-deep .hidden-cell{display:none;cursor:not-allowed}:host::ng-deep .resizer-border{position:absolute;border:solid .5px blue;z-index:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NoderTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-noder-table', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host ::ng-deep table{position:relative;border-collapse:collapse;background:transparent;empty-cells:show;border-spacing:0;overflow:visible;table-layout:fixed}:host ::ng-deep td{position:relative;vertical-align:top;border:1px solid #000;margin:0;padding:0;height:inherit}:host ::ng-deep .hidden-cell{display:none;cursor:not-allowed}:host ::ng-deep .resizer-border{position:absolute;border:solid .5px blue;z-index:1}\n"] }]
+            args: [{ selector: 'app-noder-table', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:relative}:host::ng-deep table{position:relative;border-collapse:collapse;background:transparent;empty-cells:show;border-spacing:0;overflow:visible;table-layout:fixed}:host::ng-deep td{position:relative;vertical-align:top;border:1px solid #000;margin:0;padding:0;height:inherit}:host::ng-deep .hidden-cell{display:none;cursor:not-allowed}:host::ng-deep .resizer-border{position:absolute;border:solid .5px blue;z-index:1}\n"] }]
         }], ctorParameters: () => [{ type: ComponentService }, { type: EditorService }, { type: i0.ElementRef }, { type: OverlayService }] });
 
 class NumberingDataModel {
@@ -7441,7 +7597,9 @@ class TableOperationsHelper {
                     images: [],
                     paragraphs: [new ParagraphModel({ insertIndex: 0, paragraphStyle: DEFAULT_PARAGRAPH_STYLE })],
                     tables: [],
-                    tabs: []
+                    tabs: [],
+                    links: [],
+                    widthType: 'dxa'
                 });
                 cells.push(cell);
             }
@@ -7554,7 +7712,8 @@ class TableOperationsHelper {
                 ],
                 verticalMerge: this.getCellVerticalMerge(matrix[inheritIndex].cells[i].verticalMerge, targetIndex, inheritIndex),
                 tables: [],
-                tabs: []
+                tabs: [],
+                links: []
             });
             newCells.push(newCell);
         }
@@ -8198,8 +8357,8 @@ class TextLineInfo {
         this.paddingLeft = 0;
         this.offsetBefore = 0;
         this.offsetAfter = 0;
-        this.firstLinePageOffset = 0;
-        this.endPageOffset = 0;
+        this.firstLinePageOffset = 0; // for selection
+        this.endPageOffset = 0; // for selection
         this.screenLine = 0;
         this.isAfterPageBreak = false;
         this.isEndedByPageBreak = false;
@@ -8267,9 +8426,9 @@ class Paragraph {
             : ParagraphHelper.getPageLinesHeight(this.textLinesInfo, this.lastPageNumber);
         return { lastPage: this.lastPageNumber, paragraphHeight: pageContentHeight, paragraphLastLine: this.lastScreenLine };
     }
-    processParagraphProperties(prevParagraphInfo, pagesInfo) {
+    processParagraphProperties(prevParagraphInfo, pagesInfo, tables) {
         this.pagePreviousContentHeight = prevParagraphInfo.paragraphHeight;
-        this.processTextLinesProperties(this, prevParagraphInfo, pagesInfo);
+        this.processTextLinesProperties(this, prevParagraphInfo, pagesInfo, tables);
         ParagraphHelper.processOffsetLineWithNumberingMarker(this.textLinesInfo[0], this.numberingData.height, this.offsetBefore);
         this.pageNumbers = ParagraphHelper.getParagraphPages(this.textLinesInfo);
         this.height = ParagraphHelper.getParagraphHeight(this.textLinesInfo);
@@ -8280,13 +8439,13 @@ class PagesWrap extends EventEmitting {
     get defaultVerticalData() {
         return this.pagesVerticalData.find(x => x.pageType === PageType.Default);
     }
-    constructor(pagesSpace, documentMargin, pageWidth, pageHeight = 0, edges = null) {
+    constructor(pagesSpace, documentMargin, pageWidth, pageHeight = 0, customComponents) {
         super();
         this.pagesSpace = pagesSpace;
         this.documentMargin = documentMargin;
         this.pageWidth = pageWidth;
         this.pageHeight = pageHeight;
-        this.edges = edges;
+        this.customComponents = customComponents;
         this.allPagesHeight = 0;
         this.minHeight = 0;
         this.paragraphs = [];
@@ -8379,14 +8538,15 @@ class PagesWrap extends EventEmitting {
             pages: visiblePages
         };
     }
-    processParagraphsProperties(startParagraphIndex) {
+    processParagraphsProperties(startParagraphIndex, wrapParagraphIndex) {
+        this.setParagraphIndexes(wrapParagraphIndex);
         const pagesInfo = { pagesVerticalData: this.pagesVerticalData, pagesSpace: this.pagesSpace };
         let currentPage = startParagraphIndex === 0 ? 1 : this.paragraphs[startParagraphIndex - 1].lastPageNumber;
         let pageVerticalData = PageHelper.getVerticalData(currentPage, this.pagesVerticalData);
         for (let i = startParagraphIndex; i < this.paragraphs.length; i++) {
             const prevParagraphInfo = this.getPreviousParagraphInfo(i);
             const paragraph = this.paragraphs[i];
-            paragraph.processParagraphProperties(prevParagraphInfo, pagesInfo);
+            paragraph.processParagraphProperties(prevParagraphInfo, pagesInfo, this.customComponents.tables);
             if (paragraph.firstPageNumber !== currentPage) {
                 currentPage = paragraph.firstPageNumber;
                 pageVerticalData = PageHelper.getVerticalData(paragraph.firstPageNumber, this.pagesVerticalData);
@@ -8413,9 +8573,9 @@ class PagesWrap extends EventEmitting {
     destroy() {
         this.removeAllListeners('pagesCountChanged');
     }
-    updatePageVerticalData(edgeType, page) {
+    updatePageVerticalData(edgeType, page, wrapParagraphIndex) {
         const pageVerticalData = PageHelper.getVerticalData(page, this.pagesVerticalData);
-        const componentHeight = this.edges.getComponentHeight(page, edgeType);
+        const componentHeight = this.customComponents.edges.getComponentHeight(page, edgeType);
         if (edgeType === EdgeType.Header) {
             pageVerticalData.marginTop = componentHeight > this.documentMargin.top ? componentHeight : this.documentMargin.top;
         }
@@ -8427,7 +8587,7 @@ class PagesWrap extends EventEmitting {
             return;
         }
         pageVerticalData.contentHeight = newContentHeight;
-        this.processParagraphsProperties(0);
+        this.processParagraphsProperties(0, wrapParagraphIndex);
     }
     getPreviousParagraphInfo(row) {
         if (!row || !this.paragraphs.length) {
@@ -8460,7 +8620,8 @@ class PagesWrap extends EventEmitting {
         return visiblePages;
     }
     initPagesVerticalData() {
-        if (!this.edges || (!this.edges.headersComponents.length && !this.edges.footersComponents.length)) {
+        if (!this.customComponents.edges ||
+            (!this.customComponents.edges.headersComponents.length && !this.customComponents.edges.footersComponents.length)) {
             this.pagesVerticalData = [
                 new PageVerticalDataModel({
                     marginTop: this.documentMargin.top,
@@ -8471,10 +8632,10 @@ class PagesWrap extends EventEmitting {
             ];
             return;
         }
-        const pageTypes = this.edges.getUniquePageTypes();
+        const pageTypes = this.customComponents.edges.getUniquePageTypes();
         this.pagesVerticalData = pageTypes.map(pageType => {
-            const headerHeight = this.edges.getComponentHeightByPageType(pageType, EdgeType.Header);
-            const footerHeight = this.edges.getComponentHeightByPageType(pageType, EdgeType.Footer);
+            const headerHeight = this.customComponents.edges.getComponentHeightByPageType(pageType, EdgeType.Header);
+            const footerHeight = this.customComponents.edges.getComponentHeightByPageType(pageType, EdgeType.Footer);
             const marginTop = Math.max(headerHeight, this.documentMargin.top);
             const marginBottom = Math.max(footerHeight, this.documentMargin.bottom);
             return new PageVerticalDataModel({
@@ -8485,6 +8646,11 @@ class PagesWrap extends EventEmitting {
             });
         });
     }
+    setParagraphIndexes(wrapParagraphIndex) {
+        for (let i = 0; i < this.paragraphs.length; i++) {
+            this.paragraphs[i].startInsertIndex = wrapParagraphIndex[i];
+        }
+    }
 }
 
 class ParagraphStyleHelper {
@@ -8621,8 +8787,7 @@ class EditSession extends EventEmitting {
             backgroundColor: DEFAULT_BACKGROUND_COLOR,
             highlightColor: DEFAULT_BACKGROUND_COLOR
         };
-        const maxWidth = document.pageWidth - (document.pageMargin.left + document.pageMargin.right);
-        this.customComponents = this.customContentService.generateComponents(this.model, this.sessionId, this.properties, maxWidth);
+        this.customComponents = this.customContentService.generateComponents(this.model, this.sessionId, this.properties, this.document);
         this.setDocument();
     }
     destroy() {
@@ -8697,7 +8862,7 @@ class EditSession extends EventEmitting {
         this.pagesWrap.paragraphs.splice(count);
         this.wrapData.splice(count);
         this.updateWrapParagraphLine(firstParagraph);
-        this.pagesWrap.processParagraphsProperties(firstParagraph);
+        this.pagesWrap.processParagraphsProperties(firstParagraph, this.wrapParagraphIndex);
     }
     /**
      * Given a string, returns an array of the display characters, including tabs and spaces.
@@ -9258,13 +9423,10 @@ class EditSession extends EventEmitting {
                 displayTokens[i].width = TabHelper.calculateTabWidth(sum, this.properties.defaultTabWidth);
             }
             sum += displayTokens[i].width;
-            if (i > 0 && (sum >= maxRowWidth || displayTokens[i - 1].breaksLine)) {
+            if ((i > 0 && (sum >= maxRowWidth || displayTokens[i - 1].breaksLine)) || displayTokens[i].isTable) {
                 return i;
             }
-            if (displayTokens[i].isLineBreak) {
-                return i + 1;
-            }
-            if (i === displayTokens.length - 1 && displayTokens[i].isPageBreak) {
+            if (displayTokens[i].isLineBreak || (i === displayTokens.length - 1 && displayTokens[i].isPageBreak)) {
                 return i + 1;
             }
         }
@@ -9338,7 +9500,7 @@ class EditSession extends EventEmitting {
     }
     setDocument() {
         const pageMargin = this.document.pageMargin;
-        this.pagesWrap = new PagesWrap(this.document.pagesSpace, pageMargin, this.document.pageWidth, this.document.pageHeight, this.customComponents.edges);
+        this.pagesWrap = new PagesWrap(this.document.pagesSpace, pageMargin, this.document.pageWidth, this.document.pageHeight, this.customComponents);
     }
     clearCursorStyle() {
         this._cursorStyle = null;
@@ -9483,6 +9645,7 @@ class EditSession extends EventEmitting {
             info.offsetBefore = firstWrapToken.indentBefore;
             info.offsetAfter = firstWrapToken.indentAfter;
             info.lineSpacing = firstWrapToken.lineSpacing;
+            info.hasTable = firstWrapToken.isTable;
         }
         let fontSize = 0;
         let ascent = 0;
@@ -10777,7 +10940,8 @@ class CustomContentService {
         this.injector = injector;
         this.elements = this.injector.get(EXTERNAL_ELEMENT_SERVICE).elements;
     }
-    generateComponents(model, sessionId, properties, contentWidth) {
+    generateComponents(model, sessionId, properties, document) {
+        const contentWidth = document.pageWidth - (document.pageMargin.left + document.pageMargin.right);
         return {
             images: this.componentService.generateComponents(NoderImageComponent, model?.images || [], x => {
                 return { image: x, sessionId };
@@ -10795,7 +10959,7 @@ class CustomContentService {
                     right: model.marginRight,
                     top: model.marginHeader,
                     bottom: model.marginFooter
-                }), model.pageWidth, sessionId, properties)
+                }), document.pageWidth, sessionId, properties)
                 : null
         };
     }
@@ -10886,9 +11050,9 @@ class RegulatorService {
         this.sessionIdIncrement = 0;
         this.edgeEditingPage = null;
     }
-    addMainSession(model, margins, container) {
+    addMainSession(model, margins, pageWidth, container) {
         const currentSessionId = ++this.sessionIdIncrement;
-        const document = new Document(model, margins, DocumentInfo.pagesSpace, model.pageWidth, model.pageHeight);
+        const document = new Document(model, margins, DocumentInfo.pagesSpace, pageWidth, model.pageHeight);
         const renderer = new VirtualRenderer(container.nativeElement, this.editorService);
         const session = new EditSession(document, currentSessionId, this.customContentService, model, this.selection, new GeneralPropertiesModel({
             numberings: model.numberings,
@@ -11137,7 +11301,7 @@ class EditorComponent {
     }
     initEditor(content) {
         this.ngOnDestroy();
-        this.editor = new Editor(content, this.container, this.editorService, this.regulatorService, this.commandsService, this.clipboard);
+        this.editor = new Editor(content, this.container, this.editorService, this.regulatorService, this.commandsService, this.clipboard, this.customPageWidth);
         this.subscriptions.push(this.toggleSidenavSubscription());
     }
     createElement(model) {
@@ -11167,12 +11331,14 @@ class EditorComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ComponentService }, { token: EditorService }, { token: i0.Injector }, { token: RegulatorService }, { token: CommandsService }, { token: i5.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: EditorComponent, selector: "app-editor", inputs: { content: "content" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"container\">\n            <div\n                #container\n                class=\"edit-container\"></div>\n            <app-element-toolbar\n                *ngIf=\"elements.length\"\n                [elements]=\"elements\"\n                [isDisabled]=\"isViewOnly$ | async\"\n                (createElement)=\"createElement($event)\"></app-element-toolbar>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.container{height:100%;display:flex;justify-content:center}app-element-toolbar{right:15px;top:50px}:host::ng-deep .ace-editor{position:relative;line-height:1;font-size:12pt;font-family:Courier New,Courier,monospace;text-align:left;width:100%;height:100%}:host::ng-deep .ace-scroller{position:absolute;overflow:hidden;top:0;bottom:0;-webkit-user-select:none;user-select:none;cursor:text}:host::ng-deep .ace-scrollbar{overflow:hidden scroll;contain:strict;position:absolute;right:0;bottom:0;z-index:6;top:0}:host::ng-deep .ace-scrollbar-inner{position:absolute;cursor:text;left:0;top:0}:host::ng-deep .ace-text-input{position:absolute;z-index:0;width:.5em;height:1em;opacity:0;background:transparent;appearance:none;border:none;resize:none;overflow:hidden;font:inherit;padding:0 1px;margin:0 -1px;contain:strict;-webkit-user-select:text;user-select:text}:host::ng-deep .ace-layer{z-index:1;position:absolute;word-wrap:normal;white-space:pre;height:100%;width:100%;box-sizing:border-box;pointer-events:none}:host::ng-deep .ace-text-layer{font:inherit!important;position:absolute;contain:style size layout;pointer-events:auto}:host::ng-deep .ace-edges-layer{z-index:2}:host::ng-deep .ace-line{display:flex;align-items:baseline;line-height:normal}:host::ng-deep .ace-line .hyperlink-hover{cursor:pointer}:host::ng-deep .ace-line>*{display:inline-block;font-kerning:none}:host::ng-deep .ace-line>*.paragraph-symbol{align-self:flex-end}:host::ng-deep .ace-content{position:inherit;box-sizing:border-box;min-width:100%;contain:style size layout;inset:0}:host::ng-deep .ace-line-group{display:inline-flex}:host::ng-deep .ace-line-group .lines-container{width:100%}:host::ng-deep .ace-line-group .numberingMarker{display:inline-flex}:host::ng-deep .ace-line-group .numberingMarker span{align-self:end}:host::ng-deep .ace-text-layer>.ace-line,:host::ng-deep .ace-text-layer>.ace-line-group,:host::ng-deep .ace-edges-layer>.ace-line,:host::ng-deep .ace-edges-layer>.ace-line-group{contain:style size layout;position:absolute;top:0;left:0;right:0}:host::ng-deep .ace-text-layer>.ace-line-group:has(.focused){z-index:1}:host::ng-deep .ace-line-group:has(.lines-container>.ace-line:first-child>span:not(:empty)){align-items:baseline}:host::ng-deep .ace-cursor-layer{z-index:4}:host::ng-deep .ace-cursor-layer.selecting{display:none}:host::ng-deep .ace-cursor{z-index:4;position:absolute;box-sizing:border-box;border-left:2px solid;transform:translateZ(0)}:host::ng-deep .ace-hidden-cursors .ace-cursor{opacity:0}:host::ng-deep .ace-hidden-cursors{visibility:hidden}:host::ng-deep .ace-animate-blinking .ace-cursor{animation-duration:1s;animation-timing-function:step-end;animation-name:blink-ace-animate;animation-iteration-count:infinite}:host::ng-deep .ace-animate-blinking.ace-smooth-blinking .ace-cursor{animation-duration:1s;animation-timing-function:ease-in-out;animation-name:blink-ace-animate-smooth}@keyframes blink-ace-animate{0%,to{opacity:1}60%{opacity:0}}@keyframes blink-ace-animate-smooth{0%,to{opacity:1}45%{opacity:1}60%{opacity:0}85%{opacity:0}}:host::ng-deep .ace-selection-layer .ace-selection{position:absolute;z-index:5}:host::ng-deep .ace-selection-layer.text-selection .ace-selection{background-color:#5ea8f766}:host::ng-deep .ace-selection-layer.notes-highlight .ace-selection{background:#ff06}:host::ng-deep .ace-underline{text-decoration:underline}:host::ng-deep .ace-bold{font-weight:700}:host::ng-deep .ace-italic{font-style:italic}:host::ng-deep .page{width:100%;position:absolute}:host::ng-deep .page-label{position:absolute;top:40px;right:96px;font-family:Courier New,Courier,monospace;font-size:16px;line-height:1}:host::ng-deep .font-baseline{visibility:hidden;height:500px}:host::ng-deep .font-baseline span:after{content:\"\";height:100%;display:inline-block}:host::ng-deep .ruler-line{position:absolute;top:0;bottom:0;width:0;border-left:1px solid rgba(0,0,0,.4);opacity:.5;display:none;z-index:1}:host::ng-deep .ruler-line.visible{display:block}:host::ng-deep .drawer-container .mat-button-toggle-button{height:48px;border-radius:4px}:host::ng-deep .drawer-container .mat-button-toggle-checked button{height:48px;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i7.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i7.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: ElementToolbarComponent, selector: "app-element-toolbar", inputs: ["isDisabled", "elements"], outputs: ["createElement"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: EditorComponent, selector: "app-editor", inputs: { customPageWidth: "customPageWidth", content: "content" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"container\">\n            <div\n                #container\n                class=\"edit-container\"></div>\n            <app-element-toolbar\n                *ngIf=\"elements.length\"\n                [elements]=\"elements\"\n                [isDisabled]=\"isViewOnly$ | async\"\n                (createElement)=\"createElement($event)\"></app-element-toolbar>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.container{height:100%;display:flex;justify-content:center}app-element-toolbar{right:15px;top:50px}:host::ng-deep .ace-editor{position:relative;line-height:1;font-size:12pt;font-family:Courier New,Courier,monospace;text-align:left;width:100%;height:100%}:host::ng-deep .ace-scroller{position:absolute;overflow:hidden;top:0;bottom:0;-webkit-user-select:none;user-select:none;cursor:text}:host::ng-deep .ace-scrollbar{overflow:hidden scroll;contain:strict;position:absolute;right:0;bottom:0;z-index:6;top:0}:host::ng-deep .ace-scrollbar-inner{position:absolute;cursor:text;left:0;top:0}:host::ng-deep .ace-text-input{position:absolute;z-index:0;width:.5em;height:1em;opacity:0;background:transparent;appearance:none;border:none;resize:none;overflow:hidden;font:inherit;padding:0 1px;margin:0 -1px;contain:strict;-webkit-user-select:text;user-select:text}:host::ng-deep .ace-layer{z-index:1;position:absolute;word-wrap:normal;white-space:pre;height:100%;width:100%;box-sizing:border-box;pointer-events:none}:host::ng-deep .ace-text-layer{font:inherit!important;position:absolute;contain:style size layout;pointer-events:auto}:host::ng-deep .ace-edges-layer{z-index:2}:host::ng-deep .ace-line{display:flex;align-items:baseline;line-height:normal}:host::ng-deep .ace-line .hyperlink-hover{cursor:pointer}:host::ng-deep .ace-line>*{display:inline-block;font-kerning:none}:host::ng-deep .ace-line>*.paragraph-symbol{align-self:flex-end}:host::ng-deep .ace-content{position:inherit;box-sizing:border-box;min-width:100%;contain:style size layout;inset:0}:host::ng-deep .ace-line-group{display:inline-flex}:host::ng-deep .ace-line-group .lines-container{width:100%}:host::ng-deep .ace-line-group .numberingMarker{display:inline-flex}:host::ng-deep .ace-line-group .numberingMarker span{align-self:end}:host::ng-deep .ace-text-layer>.ace-line,:host::ng-deep .ace-text-layer>.ace-line-group,:host::ng-deep .ace-edges-layer>.ace-line,:host::ng-deep .ace-edges-layer>.ace-line-group{contain:style size layout;position:absolute;top:0;left:0;right:0}:host::ng-deep .ace-text-layer>.ace-line-group:has(.focused){z-index:1}:host::ng-deep .ace-line-group:has(.lines-container>.ace-line:first-child>span:not(:empty)){align-items:baseline}:host::ng-deep .ace-cursor-layer{z-index:4}:host::ng-deep .ace-cursor-layer.selecting{display:none}:host::ng-deep .ace-cursor{z-index:4;position:absolute;box-sizing:border-box;border-left:2px solid;transform:translateZ(0)}:host::ng-deep .ace-hidden-cursors .ace-cursor{opacity:0}:host::ng-deep .ace-hidden-cursors{visibility:hidden}:host::ng-deep .ace-animate-blinking .ace-cursor{animation-duration:1s;animation-timing-function:step-end;animation-name:blink-ace-animate;animation-iteration-count:infinite}:host::ng-deep .ace-animate-blinking.ace-smooth-blinking .ace-cursor{animation-duration:1s;animation-timing-function:ease-in-out;animation-name:blink-ace-animate-smooth}@keyframes blink-ace-animate{0%,to{opacity:1}60%{opacity:0}}@keyframes blink-ace-animate-smooth{0%,to{opacity:1}45%{opacity:1}60%{opacity:0}85%{opacity:0}}:host::ng-deep .ace-selection-layer .ace-selection{position:absolute;z-index:5}:host::ng-deep .ace-selection-layer.text-selection .ace-selection{background-color:#5ea8f766}:host::ng-deep .ace-selection-layer.notes-highlight .ace-selection{background:#ff06}:host::ng-deep .ace-underline{text-decoration:underline}:host::ng-deep .ace-bold{font-weight:700}:host::ng-deep .ace-italic{font-style:italic}:host::ng-deep .page{width:100%;position:absolute}:host::ng-deep .page-label{position:absolute;top:40px;right:96px;font-family:Courier New,Courier,monospace;font-size:16px;line-height:1}:host::ng-deep .font-baseline{visibility:hidden;height:500px}:host::ng-deep .font-baseline span:after{content:\"\";height:100%;display:inline-block}:host::ng-deep .ruler-line{position:absolute;top:0;bottom:0;width:0;border-left:1px solid rgba(0,0,0,.4);opacity:.5;display:none;z-index:1}:host::ng-deep .ruler-line.visible{display:block}:host::ng-deep .drawer-container .mat-button-toggle-button{height:48px;border-radius:4px}:host::ng-deep .drawer-container .mat-button-toggle-checked button{height:48px;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i7.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i7.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: ElementToolbarComponent, selector: "app-element-toolbar", inputs: ["isDisabled", "elements"], outputs: ["createElement"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"container\">\n            <div\n                #container\n                class=\"edit-container\"></div>\n            <app-element-toolbar\n                *ngIf=\"elements.length\"\n                [elements]=\"elements\"\n                [isDisabled]=\"isViewOnly$ | async\"\n                (createElement)=\"createElement($event)\"></app-element-toolbar>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.container{height:100%;display:flex;justify-content:center}app-element-toolbar{right:15px;top:50px}:host::ng-deep .ace-editor{position:relative;line-height:1;font-size:12pt;font-family:Courier New,Courier,monospace;text-align:left;width:100%;height:100%}:host::ng-deep .ace-scroller{position:absolute;overflow:hidden;top:0;bottom:0;-webkit-user-select:none;user-select:none;cursor:text}:host::ng-deep .ace-scrollbar{overflow:hidden scroll;contain:strict;position:absolute;right:0;bottom:0;z-index:6;top:0}:host::ng-deep .ace-scrollbar-inner{position:absolute;cursor:text;left:0;top:0}:host::ng-deep .ace-text-input{position:absolute;z-index:0;width:.5em;height:1em;opacity:0;background:transparent;appearance:none;border:none;resize:none;overflow:hidden;font:inherit;padding:0 1px;margin:0 -1px;contain:strict;-webkit-user-select:text;user-select:text}:host::ng-deep .ace-layer{z-index:1;position:absolute;word-wrap:normal;white-space:pre;height:100%;width:100%;box-sizing:border-box;pointer-events:none}:host::ng-deep .ace-text-layer{font:inherit!important;position:absolute;contain:style size layout;pointer-events:auto}:host::ng-deep .ace-edges-layer{z-index:2}:host::ng-deep .ace-line{display:flex;align-items:baseline;line-height:normal}:host::ng-deep .ace-line .hyperlink-hover{cursor:pointer}:host::ng-deep .ace-line>*{display:inline-block;font-kerning:none}:host::ng-deep .ace-line>*.paragraph-symbol{align-self:flex-end}:host::ng-deep .ace-content{position:inherit;box-sizing:border-box;min-width:100%;contain:style size layout;inset:0}:host::ng-deep .ace-line-group{display:inline-flex}:host::ng-deep .ace-line-group .lines-container{width:100%}:host::ng-deep .ace-line-group .numberingMarker{display:inline-flex}:host::ng-deep .ace-line-group .numberingMarker span{align-self:end}:host::ng-deep .ace-text-layer>.ace-line,:host::ng-deep .ace-text-layer>.ace-line-group,:host::ng-deep .ace-edges-layer>.ace-line,:host::ng-deep .ace-edges-layer>.ace-line-group{contain:style size layout;position:absolute;top:0;left:0;right:0}:host::ng-deep .ace-text-layer>.ace-line-group:has(.focused){z-index:1}:host::ng-deep .ace-line-group:has(.lines-container>.ace-line:first-child>span:not(:empty)){align-items:baseline}:host::ng-deep .ace-cursor-layer{z-index:4}:host::ng-deep .ace-cursor-layer.selecting{display:none}:host::ng-deep .ace-cursor{z-index:4;position:absolute;box-sizing:border-box;border-left:2px solid;transform:translateZ(0)}:host::ng-deep .ace-hidden-cursors .ace-cursor{opacity:0}:host::ng-deep .ace-hidden-cursors{visibility:hidden}:host::ng-deep .ace-animate-blinking .ace-cursor{animation-duration:1s;animation-timing-function:step-end;animation-name:blink-ace-animate;animation-iteration-count:infinite}:host::ng-deep .ace-animate-blinking.ace-smooth-blinking .ace-cursor{animation-duration:1s;animation-timing-function:ease-in-out;animation-name:blink-ace-animate-smooth}@keyframes blink-ace-animate{0%,to{opacity:1}60%{opacity:0}}@keyframes blink-ace-animate-smooth{0%,to{opacity:1}45%{opacity:1}60%{opacity:0}85%{opacity:0}}:host::ng-deep .ace-selection-layer .ace-selection{position:absolute;z-index:5}:host::ng-deep .ace-selection-layer.text-selection .ace-selection{background-color:#5ea8f766}:host::ng-deep .ace-selection-layer.notes-highlight .ace-selection{background:#ff06}:host::ng-deep .ace-underline{text-decoration:underline}:host::ng-deep .ace-bold{font-weight:700}:host::ng-deep .ace-italic{font-style:italic}:host::ng-deep .page{width:100%;position:absolute}:host::ng-deep .page-label{position:absolute;top:40px;right:96px;font-family:Courier New,Courier,monospace;font-size:16px;line-height:1}:host::ng-deep .font-baseline{visibility:hidden;height:500px}:host::ng-deep .font-baseline span:after{content:\"\";height:100%;display:inline-block}:host::ng-deep .ruler-line{position:absolute;top:0;bottom:0;width:0;border-left:1px solid rgba(0,0,0,.4);opacity:.5;display:none;z-index:1}:host::ng-deep .ruler-line.visible{display:block}:host::ng-deep .drawer-container .mat-button-toggle-button{height:48px;border-radius:4px}:host::ng-deep .drawer-container .mat-button-toggle-checked button{height:48px;border-radius:4px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentService }, { type: EditorService }, { type: i0.Injector }, { type: RegulatorService }, { type: CommandsService }, { type: i5.Clipboard }], propDecorators: { content: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentService }, { type: EditorService }, { type: i0.Injector }, { type: RegulatorService }, { type: CommandsService }, { type: i5.Clipboard }], propDecorators: { customPageWidth: [{
+                type: Input
+            }], content: [{
                 type: Input
             }], container: [{
                 type: ViewChild,
@@ -12934,7 +13100,7 @@ class EditorHeaderComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: CustomIconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: EditorHeaderComponent, isStandalone: true, selector: "app-editor-header", inputs: { isViewOnly: "isViewOnly", hasSelection: "hasSelection", clipboardData: "clipboardData", title: "title", historyInfo: "historyInfo", styles: "styles" }, outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", print: "print", insertPageBreak: "insertPageBreak", createDocument: "createDocument", insertImage: "insertImage", changeMode: "changeMode", renameDocumentTitle: "renameDocumentTitle", delete: "delete", openEditMenu: "openEditMenu", undo: "undo", redo: "redo", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected", insertLink: "insertLink", createElement: "createElement", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertTable: "insertTable" }, providers: [ExternalElementService], viewQueries: [{ propertyName: "titleSpan", first: true, predicate: ["titleSpan"], descendants: true, static: true }, { propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], ngImport: i0, template: "<div class=\"menu-header\">\n    <div class=\"file-name\">\n        <span\n            #titleSpan\n            class=\"title\"\n            matTooltip=\"Double click to rename\"\n            (blur)=\"onRenameTitle($event)\"\n            (keydown.enter)=\"$event.target.blur()\"\n            (dblclick)=\"onFocus($event)\">\n            {{ title }}\n        </span>\n    </div>\n    <div class=\"menu-buttons\">\n        <button\n            id=\"editor-header-menu-file\"\n            mat-button\n            [matMenuTriggerFor]=\"fileMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\">\n            File\n        </button>\n        <mat-menu #fileMenu=\"matMenu\">\n            <button\n                *ngIf=\"!isViewOnly\"\n                id=\"editor-header-menu-item-new\"\n                mat-menu-item\n                (click)=\"createDocument.emit()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-add-new\"></mat-icon>\n                    <span class=\"menu-item-text\">New</span>\n                </div>\n            </button>\n            <input\n                #fileInput\n                class=\"upload-input\"\n                accept=\".docx\"\n                type=\"file\"\n                id=\"file-input\"\n                (change)=\"onOpenFileFromDisk($event)\" />\n            <button\n                *ngIf=\"!isViewOnly\"\n                id=\"editor-header-menu-item-open-from\"\n                mat-menu-item\n                (click)=\"fileInput.click()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-open-from\"></mat-icon>\n                    <span class=\"menu-item-text\">Open From</span>\n                    <span class=\"hot-keys\">Ctrl+O</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-save-as\"\n                mat-menu-item\n                (click)=\"onSaveAs()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-save\"></mat-icon>\n                    <span class=\"menu-item-text\">Save As</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-rename\"\n                mat-menu-item\n                (click)=\"onRename()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-rename\"></mat-icon>\n                    <span class=\"menu-item-text\">Rename</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-print\"\n                mat-menu-item\n                (click)=\"onPrint()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-print\"></mat-icon>\n                    <span class=\"menu-item-text\">Print</span>\n                    <span class=\"hot-keys\">Ctrl+P</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-delete\"\n                mat-menu-item\n                (click)=\"onDelete()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-delete\"></mat-icon>\n                    <span class=\"menu-item-text\">Delete</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"editor-header-menu-edit\"\n            mat-button\n            [matMenuTriggerFor]=\"editMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\"\n            (menuOpened)=\"menuOpened()\">\n            Edit\n        </button>\n        <mat-menu #editMenu=\"matMenu\">\n            <button\n                id=\"editor-header-menu-item-undo\"\n                mat-menu-item\n                [disabled]=\"!canUndo\"\n                (click)=\"onUndo()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-undo\"></mat-icon>\n                    <span class=\"menu-item-text\">Undo</span>\n                    <span class=\"hot-keys\">Ctrl+Z</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-redo\"\n                mat-menu-item\n                [disabled]=\"!canRedo\"\n                (click)=\"onRedo()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-redo\"></mat-icon>\n                    <span class=\"menu-item-text\">Redo</span>\n                    <span class=\"hot-keys\">Ctrl+Y</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-cut\"\n                mat-menu-item\n                [disabled]=\"!hasSelection\"\n                (click)=\"onCut()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-content-cut\"></mat-icon>\n                    <span class=\"menu-item-text\">Cut</span>\n                    <span class=\"hot-keys\">Ctrl+X</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-copy\"\n                mat-menu-item\n                [disabled]=\"!hasSelection\"\n                (click)=\"onCopy()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-file-copy\"></mat-icon>\n                    <span class=\"menu-item-text\">Copy</span>\n                    <span class=\"hot-keys\">Ctrl+C</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-paste\"\n                mat-menu-item\n                [disabled]=\"!clipboardData?.length\"\n                (click)=\"onPaste()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-content-paste\"></mat-icon>\n                    <span class=\"menu-item-text\">Paste</span>\n                    <span class=\"hot-keys\">Ctrl+V</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-select-all\"\n                mat-menu-item\n                (click)=\"onSelectAll()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-select-all\"></mat-icon>\n                    <span class=\"menu-item-text\">Select All</span>\n                    <span class=\"hot-keys\">Ctrl+A</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-delete-text\"\n                mat-menu-item\n                [disabled]=\"!hasSelection\"\n                (click)=\"onRemoveSelected()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-delete\"></mat-icon>\n                    <span class=\"menu-item-text\">Delete</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            *ngIf=\"!isViewOnly\"\n            #insertMenuTrigger=\"matMenuTrigger\"\n            id=\"editor-header-menu-insert\"\n            mat-button\n            [matMenuTriggerFor]=\"insertMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\">\n            Insert\n        </button>\n        <mat-menu #insertMenu=\"matMenu\">\n            <input\n                #imageFileInput\n                class=\"upload-input\"\n                accept=\"image/gif, image/jpeg, image/png, image/bmp, image/webp\"\n                type=\"file\"\n                id=\"image-file-input\"\n                (change)=\"onInsertImage($event)\" />\n            <button\n                id=\"editor-header-menu-item-image\"\n                mat-menu-item\n                (click)=\"imageFileInput.click()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-image\"></mat-icon>\n                    <span class=\"menu-item-text\">Image</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-table\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"tableInsert\"\n                (menuOpened)=\"showInsertTableMenu = true\"\n                (menuClosed)=\"onTableInsertMenuClosed()\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-table\"></mat-icon>\n                Table\n            </button>\n            <button\n                id=\"editor-header-menu-item-link\"\n                mat-menu-item\n                (click)=\"onInsertLink()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-link-on\"></mat-icon>\n                    <span class=\"menu-item-text\">Link</span>\n                    <span class=\"hot-keys\">Ctrl+K</span>\n                </div>\n            </button>\n            <button\n                *ngFor=\"let element of elements\"\n                id=\"editor-header-menu-item-{{ element.title }}\"\n                mat-menu-item\n                (click)=\"onCreate(element)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"{{ element.icon }}\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ element.name }}</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-headers-footers\"\n                mat-menu-item\n                class=\"hidden\"\n                [matMenuTriggerFor]=\"listHeadersFootersMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-headers-footers\"></mat-icon>\n                    <span class=\"menu-item-text\">Headers & Footers</span>\n                </div>\n            </button>\n            <mat-menu #listHeadersFootersMenu=\"matMenu\">\n                <button\n                    id=\"editor-header-menu-item-header\"\n                    mat-menu-item>\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-header\"></mat-icon>\n                        <span class=\"menu-item-text\">Header</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-footer\"\n                    mat-menu-item>\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-bottom\"></mat-icon>\n                        <span class=\"menu-item-text\">Footer</span>\n                    </div>\n                </button>\n            </mat-menu>\n        </mat-menu>\n        <button\n            *ngIf=\"!isViewOnly\"\n            id=\"editor-header-menu-layout\"\n            mat-button\n            [matMenuTriggerFor]=\"layoutMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\">\n            Layout\n        </button>\n        <mat-menu #layoutMenu=\"matMenu\">\n            <button\n                id=\"editor-header-menu-item-page-break\"\n                mat-menu-item\n                (click)=\"insertPageBreak.emit()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-page-break\"></mat-icon>\n                    <span class=\"menu-item-text\">Page Break</span>\n                    <span class=\"hot-keys\">Ctrl+Enter</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            *ngIf=\"!isViewOnly\"\n            id=\"editor-header-menu-format\"\n            mat-button\n            [matMenuTriggerFor]=\"formatMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\">\n            Format\n        </button>\n        <mat-menu #formatMenu=\"matMenu\">\n            <button\n                id=\"editor-header-menu-item-align\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listAlignMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-format-alignleft\"></mat-icon>\n                    <span class=\"menu-item-text\">Align</span>\n                </div>\n            </button>\n            <mat-menu #listAlignMenu=\"matMenu\">\n                <button\n                    id=\"editor-header-menu-item-align-left\"\n                    mat-menu-item\n                    (click)=\"onSelectFormat(alignments.Left)\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-alignleft\"></mat-icon>\n                        <span class=\"menu-item-text\">Left</span>\n                        <span class=\"hot-keys\">Ctrl+L</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-align-center\"\n                    mat-menu-item\n                    (click)=\"onSelectFormat(alignments.Center)\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-aligncenter\"></mat-icon>\n                        <span class=\"menu-item-text\">Center</span>\n                        <span class=\"hot-keys\">Ctrl+E</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-align-right\"\n                    mat-menu-item\n                    (click)=\"onSelectFormat(alignments.Right)\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-alignright\"></mat-icon>\n                        <span class=\"menu-item-text\">Right</span>\n                        <span class=\"hot-keys\">Ctrl+R</span>\n                    </div>\n                </button>\n            </mat-menu>\n            <button\n                id=\"editor-header-menu-item-bullets-numbering\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listBulletsNumberingMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-format-bulleted\"></mat-icon>\n                    <span class=\"menu-item-text\">Bullets & Numbering</span>\n                </div>\n            </button>\n            <mat-menu #listBulletsNumberingMenu=\"matMenu\">\n                <button\n                    id=\"editor-header-menu-item-bullets\"\n                    mat-menu-item\n                    [matMenuTriggerFor]=\"listBulletedMenu\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-bulleted\"></mat-icon>\n                        <span class=\"menu-item-text\">Bullet List Menu</span>\n                    </div>\n                </button>\n                <mat-menu\n                    #listBulletedMenu=\"matMenu\"\n                    yPosition=\"below\">\n                    <div class=\"list-icon list-marker\">\n                        <mat-icon\n                            svgIcon=\"marker-1\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList1)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList1\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"marker-2\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList2)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList2\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"marker-3\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList3)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList3\"></mat-icon>\n                    </div>\n                    <div class=\"list-icon list-marker\">\n                        <mat-icon\n                            svgIcon=\"marker-4\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList4)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList4\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"marker-5\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList5)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList5\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"marker-6\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList6)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList6\"></mat-icon>\n                    </div>\n                </mat-menu>\n                <button\n                    id=\"editor-header-menu-item-numbering\"\n                    mat-menu-item\n                    [matMenuTriggerFor]=\"listNumberedMenu\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-numbered\"></mat-icon>\n                        <span class=\"menu-item-text\">Numbered List Menu</span>\n                    </div>\n                </button>\n                <mat-menu\n                    #listNumberedMenu=\"matMenu\"\n                    yPosition=\"below\">\n                    <div class=\"list-icon list-number\">\n                        <mat-icon\n                            svgIcon=\"number-1\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList1)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList1\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"number-2\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList2)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList2\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"number-3\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList3)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList3\"></mat-icon>\n                    </div>\n                    <div class=\"list-icon list-number\">\n                        <mat-icon\n                            svgIcon=\"number-4\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList4)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList4\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"number-5\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList5)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList5\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"number-6\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList6)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList6\"></mat-icon>\n                    </div>\n                </mat-menu>\n            </mat-menu>\n            <button\n                id=\"editor-header-menu-item-text\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listTextMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-format-bold\"></mat-icon>\n                    <span class=\"menu-item-text\">Text</span>\n                </div>\n            </button>\n            <mat-menu #listTextMenu=\"matMenu\">\n                <button\n                    id=\"editor-header-menu-item-bold\"\n                    mat-menu-item\n                    (click)=\"onApplyBold()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-bold\"></mat-icon>\n                        <span class=\"menu-item-text\">Bold</span>\n                        <span class=\"hot-keys\">Ctrl+B</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-italic\"\n                    mat-menu-item\n                    (click)=\"onApplyItalic()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-italic\"></mat-icon>\n                        <span class=\"menu-item-text\">Italic</span>\n                        <span class=\"hot-keys\">Ctrl+I</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-underlined\"\n                    mat-menu-item\n                    (click)=\"onApplyUnderline()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-underlined\"></mat-icon>\n                        <span class=\"menu-item-text\">Underlined</span>\n                        <span class=\"hot-keys\">Ctrl+U</span>\n                    </div>\n                </button>\n            </mat-menu>\n            <button\n                id=\"editor-header-menu-item-header-footer\"\n                mat-menu-item\n                class=\"hidden\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-headers-footers\"></mat-icon>\n                    <span class=\"menu-item-text\">Headers & Footers</span>\n                </div>\n            </button>\n        </mat-menu>\n        <mat-menu\n            #tableInsert=\"matMenu\"\n            class=\"insert-table\">\n            <app-insert-table\n                *ngIf=\"showInsertTableMenu\"\n                (selectSizes)=\"insertTable.emit($event)\" />\n        </mat-menu>\n    </div>\n</div>\n\n<div class=\"editor-mode\">\n    <mat-form-field appearance=\"outline\">\n        <mat-select\n            [(value)]=\"selectedMode\"\n            (selectionChange)=\"changeMode.emit($event)\">\n            <mat-select-trigger>\n                <div class=\"select-trigger\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"{{ modeOptions[selectedMode].icon }}\"></mat-icon>\n                    <span class=\"item-title\">{{ modeOptions[selectedMode].name }}</span>\n                    <div class=\"separator\"></div>\n                </div>\n            </mat-select-trigger>\n            <mat-option\n                *ngFor=\"let mode of modeOptions\"\n                class=\"editor-mode-option\"\n                [value]=\"mode.id\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"{{ mode.icon }}\"></mat-icon>\n                <div class=\"item-content\">\n                    <span class=\"item-title\">{{ mode.name }}</span>\n                    <span class=\"item-text\">{{ mode.text }}</span>\n                </div>\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n</div>\n", styles: [":host{width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 24px}:host .mat-mdc-form-field{width:auto;height:24px;text-align:right}:host .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host .mat-mdc-form-field ::ng-deep .mat-mdc-text-field-wrapper{align-items:center}:host .mat-mdc-form-field ::ng-deep .mdc-notched-outline>*{border:unset}:host .mat-mdc-form-field ::ng-deep .mat-mdc-select-value{margin-right:4px}:host .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-infix{padding:0;width:auto}:host .mat-mdc-form-field ::ng-deep .mat-mdc-select-arrow svg{top:0}:host .mat-mdc-form-field .mat-mdc-select{font-size:14px;font-weight:700}.upload-input{display:none}mat-icon{width:24px;height:24px;font-size:24px}.editor-mode{display:flex;justify-content:flex-end;align-items:center;overflow:hidden;height:40px;border:1px solid;border-radius:20px}::ng-deep .cdk-overlay-pane{min-width:min-content}.separator{border-left:1px solid;opacity:.1;height:18px;margin:2px 8px}.select-trigger{display:inline-flex;text-align:left;margin-top:1px}.select-trigger .mat-icon{width:32px}.item-content{display:grid}.item-content .item-title{line-height:6px;padding-top:10px}.item-content .item-text{font-size:10px;font-weight:400;text-wrap:nowrap}.menu-buttons{display:flex;flex-wrap:wrap}.menu-buttons button{font-weight:500;height:24px;min-width:unset}.menu-header{display:flex;flex-direction:column;flex:1;overflow:hidden}.file-name{flex-basis:0;margin:0 8px 6px;display:block;min-height:32px;overflow:hidden}.file-name .title{font-size:18px;font-weight:500;line-height:normal;outline:none;display:inline-block;white-space:nowrap;min-width:1px;min-height:32px;overflow:hidden;max-width:100%;-webkit-user-select:none;user-select:none}.file-name .title:not(:focus){text-overflow:ellipsis}.heading-menu{display:inline-flex;width:210px}.hot-keys{text-align:end;width:auto}.menu-item-text{white-space:nowrap;width:64%}.mat-mdc-menu-item .mat-icon{margin-right:4px;width:28px}#editor-header-menu-item-print,#editor-header-menu-item-redo,#editor-header-menu-item-paste,#editor-header-menu-item-link,#editor-header-menu-item-image{border-bottom:1px solid}.hidden{display:none}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none}.list-icon .selected,.list-number .selected,.list-icon .selected:hover,.list-number .selected:hover{border:2px solid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: InsertTableComponent, selector: "app-insert-table", outputs: ["selectSizes"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.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: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7$2.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.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: "17.2.1", type: EditorHeaderComponent, isStandalone: true, selector: "app-editor-header", inputs: { isViewOnly: "isViewOnly", hasSelection: "hasSelection", clipboardData: "clipboardData", title: "title", historyInfo: "historyInfo", styles: "styles" }, outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", print: "print", insertPageBreak: "insertPageBreak", createDocument: "createDocument", insertImage: "insertImage", changeMode: "changeMode", renameDocumentTitle: "renameDocumentTitle", delete: "delete", openEditMenu: "openEditMenu", undo: "undo", redo: "redo", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected", insertLink: "insertLink", createElement: "createElement", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertTable: "insertTable" }, providers: [ExternalElementService], viewQueries: [{ propertyName: "titleSpan", first: true, predicate: ["titleSpan"], descendants: true, static: true }, { propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], ngImport: i0, template: "<div class=\"menu-header\">\n    <div class=\"file-name\">\n        <span\n            #titleSpan\n            class=\"title\"\n            matTooltip=\"Double click to rename\"\n            (blur)=\"onRenameTitle($event)\"\n            (keydown.enter)=\"$event.target.blur()\"\n            (dblclick)=\"onFocus($event)\">\n            {{ title }}\n        </span>\n    </div>\n    <div class=\"menu-buttons\">\n        <button\n            id=\"editor-header-menu-file\"\n            mat-button\n            [matMenuTriggerFor]=\"fileMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\">\n            File\n        </button>\n        <mat-menu #fileMenu=\"matMenu\">\n            <button\n                *ngIf=\"!isViewOnly\"\n                id=\"editor-header-menu-item-new\"\n                mat-menu-item\n                (click)=\"createDocument.emit()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-add-new\"></mat-icon>\n                    <span class=\"menu-item-text\">New</span>\n                </div>\n            </button>\n            <input\n                #fileInput\n                class=\"upload-input\"\n                accept=\".docx\"\n                type=\"file\"\n                id=\"file-input\"\n                (change)=\"onOpenFileFromDisk($event)\" />\n            <button\n                *ngIf=\"!isViewOnly\"\n                id=\"editor-header-menu-item-open-from\"\n                mat-menu-item\n                (click)=\"fileInput.click()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-open-from\"></mat-icon>\n                    <span class=\"menu-item-text\">Open From</span>\n                    <span class=\"hot-keys\">Ctrl+O</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-save-as\"\n                mat-menu-item\n                (click)=\"onSaveAs()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-save\"></mat-icon>\n                    <span class=\"menu-item-text\">Save As</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-rename\"\n                mat-menu-item\n                (click)=\"onRename()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-rename\"></mat-icon>\n                    <span class=\"menu-item-text\">Rename</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-print\"\n                mat-menu-item\n                (click)=\"onPrint()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-print\"></mat-icon>\n                    <span class=\"menu-item-text\">Print</span>\n                    <span class=\"hot-keys\">Ctrl+P</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-delete\"\n                mat-menu-item\n                (click)=\"onDelete()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-delete\"></mat-icon>\n                    <span class=\"menu-item-text\">Delete</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"editor-header-menu-edit\"\n            mat-button\n            [matMenuTriggerFor]=\"editMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\"\n            (menuOpened)=\"menuOpened()\">\n            Edit\n        </button>\n        <mat-menu #editMenu=\"matMenu\">\n            <button\n                id=\"editor-header-menu-item-undo\"\n                mat-menu-item\n                [disabled]=\"!canUndo\"\n                (click)=\"onUndo()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-undo\"></mat-icon>\n                    <span class=\"menu-item-text\">Undo</span>\n                    <span class=\"hot-keys\">Ctrl+Z</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-redo\"\n                mat-menu-item\n                [disabled]=\"!canRedo\"\n                (click)=\"onRedo()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-redo\"></mat-icon>\n                    <span class=\"menu-item-text\">Redo</span>\n                    <span class=\"hot-keys\">Ctrl+Y</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-cut\"\n                mat-menu-item\n                [disabled]=\"!hasSelection\"\n                (click)=\"onCut()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-content-cut\"></mat-icon>\n                    <span class=\"menu-item-text\">Cut</span>\n                    <span class=\"hot-keys\">Ctrl+X</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-copy\"\n                mat-menu-item\n                [disabled]=\"!hasSelection\"\n                (click)=\"onCopy()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-file-copy\"></mat-icon>\n                    <span class=\"menu-item-text\">Copy</span>\n                    <span class=\"hot-keys\">Ctrl+C</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-paste\"\n                mat-menu-item\n                [disabled]=\"!clipboardData?.length\"\n                (click)=\"onPaste()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-content-paste\"></mat-icon>\n                    <span class=\"menu-item-text\">Paste</span>\n                    <span class=\"hot-keys\">Ctrl+V</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-select-all\"\n                mat-menu-item\n                (click)=\"onSelectAll()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-select-all\"></mat-icon>\n                    <span class=\"menu-item-text\">Select All</span>\n                    <span class=\"hot-keys\">Ctrl+A</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-delete-text\"\n                mat-menu-item\n                [disabled]=\"!hasSelection\"\n                (click)=\"onRemoveSelected()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-delete\"></mat-icon>\n                    <span class=\"menu-item-text\">Delete</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            *ngIf=\"!isViewOnly\"\n            #insertMenuTrigger=\"matMenuTrigger\"\n            id=\"editor-header-menu-insert\"\n            mat-button\n            [matMenuTriggerFor]=\"insertMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\">\n            Insert\n        </button>\n        <mat-menu #insertMenu=\"matMenu\">\n            <input\n                #imageFileInput\n                class=\"upload-input\"\n                accept=\"image/gif, image/jpeg, image/png, image/bmp, image/webp\"\n                type=\"file\"\n                id=\"image-file-input\"\n                (change)=\"onInsertImage($event)\" />\n            <button\n                id=\"editor-header-menu-item-image\"\n                mat-menu-item\n                (click)=\"imageFileInput.click()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-image\"></mat-icon>\n                    <span class=\"menu-item-text\">Image</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-table\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"tableInsert\"\n                (menuOpened)=\"showInsertTableMenu = true\"\n                (menuClosed)=\"onTableInsertMenuClosed()\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"icon-table\"></mat-icon>\n                Table\n            </button>\n            <button\n                id=\"editor-header-menu-item-link\"\n                mat-menu-item\n                (click)=\"onInsertLink()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-link-on\"></mat-icon>\n                    <span class=\"menu-item-text\">Link</span>\n                    <span class=\"hot-keys\">Ctrl+K</span>\n                </div>\n            </button>\n            <button\n                *ngFor=\"let element of elements\"\n                id=\"editor-header-menu-item-{{ element.title }}\"\n                mat-menu-item\n                (click)=\"onCreate(element)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"{{ element.icon }}\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ element.name }}</span>\n                </div>\n            </button>\n            <button\n                id=\"editor-header-menu-item-headers-footers\"\n                mat-menu-item\n                class=\"hidden\"\n                [matMenuTriggerFor]=\"listHeadersFootersMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-headers-footers\"></mat-icon>\n                    <span class=\"menu-item-text\">Headers & Footers</span>\n                </div>\n            </button>\n            <mat-menu #listHeadersFootersMenu=\"matMenu\">\n                <button\n                    id=\"editor-header-menu-item-header\"\n                    mat-menu-item>\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-header\"></mat-icon>\n                        <span class=\"menu-item-text\">Header</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-footer\"\n                    mat-menu-item>\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-bottom\"></mat-icon>\n                        <span class=\"menu-item-text\">Footer</span>\n                    </div>\n                </button>\n            </mat-menu>\n        </mat-menu>\n        <button\n            *ngIf=\"!isViewOnly\"\n            id=\"editor-header-menu-layout\"\n            mat-button\n            [matMenuTriggerFor]=\"layoutMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\">\n            Layout\n        </button>\n        <mat-menu #layoutMenu=\"matMenu\">\n            <button\n                id=\"editor-header-menu-item-page-break\"\n                mat-menu-item\n                (click)=\"insertPageBreak.emit()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-page-break\"></mat-icon>\n                    <span class=\"menu-item-text\">Page Break</span>\n                    <span class=\"hot-keys\">Ctrl+Enter</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            *ngIf=\"!isViewOnly\"\n            id=\"editor-header-menu-format\"\n            mat-button\n            [matMenuTriggerFor]=\"formatMenu\"\n            [matMenuTriggerRestoreFocus]=\"false\">\n            Format\n        </button>\n        <mat-menu #formatMenu=\"matMenu\">\n            <button\n                id=\"editor-header-menu-item-align\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listAlignMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-format-alignleft\"></mat-icon>\n                    <span class=\"menu-item-text\">Align</span>\n                </div>\n            </button>\n            <mat-menu #listAlignMenu=\"matMenu\">\n                <button\n                    id=\"editor-header-menu-item-align-left\"\n                    mat-menu-item\n                    (click)=\"onSelectFormat(alignments.Left)\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-alignleft\"></mat-icon>\n                        <span class=\"menu-item-text\">Left</span>\n                        <span class=\"hot-keys\">Ctrl+L</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-align-center\"\n                    mat-menu-item\n                    (click)=\"onSelectFormat(alignments.Center)\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-aligncenter\"></mat-icon>\n                        <span class=\"menu-item-text\">Center</span>\n                        <span class=\"hot-keys\">Ctrl+E</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-align-right\"\n                    mat-menu-item\n                    (click)=\"onSelectFormat(alignments.Right)\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-alignright\"></mat-icon>\n                        <span class=\"menu-item-text\">Right</span>\n                        <span class=\"hot-keys\">Ctrl+R</span>\n                    </div>\n                </button>\n            </mat-menu>\n            <button\n                id=\"editor-header-menu-item-bullets-numbering\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listBulletsNumberingMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-format-bulleted\"></mat-icon>\n                    <span class=\"menu-item-text\">Bullets & Numbering</span>\n                </div>\n            </button>\n            <mat-menu #listBulletsNumberingMenu=\"matMenu\">\n                <button\n                    id=\"editor-header-menu-item-bullets\"\n                    mat-menu-item\n                    [matMenuTriggerFor]=\"listBulletedMenu\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-bulleted\"></mat-icon>\n                        <span class=\"menu-item-text\">Bullet List Menu</span>\n                    </div>\n                </button>\n                <mat-menu\n                    #listBulletedMenu=\"matMenu\"\n                    yPosition=\"below\">\n                    <div class=\"list-icon list-marker\">\n                        <mat-icon\n                            svgIcon=\"marker-1\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList1)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList1\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"marker-2\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList2)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList2\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"marker-3\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList3)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList3\"></mat-icon>\n                    </div>\n                    <div class=\"list-icon list-marker\">\n                        <mat-icon\n                            svgIcon=\"marker-4\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList4)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList4\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"marker-5\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList5)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList5\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"marker-6\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList6)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList6\"></mat-icon>\n                    </div>\n                </mat-menu>\n                <button\n                    id=\"editor-header-menu-item-numbering\"\n                    mat-menu-item\n                    [matMenuTriggerFor]=\"listNumberedMenu\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-numbered\"></mat-icon>\n                        <span class=\"menu-item-text\">Numbered List Menu</span>\n                    </div>\n                </button>\n                <mat-menu\n                    #listNumberedMenu=\"matMenu\"\n                    yPosition=\"below\">\n                    <div class=\"list-icon list-number\">\n                        <mat-icon\n                            svgIcon=\"number-1\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList1)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList1\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"number-2\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList2)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList2\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"number-3\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList3)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList3\"></mat-icon>\n                    </div>\n                    <div class=\"list-icon list-number\">\n                        <mat-icon\n                            svgIcon=\"number-4\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList4)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList4\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"number-5\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList5)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList5\"></mat-icon>\n                        <mat-icon\n                            svgIcon=\"number-6\"\n                            (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList6)\"\n                            [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList6\"></mat-icon>\n                    </div>\n                </mat-menu>\n            </mat-menu>\n            <button\n                id=\"editor-header-menu-item-text\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listTextMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-format-bold\"></mat-icon>\n                    <span class=\"menu-item-text\">Text</span>\n                </div>\n            </button>\n            <mat-menu #listTextMenu=\"matMenu\">\n                <button\n                    id=\"editor-header-menu-item-bold\"\n                    mat-menu-item\n                    (click)=\"onApplyBold()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-bold\"></mat-icon>\n                        <span class=\"menu-item-text\">Bold</span>\n                        <span class=\"hot-keys\">Ctrl+B</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-italic\"\n                    mat-menu-item\n                    (click)=\"onApplyItalic()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-italic\"></mat-icon>\n                        <span class=\"menu-item-text\">Italic</span>\n                        <span class=\"hot-keys\">Ctrl+I</span>\n                    </div>\n                </button>\n                <button\n                    id=\"editor-header-menu-item-underlined\"\n                    mat-menu-item\n                    (click)=\"onApplyUnderline()\">\n                    <div class=\"heading-menu\">\n                        <mat-icon\n                            fontSet=\"nc-icon\"\n                            fontIcon=\"icon-format-underlined\"></mat-icon>\n                        <span class=\"menu-item-text\">Underlined</span>\n                        <span class=\"hot-keys\">Ctrl+U</span>\n                    </div>\n                </button>\n            </mat-menu>\n            <button\n                id=\"editor-header-menu-item-header-footer\"\n                mat-menu-item\n                class=\"hidden\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"icon-headers-footers\"></mat-icon>\n                    <span class=\"menu-item-text\">Headers & Footers</span>\n                </div>\n            </button>\n        </mat-menu>\n        <mat-menu\n            #tableInsert=\"matMenu\"\n            class=\"insert-table\">\n            <app-insert-table\n                *ngIf=\"showInsertTableMenu\"\n                (selectSizes)=\"insertTable.emit($event)\" />\n        </mat-menu>\n    </div>\n</div>\n\n<div class=\"editor-mode\">\n    <mat-form-field appearance=\"outline\">\n        <mat-select\n            [(value)]=\"selectedMode\"\n            (selectionChange)=\"changeMode.emit($event)\">\n            <mat-select-trigger>\n                <div class=\"select-trigger\">\n                    <mat-icon\n                        fontSet=\"nc-icon\"\n                        fontIcon=\"{{ modeOptions[selectedMode].icon }}\"></mat-icon>\n                    <span class=\"item-title\">{{ modeOptions[selectedMode].name }}</span>\n                    <div class=\"separator\"></div>\n                </div>\n            </mat-select-trigger>\n            <mat-option\n                *ngFor=\"let mode of modeOptions\"\n                class=\"editor-mode-option\"\n                [value]=\"mode.id\">\n                <mat-icon\n                    fontSet=\"nc-icon\"\n                    fontIcon=\"{{ mode.icon }}\"></mat-icon>\n                <div class=\"item-content\">\n                    <span class=\"item-title\">{{ mode.name }}</span>\n                    <span class=\"item-text\">{{ mode.text }}</span>\n                </div>\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n</div>\n", styles: [":host{width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 24px}:host .mat-mdc-form-field{width:auto;height:24px;text-align:right}:host .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host .mat-mdc-form-field ::ng-deep .mat-mdc-text-field-wrapper{align-items:center}:host .mat-mdc-form-field ::ng-deep .mdc-notched-outline>*{border:unset}:host .mat-mdc-form-field ::ng-deep .mat-mdc-select-value{margin-right:4px}:host .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-infix{padding:0;width:auto}:host .mat-mdc-form-field ::ng-deep .mat-mdc-select-arrow svg{top:0}:host .mat-mdc-form-field .mat-mdc-select{font-size:14px;font-weight:700}.upload-input{display:none}mat-icon{width:24px;height:24px;font-size:24px}.editor-mode{display:flex;justify-content:flex-end;align-items:center;overflow:hidden;height:40px;border:1px solid;border-radius:20px}::ng-deep .cdk-overlay-pane{min-width:min-content}.separator{border-left:1px solid;opacity:.1;height:18px;margin:2px 8px}.select-trigger{display:inline-flex;text-align:left;margin-top:1px}.select-trigger .mat-icon{width:32px}.item-content{display:grid}.item-content .item-title{line-height:6px;padding-top:10px}.item-content .item-text{font-size:10px;font-weight:400;text-wrap:nowrap}.menu-buttons{display:flex;flex-wrap:wrap}.menu-buttons button{font-weight:500;height:24px;min-width:unset}.menu-header{display:flex;flex-direction:column;flex:1;overflow:hidden}.file-name{flex-basis:0;margin:0 8px 6px;display:block;min-height:32px;overflow:hidden}.file-name .title{font-size:18px;font-weight:500;line-height:normal;outline:none;display:inline-block;white-space:nowrap;min-width:1px;min-height:32px;overflow:hidden;max-width:100%;-webkit-user-select:none;user-select:none}.file-name .title:not(:focus){text-overflow:ellipsis}.heading-menu{display:inline-flex;width:210px}.hot-keys{text-align:end;width:auto}.menu-item-text{white-space:nowrap;width:64%}.mat-mdc-menu-item .mat-icon{margin-right:4px;width:28px}#editor-header-menu-item-print,#editor-header-menu-item-redo,#editor-header-menu-item-paste,#editor-header-menu-item-link,#editor-header-menu-item-image{border-bottom:1px solid}.hidden{display:none}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none}.list-icon .selected,.list-number .selected,.list-icon .selected:hover,.list-number .selected:hover{border:2px solid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: InsertTableComponent, selector: "app-insert-table", outputs: ["selectSizes"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.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: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7$1.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.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: "17.2.1", ngImport: i0, type: EditorHeaderComponent, decorators: [{
             type: Component,
@@ -13065,7 +13231,7 @@ class EditorSearchDialogComponent extends ObserverComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorSearchDialogComponent, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: EditorSearchDialogComponent, isStandalone: true, selector: "app-editor-search-dialog", providers: [ExternalElementService], usesInheritance: true, ngImport: i0, template: "<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>Search for</mat-label>\n        <input\n            matInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findPrev()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-onleft\"></mat-icon>\n    </button>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findNext()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-onright\"></mat-icon>\n    </button>\n</div>\n<ng-container *ngIf=\"{ searchIteration: searchIteration$ | async } as data\">\n    <div\n        class=\"replace-form\"\n        *ngIf=\"isReplace\">\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>Replace with</mat-label>\n            <input\n                matInput\n                [formControl]=\"replaceControl\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                (keydown.enter)=\"replace()\" />\n        </mat-form-field>\n        <button\n            type=\"button\"\n            mat-button\n            (click)=\"replace()\">\n            Replace\n        </button>\n    </div>\n    <div class=\"search-options\">\n        <button\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Toggle Replace Mode\"\n            (click)=\"setReplace()\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n        </button>\n        <div class=\"counter\">\n            <span>{{ data.searchIteration?.current ?? 0 }} of {{ data.searchIteration?.total ?? 0 }}</span>\n        </div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Close\"\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-cancel-thin\"></mat-icon>\n        </button>\n    </div>\n</ng-container>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;padding:3px}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{display:flex}mat-form-field{padding-left:10px}.mdc-button{font-size:12px;padding:0 8px;min-width:unset}.search-options{line-height:40px}.search-options .counter{text-align:center;flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: EditorSearchDialogComponent, isStandalone: true, selector: "app-editor-search-dialog", providers: [ExternalElementService], usesInheritance: true, ngImport: i0, template: "<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>Search for</mat-label>\n        <input\n            matInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findPrev()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-onleft\"></mat-icon>\n    </button>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findNext()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-onright\"></mat-icon>\n    </button>\n</div>\n<ng-container *ngIf=\"{ searchIteration: searchIteration$ | async } as data\">\n    <div\n        class=\"replace-form\"\n        *ngIf=\"isReplace\">\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>Replace with</mat-label>\n            <input\n                matInput\n                [formControl]=\"replaceControl\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                (keydown.enter)=\"replace()\" />\n        </mat-form-field>\n        <button\n            type=\"button\"\n            mat-button\n            (click)=\"replace()\">\n            Replace\n        </button>\n    </div>\n    <div class=\"search-options\">\n        <button\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Toggle Replace Mode\"\n            (click)=\"setReplace()\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n        </button>\n        <div class=\"counter\">\n            <span>{{ data.searchIteration?.current ?? 0 }} of {{ data.searchIteration?.total ?? 0 }}</span>\n        </div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Close\"\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"nc-icon\"\n                fontIcon=\"icon-cancel-thin\"></mat-icon>\n        </button>\n    </div>\n</ng-container>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;padding:3px}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{display:flex}mat-form-field{padding-left:10px}.mdc-button{font-size:12px;padding:0 8px;min-width:unset}.search-options{line-height:40px}.search-options .counter{text-align:center;flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditorSearchDialogComponent, decorators: [{
             type: Component,
@@ -13097,7 +13263,7 @@ class FontComponent {
         this.selectFont.emit(font);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FontComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FontComponent, selector: "app-font", inputs: { isDisabled: "isDisabled", styles: "styles" }, outputs: { selectFont: "selectFont" }, ngImport: i0, template: "<button\n    mat-button\n    [matMenuTriggerFor]=\"fontMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\">\n    <div class=\"font-menu\">\n        <span>{{ font }}</span>\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </div>\n</button>\n<mat-menu #fontMenu=\"matMenu\">\n    <ng-container *ngFor=\"let font of fonts\">\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled\"\n            (click)=\"onSelectFont(font)\">\n            {{ font }}\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}:host button{height:28px;margin:0 4px}.font-menu{display:flex;justify-content:space-between;align-items:center;min-width:130px}span{padding-left:10%}mat-icon{margin-right:5%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FontComponent, selector: "app-font", inputs: { isDisabled: "isDisabled", styles: "styles" }, outputs: { selectFont: "selectFont" }, ngImport: i0, template: "<button\n    mat-button\n    [matMenuTriggerFor]=\"fontMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\">\n    <div class=\"font-menu\">\n        <span>{{ font }}</span>\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </div>\n</button>\n<mat-menu #fontMenu=\"matMenu\">\n    <ng-container *ngFor=\"let font of fonts\">\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled\"\n            (click)=\"onSelectFont(font)\">\n            {{ font }}\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}:host button{height:28px;margin:0 4px}.font-menu{display:flex;justify-content:space-between;align-items:center;min-width:130px}span{padding-left:10%}mat-icon{margin-right:5%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FontComponent, decorators: [{
             type: Component,
@@ -13169,7 +13335,7 @@ class FontSizeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FontSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FontSizeComponent, selector: "app-font-size", inputs: { isDisabled: "isDisabled", fontSize: "fontSize" }, outputs: { selectFontSize: "selectFontSize" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onDecrementFontSize()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-remove\"></mat-icon>\n</button>\n<input\n    type=\"text\"\n    [formControl]=\"fontSizeControl\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"onSetFontSize()\"\n    (blur)=\"resetFontSize()\" />\n<mat-autocomplete\n    #auto=\"matAutocomplete\"\n    panelWidth=\"60\"\n    disableRipple=\"false\"\n    hideSingleSelectionIndicator=\"true\">\n    <mat-option\n        *ngFor=\"let fontSize of fontSizes\"\n        [value]=\"fontSize\"\n        (click)=\"onSelectFontSize(fontSize)\">\n        {{ fontSize }}\n    </mat-option>\n</mat-autocomplete>\n<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onIncrementFontSize()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n</button>\n", styles: [":host{justify-content:center;align-items:center;display:flex}button{margin:4px}input{width:30px;height:25px;text-align:center;border-color:transparent;outline-color:#1b84e0}.mdc-button{min-width:28px;min-height:28px;width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.mat-mdc-option{padding-left:6px;padding-right:6px;min-height:30px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FontSizeComponent, selector: "app-font-size", inputs: { isDisabled: "isDisabled", fontSize: "fontSize" }, outputs: { selectFontSize: "selectFontSize" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onDecrementFontSize()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-remove\"></mat-icon>\n</button>\n<input\n    type=\"text\"\n    [formControl]=\"fontSizeControl\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"onSetFontSize()\"\n    (blur)=\"resetFontSize()\" />\n<mat-autocomplete\n    #auto=\"matAutocomplete\"\n    panelWidth=\"60\"\n    disableRipple=\"false\"\n    hideSingleSelectionIndicator=\"true\">\n    <mat-option\n        *ngFor=\"let fontSize of fontSizes\"\n        [value]=\"fontSize\"\n        (click)=\"onSelectFontSize(fontSize)\">\n        {{ fontSize }}\n    </mat-option>\n</mat-autocomplete>\n<button\n    mat-button\n    [disabled]=\"!fontSize || isDisabled\"\n    (click)=\"onIncrementFontSize()\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n</button>\n", styles: [":host{justify-content:center;align-items:center;display:flex}button{margin:4px}input{width:30px;height:25px;text-align:center;border-color:transparent;outline-color:#1b84e0}.mdc-button{min-width:28px;min-height:28px;width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.mat-mdc-option{padding-left:6px;padding-right:6px;min-height:30px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FontSizeComponent, decorators: [{
             type: Component,
@@ -13335,7 +13501,7 @@ class NumberingComponent {
         this.selectNumberingTemplate.emit(numberingTemplateType);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NumberingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: NumberingComponent, selector: "app-numbering", inputs: { isDisabled: "isDisabled", selectedNumberingType: "selectedNumberingType", selectedNumberingTemplate: "selectedNumberingTemplate" }, outputs: { selectNumberingTemplate: "selectNumberingTemplate", removeNumberings: "removeNumberings" }, ngImport: i0, template: "<mat-button-toggle-group\n    name=\"format\"\n    aria-label=\"format\"\n    [disabled]=\"isDisabled\">\n    <mat-button-toggle\n        (click)=\"onToggleBulletedNumbering()\"\n        [value]=\"numberingType.Bullet\"\n        [checked]=\"selectedNumberingType === numberingType.Bullet\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-bulleted\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listBulletedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listBulletedMenu=\"matMenu\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList6\"></mat-icon>\n        </div>\n    </mat-menu>\n    <mat-button-toggle\n        (click)=\"onToggleNumberedNumbering()\"\n        [value]=\"numberingType.Number\"\n        [checked]=\"selectedNumberingType === numberingType.Number\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-numbered\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listNumberedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        style=\"display: none\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listNumberedMenu=\"matMenu\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList6\"></mat-icon>\n        </div>\n    </mat-menu>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle-group,button{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}.mdc-button{min-width:28px;min-height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.mat-button-toggle-group{align-items:center}.mat-button-toggle-group .mdc-button{min-width:20px;height:28px;padding:0}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none!important}.list-icon .selected,.list-icon .selected:hover{border:2px solid #1b84e0}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: NumberingComponent, selector: "app-numbering", inputs: { isDisabled: "isDisabled", selectedNumberingType: "selectedNumberingType", selectedNumberingTemplate: "selectedNumberingTemplate" }, outputs: { selectNumberingTemplate: "selectNumberingTemplate", removeNumberings: "removeNumberings" }, ngImport: i0, template: "<mat-button-toggle-group\n    name=\"format\"\n    aria-label=\"format\"\n    [disabled]=\"isDisabled\">\n    <mat-button-toggle\n        (click)=\"onToggleBulletedNumbering()\"\n        [value]=\"numberingType.Bullet\"\n        [checked]=\"selectedNumberingType === numberingType.Bullet\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-bulleted\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listBulletedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listBulletedMenu=\"matMenu\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList6\"></mat-icon>\n        </div>\n    </mat-menu>\n    <mat-button-toggle\n        (click)=\"onToggleNumberedNumbering()\"\n        [value]=\"numberingType.Number\"\n        [checked]=\"selectedNumberingType === numberingType.Number\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-format-numbered\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listNumberedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        style=\"display: none\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listNumberedMenu=\"matMenu\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList6\"></mat-icon>\n        </div>\n    </mat-menu>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle-group,button{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}.mdc-button{min-width:28px;min-height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.mat-button-toggle-group{align-items:center}.mat-button-toggle-group .mdc-button{min-width:20px;height:28px;padding:0}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none!important}.list-icon .selected,.list-icon .selected:hover{border:2px solid #1b84e0}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NumberingComponent, decorators: [{
             type: Component,
@@ -13498,7 +13664,7 @@ class HeadingComponent {
         console.log('select heading', heading);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: HeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: HeadingComponent, selector: "app-heading", ngImport: i0, template: "<button\n    mat-button\n    [matMenuTriggerFor]=\"headingMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\">\n    <div class=\"heading-menu\">\n        <span>{{ selectedHeading }}</span>\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </div>\n</button>\n<mat-menu #headingMenu=\"matMenu\">\n    <ng-container *ngFor=\"let heading of headings\">\n        <button\n            mat-menu-item\n            (click)=\"onSelectHeading(heading)\">\n            {{ heading }}\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.heading-menu{display:flex;justify-content:space-between;align-items:center;min-width:150px}span{padding-left:10%}mat-icon{margin-right:5%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: HeadingComponent, selector: "app-heading", ngImport: i0, template: "<button\n    mat-button\n    [matMenuTriggerFor]=\"headingMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\">\n    <div class=\"heading-menu\">\n        <span>{{ selectedHeading }}</span>\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </div>\n</button>\n<mat-menu #headingMenu=\"matMenu\">\n    <ng-container *ngFor=\"let heading of headings\">\n        <button\n            mat-menu-item\n            (click)=\"onSelectHeading(heading)\">\n            {{ heading }}\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.heading-menu{display:flex;justify-content:space-between;align-items:center;min-width:150px}span{padding-left:10%}mat-icon{margin-right:5%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: HeadingComponent, decorators: [{
             type: Component,
@@ -13560,7 +13726,7 @@ class ZoomComponent {
         trigger.panelOpen ? trigger.closePanel() : trigger.openPanel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ZoomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ZoomComponent, selector: "app-zoom", viewQueries: [{ propertyName: "zoom", first: true, predicate: ["zoom"], descendants: true }], ngImport: i0, template: "<input\n    [matAutocomplete]=\"auto\"\n    [formControl]=\"myControl\"\n    #trigger=\"matAutocompleteTrigger\"\n    #zoom\n    (focusout)=\"onSetPreviousValue()\"\n    (keydown)=\"onKeyDown($event, trigger)\" />\n<button\n    mat-button\n    (click)=\"openPanel($event, trigger)\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n</button>\n<mat-autocomplete\n    class=\"zoom-autocomplite\"\n    #auto=\"matAutocomplete\"\n    [panelWidth]=\"80\">\n    <mat-option\n        *ngFor=\"let zoomPercentage of zoomPercentages\"\n        (click)=\"onSelectZoom(zoomPercentage)\">\n        {{ zoomPercentage }}%\n    </mat-option>\n</mat-autocomplete>\n", styles: [":host{display:flex;align-items:center;width:90px}.zoom-menu{display:flex;justify-content:space-between;align-items:center;min-width:100px}span{padding-left:10%}.mdc-button{min-width:20px;height:25px;padding:0;margin-right:10px}mat-icon{width:20px;margin-right:5%}input{padding-left:10px;font-size:14px;width:60px;border-color:transparent;outline:none}::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel{max-height:100%!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ZoomComponent, selector: "app-zoom", viewQueries: [{ propertyName: "zoom", first: true, predicate: ["zoom"], descendants: true }], ngImport: i0, template: "<input\n    [matAutocomplete]=\"auto\"\n    [formControl]=\"myControl\"\n    #trigger=\"matAutocompleteTrigger\"\n    #zoom\n    (focusout)=\"onSetPreviousValue()\"\n    (keydown)=\"onKeyDown($event, trigger)\" />\n<button\n    mat-button\n    (click)=\"openPanel($event, trigger)\">\n    <mat-icon\n        fontSet=\"nc-icon\"\n        fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n</button>\n<mat-autocomplete\n    class=\"zoom-autocomplite\"\n    #auto=\"matAutocomplete\"\n    [panelWidth]=\"80\">\n    <mat-option\n        *ngFor=\"let zoomPercentage of zoomPercentages\"\n        (click)=\"onSelectZoom(zoomPercentage)\">\n        {{ zoomPercentage }}%\n    </mat-option>\n</mat-autocomplete>\n", styles: [":host{display:flex;align-items:center;width:90px}.zoom-menu{display:flex;justify-content:space-between;align-items:center;min-width:100px}span{padding-left:10%}.mdc-button{min-width:20px;height:25px;padding:0;margin-right:10px}mat-icon{width:20px;margin-right:5%}input{padding-left:10px;font-size:14px;width:60px;border-color:transparent;outline:none}::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel{max-height:100%!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ZoomComponent, decorators: [{
             type: Component,
@@ -13652,6 +13818,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 }]
         }] });
 
+class RevisionHelper {
+    static applyOperationsToRevision(revision, operations) {
+        operations.sort((a, b) => a.createTime - b.createTime);
+        const actions = operations.map(x => x.command);
+        OperationsHelper.applyOperations(revision.content, actions);
+    }
+    static fillTablesDefaultStyles(tables) {
+        for (const table of tables) {
+            for (const row of table.rows) {
+                for (const cell of row.cells) {
+                    this.fillDefaultStyles(cell);
+                }
+            }
+        }
+    }
+    static fillEdgesDefaultStyles(headers, footers) {
+        for (const header of headers) {
+            this.fillDefaultStyles(header);
+        }
+        for (const footer of footers) {
+            this.fillDefaultStyles(footer);
+        }
+    }
+    static fillDefaultStyles(contents) {
+        for (const format of contents.formats) {
+            format.textStyle = FormatStyleHelper.combineTextStyles(format.textStyle, DEFAULT_TEXT_STYLE);
+        }
+        for (const paragraph of contents.paragraphs) {
+            paragraph.paragraphStyle = this.fillParagraphStyleModel(paragraph.paragraphStyle);
+        }
+    }
+    static fillParagraphStyleModel(paragraphStyle) {
+        return new ParagraphStyleModel({
+            alignment: paragraphStyle.alignment ?? DEFAULT_PARAGRAPH_STYLE.alignment,
+            backgroundColor: paragraphStyle.backgroundColor ?? DEFAULT_PARAGRAPH_STYLE.backgroundColor,
+            headingStyleId: paragraphStyle.headingStyleId,
+            indentFirstLine: paragraphStyle.indentFirstLine ?? DEFAULT_PARAGRAPH_STYLE.indentFirstLine,
+            indentHanging: paragraphStyle.indentHanging ?? DEFAULT_PARAGRAPH_STYLE.indentHanging,
+            indentLeft: paragraphStyle.indentLeft ?? DEFAULT_PARAGRAPH_STYLE.indentLeft,
+            indentRight: paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight,
+            lineSpacing: paragraphStyle.lineSpacing ?? DEFAULT_PARAGRAPH_STYLE.lineSpacing,
+            spaceAfter: paragraphStyle.spaceAfter ?? DEFAULT_PARAGRAPH_STYLE.spaceAfter,
+            spaceBefore: paragraphStyle.spaceBefore ?? DEFAULT_PARAGRAPH_STYLE.spaceBefore,
+            contextualSpacing: paragraphStyle.contextualSpacing ?? DEFAULT_PARAGRAPH_STYLE.contextualSpacing,
+            beforeAutospacing: paragraphStyle.beforeAutospacing ?? DEFAULT_PARAGRAPH_STYLE.beforeAutospacing,
+            afterAutospacing: paragraphStyle.afterAutospacing ?? DEFAULT_PARAGRAPH_STYLE.afterAutospacing,
+            numberingId: paragraphStyle.numberingId ?? DEFAULT_PARAGRAPH_STYLE.numberingId,
+            numberingLevel: paragraphStyle.numberingLevel ?? DEFAULT_PARAGRAPH_STYLE.numberingLevel
+        });
+    }
+    static getEmptyDocxModel() {
+        const pageMargin = new MarginModel();
+        return new DocxModel({
+            content: '',
+            contentLength: 0,
+            headings: DEFAULT_HEADINGS,
+            pageHeight: DocumentInfo.height,
+            pageWidth: DocumentInfo.width,
+            paragraphs: [
+                new ParagraphModel({
+                    insertIndex: 0,
+                    paragraphStyle: DEFAULT_PARAGRAPH_STYLE
+                })
+            ],
+            breaks: [],
+            elements: [],
+            formats: [new FormatModel({ startIndex: 0, endIndex: 0, textStyle: DEFAULT_TEXT_STYLE })],
+            images: [],
+            links: [],
+            marginBottom: pageMargin.bottom,
+            marginFooter: pageMargin.footer,
+            marginHeader: pageMargin.header,
+            marginLeft: pageMargin.left,
+            marginRight: pageMargin.right,
+            marginTop: pageMargin.top,
+            tables: [],
+            numberings: [],
+            tabs: []
+        });
+    }
+}
+
 class ConfirmDialogComponent {
     constructor(data, ref) {
         this.data = data;
@@ -13671,13 +13919,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: i1$4.MatDialogRef }] });
 
-class DocumentModel {
+const URL_PATTERN = /^(https?:\/\/)?(www\.)?[-a-zA-Z0-9áéíóúÁÉÍÓÚüÜñÑ@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9áéíóúÁÉÍÓÚüÜñÑ@:%_+.~#?&/=]*)$/;
+class ValidationHelper {
+    static urlValidator(control) {
+        return control.value && !URL_PATTERN.test(control.value) ? { invalidUrl: true } : null;
+    }
+}
+
+class AddLinkDialogOptions {
     constructor(fields) {
         if (fields) {
             Object.assign(this, fields);
         }
     }
 }
+class AddLinkDialogComponent {
+    constructor(dialogRef, data, fb) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.fb = fb;
+        dialogRef.disableClose = true;
+        this.form = this.fb.group({
+            text: [data.text, Validators.required],
+            link: [data.link, [Validators.required, ValidationHelper.urlValidator]]
+        });
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    onApply() {
+        this.dialogRef.close({ text: this.form.controls.text.value, link: this.form.controls.link.value });
+    }
+    onEnter() {
+        if (this.form.invalid) {
+            return;
+        }
+        this.onApply();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: AddLinkDialogComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: AddLinkDialogComponent, isStandalone: true, selector: "app-add-link-dialog", ngImport: i0, template: "<div mat-dialog-title>{{ data.title }}</div>\n<div\n    mat-dialog-content\n    [formGroup]=\"form\">\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ data.textPlaceholder }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.text\"\n            (keydown.enter)=\"onEnter()\"\n            required />\n        <mat-error>The {{ data.textPlaceholder }} is required.</mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ data.linkPlaceholder }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.link\"\n            (keydown.enter)=\"onEnter()\"\n            required />\n        <mat-error>The {{ data.linkPlaceholder }} is required.</mat-error>\n    </mat-form-field>\n</div>\n<div mat-dialog-actions>\n    <button\n        mat-button\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n        Cancel\n    </button>\n    <button\n        mat-raised-button\n        color=\"primary\"\n        class=\"apply-btn\"\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-done-thin\"></mat-icon>\n        Apply\n    </button>\n</div>\n", styles: [":host{height:300px;width:430px;display:block;overflow:hidden}:host ::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 12px;height:48px}:host ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:12px}.mat-mdc-dialog-title{font-weight:600;padding-top:5px}mat-form-field{width:100%}.mat-mdc-dialog-content{padding-top:10px;padding-bottom:0}.mat-mdc-dialog-actions{display:flex;justify-content:center;align-items:center;padding-top:5px;height:25%}.mat-mdc-dialog-actions button{width:30%;height:100%;letter-spacing:1px;border-radius:8px}.mat-mdc-dialog-actions button .apply-btn{font-weight:400}.mat-mdc-dialog-actions button .mat-icon{font-size:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: AddLinkDialogComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatDialogModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        ReactiveFormsModule,
+                        TranslateModule
+                    ], selector: 'app-add-link-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div mat-dialog-title>{{ data.title }}</div>\n<div\n    mat-dialog-content\n    [formGroup]=\"form\">\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ data.textPlaceholder }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.text\"\n            (keydown.enter)=\"onEnter()\"\n            required />\n        <mat-error>The {{ data.textPlaceholder }} is required.</mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ data.linkPlaceholder }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.link\"\n            (keydown.enter)=\"onEnter()\"\n            required />\n        <mat-error>The {{ data.linkPlaceholder }} is required.</mat-error>\n    </mat-form-field>\n</div>\n<div mat-dialog-actions>\n    <button\n        mat-button\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n        Cancel\n    </button>\n    <button\n        mat-raised-button\n        color=\"primary\"\n        class=\"apply-btn\"\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-done-thin\"></mat-icon>\n        Apply\n    </button>\n</div>\n", styles: [":host{height:300px;width:430px;display:block;overflow:hidden}:host ::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 12px;height:48px}:host ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:12px}.mat-mdc-dialog-title{font-weight:600;padding-top:5px}mat-form-field{width:100%}.mat-mdc-dialog-content{padding-top:10px;padding-bottom:0}.mat-mdc-dialog-actions{display:flex;justify-content:center;align-items:center;padding-top:5px;height:25%}.mat-mdc-dialog-actions button{width:30%;height:100%;letter-spacing:1px;border-radius:8px}.mat-mdc-dialog-actions button .apply-btn{font-weight:400}.mat-mdc-dialog-actions button .mat-icon{font-size:24px;height:24px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$4.MatDialogRef }, { type: AddLinkDialogOptions, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i2$3.FormBuilder }] });
 
 class DocumentNameModel {
     constructor(fields) {
@@ -13687,6 +13984,14 @@ class DocumentNameModel {
     }
 }
 
+class DocumentModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class FileSourceModel {
     constructor(fields) {
         if (fields) {
@@ -13732,5 +14037,5 @@ class OperationModel {
  * Generated bundle index. Do not edit.
  */
 
-export { Alignment, BaseNoderComponent, BreakTypes, CommandModel, CommandType, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FILE_NAME, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DefaultPageSize, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorHeaderComponent, EditorModule, EditorSearchDialogComponent, EditorService, EditorToolbarComponent, EditorToolbarModule, ElementDataModel, ElementModel, ExternalElementModel, ExternalElementService, FileSourceModel, FormatStyleHelper, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, Mode, NEW_LINE_MARKUP, NoderExternalComponent, NumberingLevelModel, OpenDocx, OperationModel, OperationsHistoryInfoModel, PageType, PaginatorSizes, ParagraphStyleModel, RevisionModel, SetDocx, TextStyleModel };
+export { AddLinkDialogComponent, AddLinkDialogOptions, Alignment, BaseNoderComponent, BreakTypes, CommandModel, CommandType, CommandsService, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FILE_NAME, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DefaultPageSize, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorHeaderComponent, EditorModule, EditorSearchDialogComponent, EditorService, EditorToolbarComponent, EditorToolbarModule, ElementDataModel, ElementModel, ExternalElementModel, ExternalElementService, FileSourceModel, FormatStyleHelper, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, Mode, NEW_LINE_MARKUP, NoderExternalComponent, NumberingLevelModel, OpenDocx, OperationModel, OperationsHistoryInfoModel, PageType, PaginatorSizes, ParagraphStyleModel, RevisionHelper, RevisionModel, SetDocx, TextStyleModel };
 //# sourceMappingURL=talrace-ngx-noder.mjs.map