@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-search-field.mjs

@@ -0,0 +1,578 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, model, input, numberAttribute, output, contentChild, viewChild, computed, effect, DestroyRef, ChangeDetectionStrategy, ViewEncapsulation, Component, forwardRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
+import { LucideSearch } from '@lucide/angular';
+import { MlvButton, MlvButtonIcon, MlvButtonClose } from '@malva-ui/core/button';
+import { MlvFormControlPrepend, MlvFormControlAppend } from '@malva-ui/core/form-utils';
+import { MlvInput } from '@malva-ui/core/input';
+import { MlvLoader } from '@malva-ui/core/loader';
+import { MlvOverlayHostBase } from '@malva-ui/cdk/overlay';
+import { MlvRtlService } from '@malva-ui/cdk/utils';
+import { MLV_SEARCH_FIELD_I18N } from '@malva-ui/i18n';
+
+/**
+ * Replaces the default body of `mlv-search-field`'s overlay.
+ *
+ * Without it the overlay renders the field's own input, restyled for the
+ * overlay surface. With it the consumer owns the body completely — an
+ * autocomplete input, recent searches, grouped results — while the host keeps
+ * owning the overlay lifecycle, focus restore, and the `value`/`search` contract.
+ *
+ * @example
+ * ```html
+ * <mlv-search-field overlay>
+ *   <ng-template mlvSearchOverlayContent let-query let-setQuery="setQuery" let-close="close">
+ *     <mlv-input [value]="query" (valueChange)="setQuery($event)" [mlvAutocomplete]="options" />
+ *     <button mlvButton (click)="close()">Cancel</button>
+ *   </ng-template>
+ * </mlv-search-field>
+ * ```
+ */
+class MlvSearchOverlayContentDef {
+    /** The template reference for the overlay body. */
+    templateRef = inject((TemplateRef));
+    /** Type guard so `let-` variables infer from {@link MlvSearchOverlayContentContext}. */
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSearchOverlayContentDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvSearchOverlayContentDef, isStandalone: true, selector: "[mlvSearchOverlayContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSearchOverlayContentDef, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvSearchOverlayContent]' }]
+        }] });
+
+/**
+ * Keys that move through a popup listbox, mapped to the direction reported by
+ * {@link MlvSearchField.navigate}.
+ */
+const NAVIGATION_KEYS = new Map([
+    ['Home', 'home'],
+    ['End', 'end'],
+    ['PageUp', 'pageUp'],
+    ['PageDown', 'pageDown'],
+]);
+/**
+ * Directions whose native effect inside a text input fights the listbox — the
+ * arrows and page keys jump the caret to the ends of the query or scroll the
+ * page. They are consumed on the field's behalf. `home`/`end` are not: in an
+ * editable combobox they are the caret keys the WAI-ARIA pattern keeps.
+ */
+const CONSUMED_DIRECTIONS = new Set([
+    'up',
+    'down',
+    'pageUp',
+    'pageDown',
+]);
+/**
+ * A search-specific text field with either debounced live updates or explicit
+ * submission through Enter and a trailing action button.
+ */
+class MlvSearchField extends MlvOverlayHostBase {
+    _rtlService = inject(MlvRtlService);
+    /** Current query. Supports two-way binding with `[(value)]`. */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Search commit strategy. Live mode emits after {@link debounce}; submit
+     * mode emits only from Enter or the submit button.
+     */
+    trigger = input('live', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    /**
+     * Trailing delay, in milliseconds, used by live mode. Negative values are
+     * clamped to zero.
+     * @default 200
+     */
+    debounce = input(200, { ...(ngDevMode ? { debugName: "debounce" } : /* istanbul ignore next */ {}), transform: (value) => Math.max(0, numberAttribute(value, 200)) });
+    /** Placeholder override. Falls back to the active i18n language pack. */
+    placeholder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Accessible input label override. Falls back to the active i18n pack. */
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Whether the field and all its actions are unavailable. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Whether a pending-search indicator is shown. The input remains editable
+     * so a newer live query can supersede an in-flight request; explicit submit
+     * activation is blocked until loading completes.
+     */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Whether the trailing submit action is rendered in `submit` mode.
+     *
+     * Set to `false` for a field that commits from Enter alone — the overlay's own
+     * nested field does this, since the overlay already has a leading search icon
+     * and a close action.
+     * @default true
+     */
+    showSubmit = input(true, { ...(ngDevMode ? { debugName: "showSubmit" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Whether a clear action is shown while the field has a value. */
+    clearable = input(true, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Whether clearing also commits the empty query through {@link search}.
+     * Composite controls can disable this while still receiving the cleared
+     * {@link value} model update.
+     * @default true
+     */
+    commitOnClear = input(true, { ...(ngDevMode ? { debugName: "commitOnClear" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Visual form of the trigger. `'icon'` renders a circular search button only
+     * and implies {@link overlay}.
+     * @default 'field'
+     */
+    presentation = input('field', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presentation" }] : /* istanbul ignore next */ []));
+    /**
+     * Opens a full-screen search overlay instead of accepting input inline.
+     *
+     * With `presentation="field"` the visible input becomes a trigger: clicking it
+     * or pressing Enter/Space on it opens the overlay, so the inline input is
+     * rendered read-only to keep it from competing with the overlay's own input.
+     * Focus alone never opens the overlay — see {@link _onTriggerClick}. With
+     * `presentation="icon"` this is always on.
+     * @default false
+     */
+    overlay = input(false, { ...(ngDevMode ? { debugName: "overlay" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * ARIA role of the underlying `<input>`, and the opt-in switch for the
+     * combobox keyboard hooks.
+     *
+     * `'searchbox'` (the default) changes nothing: the native
+     * `<input type="search">` role stays implicit, no `role` attribute is
+     * rendered, and {@link navigate} never emits. `'combobox'` stamps
+     * `role="combobox"` on the input and starts reporting the option-navigation
+     * keys through {@link navigate}, so a consumer-owned popup listbox can be
+     * driven from the field. Pair it with {@link ariaControls},
+     * {@link ariaExpanded}, {@link ariaAutocomplete} and
+     * {@link ariaActiveDescendant}.
+     *
+     * Only meaningful with `presentation="field"` — `presentation="icon"` renders
+     * a dialog-trigger button, which has no input to carry the role. Likewise
+     * mutually exclusive with {@link overlay}, whose inline trigger is a
+     * read-only dialog opener rather than a text entry.
+     * @default 'searchbox'
+     */
+    role = input('searchbox', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    /**
+     * Forwarded to `aria-controls` on the input — the DOM id of the popup listbox
+     * this field drives. Required by the combobox pattern; ignored while `null`.
+     */
+    ariaControls = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
+    /**
+     * Forwarded to `aria-activedescendant` on the input — the DOM id of the
+     * currently highlighted option inside the popup. Keep DOM focus on the input
+     * and move this id instead, so typing keeps working while navigating options.
+     */
+    ariaActiveDescendant = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaActiveDescendant" }] : /* istanbul ignore next */ []));
+    /**
+     * Forwarded to `aria-autocomplete` on the input. Use `'list'` when the popup
+     * suggests options without changing the query, `'both'` when the field also
+     * completes inline. Ignored while `null`.
+     */
+    ariaAutocomplete = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaAutocomplete" }] : /* istanbul ignore next */ []));
+    /**
+     * Forwarded to `aria-expanded` on the input — whether the consumer's popup is
+     * currently open. Required by the combobox pattern.
+     *
+     * Ignored while {@link overlay} is enabled: the inline input is then a dialog
+     * trigger and reports the overlay's own open state instead.
+     */
+    ariaExpanded = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaExpanded" }] : /* istanbul ignore next */ []));
+    /** Emits a committed query according to the selected trigger strategy. */
+    // `search` is the intentional public event vocabulary for this composite
+    // control; it is emitted on commit, unlike the native input's `search` event.
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    search = output();
+    /**
+     * Emits when an option-navigation key is pressed while `role="combobox"`.
+     *
+     * Covers ArrowUp/ArrowDown, PageUp/PageDown and Home/End. The first four are
+     * `preventDefault`ed before the event is handed over — inside a text input
+     * they would otherwise jump the caret to the ends of the query or scroll the
+     * page, which is never what a combobox wants. Home/End are reported without
+     * being consumed, because an editable combobox keeps them as caret keys per
+     * WAI-ARIA; a consumer that wants "jump to first/last option" calls
+     * `preventDefault()` on the supplied event itself.
+     *
+     * Never emits while `role="searchbox"`, so the default field is untouched.
+     */
+    navigate = output();
+    /**
+     * Emits when the user asks to act on the current query — a non-composing
+     * Enter on the inline input, or the trailing submit action.
+     *
+     * Always emitted *before* the field's own commit, in every `trigger` mode, so
+     * a combobox consumer can resolve the highlighted option instead of running a
+     * plain search: call `preventDefault()` on the supplied event and the field
+     * skips its `search` emission and leaves the key consumed. Left alone, the
+     * existing behaviour runs unchanged — `submit` mode emits `search`, `live`
+     * mode has already emitted through the debounce and Enter still bubbles.
+     *
+     * Not emitted while {@link overlay} is enabled, where Enter opens the dialog
+     * rather than committing, and not emitted while disabled or loading.
+     */
+    commit = output();
+    /** @protected Reactive strings for the active language. */
+    _i18n = inject(MLV_SEARCH_FIELD_I18N);
+    /** @protected Consumer template replacing the overlay body, when supplied. */
+    _overlayContentDef = contentChild(MlvSearchOverlayContentDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_overlayContentDef" }] : /* istanbul ignore next */ []));
+    /** @protected The overlay panel template attached to the CDK overlay. */
+    _overlayTemplate = viewChild('overlayTemplate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_overlayTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether overlay behaviour is active. `presentation="icon"` forces
+     * it on: an icon button has nowhere to accept text.
+     */
+    _overlayEnabled = computed(() => this.overlay() || this.presentation() === 'icon', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_overlayEnabled" }] : /* istanbul ignore next */ []));
+    /** @protected Context handed to a consumer-supplied overlay body. */
+    _overlayContext = computed(() => ({
+        $implicit: this.value(),
+        query: this.value(),
+        loading: this.loading(),
+        placeholder: this._resolvedPlaceholder(),
+        ariaLabel: this._resolvedAriaLabel(),
+        setQuery: (value) => this._onValueChange(value),
+        submit: () => this._submitFromOverlay(),
+        clear: () => this._clear(),
+        close: () => this.close(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_overlayContext" }] : /* istanbul ignore next */ []));
+    /** @protected Effective placeholder after resolving an explicit override. */
+    _resolvedPlaceholder = computed(() => this.placeholder() ?? this._i18n().placeholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    /** @protected Effective input label after resolving an explicit override. */
+    _resolvedAriaLabel = computed(() => this.ariaLabel() ?? this._i18n().search, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Explicit `role` attribute for the input, or `null` to leave it off.
+     *
+     * `searchbox` is the implicit role of `<input type="search">`, so the default
+     * renders no attribute at all and the DOM stays exactly as it was.
+     */
+    _resolvedRole = computed(() => this.role() === 'combobox' ? 'combobox' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedRole" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Effective `aria-expanded`.
+     *
+     * An overlay-enabled field is a dialog trigger and owns this attribute
+     * itself; otherwise it mirrors the consumer's popup state.
+     */
+    _resolvedAriaExpanded = computed(() => this._overlayEnabled() ? this.opened() : this.ariaExpanded(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedAriaExpanded" }] : /* istanbul ignore next */ []));
+    /** @protected Whether the clear action should currently be rendered. */
+    _showClear = computed(() => this.clearable() && this.value().length > 0 && !this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showClear" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether the trailing submit action should be rendered.
+     *
+     * An overlay-enabled field never shows it: the inline input is a trigger, so
+     * there is nothing to submit from it — the query is typed in the overlay.
+     */
+    _showSubmitAction = computed(() => this.trigger() === 'submit' &&
+        this.showSubmit() &&
+        !this._overlayEnabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showSubmitAction" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether the leading search icon should be rendered.
+     *
+     * The field carries exactly one search glyph: trailing when there is a submit
+     * action to hang it on, leading otherwise. Live mode has no submit action, and
+     * neither does a submit-mode field with {@link showSubmit} turned off.
+     */
+    _showLeadingIcon = computed(() => !this._showSubmitAction(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showLeadingIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether the trailing spinner is rendered as its own element.
+     *
+     * The submit action carries its own loading state, so a second spinner beside
+     * it would be redundant. Without a submit action the field needs one of its own.
+     */
+    _showStandaloneLoader = computed(() => this.loading() && !this._showSubmitAction(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showStandaloneLoader" }] : /* istanbul ignore next */ []));
+    /** @private Last query emitted by live mode, used to suppress duplicates. */
+    _lastLiveQuery = null;
+    /** @private Marks model writes originating from this control's own UI. */
+    _interactionValue;
+    /** @private Pending live-search timer, when a debounce window is active. */
+    _pendingTimer = null;
+    /** @protected Backdrop class; the base appends `--leaving` on close. */
+    _backdropClass = 'mlv-search-field__backdrop';
+    /** @protected Attaches the overlay panel template. */
+    _getOverlayTemplate() {
+        return this._overlayTemplate();
+    }
+    /** @protected Full-viewport overlay: a plain global strategy, sized by config. */
+    _buildPositionStrategy() {
+        return this._overlay.position().global();
+    }
+    /** @protected Makes the pane cover the viewport so the body can centre within it. */
+    _buildExtraOverlayConfig() {
+        return {
+            width: '100%',
+            height: '100%',
+            panelClass: 'mlv-search-field__overlay-pane',
+        };
+    }
+    /** Reconciles controlled values and registers timer cleanup. */
+    constructor() {
+        super();
+        effect(() => {
+            const value = this.value();
+            if (this._interactionValue === value) {
+                this._interactionValue = undefined;
+                return;
+            }
+            // A parent-owned value supersedes both the captured debounce and the
+            // duplicate baseline. The same query must be eligible to emit again
+            // after a controlled reset.
+            this._interactionValue = undefined;
+            this._cancelPending();
+            this._lastLiveQuery = null;
+        });
+        inject(DestroyRef).onDestroy(() => this._cancelPending());
+    }
+    /** @protected Opens the overlay if it is enabled and not already open. */
+    _openOverlay() {
+        if (this.disabled() || !this._overlayEnabled() || this.opened())
+            return;
+        this.open();
+    }
+    /**
+     * @protected Opens the overlay from a click on the inline trigger.
+     *
+     * The handler sits on the `mlv-input` host, so clicks on the field's own
+     * actions — the clear button — bubble through here too. Only the input itself
+     * is the trigger, so clearing a committed query does not force the overlay open.
+     *
+     * Deliberately not bound to focus. WAI-ARIA treats the control that opens a
+     * dialog as a button, activated by click or Enter/Space; opening on focus traps
+     * a keyboard user who is only tabbing past, and fights the focus the overlay
+     * restores to this same input on close — which would reopen it immediately.
+     */
+    _onTriggerClick(event) {
+        if (!(event.target instanceof HTMLInputElement))
+            return;
+        this._openOverlay();
+    }
+    /**
+     * @protected Opens the overlay from Space on the inline trigger.
+     *
+     * The trigger is `readonly` while the overlay is enabled, so Space types
+     * nothing; `preventDefault` stops it from scrolling the page instead.
+     */
+    _onTriggerSpace(event) {
+        if (!this._overlayEnabled() || this.disabled())
+            return;
+        event.preventDefault();
+        this._openOverlay();
+    }
+    /**
+     * @protected Commits from inside the overlay.
+     *
+     * Submit mode has a commit action; live mode has already emitted through the
+     * debounce, so Enter there only dismisses. Either way the overlay closes, which
+     * restores focus to the trigger.
+     */
+    _submitFromOverlay() {
+        if (this.trigger() === 'submit') {
+            this._submit();
+        }
+        this.close();
+    }
+    /** @protected Commits and closes when Enter is pressed on the overlay input. */
+    _onOverlayEnter(event) {
+        if (!(event instanceof KeyboardEvent) || event.isComposing)
+            return;
+        // The field commonly sits inside a form; handle Enter here rather than
+        // letting it submit the surrounding form.
+        event.preventDefault();
+        this._submitFromOverlay();
+    }
+    /** @protected Synchronises user input and schedules a live search if enabled. */
+    _onValueChange(value) {
+        if (this.disabled())
+            return;
+        this._setInteractionValue(value);
+        if (this.trigger() === 'live') {
+            this._scheduleLive(value);
+        }
+        else {
+            this._cancelPending();
+        }
+    }
+    /**
+     * @protected Handles a non-composing Enter on the inline field.
+     *
+     * With the overlay enabled the field is a dialog trigger, so Enter opens it;
+     * otherwise Enter commits a submit-mode search. Either way the key is consumed:
+     * search fields commonly live inside forms, and neither action should also
+     * submit the surrounding form.
+     */
+    _onEnter(event) {
+        if (!(event instanceof KeyboardEvent) || event.isComposing)
+            return;
+        if (this._overlayEnabled()) {
+            event.preventDefault();
+            this._openOverlay();
+            return;
+        }
+        if (this._consumerHandledCommit(event))
+            return;
+        if (this.trigger() !== 'submit')
+            return;
+        event.preventDefault();
+        this._submit();
+    }
+    /**
+     * @protected Reports an option-navigation key while the field is a combobox.
+     *
+     * Silent for the default `role="searchbox"`, so a plain search field keeps
+     * every key it has today. See {@link navigate} for which keys are consumed.
+     */
+    _onNavigationKey(event) {
+        if (!(event instanceof KeyboardEvent) || event.isComposing)
+            return;
+        if (this.role() !== 'combobox' || this.disabled())
+            return;
+        const key = this._rtlService.normalizeArrowKey(event);
+        const direction = key === UP_ARROW
+            ? 'up'
+            : key === DOWN_ARROW
+                ? 'down'
+                : NAVIGATION_KEYS.get(event.key);
+        if (direction === undefined)
+            return;
+        if (CONSUMED_DIRECTIONS.has(direction)) {
+            event.preventDefault();
+        }
+        this.navigate.emit({ direction, event });
+    }
+    /** @protected Commits from the trailing submit action, offering it up first. */
+    _onSubmitClick(event) {
+        if (this._consumerHandledCommit(event))
+            return;
+        this._submit();
+    }
+    /**
+     * @private Offers the commit to the consumer and reports whether they took it.
+     *
+     * Nothing is offered while the field cannot commit anyway — disabled or with
+     * a request already in flight — so `commit` never fires for an interaction
+     * the field itself would have ignored.
+     */
+    _consumerHandledCommit(event) {
+        if (this.disabled() || this.loading())
+            return false;
+        this.commit.emit({ value: this.value(), event });
+        return event.defaultPrevented;
+    }
+    /** @protected Commits the current value from the submit action button. */
+    _submit() {
+        if (this.disabled() || this.loading() || this.trigger() !== 'submit') {
+            return;
+        }
+        this._cancelPending();
+        this.search.emit(this.value());
+    }
+    /** @protected Clears immediately and invalidates any pending live query. */
+    _clear() {
+        if (this.disabled())
+            return;
+        this._cancelPending();
+        this._setInteractionValue('');
+        if (this.commitOnClear()) {
+            this._lastLiveQuery = '';
+            this.search.emit('');
+        }
+    }
+    /** @private Starts or immediately resolves the trailing live-search window. */
+    _scheduleLive(value) {
+        this._cancelPending();
+        const delay = this.debounce();
+        if (delay === 0) {
+            this._emitLive(value);
+            return;
+        }
+        this._pendingTimer = setTimeout(() => {
+            this._pendingTimer = null;
+            if (this.trigger() === 'live' && !this.disabled()) {
+                this._emitLive(value);
+            }
+        }, delay);
+    }
+    /** @private Emits a live query only when it differs from the prior one. */
+    _emitLive(value) {
+        if (value === this._lastLiveQuery)
+            return;
+        this._lastLiveQuery = value;
+        this.search.emit(value);
+    }
+    /** @private Writes a user-originated value without treating it as controlled input. */
+    _setInteractionValue(value) {
+        this._interactionValue = value;
+        this.value.set(value);
+    }
+    /** @private Cancels and forgets the current live-search timer. */
+    _cancelPending() {
+        if (this._pendingTimer === null)
+            return;
+        clearTimeout(this._pendingTimer);
+        this._pendingTimer = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSearchField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvSearchField, isStandalone: true, selector: "mlv-search-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showSubmit: { classPropertyName: "showSubmit", publicName: "showSubmit", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, commitOnClear: { classPropertyName: "commitOnClear", publicName: "commitOnClear", isSignal: true, isRequired: false, transformFunction: null }, presentation: { classPropertyName: "presentation", publicName: "presentation", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, ariaActiveDescendant: { classPropertyName: "ariaActiveDescendant", publicName: "ariaActiveDescendant", isSignal: true, isRequired: false, transformFunction: null }, ariaAutocomplete: { classPropertyName: "ariaAutocomplete", publicName: "ariaAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, ariaExpanded: { classPropertyName: "ariaExpanded", publicName: "ariaExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "search", navigate: "navigate", commit: "commit" }, host: { properties: { "class.mlv-search-field--disabled": "disabled()", "class.mlv-search-field--loading": "loading()", "class.mlv-search-field--submit": "trigger() === \"submit\"", "class.mlv-search-field--icon": "presentation() === \"icon\"", "class.mlv-search-field--overlay-enabled": "_overlayEnabled()", "class.mlv-search-field--overlay-open": "opened()", "attr.aria-busy": "loading() || null" }, classAttribute: "mlv-search-field" }, queries: [{ propertyName: "_overlayContentDef", first: true, predicate: MlvSearchOverlayContentDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (presentation() === 'icon') {\n<button\n  mlvButton\n  class=\"mlv-search-field__trigger-icon\"\n  type=\"button\"\n  shape=\"circle\"\n  variant=\"transparent\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"_resolvedAriaLabel()\"\n  [attr.aria-expanded]=\"opened()\"\n  [attr.aria-haspopup]=\"'dialog'\"\n  (click)=\"_openOverlay()\"\n>\n  <svg mlvButtonIcon lucideSearch />\n</button>\n} @else {\n<!--\n  The dialog-trigger and combobox semantics go through `mlv-input`'s own aria\n  inputs rather than `[attr.*]` on this host, so they land on the focusable\n  `<input>` where a screen reader reads them.\n-->\n<mlv-input\n  class=\"mlv-search-field__input\"\n  type=\"search\"\n  inputMode=\"search\"\n  autocomplete=\"off\"\n  [placeholder]=\"_resolvedPlaceholder()\"\n  [ariaLabel]=\"_resolvedAriaLabel()\"\n  [disabled]=\"disabled()\"\n  [loading]=\"loading()\"\n  [value]=\"value()\"\n  [readonly]=\"_overlayEnabled()\"\n  [role]=\"_resolvedRole()\"\n  [ariaExpanded]=\"_resolvedAriaExpanded()\"\n  [ariaHasPopup]=\"_overlayEnabled() ? 'dialog' : null\"\n  [ariaAutocomplete]=\"ariaAutocomplete()\"\n  [ariaControls]=\"ariaControls()\"\n  [ariaActiveDescendant]=\"ariaActiveDescendant()\"\n  (valueChange)=\"_onValueChange($event)\"\n  (keydown)=\"_onNavigationKey($event)\"\n  (keydown.enter)=\"_onEnter($event)\"\n  (keydown.space)=\"_onTriggerSpace($event)\"\n  (click)=\"_onTriggerClick($event)\"\n>\n  @if (_showLeadingIcon()) {\n  <span class=\"mlv-search-field__leading\" *mlvFormControlPrepend>\n    <svg\n      class=\"mlv-search-field__leading-icon\"\n      lucideSearch\n      aria-hidden=\"true\"\n    />\n  </span>\n  }\n\n  <div class=\"mlv-search-field__actions\" *mlvFormControlAppend>\n    @if (_showClear()) {\n    <mlv-button-close\n      mlvDensity=\"tight\"\n      [ariaLabel]=\"_i18n().clear\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"_clear()\"\n    ></mlv-button-close>\n    } @if (_showStandaloneLoader()) {\n    <mlv-loader\n      class=\"mlv-search-field__loader\"\n      variant=\"circle\"\n      indeterminate\n      [size]=\"18\"\n      [strokeWidth]=\"2\"\n    />\n    } @if (_showSubmitAction()) {\n    <!--\n      `[loading]=\"loading()\"` stays bound to mlvButton so its own host\n      bindings keep driving native `disabled`/`aria-busy` \u2014 an external\n      `[attr.aria-busy]` binding on this same host element loses to\n      mlvButton's own host binding of the same attribute every change-\n      detection cycle (a component's own host bindings are applied after a\n      consuming template's bindings on that host), so duplicating that logic\n      here doesn't work. mlvButton's own loading render still renders its\n      internal current-colour spinner as a sibling of `.mlv-button__text`\n      when loading \u2014 that instance is hidden in the stylesheet\n      (`.mlv-search-field__submit > mlv-loader`) so only the loader\n      projected below (identical inputs to the standalone loader above) is\n      visible, keeping both loading spinners in this component pixel-\n      identical.\n    -->\n    <button\n      mlvButton\n      class=\"mlv-search-field__submit\"\n      mlvDensity=\"tight\"\n      type=\"button\"\n      shape=\"circle\"\n      variant=\"transparent\"\n      [disabled]=\"disabled()\"\n      [loading]=\"loading()\"\n      [attr.aria-label]=\"_i18n().submit\"\n      (click)=\"_onSubmitClick($event)\"\n    >\n      @if (loading()) {\n      <mlv-loader\n        class=\"mlv-search-field__loader\"\n        variant=\"circle\"\n        indeterminate\n        [size]=\"18\"\n        [strokeWidth]=\"2\"\n      />\n      } @else {\n      <svg mlvButtonIcon lucideSearch />\n      }\n    </button>\n    }\n  </div>\n</mlv-input>\n}\n\n<ng-template #overlayTemplate>\n  <div\n    class=\"mlv-search-field__overlay\"\n    [class.mlv-search-field__overlay--entering]=\"animationState() === 'enter'\"\n    [class.mlv-search-field__overlay--leaving]=\"animationState() === 'leave'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"_resolvedAriaLabel()\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n    (animationend)=\"onAnimationEnd()\"\n  >\n    <div class=\"mlv-search-field__overlay-panel\">\n      @if (_overlayContentDef(); as contentDef) {\n      <ng-container\n        [ngTemplateOutlet]=\"contentDef.templateRef\"\n        [ngTemplateOutletContext]=\"_overlayContext()\"\n      />\n      } @else {\n      <!--\n        The overlay's default body is another search field, so the overlay\n        inherits every affordance of the inline control instead of re-declaring a\n        near-copy of it. It is configured as a pure input surface: `submit` mode\n        never emits while typing, `showSubmit` drops the redundant button, and\n        `commitOnClear` is off \u2014 this host owns commit, through `valueChange` for\n        live mode and `_onOverlayEnter` for Enter.\n      -->\n      <mlv-search-field\n        class=\"mlv-search-field__overlay-input\"\n        trigger=\"submit\"\n        [showSubmit]=\"false\"\n        [commitOnClear]=\"false\"\n        [clearable]=\"clearable()\"\n        [loading]=\"loading()\"\n        [placeholder]=\"_resolvedPlaceholder()\"\n        [ariaLabel]=\"_resolvedAriaLabel()\"\n        [value]=\"value()\"\n        (valueChange)=\"_onValueChange($event)\"\n        (keydown.enter)=\"_onOverlayEnter($event)\"\n      />\n      }\n\n      <!--\n        No mlvDensity override: the nested search field above also has none,\n        so both resolve the same ambient density. CH-R2 pins mlvButton's own\n        height ramp to the same --mlv-height-* tokens as\n        --form-ctrl-height, so leaving both controls on the same (unset)\n        density is what makes their heights agree at every density \u2014 a\n        pinned `mlvDensity=\"compact\"` here previously mismatched the field's\n        real height whenever the ambient density was not itself compact.\n      -->\n      <button\n        mlvButton\n        class=\"mlv-search-field__overlay-close\"\n        type=\"button\"\n        variant=\"transparent\"\n        [attr.aria-label]=\"_i18n().closeOverlay\"\n        (click)=\"close()\"\n      >\n        {{ _i18n().closeOverlay }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@layer mlv.components{.mlv-search-field{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-search-field *{box-sizing:border-box}.mlv-search-field,.mlv-search-field__input{display:block;width:100%;min-width:0}.mlv-search-field__input input[type=search]::-webkit-search-cancel-button{display:none;appearance:none}.mlv-search-field__leading,.mlv-search-field__actions{display:inline-flex;align-items:center;justify-content:center}.mlv-search-field__leading{color:var(--mlv-text-tertiary);pointer-events:none;transition:color var(--mlv-duration-fast) var(--mlv-ease-out-strong)}.mlv-search-field:hover .mlv-search-field__leading,.mlv-search-field:focus-within .mlv-search-field__leading{color:var(--mlv-text-primary)}.mlv-form-control-wrapper--focused .mlv-search-field__leading{color:var(--mlv-text-primary)}.mlv-search-field__leading-icon{display:block;width:var(--form-ctrl-icon-size);height:var(--form-ctrl-icon-size);stroke-width:2;color:inherit}.mlv-search-field__submit,.mlv-search-field__trigger-icon{--mlv-btn-text-color: var(--mlv-text-tertiary);--mlv-icon-font-size: var(--form-ctrl-icon-size)}.mlv-search-field__submit:hover:not(:disabled),.mlv-search-field__submit:focus-visible,.mlv-search-field__trigger-icon:hover:not(:disabled),.mlv-search-field__trigger-icon:focus-visible{--mlv-btn-text-color: var(--mlv-text-primary)}.mlv-search-field__submit>mlv-loader{display:none}.mlv-search-field__actions{gap:var(--mlv-spacing-1)}.mlv-search-field__loader{flex:0 0 auto}.mlv-search-field--disabled{cursor:not-allowed}.mlv-search-field--overlay-enabled .mlv-search-field__input,.mlv-search-field--overlay-enabled .mlv-search-field__input input{cursor:pointer}.mlv-search-field__backdrop{background:#0000008c;-webkit-backdrop-filter:blur(.5rem);backdrop-filter:blur(.5rem)}@media(prefers-reduced-motion:no-preference){.mlv-search-field__backdrop{animation:mlv-search-field-backdrop-enter var(--mlv-duration-normal) var(--mlv-ease-out-strong) both}}@media(prefers-reduced-motion:no-preference){.mlv-search-field__backdrop--leaving{animation:mlv-search-field-backdrop-leave var(--mlv-duration-fast) var(--mlv-ease-default) both}}.mlv-search-field__overlay{display:flex;justify-content:center;width:100%;height:100%;padding:var(--mlv-padding-l);align-items:flex-start;overflow-y:auto}@media(prefers-reduced-motion:no-preference){.mlv-search-field__overlay--entering{animation:mlv-search-field-overlay-enter var(--mlv-duration-normal) var(--mlv-ease-out-strong) both}}@media(prefers-reduced-motion:no-preference){.mlv-search-field__overlay--leaving{animation:mlv-search-field-overlay-leave var(--mlv-duration-fast) var(--mlv-ease-default) both}}.mlv-search-field__overlay-panel{display:flex;align-items:center;gap:var(--mlv-spacing-3);width:100%;max-width:40rem;margin-block-start:10vh}.mlv-search-field__overlay-input{flex:1 1 auto;min-width:0}.mlv-search-field__overlay-panel{--mlv-text-primary: var(--mlv-palette-neutral-50);--mlv-text-secondary: rgb(255 255 255 / 78%);--mlv-text-tertiary: rgb(255 255 255 / 60%);--mlv-border-focus: var(--mlv-palette-neutral-50)}.mlv-search-field__overlay-panel .mlv-form-control-wrapper{--container-background-color: rgb(255 255 255 / 10%);--container-border-color: rgb(255 255 255 / 30%);--container-side-content-color: var(--mlv-palette-neutral-50);--container-action-color: rgb(255 255 255 / 78%)}.mlv-search-field__overlay-panel .mlv-form-control-wrapper.mlv-form-control-wrapper--state-default:hover{--container-border-color: rgb(255 255 255 / 40%)}.mlv-search-field__overlay-panel .mlv-form-control-wrapper.mlv-form-control-wrapper--focused{--container-border-color: rgb(255 255 255 / 50%)}.mlv-search-field__overlay-close{flex:0 0 auto}@keyframes mlv-search-field-backdrop-enter{0%{opacity:0}}@keyframes mlv-search-field-backdrop-leave{to{opacity:0}}@keyframes mlv-search-field-overlay-enter{0%{opacity:0;transform:translateY(-.75rem)}}@keyframes mlv-search-field-overlay-leave{to{opacity:0;transform:translateY(-.5rem)}}@media(prefers-reduced-motion:reduce){.mlv-search-field,.mlv-search-field *,.mlv-search-field:before,.mlv-search-field:after,[class^=mlv-search-field__],[class*=\" mlv-search-field__\"],[class^=mlv-search-field--],[class*=\" mlv-search-field--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => MlvSearchField), selector: "mlv-search-field", inputs: ["value", "trigger", "debounce", "placeholder", "ariaLabel", "disabled", "loading", "showSubmit", "clearable", "commitOnClear", "presentation", "overlay", "role", "ariaControls", "ariaActiveDescendant", "ariaAutocomplete", "ariaExpanded"], outputs: ["valueChange", "search", "navigate", "commit"] }, { kind: "component", type: i0.forwardRef(() => MlvInput), selector: "mlv-input", inputs: ["type", "placeholder", "autocomplete", "inputMode", "maxLength", "minLength", "pattern", "name", "autofocus", "min", "max", "step", "bare", "projectControl", "role", "ariaExpanded", "ariaHasPopup", "ariaAutocomplete", "ariaControls", "ariaActiveDescendant", "ariaDescribedBy", "value"], outputs: ["valueChange", "inputFocus", "inputBlur"] }, { kind: "component", type: i0.forwardRef(() => MlvButton), selector: "button[mlvButton], a[mlvButton]", inputs: ["variant", "shape", "disabled", "loading", "selected"] }, { kind: "directive", type: i0.forwardRef(() => MlvButtonIcon), selector: "[mlvButtonIcon]" }, { kind: "component", type: i0.forwardRef(() => MlvLoader), selector: "mlv-loader", inputs: ["variant", "tone", "value", "max", "indeterminate", "size", "strokeWidth", "ariaLabel", "showHint", "color", "trackColor", "glow"] }, { kind: "component", type: i0.forwardRef(() => LucideSearch), selector: "svg[lucideSearch]" }, { kind: "directive", type: i0.forwardRef(() => MlvFormControlPrepend), selector: "[mlvFormControlPrepend]" }, { kind: "directive", type: i0.forwardRef(() => MlvFormControlAppend), selector: "[mlvFormControlAppend]" }, { kind: "component", type: i0.forwardRef(() => MlvButtonClose), selector: "mlv-button-close", inputs: ["variant", "shape", "ariaLabel"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i0.forwardRef(() => 
+                // `cdkTrapFocus` on the overlay panel — `role="dialog" aria-modal="true"`
+                // only holds if focus is actually trapped, as in `mlv-dialog`/`mlv-drawer`.
+                A11yModule) }, { kind: "directive", type: i0.forwardRef(() => i1.CdkTrapFocus), selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSearchField, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-search-field', imports: [
+                        MlvInput,
+                        MlvButton,
+                        MlvButtonIcon,
+                        MlvLoader,
+                        LucideSearch,
+                        MlvFormControlPrepend,
+                        MlvFormControlAppend,
+                        MlvButtonClose,
+                        NgTemplateOutlet,
+                        // `cdkTrapFocus` on the overlay panel — `role="dialog" aria-modal="true"`
+                        // only holds if focus is actually trapped, as in `mlv-dialog`/`mlv-drawer`.
+                        A11yModule,
+                        // The overlay's default body is another `mlv-search-field` with overlay
+                        // behaviour off. Self-reference needs `forwardRef`: the class is not yet
+                        // defined while its own decorator is evaluated.
+                        forwardRef(() => MlvSearchField),
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-search-field',
+                        '[class.mlv-search-field--disabled]': 'disabled()',
+                        '[class.mlv-search-field--loading]': 'loading()',
+                        '[class.mlv-search-field--submit]': 'trigger() === "submit"',
+                        '[class.mlv-search-field--icon]': 'presentation() === "icon"',
+                        '[class.mlv-search-field--overlay-enabled]': '_overlayEnabled()',
+                        '[class.mlv-search-field--overlay-open]': 'opened()',
+                        '[attr.aria-busy]': 'loading() || null',
+                    }, template: "@if (presentation() === 'icon') {\n<button\n  mlvButton\n  class=\"mlv-search-field__trigger-icon\"\n  type=\"button\"\n  shape=\"circle\"\n  variant=\"transparent\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"_resolvedAriaLabel()\"\n  [attr.aria-expanded]=\"opened()\"\n  [attr.aria-haspopup]=\"'dialog'\"\n  (click)=\"_openOverlay()\"\n>\n  <svg mlvButtonIcon lucideSearch />\n</button>\n} @else {\n<!--\n  The dialog-trigger and combobox semantics go through `mlv-input`'s own aria\n  inputs rather than `[attr.*]` on this host, so they land on the focusable\n  `<input>` where a screen reader reads them.\n-->\n<mlv-input\n  class=\"mlv-search-field__input\"\n  type=\"search\"\n  inputMode=\"search\"\n  autocomplete=\"off\"\n  [placeholder]=\"_resolvedPlaceholder()\"\n  [ariaLabel]=\"_resolvedAriaLabel()\"\n  [disabled]=\"disabled()\"\n  [loading]=\"loading()\"\n  [value]=\"value()\"\n  [readonly]=\"_overlayEnabled()\"\n  [role]=\"_resolvedRole()\"\n  [ariaExpanded]=\"_resolvedAriaExpanded()\"\n  [ariaHasPopup]=\"_overlayEnabled() ? 'dialog' : null\"\n  [ariaAutocomplete]=\"ariaAutocomplete()\"\n  [ariaControls]=\"ariaControls()\"\n  [ariaActiveDescendant]=\"ariaActiveDescendant()\"\n  (valueChange)=\"_onValueChange($event)\"\n  (keydown)=\"_onNavigationKey($event)\"\n  (keydown.enter)=\"_onEnter($event)\"\n  (keydown.space)=\"_onTriggerSpace($event)\"\n  (click)=\"_onTriggerClick($event)\"\n>\n  @if (_showLeadingIcon()) {\n  <span class=\"mlv-search-field__leading\" *mlvFormControlPrepend>\n    <svg\n      class=\"mlv-search-field__leading-icon\"\n      lucideSearch\n      aria-hidden=\"true\"\n    />\n  </span>\n  }\n\n  <div class=\"mlv-search-field__actions\" *mlvFormControlAppend>\n    @if (_showClear()) {\n    <mlv-button-close\n      mlvDensity=\"tight\"\n      [ariaLabel]=\"_i18n().clear\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"_clear()\"\n    ></mlv-button-close>\n    } @if (_showStandaloneLoader()) {\n    <mlv-loader\n      class=\"mlv-search-field__loader\"\n      variant=\"circle\"\n      indeterminate\n      [size]=\"18\"\n      [strokeWidth]=\"2\"\n    />\n    } @if (_showSubmitAction()) {\n    <!--\n      `[loading]=\"loading()\"` stays bound to mlvButton so its own host\n      bindings keep driving native `disabled`/`aria-busy` \u2014 an external\n      `[attr.aria-busy]` binding on this same host element loses to\n      mlvButton's own host binding of the same attribute every change-\n      detection cycle (a component's own host bindings are applied after a\n      consuming template's bindings on that host), so duplicating that logic\n      here doesn't work. mlvButton's own loading render still renders its\n      internal current-colour spinner as a sibling of `.mlv-button__text`\n      when loading \u2014 that instance is hidden in the stylesheet\n      (`.mlv-search-field__submit > mlv-loader`) so only the loader\n      projected below (identical inputs to the standalone loader above) is\n      visible, keeping both loading spinners in this component pixel-\n      identical.\n    -->\n    <button\n      mlvButton\n      class=\"mlv-search-field__submit\"\n      mlvDensity=\"tight\"\n      type=\"button\"\n      shape=\"circle\"\n      variant=\"transparent\"\n      [disabled]=\"disabled()\"\n      [loading]=\"loading()\"\n      [attr.aria-label]=\"_i18n().submit\"\n      (click)=\"_onSubmitClick($event)\"\n    >\n      @if (loading()) {\n      <mlv-loader\n        class=\"mlv-search-field__loader\"\n        variant=\"circle\"\n        indeterminate\n        [size]=\"18\"\n        [strokeWidth]=\"2\"\n      />\n      } @else {\n      <svg mlvButtonIcon lucideSearch />\n      }\n    </button>\n    }\n  </div>\n</mlv-input>\n}\n\n<ng-template #overlayTemplate>\n  <div\n    class=\"mlv-search-field__overlay\"\n    [class.mlv-search-field__overlay--entering]=\"animationState() === 'enter'\"\n    [class.mlv-search-field__overlay--leaving]=\"animationState() === 'leave'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"_resolvedAriaLabel()\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n    (animationend)=\"onAnimationEnd()\"\n  >\n    <div class=\"mlv-search-field__overlay-panel\">\n      @if (_overlayContentDef(); as contentDef) {\n      <ng-container\n        [ngTemplateOutlet]=\"contentDef.templateRef\"\n        [ngTemplateOutletContext]=\"_overlayContext()\"\n      />\n      } @else {\n      <!--\n        The overlay's default body is another search field, so the overlay\n        inherits every affordance of the inline control instead of re-declaring a\n        near-copy of it. It is configured as a pure input surface: `submit` mode\n        never emits while typing, `showSubmit` drops the redundant button, and\n        `commitOnClear` is off \u2014 this host owns commit, through `valueChange` for\n        live mode and `_onOverlayEnter` for Enter.\n      -->\n      <mlv-search-field\n        class=\"mlv-search-field__overlay-input\"\n        trigger=\"submit\"\n        [showSubmit]=\"false\"\n        [commitOnClear]=\"false\"\n        [clearable]=\"clearable()\"\n        [loading]=\"loading()\"\n        [placeholder]=\"_resolvedPlaceholder()\"\n        [ariaLabel]=\"_resolvedAriaLabel()\"\n        [value]=\"value()\"\n        (valueChange)=\"_onValueChange($event)\"\n        (keydown.enter)=\"_onOverlayEnter($event)\"\n      />\n      }\n\n      <!--\n        No mlvDensity override: the nested search field above also has none,\n        so both resolve the same ambient density. CH-R2 pins mlvButton's own\n        height ramp to the same --mlv-height-* tokens as\n        --form-ctrl-height, so leaving both controls on the same (unset)\n        density is what makes their heights agree at every density \u2014 a\n        pinned `mlvDensity=\"compact\"` here previously mismatched the field's\n        real height whenever the ambient density was not itself compact.\n      -->\n      <button\n        mlvButton\n        class=\"mlv-search-field__overlay-close\"\n        type=\"button\"\n        variant=\"transparent\"\n        [attr.aria-label]=\"_i18n().closeOverlay\"\n        (click)=\"close()\"\n      >\n        {{ _i18n().closeOverlay }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@layer mlv.components{.mlv-search-field{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-search-field *{box-sizing:border-box}.mlv-search-field,.mlv-search-field__input{display:block;width:100%;min-width:0}.mlv-search-field__input input[type=search]::-webkit-search-cancel-button{display:none;appearance:none}.mlv-search-field__leading,.mlv-search-field__actions{display:inline-flex;align-items:center;justify-content:center}.mlv-search-field__leading{color:var(--mlv-text-tertiary);pointer-events:none;transition:color var(--mlv-duration-fast) var(--mlv-ease-out-strong)}.mlv-search-field:hover .mlv-search-field__leading,.mlv-search-field:focus-within .mlv-search-field__leading{color:var(--mlv-text-primary)}.mlv-form-control-wrapper--focused .mlv-search-field__leading{color:var(--mlv-text-primary)}.mlv-search-field__leading-icon{display:block;width:var(--form-ctrl-icon-size);height:var(--form-ctrl-icon-size);stroke-width:2;color:inherit}.mlv-search-field__submit,.mlv-search-field__trigger-icon{--mlv-btn-text-color: var(--mlv-text-tertiary);--mlv-icon-font-size: var(--form-ctrl-icon-size)}.mlv-search-field__submit:hover:not(:disabled),.mlv-search-field__submit:focus-visible,.mlv-search-field__trigger-icon:hover:not(:disabled),.mlv-search-field__trigger-icon:focus-visible{--mlv-btn-text-color: var(--mlv-text-primary)}.mlv-search-field__submit>mlv-loader{display:none}.mlv-search-field__actions{gap:var(--mlv-spacing-1)}.mlv-search-field__loader{flex:0 0 auto}.mlv-search-field--disabled{cursor:not-allowed}.mlv-search-field--overlay-enabled .mlv-search-field__input,.mlv-search-field--overlay-enabled .mlv-search-field__input input{cursor:pointer}.mlv-search-field__backdrop{background:#0000008c;-webkit-backdrop-filter:blur(.5rem);backdrop-filter:blur(.5rem)}@media(prefers-reduced-motion:no-preference){.mlv-search-field__backdrop{animation:mlv-search-field-backdrop-enter var(--mlv-duration-normal) var(--mlv-ease-out-strong) both}}@media(prefers-reduced-motion:no-preference){.mlv-search-field__backdrop--leaving{animation:mlv-search-field-backdrop-leave var(--mlv-duration-fast) var(--mlv-ease-default) both}}.mlv-search-field__overlay{display:flex;justify-content:center;width:100%;height:100%;padding:var(--mlv-padding-l);align-items:flex-start;overflow-y:auto}@media(prefers-reduced-motion:no-preference){.mlv-search-field__overlay--entering{animation:mlv-search-field-overlay-enter var(--mlv-duration-normal) var(--mlv-ease-out-strong) both}}@media(prefers-reduced-motion:no-preference){.mlv-search-field__overlay--leaving{animation:mlv-search-field-overlay-leave var(--mlv-duration-fast) var(--mlv-ease-default) both}}.mlv-search-field__overlay-panel{display:flex;align-items:center;gap:var(--mlv-spacing-3);width:100%;max-width:40rem;margin-block-start:10vh}.mlv-search-field__overlay-input{flex:1 1 auto;min-width:0}.mlv-search-field__overlay-panel{--mlv-text-primary: var(--mlv-palette-neutral-50);--mlv-text-secondary: rgb(255 255 255 / 78%);--mlv-text-tertiary: rgb(255 255 255 / 60%);--mlv-border-focus: var(--mlv-palette-neutral-50)}.mlv-search-field__overlay-panel .mlv-form-control-wrapper{--container-background-color: rgb(255 255 255 / 10%);--container-border-color: rgb(255 255 255 / 30%);--container-side-content-color: var(--mlv-palette-neutral-50);--container-action-color: rgb(255 255 255 / 78%)}.mlv-search-field__overlay-panel .mlv-form-control-wrapper.mlv-form-control-wrapper--state-default:hover{--container-border-color: rgb(255 255 255 / 40%)}.mlv-search-field__overlay-panel .mlv-form-control-wrapper.mlv-form-control-wrapper--focused{--container-border-color: rgb(255 255 255 / 50%)}.mlv-search-field__overlay-close{flex:0 0 auto}@keyframes mlv-search-field-backdrop-enter{0%{opacity:0}}@keyframes mlv-search-field-backdrop-leave{to{opacity:0}}@keyframes mlv-search-field-overlay-enter{0%{opacity:0;transform:translateY(-.75rem)}}@keyframes mlv-search-field-overlay-leave{to{opacity:0;transform:translateY(-.5rem)}}@media(prefers-reduced-motion:reduce){.mlv-search-field,.mlv-search-field *,.mlv-search-field:before,.mlv-search-field:after,[class^=mlv-search-field__],[class*=\" mlv-search-field__\"],[class^=mlv-search-field--],[class*=\" mlv-search-field--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSubmit", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], commitOnClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "commitOnClear", required: false }] }], presentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "presentation", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }], ariaActiveDescendant: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaActiveDescendant", required: false }] }], ariaAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaAutocomplete", required: false }] }], ariaExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaExpanded", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], navigate: [{ type: i0.Output, args: ["navigate"] }], commit: [{ type: i0.Output, args: ["commit"] }], _overlayContentDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvSearchOverlayContentDef), { isSignal: true }] }], _overlayTemplate: [{ type: i0.ViewChild, args: ['overlayTemplate', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvSearchField, MlvSearchOverlayContentDef };
+//# sourceMappingURL=malva-ui-core-search-field.mjs.map