@nanahoshi/mona-ui 0.23.0 → 0.23.1

package/fesm2022/nanahoshi-mona-ui-internal-list.mjs

@@ -1,22 +1,21 @@
 import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, signal, computed, Injectable, inject, input, ElementRef, output, ChangeDetectionStrategy, Component, DestroyRef, viewChild, contentChild, TemplateRef, effect, untracked, afterNextRender } from '@angular/core';
+import { Directive, computed, signal, linkedSignal, Injectable, inject, input, ElementRef, Component, DestroyRef, viewChild, contentChild, TemplateRef, output, effect, untracked, afterNextRender } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
-import { isTypeaheadKey, setupTypeahead } from '@nanahoshi/mona-ui/internal';
+import { createElementControlId, isTypeaheadKey, setupTypeahead } from '@nanahoshi/mona-ui/internal';
 import { FilterInputComponent } from '@nanahoshi/mona-ui/internal/filter-input';
 import { PlaceholderComponent } from '@nanahoshi/mona-ui/placeholder';
 import { Subject, ReplaySubject, fromEvent, asyncScheduler, filter, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
-import { ImmutableList, from, ImmutableSet, toImmutableSet } from '@mirei/ts-collections';
+import { ImmutableList, toImmutableSet, ImmutableSet, from } from '@mirei/ts-collections';
 import { v4 } from 'uuid';
 import { cva } from 'class-variance-authority';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
 import { CheckboxDirective } from '@nanahoshi/mona-ui/check-box';
 
 const LIST_DEFAULT_MESSAGES = {
+    filterList: "Filter list",
     noData: "No data"
 };
 
@@ -27,8 +26,7 @@ class ListFooterTemplateDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListFooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "ng-template[monaListFooterTemplate]",
-                    standalone: true
+                    selector: "ng-template[monaListFooterTemplate]"
                 }]
         }] });
 
@@ -39,8 +37,7 @@ class ListGroupHeaderTemplateDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListGroupHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "ng-template[monaListGroupHeaderTemplate]",
-                    standalone: true
+                    selector: "ng-template[monaListGroupHeaderTemplate]"
                 }]
         }] });
 
@@ -51,8 +48,7 @@ class ListHeaderTemplateDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "ng-template[monaListHeaderTemplate]",
-                    standalone: true
+                    selector: "ng-template[monaListHeaderTemplate]"
                 }]
         }] });
 
@@ -63,17 +59,17 @@ class ListItemTemplateDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "ng-template[monaListItemTemplate]",
-                    standalone: true
+                    selector: "ng-template[monaListItemTemplate]"
                 }]
         }] });
 
 class ListItem {
     constructor(options) {
         this.header = "";
-        this.uid = v4();
         this.data = options.data;
+        this.uid = options.uid ?? v4();
         this.header = options.header ?? this.header;
+        this.isHeader = options.isHeader ?? this.header !== "";
     }
 }
 
@@ -90,15 +86,110 @@ predicate) => {
 
 class ListService {
     constructor() {
+        this.#arrangedItems = computed(() => {
+            const listItems = this.#listItems();
+            const filterText = this.filterText();
+            const groupableOptions = this.groupableOptions();
+            let enumerable = listItems;
+            if (filterText) {
+                enumerable = enumerable.where(item => this.filterItem(item, filterText));
+            }
+            if (!groupableOptions.enabled) {
+                return enumerable.toImmutableSet();
+            }
+            if (groupableOptions.orderBy) {
+                if (groupableOptions.orderByDirection === "desc") {
+                    enumerable = enumerable.orderByDescending(item => this.getOrderKey(item));
+                }
+                else {
+                    enumerable = enumerable.orderBy(item => this.getOrderKey(item));
+                }
+            }
+            let groupedEnumerable = enumerable.groupBy(item => this.getGroupField(item));
+            if (groupableOptions.headerOrder) {
+                if (groupableOptions.headerOrder === "desc") {
+                    groupedEnumerable = groupedEnumerable.orderByDescending(g => g.key);
+                }
+                else {
+                    groupedEnumerable = groupedEnumerable.orderBy(g => g.key);
+                }
+            }
+            const previousHeaders = this.#groupHeaders;
+            const headers = new Map();
+            const items = groupedEnumerable
+                .selectMany(g => {
+                const header = previousHeaders.get(g.key) ??
+                    new ListItem({ data: g.key, header: String(g.key ?? ""), isHeader: true });
+                headers.set(g.key, header);
+                return g.source.prepend(header);
+            })
+                .toImmutableSet();
+            this.#groupHeaders = headers;
+            return items;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#arrangedItems" }] : /* istanbul ignore next */ []));
         this.#data = signal(ImmutableList.create(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#data" }] : /* istanbul ignore next */ []));
-        this.#listItems = computed(() => {
-            const data = this.#data();
-            return from(data)
-                .select(item => new ListItem({ data: item, header: "" }))
-                .toImmutableSet();
+        /**
+         * First list item for each selection key, so key lookups are O(1) instead of a scan per key.
+         */
+        this.#itemsByKey = computed(() => {
+            const itemsByKey = new Map();
+            for (const item of this.#listItems()) {
+                const key = this.getSelectionKey(item);
+                if (!itemsByKey.has(key)) {
+                    itemsByKey.set(key, item);
+                }
+            }
+            return itemsByKey;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#itemsByKey" }] : /* istanbul ignore next */ []));
+        this.#itemsByUid = computed(() => {
+            const itemsByUid = new Map();
+            for (const item of this.#listItems()) {
+                itemsByUid.set(item.uid, item);
+            }
+            return itemsByUid;
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#listItems" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "#itemsByUid" }] : /* istanbul ignore next */ []));
+        /**
+         * Wraps the data in list items while keeping item identity across data changes:
+         * an item whose selection key existed before keeps its `uid`, and keeps its instance when the data
+         * object is also unchanged. Highlight, `aria-activedescendant` ids and rendered rows therefore survive
+         * a refresh (for example server-side filtering) instead of pointing at items that no longer exist.
+         */
+        this.#listItems = linkedSignal({ ...(ngDevMode ? { debugName: "#listItems" } : /* istanbul ignore next */ {}), source: () => ({ data: this.#data(), valueField: this.valueField() }),
+            computation: ({ data }, previous) => {
+                const previousByKey = new Map();
+                for (const item of previous?.value ?? []) {
+                    const key = this.getSelectionKey(item);
+                    if (!previousByKey.has(key)) {
+                        previousByKey.set(key, item);
+                    }
+                }
+                const usedUids = new Set();
+                const items = [];
+                for (const dataItem of data) {
+                    const previousItem = previousByKey.get(this.getDataItemValue(dataItem));
+                    let item;
+                    if (previousItem && !usedUids.has(previousItem.uid)) {
+                        item =
+                            previousItem.data === dataItem
+                                ? previousItem
+                                : new ListItem({ data: dataItem, uid: previousItem.uid });
+                    }
+                    else {
+                        item = new ListItem({ data: dataItem });
+                    }
+                    usedUids.add(item.uid);
+                    items.push(item);
+                }
+                return toImmutableSet(items);
+            } });
+        /**
+         * Group header items from the last grouping pass, reused so header rows keep their uid between recomputations.
+         */
+        this.#groupHeaders = new Map();
         this.disabledBy = signal("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabledBy" }] : /* istanbul ignore next */ []));
         this.filterChange$ = new Subject();
