@talrace/ngx-noder 19.0.54 → 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

@@ -13678,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);
@@ -13692,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;
@@ -17430,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() {
@@ -17443,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,
@@ -17456,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']