@talrace/ngx-noder 0.0.43 → 0.0.45

package/fesm2022/talrace-ngx-noder.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Directive, Injectable, inject, ChangeDetectorRef, HostBinding, Input, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, createComponent, EventEmitter, Output, HostListener, input, signal, computed, effect, NgModule, Inject } from '@angular/core';
+import { Directive, Injectable, signal, inject, ChangeDetectorRef, HostBinding, Input, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, createComponent, EventEmitter, Output, HostListener, Inject, input, computed, effect, NgModule } from '@angular/core';
 import { Subject, BehaviorSubject, fromEvent, throttleTime, take, filter, debounceTime, distinctUntilChanged, startWith, takeUntil, tap, map, catchError } from 'rxjs';
-import * as i1$1 from '@angular/common/http';
+import * as i1$2 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import * as i3 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
@@ -24,10 +24,14 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayConfig } from '@angular/cdk/overlay';
 import * as i5$3 from '@angular/cdk/clipboard';
+import * as i1$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
+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 i8 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i1$2 from '@angular/material/dialog';
-import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i4$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
@@ -36,9 +40,6 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import * as i2$1 from '@angular/platform-browser';
 import * as i2$2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i8$1 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i3$2 from '@angular/material/core';
 import * as i5$4 from 'ngx-colors';
 import { NgxColorsModule } from 'ngx-colors';
 import * as i3$3 from '@angular/material/button-toggle';
