@malva-ui/core 0.1.12

package/esm2022/search-field/lib/search-field/search-field.js

@@ -0,0 +1,535 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { ChangeDetectionStrategy, Component, computed, contentChild, forwardRef, DestroyRef, effect, inject, input, model, numberAttribute, output, viewChild, ViewEncapsulation, } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { A11yModule } from '@angular/cdk/a11y';
+import { LucideSearch } from '@lucide/angular';
+import { MlvClick } from '@malva-ui/cdk/accessibility';
+import { MlvButton, MlvButtonIcon, MlvButtonClose, } from '@malva-ui/core/button';
+import { MlvFormControlAppend, MlvFormControlPrepend, } 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 { MLV_SEARCH_FIELD_I18N } from '@malva-ui/i18n';
+import { MlvSearchOverlayContentDef } from './search-overlay-content';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/a11y";
+/**
+ * Keys that move through a popup listbox, mapped to the direction reported by
+ * {@link MlvSearchField.navigate}.
+ */
+const NAVIGATION_KEYS = new Map([
+    ['ArrowUp', 'up'],
+    ['ArrowDown', 'down'],
+    ['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.
+ */
+export class MlvSearchField extends MlvOverlayHostBase {
+    /** 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 direction = 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      (mlvClick)=\"_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    <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      <svg mlvButtonIcon lucideSearch />\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      <button\n        mlvButton\n        class=\"mlv-search-field__overlay-close\"\n        type=\"button\"\n        variant=\"transparent\"\n        mlvDensity=\"compact\"\n        [attr.aria-label]=\"_i18n().closeOverlay\"\n        (click)=\"close()\"\n      >\n        {{ _i18n().closeOverlay }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".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-secondary);pointer-events:none}.mlv-search-field__leading-icon{display:block;width:1.125em;height:1.125em;stroke-width:2}.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-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-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.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{--mlv-text-action: var(--mlv-palette-neutral-50);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"] }, { 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(() => MlvClick), selector: "[mlvClick]", inputs: ["disabled", "hostRole"], outputs: ["mlvClick"] }, { 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,
+                        MlvClick,
+                        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      (mlvClick)=\"_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    <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      <svg mlvButtonIcon lucideSearch />\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      <button\n        mlvButton\n        class=\"mlv-search-field__overlay-close\"\n        type=\"button\"\n        variant=\"transparent\"\n        mlvDensity=\"compact\"\n        [attr.aria-label]=\"_i18n().closeOverlay\"\n        (click)=\"close()\"\n      >\n        {{ _i18n().closeOverlay }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".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-secondary);pointer-events:none}.mlv-search-field__leading-icon{display:block;width:1.125em;height:1.125em;stroke-width:2}.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-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-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.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{--mlv-text-action: var(--mlv-palette-neutral-50);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 }] }] } });
+//# sourceMappingURL=search-field.js.map