@koobiq/components 20.4.2 → 21.0.1

package/fesm2022/koobiq-components-search-expandable.mjs

@@ -1,73 +1,122 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, DestroyRef, ChangeDetectorRef, ElementRef, viewChild, input, numberAttribute, output, booleanAttribute, Input, ViewChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { InjectionToken, untracked, inject, DestroyRef, ElementRef, viewChild, signal, input, booleanAttribute, numberAttribute, output, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i5 from '@angular/forms';
-import { NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i1 from '@koobiq/components/button';
-import { KbqButtonModule, KbqButton } from '@koobiq/components/button';
-import { ruRULocaleData, KBQ_LOCALE_SERVICE } from '@koobiq/components/core';
-import * as i2 from '@koobiq/components/icon';
+import * as i6 from '@angular/forms';
+import { NgControl, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@koobiq/components/button';
+import { KbqButton, KbqButtonModule } from '@koobiq/components/button';
+import * as i1 from '@koobiq/components/core';
+import { ruRULocaleData, kbqLocaleConfigurationOverrideProvider, KbqLocaleOverridesDirective, KBQ_A11Y_LOCALE_CONFIGURATION, ErrorStateMatcher, kbqOptionalNumberAttribute } from '@koobiq/components/core';
+import * as i3 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
-import * as i3 from '@koobiq/components/input';
-import { KbqInputModule, KbqInput } from '@koobiq/components/input';
-import * as i6 from '@koobiq/components/tooltip';
+import * as i4 from '@koobiq/components/input';
+import { KbqInput, KbqInputModule } from '@koobiq/components/input';
+import * as i7 from '@koobiq/components/tooltip';
 import { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
-import { BehaviorSubject, distinctUntilChanged, filter, debounceTime } from 'rxjs';
-import { map } from 'rxjs/operators';
-import * as i4 from '@koobiq/components/form-field';
+import { Subject, filter, timer } from 'rxjs';
+import { switchMap, map, takeUntil } from 'rxjs/operators';
+import * as i5 from '@koobiq/components/form-field';
 
 /** default configuration of search-expandable */
-const KBQ_SEARCH_EXPANDABLE_DEFAULT_CONFIGURATION = ruRULocaleData.searchExpandable;
+const KBQ_SEARCH_EXPANDABLE_DEFAULT_LOCALE_CONFIGURATION = ruRULocaleData.searchExpandable;
 /** Injection Token for providing configuration of search-expandable */
-const KBQ_SEARCH_EXPANDABLE_CONFIGURATION = new InjectionToken('KbqSearchExpandableConfiguration');
+const KBQ_SEARCH_EXPANDABLE_LOCALE_CONFIGURATION = new InjectionToken('KbqSearchExpandableLocaleConfiguration', { factory: () => KBQ_SEARCH_EXPANDABLE_DEFAULT_LOCALE_CONFIGURATION });
+/**
+ * Utility provider for `KBQ_SEARCH_EXPANDABLE_LOCALE_CONFIGURATION`. Only the strings you pass are overridden; the
+ * rest keep following the active locale.
+ */
+const kbqSearchExpandableLocaleConfigurationProvider = (configuration) => kbqLocaleConfigurationOverrideProvider('searchExpandable', configuration);
+/** @deprecated Use {@link KBQ_SEARCH_EXPANDABLE_DEFAULT_LOCALE_CONFIGURATION}. Will be removed in 22.0.0. */
+const KBQ_SEARCH_EXPANDABLE_DEFAULT_CONFIGURATION = KBQ_SEARCH_EXPANDABLE_DEFAULT_LOCALE_CONFIGURATION;
+/** @deprecated Use {@link KBQ_SEARCH_EXPANDABLE_LOCALE_CONFIGURATION}. Will be removed in 22.0.0. */
+const KBQ_SEARCH_EXPANDABLE_CONFIGURATION = KBQ_SEARCH_EXPANDABLE_LOCALE_CONFIGURATION;
 const defaultValue = '';
 const defaultEmitValueTimeout = 200;
+/**
+ * Resolves the error state of the rendered field against the control the consumer bound, not against
+ * the component's own validator-free control the input is wired to. Delegates to the ambient matcher so
+ * a consumer-provided `ErrorStateMatcher` keeps deciding *when* the errors are shown.
+ */
+class BoundControlErrorStateMatcher {
+    constructor(matcher, boundControl) {
+        this.matcher = matcher;
+        this.boundControl = boundControl;
+    }
+    isErrorState(_control, form) {
+        return this.matcher.isErrorState(this.boundControl(), form);
+    }
+}
 class KbqSearchExpandable {
-    /** Tooltip text for the search button. When set, overrides localeData.tooltip */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** state of component. */
+    get isOpened() {
+        return this.openedState();
+    }
+    set isOpened(value) {
+        this.openedState.set(value);
+    }
+    /** Tooltip text for the search button. When set, overrides the locale tooltip */
     get tooltipText() {
-        return this._tooltipText ?? this.localeData?.tooltip;
+        return this._tooltipText ?? this.localeConfiguration().tooltip;
     }
     set tooltipText(value) {
         this._tooltipText = value;
     }
     /** Placeholder for input when expanded */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get placeholder() {
-        return this._placeholder ?? this.localeData?.placeholder;
+        return this._placeholder ?? this.localeConfiguration().placeholder;
     }
     set placeholder(value) {
         this._placeholder = value;
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Whether the component is disabled. Also set by the bound control through `setDisabledState`. */
     get disabled() {
-        return this._disabled;
+        return this.disabledState();
     }
     set disabled(value) {
-        this._disabled = value;
-        if (this._disabled) {
+        this.disabledState.set(value);
+        // `emitEvent: false`: `disable()`/`enable()` re-emit the current value, which would restart the
+        // debounce and emit a value the user never typed.
+        if (value) {
+            this.control.disable({ emitEvent: false });
             this.stopFocusMonitor();
         }
         else {
-            this.runFocusMonitor();
+            this.control.enable({ emitEvent: false });
+            untracked(() => this.runFocusMonitor());
         }
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Tab index of the collapsed button and of the expanded input. Always `-1` while disabled. */
     get tabIndex() {
         return this.disabled ? -1 : this._tabIndex;
     }
     set tabIndex(value) {
         this._tabIndex = value;
     }
-    /** localized data
-     * @docs-private */
-    get localeData() {
-        return this.configuration;
+    ngOnChanges(changes) {
+        // A bound input is handed to its member, a bound `undefined` as the member's default; unbound, it leaves
+        // what code wrote.
+        if (changes['isOpenedInput']) {
+            const isOpened = this.isOpenedInput();
+            // A form directive on the element writes its value before this hook runs, and expands the field when the
+            // value is not empty: a first binding of `false` must not collapse it again.
+            if (isOpened !== undefined && (isOpened || !changes['isOpenedInput'].firstChange)) {
+                this.isOpened = isOpened;
+            }
+        }
+        if (changes['tooltipTextInput']) {
+            this.tooltipText = this.tooltipTextInput() ?? null;
+        }
+        if (changes['placeholderInput']) {
+            this.placeholder = this.placeholderInput() ?? null;
+        }
+        if (changes['disabledInput']) {
+            const disabled = this.disabledInput();
+            if (disabled !== undefined)
+                this.disabled = disabled;
+        }
+        if (changes['tabIndexInput'])
+            this.tabIndex = this.tabIndexInput() ?? 0;
     }
     constructor() {
         /** @docs-private */
@@ -75,40 +124,80 @@ class KbqSearchExpandable {
         /** @docs-private */
         this.focusMonitor = inject(FocusMonitor);
         /** @docs-private */
-        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
-        /** @docs-private */
         this.destroyRef = inject(DestroyRef);
         /** @docs-private */
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        /** @docs-private */
         this.nativeElement = inject(ElementRef).nativeElement;
-        this.externalConfiguration = inject(KBQ_SEARCH_EXPANDABLE_CONFIGURATION, { optional: true });
-        this.tooltip = viewChild(KbqTooltipTrigger, ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
-        /** Current value in input. */
-        this.value = new BehaviorSubject(defaultValue);
+        this.carrier = inject(KbqLocaleOverridesDirective, { self: true });
+        /**
+         * Accessible names of the icon-only controls this component renders itself.
+         *
+         * @docs-private
+         */
+        this.a11yLocaleConfiguration = this.carrier.read('a11y', KBQ_A11Y_LOCALE_CONFIGURATION);
+        /** Strings currently rendered by the component. */
+        this.localeConfiguration = this.carrier.read('searchExpandable', KBQ_SEARCH_EXPANDABLE_LOCALE_CONFIGURATION);
+        this.input = viewChild(KbqInput, ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
+        this.button = viewChild(KbqButton, ...(ngDevMode ? [{ debugName: "button" }] : /* istanbul ignore next */ []));
+        this.tooltip = viewChild(KbqTooltipTrigger, ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        /**
+         * Control backing the expanded input. Owning it — rather than binding the consumer's own control to
+         * the input — keeps every write to the consumer's model going through the debounced pipeline below,
+         * and keeps a programmatic write from being echoed back as a user edit.
+         *
+         * @docs-private
+         */
+        this.control = new FormControl(defaultValue, { nonNullable: true });
+        /**
+         * Keeps the field's invalid state — and the `aria-invalid` derived from it — following the bound
+         * control, which is the only one the consumer's validators run on.
+         *
+         * @docs-private
+         */
+        this.errorStateMatcher = new BoundControlErrorStateMatcher(inject(ErrorStateMatcher), () => this.ngControl?.control ?? null);
+        /** Icon of the collapsed button and of the expanded field's prefix. */
+        this.searchIconName = 'kbq-magnifying-glass_16';
+        /** Current value in input. A write reaches the field, and the bound control once `emitValueTimeout` passes. */
+        this.value = signal(defaultValue, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.lastFocusOrigin = null;
         /** Suppress the automatic input focus once — set when the component auto-opens from a model value. */
         this.suppressInputFocus = false;
-        /** state of component. */
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
-        this.isOpened = false;
+        /** Whether the expanded input was rendered on the previous change detection pass. */
+        this.inputRendered = false;
+        /** Whether the collapsed button was rendered on the previous change detection pass. */
+        this.buttonRendered = false;
+        /** Cancels a pending debounced emission once the value has been emitted (or reset) through another path. */
+        this.cancelPendingEmit = new Subject();
+        this.focusMonitorSubscription = null;
+        this.openedState = signal(false, ...(ngDevMode ? [{ debugName: "openedState" }] : /* istanbul ignore next */ []));
         /** Emit event by enter or not. Default is false */
-        this.isEmitValueByEnterEnabled = input(false, ...(ngDevMode ? [{ debugName: "isEmitValueByEnterEnabled" }] : []));
+        this.isEmitValueByEnterEnabled = input(false, { ...(ngDevMode ? { debugName: "isEmitValueByEnterEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Timeout in milliseconds for emit event. The default value is taken from defaultEmitValueTimeout */
-        this.emitValueTimeout = input(defaultEmitValueTimeout, ...(ngDevMode ? [{ debugName: "emitValueTimeout", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-        this._placeholder = this.localeData?.placeholder;
-        this._disabled = false;
+        this.emitValueTimeout = input(defaultEmitValueTimeout, { ...(ngDevMode ? { debugName: "emitValueTimeout" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this._placeholder = null;
+        // A signal: `setDisabledState` reaches the setter from the forms API, outside any binding of this view.
+        this.disabledState = signal(false, ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
         this._tabIndex = 0;
         /** Event emitted when the search has been toggled. */
         this.isOpenedChange = output();
         this.lastEmittedValue = defaultValue;
         /** @docs-private */
+        this.isOpenedInput = input(undefined, { ...(ngDevMode ? { debugName: "isOpenedInput" } : /* istanbul ignore next */ {}), alias: 'isOpened',
+            transform: booleanAttribute });
+        /** @docs-private */
+        this.tooltipTextInput = input(undefined, { ...(ngDevMode ? { debugName: "tooltipTextInput" } : /* istanbul ignore next */ {}), alias: 'tooltipText' });
+        /** @docs-private */
+        this.placeholderInput = input(undefined, { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        /** @docs-private */
+        this.tabIndexInput = input(undefined, { ...(ngDevMode ? { debugName: "tabIndexInput" } : /* istanbul ignore next */ {}), alias: 'tabIndex',
+            transform: kbqOptionalNumberAttribute });
+        /** @docs-private */
+        this.onChange = () => { };
+        /** @docs-private */
         this.onTouch = () => { };
-        this.updateLocaleParams = () => {
-            this.configuration = this.externalConfiguration || this.localeService?.getParams('searchExpandable');
-            this.changeDetectorRef.markForCheck();
-        };
         this.emitValue = (value, forced = false) => {
             if (value !== this.lastEmittedValue || forced) {
                 this.onChange(value);
@@ -119,45 +208,70 @@ class KbqSearchExpandable {
             throw Error(`kbq-search-expandable must be used with the [formControl], [formControlName] or [(ngModel)].`);
         }
         this.ngControl.valueAccessor = this;
-        this.ngControl.valueChanges?.pipe(takeUntilDestroyed()).subscribe((value) => this.value.next(value));
-        this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(this.updateLocaleParams);
-        if (!this.localeService) {
-            this.initDefaultParams();
-        }
-        this.value
-            .pipe(distinctUntilChanged(), filter(() => !this.isEmitValueByEnterEnabled()), debounceTime(this.emitValueTimeout()), takeUntilDestroyed(this.destroyRef))
-            .subscribe(this.emitValue);
+        // `value` predates the internal control and stays part of the public API: writes into it must
+        // still reach the field, and reads must still observe the current value. Both directions are
+        // guarded on the current value, so the pair cannot loop.
+        effect(() => {
+            const value = this.value();
+            untracked(() => {
+                if (this.control.value !== value) {
+                    this.control.setValue(value);
+                }
+            });
+        });
+        this.control.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => this.value.set(value));
+        this.control.valueChanges
+            .pipe(filter(() => !this.isEmitValueByEnterEnabled()), 
+        // No `distinctUntilChanged()` here: it remembers what the *field* last held, which a
+        // programmatic write (`emitEvent: false`) and a close silently invalidate — retyping the
+        // value the model was just reset from would then be swallowed forever. `emitValue` guards
+        // on the last value actually handed to the consumer, which every path keeps in sync.
+        //
+        // `switchMap` over a `timer` rather than `debounceTime`: the timeout is read per value, so
+        // `[emitValueTimeout]` keeps working after Angular has set the inputs, and `takeUntil` lets
+        // an explicit emission (Enter, close) drop a pending one that would otherwise land
+        // afterwards and overwrite the value that was just emitted.
+        switchMap((value) => timer(this.emitValueTimeout()).pipe(map(() => value), takeUntil(this.cancelPendingEmit))), takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => this.emitValue(value));
     }
     ngAfterViewInit() {
         this.runFocusMonitor();
-        this.button.changes
-            .pipe(filter((queryList) => queryList.length), map((queryList) => queryList.first), takeUntilDestroyed(this.destroyRef))
-            .subscribe((button) => {
-            const tooltip = this.tooltip();
-            if (tooltip) {
-                tooltip.disabled = true;
-            }
-            this.focusMonitor.focusVia(button.elementRef.nativeElement, this.lastFocusOrigin);
-            if (tooltip) {
-                // Back to what the template binds, not `false`.
-                tooltip.disabled = this.disabled;
-            }
-        });
-        this.input.changes
-            .pipe(filter((queryList) => queryList.length), map((queryList) => queryList.first), takeUntilDestroyed(this.destroyRef))
-            .subscribe((input) => {
+        // The first render is a page load rather than an expand or a collapse, so it only seeds what
+        // the focus handoffs below compare against.
+        this.inputRendered = !!this.input();
+        this.buttonRendered = !!this.button();
+        // When the component starts opened (e.g. a seeded formControl value), the input is present on
+        // first render and no expand follows to consume the flag — clear it so later user-initiated
+        // opens focus the input as usual.
+        this.suppressInputFocus = false;
+    }
+    /**
+     * Focus handoffs: the input takes focus when the field expands, the collapsed button takes it back
+     * when the field closes.
+     *
+     * This runs from `ngAfterViewChecked` rather than from an `effect()` on the queries, because view
+     * effects are flushed *before* view queries are refreshed within a change detection pass — an
+     * effect would always move focus one pass late.
+     *
+     * @docs-private
+     */
+    ngAfterViewChecked() {
+        const inputControl = this.input();
+        const toggleButton = this.button();
+        const inputWasRendered = this.inputRendered;
+        const buttonWasRendered = this.buttonRendered;
+        this.inputRendered = !!inputControl;
+        this.buttonRendered = !!toggleButton;
+        if (toggleButton && !buttonWasRendered) {
+            this.restoreFocusToButton(toggleButton);
+        }
+        if (inputControl && !inputWasRendered) {
             if (this.suppressInputFocus) {
                 this.suppressInputFocus = false;
             }
             else {
-                input.focus();
+                inputControl.focus();
             }
-        });
-        // When the component starts opened (e.g. a seeded formControl value), the input is present on
-        // first render and `input.changes` never fires to consume the flag — clear it so later
-        // user-initiated opens focus the input as usual.
-        if (this.input.length) {
-            this.suppressInputFocus = false;
         }
     }
     ngOnDestroy() {
@@ -173,7 +287,22 @@ class KbqSearchExpandable {
     }
     /** Implemented as part of ControlValueAccessor. */
     writeValue(value) {
-        this.value.next(value || defaultValue);
+        untracked(() => this.applyValue(value));
+    }
+    /** Body of `writeValue()`. */
+    applyValue(value) {
+        const nextValue = value || defaultValue;
+        // The model supersedes whatever the user was typing: without this, an emission scheduled by the
+        // keystrokes that preceded the write lands afterwards and puts the replaced query back.
+        this.cancelPendingEmit.next();
+        // The consumer's model is the source of truth on this path: recording it keeps `emitValue` from
+        // re-emitting a value the model already holds, and lets it emit a value the user retypes after
+        // the model was changed from the outside.
+        this.lastEmittedValue = nextValue;
+        // `emitEvent: false` keeps a programmatic write out of the debounced pipeline — feeding it back
+        // through `onChange` would mark the consumer's control dirty and double-fire its `valueChanges`.
+        this.control.setValue(nextValue, { emitEvent: false });
+        this.value.set(nextValue);
         // Expand automatically when the model already holds a value, without stealing focus —
         // unless focus is already inside the component (e.g. on the collapsed toggle button
         // that's about to be removed from the DOM), in which case let it move to the input.
@@ -187,10 +316,41 @@ class KbqSearchExpandable {
         this.disabled = isDisabled;
     }
     toggle() {
-        if (this.disabled)
+        // Untracked, as `writeValue()` and the `disabled` setter: called from a consumer's `effect()`, the state read
+        // on the way — `isOpened`, `disabled`, the tooltip — would make the effect run again on every open and close.
+        untracked(() => {
+            if (this.disabled)
+                return;
+            this.tooltip()?.hide();
+            this.setOpened(!this.isOpened);
+        });
+    }
+    /**
+     * Emits the typed value straight away when `isEmitValueByEnterEnabled` is set — the only path that
+     * emits in that mode, since the debounced pipeline is filtered out.
+     *
+     * @docs-private
+     */
+    onEnter(event) {
+        if (!this.isEmitValueByEnterEnabled())
             return;
-        this.tooltip()?.hide();
-        this.setOpened(!this.isOpened);
+        // Angular calls `preventDefault()` only for a handler that returns literal `false`, so without this
+        // an Enter inside a native `<form>` would submit it on top of the emission it has just made.
+        event.preventDefault();
+        this.cancelPendingEmit.next();
+        this.emitValue(this.control.value);
+    }
+    /**
+     * Collapses the field on `Escape`. On `keydown` and spent, so that a container closing on the key, such as a
+     * modal, stays open.
+     *
+     * @internal
+     */
+    onEscape(event) {
+        if (this.disabled || !this.isOpened)
+            return;
+        event.preventDefault();
+        this.toggle();
     }
     setOpened(open) {
         if (this.disabled || this.isOpened === open)
@@ -199,31 +359,50 @@ class KbqSearchExpandable {
         if (!open) {
             // Never let a stale suppress-flag survive a close.
             this.suppressInputFocus = false;
-            this.value.next(defaultValue);
+            // An emission scheduled by the keystrokes that preceded the close would put the discarded
+            // query back into the bound control right after the reset.
+            this.cancelPendingEmit.next();
+            // `emitEvent: false`: the reset reaches the consumer through the forced emit below, so
+            // routing it through the debounce as well would only schedule a redundant no-op emission.
+            this.control.setValue(defaultValue, { emitEvent: false });
+            this.value.set(defaultValue);
             // Force the emit — closing must always synchronize the bound control to the reset
             // value, rather than relying on the debounce to eventually settle (it can be raced
             // by a value pushed just before close, silently leaving the control at a stale value).
             this.emitValue(defaultValue, true);
         }
         this.isOpenedChange.emit(this.isOpened);
-        // Ensure the OnPush view re-renders for callers that mutate isOpened from outside this
-        // component's own template (e.g. a parent-owned button), whose click marks the parent —
-        // not this component — dirty.
-        this.changeDetectorRef.markForCheck();
     }
-    initDefaultParams() {
-        this.configuration = KBQ_SEARCH_EXPANDABLE_DEFAULT_CONFIGURATION;
+    /** Moves focus back onto the collapsed button, keeping its tooltip from opening on the way. */
+    restoreFocusToButton(button) {
+        const tooltip = this.tooltip();
+        if (tooltip) {
+            tooltip.disabled = true;
+        }
+        this.focusMonitor.focusVia(button.elementRef.nativeElement, this.lastFocusOrigin);
+        if (tooltip) {
+            // Back to what the template binds, not `false`.
+            tooltip.disabled = this.disabled;
+        }
     }
     runFocusMonitor() {
-        this.focusMonitor.monitor(this.nativeElement, true).subscribe((origin) => (this.lastFocusOrigin = origin));
+        // `FocusMonitor.monitor()` hands back the same subject for an already-monitored element, so a
+        // second subscription would double every notification; a disabled component is not monitored.
+        if (this.disabled || this.focusMonitorSubscription)
+            return;
+        this.focusMonitorSubscription = this.focusMonitor
+            .monitor(this.nativeElement, true)
+            .subscribe((origin) => (this.lastFocusOrigin = origin));
     }
     stopFocusMonitor() {
+        this.focusMonitorSubscription?.unsubscribe();
+        this.focusMonitorSubscription = null;
         this.focusMonitor.stopMonitoring(this.nativeElement);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSearchExpandable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqSearchExpandable, isStandalone: true, selector: "kbq-search-expandable", inputs: { isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, isEmitValueByEnterEnabled: { classPropertyName: "isEmitValueByEnterEnabled", publicName: "isEmitValueByEnterEnabled", isSignal: true, isRequired: false, transformFunction: null }, emitValueTimeout: { classPropertyName: "emitValueTimeout", publicName: "emitValueTimeout", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute } }, outputs: { isOpenedChange: "isOpenedChange" }, host: { properties: { "class.kbq-search-expandable_opened": "isOpened" }, classAttribute: "kbq-search-expandable" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: KbqTooltipTrigger, descendants: true, isSignal: true }, { propertyName: "input", predicate: KbqInput, descendants: true }, { propertyName: "button", predicate: KbqButton, descendants: true }], ngImport: i0, template: "@if (!isOpened) {\n    <button\n        type=\"button\"\n        kbq-button\n        class=\"kbq-search-expandable__button\"\n        [kbqTooltip]=\"tooltipText\"\n        [color]=\"'contrast'\"\n        [kbqStyle]=\"'transparent'\"\n        [kbqTooltipDisabled]=\"disabled\"\n        [tabIndex]=\"tabIndex\"\n        [disabled]=\"disabled\"\n        (click)=\"toggle()\"\n    >\n        <i kbq-icon=\"kbq-magnifying-glass_16\"></i>\n    </button>\n} @else {\n    <kbq-form-field class=\"kbq-search-expandable__search\">\n        <i kbqPrefix kbq-icon=\"kbq-magnifying-glass_16\"></i>\n\n        <input\n            kbqInput\n            name=\"value\"\n            type=\"text\"\n            autocomplete=\"off\"\n            [tabIndex]=\"tabIndex\"\n            [placeholder]=\"placeholder\"\n            [formControl]=\"$any(ngControl?.control)\"\n            (blur)=\"onTouch()\"\n            (keyup.escape)=\"toggle()\"\n        />\n\n        <i\n            kbqSuffix\n            kbq-icon-button=\"kbq-circle-xmark_16\"\n            [disabled]=\"disabled\"\n            (click)=\"toggle()\"\n            (keyup.enter)=\"toggle()\"\n        ></i>\n    </kbq-form-field>\n}\n", styles: [".kbq-search-expandable{display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;min-width:0;min-height:0}.kbq-search-expandable__search .kbq-icon-button.kbq-suffix{display:flex;align-items:center;justify-content:center;border-radius:var(--kbq-size-xxs);height:var(--kbq-size-xxl)}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "component", type: i2.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["size", "small", "kbq-icon-button", "tabindex", "disabled"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "component", type: i4.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i4.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i4.KbqSuffix, selector: "[kbqSuffix]" }, { kind: "directive", type: i4.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i6.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipModifier", "kbqTooltipHeader"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSearchExpandable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqSearchExpandable, isStandalone: true, selector: "kbq-search-expandable", inputs: { isEmitValueByEnterEnabled: { classPropertyName: "isEmitValueByEnterEnabled", publicName: "isEmitValueByEnterEnabled", isSignal: true, isRequired: false, transformFunction: null }, emitValueTimeout: { classPropertyName: "emitValueTimeout", publicName: "emitValueTimeout", isSignal: true, isRequired: false, transformFunction: null }, isOpenedInput: { classPropertyName: "isOpenedInput", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null }, tooltipTextInput: { classPropertyName: "tooltipTextInput", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tabIndexInput: { classPropertyName: "tabIndexInput", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpenedChange: "isOpenedChange" }, host: { properties: { "class.kbq-search-expandable_opened": "isOpened" }, classAttribute: "kbq-search-expandable" }, viewQueries: [{ propertyName: "input", first: true, predicate: KbqInput, descendants: true, isSignal: true }, { propertyName: "button", first: true, predicate: KbqButton, descendants: true, isSignal: true }, { propertyName: "tooltip", first: true, predicate: KbqTooltipTrigger, descendants: true, isSignal: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: "@if (!isOpened) {\n    <button\n        type=\"button\"\n        kbq-button\n        class=\"kbq-search-expandable__button\"\n        [attr.aria-label]=\"tooltipText\"\n        [kbqTooltip]=\"tooltipText\"\n        [color]=\"'contrast'\"\n        [kbqStyle]=\"'transparent'\"\n        [kbqTooltipDisabled]=\"disabled\"\n        [tabIndex]=\"tabIndex\"\n        [disabled]=\"disabled\"\n        (click)=\"toggle()\"\n    >\n        <i [kbq-icon]=\"searchIconName\"></i>\n    </button>\n} @else {\n    <kbq-form-field class=\"kbq-search-expandable__search\">\n        <i kbqPrefix [kbq-icon]=\"searchIconName\"></i>\n\n        <input\n            kbqInput\n            type=\"text\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"placeholder\"\n            [tabIndex]=\"tabIndex\"\n            [placeholder]=\"placeholder\"\n            [formControl]=\"control\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            (blur)=\"onTouch()\"\n            (keydown.escape)=\"onEscape($event)\"\n            (keydown.enter)=\"onEnter($event)\"\n        />\n\n        <button\n            type=\"button\"\n            kbqSuffix\n            kbq-icon-button=\"kbq-circle-xmark_16\"\n            [attr.aria-label]=\"a11yLocaleConfiguration().close\"\n            [disabled]=\"disabled\"\n            (click)=\"toggle()\"\n        ></button>\n    </kbq-form-field>\n}\n", styles: [".kbq-search-expandable{display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;min-width:0;min-height:0}.kbq-search-expandable__search .kbq-icon-button.kbq-suffix{display:flex;align-items:center;justify-content:center;border-radius:var(--kbq-search-expandable-close-button-border-radius)}@supports (corner-shape: squircle){.kbq-search-expandable__search .kbq-icon-button.kbq-suffix{corner-shape:squircle;border-radius:clamp(var(--kbq-search-expandable-close-button-border-radius) * 1.85,var(--kbq-search-expandable-close-button-border-radius) * 2.3 - 3.6px,var(--kbq-search-expandable-close-button-border-radius) * 2)}}.kbq-search-expandable__search .kbq-icon-button.kbq-suffix{height:var(--kbq-search-expandable-close-button-size)}\n", ":where(.kbq-search-expandable){--kbq-search-expandable-close-button-size: var(--kbq-size-xxl);--kbq-search-expandable-close-button-border-radius: var(--kbq-size-xxs)}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "component", type: i3.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["size", "kbq-icon-button", "tabindex", "disabled"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i5.KbqSuffix, selector: "[kbqSuffix]", exportAs: ["kbqSuffix"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i7.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "kbqTrigger", "hideWithTimeout", "kbqEnterDelay", "kbqLeaveDelay", "kbqRelativeToPointer", "kbqRelativeToCaret", "kbqRelativeToCaretVertical", "kbqTooltip", "kbqTooltipHeader", "kbqTooltipModifier", "kbqTooltipContext", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipDisabled", "kbqPlacementPriority", "kbqPlacement", "kbqVisible"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSearchExpandable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSearchExpandable, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-search-expandable', imports: [
                         KbqButtonModule,
@@ -235,34 +414,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-search-expandable',
                         '[class.kbq-search-expandable_opened]': 'isOpened'
-                    }, template: "@if (!isOpened) {\n    <button\n        type=\"button\"\n        kbq-button\n        class=\"kbq-search-expandable__button\"\n        [kbqTooltip]=\"tooltipText\"\n        [color]=\"'contrast'\"\n        [kbqStyle]=\"'transparent'\"\n        [kbqTooltipDisabled]=\"disabled\"\n        [tabIndex]=\"tabIndex\"\n        [disabled]=\"disabled\"\n        (click)=\"toggle()\"\n    >\n        <i kbq-icon=\"kbq-magnifying-glass_16\"></i>\n    </button>\n} @else {\n    <kbq-form-field class=\"kbq-search-expandable__search\">\n        <i kbqPrefix kbq-icon=\"kbq-magnifying-glass_16\"></i>\n\n        <input\n            kbqInput\n            name=\"value\"\n            type=\"text\"\n            autocomplete=\"off\"\n            [tabIndex]=\"tabIndex\"\n            [placeholder]=\"placeholder\"\n            [formControl]=\"$any(ngControl?.control)\"\n            (blur)=\"onTouch()\"\n            (keyup.escape)=\"toggle()\"\n        />\n\n        <i\n            kbqSuffix\n            kbq-icon-button=\"kbq-circle-xmark_16\"\n            [disabled]=\"disabled\"\n            (click)=\"toggle()\"\n            (keyup.enter)=\"toggle()\"\n        ></i>\n    </kbq-form-field>\n}\n", styles: [".kbq-search-expandable{display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;min-width:0;min-height:0}.kbq-search-expandable__search .kbq-icon-button.kbq-suffix{display:flex;align-items:center;justify-content:center;border-radius:var(--kbq-size-xxs);height:var(--kbq-size-xxl)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { input: [{
-                type: ViewChildren,
-                args: [KbqInput]
-            }], button: [{
-                type: ViewChildren,
-                args: [KbqButton]
-            }], tooltip: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqTooltipTrigger), { isSignal: true }] }], isOpened: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], isEmitValueByEnterEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEmitValueByEnterEnabled", required: false }] }], emitValueTimeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitValueTimeout", required: false }] }], tooltipText: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], tabIndex: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], isOpenedChange: [{ type: i0.Output, args: ["isOpenedChange"] }] } });
+                    }, hostDirectives: [
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ], template: "@if (!isOpened) {\n    <button\n        type=\"button\"\n        kbq-button\n        class=\"kbq-search-expandable__button\"\n        [attr.aria-label]=\"tooltipText\"\n        [kbqTooltip]=\"tooltipText\"\n        [color]=\"'contrast'\"\n        [kbqStyle]=\"'transparent'\"\n        [kbqTooltipDisabled]=\"disabled\"\n        [tabIndex]=\"tabIndex\"\n        [disabled]=\"disabled\"\n        (click)=\"toggle()\"\n    >\n        <i [kbq-icon]=\"searchIconName\"></i>\n    </button>\n} @else {\n    <kbq-form-field class=\"kbq-search-expandable__search\">\n        <i kbqPrefix [kbq-icon]=\"searchIconName\"></i>\n\n        <input\n            kbqInput\n            type=\"text\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"placeholder\"\n            [tabIndex]=\"tabIndex\"\n            [placeholder]=\"placeholder\"\n            [formControl]=\"control\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            (blur)=\"onTouch()\"\n            (keydown.escape)=\"onEscape($event)\"\n            (keydown.enter)=\"onEnter($event)\"\n        />\n\n        <button\n            type=\"button\"\n            kbqSuffix\n            kbq-icon-button=\"kbq-circle-xmark_16\"\n            [attr.aria-label]=\"a11yLocaleConfiguration().close\"\n            [disabled]=\"disabled\"\n            (click)=\"toggle()\"\n        ></button>\n    </kbq-form-field>\n}\n", styles: [".kbq-search-expandable{display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;min-width:0;min-height:0}.kbq-search-expandable__search .kbq-icon-button.kbq-suffix{display:flex;align-items:center;justify-content:center;border-radius:var(--kbq-search-expandable-close-button-border-radius)}@supports (corner-shape: squircle){.kbq-search-expandable__search .kbq-icon-button.kbq-suffix{corner-shape:squircle;border-radius:clamp(var(--kbq-search-expandable-close-button-border-radius) * 1.85,var(--kbq-search-expandable-close-button-border-radius) * 2.3 - 3.6px,var(--kbq-search-expandable-close-button-border-radius) * 2)}}.kbq-search-expandable__search .kbq-icon-button.kbq-suffix{height:var(--kbq-search-expandable-close-button-size)}\n", ":where(.kbq-search-expandable){--kbq-search-expandable-close-button-size: var(--kbq-size-xxl);--kbq-search-expandable-close-button-border-radius: var(--kbq-size-xxs)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { input: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqInput), { isSignal: true }] }], button: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqButton), { isSignal: true }] }], tooltip: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqTooltipTrigger), { isSignal: true }] }], isEmitValueByEnterEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEmitValueByEnterEnabled", required: false }] }], emitValueTimeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitValueTimeout", required: false }] }], isOpenedChange: [{ type: i0.Output, args: ["isOpenedChange"] }], isOpenedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpened", required: false }] }], tooltipTextInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }] } });
 
 class KbqSearchExpandableModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSearchExpandableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqSearchExpandableModule, imports: [KbqSearchExpandable], exports: [KbqSearchExpandable] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSearchExpandableModule, imports: [KbqSearchExpandable] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSearchExpandableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqSearchExpandableModule, imports: [KbqSearchExpandable], exports: [KbqSearchExpandable] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSearchExpandableModule, imports: [KbqSearchExpandable] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSearchExpandableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSearchExpandableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -276,5 +438,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_SEARCH_EXPANDABLE_CONFIGURATION, KBQ_SEARCH_EXPANDABLE_DEFAULT_CONFIGURATION, KbqSearchExpandable, KbqSearchExpandableModule, defaultEmitValueTimeout, defaultValue };
+export { KBQ_SEARCH_EXPANDABLE_CONFIGURATION, KBQ_SEARCH_EXPANDABLE_DEFAULT_CONFIGURATION, KBQ_SEARCH_EXPANDABLE_DEFAULT_LOCALE_CONFIGURATION, KBQ_SEARCH_EXPANDABLE_LOCALE_CONFIGURATION, KbqSearchExpandable, KbqSearchExpandableModule, defaultEmitValueTimeout, defaultValue, kbqSearchExpandableLocaleConfigurationProvider };
 //# sourceMappingURL=koobiq-components-search-expandable.mjs.map