@talrace/ngx-noder 19.0.54 → 19.0.56

package/assets/i18n/noder.en.json

@@ -5,7 +5,6 @@
             "INSERT_COLUMNS_TO_THE_RIGHT": "Insert {{ count }} columns to the right",
             "INSERT_ROWS_ABOVE": "Insert {{ count }} rows above",
             "INSERT_ROWS_BELOW": "Insert {{ count }} rows below",
-            "OF_COUNTER": "{{ current }} of {{ total }}",
             "REMOVE_COLUMNS": "Remove {{ count }} columns",
             "REMOVE_ROWS": "Remove {{ count }} rows"
         },
@@ -78,7 +77,6 @@
             "NEW": "New",
             "NONE": "None",
             "NO_BORDER": "No border",
-            "NO_RESULTS": "No Results",
             "NUMBERED_LIST_MENU": "Numbered List Menu",
             "ODD_PAGES_FOOTER": "Odd Pages Footer",
             "ODD_PAGES_HEADER": "Odd Pages Header",
@@ -102,14 +100,14 @@
             "REMOVE_TABLE": "Remove table",
             "RENAME": "Rename",
             "REPLACE": "Replace",
-            "REPLACE_WITH": "Replace with",
             "RIGHT": "Right",
             "RIGHT_BORDER": "Right border",
             "ROWS": "Rows",
             "SAVE": "Save",
             "SAVE_AS": "Save As",
             "SAVE_AS_TEMPLATE": "Save As Template",
-            "SEARCH_FOR": "Search for",
+            "SEARCH": "Search",
+            "SEARCH_AND_REPLACE": "Search & Replace",
             "SELECTED_TEXT": "Selected Text",
             "SELECT_ALL": "Select All",
             "SET_DEFAULT_VALUE": "Setting the initial value",

package/assets/i18n/noder.es.json

@@ -5,7 +5,6 @@
             "INSERT_COLUMNS_TO_THE_RIGHT": "Inserte {{ count }} columnas a la derecha",
             "INSERT_ROWS_ABOVE": "Inserte {{ count }} filas arriba",
             "INSERT_ROWS_BELOW": "Inserte {{ count }} filas debajo",
-            "OF_COUNTER": "{{ current }} de {{ total }}",
             "REMOVE_COLUMNS": "Eliminar columnas {{ count }} ",
             "REMOVE_ROWS": "Eliminar {{ count }} filas"
         },
@@ -78,7 +77,6 @@
             "NEW": "Nuevo",
             "NONE": "Ninguna",
             "NO_BORDER": "Sin fronteras",
-            "NO_RESULTS": "No hay resultados",
             "NUMBERED_LIST_MENU": "Menú de Lista Numerada",
             "ODD_PAGES_FOOTER": "Pie de Página de Páginas Impares",
             "ODD_PAGES_HEADER": "Encabezado de Páginas Impares",
@@ -102,14 +100,14 @@
             "REMOVE_TABLE": "Eliminar tabla",
             "RENAME": "Renombrar",
             "REPLACE": "Reemplazar",
-            "REPLACE_WITH": "Reemplazar con",
             "RIGHT": "Correcto",
             "RIGHT_BORDER": "Borde derecho",
             "ROWS": "Filas",
             "SAVE": "Guardar",
             "SAVE_AS": "Guardar Como",
             "SAVE_AS_TEMPLATE": "Guardar Como Plantilla",
-            "SEARCH_FOR": "Buscar por",
+            "SEARCH": "Buscar",
+            "SEARCH_AND_REPLACE": "Buscar y Reemplazar",
             "SELECTED_TEXT": "Texto seleccionado",
             "SELECT_ALL": "Seleccionar Todo",
             "SET_DEFAULT_VALUE": "Valor inicial",

package/assets/i18n/noder.ru.json

@@ -5,7 +5,6 @@
             "INSERT_COLUMNS_TO_THE_RIGHT": "Вставить {{ count }} столбцов справа",
             "INSERT_ROWS_ABOVE": "Вставить {{ count }} строк выше",
             "INSERT_ROWS_BELOW": "Вставить {{ count }} строк ниже",
-            "OF_COUNTER": "{{ current }} из {{ total }}",
             "REMOVE_COLUMNS": "Удалить {{ count }} столбцов",
             "REMOVE_ROWS": "Удалить {{ count }} строк"
         },
