@malva-ui/core 0.1.12 → 0.1.14

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

@@ -0,0 +1,945 @@
+import * as i0 from '@angular/core';
+import { Directive, model, input, output, computed, inject, signal, contentChild, viewChild, effect, untracked, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { NgTemplateOutlet } from '@angular/common';
+import { MlvPopup, MlvPopupContent, MlvPopupContainer, MlvPopupHeaderContent } from '@malva-ui/core/popup';
+import { MlvSignalFormControlBase, MlvSelectionService, toAriaValues, fromAriaValues, MlvDescription, MlvFormControlWrapper, MlvFormControlWrapperControl, MlvHint, MlvLabel, MlvMessage, MLV_FORM_CONTROL } from '@malva-ui/core/form-utils';
+import { defaultOptionTransform, MlvOptionsAdapter, MlvActiveDescendant, filterOptions, optionId, isReconciliationEmit, filteredOutCommitted, MlvDropdownPanel } from '@malva-ui/core/dropdown';
+import { MlvChip } from '@malva-ui/core/chip';
+import { MlvStructural, MlvResizeObserver } from '@malva-ui/cdk/utils';
+import { LucideChevronDown } from '@lucide/angular';
+import { MlvInput } from '@malva-ui/core/input';
+import { MLV_COMBOBOX_I18N, MLV_FORM_UTILS_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+import { MlvLoader } from '@malva-ui/core/loader';
+import { MlvButtonClose } from '@malva-ui/core/button';
+
+class MlvComboboxItemDef extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvComboboxItemDef, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvComboboxItemDef, isStandalone: true, selector: "[mlvComboboxItemDef]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvComboboxItemDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvComboboxItemDef]',
+                }]
+        }] });
+class MlvComboboxSelectedItemDef extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvComboboxSelectedItemDef, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvComboboxSelectedItemDef, isStandalone: true, selector: "[mlvComboboxSelectedItemDef]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvComboboxSelectedItemDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvComboboxSelectedItemDef]',
+                }]
+        }] });
+
+class MlvCombobox 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). Arrays and observables
+     * are filtered locally by the typed query; a data source owns its filtering
+     * and receives the query through `setSearch`.
+     */
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * Remote search: `(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 if you want a 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 */ []));
+    /** Whether multiple options can be selected at once. */
+    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 */ []));
+    /** Whether the user can create a new value via Enter when no option matches. */
+    allowCreate = input(false, { ...(ngDevMode ? { debugName: "allowCreate" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    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 a custom comparator — e.g.
+     * `(a, b) => a.id === b.id` — so object values survive a serialize /
+     * deserialize round-trip and still match their option instances (check-marks
+     * and the displayed label stay in agreement).
+     */
+    compareWith = input((a, b) => a === b, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom predicate deciding whether an option satisfies the current query
+     * (e.g. fuzzy or secondary-field matching). Defaults to the shared case- and
+     * diacritic-insensitive substring match. Filtered results are always ranked
+     * prefix-matches-first by the shared `filterOptions`, regardless of matcher.
+     * Mirrors `[mlvAutocomplete]`'s `mlvAutocompleteMatcher`.
+     */
+    matcher = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matcher" }] : /* istanbul ignore next */ []));
+    /** Emitted only when the user actually creates a brand-new value via Enter. */
+    valueCreated = output();
+    /**
+     * Controls whether the dropdown renders as a full-screen mobile sheet.
+     *
+     * Passed straight through to the underlying `mlv-popup`. Defaults to
+     * `'auto'` — full-screen below the `md` breakpoint (viewport < 768px),
+     * trigger-anchored above it — matching `mlv-select` and the date/time
+     * pickers. Set to `'off'` to always anchor, or `'fullscreen'` to always
+     * render the sheet (e.g. demos).
+     *
+     * In full-screen mode the search field would normally be occluded by the
+     * solid backdrop and blocked by the sheet's focus trap (it lives in the
+     * trigger row, outside the overlay panel). The combobox therefore projects an
+     * **in-sheet search input** into the popup's `[mlvPopupHeaderContent]` slot,
+     * wired to the same `searchQuery` and keyboard handlers, so type-to-filter
+     * keeps working.
+     */
+    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_COMBOBOX_I18N);
+    _formI18n = inject(MLV_FORM_UTILS_I18N);
+    /** @protected Resolved placeholder: explicit input takes precedence over i18n default. */
+    _resolvedPlaceholder = computed(() => this.placeholder() ?? this._i18n().searchPlaceholder, /* @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 outer
+     * trigger input's own resolution — the visible {@link label} when set
+     * (linked there via the wrapper's `<mlv-label for>`), 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 so the field keeps
+    // its focus ring while the dropdown is showing.
+    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 (this
+     * component filters), 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()),
+    });
+    /** @private ICU resolver for parameterised i18n strings. */
+    _resolver = inject(MlvI18nResolverService);
+    /** @private Last query sent to a remote source (so a close can reset it once). */
+    _remoteQuery = '';
+    resolvedOptions = computed(() => this._adapter.items().map((item) => this.toOption()(item)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOptions" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /** Current text in the input. For single-select this doubles as the committed label when not actively searching. */
+    searchQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    triggerWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerWidth" }] : /* istanbul ignore next */ []));
+    /** @private Whether `searchQuery` represents live user search text (vs. a displayed committed label). */
+    _searching = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_searching" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Shared activedescendant bookkeeping: tracks the active (highlighted)
+     * option index over the filtered options with wrap-around navigation. The same
+     * engine backs `[mlvAutocomplete]`.
+     */
+    _activeDescendant = new MlvActiveDescendant(() => this.filteredOptions().length);
+    /** @protected Exposed to the template for the panel's `[activeIndex]`. */
+    activeIndex = this._activeDescendant.index;
+    /** 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 */ []));
+    dropdownPositions = [
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetY: 8,
+        },
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetY: -8,
+        },
+    ];
+    filteredOptions = computed(() => {
+        const resolved = this.resolvedOptions();
+        // Remote sources (data source / `searchFn`) own their filtering — filtering
+        // again here would hide server results that do not match the local matcher,
+        // and would empty the list while a newer query is still in flight.
+        if (this._adapter.mode() === 'remote')
+            return resolved;
+        const query = this._searching() ? this.searchQuery() : '';
+        // Shared substring filter (case- and diacritic-insensitive; blank query
+        // returns every option; prefix matches ranked first) — extracted to
+        // `@malva-ui/core/dropdown` so the same matching powers `[mlvAutocomplete]`.
+        return filterOptions(resolved, query, this.matcher());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected The live query to highlight inside each suggestion (matched
+     * substring emphasis). Empty unless the user is actively searching, so a
+     * committed single-select label is never highlighted.
+     */
+    _highlightQuery = computed(() => this._searching() ? this.searchQuery().trim() : '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_highlightQuery" }] : /* istanbul ignore next */ []));
+    /** @protected The options currently selected, resolved to `MlvSelectOption` for chip / template rendering. */
+    selectedOptions = computed(() => {
+        const transform = this.toOption();
+        return this.selectionService
+            .selectedValues()
+            .map((value) => transform(value));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+    /** @protected The single-select committed label, or `''` when nothing is selected. */
+    _committedLabel = computed(() => {
+        const opts = this.selectedOptions();
+        return opts.length ? opts[0].label : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_committedLabel" }] : /* 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 no consumer-driven `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 field is inert (readonly, no open) and shows a spinner in
+     * place of the chevron until the first load resolves.
+     */
+    _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 */ []));
+    /** @protected Chips to render: while awaiting, only options that resolved. */
+    _chipOptions = computed(() => {
+        const selected = this.selectedOptions();
+        if (!this._awaitingValueLabel())
+            return selected;
+        const compare = this.compareWith();
+        const opts = this.resolvedOptions();
+        return selected.filter((s) => opts.some((o) => compare(o.value, s.value)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_chipOptions" }] : /* istanbul ignore next */ []));
+    /** @protected `Press Enter to add "{query}"` resolved through i18n. */
+    _pressEnterToAdd = computed(() => this._resolver.resolve(this._i18n(), 'pressEnterToAdd', { query: this.searchQuery().trim() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pressEnterToAdd" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether the custom single-select display template should render
+     * over the input: single-select, a `selectedTemplate` is provided, a value is
+     * committed, and the field is not currently focused/searching (so the raw
+     * input text is shown for editing while focused).
+     */
+    _showSingleTemplate = computed(() => !this.multiple() &&
+        !!this.selectedTemplate()?.templateRef &&
+        !!this._committedLabel() &&
+        !this.focused(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showSingleTemplate" }] : /* istanbul ignore next */ []));
+    /** @protected `aria-activedescendant` target: the DOM id of the active option row, 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 Polite screen-reader announcement of the current result count.
+     * Empty while the popup is closed so no stale count is read out. Mirrors the
+     * visible empty-state copy rendered inside the dropdown panel.
+     */
+    _resultsAnnouncement = computed(() => {
+        if (!this.isOpen())
+            return '';
+        const count = this.filteredOptions().length;
+        if (count === 0) {
+            return this.allowCreate() && this.searchQuery().trim()
+                ? this._pressEnterToAdd()
+                : this._i18n().noResults;
+        }
+        return this._resolver.resolve(this._i18n(), 'resultsAvailable', { count });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resultsAnnouncement" }] : /* istanbul ignore next */ []));
+    selectionService = inject(MlvSelectionService);
+    itemTemplate = contentChild(MlvComboboxItemDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    selectedTemplate = contentChild(MlvComboboxSelectedItemDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedTemplate" }] : /* istanbul ignore next */ []));
+    /** @private The inner `mlv-input` — the tab stop and focus target for the whole control. */
+    _input = viewChild(MlvInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_input" }] : /* istanbul ignore next */ []));
+    /** @private The trigger row element (chips + input + chevron), used as the popup's click-outside exclusion. */
+    _triggerRef = viewChild('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_triggerRef" }] : /* istanbul ignore next */ []));
+    /** @private The dropdown popup — read to know whether it is rendering as a full-screen sheet. */
+    _popupRef = viewChild(MlvPopup, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_popupRef" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether the dropdown is currently a full-screen mobile sheet
+     * (mirrors `mlv-popup`'s own `isFullscreen()`). Drives the in-sheet search
+     * input's ARIA/focus handoff and suppresses the outer trigger input's
+     * combobox semantics so exactly one `role="combobox"` is exposed at a time.
+     */
+    _isFullscreen = computed(() => this._popupRef()?.isFullscreen() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isFullscreen" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether the outer trigger input owns the combobox semantics.
+     * `false` only while the full-screen sheet is actually open — then the
+     * in-sheet input is the live combobox and the outer input relinquishes the
+     * role/ARIA so exactly one `role="combobox"` is exposed. While anchored (or
+     * full-screen but closed, when the outer input is the visible trigger) the
+     * outer input keeps the combobox semantics.
+     */
+    _outerIsCombobox = computed(() => !(this._isFullscreen() && this.isOpen()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_outerIsCombobox" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected DOM `id` of the in-sheet search input. Distinct from the outer
+     * input's `id()` so both can coexist while full-screen and the in-sheet field
+     * can be focus-targeted by id after the sheet opens.
+     */
+    _sheetInputId = computed(() => `${this.id()}-sheet-input`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_sheetInputId" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Elements the backdrop-less dropdown popup treats as "inside" for
+     * click-outside dismissal. The trigger row lives outside the floating panel,
+     * so without this a click on the input (e.g. to reposition the caret) would
+     * dismiss the open list. Passed to `mlv-popup`'s `dismissExcludeElements`.
+     */
+    _popupExcludeElements = computed(() => {
+        const el = this._triggerRef()?.nativeElement;
+        return el ? [el] : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_popupExcludeElements" }] : /* 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());
+        });
+        // External value path. `toAriaValues` normalises scalar / array / `null`
+        // forms shapes into the flat `T[]` the aria listbox panel expects; each
+        // value is then matched against the current options via `compareWith` so
+        // deserialized object values collapse onto their option instances (aria
+        // listbox, check-marks and displayed label all agree). The **selection** is
+        // normalised immediately, but the visible search text is left alone while a
+        // live search is in flight — every exit from a search (commit / close /
+        // clear) re-syncs it. See `_applyPendingValues`.
+        effect(() => {
+            this._pendingValues = toAriaValues(this.value());
+            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));
+            }
+        });
+    }
+    // ─── Input / focus events ────────────────────────────────────────────────
+    /**
+     * @protected Whether the last selected chip is "armed" — a visual-only
+     * selection driven by Backspace in the empty search input while DOM focus
+     * stays in the input (ported from mlv-tokenizer). The first Backspace arms;
+     * the next Backspace (or Delete) removes the armed chip and arms the new
+     * last one. Multi-select only.
+     */
+    _armed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_armed" }] : /* istanbul ignore next */ []));
+    /** @protected Polite screen-reader announcement for the armed chip. */
+    _armedMessage = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_armedMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether the given selected option is the currently armed chip.
+     * Armed always targets the LAST selected chip.
+     */
+    _isChipArmed(option) {
+        const selected = this.selectedOptions();
+        return this._armed() && option === selected[selected.length - 1];
+    }
+    /**
+     * Handles Backspace in the search input (outer or in-sheet). When the input
+     * holds text this is a native edit and is left alone. With an empty input in
+     * multi-select: the first press arms the last chip (no deletion); each
+     * subsequent press removes the armed chip and arms the new last one.
+     */
+    onInputBackspace(event) {
+        if (!this.multiple() || this._isInert())
+            return;
+        const el = event.target;
+        if ((el?.value ?? '') !== '')
+            return; // caret editing text
+        const selected = this.selectedOptions();
+        if (selected.length === 0)
+            return;
+        event.preventDefault();
+        if (!this._armed()) {
+            this._armed.set(true);
+            this._armedMessage.set(selected[selected.length - 1]?.label ?? '');
+            return;
+        }
+        this._deleteArmedAndRearm();
+    }
+    /**
+     * Handles Delete in the search input — parity with the second Backspace:
+     * removes the armed chip and arms the new last one; no-op when nothing is
+     * armed.
+     */
+    onInputDelete(event) {
+        if (!this._armed())
+            return;
+        event.preventDefault();
+        this._deleteArmedAndRearm();
+    }
+    /**
+     * @private Removes the armed (last) chip through the regular deselection
+     * path and re-arms the new last chip, or disarms when none remain.
+     */
+    _deleteArmedAndRearm() {
+        const selected = this.selectedOptions();
+        const last = selected[selected.length - 1];
+        if (!last) {
+            this._disarmChips();
+            return;
+        }
+        this._internalChipRemoval = true;
+        try {
+            this.removeSelected(last.value);
+        }
+        finally {
+            this._internalChipRemoval = false;
+        }
+        const remaining = this.selectedOptions();
+        if (remaining.length === 0) {
+            this._disarmChips();
+        }
+        else {
+            this._armed.set(true);
+            this._armedMessage.set(remaining[remaining.length - 1]?.label ?? '');
+        }
+    }
+    /**
+     * @private Marks a removeSelected call as originating from the arm-driven
+     * deletion flow, so it preserves (re-arms) instead of disarming.
+     */
+    _internalChipRemoval = false;
+    /** @private Clears the armed chip selection and its live announcement. */
+    _disarmChips() {
+        if (this._armed())
+            this._armed.set(false);
+        if (this._armedMessage())
+            this._armedMessage.set('');
+    }
+    onSearchInput(event) {
+        if (this._isInert())
+            return;
+        // Typing is a caret edit — disarm any chip selection.
+        this._disarmChips();
+        const value = event.target.value;
+        this.searchQuery.set(value);
+        this._searching.set(true);
+        this._activeDescendant.reset();
+        if (!this.isOpen())
+            this.isOpen.set(true);
+        // Remote sources filter server-side — forward the query (debounced) instead
+        // of narrowing the rendered list locally.
+        if (this._adapter.mode() === 'remote') {
+            this._remoteQuery = value;
+            this._adapter.search(value);
+        }
+    }
+    /**
+     * Opens the dropdown when the input gains focus (unless disabled/readonly).
+     * Full-screen sheet mode is the exception: focus alone must NOT open — Tab
+     * focus would trap the user straight into the sheet, and the programmatic
+     * focus-restore in `_onPopupClosed` would instantly reopen it in a loop.
+     * There the sheet opens via pointer ({@link onTriggerClick}), the chevron,
+     * or explicit keyboard navigation (ArrowUp/Down).
+     */
+    onInputFocus() {
+        this.setFocused(true);
+        if (this._isInert() || this._isFullscreen())
+            return;
+        this.isOpen.set(true);
+        // Single-select: select the committed label so the next keystroke replaces it.
+        if (!this.multiple() && this._committedLabel()) {
+            this._input()?.select();
+        }
+    }
+    /**
+     * Opens the dropdown on a pointer click on the trigger input. This is the
+     * open gesture for the full-screen sheet (where focus alone never opens it);
+     * while anchored it is a no-op in practice because the preceding focus event
+     * already opened the panel.
+     */
+    onTriggerClick() {
+        if (this._isInert())
+            return;
+        this._disarmChips();
+        this.isOpen.set(true);
+    }
+    /** Closes the dropdown, reverts stale text, and marks touched when focus genuinely leaves the field. */
+    onInputBlur() {
+        // Focus leaving the field disarms the chip selection (tokenizer parity).
+        this._disarmChips();
+        this.setFocused(false);
+        this._markTouched();
+        // Full-screen sheet: the outer trigger input blurs the moment focus is
+        // handed to the in-sheet input on open, and the sheet's focus trap keeps
+        // focus moving between the in-sheet input, chips, and options. Blur must
+        // NOT close/revert here — the sheet is dismissed only via the X button,
+        // Escape, or a committed selection (all routed through `_onPopupClosed`).
+        if (this._isFullscreen())
+            return;
+        this._revertAndClose();
+    }
+    /**
+     * @protected Called after the dropdown popup finishes opening. In full-screen
+     * mode, hands focus to the in-sheet search input (the outer trigger input is
+     * occluded by the backdrop and outside the sheet's focus trap). No-op while
+     * trigger-anchored, so the desktop path is unchanged.
+     */
+    _onPopupOpened() {
+        if (!this._isFullscreen())
+            return;
+        // The in-sheet input is stamped inside the overlay (a detached embedded
+        // view), so it is not reachable via this component's view queries — locate
+        // it by its deterministic id, mirroring the day-picker's focus-into-panel.
+        document.getElementById(this._sheetInputId())?.focus();
+    }
+    /**
+     * @protected Called after the dropdown popup finishes closing. In full-screen
+     * mode, reverts any stale search text to the committed selection and restores
+     * focus to the outer trigger input (matching the desktop close behaviour that
+     * `onInputBlur`/`onEscape` provide when anchored). No-op while anchored.
+     */
+    _onPopupClosed() {
+        if (!this._isFullscreen())
+            return;
+        this._activeDescendant.reset();
+        this._syncDisplayText();
+        this.setInitialFocus();
+    }
+    setFocused(isFocused = true) {
+        this._focused.set(isFocused);
+    }
+    // ─── Keyboard ────────────────────────────────────────────────────────────
+    onArrowDown(event) {
+        event.preventDefault();
+        if (this._isInert())
+            return;
+        this._openForNavigation();
+        this._activeDescendant.move(1);
+    }
+    onArrowUp(event) {
+        event.preventDefault();
+        if (this._isInert())
+            return;
+        this._openForNavigation();
+        this._activeDescendant.move(-1);
+    }
+    onHome(event) {
+        if (!this.isOpen() || this._isInert())
+            return;
+        event.preventDefault();
+        this._activeDescendant.first();
+    }
+    onEnd(event) {
+        if (!this.isOpen() || this._isInert())
+            return;
+        event.preventDefault();
+        this._activeDescendant.last();
+    }
+    onEnterKey(event) {
+        event?.preventDefault();
+        if (this._isInert())
+            return;
+        const filtered = this.filteredOptions();
+        const active = this._activeDescendant.index();
+        // 1. A navigated (highlighted) option wins — APG "Enter selects active".
+        if (active >= 0 && active < filtered.length) {
+            this._commitValue(filtered[active].value);
+            return;
+        }
+        const query = this.searchQuery().trim();
+        if (!query)
+            return;
+        // 2. Exact text match selects (never deselects).
+        const exactMatch = filtered.find((o) => o.label.toLowerCase() === query.toLowerCase());
+        if (exactMatch) {
+            this._commitValue(exactMatch.value);
+            return;
+        }
+        // 3. allowCreate: ADD a brand-new value (never toggle-off, never duplicate).
+        if (this.allowCreate()) {
+            const value = query;
+            if (!this.selectionService.isSelected(value)) {
+                this._addOrReplace(value);
+                this.valueCreated.emit(value);
+                this._emitValue();
+            }
+            this._afterCommit();
+        }
+    }
+    /** First press (open) closes + reverts; second press (already closed) clears. */
+    onEscape(event) {
+        event.preventDefault();
+        if (this.isOpen()) {
+            this._revertAndClose();
+        }
+        else {
+            this.onClear();
+        }
+    }
+    /** Chevron toggle. Uses `mousedown` + `preventDefault` so the input keeps focus. */
+    onChevronMousedown(event) {
+        event.preventDefault();
+        if (this._isInert())
+            return;
+        if (this.isOpen()) {
+            this.isOpen.set(false);
+        }
+        else {
+            this._input()?.focus();
+            this.isOpen.set(true);
+        }
+    }
+    // ─── Selection ───────────────────────────────────────────────────────────
+    /**
+     * Panel (pointer) selection path: aria emits the full selected-values array.
+     *
+     * The aria `ngListbox` re-emits its `value` model whenever the *rendered*
+     * option set changes — not only on user interaction. Typing filters the
+     * selected option out of view, so aria reconciles `value` down to the
+     * currently-rendered options and re-emits (see the `afterRenderEffect` in
+     * `@angular/aria`'s `Listbox`). That reconciliation is NOT a user action and
+     * must never mutate the committed selection or run commit side-effects
+     * (close / emit) — otherwise a single-select loses its value on any
+     * re-search and multi/allowCreate drop previously-picked items while typing
+     * to add another. We detect and ignore those emissions here.
+     */
+    selectValues(values) {
+        const incoming = [...values];
+        const committed = this.selectionService.selectedValues();
+        // Reconciliation noise: the emit adds nothing to the committed selection
+        // and only drops values whose option is currently filtered out of view. A
+        // genuine pointer selection either ADDS a value or REMOVES a still-visible
+        // one — so this is safe to ignore entirely (no mutation, no side-effects).
+        if (this._isReconciliationEmit(incoming, committed))
+            return;
+        // Genuine pointer selection. In multi-select, aria has already reconciled
+        // any filtered-out committed value out of its model, so re-add those
+        // (otherwise "type to add another" silently drops earlier picks). Single-
+        // select replaces, so no preservation is needed.
+        const next = this.multiple()
+            ? [...incoming, ...this._filteredOutCommitted(incoming, committed)]
+            : incoming;
+        this.selectionService.setValues(next);
+        this._emitValue();
+        this._afterCommit();
+    }
+    /**
+     * @private Whether an incoming panel `valueChange` is pure aria reconciliation
+     * noise rather than a user selection. True when the emit (a) adds no value not
+     * already committed and (b) only removes values whose option is currently
+     * filtered out of the rendered list. An emit that adds a value, removes a
+     * still-visible value (a genuine deselection), or exactly re-states the
+     * committed selection (nets to no change) is handled accordingly — the last
+     * case is treated as reconciliation so a spurious re-emit never re-runs the
+     * commit side-effects (e.g. closing a single-select popup mid-search).
+     */
+    _isReconciliationEmit(incoming, committed) {
+        return isReconciliationEmit(incoming, committed, this.filteredOptions().map((o) => o.value), this.compareWith());
+    }
+    /**
+     * @private Committed values that aria dropped from its model only because
+     * their option is filtered out of the rendered list (and are not in the
+     * incoming array). Re-added to a genuine multi-select selection so earlier
+     * picks survive typing to add another value.
+     */
+    _filteredOutCommitted(incoming, committed) {
+        return filteredOutCommitted(incoming, committed, this.filteredOptions().map((o) => o.value), this.compareWith());
+    }
+    /** Removes a single selected value (multi-select chip close / keyboard remove). */
+    removeSelected(value) {
+        // A click-removal (or any external deselection) disarms; the arm-driven
+        // deletion flow re-arms itself afterwards.
+        if (!this._internalChipRemoval)
+            this._disarmChips();
+        this.selectionService.deselect(value);
+        this._emitValue();
+        this._focusActiveInput();
+    }
+    /**
+     * @private Focuses whichever search input is currently interactive: the
+     * in-sheet input while full-screen, otherwise the outer trigger input.
+     */
+    _focusActiveInput() {
+        if (this._isFullscreen()) {
+            document.getElementById(this._sheetInputId())?.focus();
+            return;
+        }
+        this._input()?.focus();
+    }
+    /** Clears the whole selection and search text, emits, and refocuses the input. */
+    onClear() {
+        this.selectionService.clear();
+        this.searchQuery.set('');
+        this._searching.set(false);
+        this._activeDescendant.reset();
+        this._resetRemoteSearch();
+        this._emitValue();
+        this._input()?.focus();
+    }
+    /** Moves focus back to the input (e.g. after single-select commit / close). */
+    setInitialFocus() {
+        this._input()?.focus();
+    }
+    updateTriggerWidth(evt) {
+        this.triggerWidth.set(evt[0].target.getBoundingClientRect().width);
+    }
+    // ─── Forms value ─────────────────────────────────────────────────────────
+    /**
+     * The combobox renders its own clear button inline 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 */ []));
+    /** Whether the control holds a clearable value — At least one committed option selected (search text alone is not a value). */
+    hasValue = computed(() => this.selectionService.selectedValues().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /** @private Normalises the pending form values against the current options and syncs display text. */
+    _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);
+        // This effect re-runs on every `resolvedOptions()` change — which now
+        // includes every remote response and every observable emission. Resyncing
+        // the display text there would wipe the query the user is still typing, so
+        // it is skipped while a live search is in flight; every exit from a search
+        // (commit / revert / clear) calls `_syncDisplayText()` itself. Read
+        // untracked so the effect's dependency set stays value + options.
+        if (!untracked(() => this._searching()))
+            this._syncDisplayText();
+    }
+    // ─── Internal helpers ─────────────────────────────────────────────────────
+    /** @private Whether all open / interaction paths must be suppressed. */
+    _isInert() {
+        return (this.computedDisabled() || this.readonly() || this._awaitingValueLabel());
+    }
+    /** @private Opens the popup for keyboard navigation, resetting the active index on first open. */
+    _openForNavigation() {
+        if (!this.isOpen()) {
+            this.isOpen.set(true);
+            this._activeDescendant.reset();
+        }
+    }
+    /** @private ADD-only selection: single-select replaces, multi-select appends without duplicating. */
+    _addOrReplace(value) {
+        if (this.multiple()) {
+            if (!this.selectionService.isSelected(value)) {
+                this.selectionService.setValues([
+                    ...this.selectionService.selectedValues(),
+                    value,
+                ]);
+            }
+        }
+        else {
+            this.selectionService.setValues([value]);
+        }
+    }
+    /** @private Commits an option value (Enter / active / exact-match path) and settles the UI. */
+    _commitValue(value) {
+        this._addOrReplace(value);
+        this._emitValue();
+        this._afterCommit();
+    }
+    /** @private Settles UI after a committed selection: single closes + refocuses, multi stays open for more. */
+    _afterCommit() {
+        this._activeDescendant.reset();
+        if (this.multiple()) {
+            this.searchQuery.set('');
+            this._searching.set(false);
+            this._resetRemoteSearch();
+            this._input()?.focus();
+        }
+        else {
+            this._syncDisplayText();
+            this._resetRemoteSearch();
+            // Refocus first (the focus handler re-opens), then force the popup shut so
+            // the field ends up focused-but-closed after a single-select commit.
+            this.setInitialFocus();
+            this.isOpen.set(false);
+        }
+    }
+    /** @private Reverts stale search text to the committed state and closes the popup. */
+    _revertAndClose() {
+        this.isOpen.set(false);
+        this._activeDescendant.reset();
+        this._syncDisplayText();
+        this._resetRemoteSearch();
+    }
+    /**
+     * @private Re-searches `''` once whenever the visible query is dropped
+     * (close / revert, a commit in either selection mode, or a clear), so a blank
+     * input never sits above a list still filtered by the previous query. No-op
+     * in local mode and when the last remote query was already blank.
+     */
+    _resetRemoteSearch() {
+        if (this._adapter.mode() === 'remote' && this._remoteQuery !== '') {
+            this._remoteQuery = '';
+            this._adapter.search('');
+        }
+    }
+    /** @private Sets the input text to reflect the committed selection (single) or clears it (multi). */
+    _syncDisplayText() {
+        this._searching.set(false);
+        this.searchQuery.set(this.multiple() ? '' : this._committedLabel());
+    }
+    /**
+     * @private Commits the current selection to the forms model. {@link fromAriaValues}
+     * collapses the aria-side selection array back to the public value shape: `T[]`
+     * for multi-select, or the first value / `null` when empty for single-select.
+     */
+    _emitValue() {
+        this.value.set(fromAriaValues(this.selectionService.selectedValues(), this.multiple()));
+        this._markTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvCombobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvCombobox, isStandalone: true, selector: "mlv-combobox", 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 }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", 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 }, 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", valueCreated: "valueCreated" }, host: { properties: { "class": "\"mlv-combobox--\" + resolvedState()", "class.mlv-combobox--disabled": "computedDisabled()", "class.mlv-combobox--open": "isOpen()", "class.mlv-combobox--multiple": "multiple()", "class.mlv-combobox--loading": "_awaitingValueLabel()" }, classAttribute: "mlv-combobox" }, providers: [
+            MlvSelectionService,
+            {
+                provide: MLV_FORM_CONTROL,
+                useExisting: forwardRef(() => MlvCombobox),
+            },
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: MlvComboboxItemDef, descendants: true, isSignal: true }, { propertyName: "selectedTemplate", first: true, predicate: MlvComboboxSelectedItemDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_input", first: true, predicate: MlvInput, descendants: true, isSignal: true }, { propertyName: "_triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "_popupRef", first: true, predicate: MlvPopup, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mlv-form-control-wrapper (clear)=\"onClear()\">\n  @if (label() || hint()) {\n  <mlv-label [for]=\"id()\" [required]=\"required()\">\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-combobox__popup-container\">\n      <div\n        class=\"mlv-combobox__trigger\"\n        mlvResizeObserver\n        #trigger\n        [attr.aria-busy]=\"_awaitingValueLabel() || null\"\n        (resized)=\"updateTriggerWidth($event)\"\n      >\n        @if (multiple()) { @for (opt of _chipOptions(); track opt.value) {\n        <mlv-chip\n          class=\"mlv-combobox__chip\"\n          [class.mlv-combobox__chip--armed]=\"_isChipArmed(opt)\"\n          muted\n          [closable]=\"!computedDisabled() && !readonly()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (chipClose)=\"removeSelected(opt.value)\"\n        >\n          @if (selectedTemplate()?.templateRef; as tpl) {\n          <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: opt }\" />\n          } @else { {{ opt.label }} }\n        </mlv-chip>\n        } }\n\n        <div\n          class=\"mlv-combobox__field\"\n          [class.mlv-combobox__field--template-display]=\"_showSingleTemplate()\"\n        >\n          <mlv-input\n            bare\n            class=\"mlv-combobox__input\"\n            [id]=\"id()\"\n            [role]=\"_outerIsCombobox() ? 'combobox' : null\"\n            [ariaExpanded]=\"_outerIsCombobox() ? isOpen() : null\"\n            [ariaHasPopup]=\"_outerIsCombobox() ? 'listbox' : null\"\n            [ariaAutocomplete]=\"_outerIsCombobox() ? 'list' : null\"\n            [ariaControls]=\"_outerIsCombobox() && isOpen() ? listboxId() : null\"\n            [ariaActiveDescendant]=\"\n              _outerIsCombobox() ? _activeOptionId() : null\n            \"\n            [ariaLabel]=\"label() ? null : ariaLabel()\"\n            [required]=\"required()\"\n            [ariaDescribedBy]=\"_describedBy()\"\n            [placeholder]=\"\n              _awaitingValueLabel() ? _i18n().loading : _resolvedPlaceholder()\n            \"\n            [disabled]=\"computedDisabled()\"\n            [readonly]=\"readonly() || _awaitingValueLabel()\"\n            [value]=\"_awaitingValueLabel() ? '' : searchQuery()\"\n            [autocomplete]=\"'off'\"\n            (input)=\"onSearchInput($event)\"\n            (inputFocus)=\"onInputFocus()\"\n            (inputBlur)=\"onInputBlur()\"\n            (click)=\"onTriggerClick()\"\n            (keydown.enter)=\"onEnterKey($event)\"\n            (keydown.backspace)=\"onInputBackspace($event)\"\n            (keydown.delete)=\"onInputDelete($event)\"\n            (keydown.arrowDown)=\"onArrowDown($event)\"\n            (keydown.arrowUp)=\"onArrowUp($event)\"\n            (keydown.home)=\"onHome($event)\"\n            (keydown.end)=\"onEnd($event)\"\n            (keydown.escape)=\"onEscape($event)\"\n          />\n\n          @if (_showSingleTemplate()) {\n          <div class=\"mlv-combobox__single-display\" aria-hidden=\"true\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                selectedTemplate()!.templateRef;\n                context: { $implicit: selectedOptions()[0] }\n              \"\n            />\n          </div>\n          }\n        </div>\n\n        @if (clearable() && hasValue() && !computedDisabled() && !readonly()) {\n        <!-- Inline clear, BEFORE the chevron (ownsClearButton suppresses the\n             wrapper's trailing copy). mousedown is prevented so the input keeps\n             focus while clearing. -->\n        <mlv-button-close\n          class=\"mlv-combobox__clear\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onClear()\"\n          mlvDensity=\"tight\"\n          [ariaLabel]=\"_formI18n().clear\"\n        />\n        }\n        <!-- The chevron is replaced by a spinner while the committed value's\n             label is still resolving \u2014 the field is inert then, so a toggle\n             button would be a dead control. -->\n        @if (_awaitingValueLabel()) {\n        <mlv-loader\n          class=\"mlv-combobox__loader\"\n          variant=\"circle\"\n          indeterminate\n          [size]=\"18\"\n          [strokeWidth]=\"2\"\n          [ariaLabel]=\"_i18n().loading\"\n        />\n        } @else {\n        <button\n          type=\"button\"\n          class=\"mlv-combobox__arrow\"\n          tabindex=\"-1\"\n          [attr.aria-label]=\"_i18n().toggleOptions\"\n          [disabled]=\"computedDisabled()\"\n          (mousedown)=\"onChevronMousedown($event)\"\n        >\n          <svg size=\"20\" lucideChevronDown></svg>\n        </button>\n        }\n      </div>\n\n      <mlv-popup\n        [(opened)]=\"isOpen\"\n        [width]=\"triggerWidth()\"\n        [hasShadow]=\"true\"\n        [hasBackdrop]=\"false\"\n        [flexibleDimensions]=\"true\"\n        [positions]=\"dropdownPositions\"\n        [dismissExcludeElements]=\"_popupExcludeElements()\"\n        [mobileMode]=\"mobileMode()\"\n        [mobileTitle]=\"_resolvedMobileTitle()\"\n        [mlvDensity]=\"mlvDensity()\"\n        class=\"mlv-combobox__popup\"\n        (afterOpened)=\"_onPopupOpened()\"\n        (afterClosed)=\"_onPopupClosed()\"\n      >\n        <!-- Full-screen sheet only: an in-sheet search field (and, for\n             multi-select, the selected chips) rendered in the popup header so\n             type-to-filter survives the sheet's solid backdrop + focus trap.\n             Not stamped while trigger-anchored, so desktop is unaffected. -->\n        <ng-template mlvPopupHeaderContent>\n          <div class=\"mlv-combobox__sheet-header\">\n            @if (multiple() && _chipOptions().length) {\n            <div class=\"mlv-combobox__sheet-chips\">\n              @for (opt of _chipOptions(); track opt.value) {\n              <mlv-chip\n                class=\"mlv-combobox__chip\"\n                [class.mlv-combobox__chip--armed]=\"_isChipArmed(opt)\"\n                muted\n                [closable]=\"!computedDisabled() && !readonly()\"\n                (mousedown)=\"$event.preventDefault()\"\n                (chipClose)=\"removeSelected(opt.value)\"\n              >\n                @if (selectedTemplate()?.templateRef; as tpl) {\n                <ng-container\n                  *ngTemplateOutlet=\"tpl; context: { $implicit: opt }\"\n                />\n                } @else { {{ opt.label }} }\n              </mlv-chip>\n              }\n            </div>\n            }\n\n            <mlv-input\n              class=\"mlv-combobox__sheet-input\"\n              [id]=\"_sheetInputId()\"\n              [role]=\"_isFullscreen() ? 'combobox' : null\"\n              [ariaLabel]=\"_resolvedMobileTitle()\"\n              [ariaExpanded]=\"_isFullscreen() ? isOpen() : null\"\n              [ariaHasPopup]=\"_isFullscreen() ? 'listbox' : null\"\n              [ariaAutocomplete]=\"_isFullscreen() ? 'list' : null\"\n              [ariaControls]=\"\n                _isFullscreen() && isOpen() ? listboxId() : null\n              \"\n              [ariaActiveDescendant]=\"\n                _isFullscreen() ? _activeOptionId() : null\n              \"\n              [placeholder]=\"\n                _awaitingValueLabel() ? _i18n().loading : _resolvedPlaceholder()\n              \"\n              [disabled]=\"computedDisabled()\"\n              [readonly]=\"readonly() || _awaitingValueLabel()\"\n              [value]=\"_awaitingValueLabel() ? '' : searchQuery()\"\n              [autocomplete]=\"'off'\"\n              (input)=\"onSearchInput($event)\"\n              (inputFocus)=\"onInputFocus()\"\n              (inputBlur)=\"onInputBlur()\"\n              (keydown.enter)=\"onEnterKey($event)\"\n              (keydown.backspace)=\"onInputBackspace($event)\"\n              (keydown.delete)=\"onInputDelete($event)\"\n              (keydown.arrowDown)=\"onArrowDown($event)\"\n              (keydown.arrowUp)=\"onArrowUp($event)\"\n              (keydown.home)=\"onHome($event)\"\n              (keydown.end)=\"onEnd($event)\"\n              (keydown.escape)=\"onEscape($event)\"\n            />\n          </div>\n        </ng-template>\n\n        <ng-template mlvPopupContent>\n          <!-- Keep DOM focus in the input while pointing at the panel: prevent the\n               mousedown from blurring the field so the activedescendant model and\n               open state survive option / scrollbar clicks. -->\n          <div\n            class=\"mlv-combobox__panel\"\n            (mousedown)=\"$event.preventDefault()\"\n          >\n            <mlv-dropdown-panel\n              scrollMode=\"parent\"\n              [options]=\"filteredOptions()\"\n              [multiple]=\"multiple()\"\n              [selectedValues]=\"selectionService.selectedValues()\"\n              [itemTemplate]=\"itemTemplate()?.templateRef ?? null\"\n              [highlightQuery]=\"_highlightQuery()\"\n              [listboxId]=\"listboxId()\"\n              [ariaLabel]=\"_panelAriaLabel()\"\n              focusMode=\"activedescendant\"\n              [activeIndex]=\"activeIndex()\"\n              [loading]=\"_panelLoading()\"\n              [loadingText]=\"_i18n().loading\"\n              [hasMore]=\"_adapter.hasMore()\"\n              [loadingMore]=\"_adapter.loadingMore()\"\n              (loadMore)=\"_adapter.loadMore()\"\n              (valueChange)=\"selectValues($event)\"\n            >\n              <div class=\"mlv-combobox__empty\">\n                @if (allowCreate() && searchQuery().trim()) { {{\n                _pressEnterToAdd() }} } @else { {{ _i18n().noResults }} }\n              </div>\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 users. -->\n    <div class=\"mlv-combobox__sr-status\" aria-live=\"polite\" role=\"status\">\n      {{ _resultsAnnouncement() }}\n    </div>\n    <!-- Polite announcement of the currently armed chip (Backspace flow). -->\n    <div class=\"mlv-combobox__sr-status\" aria-live=\"polite\" role=\"status\">\n      {{ _armedMessage() }}\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-combobox{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-combobox *{box-sizing:border-box}.mlv-combobox .mlv-form-control-wrapper__control-container{padding:0;height:auto;min-height:var(--form-ctrl-height)}.mlv-combobox .mlv-form-control-wrapper__control-row{align-items:stretch}.mlv-combobox__popup-container{display:flex;flex-grow:1}.mlv-combobox__trigger{display:flex;width:100%;flex-wrap:wrap;align-items:center;align-content:center;gap:.25rem;cursor:text;padding:var(--mlv-control-padding);min-height:100%}.mlv-combobox__chip{flex-shrink:0}.mlv-combobox__field{position:relative;flex:1 1 6rem;min-width:3rem;display:flex;align-items:center}.mlv-combobox__field--template-display .mlv-input__native{color:transparent}.mlv-combobox__input{flex:1;min-width:0;color:var(--mlv-text-primary)}.mlv-combobox__single-display{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;color:var(--mlv-text-primary)}.mlv-combobox__chip--armed{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset);border-radius:var(--mlv-radius-full)}.mlv-combobox__clear{display:inline-flex;align-items:center;flex-shrink:0}.mlv-combobox__arrow{width:var(--form-ctrl-icon-size, 1.25rem);height:var(--form-ctrl-icon-size, 1.25rem);display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;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);cursor:pointer;flex-shrink:0}.mlv-combobox__arrow svg{width:100%;height:100%}.mlv-combobox__arrow:disabled{cursor:not-allowed;opacity:var(--mlv-disabled-opacity)}.mlv-combobox__loader{display:inline-flex;flex-shrink:0;width:var(--form-ctrl-icon-size, 1.25rem);height:var(--form-ctrl-icon-size, 1.25rem);align-items:center;justify-content:center;color:var(--mlv-text-tertiary)}.mlv-combobox--loading,.mlv-combobox--loading .mlv-combobox__input input{cursor:progress}.mlv-combobox__empty{padding:.75rem;text-align:center;color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size)}.mlv-combobox--open .mlv-combobox__arrow:not(:disabled),.mlv-combobox:hover .mlv-combobox__arrow:not(:disabled){color:var(--mlv-text-primary)}.mlv-form-control-wrapper--focused .mlv-combobox__arrow:not(:disabled){color:var(--mlv-text-primary)}.mlv-combobox--open .mlv-combobox__arrow{transform:rotate(180deg)}.mlv-combobox__popup{padding:0!important}.mlv-combobox__sheet-header{display:flex;flex-direction:column;gap:var(--mlv-spacing-2);width:100%}.mlv-combobox__sheet-chips{display:flex;flex-wrap:wrap;gap:.25rem}.mlv-combobox__sheet-input{display:block;width:100%}.mlv-combobox__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}@media(prefers-reduced-motion:reduce){.mlv-combobox,.mlv-combobox *,.mlv-combobox:before,.mlv-combobox:after,[class^=mlv-combobox__],[class*=\" mlv-combobox__\"],[class^=mlv-combobox--],[class*=\" mlv-combobox--\"]{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: MlvPopupHeaderContent, selector: "[mlvPopupHeaderContent]" }, { kind: "component", type: MlvDescription, selector: "mlv-description" }, { kind: "component", type: MlvFormControlWrapper, selector: "mlv-form-control-wrapper", outputs: ["clear"] }, { kind: "directive", type: MlvFormControlWrapperControl, selector: "[mlvFormControlWrapperControl]" }, { kind: "component", type: MlvHint, selector: "mlv-hint" }, { kind: "component", type: MlvLabel, selector: "mlv-label", inputs: ["for", "required"] }, { kind: "component", type: MlvMessage, selector: "mlv-message", inputs: ["state"] }, { 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: 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: MlvChip, selector: "mlv-chip", inputs: ["tone", "muted", "rounded", "floating", "closable", "chipTabIndex", "closeAriaLabel"], outputs: ["chipClose"] }, { kind: "component", type: MlvButtonClose, selector: "mlv-button-close", inputs: ["variant", "shape", "ariaLabel"] }, { kind: "component", type: MlvLoader, selector: "mlv-loader", inputs: ["variant", "tone", "value", "max", "indeterminate", "size", "strokeWidth", "ariaLabel", "showHint", "color", "trackColor", "glow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvCombobox, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-combobox', imports: [
+                        NgTemplateOutlet,
+                        MlvPopup,
+                        MlvPopupContent,
+                        MlvPopupContainer,
+                        MlvPopupHeaderContent,
+                        MlvDescription,
+                        MlvFormControlWrapper,
+                        MlvFormControlWrapperControl,
+                        MlvHint,
+                        MlvLabel,
+                        MlvMessage,
+                        LucideChevronDown,
+                        MlvResizeObserver,
+                        MlvDropdownPanel,
+                        MlvInput,
+                        MlvChip,
+                        MlvButtonClose,
+                        MlvLoader,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        MlvSelectionService,
+                        {
+                            provide: MLV_FORM_CONTROL,
+                            useExisting: forwardRef(() => MlvCombobox),
+                        },
+                    ], host: {
+                        class: 'mlv-combobox',
+                        '[class]': '"mlv-combobox--" + resolvedState()',
+                        '[class.mlv-combobox--disabled]': 'computedDisabled()',
+                        '[class.mlv-combobox--open]': 'isOpen()',
+                        '[class.mlv-combobox--multiple]': 'multiple()',
+                        '[class.mlv-combobox--loading]': '_awaitingValueLabel()',
+                    }, template: "<mlv-form-control-wrapper (clear)=\"onClear()\">\n  @if (label() || hint()) {\n  <mlv-label [for]=\"id()\" [required]=\"required()\">\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-combobox__popup-container\">\n      <div\n        class=\"mlv-combobox__trigger\"\n        mlvResizeObserver\n        #trigger\n        [attr.aria-busy]=\"_awaitingValueLabel() || null\"\n        (resized)=\"updateTriggerWidth($event)\"\n      >\n        @if (multiple()) { @for (opt of _chipOptions(); track opt.value) {\n        <mlv-chip\n          class=\"mlv-combobox__chip\"\n          [class.mlv-combobox__chip--armed]=\"_isChipArmed(opt)\"\n          muted\n          [closable]=\"!computedDisabled() && !readonly()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (chipClose)=\"removeSelected(opt.value)\"\n        >\n          @if (selectedTemplate()?.templateRef; as tpl) {\n          <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: opt }\" />\n          } @else { {{ opt.label }} }\n        </mlv-chip>\n        } }\n\n        <div\n          class=\"mlv-combobox__field\"\n          [class.mlv-combobox__field--template-display]=\"_showSingleTemplate()\"\n        >\n          <mlv-input\n            bare\n            class=\"mlv-combobox__input\"\n            [id]=\"id()\"\n            [role]=\"_outerIsCombobox() ? 'combobox' : null\"\n            [ariaExpanded]=\"_outerIsCombobox() ? isOpen() : null\"\n            [ariaHasPopup]=\"_outerIsCombobox() ? 'listbox' : null\"\n            [ariaAutocomplete]=\"_outerIsCombobox() ? 'list' : null\"\n            [ariaControls]=\"_outerIsCombobox() && isOpen() ? listboxId() : null\"\n            [ariaActiveDescendant]=\"\n              _outerIsCombobox() ? _activeOptionId() : null\n            \"\n            [ariaLabel]=\"label() ? null : ariaLabel()\"\n            [required]=\"required()\"\n            [ariaDescribedBy]=\"_describedBy()\"\n            [placeholder]=\"\n              _awaitingValueLabel() ? _i18n().loading : _resolvedPlaceholder()\n            \"\n            [disabled]=\"computedDisabled()\"\n            [readonly]=\"readonly() || _awaitingValueLabel()\"\n            [value]=\"_awaitingValueLabel() ? '' : searchQuery()\"\n            [autocomplete]=\"'off'\"\n            (input)=\"onSearchInput($event)\"\n            (inputFocus)=\"onInputFocus()\"\n            (inputBlur)=\"onInputBlur()\"\n            (click)=\"onTriggerClick()\"\n            (keydown.enter)=\"onEnterKey($event)\"\n            (keydown.backspace)=\"onInputBackspace($event)\"\n            (keydown.delete)=\"onInputDelete($event)\"\n            (keydown.arrowDown)=\"onArrowDown($event)\"\n            (keydown.arrowUp)=\"onArrowUp($event)\"\n            (keydown.home)=\"onHome($event)\"\n            (keydown.end)=\"onEnd($event)\"\n            (keydown.escape)=\"onEscape($event)\"\n          />\n\n          @if (_showSingleTemplate()) {\n          <div class=\"mlv-combobox__single-display\" aria-hidden=\"true\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                selectedTemplate()!.templateRef;\n                context: { $implicit: selectedOptions()[0] }\n              \"\n            />\n          </div>\n          }\n        </div>\n\n        @if (clearable() && hasValue() && !computedDisabled() && !readonly()) {\n        <!-- Inline clear, BEFORE the chevron (ownsClearButton suppresses the\n             wrapper's trailing copy). mousedown is prevented so the input keeps\n             focus while clearing. -->\n        <mlv-button-close\n          class=\"mlv-combobox__clear\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onClear()\"\n          mlvDensity=\"tight\"\n          [ariaLabel]=\"_formI18n().clear\"\n        />\n        }\n        <!-- The chevron is replaced by a spinner while the committed value's\n             label is still resolving \u2014 the field is inert then, so a toggle\n             button would be a dead control. -->\n        @if (_awaitingValueLabel()) {\n        <mlv-loader\n          class=\"mlv-combobox__loader\"\n          variant=\"circle\"\n          indeterminate\n          [size]=\"18\"\n          [strokeWidth]=\"2\"\n          [ariaLabel]=\"_i18n().loading\"\n        />\n        } @else {\n        <button\n          type=\"button\"\n          class=\"mlv-combobox__arrow\"\n          tabindex=\"-1\"\n          [attr.aria-label]=\"_i18n().toggleOptions\"\n          [disabled]=\"computedDisabled()\"\n          (mousedown)=\"onChevronMousedown($event)\"\n        >\n          <svg size=\"20\" lucideChevronDown></svg>\n        </button>\n        }\n      </div>\n\n      <mlv-popup\n        [(opened)]=\"isOpen\"\n        [width]=\"triggerWidth()\"\n        [hasShadow]=\"true\"\n        [hasBackdrop]=\"false\"\n        [flexibleDimensions]=\"true\"\n        [positions]=\"dropdownPositions\"\n        [dismissExcludeElements]=\"_popupExcludeElements()\"\n        [mobileMode]=\"mobileMode()\"\n        [mobileTitle]=\"_resolvedMobileTitle()\"\n        [mlvDensity]=\"mlvDensity()\"\n        class=\"mlv-combobox__popup\"\n        (afterOpened)=\"_onPopupOpened()\"\n        (afterClosed)=\"_onPopupClosed()\"\n      >\n        <!-- Full-screen sheet only: an in-sheet search field (and, for\n             multi-select, the selected chips) rendered in the popup header so\n             type-to-filter survives the sheet's solid backdrop + focus trap.\n             Not stamped while trigger-anchored, so desktop is unaffected. -->\n        <ng-template mlvPopupHeaderContent>\n          <div class=\"mlv-combobox__sheet-header\">\n            @if (multiple() && _chipOptions().length) {\n            <div class=\"mlv-combobox__sheet-chips\">\n              @for (opt of _chipOptions(); track opt.value) {\n              <mlv-chip\n                class=\"mlv-combobox__chip\"\n                [class.mlv-combobox__chip--armed]=\"_isChipArmed(opt)\"\n                muted\n                [closable]=\"!computedDisabled() && !readonly()\"\n                (mousedown)=\"$event.preventDefault()\"\n                (chipClose)=\"removeSelected(opt.value)\"\n              >\n                @if (selectedTemplate()?.templateRef; as tpl) {\n                <ng-container\n                  *ngTemplateOutlet=\"tpl; context: { $implicit: opt }\"\n                />\n                } @else { {{ opt.label }} }\n              </mlv-chip>\n              }\n            </div>\n            }\n\n            <mlv-input\n              class=\"mlv-combobox__sheet-input\"\n              [id]=\"_sheetInputId()\"\n              [role]=\"_isFullscreen() ? 'combobox' : null\"\n              [ariaLabel]=\"_resolvedMobileTitle()\"\n              [ariaExpanded]=\"_isFullscreen() ? isOpen() : null\"\n              [ariaHasPopup]=\"_isFullscreen() ? 'listbox' : null\"\n              [ariaAutocomplete]=\"_isFullscreen() ? 'list' : null\"\n              [ariaControls]=\"\n                _isFullscreen() && isOpen() ? listboxId() : null\n              \"\n              [ariaActiveDescendant]=\"\n                _isFullscreen() ? _activeOptionId() : null\n              \"\n              [placeholder]=\"\n                _awaitingValueLabel() ? _i18n().loading : _resolvedPlaceholder()\n              \"\n              [disabled]=\"computedDisabled()\"\n              [readonly]=\"readonly() || _awaitingValueLabel()\"\n              [value]=\"_awaitingValueLabel() ? '' : searchQuery()\"\n              [autocomplete]=\"'off'\"\n              (input)=\"onSearchInput($event)\"\n              (inputFocus)=\"onInputFocus()\"\n              (inputBlur)=\"onInputBlur()\"\n              (keydown.enter)=\"onEnterKey($event)\"\n              (keydown.backspace)=\"onInputBackspace($event)\"\n              (keydown.delete)=\"onInputDelete($event)\"\n              (keydown.arrowDown)=\"onArrowDown($event)\"\n              (keydown.arrowUp)=\"onArrowUp($event)\"\n              (keydown.home)=\"onHome($event)\"\n              (keydown.end)=\"onEnd($event)\"\n              (keydown.escape)=\"onEscape($event)\"\n            />\n          </div>\n        </ng-template>\n\n        <ng-template mlvPopupContent>\n          <!-- Keep DOM focus in the input while pointing at the panel: prevent the\n               mousedown from blurring the field so the activedescendant model and\n               open state survive option / scrollbar clicks. -->\n          <div\n            class=\"mlv-combobox__panel\"\n            (mousedown)=\"$event.preventDefault()\"\n          >\n            <mlv-dropdown-panel\n              scrollMode=\"parent\"\n              [options]=\"filteredOptions()\"\n              [multiple]=\"multiple()\"\n              [selectedValues]=\"selectionService.selectedValues()\"\n              [itemTemplate]=\"itemTemplate()?.templateRef ?? null\"\n              [highlightQuery]=\"_highlightQuery()\"\n              [listboxId]=\"listboxId()\"\n              [ariaLabel]=\"_panelAriaLabel()\"\n              focusMode=\"activedescendant\"\n              [activeIndex]=\"activeIndex()\"\n              [loading]=\"_panelLoading()\"\n              [loadingText]=\"_i18n().loading\"\n              [hasMore]=\"_adapter.hasMore()\"\n              [loadingMore]=\"_adapter.loadingMore()\"\n              (loadMore)=\"_adapter.loadMore()\"\n              (valueChange)=\"selectValues($event)\"\n            >\n              <div class=\"mlv-combobox__empty\">\n                @if (allowCreate() && searchQuery().trim()) { {{\n                _pressEnterToAdd() }} } @else { {{ _i18n().noResults }} }\n              </div>\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 users. -->\n    <div class=\"mlv-combobox__sr-status\" aria-live=\"polite\" role=\"status\">\n      {{ _resultsAnnouncement() }}\n    </div>\n    <!-- Polite announcement of the currently armed chip (Backspace flow). -->\n    <div class=\"mlv-combobox__sr-status\" aria-live=\"polite\" role=\"status\">\n      {{ _armedMessage() }}\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-combobox{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-combobox *{box-sizing:border-box}.mlv-combobox .mlv-form-control-wrapper__control-container{padding:0;height:auto;min-height:var(--form-ctrl-height)}.mlv-combobox .mlv-form-control-wrapper__control-row{align-items:stretch}.mlv-combobox__popup-container{display:flex;flex-grow:1}.mlv-combobox__trigger{display:flex;width:100%;flex-wrap:wrap;align-items:center;align-content:center;gap:.25rem;cursor:text;padding:var(--mlv-control-padding);min-height:100%}.mlv-combobox__chip{flex-shrink:0}.mlv-combobox__field{position:relative;flex:1 1 6rem;min-width:3rem;display:flex;align-items:center}.mlv-combobox__field--template-display .mlv-input__native{color:transparent}.mlv-combobox__input{flex:1;min-width:0;color:var(--mlv-text-primary)}.mlv-combobox__single-display{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;color:var(--mlv-text-primary)}.mlv-combobox__chip--armed{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset);border-radius:var(--mlv-radius-full)}.mlv-combobox__clear{display:inline-flex;align-items:center;flex-shrink:0}.mlv-combobox__arrow{width:var(--form-ctrl-icon-size, 1.25rem);height:var(--form-ctrl-icon-size, 1.25rem);display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;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);cursor:pointer;flex-shrink:0}.mlv-combobox__arrow svg{width:100%;height:100%}.mlv-combobox__arrow:disabled{cursor:not-allowed;opacity:var(--mlv-disabled-opacity)}.mlv-combobox__loader{display:inline-flex;flex-shrink:0;width:var(--form-ctrl-icon-size, 1.25rem);height:var(--form-ctrl-icon-size, 1.25rem);align-items:center;justify-content:center;color:var(--mlv-text-tertiary)}.mlv-combobox--loading,.mlv-combobox--loading .mlv-combobox__input input{cursor:progress}.mlv-combobox__empty{padding:.75rem;text-align:center;color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size)}.mlv-combobox--open .mlv-combobox__arrow:not(:disabled),.mlv-combobox:hover .mlv-combobox__arrow:not(:disabled){color:var(--mlv-text-primary)}.mlv-form-control-wrapper--focused .mlv-combobox__arrow:not(:disabled){color:var(--mlv-text-primary)}.mlv-combobox--open .mlv-combobox__arrow{transform:rotate(180deg)}.mlv-combobox__popup{padding:0!important}.mlv-combobox__sheet-header{display:flex;flex-direction:column;gap:var(--mlv-spacing-2);width:100%}.mlv-combobox__sheet-chips{display:flex;flex-wrap:wrap;gap:.25rem}.mlv-combobox__sheet-input{display:block;width:100%}.mlv-combobox__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}@media(prefers-reduced-motion:reduce){.mlv-combobox,.mlv-combobox *,.mlv-combobox:before,.mlv-combobox:after,[class^=mlv-combobox__],[class*=\" mlv-combobox__\"],[class^=mlv-combobox--],[class*=\" mlv-combobox--\"]{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 }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], allowCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCreate", required: false }] }], toOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "toOption", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], matcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "matcher", required: false }] }], valueCreated: [{ type: i0.Output, args: ["valueCreated"] }], 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(() => MlvComboboxItemDef), { isSignal: true }] }], selectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvComboboxSelectedItemDef), { isSignal: true }] }], _input: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MlvInput), { isSignal: true }] }], _triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], _popupRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MlvPopup), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvCombobox, MlvComboboxItemDef, MlvComboboxSelectedItemDef };
+//# sourceMappingURL=malva-ui-core-combobox.mjs.map