@malva-ui/core 0.1.13 → 0.1.14

package/esm2022/select/lib/select/select.js

@@ -1,685 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, contentChild, effect, ElementRef, forwardRef, inject, input, model, signal, untracked, ViewEncapsulation, viewChild, } 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 { MlvDescription, MlvFormControlWrapper, MlvFormControlWrapperControl, fromAriaValues, MlvHint, MlvLabel, MLV_FORM_CONTROL, MlvMessage, MlvSelectionService, toAriaValues, MlvSignalFormControlBase, } from '@malva-ui/core/form-utils';
-import { MlvSelectItemTemplate, MlvSelectSelectedTemplate, } from '../select-template.directives';
-import { LucideChevronDown, LucideSearch } from '@lucide/angular';
-import { MlvClick } from '@malva-ui/cdk/accessibility';
-import { MlvResizeObserver } from '@malva-ui/cdk/utils';
-import { filteredOutCommitted, filterOptions, isReconciliationEmit, MlvActiveDescendant, MlvDropdownPanel, MlvOptionsAdapter, optionId, } from '@malva-ui/core/dropdown';
-import { defaultOptionTransform } from '../select-option';
-import { MlvButtonClose } from '@malva-ui/core/button';
-import { MlvInput } from '@malva-ui/core/input';
-import { MlvLoader } from '@malva-ui/core/loader';
-import { MLV_FORM_UTILS_I18N, MLV_SELECT_I18N, MlvI18nResolverService, } from '@malva-ui/i18n';
-import * as i0 from "@angular/core";
-export 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 });
-    /** 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);
-    _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 */ []));
-    // 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 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 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(() => {
-            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.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;
-        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._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) {
-        if (!this.multiple()) {
-            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 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 }, 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--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: "_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)=\"openDropdown()\"\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]=\"id()\"\n        [hostRole]=\"_outerIsCombobox() ? 'combobox' : 'button'\"\n        [disabled]=\"computedDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-disabled]=\"computedDisabled() || null\"\n        [attr.aria-labelledby]=\"label() ? labelId() : null\"\n        [attr.aria-label]=\"label() ? null : ariaLabel()\"\n        [attr.aria-required]=\"_outerIsCombobox() && required() ? true : null\"\n        [attr.aria-describedby]=\"_describedBy()\"\n        [attr.aria-busy]=\"_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 (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 (_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        (mlvClick)=\"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              [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: [".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__arrow{width:1.25rem;height:1.25rem;display:block;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__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__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}\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", "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--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)=\"openDropdown()\"\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]=\"id()\"\n        [hostRole]=\"_outerIsCombobox() ? 'combobox' : 'button'\"\n        [disabled]=\"computedDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-disabled]=\"computedDisabled() || null\"\n        [attr.aria-labelledby]=\"label() ? labelId() : null\"\n        [attr.aria-label]=\"label() ? null : ariaLabel()\"\n        [attr.aria-required]=\"_outerIsCombobox() && required() ? true : null\"\n        [attr.aria-describedby]=\"_describedBy()\"\n        [attr.aria-busy]=\"_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 (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 (_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        (mlvClick)=\"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              [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: [".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__arrow{width:1.25rem;height:1.25rem;display:block;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__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__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}\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 }] }], 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 }] }], _dropdownPanel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MlvDropdownPanel), { isSignal: true }] }] } });
-//# sourceMappingURL=select.js.map