@@ -78,7 +77,6 @@
             "NEW": "Новый",
             "NONE": "Нет",
             "NO_BORDER": "Нет границы",
-            "NO_RESULTS": "Нет Результатов",
             "NUMBERED_LIST_MENU": "Меню нумерованного списка",
             "ODD_PAGES_FOOTER": "Нижний колонтитул нечетных страниц",
             "ODD_PAGES_HEADER": "Верхний колонтитул нечетных страниц",
@@ -102,14 +100,14 @@
             "REMOVE_TABLE": "Удалить таблицу",
             "RENAME": "Переименовать",
             "REPLACE": "Заменить",
-            "REPLACE_WITH": "Заменить на",
             "RIGHT": "По правому краю",
             "RIGHT_BORDER": "Правая граница",
             "ROWS": "Строки",
             "SAVE": "Сохранить",
             "SAVE_AS": "Сохранить как",
             "SAVE_AS_TEMPLATE": "Сохранить как шаблон",
-            "SEARCH_FOR": "Поиск",
+            "SEARCH": "Поиск",
+            "SEARCH_AND_REPLACE": "Найти и заменить",
             "SELECTED_TEXT": "Выбранный текст",
             "SELECT_ALL": "Выбрать все",
             "SET_DEFAULT_VALUE": "Задание начального значения",

package/fesm2022/talrace-ngx-noder.mjs

@@ -2112,6 +2112,14 @@ class ContentOperationsHelper {
     }
 }
 
