@malva-ui/core 0.1.12

package/esm2022/dropdown/lib/active-descendant.js

@@ -0,0 +1,92 @@
+import { signal } from '@angular/core';
+/**
+ * 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"`.
+ */
+export 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.
+ */
+export 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);
+    }
+}
+//# sourceMappingURL=active-descendant.js.map

package/esm2022/dropdown/lib/active-descendant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"active-descendant.js","sourceRoot":"","sources":["../../../../../../libs/core/dropdown/src/lib/active-descendant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAGvC;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,QAAQ,CAAC,SAAiB,EAAE,KAAa;IACvD,OAAO,GAAG,SAAS,WAAW,KAAK,EAAE,CAAC;AACxC,CAAC;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,OAAO,mBAAmB;IAgBD;IAf7B,iEAAiE;IAChD,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;+EAAC,CAAC;IAErC;;;;OAIG;IACM,KAAK,GAAmB,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;IAE1D;;;;OAIG;IACH,YAA6B,MAAoB;QAApB,WAAM,GAAN,MAAM,CAAc;IAAG,CAAC;IAErD;;;;;;;OAOG;IACH,IAAI,CAAC,KAAa;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC5B,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAChB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YACpB,OAAO;QACT,CAAC;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC9B,MAAM,IAAI,GACR,OAAO,GAAG,CAAC;YACT,CAAC,CAAC,KAAK,GAAG,CAAC;gBACT,CAAC,CAAC,CAAC;gBACH,CAAC,CAAC,KAAK,GAAG,CAAC;YACb,CAAC,CAAC,CAAC,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC;QACxC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;IAED,mEAAmE;IACnE,KAAK;QACH,IAAI,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC;YAAE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC5C,CAAC;IAED,kEAAkE;IAClE,IAAI;QACF,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC5B,IAAI,KAAK,GAAG,CAAC;YAAE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IAC5C,CAAC;IAED,8DAA8D;IAC9D,KAAK;QACH,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC;CACF","sourcesContent":["import { signal } from '@angular/core';\nimport type { Signal } from '@angular/core';\n\n/**\n * Builds the deterministic DOM `id` for the option row at `index` within a\n * listbox, matching the id `mlv-dropdown-panel` stamps on each option. An\n * owning combobox / autocomplete computes the same id to point its input's\n * `aria-activedescendant` at the active row.\n *\n * This is the single source of truth for the activedescendant option-id format\n * (`<listboxId>-option-<index>`), shared by `mlv-dropdown-panel`,\n * `mlv-combobox`, and `[mlvAutocomplete]` so the id the panel renders and the\n * id the trigger references can never drift.\n *\n * @param listboxId - The id of the listbox that owns the option.\n * @param index - The option's flat index within the listbox.\n * @returns The option's DOM id, e.g. `\"my-listbox-option-3\"`.\n */\nexport function optionId(listboxId: string, index: number): string {\n  return `${listboxId}-option-${index}`;\n}\n\n/**\n * Signal-backed bookkeeping for the \"active option\" index of a WAI-ARIA\n * activedescendant keyboard model — the shared engine behind `mlv-combobox`\n * and `[mlvAutocomplete]`, where DOM focus stays on the text input and the\n * highlighted option is tracked purely by index (mirrored into the input's\n * `aria-activedescendant`).\n *\n * The active index is `-1` when no option is active. {@link move} advances it\n * with wrap-around, treating a first move from `-1` as landing on the first\n * (forward) or last (backward) option; {@link first} / {@link last} jump to the\n * ends; {@link reset} clears it back to `-1`. The current option count is read\n * lazily through the accessor supplied at construction, so the owner can back it\n * with any signal / computed (e.g. a filtered-options length) without pushing\n * the count on every keystroke.\n */\nexport class MlvActiveDescendant {\n  /** @private The active option index; `-1` = no active option. */\n  private readonly _index = signal(-1);\n\n  /**\n   * The active option index as a read-only signal; `-1` when no option is\n   * active. Read it reactively (template / effect) or imperatively (call it in\n   * an event handler) — both track the same underlying state.\n   */\n  readonly index: Signal<number> = this._index.asReadonly();\n\n  /**\n   * @param _count Accessor returning the current number of navigable options.\n   * Read lazily on each {@link move} / {@link first} / {@link last} call, so it\n   * always reflects the live count (e.g. after the options are filtered).\n   */\n  constructor(private readonly _count: () => number) {}\n\n  /**\n   * Advances the active option by `delta` with wrap-around. With no option\n   * active (`-1`), a forward move (`delta > 0`) lands on the first option and a\n   * backward move (`delta < 0`) on the last; otherwise the index wraps modulo\n   * the option count. Resets to `-1` when there are no options.\n   *\n   * @param delta Step to move by (`+1` next, `-1` previous).\n   */\n  move(delta: number): void {\n    const count = this._count();\n    if (count === 0) {\n      this._index.set(-1);\n      return;\n    }\n    const current = this._index();\n    const next =\n      current < 0\n        ? delta > 0\n          ? 0\n          : count - 1\n        : (current + delta + count) % count;\n    this._index.set(next);\n  }\n\n  /** Activates the first option. No-op when there are no options. */\n  first(): void {\n    if (this._count() > 0) this._index.set(0);\n  }\n\n  /** Activates the last option. No-op when there are no options. */\n  last(): void {\n    const count = this._count();\n    if (count > 0) this._index.set(count - 1);\n  }\n\n  /** Clears the active option back to `-1` (nothing active). */\n  reset(): void {\n    this._index.set(-1);\n  }\n}\n"]}

