@talrace/ngx-noder 19.0.53 → 19.0.55

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

@@ -10250,7 +10250,7 @@ class CommentHighlightLayer extends HighlightLayer {
     }
     update(config) {
         const comments = this.session.model.comments;
-        if (!config?.isVisible || !comments?.length || !this.enabled) {
+        if (!comments?.length || !this.enabled) {
             this.element.innerHTML = '';
             return;
         }
@@ -10391,6 +10391,12 @@ class CursorLayer {
     }
 }
 
+class CustomElementInfo {
+    constructor(init) {
+        Object.assign(this, init);
+    }
+}
+
 class GrammarHighlightLayer extends HighlightLayer {
     constructor(parentEl, cssClass, session) {
         super(parentEl, cssClass, session);
@@ -10398,7 +10404,7 @@ class GrammarHighlightLayer extends HighlightLayer {
         this.errorsByParagraph = new Map();
     }
     update(config) {
-        if (!config?.isVisible || !this.errorsByParagraph.size || this.session.editorService.isViewOnly) {
+        if (!this.errorsByParagraph.size || this.session.editorService.isViewOnly) {
             this.element.innerHTML = '';
             return;
         }
@@ -10456,8 +10462,7 @@ class RenderChangesModel {
             this.scroll ||
             this.size ||
             this.text ||
-            this.dragAndDrop ||
-            this.visibilityChanged);
+            this.dragAndDrop);
     }
     constructor(fields) {
         this.cursor = false;
@@ -10473,7 +10478,6 @@ class RenderChangesModel {
         this.size = false;
         this.text = false;
         this.dragAndDrop = false;
-        this.visibilityChanged = false;
         if (!fields) {
             return;
         }
@@ -10486,12 +10490,6 @@ class RenderChangesModel {
     }
 }
 
-class CustomElementInfo {
-    constructor(init) {
-        Object.assign(this, init);
-    }
-}
-
 class SearchHighlightLayer extends HighlightLayer {
     constructor(parentEl, cssClass, session) {
         super(parentEl, cssClass, session);
@@ -10501,9 +10499,6 @@ class SearchHighlightLayer extends HighlightLayer {
         this.customElementsRanges = [];
     }
     update(config) {
-        if (!config?.isVisible) {
-            return;
-        }
         this.config = config;
         this.selectionIndex = 0;
         this.getVisibleCustomElementResults(config);
@@ -10871,10 +10866,8 @@ class Renderer extends EventEmitting {
                 endLine: 0,
                 endScreenLine: 0,
                 endScreenFullLine: 0
-            },
-            isVisible: false
+            }
         };
-        this.isVisible = false;
         this.changes = new RenderChangesModel();
         this.paragraphsAppeared = new Subject();
         this.visibilitySubject = new Subject();
@@ -10916,8 +10909,7 @@ class Renderer extends EventEmitting {
             changes.scroll ||
             changes.search ||
             changes.grammar ||
-            changes.commentHighlights ||
-            changes.visibilityChanged) {
+            changes.commentHighlights) {
             changes.apply(this.computeLayerConfig());
             DomHelper.translate(this.content, 0, -this.layerConfig.offset);
             DomHelper.setStyle(this.content.style, 'width', `${this.layerConfig.width}px`);
@@ -10949,12 +10941,6 @@ class Renderer extends EventEmitting {
         if (changes.dragAndDrop) {
             this.renderDragAndDropSelection();
         }
-        if (changes.visibilityChanged) {
-            this.renderSearchHighlights();
-            this.renderGrammarHighlights();
-            this.renderCommentHighlights();
-            this.visibilitySubject.next(this.isVisible);
-        }
         this.session.onRendered();
     }
     /**
@@ -11004,10 +10990,22 @@ class Renderer extends EventEmitting {
         }
     }
     updateCustomElementHighlights(ranges) {
-        this.searchHighlightLayer.customElementsRanges = ranges;
-        this.scheduleChanges({ search: true });
+        if (this.searchHighlightLayer.customElementsRanges.length !== ranges.length ||
+            !this.searchHighlightLayer.customElementsRanges.every(x => ranges.some(z => x.location.isEqual(z.location)))) {
+            this.searchHighlightLayer.customElementsRanges = ranges;
+            this.scheduleChanges({ search: true });
+        }
     }
     updateActiveSearchHighlight(active) {
+        if (this.searchHighlightLayer.active === active ||
+            (this.searchHighlightLayer.active instanceof Range &&
+                active instanceof Range &&
+                this.searchHighlightLayer.active.isEqual(active)) ||
+            (this.searchHighlightLayer.active instanceof CustomElementInfo &&
+                active instanceof CustomElementInfo &&
+                this.searchHighlightLayer.active.location.isEqual(active.location))) {
+            return;
+        }
         this.searchHighlightLayer.active = active;
         this.scheduleChanges({ search: true });
     }
@@ -11047,15 +11045,6 @@ class Renderer extends EventEmitting {
         this.dragAndDropSelectionLayer.marker = null;
         this.scheduleChanges({ dragAndDrop: true });
     }
-    setVisibility(isVisible) {
-        if (this.isVisible !== isVisible) {
-            this.isVisible = isVisible;
-            if (!isVisible) {
-                this.commentsLayer.clearSessionComments();
-            }
-            this.scheduleChanges({ visibilityChanged: true });
-        }
-    }
     /**
      * Triggers a full update of the text, for all the rows.
      **/
@@ -11154,8 +11143,7 @@ class Renderer extends EventEmitting {
             contentRange: new DistanceModel({ start: 0, end: displayData.paragraphs.filter(x => x.paragraphSettings).length - 1 }),
             maxHeight,
             offset: 0,
-            scrollTop: this.session.scrollTop,
-            isVisible: this.isVisible
+            scrollTop: this.session.scrollTop
         };
         return changes;
     }
@@ -11626,14 +11614,7 @@ class VirtualRenderer {
             return;
         }
         // text, scrolling and resize changes can cause the view port size to change
-        if (changes.full ||
-            changes.size ||
-            changes.text ||
-            changes.lines ||
-            changes.scroll ||
-            changes.search ||
-            changes.grammar ||
-            changes.visibilityChanged) {
+        if (changes.full || changes.size || changes.text || changes.lines || changes.scroll || changes.search || changes.grammar) {
             changes.apply(this.computeLayerConfig());
             DomHelper.translate(this.renderer.content, 0, -this.layerConfig.offset);
             DomHelper.setStyle(this.renderer.content.style, 'width', `${this.layerConfig.width}px`);
@@ -11674,9 +11655,6 @@ class VirtualRenderer {
         if (changes.dragAndDrop) {
             this.renderDragAndDropSelection();
         }
-        if (changes.visibilityChanged) {
-            this.renderSearchHighlights();
-        }
     }
     /**
      * Triggers a resize of the editor
@@ -11805,9 +11783,6 @@ class VirtualRenderer {
     updateCursor() {
         this.renderer.updateCursor();
     }
-    setVisibility(isVisible) {
-        this.renderer.setVisibility(isVisible);
-    }
     scheduleChanges(changes) {
         this.loop.schedule(0, changes);
     }
@@ -11867,6 +11842,10 @@ class VirtualRenderer {
         this.renderer.clearGrammarHighlights();
     }
     paragraphsScrolledIntoView() {
+        if (!this.layerConfig.visibleRange) {
+            this.renderer.paragraphsAppeared.next(this.renderer.session.displayData.paragraphs);
+            return;
+        }
         const paragraphs = this.renderer.session.displayData.paragraphs.slice(this.layerConfig.visibleRange.startParagraph, this.layerConfig.visibleRange.endParagraph + 1);
         this.renderer.paragraphsAppeared.next(paragraphs);
     }
@@ -11904,8 +11883,7 @@ class VirtualRenderer {
             offset: 0,
             visibleRange,
             scrollTop: this.scrollBar.scrollTop,
-            pages: visibleRange.pages,
-            isVisible: true
+            pages: visibleRange.pages
         };
         return changes;
     }
@@ -12182,7 +12160,6 @@ class RegulatorService {
         this.selectedCommentId = null;
         this.renderLoop = new RenderLoop();
         this.grammarChecker = new GrammarChecker(this.grammarService);
-        this.observer = this.initializeIntersectionObserver();
     }
     addMainSession(model, scalingRatio, container) {
         const sessionId = ++this.sessionIdIncrement;
@@ -12236,7 +12213,6 @@ class RegulatorService {
         if (this.grammarEnabled) {
             this.grammarChecker.registerSession(newSession);
         }
-        this.observer.observe(nativeElement);
         return newSession;
     }
     addEdgeSession(component, nativeElement) {
@@ -12253,14 +12229,12 @@ class RegulatorService {
         if (this.grammarEnabled) {
             this.grammarChecker.registerSession(newSession);
         }
-        this.observer.observe(nativeElement);
         return newSession;
     }
     removeSession(sessionId) {
         const index = this.sessions.findIndex(x => x.sessionId === sessionId);
         this.sessions[index].session.destroy();
         this.sessions[index].renderer.destroy();
-        this.observer.unobserve(this.sessions[index].nativeElement);
         this.sessions.splice(index, 1);
         this.grammarChecker.unregisterSession(sessionId);
     }
@@ -12518,19 +12492,6 @@ class RegulatorService {
             })
         ];
     }
-    initializeIntersectionObserver() {
-        const options = {
-            root: null,
-            rootMargin: '50px',
-            threshold: 0.01
-        };
-        return new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                const sessionId = +entry.target.getAttribute('data-session-id');
-                this.getSessionModel(sessionId)?.renderer.setVisibility(entry.isIntersecting);
-            });
-        }, options);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RegulatorService, deps: [{ token: CustomContentService }, { token: EditorService }, { token: ComponentService }, { token: GrammarService }, { token: CommentRenderService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RegulatorService }); }
 }
@@ -13717,6 +13678,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);
@@ -13731,7 +13693,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;
@@ -13996,8 +13958,7 @@ class PrintRenderer {
             maxHeight,
             offset: 0,
             pages,
-            scrollTop: 0,
-            isVisible: true
+            scrollTop: 0
         };
     }
     createContent() {
@@ -17470,10 +17431,12 @@ class EditorSearchBarComponent {
             this.searchInput?.nativeElement?.select();
         });
     }
-    findNext() {
+    findNext(event) {
+        event?.stopPropagation();
         this.editorService.goNextSearchResult();
     }
-    findPrev() {
+    findPrev(event) {
+        event.stopPropagation();
         this.editorService.goPreviousSearchResult();
     }
     setReplace() {
@@ -17483,7 +17446,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,
@@ -17496,7 +17459,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']