@talrace/ngx-noder 0.0.40 → 0.0.42

package/fesm2022/talrace-ngx-noder.mjs

@@ -1,41 +1,42 @@
 import * as i0 from '@angular/core';
-import { Directive, Injectable, inject, ChangeDetectorRef, HostBinding, Input, InjectionToken, createComponent, Component, ChangeDetectionStrategy, ViewChild, EventEmitter, Output, HostListener, signal, NgModule, Inject } from '@angular/core';
-import { Subject, BehaviorSubject, fromEvent, throttleTime, take, filter, startWith, takeUntil, catchError, debounceTime, distinctUntilChanged } from 'rxjs';
+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 { Subject, BehaviorSubject, fromEvent, throttleTime, take, filter, debounceTime, distinctUntilChanged, startWith, takeUntil, tap, map, catchError } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import * as i3 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import * as i4 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i6 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i5$2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i3$1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i5$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayConfig } from '@angular/cdk/overlay';
-import * as i3$1 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-import * as i5 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i5$1 from '@angular/cdk/clipboard';
-import * as i7 from '@angular/material/sidenav';
+import * as i5$3 from '@angular/cdk/clipboard';
+import * as i8 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i4 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
 import * as i1$2 from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import * as i5$2 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2 from '@angular/forms';
-import { ReactiveFormsModule, FormControl, FormsModule, Validators } from '@angular/forms';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i4$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i6 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i5$3 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i4$2 from '@angular/material/expansion';
 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 from '@angular/material/select';
+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';
@@ -53,9 +54,9 @@ const DocumentInfo = {
     height: 1123,
     pagesSpace: 8,
     paddingTop: 96,
-    paddingRight: 48,
+    paddingRight: 96,
     paddingBottom: 96,
-    paddingLeft: 48,
+    paddingLeft: 96,
     paddingHeader: 48,
     paddingFooter: 48
 };
@@ -431,6 +432,14 @@ class OperationsHistoryInfoModel {
     }
 }
 
