@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-select.mjs

@@ -0,0 +1,855 @@
+import * as i0 from '@angular/core';
+import { Directive, model, input, computed, inject, signal, contentChild, viewChild, ElementRef, effect, untracked, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MlvPopup, MlvPopupContent, MlvPopupContainer, MlvPopupPinnedContent } from '@malva-ui/core/popup';
+import { MlvSignalFormControlBase, MlvSelectionService, toAriaValues, fromAriaValues, MlvDescription, MlvFormControlWrapper, MlvHint, MlvLabel, MlvFormControlWrapperControl, MlvMessage, MLV_FORM_CONTROL } from '@malva-ui/core/form-utils';
+import { MlvStructural, MlvBreakpointService, MlvResizeObserver } from '@malva-ui/cdk/utils';
+import { LucideChevronDown, LucideSearch } from '@lucide/angular';
+import { MlvClick } from '@malva-ui/cdk/accessibility';
+import { defaultOptionTransform, MlvOptionsAdapter, filterOptions, MlvActiveDescendant, optionId, MlvDropdownPanel, isReconciliationEmit, filteredOutCommitted } from '@malva-ui/core/dropdown';
+export * from '@malva-ui/core/dropdown';
+import { MlvButtonClose } from '@malva-ui/core/button';
+import { MlvInput } from '@malva-ui/core/input';
+import { MlvLoader } from '@malva-ui/core/loader';
+import { MLV_SELECT_I18N, MLV_FORM_UTILS_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+
+class MlvSelectListTemplate extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSelectListTemplate, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvSelectListTemplate, isStandalone: true, selector: "[mlvSelectListTemplate]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSelectListTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvSelectListTemplate]',
+                }]
+        }] });
+class MlvSelectItemTemplate extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSelectItemTemplate, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvSelectItemTemplate, isStandalone: true, selector: "[mlvSelectItemTemplate]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSelectItemTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvSelectItemTemplate]',
+                }]
+        }] });
+class MlvSelectSelectedTemplate extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSelectSelectedTemplate, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvSelectSelectedTemplate, isStandalone: true, selector: "[mlvSelectSelectedTemplate]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSelectSelectedTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvSelectSelectedTemplate]',
+                }]
+        }] });
+
+function coerceNativeMode(value) {
+    if (value === '' || value === true || value === 'true')
+        return true;
+    if (value === 'auto')
+        return 'auto';
+    return false;
+}
+class MlvSelect extends MlvSignalFormControlBase {
+    /** The scalar, array, or null selection used by all Angular forms APIs. */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Selectable options: a plain array, an observable of arrays, or an
+     * `MlvDataSource` (source-side search + lazy paging). Readonly arrays are
+     * accepted because options are never mutated.
+     */
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * Remote search used by the searchable dropdown:
+     * `(query) => T[] | Promise<T[]> | Observable<T[]>`. When set it supersedes
+     * {@link options} as the item source; the list is not filtered locally. Bind
+     * `[loading]` yourself for any spinner beyond the source-owned one.
+     */
+    searchFn = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchFn" }] : /* istanbul ignore next */ []));
+    /** Debounce (ms) for remote searches (`MlvDataSource` / {@link searchFn}). Local filtering stays instant. */
+    searchDebounce = input(200, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchDebounce" }] : /* istanbul ignore next */ []));
+    /** Enables multi-selection mode. */
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Renders a transparent native `<select>` over the visual trigger. The
+     * native control is populated from `[options]`; custom item and selected
+     * templates are ignored. `true` always uses the native control, `false`
+     * keeps the custom dropdown, and `'auto'` uses the native control below the
+     * `md` breakpoint. A bare `native` attribute is equivalent to
+     * `native="true"`.
+     */
+    native = input(false, { ...(ngDevMode ? { debugName: "native" } : /* istanbul ignore next */ {}), transform: coerceNativeMode });
+    /** Custom placeholder override. Falls back to the i18n-provided placeholder. */
+    placeholder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    toOption = input(defaultOptionTransform, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toOption" }] : /* istanbul ignore next */ []));
+    /**
+     * Equality predicate used to match option values against the current
+     * selection and against values written through any forms binding. Defaults
+     * to reference equality. Provide e.g. `(a, b) => a.id === b.id` so a
+     * deserialised object value collapses onto its option instance (label and
+     * check-mark agree, and a value that arrives before its options resolves once
+     * they load).
+     */
+    compareWith = input((a, b) => a === b, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    /**
+     * Renders a search field as the first row of the open dropdown. Local sources
+     * (array / observable) are filtered by label; remote sources (`MlvDataSource`
+     * / {@link searchFn}) search server-side through the shared adapter.
+     *
+     * While the searchable dropdown is open the combobox semantics move from the
+     * trigger onto the search input and navigation switches to the WAI-ARIA
+     * activedescendant model (DOM focus stays in the search field). A
+     * non-searchable select is untouched.
+     */
+    searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Placeholder of the in-dropdown search field. Falls back to the i18n default. */
+    searchPlaceholder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom local-filter predicate (fuzzy / secondary-field matching). Threaded
+     * into the shared `filterOptions`, whose results are always ranked
+     * prefix-matches-first. Ignored for remote sources, which own their filtering.
+     */
+    matcher = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matcher" }] : /* istanbul ignore next */ []));
+    /**
+     * Controls whether the dropdown renders as a full-screen mobile sheet.
+     *
+     * Passed straight through to the underlying `mlv-popup`. Defaults to
+     * `'auto'` — the dropdown is full-screen below the `md` breakpoint
+     * (viewport < 768px) and trigger-anchored above it, matching the date/time
+     * pickers. Set to `'off'` to always anchor to the trigger, or `'fullscreen'`
+     * to always render the sheet (e.g. demos). Unlike `mlv-combobox` (whose
+     * search input lives outside the overlay panel), the select trigger is a plain
+     * button and its dropdown is the entire interaction surface, so full-screen
+     * mode composes cleanly.
+     */
+    mobileMode = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Density applied to the dropdown's option list.
+     *
+     * The dropdown panel is portaled to the CDK overlay container, outside the
+     * component's DOM tree, so ancestor density classes cannot cascade into it.
+     * This input is forwarded to the underlying `mlv-popup`, which stamps the
+     * resolved `mlv--{density}` class on the detached panel. When omitted, the
+     * nearest ancestor `MLV_DENSITY_CONTEXT` (e.g. a `form[mlvForm]`) applies,
+     * then the global `MlvDensityService`.
+     */
+    mlvDensity = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mlvDensity" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional visible heading rendered in the full-screen sheet's header bar.
+     * When omitted, falls back to the field's `label` (or, when unset, the
+     * resolved placeholder). Only shown while the dropdown is full-screen.
+     */
+    mobileTitle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileTitle" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Resolved full-screen sheet title: explicit `mobileTitle` input
+     * takes precedence over the field's label, then the resolved placeholder.
+     */
+    _resolvedMobileTitle = computed(() => this.mobileTitle() ?? (this.label() || this._resolvedPlaceholder()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedMobileTitle" }] : /* istanbul ignore next */ []));
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_SELECT_I18N);
+    /** @private Shared responsive breakpoint state used by native `'auto'` mode. */
+    _breakpoint = inject(MlvBreakpointService);
+    _formI18n = inject(MLV_FORM_UTILS_I18N);
+    /** @protected Resolved placeholder: explicit input takes precedence over i18n default. */
+    _resolvedPlaceholder = computed(() => this.placeholder() ?? this._i18n().placeholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Accessible name forwarded to the dropdown panel's inner
+     * `role="listbox"` (`mlv-dropdown-panel`'s `ariaLabel`). Mirrors the
+     * trigger's own resolution — the visible {@link label} when set (linked
+     * there via `aria-labelledby`), else the explicit {@link ariaLabel} input
+     * (rendered as the trigger's own `aria-label`) — so the listbox shares the
+     * same accessible name as the field it belongs to. `null` when neither is
+     * set, same as an unlabelled trigger.
+     */
+    _panelAriaLabel = computed(() => this.label() || this.ariaLabel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelAriaLabel" }] : /* istanbul ignore next */ []));
+    // Override focused to also be true when the popup is open
+    focused = computed(() => this._focused() || this.isOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Latches `true` the first time a **remote** source reports
+     * `ready()`, and never flips back. It gates {@link _adapter}'s `eager` flag
+     * off for good.
+     *
+     * Without the latch, a `searchFn` bound to an inline arrow — a fresh
+     * reference on every change detection run — re-arms the adapter's lazy gate
+     * on every pass; while `eager` is still `true` (a committed value the first
+     * response did not contain) each pass would fire another request, whose
+     * result triggers the next pass. The latch bounds that to exactly one eager
+     * load per mount.
+     */
+    _eagerDone = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_eagerDone" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Shared source adapter — arrays / observables are local, a data
+     * source or a `searchFn` is remote (the source filters and the items render
+     * as-is). Template-facing: the paging bindings (`hasMore` / `loadingMore` /
+     * `loadMore`) read straight off it.
+     *
+     * The `eager` closure reads {@link hasValue} / {@link _allValuesMatched}
+     * lazily, so declaring those below is fine — the adapter's effects run after
+     * construction. A committed value with no resolvable label is what makes a
+     * `searchFn` load without waiting for the first open. The explicit type
+     * annotation breaks the inference cycle that closure creates
+     * (`_adapter` → `eager` → `_allValuesMatched` → `resolvedOptions` → `_adapter`).
+     */
+    _adapter = new MlvOptionsAdapter({
+        source: this.options,
+        searchFn: this.searchFn,
+        debounce: this.searchDebounce,
+        eager: computed(() => this.hasValue() && !this._allValuesMatched() && !this._eagerDone()),
+    });
+    resolvedOptions = computed(() => this._adapter.items().map((item) => this.toOption()(item)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether the native select is the active interaction surface.
+     * `'auto'` follows the shared `md` breakpoint and updates when the viewport
+     * changes.
+     */
+    _nativeActive = computed(() => {
+        const mode = this.native();
+        return mode === true || (mode === 'auto' && this._breakpoint.isDown('md')());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_nativeActive" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Normalized native option groups. Each option receives an
+     * internal index key so arbitrary `T` values can travel through the native
+     * select without stringifying the public form value.
+     */
+    _nativeOptionGroups = computed(() => {
+        const groups = [];
+        this.resolvedOptions().forEach((option, index) => {
+            const nativeOption = {
+                key: String(index),
+                label: option.label,
+                value: option.value,
+                group: option.group,
+                disabled: option.disabled,
+            };
+            const label = option.group || null;
+            const previous = groups[groups.length - 1];
+            if (previous?.label === label) {
+                groups[groups.length - 1] = {
+                    label,
+                    options: [...previous.options, nativeOption],
+                };
+            }
+            else {
+                groups.push({ label, options: [nativeOption] });
+            }
+        });
+        return groups;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_nativeOptionGroups" }] : /* istanbul ignore next */ []));
+    /** @protected Whether every committed value has a matching option (by `compareWith`). */
+    _allValuesMatched = computed(() => {
+        const compare = this.compareWith();
+        const opts = this.resolvedOptions();
+        return this.selectionService
+            .selectedValues()
+            .every((v) => opts.some((o) => compare(o.value, v)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_allValuesMatched" }] : /* istanbul ignore next */ []));
+    /** @protected First payload arrived and the consumer is not reporting `loading`. */
+    _ready = computed(() => this._adapter.ready() && !this.loading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ready" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Loading variant: a value is committed but no option resolves its
+     * label yet. The trigger is inert (no open) but stays tabbable, shows a
+     * spinner instead of the chevron and the i18n loading text instead of a raw
+     * value.
+     */
+    _awaitingValueLabel = computed(() => this.hasValue() && !this._ready() && !this._allValuesMatched(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_awaitingValueLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Panel spinner row: source-owned loading OR the consumer's `[loading]`. */
+    _panelLoading = computed(() => this._adapter.loading() || this.loading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelLoading" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    triggerWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Current text of the in-dropdown search field. Always `''` while the
+     * dropdown is closed — closing resets it (see `_onPopupClosed`).
+     */
+    searchQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    /**
+     * The options actually rendered in the panel: locally filtered by
+     * {@link searchQuery} while searchable over a local source, the source's
+     * items as-is otherwise (a remote source filters server-side, and a
+     * non-searchable select never filters).
+     */
+    filteredOptions = computed(() => {
+        const resolved = this.resolvedOptions();
+        if (!this.searchable() || this._adapter.mode() === 'remote')
+            return resolved;
+        return filterOptions(resolved, this.searchQuery(), this.matcher());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Shared activedescendant bookkeeping over {@link filteredOptions}
+     * (searchable mode only) — the same engine behind `mlv-combobox` and
+     * `[mlvAutocomplete]`. The count is read lazily, so it always reflects the
+     * live filtered list.
+     */
+    _activeDescendant = new MlvActiveDescendant(() => this.filteredOptions().length);
+    /**
+     * @protected Active option index handed to the panel. Pinned to `-1` while
+     * not searchable so the roving-focus panel never renders an active row.
+     */
+    _activeIndex = computed(() => this.searchable() ? this._activeDescendant.index() : -1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_activeIndex" }] : /* istanbul ignore next */ []));
+    /** @protected `aria-activedescendant` target of the search input, or `null`. */
+    _activeOptionId = computed(() => {
+        const index = this._activeDescendant.index();
+        if (index < 0 || index >= this.filteredOptions().length)
+            return null;
+        return optionId(this.listboxId(), index);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_activeOptionId" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected DOM `id` of the in-dropdown search input. Distinct from the
+     * trigger's `id()` so both can coexist, and deterministic so the field can be
+     * focus-targeted by id once the popup has opened.
+     */
+    _searchInputId = computed(() => `${this.id()}-search`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_searchInputId" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether the trigger owns the combobox semantics. `false` only
+     * while the searchable dropdown is open — the search input is the live
+     * combobox then, so exactly one `role="combobox"` is ever exposed. The
+     * trigger becomes a plain `role="button"` there rather than losing its role:
+     * a role-less `<div>` may carry no ARIA state at all, whereas a button that
+     * opened a popup legitimately keeps `aria-expanded` / `aria-haspopup` /
+     * `aria-controls`. Only `aria-required` (invalid on `button`) is dropped.
+     */
+    _outerIsCombobox = computed(() => !(this.searchable() && this.isOpen()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_outerIsCombobox" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Matched-substring emphasis for the option rows. Only while
+     * searching a **local** source — a remote source's results need not contain
+     * the query at all.
+     */
+    _highlightQuery = computed(() => this.searchable() && this._adapter.mode() === 'local'
+        ? this.searchQuery().trim()
+        : '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_highlightQuery" }] : /* istanbul ignore next */ []));
+    /** @protected Resolved search placeholder: explicit input takes precedence over i18n default. */
+    _resolvedSearchPlaceholder = computed(() => this.searchPlaceholder() ?? this._i18n().searchPlaceholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedSearchPlaceholder" }] : /* istanbul ignore next */ []));
+    /** @private ICU resolver for parameterised i18n strings. */
+    _resolver = inject(MlvI18nResolverService);
+    /**
+     * @protected Polite screen-reader announcement of the current result count.
+     * Empty unless the searchable dropdown is open, so no stale count is read out.
+     * Mirrors the visible empty-state copy rendered inside the panel.
+     */
+    _resultsAnnouncement = computed(() => {
+        if (!this.isOpen() || !this.searchable())
+            return '';
+        const count = this.filteredOptions().length;
+        if (count === 0)
+            return this._i18n().noResults;
+        return this._resolver.resolve(this._i18n(), 'resultsAvailable', { count });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resultsAnnouncement" }] : /* istanbul ignore next */ []));
+    /** The HTML `id` assigned to the inner listbox element for `aria-controls` linking. */
+    listboxId = computed(() => `${this.id()}-listbox`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
+    /**
+     * The HTML `id` assigned to the visible `<mlv-label>` element. The trigger
+     * references it via `aria-labelledby` (a `<label for>` cannot name a `<div>`).
+     */
+    labelId = computed(() => `${this.id()}-label`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    dropdownPositions = [
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetY: 8,
+        },
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetY: -8,
+        },
+    ];
+    selectionService = inject(MlvSelectionService);
+    itemTemplate = contentChild(MlvSelectItemTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    selectedTemplate = contentChild(MlvSelectSelectedTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedTemplate" }] : /* istanbul ignore next */ []));
+    /** @private Reference to the trigger element, used to restore focus after selection. */
+    _triggerElement = viewChild('trigger', { ...(ngDevMode ? { debugName: "_triggerElement" } : /* istanbul ignore next */ {}), read: ElementRef });
+    /** @private Reference to the transparent native select when native mode is active. */
+    _nativeSelect = viewChild('nativeSelect', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_nativeSelect" }] : /* istanbul ignore next */ []));
+    /** @private Reference to the rendered dropdown panel component. */
+    _dropdownPanel = viewChild(MlvDropdownPanel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dropdownPanel" }] : /* istanbul ignore next */ []));
+    /** @private Raw values last written through a forms binding, pre-normalisation. */
+    _pendingValues = [];
+    constructor() {
+        super();
+        effect(() => {
+            this.selectionService.multiple.set(this.multiple());
+        });
+        effect(() => {
+            this.selectionService.compareWith.set(this.compareWith());
+        });
+        effect(() => {
+            if (this._nativeActive()) {
+                untracked(() => {
+                    this.isOpen.set(false);
+                    this._adapter.ensureLoaded();
+                });
+            }
+        });
+        effect(() => {
+            this._pendingValues = toAriaValues(this.value());
+            // Reads resolvedOptions()/compareWith() → re-runs when options arrive later.
+            this._applyPendingValues();
+        });
+        // A `searchFn` is lazy: the first open is what triggers its initial load.
+        effect(() => {
+            if (this.isOpen())
+                untracked(() => this._adapter.ensureLoaded());
+        });
+        // Latch the eager gate off once a *remote* source has answered — see
+        // `_eagerDone`. The mode check matters: an array source is `ready()` from
+        // the first tick, so latching on readiness alone would disarm the gate
+        // before a `searchFn` bound through a signal/late input ever became the
+        // active branch.
+        effect(() => {
+            if (this._adapter.mode() === 'remote' && this._adapter.ready()) {
+                untracked(() => this._eagerDone.set(true));
+            }
+        });
+        // A remote response (or a narrowing local filter) can shrink the list out
+        // from under a stale active index. Drop it rather than leave
+        // `aria-activedescendant` pointing at a row that no longer exists — and so
+        // the next arrow press restarts from the top of the new list.
+        effect(() => {
+            const count = this.filteredOptions().length;
+            untracked(() => {
+                if (this._activeDescendant.index() >= count) {
+                    this._activeDescendant.reset();
+                }
+            });
+        });
+    }
+    get displayValue() {
+        const values = this.selectionService.selectedValues();
+        if (values.length === 0)
+            return '';
+        const transform = this.toOption();
+        if (values.length === 1)
+            return transform(values[0]).label;
+        return `${values.length} items selected`;
+    }
+    /**
+     * Toggles the dropdown. Closing is always allowed — a panel opened before the
+     * control turned inert (a late `[loading]`, a value written under an open
+     * list) must stay dismissable from its own trigger; only opening is gated.
+     */
+    toggleDropdown() {
+        if (this._nativeActive()) {
+            this._nativeSelect()?.nativeElement.focus();
+            return;
+        }
+        if (this.isOpen()) {
+            this.isOpen.set(false);
+            return;
+        }
+        if (this._isInert())
+            return;
+        this.isOpen.set(true);
+    }
+    setInitialFocus() {
+        this._triggerElement()?.nativeElement.focus();
+    }
+    /**
+     * Focuses the trigger and opens the dropdown. Focus moves even while merely
+     * awaiting a value's label — this is the label's click target, and a click on
+     * a field's label must always land the caret on that field; only the open is
+     * suppressed. A **disabled** field is the exception: it takes neither the
+     * caret nor the open (the trigger's `tabindex="-1"` would still accept
+     * programmatic focus).
+     */
+    openDropdown() {
+        if (this.computedDisabled())
+            return;
+        if (this._nativeActive()) {
+            this._nativeSelect()?.nativeElement.focus();
+            return;
+        }
+        this.setInitialFocus();
+        if (this._isInert())
+            return;
+        this.isOpen.set(true);
+    }
+    /**
+     * @protected Trigger keyboard open. ArrowUp / ArrowDown open the dropdown and
+     * move focus onto the first option (`focusFirst`); Home / End only open it,
+     * leaving the roving focus where the panel puts it. No-op while inert, but the
+     * default is always prevented so a still-resolving trigger never scrolls the
+     * page instead.
+     *
+     * The focus request is roving-mode only: a searchable dropdown hands focus to
+     * its search input instead (`_onPopupOpened`), and pulling it onto an option
+     * would break the activedescendant model.
+     */
+    _openFromKey(event, focusFirst) {
+        event.preventDefault();
+        if (this._nativeActive()) {
+            this._nativeSelect()?.nativeElement.focus();
+            return;
+        }
+        if (this._isInert())
+            return;
+        this.isOpen.set(true);
+        if (focusFirst && !this.searchable()) {
+            this.selectionService.requestFocusFirst();
+        }
+    }
+    /**
+     * @protected Whether every open / interaction path is suppressed: the control
+     * is disabled, or a committed value's label is still resolving (the trigger
+     * stays tabbable and readable, but must not open a list that cannot yet show
+     * the current selection).
+     */
+    _isInert() {
+        return this.computedDisabled() || this._awaitingValueLabel();
+    }
+    /**
+     * Handles a selection change emitted by the aria listbox panel. The panel
+     * always emits the flat `V[]` array that `@angular/aria`'s `ngListbox`
+     * models; {@link fromAriaValues} collapses it back to the public forms value
+     * shape (`T` for single-select, `T[]` for multi-select, `null` when cleared).
+     *
+     * aria re-emits its value whenever the *rendered* option set changes (an
+     * async load landing while the panel is open, later search filtering) — those
+     * reconciliation emits are ignored via the shared guard, so they can never
+     * wipe the committed value. A genuine multi-select pick re-adds the committed
+     * values aria dropped only because their option is not rendered.
+     */
+    selectOption(values) {
+        const committed = this.selectionService.selectedValues();
+        const visible = this._visibleValues();
+        const compare = this.compareWith();
+        if (isReconciliationEmit(values, committed, visible, compare))
+            return;
+        const next = this.multiple()
+            ? [
+                ...values,
+                ...filteredOutCommitted(values, committed, visible, compare),
+            ]
+            : [...values];
+        this._commitSelection(next);
+    }
+    /**
+     * @private Writes a genuine selection — the single commit path shared by the
+     * panel's `valueChange` and the search field's Enter. Single-select closes the
+     * dropdown and returns focus to the trigger; multi-select stays open so the
+     * next option can be picked.
+     */
+    _commitSelection(next, restoreFocus = true) {
+        if (!this.multiple() && restoreFocus) {
+            this.isOpen.set(false);
+            this.setInitialFocus();
+        }
+        this.value.set(fromAriaValues(next, this.multiple()));
+        this.selectionService.setValues(next);
+        this._markTouched();
+    }
+    /**
+     * @protected Values of the options currently rendered in the panel (the
+     * reconciliation guard's "visible" set) — the filtered set while searching.
+     */
+    _visibleValues() {
+        return this.filteredOptions().map((o) => o.value);
+    }
+    // ─── In-dropdown search field ────────────────────────────────────────────
+    /**
+     * @protected Search-field input. Local sources narrow {@link filteredOptions}
+     * instantly; remote ones are asked (debounced) instead, because filtering
+     * locally as well would hide server results and empty the list while a newer
+     * query is still in flight.
+     */
+    _onSearchInput(event) {
+        const value = event.target.value;
+        this.searchQuery.set(value);
+        this._activeDescendant.reset();
+        if (this._adapter.mode() === 'remote')
+            this._adapter.search(value);
+    }
+    /** @protected ArrowDown — activate the next option (wrap-around). */
+    _onSearchArrowDown(event) {
+        event.preventDefault();
+        this._activeDescendant.move(1);
+    }
+    /** @protected ArrowUp — activate the previous option (wrap-around). */
+    _onSearchArrowUp(event) {
+        event.preventDefault();
+        this._activeDescendant.move(-1);
+    }
+    /** @protected Home — activate the first option. */
+    _onSearchHome(event) {
+        event.preventDefault();
+        this._activeDescendant.first();
+    }
+    /** @protected End — activate the last option. */
+    _onSearchEnd(event) {
+        event.preventDefault();
+        this._activeDescendant.last();
+    }
+    /**
+     * @protected Enter — commit the active option (APG "Enter selects active").
+     * No-op when nothing is active. Multi-select toggles the option and resets the
+     * active index so the narrowed list is navigated from the top again.
+     */
+    _onSearchEnter(event) {
+        event.preventDefault();
+        const index = this._activeDescendant.index();
+        const opts = this.filteredOptions();
+        if (index < 0 || index >= opts.length)
+            return;
+        const picked = opts[index].value;
+        const compare = this.compareWith();
+        const committed = this.selectionService.selectedValues();
+        const next = this.multiple()
+            ? committed.some((v) => compare(v, picked))
+                ? committed.filter((v) => !compare(v, picked))
+                : [...committed, picked]
+            : [picked];
+        this._commitSelection(next);
+        if (this.multiple())
+            this._activeDescendant.reset();
+    }
+    /** @protected Escape — closes the dropdown (the close resets the query). */
+    _onSearchEscape(event) {
+        event.preventDefault();
+        this.isOpen.set(false);
+    }
+    /**
+     * @protected Tab / Shift+Tab — closes the dropdown. The default is prevented
+     * because the search field lives in a detached overlay: letting Tab run would
+     * move focus to whatever follows the overlay in the DOM rather than to the
+     * field after the select. `_onPopupClosed` puts focus back on the trigger.
+     */
+    _onSearchTab(event) {
+        event.preventDefault();
+        this.isOpen.set(false);
+    }
+    /**
+     * @protected Panel `mousedown`. In searchable mode the default is prevented
+     * so pointing at an option (or the scrollbar) cannot blur the search input —
+     * the activedescendant model and the open state both depend on focus staying
+     * there. It must stay a **method**: an inline `searchable() && preventDefault()`
+     * expression evaluates to `false` on the non-searchable path, and Angular
+     * treats a `false` listener return as `preventDefault()`, which would swallow
+     * the default for every select dropdown (breaking roving focus transfer to a
+     * clicked option and text selection).
+     */
+    _onPanelMousedown(event) {
+        if (this.searchable())
+            event.preventDefault();
+    }
+    /** @protected Handles a value change from the native select. */
+    _onNativeChange(event) {
+        const nativeSelect = event.target;
+        const next = Array.from(nativeSelect.selectedOptions)
+            .map((option) => this._nativeOptionFromKey(option.value))
+            .filter((option) => option !== null)
+            .map((option) => option.value);
+        this._commitSelection(next, false);
+    }
+    /** @protected Focuses the active interaction surface when the label is clicked. */
+    _onLabelClick() {
+        if (this._nativeActive()) {
+            this._nativeSelect()?.nativeElement.focus();
+            return;
+        }
+        this.openDropdown();
+    }
+    /** @protected Marks the native select as focused for the form wrapper. */
+    _onNativeFocus() {
+        this.setFocused(true);
+    }
+    /** @protected Marks the native select blur as the end of field interaction. */
+    _onNativeBlur() {
+        this.setFocused(false);
+        this._markTouched();
+    }
+    /** @protected Whether a normalized option matches one of the committed values. */
+    _isNativeOptionSelected(value) {
+        const compare = this.compareWith();
+        return this.selectionService
+            .selectedValues()
+            .some((selected) => compare(selected, value));
+    }
+    /** @private Resolves an internal native option key back to its public option. */
+    _nativeOptionFromKey(key) {
+        const index = Number(key);
+        if (!Number.isInteger(index))
+            return null;
+        return this.resolvedOptions()[index] ?? null;
+    }
+    /**
+     * @protected After the popup opens: hand focus to the search field. The input
+     * is stamped inside the overlay (a detached embedded view), so it is not
+     * reachable through this component's view queries — locate it by its
+     * deterministic id, the same pattern `mlv-combobox` / `mlv-day-picker` use.
+     * The lazy first load is triggered by the `isOpen` effect, not here.
+     */
+    _onPopupOpened() {
+        if (!this.searchable())
+            return;
+        document.getElementById(this._searchInputId())?.focus();
+    }
+    /**
+     * @protected After the popup closes: restore focus to the trigger and (when
+     * searchable) drop the query, so the next open starts from the full list. A
+     * remote source is re-asked for `''` once, otherwise a blank search field
+     * would sit above a list still filtered by the previous query.
+     */
+    _onPopupClosed() {
+        this.setInitialFocus();
+        if (!this.searchable())
+            return;
+        this._activeDescendant.reset();
+        if (this.searchQuery() !== '') {
+            this.searchQuery.set('');
+            if (this._adapter.mode() === 'remote')
+                this._adapter.search('');
+        }
+    }
+    setFocused(isFocused = true) {
+        this._focused.set(isFocused);
+    }
+    /** @protected Marks the select touched when its trigger loses focus. */
+    _onTriggerBlur() {
+        this.setFocused(false);
+        this._markTouched();
+    }
+    updateTriggerWidth(evt) {
+        this.triggerWidth.set(evt[0].target.getBoundingClientRect().width);
+    }
+    /** Whether the control holds a clearable value — At least one option selected. */
+    hasValue = computed(() => this.selectionService.selectedValues().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /**
+     * The select renders its own clear button overlaid in the trigger row,
+     * before the chevron — the wrapper must not render its trailing copy.
+     */
+    ownsClearButton = computed(() => true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownsClearButton" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether the inline clear affordance is visible: clearable, a
+     * value present, and the control interactive. Shared by the template's @if
+     * and the trigger's padding-reserve class.
+     *
+     * Deliberately **not** gated on {@link _awaitingValueLabel}: the loading
+     * variant makes every open path inert, so the clear button is the only
+     * escape hatch left when a source never answers. `onClear()` works there —
+     * dropping the value clears `hasValue()`, which ends the variant.
+     */
+    _showClear = computed(() => this.clearable() &&
+        this.hasValue() &&
+        !this.computedDisabled() &&
+        !this.readonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showClear" }] : /* istanbul ignore next */ []));
+    /** Clears the selection, writes the cleared forms value, and marks touched. */
+    onClear() {
+        this.selectionService.clear();
+        this.value.set(fromAriaValues([], this.multiple()));
+        this._markTouched();
+    }
+    /**
+     * @private Syncs the selection service (the aria listbox panel's `value`
+     * source) from the values last written through a forms binding. Each pending
+     * value is matched against the current options via {@link compareWith} and
+     * replaced by the option's own instance, so the check-marks and the displayed
+     * label agree — and a value written before its options exist resolves as soon
+     * as they arrive (the caller effect tracks `resolvedOptions()`).
+     */
+    _applyPendingValues() {
+        const compare = this.compareWith();
+        const opts = this.resolvedOptions();
+        const normalized = this._pendingValues.map((v) => opts.find((o) => compare(o.value, v))?.value ?? v);
+        this.selectionService.setValues(normalized);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvSelect, isStandalone: true, selector: "mlv-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, searchDebounce: { classPropertyName: "searchDebounce", publicName: "searchDebounce", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, native: { classPropertyName: "native", publicName: "native", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, toOption: { classPropertyName: "toOption", publicName: "toOption", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, matcher: { classPropertyName: "matcher", publicName: "matcher", isSignal: true, isRequired: false, transformFunction: null }, mobileMode: { classPropertyName: "mobileMode", publicName: "mobileMode", isSignal: true, isRequired: false, transformFunction: null }, mlvDensity: { classPropertyName: "mlvDensity", publicName: "mlvDensity", isSignal: true, isRequired: false, transformFunction: null }, mobileTitle: { classPropertyName: "mobileTitle", publicName: "mobileTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "\"mlv-select--\" + resolvedState()", "class.mlv-select--disabled": "computedDisabled()", "class.mlv-select--open": "isOpen()", "class.mlv-select--native": "_nativeActive()", "class.mlv-select--loading": "_awaitingValueLabel()" }, classAttribute: "mlv-select" }, providers: [
+            MlvSelectionService,
+            {
+                provide: MLV_FORM_CONTROL,
+                useExisting: forwardRef(() => MlvSelect),
+            },
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: MlvSelectItemTemplate, descendants: true, isSignal: true }, { propertyName: "selectedTemplate", first: true, predicate: MlvSelectSelectedTemplate, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_triggerElement", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_nativeSelect", first: true, predicate: ["nativeSelect"], descendants: true, isSignal: true }, { propertyName: "_dropdownPanel", first: true, predicate: MlvDropdownPanel, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mlv-form-control-wrapper>\n  @if (label() || hint()) {\n  <mlv-label\n    [id]=\"labelId()\"\n    [for]=\"id()\"\n    [required]=\"required()\"\n    (click)=\"_onLabelClick()\"\n  >\n    {{ label() }} @if (hint()) {\n    <mlv-hint>{{ hint() }}</mlv-hint>\n    }\n  </mlv-label>\n  }\n\n  <ng-template mlvFormControlWrapperControl>\n    <mlv-popup-container class=\"mlv-select__popup-container\">\n      <div\n        class=\"mlv-select__trigger\"\n        [class.mlv-select__trigger--with-clear]=\"_showClear()\"\n        [id]=\"_nativeActive() ? null : id()\"\n        [hostRole]=\"_nativeActive() ? null : (_outerIsCombobox() ? 'combobox' : 'button')\"\n        [disabled]=\"computedDisabled() || _nativeActive()\"\n        [attr.aria-hidden]=\"_nativeActive() ? 'true' : null\"\n        [attr.aria-expanded]=\"_nativeActive() ? null : isOpen()\"\n        [attr.aria-haspopup]=\"_nativeActive() ? null : 'listbox'\"\n        [attr.aria-controls]=\"_nativeActive() ? null : (isOpen() ? listboxId() : null)\"\n        [attr.aria-disabled]=\"_nativeActive() ? null : (computedDisabled() || null)\"\n        [attr.aria-labelledby]=\"_nativeActive() ? null : (label() ? labelId() : null)\"\n        [attr.aria-label]=\"_nativeActive() ? null : (label() ? null : ariaLabel())\"\n        [attr.aria-required]=\"_nativeActive() ? null : (_outerIsCombobox() && required() ? true : null)\"\n        [attr.aria-describedby]=\"_nativeActive() ? null : _describedBy()\"\n        [attr.aria-busy]=\"_nativeActive() ? null : (_awaitingValueLabel() || null)\"\n        mlvResizeObserver\n        #trigger\n        (resized)=\"updateTriggerWidth($event)\"\n        (mlvClick)=\"toggleDropdown()\"\n        (keydown.arrowDown)=\"_openFromKey($event, true)\"\n        (keydown.arrowUp)=\"_openFromKey($event, true)\"\n        (keydown.home)=\"_openFromKey($event, false)\"\n        (keydown.end)=\"_openFromKey($event, false)\"\n        (keydown.escape)=\"isOpen.set(false)\"\n        (focus)=\"setFocused(true)\"\n        (blur)=\"_onTriggerBlur()\"\n      >\n        <!-- While a committed value's label is still resolving the trigger shows\n             the i18n loading text instead of a raw (often unreadable) value. -->\n        @if (_awaitingValueLabel()) {\n        <span class=\"mlv-select__placeholder\">{{ _i18n().loading }}</span>\n        } @else if (displayValue) {\n        <span class=\"mlv-select__value\">\n          @if (!_nativeActive() && selectedTemplate(); as templateTpl) {\n          <ng-container\n            *ngTemplateOutlet=\"templateTpl.templateRef; context: { $implicit: selectionService.selectedValues() }\"\n          />\n          } @else { {{ displayValue }} }\n        </span>\n        } @else {\n        <span class=\"mlv-select__placeholder\"\n          >{{ _resolvedPlaceholder() }}</span\n        >\n        }\n        <span class=\"mlv-select__arrow\">\n          <!-- The chevron is replaced by a spinner while the value's label\n               resolves \u2014 the trigger is inert then, so the affordance would be\n               a dead control. -->\n          @if (_awaitingValueLabel()) {\n          <mlv-loader\n            variant=\"circle\"\n            indeterminate\n            [size]=\"18\"\n            [strokeWidth]=\"2\"\n            [ariaLabel]=\"_i18n().loading\"\n          />\n          } @else {\n          <svg size=\"20\" lucideChevronDown></svg>\n          }\n        </span>\n      </div>\n\n      @if (_nativeActive()) {\n      <select\n        #nativeSelect\n        class=\"mlv-select__native\"\n        [id]=\"id()\"\n        [multiple]=\"multiple()\"\n        [required]=\"required()\"\n        [disabled]=\"computedDisabled()\"\n        [attr.aria-labelledby]=\"label() ? labelId() : null\"\n        [attr.aria-label]=\"label() ? null : ariaLabel()\"\n        [attr.aria-describedby]=\"_describedBy()\"\n        [attr.aria-busy]=\"_awaitingValueLabel() || null\"\n        (focus)=\"_onNativeFocus()\"\n        (blur)=\"_onNativeBlur()\"\n        (change)=\"_onNativeChange($event)\"\n      >\n        @if (!multiple()) {\n        <option value=\"\" disabled [selected]=\"!hasValue()\">\n          {{ _resolvedPlaceholder() }}\n        </option>\n        }\n        @for (group of _nativeOptionGroups(); track $index) {\n        @if (group.label) {\n        <optgroup [label]=\"group.label\">\n          @for (option of group.options; track option.key) {\n          <option\n            [value]=\"option.key\"\n            [disabled]=\"option.disabled || false\"\n            [selected]=\"_isNativeOptionSelected(option.value)\"\n          >\n            {{ option.label }}\n          </option>\n          }\n        </optgroup>\n        } @else {\n        @for (option of group.options; track option.key) {\n        <option\n          [value]=\"option.key\"\n          [disabled]=\"option.disabled || false\"\n          [selected]=\"_isNativeOptionSelected(option.value)\"\n        >\n          {{ option.label }}\n        </option>\n        }\n        }\n        }\n      </select>\n      }\n\n      @if (_showClear()) {\n      <!-- DOM sibling of the role=\"combobox\" trigger (a button nested inside it\n           would trip nested-interactive); CSS overlays it just BEFORE the\n           chevron. Tab order: trigger, then clear. -->\n      <mlv-button-close\n        class=\"mlv-select__clear\"\n        (click)=\"onClear()\"\n        mlvDensity=\"tight\"\n        [ariaLabel]=\"_formI18n().clear\"\n      />\n      }\n\n      <mlv-popup\n        [(opened)]=\"isOpen\"\n        [width]=\"triggerWidth()\"\n        [hasShadow]=\"true\"\n        [flexibleDimensions]=\"true\"\n        [positions]=\"dropdownPositions\"\n        [mobileMode]=\"mobileMode()\"\n        [mobileTitle]=\"_resolvedMobileTitle()\"\n        [mlvDensity]=\"mlvDensity()\"\n        class=\"mlv-select__popup\"\n        (afterOpened)=\"_onPopupOpened()\"\n        (afterClosed)=\"_onPopupClosed()\"\n      >\n        @if (searchable()) {\n        <!-- Pinned first row of the dropdown: projected into the popup's pinned\n             slot, so it sits above the scroll region and a long option list can\n             never push it out of view. While the dropdown is open this input \u2014\n             not the trigger \u2014 is the single exposed role=\"combobox\". -->\n        <ng-template mlvPopupPinnedContent>\n          <div class=\"mlv-select__search\">\n            <svg\n              class=\"mlv-select__search-icon\"\n              lucideSearch\n              size=\"16\"\n              aria-hidden=\"true\"\n            ></svg>\n            <mlv-input\n              bare\n              class=\"mlv-select__search-input\"\n              [id]=\"_searchInputId()\"\n              [role]=\"'combobox'\"\n              [ariaExpanded]=\"true\"\n              [ariaHasPopup]=\"'listbox'\"\n              [ariaAutocomplete]=\"'list'\"\n              [ariaControls]=\"listboxId()\"\n              [ariaActiveDescendant]=\"_activeOptionId()\"\n              [ariaLabel]=\"label() || _resolvedPlaceholder()\"\n              [required]=\"required()\"\n              [placeholder]=\"_resolvedSearchPlaceholder()\"\n              [value]=\"searchQuery()\"\n              [autocomplete]=\"'off'\"\n              (input)=\"_onSearchInput($event)\"\n              (keydown.arrowDown)=\"_onSearchArrowDown($event)\"\n              (keydown.arrowUp)=\"_onSearchArrowUp($event)\"\n              (keydown.home)=\"_onSearchHome($event)\"\n              (keydown.end)=\"_onSearchEnd($event)\"\n              (keydown.enter)=\"_onSearchEnter($event)\"\n              (keydown.escape)=\"_onSearchEscape($event)\"\n              (keydown.tab)=\"_onSearchTab($event)\"\n              (keydown.shift.tab)=\"_onSearchTab($event)\"\n            />\n          </div>\n        </ng-template>\n        }\n\n        <ng-template mlvPopupContent>\n          <!-- Keep DOM focus in the search input while pointing at options\n               (activedescendant model): prevent the mousedown from blurring it\n               so the active index and the open state survive option clicks.\n               Routed through a method, not an inline `searchable() && \u2026`\n               expression \u2014 a `false` listener return means preventDefault() to\n               Angular, which would swallow the default on the non-searchable\n               path too. The pinned search row deliberately stays outside this\n               wrapper: swallowing its mousedown would make the input\n               unclickable. -->\n          <div\n            class=\"mlv-select__panel\"\n            (mousedown)=\"_onPanelMousedown($event)\"\n          >\n            <mlv-dropdown-panel\n              scrollMode=\"parent\"\n              [options]=\"filteredOptions()\"\n              [multiple]=\"multiple()\"\n              [selectedValues]=\"selectionService.selectedValues()\"\n              [itemTemplate]=\"itemTemplate()?.templateRef ?? null\"\n              [listboxId]=\"listboxId()\"\n              [ariaLabel]=\"_panelAriaLabel()\"\n              [focusMode]=\"searchable() ? 'activedescendant' : 'roving'\"\n              [activeIndex]=\"_activeIndex()\"\n              [highlightQuery]=\"_highlightQuery()\"\n              [loading]=\"_panelLoading()\"\n              [loadingText]=\"_i18n().loading\"\n              [hasMore]=\"_adapter.hasMore()\"\n              [loadingMore]=\"_adapter.loadingMore()\"\n              (loadMore)=\"_adapter.loadMore()\"\n              (valueChange)=\"selectOption($event)\"\n            >\n              @if (searchable()) {\n              <div class=\"mlv-select__empty\">{{ _i18n().noResults }}</div>\n              }\n            </mlv-dropdown-panel>\n          </div>\n        </ng-template>\n      </mlv-popup>\n    </mlv-popup-container>\n\n    <!-- Polite announcement of the current result count for screen-reader\n         users (searchable + open only). -->\n    <div class=\"mlv-select__sr-status\" aria-live=\"polite\" role=\"status\">\n      {{ _resultsAnnouncement() }}\n    </div>\n  </ng-template>\n\n  @if (description()) {\n  <mlv-description [id]=\"_descriptionId()\">{{ description() }}</mlv-description>\n  } @if (message()) {\n  <mlv-message [id]=\"_messageId()\" [state]=\"resolvedState()\">\n    {{ message() }}\n  </mlv-message>\n  }\n</mlv-form-control-wrapper>\n", styles: ["@layer mlv.components{.mlv-select{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-select *{box-sizing:border-box}.mlv-select__popup-container{display:flex;flex-grow:1;height:100%;position:relative}.mlv-select__clear{position:absolute;top:50%;inset-inline-end:2rem;transform:translateY(-50%);display:inline-flex}.mlv-select__trigger--with-clear{padding-inline-end:3.5rem}.mlv-select .mlv-form-control-wrapper__control-container{padding:0}.mlv-select__trigger{display:flex;width:100%;justify-content:space-between;align-items:center;cursor:pointer;outline:none;padding:var(--mlv-control-padding);height:100%}.mlv-select__native{position:absolute;inset:0;z-index:1;width:100%;height:100%;cursor:pointer;opacity:0}.mlv-select__arrow{width:var(--form-ctrl-icon-size, 1.25rem);height:var(--form-ctrl-icon-size, 1.25rem);display:block;transform-origin:center;transition:color var(--mlv-duration-fast) var(--mlv-ease-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-out-strong);color:var(--mlv-text-tertiary)}.mlv-select__arrow svg{width:100%;height:100%}.mlv-select__value{color:var(--mlv-text-primary)}.mlv-select__placeholder{color:var(--mlv-text-secondary)}.mlv-select--open .mlv-select__arrow,.mlv-select:hover .mlv-select__arrow,.mlv-form-control-wrapper--focused .mlv-select__arrow{color:var(--mlv-text-primary)}.mlv-select--open .mlv-select__arrow{transform:rotate(180deg)}.mlv-select--native .mlv-select__trigger{pointer-events:none}.mlv-select--native .mlv-select__clear{z-index:2}.mlv-select__search{display:flex;align-items:center;gap:var(--mlv-spacing-2);padding:var(--mlv-spacing-2) var(--mlv-spacing-3);background:var(--mlv-background-raised);border-bottom:var(--mlv-stroke-width) solid var(--mlv-border-subtle)}.mlv-select__search-icon{flex-shrink:0;color:var(--mlv-text-tertiary)}.mlv-select__search-input{flex:1;min-width:0}.mlv-select__empty{padding:var(--mlv-spacing-2) var(--mlv-spacing-3);color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size)}.mlv-select__sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mlv-select--loading .mlv-select__trigger{cursor:progress}.mlv-select--loading .mlv-select__arrow{display:inline-flex;align-items:center;justify-content:center}@media(prefers-reduced-motion:reduce){.mlv-select,.mlv-select *,.mlv-select:before,.mlv-select:after,[class^=mlv-select__],[class*=\" mlv-select__\"],[class^=mlv-select--],[class*=\" mlv-select--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MlvPopup, selector: "mlv-popup", inputs: ["position", "positions", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasArrow", "hasShadow", "class", "mlvDensity", "flexibleDimensions", "scrollStrategy", "hasBackdrop", "restrictPosition", "panelRole", "modal", "ariaLabel", "dismissExcludeElements", "mobileMode", "mobileBreakpoint", "mobileTitle", "mobileCloseLabel", "opened"], outputs: ["openedChange", "afterOpened", "afterClosed"] }, { kind: "directive", type: MlvPopupContent, selector: "[mlvPopupContent]" }, { kind: "component", type: MlvPopupContainer, selector: "mlv-popup-container" }, { kind: "directive", type: MlvPopupPinnedContent, selector: "[mlvPopupPinnedContent]" }, { kind: "component", type: MlvDescription, selector: "mlv-description" }, { kind: "component", type: MlvFormControlWrapper, selector: "mlv-form-control-wrapper", outputs: ["clear"] }, { kind: "component", type: MlvHint, selector: "mlv-hint" }, { kind: "component", type: MlvLabel, selector: "mlv-label", inputs: ["for", "required"] }, { kind: "directive", type: MlvFormControlWrapperControl, selector: "[mlvFormControlWrapperControl]" }, { kind: "component", type: MlvMessage, selector: "mlv-message", inputs: ["state"] }, { kind: "directive", type: MlvClick, selector: "[mlvClick]", inputs: ["disabled", "hostRole"], outputs: ["mlvClick"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "directive", type: MlvResizeObserver, selector: "[mlvResizeObserver]", outputs: ["resized"], exportAs: ["uiResizeObserver"] }, { kind: "component", type: MlvDropdownPanel, selector: "mlv-dropdown-panel", inputs: ["scrollMode", "minHeight", "maxHeight", "options", "multiple", "selectedValues", "itemTemplate", "focusMode", "activeIndex", "listboxId", "ariaLabel", "highlightQuery", "loading", "loadingText", "loadingMore", "hasMore", "infiniteScrollThreshold"], outputs: ["loadMore", "valueChange"] }, { kind: "component", type: MlvButtonClose, selector: "mlv-button-close", inputs: ["variant", "shape", "ariaLabel"] }, { kind: "component", type: 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: MlvLoader, selector: "mlv-loader", inputs: ["variant", "tone", "value", "max", "indeterminate", "size", "strokeWidth", "ariaLabel", "showHint", "color", "trackColor", "glow"] }, { kind: "component", type: LucideSearch, selector: "svg[lucideSearch]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-select', imports: [
+                        NgTemplateOutlet,
+                        MlvPopup,
+                        MlvPopupContent,
+                        MlvPopupContainer,
+                        MlvPopupPinnedContent,
+                        MlvDescription,
+                        MlvFormControlWrapper,
+                        MlvHint,
+                        MlvLabel,
+                        MlvFormControlWrapperControl,
+                        MlvMessage,
+                        MlvClick,
+                        LucideChevronDown,
+                        MlvResizeObserver,
+                        MlvDropdownPanel,
+                        MlvButtonClose,
+                        MlvInput,
+                        MlvLoader,
+                        LucideSearch,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        MlvSelectionService,
+                        {
+                            provide: MLV_FORM_CONTROL,
+                            useExisting: forwardRef(() => MlvSelect),
+                        },
+                    ], host: {
+                        class: 'mlv-select',
+                        '[class]': '"mlv-select--" + resolvedState()',
+                        '[class.mlv-select--disabled]': 'computedDisabled()',
+                        '[class.mlv-select--open]': 'isOpen()',
+                        '[class.mlv-select--native]': '_nativeActive()',
+                        '[class.mlv-select--loading]': '_awaitingValueLabel()',
+                    }, template: "<mlv-form-control-wrapper>\n  @if (label() || hint()) {\n  <mlv-label\n    [id]=\"labelId()\"\n    [for]=\"id()\"\n    [required]=\"required()\"\n    (click)=\"_onLabelClick()\"\n  >\n    {{ label() }} @if (hint()) {\n    <mlv-hint>{{ hint() }}</mlv-hint>\n    }\n  </mlv-label>\n  }\n\n  <ng-template mlvFormControlWrapperControl>\n    <mlv-popup-container class=\"mlv-select__popup-container\">\n      <div\n        class=\"mlv-select__trigger\"\n        [class.mlv-select__trigger--with-clear]=\"_showClear()\"\n        [id]=\"_nativeActive() ? null : id()\"\n        [hostRole]=\"_nativeActive() ? null : (_outerIsCombobox() ? 'combobox' : 'button')\"\n        [disabled]=\"computedDisabled() || _nativeActive()\"\n        [attr.aria-hidden]=\"_nativeActive() ? 'true' : null\"\n        [attr.aria-expanded]=\"_nativeActive() ? null : isOpen()\"\n        [attr.aria-haspopup]=\"_nativeActive() ? null : 'listbox'\"\n        [attr.aria-controls]=\"_nativeActive() ? null : (isOpen() ? listboxId() : null)\"\n        [attr.aria-disabled]=\"_nativeActive() ? null : (computedDisabled() || null)\"\n        [attr.aria-labelledby]=\"_nativeActive() ? null : (label() ? labelId() : null)\"\n        [attr.aria-label]=\"_nativeActive() ? null : (label() ? null : ariaLabel())\"\n        [attr.aria-required]=\"_nativeActive() ? null : (_outerIsCombobox() && required() ? true : null)\"\n        [attr.aria-describedby]=\"_nativeActive() ? null : _describedBy()\"\n        [attr.aria-busy]=\"_nativeActive() ? null : (_awaitingValueLabel() || null)\"\n        mlvResizeObserver\n        #trigger\n        (resized)=\"updateTriggerWidth($event)\"\n        (mlvClick)=\"toggleDropdown()\"\n        (keydown.arrowDown)=\"_openFromKey($event, true)\"\n        (keydown.arrowUp)=\"_openFromKey($event, true)\"\n        (keydown.home)=\"_openFromKey($event, false)\"\n        (keydown.end)=\"_openFromKey($event, false)\"\n        (keydown.escape)=\"isOpen.set(false)\"\n        (focus)=\"setFocused(true)\"\n        (blur)=\"_onTriggerBlur()\"\n      >\n        <!-- While a committed value's label is still resolving the trigger shows\n             the i18n loading text instead of a raw (often unreadable) value. -->\n        @if (_awaitingValueLabel()) {\n        <span class=\"mlv-select__placeholder\">{{ _i18n().loading }}</span>\n        } @else if (displayValue) {\n        <span class=\"mlv-select__value\">\n          @if (!_nativeActive() && selectedTemplate(); as templateTpl) {\n          <ng-container\n            *ngTemplateOutlet=\"templateTpl.templateRef; context: { $implicit: selectionService.selectedValues() }\"\n          />\n          } @else { {{ displayValue }} }\n        </span>\n        } @else {\n        <span class=\"mlv-select__placeholder\"\n          >{{ _resolvedPlaceholder() }}</span\n        >\n        }\n        <span class=\"mlv-select__arrow\">\n          <!-- The chevron is replaced by a spinner while the value's label\n               resolves \u2014 the trigger is inert then, so the affordance would be\n               a dead control. -->\n          @if (_awaitingValueLabel()) {\n          <mlv-loader\n            variant=\"circle\"\n            indeterminate\n            [size]=\"18\"\n            [strokeWidth]=\"2\"\n            [ariaLabel]=\"_i18n().loading\"\n          />\n          } @else {\n          <svg size=\"20\" lucideChevronDown></svg>\n          }\n        </span>\n      </div>\n\n      @if (_nativeActive()) {\n      <select\n        #nativeSelect\n        class=\"mlv-select__native\"\n        [id]=\"id()\"\n        [multiple]=\"multiple()\"\n        [required]=\"required()\"\n        [disabled]=\"computedDisabled()\"\n        [attr.aria-labelledby]=\"label() ? labelId() : null\"\n        [attr.aria-label]=\"label() ? null : ariaLabel()\"\n        [attr.aria-describedby]=\"_describedBy()\"\n        [attr.aria-busy]=\"_awaitingValueLabel() || null\"\n        (focus)=\"_onNativeFocus()\"\n        (blur)=\"_onNativeBlur()\"\n        (change)=\"_onNativeChange($event)\"\n      >\n        @if (!multiple()) {\n        <option value=\"\" disabled [selected]=\"!hasValue()\">\n          {{ _resolvedPlaceholder() }}\n        </option>\n        }\n        @for (group of _nativeOptionGroups(); track $index) {\n        @if (group.label) {\n        <optgroup [label]=\"group.label\">\n          @for (option of group.options; track option.key) {\n          <option\n            [value]=\"option.key\"\n            [disabled]=\"option.disabled || false\"\n            [selected]=\"_isNativeOptionSelected(option.value)\"\n          >\n            {{ option.label }}\n          </option>\n          }\n        </optgroup>\n        } @else {\n        @for (option of group.options; track option.key) {\n        <option\n          [value]=\"option.key\"\n          [disabled]=\"option.disabled || false\"\n          [selected]=\"_isNativeOptionSelected(option.value)\"\n        >\n          {{ option.label }}\n        </option>\n        }\n        }\n        }\n      </select>\n      }\n\n      @if (_showClear()) {\n      <!-- DOM sibling of the role=\"combobox\" trigger (a button nested inside it\n           would trip nested-interactive); CSS overlays it just BEFORE the\n           chevron. Tab order: trigger, then clear. -->\n      <mlv-button-close\n        class=\"mlv-select__clear\"\n        (click)=\"onClear()\"\n        mlvDensity=\"tight\"\n        [ariaLabel]=\"_formI18n().clear\"\n      />\n      }\n\n      <mlv-popup\n        [(opened)]=\"isOpen\"\n        [width]=\"triggerWidth()\"\n        [hasShadow]=\"true\"\n        [flexibleDimensions]=\"true\"\n        [positions]=\"dropdownPositions\"\n        [mobileMode]=\"mobileMode()\"\n        [mobileTitle]=\"_resolvedMobileTitle()\"\n        [mlvDensity]=\"mlvDensity()\"\n        class=\"mlv-select__popup\"\n        (afterOpened)=\"_onPopupOpened()\"\n        (afterClosed)=\"_onPopupClosed()\"\n      >\n        @if (searchable()) {\n        <!-- Pinned first row of the dropdown: projected into the popup's pinned\n             slot, so it sits above the scroll region and a long option list can\n             never push it out of view. While the dropdown is open this input \u2014\n             not the trigger \u2014 is the single exposed role=\"combobox\". -->\n        <ng-template mlvPopupPinnedContent>\n          <div class=\"mlv-select__search\">\n            <svg\n              class=\"mlv-select__search-icon\"\n              lucideSearch\n              size=\"16\"\n              aria-hidden=\"true\"\n            ></svg>\n            <mlv-input\n              bare\n              class=\"mlv-select__search-input\"\n              [id]=\"_searchInputId()\"\n              [role]=\"'combobox'\"\n              [ariaExpanded]=\"true\"\n              [ariaHasPopup]=\"'listbox'\"\n              [ariaAutocomplete]=\"'list'\"\n              [ariaControls]=\"listboxId()\"\n              [ariaActiveDescendant]=\"_activeOptionId()\"\n              [ariaLabel]=\"label() || _resolvedPlaceholder()\"\n              [required]=\"required()\"\n              [placeholder]=\"_resolvedSearchPlaceholder()\"\n              [value]=\"searchQuery()\"\n              [autocomplete]=\"'off'\"\n              (input)=\"_onSearchInput($event)\"\n              (keydown.arrowDown)=\"_onSearchArrowDown($event)\"\n              (keydown.arrowUp)=\"_onSearchArrowUp($event)\"\n              (keydown.home)=\"_onSearchHome($event)\"\n              (keydown.end)=\"_onSearchEnd($event)\"\n              (keydown.enter)=\"_onSearchEnter($event)\"\n              (keydown.escape)=\"_onSearchEscape($event)\"\n              (keydown.tab)=\"_onSearchTab($event)\"\n              (keydown.shift.tab)=\"_onSearchTab($event)\"\n            />\n          </div>\n        </ng-template>\n        }\n\n        <ng-template mlvPopupContent>\n          <!-- Keep DOM focus in the search input while pointing at options\n               (activedescendant model): prevent the mousedown from blurring it\n               so the active index and the open state survive option clicks.\n               Routed through a method, not an inline `searchable() && \u2026`\n               expression \u2014 a `false` listener return means preventDefault() to\n               Angular, which would swallow the default on the non-searchable\n               path too. The pinned search row deliberately stays outside this\n               wrapper: swallowing its mousedown would make the input\n               unclickable. -->\n          <div\n            class=\"mlv-select__panel\"\n            (mousedown)=\"_onPanelMousedown($event)\"\n          >\n            <mlv-dropdown-panel\n              scrollMode=\"parent\"\n              [options]=\"filteredOptions()\"\n              [multiple]=\"multiple()\"\n              [selectedValues]=\"selectionService.selectedValues()\"\n              [itemTemplate]=\"itemTemplate()?.templateRef ?? null\"\n              [listboxId]=\"listboxId()\"\n              [ariaLabel]=\"_panelAriaLabel()\"\n              [focusMode]=\"searchable() ? 'activedescendant' : 'roving'\"\n              [activeIndex]=\"_activeIndex()\"\n              [highlightQuery]=\"_highlightQuery()\"\n              [loading]=\"_panelLoading()\"\n              [loadingText]=\"_i18n().loading\"\n              [hasMore]=\"_adapter.hasMore()\"\n              [loadingMore]=\"_adapter.loadingMore()\"\n              (loadMore)=\"_adapter.loadMore()\"\n              (valueChange)=\"selectOption($event)\"\n            >\n              @if (searchable()) {\n              <div class=\"mlv-select__empty\">{{ _i18n().noResults }}</div>\n              }\n            </mlv-dropdown-panel>\n          </div>\n        </ng-template>\n      </mlv-popup>\n    </mlv-popup-container>\n\n    <!-- Polite announcement of the current result count for screen-reader\n         users (searchable + open only). -->\n    <div class=\"mlv-select__sr-status\" aria-live=\"polite\" role=\"status\">\n      {{ _resultsAnnouncement() }}\n    </div>\n  </ng-template>\n\n  @if (description()) {\n  <mlv-description [id]=\"_descriptionId()\">{{ description() }}</mlv-description>\n  } @if (message()) {\n  <mlv-message [id]=\"_messageId()\" [state]=\"resolvedState()\">\n    {{ message() }}\n  </mlv-message>\n  }\n</mlv-form-control-wrapper>\n", styles: ["@layer mlv.components{.mlv-select{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-select *{box-sizing:border-box}.mlv-select__popup-container{display:flex;flex-grow:1;height:100%;position:relative}.mlv-select__clear{position:absolute;top:50%;inset-inline-end:2rem;transform:translateY(-50%);display:inline-flex}.mlv-select__trigger--with-clear{padding-inline-end:3.5rem}.mlv-select .mlv-form-control-wrapper__control-container{padding:0}.mlv-select__trigger{display:flex;width:100%;justify-content:space-between;align-items:center;cursor:pointer;outline:none;padding:var(--mlv-control-padding);height:100%}.mlv-select__native{position:absolute;inset:0;z-index:1;width:100%;height:100%;cursor:pointer;opacity:0}.mlv-select__arrow{width:var(--form-ctrl-icon-size, 1.25rem);height:var(--form-ctrl-icon-size, 1.25rem);display:block;transform-origin:center;transition:color var(--mlv-duration-fast) var(--mlv-ease-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-out-strong);color:var(--mlv-text-tertiary)}.mlv-select__arrow svg{width:100%;height:100%}.mlv-select__value{color:var(--mlv-text-primary)}.mlv-select__placeholder{color:var(--mlv-text-secondary)}.mlv-select--open .mlv-select__arrow,.mlv-select:hover .mlv-select__arrow,.mlv-form-control-wrapper--focused .mlv-select__arrow{color:var(--mlv-text-primary)}.mlv-select--open .mlv-select__arrow{transform:rotate(180deg)}.mlv-select--native .mlv-select__trigger{pointer-events:none}.mlv-select--native .mlv-select__clear{z-index:2}.mlv-select__search{display:flex;align-items:center;gap:var(--mlv-spacing-2);padding:var(--mlv-spacing-2) var(--mlv-spacing-3);background:var(--mlv-background-raised);border-bottom:var(--mlv-stroke-width) solid var(--mlv-border-subtle)}.mlv-select__search-icon{flex-shrink:0;color:var(--mlv-text-tertiary)}.mlv-select__search-input{flex:1;min-width:0}.mlv-select__empty{padding:var(--mlv-spacing-2) var(--mlv-spacing-3);color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size)}.mlv-select__sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mlv-select--loading .mlv-select__trigger{cursor:progress}.mlv-select--loading .mlv-select__arrow{display:inline-flex;align-items:center;justify-content:center}@media(prefers-reduced-motion:reduce){.mlv-select,.mlv-select *,.mlv-select:before,.mlv-select:after,[class^=mlv-select__],[class*=\" mlv-select__\"],[class^=mlv-select--],[class*=\" mlv-select--\"]{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"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: false }] }], searchDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounce", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], native: [{ type: i0.Input, args: [{ isSignal: true, alias: "native", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], toOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "toOption", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], matcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "matcher", required: false }] }], mobileMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileMode", required: false }] }], mlvDensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvDensity", required: false }] }], mobileTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileTitle", required: false }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvSelectItemTemplate), { isSignal: true }] }], selectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvSelectSelectedTemplate), { isSignal: true }] }], _triggerElement: [{ type: i0.ViewChild, args: ['trigger', { ...{ read: ElementRef }, isSignal: true }] }], _nativeSelect: [{ type: i0.ViewChild, args: ['nativeSelect', { isSignal: true }] }], _dropdownPanel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MlvDropdownPanel), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvSelect, MlvSelectItemTemplate, MlvSelectListTemplate, MlvSelectSelectedTemplate };
+//# sourceMappingURL=malva-ui-core-select.mjs.map