@@ -125,26 +216,68 @@ class ListService {
             if (selected) {
                 return selected;
             }
-            return this.viewItems().firstOrDefault(i => !i.header && !this.isDisabled(i));
+            return this.viewItems().firstOrDefault(i => !i.isHeader && !this.isDisabled(i));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "focusableItem" }] : /* istanbul ignore next */ []));
         this.groupBy = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []));
+        /**
+         * Maps each option uid to the uid of the group header it is listed under.
+         */
+        this.groupHeaderUids = computed(() => {
+            const headerUids = new Map();
+            let headerUid = null;
+            for (const item of this.#arrangedItems()) {
+                if (item.isHeader) {
+                    headerUid = item.uid;
+                }
+                else if (headerUid != null) {
+                    headerUids.set(item.uid, headerUid);
+                }
+            }
+            return headerUids;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupHeaderUids" }] : /* istanbul ignore next */ []));
         this.groupableOptions = signal({
             enabled: false,
             headerOrder: "asc"
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupableOptions" }] : /* istanbul ignore next */ []));
-        this.highlightedItem = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "highlightedItem" }] : /* istanbul ignore next */ []));
+        /**
+         * The highlighted (active) item. When the data changes, it is re-resolved to the item with the same `uid`,
+         * or cleared when that item is gone.
+         */
+        this.highlightedItem = linkedSignal({ ...(ngDevMode ? { debugName: "highlightedItem" } : /* istanbul ignore next */ {}), source: this.#listItems,
+            computation: (_, previous) => {
+                const highlighted = previous?.value;
+                if (!highlighted || highlighted.isHeader) {
+                    return null;
+                }
+                return this.#itemsByUid().get(highlighted.uid) ?? null;
+            } });
         this.itemFocusOut$ = new Subject();