package/esm2022/dropdown/lib/dropdown-panel/dropdown-panel.js

@@ -0,0 +1,295 @@
+import { afterNextRender, afterRenderEffect, ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input, isDevMode, output, signal, untracked, viewChild, ViewEncapsulation, } from '@angular/core';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MlvList, MlvListItem, MlvListItemSelectable, MlvListSelectable, } 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 { mlvNextId } from '@malva-ui/cdk/utils';
+import { hasOptionGroups } from '../select-option';
+import { optionId } from '../active-descendant';
+import { MlvHighlightMatchPipe } from '../highlight-match.pipe';
+import { fromEvent, startWith } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i0 from "@angular/core";
+export 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 */ []));
+    /**
+     * 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 }, 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    selectable\n    listRole=\"listbox\"\n    selectionMode=\"explicit\"\n    [softDisabled]=\"false\"\n    [focusMode]=\"focusMode()\"\n    [attr.aria-busy]=\"loading() || loadingMore() ? true : null\"\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        [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: [".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__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"] }, { 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    selectable\n    listRole=\"listbox\"\n    selectionMode=\"explicit\"\n    [softDisabled]=\"false\"\n    [focusMode]=\"focusMode()\"\n    [attr.aria-busy]=\"loading() || loadingMore() ? true : null\"\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        [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: [".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__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 }] }], 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 }] }] } });
+//# sourceMappingURL=dropdown-panel.js.map

package/esm2022/dropdown/lib/dropdown-panel/dropdown-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-panel.js","sourceRoot":"","sources":["../../../../../../../libs/core/dropdown/src/lib/dropdown-panel/dropdown-panel.ts","../../../../../../../libs/core/dropdown/src/lib/dropdown-panel/dropdown-panel.html"],"names":[],"mappings":"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","sourcesContent":["import type { TemplateRef } from '@angular/core';\nimport {\n  afterNextRender,\n  afterRenderEffect,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  isDevMode,\n  output,\n  signal,\n  untracked,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { DOCUMENT, NgTemplateOutlet } from '@angular/common';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  MlvList,\n  MlvListItem,\n  MlvListItemSelectable,\n  MlvListSelectable,\n} from '@malva-ui/core/list';\nimport { LucideCheck } from '@lucide/angular';\nimport { MlvSelectionService } from '@malva-ui/core/form-utils';\nimport { MlvScrollbar } from '@malva-ui/core/scrollbar';\nimport { MlvInfiniteScroll } from '@malva-ui/cdk/infinite-scroll';\nimport { mlvNextId } from '@malva-ui/cdk/utils';\nimport type { MlvSelectOption } from '../select-option';\nimport { hasOptionGroups } from '../select-option';\nimport { optionId } from '../active-descendant';\nimport { MlvHighlightMatchPipe } from '../highlight-match.pipe';\nimport { fromEvent, startWith } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n/**\n * One option within a rendered group, paired with its flat index into the\n * panel's `options()` array. The flat index (not a group-local index) is what\n * the panel forwards to {@link MlvDropdownPanel.optionId} and matches\n * against `activeIndex`, so an owning combobox's activedescendant model stays\n * aligned regardless of grouping.\n */\ninterface DropdownOptionEntry<T> {\n  readonly option: MlvSelectOption<T>;\n  readonly index: number;\n}\n\n/**\n * A rendered cluster of consecutive options that share the same group label.\n * `label`/`headerId` are `null` for an ungrouped (headerless) run.\n */\ninterface DropdownOptionGroup<T> {\n  readonly label: string | null;\n  readonly headerId: string | null;\n  readonly entries: DropdownOptionEntry<T>[];\n}\n\n@Component({\n  selector: 'mlv-dropdown-panel',\n  imports: [\n    NgTemplateOutlet,\n    MlvList,\n    MlvListItem,\n    MlvListItemSelectable,\n    MlvListSelectable,\n    LucideCheck,\n    MlvHighlightMatchPipe,\n    MlvScrollbar,\n    MlvInfiniteScroll,\n  ],\n  templateUrl: './dropdown-panel.html',\n  styleUrl: './dropdown-panel.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-dropdown-panel',\n    '[class.mlv-dropdown-panel--parent-scroll]': 'scrollMode() === \"parent\"',\n    '[class.mlv-dropdown-panel--loading]': 'loading()',\n    '[style.max-height.px]': '_calculatedMaxHeight()',\n  },\n})\nexport class MlvDropdownPanel<T> {\n  /**\n   * Chooses the single scroll owner for this panel.\n   *\n   * Standalone panels scroll themselves. Panels composed inside `mlv-popup`\n   * delegate to the popup so the DOM never contains nested scroll regions.\n   */\n  readonly scrollMode = input<'self' | 'parent'>('self');\n\n  readonly minHeight = input<number>(0);\n  readonly maxHeight = input<number>(0);\n  readonly options = input<MlvSelectOption<T>[]>([]);\n  /** Whether multiple options can be selected. */\n  readonly multiple = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n  readonly selectedValues = input<T[]>([]);\n  readonly itemTemplate = input<TemplateRef<{\n    $implicit: MlvSelectOption<T>;\n  }> | null>(null);\n  /**\n   * Focus strategy forwarded to the inner aria listbox.\n   *\n   * - `'roving'` (default) — DOM focus moves onto the active option (`tabindex`).\n   *   Used by `mlv-select`.\n   * - `'activedescendant'` — DOM focus stays on the owning trigger/input; the\n   *   active option is tracked via `aria-activedescendant`. Used by\n   *   `mlv-combobox`, whose text input must retain focus so typing keeps\n   *   working while navigating options.\n   */\n  readonly focusMode = input<'roving' | 'activedescendant'>('roving');\n  /**\n   * Index of the option that is visually \"active\" (highlighted) under the\n   * activedescendant model. `-1` (default) means no active option. The panel\n   * renders a deterministic `[id]` on each option (`<listboxId>-option-<index>`)\n   * so an owning combobox can point its input's `aria-activedescendant` at the\n   * active row and keep the highlight in sync.\n   */\n  readonly activeIndex = input<number>(-1);\n  /**\n   * Optional HTML `id` to assign to the inner `<mlv-list>` listbox element.\n   * Allows a parent combobox or select to reference this listbox via `aria-controls`.\n   */\n  readonly listboxId = input<string | null>(null);\n\n  /**\n   * When non-empty, the default option row emphasises the matched substring of\n   * this query inside each suggestion label (case- and diacritic-insensitive;\n   * see {@link MlvHighlightMatchPipe}). Ignored for rows rendered by a custom\n   * {@link itemTemplate}. Empty (default) renders the label as plain text —\n   * ungrouped, un-highlighted lists are byte-for-byte unchanged.\n   */\n  readonly highlightQuery = input<string>('');\n\n  /**\n   * When `true`, the panel renders a loading affordance instead of the option\n   * list / empty state — used by `[mlvAutocomplete]` while an async `search`\n   * resolves. The {@link loadingText} is announced politely.\n   */\n  readonly loading = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * Text shown (and announced) inside the loading affordance while\n   * {@link loading} is `true`. Localise by binding a translated string.\n   * @default 'Loading…'\n   */\n  readonly loadingText = input<string>('Loading…');\n\n  /**\n   * When `true`, a page beyond the first is being fetched: renders a polite\n   * bottom status row (`loadingText`) after the last option. The listbox and\n   * existing options stay interactive.\n   * @default false\n   */\n  readonly loadingMore = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * Whether more pages exist. When `true` the panel observes its scroll owner\n   * and emits {@link loadMore} as the user nears the end of the list.\n   * @default false\n   */\n  readonly hasMore = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** Distance (px) from the end of the scroll owner at which {@link loadMore} fires. */\n  readonly infiniteScrollThreshold = input<number>(150);\n\n  /** Emits when the user scrolls within `infiniteScrollThreshold` of the end while `hasMore`. */\n  readonly loadMore = output<void>();\n\n  /**\n   * @protected Effective listbox id forwarded to the aria `Listbox.id` input on\n   * the inner `<mlv-list>`. Uses the consumer-provided {@link listboxId} when\n   * set, otherwise a stable generated fallback so the rendered listbox always\n   * carries a valid unique DOM id (aria would otherwise mint its own, breaking\n   * a parent trigger's `aria-controls` linkage).\n   */\n  protected readonly _resolvedListboxId = computed(\n    () => this.listboxId() ?? this._fallbackListboxId,\n  );\n\n  /** @private Stable generated id used when no `listboxId` is supplied. */\n  private readonly _fallbackListboxId = mlvNextId('mlv-dropdown-listbox');\n\n  /**\n   * @protected Whether the current options declare groups (at least one option\n   * carries a non-empty `group`). When `false` the template renders the exact\n   * flat option list as before — plain / ungrouped arrays are unaffected.\n   */\n  protected readonly _isGrouped = computed(() =>\n    hasOptionGroups(this.options()),\n  );\n\n  /**\n   * @protected The options clustered into consecutive same-group runs for\n   * rendering under sticky headers. Consecutive-run grouping (no reordering)\n   * keeps DOM order identical to the flat `options()` order, so option indices,\n   * `optionId`, `activeIndex`, and aria's DOM-order navigation all stay aligned.\n   * Each entry retains its flat index into `options()`. A run of options without\n   * a group (empty/undefined) becomes a headerless cluster (`label: null`).\n   */\n  protected readonly _groups = computed<DropdownOptionGroup<T>[]>(() => {\n    const listboxId = this._resolvedListboxId();\n    const groups: DropdownOptionGroup<T>[] = [];\n    this.options().forEach((option, index) => {\n      const label = option.group ? option.group : null;\n      const current = groups[groups.length - 1];\n      if (current && current.label === label) {\n        current.entries.push({ option, index });\n      } else {\n        groups.push({\n          label,\n          headerId: label ? `${listboxId}-group-${groups.length}` : null,\n          entries: [{ option, index }],\n        });\n      }\n    });\n    return groups;\n  });\n\n  /** @protected Effective max panel height in px — the `maxHeight` input when set, else the viewport-derived default. */\n  protected readonly _calculatedMaxHeight = computed(() => {\n    const inputMaxHeight = this.maxHeight();\n    return inputMaxHeight > 0 ? inputMaxHeight : this._defaultMaxHeight();\n  });\n\n  readonly valueChange = output<readonly T[]>();\n\n  /** @private Selection service coordinating focus-first requests from a parent select/combobox. */\n  private readonly _selectionService = inject(MlvSelectionService);\n  /** @private Set of currently selected values for O(1) membership checks. */\n  private readonly _selectedSet = computed(\n    () => new Set(this.selectedValues()),\n  );\n  /** @private Default max panel height (px) derived from the viewport height. */\n  private readonly _defaultMaxHeight = signal(0);\n  /** @private The inner selectable list directive, used to move focus to the first option. */\n  private readonly _listSelectable = viewChild(MlvListSelectable);\n\n  /** @private The panel's own scrollbar (`scrollMode=\"self\"` only). */\n  private readonly _scrollbar = viewChild(MlvScrollbar);\n\n  /** @private The sentinel-hosted infinite-scroll directive, re-checked after each option append. */\n  private readonly _infiniteScroll = viewChild(MlvInfiniteScroll);\n\n  /**\n   * @protected The element that actually scrolls: the panel's own scrollbar\n   * viewport (`scrollMode=\"self\"`) or the nearest ancestor `mlv-scrollbar`\n   * viewport — the owning `mlv-popup`'s — in parent mode. Resolved after the\n   * first render; the sentinel directive stays disabled until then.\n   */\n  protected readonly _scrollContainer = signal<HTMLElement | null>(null);\n\n  /**\n   * @private Whether the scroll-owner lookup has already run. It needs the first\n   * render, so a `null` {@link _scrollContainer} before that means \"not resolved\n   * yet\", not \"no owner\" — the dev warning must not fire on it.\n   */\n  private readonly _scrollOwnerResolved = signal(false);\n\n  /** @private Latches the dev-mode \"no scroll owner\" warning to once per panel. */\n  private _warnedNoScrollOwner = false;\n\n  /** @private Host element, used to scroll the active option into view (activedescendant model). */\n  private readonly _host = inject<ElementRef<HTMLElement>>(ElementRef);\n  /** @private Angular-provided document used to access the browser viewport safely. */\n  private readonly _document = inject(DOCUMENT);\n\n  constructor() {\n    const viewport = this._document.defaultView;\n    if (viewport) {\n      fromEvent(viewport, 'resize')\n        .pipe(startWith(null), takeUntilDestroyed())\n        .subscribe(() => {\n          this._defaultMaxHeight.set(viewport.innerHeight * 0.4);\n        });\n    }\n\n    this._selectionService.focusFirst$\n      .pipe(takeUntilDestroyed())\n      .subscribe(() => {\n        this._listSelectable()?.focusFirst();\n      });\n\n    // Keep the activedescendant-active option scrolled into view. DOM focus\n    // never lands on the option in this mode (it stays on the owning combobox\n    // input), so the native scroll-on-focus does not apply.\n    effect(() => {\n      const index = this.activeIndex();\n      if (this.focusMode() !== 'activedescendant' || index < 0) return;\n      const el = this._host.nativeElement.querySelector<HTMLElement>(\n        `[id=\"${this.optionId(index)}\"]`,\n      );\n      // Optional call: `scrollIntoView` is absent in some environments (jsdom).\n      el?.scrollIntoView?.({ block: 'nearest' });\n    });\n\n    // Resolve the paging sentinel's scroll owner once the view exists: the\n    // panel's own scrollbar viewport, or the ancestor popup viewport it\n    // delegates scrolling to.\n    afterNextRender(() => {\n      const own = this._scrollbar()?.viewportElement ?? null;\n      const parent = this._host.nativeElement.closest<HTMLElement>(\n        '.mlv-scrollbar__viewport',\n      );\n      this._scrollContainer.set(this.scrollMode() === 'self' ? own : parent);\n      this._scrollOwnerResolved.set(true);\n    });\n\n    // Dev-mode diagnostic: an armed sentinel with no scroll owner is silent —\n    // `scrollMode=\"parent\"` finds nothing unless the panel renders inside an\n    // `mlv-scrollbar` viewport. Re-checked reactively so a `hasMore` that flips\n    // true later is caught too; warned at most once per panel instance.\n    if (isDevMode()) {\n      effect(() => {\n        const missing =\n          this.hasMore() &&\n          this._scrollOwnerResolved() &&\n          this._scrollContainer() === null;\n        if (!missing) return;\n        untracked(() => {\n          if (this._warnedNoScrollOwner) return;\n          this._warnedNoScrollOwner = true;\n          console.warn(\n            '[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.',\n          );\n        });\n      });\n    }\n\n    // Auto-fill: after any render where the option set changed, re-measure so a\n    // short page immediately requests the next one.\n    afterRenderEffect(() => {\n      this.options();\n      this._infiniteScroll()?.check();\n    });\n  }\n\n  isValueSelected(value: T): boolean {\n    return this._selectedSet().has(value);\n  }\n\n  /**\n   * Deterministic DOM `id` for the option at `index`, forwarded to aria's\n   * `ngOption` id. An owning combobox computes the same id (via the shared\n   * {@link optionId} helper) to wire its input's `aria-activedescendant`.\n   */\n  optionId(index: number): string {\n    return optionId(this._resolvedListboxId(), index);\n  }\n\n  /**\n   * Re-emits the aria listbox selection. `@angular/aria`'s `ngListbox` emits the\n   * selected values array directly (unlike CdkListbox's `ListboxValueChangeEvent`).\n   */\n  onValueChange(values: readonly T[]): void {\n    this.valueChange.emit(values);\n  }\n}\n","@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 — 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    selectable\n    listRole=\"listbox\"\n    selectionMode=\"explicit\"\n    [softDisabled]=\"false\"\n    [focusMode]=\"focusMode()\"\n    [attr.aria-busy]=\"loading() || loadingMore() ? true : null\"\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 → 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 — 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        [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 — 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"]}

package/esm2022/dropdown/lib/highlight-match.pipe.js

@@ -0,0 +1,36 @@
+import { Pipe } from '@angular/core';
+import { matchSegments } from './option-matcher';
+import * as i0 from "@angular/core";
+/**
+ * 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 }} }
+ * }
+ * ```
+ */
+export 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' }]
+        }] });
+//# sourceMappingURL=highlight-match.pipe.js.map

