@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,1356 @@
+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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { 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 { cva } from 'class-variance-authority';
+import { ImmutableList, from, ImmutableSet, toImmutableSet } from '@mirei/ts-collections';
+import { v4 } from 'uuid';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { CheckboxDirective } from '@nanahoshi/mona-ui/check-box';
+
+class ListFooterTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ListFooterTemplateDirective, isStandalone: true, selector: "ng-template[monaListFooterTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaListFooterTemplate]",
+                    standalone: true
+                }]
+        }] });
+
+class ListGroupHeaderTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListGroupHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ListGroupHeaderTemplateDirective, isStandalone: true, selector: "ng-template[monaListGroupHeaderTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListGroupHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaListGroupHeaderTemplate]",
+                    standalone: true
+                }]
+        }] });
+
+class ListHeaderTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ListHeaderTemplateDirective, isStandalone: true, selector: "ng-template[monaListHeaderTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaListHeaderTemplate]",
+                    standalone: true
+                }]
+        }] });
+
+class ListItemTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ListItemTemplateDirective, isStandalone: true, selector: "ng-template[monaListItemTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaListItemTemplate]",
+                    standalone: true
+                }]
+        }] });
+
+const listVariants = cva(`
+        h-full flex flex-col overflow-hidden outline-none
+    `);
+const listInnerListVariants = cva(`
+        list-none p-0 m-0 overflow-x-hidden overflow-y-auto
+        h-full outline-none
+    `);
+const listGroupHeaderVariants = cva(``, {
+    variants: {
+        hasTemplate: {
+            true: "",
+            false: "py-1 font-bold"
+        }
+    }
+});
+const listGroupHeaderTextVariants = cva(`select-none`, {
+    variants: {
+        hasTemplate: {
+            true: "",
+            false: "font-bold w-full px-3 py-1"
+        }
+    }
+});
+const listItemBaseVariants = cva(`
+        w-full h-full flex gap-2 items-center
+    `);
+const listItemContentVariants = cva(`
+        relative flex cursor-default select-none items-center
+        outline-none px-3 py-1
+        hover:bg-accent hover:text-accent-foreground
+        focus:bg-accent focus:text-accent-foreground
+    `, {
+    variants: {
+        checkboxes: {
+            true: "gap-2",
+            false: ""
+        },
+        highlighted: {
+            true: "bg-accent text-accent-foreground rounded-none inset-ring-1 inset-ring-gray-400/70",
+            false: ""
+        },
+        selected: {
+            true: "bg-primary text-primary-foreground inset-ring-1 inset-ring-primary-foreground/40",
+            false: ""
+        },
+        disabled: {
+            true: "pointer-events-none opacity-50 cursor-default",
+            false: "cursor-pointer"
+        }
+    },
+    compoundVariants: [
+        {
+            selected: true,
+            checkboxes: false,
+            class: `
+                    bg-primary text-primary-foreground rounded-none
+                    inset-ring-1 inset-ring-primary-foreground/40
+                    hover:bg-primary hover:text-primary-foreground
+                    focus:bg-primary focus:text-primary-foreground
+                `
+        },
+        {
+            highlighted: true,
+            selected: true,
+            checkboxes: false,
+            class: `
+                    bg-primary text-primary-foreground rounded-none
+                    inset-ring-1 inset-ring-primary-foreground/40
+                    hover:bg-primary hover:text-primary-foreground
+                    focus:bg-primary focus:text-primary-foreground
+                `
+        },
+        {
+            selected: true,
+            checkboxes: true,
+            class: `bg-transparent text-foreground`
+        }
+    ]
+});
+
+class ListItem {
+    constructor(options) {
+        this.header = "";
+        this.uid = v4();
+        this.data = options.data;
+        this.header = options.header ?? this.header;
+    }
+}
+
+const cycleThroughMatchedItems = (items, activeItem, // highlighted or selected item
+predicate) => {
+    const matchedItems = Array.from(items).filter(predicate);
+    if (matchedItems.length === 0) {
+        return null;
+    }
+    const currentIndex = activeItem ? matchedItems.indexOf(activeItem) : -1;
+    const nextIndex = (currentIndex + 1) % matchedItems.length;
+    return matchedItems[nextIndex];
+};
+
+class ListService {
+    constructor() {
+        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();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#listItems" }] : /* istanbul ignore next */ []));
+        this.disabledBy = signal("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledBy" }] : /* istanbul ignore next */ []));
+        this.filterChange$ = new Subject();
+        this.filterInputVisible = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterInputVisible" }] : /* istanbul ignore next */ []));
+        this.filterPlaceholder = signal("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
+        this.filterText = signal("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
+        this.filterableOptions = signal({
+            enabled: false,
+            caseSensitive: false,
+            debounce: 0,
+            operator: "contains"
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterableOptions" }] : /* istanbul ignore next */ []));
+        this.focus$ = new Subject();
+        this.focusableItem = computed(() => {
+            const highlighted = this.highlightedItem();
+            if (highlighted) {
+                return highlighted;
+            }
+            const selected = this.selectedListItems().lastOrDefault();
+            if (selected) {
+                return selected;
+            }
+            return this.viewItems().firstOrDefault(i => !i.header && !this.isDisabled(i));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusableItem" }] : /* istanbul ignore next */ []));
+        this.groupBy = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupBy" }] : /* 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 */ []));
+        this.itemFocusOut$ = new Subject();
+        this.navigatedItem$ = new Subject();
+        this.navigableOptions = signal({
+            enabled: false,
+            mode: "select",
+            wrap: false
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigableOptions" }] : /* istanbul ignore next */ []));
+        this.pageState = signal({ page: 1, skip: 0, take: 10 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageState" }] : /* istanbul ignore next */ []));
+        this.pageableOptions = signal({
+            enabled: false,
+            firstLast: false,
+            showInfo: true,
+            pageSizeValues: true,
+            previousNext: false,
+            type: "numeric",
+            visiblePages: 5
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageableOptions" }] : /* istanbul ignore next */ []));
+        this.scrollToItem$ = new ReplaySubject(1);
+        this.selectableOptions = signal({
+            checkboxes: false,
+            enabled: false,
+            mode: "single",
+            toggleable: false
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectableOptions" }] : /* istanbul ignore next */ []));
+        this.selectedKeys = signal(ImmutableSet.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+        this.selectedKeysChange$ = new Subject();
+        this.selectedListItems = computed(() => {
+            const selectedKeys = this.selectedKeys();
+            return selectedKeys
+                .select(key => this.#listItems().firstOrDefault(i => this.getSelectionKey(i) === key))
+                .where(i => i != null)
+                .toImmutableSet();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedListItems" }] : /* istanbul ignore next */ []));
+        this.selectionChange$ = new Subject();
+        this.textField = signal("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
+        this.valueField = signal("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
+        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 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));
+            }
+            return resultEnumerable.toImmutableSet();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewItems" }] : /* istanbul ignore next */ []));
+        this.virtualScrollOptions = signal({
+            enabled: false,
+            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 */ []));
+    }
+    #data;
+    #listItems;
+    getItemPosition(item) {
+        return this.itemPositions().get(item.uid) ?? null;
+    }
+    clearFilter() {
+        this.filterText.set("");
+    }
+    clearHighlightedItem() {
+        this.highlightedItem.set(null);
+    }
+    clearSelections() {
+        this.selectedKeys.update(set => set.clear());
+        this.highlightedItem.set(null);
+    }
+    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());
+        });
+    }
+    deselectItems(item) {
+        const keys = from(item)
+            .select(i => this.getSelectionKey(i))
+            .toImmutableSet();
+        this.selectedKeys.update(set => set.removeAll(keys));
+    }
+    getFilterDebounceDuration() {
+        const filterableOptions = this.filterableOptions();
+        return filterableOptions.enabled ? filterableOptions.debounce : 0;
+    }
+    getGroupField(item) {
+        const groupSelector = this.groupBy();
+        if (groupSelector == null) {
+            return "";
+        }
+        if (typeof groupSelector === "string") {
+            return item.data?.[groupSelector] ?? "";
+        }
+        return groupSelector(item.data);
+    }
+    getItemText(item) {
+        const textField = this.textField();
+        if (!textField) {
+            return item.data?.toString() ?? "";
+        }
+        if (typeof textField === "string") {
+            return item.data?.[textField] ?? "";
+        }
+        return textField(item.data);
+    }
+    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();
+        });
+        if (fullMatchingItem) {
+            return fullMatchingItem;
+        }
+        return allMatchingItems.firstOrDefault();
+    }
+    isDisabled(item) {
+        const disabledBy = this.disabledBy();
+        if (typeof disabledBy === "string") {
+            return item.data?.[disabledBy] ?? false;
+        }
+        return disabledBy(item.data);
+    }
+    isFilteringEnabled() {
+        const filterableOptions = this.filterableOptions();
+        return filterableOptions.enabled;
+    }
+    isHighlighted(item) {
+        const highlightedItem = this.highlightedItem();
+        return highlightedItem === item;
+    }
+    isSelected(item) {
+        const options = this.selectableOptions();
+        if (!options.enabled) {
+            return false;
+        }
+        const selectedKeys = this.selectedKeys();
+        const key = this.getSelectionKey(item);
+        return selectedKeys.contains(key);
+    }
+    navigate(direction, mode, focus) {
+        const navigableOptions = this.navigableOptions();
+        if (!navigableOptions.enabled) {
+            return null;
+        }
+        const viewItems = this.viewItems()
+            .where(i => !i.header && !this.isDisabled(i))
+            .toImmutableSet();
+        if (viewItems.isEmpty()) {
+            return null;
+        }
+        const selectableOptions = this.selectableOptions();
+        if (mode === "select" && (!selectableOptions.enabled || selectableOptions.mode === "multiple")) {
+            mode = "highlight";
+        }
+        let item;
+        if (selectableOptions.mode === "single") {
+            item = this.navigateForSingleSelection(viewItems, direction, mode);
+        }
+        else {
+            item = this.navigateForMultipleSelection(viewItems, direction);
+        }
+        if (item) {
+            this.scrollToItem$.next({ item, focus });
+            this.navigatedItem$.next(item);
+        }
+        return item;
+    }
+    notifySelectionChange(item) {
+        this.selectionChange$.next(item);
+    }
+    scrollToItem(item, focus) {
+        this.scrollToItem$.next({ item, focus });
+    }
+    selectItem(item, scroll = false, focus = false) {
+        const key = this.getSelectionKey(item);
+        const options = this.selectableOptions();
+        if (options.mode === "single") {
+            if (options.toggleable) {
+                this.selectedKeys.update(set => {
+                    if (set.contains(key)) {
+                        if (set.size() > 1) {
+                            return set.where(k => k === key).toImmutableSet();
+                        }
+                        return set.remove(key);
+                    }
+                    return set.clear().add(key);
+                });
+            }
+            else {
+                this.selectedKeys.update(set => set.clear().add(key));
+            }
+        }
+        else {
+            this.selectedKeys.update(set => {
+                if (set.contains(key)) {
+                    return set.remove(key);
+                }
+                return set.add(key);
+            });
+        }
+        if (scroll) {
+            this.scrollToItem(item, focus);
+        }
+        this.notifySelectionChange(item);
+    }
+    setData(data) {
+        this.#data.update(list => list.clear().addAll(data));
+    }
+    setDisabledBy(disabledBy) {
+        this.disabledBy.set(disabledBy);
+    }
+    setFilter(filter) {
+        this.filterText.set(filter);
+    }
+    setFilterPlaceholder(placeholder) {
+        this.filterPlaceholder.set(placeholder);
+    }
+    setFilterableOptions(options) {
+        this.filterableOptions.update(o => ({ ...o, ...options }));
+    }
+    setGroupBy(groupSelector) {
+        this.groupBy.set(groupSelector);
+    }
+    setGroupableOptions(options) {
+        this.groupableOptions.update(o => ({ ...o, ...options }));
+    }
+    setNavigableOptions(options) {
+        this.navigableOptions.update(o => ({ ...o, ...options }));
+    }
+    setPageableOptions(settings) {
+        this.pageableOptions.set(settings);
+    }
+    setSelectableOptions(options) {
+        this.selectableOptions.update(o => ({ ...o, ...options }));
+    }
+    setSelectedDataItems(dataItems) {
+        const valueField = this.valueField();
+        if (!valueField) {
+            this.selectedKeys.update(set => set.clear().addAll(dataItems));
+        }
+        else {
+            const selectedKeys = from(dataItems)
+                .select(item => this.getDataItemSelectionKey(item))
+                .toImmutableSet();
+            this.selectedKeys.update(set => set.clear().addAll(selectedKeys));
+        }
+    }
+    setSelectedKeys(selectedKeys) {
+        this.selectedKeys.update(set => set.clear().addAll(selectedKeys));
+    }
+    setTextField(textField) {
+        this.textField.set(textField);
+    }
+    setValueField(valueField) {
+        this.valueField.set(valueField);
+    }
+    setVirtualScrollOptions(options) {
+        this.virtualScrollOptions.update(o => ({ ...o, ...options }));
+    }
+    filterItem(item, filterText) {
+        if (filterText === "") {
+            return true;
+        }
+        const options = this.filterableOptions();
+        const itemText = this.getItemText(item);
+        const text = options.caseSensitive ? itemText : itemText.toLowerCase();
+        const filter = options.caseSensitive ? filterText : filterText.toLowerCase();
+        const operator = options.enabled ? options.operator : "startsWith";
+        if (typeof operator === "function") {
+            return operator(text, filter);
+        }
+        switch (operator) {
+            case "contains":
+                return text.includes(filter);
+            case "startsWith":
+                return text.startsWith(filter);
+            case "endsWith":
+                return text.endsWith(filter);
+            default:
+                return false;
+        }
+    }
+    getDataItemSelectionKey(dataItem) {
+        const valueField = this.valueField();
+        if (!valueField) {
+            return dataItem;
+        }
+        if (typeof valueField === "string") {
+            return dataItem?.[valueField] ?? dataItem;
+        }
+        return valueField(dataItem);
+    }
+    getOrderKey(item) {
+        const orderBy = this.groupableOptions().orderBy;
+        if (orderBy) {
+            if (typeof orderBy === "string") {
+                return item.data[orderBy];
+            }
+            else {
+                return orderBy(item.data);
+            }
+        }
+        return null;
+    }
+    getPreviousItemForNavigation(viewItems, navigationItem) {
+        let prevItem = viewItems.takeWhile(i => i !== navigationItem).lastOrDefault(i => !this.isDisabled(i));
+        if (prevItem == null) {
+            const lastItem = viewItems.lastOrDefault(i => !this.isDisabled(i));
+            if (this.navigableOptions().wrap) {
+                prevItem = lastItem;
+            }
+            else if (!this.navigableOptions().wrap) {
+                prevItem = navigationItem;
+            }
+        }
+        return prevItem;
+    }
+    getSelectionKey(item) {
+        return this.getDataItemSelectionKey(item.data);
+    }
+    navigateForMultipleSelection(viewItems, direction) {
+        const selectedKeys = this.selectedKeys();
+        const firstItem = viewItems.first();
+        if (selectedKeys.isEmpty() && !this.highlightedItem()) {
+            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
+                .skipWhile(i => i !== navigationItem)
+                .skip(1)
+                .firstOrDefault(i => !this.isDisabled(i));
+            if (nextItem == null) {
+                const firstItem = viewItems.firstOrDefault(i => !this.isDisabled(i));
+                if (this.navigableOptions().wrap) {
+                    nextItem = firstItem;
+                }
+                else if (!this.navigableOptions().wrap) {
+                    nextItem = navigationItem;
+                }
+            }
+            if (nextItem) {
+                this.highlightedItem.set(nextItem);
+                return nextItem;
+            }
+        }
+        else {
+            const navigationItem = lastHighlightedItem ?? firstSelectedItem ?? firstItem;
+            const prevItem = this.getPreviousItemForNavigation(viewItems, navigationItem);
+            if (prevItem) {
+                this.highlightedItem.set(prevItem);
+                return prevItem;
+            }
+        }
+        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()) {
+            if (mode === "select") {
+                this.selectItem(firstItem);
+            }
+            else {
+                this.highlightedItem.set(firstItem);
+            }
+            return firstItem;
+        }
+        else if (selectedKeys.isEmpty() && this.highlightedItem()) {
+            const highlightedItem = this.highlightedItem();
+            if (mode === "select") {
+                this.selectItem(highlightedItem);
+                return highlightedItem;
+            }
+        }
+        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);
+        }
+        else if (direction === "previous") {
+            return this.navigatePreviousForSingleSelection(viewItems, navigationItem, mode);
+        }
+        else if (direction === "first") {
+            return this.navigateFirstForSingleSelection(viewItems, mode);
+        }
+        else if (direction === "last") {
+            return this.navigateLastForSingleSelection(viewItems, mode);
+        }
+        return null;
+    }
+    navigateLastForSingleSelection(viewItems, mode) {
+        const lastItem = viewItems.last();
+        if (mode === "select") {
+            this.selectItem(lastItem);
+            this.highlightedItem.set(null);
+        }
+        else {
+            this.highlightedItem.set(lastItem);
+        }
+        return lastItem;
+    }
+    navigateNextForSingleSelection(viewItems, navigationItem, mode, firstItem) {
+        let nextItem = viewItems
+            .skipWhile(i => i !== navigationItem)
+            .skip(1)
+            .firstOrDefault(i => !this.isDisabled(i));
+        if (nextItem == null) {
+            if (this.navigableOptions().wrap) {
+                nextItem = firstItem;
+            }
+            else if (!this.navigableOptions().wrap) {
+                nextItem = navigationItem;
+            }
+        }
+        if (nextItem) {
+            if (mode === "select") {
+                const previouslySelectedItem = this.selectedListItems().firstOrDefault();
+                if (previouslySelectedItem === nextItem) {
+                    return null;
+                }
+                this.selectItem(nextItem);
+                this.highlightedItem.set(null);
+            }
+            else {
+                this.highlightedItem.set(nextItem);
+            }
+            return nextItem;
+        }
+        return null;
+    }
+    navigatePreviousForSingleSelection(viewItems, navigationItem, mode) {
+        const prevItem = this.getPreviousItemForNavigation(viewItems, navigationItem);
+        if (!prevItem) {
+            return null;
+        }
+        if (mode === "select") {
+            const previouslySelectedItem = this.selectedListItems().firstOrDefault();
+            if (previouslySelectedItem === prevItem) {
+                return null;
+            }
+            this.selectItem(prevItem);
+            this.highlightedItem.set(null);
+        }
+        else {
+            this.highlightedItem.set(prevItem);
+        }
+        return prevItem;
+    }
+    skipTakeWithGroups(items, skip, take) {
+        let skipped = 0;
+        let taken = 0;
+        let capturing = false;
+        const result = [];
+        for (const item of items) {
+            if (item.header) {
+                // Include group headers when we're capturing
+                if (capturing) {
+                    result.push(item);
+                }
+            }
+            else {
+                // Handle regular items
+                if (!capturing && skipped < skip) {
+                    skipped++;
+                    continue;
+                }
+                if (taken < take) {
+                    // Check if we need to include the group header for this item
+                    if (!capturing && result.length === 0) {
+                        // Find the group header for this item
+                        const itemIndex = items.indexOf(item);
+                        for (let i = itemIndex - 1; i >= 0; i--) {
+                            if (items[i].header) {
+                                result.push(items[i]);
+                                break;
+                            }
+                        }
+                    }
+                    capturing = true;
+                    result.push(item);
+                    taken++;
+                }
+                else {
+                    break;
+                }
+            }
+        }
+        // Remove trailing group headers if they are at the end
+        let lastIndex = result.length - 1;
+        while (lastIndex >= 0 && result[lastIndex].header) {
+            result.pop();
+            lastIndex--;
+        }
+        return result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListService, decorators: [{
+            type: Injectable
+        }] });
+
+class ListItemDirective {
+    #listService;
+    constructor() {
+        this.#listService = inject((ListService));
+        this.disabled = computed(() => this.#listService.isDisabled(this.item()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.highlighted = computed(() => this.#listService.isHighlighted(this.item()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        this.position = computed(() => {
+            const positionInfo = this.#listService.getItemPosition(this.item());
+            return positionInfo?.position ?? null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        this.rovingTabIndex = computed(() => (this.#listService.focusableItem() === this.item() ? 0 : -1), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rovingTabIndex" }] : /* istanbul ignore next */ []));
+        this.selected = computed(() => this.#listService.isSelected(this.item()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.setSize = computed(() => {
+            const positionInfo = this.#listService.getItemPosition(this.item());
+            return positionInfo?.total ?? null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "setSize" }] : /* istanbul ignore next */ []));
+        this.textClasses = computed(() => {
+            const disabled = this.disabled();
+            const highlighted = this.highlighted();
+            const selected = this.selected();
+            const checkboxes = this.#listService.selectableOptions().checkboxes;
+            const classes = listItemContentVariants({ disabled, highlighted, selected, checkboxes });
+            return twMerge(classes);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textClasses" }] : /* istanbul ignore next */ []));
+        this.item = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        fromEvent(inject((ElementRef)).nativeElement, "focusout")
+            .pipe(takeUntilDestroyed())
+            .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 }); }
+}
+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-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()"
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }] } });
+
+class ListNoDataTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListNoDataTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ListNoDataTemplateDirective, isStandalone: true, selector: "ng-template[monaListNoDataTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListNoDataTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaListNoDataTemplate]",
+                    standalone: true
+                }]
+        }] });
+
+const getListNavigationDirection = (key) => {
+    switch (key) {
+        case "ArrowDown":
+        case "Down":
+            return "next";
+        case "ArrowUp":
+        case "Up":
+            return "previous";
+        case "Home":
+            return "first";
+        case "End":
+            return "last";
+        case "PageUp":
+            return "pageup";
+        case "PageDown":
+            return "pagedown";
+        default:
+            return null;
+    }
+};
+
+class ListItemComponent {
+    constructor() {
+        this.baseClass = computed(() => {
+            const isHeader = this.isHeader();
+            if (isHeader) {
+                return ``;
+            }
+            return listItemBaseVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.checkboxes = computed(() => {
+            return this.listService.selectableOptions().checkboxes && !this.isHeader();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checkboxes" }] : /* istanbul ignore next */ []));
+        this.dataItem = computed(() => this.item()?.data ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataItem" }] : /* istanbul ignore next */ []));
+        this.itemChecked = computed(() => this.listService.isSelected(this.item()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemChecked" }] : /* istanbul ignore next */ []));
+        this.itemText = computed(() => {
+            const item = this.item();
+            if (item == null) {
+                return "";
+            }
+            if (item.header) {
+                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 */
+        ...(ngDevMode ? [{ debugName: "isHeader" }] : /* istanbul ignore next */ []));
+        this.listService = inject(ListService);
+        this.textClasses = computed(() => {
+            const isHeader = this.isHeader();
+            if (isHeader) {
+                const hasTemplate = this.template() != null;
+                const classes = listGroupHeaderTextVariants({ hasTemplate });
+                return twMerge(classes);
+            }
+            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: ["rounded", "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 }); }
+}
+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: {
+                        "[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 }] }] } });
+
+class ListComponent {
+    #destroyRef;
+    #hostElementRef;
+    #typeaheadKey$;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#hostElementRef = inject(ElementRef);
+        this.#typeaheadKey$ = new Subject();
+        this.filterInput = viewChild(FilterInputComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterInput" }] : /* istanbul ignore next */ []));
+        this.classes = computed(() => {
+            const classes = listVariants();
+            return twMerge(classes);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        this.footerTemplate = contentChild(ListFooterTemplateDirective, { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.groupHeaderClasses = computed(() => {
+            const listItemClass = this.listItemClass();
+            const hasTemplate = this.groupHeaderTemplate() != null;
+            const classes = listGroupHeaderVariants({ hasTemplate });
+            return twMerge(classes, listItemClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupHeaderClasses" }] : /* istanbul ignore next */ []));
+        this.groupHeaderTemplate = contentChild(ListGroupHeaderTemplateDirective, { ...(ngDevMode ? { debugName: "groupHeaderTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.headerTemplate = contentChild(ListHeaderTemplateDirective, { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.hostTabIndex = computed(() => (this.listService.focusableItem() ? -1 : 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hostTabIndex" }] : /* istanbul ignore next */ []));
+        this.itemTemplate = contentChild(ListItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.innerListClasses = computed(() => {
+            const classes = listInnerListVariants();
+            const listClass = this.listClass();
+            return twMerge(classes, listClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "innerListClasses" }] : /* istanbul ignore next */ []));
+        this.listHeight = computed(() => {
+            const height = this.height();
+            if (height == null) {
+                return undefined;
+            }
+            if (typeof height === "number") {
+                return `${height}px`;
+            }
+            return height;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listHeight" }] : /* istanbul ignore next */ []));
+        this.listMaxHeight = computed(() => {
+            const maxHeight = this.maxHeight();
+            if (maxHeight == null) {
+                return undefined;
+            }
+            if (typeof maxHeight === "number") {
+                return `${maxHeight}px`;
+            }
+            return maxHeight;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listMaxHeight" }] : /* istanbul ignore next */ []));
+        this.listMaxWidth = computed(() => {
+            const maxWidth = this.maxWidth();
+            if (maxWidth == null) {
+                return undefined;
+            }
+            if (typeof maxWidth === "number") {
+                return `${maxWidth}px`;
+            }
+            return maxWidth;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listMaxWidth" }] : /* istanbul ignore next */ []));
+        this.listService = inject(ListService);
+        this.listWidth = computed(() => {
+            const width = this.width();
+            if (width == null) {
+                return undefined;
+            }
+            if (typeof width === "number") {
+                return `${width}px`;
+            }
+            return width;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listWidth" }] : /* istanbul ignore next */ []));
+        this.noDataTemplate = contentChild(ListNoDataTemplateDirective, { ...(ngDevMode ? { debugName: "noDataTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.viewportHeight = computed(() => {
+            const listHeight = this.listHeight();
+            if (listHeight) {
+                return listHeight;
+            }
+            const items = this.listService.viewItems().size();
+            const headerItems = this.listService
+                .viewItems()
+                .where(i => !!i.header)
+                .count();
+            const itemHeight = this.listService.virtualScrollOptions().height ?? 28;
+            const height = items * itemHeight + headerItems * 2;
+            return `${height}px`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
+        this.virtualScrollViewport = viewChild(CdkVirtualScrollViewport, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "virtualScrollViewport" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible name for the list's `listbox` element. Describe what the list represents.
+         * @default ""
+         */
+        this.ariaLabel = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.data = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.focusOnMount = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusOnMount" }] : /* istanbul ignore next */ []));
+        this.height = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        this.itemSelect = output();
+        this.listClass = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
+        this.listId = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listId" }] : /* istanbul ignore next */ []));
+        this.listItemClass = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listItemClass" }] : /* istanbul ignore next */ []));
+        this.listItemStyle = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listItemStyle" }] : /* istanbul ignore next */ []));
+        this.listStyle = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listStyle" }] : /* istanbul ignore next */ []));
+        this.maxHeight = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+        this.maxWidth = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ [])); // TODO: Update this to a cva variable when list styles are added
+        this.textField = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
+        this.width = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const textField = this.textField();
+            untracked(() => {
+                if (textField != null) {
+                    this.listService.setTextField(textField);
+                }
+            });
+        });
+        effect(() => {
+            const data = this.data();
+            untracked(() => {
+                if (data != null) {
+                    this.listService.setData(data);
+                }
+            });
+        });
+        afterNextRender({
+            read: () => this.setInitialSelectionOrFocus()
+        });
+    }
+    ngOnInit() {
+        this.setSubscriptions();
+    }
+    onFilterChange(event) {
+        this.listService.filterChange$.next(event);
+        if (!event.isDefaultPrevented()) {
+            this.listService.setFilter(event.filter);
+        }
+    }
+    onListItemCheck(item) {
+        this.toggleItem(item);
+    }
+    onListItemClick(item) {
+        this.toggleItem(item);
+    }
+    cycleThroughMatchedItems(buffer) {
+        const nextItem = cycleThroughMatchedItems(this.listService.viewItems(), this.listService.highlightedItem(), item => {
+            const text = this.listService.getItemText(item);
+            return text.toLowerCase().startsWith(buffer.toLowerCase());
+        });
+        if (nextItem) {
+            const navigationMode = this.listService.navigableOptions().mode;
+            this.listService.highlightedItem.set(nextItem);
+            if (navigationMode === "select") {
+                this.selectItem(nextItem);
+            }
+            this.scrollToItem(nextItem, true, "instant");
+        }
+    }
+    focusToItem(item) {
+        if (this.listService.navigableOptions().enabled) {
+            this.listService.highlightedItem.set(item);
+        }
+        this.scrollToItem(item, true);
+    }
+    handleNavigation(key) {
+        const direction = getListNavigationDirection(key);
+        if (!direction) {
+            return;
+        }
+        if (direction === "pageup" || direction === "pagedown") {
+            this.handlePageScroll(direction);
+            return;
+        }
+        const navigableOptions = this.listService.navigableOptions();
+        const selectableOptions = this.listService.selectableOptions();
+        const previousSelectedItems = this.listService.selectedListItems();
+        const item = this.listService.navigate(direction, navigableOptions.mode, true);
+        if (item && navigableOptions.mode === "select" && selectableOptions.enabled) {
+            this.itemSelect.emit({ item, source: { via: "keyboard", key } });
+            if (previousSelectedItems.contains(item)) {
+                return;
+            }
+            this.listService.selectedKeysChange$.next(this.listService.selectedKeys().toArray());
+        }
+        const filterInput = this.filterInput();
+        if (filterInput) {
+            filterInput.focus();
+        }
+    }
+    handlePageScroll(direction) {
+        const listElement = this.#hostElementRef.nativeElement.firstElementChild;
+        switch (direction) {
+            case "pagedown": {
+                const virtualScrollViewport = this.virtualScrollViewport();
+                if (virtualScrollViewport) {
+                    const scrollOffset = virtualScrollViewport.measureScrollOffset();
+                    virtualScrollViewport.scrollToOffset(scrollOffset + virtualScrollViewport.getViewportSize(), "smooth");
+                }
+                else {
+                    const top = listElement.scrollTop + listElement.clientHeight * 0.8;
+                    listElement.scrollTo({ top, behavior: "smooth" });
+                }
+                break;
+            }
+            case "pageup": {
+                const virtualScrollViewport = this.virtualScrollViewport();
+                if (virtualScrollViewport) {
+                    const scrollOffset = virtualScrollViewport.measureScrollOffset();
+                    virtualScrollViewport.scrollToOffset(scrollOffset - virtualScrollViewport.getViewportSize(), "smooth");
+                }
+                else {
+                    const top = listElement.scrollTop - listElement.clientHeight * 0.8;
+                    listElement.scrollTo({ top, behavior: "smooth" });
+                }
+                break;
+            }
+        }
+    }
+    scrollToItem(item, focus, behavior = "auto") {
+        const element = this.#hostElementRef.nativeElement.querySelector(`[data-uid="${item.uid}"]`);
+        if (element) {
+            element.scrollIntoView({ block: "center", behavior });
+            if (focus) {
+                element.focus();
+            }
+        }
+        else if (this.listService.virtualScrollOptions().enabled) {
+            const index = this.listService.viewItems().toList().indexOf(item);
+            const itemHeight = this.listService.virtualScrollOptions().height ?? 28;
+            const rect = this.#hostElementRef.nativeElement.getBoundingClientRect();
+            const offset = itemHeight * index - rect.height / 2;
+            asyncScheduler.schedule(() => {
+                this.virtualScrollViewport()?.scrollToOffset(offset, behavior);
+                const scrolledElement = this.#hostElementRef.nativeElement.querySelector(`[data-uid="${item.uid}"]`);
+                if (scrolledElement && focus) {
+                    scrolledElement.focus();
+                }
+            });
+        }
+    }
+    selectItem(item) {
+        const selectedItems = this.listService.selectedListItems();
+        const options = this.listService.selectableOptions();
+        if (!options.enabled) {
+            return;
+        }
+        if ((options.mode === "single" && !selectedItems.contains(item)) ||
+            (options.mode === "single" && options.toggleable) ||
+            options.mode === "multiple" ||
+            (options.mode === "single" && selectedItems.size() > 1)) {
+            this.listService.selectItem(item);
+            this.listService.highlightedItem.set(item);
+            this.listService.selectedKeysChange$.next(this.listService.selectedKeys().toArray());
+        }
+    }
+    setInitialSelectionOrFocus() {
+        if (!this.focusOnMount()) {
+            return;
+        }
+        const selectedItem = this.listService.selectedListItems().lastOrDefault();
+        if (selectedItem) {
+            this.focusToItem(selectedItem);
+            return;
+        }
+        const firstItem = this.listService
+            .viewItems()
+            .where(i => !i.header && !this.listService.isDisabled(i))
+            .firstOrDefault();
+        if (firstItem) {
+            this.focusToItem(firstItem);
+        }
+    }
+    setKeyboardEvents() {
+        fromEvent(this.#hostElementRef.nativeElement, "keydown")
+            .pipe(takeUntilDestroyed(this.#destroyRef), filter(event => event.key === "Enter" || event.key === "NumPadEnter"))
+            .subscribe((event) => {
+            const highlightedItem = this.listService.highlightedItem();
+            const selectedItem = this.listService.selectedListItems().firstOrDefault();
+            const source = { via: "keyboard", key: event.key };
+            if (highlightedItem) {
+                this.selectItem(highlightedItem);
+                this.itemSelect.emit({ item: highlightedItem, source });
+            }
+            else if (selectedItem) {
+                this.selectItem(selectedItem);
+                this.itemSelect.emit({ item: selectedItem, source });
+            }
+        });
+    }
+    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) {
+                event.preventDefault();
+            }
+        }))
+            .subscribe(event => {
+            if (isTypeaheadKey(event.key)) {
+                event.preventDefault();
+                this.#typeaheadKey$.next(event.key);
+                return;
+            }
+            this.#typeaheadKey$.next("");
+            this.handleNavigation(event.key);
+        });
+    }
+    setSubscriptions() {
+        this.setNavigationEvents();
+        this.setKeyboardEvents();
+        this.setTypeaheadSubscription();
+        this.listService.scrollToItem$
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => this.scrollToItem(event.item, event.focus));
+        this.listService.focus$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+            this.#hostElementRef.nativeElement.focus();
+            this.setInitialSelectionOrFocus();
+        });
+        fromEvent(this.#hostElementRef.nativeElement, "focus")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => {
+            const previous = event.relatedTarget;
+            if (previous && this.#hostElementRef.nativeElement.contains(previous)) {
+                return;
+            }
+            this.setInitialSelectionOrFocus();
+        });
+        fromEvent(this.#hostElementRef.nativeElement, "focusout")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => {
+            const next = event.relatedTarget;
+            if (next && this.#hostElementRef.nativeElement.contains(next)) {
+                return;
+            }
+            this.listService.highlightedItem.set(null);
+        });
+    }
+    setTypeaheadSubscription() {
+        setupTypeahead(this.#typeaheadKey$)
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(buffer => this.cycleThroughMatchedItems(buffer));
+    }
+    toggleItem(item) {
+        this.listService.highlightedItem.set(item);
+        if (!this.listService.selectableOptions().enabled) {
+            return;
+        }
+        this.selectItem(item);
+        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=\"No data\" 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=\"No data\" 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-list", imports: [
+                        FilterInputComponent,
+                        ListItemComponent,
+                        NgTemplateOutlet,
+                        ListItemDirective,
+                        PlaceholderComponent,
+                        CdkVirtualScrollViewport,
+                        CdkFixedSizeVirtualScroll,
+                        CdkVirtualForOf
+                    ], host: {
+                        "[attr.tabindex]": "hostTabIndex()",
+                        "[class]": "classes()",
+                        "[style.height]": "listHeight()",
+                        "[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=\"No data\" 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=\"No data\" 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" }]
+        }], 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 }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/list
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ListComponent, ListFooterTemplateDirective, ListGroupHeaderTemplateDirective, ListHeaderTemplateDirective, ListItem, ListItemTemplateDirective, ListNoDataTemplateDirective, ListService };
+//# sourceMappingURL=nanahoshi-mona-ui-internal-list.mjs.map