@talrace/ngx-noder 0.0.47 → 19.0.25

package/fesm2022/talrace-ngx-noder.mjs

@@ -30,7 +30,7 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import * as i7 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i3$2 from '@angular/material/core';
-import * as i9 from '@angular/material/sidenav';
+import * as i10 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i4$1 from '@angular/material/menu';
@@ -46,7 +46,7 @@ import * as i5$3 from 'ngx-colors';
 import { NgxColorsModule } from 'ngx-colors';
 import * as i3$3 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i10 from '@angular/material/checkbox';
+import * as i10$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i12 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
@@ -561,6 +561,7 @@ class EditorService {
         this._changeImageStyle$ = new Subject();
         this._rerender$ = new Subject();
         this._createCustomComponent$ = new Subject();
+        this._replaceByCustomComponent$ = new Subject();
         this._insertBreak$ = new Subject();
         this._insertImage$ = new Subject();
         this._insertLink$ = new Subject();
@@ -705,6 +706,9 @@ class EditorService {
     get createCustomComponent$() {
         return this._createCustomComponent$.asObservable();
     }
+    get replaceByCustomComponent$() {
+        return this._replaceByCustomComponent$.asObservable();
+    }
     get insertBreak$() {
         return this._insertBreak$.asObservable();
     }
@@ -941,6 +945,9 @@ class EditorService {
     createCustomComponent(model) {
         this._createCustomComponent$.next(model);
     }
+    replaceByCustomComponent(textKey, model) {
+        this._replaceByCustomComponent$.next({ textKey, model });
+    }
     insertBreak(value) {
         this._insertBreak$.next(value);
     }
@@ -1711,11 +1718,11 @@ class OverlayService {
         this.openedSubscription = fromEvent(document, 'mousedown')
             .pipe(filter(event => {
             const clickTarget = event.target;
-            return this.overlayRef && !this.overlayRef.overlayElement.contains(clickTarget);
+            return (this.overlayRef &&
+                !this.overlayRef.overlayElement.contains(clickTarget) &&
+                this.overlayRef.overlayElement.parentElement.parentElement.children.length === 1);
         }), take(1))
-            .subscribe(() => {
-            this.close();
-        });
+            .subscribe(() => this.close());
     }
     getOverlayConfig(xPosition, yPosition) {
         return new OverlayConfig({
@@ -1728,6 +1735,16 @@ class OverlayService {
     getOverlayPosition(xPosition, yPosition) {
         return this.overlay.position().global().left(`${xPosition}px`).top(`${yPosition}px`);
     }
+    scroll(deltaY) {
+        // todo: close overlay when out of visible area
+        if (!this.overlayRef) {
+            return;
+        }
+        const x = this.overlayRef.overlayElement.offsetLeft;
+        const y = this.overlayRef.overlayElement.offsetTop - deltaY;
+        const strategy = this.overlay.position().global().left(`${x}px`).top(`${y}px`);
+        this.overlayRef.updatePositionStrategy(strategy);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OverlayService, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OverlayService }); }
 }
@@ -4832,7 +4849,7 @@ class TableOperationsHelper {
             return null;
         }
         return new ApplyTableCellsStylesModel({
-            cellsData: this.getCellDataFromBorderCells(cellsMap, new BordersStyleModel({ lineStyle: style })),
+            cellsData: this.getCellDataFromBorderCells(cellsMap, (oldBorder) => new BordersStyleModel({ ...oldBorder, ...new BordersStyleModel({ lineStyle: style }) })),
             insertIndex: table.insertIndex
         });
     }
@@ -4847,13 +4864,13 @@ class TableOperationsHelper {
             return null;
         }
         return new ApplyTableCellsStylesModel({
-            cellsData: this.getCellDataFromBorderCells(cellsMap, new BordersStyleModel({ width })),
+            cellsData: this.getCellDataFromBorderCells(cellsMap, (oldBorder) => new BordersStyleModel({ ...oldBorder, ...new BordersStyleModel({ width }) })),
             insertIndex: table.insertIndex
         });
     }
     static getApplyTableCellsBorders(border, table, selection) {
         let cellsMap = new Map();
-        let targetBorderStyle = new BordersStyleModel({ lineStyle: LineStyles.Single });
+        let targetBorderStyle = new BordersStyleModel();
         switch (border) {
             case Borders.Top:
                 // Upper border - only for the top row and their upper neighbors
@@ -4918,8 +4935,15 @@ class TableOperationsHelper {
         if (!cellsMap.size) {
             return null;
         }
+        const getNewBorder = (oldBorder) => {
+            if (!targetBorderStyle.lineStyle) {
+                targetBorderStyle.lineStyle =
+                    oldBorder.lineStyle && oldBorder.lineStyle !== LineStyles.Nil ? oldBorder.lineStyle : LineStyles.Single;
+            }
+            return new BordersStyleModel({ ...oldBorder, ...targetBorderStyle });
+        };
         return new ApplyTableCellsStylesModel({
-            cellsData: this.getCellDataFromBorderCells(cellsMap, targetBorderStyle),
+            cellsData: this.getCellDataFromBorderCells(cellsMap, getNewBorder),
             insertIndex: table.insertIndex
         });
     }
@@ -4981,7 +5005,7 @@ class TableOperationsHelper {
             cellsMap.set(key, { cell, rowIndex, cellIndex, updatePositions: [...positions] });
         }
     }
-    static getCellDataFromBorderCells(cellsMap, updateBorderData) {
+    static getCellDataFromBorderCells(cellsMap, getNewBorder) {
         if (!cellsMap.size) {
             return [];
         }
@@ -4993,7 +5017,7 @@ class TableOperationsHelper {
             cellData.updatePositions.forEach(x => {
                 const border = existingBorders.find(y => y.position === x) ??
                     new BordersStyleModel({ position: x, lineStyle: LineStyles.Single, width: 1 });
-                newBorders.push(new BordersStyleModel({ ...border, ...updateBorderData }));
+                newBorders.push(getNewBorder(border));
             });
             // Add existing borders without updates
             existingBorders
@@ -5736,8 +5760,8 @@ class PositionHelper {
         const paragraph = paragraphs[paragraphInfo.paragraphIndex];
         const paragraphTop = paragraph.paragraphSettings.distanceFromTop || 0;
         const linePaddingLeft = paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex].paddingLeft;
-        const markerWidth = paragraphInfo.lineIndex === 0 ? (paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex].markerWidth ?? 0) : 0;
         const offsetMargin = paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex].offsetMargin;
+        const markerWidth = this.getMarkerWidth(paragraph.paragraphSettings, paragraph.paragraphSettings.textLinesInfo[0], paragraphInfo.lineIndex);
         return {
             pageX: lineWidthToPosition + linePaddingLeft + offsetMargin + markerWidth,
             pageY: paragraphTop + paragraphInfo.lineTopOffset - session.scrollTop,
@@ -5789,7 +5813,7 @@ class PositionHelper {
             return { line, indexInLine: 0 };
         }
         let indexInLine = 0;
-        const markerWidth = lineIndex === 0 ? (lineInfo.markerWidth ?? 0) : 0;
+        const markerWidth = this.getMarkerWidth(paragraphSettings, lineInfo, lineIndex);
         let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerWidth;
         const wordSpacing = lineInfo.wordSpacing ?? 0;
         while (indexInLine < tokens.length) {
@@ -5817,7 +5841,7 @@ class PositionHelper {
             return { line, indexInLine: 0 };
         }
         let indexInLine = 0;
-        const markerWidth = lineIndex === 0 ? (lineInfo.markerWidth ?? 0) : 0;
+        const markerWidth = this.getMarkerWidth(paragraphSettings, lineInfo, lineIndex);
         let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerWidth;
         const wordSpacing = lineInfo.wordSpacing ?? 0;
         while (indexInLine < tokens.length) {
@@ -5856,7 +5880,7 @@ class PositionHelper {
         }
         const textLineInfo = paragraphs[paragraphIndex].paragraphSettings.textLinesInfo[lineIndex];
         const wordSpacing = textLineInfo.wordSpacing ?? 0;
-        const markerWidth = lineIndex === 0 ? (textLineInfo.markerWidth ?? 0) : 0;
+        const markerWidth = this.getMarkerWidth(paragraphs[paragraphIndex].paragraphSettings, textLineInfo, lineIndex);
         let width = positionWidth - textLineInfo.paddingLeft - marginLeft - textLineInfo.offsetMargin - markerWidth;
         while (column < tokens.length) {
             const token = tokens[column];
@@ -5869,6 +5893,18 @@ class PositionHelper {
         }
         return column;
     }
+    static getMarkerWidth(paragraphSettings, textLineInfo, lineIndex) {
+        const numberingOffsetLeft = paragraphSettings.numberingData.numberingId === null
+            ? 0
+            : paragraphSettings.numberingData.width + paragraphSettings.numberingData.paddingLeft;
+        if (lineIndex === 0 &&
+            (textLineInfo.indentFirstLine ||
+                (numberingOffsetLeft - textLineInfo.indentLeft > 0 &&
+                    numberingOffsetLeft - textLineInfo.indentLeft < textLineInfo.markerWidth))) {
+            return textLineInfo.markerWidth;
+        }
+        return 0;
+    }
 }
 
 class DistanceModel {
@@ -5971,7 +6007,13 @@ class RenderingHelper {
         const numberingOffsetLeft = currentParagraph.numberingData.numberingId === null
             ? 0
             : currentParagraph.numberingData.width + currentParagraph.numberingData.paddingLeft;
-        let lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft - currentParagraph.textLinesInfo[splitIndex].markerWidth, scalingRatio);
+        let markerWidth = 0;
+        if (currentParagraph.textLinesInfo[0].indentFirstLine ||
+            (numberingOffsetLeft - currentParagraph.textLinesInfo[0].indentLeft > 0 &&
+                numberingOffsetLeft - currentParagraph.textLinesInfo[0].indentLeft < currentParagraph.textLinesInfo[0].markerWidth)) {
+            markerWidth = currentParagraph.textLinesInfo[0].markerWidth;
+        }
+        let lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft - markerWidth, scalingRatio);
         domContent.parentNode.appendChild(lineEl);
         const valueFragment = DomHelper.createFragment(domContent.currentElement);
         let isLastLineFragment = false;
@@ -6836,13 +6878,17 @@ class TextLayer {
             this.renderingHelper.renderContentWrappedLine({ currentElement: this.element, parentNode: linesContainerElement }, splits, paragraphSettings, combinedFormats, distance, this.session.customContentService, this.session.customComponents, this.session.generalProperties.scalingRatio, this.session.model.breaks);
         }
         else {
+            const markerWidth = paragraphSettings.textLinesInfo[0].indentFirstLine ? paragraphSettings.textLinesInfo[0].markerWidth : 0;
             const numberingOffsetLeft = paragraphSettings.numberingData.numberingId === null
                 ? 0
-                : paragraphSettings.numberingData.width +
-                    paragraphSettings.numberingData.paddingLeft -
-                    paragraphSettings.textLinesInfo[0].markerWidth;
+                : paragraphSettings.numberingData.width + paragraphSettings.numberingData.paddingLeft - markerWidth;
+            let offset = 0;
+            if (numberingOffsetLeft - paragraphSettings.textLinesInfo[0].indentLeft > 0 &&
+                numberingOffsetLeft - paragraphSettings.textLinesInfo[0].indentLeft < paragraphSettings.textLinesInfo[0].markerWidth) {
+                offset = paragraphSettings.textLinesInfo[0].markerWidth;
+            }
             const lineInfo = paragraphSettings.textLinesInfo[0];
-            const lastLineEl = this.renderingHelper.createLineElement(lineInfo, numberingOffsetLeft, this.session.generalProperties.scalingRatio);
+            const lastLineEl = this.renderingHelper.createLineElement(lineInfo, numberingOffsetLeft - offset, this.session.generalProperties.scalingRatio);
             linesContainerElement.appendChild(lastLineEl);
             const rowDistance = new DistanceModel({ start: startIndex, end: endIndex });
             this.renderingHelper.renderContentSimpleLine({ currentElement: this.element, parentNode: lastLineEl }, combinedFormats, rowDistance, this.session.customContentService, this.session.customComponents, lineInfo, this.session.model.breaks);
@@ -7726,13 +7772,6 @@ class Search {
 }
 
 class Selection {
-    constructor() {
-        this.anchor = null;
-        this.cursor = new CursorParagraph(0, 0);
-        this.isDisabled = false;
-        this.focusedComponent = null;
-        this.keepLinePositionX = null;
-    }
     get isFocused() {
         return !!this.focusedComponent;
     }
@@ -7757,6 +7796,14 @@ class Selection {
         const anchor = new CursorParagraph(this.anchor.row, this.anchor.column);
         return this.isBackwards ? new Range(cursor, anchor) : new Range(anchor, cursor);
     }
+    constructor(overlayService) {
+        this.overlayService = overlayService;
+        this.anchor = null;
+        this.cursor = new CursorParagraph(0, 0);
+        this.isDisabled = false;
+        this.focusedComponent = null;
+        this.keepLinePositionX = null;
+    }
     focus(component, position) {
         if (component === this.focusedComponent) {
             return;
@@ -7773,17 +7820,15 @@ class Selection {
         this.focusedComponent = null;
     }
     placeCursor(cursor) {
-        this.cursor = cursor;
         this.anchor = null;
-        this.keepLinePositionX = null;
-        this.focusedComponent?.instance.blur();
-        this.focusedComponent = null;
+        this.moveCursor(cursor);
     }
     moveCursor(cursor) {
         this.cursor = cursor;
         this.keepLinePositionX = null;
         this.focusedComponent?.instance.blur();
         this.focusedComponent = null;
+        this.overlayService.close();
     }
     placeSelection(cursor, anchor) {
         this.cursor = cursor;
@@ -7791,6 +7836,7 @@ class Selection {
         this.keepLinePositionX = null;
         this.focusedComponent?.instance.blur();
         this.focusedComponent = null;
+        this.overlayService.close();
     }
     moveSelection(position) {
         if (!this.anchor) {
@@ -7803,6 +7849,7 @@ class Selection {
         this.keepLinePositionX = null;
         this.focusedComponent?.instance.blur();
         this.focusedComponent = null;
+        this.overlayService.close();
     }
     disableSelection() {
         this.isDisabled = true;
@@ -8177,7 +8224,7 @@ class Editor {
     get grammarChecker() {
         return this.regulatorService.grammarChecker;
     }
-    constructor(model, container, editorService, overlayService, regulatorService, commandsService, clipboard, externalElementTagNames, customPageWidth) {
+    constructor(model, container, editorService, overlayService, regulatorService, commandsService, clipboard, externalElementTagNames, insertOverlays, customPageWidth) {
         this.model = model;
         this.container = container;
         this.editorService = editorService;
@@ -8186,6 +8233,7 @@ class Editor {
         this.commandsService = commandsService;
         this.clipboard = clipboard;
         this.externalElementTagNames = externalElementTagNames;
+        this.insertOverlays = insertOverlays;
         this.customPageWidth = customPageWidth;
         this.MAX_COUNT = 999;
         this.parentTagName = 'APP-NOD-EDITOR';
@@ -8207,7 +8255,7 @@ class Editor {
         this.subscriptions.push(this.receiveTextStyleSubscription());
         this.customElementTagNames = [...this.externalElementTagNames, this.imageTagName, this.tableCellTagName, this.edgeElementTagName];
         this.history = new OperationHistory(editorService, regulatorService);
-        this.selection = new Selection();
+        this.selection = new Selection(this.overlayService);
         this.regulatorService.setSelection(this.selection);
         this.initMainSession();
         this.textInput = new TextInput(this.mainRenderer.container);
@@ -8221,7 +8269,7 @@ class Editor {
         this.focus();
         this.session.applyToolbarStyles();
         this.search = new Search(editorService);
-        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.updateTableBorderStyleSubscription(), this.updateTableBorderWidthSubscription(), this.updateTableBordersSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.grammarReplaceSubscription(), this.ignoreGrammarErrorSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription(), this.applyFirstLinePositionSubscription(), this.applyRightIndentParagraphSubscription(), this.applyLeftIndentParagraphSubscription(), this.applyTabSettingsSubscription(), this.commandCreatedForEdges());
+        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.replaceByCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.updateTableBorderStyleSubscription(), this.updateTableBorderWidthSubscription(), this.updateTableBordersSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.grammarReplaceSubscription(), this.ignoreGrammarErrorSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription(), this.applyFirstLinePositionSubscription(), this.applyRightIndentParagraphSubscription(), this.applyLeftIndentParagraphSubscription(), this.applyTabSettingsSubscription(), this.commandCreatedForEdges());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -8269,6 +8317,17 @@ class Editor {
         this.scrollCursorIntoMainView(0.5);
         this.onSelectionChange();
     }
+    showInsertOverlay(textKey) {
+        const component = this.insertOverlays.getComponent(textKey);
+        if (!component) {
+            return;
+        }
+        const cursor = PositionHelper.documentToPixel(this.session, this.session.selection.cursor);
+        const rect = this.renderer.container.getBoundingClientRect();
+        const x = rect.left + cursor.pageX;
+        const y = rect.top + cursor.pageY + cursor.lineHeight;
+        this.overlayService.open(component, { textKey }, x, y);
+    }
     cut() {
         this.removeSelected();
     }
@@ -8337,6 +8396,7 @@ class Editor {
         this.renderer.updateCursor();
         this.rerenderMarker();
         this.scrollCursorIntoMainView(0.1);
+        this.onContentChange();
     }
     insertTab() {
         const insertIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start);
@@ -8345,6 +8405,18 @@ class Editor {
             this.replaceBy(new ReplaceModel({ insertTab }));
             return;
         }
+        if (this.selection.range.start.column === 0) {
+            const paragraph = this.session.displayData.paragraphs[this.selection.range.start.row];
+            if (paragraph.paragraphSettings.numberingData.numberingId) {
+                this.applyParagraphStyles(new ParagraphStyleModel({
+                    numberingLevel: paragraph.paragraphSettings.numberingData.level + 1,
+                    indentLeft: 0,
+                    indentFirstLine: 0,
+                    indentHanging: 0
+                }));
+                return;
+            }
+        }
         this.saveInsertTabToHistory(insertTab);
         const endPoint = this.session.insertTab(this.selection.cursor);
         this.onDocumentChange(new Range(this.selection.cursor, endPoint));
@@ -8366,6 +8438,7 @@ class Editor {
         this.renderer.updateLines(this.selection.cursor.row, lastRow);
         this.renderer.updateCursor();
         this.rerenderMarker();
+        this.onContentChange();
     }
     insertLink(linkDataModel) {
         const insertIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start);
@@ -8378,6 +8451,7 @@ class Editor {
         this.session.insertLink(this.selection.cursor, linkDataModel);
         this.renderer.updateCursor();
         this.rerenderMarker();
+        this.onContentChange();
     }
     insertTable(tableData) {
         const start = this.selection.range.start;
@@ -8419,6 +8493,7 @@ class Editor {
         const selection = tableComponent.tableSelection.selectionRange
             ? tableComponent.tableSelection.selectionRange
             : new SelectionRangeModel({ startIndex: source.cellComponent.rowIndex, endIndex: source.cellComponent.rowIndex }, { startIndex: source.cellComponent.cellIndex, endIndex: source.cellComponent.cellIndex });
+        tableComponent.tableSelection.removeMouseSubscriptions();
         const applyModel = handler(data, tableComponent.table, selection);
         if (!applyModel) {
             return;
@@ -8432,6 +8507,7 @@ class Editor {
         // restore table cells selection and highlight
         this.selection.disableSelection();
         tableComponent.tableSelection.selectionRange = selection;
+        tableComponent.tableSelection.addDocumentMouseDownSubscriptions();
         tableComponent.tableSelection.highlightCurrentSelectionCells();
     }
     replaceBy(model) {
@@ -8953,6 +9029,15 @@ class Editor {
         this.onSelectionChange();
         this.onContentChange();
     }
+    replaceByCustomElement(textKey, model) {
+        const index = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.cursor);
+        const text = this.session.model.content.slice(index - textKey.length, index);
+        if (text === textKey) {
+            const position = new CursorParagraph(this.selection.cursor.row, this.selection.cursor.column - textKey.length);
+            this.selection.moveSelection(position);
+        }
+        this.createCustomElement(model);
+    }
     removeSelected() {
         const range = this.selection.range;
         const isNumbering = this.session.paragraphIsNumbering(range.end.row);
@@ -9014,6 +9099,7 @@ class Editor {
         }
         this.insert(text);
         this.scrollCursorIntoMainView();
+        this.showInsertOverlay(text);
     }
     onCut(event) {
         event.preventDefault();
@@ -9112,16 +9198,13 @@ class Editor {
         this.onSelectionChange();
         const paragraph = this.session.displayData.paragraphs[position.row];
         const error = this.grammarChecker.getError(this.session.sessionId, paragraph.id, position.column);
-        if (!this.editorService.isViewOnly && error && !this.overlayService.overlayRef) {
-            const target = event.target;
-            const lineEl = target.closest('.noder-line');
-            if (lineEl) {
-                const lineRect = lineEl.getBoundingClientRect();
-                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-                const hintTop = lineRect.top + scrollTop - POPUP_HEIGHT;
-                this.overlayService.open(GrammarPopupComponent, { error, paragraphIndex: position.row }, event.clientX - 100, hintTop);
-                event.stopPropagation();
-            }
+        if (!this.editorService.isViewOnly && error) {
+            const cursor = PositionHelper.documentToPixel(this.session, this.session.selection.cursor);
+            const rect = this.renderer.container.getBoundingClientRect();
+            const hintLeft = rect.left + cursor.pageX;
+            const hintTop = rect.top + cursor.pageY - POPUP_HEIGHT;
+            this.overlayService.open(GrammarPopupComponent, { error, paragraphIndex: position.row }, hintLeft - 100, hintTop);
+            event.stopPropagation();
         }
         event.preventDefault();
         if (event.ctrlKey) {
@@ -9198,7 +9281,7 @@ class Editor {
         const scrollSpeed = 4;
         const deltaY = event.deltaY * factor * scrollSpeed;
         this.onScroll(deltaY);
-        this.overlayService.close();
+        this.overlayService.scroll(deltaY);
         event.stopPropagation();
         event.preventDefault();
     }
@@ -9360,7 +9443,6 @@ class Editor {
         this.rerenderMarker();
     }
     onContentChange() {
-        this.overlayService.close();
         if (this.search.term) {
             this.find(this.search.term);
         }
@@ -9409,6 +9491,7 @@ class Editor {
         session.displayData.updateNextLineIndexes(paragraph, paragraph);
         session.displayData.updateNumberingsDataOnChange(paragraph + 1);
         this.focus();
+        this.onContentChange();
     }
     insertTableRows(insertIndex, rowsCount, targetIndex, inheritIndex, sessionId) {
         this.regulatorService.setCustomSessionAsCurrent(sessionId);
@@ -9418,6 +9501,7 @@ class Editor {
         this.commandsService.createCommand(SaveCommandsHelper.getInsertTableRowsCommand(rowsCount, inheritIndex, insertIndex, targetIndex, this.targets));
         this.session.insertTableRows(insertIndex, rowsCount, targetIndex, inheritIndex);
         this.changedTableSize(insertIndex, sessionId);
+        this.onContentChange();
     }
     insertTableColumns(insertIndex, columnsCount, targetIndex, inheritIndex, sessionId) {
         this.regulatorService.setCustomSessionAsCurrent(sessionId);
@@ -9427,6 +9511,7 @@ class Editor {
         this.commandsService.createCommand(SaveCommandsHelper.getInsertTableColumnsCommand(columnsCount, inheritIndex, insertIndex, targetIndex, this.targets));
         this.session.insertTableColumns(insertIndex, columnsCount, targetIndex, inheritIndex);
         this.changedTableSize(insertIndex, sessionId);
+        this.onContentChange();
     }
     removeTableRows(insertIndex, startIndex, endIndex, sessionId) {
         this.regulatorService.setCustomSessionAsCurrent(sessionId);
@@ -9436,6 +9521,7 @@ class Editor {
         this.commandsService.createCommand(SaveCommandsHelper.getRemoveTableRowsCommand(startIndex, endIndex, insertIndex, this.targets));
         this.session.removeTableRows(insertIndex, startIndex, endIndex);
         this.changedTableSize(insertIndex, sessionId);
+        this.onContentChange();
     }
     removeTableColumns(insertIndex, startIndex, endIndex, sessionId) {
         this.regulatorService.setCustomSessionAsCurrent(sessionId);
@@ -9445,6 +9531,7 @@ class Editor {
         this.commandsService.createCommand(SaveCommandsHelper.getRemoveTableColumnsCommand(startIndex, endIndex, insertIndex, this.targets));
         this.session.removeTableColumns(insertIndex, startIndex, endIndex);
         this.changedTableSize(insertIndex, sessionId);
+        this.onContentChange();
     }
     resizeTableColumns(resizeTableColumns, sessionId) {
         this.regulatorService.setCustomSessionAsCurrent(sessionId);
@@ -9454,6 +9541,7 @@ class Editor {
         this.commandsService.createCommand(SaveCommandsHelper.getResizeTableColumnsCommand(resizeTableColumns, this.targets));
         this.session.resizeTableColumns(resizeTableColumns);
         this.changedTableSize(resizeTableColumns.insertIndex, sessionId);
+        this.onContentChange();
     }
     onMousePressedMove(event) {
         const position = this.renderer.screenToTextCoordinatesUsingMidpoint(event.clientX, event.clientY);
@@ -9651,6 +9739,12 @@ class Editor {
             this.focus();
         });
     }
+    replaceByCustomComponentSubscription() {
+        return this.editorService.replaceByCustomComponent$.subscribe(data => {
+            this.replaceByCustomElement(data.textKey, data.model);
+            this.focus();
+        });
+    }
     insertBreakSubscription() {
         return this.editorService.insertBreak$.subscribe(breakType => {
             this.insertBreak(breakType);
@@ -9752,6 +9846,7 @@ class Editor {
         return this.editorService.insertText$.subscribe(x => {
             this.insert(x);
             this.focus();
+            this.showInsertOverlay(x);
         });
     }
     undoSubscription() {
@@ -9894,6 +9989,7 @@ class Editor {
         this.initResizeListener();
         this.focus();
         this.session.applyToolbarStyles();
+        this.onContentChange();
     }
     changeColumnsWidth(columns, widthScale) {
         columns.forEach(column => (column.width = Math.round(column.width / widthScale)));
@@ -11684,6 +11780,7 @@ class TextLineInfo {
         if (fields) {
             Object.assign(this, fields);
         }
+        this.indentFirstLine = indent.firstLine;
         this.offsetMargin = offsetMargin;
         this.indentLeft = indent.left;
         const diff = contentWidth - this.width;
@@ -12258,6 +12355,8 @@ class DisplayData extends EventEmitting {
                 lineSpacing: DEFAULT_PARAGRAPH_STYLE.lineSpacing,
                 isAfterPageBreak: false,
                 isEndedByPageBreak: false,
+                markerWidth: 0,
+                isNumbering: false,
                 backgroundColor: DEFAULT_PARAGRAPH_STYLE.backgroundColor
             });
             return { splits: [], rowInfos: [defaultRowInfo] };
@@ -12366,7 +12465,7 @@ class DisplayData extends EventEmitting {
                     displayValue,
                     align: lineInfo.align,
                     indentFirstLine: isFirstCharacter ? lineInfo.indent.firstLine : DEFAULT_PARAGRAPH_STYLE.indentFirstLine,
-                    indentHanging: isFirstCharacter ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
+                    indentHanging: isFirstCharacter && !lineInfo.isNumbering ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
                     indentLeft: lineInfo.indent.left,
                     indentRight: lineInfo.indent.right,
                     indentBefore: lineInfo.offsetBefore,
@@ -12497,7 +12596,7 @@ class DisplayData extends EventEmitting {
                     displayValue,
                     align: lineInfo.align,
                     indentFirstLine: isFirstCharacter ? lineInfo.indent.firstLine : DEFAULT_PARAGRAPH_STYLE.indentFirstLine,
-                    indentHanging: isFirstCharacter ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
+                    indentHanging: isFirstCharacter && !lineInfo.isNumbering ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
                     indentLeft: lineInfo.indent.left,
                     indentRight: lineInfo.indent.right,
                     indentBefore: lineInfo.offsetBefore,
@@ -12578,7 +12677,7 @@ class DisplayData extends EventEmitting {
                 displayValue: DisplayValue.emptyLine,
                 align: lineInfo.align,
                 indentFirstLine: lineInfo.indent.firstLine,
-                indentHanging: lineInfo.indent.hanging,
+                indentHanging: lineInfo.isNumbering ? 0 : lineInfo.indent.hanging,
                 indentLeft: lineInfo.indent.left,
                 indentRight: lineInfo.indent.right,
                 indentBefore: lineInfo.offsetBefore,
@@ -13863,7 +13962,9 @@ class EditSession {
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
         const endPosition = ContentHelper.documentIndexToParagraphWithOffset(this.displayData.paragraphs, endIndex);
         OperationsHelper.applyParagraphs(this.model, paragraphs);
+        this.displayData.resetAllNumberingInfo(startParagraph);
         this.displayData.updateNextLineIndexes(startParagraph, endPosition.row);
+        this.displayData.updateNumberingsDataOnChange(startParagraph + 1);
         this.applyToolbarStyles();
     }
     setTextStyle(textStyle) {
@@ -14349,8 +14450,8 @@ class GrammarChecker {
     }
     processGrammarCheckResults(result) {
         const session = this.sessionMap.get(this.getSessionIdFromKey(result.paragraphId));
-        if (session) {
-            const paragraphId = +result.paragraphId.split('-')[1];
+        const paragraphId = +result.paragraphId.split('-')[1];
+        if (session && session.session.displayData.paragraphs.some(x => x.id === paragraphId)) {
             if (this.checkedParagraphs.has(session.sessionId)) {
                 this.checkedParagraphs.get(session.sessionId).add(paragraphId);
             }
@@ -14372,7 +14473,7 @@ class GrammarChecker {
                 }
                 this.grammarService.removeParagraph(session.sessionId, id);
                 this.paragraphErrorMap.delete(`${session.sessionId}-${id}`);
-                this.checkedParagraphs.get(session.sessionId).delete(id);
+                this.checkedParagraphs.get(session.sessionId)?.delete(id);
             }
             return;
         }
@@ -14563,7 +14664,9 @@ class HighlightLayer {
         const paragraphs = this.session.displayData.paragraphs;
         const visibleParagraphs = paragraphs.filter(x => x.paragraphSettings.lastScreenLine >= start && x.paragraphSettings.firstScreenLine <= end);
         const textLinesInfo = visibleParagraphs
-            .map(x => x.paragraphSettings.textLinesInfo.filter(l => start <= l.screenLine && l.screenLine <= end))
+            .map(x => x.paragraphSettings.textLinesInfo
+            .filter(l => start <= l.screenLine && l.screenLine <= end)
+            .map(y => ({ textLinesInfo: y, paragraphSettings: x.paragraphSettings })))
             .flat();
         const paragraphInfo = PositionHelper.getParagraphInfoByRow(paragraphs, start);
         let top = paragraphs[paragraphInfo.paragraphIndex].paragraphSettings.distanceFromTop +
@@ -14571,12 +14674,22 @@ class HighlightLayer {
             this.session.scrollTop;
         const padding = this.session.displayData.pagesFormat[this.session.displayData.pagesFormat.length - 1].pageFormatModel.marginLeft;
         for (let i = 0; i < textLinesInfo.length; i++) {
-            const lineInfo = textLinesInfo[i];
+            const lineInfo = textLinesInfo[i].textLinesInfo;
+            const paragraphLineIndex = textLinesInfo[i].paragraphSettings.textLinesInfo.findIndex(x => x === textLinesInfo[i].textLinesInfo);
             if (i !== 0) {
                 top += lineInfo.firstLinePageOffset;
                 top += lineInfo.offsetBefore;
             }
-            const left = lineInfo.paddingLeft + padding + lineInfo.offsetMargin + (lineInfo.markerWidth ?? 0);
+            let markerWidth = 0;
+            const numberingOffsetLeft = textLinesInfo[i].paragraphSettings.numberingData.numberingId === null
+                ? 0
+                : textLinesInfo[i].paragraphSettings.numberingData.width + textLinesInfo[i].paragraphSettings.numberingData.paddingLeft;
+            if (paragraphLineIndex === 0 &&
+                (lineInfo.indentFirstLine ||
+                    (numberingOffsetLeft - lineInfo.indentLeft > 0 && numberingOffsetLeft - lineInfo.indentLeft < lineInfo.markerWidth))) {
+                markerWidth = lineInfo.markerWidth ?? 0;
+            }
+            const left = lineInfo.paddingLeft + padding + lineInfo.offsetMargin + markerWidth;
             let style;
             if (i === 0) {
                 const rangeInfo = this.getRangeInfo(this.session, range);
@@ -14647,6 +14760,9 @@ class GrammarHighlightLayer extends HighlightLayer {
         this.selectionIndex = 0;
         for (const [paragraphId, grammarErrors] of this.errorsByParagraph.entries()) {
             const index = this.session.displayData.paragraphs.findIndex(x => x.id === paragraphId);
+            if (index < 0) {
+                continue;
+            }
             for (const error of grammarErrors) {
                 const range = new Range(new CursorParagraph(index, error.offset), new CursorParagraph(index, error.offset + error.length)).toScreenRange(this.session);
                 if (config.visibleRange &&
@@ -15744,7 +15860,7 @@ class CustomContentService {
             multiplier: 0,
             align: lineInfo.align,
             indentFirstLine: isFirst ? lineInfo.indent.firstLine : DEFAULT_PARAGRAPH_STYLE.indentFirstLine,
-            indentHanging: isFirst ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
+            indentHanging: isFirst && !lineInfo.isNumbering ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
             indentLeft: lineInfo.indent.left,
             indentRight: lineInfo.indent.right,
             indentBefore: lineInfo.offsetBefore,
@@ -16060,6 +16176,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             type: Injectable
         }] });
 
+class InsertOverlays {
+    constructor(models = []) {
+        this.componentMap = {};
+        models.forEach(x => (this.componentMap[x.key] = x.component));
+    }
+    getComponent(key) {
+        return this.componentMap[key];
+    }
+}
+
 class TabSettingModel {
     constructor(fields) {
         if (fields) {
@@ -16453,7 +16579,7 @@ class EditorComponent {
     get content() {
         return this._content;
     }
-    constructor(cdr, componentService, editorService, overlayService, injector, regulatorService, commandsService, clipboard) {
+    constructor(cdr, componentService, editorService, overlayService, injector, regulatorService, commandsService, clipboard, insertOverlays) {
         this.cdr = cdr;
         this.componentService = componentService;
         this.editorService = editorService;
@@ -16462,6 +16588,7 @@ class EditorComponent {
         this.regulatorService = regulatorService;
         this.commandsService = commandsService;
         this.clipboard = clipboard;
+        this.insertOverlays = insertOverlays;
         this.isMobile = false;
         this.externalElementTagNames = ['APP-NODER-INPUT', 'APP-NODER-SIGNATURE', 'APP-NODER-DATEPICKER'];
         this.rulerUnit = input.required();
@@ -16479,7 +16606,7 @@ class EditorComponent {
     }
     initEditor(content) {
         this.ngOnDestroy();
-        this.editor = new Editor(content, this.container, this.editorService, this.overlayService, this.regulatorService, this.commandsService, this.clipboard, this.externalElementTagNames, this.customPageWidth);
+        this.editor = new Editor(content, this.container, this.editorService, this.overlayService, this.regulatorService, this.commandsService, this.clipboard, this.externalElementTagNames, this.insertOverlays, this.customPageWidth);
         this.subscriptions.push(this.toggleSidenavSubscription(), this.searchBarSubscription());
     }
     toggleSidenavSubscription() {
@@ -16527,13 +16654,13 @@ class EditorComponent {
         this.componentService.removeComponent(this.sidenavComponentRef);
         this.sidenavComponentRef = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ComponentService }, { token: EditorService }, { token: OverlayService }, { token: i0.Injector }, { token: RegulatorService }, { token: CommandsService }, { token: i6$1.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorComponent, isStandalone: false, selector: "app-nod-editor", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: false, isRequired: false, transformFunction: null }, externalElementTagNames: { classPropertyName: "externalElementTagNames", publicName: "externalElementTagNames", isSignal: false, isRequired: false, transformFunction: null }, customPageWidth: { classPropertyName: "customPageWidth", publicName: "customPageWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, rulerUnit: { classPropertyName: "rulerUnit", publicName: "rulerUnit", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }, { propertyName: "searchBar", first: true, predicate: EditorSearchBarComponent, descendants: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"editor\">\n            <app-nod-editor-ruler\n                [unit]=\"rulerUnit()\"\n                [disabled]=\"isViewOnly$ | async\" />\n            @if (showSearchBar) {\n                <app-nod-editor-search-bar />\n            }\n            <div class=\"container\">\n                <div\n                    #container\n                    class=\"edit-container\"></div>\n            </div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:100%}.editor{display:inline-block;height:100%;min-width:100%;text-align:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"], dependencies: [{ kind: "component", type: EditorRulerComponent, selector: "app-nod-editor-ruler", inputs: ["unit", "disabled"] }, { kind: "component", type: EditorSearchBarComponent, selector: "app-nod-editor-search-bar" }, { kind: "component", type: i9.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i9.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ComponentService }, { token: EditorService }, { token: OverlayService }, { token: i0.Injector }, { token: RegulatorService }, { token: CommandsService }, { token: i6$1.Clipboard }, { token: InsertOverlays }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorComponent, isStandalone: false, selector: "app-nod-editor", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: false, isRequired: false, transformFunction: null }, externalElementTagNames: { classPropertyName: "externalElementTagNames", publicName: "externalElementTagNames", isSignal: false, isRequired: false, transformFunction: null }, customPageWidth: { classPropertyName: "customPageWidth", publicName: "customPageWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, rulerUnit: { classPropertyName: "rulerUnit", publicName: "rulerUnit", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }, { propertyName: "searchBar", first: true, predicate: EditorSearchBarComponent, descendants: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"editor\">\n            <app-nod-editor-ruler\n                [unit]=\"rulerUnit()\"\n                [disabled]=\"isViewOnly$ | async\" />\n            @if (showSearchBar) {\n                <app-nod-editor-search-bar />\n            }\n            <div class=\"container\">\n                <div\n                    #container\n                    class=\"edit-container\"></div>\n            </div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:100%}.editor{display:inline-block;height:100%;min-width:100%;text-align:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"], dependencies: [{ kind: "component", type: EditorRulerComponent, selector: "app-nod-editor-ruler", inputs: ["unit", "disabled"] }, { kind: "component", type: EditorSearchBarComponent, selector: "app-nod-editor-search-bar" }, { kind: "component", type: i10.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i10.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i10.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-nod-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"editor\">\n            <app-nod-editor-ruler\n                [unit]=\"rulerUnit()\"\n                [disabled]=\"isViewOnly$ | async\" />\n            @if (showSearchBar) {\n                <app-nod-editor-search-bar />\n            }\n            <div class=\"container\">\n                <div\n                    #container\n                    class=\"edit-container\"></div>\n            </div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:100%}.editor{display:inline-block;height:100%;min-width:100%;text-align:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentService }, { type: EditorService }, { type: OverlayService }, { type: i0.Injector }, { type: RegulatorService }, { type: CommandsService }, { type: i6$1.Clipboard }], propDecorators: { isMobile: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentService }, { type: EditorService }, { type: OverlayService }, { type: i0.Injector }, { type: RegulatorService }, { type: CommandsService }, { type: i6$1.Clipboard }, { type: InsertOverlays }], propDecorators: { isMobile: [{
                 type: Input
             }], externalElementTagNames: [{
                 type: Input
@@ -16580,6 +16707,7 @@ class EditorModule {
             providers: [
                 { provide: EXTERNAL_ELEMENT_SIDENAV, useValue: new ExternalSidenavModel(options?.sidenav) },
                 { provide: EXTERNAL_ELEMENT_SERVICE, useClass: options?.elementService ?? ExternalElementService },
+                { provide: InsertOverlays, useValue: new InsertOverlays(options?.insertOverlays) },
                 { provide: ImageApiService, useClass: options?.imageApiService ?? DefaultImageApiService }
             ]
         };
@@ -18729,7 +18857,7 @@ class PageSetupComponent {
         return customPageSize;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PageSetupComponent, deps: [{ token: EditorService }, { token: ToolbarCoreService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PageSetupComponent, isStandalone: true, selector: "app-nod-page-setup", viewQueries: [{ propertyName: "pageSizeForm", first: true, predicate: ["pageSizeForm"], descendants: true }], ngImport: i0, template: "<div class=\"title\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        (click)=\"onClose()\"\n        fontIcon=\"icon-arrow-forward\" />\n    <span>{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n</div>\n<form #pageSizeForm=\"ngForm\">\n    <div class=\"content\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.APPLY_TO' | translate }}</mat-label>\n            <mat-select [(value)]=\"selectedDocumentArea\">\n                <mat-option [value]=\"documentAreas.WholeDocument\">{{ 'NODER.LABEL.WHOLE_DOCUMENT' | translate }}</mat-option>\n                <mat-option [value]=\"documentAreas.ThisSection\">{{ 'NODER.LABEL.THIS_SECTION' | translate }}</mat-option>\n                @if (hasSelection$ | async) {\n                    <mat-option [value]=\"documentAreas.SelectedText\">{{ 'NODER.LABEL.SELECTED_TEXT' | translate }}</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n        <div class=\"orientation\">\n            <div class=\"label\">{{ 'NODER.LABEL.ORIENTATION' | translate }}</div>\n            <mat-radio-group\n                aria-label=\"Select an option\"\n                [(ngModel)]=\"pageSize.orientation\"\n                name=\"orientation\"\n                (change)=\"onPageOrientationChanged()\">\n                <mat-radio-button [value]=\"pageOrientations.Portrait\">\n                    <span>{{ 'NODER.LABEL.PORTRAIT' | translate }}</span>\n                </mat-radio-button>\n                <mat-radio-button [value]=\"pageOrientations.Landscape\">\n                    <span>{{ 'NODER.LABEL.LANDSCAPE' | translate }}</span>\n                </mat-radio-button>\n            </mat-radio-group>\n        </div>\n        <div class=\"page-format\">\n            <div class=\"page-format-tile\">\n                <div class=\"label\">{{ 'NODER.LABEL.PAGE_FORMAT' | translate }}</div>\n                <div class=\"checkbox-area\">\n                    <div class=\"checkbox-label\">{{ 'NODER.LABEL.CUSTOM_SIZE' | translate }}</div>\n                    <mat-checkbox\n                        [checked]=\"pageSize.isCustom\"\n                        (change)=\"toggleCustomSize($event)\" />\n                </div>\n            </div>\n            @if (!pageSize.isCustom) {\n                <div class=\"page-size\">\n                    <mat-form-field appearance=\"outline\">\n                        <mat-label>{{ 'NODER.LABEL.SIZE' | translate }}</mat-label>\n                        <mat-select\n                            [(value)]=\"pageSizeName\"\n                            (selectionChange)=\"onPageSizeChange()\">\n                            @for (option of pageSizes; track option) {\n                                <mat-option [value]=\"option.name\">\n                                    <div class=\"size-option\">\n                                        <span class=\"option-name\">{{ option.name + ' ' }}</span>\n                                        <span class=\"option-size\">{{ option.size }}</span>\n                                    </div>\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n            } @else {\n                <div class=\"page-custom-size\">\n                    <mat-form-field\n                        appearance=\"outline\"\n                        class=\"size-unit\">\n                        <mat-label>{{ 'NODER.LABEL.MEASURE' | translate }}</mat-label>\n                        <mat-select\n                            [(ngModel)]=\"pageSize.unit\"\n                            name=\"unit\"\n                            (valueChange)=\"onUnitChanged($event)\">\n                            <mat-option [value]=\"sizeUnits.Millimeters\">{{ 'NODER.LABEL.MILLIMETERS' | translate }}</mat-option>\n                            <mat-option [value]=\"sizeUnits.Inches\">{{ 'NODER.LABEL.INCHES' | translate }}</mat-option>\n                        </mat-select>\n                    </mat-form-field>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-width\">\n                            <mat-label>{{ ('NODER.LABEL.WIDTH' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customWidth\"\n                                name=\"customWidth\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-height\">\n                            <mat-label>{{ ('NODER.LABEL.HEIGHT' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customHeight\"\n                                name=\"customHeight\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n    <div class=\"actions\">\n        <button\n            mat-stroked-button\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-cancel-thin\" />\n        </button>\n        <button\n            mat-flat-button\n            color=\"primary\"\n            (click)=\"onApply()\"\n            [disabled]=\"pageSizeForm.pristine\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-done-thin\" />\n        </button>\n    </div>\n</form>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:400px}.title{margin:12px 16px;height:32px;display:flex;align-items:center;gap:8px}.title span{overflow:hidden;text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:normal}.content{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:8px 16px 0;gap:24px}.actions{display:flex;justify-content:flex-end;margin:0 16px 16px;gap:10px}.actions .mdc-button{width:32px;height:32px;min-width:32px;padding:0}.actions .mdc-button .mat-icon{margin-right:0;margin-left:0}.orientation{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.orientation mat-radio-group{display:flex;width:100%;gap:16px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.page-format{display:flex;flex-direction:column;gap:16px}.page-format-tile{display:flex;align-items:center;justify-content:space-between}.page-format-tile .checkbox-area{display:flex;align-items:center}.checkbox-label{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.custom-width,.custom-height,.size-unit{width:120px}.page-custom-size{display:flex;flex-direction:column}.size-panel{display:flex;gap:10px}.size-panel .mdc-button{width:40px;height:40px;min-width:40px;padding:0}.size-panel .mdc-button .mat-icon{margin-right:0;margin-left:0}.size-option{display:flex;flex-direction:column}.option-name{font-weight:400}.option-size{font-size:12px}form{display:flex;flex-direction:column;flex:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PageSetupComponent, isStandalone: true, selector: "app-nod-page-setup", viewQueries: [{ propertyName: "pageSizeForm", first: true, predicate: ["pageSizeForm"], descendants: true }], ngImport: i0, template: "<div class=\"title\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        (click)=\"onClose()\"\n        fontIcon=\"icon-arrow-forward\" />\n    <span>{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n</div>\n<form #pageSizeForm=\"ngForm\">\n    <div class=\"content\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.APPLY_TO' | translate }}</mat-label>\n            <mat-select [(value)]=\"selectedDocumentArea\">\n                <mat-option [value]=\"documentAreas.WholeDocument\">{{ 'NODER.LABEL.WHOLE_DOCUMENT' | translate }}</mat-option>\n                <mat-option [value]=\"documentAreas.ThisSection\">{{ 'NODER.LABEL.THIS_SECTION' | translate }}</mat-option>\n                @if (hasSelection$ | async) {\n                    <mat-option [value]=\"documentAreas.SelectedText\">{{ 'NODER.LABEL.SELECTED_TEXT' | translate }}</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n        <div class=\"orientation\">\n            <div class=\"label\">{{ 'NODER.LABEL.ORIENTATION' | translate }}</div>\n            <mat-radio-group\n                aria-label=\"Select an option\"\n                [(ngModel)]=\"pageSize.orientation\"\n                name=\"orientation\"\n                (change)=\"onPageOrientationChanged()\">\n                <mat-radio-button [value]=\"pageOrientations.Portrait\">\n                    <span>{{ 'NODER.LABEL.PORTRAIT' | translate }}</span>\n                </mat-radio-button>\n                <mat-radio-button [value]=\"pageOrientations.Landscape\">\n                    <span>{{ 'NODER.LABEL.LANDSCAPE' | translate }}</span>\n                </mat-radio-button>\n            </mat-radio-group>\n        </div>\n        <div class=\"page-format\">\n            <div class=\"page-format-tile\">\n                <div class=\"label\">{{ 'NODER.LABEL.PAGE_FORMAT' | translate }}</div>\n                <div class=\"checkbox-area\">\n                    <div class=\"checkbox-label\">{{ 'NODER.LABEL.CUSTOM_SIZE' | translate }}</div>\n                    <mat-checkbox\n                        [checked]=\"pageSize.isCustom\"\n                        (change)=\"toggleCustomSize($event)\" />\n                </div>\n            </div>\n            @if (!pageSize.isCustom) {\n                <div class=\"page-size\">\n                    <mat-form-field appearance=\"outline\">\n                        <mat-label>{{ 'NODER.LABEL.SIZE' | translate }}</mat-label>\n                        <mat-select\n                            [(value)]=\"pageSizeName\"\n                            (selectionChange)=\"onPageSizeChange()\">\n                            @for (option of pageSizes; track option) {\n                                <mat-option [value]=\"option.name\">\n                                    <div class=\"size-option\">\n                                        <span class=\"option-name\">{{ option.name + ' ' }}</span>\n                                        <span class=\"option-size\">{{ option.size }}</span>\n                                    </div>\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n            } @else {\n                <div class=\"page-custom-size\">\n                    <mat-form-field\n                        appearance=\"outline\"\n                        class=\"size-unit\">\n                        <mat-label>{{ 'NODER.LABEL.MEASURE' | translate }}</mat-label>\n                        <mat-select\n                            [(ngModel)]=\"pageSize.unit\"\n                            name=\"unit\"\n                            (valueChange)=\"onUnitChanged($event)\">\n                            <mat-option [value]=\"sizeUnits.Millimeters\">{{ 'NODER.LABEL.MILLIMETERS' | translate }}</mat-option>\n                            <mat-option [value]=\"sizeUnits.Inches\">{{ 'NODER.LABEL.INCHES' | translate }}</mat-option>\n                        </mat-select>\n                    </mat-form-field>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-width\">\n                            <mat-label>{{ ('NODER.LABEL.WIDTH' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customWidth\"\n                                name=\"customWidth\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-height\">\n                            <mat-label>{{ ('NODER.LABEL.HEIGHT' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customHeight\"\n                                name=\"customHeight\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n    <div class=\"actions\">\n        <button\n            mat-stroked-button\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-cancel-thin\" />\n        </button>\n        <button\n            mat-flat-button\n            color=\"primary\"\n            (click)=\"onApply()\"\n            [disabled]=\"pageSizeForm.pristine\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-done-thin\" />\n        </button>\n    </div>\n</form>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:400px}.title{margin:12px 16px;height:32px;display:flex;align-items:center;gap:8px}.title span{overflow:hidden;text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:normal}.content{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:8px 16px 0;gap:24px}.actions{display:flex;justify-content:flex-end;margin:0 16px 16px;gap:10px}.actions .mdc-button{width:32px;height:32px;min-width:32px;padding:0}.actions .mdc-button .mat-icon{margin-right:0;margin-left:0}.orientation{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.orientation mat-radio-group{display:flex;width:100%;gap:16px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.page-format{display:flex;flex-direction:column;gap:16px}.page-format-tile{display:flex;align-items:center;justify-content:space-between}.page-format-tile .checkbox-area{display:flex;align-items:center}.checkbox-label{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.custom-width,.custom-height,.size-unit{width:120px}.page-custom-size{display:flex;flex-direction:column}.size-panel{display:flex;gap:10px}.size-panel .mdc-button{width:40px;height:40px;min-width:40px;padding:0}.size-panel .mdc-button .mat-icon{margin-right:0;margin-left:0}.size-option{display:flex;flex-direction:column}.option-name{font-weight:400}.option-size{font-size:12px}form{display:flex;flex-direction:column;flex:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i10$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PageSetupComponent, decorators: [{
             type: Component,