package/esm2022/dropdown/lib/highlight-match.pipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight-match.pipe.js","sourceRoot":"","sources":["../../../../../../libs/core/dropdown/src/lib/highlight-match.pipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGrC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;;AAEjD;;;;;;;;;;;;;GAaG;AAEH,MAAM,OAAO,qBAAqB;IAChC;;;;OAIG;IACH,SAAS,CACP,KAAgC,EAChC,KAAa;QAEb,IAAI,CAAC,KAAK;YAAE,OAAO,EAAE,CAAC;QACtB,OAAO,aAAa,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;IAC3C,CAAC;uGAZU,qBAAqB;qGAArB,qBAAqB;;2FAArB,qBAAqB;kBADjC,IAAI;mBAAC,EAAE,IAAI,EAAE,mBAAmB,EAAE","sourcesContent":["import { Pipe } from '@angular/core';\nimport type { PipeTransform } from '@angular/core';\nimport type { MlvMatchSegment } from './option-matcher';\nimport { matchSegments } from './option-matcher';\n\n/**\n * Splits a label into matched / unmatched {@link MlvMatchSegment}s for the given\n * query so a template can emphasise the matched substring (case- and\n * diacritic-insensitive; see {@link matchSegments}). Used by\n * `mlv-dropdown-panel` to highlight the query inside each suggestion.\n *\n * @example\n * ```html\n * @for (seg of option.label | mlvHighlightMatch:query; track $index) {\n *   @if (seg.matched) { <mark>{{ seg.text }}</mark> }\n *   @else { {{ seg.text }} }\n * }\n * ```\n */\n@Pipe({ name: 'mlvHighlightMatch' })\nexport class MlvHighlightMatchPipe implements PipeTransform {\n  /**\n   * @param label - The label to segment. Nullish input yields an empty result.\n   * @param query - The query to highlight; empty query returns one unmatched\n   *   segment containing the whole label.\n   */\n  transform(\n    label: string | null | undefined,\n    query: string,\n  ): MlvMatchSegment[] {\n    if (!label) return [];\n    return matchSegments(label, query ?? '');\n  }\n}\n"]}