+class ContentsModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class ElementModel {
     constructor(fields) {
         if (fields) {
@@ -2342,14 +2350,6 @@ class RestoreModel {
     }
 }
 
-class ContentsModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
 class TableModel {
     constructor(fields) {
         if (fields) {
@@ -2398,7 +2398,7 @@ class ContentsOperationsHelper {
             comments
         });
     }
-    static GetRelativeContentSlice(contents, startIndex, count) {
+    static GetRelativeContentSlice(contents, documentNumberings, startIndex, count) {
         const content = ContentOperationsHelper.sliceContent(contents.content, startIndex, count);
         const endIndex = startIndex + count - 1;
         const formats = FormatHelper.sliceSection(contents.formats, startIndex, endIndex).map(x => new FormatModel(x));
@@ -2419,6 +2419,8 @@ class ContentsOperationsHelper {
         IndexedElementHelper.shiftIndexes(tabs, -startIndex);
         RangeElementHelper.shiftIndexes(comments, -startIndex);
         LinkHelper.shiftIndexes(links, -startIndex);
+        const paragraphNumberingIds = new Set(paragraphs.map(x => x.paragraphStyle.numberingId).filter(id => id != null));
+        const numberings = documentNumberings.filter(x => paragraphNumberingIds.has(x.numberingId));
         return new ContentsModel({
             content,
             formats,
@@ -2429,7 +2431,8 @@ class ContentsOperationsHelper {
             breaks,
             tabs,
             links,
-            comments
+            comments,
+            numberings
         });
     }
 }
@@ -3751,6 +3754,16 @@ class NumberingOperationsHelper {
             numberings.splice(index, 1);
         }
     }
+    static insertRelative(numberings, insertNumberingId, insertNumberings, paragraphs) {
+        const oldToNewIds = new Map();
+        for (const insertNumbering of insertNumberings) {
+            oldToNewIds.set(insertNumbering.numberingId, insertNumberingId);
+            insertNumbering.numberingId = insertNumberingId;
+            numberings.push(insertNumbering);
+            insertNumberingId++;
+        }
+        this.updateParagraphNumberings(paragraphs, oldToNewIds);
+    }
     static filterUnusedIds(paragraphs, numberingIds) {
         const unusedNumberingIds = [...numberingIds];
         let index = 0;
@@ -3764,6 +3777,17 @@ class NumberingOperationsHelper {
         }
         return unusedNumberingIds;
     }
+    static updateParagraphNumberings(paragraphs, oldToNewIds) {
+        for (const paragraphStyle of paragraphs.map(x => x.paragraphStyle)) {
+            if (paragraphStyle.numberingId == null) {
+                continue;
+            }
+            const newId = oldToNewIds.get(paragraphStyle.numberingId);
+            if (newId !== undefined) {
+                paragraphStyle.numberingId = newId;
+            }
+        }
+    }
 }
 
 var Alignment;
@@ -6027,13 +6051,13 @@ class OperationsHelper {
                 }
                 case CommandType.InsertContents: {
                     const model = command.insertContents;
-                    this.insertContents(contents, model.insertIndex, model.contents);
+                    this.insertContents(contents, document.numberings, model.insertIndex, model.contents);
                     break;
                 }
                 case CommandType.ReplaceByContents: {
                     const model = command.replaceByContents;
                     this.delete(contents, model.startIndex, model.count);
-                    this.insertContents(contents, model.startIndex, model.contents);
+                    this.insertContents(contents, document.numberings, model.startIndex, model.contents);
                     break;
                 }
             }
@@ -6291,9 +6315,11 @@ class OperationsHelper {
         document.comments = document.comments.filter(x => x.commentId !== commentId);
         return comment;
     }
-    static insertContents(contents, insertIndex, insertContents) {
+    static insertContents(contents, numberings, insertIndex, insertContents) {
         const contentLength = insertContents.content.length;
         contents.content = ContentOperationsHelper.insertContent(contents.content, insertContents.content, insertIndex);
+        const insertNumberingId = NumberingOperationsHelper.generateNumberingId(numberings);
+        NumberingOperationsHelper.insertRelative(numberings, insertNumberingId, insertContents.numberings, insertContents.paragraphs);
         IndexedElementOperationsHelper.insertRelative(contents.paragraphs, insertIndex, contentLength, insertContents.paragraphs);
         IndexedElementOperationsHelper.insertRelative(contents.images, insertIndex, contentLength, insertContents.images);
         IndexedElementOperationsHelper.insertRelative(contents.tables, insertIndex, contentLength, insertContents.tables);
@@ -9728,7 +9754,7 @@ class EditSession {
         table.instance.updateTable();
     }
     insertContents(insertIndex, contents) {
-        OperationsHelper.insertContents(this.model, insertIndex, contents);
+        OperationsHelper.insertContents(this.model, this.generalProperties.numberings, insertIndex, contents);
         const endIndex = insertIndex + contents.content.length - 1;
         this.insertComponents(this.model.tables, this.customComponents.tables, NoderTableComponent, insertIndex, endIndex);
         this.insertComponents(this.model.images, this.customComponents.images, NoderImageComponent, insertIndex, endIndex);
@@ -9786,7 +9812,7 @@ class EditSession {
         const startIndex = ContentHelper.paragraphPositionToDocumentIndex(this.displayData.paragraphs, start);
         const endIndex = ContentHelper.paragraphPositionToDocumentIndex(this.displayData.paragraphs, end) - 1;
         const count = endIndex - startIndex + 1;
-        return ContentsOperationsHelper.GetRelativeContentSlice(this.model, startIndex, count);
+        return ContentsOperationsHelper.GetRelativeContentSlice(this.model, this.generalProperties.numberings, startIndex, count);
     }
     createRestoreFromSlice(start, end) {
         const startIndex = ContentHelper.paragraphToDocumentIndex(this.displayData.paragraphs, start.row, start.column);
@@ -13678,6 +13704,7 @@ class RenderingHelper {
         const components = customContentService.getComponents(customComponents, fragmentStartIndex, fragmentEndIndex);
         for (const component of components) {
             const instance = component.instance;
+            const relativeIndex = instance.insertIndex - paragraphStartIndex;
             const textBeforeElement = fragmentText.substring(0, instance.insertIndex - fragmentStartIndex);
             fragmentText = fragmentText.substring(textBeforeElement.length + 1, fragmentText.length);
             this.renderText(fragment, textStyle, textBeforeElement, wordSpacing);
@@ -13692,7 +13719,7 @@ class RenderingHelper {
                     renderedIndexes++;
                 }
             }
-            else if (instance instanceof ExternalComponent && line.customTexts?.some(x => x.index === instance.insertIndex)) {
+            else if (instance instanceof ExternalComponent && line.customTexts?.some(x => x.index === relativeIndex)) {
                 const tokens = renderedTokensInLine + renderedIndexes + additionalTokens;
                 const rendered = this.renderExternalText(fragment, textStyle, wordSpacing, instance, line, tokens, paragraphStartIndex);
                 renderedIndexes += rendered.renderedIndexes;
@@ -16133,7 +16160,7 @@ class Editor {
         this.commandsService.createCommand(SaveCommandsHelper.getInsertContentsCommand(redoModel, this.targets));
     }
     saveReplaceByContentsToHistory(redoModel) {
-        const undoSlice = ContentsOperationsHelper.GetRelativeContentSlice(this.session.model, redoModel.startIndex, redoModel.count);
+        const undoSlice = ContentsOperationsHelper.GetRelativeContentSlice(this.session.model, this.session.generalProperties.numberings, redoModel.startIndex, redoModel.count);
         const undoModel = new ReplaceByContentsModel({
             startIndex: redoModel.startIndex,
             contents: undoSlice,
@@ -17430,10 +17457,12 @@ class EditorSearchBarComponent {
             this.searchInput?.nativeElement?.select();
         });
     }
-    findNext() {
+    findNext(event) {
+        event?.stopPropagation();
         this.editorService.goNextSearchResult();
     }
-    findPrev() {
+    findPrev(event) {
+        event.stopPropagation();
         this.editorService.goPreviousSearchResult();
     }
     setReplace() {
@@ -17443,7 +17472,7 @@ class EditorSearchBarComponent {
         this.editorService.replaceCurrentSearchResult();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorSearchBarComponent, deps: [{ token: EditorService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorSearchBarComponent, isStandalone: true, selector: "app-nod-editor-search-bar", providers: [ExternalElementService], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "@let searchResultCount = searchResultCount$ | async;\n@let searchResultIndex = searchResultIndex$ | async;\n@let isViewOnly = isViewOnly$ | async;\n<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.SEARCH_FOR' | translate }}</mat-label>\n        <input\n            matInput\n            #searchInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"findPrev()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-arrow-onleft\"></mat-icon>\n        </button>\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"findNext()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-arrow-onright\"></mat-icon>\n        </button>\n    </div>\n</div>\n@if (isReplace) {\n    <div class=\"replace-form\">\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.REPLACE_WITH' | translate }}</mat-label>\n            <input\n                matInput\n                [formControl]=\"replaceControl\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                (keydown.enter)=\"replace()\" />\n        </mat-form-field>\n        <button\n            type=\"button\"\n            mat-button\n            (click)=\"replace()\">\n            {{ 'NODER.LABEL.REPLACE' | translate }}\n        </button>\n    </div>\n}\n<div class=\"search-options\">\n    <button\n        type=\"button\"\n        [disabled]=\"isViewOnly\"\n        mat-icon-button\n        matTooltip=\"Toggle Replace Mode\"\n        (click)=\"setReplace()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n    </button>\n    <div class=\"counter\">\n        @if (searchResultCount) {\n            <span>\n                {{ 'NODER.COMPLEX_LABEL.OF_COUNTER' | translate: { current: searchResultIndex, total: searchResultCount ?? 0 } }}\n            </span>\n        } @else {\n            <span>{{ 'NODER.LABEL.NO_RESULTS' | translate }}</span>\n        }\n    </div>\n    <button\n        type=\"button\"\n        mat-icon-button\n        [matTooltip]=\"'NODER.LABEL.CLOSE' | translate\"\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n    </button>\n</div>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;border-style:solid;border-radius:0 0 4px 4px;border-width:1px;border-top:none}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{margin:8px 6px 0 0;display:flex;gap:8px}mat-form-field{padding-left:10px}.mdc-button{font-size:12px;padding:0 8px;min-width:unset}.search-options{line-height:40px}.search-options .counter{text-align:center;flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.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: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorSearchBarComponent, isStandalone: true, selector: "app-nod-editor-search-bar", providers: [ExternalElementService], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "@let searchResultCount = searchResultCount$ | async;\n@let searchResultIndex = searchResultIndex$ | async;\n@let isViewOnly = isViewOnly$ | async;\n<div class=\"header\">\n    <span>\n        {{ 'NODER.LABEL.SEARCH_AND_REPLACE' | translate }}\n    </span>\n    <button\n        class=\"navigate-button close-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<div class=\"line search-form\">\n    <button\n        [disabled]=\"isViewOnly\"\n        class=\"navigate-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-down' : 'icon-arrow-big' }}\"></mat-icon>\n    </button>\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.SEARCH' | translate }}</mat-label>\n        <input\n            matInput\n            #searchInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n        <div\n            matSuffix\n            class=\"input-suffix\">\n            <span>{{ searchResultCount ? searchResultIndex : 0 }} / {{ searchResultCount ?? 0 }}</span>\n            <div class=\"divider\"></div>\n            <div>\n                <button\n                    mat-icon-button\n                    class=\"navigate-button\"\n                    (click)=\"findPrev($event)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-arrow-up\"></mat-icon>\n                </button>\n                <button\n                    mat-icon-button\n                    class=\"navigate-button\"\n                    (click)=\"findNext($event)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-arrow-down\"></mat-icon>\n                </button>\n            </div>\n        </div>\n    </mat-form-field>\n</div>\n@if (isReplace) {\n    <div class=\"replace-form\">\n        <div class=\"replace-padding\"></div>\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.REPLACE' | 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    </div>\n    <div class=\"action-buttons\">\n        <button\n            mat-button\n            class=\"action-button\"\n            (click)=\"replace()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-replace\"></mat-icon>\n            {{ 'NODER.LABEL.REPLACE' | translate }}\n        </button>\n    </div>\n}\n", styles: [":host{min-height:56px;width:388px;display:flex;flex-direction:column;gap:8px;font-size:10px;border-radius:0 0 8px 8px;border-top:none;padding:16px}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-form-field-flex{height:32px}:host ::ng-deep .mat-mdc-form-field-flex .mat-mdc-form-field-infix{min-height:unset;height:32px;display:flex}:host ::ng-deep .mat-mdc-form-field-flex .mat-mdc-form-field-infix input{font-size:12px;letter-spacing:0}:host ::ng-deep .mat-mdc-form-field-flex .mdc-floating-label.mat-mdc-floating-label:not(.mdc-floating-label--float-above){font-size:14px;top:15px}:host ::ng-deep .mat-mdc-button-persistent-ripple,:host ::ng-deep .mat-mdc-button-ripple,:host ::ng-deep .mat-focus-indicator,:host ::ng-deep .mat-mdc-button-touch-target{width:100%;height:100%}.header{display:flex;justify-content:space-between;align-items:center;font-size:12px}.navigate-button,.replace-padding{width:26px;height:26px;display:flex;justify-content:center;align-items:center;padding:0;font-size:12px;min-width:unset}.navigate-button.close-button,.replace-padding.close-button{width:20px;height:20px}.divider{height:16px;width:1px}.input-suffix{display:flex;align-items:center;gap:6px;margin-right:4px}.input-suffix span{font-size:12px;letter-spacing:0}.input-suffix div{display:flex;align-items:center}.action-buttons{display:flex;justify-content:flex-end;margin-top:8px}.action-button{font-size:12px;font-weight:400;letter-spacing:0;height:32px}.search-form,.replace-form{margin-top:8px;display:flex;align-items:center;gap:8px}mat-form-field{flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}mat-icon{font-size:18px;width:18px;height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.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: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorSearchBarComponent, decorators: [{
             type: Component,
@@ -17456,7 +17485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         MatTooltipModule,
                         ReactiveFormsModule,
                         TranslateModule
-                    ], providers: [ExternalElementService], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-search-bar', template: "@let searchResultCount = searchResultCount$ | async;\n@let searchResultIndex = searchResultIndex$ | async;\n@let isViewOnly = isViewOnly$ | async;\n<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.SEARCH_FOR' | translate }}</mat-label>\n        <input\n            matInput\n            #searchInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"findPrev()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-arrow-onleft\"></mat-icon>\n        </button>\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"findNext()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-arrow-onright\"></mat-icon>\n        </button>\n    </div>\n</div>\n@if (isReplace) {\n    <div class=\"replace-form\">\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.REPLACE_WITH' | translate }}</mat-label>\n            <input\n                matInput\n                [formControl]=\"replaceControl\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                (keydown.enter)=\"replace()\" />\n        </mat-form-field>\n        <button\n            type=\"button\"\n            mat-button\n            (click)=\"replace()\">\n            {{ 'NODER.LABEL.REPLACE' | translate }}\n        </button>\n    </div>\n}\n<div class=\"search-options\">\n    <button\n        type=\"button\"\n        [disabled]=\"isViewOnly\"\n        mat-icon-button\n        matTooltip=\"Toggle Replace Mode\"\n        (click)=\"setReplace()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n    </button>\n    <div class=\"counter\">\n        @if (searchResultCount) {\n            <span>\n                {{ 'NODER.COMPLEX_LABEL.OF_COUNTER' | translate: { current: searchResultIndex, total: searchResultCount ?? 0 } }}\n            </span>\n        } @else {\n            <span>{{ 'NODER.LABEL.NO_RESULTS' | translate }}</span>\n        }\n    </div>\n    <button\n        type=\"button\"\n        mat-icon-button\n        [matTooltip]=\"'NODER.LABEL.CLOSE' | translate\"\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n    </button>\n</div>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;border-style:solid;border-radius:0 0 4px 4px;border-width:1px;border-top:none}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{margin:8px 6px 0 0;display:flex;gap:8px}mat-form-field{padding-left:10px}.mdc-button{font-size:12px;padding:0 8px;min-width:unset}.search-options{line-height:40px}.search-options .counter{text-align:center;flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}\n"] }]
+                    ], providers: [ExternalElementService], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-search-bar', template: "@let searchResultCount = searchResultCount$ | async;\n@let searchResultIndex = searchResultIndex$ | async;\n@let isViewOnly = isViewOnly$ | async;\n<div class=\"header\">\n    <span>\n        {{ 'NODER.LABEL.SEARCH_AND_REPLACE' | translate }}\n    </span>\n    <button\n        class=\"navigate-button close-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<div class=\"line search-form\">\n    <button\n        [disabled]=\"isViewOnly\"\n        class=\"navigate-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-down' : 'icon-arrow-big' }}\"></mat-icon>\n    </button>\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.SEARCH' | translate }}</mat-label>\n        <input\n            matInput\n            #searchInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n        <div\n            matSuffix\n            class=\"input-suffix\">\n            <span>{{ searchResultCount ? searchResultIndex : 0 }} / {{ searchResultCount ?? 0 }}</span>\n            <div class=\"divider\"></div>\n            <div>\n                <button\n                    mat-icon-button\n                    class=\"navigate-button\"\n                    (click)=\"findPrev($event)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-arrow-up\"></mat-icon>\n                </button>\n                <button\n                    mat-icon-button\n                    class=\"navigate-button\"\n                    (click)=\"findNext($event)\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-arrow-down\"></mat-icon>\n                </button>\n            </div>\n        </div>\n    </mat-form-field>\n</div>\n@if (isReplace) {\n    <div class=\"replace-form\">\n        <div class=\"replace-padding\"></div>\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.REPLACE' | 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    </div>\n    <div class=\"action-buttons\">\n        <button\n            mat-button\n            class=\"action-button\"\n            (click)=\"replace()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-replace\"></mat-icon>\n            {{ 'NODER.LABEL.REPLACE' | translate }}\n        </button>\n    </div>\n}\n", styles: [":host{min-height:56px;width:388px;display:flex;flex-direction:column;gap:8px;font-size:10px;border-radius:0 0 8px 8px;border-top:none;padding:16px}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-form-field-flex{height:32px}:host ::ng-deep .mat-mdc-form-field-flex .mat-mdc-form-field-infix{min-height:unset;height:32px;display:flex}:host ::ng-deep .mat-mdc-form-field-flex .mat-mdc-form-field-infix input{font-size:12px;letter-spacing:0}:host ::ng-deep .mat-mdc-form-field-flex .mdc-floating-label.mat-mdc-floating-label:not(.mdc-floating-label--float-above){font-size:14px;top:15px}:host ::ng-deep .mat-mdc-button-persistent-ripple,:host ::ng-deep .mat-mdc-button-ripple,:host ::ng-deep .mat-focus-indicator,:host ::ng-deep .mat-mdc-button-touch-target{width:100%;height:100%}.header{display:flex;justify-content:space-between;align-items:center;font-size:12px}.navigate-button,.replace-padding{width:26px;height:26px;display:flex;justify-content:center;align-items:center;padding:0;font-size:12px;min-width:unset}.navigate-button.close-button,.replace-padding.close-button{width:20px;height:20px}.divider{height:16px;width:1px}.input-suffix{display:flex;align-items:center;gap:6px;margin-right:4px}.input-suffix span{font-size:12px;letter-spacing:0}.input-suffix div{display:flex;align-items:center}.action-buttons{display:flex;justify-content:flex-end;margin-top:8px}.action-button{font-size:12px;font-weight:400;letter-spacing:0;height:32px}.search-form,.replace-form{margin-top:8px;display:flex;align-items:center;gap:8px}mat-form-field{flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}mat-icon{font-size:18px;width:18px;height:18px}\n"] }]
         }], ctorParameters: () => [{ type: EditorService }, { type: i0.DestroyRef }], propDecorators: { searchInput: [{
                 type: ViewChild,
                 args: ['searchInput']