@@ -153,7 +154,8 @@ const DEFAULT_PARAGRAPH_STYLE = new ParagraphStyleModel({
     numberingLevel: null,
     contextualSpacing: false,
     beforeAutospacing: false,
-    afterAutospacing: false
+    afterAutospacing: false,
+    tabSettings: []
 });
 const DEFAULT_HEADINGS = [
     new HeadingModel({
@@ -390,6 +392,94 @@ class FormatStyleHelper {
     }
 }
 
+class FontMetrics {
+    static { this.storageKey = 'metrics'; }
+    static { this.versionKey = 'editorVersion'; }
+    /**
+     * Key value pairs for calculated sizes of char symbols in HTML element
+     */
+    static { this.metrics = JSON.parse(localStorage.getItem(this.storageKey)) || {}; }
+    /**
+     * Key value pairs for identifiers and font strings
+     */
+    static { this.fontStringMap = {}; }
+    static checkVersion(version) {
+        let identifier = localStorage.getItem(this.versionKey);
+        if (identifier === version) {
+            return;
+        }
+        localStorage.removeItem(this.storageKey);
+        localStorage.setItem(this.versionKey, version);
+    }
+    static measureCharSize(ch, contentStyle) {
+        let identifier = this.fontStringMap[contentStyle];
+        if (!identifier) {
+            identifier = contentStyle.split(' ').join('_');
+            this.fontStringMap[contentStyle] = identifier;
+        }
+        this.metrics[identifier] ??= {};
+        if (!this.metrics[identifier][ch] || isNaN(this.metrics[identifier][ch].font)) {
+            this.metrics[identifier][ch] = this.calculateCanvas(ch, contentStyle);
+            localStorage.setItem(this.storageKey, JSON.stringify(this.metrics));
+        }
+        return this.metrics[identifier][ch];
+    }
+    static calculateCanvas(ch, contentStyle) {
+        this.canvasNode ||= document.createElement('canvas');
+        const fontBaseLine = this.fontBaseline(contentStyle, ch);
+        const context = this.canvasNode.getContext('2d');
+        context.font = contentStyle;
+        const textMetrics = context.measureText(ch);
+        return {
+            width: textMetrics.width,
+            height: textMetrics.fontBoundingBoxAscent + textMetrics.fontBoundingBoxDescent,
+            baseline: fontBaseLine.baseline,
+            content: fontBaseLine.content,
+            font: fontBaseLine.font,
+            line: fontBaseLine.line,
+            multiplier: fontBaseLine.multiplier,
+            ascent: textMetrics.fontBoundingBoxAscent,
+            descent: textMetrics.fontBoundingBoxDescent
+        };
+    }
+    static fontBaseline(contentStyle, text) {
+        const container = document.body;
+        this.measureDiv ||= document.createElement('div');
+        this.strut ||= document.createElement('span');
+        if (text === ' ') {
+            text = 'X';
+        }
+        this.measureDiv.style.font = contentStyle;
+        this.measureDiv.style.lineHeight = '1';
+        this.measureDiv.style.position = 'absolute';
+        this.measureDiv.style.visibility = 'hidden';
+        this.measureDiv.style.margin = '0';
+        this.measureDiv.style.padding = '0';
+        this.measureDiv.innerHTML = text;
+        this.strut.style.fontSize = '0';
+        this.strut.style.verticalAlign = 'baseline';
+        this.strut.style.padding = '0 10px';
+        this.measureDiv.classList.add('font-baseline');
+        this.measureDiv.appendChild(this.strut);
+        container.appendChild(this.measureDiv);
+        const computedStyle = window.getComputedStyle(this.measureDiv);
+        const fontSize = parseFloat(computedStyle.fontSize);
+        const baselineHeight = fontSize - this.strut.offsetTop;
+        const strutHeight = this.measureDiv.offsetHeight;
+        const lineHeight = parseFloat(computedStyle.lineHeight) || this.measureDiv.offsetHeight;
+        this.measureDiv.parentNode.removeChild(this.measureDiv);
+        this.measureDiv.innerHTML = '';
+        this.strut.innerHTML = '';
+        return {
+            baseline: baselineHeight,
+            content: strutHeight,
+            font: fontSize,
+            line: lineHeight,
+            multiplier: fontSize / baselineHeight
+        };
+    }
+}
+
 class ElementDataModel {
     constructor(id, guid, type) {
         this.id = id;
@@ -506,6 +596,7 @@ class EditorService {
         this._rightMarginPageFormat$ = new Subject();
         this._firstLinePosition$ = new Subject();
         this._leftIndentParagraph$ = new Subject();
+        this._tabSettings$ = new Subject();
         this._rightIndentParagraph$ = new Subject();
         this._paragraphStyle$ = new BehaviorSubject(new ParagraphStyleModel());
     }
@@ -723,12 +814,18 @@ class EditorService {
     get leftIndentParagraph$() {
         return this._leftIndentParagraph$.asObservable();
     }
+    get tabSettings$() {
+        return this._tabSettings$.asObservable();
+    }
     get rightIndentParagraph$() {
         return this._rightIndentParagraph$.asObservable();
     }
     get paragraphStyle$() {
         return this._paragraphStyle$.asObservable();
     }
+    tabSettings(value) {
+        this._tabSettings$.next(value);
+    }
     applyFirstLinePosition(value) {
         this._firstLinePosition$.next(value);
     }
@@ -823,20 +920,20 @@ class EditorService {
     disableSelection() {
         this._disableSelection$.next();
     }
-    openElementSidenav(component, model, contentWidth) {
-        this._toggleSidenav$.next({ open: true, component, data: { model, contentWidth } });
+    openElementSidenav(component, model, contentWidth, focus) {
+        this._toggleSidenav$.next({ open: true, component, focus, data: { model, contentWidth } });
     }
-    openSidenav(component) {
-        this._toggleSidenav$.next({ open: true, component });
+    openSidenav(component, focus) {
+        this._toggleSidenav$.next({ open: true, component, focus });
     }
     closeSidenav() {
-        this._toggleSidenav$.next({ open: false, component: null });
+        this._toggleSidenav$.next({ open: false, component: null, focus: false });
     }
     changedTableSize(insertIndex, sessionId) {
         this._changedTableSize$.next({ insertIndex, sessionId });
     }
-    changedEdgeSize(edgeType, pageType) {
-        this._changedEdgeSize$.next({ edgeType, pageType });
+    changedEdgeSize(edgeType, pageType, pageWidth, pageHeight) {
+        this._changedEdgeSize$.next({ edgeType, pageType, pageWidth, pageHeight });
     }
     imageLoaded(sessionId) {
         this._imageLoaded$.next(sessionId);
@@ -947,6 +1044,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class BaseNoderComponent extends DestroyComponent {
     constructor() {
         super(...arguments);
+        this.height = signal(0);
+        this.width = signal(0);
         this._isFocused = false;
         this.cdr = inject(ChangeDetectorRef);
         this.editorService = inject(EditorService);
@@ -975,6 +1074,12 @@ class BaseNoderComponent extends DestroyComponent {
     requestStyle() {
         this.editorService.receiveTextStyle(this);
     }
+    searchComponent(_) {
+        return 0;
+    }
+    getSearchResultLocations() {
+        return [];
+    }
     rerender() {
         this.editorService.rerender(this.insertIndex);
     }
@@ -1003,16 +1108,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class ExternalComponent extends BaseNoderComponent {
+    constructor() {
+        super(...arguments);
+        this.focusSidenav = true;
+    }
+    skipSidenav() {
+        return this.editorService.isViewOnly;
+    }
     focus() {
         super.focus();
-        if (this.editorService.isViewOnly) {
+        if (this.skipSidenav()) {
             return;
         }
-        this.editorService.openElementSidenav(this.sidenavComponent, this.content, this.contentWidth);
+        this.editorService.openElementSidenav(this.sidenavComponent, this.content, this.contentWidth, this.focusSidenav);
     }
     blur() {
         super.blur();
-        if (this.editorService.isViewOnly) {
+        if (this.skipSidenav()) {
             return;
         }
         this.editorService.closeSidenav();
@@ -1266,6 +1378,12 @@ class CreateEdgesModel {
     }
 }
 
+class CustomElementSearchResult {
+    constructor(init) {
+        Object.assign(this, init);
+    }
+}
+
 class DeleteModel {
     constructor(fields) {
         if (fields) {
@@ -5222,11 +5340,11 @@ class EdgeElementModel {
         }
         Object.assign(this, fields);
     }
-    isNotCopy(type, pageType) {
-        return this.edgeType === type && this.pageType === pageType && this.isOrigin;
+    isNotCopy(type, pageType, pageWidth) {
+        return this.edgeType === type && this.pageType === pageType && this.pageWidth === pageWidth && this.isOrigin;
     }
-    isCopy(type, pageType) {
-        return this.edgeType === type && this.pageType === pageType && !this.isOrigin;
+    isCopy(type, pageType, pageWidth) {
+        return this.edgeType === type && this.pageType === pageType && this.pageWidth === pageWidth && !this.isOrigin;
     }
     isWithin(start, end) {
         return this.container.offsetTop < end && this.container.offsetTop + this.container.offsetHeight > start;
@@ -5484,14 +5602,14 @@ class EdgesLayer {
         this.element.className = 'noder-layer noder-edges-layer';
         this.parentElement.appendChild(this.element);
     }
-    updateSingle(type, pageType) {
+    updateSingle(type, pageType, pageWidth) {
         const pages = [];
-        let index = this.elements.findIndex(x => x.isCopy(type, pageType));
+        let index = this.elements.findIndex(x => x.isCopy(type, pageType, pageWidth));
         while (index !== -1) {
             pages.push(this.elements[index].page);
             DomHelper.removeElement(this.elements[index].container);
             this.elements.splice(index, 1);
-            index = this.elements.findIndex(x => x.isCopy(type, pageType));
+            index = this.elements.findIndex(x => x.isCopy(type, pageType, pageWidth));
         }
         const start = -this.element.offsetTop;
         const end = start + this.parentElement.clientHeight;
@@ -5503,7 +5621,7 @@ class EdgesLayer {
                 this.renderPageFooterComponent(page, start, end);
             }
         }
-        let origin = this.elements.find(x => x.isNotCopy(type, pageType));
+        let origin = this.elements.find(x => x.isNotCopy(type, pageType, pageWidth));
         if (origin) {
             const edge = this.session.customComponents.edges.getComponentByPageType(pageType, type);
             const height = this.session.customComponents.edges.getComponentHeight(edge.instance);
@@ -5536,7 +5654,7 @@ class EdgesLayer {
         while (removeIndex !== -1) {
             const element = this.elements[removeIndex];
             if (element.isOrigin) {
-                const copy = this.elements.find(x => x.isCopy(element.edgeType, element.pageType));
+                const copy = this.elements.find(x => x.isCopy(element.edgeType, element.pageType, element.pageWidth));
                 if (copy) {
                     copy.substitute(element);
                 }
@@ -5559,7 +5677,8 @@ class EdgesLayer {
         return paragraphTop + this.session.displayData.calculateHeightForPage(page - 1);
     }
     renderPageHeaderComponent(page, start, end) {
-        const header = this.session.customComponents.edges.getComponentByPage(page, EdgeType.Header);
+        const pageFormat = this.session.displayData.getPageFormatByPageNumber(page).pageFormatModel;
+        const header = this.session.customComponents.edges.getComponentByPage(page, EdgeType.Header, pageFormat.pageWidth);
         if (header) {
             const height = this.session.customComponents.edges.getComponentHeight(header.instance);
             const edgeTop = this.getEdgeTop(0, page);
@@ -5570,11 +5689,11 @@ class EdgesLayer {
         }
     }
     renderPageFooterComponent(page, start, end) {
-        const footer = this.session.customComponents.edges.getComponentByPage(page, EdgeType.Footer);
-        const pageFormat = this.session.displayData.getPageFormatByPageNumber(page);
+        const pageFormat = this.session.displayData.getPageFormatByPageNumber(page).pageFormatModel;
+        const footer = this.session.customComponents.edges.getComponentByPage(page, EdgeType.Footer, pageFormat.pageWidth);
         if (footer) {
             const height = this.session.customComponents.edges.getComponentHeight(footer.instance);
-            const topOffset = pageFormat.pageFormatModel.pageHeight - height;
+            const topOffset = pageFormat.pageHeight - height;
             const edgeTop = this.getEdgeTop(topOffset, page);
             if (edgeTop > end || edgeTop + height < start) {
                 return;
@@ -5584,24 +5703,30 @@ class EdgesLayer {
     }
     renderEdgeComponent(component, edgeHeight, page, edgeTop) {
         const container = RenderingHelper.createDivContainer('noder-edge-group');
-        const pageFormat = this.session.displayData.getPageFormatByPageNumber(page);
-        const offsetForLittlePages = (this.session.displayData.maxPageWidth - pageFormat.pageFormatModel.pageWidth) / 2;
+        const pageFormat = this.session.displayData.getPageFormatByPageNumber(page).pageFormatModel;
+        const offsetForLittlePages = (this.session.displayData.maxPageWidth - pageFormat.pageWidth) / 2;
         DomHelper.setStyle(container.style, 'height', `${edgeHeight}px`);
         DomHelper.setStyle(container.style, 'top', `${edgeTop}px`);
         DomHelper.setStyle(container.style, 'margin-left', `${offsetForLittlePages}px`);
         DomHelper.setStyle(container.style, 'margin-right', `${offsetForLittlePages}px`);
         const componentElement = component.hostView.rootNodes[0];
         const edge = component.instance;
-        edge.setPageWidth(pageFormat.pageFormatModel.pageWidth);
-        edge.width = pageFormat.pageFormatModel.pageWidth;
-        const isOrigin = !this.elements.some(x => x.isNotCopy(edge.type, edge.model.pageType));
+        edge.width = pageFormat.pageWidth;
+        const isOrigin = !this.elements.some(x => x.isNotCopy(edge.type, edge.model.pageType, pageFormat.pageWidth));
         const element = isOrigin ? componentElement : componentElement.cloneNode(true);
         container.appendChild(element);
         this.element.appendChild(container);
-        const model = new EdgeElementModel({ page, container, pageType: edge.model.pageType, edgeType: edge.type, isOrigin });
+        const model = new EdgeElementModel({
+            page,
+            container,
+            pageType: edge.model.pageType,
+            edgeType: edge.type,
+            isOrigin,
+            pageWidth: pageFormat.pageWidth
+        });
         this.elements.push(model);
         if (!isOrigin) {
-            element.onmouseenter = () => model.replace(this.elements.find(x => x.isNotCopy(model.edgeType, model.pageType)));
+            element.onmouseenter = () => model.replace(this.elements.find(x => x.isNotCopy(model.edgeType, model.pageType, pageFormat.pageWidth)));
         }
     }
 }
@@ -6208,7 +6333,8 @@ class PrintRenderer {
             maxHeight,
             offset: 0,
             pages,
-            scrollTop: 0
+            scrollTop: 0,
+            isVisible: true
         };
     }
     createContent() {
@@ -6708,72 +6834,128 @@ class SaveCommandsHelper {
     }
 }
 
-class Search {
-    constructor() {
-        this.term = '';
+class CustomElementInfo {
+    constructor(init) {
+        Object.assign(this, init);
+    }
+}
+
+class SearchResult {
+    constructor(init) {
+        Object.assign(this, init);
+    }
+}
+
+class SessionModel {
+    constructor(session, renderer, sessionId, parentSessionId, source) {
+        this.session = session;
+        this.renderer = renderer;
+        this.sessionId = sessionId;
+        this.parentSessionId = parentSessionId;
+        this.source = source;
     }
+}
+
+class Search {
     get currentMatchIndex() {
         return this.currentIndex + 1;
     }
     get currentMatch() {
         return this.currentIndex < 0 ? null : this.allMatches[this.currentIndex];
     }
-    setSearchTerm(term) {
-        this.term = term;
+    constructor(editorService) {
+        this.editorService = editorService;
+        this.term = '';
     }
-    findAll(sessions) {
+    findAll(sessions, term) {
         this.allMatches = [];
+        this.searchedSessionIds = [];
+        this.danglingSessions = [];
+        this.tables = [];
+        this.term = term;
+        if (!term?.length) {
+            for (const session of sessions) {
+                session.renderer.updateSearchHighlights([]);
+                session.renderer.updateActiveSearchHighlight(null);
+                session.renderer.updateCustomElementHighlights([]);
+            }
+            this.editorService.setSearchResultCount(0);
+            return;
+        }
         this.assembleRegExp(this.term);
         if (!this.regex) {
             return;
         }
-        for (const { session, sessionId, renderer } of sessions) {
-            const sessionHighlights = [];
-            for (let i = 0; i < session.displayData.paragraphs.length; i++) {
-                const paragraph = session.displayData.paragraphs[i];
-                const matches = paragraph.content.matchAll(this.regex);
-                for (const match of matches) {
-                    const range = new Range(new CursorParagraph(i, match.index), new CursorParagraph(i, match.index + match[0].length));
-                    this.allMatches.push({ sessionId, range });
-                    sessionHighlights.push(range);
-                }
+        const mainSession = sessions[0];
+        this.searchContent(mainSession, sessions);
+        const unsearchedSessions = sessions.filter(x => !this.searchedSessionIds.includes(x.sessionId));
+        for (const session of unsearchedSessions) {
+            if (this.tables.some(x => x.tableSessions.includes(session.sessionId))) {
+                continue;
             }
-            renderer.updateSearchHighlights(sessionHighlights);
+            this.danglingSessions.push(session.sessionId);
+            this.searchContent(session, sessions, 'outsideMainSession');
         }
+        this.editorService.setSearchResultCount(this.allMatches.length);
         if (!this.allMatches.length) {
             this.currentIndex = -1;
-            return;
         }
-        this.currentIndex = this.currentIndex > this.allMatches.length - 1 ? this.allMatches.length - 1 : this.currentIndex;
+        else {
+            this.currentIndex = this.currentIndex > this.allMatches.length - 1 ? this.allMatches.length - 1 : this.currentIndex;
+        }
+        this.updateActiveSearchHighlight(sessions);
     }
-    goNext(selection, currentSessionId) {
+    goNext(selection, currentSessionId, sessions) {
         if (!this.allMatches?.length) {
             return;
         }
-        let newIndex = this.allMatches.findIndex(x => (x.sessionId === currentSessionId &&
-            x.range.start.row === selection.cursor.row &&
-            x.range.start.column > selection.cursor.column) ||
-            (x.sessionId === currentSessionId && x.range.start.row > selection.cursor.row) ||
-            x.sessionId > currentSessionId);
-        this.currentIndex = newIndex < 0 ? 0 : newIndex;
+        const resultsAtCursor = this.allMatches.reduce((acc, match, index) => {
+            if (match.sessionId === currentSessionId && match.range.contains(selection.cursor)) {
+                acc.push(index);
+            }
+            return acc;
+        }, []);
+        if (resultsAtCursor.length) {
+            const nextResultIndex = resultsAtCursor.findIndex(x => x === this.currentIndex) + 1;
+            if (nextResultIndex < resultsAtCursor.length) {
+                this.currentIndex = resultsAtCursor[nextResultIndex];
+            }
+            else {
+                const nextIndex = resultsAtCursor[resultsAtCursor.length - 1] + 1;
+                this.currentIndex = nextIndex > this.allMatches.length - 1 ? 0 : nextIndex;
+            }
+            this.updateActiveSearchHighlight(sessions);
+            return;
+        }
+        const nextIndex = this.findNextAfterCursor(selection.cursor, currentSessionId);
+        this.currentIndex = nextIndex < 0 ? 0 : nextIndex;
+        this.updateActiveSearchHighlight(sessions);
     }
-    goPrevious(selection, currentSessionId) {
+    goPrevious(selection, currentSessionId, sessions) {
         if (!this.allMatches?.length) {
             return;
         }
-        let prevIndex = -1;
-        for (let i = this.allMatches.length - 1; i >= 0; i--) {
-            const match = this.allMatches[i];
-            if ((match.sessionId === currentSessionId &&
-                match.range.start.row === selection.cursor.row &&
-                match.range.start.column < selection.cursor.column) ||
-                (match.sessionId === currentSessionId && match.range.start.row < selection.cursor.row) ||
-                match.sessionId < currentSessionId) {
-                prevIndex = i;
-                break;
+        const resultsAtCursor = this.allMatches.reduce((acc, match, index) => {
+            if (match.sessionId === currentSessionId && match.range.contains(selection.cursor)) {
+                acc.push(index);
+            }
+            return acc;
+        }, []);
+        if (resultsAtCursor.length) {
+            const nextResultIndex = resultsAtCursor.findIndex(x => x === this.currentIndex) - 1;
+            if (nextResultIndex >= 0) {
+                this.currentIndex = resultsAtCursor[nextResultIndex];
+            }
+            else {
+                const nextIndex = resultsAtCursor[0] - 1;
+                this.currentIndex = nextIndex < 0 ? this.allMatches.length - 1 : nextIndex;
             }
+            this.updateActiveSearchHighlight(sessions);
+            return;
         }
+        const prevIndex = this.findPreviousBeforeCursor(selection.cursor, currentSessionId);
         this.currentIndex = prevIndex >= 0 ? prevIndex : this.allMatches.length - 1;
+        this.updateActiveSearchHighlight(sessions);
     }
     assembleRegExp(term) {
         if (!term) {
@@ -6787,6 +6969,204 @@ class Search {
             this.regex = null;
         }
     }
+    searchContent(currentSession, allSessions, mainSessionPosition = null) {
+        this.searchedSessionIds.push(currentSession.sessionId);
+        const sessionHighlights = [];
+        const customElementHighlights = [];
+        for (let i = 0; i < currentSession.session.displayData.paragraphs.length; i++) {
+            const paragraph = currentSession.session.displayData.paragraphs[i];
+            const paragraphTables = this.checkForTables(paragraph, currentSession, allSessions, i);
+            const paragraphCustomElements = this.checkForCustomElements(paragraph, currentSession);
+            const matches = paragraph.content.matchAll(this.regex);
+            const paragraphMatches = [];
+            for (const match of matches) {
+                paragraphMatches.push({ index: match.index, content: match });
+            }
+            const paragraphContent = [...paragraphTables, ...paragraphCustomElements, ...paragraphMatches].sort((x, y) => x.index - y.index);
+            for (const container of paragraphContent) {
+                if (container.content instanceof BaseNoderComponent) {
+                    const parentRange = new Range(new CursorParagraph(i, container.index), new CursorParagraph(i, container.index + 1));
+                    const customElementMatches = container.content.searchComponent(this.regex);
+                    for (let matchIndex = 0; matchIndex < customElementMatches; matchIndex++) {
+                        this.allMatches.push(new CustomElementSearchResult({
+                            sessionId: currentSession.sessionId,
+                            range: parentRange,
+                            mainSessionPosition: mainSessionPosition ?? new CursorParagraph(i, container.index),
+                            index: matchIndex
+                        }));
+                        customElementHighlights.push(new CustomElementInfo({ index: matchIndex, parentRange }));
+                    }
+                    continue;
+                }
+                if (Array.isArray(container.content) && container.content.every(x => x instanceof SessionModel)) {
+                    for (const session of container.content) {
+                        this.searchContent(session, allSessions, mainSessionPosition ?? new CursorParagraph(i, container.index));
+                    }
+                    continue;
+                }
+                const match = container.content;
+                if (paragraphTables.some(x => x.index >= match.index && x.index <= match.index + match[0].length) ||
+                    paragraphCustomElements.some(x => x.index >= match.index && x.index <= match.index + match[0].length)) {
+                    continue;
+                }
+                const range = new Range(new CursorParagraph(i, match.index), new CursorParagraph(i, match.index + match[0].length));
+                this.allMatches.push(new SearchResult({
+                    sessionId: currentSession.sessionId,
+                    range,
+                    mainSessionPosition: mainSessionPosition ?? new CursorParagraph(i, match.index)
+                }));
+                sessionHighlights.push(range);
+            }
+        }
+        currentSession.renderer.updateSearchHighlights(sessionHighlights);
+        currentSession.renderer.updateCustomElementHighlights(customElementHighlights);
+    }
+    checkForTables(paragraph, currentSession, allSessions, paragraphIndex) {
+        const result = [];
+        const paragraphTables = currentSession.session.displayData.customComponents.tables.filter(x => x.instance.content.insertIndex >= paragraph.startIndex &&
+            x.instance.content.insertIndex <= paragraph.startIndex + paragraph.content.length);
+        for (const table of paragraphTables) {
+            const tableSessions = [];
+            for (const session of allSessions) {
+                const parentTable = session.renderer.container.closest('app-nod-table');
+                if (parentTable && parentTable === table.location.nativeElement) {
+                    tableSessions.push(session);
+                }
+            }
+            this.tables.push({
+                sessionId: currentSession.sessionId,
+                tableSessions: tableSessions.map(x => x.sessionId),
+                row: paragraphIndex,
+                col: table.instance.content.insertIndex - paragraph.startIndex
+            });
+            result.push({ index: table.instance.content.insertIndex - paragraph.startIndex, content: tableSessions });
+        }
+        return result;
+    }
+    checkForCustomElements(paragraph, currentSession) {
+        const result = [];
+        const customElements = currentSession.session.displayData.customComponents.customElements.filter(x => x.instance.content.insertIndex >= paragraph.startIndex &&
+            x.instance.content.insertIndex <= paragraph.startIndex + paragraph.content.length);
+        for (const element of customElements) {
+            if (element.instance instanceof BaseNoderComponent) {
+                result.push({ index: element.instance.content.insertIndex - paragraph.startIndex, content: element.instance });
+            }
+        }
+        return result;
+    }
+    findNextAfterCursor(startCursor, sessionId) {
+        const closestResultCurrentSession = this.allMatches.find(x => (x.sessionId === sessionId && x.range.start.row === startCursor.row && x.range.start.column >= startCursor.column) ||
+            (x.sessionId === sessionId && x.range.start.row > startCursor.row));
+        if (closestResultCurrentSession) {
+            const tablesBeforeClosestResultCurrentSession = this.tables.filter(x => (x.sessionId === sessionId && x.row > startCursor.row && x.row < closestResultCurrentSession.range.start.row) ||
+                (x.sessionId === sessionId &&
+                    x.row === startCursor.row &&
+                    x.row < closestResultCurrentSession.range.start.row &&
+                    x.col > startCursor.column) ||
+                (x.sessionId === sessionId &&
+                    x.row === closestResultCurrentSession.range.start.row &&
+                    x.col < closestResultCurrentSession.range.start.column));
+            if (!tablesBeforeClosestResultCurrentSession.length) {
+                return this.allMatches.indexOf(closestResultCurrentSession);
+            }
+            const tableSessions = tablesBeforeClosestResultCurrentSession.flatMap(x => x.tableSessions);
+            for (const session of tableSessions) {
+                const result = this.findNextAfterCursor(new CursorParagraph(0, 0), session);
+                if (result >= 0) {
+                    return result;
+                }
+            }
+        }
+        const tablesAfterCursor = this.tables.filter(x => (x.sessionId === sessionId && x.row === startCursor.row && x.col >= startCursor.column) ||
+            (x.sessionId === sessionId && x.row > startCursor.row));
+        const tableSessions = tablesAfterCursor.flatMap(x => x.tableSessions);
+        for (const session of tableSessions) {
+            const result = this.findNextAfterCursor(new CursorParagraph(0, 0), session);
+            if (result >= 0) {
+                return result;
+            }
+        }
+        const table = this.tables.find(x => x.tableSessions.includes(sessionId));
+        if (table) {
+            const nextSessionIndex = table.tableSessions.findIndex(x => x === sessionId) + 1;
+            if (nextSessionIndex < table.tableSessions.length) {
+                return this.findNextAfterCursor(new CursorParagraph(0, 0), table.tableSessions[nextSessionIndex]);
+            }
+            return this.findNextAfterCursor(new CursorParagraph(table.row + 1, table.col + 1), table.sessionId);
+        }
+        if (this.danglingSessions.length) {
+            const danglingSessionsIndex = this.danglingSessions.indexOf(sessionId);
+            const nextSessionIndex = danglingSessionsIndex + 1;
+            if (nextSessionIndex < this.danglingSessions.length) {
+                return this.findNextAfterCursor(new CursorParagraph(0, 0), this.danglingSessions[nextSessionIndex]);
+            }
+        }
+        return -1;
+    }
+    findPreviousBeforeCursor(startCursor, sessionId) {
+        const closestResultCurrentSession = this.allMatches.findLast(x => (x.sessionId === sessionId && x.range.start.row === startCursor.row && x.range.start.column < startCursor.column) ||
+            (x.sessionId === sessionId && x.range.start.row < startCursor.row));
+        if (closestResultCurrentSession) {
+            const tablesAfterClosestResultCurrentSession = this.tables.filter(x => (x.sessionId === sessionId && x.row < startCursor.row && x.row > closestResultCurrentSession.range.start.row) ||
+                (x.sessionId === sessionId &&
+                    x.row === startCursor.row &&
+                    x.row > closestResultCurrentSession.range.start.row &&
+                    x.col < startCursor.column) ||
+                (x.sessionId === sessionId &&
+                    x.row === closestResultCurrentSession.range.start.row &&
+                    x.col > closestResultCurrentSession.range.start.column));
+            if (!tablesAfterClosestResultCurrentSession.length) {
+                return this.allMatches.indexOf(closestResultCurrentSession);
+            }
+            const tableSessions = tablesAfterClosestResultCurrentSession.flatMap(x => x.tableSessions);
+            for (const session of tableSessions.toReversed()) {
+                const result = this.findPreviousBeforeCursor(new CursorParagraph(Infinity, Infinity), session);
+                if (result >= 0) {
+                    return result;
+                }
+            }
+        }
+        const tablesBeforeCursor = this.tables.filter(x => (x.sessionId === sessionId && x.row === startCursor.row && x.col < startCursor.column) ||
+            (x.sessionId === sessionId && x.row < startCursor.row));
+        const tableSessions = tablesBeforeCursor.flatMap(x => x.tableSessions);
+        for (const session of tableSessions.toReversed()) {
+            const result = this.findPreviousBeforeCursor(new CursorParagraph(Infinity, Infinity), session);
+            if (result >= 0) {
+                return result;
+            }
+        }
+        const table = this.tables.find(x => x.tableSessions.includes(sessionId));
+        if (table) {
+            const currentSessionIndex = table.tableSessions.findIndex(x => x === sessionId);
+            if (currentSessionIndex > 0) {
+                return this.findPreviousBeforeCursor(new CursorParagraph(Infinity, Infinity), table.tableSessions[currentSessionIndex - 1]);
+            }
+            return this.findPreviousBeforeCursor(new CursorParagraph(table.row - 1, table.col - 1), table.sessionId);
+        }
+        if (this.danglingSessions.length) {
+            const currentSessionIndex = this.danglingSessions.indexOf(sessionId);
+            if (currentSessionIndex > 0) {
+                return this.findPreviousBeforeCursor(new CursorParagraph(Infinity, Infinity), this.danglingSessions[currentSessionIndex - 1]);
+            }
+        }
+        return -1;
+    }
+    updateActiveSearchHighlight(sessions) {
+        this.editorService.setCurrentSearchResultIndex(this.currentMatchIndex);
+        for (const session of sessions) {
+            if (this.currentMatch && session.sessionId === this.currentMatch.sessionId) {
+                const range = this.currentMatch instanceof CustomElementSearchResult
+                    ? new CustomElementInfo({
+                        index: this.currentMatch.index,
+                        parentRange: this.currentMatch.range
+                    })
+                    : this.currentMatch.range;
+                session.renderer.updateActiveSearchHighlight(range);
+                continue;
+            }
+            session.renderer.updateActiveSearchHighlight(null);
+        }
+    }
 }
 
 class Selection {
@@ -7253,6 +7633,7 @@ class Editor {
         this.edgeElementTagName = 'APP-NOD-EDGE';
         this.imageTagName = 'APP-NOD-IMAGE';
         this.subscriptions = [];
+        this.emojiRegex = /\p{Extended_Pictographic}(?:\p{Emoji_Modifier}|\u{200D}\p{Extended_Pictographic})*/gu;
         this.isRerenderSubscriptionOpen = true;
         this.rerenderResize = () => {
             this.mainRenderer.onResize(true);
@@ -7279,8 +7660,8 @@ class Editor {
         this.initResizeListener();
         this.focus();
         this.session.applyToolbarStyles();
-        this.search = new Search();
-        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.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.search = new Search(editorService);
+        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.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());
@@ -7332,13 +7713,14 @@ class Editor {
         this.removeSelected();
     }
     insert(text) {
+        const sanitizedText = text.replace(this.emojiRegex, ' ');
         if (this.selection.isEmpty) {
             const textStyle = ContentStyleHelper.combineTextStyles(null, this.editorService.styles);
-            this.insertText(text, textStyle);
+            this.insertText(sanitizedText, textStyle);
         }
         else {
             const index = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start);
-            const insertText = new InsertTextModel({ insertIndex: index, text });
+            const insertText = new InsertTextModel({ insertIndex: index, text: sanitizedText });
             this.replaceBy(new ReplaceModel({ insertText }));
         }
     }
@@ -7461,6 +7843,7 @@ class Editor {
         let lastRow = this.selection.cursor.row === endPoint.row ? endPoint.row : Infinity;
         this.renderer.updateLines(this.selection.cursor.row, lastRow);
         this.renderer.updateCursor();
+        this.onContentChange();
         this.rerenderMarker();
     }
     replaceBy(model) {
@@ -7586,45 +7969,27 @@ class Editor {
             });
         }
     }
-    find(term, focusNext = false) {
-        this.search.setSearchTerm(term);
-        if (!term?.length) {
-            for (const session of this.regulatorService.sessions) {
-                session.renderer.updateSearchHighlights([]);
-                session.renderer.updateActiveSearchHighlight(null);
-            }
-            this.editorService.setSearchResultCount(0);
-            return;
-        }
-        this.search.findAll(this.regulatorService.sessions);
-        this.editorService.setSearchResultCount(this.search.allMatches.length);
-        if (focusNext && this.search.allMatches?.length) {
-            this.search.goNext(this.selection, this.regulatorService.currentSession.sessionId);
-            this.updateActiveSearchHighlight();
-            this.mainRenderer.scrollCursorIntoView(new CursorParagraph(this.search.currentMatch.range.start.row, this.search.currentMatch.range.start.column));
-        }
-        else {
-            this.updateActiveSearchHighlight();
-        }
+    find(term) {
+        this.search.findAll(this.regulatorService.sessions, term);
     }
     findNext() {
         if (!this.search.allMatches?.length) {
             return;
         }
-        this.search.goNext(this.selection, this.regulatorService.currentSession.sessionId);
+        this.search.goNext(this.selection, this.regulatorService.currentSession.sessionId, this.regulatorService.sessions);
         this.setCursorAtSearchResult();
-        this.updateActiveSearchHighlight();
     }
     findPrevious() {
         if (!this.search.allMatches?.length) {
             return;
         }
-        this.search.goPrevious(this.selection, this.regulatorService.currentSession.sessionId);
-        this.updateActiveSearchHighlight();
+        this.search.goPrevious(this.selection, this.regulatorService.currentSession.sessionId, this.regulatorService.sessions);
         this.setCursorAtSearchResult();
     }
     replace() {
-        if (!this.search.allMatches?.length || this.search.term === this.replaceTerm) {
+        if (!this.search.currentMatch ||
+            this.search.term === this.replaceTerm ||
+            this.search.currentMatch instanceof CustomElementSearchResult) {
             return;
         }
         if (this.replaceTerm) {
@@ -7638,14 +8003,17 @@ class Editor {
             const replaceModel = new ReplaceModel({ insertText, delete: deleteModel });
             this.saveReplaceToHistory(this.search.currentMatch.range, replaceModel);
             const endPosition = this.session.replace(replaceModel);
-            this.onDocumentChange(new Range(this.search.currentMatch.range.start, endPosition));
+            const range = new Range(this.search.currentMatch.range.start, endPosition);
+            let lastRow = range.start.row === range.end.row ? range.end.row : Infinity;
+            this.renderer.updateLines(range.start.row, lastRow);
         }
         else {
             const range = this.search.currentMatch.range;
             this.saveRemoveToHistory(range);
             this.session.remove(range);
         }
-        this.find(this.search.term);
+        this.onContentChange();
+        this.findNext();
     }
     undo() {
         const undo = this.history.popUndoOperation();
@@ -8361,7 +8729,7 @@ class Editor {
         const scalingRatio = this.customPageWidth ? ScalingHelper.getRatio(this.customPageWidth, pageWidth) : 1;
         this.editorService.setPageFormat(this.model.pageFormats[0]);
         this.editorService.paragraphStyle(this.model.paragraphs[0].paragraphStyle);
-        this.regulatorService.addMainSession(this.model, pageWidth, scalingRatio, this.container);
+        this.regulatorService.addMainSession(this.model, scalingRatio, this.container);
     }
     onSelectionChange() {
         this.session.applyToolbarStyles();
@@ -8369,6 +8737,7 @@ class Editor {
         if (this.selection.isEmpty) {
             this.renderer.updateCursor();
         }
+        this.regulatorService.updateCursorPosition();
         this.editorService.setHasSelection(!this.selection.isEmpty);
         const position = this.mainSession.displayData.positionToIndex(this.selection.selectedRange.start);
         const pageFormat = this.mainSession.displayData.getPageFormatAtPosition(position);
@@ -8577,7 +8946,10 @@ class Editor {
     }
     searchOptionSubscriptions() {
         return [
-            this.editorService.searchTerm$.subscribe(searchTerm => this.find(searchTerm, true)),
+            this.editorService.searchTerm$.subscribe(searchTerm => {
+                this.find(searchTerm);
+                this.findNext();
+            }),
             this.editorService.searchNext$.subscribe(() => this.findNext()),
             this.editorService.searchPrevious$.subscribe(() => this.findPrevious())
         ];
@@ -8624,6 +8996,9 @@ class Editor {
     applyLeftIndentParagraphSubscription() {
         return this.editorService.leftIndentParagraph$.subscribe(indentLeft => this.applyParagraphsMargin({ indentLeft }));
     }
+    applyTabSettingsSubscription() {
+        return this.editorService.tabSettings$.subscribe(tabSettings => this.applyParagraphsMargin({ tabSettings }));
+    }
     setImageStyleSubscription() {
         return this.editorService.setImageStyle$.subscribe(image => this.applyImageStyles(image));
     }
@@ -8674,8 +9049,10 @@ class Editor {
         });
     }
     changedEdgeSizeSubscription() {
-        return this.editorService.changedEdgeSize$.subscribe(({ edgeType, pageType }) => {
-            this.mainSession.displayData.pagesFormat.forEach(x => x.updatePageVerticalData(edgeType, pageType));
+        return this.editorService.changedEdgeSize$.subscribe(event => {
+            this.mainSession.displayData.pagesFormat
+                .filter(x => x.pageFormatModel.pageWidth === event.pageWidth)
+                .forEach(x => x.updatePageVerticalData(event.edgeType, event.pageType));
             this.mainSession.displayData.processParagraphsProperties(0);
         });
     }
@@ -8819,6 +9196,11 @@ class Editor {
             this.clipboardData = data;
         });
     }
+    commandCreatedForEdges() {
+        return this.commandsService.createCommand$
+            .pipe(filter(x => !!x.targets.find(y => !!y.edgeData)))
+            .subscribe(() => this.regulatorService.forceUpdateDataForEdges());
+    }
     updateEdgeSubscription() {
         return this.editorService.updateEdges$.subscribe(sessionId => {
             let existed = this.mainSession.customComponents.edges.headersComponents.findIndex(x => x.instance.sessionId === sessionId);
@@ -8853,7 +9235,7 @@ class Editor {
         });
         this.selection.navigateFileStart();
         this.isRerenderSubscriptionOpen = false;
-        this.regulatorService.addMainSession(this.model, pageWidth, scalingRatio, this.container);
+        this.regulatorService.addMainSession(this.model, scalingRatio, this.container);
         this.isRerenderSubscriptionOpen = true;
         this.textInput = new TextInput(this.mainRenderer.container);
         this.mainRenderer.textarea = this.textInput.input;
@@ -8873,27 +9255,14 @@ class Editor {
     changeCellsWidth(rows, widthScale) {
         rows.forEach(row => row.cells.forEach(cell => (cell.width = Math.round(cell.width / widthScale))));
     }
-    updateActiveSearchHighlight() {
-        this.editorService.setCurrentSearchResultIndex(this.search.currentMatchIndex);
-        if (!this.search.currentMatch) {
-            for (const session of this.regulatorService.sessions) {
-                session.renderer.updateActiveSearchHighlight(null);
-            }
-            return;
-        }
-        for (const session of this.regulatorService.sessions) {
-            if (session.sessionId === this.search.currentMatch.sessionId) {
-                session.renderer.updateActiveSearchHighlight(this.search.currentMatch.range);
-                continue;
-            }
-            session.renderer.updateActiveSearchHighlight(null);
-        }
-    }
     setCursorAtSearchResult() {
+        if (this.search.currentMatch.mainSessionPosition !== 'outsideMainSession') {
+            this.mainRenderer.scrollCursorIntoView(this.search.currentMatch.mainSessionPosition, 0.5);
+        }
         this.regulatorService.setCurrentSessionById(this.search.currentMatch.sessionId);
-        const resultCursor = new CursorParagraph(this.search.currentMatch.range.start.row, this.search.currentMatch.range.start.column);
-        this.selection.placeCursor(resultCursor);
-        this.mainRenderer.scrollCursorIntoView(resultCursor);
+        const sessionModel = this.regulatorService.getSessionModel(this.search.currentMatch.sessionId);
+        sessionModel.session.selection.placeCursor(this.search.currentMatch.range.start);
+        this.renderer.updateCursor();
     }
 }
 
@@ -8908,6 +9277,7 @@ class EditorSearchBarComponent {
         this.isReplace = false;
         this.searchResultCount$ = editorService.searchResultCount$;
         this.searchResultIndex$ = editorService.currentSearchResultIndex$;
+        this.isViewOnly$ = editorService.isViewOnly$;
     }
     ngOnInit() {
         this.searchControl.valueChanges
@@ -8919,6 +9289,9 @@ class EditorSearchBarComponent {
         this.editorService.dialogSearchTerm$
             .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
             .subscribe(x => this.searchControl.setValue(x));
+        this.isViewOnly$
+            .pipe(filter(x => x), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => (this.isReplace = false));
     }
     ngOnDestroy() {
         this.editorService.setNewSearchTerm('');
@@ -8945,7 +9318,7 @@ class EditorSearchBarComponent {
         this.editorService.replaceCurrentSearchResult();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorSearchBarComponent, deps: [{ token: EditorService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorSearchBarComponent, isStandalone: true, selector: "app-nod-editor-search-bar", providers: [ExternalElementService], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "@let searchResultCount = searchResultCount$ | async;\n@let searchResultIndex = searchResultIndex$ | async;\n<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.SEARCH_FOR' | translate }}</mat-label>\n        <input\n            matInput\n            #searchInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"findPrev()\">\n            <mat-icon\n                fontSet=\"noder-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=\"noder-icon\"\n                fontIcon=\"icon-arrow-onright\"></mat-icon>\n        </button>\n    </div>\n</div>\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>{{ 'NODER.LABEL.REPLACE_WITH' | translate }}</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        {{ 'NODER.LABEL.REPLACE' | translate }}\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=\"noder-icon\"\n            fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n    </button>\n    <div class=\"counter\">\n        @if (searchResultCount) {\n            <span>\n                {{ 'NODER.COMPLEX_LABEL.OF_COUNTER' | translate: { current: searchResultIndex, total: searchResultCount ?? 0 } }}\n            </span>\n        } @else {\n            <span>{{ 'NODER.LABEL.NO_RESULTS' | translate }}</span>\n        }\n    </div>\n    <button\n        type=\"button\"\n        mat-icon-button\n        [matTooltip]=\"'NODER.LABEL.CLOSE' | translate\"\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n    </button>\n</div>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;border-style:solid;border-radius:0 0 4px 4px;border-width:1px;border-top:none}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{margin:8px 6px 0 0;display:flex;gap:8px}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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: 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: "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: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorSearchBarComponent, isStandalone: true, selector: "app-nod-editor-search-bar", providers: [ExternalElementService], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "@let searchResultCount = searchResultCount$ | async;\n@let searchResultIndex = searchResultIndex$ | async;\n@let isViewOnly = isViewOnly$ | async;\n<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.SEARCH_FOR' | translate }}</mat-label>\n        <input\n            matInput\n            #searchInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"findPrev()\">\n            <mat-icon\n                fontSet=\"noder-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=\"noder-icon\"\n                fontIcon=\"icon-arrow-onright\"></mat-icon>\n        </button>\n    </div>\n</div>\n@if (isReplace) {\n    <div class=\"replace-form\">\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.REPLACE_WITH' | translate }}</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            {{ 'NODER.LABEL.REPLACE' | translate }}\n        </button>\n    </div>\n}\n<div class=\"search-options\">\n    <button\n        type=\"button\"\n        [disabled]=\"isViewOnly\"\n        mat-icon-button\n        matTooltip=\"Toggle Replace Mode\"\n        (click)=\"setReplace()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n    </button>\n    <div class=\"counter\">\n        @if (searchResultCount) {\n            <span>\n                {{ 'NODER.COMPLEX_LABEL.OF_COUNTER' | translate: { current: searchResultIndex, total: searchResultCount ?? 0 } }}\n            </span>\n        } @else {\n            <span>{{ 'NODER.LABEL.NO_RESULTS' | translate }}</span>\n        }\n    </div>\n    <button\n        type=\"button\"\n        mat-icon-button\n        [matTooltip]=\"'NODER.LABEL.CLOSE' | translate\"\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n    </button>\n</div>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;border-style:solid;border-radius:0 0 4px 4px;border-width:1px;border-top:none}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{margin:8px 6px 0 0;display:flex;gap:8px}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: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: 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: "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: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorSearchBarComponent, decorators: [{
             type: Component,
@@ -8958,7 +9331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         MatTooltipModule,
                         ReactiveFormsModule,
                         TranslateModule
-                    ], providers: [ExternalElementService], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-search-bar', template: "@let searchResultCount = searchResultCount$ | async;\n@let searchResultIndex = searchResultIndex$ | async;\n<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.SEARCH_FOR' | translate }}</mat-label>\n        <input\n            matInput\n            #searchInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"findPrev()\">\n            <mat-icon\n                fontSet=\"noder-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=\"noder-icon\"\n                fontIcon=\"icon-arrow-onright\"></mat-icon>\n        </button>\n    </div>\n</div>\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>{{ 'NODER.LABEL.REPLACE_WITH' | translate }}</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        {{ 'NODER.LABEL.REPLACE' | translate }}\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=\"noder-icon\"\n            fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n    </button>\n    <div class=\"counter\">\n        @if (searchResultCount) {\n            <span>\n                {{ 'NODER.COMPLEX_LABEL.OF_COUNTER' | translate: { current: searchResultIndex, total: searchResultCount ?? 0 } }}\n            </span>\n        } @else {\n            <span>{{ 'NODER.LABEL.NO_RESULTS' | translate }}</span>\n        }\n    </div>\n    <button\n        type=\"button\"\n        mat-icon-button\n        [matTooltip]=\"'NODER.LABEL.CLOSE' | translate\"\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n    </button>\n</div>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;border-style:solid;border-radius:0 0 4px 4px;border-width:1px;border-top:none}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{margin:8px 6px 0 0;display:flex;gap:8px}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"] }]
+                    ], providers: [ExternalElementService], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-search-bar', template: "@let searchResultCount = searchResultCount$ | async;\n@let searchResultIndex = searchResultIndex$ | async;\n@let isViewOnly = isViewOnly$ | async;\n<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.SEARCH_FOR' | translate }}</mat-label>\n        <input\n            matInput\n            #searchInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"findPrev()\">\n            <mat-icon\n                fontSet=\"noder-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=\"noder-icon\"\n                fontIcon=\"icon-arrow-onright\"></mat-icon>\n        </button>\n    </div>\n</div>\n@if (isReplace) {\n    <div class=\"replace-form\">\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.REPLACE_WITH' | translate }}</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            {{ 'NODER.LABEL.REPLACE' | translate }}\n        </button>\n    </div>\n}\n<div class=\"search-options\">\n    <button\n        type=\"button\"\n        [disabled]=\"isViewOnly\"\n        mat-icon-button\n        matTooltip=\"Toggle Replace Mode\"\n        (click)=\"setReplace()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n    </button>\n    <div class=\"counter\">\n        @if (searchResultCount) {\n            <span>\n                {{ 'NODER.COMPLEX_LABEL.OF_COUNTER' | translate: { current: searchResultIndex, total: searchResultCount ?? 0 } }}\n            </span>\n        } @else {\n            <span>{{ 'NODER.LABEL.NO_RESULTS' | translate }}</span>\n        }\n    </div>\n    <button\n        type=\"button\"\n        mat-icon-button\n        [matTooltip]=\"'NODER.LABEL.CLOSE' | translate\"\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n    </button>\n</div>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;border-style:solid;border-radius:0 0 4px 4px;border-width:1px;border-top:none}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{margin:8px 6px 0 0;display:flex;gap:8px}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"] }]
         }], ctorParameters: () => [{ type: EditorService }, { type: i0.DestroyRef }], propDecorators: { searchInput: [{
                 type: ViewChild,
                 args: ['searchInput']
@@ -8967,94 +9340,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 const EXTERNAL_ELEMENT_SIDENAV = new InjectionToken('EXTERNAL_ELEMENT_SIDENAV');
 const EXTERNAL_ELEMENT_SERVICE = new InjectionToken('EXTERNAL_ELEMENT_SERVICE');
 
-class FontMetrics {
-    static { this.storageKey = 'metrics'; }
-    static { this.versionKey = 'editorVersion'; }
-    /**
-     * Key value pairs for calculated sizes of char symbols in HTML element
-     */
-    static { this.metrics = JSON.parse(localStorage.getItem(this.storageKey)) || {}; }
-    /**
-     * Key value pairs for identifiers and font strings
-     */
-    static { this.fontStringMap = {}; }
-    static checkVersion(version) {
-        let identifier = localStorage.getItem(this.versionKey);
-        if (identifier === version) {
-            return;
-        }
-        localStorage.removeItem(this.storageKey);
-        localStorage.setItem(this.versionKey, version);
-    }
-    static measureCharSize(ch, contentStyle) {
-        let identifier = this.fontStringMap[contentStyle];
-        if (!identifier) {
-            identifier = contentStyle.split(' ').join('_');
-            this.fontStringMap[contentStyle] = identifier;
-        }
-        this.metrics[identifier] ??= {};
-        if (!this.metrics[identifier][ch] || isNaN(this.metrics[identifier][ch].font)) {
-            this.metrics[identifier][ch] = this.calculateCanvas(ch, contentStyle);
-            localStorage.setItem(this.storageKey, JSON.stringify(this.metrics));
-        }
-        return this.metrics[identifier][ch];
-    }
-    static calculateCanvas(ch, contentStyle) {
-        this.canvasNode ||= document.createElement('canvas');
-        const fontBaseLine = this.fontBaseline(contentStyle, ch);
-        const context = this.canvasNode.getContext('2d');
-        context.font = contentStyle;
-        const textMetrics = context.measureText(ch);
-        return {
-            width: textMetrics.width,
-            height: textMetrics.fontBoundingBoxAscent + textMetrics.fontBoundingBoxDescent,
-            baseline: fontBaseLine.baseline,
-            content: fontBaseLine.content,
-            font: fontBaseLine.font,
-            line: fontBaseLine.line,
-            multiplier: fontBaseLine.multiplier,
-            ascent: textMetrics.fontBoundingBoxAscent,
-            descent: textMetrics.fontBoundingBoxDescent
-        };
-    }
-    static fontBaseline(contentStyle, text) {
-        const container = document.body;
-        this.measureDiv ||= document.createElement('div');
-        this.strut ||= document.createElement('span');
-        if (text === ' ') {
-            text = 'X';
-        }
-        this.measureDiv.style.font = contentStyle;
-        this.measureDiv.style.lineHeight = '1';
-        this.measureDiv.style.position = 'absolute';
-        this.measureDiv.style.visibility = 'hidden';
-        this.measureDiv.style.margin = '0';
-        this.measureDiv.style.padding = '0';
-        this.measureDiv.innerHTML = text;
-        this.strut.style.fontSize = '0';
-        this.strut.style.verticalAlign = 'baseline';
-        this.strut.style.padding = '0 10px';
-        this.measureDiv.classList.add('font-baseline');
-        this.measureDiv.appendChild(this.strut);
-        container.appendChild(this.measureDiv);
-        const computedStyle = window.getComputedStyle(this.measureDiv);
-        const fontSize = parseFloat(computedStyle.fontSize);
-        const baselineHeight = fontSize - this.strut.offsetTop;
-        const strutHeight = this.measureDiv.offsetHeight;
-        const lineHeight = parseFloat(computedStyle.lineHeight) || this.measureDiv.offsetHeight;
-        this.measureDiv.parentNode.removeChild(this.measureDiv);
-        this.measureDiv.innerHTML = '';
-        this.strut.innerHTML = '';
-        return {
-            baseline: baselineHeight,
-            content: strutHeight,
-            font: fontSize,
-            line: lineHeight,
-            multiplier: fontSize / baselineHeight
-        };
-    }
-}
-
 class ComponentService {
     constructor(applicationRef, injector) {
         this.applicationRef = applicationRef;
@@ -9416,6 +9701,7 @@ class NoderTableCellComponent {
         this.regulatorService = regulatorService;
         this.isHighlighted = false;
         this.resizerBorder = ResizerSide;
+        this.isVisible = false;
         this.pagesCountChangedHandler = (event) => {
             if (this._allParagraphsHeight === event.pageHeight) {
                 return;
@@ -9424,9 +9710,14 @@ class NoderTableCellComponent {
             this.heightChanged(this.rowIndex, this.cellIndex, event.pageHeight);
         };
     }
+    ngAfterViewInit() {
+        this.intersectionObserver = this.initializeIntersectionObserver();
+        this.intersectionObserver.observe(this.container.nativeElement);
+    }
     ngOnDestroy() {
         this.session?.displayData.removeEventListener('pagesCountChanged', this.pagesCountChangedHandler);
         this.regulatorService.removeSession(this.sessionId);
+        this.intersectionObserver?.disconnect();
     }
     initialize() {
         const marginModel = new MarginModel({
@@ -9458,6 +9749,22 @@ class NoderTableCellComponent {
     addEventListeners() {
         this.session.displayData.addEventListener('pagesCountChanged', this.pagesCountChangedHandler);
     }
+    initializeIntersectionObserver() {
+        const options = {
+            root: null,
+            rootMargin: '50px',
+            threshold: 0.01
+        };
+        return new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                const wasVisible = this.isVisible;
+                this.isVisible = entry.isIntersecting;
+                if (this.isVisible !== wasVisible) {
+                    this.renderer.setVisibility(this.isVisible);
+                }
+            });
+        }, options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTableCellComponent, deps: [{ token: EditorService }, { token: RegulatorService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTableCellComponent, isStandalone: false, selector: "app-nod-table-cell", inputs: { table: "table", cell: "cell", rowIndex: "rowIndex", cellIndex: "cellIndex", columnIndex: "columnIndex", width: "width", parentSessionId: "parentSessionId", generalProperties: "generalProperties", heightChanged: "heightChanged", startResizing: "startResizing" }, host: { properties: { "class.highlighted": "this.isHighlighted", "attr.data-session-id": "this.sessionId" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div\n    *ngIf=\"cellIndex === 0\"\n    class=\"resizer left-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Left)\"></div>\n<div\n    #container\n    class=\"edit-container\"></div>\n<div class=\"highlight-container\"></div>\n<div\n    class=\"resizer right-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Right)\"></div>\n", styles: [".highlight-container{visibility:hidden;position:absolute;width:100%;height:100%;background-color:#5ea8f766;pointer-events:none;overflow:hidden}:host{display:flex;position:relative;min-height:19px;height:100%;background:transparent}:host.highlighted .highlight-container{visibility:visible}.edit-container{min-height:1px;overflow:hidden}.left-border{left:-6px}.resizer{cursor:col-resize;width:11px;height:100%;position:absolute;z-index:1}.right-border{right:-6px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -9503,6 +9810,144 @@ class RowDataModel {
     }
 }
 
+var LineStyles;
+(function (LineStyles) {
+    LineStyles[LineStyles["SolidLine"] = 0] = "SolidLine";
+    LineStyles[LineStyles["RoundDot"] = 1] = "RoundDot";
+    LineStyles[LineStyles["SquareDot"] = 2] = "SquareDot";
+    LineStyles[LineStyles["Dash"] = 3] = "Dash";
+    LineStyles[LineStyles["DashDot"] = 4] = "DashDot";
+    LineStyles[LineStyles["LongDash"] = 5] = "LongDash";
+    LineStyles[LineStyles["LongDashDot"] = 6] = "LongDashDot";
+    LineStyles[LineStyles["LongDashDotDot"] = 7] = "LongDashDotDot";
+    LineStyles[LineStyles["Single"] = 8] = "Single";
+    LineStyles[LineStyles["Thick"] = 9] = "Thick";
+    LineStyles[LineStyles["Double"] = 10] = "Double";
+    LineStyles[LineStyles["Dotted"] = 11] = "Dotted";
+    LineStyles[LineStyles["Dashed"] = 12] = "Dashed";
+    LineStyles[LineStyles["DotDash"] = 13] = "DotDash";
+    LineStyles[LineStyles["DotDotDash"] = 14] = "DotDotDash";
+    LineStyles[LineStyles["Triple"] = 15] = "Triple";
+    LineStyles[LineStyles["ThinThickSmallGap"] = 16] = "ThinThickSmallGap";
+    LineStyles[LineStyles["ThickThinSmallGap"] = 17] = "ThickThinSmallGap";
+    LineStyles[LineStyles["ThinThickThinSmallGap"] = 18] = "ThinThickThinSmallGap";
+    LineStyles[LineStyles["ThinThickMediumGap"] = 19] = "ThinThickMediumGap";
+    LineStyles[LineStyles["ThickThinMediumGap"] = 20] = "ThickThinMediumGap";
+    LineStyles[LineStyles["ThinThickThinMediumGap"] = 21] = "ThinThickThinMediumGap";
+    LineStyles[LineStyles["ThinThickLargeGap"] = 22] = "ThinThickLargeGap";
+    LineStyles[LineStyles["ThickThinLargeGap"] = 23] = "ThickThinLargeGap";
+    LineStyles[LineStyles["ThinThickThinLargeGap"] = 24] = "ThinThickThinLargeGap";
+    LineStyles[LineStyles["Wave"] = 25] = "Wave";
+    LineStyles[LineStyles["DoubleWave"] = 26] = "DoubleWave";
+    LineStyles[LineStyles["DashSmallGap"] = 27] = "DashSmallGap";
+    LineStyles[LineStyles["DashDotStroked"] = 28] = "DashDotStroked";
+    LineStyles[LineStyles["ThreeDEmboss"] = 29] = "ThreeDEmboss";
+    LineStyles[LineStyles["ThreeDEngrave"] = 30] = "ThreeDEngrave";
+    LineStyles[LineStyles["Outset"] = 31] = "Outset";
+    LineStyles[LineStyles["Inset"] = 32] = "Inset";
+    LineStyles[LineStyles["Nil"] = 33] = "Nil";
+})(LineStyles || (LineStyles = {}));
+
+var Positions;
+(function (Positions) {
+    Positions[Positions["Top"] = 0] = "Top";
+    Positions[Positions["Right"] = 1] = "Right";
+    Positions[Positions["Bottom"] = 2] = "Bottom";
+    Positions[Positions["Left"] = 3] = "Left";
+    Positions[Positions["All"] = 4] = "All";
+    Positions[Positions["InsideHorizontal"] = 5] = "InsideHorizontal";
+    Positions[Positions["InsideVertical"] = 6] = "InsideVertical";
+})(Positions || (Positions = {}));
+
+class TableCellHelper {
+    static setCellBorders(cell, borders) {
+        if (!borders?.length || !cell) {
+            return;
+        }
+        borders.forEach(x => {
+            const style = this.getBorderStyle(x);
+            this.setCellBorder(cell, x.position, style);
+        });
+    }
+    static getBorderStyle(border) {
+        if (border.lineStyle === LineStyles.Nil) {
+            return 'none';
+        }
+        let style = `${border.width}pt`;
+        if (border.lineStyle) {
+            style += ` ${this.getBorderLineStyle(border.lineStyle)}`;
+        }
+        if (border.color && border.color !== 'auto') {
+            style += ` ${border.color}`;
+        }
+        return style;
+    }
+    static getBorderLineStyle(lineStyle) {
+        switch (lineStyle) {
+            case LineStyles.RoundDot:
+            case LineStyles.SquareDot:
+            case LineStyles.Dotted:
+                return 'dotted';
+            case LineStyles.Dash:
+            case LineStyles.Dashed:
+            case LineStyles.LongDash:
+            case LineStyles.DashSmallGap:
+            case LineStyles.DashDot:
+            case LineStyles.LongDashDot:
+            case LineStyles.DotDash:
+            case LineStyles.DashDotStroked:
+            case LineStyles.LongDashDotDot:
+            case LineStyles.DotDotDash:
+                return 'dashed';
+            case LineStyles.Double:
+            case LineStyles.DoubleWave:
+                return 'double';
+            case LineStyles.Wave:
+                return 'wavy'; // wavy is supported in some browsers
+            case LineStyles.ThreeDEmboss:
+            case LineStyles.ThreeDEngrave:
+                return 'ridge'; // approximate replacement for 3D effects
+            case LineStyles.Outset:
+                return 'outset';
+            case LineStyles.Inset:
+                return 'inset';
+            case LineStyles.Nil:
+                return 'none';
+            case LineStyles.ThinThickSmallGap: // complex combined styles are not supported
+            case LineStyles.ThickThinSmallGap:
+            case LineStyles.ThinThickThinSmallGap:
+            case LineStyles.ThinThickMediumGap:
+            case LineStyles.ThickThinMediumGap:
+            case LineStyles.ThinThickThinMediumGap:
+            case LineStyles.ThinThickLargeGap:
+            case LineStyles.ThickThinLargeGap:
+            case LineStyles.ThinThickThinLargeGap:
+            case LineStyles.Triple: // triple not support in css, set solid as default
+            case LineStyles.Single:
+            case LineStyles.SolidLine:
+            case LineStyles.Thick:
+            default:
+                return 'solid';
+        }
+    }
+    static setCellBorder(cell, position, style) {
+        switch (position) {
+            case Positions.Top:
+                cell.style.borderTop = style;
+                break;
+            case Positions.Bottom:
+                cell.style.borderBottom = style;
+                break;
+            case Positions.Left:
+                cell.style.borderLeft = style;
+                break;
+            case Positions.Right:
+                cell.style.borderRight = style;
+                break;
+        }
+    }
+}
+
 class SelectionRangeModel {
     constructor(rowIndexes, cellIndexes) {
         this.rowIndexes = rowIndexes;
@@ -10102,7 +10547,7 @@ class NoderTableComponent extends BaseNoderComponent {
         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 * this.width()) / 5000; // 5000 is equal to 100% in docx units of measurement
         }
         return ScalingHelper.scale(cellWidth, this.generalProperties.scalingRatio);
     }
@@ -10128,7 +10573,7 @@ class NoderTableComponent extends BaseNoderComponent {
         this.initialize();
     }
     insertRows(rowsCount, targetIndex) {
-        this.width = this.getTableWidth();
+        this.width.set(this.getTableWidth());
         let rowIndex = 0;
         while (rowIndex < rowsCount) {
             const targetRowIndex = targetIndex + rowIndex;
@@ -10169,6 +10614,9 @@ class NoderTableComponent extends BaseNoderComponent {
                 continue;
             }
             const cell = this.tableEl.rows[rowIndex].insertCell(currentTargetIndex);
+            if (this.table.rows[rowIndex].cells[modelCellIndex].borders) {
+                TableCellHelper.setCellBorders(cell, this.table.rows[rowIndex].cells[modelCellIndex].borders);
+            }
             const componentRef = this.componentService.generateAndAttachComponent(cell, NoderTableCellComponent, {
                 table: this.table,
                 cell: this.table.rows[rowIndex].cells[modelCellIndex],
@@ -10300,20 +10748,20 @@ class NoderTableComponent extends BaseNoderComponent {
                 bordersHeight += this.borderSize;
             }
         }
-        this.height = rowsHeight + bordersHeight;
+        this.height.set(rowsHeight + bordersHeight);
     }
     processSplit(leftSpaceOnPage, spaceBetweenPagesContent, contentHeight) {
         this.removeSplits();
-        if (leftSpaceOnPage >= this.height) {
-            return { splitsCount: 0, tableHeight: this.height, leftHeight: 0 };
+        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 { 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;
+        let leftHeight = 0, tableHeightWithSplits = this.height(), rowIndex = 0;
         while (rowIndex < this.rowMatrix.length) {
             let { index, rowsHeight } = this.getRowIndexByHeight(rowIndex, leftSpaceOnPage);
             rowIndex = index;
@@ -10621,8 +11069,8 @@ class PageFormat {
         }
         const pageTypes = this.customComponents.edges.getUniquePageTypes();
         this.pagesVerticalData = pageTypes.map(pageType => {
-            const headerHeight = this.customComponents.edges.getComponentHeightByPageType(pageType, EdgeType.Header);
-            const footerHeight = this.customComponents.edges.getComponentHeightByPageType(pageType, EdgeType.Footer);
+            const headerHeight = this.customComponents.edges.getComponentHeightByPageType(pageType, EdgeType.Header, this.pageFormatModel.pageWidth);
+            const footerHeight = this.customComponents.edges.getComponentHeightByPageType(pageType, EdgeType.Footer, this.pageFormatModel.pageWidth);
             const marginTop = Math.max(headerHeight, this.pageFormatModel.marginTop);
             const marginBottom = Math.max(footerHeight, this.pageFormatModel.marginBottom);
             return new PageVerticalDataModel({
@@ -10635,7 +11083,7 @@ class PageFormat {
     }
     updatePageVerticalData(edgeType, pageType) {
         const pageVerticalData = this.pagesVerticalData.find(x => x.pageType === pageType);
-        const componentHeight = this.customComponents.edges.getComponentHeightByType(pageType, edgeType);
+        const componentHeight = this.customComponents.edges.getComponentHeightByType(pageType, edgeType, this.pageFormatModel.pageWidth);
         if (edgeType === EdgeType.Header) {
             pageVerticalData.marginTop =
                 componentHeight > this.pageFormatModel.marginTop ? componentHeight : this.pageFormatModel.marginTop;
@@ -10685,7 +11133,7 @@ class TextLineInfo {
                 this.paddingLeft = indent.left + (diff - indent.left - indent.right) / 2 + (indent.hanging - indent.firstLine) / 2;
                 break;
             case Alignment$1.right:
-                this.paddingLeft = diff - indent.right;
+                this.paddingLeft = diff - indent.right + indent.hanging - indent.firstLine;
                 break;
             default:
                 this.paddingLeft = indent.left;
@@ -10807,9 +11255,20 @@ class ParagraphStyleHelper {
     }
 }
 
+var TabAlignment;
+(function (TabAlignment) {
+    TabAlignment[TabAlignment["Left"] = 0] = "Left";
+    TabAlignment[TabAlignment["Center"] = 1] = "Center";
+    TabAlignment[TabAlignment["Right"] = 2] = "Right";
+    TabAlignment[TabAlignment["Decimal"] = 3] = "Decimal";
+    TabAlignment[TabAlignment["Bar"] = 4] = "Bar";
+})(TabAlignment || (TabAlignment = {}));
+
 class TabHelper {
-    static calculateTabWidth(rowWidth, defaultTabWidth) {
-        return defaultTabWidth - (rowWidth % defaultTabWidth);
+    static calculateTabWidth(rowWidth, defaultTabWidth, tabSettings) {
+        const tabs = tabSettings ?? [];
+        const nextSetting = tabs.find(x => x.position > rowWidth);
+        return nextSetting ? nextSetting.position - rowWidth : defaultTabWidth - (rowWidth % defaultTabWidth);
     }
 }
 
@@ -10837,13 +11296,11 @@ class DisplayData extends EventEmitting {
         this.pagesFormat = [];
         this.allPagesHeight = 0;
         this.tabTokens = [];
-        this.paragraphs = this.splitByParagraphs(this.model.content).map(x => new ParagraphInfoModel({ content: x }));
-        this.pagesFormat = pageFormatModels.map(x => new PageFormat(x, pagesSpace, customComponents));
+        this.updateDataForModel();
     }
-    recreatePageFormatsNotMainSession(width) {
-        this.pagesFormat = [
-            new PageFormat(new PageFormatModel({ ...this.pagesFormat[0].pageFormatModel, pageWidth: width }), this.pagesSpace, this.customComponents)
-        ];
+    updateDataForModel() {
+        this.paragraphs = this.splitByParagraphs(this.model.content).map(x => new ParagraphInfoModel({ content: x }));
+        this.pagesFormat = this.pageFormatModels.map(x => new PageFormat(x, this.pagesSpace, this.customComponents));
     }
     insertText(position, text) {
         const endPoint = this.insertTextAndReturnEndCursorPosition(text, position);
@@ -11052,7 +11509,11 @@ class DisplayData extends EventEmitting {
             this.allPagesHeight += (lastPageNumber - firstPageNumber + 1) * (pageHeight + this.pagesSpace) + this.pagesSpace;
         });
         const lastPageNumber = this.paragraphs[this.paragraphs.length - 1].paragraphSettings.lastPageNumber;
-        this.emit('pagesCountChanged', { pagesCount: lastPageNumber, pageHeight: this.allPagesHeight + 2 * this.pagesSpace });
+        this.emit('pagesCountChanged', {
+            pagesCount: lastPageNumber,
+            pageHeight: this.allPagesHeight + 2 * this.pagesSpace,
+            pageWidth: this.pagesFormat[0].pageFormatModel.pageWidth // variable needed only for headers and footers (in headers and footers only 1 pageFormat)
+        });
     }
     getAllParagraphsHeight() {
         return this.paragraphs.reduce((sum, x) => sum + x.paragraphSettings.height, 0);
@@ -11170,8 +11631,7 @@ class DisplayData extends EventEmitting {
         }
         const startIndex = tabIndex;
         while (this.customComponents.tabs[tabIndex] && this.customComponents.tabs[tabIndex].instance.insertIndex <= paragraphLastIndex) {
-            this.customComponents.tabs[tabIndex].instance.width = this.tabTokens[tabIndex - startIndex].width;
-            this.customComponents.tabs[tabIndex].instance.height = this.tabTokens[tabIndex - startIndex].font;
+            this.customComponents.tabs[tabIndex].instance.applySize(this.tabTokens[tabIndex - startIndex].width, this.tabTokens[tabIndex - startIndex].font);
             tabIndex++;
         }
         return tabIndex;
@@ -11206,7 +11666,7 @@ class DisplayData extends EventEmitting {
             if (!tokens.length) {
                 tokens.push(...this.getEmptyDisplayTokens(model, this.paragraphs[paragraphIndex].startIndex + index));
             }
-            let wrapLimit = this.computeWrapIndex(tokens, pageFormat.contentWidth, this.generalProperties.defaultTabWidth);
+            let wrapLimit = this.computeWrapIndex(tokens, pageFormat.contentWidth, this.generalProperties.defaultTabWidth, model.paragraphs[paragraphIndex].paragraphStyle.tabSettings);
             if (tokens[tokens.length - 1].isPageBreak && wrapLimit === tokens.length && this.paragraphs.length > paragraphIndex + 1) {
                 wrapLimit = 0;
             }
@@ -11609,7 +12069,7 @@ class DisplayData extends EventEmitting {
     /**
      * Computes wrap index based on max row width
      */
-    computeWrapIndex(displayTokens, contentWidth, defaultTabWidth) {
+    computeWrapIndex(displayTokens, contentWidth, defaultTabWidth, tabSettings) {
         if (!displayTokens[0]) {
             return 0;
         }
@@ -11622,13 +12082,46 @@ class DisplayData extends EventEmitting {
             displayTokens[0].indentHanging || 0;
         const maxRowWidth = contentWidth - indent;
         let sum = 0;
+        let prevTabIndex = null;
+        let tabCenter = null;
+        let prevTabAlignment = TabAlignment.Left;
         for (let i = 0; i < displayTokens.length; i++) {
             const token = displayTokens[i];
             const prevToken = i > 0 ? displayTokens[i - 1] : null;
             if (token.isTab) {
-                token.width = TabHelper.calculateTabWidth(sum, defaultTabWidth);
+                const tabs = tabSettings ?? [];
+                const nextSettingIndex = tabs.findIndex(x => x.position > sum);
+                const tokenWidth = TabHelper.calculateTabWidth(sum, defaultTabWidth, tabSettings);
+                if (nextSettingIndex >= 0 && tabs[nextSettingIndex].alignment === TabAlignment.Center) {
+                    prevTabAlignment = TabAlignment.Center;
+                    tabCenter = { stringWidth: 0, tokenWidth };
+                    token.width = tokenWidth;
+                }
+                else {
+                    prevTabAlignment = nextSettingIndex >= 0 ? tabs[nextSettingIndex].alignment : TabAlignment.Left;
+                    token.width = tokenWidth;
+                    tabCenter = null;
+                }
+                prevTabIndex = i;
+            }
+            if (prevTabAlignment === TabAlignment.Center && !token.isTab && tabCenter.stringWidth < tabCenter.tokenWidth) {
+                const tokenWidth = token.width / 2;
+                displayTokens[prevTabIndex].width -= tokenWidth;
+                tabCenter.stringWidth += tokenWidth;
+                sum += tokenWidth;
+            }
+            else if (prevTabAlignment === TabAlignment.Right && !token.isTab && displayTokens[prevTabIndex].width !== 0) {
+                if (displayTokens[prevTabIndex].width - token.width < 0) {
+                    sum += token.width - displayTokens[prevTabIndex].width;
+                    displayTokens[prevTabIndex].width = 0;
+                }
+                else {
+                    displayTokens[prevTabIndex].width -= token.width;
+                }
+            }
+            else {
+                sum += token.width;
             }
-            sum += token.width;
             if (sum >= maxRowWidth) {
                 return i > 0 ? i - 1 : 0;
             }
@@ -11784,18 +12277,20 @@ class NoderEdgeComponent extends DestroyComponent {
         this.translateService = translateService;
         this.cdr = cdr;
         this.initialized = false;
+        this.isVisible = false;
         this.pagesCountChangedHandler = (event) => {
             if (this._height === event.pageHeight) {
                 return;
             }
             this._height = event.pageHeight;
             this.applyHeight();
-            this.editorService.changedEdgeSize(this.type, this.model.pageType);
+            this.editorService.changedEdgeSize(this.type, this.model.pageType, event.pageWidth, this._height);
         };
     }
     ngOnDestroy() {
         this.session?.displayData.removeEventListener('pagesCountChanged', this.pagesCountChangedHandler);
         this.regulatorService.removeSession(this.sessionId);
+        this.intersectionObserver?.disconnect();
         super.ngOnDestroy();
     }
     initialize() {
@@ -11814,14 +12309,8 @@ class NoderEdgeComponent extends DestroyComponent {
             this.edgeNameByType = this.getEdgeNameByType();
             this.cdr.detectChanges();
         });
-    }
-    setPageWidth(width) {
-        if (width === this.width) {
-            return;
-        }
-        this.session.displayData.recreatePageFormatsNotMainSession(width);
-        this.session.rerender(0);
-        this.edgeSession.renderer.loop.schedule({ full: true });
+        this.intersectionObserver = this.initializeIntersectionObserver();
+        this.intersectionObserver.observe(this.container.nativeElement);
     }
     enterEditMode() {
         DomHelper.addCssClass(this.container.nativeElement, this.editModeClass);
@@ -11864,6 +12353,22 @@ class NoderEdgeComponent extends DestroyComponent {
         const height = this.contentHeight > maxHeight ? maxHeight : this.contentHeight;
         DomHelper.setStyle(this.typeContainer.nativeElement.style, this.typeContainerPosition, `${height}px`);
     }
+    initializeIntersectionObserver() {
+        const options = {
+            root: null,
+            rootMargin: '50px',
+            threshold: 0.01
+        };
+        return new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                const wasVisible = this.isVisible;
+                this.isVisible = entry.isIntersecting;
+                if (this.isVisible !== wasVisible) {
+                    this.renderer.setVisibility(this.isVisible);
+                }
+            });
+        }, options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderEdgeComponent, deps: [{ token: RegulatorService }, { token: EditorService }, { token: i3$1.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderEdgeComponent, isStandalone: false, selector: "app-nod-edge", inputs: { model: "model", generalProperties: "generalProperties", margins: "margins", width: "width", parentSessionId: "parentSessionId", isEvenEdgesExist: "isEvenEdgesExist", type: "type" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "typeContainer", first: true, predicate: ["locationType"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    #container\n    class=\"edit-container\"></div>\n<div\n    #locationType\n    class=\"location-type\">\n    <span>{{ edgeNameByType }}</span>\n</div>\n", styles: [":host{height:100%;width:100%;background:transparent;display:block}.location-type{position:absolute;height:auto;width:auto;font-size:9pt;color:#333;background-color:#f2f2f2;border:1px solid #838282;border-radius:2px;padding:4px;margin-left:5px;z-index:2}.header-edit-mode{border-bottom:1px dashed #838282}.footer-edit-mode{border-top:1px dashed #838282}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -11893,10 +12398,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class Edges {
-    constructor(componentService, headers, footers, margins, pageWidth, parentSessionId, generalProperties) {
+    constructor(componentService, headers, footers, margins, pageFormats, parentSessionId, generalProperties) {
         this.componentService = componentService;
         this.margins = margins;
-        this.pageWidth = pageWidth;
+        this.pageFormats = pageFormats;
         this.parentSessionId = parentSessionId;
         this.generalProperties = generalProperties;
         this.headersComponents = [];
@@ -11913,23 +12418,19 @@ class Edges {
         }
     }
     createEdges(headerModel, footerModel) {
-        this.headersComponents.push(this.componentService.generateComponent(NoderEdgeComponent, {
-            model: headerModel,
-            margins: new MarginModel({ ...this.margins, bottom: 0 }),
-            type: EdgeType.Header,
-            width: this.pageWidth,
-            generalProperties: this.generalProperties,
-            parentSessionId: this.parentSessionId,
-            isEvenEdgesExist: false
-        }));
-        this.footersComponents.push(this.componentService.generateComponent(NoderEdgeComponent, {
-            model: footerModel,
-            margins: new MarginModel({ ...this.margins, top: 0 }),
-            type: EdgeType.Footer,
-            width: this.pageWidth,
+        this.headersComponents.push(...this.createEdgesByPageFormats(headerModel, new MarginModel({ ...this.margins, bottom: 0 }), EdgeType.Header, false));
+        this.footersComponents.push(...this.createEdgesByPageFormats(footerModel, new MarginModel({ ...this.margins, top: 0 }), EdgeType.Footer, false));
+    }
+    createEdgesByPageFormats(model, margins, type, isEvenEdgesExist) {
+        const uniqueWidth = new Set(this.pageFormats.map(x => x.pageWidth));
+        return Array.from(uniqueWidth).map(width => this.componentService.generateComponent(NoderEdgeComponent, {
+            model,
+            margins,
+            type,
+            width,
             generalProperties: this.generalProperties,
             parentSessionId: this.parentSessionId,
-            isEvenEdgesExist: false
+            isEvenEdgesExist
         }));
     }
     removeEdges(pageType) {
@@ -11941,21 +12442,22 @@ class Edges {
     getTypeBySessionId(sessionId) {
         let component = this.headersComponents.find(x => x.instance.sessionId === sessionId);
         if (component) {
-            return { type: EdgeType.Header, pageType: component.instance.model.pageType };
+            return { type: EdgeType.Header, pageType: component.instance.model.pageType, pageWidth: component.instance.width };
         }
         component = this.footersComponents.find(x => x.instance.sessionId === sessionId);
-        return { type: EdgeType.Footer, pageType: component.instance.model.pageType };
+        return { type: EdgeType.Footer, pageType: component.instance.model.pageType, pageWidth: component.instance.width };
     }
-    getComponentByPage(page, type) {
+    getComponentByPage(page, type, pageWidth) {
         const components = type === EdgeType.Header ? this.headersComponents : this.footersComponents;
-        return this.getComponent(components, page);
+        return this.getComponents(components, page).find(x => x.instance.width === pageWidth);
     }
     getComponentByPageType(pageType, type) {
         const components = type === EdgeType.Header ? this.headersComponents : this.footersComponents;
         return components.find(x => x.instance.model.pageType === pageType);
     }
-    getComponentHeightByPageType(pageType, type) {
-        const component = this.getComponentByPageType(pageType, type);
+    getComponentHeightByPageType(pageType, type, pageWidth) {
+        const components = type === EdgeType.Header ? this.headersComponents : this.footersComponents;
+        const component = components.find(x => x.instance.model.pageType === pageType && x.instance.width === pageWidth);
         if (!component) {
             return 0;
         }
@@ -11967,9 +12469,9 @@ class Edges {
         const height = instance.contentHeight;
         return height > this.generalProperties.maxEdgeHeight ? this.generalProperties.maxEdgeHeight : height;
     }
-    getComponentHeightByType(pageType, type) {
+    getComponentHeightByType(pageType, type, pageWidth) {
         const components = type === EdgeType.Header ? this.headersComponents : this.footersComponents;
-        const height = components.find(x => x.instance.model.pageType === pageType)?.instance.contentHeight ?? 0;
+        const height = components.find(x => x.instance.model.pageType === pageType && x.instance.width === pageWidth)?.instance.contentHeight ?? 0;
         return height > this.generalProperties.maxEdgeHeight ? this.generalProperties.maxEdgeHeight : height;
     }
     toggleEditMode(isEdit) {
@@ -12013,26 +12515,21 @@ class Edges {
                 return 1;
             return 0;
         })) {
-            const componentRef = this.componentService.generateComponent(NoderEdgeComponent, {
-                model,
-                margins,
-                type,
-                width: this.pageWidth,
-                generalProperties: this.generalProperties,
-                parentSessionId: this.parentSessionId,
-                isEvenEdgesExist
-            });
-            resultComponents.push(componentRef);
+            resultComponents.push(...this.createEdgesByPageFormats(model, margins, type, isEvenEdgesExist));
         }
         return resultComponents;
     }
-    getComponent(edgeComponents, page) {
-        const defaultComponent = edgeComponents.find(x => x.instance.model.pageType === PageType.Default);
+    getComponents(edgeComponents, page) {
+        const defaultComponent = edgeComponents.filter(x => x.instance.model.pageType === PageType.Default);
+        let targetType = PageType.Default;
         if (page === 1) {
-            return edgeComponents.find(x => x.instance.model.pageType === PageType.First) || defaultComponent;
+            targetType = PageType.First;
         }
-        const targetType = page % 2 === 0 ? PageType.Even : PageType.Default;
-        return edgeComponents.find(x => x.instance.model.pageType === targetType) || defaultComponent;
+        else if (page % 2 === 0) {
+            targetType = PageType.Even;
+        }
+        const edges = edgeComponents.filter(x => x.instance.model.pageType === targetType);
+        return edges.length > 0 ? edges : defaultComponent;
     }
 }
 
@@ -12329,7 +12826,7 @@ class NoderImageComponent extends BaseNoderComponent {
         this.content = val;
     }
     get size() {
-        return { width: this.width, height: this.height };
+        return { width: this.width(), height: this.height() };
     }
     constructor(elementRef, apiService) {
         super();
@@ -12339,8 +12836,8 @@ class NoderImageComponent extends BaseNoderComponent {
     }
     initialize() {
         const url = this.image.content?.replace('/api/', '') ?? '';
-        this.height = ScalingHelper.scale(this.image.height, this.generalProperties.scalingRatio);
-        this.width = ScalingHelper.scale(this.image.width, this.generalProperties.scalingRatio);
+        this.height.set(ScalingHelper.scale(this.image.height, this.generalProperties.scalingRatio));
+        this.width.set(ScalingHelper.scale(this.image.width, this.generalProperties.scalingRatio));
         this.apiService.getFile(url).subscribe(x => {
             const fileSource = URL.createObjectURL(x);
             const image = this.createImage(fileSource);
@@ -12354,8 +12851,8 @@ class NoderImageComponent extends BaseNoderComponent {
         this.editorService.changeImageStyle(resizedImage);
     }
     resize(size) {
-        this.width = size.width;
-        this.height = size.height;
+        this.width.set(size.width);
+        this.height.set(size.height);
         this.isCanvas ? this.resizeCanvas(size) : this.resizeImage(size);
         this.cdr.markForCheck();
     }
@@ -12373,8 +12870,8 @@ class NoderImageComponent extends BaseNoderComponent {
     }
     createImage(fileSource) {
         const imageEl = document.createElement('img');
-        imageEl.width = this.width;
-        imageEl.height = this.height;
+        imageEl.width = this.width();
+        imageEl.height = this.height();
         imageEl.draggable = false;
         imageEl.src = fileSource;
         return imageEl;
@@ -12405,25 +12902,22 @@ class NoderTabComponent extends BaseNoderComponent {
         this.content = val;
     }
     initialize() {
-        this.calculateProperties();
+        this.applySize(this.tab.width, this.tab.fontSize);
     }
-    calculateProperties() {
-        this.height = this.tab.fontSize;
-        this.width = ScalingHelper.scale(this.tab.width, this.generalProperties.scalingRatio);
+    applySize(width, font) {
+        this.height.set(font);
+        this.width.set(ScalingHelper.scale(width, this.generalProperties.scalingRatio));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTabComponent, isStandalone: false, selector: "app-nod-tab", host: { properties: { "style.width.px": "this.width", "style.fontSize.pt": "this.height" } }, usesInheritance: true, ngImport: i0, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTabComponent, isStandalone: false, selector: "app-nod-tab", host: { properties: { "style.width.px": "width()", "style.fontSize.pt": "height()" } }, usesInheritance: true, ngImport: i0, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nod-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"] }]
-        }], propDecorators: { width: [{
-                type: HostBinding,
-                args: ['style.width.px']
-            }], height: [{
-                type: HostBinding,
-                args: ['style.fontSize.pt']
-            }] } });
+            args: [{ selector: 'app-nod-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, host: {
+                        '[style.width.px]': 'width()',
+                        '[style.fontSize.pt]': 'height()'
+                    }, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"] }]
+        }] });
 
 const CHARS = [
     // eslint-disable-next-line prettier/prettier
@@ -12456,7 +12950,7 @@ class EditSession {
     get scrollBarHeight() {
         return this.scrollBar?.element.clientHeight ?? 0; // only main session is scrollable
     }
-    constructor(displayData, sessionId, customContentService, model, selection, generalProperties, editorService, customComponents, type, scrollBar) {
+    constructor(displayData, sessionId, customContentService, model, selection, generalProperties, editorService, customComponents, type, scrollBar, edgeType) {
         this.displayData = displayData;
         this.sessionId = sessionId;
         this.customContentService = customContentService;
@@ -12467,6 +12961,7 @@ class EditSession {
         this.customComponents = customComponents;
         this.type = type;
         this.scrollBar = scrollBar;
+        this.edgeType = edgeType;
         this.tokenRe = new RegExp('^[' + UnicodeHelper.wordChars + '\\$_]+', 'g');
         this.nonTokenRe = new RegExp('^(?:[^' + UnicodeHelper.wordChars + '\\$_]|\\s])+', 'g');
     }
@@ -13085,6 +13580,10 @@ class EditSession {
         OperationsHelper.removeEdges(document.headers, document.footers, pageType);
         this.customComponents.edges.removeEdges(pageType);
     }
+    updateDisplayData() {
+        this.displayData.updateDataForModel();
+        this.displayData.updateNextLineIndexes(0, this.displayData.paragraphs.length - 1);
+    }
 }
 
 class GeneralPropertiesModel {
@@ -13216,7 +13715,8 @@ class RenderChangesModel {
             this.scroll ||
             this.size ||
             this.text ||
-            this.dragAndDrop);
+            this.dragAndDrop ||
+            this.visibilityChanged);
     }
     constructor(fields) {
         this.cursor = false;
@@ -13229,6 +13729,7 @@ class RenderChangesModel {
         this.size = false;
         this.text = false;
         this.dragAndDrop = false;
+        this.visibilityChanged = false;
         if (!fields) {
             return;
         }
@@ -13361,6 +13862,16 @@ class HighlightLayer {
         const left = rangeInfo.leftPos;
         this.renderHighlight(this.getMarkerStyle(height, width, top, left), cssClass);
     }
+    drawCustomElementHighlight(elementInfo, cssClass, screenParentRange) {
+        const elementIndex = this.session.displayData.paragraphs[elementInfo.parentRange.start.row].startIndex + elementInfo.parentRange.start.column;
+        const element = this.session.customComponents.customElements.find(x => x.instance.content.insertIndex === elementIndex);
+        if (!element) {
+            return;
+        }
+        const top = this.getTop(screenParentRange.start.row);
+        const info = this.getRangeInfo(this.session, screenParentRange);
+        this.renderHighlight(this.getMarkerStyle(elementInfo.location.height, elementInfo.location.width, top + elementInfo.location.top, info.leftPos + elementInfo.location.left), cssClass);
+    }
     getRangeInfo(session, range) {
         const start = range.start;
         const end = range.end;
@@ -13383,34 +13894,43 @@ class SearchHighlightLayer extends HighlightLayer {
         this.className = 'noder-highlight';
         this.selectedClassName = 'noder-selected-highlight';
         this.markers = [];
+        this.customElementsRanges = [];
     }
     update(config) {
-        if (!config) {
+        if (!config?.isVisible) {
             return;
         }
         this.config = config;
         this.selectionIndex = 0;
+        this.getVisibleCustomElementResults(config);
         if (this.active) {
-            const screenRange = this.active.toScreenRange(this.session);
-            if (!screenRange.isEmpty &&
-                (!config.visibleRange ||
-                    (screenRange.start.row >= config.visibleRange.startScreenLine &&
-                        screenRange.end.row <= config.visibleRange.endScreenLine))) {
-                if (screenRange.isSingleLine) {
-                    this.drawSingleLineMarker(screenRange, this.selectedClassName);
-                }
-                else {
-                    this.drawMultiLineMarker(screenRange, this.selectedClassName);
+            if (this.active instanceof Range) {
+                const screenRange = this.active.toScreenRange(this.session);
+                if (!screenRange.isEmpty &&
+                    (!config.visibleRange ||
+                        (screenRange.start.row >= config.visibleRange.startScreenLine &&
+                            screenRange.end.row <= config.visibleRange.endScreenLine))) {
+                    if (screenRange.isSingleLine) {
+                        this.drawSingleLineMarker(screenRange, this.selectedClassName);
+                    }
+                    else {
+                        this.drawMultiLineMarker(screenRange, this.selectedClassName);
+                    }
                 }
             }
+            else {
+                this.updateActiveResult();
+                const screenParentRange = this.active.parentRange.toScreenRange(this.session);
+                this.drawCustomElementHighlight(this.active, this.selectedClassName, screenParentRange);
+            }
         }
-        if (this.markers) {
+        if (this.markers?.length) {
             const ranges = this.markers
                 .map(x => x.toScreenRange(this.session))
                 .filter(x => !x.isEmpty &&
                 (!config.visibleRange ||
                     (x.start.row >= config.visibleRange.startScreenLine && x.end.row <= config.visibleRange.endScreenLine)) &&
-                !x.isEqual(this.active));
+                ((this.active instanceof Range && !x.isEqual(this.active)) || !(this.active instanceof Range)));
             for (const range of ranges) {
                 if (!range.isEmpty) {
                     if (range.isSingleLine) {
@@ -13422,12 +13942,80 @@ class SearchHighlightLayer extends HighlightLayer {
                 }
             }
         }
+        if (this.customElementsRanges?.length) {
+            for (const element of this.customElementsRanges) {
+                if (!element.location ||
+                    (this.active &&
+                        this.active instanceof CustomElementInfo &&
+                        this.active.parentRange.isEqual(element.parentRange) &&
+                        this.active.location.isEqual(element.location))) {
+                    continue;
+                }
+                const screenParentRange = element.parentRange.toScreenRange(this.session);
+                if (!config.visibleRange ||
+                    (screenParentRange.start.row >= config.visibleRange.startScreenLine &&
+                        screenParentRange.end.row <= config.visibleRange.endScreenLine)) {
+                    this.drawCustomElementHighlight(element, this.className, screenParentRange);
+                }
+            }
+        }
         if (this.selectionIndex !== -1) {
             while (this.selectionIndex < this.element.childElementCount) {
                 this.element.removeChild(this.element.lastChild);
             }
         }
     }
+    getVisibleCustomElementResults(config) {
+        if (!this.customElementsRanges?.length) {
+            return;
+        }
+        const groupedByParentRange = [];
+        for (const element of this.customElementsRanges) {
+            if (element.location) {
+                continue;
+            }
+            const existingGroup = groupedByParentRange.find(group => group.range.isEqual(element.parentRange));
+            if (existingGroup) {
+                existingGroup.elements.push(element);
+            }
+            else {
+                groupedByParentRange.push({
+                    range: element.parentRange,
+                    elements: [element]
+                });
+            }
+        }
+        if (!groupedByParentRange.length) {
+            return;
+        }
+        for (const group of groupedByParentRange) {
+            const screenParentRange = group.range.toScreenRange(this.session);
+            if (config.visibleRange &&
+                (screenParentRange.start.row < config.visibleRange.startScreenLine ||
+                    screenParentRange.end.row > config.visibleRange.endScreenLine)) {
+                continue;
+            }
+            const insertIndex = this.session.displayData.paragraphs[group.range.start.row].startIndex + group.range.start.column;
+            const customElement = this.session.customComponents.customElements.find(x => x.instance.content.insertIndex === insertIndex);
+            const newLocations = customElement.instance.getSearchResultLocations();
+            if (!newLocations?.length) {
+                continue;
+            }
+            for (let i = 0; i < newLocations.length; i++) {
+                group.elements.find(x => x.index === i).location = newLocations[i];
+            }
+        }
+    }
+    updateActiveResult() {
+        if (this.active instanceof CustomElementInfo && !this.active.location) {
+            const active = this.customElementsRanges.find(x => this.active instanceof CustomElementInfo &&
+                x.index === this.active.index &&
+                x.parentRange.isEqual(this.active.parentRange));
+            if (active) {
+                this.active.location = active.location;
+            }
+        }
+    }
 }
 
 class SelectionLayer extends HighlightLayer {
@@ -13483,8 +14071,10 @@ class Renderer extends EventEmitting {
                 endLine: 0,
                 endScreenLine: 0,
                 endScreenFullLine: 0
-            }
+            },
+            isVisible: false
         };
+        this.isVisible = false;
         this.changes = new RenderChangesModel();
         this.textareaSize = {
             height: 1,
@@ -13512,7 +14102,13 @@ class Renderer extends EventEmitting {
             return;
         }
         // text, scrolling and resize changes can cause the view port size to change
-        if (changes.full || changes.size || changes.text || changes.lines || changes.scroll) {
+        if (changes.full ||
+            changes.size ||
+            changes.text ||
+            changes.lines ||
+            changes.scroll ||
+            changes.search ||
+            changes.visibilityChanged) {
             changes.apply(this.computeLayerConfig());
             DomHelper.translate(this.content, 0, -this.layerConfig.offset);
             DomHelper.setStyle(this.content.style, 'width', `${this.layerConfig.width}px`);
@@ -13538,6 +14134,9 @@ class Renderer extends EventEmitting {
         if (changes.dragAndDrop) {
             this.renderDragAndDropSelection();
         }
+        if (changes.visibilityChanged) {
+            this.renderSearchHighlights();
+        }
         this.session.onRendered();
     }
     /**
@@ -13586,11 +14185,13 @@ class Renderer extends EventEmitting {
             this.loop.schedule({ search: true });
         }
     }
+    updateCustomElementHighlights(ranges) {
+        this.searchHighlightLayer.customElementsRanges = ranges;
+        this.loop.schedule({ search: true });
+    }
     updateActiveSearchHighlight(active) {
-        if (!this.searchHighlightLayer.active?.isEqual(active)) {
-            this.searchHighlightLayer.active = active;
-            this.loop.schedule({ search: true });
-        }
+        this.searchHighlightLayer.active = active;
+        this.loop.schedule({ search: true });
     }
     updateDragAndDropSelection(range) {
         if (range.isEmpty && this.dragAndDropSelectionLayer.marker) {
@@ -13609,12 +14210,24 @@ class Renderer extends EventEmitting {
         this.dragAndDropSelectionLayer.marker = null;
         this.loop.schedule({ dragAndDrop: true });
     }
+    setVisibility(isVisible) {
+        if (this.isVisible !== isVisible) {
+            this.isVisible = isVisible;
+            this.loop.schedule({ visibilityChanged: true });
+        }
+    }
     /**
      * Triggers a full update of the text, for all the rows.
      **/
     updateText() {
         this.loop.schedule({ text: true });
     }
+    updateTextAndCursor() {
+        this.loop.schedule({ text: true, cursor: true });
+    }
+    updateMarker() {
+        this.loop.schedule({ marker: true });
+    }
     updateCursor() {
         this.loop.schedule({ cursor: true });
     }
@@ -13686,7 +14299,8 @@ class Renderer extends EventEmitting {
             contentRange: new DistanceModel({ start: 0, end: displayData.paragraphs.filter(x => x.paragraphSettings).length - 1 }),
             maxHeight,
             offset: 0,
-            scrollTop: this.session.scrollTop
+            scrollTop: this.session.scrollTop,
+            isVisible: this.isVisible
         };
         return changes;
     }
@@ -13787,16 +14401,6 @@ class ScrollBar {
     }
 }
 
-class SessionModel {
-    constructor(session, renderer, sessionId, parentSessionId, source) {
-        this.session = session;
-        this.renderer = renderer;
-        this.sessionId = sessionId;
-        this.parentSessionId = parentSessionId;
-        this.source = source;
-    }
-}
-
 class VirtualRenderer {
     get cursorLayer() {
         return this.renderer.cursorLayer;
@@ -13850,7 +14454,13 @@ class VirtualRenderer {
             return;
         }
         // text, scrolling and resize changes can cause the view port size to change
-        if (changes.full || changes.size || changes.text || changes.lines || changes.scroll) {
+        if (changes.full ||
+            changes.size ||
+            changes.text ||
+            changes.lines ||
+            changes.scroll ||
+            changes.search ||
+            changes.visibilityChanged) {
             changes.apply(this.computeLayerConfig());
             DomHelper.translate(this.renderer.content, 0, -this.layerConfig.offset);
             DomHelper.setStyle(this.renderer.content.style, 'width', `${this.layerConfig.width}px`);
@@ -13880,6 +14490,9 @@ class VirtualRenderer {
         if (changes.dragAndDrop) {
             this.renderDragAndDropSelection();
         }
+        if (changes.visibilityChanged) {
+            this.renderSearchHighlights();
+        }
     }
     /**
      * Triggers a resize of the editor
@@ -13946,6 +14559,9 @@ class VirtualRenderer {
     updateSearchHighlights(ranges) {
         this.renderer.updateSearchHighlights(ranges);
     }
+    updateCustomElementHighlights(ranges) {
+        this.renderer.updateCustomElementHighlights(ranges);
+    }
     updateActiveSearchHighlight(active) {
         this.renderer.updateActiveSearchHighlight(active);
     }
@@ -13961,9 +14577,18 @@ class VirtualRenderer {
     updateText() {
         this.renderer.updateText();
     }
+    updateTextAndCursor() {
+        this.renderer.updateTextAndCursor();
+    }
+    updateMarker() {
+        this.renderer.updateMarker();
+    }
     updateCursor() {
         this.renderer.updateCursor();
     }
+    setVisibility(isVisible) {
+        this.renderer.setVisibility(isVisible);
+    }
     scrollSelectionIntoView(anchor, lead, offset) {
         // first scroll anchor into view then scroll lead into view
         this.scrollCursorIntoView(anchor, offset);
@@ -14048,7 +14673,8 @@ class VirtualRenderer {
             offset: 0,
             visibleRange,
             scrollTop: this.scrollBar.scrollTop,
-            pages: visibleRange.pages
+            pages: visibleRange.pages,
+            isVisible: true
         };
         return changes;
     }
@@ -14167,17 +14793,19 @@ class CustomContentService {
     }
     getTokenFromComponent(component, lineInfo, displayValue, isFirst, size) {
         let height = size.height;
-        if (component.instance.height > size.height) {
+        if (component.instance.height() > size.height) {
             height =
-                component.instance instanceof NoderImageComponent ? component.instance.height + size.descent : component.instance.height;
+                component.instance instanceof NoderImageComponent
+                    ? component.instance.height() + size.descent
+                    : component.instance.height();
         }
         return new DisplayToken({
-            width: component.instance.width,
+            width: component.instance.width(),
             height,
             baseline: 0,
             content: 0,
             font: size.font,
-            ascent: component.instance.height ?? size.height,
+            ascent: component.instance.height() ?? size.height,
             descent: 0,
             line: 0,
             lineSpacing: lineInfo.lineSpacing,
@@ -14223,7 +14851,7 @@ class RegulatorService {
         this.sessions = [];
         this.sessionIdIncrement = 0;
     }
-    addMainSession(model, pageWidth, scalingRatio, container) {
+    addMainSession(model, scalingRatio, container) {
         const sessionId = ++this.sessionIdIncrement;
         const defaultPageFormat = model.pageFormats[model.pageFormats?.length - 1];
         const properties = new GeneralPropertiesModel({
@@ -14242,7 +14870,7 @@ class RegulatorService {
             footer: defaultPageFormat.marginFooter > 0 ? defaultPageFormat.marginFooter : 0
         });
         const edgesMargins = new MarginModel({ ...pageMargin, top: pageMargin.header, bottom: pageMargin.footer });
-        const edges = new Edges(this.componentService, model.headers, model.footers, edgesMargins, pageWidth, sessionId, properties);
+        const edges = new Edges(this.componentService, model.headers, model.footers, edgesMargins, model.pageFormats, sessionId, properties);
         properties.numberingInfo = {};
         const customComponents = { images: [], tables: [], tabs: [], customElements: [], edges: edges };
         const displayData = new DisplayData(model, properties, sessionId, model.pageFormats, DocumentInfo.pagesSpace, customComponents, this.customContentService, this.editorService);
@@ -14275,7 +14903,7 @@ class RegulatorService {
         const sessionId = ++this.sessionIdIncrement;
         const customComponents = { images: [], tables: [], tabs: [], customElements: [], edges: null };
         const displayData = new DisplayData(component.model, component.generalProperties, sessionId, this.getPageFormats(component.margins, component.width), 0, customComponents, this.customContentService, this.editorService);
-        const session = new EditSession(displayData, sessionId, this.customContentService, component.model, this.selection, component.generalProperties, this.editorService, customComponents, 'edge');
+        const session = new EditSession(displayData, sessionId, this.customContentService, component.model, this.selection, component.generalProperties, this.editorService, customComponents, 'edge', null, component.type);
         const renderer = new Renderer(component.container.nativeElement, session);
         const source = new EdgeSessionSourceModel(component.model.pageType, component.type);
         const newSession = new SessionModel(session, renderer, sessionId, component.parentSessionId, source);
@@ -14317,11 +14945,44 @@ class RegulatorService {
     setCurrentSession(session) {
         const previous = this.currentSession;
         this.selection.clearSelection();
-        this.currentSession.renderer.hideCursor();
+        if (this.currentSession.session.isEdge()) {
+            this.sessions.forEach(x => {
+                if (x.session.edgeType === this.currentSession.session.edgeType) {
+                    x.renderer.hideCursor();
+                }
+            });
+        }
+        else {
+            this.currentSession.renderer.hideCursor();
+        }
         this.currentSession.renderer.updateSelection(this.selection.selectedRange);
         this.currentSession = session;
-        this.currentSession.renderer.showCursor();
-        this.arrangeEdgesForSessionChange(previous.session, session.session);
+        if (session.session.isEdge()) {
+            this.sessions.forEach(x => {
+                if (x.session.edgeType === session.session.edgeType) {
+                    x.renderer.showCursor();
+                    this.arrangeEdgesForSessionChange(previous.session, x.session);
+                }
+            });
+        }
+        else {
+            this.currentSession.renderer.showCursor();
+            this.arrangeEdgesForSessionChange(previous.session, session.session);
+        }
+    }
+    updateCursorPosition() {
+        if (!this.currentSession.session.isEdge()) {
+            return;
+        }
+        this.sessions.forEach(x => {
+            if (x.session.edgeType === this.currentSession.session.edgeType) {
+                x.renderer.updateSelection(this.selection.selectedRange);
+                if (this.selection.isEmpty) {
+                    x.renderer.updateCursor();
+                }
+                x.renderer.updateMarker();
+            }
+        });
     }
     getSessionModel(sessionId) {
         return this.sessions.find(x => x.sessionId === sessionId);
@@ -14378,8 +15039,19 @@ class RegulatorService {
     }
     arrangeEdgeChange(sessionId) {
         const edgeSessionId = this.getEdgeSessionId(sessionId);
-        const { type, pageType } = this.mainSession.session.customComponents.edges.getTypeBySessionId(edgeSessionId);
-        this.mainSession.renderer.edgesLayer.updateSingle(type, pageType);
+        const { type, pageType, pageWidth } = this.mainSession.session.customComponents.edges.getTypeBySessionId(edgeSessionId);
+        this.mainSession.renderer.edgesLayer.updateSingle(type, pageType, pageWidth);
+    }
+    forceUpdateDataForEdges() {
+        if (this.currentSession.session.isEdge()) {
+            return;
+        }
+        this.sessions.forEach(x => {
+            if (x.session.isEdge() && x.session.edgeType === this.currentSession.session.edgeType) {
+                x.session.updateDisplayData();
+                x.renderer.updateTextAndCursor();
+            }
+        });
     }
     getEdgeSessionId(sessionId) {
         let session = this.getSession(sessionId);
@@ -14447,10 +15119,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             type: Injectable
         }] });
 
+class TabSettingModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class TabSettingsDialogComponent {
+    constructor(data, ref, fb) {
+        this.data = data;
+        this.ref = ref;
+        this.fb = fb;
+        this.modal = true;
+        this.alignments = [
+            { title: marker('NODER.LABEL.LEFT'), type: TabAlignment.Left },
+            { title: marker('NODER.LABEL.CENTER'), type: TabAlignment.Center },
+            { title: marker('NODER.LABEL.RIGHT'), type: TabAlignment.Right }
+        ];
+        this.form = this.fb.group({
+            tabs: this.fb.array(this.data.tabs.map(x => this.createTabGroup(x)))
+        });
+    }
+    tabsArray() {
+        return this.form.get('tabs');
+    }
+    onRemove(index) {
+        this.tabsArray().removeAt(index);
+    }
+    onClose() {
+        this.ref.close();
+    }
+    onSave() {
+        const result = this.tabsArray()
+            .value.filter(x => x.position !== null)
+            .map(v => new TabSettingModel({ position: v.position, alignment: v.alignment }));
+        this.ref.close(result);
+    }
+    onAddTab() {
+        const group = this.createTabGroup({ position: 0, alignment: TabAlignment.Left });
+        this.tabsArray().push(group);
+    }
+    createTabGroup(tab) {
+        return this.fb.group({
+            position: new FormControl(tab.position, { nonNullable: true, validators: [Validators.required] }),
+            alignment: new FormControl(tab.alignment, { nonNullable: true, validators: [Validators.required] })
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TabSettingsDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: TabSettingsDialogComponent, isStandalone: true, selector: "app-nod-tab-settings-dialog", host: { properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<div class=\"columns\">\n    <span class=\"position\">{{ 'NODER.LABEL.POSITION' | translate }}</span>\n    <span class=\"alignment\">{{ 'NODER.LABEL.ALIGNMENT' | translate }}</span>\n</div>\n<form\n    [formGroup]=\"form\"\n    class=\"form\">\n    <div\n        class=\"tabs\"\n        formArrayName=\"tabs\">\n        @for (tabCtrl of tabsArray().controls; let i = $index; track i) {\n            <div\n                class=\"item\"\n                [formGroupName]=\"i\">\n                <div class=\"tab\">\n                    <mat-form-field class=\"position\">\n                        <input\n                            matInput\n                            type=\"number\"\n                            formControlName=\"position\" />\n                    </mat-form-field>\n                    <mat-form-field class=\"alignment\">\n                        <mat-select formControlName=\"alignment\">\n                            @for (alignment of alignments; track alignment) {\n                                <mat-option [value]=\"alignment.type\">\n                                    {{ alignment.title | translate }}\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                    <button\n                        id=\"tab-setting-dialog-delete-btn\"\n                        mat-icon-button\n                        type=\"button\"\n                        (click)=\"onRemove(i)\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-delete\"></mat-icon>\n                    </button>\n                </div>\n            </div>\n        }\n    </div>\n</form>\n<div class=\"tab-actions\">\n    <button\n        id=\"tab-setting-dialog-add-btn\"\n        mat-stroked-button\n        (click)=\"onAddTab()\">\n        {{ 'NODER.LABEL.ADD' | translate }}\n    </button>\n    <button\n        id=\"tab-setting-dialog-clear-all-btn\"\n        mat-stroked-button\n        (click)=\"tabsArray().clear()\">\n        {{ 'NODER.LABEL.CLEAR_ALL' | translate }}\n    </button>\n</div>\n<div class=\"actions\">\n    <button\n        id=\"tab-setting-dialog-cancel-btn\"\n        mat-stroked-button\n        (click)=\"onClose()\">\n        {{ 'NODER.LABEL.CANCEL' | translate }}\n    </button>\n    <button\n        id=\"tab-setting-dialog-ok-btn\"\n        mat-stroked-button\n        (click)=\"onSave()\">\n        {{ 'NODER.LABEL.SAVE' | translate }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:550px;width:360px;padding:20px 0 20px 20px;gap:20px}.tabs{flex:1;overflow:hidden auto;display:flex;flex-direction:column}.form{height:350px;display:flex}.item{display:flex}.tab{display:flex;flex:1;gap:20px}.mat-mdc-form-field{width:120px}.columns{display:flex;gap:30%}.columns .position,.columns .alignment{font-weight:700}.tab-actions{display:flex;justify-content:start;gap:10px}.actions{display:flex;justify-content:end;gap:10px;margin-right:20px}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.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: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TabSettingsDialogComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatDialogModule,
+                        MatFormFieldModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        TranslateModule,
+                        MatSelectModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatInputModule
+                    ], selector: 'app-nod-tab-settings-dialog', template: "<div class=\"columns\">\n    <span class=\"position\">{{ 'NODER.LABEL.POSITION' | translate }}</span>\n    <span class=\"alignment\">{{ 'NODER.LABEL.ALIGNMENT' | translate }}</span>\n</div>\n<form\n    [formGroup]=\"form\"\n    class=\"form\">\n    <div\n        class=\"tabs\"\n        formArrayName=\"tabs\">\n        @for (tabCtrl of tabsArray().controls; let i = $index; track i) {\n            <div\n                class=\"item\"\n                [formGroupName]=\"i\">\n                <div class=\"tab\">\n                    <mat-form-field class=\"position\">\n                        <input\n                            matInput\n                            type=\"number\"\n                            formControlName=\"position\" />\n                    </mat-form-field>\n                    <mat-form-field class=\"alignment\">\n                        <mat-select formControlName=\"alignment\">\n                            @for (alignment of alignments; track alignment) {\n                                <mat-option [value]=\"alignment.type\">\n                                    {{ alignment.title | translate }}\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                    <button\n                        id=\"tab-setting-dialog-delete-btn\"\n                        mat-icon-button\n                        type=\"button\"\n                        (click)=\"onRemove(i)\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-delete\"></mat-icon>\n                    </button>\n                </div>\n            </div>\n        }\n    </div>\n</form>\n<div class=\"tab-actions\">\n    <button\n        id=\"tab-setting-dialog-add-btn\"\n        mat-stroked-button\n        (click)=\"onAddTab()\">\n        {{ 'NODER.LABEL.ADD' | translate }}\n    </button>\n    <button\n        id=\"tab-setting-dialog-clear-all-btn\"\n        mat-stroked-button\n        (click)=\"tabsArray().clear()\">\n        {{ 'NODER.LABEL.CLEAR_ALL' | translate }}\n    </button>\n</div>\n<div class=\"actions\">\n    <button\n        id=\"tab-setting-dialog-cancel-btn\"\n        mat-stroked-button\n        (click)=\"onClose()\">\n        {{ 'NODER.LABEL.CANCEL' | translate }}\n    </button>\n    <button\n        id=\"tab-setting-dialog-ok-btn\"\n        mat-stroked-button\n        (click)=\"onSave()\">\n        {{ 'NODER.LABEL.SAVE' | translate }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:550px;width:360px;padding:20px 0 20px 20px;gap:20px}.tabs{flex:1;overflow:hidden auto;display:flex;flex-direction:column}.form{height:350px;display:flex}.item{display:flex}.tab{display:flex;flex:1;gap:20px}.mat-mdc-form-field{width:120px}.columns{display:flex;gap:30%}.columns .position,.columns .alignment{font-weight:700}.tab-actions{display:flex;justify-content:start;gap:10px}.actions{display:flex;justify-content:end;gap:10px;margin-right:20px}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$1.MatDialogRef }, { type: i2.FormBuilder }], propDecorators: { modal: [{
+                type: HostBinding,
+                args: ['class.noder-modal']
+            }] } });
+
 class EditorRulerComponent {
     constructor() {
         this.unit = input.required();
         this.editorService = inject(EditorService);
+        this.dialog = inject(MatDialog);
         this.defaultPaddingCm = 2.5;
         this.pageWidth$ = this.editorService.pageFormat$.pipe(distinctUntilChanged(), tap(x => {
             this.recalcGeometry(x.pageWidth);
@@ -14462,26 +15207,27 @@ class EditorRulerComponent {
         this.snapCm = 0.25;
         this.pxPerCm = 37.8; // 96dpi / 2.54
         this.pxPerInch = 96;
-        this.firstLine = signal(this.defaultPaddingCm * this.pxPerCm);
-        this.leftIndent = signal(this.defaultPaddingCm * this.pxPerCm);
+        this.firstLine = signal(Math.floor(this.defaultPaddingCm * this.pxPerCm));
+        this.leftIndent = signal(Math.floor(this.defaultPaddingCm * this.pxPerCm));
         this.rightIndent = signal(0);
         this.leftIndentPx = computed(() => this.leftIndent() + this.leftMarginPageFormatPx());
         this.firstLinePx = computed(() => this.firstLine() + this.leftIndentPx());
         this.rightIndentPx = computed(() => this.rightMarginPageFormatPx() - this.rightIndent());
-        this.leftMarginPageFormatPx = signal(this.defaultPaddingCm * this.pxPerCm);
+        this.leftMarginPageFormatPx = signal(Math.floor(this.defaultPaddingCm * this.pxPerCm));
         this.rightMarginPageFormatPx = signal(0);
         this.guideX = signal(0);
         this.showGuide = signal(false);
+        this.tabSettings = signal([]);
         this.containerWidthPx = 0;
         this.ticks = [];
         this.dragging = null;
         this.dragOffsetX = 0;
-        this.onMove = (ev) => {
+        this.onMove = (event) => {
             if (!this.dragging) {
                 return;
             }
-            ev.preventDefault();
-            const pointX = this.getClientX(ev);
+            event.preventDefault();
+            const pointX = this.getClientX(event);
             const rect = this.rulerContainer.nativeElement.getBoundingClientRect();
             let x = pointX - rect.left - this.dragOffsetX;
             if (x < -1 || x > this.containerWidthPx) {
@@ -14503,6 +15249,9 @@ class EditorRulerComponent {
             else if (this.dragging === 'rightIndent') {
                 this.rightIndent.set(this.rightMarginPageFormatPx() - x);
             }
+            else if (this.dragging === 'tabs') {
+                this.tabSettings()[this.draggableTabIndex].position = x - this.leftMarginPageFormatPx();
+            }
             this.guideX.set(x);
         };
         this.onUp = () => {
@@ -14521,6 +15270,14 @@ class EditorRulerComponent {
             else if (this.dragging === 'rightMarginPageFormat') {
                 this.editorService.applyRightMarginPageFormat(Math.round(this.containerWidthPx - this.rightMarginPageFormatPx()));
             }
+            else if (this.dragging === 'tabs') {
+                this.editorService.tabSettings(this.tabSettings()
+                    .sort((a, b) => a.position - b.position)
+                    .map(x => new TabSettingModel({
+                    alignment: x.alignment,
+                    position: Math.floor(x.position)
+                })));
+            }
             this.dragging = null;
             this.showGuide.set(false);
             window.removeEventListener('mousemove', this.onMove);
@@ -14528,6 +15285,9 @@ class EditorRulerComponent {
             window.removeEventListener('touchmove', this.onMove);
             window.removeEventListener('touchend', this.onUp);
         };
+        this.editorService.paragraphStyle$
+            .pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(x => !!x.tabSettings), map(x => x.tabSettings?.map(y => new TabSettingModel({ alignment: y.alignment, position: y.position })) ?? []))
+            .subscribe(x => this.tabSettings.set(x));
         this.editorService.paragraphStyle$.pipe(takeUntilDestroyed()).subscribe(x => {
             this.firstLine.set(x.indentHanging ? -x.indentHanging : x.indentFirstLine);
             this.leftIndent.set(x.indentLeft);
@@ -14545,6 +15305,31 @@ class EditorRulerComponent {
         this.recalcGeometry();
         this.buildTicksCm();
     }
+    onOpenDialog() {
+        const tabs = this.tabSettings().map(x => {
+            const position = this.unit() === 'inch' ? this.pxToInch(x.position) : this.pxToCm(x.position);
+            return new TabSettingModel({ position, alignment: x.alignment });
+        });
+        this.dialog
+            .open(TabSettingsDialogComponent, {
+            autoFocus: false,
+            restoreFocus: false,
+            data: { tabs, unit: this.unit() }
+        })
+            .afterClosed()
+            .pipe(filter(x => !!x))
+            .subscribe((x) => {
+            const convertedTabs = x.map(y => {
+                const position = this.unit() === 'inch' ? this.inchToPx(y.position) : this.cmToPx(y.position);
+                return new TabSettingModel({
+                    alignment: y.alignment,
+                    position: Math.floor(position)
+                });
+            });
+            this.tabSettings.set(convertedTabs);
+            this.editorService.tabSettings(convertedTabs.sort((a, b) => a.position - b.position));
+        });
+    }
     recalcGeometry(width = null) {
         this.containerWidthPx = width ?? this.rulerContainer.nativeElement.getBoundingClientRect().width;
     }
@@ -14633,9 +15418,17 @@ class EditorRulerComponent {
         }
         this.ticks = ticks;
     }
-    startDrag(ev, target) {
-        ev.preventDefault();
-        const pointX = this.getClientX(ev);
+    addTab(event) {
+        const position = this.getClientX(event) - this.rulerContainer.nativeElement.getBoundingClientRect().left - this.leftMarginPageFormatPx();
+        this.tabSettings.update(x => {
+            x.push(new TabSettingModel({ alignment: TabAlignment.Left, position }));
+            return x;
+        });
+        this.startDrag(event, 'tabs', this.tabSettings().length - 1);
+    }
+    startDrag(event, target, tabIndex) {
+        event.preventDefault();
+        const pointX = this.getClientX(event);
         const rect = this.rulerContainer.nativeElement.getBoundingClientRect();
         this.dragging = target;
         if (target === 'leftMarginPageFormat') {
@@ -14653,6 +15446,10 @@ class EditorRulerComponent {
         else if (target === 'rightIndent') {
             this.dragOffsetX = pointX - rect.left - this.rightIndentPx();
         }
+        else if (target === 'tabs') {
+            this.draggableTabIndex = tabIndex;
+            this.dragOffsetX = pointX - rect.left - this.tabSettings()[tabIndex].position - this.leftMarginPageFormatPx();
+        }
         this.showGuide.set(true);
         this.guideX.set(this.getCurrentDraggedPx());
         window.addEventListener('mousemove', this.onMove);
@@ -14678,14 +15475,16 @@ class EditorRulerComponent {
                 return this.leftIndentPx();
             case 'rightIndent':
                 return this.rightIndentPx();
+            case 'tabs':
+                return this.tabSettings()[this.draggableTabIndex].position + this.leftMarginPageFormatPx();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorRulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorRulerComponent, isStandalone: true, selector: "app-nod-editor-ruler", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "rulerContainer", first: true, predicate: ["rulerContainer"], descendants: true, static: true }], ngImport: i0, template: "<div\n    class=\"ruler-container\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div class=\"ruler-track\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorRulerComponent, isStandalone: true, selector: "app-nod-editor-ruler", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "rulerContainer", first: true, predicate: ["rulerContainer"], descendants: true, static: true }], ngImport: i0, template: "<div\n    class=\"ruler-container\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorRulerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-ruler', imports: [MatIconModule, AsyncPipe], template: "<div\n    class=\"ruler-container\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div class=\"ruler-track\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-ruler', imports: [MatIconModule, AsyncPipe], template: "<div\n    class=\"ruler-container\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { rulerContainer: [{
                 type: ViewChild,
                 args: ['rulerContainer', { static: true }]
@@ -14746,6 +15545,7 @@ class EditorComponent {
                 this.sidenavComponentRef = this.componentService.createComponent(data.component, data?.data);
                 this.componentService.attachComponent(this.sidenavContainer.nativeElement, this.sidenavComponentRef);
                 if (!this.sidenav.opened) {
+                    this.sidenav.autoFocus = data.focus;
                     this.sidenav.open().catch(() => {
                         // continue regardless of error
                     });
@@ -14900,7 +15700,7 @@ class NoderTranslateLoader extends TranslateHttpLoader {
     getTranslation(lang) {
         return super.getTranslation(lang).pipe(catchError(() => super.getTranslation('en')));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTranslateLoader, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTranslateLoader, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTranslateLoader, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTranslateLoader, decorators: [{
@@ -14908,7 +15708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1$2.HttpClient }] });
 
 var Mode;
 (function (Mode) {
@@ -15064,7 +15864,7 @@ class ToolbarCoreService {
     }
     openBurgerMenu() {
         this.mode = EditorToolbarMode.Menu;
-        this.editorService.openSidenav(MenuDropdownsMobileComponent);
+        this.editorService.openSidenav(MenuDropdownsMobileComponent, true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToolbarCoreService, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToolbarCoreService }); }
@@ -16895,7 +17695,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$1.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$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$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", "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$1.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PageSetupComponent, decorators: [{
             type: Component,
@@ -16965,7 +17765,8 @@ class RevisionHelper {
             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
+            numberingLevel: paragraphStyle.numberingLevel ?? DEFAULT_PARAGRAPH_STYLE.numberingLevel,
+            tabSettings: paragraphStyle.tabSettings ?? DEFAULT_PARAGRAPH_STYLE.tabSettings
         });
     }
     static getEmptyDocxModel() {
@@ -17045,8 +17846,8 @@ class AddLinkDialogComponent {
         }
         this.dialogRef.close({ text: this.form.controls.text.value, link: this.form.controls.link.value });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AddLinkDialogComponent, isStandalone: true, selector: "app-nod-add-link-dialog", host: { listeners: { "keydown.esc": "onClose()", "keydown.enter": "onApply()" }, properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<div mat-dialog-title>{{ 'NODER.LABEL.ADD_LINK' | translate }}</div>\n<div\n    mat-dialog-content\n    [formGroup]=\"form\">\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.TEXT' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.text\"\n            required />\n        <mat-error>{{ 'NODER.LABEL.THE_TEXT_IS_REQUIRED' | translate }}.</mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.LINK' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.link\"\n            required />\n        <mat-error>{{ 'NODER.LABEL.THE_LINK_IS_REQUIRED' | translate }}.</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=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n        {{ 'NODER.LABEL.CANCEL' | translate }}\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=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n        {{ 'NODER.LABEL.APPLY' | translate }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:300px;width:430px;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!important;padding-bottom:0}.mat-mdc-dialog-actions{display:flex;justify-content:center;padding-top:5px;height:40px;margin-bottom:30px}.mat-mdc-dialog-actions button{width:30%;height:100%;letter-spacing:1px;border-radius:8px;text-transform:uppercase}.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: i4.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$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AddLinkDialogComponent, isStandalone: true, selector: "app-nod-add-link-dialog", host: { listeners: { "keydown.esc": "onClose()", "keydown.enter": "onApply()" }, properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<div mat-dialog-title>{{ 'NODER.LABEL.ADD_LINK' | translate }}</div>\n<div\n    mat-dialog-content\n    [formGroup]=\"form\">\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.TEXT' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.text\"\n            required />\n        <mat-error>{{ 'NODER.LABEL.THE_TEXT_IS_REQUIRED' | translate }}.</mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.LINK' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.link\"\n            required />\n        <mat-error>{{ 'NODER.LABEL.THE_LINK_IS_REQUIRED' | translate }}.</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=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n        {{ 'NODER.LABEL.CANCEL' | translate }}\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=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n        {{ 'NODER.LABEL.APPLY' | translate }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:300px;width:430px;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!important;padding-bottom:0}.mat-mdc-dialog-actions{display:flex;justify-content:center;padding-top:5px;height:40px;margin-bottom:30px}.mat-mdc-dialog-actions button{width:30%;height:100%;letter-spacing:1px;border-radius:8px;text-transform:uppercase}.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: i4.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$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: 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: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkDialogComponent, decorators: [{
             type: Component,
@@ -17060,7 +17861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         ReactiveFormsModule,
                         TranslateModule
                     ], selector: 'app-nod-add-link-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div mat-dialog-title>{{ 'NODER.LABEL.ADD_LINK' | translate }}</div>\n<div\n    mat-dialog-content\n    [formGroup]=\"form\">\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.TEXT' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.text\"\n            required />\n        <mat-error>{{ 'NODER.LABEL.THE_TEXT_IS_REQUIRED' | translate }}.</mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.LINK' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.link\"\n            required />\n        <mat-error>{{ 'NODER.LABEL.THE_LINK_IS_REQUIRED' | translate }}.</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=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n        {{ 'NODER.LABEL.CANCEL' | translate }}\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=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n        {{ 'NODER.LABEL.APPLY' | translate }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:300px;width:430px;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!important;padding-bottom:0}.mat-mdc-dialog-actions{display:flex;justify-content:center;padding-top:5px;height:40px;margin-bottom:30px}.mat-mdc-dialog-actions button{width:30%;height:100%;letter-spacing:1px;border-radius:8px;text-transform:uppercase}.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$2.MatDialogRef }, { type: i2.FormBuilder }], propDecorators: { modal: [{
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: i2.FormBuilder }], propDecorators: { modal: [{
                 type: HostBinding,
                 args: ['class.noder-modal']
             }], onClose: [{
@@ -17111,7 +17912,7 @@ class ConfirmDialogComponent {
     onClose(status) {
         this.ref.close(status);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ConfirmDialogComponent, isStandalone: true, selector: "app-nod-confirm-dialog", host: { properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<p class=\"title\">{{ data.title ? data.title : ('NODER.LABEL.CONFIRMATION' | translate) }}</p>\n<div class=\"content\">\n    <p>{{ data.message }}</p>\n</div>\n<div class=\"actions\">\n    <button\n        id=\"confirm-dialog-cancel-btn\"\n        mat-button\n        (click)=\"onClose(false)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n        {{ data.cancel ? data.cancel : ('NODER.LABEL.CANCEL' | translate) }}\n    </button>\n    <button\n        id=\"confirm-dialog-confirm-btn\"\n        mat-raised-button\n        class=\"delete-btn\"\n        color=\"primary\"\n        (click)=\"onClose(true)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\"></mat-icon>\n        {{ data.confirm ? data.confirm : ('NODER.LABEL.DELETE' | translate) }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:400px;max-width:440px;min-height:208px}.title{font-size:18px;font-weight:700;text-transform:capitalize;padding:24px 24px 12px;margin:0;border-bottom-width:1px;border-bottom-style:solid}.content{display:flex;flex:1;font-size:16px;line-height:20px;padding:20px 24px 16px}.content p{margin:0;overflow:hidden;text-overflow:ellipsis}.actions{display:flex;justify-content:center;margin-bottom:24px;gap:8px}.actions button{height:40px;width:120px;text-transform:uppercase}.actions button mat-icon{font-size:24px;height:24px;width:24px}.actions button .mat-button-toggle-label-content{padding:0 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
@@ -17120,11 +17921,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i1$2.MatDialogRef }], propDecorators: { modal: [{
+                }] }, { type: i1$1.MatDialogRef }], propDecorators: { modal: [{
                 type: HostBinding,
                 args: ['class.noder-modal']
             }] } });
 
+class SearchResultLocation {
+    constructor(init) {
+        Object.assign(this, init);
+    }
+    isEqual(other) {
+        return this.width === other.width && this.height === other.height && this.top === other.top && this.left === other.left;
+    }
+}
+
 class DocumentNameModel {
     constructor(fields) {
         if (fields) {
@@ -17186,5 +17996,5 @@ class OperationModel {
  * Generated bundle index. Do not edit.
  */
 
-export { AddLinkDialogComponent, AddLinkMobileComponent, Alignment, BaseNoderComponent, BreakTypes, CommandModel, CommandType, CommandsService, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_STYLES, DefaultImageApiService, DestroyComponent, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorMobileToolbarComponent, EditorModule, EditorService, EditorTitleComponent, EditorTitleMobileComponent, EditorToolbarComponent, EditorToolbarMode, EditorToolbarModule, EditorToolbarService, ElementDataModel, ElementModel, ExternalComponent, ExternalElementModel, ExternalElementService, FileSourceModel, FormatStyleHelper, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, MenuDropdownsComponent, MenuDropdownsMobileComponent, Mode, NEW_LINE_MARKUP, NoderTranslateLoader, NumberingLevelModel, OperationModel, OperationsHistoryInfoModel, PageSetupComponent, PageType, ParagraphStyleModel, RevisionHelper, RevisionModel, TextFormatMobileComponent, TextStyleModel, ToolbarActionsComponent };
+export { AddLinkDialogComponent, AddLinkMobileComponent, Alignment, BaseNoderComponent, BreakTypes, CommandModel, CommandType, CommandsService, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_STYLES, DefaultImageApiService, DestroyComponent, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorMobileToolbarComponent, EditorModule, EditorService, EditorTitleComponent, EditorTitleMobileComponent, EditorToolbarComponent, EditorToolbarMode, EditorToolbarModule, EditorToolbarService, ElementDataModel, ElementModel, ExternalComponent, ExternalElementModel, ExternalElementService, FileSourceModel, FontMetrics, FormatStyleHelper, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, MenuDropdownsComponent, MenuDropdownsMobileComponent, Mode, NEW_LINE_MARKUP, NoderTranslateLoader, NumberingLevelModel, OperationModel, OperationsHistoryInfoModel, PageSetupComponent, PageType, ParagraphStyleModel, RevisionHelper, RevisionModel, SearchResultLocation, TextFormatMobileComponent, TextStyleModel, ToolbarActionsComponent };
 //# sourceMappingURL=talrace-ngx-noder.mjs.map