@malva-ui/core 0.1.13 → 0.1.14

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

@@ -0,0 +1,994 @@
+import * as i0 from '@angular/core';
+import { signal, Pipe, input, output, computed, inject, viewChild, ElementRef, effect, afterNextRender, isDevMode, untracked, afterRenderEffect, ChangeDetectionStrategy, ViewEncapsulation, Component, DestroyRef } from '@angular/core';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MlvListSelectable, MlvList, MlvListItem, MlvListItemSelectable } from '@malva-ui/core/list';
+import { LucideCheck } from '@lucide/angular';
+import { MlvSelectionService } from '@malva-ui/core/form-utils';
+import { MlvScrollbar } from '@malva-ui/core/scrollbar';
+import { MlvInfiniteScroll } from '@malva-ui/cdk/infinite-scroll';
+import { normalizeForMatch, mlvNextId } from '@malva-ui/cdk/utils';
+export { normalizeForMatch } from '@malva-ui/cdk/utils';
+import { fromEvent, startWith, of, from, isObservable } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MlvArrayDataSource, MlvDataSource } from '@malva-ui/cdk/data-source';
+import { take } from 'rxjs/operators';
+
+function defaultOptionTransform(item) {
+    return isSelectOption(item) ? item : { label: String(item), value: item };
+}
+function isSelectOption(value) {
+    if (!value || typeof value !== 'object')
+        return false;
+    const candidate = value;
+    return !!candidate.label && !!candidate.value;
+}
+/**
+ * Type-guard predicate: whether an array of resolved options is "grouped",
+ * i.e. at least one option carries a non-empty {@link MlvSelectOption.group} label.
+ *
+ * The dropdown panel uses this to decide whether to render sticky group headers.
+ * Returns `false` for empty arrays and for arrays where no option declares a
+ * group, so ungrouped `MlvSelectOption` arrays (and plain primitive arrays) render
+ * exactly as before.
+ */
+function hasOptionGroups(options) {
+    return options.some((option) => !!option.group);
+}
+function resolveOptions(items, transform) {
+    return items.map(transform);
+}
+
+/**
+ * Builds the deterministic DOM `id` for the option row at `index` within a
+ * listbox, matching the id `mlv-dropdown-panel` stamps on each option. An
+ * owning combobox / autocomplete computes the same id to point its input's
+ * `aria-activedescendant` at the active row.
+ *
+ * This is the single source of truth for the activedescendant option-id format
+ * (`<listboxId>-option-<index>`), shared by `mlv-dropdown-panel`,
+ * `mlv-combobox`, and `[mlvAutocomplete]` so the id the panel renders and the
+ * id the trigger references can never drift.
+ *
+ * @param listboxId - The id of the listbox that owns the option.
+ * @param index - The option's flat index within the listbox.
+ * @returns The option's DOM id, e.g. `"my-listbox-option-3"`.
+ */
+function optionId(listboxId, index) {
+    return `${listboxId}-option-${index}`;
+}
+/**
+ * Signal-backed bookkeeping for the "active option" index of a WAI-ARIA
+ * activedescendant keyboard model — the shared engine behind `mlv-combobox`
+ * and `[mlvAutocomplete]`, where DOM focus stays on the text input and the
+ * highlighted option is tracked purely by index (mirrored into the input's
+ * `aria-activedescendant`).
+ *
+ * The active index is `-1` when no option is active. {@link move} advances it
+ * with wrap-around, treating a first move from `-1` as landing on the first
+ * (forward) or last (backward) option; {@link first} / {@link last} jump to the
+ * ends; {@link reset} clears it back to `-1`. The current option count is read
+ * lazily through the accessor supplied at construction, so the owner can back it
+ * with any signal / computed (e.g. a filtered-options length) without pushing
+ * the count on every keystroke.
+ */
+class MlvActiveDescendant {
+    _count;
+    /** @private The active option index; `-1` = no active option. */
+    _index = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_index" }] : /* istanbul ignore next */ []));
+    /**
+     * The active option index as a read-only signal; `-1` when no option is
+     * active. Read it reactively (template / effect) or imperatively (call it in
+     * an event handler) — both track the same underlying state.
+     */
+    index = this._index.asReadonly();
+    /**
+     * @param _count Accessor returning the current number of navigable options.
+     * Read lazily on each {@link move} / {@link first} / {@link last} call, so it
+     * always reflects the live count (e.g. after the options are filtered).
+     */
+    constructor(_count) {
+        this._count = _count;
+    }
+    /**
+     * Advances the active option by `delta` with wrap-around. With no option
+     * active (`-1`), a forward move (`delta > 0`) lands on the first option and a
+     * backward move (`delta < 0`) on the last; otherwise the index wraps modulo
+     * the option count. Resets to `-1` when there are no options.
+     *
+     * @param delta Step to move by (`+1` next, `-1` previous).
+     */
+    move(delta) {
+        const count = this._count();
+        if (count === 0) {
+            this._index.set(-1);
+            return;
+        }
+        const current = this._index();
+        const next = current < 0
+            ? delta > 0
+                ? 0
+                : count - 1
+            : (current + delta + count) % count;
+        this._index.set(next);
+    }
+    /** Activates the first option. No-op when there are no options. */
+    first() {
+        if (this._count() > 0)
+            this._index.set(0);
+    }
+    /** Activates the last option. No-op when there are no options. */
+    last() {
+        const count = this._count();
+        if (count > 0)
+            this._index.set(count - 1);
+    }
+    /** Clears the active option back to `-1` (nothing active). */
+    reset() {
+        this._index.set(-1);
+    }
+}
+
+/**
+ * The default option matcher: a case- and diacritic-insensitive substring match
+ * on {@link MlvSelectOption.label}. An empty (or whitespace-only) query matches
+ * every option.
+ *
+ * @param option - The option to test.
+ * @param query - The current search query (already trimmed by callers).
+ * @returns Whether the option label contains the query.
+ */
+function defaultOptionMatcher(option, query) {
+    const q = normalizeForMatch(query.trim());
+    if (!q)
+        return true;
+    return normalizeForMatch(option.label).includes(q);
+}
+/**
+ * Filters a list of resolved options against a query using `matcher`
+ * ({@link defaultOptionMatcher} by default), then ranks **prefix matches
+ * first** ({@link rankPrefixMatchesFirst}) so the top suggestion is the one an
+ * inline completion can extend (`"Pe"` ranks `"Pear"` above `"Grape"`). A blank
+ * query returns a shallow copy of every option — the "show everything" state a
+ * combobox / autocomplete shows on focus. This is the single shared
+ * implementation of the substring filter that previously lived inline in
+ * `mlv-combobox`.
+ *
+ * @param options - The resolved options to filter.
+ * @param query - The raw search query (trimmed internally).
+ * @param matcher - Optional custom predicate; defaults to substring matching.
+ * @returns The matcher-satisfying options, prefix matches ranked first (all
+ *   options, unranked, for a blank query).
+ */
+function filterOptions(options, query, matcher = defaultOptionMatcher) {
+    const q = query.trim();
+    if (!q)
+        return [...options];
+    return rankPrefixMatchesFirst(options.filter((option) => matcher(option, q)), q);
+}
+/**
+ * Stable-partitions filtered options so labels that **start with** the query
+ * (case- and diacritic-insensitive) come before the remaining matches, keeping
+ * the original relative order inside each partition.
+ *
+ * Grouped options ({@link MlvSelectOption.group}) are ranked **within each
+ * consecutive same-group run** only — runs themselves never move or merge, so
+ * the panel's consecutive-run group rendering (sticky headers, flat-index
+ * alignment) is preserved. An ungrouped list is a single run and gets the full
+ * prefix-first ordering.
+ *
+ * @param options - The already-filtered options.
+ * @param query - The trimmed, non-empty query.
+ * @returns The options with prefix matches ranked first per group run.
+ */
+function rankPrefixMatchesFirst(options, query) {
+    const q = normalizeForMatch(query);
+    const ranked = [];
+    let runStart = 0;
+    for (let i = 1; i <= options.length; i++) {
+        const runEnded = i === options.length ||
+            (options[i].group ?? '') !== (options[runStart].group ?? '');
+        if (!runEnded)
+            continue;
+        const run = options.slice(runStart, i);
+        const prefixed = [];
+        const rest = [];
+        for (const option of run) {
+            (normalizeForMatch(option.label).startsWith(q) ? prefixed : rest).push(option);
+        }
+        ranked.push(...prefixed, ...rest);
+        runStart = i;
+    }
+    return ranked;
+}
+/**
+ * Splits `label` into matched / unmatched {@link MlvMatchSegment}s for the first
+ * occurrence of `query`, so consumers can emphasise the matched substring in a
+ * suggestion (e.g. wrapping matched slices in `<mark>`).
+ *
+ * Matching is case- and diacritic-insensitive ({@link normalizeForMatch}); the
+ * returned segment `text` preserves the **original** label casing/diacritics.
+ * Because NFD folding can change string length (e.g. `"é"` → `"e"` + combining
+ * mark), the search runs over a per-code-point folded projection with an index
+ * map back to the original code points, keeping the highlighted slice aligned
+ * with the source label. Only the first match is highlighted.
+ *
+ * @param label - The option label to segment.
+ * @param query - The query to highlight within the label.
+ * @returns Ordered segments covering the whole label; a single unmatched
+ *   segment when the query is empty or not found.
+ */
+function matchSegments(label, query) {
+    const q = normalizeForMatch(query.trim());
+    if (!q)
+        return [{ text: label, matched: false }];
+    // Work in code points so surrogate pairs (e.g. emoji) are not split.
+    const chars = [...label];
+    let folded = '';
+    // For each folded code-unit position, the index of the originating code point.
+    const originIndex = [];
+    chars.forEach((char, index) => {
+        const foldedChar = normalizeForMatch(char);
+        for (const unit of foldedChar) {
+            folded += unit;
+            originIndex.push(index);
+        }
+    });
+    const start = folded.indexOf(q);
+    if (start === -1)
+        return [{ text: label, matched: false }];
+    const originStart = originIndex[start];
+    const originEnd = originIndex[start + q.length - 1];
+    const before = chars.slice(0, originStart).join('');
+    const match = chars.slice(originStart, originEnd + 1).join('');
+    const after = chars.slice(originEnd + 1).join('');
+    const segments = [];
+    if (before)
+        segments.push({ text: before, matched: false });
+    segments.push({ text: match, matched: true });
+    if (after)
+        segments.push({ text: after, matched: false });
+    return segments;
+}
+
+/**
+ * Splits a label into matched / unmatched {@link MlvMatchSegment}s for the given
+ * query so a template can emphasise the matched substring (case- and
+ * diacritic-insensitive; see {@link matchSegments}). Used by
+ * `mlv-dropdown-panel` to highlight the query inside each suggestion.
+ *
+ * @example
+ * ```html
+ * @for (seg of option.label | mlvHighlightMatch:query; track $index) {
+ *   @if (seg.matched) { <mark>{{ seg.text }}</mark> }
+ *   @else { {{ seg.text }} }
+ * }
+ * ```
+ */
+class MlvHighlightMatchPipe {
+    /**
+     * @param label - The label to segment. Nullish input yields an empty result.
+     * @param query - The query to highlight; empty query returns one unmatched
+     *   segment containing the whole label.
+     */
+    transform(label, query) {
+        if (!label)
+            return [];
+        return matchSegments(label, query ?? '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvHighlightMatchPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: MlvHighlightMatchPipe, isStandalone: true, name: "mlvHighlightMatch" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvHighlightMatchPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'mlvHighlightMatch' }]
+        }] });
+
+class MlvDropdownPanel {
+    /**
+     * Chooses the single scroll owner for this panel.
+     *
+     * Standalone panels scroll themselves. Panels composed inside `mlv-popup`
+     * delegate to the popup so the DOM never contains nested scroll regions.
+     */
+    scrollMode = input('self', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollMode" }] : /* istanbul ignore next */ []));
+    minHeight = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
+    maxHeight = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Whether multiple options can be selected. */
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    selectedValues = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    itemTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Focus strategy forwarded to the inner aria listbox.
+     *
+     * - `'roving'` (default) — DOM focus moves onto the active option (`tabindex`).
+     *   Used by `mlv-select`.
+     * - `'activedescendant'` — DOM focus stays on the owning trigger/input; the
+     *   active option is tracked via `aria-activedescendant`. Used by
+     *   `mlv-combobox`, whose text input must retain focus so typing keeps
+     *   working while navigating options.
+     */
+    focusMode = input('roving', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Index of the option that is visually "active" (highlighted) under the
+     * activedescendant model. `-1` (default) means no active option. The panel
+     * renders a deterministic `[id]` on each option (`<listboxId>-option-<index>`)
+     * so an owning combobox can point its input's `aria-activedescendant` at the
+     * active row and keep the highlight in sync.
+     */
+    activeIndex = input(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional HTML `id` to assign to the inner `<mlv-list>` listbox element.
+     * Allows a parent combobox or select to reference this listbox via `aria-controls`.
+     */
+    listboxId = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name rendered as `aria-label` on the inner listbox. `role="listbox"`
+     * is an ARIA input field, so a panel that is not already named through an owning
+     * control (`mlv-filter`'s popover, for instance) needs one to satisfy WCAG 4.1.2.
+     * `null` (default) renders no attribute.
+     */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * When non-empty, the default option row emphasises the matched substring of
+     * this query inside each suggestion label (case- and diacritic-insensitive;
+     * see {@link MlvHighlightMatchPipe}). Ignored for rows rendered by a custom
+     * {@link itemTemplate}. Empty (default) renders the label as plain text —
+     * ungrouped, un-highlighted lists are byte-for-byte unchanged.
+     */
+    highlightQuery = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlightQuery" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, the panel renders a loading affordance instead of the option
+     * list / empty state — used by `[mlvAutocomplete]` while an async `search`
+     * resolves. The {@link loadingText} is announced politely.
+     */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Text shown (and announced) inside the loading affordance while
+     * {@link loading} is `true`. Localise by binding a translated string.
+     * @default 'Loading…'
+     */
+    loadingText = input('Loading…', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, a page beyond the first is being fetched: renders a polite
+     * bottom status row (`loadingText`) after the last option. The listbox and
+     * existing options stay interactive.
+     * @default false
+     */
+    loadingMore = input(false, { ...(ngDevMode ? { debugName: "loadingMore" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Whether more pages exist. When `true` the panel observes its scroll owner
+     * and emits {@link loadMore} as the user nears the end of the list.
+     * @default false
+     */
+    hasMore = input(false, { ...(ngDevMode ? { debugName: "hasMore" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Distance (px) from the end of the scroll owner at which {@link loadMore} fires. */
+    infiniteScrollThreshold = input(150, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "infiniteScrollThreshold" }] : /* istanbul ignore next */ []));
+    /** Emits when the user scrolls within `infiniteScrollThreshold` of the end while `hasMore`. */
+    loadMore = output();
+    /**
+     * @protected Effective listbox id forwarded to the aria `Listbox.id` input on
+     * the inner `<mlv-list>`. Uses the consumer-provided {@link listboxId} when
+     * set, otherwise a stable generated fallback so the rendered listbox always
+     * carries a valid unique DOM id (aria would otherwise mint its own, breaking
+     * a parent trigger's `aria-controls` linkage).
+     */
+    _resolvedListboxId = computed(() => this.listboxId() ?? this._fallbackListboxId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedListboxId" }] : /* istanbul ignore next */ []));
+    /** @private Stable generated id used when no `listboxId` is supplied. */
+    _fallbackListboxId = mlvNextId('mlv-dropdown-listbox');
+    /**
+     * @protected Whether the current options declare groups (at least one option
+     * carries a non-empty `group`). When `false` the template renders the exact
+     * flat option list as before — plain / ungrouped arrays are unaffected.
+     */
+    _isGrouped = computed(() => hasOptionGroups(this.options()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isGrouped" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected The options clustered into consecutive same-group runs for
+     * rendering under sticky headers. Consecutive-run grouping (no reordering)
+     * keeps DOM order identical to the flat `options()` order, so option indices,
+     * `optionId`, `activeIndex`, and aria's DOM-order navigation all stay aligned.
+     * Each entry retains its flat index into `options()`. A run of options without
+     * a group (empty/undefined) becomes a headerless cluster (`label: null`).
+     */
+    _groups = computed(() => {
+        const listboxId = this._resolvedListboxId();
+        const groups = [];
+        this.options().forEach((option, index) => {
+            const label = option.group ? option.group : null;
+            const current = groups[groups.length - 1];
+            if (current && current.label === label) {
+                current.entries.push({ option, index });
+            }
+            else {
+                groups.push({
+                    label,
+                    headerId: label ? `${listboxId}-group-${groups.length}` : null,
+                    entries: [{ option, index }],
+                });
+            }
+        });
+        return groups;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_groups" }] : /* istanbul ignore next */ []));
+    /** @protected Effective max panel height in px — the `maxHeight` input when set, else the viewport-derived default. */
+    _calculatedMaxHeight = computed(() => {
+        const inputMaxHeight = this.maxHeight();
+        return inputMaxHeight > 0 ? inputMaxHeight : this._defaultMaxHeight();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_calculatedMaxHeight" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    /** @private Selection service coordinating focus-first requests from a parent select/combobox. */
+    _selectionService = inject(MlvSelectionService);
+    /** @private Set of currently selected values for O(1) membership checks. */
+    _selectedSet = computed(() => new Set(this.selectedValues()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selectedSet" }] : /* istanbul ignore next */ []));
+    /** @private Default max panel height (px) derived from the viewport height. */
+    _defaultMaxHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_defaultMaxHeight" }] : /* istanbul ignore next */ []));
+    /** @private The inner selectable list directive, used to move focus to the first option. */
+    _listSelectable = viewChild(MlvListSelectable, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_listSelectable" }] : /* istanbul ignore next */ []));
+    /** @private The panel's own scrollbar (`scrollMode="self"` only). */
+    _scrollbar = viewChild(MlvScrollbar, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scrollbar" }] : /* istanbul ignore next */ []));
+    /** @private The sentinel-hosted infinite-scroll directive, re-checked after each option append. */
+    _infiniteScroll = viewChild(MlvInfiniteScroll, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_infiniteScroll" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected The element that actually scrolls: the panel's own scrollbar
+     * viewport (`scrollMode="self"`) or the nearest ancestor `mlv-scrollbar`
+     * viewport — the owning `mlv-popup`'s — in parent mode. Resolved after the
+     * first render; the sentinel directive stays disabled until then.
+     */
+    _scrollContainer = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scrollContainer" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Whether the scroll-owner lookup has already run. It needs the first
+     * render, so a `null` {@link _scrollContainer} before that means "not resolved
+     * yet", not "no owner" — the dev warning must not fire on it.
+     */
+    _scrollOwnerResolved = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scrollOwnerResolved" }] : /* istanbul ignore next */ []));
+    /** @private Latches the dev-mode "no scroll owner" warning to once per panel. */
+    _warnedNoScrollOwner = false;
+    /** @private Host element, used to scroll the active option into view (activedescendant model). */
+    _host = inject(ElementRef);
+    /** @private Angular-provided document used to access the browser viewport safely. */
+    _document = inject(DOCUMENT);
+    constructor() {
+        const viewport = this._document.defaultView;
+        if (viewport) {
+            fromEvent(viewport, 'resize')
+                .pipe(startWith(null), takeUntilDestroyed())
+                .subscribe(() => {
+                this._defaultMaxHeight.set(viewport.innerHeight * 0.4);
+            });
+        }
+        this._selectionService.focusFirst$
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => {
+            this._listSelectable()?.focusFirst();
+        });
+        // Keep the activedescendant-active option scrolled into view. DOM focus
+        // never lands on the option in this mode (it stays on the owning combobox
+        // input), so the native scroll-on-focus does not apply.
+        effect(() => {
+            const index = this.activeIndex();
+            if (this.focusMode() !== 'activedescendant' || index < 0)
+                return;
+            const el = this._host.nativeElement.querySelector(`[id="${this.optionId(index)}"]`);
+            // Optional call: `scrollIntoView` is absent in some environments (jsdom).
+            el?.scrollIntoView?.({ block: 'nearest' });
+        });
+        // Resolve the paging sentinel's scroll owner once the view exists: the
+        // panel's own scrollbar viewport, or the ancestor popup viewport it
+        // delegates scrolling to.
+        afterNextRender(() => {
+            const own = this._scrollbar()?.viewportElement ?? null;
+            const parent = this._host.nativeElement.closest('.mlv-scrollbar__viewport');
+            this._scrollContainer.set(this.scrollMode() === 'self' ? own : parent);
+            this._scrollOwnerResolved.set(true);
+        });
+        // Dev-mode diagnostic: an armed sentinel with no scroll owner is silent —
+        // `scrollMode="parent"` finds nothing unless the panel renders inside an
+        // `mlv-scrollbar` viewport. Re-checked reactively so a `hasMore` that flips
+        // true later is caught too; warned at most once per panel instance.
+        if (isDevMode()) {
+            effect(() => {
+                const missing = this.hasMore() &&
+                    this._scrollOwnerResolved() &&
+                    this._scrollContainer() === null;
+                if (!missing)
+                    return;
+                untracked(() => {
+                    if (this._warnedNoScrollOwner)
+                        return;
+                    this._warnedNoScrollOwner = true;
+                    console.warn('[mlv-dropdown-panel] hasMore is set but no scroll owner was found — in scrollMode="parent" the panel must render inside an mlv-scrollbar viewport (e.g. mlv-popup); lazy paging will not fire.');
+                });
+            });
+        }
+        // Auto-fill: after any render where the option set changed, re-measure so a
+        // short page immediately requests the next one.
+        afterRenderEffect(() => {
+            this.options();
+            this._infiniteScroll()?.check();
+        });
+    }
+    isValueSelected(value) {
+        return this._selectedSet().has(value);
+    }
+    /**
+     * Deterministic DOM `id` for the option at `index`, forwarded to aria's
+     * `ngOption` id. An owning combobox computes the same id (via the shared
+     * {@link optionId} helper) to wire its input's `aria-activedescendant`.
+     */
+    optionId(index) {
+        return optionId(this._resolvedListboxId(), index);
+    }
+    /**
+     * Re-emits the aria listbox selection. `@angular/aria`'s `ngListbox` emits the
+     * selected values array directly (unlike CdkListbox's `ListboxValueChangeEvent`).
+     */
+    onValueChange(values) {
+        this.valueChange.emit(values);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDropdownPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvDropdownPanel, isStandalone: true, selector: "mlv-dropdown-panel", inputs: { scrollMode: { classPropertyName: "scrollMode", publicName: "scrollMode", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, focusMode: { classPropertyName: "focusMode", publicName: "focusMode", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, listboxId: { classPropertyName: "listboxId", publicName: "listboxId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, highlightQuery: { classPropertyName: "highlightQuery", publicName: "highlightQuery", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, loadingMore: { classPropertyName: "loadingMore", publicName: "loadingMore", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollThreshold: { classPropertyName: "infiniteScrollThreshold", publicName: "infiniteScrollThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadMore: "loadMore", valueChange: "valueChange" }, host: { properties: { "class.mlv-dropdown-panel--parent-scroll": "scrollMode() === \"parent\"", "class.mlv-dropdown-panel--loading": "loading()", "style.max-height.px": "_calculatedMaxHeight()" }, classAttribute: "mlv-dropdown-panel" }, viewQueries: [{ propertyName: "_listSelectable", first: true, predicate: MlvListSelectable, descendants: true, isSignal: true }, { propertyName: "_scrollbar", first: true, predicate: MlvScrollbar, descendants: true, isSignal: true }, { propertyName: "_infiniteScroll", first: true, predicate: MlvInfiniteScroll, descendants: true, isSignal: true }], ngImport: i0, template: "@if (scrollMode() === 'self') {\n<mlv-scrollbar class=\"mlv-dropdown-panel__scrollbar\" [viewportTabIndex]=\"-1\">\n  <ng-container [ngTemplateOutlet]=\"panelContent\" />\n</mlv-scrollbar>\n} @else {\n<ng-container [ngTemplateOutlet]=\"panelContent\" />\n}\n\n<ng-template #panelContent>\n  <!-- Async loading affordance (used by [mlvAutocomplete]). Rendered above the\n       listbox so the listbox element (aria-controls target) still exists while a\n       search resolves; the empty \"no results\" projection is suppressed meanwhile. -->\n  @if (loading()) {\n  <div class=\"mlv-dropdown-panel__loading\" role=\"status\" aria-live=\"polite\">\n    <span class=\"mlv-dropdown-panel__spinner\" aria-hidden=\"true\"></span>\n    <span class=\"mlv-dropdown-panel__loading-text\">{{ loadingText() }}</span>\n  </div>\n  }\n\n  <!-- selectionMode=\"explicit\" + softDisabled=\"false\" reproduce the previous CdkListbox\n     behaviour: arrow keys move focus (never commit the value) and skip disabled options.\n     listRole/itemRole are pinned to the listbox pattern so aria's pointer selection can\n     resolve each option via closest('[role=\"option\"]').\n     [listboxId] forwards the consumer id into aria's Listbox.id input so the rendered\n     [attr.id]=\"id()\" equals it \u2014 otherwise aria mints its own id and a parent\n     select/combobox trigger's aria-controls would dangle. -->\n  <mlv-list\n    class=\"mlv-dropdown-panel__listbox\"\n    appearance=\"menu\"\n    selectable\n    listRole=\"listbox\"\n    selectionMode=\"explicit\"\n    [softDisabled]=\"false\"\n    [focusMode]=\"focusMode()\"\n    [attr.aria-busy]=\"loading() || loadingMore() ? true : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [listboxId]=\"_resolvedListboxId()\"\n    [multiple]=\"multiple()\"\n    [value]=\"selectedValues()\"\n    (valueChange)=\"onValueChange($event)\"\n  >\n    @if (_isGrouped()) {\n    <!-- Grouped rendering: consecutive same-group runs become APG listbox groups\n       (role=\"group\" + aria-labelledby \u2192 a non-selectable, presentational sticky\n       header). Options stay flat descendants of the listbox, so aria registers\n       and navigates them exactly as ungrouped; headers are not aria options and\n       are skipped by keyboard nav / type-ahead. Each option keeps its flat index\n       so optionId / activeIndex line up with an owning combobox. -->\n    @for (group of _groups(); track $index) { @if (group.label) {\n    <div\n      class=\"mlv-dropdown-panel__group\"\n      role=\"group\"\n      [attr.aria-labelledby]=\"group.headerId\"\n    >\n      <div\n        class=\"mlv-dropdown-panel__group-header\"\n        role=\"presentation\"\n        [id]=\"group.headerId\"\n      >\n        {{ group.label }}\n      </div>\n      @for (entry of group.entries; track entry.option.value) {\n      <ng-container\n        *ngTemplateOutlet=\"optionRow; context: { option: entry.option, index: entry.index }\"\n      />\n      }\n    </div>\n    } @else { @for (entry of group.entries; track entry.option.value) {\n    <ng-container\n      *ngTemplateOutlet=\"optionRow; context: { option: entry.option, index: entry.index }\"\n    />\n    } } } } @else { @for (option of options(); track option.value; let i =\n    $index) {\n    <ng-container\n      *ngTemplateOutlet=\"optionRow; context: { option: option, index: i }\"\n    />\n    } @empty { @if (!loading()) {\n    <ng-content />\n    } } }\n\n    <!-- Single source of truth for an option row, outlet-ed by both the flat and\n       the grouped branches. Declared INSIDE <mlv-list> so its declaration\n       injector carries the aria LISTBOX token \u2014 an outlet-ed <mlv-list-item>\n       resolves DI from the template's declaration context, not its insertion\n       point. `index` is the flat index into options(). -->\n    <ng-template #optionRow let-option=\"option\" let-index=\"index\">\n      <mlv-list-item\n        class=\"mlv-dropdown-panel__item\"\n        itemRole=\"option\"\n        [class.mlv-dropdown-panel__item--active]=\"index === activeIndex()\"\n        [value]=\"option.value\"\n        [label]=\"option.label\"\n        [disabled]=\"option.disabled ?? false\"\n        [optionId]=\"optionId(index)\"\n      >\n        @if (itemTemplate()) {\n        <ng-container\n          *ngTemplateOutlet=\"itemTemplate()!; context: { $implicit: option }\"\n        />\n        } @else {\n        <span class=\"mlv-dropdown-panel__item-label\">\n          @if (highlightQuery()) { @for (seg of option.label |\n          mlvHighlightMatch: highlightQuery(); track $index) { @if (seg.matched)\n          {<mark class=\"mlv-dropdown-panel__match\">{{ seg.text }}</mark>} @else\n          {{{ seg.text }}} } } @else {{{ option.label }}}\n        </span>\n        @if (isValueSelected(option.value)) {\n        <svg\n          class=\"mlv-dropdown-panel__item-check\"\n          lucideCheck\n          size=\"16\"\n          strokeWidth=\"2\"\n        />\n        } }\n      </mlv-list-item>\n    </ng-template>\n  </mlv-list>\n\n  <!-- Next-page affordance. Sits after the last option (unlike the top\n       `__loading` row) so appended rows are not pushed around, and stays a\n       polite status region \u2014 the listbox itself keeps its options interactive. -->\n  @if (loadingMore()) {\n  <div\n    class=\"mlv-dropdown-panel__loading-more\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    <span class=\"mlv-dropdown-panel__spinner\" aria-hidden=\"true\"></span>\n    <span class=\"mlv-dropdown-panel__loading-text\">{{ loadingText() }}</span>\n  </div>\n  }\n\n  <!-- Paging sentinel. The directive listens on the real scroll owner via\n       [scrollContainer]; it stays disabled until that element is resolved so\n       its initial measurement never runs against the non-scrolling panel host. -->\n  <div\n    class=\"mlv-dropdown-panel__sentinel\"\n    aria-hidden=\"true\"\n    mlvInfiniteScroll\n    [scrollContainer]=\"_scrollContainer()\"\n    [disabled]=\"!hasMore() || !_scrollContainer()\"\n    [hasMore]=\"hasMore()\"\n    [loading]=\"loading() || loadingMore()\"\n    [threshold]=\"infiniteScrollThreshold()\"\n    (loadMore)=\"loadMore.emit()\"\n  ></div>\n</ng-template>\n", styles: ["@layer mlv.components{.mlv-dropdown-panel{display:flex;flex-direction:column;overflow:hidden;min-height:0}.mlv-dropdown-panel--surface{background-color:var(--mlv-background-raised);border:var(--mlv-stroke-width) solid var(--mlv-border-subtle);border-radius:var(--mlv-popover-surface-radius);box-shadow:var(--mlv-shadow-floating)}.mlv-dropdown-panel--parent-scroll{overflow:visible}.mlv-dropdown-panel__scrollbar{flex:1 1 auto;width:100%;min-height:0}.mlv-dropdown-panel__scrollbar>.mlv-scrollbar__viewport{overflow-x:hidden}.mlv-dropdown-panel .mlv-dropdown-panel__item:focus-visible{outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-dropdown-panel .mlv-dropdown-panel__listbox{--mlv-list-padding-block: var(--mlv-popover-inset);--mlv-list-padding-inline: var(--mlv-popover-inset)}.mlv-dropdown-panel .mlv-dropdown-panel__listbox .mlv-list-item__content{display:flex;align-items:center;justify-content:space-between;width:100%}.mlv-dropdown-panel__item--active .mlv-list-item__surface{background-color:var(--mlv-popover-item-bg-hover)}.mlv-dropdown-panel__group{display:block}.mlv-dropdown-panel .mlv-dropdown-panel__group:not(:last-child){margin-bottom:var(--mlv-spacing-1)}.mlv-dropdown-panel__group-header{position:sticky;top:0;z-index:1;padding:var(--mlv-spacing-1-5) var(--mlv-spacing-2);font-size:var(--mlv-typography-body-s-size);font-weight:var(--mlv-font-weight-semibold);line-height:var(--mlv-typography-body-s-line-height);color:var(--mlv-text-secondary);text-transform:uppercase;letter-spacing:.06em;background-color:color-mix(in srgb,var(--mlv-background-raised) 88%,transparent);backdrop-filter:saturate(1.4) blur(.5rem);-webkit-backdrop-filter:saturate(1.4) blur(.5rem);pointer-events:none;-webkit-user-select:none;user-select:none}.mlv-dropdown-panel__item-label{flex:1;min-width:0}.mlv-dropdown-panel__item-check{color:var(--mlv-text-action);flex-shrink:0}.mlv-dropdown-panel__match{background-color:transparent;color:var(--mlv-text-action);font-weight:var(--mlv-font-weight-semibold);padding:0}.mlv-dropdown-panel__loading,.mlv-dropdown-panel__loading-more{display:flex;align-items:center;gap:var(--mlv-spacing-2);padding:var(--mlv-spacing-2) var(--mlv-spacing-3);color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size);line-height:var(--mlv-typography-body-s-line-height)}.mlv-dropdown-panel--loading .mlv-dropdown-panel__item-label,.mlv-dropdown-panel--loading .mlv-dropdown-panel__item-check{color:var(--mlv-text-secondary);transition:color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-dropdown-panel__sentinel{height:0;overflow:hidden}.mlv-dropdown-panel__spinner{width:1rem;height:1rem;flex-shrink:0;border:var(--mlv-stroke-width) solid var(--mlv-border-normal);border-top-color:var(--mlv-text-action);border-radius:var(--mlv-radius-full);animation:mlv-dropdown-panel-spin var(--mlv-duration-slower) linear infinite}@media(prefers-reduced-motion:reduce){.mlv-dropdown-panel__spinner{animation-duration:calc(var(--mlv-duration-slower) * 4)}.mlv-dropdown-panel--loading .mlv-dropdown-panel__item-label,.mlv-dropdown-panel--loading .mlv-dropdown-panel__item-check{transition:none}}@keyframes mlv-dropdown-panel-spin{to{transform:rotate(360deg)}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MlvList, selector: "mlv-list", inputs: ["listRole", "variant", "appearance"] }, { kind: "component", type: MlvListItem, selector: "mlv-list-item", inputs: ["itemRole", "unread", "accent"] }, { kind: "directive", type: MlvListItemSelectable, selector: "mlv-list-item[value]", exportAs: ["uiListItemSelectable"] }, { kind: "directive", type: MlvListSelectable, selector: "mlv-list[selectable]" }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }, { kind: "component", type: MlvScrollbar, selector: "mlv-scrollbar", inputs: ["orientation", "scrollbarSize", "disabled", "ariaLabel", "viewportTabIndex"] }, { kind: "directive", type: MlvInfiniteScroll, selector: "[mlvInfiniteScroll]", inputs: ["threshold", "loading", "hasMore", "disabled", "orientation", "scrollContainer"], outputs: ["loadMore"], exportAs: ["mlvInfiniteScroll"] }, { kind: "pipe", type: MlvHighlightMatchPipe, name: "mlvHighlightMatch" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDropdownPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-dropdown-panel', imports: [
+                        NgTemplateOutlet,
+                        MlvList,
+                        MlvListItem,
+                        MlvListItemSelectable,
+                        MlvListSelectable,
+                        LucideCheck,
+                        MlvHighlightMatchPipe,
+                        MlvScrollbar,
+                        MlvInfiniteScroll,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-dropdown-panel',
+                        '[class.mlv-dropdown-panel--parent-scroll]': 'scrollMode() === "parent"',
+                        '[class.mlv-dropdown-panel--loading]': 'loading()',
+                        '[style.max-height.px]': '_calculatedMaxHeight()',
+                    }, template: "@if (scrollMode() === 'self') {\n<mlv-scrollbar class=\"mlv-dropdown-panel__scrollbar\" [viewportTabIndex]=\"-1\">\n  <ng-container [ngTemplateOutlet]=\"panelContent\" />\n</mlv-scrollbar>\n} @else {\n<ng-container [ngTemplateOutlet]=\"panelContent\" />\n}\n\n<ng-template #panelContent>\n  <!-- Async loading affordance (used by [mlvAutocomplete]). Rendered above the\n       listbox so the listbox element (aria-controls target) still exists while a\n       search resolves; the empty \"no results\" projection is suppressed meanwhile. -->\n  @if (loading()) {\n  <div class=\"mlv-dropdown-panel__loading\" role=\"status\" aria-live=\"polite\">\n    <span class=\"mlv-dropdown-panel__spinner\" aria-hidden=\"true\"></span>\n    <span class=\"mlv-dropdown-panel__loading-text\">{{ loadingText() }}</span>\n  </div>\n  }\n\n  <!-- selectionMode=\"explicit\" + softDisabled=\"false\" reproduce the previous CdkListbox\n     behaviour: arrow keys move focus (never commit the value) and skip disabled options.\n     listRole/itemRole are pinned to the listbox pattern so aria's pointer selection can\n     resolve each option via closest('[role=\"option\"]').\n     [listboxId] forwards the consumer id into aria's Listbox.id input so the rendered\n     [attr.id]=\"id()\" equals it \u2014 otherwise aria mints its own id and a parent\n     select/combobox trigger's aria-controls would dangle. -->\n  <mlv-list\n    class=\"mlv-dropdown-panel__listbox\"\n    appearance=\"menu\"\n    selectable\n    listRole=\"listbox\"\n    selectionMode=\"explicit\"\n    [softDisabled]=\"false\"\n    [focusMode]=\"focusMode()\"\n    [attr.aria-busy]=\"loading() || loadingMore() ? true : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [listboxId]=\"_resolvedListboxId()\"\n    [multiple]=\"multiple()\"\n    [value]=\"selectedValues()\"\n    (valueChange)=\"onValueChange($event)\"\n  >\n    @if (_isGrouped()) {\n    <!-- Grouped rendering: consecutive same-group runs become APG listbox groups\n       (role=\"group\" + aria-labelledby \u2192 a non-selectable, presentational sticky\n       header). Options stay flat descendants of the listbox, so aria registers\n       and navigates them exactly as ungrouped; headers are not aria options and\n       are skipped by keyboard nav / type-ahead. Each option keeps its flat index\n       so optionId / activeIndex line up with an owning combobox. -->\n    @for (group of _groups(); track $index) { @if (group.label) {\n    <div\n      class=\"mlv-dropdown-panel__group\"\n      role=\"group\"\n      [attr.aria-labelledby]=\"group.headerId\"\n    >\n      <div\n        class=\"mlv-dropdown-panel__group-header\"\n        role=\"presentation\"\n        [id]=\"group.headerId\"\n      >\n        {{ group.label }}\n      </div>\n      @for (entry of group.entries; track entry.option.value) {\n      <ng-container\n        *ngTemplateOutlet=\"optionRow; context: { option: entry.option, index: entry.index }\"\n      />\n      }\n    </div>\n    } @else { @for (entry of group.entries; track entry.option.value) {\n    <ng-container\n      *ngTemplateOutlet=\"optionRow; context: { option: entry.option, index: entry.index }\"\n    />\n    } } } } @else { @for (option of options(); track option.value; let i =\n    $index) {\n    <ng-container\n      *ngTemplateOutlet=\"optionRow; context: { option: option, index: i }\"\n    />\n    } @empty { @if (!loading()) {\n    <ng-content />\n    } } }\n\n    <!-- Single source of truth for an option row, outlet-ed by both the flat and\n       the grouped branches. Declared INSIDE <mlv-list> so its declaration\n       injector carries the aria LISTBOX token \u2014 an outlet-ed <mlv-list-item>\n       resolves DI from the template's declaration context, not its insertion\n       point. `index` is the flat index into options(). -->\n    <ng-template #optionRow let-option=\"option\" let-index=\"index\">\n      <mlv-list-item\n        class=\"mlv-dropdown-panel__item\"\n        itemRole=\"option\"\n        [class.mlv-dropdown-panel__item--active]=\"index === activeIndex()\"\n        [value]=\"option.value\"\n        [label]=\"option.label\"\n        [disabled]=\"option.disabled ?? false\"\n        [optionId]=\"optionId(index)\"\n      >\n        @if (itemTemplate()) {\n        <ng-container\n          *ngTemplateOutlet=\"itemTemplate()!; context: { $implicit: option }\"\n        />\n        } @else {\n        <span class=\"mlv-dropdown-panel__item-label\">\n          @if (highlightQuery()) { @for (seg of option.label |\n          mlvHighlightMatch: highlightQuery(); track $index) { @if (seg.matched)\n          {<mark class=\"mlv-dropdown-panel__match\">{{ seg.text }}</mark>} @else\n          {{{ seg.text }}} } } @else {{{ option.label }}}\n        </span>\n        @if (isValueSelected(option.value)) {\n        <svg\n          class=\"mlv-dropdown-panel__item-check\"\n          lucideCheck\n          size=\"16\"\n          strokeWidth=\"2\"\n        />\n        } }\n      </mlv-list-item>\n    </ng-template>\n  </mlv-list>\n\n  <!-- Next-page affordance. Sits after the last option (unlike the top\n       `__loading` row) so appended rows are not pushed around, and stays a\n       polite status region \u2014 the listbox itself keeps its options interactive. -->\n  @if (loadingMore()) {\n  <div\n    class=\"mlv-dropdown-panel__loading-more\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    <span class=\"mlv-dropdown-panel__spinner\" aria-hidden=\"true\"></span>\n    <span class=\"mlv-dropdown-panel__loading-text\">{{ loadingText() }}</span>\n  </div>\n  }\n\n  <!-- Paging sentinel. The directive listens on the real scroll owner via\n       [scrollContainer]; it stays disabled until that element is resolved so\n       its initial measurement never runs against the non-scrolling panel host. -->\n  <div\n    class=\"mlv-dropdown-panel__sentinel\"\n    aria-hidden=\"true\"\n    mlvInfiniteScroll\n    [scrollContainer]=\"_scrollContainer()\"\n    [disabled]=\"!hasMore() || !_scrollContainer()\"\n    [hasMore]=\"hasMore()\"\n    [loading]=\"loading() || loadingMore()\"\n    [threshold]=\"infiniteScrollThreshold()\"\n    (loadMore)=\"loadMore.emit()\"\n  ></div>\n</ng-template>\n", styles: ["@layer mlv.components{.mlv-dropdown-panel{display:flex;flex-direction:column;overflow:hidden;min-height:0}.mlv-dropdown-panel--surface{background-color:var(--mlv-background-raised);border:var(--mlv-stroke-width) solid var(--mlv-border-subtle);border-radius:var(--mlv-popover-surface-radius);box-shadow:var(--mlv-shadow-floating)}.mlv-dropdown-panel--parent-scroll{overflow:visible}.mlv-dropdown-panel__scrollbar{flex:1 1 auto;width:100%;min-height:0}.mlv-dropdown-panel__scrollbar>.mlv-scrollbar__viewport{overflow-x:hidden}.mlv-dropdown-panel .mlv-dropdown-panel__item:focus-visible{outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-dropdown-panel .mlv-dropdown-panel__listbox{--mlv-list-padding-block: var(--mlv-popover-inset);--mlv-list-padding-inline: var(--mlv-popover-inset)}.mlv-dropdown-panel .mlv-dropdown-panel__listbox .mlv-list-item__content{display:flex;align-items:center;justify-content:space-between;width:100%}.mlv-dropdown-panel__item--active .mlv-list-item__surface{background-color:var(--mlv-popover-item-bg-hover)}.mlv-dropdown-panel__group{display:block}.mlv-dropdown-panel .mlv-dropdown-panel__group:not(:last-child){margin-bottom:var(--mlv-spacing-1)}.mlv-dropdown-panel__group-header{position:sticky;top:0;z-index:1;padding:var(--mlv-spacing-1-5) var(--mlv-spacing-2);font-size:var(--mlv-typography-body-s-size);font-weight:var(--mlv-font-weight-semibold);line-height:var(--mlv-typography-body-s-line-height);color:var(--mlv-text-secondary);text-transform:uppercase;letter-spacing:.06em;background-color:color-mix(in srgb,var(--mlv-background-raised) 88%,transparent);backdrop-filter:saturate(1.4) blur(.5rem);-webkit-backdrop-filter:saturate(1.4) blur(.5rem);pointer-events:none;-webkit-user-select:none;user-select:none}.mlv-dropdown-panel__item-label{flex:1;min-width:0}.mlv-dropdown-panel__item-check{color:var(--mlv-text-action);flex-shrink:0}.mlv-dropdown-panel__match{background-color:transparent;color:var(--mlv-text-action);font-weight:var(--mlv-font-weight-semibold);padding:0}.mlv-dropdown-panel__loading,.mlv-dropdown-panel__loading-more{display:flex;align-items:center;gap:var(--mlv-spacing-2);padding:var(--mlv-spacing-2) var(--mlv-spacing-3);color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size);line-height:var(--mlv-typography-body-s-line-height)}.mlv-dropdown-panel--loading .mlv-dropdown-panel__item-label,.mlv-dropdown-panel--loading .mlv-dropdown-panel__item-check{color:var(--mlv-text-secondary);transition:color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-dropdown-panel__sentinel{height:0;overflow:hidden}.mlv-dropdown-panel__spinner{width:1rem;height:1rem;flex-shrink:0;border:var(--mlv-stroke-width) solid var(--mlv-border-normal);border-top-color:var(--mlv-text-action);border-radius:var(--mlv-radius-full);animation:mlv-dropdown-panel-spin var(--mlv-duration-slower) linear infinite}@media(prefers-reduced-motion:reduce){.mlv-dropdown-panel__spinner{animation-duration:calc(var(--mlv-duration-slower) * 4)}.mlv-dropdown-panel--loading .mlv-dropdown-panel__item-label,.mlv-dropdown-panel--loading .mlv-dropdown-panel__item-check{transition:none}}@keyframes mlv-dropdown-panel-spin{to{transform:rotate(360deg)}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { scrollMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollMode", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], focusMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusMode", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], listboxId: [{ type: i0.Input, args: [{ isSignal: true, alias: "listboxId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], highlightQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightQuery", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], loadingMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMore", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], infiniteScrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScrollThreshold", required: false }] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], _listSelectable: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MlvListSelectable), { isSignal: true }] }], _scrollbar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MlvScrollbar), { isSignal: true }] }], _infiniteScroll: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MlvInfiniteScroll), { isSignal: true }] }] } });
+
+/**
+ * In-memory data source for option controls (`mlv-select`, `mlv-combobox`,
+ * `[mlvAutocomplete]`). Identical to `MlvArrayDataSource` except that it is
+ * **unpaged** (`perPage = Infinity`) so the whole list renders; the shared
+ * natural-field search (`setSearch({ query, keys: [] })`) and sorting are
+ * inherited. Reach for it when you want a data-source-shaped API over an
+ * in-memory array (e.g. to swap for a remote subclass later); a plain `T[]`
+ * remains the simplest input.
+ */
+class MlvSelectDataSource extends MlvArrayDataSource {
+    /**
+     * @param data A plain array (wrapped in a signal automatically) or a
+     * `Signal<T[]>` to track reactively.
+     */
+    constructor(data) {
+        super(data);
+        this._perPage.set(Infinity);
+    }
+}
+
+/**
+ * Normalises every supported search result into a one-shot observable. Shared
+ * by `MlvOptionsAdapter` and `[mlvAutocomplete]`.
+ */
+function toOptionsResult(result) {
+    return Array.isArray(result)
+        ? of(result)
+        : from(result);
+}
+
+/**
+ * Normalises `T[] | Observable<T[]> | MlvDataSource<T>` (+ optional
+ * `searchFn`) into one reactive shape shared by `mlv-select`, `mlv-combobox`
+ * and `[mlvAutocomplete]`. Construct it inside an injection context (a
+ * component field initialiser or constructor) — it uses `effect()` and
+ * `DestroyRef`.
+ *
+ * Paging (`MlvDataSource` only): `connect()` emits the current page's slice and
+ * the adapter accumulates, tracking the **applied page** — the page whose slice
+ * is currently in `items` — alongside the items accumulated before it:
+ *
+ * - `page <= 1` → the slice replaces `items` and accumulation restarts.
+ * - `page === appliedPage` → the source re-emitted the page already shown (a
+ *   backing array changed, a refetch landed): its **tail is replaced**, never
+ *   appended, so rows are not duplicated.
+ * - `page > appliedPage` → the slice is appended.
+ * - A run where the slice reference has not changed (a `page` bump whose data
+ *   has not arrived yet) applies nothing.
+ *
+ * `loadMore()` is therefore a no-op while a page is pending — a scroll sentinel
+ * firing repeatedly cannot skip a page.
+ *
+ * Swapping the `searchFn` **only re-arms the lazy gate** (the next
+ * `ensureLoaded()` calls the new function): the in-flight call is left running
+ * and `items` / `ready` / `loading` are untouched, so results stay on screen
+ * until the new function answers and a control bound to an inline arrow — a
+ * fresh reference on every change detection run — is not reset on every pass.
+ */
+class MlvOptionsAdapter {
+    _config;
+    /** @private Lifetime for the in-flight `searchFn` subscription / debounce timer. */
+    _destroyRef = inject(DestroyRef);
+    /** @private Which branch the current inputs select. `searchFn` wins over the source. */
+    _kind = computed(() => {
+        if (this._config.searchFn())
+            return 'fn';
+        const source = this._config.source();
+        if (source instanceof MlvDataSource)
+            return 'ds';
+        if (isObservable(source))
+            return 'observable';
+        return 'array';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_kind" }] : /* istanbul ignore next */ []));
+    // ─── observable branch ────────────────────────────────────────────────────
+    /** @private Latest emission of the observable source. */
+    _obsItems = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_obsItems" }] : /* istanbul ignore next */ []));
+    /** @private Whether the observable source has emitted at least once. */
+    _obsReady = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_obsReady" }] : /* istanbul ignore next */ []));
+    // ─── data-source branch ───────────────────────────────────────────────────
+    /** @private The connected source and its (memoised) `connect()` signal. */
+    _connected = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_connected" }] : /* istanbul ignore next */ []));
+    /** @private Accumulated pages. */
+    _dsItems = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dsItems" }] : /* istanbul ignore next */ []));
+    /** @private Whether the source has been observed not-loading at least once since connect. */
+    _dsReady = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dsReady" }] : /* istanbul ignore next */ []));
+    /** @private Last slice reference applied — a `page` bump whose slice has not arrived yet must not append. */
+    _dsLastSlice = null;
+    /** @private The page whose slice is currently applied (`0` = none yet). Distinguishes an append from a re-emit of the page already shown. */
+    _dsAppliedPage = 0;
+    /** @private Items accumulated *before* the applied page — the prefix a re-emit of that page is re-appended to. */
+    _dsBase = [];
+    // ─── searchFn branch ──────────────────────────────────────────────────────
+    /** @private Last `searchFn` result. */
+    _fnItems = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_fnItems" }] : /* istanbul ignore next */ []));
+    /** @private Whether a `searchFn` call is in flight. */
+    _fnLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_fnLoading" }] : /* istanbul ignore next */ []));
+    /** @private Whether `searchFn` has produced (or failed) at least once. */
+    _fnReady = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_fnReady" }] : /* istanbul ignore next */ []));
+    /** @private Whether `searchFn` has been invoked at least once (lazy-load gate). */
+    _fnStarted = false;
+    /**
+     * @private The `searchFn` reference the swap effect last observed, normalised
+     * to `null` when unset. Stays `undefined` until that effect's first run, which
+     * is how `undefined → fn` at construction is told apart from a genuine swap.
+     */
+    _fnSeen;
+    /** @private In-flight `searchFn` subscription (superseded by a newer query). */
+    _fnSub = null;
+    /** @private Monotonic token discarding stale `searchFn` results. */
+    _fnToken = 0;
+    /** @private Pending debounce timer for remote searches. */
+    _debounceTimer = null;
+    /** @private Last query handed to `search()`; replayed by `ensureLoaded()`. */
+    _lastQuery = '';
+    /** `'local'` for arrays / observables (consumer filters); `'remote'` for a data source or `searchFn`. */
+    mode = computed(() => {
+        const kind = this._kind();
+        return kind === 'array' || kind === 'observable' ? 'local' : 'remote';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** The current raw items (accumulated pages for a data source). */
+    items = computed(() => {
+        switch (this._kind()) {
+            case 'fn':
+                return this._fnItems();
+            case 'ds':
+                return this._dsItems();
+            case 'observable':
+                return this._obsItems();
+            default:
+                return this._config.source() ?? [];
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Source-owned "first page / search in flight" flag (drives the top spinner row). */
+    loading = computed(() => {
+        switch (this._kind()) {
+            case 'fn':
+                return this._fnLoading();
+            case 'ds': {
+                const connected = this._connected();
+                return (!!connected && connected.ds.loading() && connected.ds.page() === 1);
+            }
+            case 'observable':
+                return !this._obsReady();
+            default:
+                return false;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** A page beyond the first is in flight (drives the bottom spinner row). Data source only. */
+    loadingMore = computed(() => {
+        if (this._kind() !== 'ds')
+            return false;
+        const connected = this._connected();
+        return !!connected && connected.ds.loading() && connected.ds.page() > 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingMore" }] : /* istanbul ignore next */ []));
+    /** The first payload has arrived — arrays immediately, observables on first emit, data sources once observed not-loading, `searchFn` after its first result. */
+    ready = computed(() => {
+        switch (this._kind()) {
+            case 'fn':
+                return this._fnReady();
+            case 'ds':
+                return this._dsReady();
+            case 'observable':
+                return this._obsReady();
+            default:
+                return true;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+    /** More pages exist (`items.length < totalItems`). Data source only. */
+    hasMore = computed(() => {
+        if (this._kind() !== 'ds')
+            return false;
+        const connected = this._connected();
+        return !!connected && this._dsItems().length < connected.ds.totalItems();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []));
+    constructor(_config) {
+        this._config = _config;
+        // Observable source: (re)subscribe whenever the reference changes.
+        effect((onCleanup) => {
+            const source = this._config.source();
+            if (!isObservable(source))
+                return;
+            untracked(() => {
+                this._obsReady.set(false);
+                this._obsItems.set([]);
+            });
+            const sub = source.subscribe((items) => {
+                this._obsItems.set(items);
+                this._obsReady.set(true);
+            });
+            onCleanup(() => sub.unsubscribe());
+        });
+        // Data source: connect once per source — but only while the data source is
+        // the branch in use. A `searchFn` supersedes it, and connecting anyway would
+        // fire a fetch whose slice is never read.
+        effect(() => {
+            const kind = this._kind();
+            const source = this._config.source();
+            untracked(() => {
+                if (kind === 'ds' && source instanceof MlvDataSource) {
+                    this._resetDataSource();
+                    this._connected.set({ ds: source, items: source.connect() });
+                }
+                else if (this._connected()) {
+                    this._resetDataSource();
+                    this._connected.set(null);
+                }
+            });
+        });
+        // Data source: accumulate slices against the applied page.
+        effect(() => {
+            const connected = this._connected();
+            if (!connected)
+                return;
+            const slice = connected.items();
+            const page = connected.ds.page();
+            const loading = connected.ds.loading();
+            untracked(() => {
+                // A page bump whose slice has not arrived yet applies nothing.
+                if (slice === this._dsLastSlice) {
+                    if (!loading)
+                        this._dsReady.set(true);
+                    return;
+                }
+                if (page <= 1) {
+                    this._dsBase = [];
+                    this._dsItems.set([...slice]);
+                }
+                else if (page === this._dsAppliedPage) {
+                    // Same page re-emitted — replace its tail rather than duplicating it.
+                    this._dsItems.set([...this._dsBase, ...slice]);
+                }
+                else {
+                    this._dsBase = this._dsItems();
+                    this._dsItems.set([...this._dsBase, ...slice]);
+                }
+                this._dsAppliedPage = page;
+                this._dsLastSlice = slice;
+                if (!loading)
+                    this._dsReady.set(true);
+            });
+        });
+        // searchFn: a swapped function re-arms the lazy gate so the next
+        // `ensureLoaded()` calls it — and nothing else. Tearing down the in-flight
+        // call or clearing `items` would make the control sensitive to the
+        // *reference* identity of the bound function, and an inline arrow
+        // (`[search]="(q) => api.find(q)"`) is a fresh reference on every change
+        // detection run. Stale items therefore stay until the new function answers,
+        // matching the "results kept while loading" contract; once the new function
+        // starts, a late result from the old one is discarded by the monotonic
+        // token. The effect's first run is `undefined → fn` at construction, which
+        // is not a swap.
+        effect(() => {
+            const fn = this._config.searchFn() ?? null;
+            untracked(() => {
+                const previous = this._fnSeen;
+                this._fnSeen = fn;
+                if (previous === undefined || previous === fn)
+                    return;
+                this._fnStarted = false;
+                if (this._kind() === 'fn' && this._config.eager())
+                    this.ensureLoaded();
+            });
+        });
+        // searchFn: eager first load.
+        effect(() => {
+            if (this._kind() === 'fn' && this._config.eager()) {
+                untracked(() => this.ensureLoaded());
+            }
+        });
+        this._destroyRef.onDestroy(() => {
+            this._fnSub?.unsubscribe();
+            if (this._debounceTimer)
+                clearTimeout(this._debounceTimer);
+        });
+    }
+    /**
+     * Remote-mode search entry point (debounced). Data source → `setSearch({ query, keys: [] })`
+     * (or `null` for a blank query); `searchFn` → invoked with the query. No-op in local mode.
+     */
+    search(query) {
+        this._lastQuery = query;
+        const kind = this._kind();
+        if (kind === 'ds')
+            this._debounced(() => this._searchDataSource(query));
+        else if (kind === 'fn')
+            this._debounced(() => this._runSearchFn(query));
+    }
+    /** Runs the initial `searchFn` load if it has not run yet (data sources connect eagerly; local modes need nothing). */
+    ensureLoaded() {
+        if (this._kind() === 'fn' && !this._fnStarted)
+            this._runSearchFn(this._lastQuery);
+    }
+    /**
+     * Requests the next data-source page. No-op unless `hasMore()`, nothing is in
+     * flight, and the source's current page is the one already applied — a page
+     * requested but not yet accumulated (or a search that reset the source to page
+     * one) blocks the next bump, so a scroll sentinel cannot skip a page.
+     */
+    loadMore() {
+        const connected = this._connected();
+        if (!connected ||
+            !this.hasMore() ||
+            connected.ds.loading() ||
+            connected.ds.page() !== this._dsAppliedPage)
+            return;
+        connected.ds.setPage(connected.ds.page() + 1);
+    }
+    /** @private Clears every accumulation bookkeeping field — on connect, and when a source is disconnected. */
+    _resetDataSource() {
+        this._dsLastSlice = null;
+        this._dsAppliedPage = 0;
+        this._dsBase = [];
+        this._dsItems.set([]);
+        this._dsReady.set(false);
+    }
+    /** @private Schedules `run` after `debounce` ms (immediately when 0), cancelling a pending one. */
+    _debounced(run) {
+        if (this._debounceTimer)
+            clearTimeout(this._debounceTimer);
+        const ms = Math.max(0, this._config.debounce());
+        if (ms === 0) {
+            run();
+            return;
+        }
+        this._debounceTimer = setTimeout(() => {
+            this._debounceTimer = null;
+            run();
+        }, ms);
+    }
+    /** @private Forwards a query to the connected data source using the option-control contract (`keys: []`). */
+    _searchDataSource(query) {
+        const connected = this._connected();
+        if (!connected)
+            return;
+        connected.ds.setSearch(query.trim() ? { query, keys: [] } : null);
+    }
+    /** @private Invokes `searchFn`, superseding any in-flight call; keeps stale items until the result. */
+    _runSearchFn(query) {
+        const fn = this._config.searchFn();
+        if (!fn)
+            return;
+        this._fnStarted = true;
+        const token = ++this._fnToken;
+        this._fnSub?.unsubscribe();
+        this._fnLoading.set(true);
+        this._fnSub = toOptionsResult(fn(query))
+            .pipe(take(1))
+            .subscribe({
+            next: (items) => {
+                if (token !== this._fnToken)
+                    return;
+                this._fnItems.set(items);
+                this._fnLoading.set(false);
+                this._fnReady.set(true);
+            },
+            error: () => {
+                if (token !== this._fnToken)
+                    return;
+                this._fnItems.set([]);
+                this._fnLoading.set(false);
+                this._fnReady.set(true);
+            },
+        });
+    }
+}
+
+/**
+ * `@angular/aria`'s `ngListbox` reconciles its `value` model against the
+ * currently **rendered** options and re-emits `valueChange` whenever the
+ * rendered set changes — not only on user interaction. These helpers let an
+ * owning control tell that noise apart from a genuine selection.
+ */
+/**
+ * Whether an incoming listbox `valueChange` is pure aria reconciliation: it
+ * (a) adds no value that is not already committed and (b) only removes values
+ * whose option is currently not rendered (`visible`). An emit that exactly
+ * restates the committed selection is reconciliation too.
+ */
+function isReconciliationEmit(incoming, committed, visible, compare) {
+    const inArr = (arr, v) => arr.some((x) => compare(x, v));
+    // (a) No additions relative to the committed selection.
+    if (incoming.some((v) => !inArr(committed, v)))
+        return false;
+    // (b) Every removed value is currently filtered out of view.
+    return committed
+        .filter((v) => !inArr(incoming, v))
+        .every((v) => !inArr(visible, v));
+}
+/**
+ * Committed values that aria dropped only because their option is not
+ * rendered (not in `visible`) and that are not in `incoming`. Re-add them to
+ * a genuine multi-select pick so earlier selections survive filtering.
+ */
+function filteredOutCommitted(incoming, committed, visible, compare) {
+    return committed.filter((v) => !incoming.some((iv) => compare(iv, v)) &&
+        !visible.some((vv) => compare(vv, v)));
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvActiveDescendant, MlvDropdownPanel, MlvHighlightMatchPipe, MlvOptionsAdapter, MlvSelectDataSource, defaultOptionMatcher, defaultOptionTransform, filterOptions, filteredOutCommitted, hasOptionGroups, isReconciliationEmit, isSelectOption, matchSegments, optionId, rankPrefixMatchesFirst, resolveOptions, toOptionsResult };
+//# sourceMappingURL=malva-ui-core-dropdown.mjs.map