+class PageFormatModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class EditorService {
     constructor() {
         this._styles$ = new BehaviorSubject({});
@@ -441,10 +450,15 @@ class EditorService {
         this._hasSelection$ = new BehaviorSubject(false);
         this._historyInfo$ = new BehaviorSubject(new OperationsHistoryInfoModel(-1, -1));
         this._toggleSidenav$ = new Subject();
-        this._openSearchDialog$ = new Subject();
-        this._searchOptions$ = new Subject();
-        this._searchIteration$ = new Subject();
-        this._replace$ = new Subject();
+        this._displaySearchBar$ = new Subject();
+        this._searchTerm$ = new Subject();
+        this._dialogSearchTerm$ = new Subject();
+        this._replaceTerm$ = new Subject();
+        this._searchPrevious$ = new Subject();
+        this._searchNext$ = new Subject();
+        this._replaceCurrent$ = new Subject();
+        this._currentSearchResultIndex$ = new Subject();
+        this._searchResultCount$ = new Subject();
         this._setTextStyles$ = new Subject();
         this._setParagraphStyles$ = new Subject();
         this._setNumberingTemplateType$ = new Subject();
@@ -487,6 +501,13 @@ class EditorService {
         this._applyDocumentPageFormat$ = new Subject();
         this._insertPageFormat$ = new Subject();
         this._applyPageFormat$ = new Subject();
+        this._pageFormat$ = new BehaviorSubject(new PageFormatModel());
+        this._leftMarginPageFormat$ = new Subject();
+        this._rightMarginPageFormat$ = new Subject();
+        this._firstLinePosition$ = new Subject();
+        this._leftIndentParagraph$ = new Subject();
+        this._rightIndentParagraph$ = new Subject();
+        this._paragraphStyle$ = new BehaviorSubject(new ParagraphStyleModel());
     }
     set styles(value) {
         this._styles$.next({ ...value });
@@ -521,29 +542,35 @@ class EditorService {
     get toggleSidenav$() {
         return this._toggleSidenav$.asObservable();
     }
-    set openSearchDialog(value) {
-        this._openSearchDialog$.next(value);
+    get displaySearchBar$() {
+        return this._displaySearchBar$.asObservable();
+    }
+    get searchTerm$() {
+        return this._searchTerm$.asObservable();
     }
-    get openSearchDialog$() {
-        return this._openSearchDialog$.asObservable();
+    get dialogSearchTerm$() {
+        return this._dialogSearchTerm$.asObservable();
     }
-    set searchOptions(value) {
-        this._searchOptions$.next(value);
+    get replaceTerm$() {
+        return this._replaceTerm$.asObservable();
     }
-    get searchOptions$() {
-        return this._searchOptions$.asObservable();
+    get searchPrevious$() {
+        return this._searchPrevious$.asObservable();
     }
-    set searchIteration(value) {
-        this._searchIteration$.next(value);
+    get searchNext$() {
+        return this._searchNext$.asObservable();
     }
-    get searchIteration$() {
-        return this._searchIteration$.asObservable();
+    get replaceCurrent$() {
+        return this._replaceCurrent$.asObservable();
     }
-    set replace(value) {
-        this._replace$.next(value);
+    get currentSearchResultIndex$() {
+        return this._currentSearchResultIndex$.asObservable();
     }
-    get replace$() {
-        return this._replace$.asObservable();
+    set searchResultCount(value) {
+        this._searchResultCount$.next(value);
+    }
+    get searchResultCount$() {
+        return this._searchResultCount$.asObservable();
     }
     get setTextStyles$() {
         return this._setTextStyles$.asObservable();
@@ -679,22 +706,61 @@ class EditorService {
         return this._applyPageFormat$.asObservable();
     }
     get pageFormat() {
-        return this._pageFormat;
+        return this._pageFormat$.value;
+    }
+    get pageFormat$() {
+        return this._pageFormat$.asObservable();
+    }
+    get leftMarginPageFormat$() {
+        return this._leftMarginPageFormat$.asObservable();
+    }
+    get rightMarginPageFormat$() {
+        return this._rightMarginPageFormat$.asObservable();
+    }
+    get firstLinePosition$() {
+        return this._firstLinePosition$.asObservable();
+    }
+    get leftIndentParagraph$() {
+        return this._leftIndentParagraph$.asObservable();
+    }
+    get rightIndentParagraph$() {
+        return this._rightIndentParagraph$.asObservable();
+    }
+    get paragraphStyle$() {
+        return this._paragraphStyle$.asObservable();
+    }
+    applyFirstLinePosition(value) {
+        this._firstLinePosition$.next(value);
+    }
+    applyLeftIndentParagraph(value) {
+        this._leftIndentParagraph$.next(value);
+    }
+    applyRightIndentParagraph(value) {
+        this._rightIndentParagraph$.next(value);
+    }
+    paragraphStyle(value) {
+        this._paragraphStyle$.next(value);
+    }
+    applyRightMarginPageFormat(value) {
+        this._rightMarginPageFormat$.next(value);
+    }
+    applyLeftMarginPageFormat(value) {
+        this._leftMarginPageFormat$.next(value);
     }
     applyDocumentPageFormat(value) {
-        this._pageFormat = value;
+        this.setPageFormat(value);
         this._applyDocumentPageFormat$.next(value);
     }
     applyPageFormat(value) {
-        this._pageFormat = value;
+        this.setPageFormat(value);
         this._applyPageFormat$.next(value);
     }
     insertPageFormat(value) {
-        this._pageFormat = value;
+        this.setPageFormat(value);
         this._insertPageFormat$.next(value);
     }
     setPageFormat(value) {
-        this._pageFormat = value;
+        this._pageFormat$.next(value);
     }
     setLastPageNumber(value) {
         if (this.lastPageNumber === value) {
@@ -844,6 +910,33 @@ class EditorService {
     removeCustomElementsData(elements) {
         this._removeCustomElementsData$.next(elements);
     }
+    setNewSearchTerm(term) {
+        this._searchTerm$.next(term);
+    }
+    setNewReplaceTerm(term) {
+        this._replaceTerm$.next(term);
+    }
+    setDialogSearchTerm(term) {
+        this._dialogSearchTerm$.next(term);
+    }
+    goNextSearchResult() {
+        this._searchNext$.next();
+    }
+    goPreviousSearchResult() {
+        this._searchPrevious$.next();
+    }
+    replaceCurrentSearchResult() {
+        this._replaceCurrent$.next();
+    }
+    setDisplaySearchBar(show) {
+        this._displaySearchBar$.next(show);
+    }
+    setSearchResultCount(count) {
+        this._searchResultCount$.next(count);
+    }
+    setCurrentSearchResultIndex(index) {
+        this._currentSearchResultIndex$.next(index);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorService }); }
 }
@@ -1008,6 +1101,7 @@ var CommandType;
     CommandType[CommandType["InsertPageFormat"] = 33] = "InsertPageFormat";
     CommandType[CommandType["RemoveInsertedPageFormat"] = 34] = "RemoveInsertedPageFormat";
     CommandType[CommandType["RestorePageFormats"] = 35] = "RestorePageFormats";
+    CommandType[CommandType["ApplyParagraphs"] = 36] = "ApplyParagraphs";
 })(CommandType || (CommandType = {}));
 
 class PageNumbersModel {
@@ -1037,14 +1131,6 @@ class AddNumberingModel {
     }
 }
 
-class PageFormatModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
 class ApplyDocumentPageFormatModel {
     constructor(fields) {
         if (fields) {
@@ -1075,6 +1161,14 @@ class ApplyPageFormatModel {
     }
 }
 
+class ApplyParagraphsModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class ApplyParagraphStyleModel {
     constructor(fields) {
         if (fields) {
@@ -1859,6 +1953,11 @@ class OperationHistory {
         const undoStep = new RestoreParagraphStylesModel({ paragraphs });
         this.addToHistory(undoStep, redoStep);
     }
+    pushApplyParagraphs(oldParagraphs, updatedParagraphs) {
+        const redoStep = new ApplyParagraphsModel({ paragraphs: updatedParagraphs });
+        const undoStep = new ApplyParagraphsModel({ paragraphs: oldParagraphs });
+        this.addToHistory(undoStep, redoStep);
+    }
     pushInsertTableRows(insertIndex, rowsCount, targetIndex, inheritIndex) {
         const redoStep = new InsertTableRowsModel({ insertIndex, count: rowsCount, targetIndex, inheritIndex });
         const undoStep = new RemoveTableRowsModel({ insertIndex, startIndex: targetIndex, endIndex: targetIndex + rowsCount - 1 });
@@ -3857,6 +3956,11 @@ class ParagraphOperationsHelper {
             this.applyParagraphStyles(paragraphs[index].paragraphStyle, style);
         }
     }
+    static applyParagraphs(paragraphs, updatedParagraphs) {
+        for (const paragraph of updatedParagraphs) {
+            this.applySingle(paragraphs, paragraph.insertIndex, paragraph.paragraphStyle);
+        }
+    }
     static applyParagraphStyles(target, value) {
         target.alignment = value.alignment ?? target.alignment;
         target.backgroundColor = value.backgroundColor ?? target.backgroundColor;
@@ -4500,6 +4604,11 @@ class OperationsHelper {
                     this.restore(document, model.restore);
                     break;
                 }
+                case CommandType.ApplyParagraphs: {
+                    const model = command.applyParagraphs;
+                    this.applyParagraphs(contents, model.paragraphs);
+                    break;
+                }
             }
         });
     }
@@ -4777,6 +4886,9 @@ class OperationsHelper {
     static applyParagraphStyle(document, startIndex, endIndex, style) {
         ParagraphOperationsHelper.apply(document.paragraphs, startIndex, endIndex, style);
     }
+    static applyParagraphs(document, paragraphs) {
+        ParagraphOperationsHelper.applyParagraphs(document.paragraphs, paragraphs);
+    }
     static applyImageStyle(document, image) {
         ImageOperationsHelper.apply(document.images, image);
     }
@@ -6183,6 +6295,9 @@ class Range {
         this.end = end;
     }
     isEqual(range) {
+        if (this == null || range == null) {
+            return this == null && range == null;
+        }
         return (this.start.row === range.start.row &&
             this.end.row === range.end.row &&
             this.start.column === range.start.column &&
@@ -6359,6 +6474,9 @@ class CommandModel {
             if (fields.applyPageFormat) {
                 fields.applyPageFormat = new ApplyPageFormatModel(fields.applyPageFormat);
             }
+            if (fields.applyParagraphs) {
+                fields.applyParagraphs = new ApplyParagraphsModel(fields.applyParagraphs);
+            }
             if (fields.applyParagraphStyle) {
                 fields.applyParagraphStyle = new ApplyParagraphStyleModel(fields.applyParagraphStyle);
             }
@@ -6538,6 +6656,10 @@ class SaveCommandsHelper {
         const restoreParagraphStyles = new RestoreParagraphStylesModel({ paragraphs });
         return new CommandModel({ commandType: CommandType.RestoreParagraphStyles, restoreParagraphStyles, targets });
     }
+    static getApplyParagraphsCommand(paragraphs, targets) {
+        const applyParagraphs = new ApplyParagraphsModel({ paragraphs });
+        return new CommandModel({ commandType: CommandType.ApplyParagraphs, applyParagraphs, targets });
+    }
     static getRestoreCommand(restore, targets) {
         return new CommandModel({ commandType: CommandType.Restore, restore, targets });
     }
@@ -6586,233 +6708,85 @@ class SaveCommandsHelper {
     }
 }
 
-class SearchOptions {
-}
 class Search {
     constructor() {
-        this.options = {};
+        this.term = '';
     }
-    set(options) {
-        this.options = Object.assign({}, options);
+    get currentMatchIndex() {
+        return this.currentIndex + 1;
     }
-    find(session) {
-        const options = this.options;
-        this.setMatchIterator(session, options);
-        const iterator = this.forEach;
-        if (!iterator) {
-            return null;
-        }
-        let firstRange = null;
-        iterator((startRow, startColumn, endRow, endColumn) => {
-            firstRange = new Range(new CursorParagraph(startRow, startColumn), new CursorParagraph(endRow, endColumn));
-            if (startColumn === endColumn &&
-                options.start instanceof Range &&
-                options.start.start &&
-                options.skipCurrent !== false &&
-                firstRange.isEqual(options.start)) {
-                firstRange = null;
-                return false;
-            }
-            return true;
-        });
-        return firstRange;
+    get currentMatch() {
+        return this.currentIndex < 0 ? null : this.allMatches[this.currentIndex];
     }
-    assembleRegExp(options) {
-        let needle = options.term;
-        if (!options.term) {
-            options.regex = null;
-            return options.regex;
-        }
-        let modifier = 'gmi';
-        options.isMultiLine = /[\n\r]/.test(needle);
-        if (options.isMultiLine) {
-            options.regex = this.assembleMultilineRegExp(needle, modifier);
-            return options.regex;
+    setSearchTerm(term) {
+        this.term = term;
+    }
+    findAll(sessions) {
+        this.allMatches = [];
+        this.assembleRegExp(this.term);
+        if (!this.regex) {
+            return;
         }
-        let regular;
-        try {
-            regular = new RegExp(needle, modifier);
+        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);
+                }
+            }
+            renderer.updateSearchHighlights(sessionHighlights);
         }
-        catch {
-            regular = null;
+        if (!this.allMatches.length) {
+            this.currentIndex = -1;
+            return;
         }
-        options.regex = regular;
-        return options.regex;
+        this.currentIndex = this.currentIndex > this.allMatches.length - 1 ? this.allMatches.length - 1 : this.currentIndex;
     }
-    assembleMultilineRegExp(needle, modifier) {
-        const parts = needle.replace(/\r\n|\r|\n/g, '$\n^').split('\n');
-        const regex = [];
-        for (const element of parts) {
-            try {
-                regex.push(new RegExp(element, modifier));
-            }
-            catch {
-                return [];
-            }
+    goNext(selection, currentSessionId) {
+        if (!this.allMatches?.length) {
+            return;
         }
-        return regex;
+        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;
     }
-    setMatchIterator(session, options) {
-        const regex = this.assembleRegExp(options);
-        if (!regex) {
-            return null;
-        }
-        const backwards = options.backwards ?? false;
-        const skipCurrent = options.skipCurrent ?? false;
-        let start = options.start;
-        if (!start) {
-            start = session.selection.range;
-        }
-        let startParagraphPosition;
-        if (start instanceof Range && start.start) {
-            startParagraphPosition = start[skipCurrent !== backwards ? 'end' : 'start'];
-        }
-        let firstRow = 0;
-        let lastRow = session.displayData.paragraphs.length - 2;
-        this.setForEach(backwards, startParagraphPosition, options, firstRow, lastRow);
-        const singleRe = regex;
-        this.setForEachInLine(regex, options, backwards, session, singleRe);
-    }
-    setForEach(backwards, startParagraphPosition, options, firstRow, lastRow) {
-        if (backwards) {
-            this.setForEachForBackwards(startParagraphPosition, options, firstRow, lastRow);
+    goPrevious(selection, currentSessionId) {
+        if (!this.allMatches?.length) {
             return;
         }
-        this.setDefaultForEach(startParagraphPosition, options, firstRow, lastRow);
-    }
-    setDefaultForEach(startParagraphPosition, options, firstRow, lastRow) {
-        this.forEach = callback => {
-            let row = startParagraphPosition.row;
-            if (this.forEachInLine(row, startParagraphPosition.column, callback)) {
-                return;
-            }
-            for (row = row + 1; row <= lastRow; row++) {
-                if (this.forEachInLine(row, 0, callback)) {
-                    return;
-                }
-            }
-            if (options.wrap === false) {
-                return;
-            }
-            for (row = firstRow, lastRow = startParagraphPosition.row; row <= lastRow; row++) {
-                if (this.forEachInLine(row, 0, callback)) {
-                    return;
-                }
-            }
-        };
-    }
-    setForEachForBackwards(startParagraphPosition, options, firstRow, lastRow) {
-        this.forEach = callback => {
-            let row = startParagraphPosition.row;
-            if (this.forEachInLine(row, startParagraphPosition.column, callback)) {
-                return;
-            }
-            for (row--; row >= firstRow; row--) {
-                if (this.forEachInLine(row, Number.MAX_VALUE, callback)) {
-                    return;
-                }
-            }
-            if (options.wrap === false) {
-                return;
-            }
-            for (row = lastRow, firstRow = startParagraphPosition.row; row >= firstRow; row--) {
-                if (this.forEachInLine(row, Number.MAX_VALUE, callback)) {
-                    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;
             }
-        };
+        }
+        this.currentIndex = prevIndex >= 0 ? prevIndex : this.allMatches.length - 1;
     }
-    setForEachInLine(re, options, backwards, session, singleRe) {
-        if (Array.isArray(re) && options.isMultiLine) {
-            this.setForEachInLineForRegArray(re, backwards, session);
+    assembleRegExp(term) {
+        if (!term) {
+            this.regex = null;
+            return;
         }
-        else if (backwards) {
-            this.setForEachInLineForBackwards(session, singleRe);
+        try {
+            this.regex = new RegExp(term, 'gmi');
         }
-        else {
-            this.setDefaultForEachInLine(session, singleRe);
+        catch {
+            this.regex = null;
         }
     }
-    setForEachInLineForRegArray(regex, backwards, session) {
-        let regularLength = regex.length;
-        this.forEachInLine = (row, offset, callback) => {
-            let startRow = backwards ? row - regularLength + 1 : row;
-            if (startRow < 0) {
-                return false;
-            }
-            let line = session.displayData.getParagraphContent(startRow);
-            let startIndex = line.search(regex[0]);
-            if ((!backwards && startIndex < offset) || startIndex === -1) {
-                return false;
-            }
-            for (let i = 1; i < regularLength; i++) {
-                line = session.displayData.getParagraphContent(startRow + i);
-                if (line.search(regex[i]) === -1) {
-                    return false;
-                }
-            }
-            let endIndex = line.match(regex[regularLength - 1])[0].length;
-            if (backwards && endIndex > offset) {
-                return false;
-            }
-            if (callback(startRow, startIndex, startRow + regularLength - 1, endIndex)) {
-                return true;
-            }
-            return false;
-        };
-    }
-    setForEachInLineForBackwards(session, singleRe) {
-        this.forEachInLine = (row, endIndex, callback) => {
-            let line = session.displayData.getParagraphContent(row);
-            let matches = [];
-            let regexResult, last = 0;
-            singleRe.lastIndex = 0;
-            while ((regexResult = singleRe.exec(line))) {
-                let length = regexResult[0].length;
-                last = regexResult.index;
-                if (!length) {
-                    if (last >= line.length) {
-                        break;
-                    }
-                    singleRe.lastIndex = last + 1;
-                }
-                if (regexResult.index + length > endIndex) {
-                    break;
-                }
-                matches.push(regexResult.index, length);
-            }
-            for (let i = matches.length - 1; i >= 0; i -= 2) {
-                let column = matches[i - 1];
-                let length = matches[i];
-                if (callback(row, column, row, column + length)) {
-                    return true;
-                }
-            }
-            return false;
-        };
-    }
-    setDefaultForEachInLine(session, singleRe) {
-        this.forEachInLine = (row, startIndex, callback) => {
-            let line = session.displayData.getParagraphContent(row);
-            let last;
-            let regexResult;
-            singleRe.lastIndex = startIndex;
-            while ((regexResult = singleRe.exec(line))) {
-                let length = regexResult[0].length;
-                last = regexResult.index;
-                if (callback(row, last, row, last + length)) {
-                    return true;
-                }
-                if (!length) {
-                    singleRe.lastIndex = last += 1;
-                    if (last >= line.length) {
-                        return false;
-                    }
-                }
-            }
-            return false;
-        };
-    }
 }
 
 class Selection {
@@ -7306,8 +7280,7 @@ class Editor {
         this.focus();
         this.session.applyToolbarStyles();
         this.search = new Search();
-        this.search.set({ wrap: true });
-        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.replaceSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), this.searchOptionSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription());
+        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());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -7379,6 +7352,7 @@ class Editor {
         }
         this.session.insertText(position, text, textStyle);
         this.onSelectionChange();
+        this.onContentChange();
     }
     removeLeft() {
         if (this.selection.isEmpty) {
@@ -7433,6 +7407,7 @@ class Editor {
         const endPoint = this.session.insertTab(this.selection.cursor);
         this.onDocumentChange(new Range(this.selection.cursor, endPoint));
         this.onSelectionChange();
+        this.onContentChange();
     }
     insertImage(imageData) {
         const insertIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start);
@@ -7496,6 +7471,7 @@ class Editor {
         const endPosition = this.session.replace(model);
         this.onDocumentChange(new Range(this.selection.cursor, endPosition));
         this.onSelectionChange();
+        this.onContentChange();
     }
     removeToLineStart() {
         if (this.selection.isEmpty) {
@@ -7560,6 +7536,20 @@ class Editor {
         this.session.applyParagraphStyle(startIndex, endIndex, paragraphStyle);
         this.renderer.updateCursor();
     }
+    applyParagraphsMargin(value) {
+        const range = this.selection.range;
+        const startIndex = this.session.model.paragraphs[range.start.row].insertIndex;
+        const endIndex = this.session.model.paragraphs[range.end.row].insertIndex;
+        const paragraphs = IndexedElementHelper.sliceSection(this.session.model.paragraphs, startIndex, endIndex);
+        const paragraphsDeepCopy = paragraphs.map(x => new ParagraphModel({ insertIndex: x.insertIndex, paragraphStyle: new ParagraphStyleModel({ ...x.paragraphStyle }) }));
+        const updatedParagraphs = paragraphs.map(x => new ParagraphModel({
+            insertIndex: x.insertIndex,
+            paragraphStyle: new ParagraphStyleModel({ ...x.paragraphStyle, ...value })
+        }));
+        this.saveApplyParagraphsToHistory(paragraphsDeepCopy, updatedParagraphs);
+        this.session.applyParagraphs(updatedParagraphs);
+        this.renderer.updateCursor();
+    }
     setNumberingTemplate(templateLevels) {
         const range = this.selection.range;
         const startIndex = this.session.model.paragraphs[range.start.row].insertIndex;
@@ -7588,74 +7578,74 @@ class Editor {
         }
     }
     openSearch() {
-        this.editorService.openSearchDialog = true;
+        this.editorService.setDisplaySearchBar(true);
+        const selectedText = this.getSelectedText();
+        if (selectedText) {
+            setTimeout(() => {
+                this.editorService.setDialogSearchTerm(selectedText);
+            });
+        }
     }
-    find(options) {
-        let range = this.selection.range;
-        if (options.term == null) {
-            let term = this.session.displayData.getTextRange(range) || this.search.options.term;
-            if (!term) {
-                range = this.session.getWordRange(range.start.row, range.start.column);
-                term = this.session.displayData.getTextRange(range);
+    find(term, focusNext = false) {
+        if (!term?.length) {
+            for (const session of this.regulatorService.sessions) {
+                session.renderer.updateSearchHighlights([]);
+                session.renderer.updateActiveSearchHighlight(null);
             }
-            options.term = term;
+            this.editorService.setSearchResultCount(0);
+            return;
         }
-        if (!options.start) {
-            options.start = range;
+        this.search.setSearchTerm(term);
+        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));
         }
-        this.search.set(options);
-        const newRange = this.search.find(this.session);
-        if (newRange) {
-            this.selection.placeSelection(range.start, range.end);
-            this.onSelectionChange();
-            if (this.session === this.mainSession) {
-                this.mainRenderer.scrollSelectionIntoView(range.start, range.end, 0.5);
-            }
-            return newRange;
+        else {
+            this.updateActiveSearchHighlight();
         }
-        range.end = range.start;
-        this.selection.placeCursor(range.start);
-        this.onSelectionChange();
-        return null;
     }
-    updateCounter() {
-        const regex = this.search.options.regex;
-        let all = 0;
-        let current = 0;
-        if (!regex) {
-            return { current: 0, total: 0 };
-        }
-        const value = this.session.displayData.getAllParagraphsContent().join('\n');
-        let offset = this.session.displayData.positionToIndex(this.selection.range.start);
-        regex.lastIndex = 0;
-        let regexResult;
-        while ((regexResult = regex.exec(value))) {
-            all++;
-            let last = regexResult.index;
-            if (last <= offset) {
-                current++;
-            }
-            if (all > this.MAX_COUNT) {
-                break;
-            }
+    findNext() {
+        if (!this.search.allMatches?.length) {
+            return;
         }
-        return { current: current, total: all > this.MAX_COUNT ? this.MAX_COUNT : all };
+        this.search.goNext(this.selection, this.regulatorService.currentSession.sessionId);
+        this.setCursorAtSearchResult();
+        this.updateActiveSearchHighlight();
     }
-    replace(search, replace) {
-        if (this.selection.isEmpty) {
+    findPrevious() {
+        if (!this.search.allMatches?.length) {
             return;
         }
-        if (search !== replace) {
-            if (replace) {
-                const insertIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start);
-                const insertText = new InsertTextModel({ insertIndex, text: replace });
-                this.replaceBy(new ReplaceModel({ insertText }));
-            }
-            else {
-                this.removeSelected();
-            }
+        this.search.goPrevious(this.selection, this.regulatorService.currentSession.sessionId);
+        this.updateActiveSearchHighlight();
+        this.setCursorAtSearchResult();
+    }
+    replace() {
+        if (!this.search.allMatches?.length || this.search.term === this.replaceTerm) {
+            return;
         }
-        this.find({ term: search, skipCurrent: true, backwards: false });
+        if (this.replaceTerm) {
+            const insertIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.search.currentMatch.range.start);
+            const insertText = new InsertTextModel({ insertIndex, text: this.replaceTerm });
+            const partIndexes = ContentHelper.getSelectedPartDocumentIndexes(this.session.displayData.paragraphs, this.search.currentMatch.range);
+            const deleteModel = new DeleteModel({
+                startIndex: partIndexes.startIndex,
+                count: partIndexes.endIndex - partIndexes.startIndex + 1
+            });
+            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));
+        }
+        else {
+            const range = this.search.currentMatch.range;
+            this.saveRemoveToHistory(range);
+            this.session.remove(range);
+        }
+        this.find(this.search.term);
     }
     undo() {
         const undo = this.history.popUndoOperation();
@@ -7666,6 +7656,7 @@ class Editor {
         this.applyOperation(undo.operation);
         this.selection.placeSelection(undo.cursor, undo.anchor);
         this.onSelectionChange();
+        this.onContentChange();
     }
     redo() {
         const redo = this.history.popRedoOperation();
@@ -7676,6 +7667,7 @@ class Editor {
         this.selection.placeSelection(redo.cursor, redo.anchor);
         this.applyOperation(redo.operation);
         this.onSelectionChange();
+        this.onContentChange();
     }
     applyOperation(operation) {
         let command = null;
@@ -7843,6 +7835,11 @@ class Editor {
             this.session.replaceByRestore(structuredClone(operation));
             command = SaveCommandsHelper.getReplaceByRestoreCommand(structuredClone(operation), this.targets);
         }
+        else if (operation instanceof ApplyParagraphsModel) {
+            const deepCopy = structuredClone(operation);
+            this.session.applyParagraphs(deepCopy.paragraphs);
+            command = SaveCommandsHelper.getApplyParagraphsCommand(deepCopy.paragraphs, this.targets);
+        }
         else {
             throw new Error('Undo/redo is not implemented for the Operation');
         }
@@ -7906,6 +7903,10 @@ class Editor {
         this.history.pushApplyTextStyle(startIndex, endIndex, textStyle, formats, linkFormats);
         this.commandsService.createCommand(SaveCommandsHelper.getApplyTextStyleCommand(startIndex, endIndex, textStyle, this.targets));
     }
+    saveApplyParagraphsToHistory(oldParagraphs, updatedParagraphs) {
+        this.history.pushApplyParagraphs(oldParagraphs, updatedParagraphs);
+        this.commandsService.createCommand(SaveCommandsHelper.getApplyParagraphsCommand(updatedParagraphs, this.targets));
+    }
     saveApplyParagraphStyleToHistory(startIndex, endIndex, paragraphStyle) {
         const paragraphs = IndexedElementHelper.sliceSection(this.session.model.paragraphs, startIndex, endIndex);
         const paragraphsDeepCopy = paragraphs.map(x => new ParagraphModel({ insertIndex: x.insertIndex, paragraphStyle: new ParagraphStyleModel({ ...x.paragraphStyle }) }));
@@ -7985,6 +7986,7 @@ class Editor {
         const endPoint = this.session.insertElement(this.selection.cursor, data);
         this.onDocumentChange(new Range(this.selection.cursor, endPoint));
         this.onSelectionChange();
+        this.onContentChange();
     }
     removeSelected() {
         const range = this.selection.range;
@@ -7997,6 +7999,7 @@ class Editor {
             this.selection.placeCursor(range.end);
             this.removeNumberingsFromParagraphs();
             this.onSelectionChange();
+            this.onContentChange();
             this.focus();
             return;
         }
@@ -8008,6 +8011,7 @@ class Editor {
             this.removeCustomElementsData();
             this.session.remove(range);
             this.onSelectionChange();
+            this.onContentChange();
         }
         this.focus();
     }
@@ -8028,6 +8032,7 @@ class Editor {
         this.removeCustomElementsData();
         this.session.removeWithParagraph(operation);
         this.onSelectionChange();
+        this.onContentChange();
     }
     removeCustomElementsData() {
         const startIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start);
@@ -8252,6 +8257,7 @@ class Editor {
         if (sourceSession.sessionId === this.session.sessionId && sourceStartIndex <= targetIndex && sourceEndIndex >= targetIndex) {
             this.selection.placeSelection(sourceRange.start, sourceRange.end);
             this.onSelectionChange();
+            this.onContentChange();
             return;
         }
         const model = new MoveRangeModel({
@@ -8264,6 +8270,7 @@ class Editor {
         this.moveRange(model);
         this.saveMoveRangeToHistory(model, sourceSession, sourceRange);
         this.onSelectionChange();
+        this.onContentChange();
     }
     moveRange(model) {
         this.regulatorService.setTargetedSessionAsCurrent(model.targetTargets);
@@ -8353,6 +8360,7 @@ class Editor {
         this.container.nativeElement.style.maxWidth = `${pageWidth}px`;
         const scalingRatio = this.customPageWidth ? ScalingHelper.getRatio(this.customPageWidth, pageWidth) : 1;
         this.editorService.setPageFormat(this.model.pageFormats[0]);
+        this.editorService.paragraphStyle(this.model.paragraphs[0].paragraphStyle);
         this.regulatorService.addMainSession(this.model, pageWidth, scalingRatio, this.container);
     }
     onSelectionChange() {
@@ -8362,8 +8370,17 @@ class Editor {
             this.renderer.updateCursor();
         }
         this.editorService.setHasSelection(!this.selection.isEmpty);
+        const position = this.mainSession.displayData.positionToIndex(this.selection.selectedRange.start);
+        const pageFormat = this.mainSession.displayData.getPageFormatAtPosition(position);
+        this.editorService.paragraphStyle(this.session.model.paragraphs[this.selection.selectedRange.start.row].paragraphStyle);
+        this.editorService.setPageFormat(pageFormat.pageFormatModel);
         this.rerenderMarker();
     }
+    onContentChange() {
+        if (this.search.term) {
+            this.find(this.search.term);
+        }
+    }
     enableSelection() {
         if (!this.selection.isDisabled) {
             return;
@@ -8485,6 +8502,24 @@ class Editor {
         }
         return null;
     }
+    applyLeftMarginPageFormat(value) {
+        const position = this.selection.cursor;
+        const startIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, position.row, position.column);
+        const oldPageFormat = this.mainSession.displayData.getPageFormatAtPosition(startIndex).pageFormatModel;
+        const newPageFormat = new PageFormatModel({ ...oldPageFormat, marginLeft: value });
+        this.saveApplyPageFormatToHistory(oldPageFormat, newPageFormat);
+        OperationsHelper.updatePageFormat(this.model, newPageFormat);
+        this.recreateMainSession();
+    }
+    applyRightMarginPageFormat(value) {
+        const position = this.selection.cursor;
+        const startIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, position.row, position.column);
+        const oldPageFormat = this.mainSession.displayData.getPageFormatAtPosition(startIndex).pageFormatModel;
+        const newPageFormat = new PageFormatModel({ ...oldPageFormat, marginRight: value });
+        this.saveApplyPageFormatToHistory(oldPageFormat, newPageFormat);
+        OperationsHelper.updatePageFormat(this.model, newPageFormat);
+        this.recreateMainSession();
+    }
     applyPageFormat(model) {
         const position = this.selection.cursor;
         const startIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, position.row, position.column);
@@ -8525,6 +8560,12 @@ class Editor {
             this.selection?.clearSelection();
         });
     }
+    applyLeftMarginPageFormatSubscription() {
+        return this.editorService.leftMarginPageFormat$.subscribe(value => this.applyLeftMarginPageFormat(value));
+    }
+    applyRightMarginPageFormatSubscription() {
+        return this.editorService.rightMarginPageFormat$.subscribe(value => this.applyRightMarginPageFormat(value));
+    }
     applyPageFormatSubscription() {
         return this.editorService.applyPageFormat$.subscribe(pageFormat => this.applyPageFormat(pageFormat));
     }
@@ -8534,17 +8575,18 @@ class Editor {
     applyDocumentPageFormatSubscription() {
         return this.editorService.applyDocumentPageFormat$.subscribe(pageFormat => this.applyDocumentPageFormat(pageFormat));
     }
-    searchOptionSubscription() {
-        return this.editorService.searchOptions$.subscribe(searchOptions => {
-            this.find(searchOptions);
-            this.editorService.searchIteration = this.updateCounter();
-        });
+    searchOptionSubscriptions() {
+        return [
+            this.editorService.searchTerm$.subscribe(searchTerm => this.find(searchTerm, true)),
+            this.editorService.searchNext$.subscribe(() => this.findNext()),
+            this.editorService.searchPrevious$.subscribe(() => this.findPrevious())
+        ];
     }
     replaceSubscription() {
-        return this.editorService.replace$.subscribe(replace => {
-            this.replace(replace.searchValue, replace.replaceValue);
-            this.editorService.searchIteration = this.updateCounter();
-        });
+        return [
+            this.editorService.replaceTerm$.subscribe(x => (this.replaceTerm = x)),
+            this.editorService.replaceCurrent$.subscribe(() => this.replace())
+        ];
     }
     setTextStylesSubscription() {
         return this.editorService.setTextStyles$.subscribe(textStyles => {
@@ -8570,6 +8612,18 @@ class Editor {
             this.focus();
         });
     }
+    applyFirstLinePositionSubscription() {
+        return this.editorService.firstLinePosition$.subscribe(x => {
+            const value = x > 0 ? { indentFirstLine: x, indentHanging: 0 } : { indentHanging: Math.abs(x), indentFirstLine: 0 };
+            this.applyParagraphsMargin(value);
+        });
+    }
+    applyRightIndentParagraphSubscription() {
+        return this.editorService.rightIndentParagraph$.subscribe(indentRight => this.applyParagraphsMargin({ indentRight }));
+    }
+    applyLeftIndentParagraphSubscription() {
+        return this.editorService.leftIndentParagraph$.subscribe(indentLeft => this.applyParagraphsMargin({ indentLeft }));
+    }
     setImageStyleSubscription() {
         return this.editorService.setImageStyle$.subscribe(image => this.applyImageStyles(image));
     }
@@ -8819,10 +8873,97 @@ 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() {
+        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 EDITOR_VERSION = '2';
 
+class EditorSearchBarComponent {
+    constructor(editorService, destroyRef) {
+        this.editorService = editorService;
+        this.destroyRef = destroyRef;
+        this.searchControl = new FormControl('');
+        this.replaceControl = new FormControl('');
+        this.isReplace = false;
+        this.searchResultCount$ = editorService.searchResultCount$;
+        this.searchResultIndex$ = editorService.currentSearchResultIndex$;
+    }
+    ngOnInit() {
+        this.searchControl.valueChanges
+            .pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.editorService.setNewSearchTerm(this.searchControl.value));
+        this.replaceControl.valueChanges
+            .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.editorService.setNewReplaceTerm(this.replaceControl.value));
+        this.editorService.dialogSearchTerm$
+            .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+            .subscribe(x => this.searchControl.setValue(x));
+    }
+    ngOnDestroy() {
+        this.editorService.setNewSearchTerm('');
+    }
+    onClose() {
+        this.editorService.setDisplaySearchBar(false);
+    }
+    focusInput() {
+        setTimeout(() => {
+            this.searchInput?.nativeElement?.focus();
+            this.searchInput?.nativeElement?.select();
+        });
+    }
+    findNext() {
+        this.editorService.goNextSearchResult();
+    }
+    findPrev() {
+        this.editorService.goPreviousSearchResult();
+    }
+    setReplace() {
+        this.isReplace = !this.isReplace;
+    }
+    replace() {
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorSearchBarComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatInputModule,
+                        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"] }]
+        }], ctorParameters: () => [{ type: EditorService }, { type: i0.DestroyRef }], propDecorators: { searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }] } });
+
 const EXTERNAL_ELEMENT_SIDENAV = new InjectionToken('EXTERNAL_ELEMENT_SIDENAV');
 const EXTERNAL_ELEMENT_SERVICE = new InjectionToken('EXTERNAL_ELEMENT_SERVICE');
 
@@ -10541,7 +10682,7 @@ class TextLineInfo {
         }
         switch (align) {
             case Alignment$1.center:
-                this.paddingLeft = indent.left + (diff - indent.left - indent.right) / 2;
+                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;
@@ -12565,6 +12706,15 @@ class EditSession {
         this.selection.placeCursor(endPosition);
         this.applyToolbarStyles();
     }
+    applyParagraphs(paragraphs) {
+        const startIndex = paragraphs[0].insertIndex;
+        const endIndex = paragraphs[paragraphs.length - 1].insertIndex;
+        const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
+        const endPosition = ContentHelper.documentIndexToParagraphWithOffset(this.displayData.paragraphs, endIndex);
+        OperationsHelper.applyParagraphs(this.model, paragraphs);
+        this.displayData.updateNextLineIndexes(startParagraph, endPosition.row);
+        this.applyToolbarStyles();
+    }
     setTextStyle(textStyle) {
         const result = { ...this.editorService.styles };
         for (let key of Object.keys(textStyle)) {
@@ -13062,6 +13212,7 @@ class RenderChangesModel {
             this.lines ||
             this.marker ||
             this.selection ||
+            this.search ||
             this.scroll ||
             this.size ||
             this.text ||
@@ -13073,6 +13224,7 @@ class RenderChangesModel {
         this.lines = false;
         this.marker = false;
         this.selection = false;
+        this.search = false;
         this.scroll = false;
         this.size = false;
         this.text = false;
@@ -13131,15 +13283,14 @@ class RenderLoop {
     }
 }
 
-class SelectionLayer {
+class HighlightLayer {
     constructor(parentEl, cssClass, session) {
         this.session = session;
-        this.marker = null;
         this.element = document.createElement('div');
-        this.element.className = `noder-layer noder-selection-layer ${cssClass}`;
+        this.element.className = `noder-layer noder-highlight-layer ${cssClass}`;
         parentEl.appendChild(this.element);
     }
-    renderSelection(css) {
+    renderHighlight(cssPosition, cssClass) {
         let selectionElement = this.selectionIndex !== -1 ? this.element.childNodes[this.selectionIndex] : null;
         if (!selectionElement) {
             selectionElement = document.createElement('div');
@@ -13149,32 +13300,8 @@ class SelectionLayer {
         else {
             this.selectionIndex++;
         }
-        selectionElement.style.cssText = css;
-        selectionElement.className = 'noder-selection';
-    }
-    update(config) {
-        if (!config) {
-            return;
-        }
-        this.config = config;
-        this.selectionIndex = 0;
-        if (this.marker) {
-            let range = this.marker.clipRows(config.contentRange.start, config.contentRange.end);
-            if (!range.isEmpty) {
-                range = range.toScreenRange(this.session);
-                if (range.isSingleLine) {
-                    this.drawSingleLineMarker(range);
-                }
-                else {
-                    this.drawMultiLineMarker(range);
-                }
-            }
-        }
-        if (this.selectionIndex !== -1) {
-            while (this.selectionIndex < this.element.childElementCount) {
-                this.element.removeChild(this.element.lastChild);
-            }
-        }
+        selectionElement.style.cssText = cssPosition;
+        selectionElement.className = cssClass;
     }
     getTop(row) {
         const paragraphs = this.session.displayData.paragraphs;
@@ -13184,7 +13311,7 @@ class SelectionLayer {
             this.session.scrollTop);
     }
     // Draws a multi line marker, where lines span the full width
-    drawMultiLineMarker(range) {
+    drawMultiLineMarker(range, cssClass) {
         // from selection start to the end of the line
         const start = range.start.row;
         const end = range.end.row;
@@ -13220,19 +13347,19 @@ class SelectionLayer {
                 let width = lineInfo.width + (lineInfo.wordSpacingWidth ?? 0);
                 style = this.getMarkerStyle(lineInfo.height, width, top, left);
             }
-            this.renderSelection(style);
+            this.renderHighlight(style, cssClass);
             top += lineInfo.height + lineInfo.offsetAfter + lineInfo.endPageOffset;
         }
     }
     // Draws a marker which covers part or whole width of a single screen line
-    drawSingleLineMarker(range) {
+    drawSingleLineMarker(range, cssClass) {
         const rangeInfo = this.getRangeInfo(this.session, range);
         const paragraphInfo = PositionHelper.getParagraphInfoByRow(this.session.displayData.paragraphs, range.start.row);
         const height = rangeInfo.screenHeight || paragraphInfo.lineHeight;
         const width = rangeInfo.screenWidth;
         const top = this.getTop(range.start.row);
         const left = rangeInfo.leftPos;
-        this.renderSelection(this.getMarkerStyle(height, width, top, left));
+        this.renderHighlight(this.getMarkerStyle(height, width, top, left), cssClass);
     }
     getRangeInfo(session, range) {
         const start = range.start;
@@ -13250,6 +13377,91 @@ class SelectionLayer {
     }
 }
 
+class SearchHighlightLayer extends HighlightLayer {
+    constructor(parentEl, cssClass, session) {
+        super(parentEl, cssClass, session);
+        this.className = 'noder-highlight';
+        this.selectedClassName = 'noder-selected-highlight';
+        this.markers = [];
+    }
+    update(config) {
+        if (!config) {
+            return;
+        }
+        this.config = config;
+        this.selectionIndex = 0;
+        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.markers) {
+            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));
+            for (const range of ranges) {
+                if (!range.isEmpty) {
+                    if (range.isSingleLine) {
+                        this.drawSingleLineMarker(range, this.className);
+                    }
+                    else {
+                        this.drawMultiLineMarker(range, this.className);
+                    }
+                }
+            }
+        }
+        if (this.selectionIndex !== -1) {
+            while (this.selectionIndex < this.element.childElementCount) {
+                this.element.removeChild(this.element.lastChild);
+            }
+        }
+    }
+}
+
+class SelectionLayer extends HighlightLayer {
+    constructor(parentEl, cssClass, session) {
+        super(parentEl, cssClass, session);
+        this.className = 'noder-selection';
+        this.marker = null;
+    }
+    update(config) {
+        if (!config) {
+            return;
+        }
+        this.config = config;
+        this.selectionIndex = 0;
+        if (this.marker) {
+            let range = this.marker.clipRows(config.contentRange.start, config.contentRange.end);
+            if (!range.isEmpty) {
+                range = range.toScreenRange(this.session);
+                if (range.isSingleLine) {
+                    this.drawSingleLineMarker(range, this.className);
+                }
+                else {
+                    this.drawMultiLineMarker(range, this.className);
+                }
+            }
+        }
+        if (this.selectionIndex !== -1) {
+            while (this.selectionIndex < this.element.childElementCount) {
+                this.element.removeChild(this.element.lastChild);
+            }
+        }
+    }
+}
+
 class Renderer extends EventEmitting {
     constructor(parentContainer, session) {
         super();
@@ -13286,6 +13498,7 @@ class Renderer extends EventEmitting {
         this.createContentContainer();
         this.textLayer = new TextLayer(this.content, this.session);
         this.selectionLayer = new SelectionLayer(this.content, 'text-selection', this.session);
+        this.searchHighlightLayer = new SearchHighlightLayer(this.content, 'text-search-highlight', this.session);
         this.cursorLayer = new CursorLayer(this.content, this.session);
         this.dragAndDropSelectionLayer = new SelectionLayer(this.content, 'drag-and-drop-selection', this.session);
         this.loop = new RenderLoop(changes => this.renderChanges(changes));
@@ -13319,6 +13532,9 @@ class Renderer extends EventEmitting {
         if (changes.marker || changes.selection) {
             this.renderSelection();
         }
+        if (changes.search) {
+            this.renderSearchHighlights();
+        }
         if (changes.dragAndDrop) {
             this.renderDragAndDropSelection();
         }
@@ -13363,6 +13579,19 @@ class Renderer extends EventEmitting {
             this.loop.schedule({ selection: true });
         }
     }
+    updateSearchHighlights(ranges) {
+        if (this.searchHighlightLayer.markers.length !== ranges.length ||
+            !this.searchHighlightLayer.markers.every(x => ranges.some(y => x.isEqual(y)))) {
+            this.searchHighlightLayer.markers = ranges;
+            this.loop.schedule({ search: true });
+        }
+    }
+    updateActiveSearchHighlight(active) {
+        if (!this.searchHighlightLayer.active?.isEqual(active)) {
+            this.searchHighlightLayer.active = active;
+            this.loop.schedule({ search: true });
+        }
+    }
     updateDragAndDropSelection(range) {
         if (range.isEmpty && this.dragAndDropSelectionLayer.marker) {
             this.dragAndDropSelectionLayer.marker = null;
@@ -13424,6 +13653,7 @@ class Renderer extends EventEmitting {
     renderFull() {
         this.textLayer.updateLines(this.layerConfig);
         this.selectionLayer.update(this.layerConfig);
+        this.searchHighlightLayer.update(this.layerConfig);
         this.cursorLayer.update(this.layerConfig);
         this.moveTextAreaToCursor();
         this.session.onRendered();
@@ -13440,6 +13670,9 @@ class Renderer extends EventEmitting {
         this.selectionLayer.update(this.layerConfig);
         this.cursorLayer.detectVisibility();
     }
+    renderSearchHighlights() {
+        this.searchHighlightLayer.update(this.layerConfig);
+    }
     renderDragAndDropSelection() {
         this.dragAndDropSelectionLayer.update(this.layerConfig);
     }
@@ -13641,6 +13874,9 @@ class VirtualRenderer {
         if (changes.marker || changes.selection) {
             this.renderSelection();
         }
+        if (changes.search) {
+            this.renderSearchHighlights();
+        }
         if (changes.dragAndDrop) {
             this.renderDragAndDropSelection();
         }
@@ -13707,6 +13943,12 @@ class VirtualRenderer {
     updateSelection(range) {
         this.renderer.updateSelection(range);
     }
+    updateSearchHighlights(ranges) {
+        this.renderer.updateSearchHighlights(ranges);
+    }
+    updateActiveSearchHighlight(active) {
+        this.renderer.updateActiveSearchHighlight(active);
+    }
     updateDragAndDropSelection(range) {
         this.renderer.updateDragAndDropSelection(range);
     }
@@ -13830,6 +14072,7 @@ class VirtualRenderer {
             this.renderer.textLayer.scrollLines(this.layerConfig);
         }
         this.renderer.selectionLayer.update(this.layerConfig);
+        this.renderer.searchHighlightLayer.update(this.layerConfig);
         if (!this.renderer.cursorLayer.isVisible) {
             return;
         }
@@ -13851,6 +14094,9 @@ class VirtualRenderer {
     renderSelection() {
         this.renderer.renderSelection();
     }
+    renderSearchHighlights() {
+        this.renderer.renderSearchHighlights();
+    }
     renderDragAndDropSelection() {
         this.renderer.renderDragAndDropSelection();
     }
@@ -14203,17 +14449,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class EditorRulerComponent {
     constructor() {
-        this.pxPerCm = 37.8; // 96dpi / 2.54
+        this.unit = input.required();
+        this.editorService = inject(EditorService);
+        this.defaultPaddingCm = 2.5;
+        this.pageWidth$ = this.editorService.pageFormat$.pipe(distinctUntilChanged(), tap(x => {
+            this.recalcGeometry(x.pageWidth);
+            this.unit() === 'inch' ? this.buildTicksInch() : this.buildTicksCm();
+            this.rightMarginPageFormatPx.set(x.pageWidth - x.marginRight);
+            this.leftMarginPageFormatPx.set(x.marginLeft);
+        }), map(x => x.pageWidth));
+        this.snapInch = 0.125;
         this.snapCm = 0.25;
-        this.defaultPadding = 2.5;
-        this.offsetPosition = 5;
-        this.containerWidthPx = 0;
-        this.ticks = [];
-        this.leftPx = signal(this.defaultPadding * this.pxPerCm);
-        this.firstLinePx = signal(this.defaultPadding * this.pxPerCm);
-        this.rightPx = signal(0);
+        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.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.rightMarginPageFormatPx = signal(0);
         this.guideX = signal(0);
         this.showGuide = signal(false);
+        this.containerWidthPx = 0;
+        this.ticks = [];
         this.dragging = null;
         this.dragOffsetX = 0;
         this.onMove = (ev) => {
@@ -14224,22 +14484,43 @@ class EditorRulerComponent {
             const pointX = this.getClientX(ev);
             const rect = this.rulerContainer.nativeElement.getBoundingClientRect();
             let x = pointX - rect.left - this.dragOffsetX;
-            if (x < -1 || x > this.maxRulePosition) {
+            if (x < -1 || x > this.containerWidthPx) {
                 return;
             }
             x = this.snapPx(x);
-            if (this.dragging === 'left') {
-                this.leftPx.set(x);
+            if (this.dragging === 'leftMarginPageFormat') {
+                this.leftMarginPageFormatPx.set(x);
             }
             else if (this.dragging === 'first') {
-                this.firstLinePx.set(x);
+                this.firstLine.set(x - this.leftIndentPx());
             }
-            else {
-                this.rightPx.set(x);
+            else if (this.dragging === 'rightMarginPageFormat') {
+                this.rightMarginPageFormatPx.set(x);
+            }
+            else if (this.dragging === 'leftIndent') {
+                this.leftIndent.set(x - this.leftMarginPageFormatPx());
+            }
+            else if (this.dragging === 'rightIndent') {
+                this.rightIndent.set(this.rightMarginPageFormatPx() - x);
             }
             this.guideX.set(x);
         };
         this.onUp = () => {
+            if (this.dragging === 'leftMarginPageFormat') {
+                this.editorService.applyLeftMarginPageFormat(Math.round(this.leftMarginPageFormatPx()));
+            }
+            else if (this.dragging === 'first') {
+                this.editorService.applyFirstLinePosition(Math.round(this.firstLine()));
+            }
+            else if (this.dragging === 'leftIndent') {
+                this.editorService.applyLeftIndentParagraph(Math.round(this.leftIndent()));
+            }
+            else if (this.dragging === 'rightIndent') {
+                this.editorService.applyRightIndentParagraph(Math.round(this.rightIndent()));
+            }
+            else if (this.dragging === 'rightMarginPageFormat') {
+                this.editorService.applyRightMarginPageFormat(Math.round(this.containerWidthPx - this.rightMarginPageFormatPx()));
+            }
             this.dragging = null;
             this.showGuide.set(false);
             window.removeEventListener('mousemove', this.onMove);
@@ -14247,19 +14528,25 @@ class EditorRulerComponent {
             window.removeEventListener('touchmove', this.onMove);
             window.removeEventListener('touchend', this.onUp);
         };
+        this.editorService.paragraphStyle$.pipe(takeUntilDestroyed()).subscribe(x => {
+            this.firstLine.set(x.indentHanging ? -x.indentHanging : x.indentFirstLine);
+            this.leftIndent.set(x.indentLeft);
+            this.rightIndent.set(x.indentRight);
+        });
+        effect(() => (this.unit() === 'inch' ? this.buildTicksInch() : this.buildTicksCm()));
     }
-    ngAfterViewInit() {
+    afterViewInit() {
         this.recalcGeometry();
-        this.buildTicks();
-        this.rightPx.set(this.containerWidthPx - this.cmToPx(2.5));
+        this.unit() === 'inch' ? this.buildTicksInch() : this.buildTicksCm();
+        this.rightMarginPageFormatPx.set(this.containerWidthPx - this.cmToPx(2.5));
+        this.rightIndent.set(0);
     }
     onResize() {
         this.recalcGeometry();
-        this.buildTicks();
+        this.buildTicksCm();
     }
-    recalcGeometry() {
-        const rect = this.rulerContainer.nativeElement.getBoundingClientRect();
-        this.containerWidthPx = rect.width - 10; // because padding 5px
+    recalcGeometry(width = null) {
+        this.containerWidthPx = width ?? this.rulerContainer.nativeElement.getBoundingClientRect().width;
     }
     cmToPx(cm) {
         return cm * this.pxPerCm;
@@ -14267,42 +14554,80 @@ class EditorRulerComponent {
     pxToCm(px) {
         return px / this.pxPerCm;
     }
+    inchToPx(cm) {
+        return cm * this.pxPerInch;
+    }
+    pxToInch(px) {
+        return px / this.pxPerInch;
+    }
     snapPx(px) {
-        const cm = this.pxToCm(px);
-        const snapped = Math.round(cm / this.snapCm) * this.snapCm;
-        return this.cmToPx(snapped);
+        if (this.unit() === 'inch') {
+            const inch = this.pxToInch(px);
+            const snapped = Math.round(inch / this.snapInch) * this.snapInch;
+            return this.inchToPx(snapped);
+        }
+        else {
+            const cm = this.pxToCm(px);
+            const snapped = Math.round(cm / this.snapCm) * this.snapCm;
+            return this.cmToPx(snapped);
+        }
     }
-    buildTicks() {
+    buildTicksCm() {
         const totalCm = Math.ceil(this.pxToCm(this.containerWidthPx));
-        this.maxRulePosition = (totalCm - 1) * this.pxPerCm;
         const ticks = [
             {
-                position: this.cmToPx(0) + this.offsetPosition,
+                position: this.cmToPx(0),
                 major: false,
                 half: true,
                 label: null,
                 originalPaddings: -2.5
             },
             {
-                position: this.cmToPx(0.25) + this.offsetPosition,
+                position: this.cmToPx(this.snapCm),
                 major: false,
                 half: false,
                 label: null,
                 originalPaddings: -2.25
             }
         ];
-        for (let cm = 1; cm < totalCm; cm++) {
-            const position = this.cmToPx(cm) + this.offsetPosition - this.pxPerCm / 2;
+        for (let cm = 1; cm <= totalCm; cm++) {
+            const position = this.cmToPx(cm) - this.pxPerCm / 2;
             ticks.push({ position, major: true, half: false, label: Math.abs(cm - 3), originalPaddings: cm - 3 }); // -3 because we start the line with 2.5
-            if (cm < totalCm) {
+            if (cm <= totalCm) {
                 for (let i = 1; i < 4; i++) {
-                    ticks.push({
-                        position: this.cmToPx(cm + i * 0.25) + this.offsetPosition - this.pxPerCm / 2,
-                        major: false,
-                        half: i === 2,
-                        label: null,
-                        originalPaddings: cm - 3 + i * 0.25
-                    });
+                    const tickPosition = position + this.cmToPx(i * this.snapCm);
+                    if (tickPosition < this.containerWidthPx) {
+                        ticks.push({
+                            position: tickPosition,
+                            major: false,
+                            half: i === 2,
+                            label: null,
+                            originalPaddings: cm - 3 + i * this.snapCm
+                        });
+                    }
+                }
+            }
+        }
+        this.ticks = ticks;
+    }
+    buildTicksInch() {
+        const totalInch = Math.ceil(this.pxToInch(this.containerWidthPx));
+        const ticks = [];
+        for (let inch = 0; inch <= totalInch; inch++) {
+            const position = this.inchToPx(inch);
+            ticks.push({ position, major: true, half: false, label: Math.abs(inch - 1), originalPaddings: inch - 1 }); // -1
+            if (inch <= totalInch) {
+                for (let i = 1; i < 8; i++) {
+                    const tickPosition = position + this.inchToPx(i * this.snapInch);
+                    if (tickPosition < this.containerWidthPx) {
+                        ticks.push({
+                            position: tickPosition,
+                            major: false,
+                            half: i === 4,
+                            label: null,
+                            originalPaddings: inch - 1 + i * this.snapInch
+                        });
+                    }
                 }
             }
         }
@@ -14313,14 +14638,20 @@ class EditorRulerComponent {
         const pointX = this.getClientX(ev);
         const rect = this.rulerContainer.nativeElement.getBoundingClientRect();
         this.dragging = target;
-        if (target === 'left') {
-            this.dragOffsetX = pointX - rect.left - this.leftPx();
+        if (target === 'leftMarginPageFormat') {
+            this.dragOffsetX = pointX - rect.left - this.leftMarginPageFormatPx();
         }
         else if (target === 'first') {
             this.dragOffsetX = pointX - rect.left - this.firstLinePx();
         }
-        else {
-            this.dragOffsetX = pointX - rect.left - this.rightPx();
+        else if (target === 'rightMarginPageFormat') {
+            this.dragOffsetX = pointX - rect.left - this.rightMarginPageFormatPx();
+        }
+        else if (target === 'leftIndent') {
+            this.dragOffsetX = pointX - rect.left - this.leftIndentPx();
+        }
+        else if (target === 'rightIndent') {
+            this.dragOffsetX = pointX - rect.left - this.rightIndentPx();
         }
         this.showGuide.set(true);
         this.guideX.set(this.getCurrentDraggedPx());
@@ -14337,21 +14668,25 @@ class EditorRulerComponent {
     }
     getCurrentDraggedPx() {
         switch (this.dragging) {
-            case 'left':
-                return this.leftPx();
+            case 'leftMarginPageFormat':
+                return this.leftMarginPageFormatPx();
             case 'first':
                 return this.firstLinePx();
-            case 'right':
-                return this.rightPx();
+            case 'rightMarginPageFormat':
+                return this.rightMarginPageFormatPx();
+            case 'leftIndent':
+                return this.leftIndentPx();
+            case 'rightIndent':
+                return this.rightIndentPx();
         }
     }
     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", 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    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"defaultPadding * pxPerCm + offsetPosition\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"defaultPadding * pxPerCm + offsetPosition\"></div>\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]=\"leftPx()\"\n        (mousedown)=\"startDrag($event, 'left')\"\n        (touchstart)=\"startDrag($event, 'left')\" />\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]=\"rightPx()\"\n        (mousedown)=\"startDrag($event, 'right')\"\n        (touchstart)=\"startDrag($event, 'right')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX() + offsetPosition\"></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;width:804px;padding:0 5px;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:ew-resize;z-index:2;transform:translate(-25%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px}.page-marker{bottom:-6px}.left-area,.right-area{position:absolute;height:18px}.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"] }], 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 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 }); }
 }
 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], template: "<div\n    class=\"ruler-container\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"defaultPadding * pxPerCm + offsetPosition\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"defaultPadding * pxPerCm + offsetPosition\"></div>\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]=\"leftPx()\"\n        (mousedown)=\"startDrag($event, 'left')\"\n        (touchstart)=\"startDrag($event, 'left')\" />\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]=\"rightPx()\"\n        (mousedown)=\"startDrag($event, 'right')\"\n        (touchstart)=\"startDrag($event, 'right')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX() + offsetPosition\"></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;width:804px;padding:0 5px;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:ew-resize;z-index:2;transform:translate(-25%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px}.page-marker{bottom:-6px}.left-area,.right-area{position:absolute;height:18px}.left-area{left:0}.right-area{right:0}\n"] }]
-        }], propDecorators: { rulerContainer: [{
+            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"] }]
+        }], ctorParameters: () => [], propDecorators: { rulerContainer: [{
                 type: ViewChild,
                 args: ['rulerContainer', { static: true }]
             }], onResize: [{
@@ -14383,6 +14718,7 @@ class EditorComponent {
         this.clipboard = clipboard;
         this.isMobile = false;
         this.externalElementTagNames = ['APP-NODER-INPUT', 'APP-NODER-SIGNATURE', 'APP-NODER-DATEPICKER'];
+        this.rulerUnit = input.required();
         this.class = 'base-editor';
         this.subscriptions = [];
         this.sidenavComponentRef = null;
@@ -14398,7 +14734,7 @@ class EditorComponent {
     initEditor(content) {
         this.ngOnDestroy();
         this.editor = new Editor(content, this.container, this.editorService, this.regulatorService, this.commandsService, this.clipboard, this.externalElementTagNames, this.customPageWidth);
-        this.subscriptions.push(this.toggleSidenavSubscription());
+        this.subscriptions.push(this.toggleSidenavSubscription(), this.searchBarSubscription());
     }
     toggleSidenavSubscription() {
         return this.editorService.toggleSidenav$.subscribe(data => {
@@ -14423,6 +14759,17 @@ class EditorComponent {
             this.cdr.markForCheck();
         });
     }
+    searchBarSubscription() {
+        return this.editorService.displaySearchBar$.subscribe(x => {
+            this.showSearchBar = x;
+            if (this.showSearchBar) {
+                setTimeout(() => {
+                    this.searchBar?.focusInput();
+                });
+            }
+            this.cdr.markForCheck();
+        });
+    }
     removeSidenavComponent() {
         if (!this.sidenavComponentRef) {
             return;
@@ -14430,13 +14777,13 @@ class EditorComponent {
         this.componentService.removeComponent(this.sidenavComponentRef);
         this.sidenavComponentRef = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ComponentService }, { token: EditorService }, { token: i0.Injector }, { token: RegulatorService }, { token: CommandsService }, { token: i5$1.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorComponent, isStandalone: false, selector: "app-nod-editor", inputs: { isMobile: "isMobile", externalElementTagNames: "externalElementTagNames", customPageWidth: "customPageWidth", content: "content" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <app-nod-editor-ruler />\n        <div class=\"container\">\n            <div\n                #container\n                class=\"edit-container\"></div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:hidden}.container{height:100%;display:flex;justify-content:center}.drawer-container{height:100%}.drawer-mobile{width:100%}\n"], dependencies: [{ kind: "component", type: EditorRulerComponent, selector: "app-nod-editor-ruler" }, { kind: "component", type: i7.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i7.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i7.MatDrawerContent, selector: "mat-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ComponentService }, { token: EditorService }, { token: i0.Injector }, { token: RegulatorService }, { token: CommandsService }, { token: i5$3.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorComponent, isStandalone: false, selector: "app-nod-editor", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: false, isRequired: false, transformFunction: null }, externalElementTagNames: { classPropertyName: "externalElementTagNames", publicName: "externalElementTagNames", isSignal: false, isRequired: false, transformFunction: null }, customPageWidth: { classPropertyName: "customPageWidth", publicName: "customPageWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, rulerUnit: { classPropertyName: "rulerUnit", publicName: "rulerUnit", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }, { propertyName: "searchBar", first: true, predicate: EditorSearchBarComponent, descendants: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <app-nod-editor-ruler [unit]=\"rulerUnit()\" />\n        @if (showSearchBar) {\n            <app-nod-editor-search-bar />\n        }\n        <div class=\"container\">\n            <div\n                #container\n                class=\"edit-container\"></div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:hidden}.container{height:100%;display:flex;justify-content:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0}\n"], dependencies: [{ kind: "component", type: EditorRulerComponent, selector: "app-nod-editor-ruler", inputs: ["unit"] }, { kind: "component", type: EditorSearchBarComponent, selector: "app-nod-editor-search-bar" }, { kind: "component", type: i8.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i8.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i8.MatDrawerContent, selector: "mat-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nod-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <app-nod-editor-ruler />\n        <div class=\"container\">\n            <div\n                #container\n                class=\"edit-container\"></div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:hidden}.container{height:100%;display:flex;justify-content:center}.drawer-container{height:100%}.drawer-mobile{width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentService }, { type: EditorService }, { type: i0.Injector }, { type: RegulatorService }, { type: CommandsService }, { type: i5$1.Clipboard }], propDecorators: { isMobile: [{
+            args: [{ selector: 'app-nod-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <app-nod-editor-ruler [unit]=\"rulerUnit()\" />\n        @if (showSearchBar) {\n            <app-nod-editor-search-bar />\n        }\n        <div class=\"container\">\n            <div\n                #container\n                class=\"edit-container\"></div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:hidden}.container{height:100%;display:flex;justify-content:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentService }, { type: EditorService }, { type: i0.Injector }, { type: RegulatorService }, { type: CommandsService }, { type: i5$3.Clipboard }], propDecorators: { isMobile: [{
                 type: Input
             }], externalElementTagNames: [{
                 type: Input
@@ -14453,6 +14800,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }], sidenav: [{
                 type: ViewChild,
                 args: ['drawer', { static: true }]
+            }], searchBar: [{
+                type: ViewChild,
+                args: [EditorSearchBarComponent]
             }], class: [{
                 type: HostBinding,
                 args: ['class']
@@ -14493,19 +14843,21 @@ class EditorModule {
             NoderTableComponent,
             ResizerComponent,
             TableOverlayMenuComponent], imports: [CommonModule,
+            EditorRulerComponent,
+            EditorSearchBarComponent,
             MatButtonModule,
             MatDialogModule,
             MatIconModule,
-            EditorRulerComponent,
             MatSidenavModule,
             MatTooltipModule,
             ReactiveFormsModule,
             TranslateModule], exports: [EditorComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorModule, providers: [ComponentService, CustomContentService, OverlayService, RegulatorService, ExternalElementService, CommandsService], imports: [CommonModule,
+            EditorRulerComponent,
+            EditorSearchBarComponent,
             MatButtonModule,
             MatDialogModule,
             MatIconModule,
-            EditorRulerComponent,
             MatSidenavModule,
             MatTooltipModule,
             ReactiveFormsModule,
@@ -14526,10 +14878,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     ],
                     imports: [
                         CommonModule,
+                        EditorRulerComponent,
+                        EditorSearchBarComponent,
                         MatButtonModule,
                         MatDialogModule,
                         MatIconModule,
-                        EditorRulerComponent,
                         MatSidenavModule,
                         MatTooltipModule,
                         ReactiveFormsModule,
@@ -14655,60 +15008,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{ imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule, MatMenuModule, TranslateModule], selector: 'app-nod-editor-title-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    *ngIf=\"showTitle\"\n    class=\"menu-header\">\n    <div class=\"file-name\">\n        <span\n            #titleSpan\n            class=\"title\"\n            [matTooltip]=\"'NODER.LABEL.DOUBLE_CLICK_TO_RENAME' | translate\"\n            (blur)=\"onRenameTitle($event)\"\n            (keydown.enter)=\"$event.target.blur()\"\n            (click)=\"onFocus($event)\">\n            {{ title }}\n        </span>\n    </div>\n</div>\n<div class=\"editor-mode\">\n    <div class=\"circles\">\n        <div class=\"circle\"></div>\n        <div class=\"circle\"></div>\n        <div class=\"circle\"></div>\n    </div>\n    <button\n        mat-icon-button\n        [matMenuTriggerFor]=\"modeMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ modeOptions[selectedMode].icon }}\" />\n    </button>\n    <mat-menu\n        #modeMenu=\"matMenu\"\n        class=\"noder-editor-title-mobile-menu\"\n        yPosition=\"above\">\n        <ng-container *ngFor=\"let mode of modeOptions\">\n            <button\n                *ngIf=\"selectedMode !== mode.id\"\n                mat-icon-button\n                (click)=\"selectedMode = mode.id; changeMode.emit(mode.id)\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"{{ mode.icon }}\" />\n            </button>\n        </ng-container>\n    </mat-menu>\n</div>\n", styles: [":host{display:flex;position:relative;align-items:center;width:100%}.menu-header{width:calc(100% - 48px);line-height:0;z-index:1}.file-name{display:block;margin:0 8px;overflow:hidden}.title{font-size:18px;font-weight:400;line-height:normal;outline:none;display:inline-block;white-space:nowrap;min-width:1px;overflow:hidden;max-width:100%;-webkit-user-select:none;user-select:none}.title:not(:focus){text-overflow:ellipsis}.editor-mode{display:flex;flex-direction:column;position:relative}.circles{display:flex;flex-direction:row;justify-content:center;width:100%;position:absolute;top:-8px}.circle{width:4px;height:4px;border-radius:50%}.circle:not(:last-child){margin-right:5px}.mdc-icon-button{min-width:40px;min-height:40px;width:40px;height:40px;padding:8px}::ng-deep .noder-editor-title-mobile-menu{min-width:auto!important;min-height:auto!important;overflow:hidden!important}::ng-deep .noder-editor-title-mobile-menu .mat-mdc-menu-content{display:flex;flex-direction:column-reverse}::ng-deep .noder-editor-title-mobile-menu .mdc-icon-button{margin-bottom:10px}\n"] }]
         }] });
 
-class EditorSearchDialogComponent extends DestroyComponent {
-    constructor(editorService) {
-        super();
-        this.editorService = editorService;
-        this.searchControl = new FormControl('');
-        this.replaceControl = new FormControl('');
-        this.isReplace = false;
-        this.searchIteration$ = this.editorService.searchIteration$;
-    }
-    ngOnInit() {
-        this.searchControl.valueChanges
-            .pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$))
-            .subscribe(() => (this.editorService.searchOptions = { term: this.searchControl.value, skipCurrent: false, backwards: false }));
-    }
-    onClose() {
-        this.editorService.openSearchDialog = false;
-    }
-    findNext() {
-        this.editorService.searchOptions = {
-            term: this.searchControl.value,
-            skipCurrent: true,
-            backwards: false
-        };
-    }
-    findPrev() {
-        this.editorService.searchOptions = {
-            term: this.searchControl.value,
-            skipCurrent: true,
-            backwards: true
-        };
-    }
-    setReplace() {
-        this.isReplace = !this.isReplace;
-    }
-    replace() {
-        this.editorService.replace = { replaceValue: this.replaceControl.value, searchValue: this.searchControl.value };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorSearchDialogComponent, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorSearchDialogComponent, isStandalone: true, selector: "app-nod-editor-search-dialog", providers: [ExternalElementService], usesInheritance: true, ngImport: i0, template: "<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.SEARCH_FOR' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findPrev()\">\n        <mat-icon\n            fontSet=\"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<ng-container *ngIf=\"{ searchIteration: searchIteration$ | async } as data\">\n    <div\n        class=\"replace-form\"\n        *ngIf=\"isReplace\">\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>{{ '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            <span>\n                {{\n                    'NODER.COMPLEX_LABEL.OF_COUNTER'\n                        | translate: { current: data.searchIteration?.current ?? 0, total: data.searchIteration?.total ?? 0 }\n                }}\n            </span>\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</ng-container>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;padding:3px}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{display:flex}mat-form-field{padding-left:10px}.mdc-button{font-size:12px;padding:0 8px;min-width:unset}.search-options{line-height:40px}.search-options .counter{text-align:center;flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: 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$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$3.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: EditorSearchDialogComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatInputModule,
-                        MatTooltipModule,
-                        ReactiveFormsModule,
-                        TranslateModule
-                    ], providers: [ExternalElementService], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-search-dialog', template: "<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            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <button\n        type=\"button\"\n        mat-icon-button\n        (click)=\"findPrev()\">\n        <mat-icon\n            fontSet=\"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<ng-container *ngIf=\"{ searchIteration: searchIteration$ | async } as data\">\n    <div\n        class=\"replace-form\"\n        *ngIf=\"isReplace\">\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>{{ '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            <span>\n                {{\n                    'NODER.COMPLEX_LABEL.OF_COUNTER'\n                        | translate: { current: data.searchIteration?.current ?? 0, total: data.searchIteration?.total ?? 0 }\n                }}\n            </span>\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</ng-container>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;padding:3px}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{display:flex}mat-form-field{padding-left:10px}.mdc-button{font-size:12px;padding:0 8px;min-width:unset}.search-options{line-height:40px}.search-options .counter{text-align:center;flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}\n"] }]
-        }], ctorParameters: () => [{ type: EditorService }] });
-
 var EditorToolbarMode;
 (function (EditorToolbarMode) {
     EditorToolbarMode[EditorToolbarMode["Base"] = 0] = "Base";
@@ -15905,7 +16204,7 @@ class InsertTableMobileComponent {
         control.setValue(newValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InsertTableMobileComponent, deps: [{ token: EditorService }, { token: i2.FormBuilder }, { token: ToolbarCoreService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: InsertTableMobileComponent, isStandalone: true, selector: "app-nod-insert-table-mobile", ngImport: i0, template: "<div class=\"content\">\n    <div class=\"title\">{{ 'NODER.LABEL.TABLE_OPTIONS' | translate }}</div>\n    <div\n        class=\"inputs\"\n        [formGroup]=\"form\">\n        <div class=\"rows\">\n            <div class=\"input-title\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-table-rows\" />\n                {{ 'NODER.LABEL.ROWS' | translate }}:\n            </div>\n            <mat-form-field appearance=\"outline\">\n                <button\n                    mat-fab\n                    (click)=\"onChangeRows(-1)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-remove\" />\n                </button>\n                <input\n                    matInput\n                    required\n                    type=\"number\"\n                    [formControl]=\"form.controls.rows\"\n                    (change)=\"onChangeInputRow()\" />\n                <button\n                    mat-fab\n                    (click)=\"onChangeRows(1)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-add\" />\n                </button>\n                <mat-error>{{ 'NODER.LABEL.THE_ROW_IS_REQUIRED' | translate }}.</mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"columns\">\n            <div class=\"input-title\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-table-columns\" />\n                {{ 'NODER.LABEL.COLUMNS' | translate }}:\n            </div>\n            <mat-form-field appearance=\"outline\">\n                <button\n                    mat-fab\n                    (click)=\"onChangeColumns(-1)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-remove\" />\n                </button>\n                <input\n                    matInput\n                    required\n                    type=\"number\"\n                    [formControl]=\"form.controls.columns\"\n                    (change)=\"onChangeInputColumn()\" />\n                <button\n                    mat-fab\n                    (click)=\"onChangeColumns(1)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-add\" />\n                </button>\n                <mat-error>{{ 'NODER.LABEL.THE_COLUMN_IS_REQUIRED' | translate }}.</mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <div class=\"quick-select\">\n        <div class=\"quick-select-header\">\n            <div class=\"separator\"></div>\n            <div class=\"quick-select-title\">{{ 'NODER.LABEL.QUICK_SELECT' | translate }}</div>\n            <div class=\"separator\"></div>\n        </div>\n        <div class=\"selection\">\n            <ng-container *ngFor=\"let row of rows\">\n                <div class=\"row\">\n                    <ng-container *ngFor=\"let column of columns\">\n                        <div\n                            class=\"cell-container\"\n                            (click)=\"onSetTable(row, column)\">\n                            <div\n                                class=\"cell\"\n                                [class.highlighted]=\"row <= form.controls.rows.value && column <= form.controls.columns.value\"></div>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n<div class=\"actions\">\n    <button\n        mat-mini-fab\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n    </button>\n    <button\n        mat-mini-fab\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;padding:30px;justify-content:space-between;overflow:hidden}.title{font-size:16px;font-weight:500;padding-bottom:10px}.inputs{display:flex;justify-content:space-between;padding-top:10px;padding-bottom:0}.rows,.columns{display:flex;flex-direction:column;width:45%}.input-title{display:flex;align-items:center;font-size:14px;font-weight:400;padding-bottom:10px}.input-title .mat-icon{margin-right:10px}.quick-select{display:flex;flex-direction:column}.quick-select-header{display:flex;padding-bottom:20px}.quick-select-title{padding:0 10px;font-size:10px;font-weight:500;letter-spacing:1px;text-transform:uppercase}.separator{flex:1;align-self:center;border-bottom-width:1px;border-bottom-style:solid}.row{display:flex;flex-direction:row}.cell-container{width:10%;aspect-ratio:1/1;padding:2px}.cell{height:100%;width:100%;border-width:1px;border-style:solid}.mat-mdc-form-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0}.mat-mdc-form-field ::ng-deep .mat-mdc-form-field-infix{display:flex;flex-direction:row;padding:0}.mat-mdc-form-field ::ng-deep .mdc-fab{width:48px;height:48px}.mat-mdc-input-element{text-align:center}.actions{text-align:end}.actions .mdc-fab:first-child{margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$3.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.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: "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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: InsertTableMobileComponent, isStandalone: true, selector: "app-nod-insert-table-mobile", ngImport: i0, template: "<div class=\"content\">\n    <div class=\"title\">{{ 'NODER.LABEL.TABLE_OPTIONS' | translate }}</div>\n    <div\n        class=\"inputs\"\n        [formGroup]=\"form\">\n        <div class=\"rows\">\n            <div class=\"input-title\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-table-rows\" />\n                {{ 'NODER.LABEL.ROWS' | translate }}:\n            </div>\n            <mat-form-field appearance=\"outline\">\n                <button\n                    mat-fab\n                    (click)=\"onChangeRows(-1)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-remove\" />\n                </button>\n                <input\n                    matInput\n                    required\n                    type=\"number\"\n                    [formControl]=\"form.controls.rows\"\n                    (change)=\"onChangeInputRow()\" />\n                <button\n                    mat-fab\n                    (click)=\"onChangeRows(1)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-add\" />\n                </button>\n                <mat-error>{{ 'NODER.LABEL.THE_ROW_IS_REQUIRED' | translate }}.</mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"columns\">\n            <div class=\"input-title\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-table-columns\" />\n                {{ 'NODER.LABEL.COLUMNS' | translate }}:\n            </div>\n            <mat-form-field appearance=\"outline\">\n                <button\n                    mat-fab\n                    (click)=\"onChangeColumns(-1)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-remove\" />\n                </button>\n                <input\n                    matInput\n                    required\n                    type=\"number\"\n                    [formControl]=\"form.controls.columns\"\n                    (change)=\"onChangeInputColumn()\" />\n                <button\n                    mat-fab\n                    (click)=\"onChangeColumns(1)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-add\" />\n                </button>\n                <mat-error>{{ 'NODER.LABEL.THE_COLUMN_IS_REQUIRED' | translate }}.</mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <div class=\"quick-select\">\n        <div class=\"quick-select-header\">\n            <div class=\"separator\"></div>\n            <div class=\"quick-select-title\">{{ 'NODER.LABEL.QUICK_SELECT' | translate }}</div>\n            <div class=\"separator\"></div>\n        </div>\n        <div class=\"selection\">\n            <ng-container *ngFor=\"let row of rows\">\n                <div class=\"row\">\n                    <ng-container *ngFor=\"let column of columns\">\n                        <div\n                            class=\"cell-container\"\n                            (click)=\"onSetTable(row, column)\">\n                            <div\n                                class=\"cell\"\n                                [class.highlighted]=\"row <= form.controls.rows.value && column <= form.controls.columns.value\"></div>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n<div class=\"actions\">\n    <button\n        mat-mini-fab\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n    </button>\n    <button\n        mat-mini-fab\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;padding:30px;justify-content:space-between;overflow:hidden}.title{font-size:16px;font-weight:500;padding-bottom:10px}.inputs{display:flex;justify-content:space-between;padding-top:10px;padding-bottom:0}.rows,.columns{display:flex;flex-direction:column;width:45%}.input-title{display:flex;align-items:center;font-size:14px;font-weight:400;padding-bottom:10px}.input-title .mat-icon{margin-right:10px}.quick-select{display:flex;flex-direction:column}.quick-select-header{display:flex;padding-bottom:20px}.quick-select-title{padding:0 10px;font-size:10px;font-weight:500;letter-spacing:1px;text-transform:uppercase}.separator{flex:1;align-self:center;border-bottom-width:1px;border-bottom-style:solid}.row{display:flex;flex-direction:row}.cell-container{width:10%;aspect-ratio:1/1;padding:2px}.cell{height:100%;width:100%;border-width:1px;border-style:solid}.mat-mdc-form-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0}.mat-mdc-form-field ::ng-deep .mat-mdc-form-field-infix{display:flex;flex-direction:row;padding:0}.mat-mdc-form-field ::ng-deep .mdc-fab{width:48px;height:48px}.mat-mdc-input-element{text-align:center}.actions{text-align:end}.actions .mdc-fab:first-child{margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], 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.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.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: "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: InsertTableMobileComponent, decorators: [{
             type: Component,
@@ -16547,11 +16846,18 @@ class PageSetupComponent {
             this.pageSize.width = Math.round(this.pageSize.customWidth * rate);
             this.pageSize.height = Math.round(this.pageSize.customHeight * rate);
         }
+        const pageMargin = new MarginModel();
         const pageFormat = new PageFormatModel({
             pageHeight: this.pageSize.orientation == PageOrientations.Portrait ? this.pageSize.height : this.pageSize.width,
             pageWidth: this.pageSize.orientation == PageOrientations.Portrait ? this.pageSize.width : this.pageSize.height,
             unit: this.pageSize.unit,
-            pageOrientation: this.pageSize.orientation
+            pageOrientation: this.pageSize.orientation,
+            marginBottom: pageMargin.bottom,
+            marginFooter: pageMargin.footer,
+            marginHeader: pageMargin.header,
+            marginLeft: pageMargin.left,
+            marginRight: pageMargin.right,
+            marginTop: pageMargin.top
         });
         switch (this.selectedDocumentArea) {
             case DocumentAreas.SelectedText:
@@ -16589,7 +16895,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$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$3.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.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: 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PageSetupComponent, decorators: [{
             type: Component,
@@ -16740,7 +17046,7 @@ 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$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$3.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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkDialogComponent, decorators: [{
             type: Component,
@@ -16789,7 +17095,7 @@ class AddLinkMobileComponent {
         this.onApply();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkMobileComponent, deps: [{ token: EditorService }, { token: i2.FormBuilder }, { token: ToolbarCoreService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AddLinkMobileComponent, isStandalone: true, selector: "app-nod-add-link-mobile", ngImport: i0, template: "<div class=\"content\">\n    <div class=\"title\">{{ 'NODER.LABEL.LINK_OPTIONS' | translate }}</div>\n    <div\n        class=\"inputs\"\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                (keydown.enter)=\"onEnter()\"\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                (keydown.enter)=\"onEnter()\"\n                required />\n            <mat-error>{{ 'NODER.LABEL.THE_LINK_IS_REQUIRED' | translate }}.</mat-error>\n        </mat-form-field>\n    </div>\n</div>\n<div class=\"actions\">\n    <button\n        mat-mini-fab\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n    </button>\n    <button\n        mat-mini-fab\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;padding:30px;justify-content:space-between;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}.title{font-size:16px;font-weight:500}mat-form-field{width:100%}.inputs{padding-top:10px;padding-bottom:0}.actions{text-align:end}.actions .mdc-fab:first-child{margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$3.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AddLinkMobileComponent, isStandalone: true, selector: "app-nod-add-link-mobile", ngImport: i0, template: "<div class=\"content\">\n    <div class=\"title\">{{ 'NODER.LABEL.LINK_OPTIONS' | translate }}</div>\n    <div\n        class=\"inputs\"\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                (keydown.enter)=\"onEnter()\"\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                (keydown.enter)=\"onEnter()\"\n                required />\n            <mat-error>{{ 'NODER.LABEL.THE_LINK_IS_REQUIRED' | translate }}.</mat-error>\n        </mat-form-field>\n    </div>\n</div>\n<div class=\"actions\">\n    <button\n        mat-mini-fab\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n    </button>\n    <button\n        mat-mini-fab\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;padding:30px;justify-content:space-between;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}.title{font-size:16px;font-weight:500}mat-form-field{width:100%}.inputs{padding-top:10px;padding-bottom:0}.actions{text-align:end}.actions .mdc-fab:first-child{margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab]", 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: "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: AddLinkMobileComponent, decorators: [{
             type: Component,
@@ -16880,5 +17186,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, EditorSearchDialogComponent, 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, 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 };
 //# sourceMappingURL=talrace-ngx-noder.mjs.map