-        this.navigatedItem$ = new Subject();
+        /**
+         * Position of each option among all filtered options (not only the current page), for `aria-posinset`
+         * and `aria-setsize`.
+         */
+        this.itemPositions = computed(() => {
+            const options = this.#arrangedItems()
+                .where(i => !i.isHeader)
+                .toArray();
+            const positions = new Map();
+            options.forEach((item, index) => {
+                positions.set(item.uid, { position: index + 1, total: options.length });
+            });
+            return positions;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemPositions" }] : /* istanbul ignore next */ []));
         this.navigableOptions = signal({
             enabled: false,
             mode: "select",
             wrap: false
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "navigableOptions" }] : /* istanbul ignore next */ []));
+        this.navigatedItem$ = new Subject();
         this.pageState = signal({ page: 1, skip: 0, take: 10 }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pageState" }] : /* istanbul ignore next */ []));
         this.pageableOptions = signal({
@@ -171,9 +304,10 @@ class ListService {
         this.selectedKeysChange$ = new Subject();
         this.selectedListItems = computed(() => {
             const selectedKeys = this.selectedKeys();
+            const itemsByKey = this.#itemsByKey();
             return selectedKeys
-                .select(key => this.#listItems().firstOrDefault(i => this.getSelectionKey(i) === key))
-                .where(i => i != null)
+                .select(key => itemsByKey.get(key))
+                .where((i) => i != null)
                 .toImmutableSet();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedListItems" }] : /* istanbul ignore next */ []));
@@ -182,53 +316,17 @@ class ListService {
         ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
         this.valueField = signal("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
+        /**
+         * Visible items in display order: filtered, ordered and grouped (with header rows), but not paged.
+         */
         this.viewItems = computed(() => {
-            const listItems = this.#listItems();
-            const filterText = this.filterText();
-            const groupableOptions = this.groupableOptions();
-            const virtualScrollOptions = this.virtualScrollOptions();
-            let enumerable = listItems;
-            if (filterText) {
-                enumerable = enumerable.where(item => this.filterItem(item, filterText));
-            }
-            let resultEnumerable;
-            if (groupableOptions.enabled) {
-                if (groupableOptions.orderBy) {
-                    if (groupableOptions.orderByDirection === "desc") {
-                        enumerable = enumerable.orderByDescending(item => this.getOrderKey(item));
-                    }
-                    else {
-                        enumerable = enumerable.orderBy(item => this.getOrderKey(item));
-                    }
-                }
-                let groupedEnumerable = enumerable.groupBy(item => this.getGroupField(item));
-                if (groupableOptions.headerOrder) {
-                    if (groupableOptions.headerOrder === "desc") {
-                        groupedEnumerable = groupedEnumerable.orderByDescending(g => g.key);
-                    }
-                    else {
-                        groupedEnumerable = groupedEnumerable.orderBy(g => g.key);
-                    }
-                }
-                resultEnumerable = groupedEnumerable.selectMany(g => {
-                    const groupHeaderItem = new ListItem({ data: g.key, header: String(g.key) });
-                    return g.source.prepend(groupHeaderItem);
-                });
-            }
-            else {
-                resultEnumerable = enumerable;
-            }
+            const arrangedItems = this.#arrangedItems();
             const pageableOptions = this.pageableOptions();
-            if (virtualScrollOptions.enabled) {
-                return resultEnumerable.toImmutableSet();
-            }
-            if (pageableOptions.enabled) {
-                const pageState = this.pageState();
-                const skip = pageState.skip;
-                const take = pageState.take;
-                return toImmutableSet(this.skipTakeWithGroups(resultEnumerable.toArray(), skip, take));
+            if (this.virtualScrollOptions().enabled || !pageableOptions.enabled) {
+                return arrangedItems;
             }
-            return resultEnumerable.toImmutableSet();
+            const pageState = this.pageState();
+            return toImmutableSet(this.skipTakeWithGroups(arrangedItems.toArray(), pageState.skip, pageState.take));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewItems" }] : /* istanbul ignore next */ []));
         this.virtualScrollOptions = signal({
@@ -236,41 +334,25 @@ class ListService {
             height: 28
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "virtualScrollOptions" }] : /* istanbul ignore next */ []));
-        this.itemPositions = computed(() => {
-            const viewItems = this.viewItems();
-            const nonHeaderItems = viewItems.where(i => !i.header).toArray();
-            const positions = new Map();
-            nonHeaderItems.forEach((item, index) => {
-                positions.set(item.uid, { position: index + 1, total: nonHeaderItems.length });
-            });
-            return positions;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "itemPositions" }] : /* istanbul ignore next */ []));
     }
+    #arrangedItems;
     #data;
+    /**
+     * First list item for each selection key, so key lookups are O(1) instead of a scan per key.
+     */
+    #itemsByKey;
+    #itemsByUid;
+    /**
+     * Wraps the data in list items while keeping item identity across data changes:
+     * an item whose selection key existed before keeps its `uid`, and keeps its instance when the data
+     * object is also unchanged. Highlight, `aria-activedescendant` ids and rendered rows therefore survive
+     * a refresh (for example server-side filtering) instead of pointing at items that no longer exist.
+     */
     #listItems;
-    getItemPosition(item) {
-        return this.itemPositions().get(item.uid) ?? null;
-    }
     /**
-     * Resolves the selection value of a data item through `valueField`.
-     *
-     * When no `valueField` is configured, the data item itself is the value.
-     * When `valueField` is a string, the item property is read with a nullish fallback to the item.
-     * When `valueField` is a function, its result is used as-is.
-     *
-     * Falsy results such as `0`, `false`, and `""` are valid values and do not fall back to the item.
+     * Group header items from the last grouping pass, reused so header rows keep their uid between recomputations.
      */
-    getDataItemValue(dataItem) {
-        const valueField = this.valueField();
-        if (!valueField) {
-            return dataItem;
-        }
-        if (typeof valueField === "string") {
-            return dataItem?.[valueField] ?? dataItem;
-        }
-        return valueField(dataItem);
-    }
+    #groupHeaders;
     clearFilter() {
         this.filterText.set("");
     }
@@ -281,12 +363,18 @@ class ListService {
         this.selectedKeys.update(set => set.clear());
         this.highlightedItem.set(null);
     }
+    /**
+     * Finds the next item whose text starts with the typeahead buffer, starting after the active item.
+     * Group headers and disabled items are never matched.
+     */
     cycleThroughMatchedItems(buffer) {
         const activeItem = this.highlightedItem() || this.selectedListItems().lastOrDefault();
-        const viewItems = this.viewItems();
-        return cycleThroughMatchedItems(viewItems, activeItem, item => {
-            const text = this.getItemText(item);
-            return text.toLowerCase().startsWith(buffer.toLowerCase());
+        const prefix = buffer.toLowerCase();
+        return cycleThroughMatchedItems(this.viewItems(), activeItem ?? null, item => {
+            if (item.isHeader || this.isDisabled(item)) {
+                return false;
+            }
+            return this.getItemText(item).toLowerCase().startsWith(prefix);
         });
     }
     deselectItems(item) {
@@ -295,6 +383,25 @@ class ListService {
             .toImmutableSet();
         this.selectedKeys.update(set => set.removeAll(keys));
     }
+    /**
+     * Resolves the selection value of a data item through `valueField`.
+     *
+     * When no `valueField` is configured, the data item itself is the value.
+     * When `valueField` is a string, the item property is read with a nullish fallback to the item.
+     * When `valueField` is a function, its result is used as-is.
+     *
+     * Falsy results such as `0`, `false`, and `""` are valid values and do not fall back to the item.
+     */
+    getDataItemValue(dataItem) {
+        const valueField = this.valueField();
+        if (!valueField) {
+            return dataItem;
+        }
+        if (typeof valueField === "string") {
+            return dataItem?.[valueField] ?? dataItem;
+        }
+        return valueField(dataItem);
+    }
     getFilterDebounceDuration() {
         const filterableOptions = this.filterableOptions();
         return filterableOptions.enabled ? filterableOptions.debounce : 0;
@@ -309,33 +416,54 @@ class ListService {
         }
         return groupSelector(item.data);
     }
+    /**
+     * Returns the uid of the group header an item is rendered under, or `null` when the list is not grouped.
+     */
+    getGroupHeaderUid(item) {
+        return this.groupHeaderUids().get(item.uid) ?? null;
+    }
+    getItemPosition(item) {
+        return this.itemPositions().get(item.uid) ?? null;
+    }
+    /**
+     * Resolves the display text of an item through `textField`.
+     * Non-string field values (numbers, dates, …) are converted with `String()`, and nullish values become `""`.
+     */
     getItemText(item) {
         const textField = this.textField();
+        let text;
         if (!textField) {
-            return item.data?.toString() ?? "";
+            text = item.data;
         }
-        if (typeof textField === "string") {
-            return item.data?.[textField] ?? "";
+        else if (typeof textField === "string") {
+            text = item.data?.[textField];
         }
-        return textField(item.data);
+        else {
+            text = textField(item.data);
+        }
+        return text == null ? "" : String(text);
     }
+    /**
+     * Finds the item that typed text should resolve to: an exact text match first (respecting `caseSensitive`),
+     * otherwise the first item accepted by the filter operator. Group headers and disabled items are skipped.
+     */
     getMatchingFilteredItem(text) {
         const filterableOptions = this.filterableOptions();
         const caseSensitive = filterableOptions.enabled ? filterableOptions.caseSensitive : false;
-        const viewItems = this.viewItems();
-        const allMatchingItems = viewItems.where(i => this.filterItem(i, text));
-        const fullMatchingItem = viewItems.firstOrDefault(i => {
-            if (!caseSensitive) {
-                return this.getItemText(i) === text;
-            }
-            return this.getItemText(i).toLowerCase() === text.toLowerCase();
+        const candidates = this.viewItems().where(i => !i.isHeader && !this.isDisabled(i));
+        const fullMatchingItem = candidates.firstOrDefault(i => {
+            const itemText = this.getItemText(i);
+            return caseSensitive ? itemText === text : itemText.toLowerCase() === text.toLowerCase();
         });
         if (fullMatchingItem) {
             return fullMatchingItem;
         }
-        return allMatchingItems.firstOrDefault();
+        return candidates.firstOrDefault(i => this.filterItem(i, text));
     }
     isDisabled(item) {
+        if (item.isHeader) {
+            return false;
+        }
         const disabledBy = this.disabledBy();
         if (typeof disabledBy === "string") {
             return item.data?.[disabledBy] ?? false;
@@ -365,7 +493,7 @@ class ListService {
             return null;
         }
         const viewItems = this.viewItems()
-            .where(i => !i.header && !this.isDisabled(i))
+            .where(i => !i.isHeader && !this.isDisabled(i))
             .toImmutableSet();
         if (viewItems.isEmpty()) {
             return null;
@@ -393,6 +521,26 @@ class ListService {
     scrollToItem(item, focus) {
         this.scrollToItem$.next({ item, focus });
     }
+    /**
+     * Selects every enabled item currently in view, keeping existing selections. Only applies in multiple mode.
+     * @returns whether the selection changed.
+     */
+    selectAllItems() {
+        const options = this.selectableOptions();
+        if (!options.enabled || options.mode !== "multiple") {
+            return false;
+        }
+        const keys = this.viewItems()
+            .where(i => !i.isHeader && !this.isDisabled(i))
+            .select(i => this.getSelectionKey(i))
+            .toArray();
+        const selectedKeys = this.selectedKeys();
+        if (keys.every(key => selectedKeys.contains(key))) {
+            return false;
+        }
+        this.selectedKeys.update(set => set.addAll(keys));
+        return true;
+    }
     selectItem(item, scroll = false, focus = false) {
         const key = this.getSelectionKey(item);
         const options = this.selectableOptions();
@@ -496,6 +644,13 @@ class ListService {
                 return false;
         }
     }
+    /**
+     * Returns the item when it is one of the navigable items, otherwise `null`.
+     * An anchor that was filtered out or removed must not be navigated from.
+     */
+    getItemInView(viewItems, item) {
+        return item != null && viewItems.contains(item) ? item : null;
+    }
     getOrderKey(item) {
         const orderBy = this.groupableOptions().orderBy;
         if (orderBy) {
@@ -524,16 +679,34 @@ class ListService {
     getSelectionKey(item) {
         return this.getDataItemValue(item.data);
     }
+    navigateFirstForSingleSelection(viewItems, mode) {
+        const firstItem = viewItems.first();
+        if (mode === "select") {
+            if (!this.isSelected(firstItem)) {
+                this.selectItem(firstItem);
+            }
+            this.highlightedItem.set(null);
+        }
+        else {
+            this.highlightedItem.set(firstItem);
+        }
+        return firstItem;
+    }
     navigateForMultipleSelection(viewItems, direction) {
         const selectedKeys = this.selectedKeys();
         const firstItem = viewItems.first();
-        if (selectedKeys.isEmpty() && !this.highlightedItem()) {
+        if (direction === "first" || direction === "last") {
+            const edgeItem = direction === "first" ? firstItem : viewItems.last();
+            this.highlightedItem.set(edgeItem);
+            return edgeItem;
+        }
+        const lastHighlightedItem = this.getItemInView(viewItems, this.highlightedItem());
+        if (selectedKeys.isEmpty() && !lastHighlightedItem) {
             this.highlightedItem.set(firstItem);
             return firstItem;
         }
         const firstSelectedItem = viewItems.firstOrDefault(i => selectedKeys.contains(this.getSelectionKey(i)));
         const lastSelectedItem = viewItems.lastOrDefault(i => selectedKeys.contains(this.getSelectionKey(i)));
-        const lastHighlightedItem = this.highlightedItem();
         if (direction === "next") {
             const navigationItem = lastHighlightedItem ?? lastSelectedItem ?? firstItem;
             let nextItem = viewItems
@@ -564,21 +737,14 @@ class ListService {
         }
         return null;
     }
-    navigateFirstForSingleSelection(viewItems, mode) {
-        const firstItem = viewItems.first();
-        if (mode === "select") {
-            this.selectItem(firstItem);
-            this.highlightedItem.set(null);
-        }
-        else {
-            this.highlightedItem.set(firstItem);
-        }
-        return firstItem;
-    }
     navigateForSingleSelection(viewItems, direction, mode) {
         const selectedKeys = this.selectedKeys();
         const firstItem = viewItems.first();
-        if (selectedKeys.isEmpty() && !this.highlightedItem()) {
+        const lastHighlightedItem = this.getItemInView(viewItems, this.highlightedItem());
+        if (selectedKeys.isEmpty() && !lastHighlightedItem) {
+            if (direction === "last") {
+                return this.navigateLastForSingleSelection(viewItems, mode);
+            }
             if (mode === "select") {
                 this.selectItem(firstItem);
             }
@@ -587,15 +753,13 @@ class ListService {
             }
             return firstItem;
         }
-        else if (selectedKeys.isEmpty() && this.highlightedItem()) {
-            const highlightedItem = this.highlightedItem();
+        else if (selectedKeys.isEmpty() && lastHighlightedItem) {
             if (mode === "select") {
-                this.selectItem(highlightedItem);
-                return highlightedItem;
+                this.selectItem(lastHighlightedItem);
+                return lastHighlightedItem;
             }
         }
         const selectedItem = viewItems.lastOrDefault(i => selectedKeys.contains(this.getSelectionKey(i)));
-        const lastHighlightedItem = this.highlightedItem();
         const navigationItem = lastHighlightedItem ?? selectedItem ?? firstItem;
         if (direction === "next") {
             return this.navigateNextForSingleSelection(viewItems, navigationItem, mode, firstItem);
@@ -614,7 +778,9 @@ class ListService {
     navigateLastForSingleSelection(viewItems, mode) {
         const lastItem = viewItems.last();
         if (mode === "select") {
-            this.selectItem(lastItem);
+            if (!this.isSelected(lastItem)) {
+                this.selectItem(lastItem);
+            }
             this.highlightedItem.set(null);
         }
         else {
@@ -675,7 +841,7 @@ class ListService {
         let capturing = false;
         const result = [];
         for (const item of items) {
-            if (item.header) {
+            if (item.isHeader) {
                 // Include group headers when we're capturing
                 if (capturing) {
                     result.push(item);
@@ -693,7 +859,7 @@ class ListService {
                         // Find the group header for this item
                         const itemIndex = items.indexOf(item);
                         for (let i = itemIndex - 1; i >= 0; i--) {
-                            if (items[i].header) {
+                            if (items[i].isHeader) {
                                 result.push(items[i]);
                                 break;
                             }
@@ -710,7 +876,7 @@ class ListService {
         }
         // Remove trailing group headers if they are at the end
         let lastIndex = result.length - 1;
-        while (lastIndex >= 0 && result[lastIndex].header) {
+        while (lastIndex >= 0 && result[lastIndex].isHeader) {
             result.pop();
             lastIndex--;
         }
@@ -780,6 +946,8 @@ class ListItemDirective {
         this.#listService = inject((ListService));
         this.disabled = computed(() => this.#listService.isDisabled(this.item()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.groupHeaderUid = computed(() => this.#listService.getGroupHeaderUid(this.item()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupHeaderUid" }] : /* istanbul ignore next */ []));
         this.highlighted = computed(() => this.#listService.isHighlighted(this.item()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
         this.position = computed(() => {
@@ -819,15 +987,14 @@ class ListItemDirective {
             .subscribe(() => this.#listService.itemFocusOut$.next(this.item()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ListItemDirective, isStandalone: true, selector: "li[monaListItem]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.aria-current": "highlighted()", "attr.aria-disabled": "disabled()", "attr.aria-posinset": "position()", "attr.aria-selected": "selected()", "attr.aria-setsize": "setSize()", "attr.data-disabled": "disabled()", "attr.data-highlighted": "highlighted()", "attr.data-selected": "selected()", "attr.role": "'option'", "attr.tabindex": "rovingTabIndex()", "class": "textClasses()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ListItemDirective, isStandalone: true, selector: "li[monaListItem]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.aria-describedby": "groupHeaderUid()", "attr.aria-disabled": "disabled()", "attr.aria-posinset": "position()", "attr.aria-selected": "selected()", "attr.aria-setsize": "setSize()", "attr.data-disabled": "disabled()", "attr.data-highlighted": "highlighted()", "attr.data-selected": "selected()", "attr.role": "'option'", "attr.tabindex": "rovingTabIndex()", "class": "textClasses()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "li[monaListItem]",
-                    standalone: true,
                     host: {
-                        "[attr.aria-current]": "highlighted()",
+                        "[attr.aria-describedby]": "groupHeaderUid()",
                         "[attr.aria-disabled]": "disabled()",
                         "[attr.aria-posinset]": "position()",
                         "[attr.aria-selected]": "selected()",
@@ -849,8 +1016,7 @@ class ListNoDataTemplateDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListNoDataTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "ng-template[monaListNoDataTemplate]",
-                    standalone: true
+                    selector: "ng-template[monaListNoDataTemplate]"
                 }]
         }] });
 
@@ -898,13 +1064,13 @@ class ListItemComponent {
             if (item == null) {
                 return "";
             }
-            if (item.header) {
+            if (item.isHeader) {
                 return item.header;
             }
             return this.listService.getItemText(item);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "itemText" }] : /* istanbul ignore next */ []));
-        this.isHeader = computed(() => this.item()?.header ?? false, /* @ts-ignore */
+        this.isHeader = computed(() => this.item()?.isHeader ?? false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isHeader" }] : /* istanbul ignore next */ []));
         this.listService = inject(ListService);
         this.textClasses = computed(() => {
@@ -917,42 +1083,53 @@ class ListItemComponent {
             return ``; // TODO
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "textClasses" }] : /* istanbul ignore next */ []));
-        this.checked = output();
         this.item = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
         this.template = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "template" }] : /* istanbul ignore next */ []));
     }
-    onCheckboxChange(checked) {
-        this.checked.emit(checked);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ListItemComponent, isStandalone: true, selector: "mona-list-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checked" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (checkboxes()) {\n    <input\n        type=\"checkbox\"\n        [ngModel]=\"itemChecked()\"\n        monaCheckbox\n        class=\"aspect-square\"\n        (click)=\"$event.stopPropagation()\"\n        (ngModelChange)=\"onCheckboxChange($event)\"\n        (change)=\"$event.preventDefault()\" />\n}\n\n@if (template()) {\n    <ng-container [ngTemplateOutlet]=\"template()\" [ngTemplateOutletContext]=\"{ $implicit: dataItem() }\"></ng-container>\n} @else {\n    <span [class]=\"textClasses()\">{{ itemText() }}</span>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CheckboxDirective, selector: "input[type='checkbox'][monaCheckbox]", inputs: ["invalid", "rounded", "touched", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ListItemComponent, isStandalone: true, selector: "mona-list-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (checkboxes()) {\n    <!-- Visual only: the option row owns selection, so the checkbox is inert (not focusable, clicks reach the row). -->\n    <input type=\"checkbox\" [checked]=\"itemChecked()\" monaCheckbox class=\"aspect-square\" inert aria-hidden=\"true\" />\n}\n\n@if (template()) {\n    <ng-container [ngTemplateOutlet]=\"template()\" [ngTemplateOutletContext]=\"{ $implicit: dataItem() }\"></ng-container>\n} @else {\n    <span [class]=\"textClasses()\">{{ itemText() }}</span>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CheckboxDirective, selector: "input[type='checkbox'][monaCheckbox]", inputs: ["invalid", "rounded", "touched", "class"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-list-item", imports: [NgTemplateOutlet, CheckboxDirective, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: "mona-list-item", imports: [NgTemplateOutlet, CheckboxDirective], host: {
                         "[class]": "baseClass()"
-                    }, template: "@if (checkboxes()) {\n    <input\n        type=\"checkbox\"\n        [ngModel]=\"itemChecked()\"\n        monaCheckbox\n        class=\"aspect-square\"\n        (click)=\"$event.stopPropagation()\"\n        (ngModelChange)=\"onCheckboxChange($event)\"\n        (change)=\"$event.preventDefault()\" />\n}\n\n@if (template()) {\n    <ng-container [ngTemplateOutlet]=\"template()\" [ngTemplateOutletContext]=\"{ $implicit: dataItem() }\"></ng-container>\n} @else {\n    <span [class]=\"textClasses()\">{{ itemText() }}</span>\n}\n" }]
-        }], propDecorators: { checked: [{ type: i0.Output, args: ["checked"] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }] } });
+                    }, template: "@if (checkboxes()) {\n    <!-- Visual only: the option row owns selection, so the checkbox is inert (not focusable, clicks reach the row). -->\n    <input type=\"checkbox\" [checked]=\"itemChecked()\" monaCheckbox class=\"aspect-square\" inert aria-hidden=\"true\" />\n}\n\n@if (template()) {\n    <ng-container [ngTemplateOutlet]=\"template()\" [ngTemplateOutletContext]=\"{ $implicit: dataItem() }\"></ng-container>\n} @else {\n    <span [class]=\"textClasses()\">{{ itemText() }}</span>\n}\n" }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }] } });
 
 class ListComponent {
     #destroyRef;
+    #generatedListId;
     #hostElementRef;
     #i18n;
     #typeaheadKey$;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
+        this.#generatedListId = createElementControlId();
         this.#hostElementRef = inject(ElementRef);
         this.#i18n = inject(MonaI18nService);
         this.#typeaheadKey$ = new Subject();
         this.filterInput = viewChild(FilterInputComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filterInput" }] : /* istanbul ignore next */ []));
+        /**
+         * Id of the highlighted option, used as `aria-activedescendant` by the filter input.
+         */
+        this.activeDescendant = computed(() => {
+            const item = this.listService.highlightedItem();
+            return item && !item.isHeader ? item.uid : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
         this.classes = computed(() => {
             const classes = listThemeVariants();
             return twMerge(classes);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        /**
+         * The `listId` input, or a generated id so the listbox can always be referenced by `aria-controls`.
+         */
+        this.effectiveListId = computed(() => this.listId() || this.#generatedListId, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveListId" }] : /* istanbul ignore next */ []));
         this.footerTemplate = contentChild(ListFooterTemplateDirective, { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.groupHeaderClasses = computed(() => {
             const listItemClass = this.listItemClass();
@@ -1027,7 +1204,7 @@ class ListComponent {
             const items = this.listService.viewItems().size();
             const headerItems = this.listService
                 .viewItems()
-                .where(i => !!i.header)
+                .where(i => i.isHeader)
                 .count();
             const itemHeight = this.listService.virtualScrollOptions().height ?? 28;
             const height = items * itemHeight + headerItems * 2;
@@ -1098,22 +1275,20 @@ class ListComponent {
             this.listService.setFilter(event.filter);
         }
     }
-    onListItemCheck(item) {
-        this.toggleItem(item);
-    }
     onListItemClick(item) {
         this.toggleItem(item);
     }
+    trackByUid(_, item) {
+        return item.uid;
+    }
     cycleThroughMatchedItems(buffer) {
-        const nextItem = cycleThroughMatchedItems(this.listService.viewItems(), this.listService.highlightedItem(), item => {
-            const text = this.listService.getItemText(item);
-            return text.toLowerCase().startsWith(buffer.toLowerCase());
-        });
+        const nextItem = this.listService.cycleThroughMatchedItems(buffer);
         if (nextItem) {
             const navigationMode = this.listService.navigableOptions().mode;
             this.listService.highlightedItem.set(nextItem);
-            if (navigationMode === "select") {
+            if (navigationMode === "select" && this.listService.selectableOptions().enabled) {
                 this.selectItem(nextItem);
+                this.itemSelect.emit({ item: nextItem, source: { via: "keyboard", key: buffer } });
             }
             this.scrollToItem(nextItem, true, "instant");
         }
@@ -1122,7 +1297,33 @@ class ListComponent {
         if (this.listService.navigableOptions().enabled) {
             this.listService.highlightedItem.set(item);
         }
-        this.scrollToItem(item, true);
+        this.scrollToItem(item, this.filterInput() == null);
+    }
+    /**
+     * Handles multiple-selection shortcuts from the WAI-ARIA listbox pattern:
+     * Space toggles the highlighted option and Ctrl/Cmd+A selects every enabled option.
+     * @returns whether the event was handled.
+     */
+    handleMultipleSelectionKeys(event) {
+        const selectableOptions = this.listService.selectableOptions();
+        if (!selectableOptions.enabled || selectableOptions.mode !== "multiple") {
+            return false;
+        }
+        if (event.key === " " && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            const highlightedItem = this.listService.highlightedItem();
+            if (highlightedItem && !this.listService.isDisabled(highlightedItem)) {
+                this.selectItem(highlightedItem);
+                this.itemSelect.emit({ item: highlightedItem, source: { via: "keyboard", key: event.key } });
+            }
+            return true;
+        }
+        if ((event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === "a") {
+            if (this.listService.selectAllItems()) {
+                this.listService.selectedKeysChange$.next(this.listService.selectedKeys().toArray());
+            }
+            return true;
+        }
+        return false;
     }
     handleNavigation(key) {
         const direction = getListNavigationDirection(key);
@@ -1136,7 +1337,9 @@ class ListComponent {
         const navigableOptions = this.listService.navigableOptions();
         const selectableOptions = this.listService.selectableOptions();
         const previousSelectedItems = this.listService.selectedListItems();
-        const item = this.listService.navigate(direction, navigableOptions.mode, true);
+        const filterInput = this.filterInput();
+        // With a filter input, focus stays in the input and the active option is conveyed by aria-activedescendant.
+        const item = this.listService.navigate(direction, navigableOptions.mode, filterInput == null);
         if (item && navigableOptions.mode === "select" && selectableOptions.enabled) {
             this.itemSelect.emit({ item, source: { via: "keyboard", key } });
             if (previousSelectedItems.contains(item)) {
@@ -1144,7 +1347,6 @@ class ListComponent {
             }
             this.listService.selectedKeysChange$.next(this.listService.selectedKeys().toArray());
         }
-        const filterInput = this.filterInput();
         if (filterInput) {
             filterInput.focus();
         }
@@ -1181,9 +1383,10 @@ class ListComponent {
     scrollToItem(item, focus, behavior = "auto") {
         const element = this.#hostElementRef.nativeElement.querySelector(`[data-uid="${item.uid}"]`);
         if (element) {
-            element.scrollIntoView({ block: "center", behavior });
+            // "nearest" avoids scrolling the page when the option is already visible.
+            element.scrollIntoView({ block: "nearest", behavior });
             if (focus) {
-                element.focus();
+                element.focus({ preventScroll: true });
             }
         }
         else if (this.listService.virtualScrollOptions().enabled) {
@@ -1195,7 +1398,7 @@ class ListComponent {
                 this.virtualScrollViewport()?.scrollToOffset(offset, behavior);
                 const scrolledElement = this.#hostElementRef.nativeElement.querySelector(`[data-uid="${item.uid}"]`);
                 if (scrolledElement && focus) {
-                    scrolledElement.focus();
+                    scrolledElement.focus({ preventScroll: true });
                 }
             });
         }
@@ -1226,7 +1429,7 @@ class ListComponent {
         }
         const firstItem = this.listService
             .viewItems()
-            .where(i => !i.header && !this.listService.isDisabled(i))
+            .where(i => !i.isHeader && !this.listService.isDisabled(i))
             .firstOrDefault();
         if (firstItem) {
             this.focusToItem(firstItem);
@@ -1234,7 +1437,7 @@ class ListComponent {
     }
     setKeyboardEvents() {
         fromEvent(this.#hostElementRef.nativeElement, "keydown")
-            .pipe(takeUntilDestroyed(this.#destroyRef), filter(event => event.key === "Enter" || event.key === "NumPadEnter"))
+            .pipe(takeUntilDestroyed(this.#destroyRef), filter(event => event.key === "Enter"), tap(event => event.preventDefault()))
             .subscribe((event) => {
             const highlightedItem = this.listService.highlightedItem();
             const selectedItem = this.listService.selectedListItems().firstOrDefault();
@@ -1251,18 +1454,21 @@ class ListComponent {
     }
     setNavigationEvents() {
         fromEvent(this.#hostElementRef.nativeElement, "keydown")
-            .pipe(takeUntilDestroyed(this.#destroyRef), filter(event => event.key !== "Tab"), filter(() => this.listService.navigableOptions().enabled), tap(event => {
-            const navigableOptions = this.listService.navigableOptions();
-            if (navigableOptions.enabled) {
+            .pipe(takeUntilDestroyed(this.#destroyRef), filter(() => this.listService.navigableOptions().enabled))
+            .subscribe(event => {
+            if (this.handleMultipleSelectionKeys(event)) {
                 event.preventDefault();
+                return;
             }
-        }))
-            .subscribe(event => {
-            if (isTypeaheadKey(event.key)) {
+            if (isTypeaheadKey(event.key, event)) {
                 event.preventDefault();
                 this.#typeaheadKey$.next(event.key);
                 return;
             }
+            if (getListNavigationDirection(event.key) == null) {
+                return;
+            }
+            event.preventDefault();
             this.#typeaheadKey$.next("");
             this.handleNavigation(event.key);
         });
@@ -1311,7 +1517,7 @@ class ListComponent {
         this.itemSelect.emit({ item, source: { via: "mouse" } });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ListComponent, isStandalone: true, selector: "mona-list", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, focusOnMount: { classPropertyName: "focusOnMount", publicName: "focusOnMount", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, listClass: { classPropertyName: "listClass", publicName: "listClass", isSignal: true, isRequired: false, transformFunction: null }, listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: false, transformFunction: null }, listItemClass: { classPropertyName: "listItemClass", publicName: "listItemClass", isSignal: true, isRequired: false, transformFunction: null }, listItemStyle: { classPropertyName: "listItemStyle", publicName: "listItemStyle", isSignal: true, isRequired: false, transformFunction: null }, listStyle: { classPropertyName: "listStyle", publicName: "listStyle", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { properties: { "attr.tabindex": "hostTabIndex()", "class": "classes()", "style.height": "listHeight()", "style.max-height": "listMaxHeight()", "style.max-width": "listMaxWidth()", "style.width": "listWidth()" } }, queries: [{ propertyName: "footerTemplate", first: true, predicate: ListFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ListGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ListHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: ListNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "filterInput", first: true, predicate: FilterInputComponent, descendants: true, isSignal: true }, { propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: "@if (headerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n}\n@if (listService.filterableOptions().enabled && listService.filterInputVisible()) {\n    <div class=\"p-2\">\n        <mona-filter-input\n            [filter]=\"listService.filterText()\"\n            [debounce]=\"listService.filterableOptions().debounce\"\n            [placeholder]=\"listService.filterPlaceholder()\"\n            [size]=\"size()\"\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\n    </div>\n}\n@if (listService.virtualScrollOptions().enabled) {\n    @if (listService.viewItems().length !== 0) {\n        <cdk-virtual-scroll-viewport\n            [itemSize]=\"listService.virtualScrollOptions().height\"\n            [style.height]=\"viewportHeight()\">\n            <ul\n                [class]=\"innerListClasses()\"\n                [style]=\"listStyle()\"\n                [tabIndex]=\"-1\"\n                [id]=\"listId()\"\n                role=\"listbox\"\n                [attr.aria-label]=\"ariaLabel() || null\"\n                [attr.aria-multiselectable]=\"listService.selectableOptions().mode === 'multiple' || null\">\n                <ng-container *cdkVirtualFor=\"let item of listService.viewItems()\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-container>\n            </ul>\n        </cdk-virtual-scroll-viewport>\n    } @else if (noDataTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n    } @else {\n        <mona-placeholder [text]=\"messages().noData\" class=\"w-full h-full flex items-center justify-center\"></mona-placeholder>\n    }\n} @else {\n    @if (listService.viewItems().length !== 0) {\n        <ul\n            [class]=\"innerListClasses()\"\n            [style]=\"listStyle()\"\n            [tabIndex]=\"-1\"\n            [id]=\"listId()\"\n            role=\"listbox\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-multiselectable]=\"listService.selectableOptions().mode === 'multiple' || null\">\n            @for (item of listService.viewItems(); track item.uid) {\n                <ng-container\n                    [ngTemplateOutlet]=\"listItemTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n            }\n        </ul>\n    } @else if (noDataTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n    } @else {\n        <mona-placeholder [text]=\"messages().noData\" class=\"w-full h-full flex items-center justify-center\"></mona-placeholder>\n    }\n}\n@if (footerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n}\n\n<ng-template #listItemTemplate let-item>\n    @if (item.header) {\n        <li [class]=\"groupHeaderClasses()\" [style]=\"listItemStyle()\">\n            <mona-list-item [item]=\"item\" [template]=\"groupHeaderTemplate()\"></mona-list-item>\n        </li>\n    } @else {\n        <li\n            [class]=\"listItemClass()\"\n            [class.px-0.5]=\"true\"\n            [style]=\"listItemStyle()\"\n            [id]=\"item.uid\"\n            [attr.data-uid]=\"item.uid\"\n            (click)=\"onListItemClick(item)\"\n            monaListItem\n            [item]=\"item\">\n            <mona-list-item\n                [item]=\"item\"\n                [template]=\"itemTemplate()\"\n                (checked)=\"onListItemCheck(item)\"></mona-list-item>\n        </li>\n    }\n</ng-template>\n", dependencies: [{ kind: "component", type: FilterInputComponent, selector: "mona-filter-input", inputs: ["debounce", "filter", "placeholder", "size"], outputs: ["filterChange", "inputBlur", "inputFocus"] }, { kind: "component", type: ListItemComponent, selector: "mona-list-item", inputs: ["item", "template"], outputs: ["checked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListItemDirective, selector: "li[monaListItem]", inputs: ["item"] }, { kind: "component", type: PlaceholderComponent, selector: "mona-placeholder", inputs: ["text", "class"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ListComponent, isStandalone: true, selector: "mona-list", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, focusOnMount: { classPropertyName: "focusOnMount", publicName: "focusOnMount", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, listClass: { classPropertyName: "listClass", publicName: "listClass", isSignal: true, isRequired: false, transformFunction: null }, listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: false, transformFunction: null }, listItemClass: { classPropertyName: "listItemClass", publicName: "listItemClass", isSignal: true, isRequired: false, transformFunction: null }, listItemStyle: { classPropertyName: "listItemStyle", publicName: "listItemStyle", isSignal: true, isRequired: false, transformFunction: null }, listStyle: { classPropertyName: "listStyle", publicName: "listStyle", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { properties: { "attr.tabindex": "hostTabIndex()", "class": "classes()", "style.height": "listHeight()", "style.max-height": "listMaxHeight()", "style.max-width": "listMaxWidth()", "style.width": "listWidth()" } }, queries: [{ propertyName: "footerTemplate", first: true, predicate: ListFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ListGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ListHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: ListNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "filterInput", first: true, predicate: FilterInputComponent, descendants: true, isSignal: true }, { propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: "@if (headerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n}\n@if (listService.filterableOptions().enabled && listService.filterInputVisible()) {\n    <div class=\"p-2\">\n        <mona-filter-input\n            [filter]=\"listService.filterText()\"\n            [debounce]=\"listService.filterableOptions().debounce\"\n            [placeholder]=\"listService.filterPlaceholder()\"\n            [ariaLabel]=\"messages().filterList\"\n            [controls]=\"effectiveListId()\"\n            [activeDescendant]=\"activeDescendant()\"\n            [size]=\"size()\"\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\n    </div>\n}\n@if (listService.virtualScrollOptions().enabled) {\n    @if (listService.viewItems().length !== 0) {\n        <cdk-virtual-scroll-viewport\n            [itemSize]=\"listService.virtualScrollOptions().height\"\n            [style.height]=\"viewportHeight()\">\n            <ul\n                [class]=\"innerListClasses()\"\n                [style]=\"listStyle()\"\n                [tabIndex]=\"-1\"\n                [id]=\"effectiveListId()\"\n                role=\"listbox\"\n                [attr.aria-label]=\"ariaLabel() || null\"\n                [attr.aria-multiselectable]=\"listService.selectableOptions().mode === 'multiple' || null\">\n                <ng-container *cdkVirtualFor=\"let item of listService.viewItems(); trackBy: trackByUid\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-container>\n            </ul>\n        </cdk-virtual-scroll-viewport>\n    } @else if (noDataTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n    } @else {\n        <mona-placeholder\n            [text]=\"messages().noData\"\n            class=\"w-full h-full flex items-center justify-center\"></mona-placeholder>\n    }\n} @else {\n    @if (listService.viewItems().length !== 0) {\n        <ul\n            [class]=\"innerListClasses()\"\n            [style]=\"listStyle()\"\n            [tabIndex]=\"-1\"\n            [id]=\"effectiveListId()\"\n            role=\"listbox\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-multiselectable]=\"listService.selectableOptions().mode === 'multiple' || null\">\n            @for (item of listService.viewItems(); track item.uid) {\n                <ng-container\n                    [ngTemplateOutlet]=\"listItemTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n            }\n        </ul>\n    } @else if (noDataTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n    } @else {\n        <mona-placeholder\n            [text]=\"messages().noData\"\n            class=\"w-full h-full flex items-center justify-center\"></mona-placeholder>\n    }\n}\n@if (footerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n}\n\n<ng-template #listItemTemplate let-item>\n    @if (item.isHeader) {\n        <li [class]=\"groupHeaderClasses()\" [style]=\"listItemStyle()\" [id]=\"item.uid\" role=\"presentation\">\n            <mona-list-item [item]=\"item\" [template]=\"groupHeaderTemplate()\"></mona-list-item>\n        </li>\n    } @else {\n        <li\n            [class]=\"listItemClass()\"\n            [class.px-0.5]=\"true\"\n            [style]=\"listItemStyle()\"\n            [id]=\"item.uid\"\n            [attr.data-uid]=\"item.uid\"\n            (click)=\"onListItemClick(item)\"\n            monaListItem\n            [item]=\"item\">\n            <mona-list-item [item]=\"item\" [template]=\"itemTemplate()\"></mona-list-item>\n        </li>\n    }\n</ng-template>\n", dependencies: [{ kind: "component", type: FilterInputComponent, selector: "mona-filter-input", inputs: ["activeDescendant", "ariaLabel", "controls", "debounce", "filter", "placeholder", "size"], outputs: ["filterChange", "inputBlur", "inputFocus"] }, { kind: "component", type: ListItemComponent, selector: "mona-list-item", inputs: ["item", "template"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListItemDirective, selector: "li[monaListItem]", inputs: ["item"] }, { kind: "component", type: PlaceholderComponent, selector: "mona-placeholder", inputs: ["text", "class"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
@@ -1331,7 +1537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[style.max-height]": "listMaxHeight()",
                         "[style.max-width]": "listMaxWidth()",
                         "[style.width]": "listWidth()"
-                    }, template: "@if (headerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n}\n@if (listService.filterableOptions().enabled && listService.filterInputVisible()) {\n    <div class=\"p-2\">\n        <mona-filter-input\n            [filter]=\"listService.filterText()\"\n            [debounce]=\"listService.filterableOptions().debounce\"\n            [placeholder]=\"listService.filterPlaceholder()\"\n            [size]=\"size()\"\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\n    </div>\n}\n@if (listService.virtualScrollOptions().enabled) {\n    @if (listService.viewItems().length !== 0) {\n        <cdk-virtual-scroll-viewport\n            [itemSize]=\"listService.virtualScrollOptions().height\"\n            [style.height]=\"viewportHeight()\">\n            <ul\n                [class]=\"innerListClasses()\"\n                [style]=\"listStyle()\"\n                [tabIndex]=\"-1\"\n                [id]=\"listId()\"\n                role=\"listbox\"\n                [attr.aria-label]=\"ariaLabel() || null\"\n                [attr.aria-multiselectable]=\"listService.selectableOptions().mode === 'multiple' || null\">\n                <ng-container *cdkVirtualFor=\"let item of listService.viewItems()\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-container>\n            </ul>\n        </cdk-virtual-scroll-viewport>\n    } @else if (noDataTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n    } @else {\n        <mona-placeholder [text]=\"messages().noData\" class=\"w-full h-full flex items-center justify-center\"></mona-placeholder>\n    }\n} @else {\n    @if (listService.viewItems().length !== 0) {\n        <ul\n            [class]=\"innerListClasses()\"\n            [style]=\"listStyle()\"\n            [tabIndex]=\"-1\"\n            [id]=\"listId()\"\n            role=\"listbox\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-multiselectable]=\"listService.selectableOptions().mode === 'multiple' || null\">\n            @for (item of listService.viewItems(); track item.uid) {\n                <ng-container\n                    [ngTemplateOutlet]=\"listItemTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n            }\n        </ul>\n    } @else if (noDataTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n    } @else {\n        <mona-placeholder [text]=\"messages().noData\" class=\"w-full h-full flex items-center justify-center\"></mona-placeholder>\n    }\n}\n@if (footerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n}\n\n<ng-template #listItemTemplate let-item>\n    @if (item.header) {\n        <li [class]=\"groupHeaderClasses()\" [style]=\"listItemStyle()\">\n            <mona-list-item [item]=\"item\" [template]=\"groupHeaderTemplate()\"></mona-list-item>\n        </li>\n    } @else {\n        <li\n            [class]=\"listItemClass()\"\n            [class.px-0.5]=\"true\"\n            [style]=\"listItemStyle()\"\n            [id]=\"item.uid\"\n            [attr.data-uid]=\"item.uid\"\n            (click)=\"onListItemClick(item)\"\n            monaListItem\n            [item]=\"item\">\n            <mona-list-item\n                [item]=\"item\"\n                [template]=\"itemTemplate()\"\n                (checked)=\"onListItemCheck(item)\"></mona-list-item>\n        </li>\n    }\n</ng-template>\n" }]
+                    }, template: "@if (headerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n}\n@if (listService.filterableOptions().enabled && listService.filterInputVisible()) {\n    <div class=\"p-2\">\n        <mona-filter-input\n            [filter]=\"listService.filterText()\"\n            [debounce]=\"listService.filterableOptions().debounce\"\n            [placeholder]=\"listService.filterPlaceholder()\"\n            [ariaLabel]=\"messages().filterList\"\n            [controls]=\"effectiveListId()\"\n            [activeDescendant]=\"activeDescendant()\"\n            [size]=\"size()\"\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\n    </div>\n}\n@if (listService.virtualScrollOptions().enabled) {\n    @if (listService.viewItems().length !== 0) {\n        <cdk-virtual-scroll-viewport\n            [itemSize]=\"listService.virtualScrollOptions().height\"\n            [style.height]=\"viewportHeight()\">\n            <ul\n                [class]=\"innerListClasses()\"\n                [style]=\"listStyle()\"\n                [tabIndex]=\"-1\"\n                [id]=\"effectiveListId()\"\n                role=\"listbox\"\n                [attr.aria-label]=\"ariaLabel() || null\"\n                [attr.aria-multiselectable]=\"listService.selectableOptions().mode === 'multiple' || null\">\n                <ng-container *cdkVirtualFor=\"let item of listService.viewItems(); trackBy: trackByUid\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-container>\n            </ul>\n        </cdk-virtual-scroll-viewport>\n    } @else if (noDataTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n    } @else {\n        <mona-placeholder\n            [text]=\"messages().noData\"\n            class=\"w-full h-full flex items-center justify-center\"></mona-placeholder>\n    }\n} @else {\n    @if (listService.viewItems().length !== 0) {\n        <ul\n            [class]=\"innerListClasses()\"\n            [style]=\"listStyle()\"\n            [tabIndex]=\"-1\"\n            [id]=\"effectiveListId()\"\n            role=\"listbox\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-multiselectable]=\"listService.selectableOptions().mode === 'multiple' || null\">\n            @for (item of listService.viewItems(); track item.uid) {\n                <ng-container\n                    [ngTemplateOutlet]=\"listItemTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n            }\n        </ul>\n    } @else if (noDataTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n    } @else {\n        <mona-placeholder\n            [text]=\"messages().noData\"\n            class=\"w-full h-full flex items-center justify-center\"></mona-placeholder>\n    }\n}\n@if (footerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n}\n\n<ng-template #listItemTemplate let-item>\n    @if (item.isHeader) {\n        <li [class]=\"groupHeaderClasses()\" [style]=\"listItemStyle()\" [id]=\"item.uid\" role=\"presentation\">\n            <mona-list-item [item]=\"item\" [template]=\"groupHeaderTemplate()\"></mona-list-item>\n        </li>\n    } @else {\n        <li\n            [class]=\"listItemClass()\"\n            [class.px-0.5]=\"true\"\n            [style]=\"listItemStyle()\"\n            [id]=\"item.uid\"\n            [attr.data-uid]=\"item.uid\"\n            (click)=\"onListItemClick(item)\"\n            monaListItem\n            [item]=\"item\">\n            <mona-list-item [item]=\"item\" [template]=\"itemTemplate()\"></mona-list-item>\n        </li>\n    }\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { filterInput: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FilterInputComponent), { isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupHeaderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListGroupHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], virtualScrollViewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], focusOnMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnMount", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], listClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "listClass", required: false }] }], listId: [{ type: i0.Input, args: [{ isSignal: true, alias: "listId", required: false }] }], listItemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemClass", required: false }] }], listItemStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemStyle", required: false }] }], listStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listStyle", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
 
 /*