@styloviz/list-view 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StyloViz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,78 @@
+# @styloviz/list-view
+
+> Market-ready list patterns: default, checklist, nested tree, virtualized, grouped, template cards, call history and infinite scrolling.
+
+Part of the **StyloViz UI Kit** — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, `OnPush`, strongly typed, dark-mode ready.
+
+## Installation
+
+```bash
+npm install @styloviz/core @styloviz/list-view
+```
+
+Requires `@angular/core` and `@angular/common` >= 21. `@styloviz/core` is a peer dependency shared by every component. Prefer everything at once? `@styloviz/all` installs the whole free tier in one command.
+
+## Usage
+
+```ts
+import { SvListViewComponent } from '@styloviz/list-view';
+
+@Component({
+  standalone: true,
+  imports: [SvListViewComponent],
+  template: `
+    <sv-list-view [items]="items" />
+  `,
+})
+export class DemoComponent {}
+```
+
+## Inputs
+
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `ListViewItem[]` | `[]` | Items to render (label, meta, optional children/avatar/actions). |
+| `mode` | `ListViewMode` | `'default'` | Preset pattern: default, checklist, nested, card, etc. |
+| `variant` | `ListViewVariant` | `'default'` | Visual variant. |
+| `density` | `ListViewDensity` | `'comfortable'` | Row density. |
+| `selectionMode` | `ListViewSelectionMode` | `'none'` | Selection behaviour: none, single or multiple. |
+| `checkable` | `boolean` | `false` | Show checkboxes on rows. |
+| `nested` | `boolean` | `false` | Enable nested (tree) rows. |
+| `virtualized` | `boolean` | `false` | Virtualize long lists for performance. |
+| `grouped` | `boolean` | `false` | Group rows under section headers. |
+| `searchable` | `boolean` | `false` | Show a search box to filter items. |
+| `stickyGroupHeaders` | `boolean` | `true` | Keep group headers pinned while scrolling. |
+| `infiniteScroll` | `boolean` | `false` | Load more items as the user scrolls to the end. |
+| `hasMore` | `boolean` | `false` | Whether more items are available to load. |
+| `loadingMore` | `boolean` | `false` | Show a loading indicator while fetching more. |
+| `viewportHeight` | `number` | `360` | Viewport height (px) for the virtualized list. |
+| `itemHeight` | `number` | `68` | Estimated row height (px) for virtualization. |
+| `overscan` | `number` | `5` | Extra rows rendered above/below the viewport. |
+| `searchPlaceholder` | `string` | `'Search list items'` | Placeholder for the search box. |
+| `emptyMessage` | `string` | `'No items match your filters.'` | Message shown when no items match. |
+| `customClass` | `string` | `''` | Extra CSS classes for the root. |
+| `ariaLabel` | `string` | `'List view'` | Accessible label for the list. |
+| `announceActions` | `boolean` | `true` | Announce row actions to screen readers. |
+| `showQuickActions` | `boolean` | `false` | Show per-row quick actions on hover/focus. |
+| `quickActions` | `ListViewQuickAction[]` | `[]` | Per-row quick actions. |
+| `bulkActions` | `ListViewBulkAction[]` | `[]` | Bulk actions for checked rows. |
+| `enableBulkHotkeys` | `boolean` | `false` | Enable keyboard hotkeys for bulk actions. |
+| `enableRovingFocus` | `boolean` | `true` | Enable roving-tabindex keyboard navigation. |
+
+## Outputs
+
+| Output | Type | Description |
+| --- | --- | --- |
+| `itemClick` | `ListViewItemClickEvent` | Emitted with the clicked item. |
+| `checkChange` | `ListViewCheckChangeEvent` | Emitted when a row's checkbox changes. |
+| `loadMore` | `ListViewLoadMoreEvent` | Emitted when more items should be loaded (infinite scroll). |
+| `quickActionClick` | `ListViewQuickActionClickEvent` | Emitted when a quick action is clicked. |
+| `bulkActionClick` | `ListViewBulkActionClickEvent` | Emitted when a bulk action is triggered. |
+
+## Documentation
+
+Full API reference and live demos: https://styloviz.dev/docs/list-view
+
+## License
+
+MIT

package/fesm2022/styloviz-list-view.mjs

@@ -0,0 +1,471 @@
+import * as i0 from '@angular/core';
+import { input, model, output, signal, inject, ElementRef, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgClass } from '@angular/common';
+
+class SvListViewComponent {
+    /** Items to render (label, meta, optional children/avatar/actions). */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Preset pattern: default, checklist, nested, card, etc. @default 'default' */
+    mode = input('default', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Visual variant. @default 'default' */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Row density. @default 'comfortable' */
+    density = input('comfortable', ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    /** Selection behaviour: none, single or multiple. @default 'none' */
+    selectionMode = input('none', ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    /** Show checkboxes on rows. @default false */
+    checkable = input(false, ...(ngDevMode ? [{ debugName: "checkable" }] : /* istanbul ignore next */ []));
+    /** Enable nested (tree) rows. @default false */
+    nested = input(false, ...(ngDevMode ? [{ debugName: "nested" }] : /* istanbul ignore next */ []));
+    /** Virtualize long lists for performance. @default false */
+    virtualized = input(false, ...(ngDevMode ? [{ debugName: "virtualized" }] : /* istanbul ignore next */ []));
+    /** Group rows under section headers. @default false */
+    grouped = input(false, ...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
+    /** Show a search box to filter items. @default false */
+    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    /** Keep group headers pinned while scrolling. @default true */
+    stickyGroupHeaders = input(true, ...(ngDevMode ? [{ debugName: "stickyGroupHeaders" }] : /* istanbul ignore next */ []));
+    /** Load more items as the user scrolls to the end. @default false */
+    infiniteScroll = input(false, ...(ngDevMode ? [{ debugName: "infiniteScroll" }] : /* istanbul ignore next */ []));
+    /** Whether more items are available to load. @default false */
+    hasMore = input(false, ...(ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []));
+    /** Show a loading indicator while fetching more. @default false */
+    loadingMore = input(false, ...(ngDevMode ? [{ debugName: "loadingMore" }] : /* istanbul ignore next */ []));
+    /** Viewport height (px) for the virtualized list. @default 360 */
+    viewportHeight = input(360, ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
+    /** Estimated row height (px) for virtualization. @default 68 */
+    itemHeight = input(68, ...(ngDevMode ? [{ debugName: "itemHeight" }] : /* istanbul ignore next */ []));
+    /** Extra rows rendered above/below the viewport. @default 5 */
+    overscan = input(5, ...(ngDevMode ? [{ debugName: "overscan" }] : /* istanbul ignore next */ []));
+    /** Placeholder for the search box. @default 'Search list items' */
+    searchPlaceholder = input('Search list items', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    /** Message shown when no items match. @default 'No items match your filters.' */
+    emptyMessage = input('No items match your filters.', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    /** Extra CSS classes for the root. */
+    customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the list. @default 'List view' */
+    ariaLabel = input('List view', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Announce row actions to screen readers. @default true */
+    announceActions = input(true, ...(ngDevMode ? [{ debugName: "announceActions" }] : /* istanbul ignore next */ []));
+    /** Show per-row quick actions on hover/focus. @default false */
+    showQuickActions = input(false, ...(ngDevMode ? [{ debugName: "showQuickActions" }] : /* istanbul ignore next */ []));
+    /** Per-row quick actions. */
+    quickActions = input([], ...(ngDevMode ? [{ debugName: "quickActions" }] : /* istanbul ignore next */ []));
+    /** Bulk actions for checked rows. */
+    bulkActions = input([], ...(ngDevMode ? [{ debugName: "bulkActions" }] : /* istanbul ignore next */ []));
+    /** Enable keyboard hotkeys for bulk actions. @default false */
+    enableBulkHotkeys = input(false, ...(ngDevMode ? [{ debugName: "enableBulkHotkeys" }] : /* istanbul ignore next */ []));
+    /** Map of hotkey → bulk action id. */
+    bulkHotkeys = input({}, ...(ngDevMode ? [{ debugName: "bulkHotkeys" }] : /* istanbul ignore next */ []));
+    /** Enable roving-tabindex keyboard navigation. @default true */
+    enableRovingFocus = input(true, ...(ngDevMode ? [{ debugName: "enableRovingFocus" }] : /* istanbul ignore next */ []));
+    /** Selected row ids (two-way). */
+    selectedIds = model(new Set(), ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
+    /** Checked row ids (two-way). */
+    checkedIds = model(new Set(), ...(ngDevMode ? [{ debugName: "checkedIds" }] : /* istanbul ignore next */ []));
+    /** Emitted with the clicked item. */
+    itemClick = output();
+    /** Emitted with the current selection set. */
+    selectionChange = output();
+    /** Emitted when a row's checkbox changes. */
+    checkChange = output();
+    /** Emitted when more items should be loaded (infinite scroll). */
+    loadMore = output();
+    /** Emitted when a quick action is clicked. */
+    quickActionClick = output();
+    /** Emitted when a bulk action is triggered. */
+    bulkActionClick = output();
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : /* istanbul ignore next */ []));
+    host = inject((ElementRef));
+    scrollTop = signal(0, ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
+    expandedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
+    loadingGuard = signal(false, ...(ngDevMode ? [{ debugName: "loadingGuard" }] : /* istanbul ignore next */ []));
+    isCheckable = computed(() => this.checkable() || this.mode() === 'checklist', ...(ngDevMode ? [{ debugName: "isCheckable" }] : /* istanbul ignore next */ []));
+    isSelectable = computed(() => this.selectionMode() !== 'none', ...(ngDevMode ? [{ debugName: "isSelectable" }] : /* istanbul ignore next */ []));
+    selectedCount = computed(() => this.selectedIds().size, ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
+    bulkSelectedIds = computed(() => (this.isCheckable() ? this.checkedIds() : this.selectedIds()), ...(ngDevMode ? [{ debugName: "bulkSelectedIds" }] : /* istanbul ignore next */ []));
+    bulkSelectedCount = computed(() => this.bulkSelectedIds().size, ...(ngDevMode ? [{ debugName: "bulkSelectedCount" }] : /* istanbul ignore next */ []));
+    hasQuickActions = computed(() => this.showQuickActions() && this.quickActions().length > 0, ...(ngDevMode ? [{ debugName: "hasQuickActions" }] : /* istanbul ignore next */ []));
+    isNested = computed(() => this.nested(), ...(ngDevMode ? [{ debugName: "isNested" }] : /* istanbul ignore next */ []));
+    isVirtualized = computed(() => this.virtualized() || this.mode() === 'virtualization', ...(ngDevMode ? [{ debugName: "isVirtualized" }] : /* istanbul ignore next */ []));
+    isGrouped = computed(() => this.grouped(), ...(ngDevMode ? [{ debugName: "isGrouped" }] : /* istanbul ignore next */ []));
+    isTemplateMode = computed(() => this.mode() === 'template', ...(ngDevMode ? [{ debugName: "isTemplateMode" }] : /* istanbul ignore next */ []));
+    isCallHistoryMode = computed(() => this.mode() === 'call-history', ...(ngDevMode ? [{ debugName: "isCallHistoryMode" }] : /* istanbul ignore next */ []));
+    isScrollingMode = computed(() => false, ...(ngDevMode ? [{ debugName: "isScrollingMode" }] : /* istanbul ignore next */ []));
+    filteredItems = computed(() => {
+        const q = this.query().trim().toLowerCase();
+        const source = this.items();
+        if (!q)
+            return source;
+        if (this.isNested()) {
+            return this.filterNested(source, q);
+        }
+        return source.filter(item => this.itemMatches(item, q));
+    }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+    flattenedNestedItems = computed(() => {
+        if (!this.isNested())
+            return [];
+        return this.flattenTree(this.filteredItems(), 0);
+    }, ...(ngDevMode ? [{ debugName: "flattenedNestedItems" }] : /* istanbul ignore next */ []));
+    groupedItems = computed(() => {
+        if (!this.isGrouped())
+            return [];
+        const map = new Map();
+        for (const item of this.filteredItems()) {
+            const key = item.group?.trim() || 'Ungrouped';
+            const groupItems = map.get(key) ?? [];
+            groupItems.push(item);
+            map.set(key, groupItems);
+        }
+        return [...map.entries()].map(([label, items]) => ({ label, items }));
+    }, ...(ngDevMode ? [{ debugName: "groupedItems" }] : /* istanbul ignore next */ []));
+    flatItems = computed(() => {
+        if (this.isNested())
+            return [];
+        if (this.isGrouped())
+            return this.groupedItems().flatMap(g => g.items);
+        return this.filteredItems();
+    }, ...(ngDevMode ? [{ debugName: "flatItems" }] : /* istanbul ignore next */ []));
+    totalVirtualHeight = computed(() => this.flatItems().length * this.itemHeight(), ...(ngDevMode ? [{ debugName: "totalVirtualHeight" }] : /* istanbul ignore next */ []));
+    virtualRange = computed(() => {
+        if (!this.isVirtualized() || this.isNested()) {
+            return { start: 0, end: this.flatItems().length };
+        }
+        const rowHeight = Math.max(1, this.itemHeight());
+        const total = this.flatItems().length;
+        const visibleRows = Math.ceil(this.viewportHeight() / rowHeight);
+        const start = Math.max(0, Math.floor(this.scrollTop() / rowHeight) - this.overscan());
+        const end = Math.min(total, start + visibleRows + this.overscan() * 2);
+        return { start, end };
+    }, ...(ngDevMode ? [{ debugName: "virtualRange" }] : /* istanbul ignore next */ []));
+    virtualItems = computed(() => {
+        const range = this.virtualRange();
+        return this.flatItems().slice(range.start, range.end);
+    }, ...(ngDevMode ? [{ debugName: "virtualItems" }] : /* istanbul ignore next */ []));
+    topSpacerHeight = computed(() => this.virtualRange().start * this.itemHeight(), ...(ngDevMode ? [{ debugName: "topSpacerHeight" }] : /* istanbul ignore next */ []));
+    bottomSpacerHeight = computed(() => {
+        const range = this.virtualRange();
+        const trailing = Math.max(0, this.flatItems().length - range.end);
+        return trailing * this.itemHeight();
+    }, ...(ngDevMode ? [{ debugName: "bottomSpacerHeight" }] : /* istanbul ignore next */ []));
+    renderItems = computed(() => this.isVirtualized() && !this.isNested() ? this.virtualItems() : this.flatItems(), ...(ngDevMode ? [{ debugName: "renderItems" }] : /* istanbul ignore next */ []));
+    allVisibleIds = computed(() => {
+        if (this.isNested()) {
+            return this.flattenedNestedItems().map(n => n.item.id);
+        }
+        return this.flatItems().map(item => item.id);
+    }, ...(ngDevMode ? [{ debugName: "allVisibleIds" }] : /* istanbul ignore next */ []));
+    allChecked = computed(() => {
+        const ids = this.allVisibleIds();
+        if (!ids.length)
+            return false;
+        const checked = this.checkedIds();
+        return ids.every(id => checked.has(id));
+    }, ...(ngDevMode ? [{ debugName: "allChecked" }] : /* istanbul ignore next */ []));
+    checkedCount = computed(() => this.checkedIds().size, ...(ngDevMode ? [{ debugName: "checkedCount" }] : /* istanbul ignore next */ []));
+    visibleItemCount = computed(() => {
+        if (this.isNested()) {
+            return this.countTreeItems(this.filteredItems());
+        }
+        return this.flatItems().length;
+    }, ...(ngDevMode ? [{ debugName: "visibleItemCount" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => {
+        const base = 'rounded-2xl border bg-white/90 shadow-sm backdrop-blur-sm dark:bg-gray-900/80 dark:shadow-none';
+        const variantMap = {
+            default: 'border-gray-200/80 dark:border-gray-700/70',
+            soft: 'border-primary-100/80 bg-primary-50/40 dark:border-primary-900/50 dark:bg-primary-950/25',
+            outlined: 'border-2 border-gray-300 dark:border-gray-600',
+        };
+        return [base, variantMap[this.variant()], this.customClass()].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    rowPadding = computed(() => {
+        const densityMap = {
+            compact: 'px-3 py-2',
+            comfortable: 'px-4 py-3',
+            spacious: 'px-5 py-4',
+        };
+        return densityMap[this.density()];
+    }, ...(ngDevMode ? [{ debugName: "rowPadding" }] : /* istanbul ignore next */ []));
+    onSearchInput(value) {
+        this.query.set(value);
+    }
+    onContainerScroll(event) {
+        const target = event.target;
+        this.scrollTop.set(target.scrollTop);
+        if (!this.infiniteScroll() || !this.hasMore() || this.loadingMore() || this.loadingGuard()) {
+            return;
+        }
+        const threshold = 100;
+        const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - threshold;
+        if (!nearBottom)
+            return;
+        this.loadingGuard.set(true);
+        this.loadMore.emit({ visibleCount: this.renderItems().length, totalCount: this.flatItems().length });
+        queueMicrotask(() => this.loadingGuard.set(false));
+    }
+    onItemActivate(item) {
+        if (item.disabled)
+            return;
+        this.itemClick.emit({ item });
+        if (this.selectionMode() === 'single') {
+            const next = new Set([item.id]);
+            this.selectedIds.set(next);
+            this.selectionChange.emit(next);
+            this.announce(`Selected ${item.title}.`);
+            return;
+        }
+        if (this.selectionMode() === 'multiple') {
+            const next = new Set(this.selectedIds());
+            if (next.has(item.id))
+                next.delete(item.id);
+            else
+                next.add(item.id);
+            this.selectedIds.set(next);
+            this.selectionChange.emit(next);
+            this.announce(next.has(item.id) ? `Selected ${item.title}.` : `Deselected ${item.title}.`);
+        }
+    }
+    toggleCheck(item, checked) {
+        if (item.disabled)
+            return;
+        const next = new Set(this.checkedIds());
+        if (checked)
+            next.add(item.id);
+        else
+            next.delete(item.id);
+        this.checkedIds.set(next);
+        this.checkChange.emit({ item, checked });
+        this.announce(checked ? `Checked ${item.title}.` : `Unchecked ${item.title}.`);
+    }
+    toggleAllChecks(checked) {
+        const next = checked ? new Set(this.allVisibleIds()) : new Set();
+        this.checkedIds.set(next);
+        this.announce(checked ? `Selected all ${next.size} visible items.` : 'Cleared all selected items.');
+    }
+    toggleExpand(item) {
+        if (!item.children?.length)
+            return;
+        const next = new Set(this.expandedIds());
+        if (next.has(item.id))
+            next.delete(item.id);
+        else
+            next.add(item.id);
+        this.expandedIds.set(next);
+    }
+    isExpanded(item) {
+        return this.expandedIds().has(item.id);
+    }
+    isSelected(item) {
+        return this.selectedIds().has(item.id);
+    }
+    isChecked(item) {
+        return this.checkedIds().has(item.id);
+    }
+    toggleSelected(item, checked) {
+        if (item.disabled || this.selectionMode() === 'none') {
+            return;
+        }
+        if (this.selectionMode() === 'single') {
+            const next = checked ? new Set([item.id]) : new Set();
+            this.selectedIds.set(next);
+            this.selectionChange.emit(next);
+            return;
+        }
+        const next = new Set(this.selectedIds());
+        if (checked)
+            next.add(item.id);
+        else
+            next.delete(item.id);
+        this.selectedIds.set(next);
+        this.selectionChange.emit(next);
+        this.announce(checked ? `Selected ${item.title}.` : `Deselected ${item.title}.`);
+    }
+    onQuickAction(item, action) {
+        if (item.disabled)
+            return;
+        this.quickActionClick.emit({ item, action });
+        this.announce(`${action.label} action triggered for ${item.title}.`);
+    }
+    onBulkAction(action) {
+        const selected = new Set(this.bulkSelectedIds());
+        this.bulkActionClick.emit({ action, selectedIds: selected });
+        this.announce(`${action.label} applied to ${selected.size} selected item${selected.size === 1 ? '' : 's'}.`);
+    }
+    onRootKeydown(event) {
+        if (event.metaKey || event.ctrlKey || event.altKey) {
+            return;
+        }
+        const target = event.target;
+        const tag = target?.tagName.toLowerCase();
+        if (tag === 'input' || tag === 'textarea' || tag === 'select' || target?.isContentEditable) {
+            return;
+        }
+        if (this.enableRovingFocus() && this.handleRovingFocusKey(event, target)) {
+            return;
+        }
+        if (!this.enableBulkHotkeys() || this.bulkSelectedCount() === 0 || this.bulkActions().length === 0) {
+            return;
+        }
+        const key = event.key.toLowerCase();
+        const explicit = this.bulkHotkeys()[key];
+        const fallbackMap = {
+            delete: 'delete',
+            backspace: 'delete',
+            a: 'archive',
+            r: 'mark-read',
+        };
+        const actionId = explicit ?? fallbackMap[key];
+        if (!actionId) {
+            return;
+        }
+        const action = this.bulkActions().find(item => item.id === actionId);
+        if (!action) {
+            return;
+        }
+        event.preventDefault();
+        this.onBulkAction(action);
+    }
+    handleRovingFocusKey(event, target) {
+        const key = event.key;
+        if (key !== 'ArrowDown' && key !== 'ArrowUp' && key !== 'Home' && key !== 'End') {
+            return false;
+        }
+        const rowButtons = this.rowButtons();
+        if (!rowButtons.length) {
+            return false;
+        }
+        const current = target?.closest('[data-lv-row-btn="1"]');
+        const currentIndex = current ? rowButtons.indexOf(current) : -1;
+        let nextIndex = 0;
+        if (key === 'ArrowDown') {
+            nextIndex = currentIndex < 0 ? 0 : Math.min(rowButtons.length - 1, currentIndex + 1);
+        }
+        else if (key === 'ArrowUp') {
+            nextIndex = currentIndex < 0 ? rowButtons.length - 1 : Math.max(0, currentIndex - 1);
+        }
+        else if (key === 'Home') {
+            nextIndex = 0;
+        }
+        else {
+            nextIndex = rowButtons.length - 1;
+        }
+        event.preventDefault();
+        rowButtons[nextIndex].focus();
+        return true;
+    }
+    rowButtons() {
+        const hostEl = this.host.nativeElement;
+        return Array.from(hostEl.querySelectorAll('button[data-lv-row-btn="1"]:not([disabled])'));
+    }
+    trackById(_, item) {
+        return item.id;
+    }
+    trackByNested(_, node) {
+        return node.item.id;
+    }
+    callTypeIcon(type) {
+        if (type === 'incoming')
+            return 'M5 12l5-5m0 0l5 5m-5-5v12';
+        if (type === 'outgoing')
+            return 'M19 12l-5 5m0 0l-5-5m5 5V5';
+        if (type === 'video')
+            return 'M15 10l4.553-2.276A1 1 0 0 1 21 8.618v6.764a1 1 0 0 1-1.447.894L15 14';
+        return 'M6 18L18 6M6 6l12 12';
+    }
+    callTypeClass(type) {
+        if (type === 'incoming')
+            return 'text-emerald-600 dark:text-emerald-400';
+        if (type === 'outgoing')
+            return 'text-primary-600 dark:text-primary-400';
+        if (type === 'video')
+            return 'text-violet-600 dark:text-violet-400';
+        return 'text-red-600 dark:text-red-400';
+    }
+    initials(item) {
+        const source = item.title.trim().split(/\s+/).slice(0, 2).map(part => part[0] ?? '').join('');
+        return source.toUpperCase() || 'NA';
+    }
+    nestedIndent(depth) {
+        const baseIndent = 0.5;
+        return `${baseIndent + depth * 1.2}rem`;
+    }
+    actionToneClass(tone) {
+        if (tone === 'primary') {
+            return 'border-primary-200 bg-primary-50 text-primary-700 hover:bg-primary-100 dark:border-primary-900/60 dark:bg-primary-900/30 dark:text-primary-300 dark:hover:bg-primary-900/45';
+        }
+        if (tone === 'danger') {
+            return 'border-red-200 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-900/60 dark:bg-red-900/30 dark:text-red-300 dark:hover:bg-red-900/45';
+        }
+        return 'border-gray-200 bg-white text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900/60 dark:text-gray-300 dark:hover:bg-gray-800';
+    }
+    announce(message) {
+        if (!this.announceActions()) {
+            return;
+        }
+        this.liveAnnouncement.set('');
+        queueMicrotask(() => this.liveAnnouncement.set(message));
+    }
+    itemMatches(item, query) {
+        const haystack = [
+            item.title,
+            item.subtitle,
+            item.description,
+            item.group,
+            item.badge,
+            item.meta,
+            item.timestamp,
+            item.duration,
+            item.amount,
+            ...(item.tags ?? []),
+        ]
+            .filter(Boolean)
+            .join(' ')
+            .toLowerCase();
+        return haystack.includes(query);
+    }
+    filterNested(items, query) {
+        const result = [];
+        for (const item of items) {
+            const filteredChildren = item.children?.length ? this.filterNested(item.children, query) : [];
+            if (this.itemMatches(item, query) || filteredChildren.length > 0) {
+                result.push({ ...item, children: filteredChildren });
+            }
+        }
+        return result;
+    }
+    flattenTree(items, depth) {
+        const rows = [];
+        for (const item of items) {
+            const hasChildren = Boolean(item.children?.length);
+            rows.push({ item, depth, hasChildren });
+            if (hasChildren && this.expandedIds().has(item.id)) {
+                rows.push(...this.flattenTree(item.children ?? [], depth + 1));
+            }
+        }
+        return rows;
+    }
+    countTreeItems(items) {
+        let total = 0;
+        for (const item of items) {
+            total += 1;
+            if (item.children?.length) {
+                total += this.countTreeItems(item.children);
+            }
+        }
+        return total;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvListViewComponent, isStandalone: true, selector: "sv-list-view", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null }, virtualized: { classPropertyName: "virtualized", publicName: "virtualized", isSignal: true, isRequired: false, transformFunction: null }, grouped: { classPropertyName: "grouped", publicName: "grouped", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, stickyGroupHeaders: { classPropertyName: "stickyGroupHeaders", publicName: "stickyGroupHeaders", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, loadingMore: { classPropertyName: "loadingMore", publicName: "loadingMore", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, announceActions: { classPropertyName: "announceActions", publicName: "announceActions", isSignal: true, isRequired: false, transformFunction: null }, showQuickActions: { classPropertyName: "showQuickActions", publicName: "showQuickActions", isSignal: true, isRequired: false, transformFunction: null }, quickActions: { classPropertyName: "quickActions", publicName: "quickActions", isSignal: true, isRequired: false, transformFunction: null }, bulkActions: { classPropertyName: "bulkActions", publicName: "bulkActions", isSignal: true, isRequired: false, transformFunction: null }, enableBulkHotkeys: { classPropertyName: "enableBulkHotkeys", publicName: "enableBulkHotkeys", isSignal: true, isRequired: false, transformFunction: null }, bulkHotkeys: { classPropertyName: "bulkHotkeys", publicName: "bulkHotkeys", isSignal: true, isRequired: false, transformFunction: null }, enableRovingFocus: { classPropertyName: "enableRovingFocus", publicName: "enableRovingFocus", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, checkedIds: { classPropertyName: "checkedIds", publicName: "checkedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIds: "selectedIdsChange", checkedIds: "checkedIdsChange", itemClick: "itemClick", selectionChange: "selectionChange", checkChange: "checkChange", loadMore: "loadMore", quickActionClick: "quickActionClick", bulkActionClick: "bulkActionClick" }, ngImport: i0, template: "<div\n  [ngClass]=\"rootClasses()\"\n  class=\"focus-within:ring-2 focus-within:ring-primary-500/30\"\n  role=\"region\"\n  [attr.aria-label]=\"ariaLabel()\"\n  tabindex=\"0\"\n  (keydown)=\"onRootKeydown($event)\"\n>\n  <p class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveAnnouncement() }}</p>\n\n  <div class=\"flex flex-wrap items-center justify-between gap-2 border-b border-gray-200/80 px-4 py-3 dark:border-gray-700/70\">\n    @if (searchable() || mode() === 'scrolling' || mode() === 'virtualization') {\n      <div class=\"relative min-w-[220px] flex-1\">\n        <svg\n          class=\"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"11\" cy=\"11\" r=\"8\" />\n          <path d=\"M21 21l-4.3-4.3\" />\n        </svg>\n\n        <input\n          type=\"search\"\n          [value]=\"query()\"\n          (input)=\"onSearchInput(($any($event.target)).value)\"\n          [placeholder]=\"searchPlaceholder()\"\n          class=\"h-10 w-full rounded-xl border border-gray-200 bg-white pl-9 pr-3 text-sm text-gray-700 placeholder:text-gray-400 focus:border-primary-400 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100\"\n        />\n      </div>\n    }\n\n    @if (isCheckable()) {\n      <label class=\"inline-flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"allChecked()\"\n          (change)=\"toggleAllChecks(($any($event.target)).checked)\"\n          class=\"h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n        />\n        Select all\n      </label>\n    }\n\n    <span class=\"rounded-full bg-gray-100 px-2.5 py-1 text-xs font-semibold text-gray-600 dark:bg-gray-800 dark:text-gray-300\">\n      {{ visibleItemCount() }} items\n    </span>\n\n    @if (isSelectable()) {\n      <span class=\"rounded-full bg-primary-100 px-2.5 py-1 text-xs font-semibold text-primary-700 dark:bg-primary-900/35 dark:text-primary-300\">\n        {{ selectedCount() }} selected\n      </span>\n    }\n  </div>\n\n  @if (bulkActions().length > 0 && bulkSelectedCount() > 0) {\n    <div class=\"sticky top-0 z-20 flex flex-wrap items-center gap-2 border-b border-primary-200/80 bg-primary-50/90 px-4 py-2 backdrop-blur dark:border-primary-900/40 dark:bg-primary-950/70\">\n      <span class=\"text-xs font-semibold text-primary-700 dark:text-primary-300\">{{ bulkSelectedCount() }} selected</span>\n      @for (action of bulkActions(); track action.id) {\n        <button\n          type=\"button\"\n          (click)=\"onBulkAction(action)\"\n          [ngClass]=\"[\n            'inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-xs font-medium transition-colors',\n            actionToneClass(action.tone)\n          ]\"\n        >\n          @if (action.iconPath) {\n            <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path [attr.d]=\"action.iconPath\" />\n            </svg>\n          }\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  }\n\n  @if (isNested()) {\n    <div\n      class=\"max-h-[420px] overflow-auto\"\n      [style.height.px]=\"isVirtualized() ? viewportHeight() : null\"\n      (scroll)=\"onContainerScroll($event)\"\n    >\n      @if (flattenedNestedItems().length === 0) {\n        <div class=\"px-4 py-10 text-center text-sm text-gray-500 dark:text-gray-400\">{{ emptyMessage() }}</div>\n      } @else {\n        <div class=\"pt-2 divide-y divide-gray-100 dark:divide-gray-800\">\n          @for (node of flattenedNestedItems(); track trackByNested($index, node)) {\n            <div\n              class=\"flex items-start gap-2\"\n              [ngClass]=\"[\n                rowPadding(),\n                node.item.disabled ? 'opacity-50' : 'hover:bg-gray-50/70 dark:hover:bg-gray-800/60',\n                isSelected(node.item) ? 'bg-primary-50/80 dark:bg-primary-950/35' : ''\n              ]\"\n              [style.padding-left]=\"nestedIndent(node.depth)\"\n            >\n              @if (node.hasChildren) {\n                <button\n                  type=\"button\"\n                  class=\"mt-1 inline-flex h-6 w-6 items-center justify-center rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800\"\n                  (click)=\"toggleExpand(node.item)\"\n                  [attr.aria-label]=\"isExpanded(node.item) ? 'Collapse node' : 'Expand node'\"\n                >\n                  <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n                    @if (isExpanded(node.item)) {\n                      <path d=\"M19 12H5\" />\n                    } @else {\n                      <path d=\"M12 5v14M5 12h14\" />\n                    }\n                  </svg>\n                </button>\n              } @else {\n                <span class=\"mt-1 h-6 w-6\"></span>\n              }\n\n              @if (isCheckable()) {\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isChecked(node.item)\"\n                  (change)=\"toggleCheck(node.item, ($any($event.target)).checked)\"\n                  [disabled]=\"node.item.disabled\"\n                  class=\"mt-1.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                />\n              }\n\n              @if (!isCheckable() && isSelectable()) {\n                <input\n                  [type]=\"selectionMode() === 'single' ? 'radio' : 'checkbox'\"\n                  name=\"list-view-select-nested\"\n                  [checked]=\"isSelected(node.item)\"\n                  (change)=\"toggleSelected(node.item, ($any($event.target)).checked)\"\n                  [disabled]=\"node.item.disabled\"\n                  class=\"mt-1.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                />\n              }\n\n              <button\n                type=\"button\"\n                class=\"min-w-0 flex-1 text-left\"\n                data-lv-row-btn=\"1\"\n                [disabled]=\"node.item.disabled\"\n                (click)=\"onItemActivate(node.item)\"\n              >\n                <p class=\"truncate text-sm font-semibold text-gray-900 dark:text-gray-100\">{{ node.item.title }}</p>\n                @if (node.item.subtitle || node.item.description) {\n                  <p class=\"mt-0.5 truncate text-xs text-gray-500 dark:text-gray-400\">\n                    {{ node.item.subtitle || node.item.description }}\n                  </p>\n                }\n              </button>\n\n              @if (node.item.badge) {\n                <span class=\"rounded-full bg-primary-100 px-2 py-0.5 text-[11px] font-semibold text-primary-700 dark:bg-primary-900/35 dark:text-primary-300\">\n                  {{ node.item.badge }}\n                </span>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  } @else if (isGrouped()) {\n    <div class=\"max-h-[420px] overflow-auto\" (scroll)=\"onContainerScroll($event)\">\n      @if (groupedItems().length === 0) {\n        <div class=\"px-4 py-10 text-center text-sm text-gray-500 dark:text-gray-400\">{{ emptyMessage() }}</div>\n      } @else {\n        <div>\n          @for (group of groupedItems(); track group.label) {\n            <section>\n              <header\n                [ngClass]=\"stickyGroupHeaders() ? 'sticky top-0 z-10 bg-gray-50/90 dark:bg-gray-950/90 backdrop-blur' : 'bg-gray-50 dark:bg-gray-950/70'\"\n                class=\"border-y border-gray-200/70 px-4 py-2 text-xs font-semibold uppercase tracking-[0.12em] text-gray-500 dark:border-gray-700/80 dark:text-gray-400\"\n              >\n                {{ group.label }}\n              </header>\n\n              @for (item of group.items; track trackById($index, item)) {\n                <div\n                  [ngClass]=\"[\n                    rowPadding(),\n                    'flex items-start gap-3 border-b border-gray-100/80 dark:border-gray-800',\n                    item.unread ? 'bg-primary-50/45 dark:bg-primary-950/25' : '',\n                    item.disabled ? 'opacity-50' : 'hover:bg-gray-50/70 dark:hover:bg-gray-800/55'\n                  ]\"\n                >\n                  <button type=\"button\" class=\"min-w-0 flex-1 text-left\" data-lv-row-btn=\"1\" [disabled]=\"item.disabled\" (click)=\"onItemActivate(item)\">\n                    <div class=\"flex items-center justify-between gap-2\">\n                      <p class=\"truncate text-sm font-semibold text-gray-900 dark:text-gray-100\">{{ item.title }}</p>\n                      @if (item.meta) {\n                        <span class=\"shrink-0 text-xs text-gray-500 dark:text-gray-400\">{{ item.meta }}</span>\n                      }\n                    </div>\n                    @if (item.subtitle || item.description) {\n                      <p class=\"mt-1 text-xs text-gray-500 dark:text-gray-400\">{{ item.subtitle || item.description }}</p>\n                    }\n                  </button>\n                </div>\n              }\n            </section>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <div\n      class=\"overflow-auto\"\n      [style.height.px]=\"(isVirtualized() || isScrollingMode()) ? viewportHeight() : null\"\n      [style.max-height.px]=\"!isVirtualized() && !isScrollingMode() ? viewportHeight() : null\"\n      (scroll)=\"onContainerScroll($event)\"\n    >\n      @if (renderItems().length === 0) {\n        <div class=\"px-4 py-10 text-center text-sm text-gray-500 dark:text-gray-400\">{{ emptyMessage() }}</div>\n      } @else {\n        @if (isVirtualized()) {\n          <div [style.height.px]=\"totalVirtualHeight()\" class=\"relative\">\n            <div [style.height.px]=\"topSpacerHeight()\"></div>\n\n            @for (item of renderItems(); track trackById($index, item)) {\n              <div\n                [ngClass]=\"[\n                  rowPadding(),\n                  'flex items-start gap-3 border-b border-gray-100/80 dark:border-gray-800',\n                  item.unread ? 'bg-primary-50/45 dark:bg-primary-950/25' : '',\n                  isSelected(item) ? 'bg-primary-100/60 dark:bg-primary-900/25' : '',\n                  item.disabled ? 'opacity-50' : 'hover:bg-gray-50/70 dark:hover:bg-gray-800/55'\n                ]\"\n                [style.height.px]=\"itemHeight()\"\n              >\n                @if (isCheckable()) {\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isChecked(item)\"\n                    (change)=\"toggleCheck(item, ($any($event.target)).checked)\"\n                    [disabled]=\"item.disabled\"\n                    class=\"mt-1 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                  />\n                }\n\n                @if (!isCheckable() && isSelectable()) {\n                  <input\n                    [type]=\"selectionMode() === 'single' ? 'radio' : 'checkbox'\"\n                    name=\"list-view-select\"\n                    [checked]=\"isSelected(item)\"\n                    (change)=\"toggleSelected(item, ($any($event.target)).checked)\"\n                    [disabled]=\"item.disabled\"\n                    class=\"mt-1 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                  />\n                }\n\n                <button type=\"button\" class=\"min-w-0 flex-1 text-left\" data-lv-row-btn=\"1\" [disabled]=\"item.disabled\" (click)=\"onItemActivate(item)\">\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <p class=\"truncate text-sm font-semibold text-gray-900 dark:text-gray-100\">{{ item.title }}</p>\n                    @if (item.meta || item.timestamp) {\n                      <span class=\"shrink-0 text-xs text-gray-500 dark:text-gray-400\">{{ item.meta || item.timestamp }}</span>\n                    }\n                  </div>\n                  @if (item.subtitle || item.description) {\n                    <p class=\"mt-1 truncate text-xs text-gray-500 dark:text-gray-400\">{{ item.subtitle || item.description }}</p>\n                  }\n                </button>\n              </div>\n            }\n\n            <div [style.height.px]=\"bottomSpacerHeight()\"></div>\n          </div>\n        } @else {\n          <div class=\"divide-y divide-gray-100 dark:divide-gray-800\">\n            @for (item of renderItems(); track trackById($index, item)) {\n              <div\n                [ngClass]=\"[\n                  rowPadding(),\n                  'flex items-start gap-3',\n                  item.unread ? 'bg-primary-50/45 dark:bg-primary-950/25' : '',\n                  isSelected(item) ? 'bg-primary-100/60 dark:bg-primary-900/25' : '',\n                  item.disabled ? 'opacity-50' : 'hover:bg-gray-50/70 dark:hover:bg-gray-800/55'\n                ]\"\n              >\n                @if (isCheckable()) {\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isChecked(item)\"\n                    (change)=\"toggleCheck(item, ($any($event.target)).checked)\"\n                    [disabled]=\"item.disabled\"\n                    class=\"mt-1 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                  />\n                }\n\n                @if (!isCheckable() && isSelectable()) {\n                  <input\n                    [type]=\"selectionMode() === 'single' ? 'radio' : 'checkbox'\"\n                    name=\"list-view-select\"\n                    [checked]=\"isSelected(item)\"\n                    (change)=\"toggleSelected(item, ($any($event.target)).checked)\"\n                    [disabled]=\"item.disabled\"\n                    class=\"mt-1 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                  />\n                }\n\n                @if (isCallHistoryMode()) {\n                  <span [ngClass]=\"['mt-0.5 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-800', callTypeClass(item.callType)]\">\n                    <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                      <path [attr.d]=\"callTypeIcon(item.callType)\" />\n                    </svg>\n                  </span>\n                } @else if (item.avatarUrl) {\n                  <img [src]=\"item.avatarUrl\" [alt]=\"item.title\" class=\"h-9 w-9 rounded-xl object-cover\" loading=\"lazy\" />\n                } @else {\n                  <span class=\"inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gray-100 text-xs font-bold text-gray-600 dark:bg-gray-800 dark:text-gray-300\">\n                    {{ initials(item) }}\n                  </span>\n                }\n\n                <button type=\"button\" class=\"min-w-0 flex-1 text-left\" data-lv-row-btn=\"1\" [disabled]=\"item.disabled\" (click)=\"onItemActivate(item)\">\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <p class=\"truncate text-sm font-semibold text-gray-900 dark:text-gray-100\">{{ item.title }}</p>\n                    @if (item.meta || item.timestamp) {\n                      <span class=\"shrink-0 text-xs text-gray-500 dark:text-gray-400\">{{ item.meta || item.timestamp }}</span>\n                    }\n                  </div>\n\n                  @if (isTemplateMode()) {\n                    @if (item.description) {\n                      <p class=\"mt-1 text-xs text-gray-500 dark:text-gray-400\">{{ item.description }}</p>\n                    }\n                    @if (item.tags?.length) {\n                      <div class=\"mt-2 flex flex-wrap gap-1.5\">\n                        @for (tag of item.tags; track tag) {\n                          <span class=\"rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-300\">\n                            {{ tag }}\n                          </span>\n                        }\n                      </div>\n                    }\n                  } @else {\n                    @if (item.subtitle || item.description) {\n                      <p class=\"mt-1 truncate text-xs text-gray-500 dark:text-gray-400\">{{ item.subtitle || item.description }}</p>\n                    }\n                  }\n                </button>\n\n                <div class=\"flex shrink-0 flex-col items-end gap-1.5\">\n                  @if (item.badge) {\n                    <span class=\"rounded-full bg-primary-100 px-2 py-0.5 text-[11px] font-semibold text-primary-700 dark:bg-primary-900/35 dark:text-primary-300\">\n                      {{ item.badge }}\n                    </span>\n                  }\n                  @if (item.duration || item.amount) {\n                    <span class=\"text-xs text-gray-500 dark:text-gray-400\">{{ item.duration || item.amount }}</span>\n                  }\n                </div>\n\n                @if (hasQuickActions()) {\n                  <div class=\"hidden shrink-0 items-center gap-1 sm:flex\">\n                    @for (action of quickActions(); track action.id) {\n                      <button\n                        type=\"button\"\n                        (click)=\"onQuickAction(item, action); $event.stopPropagation()\"\n                        [ngClass]=\"[\n                          'inline-flex items-center gap-1 rounded-lg border px-2 py-1 text-[11px] font-medium transition-colors',\n                          actionToneClass(action.tone)\n                        ]\"\n                        [attr.aria-label]=\"action.label\"\n                      >\n                        @if (action.iconPath) {\n                          <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n                            <path [attr.d]=\"action.iconPath\" />\n                          </svg>\n                        }\n                        {{ action.label }}\n                      </button>\n                    }\n                  </div>\n                }\n              </div>\n\n              @if (hasQuickActions()) {\n                <div class=\"mt-2 flex flex-wrap gap-1 sm:hidden\">\n                  @for (action of quickActions(); track action.id) {\n                    <button\n                      type=\"button\"\n                      (click)=\"onQuickAction(item, action); $event.stopPropagation()\"\n                      [ngClass]=\"[\n                        'inline-flex items-center gap-1 rounded-lg border px-2 py-1 text-[11px] font-medium transition-colors',\n                        actionToneClass(action.tone)\n                      ]\"\n                      [attr.aria-label]=\"action.label\"\n                    >\n                      @if (action.iconPath) {\n                        <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n                          <path [attr.d]=\"action.iconPath\" />\n                        </svg>\n                      }\n                      {{ action.label }}\n                    </button>\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n      }\n\n      @if ((isScrollingMode() || infiniteScroll()) && (loadingMore() || hasMore())) {\n        <div class=\"border-t border-gray-200/70 px-4 py-3 text-center dark:border-gray-700/80\">\n          @if (loadingMore()) {\n            <span class=\"inline-flex items-center gap-2 text-xs font-medium text-gray-500 dark:text-gray-400\">\n              <svg class=\"h-4 w-4 animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n                <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.2\"></circle>\n                <path d=\"M12 3a9 9 0 0 1 9 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n              </svg>\n              Loading more items...\n            </span>\n          } @else {\n            <span class=\"text-xs text-gray-500 dark:text-gray-400\">Scroll to load more</span>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (isCheckable()) {\n    <div class=\"border-t border-gray-200/80 px-4 py-2 text-xs text-gray-500 dark:border-gray-700/70 dark:text-gray-400\">\n      {{ checkedCount() }} checked\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvListViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sv-list-view', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [ngClass]=\"rootClasses()\"\n  class=\"focus-within:ring-2 focus-within:ring-primary-500/30\"\n  role=\"region\"\n  [attr.aria-label]=\"ariaLabel()\"\n  tabindex=\"0\"\n  (keydown)=\"onRootKeydown($event)\"\n>\n  <p class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveAnnouncement() }}</p>\n\n  <div class=\"flex flex-wrap items-center justify-between gap-2 border-b border-gray-200/80 px-4 py-3 dark:border-gray-700/70\">\n    @if (searchable() || mode() === 'scrolling' || mode() === 'virtualization') {\n      <div class=\"relative min-w-[220px] flex-1\">\n        <svg\n          class=\"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"11\" cy=\"11\" r=\"8\" />\n          <path d=\"M21 21l-4.3-4.3\" />\n        </svg>\n\n        <input\n          type=\"search\"\n          [value]=\"query()\"\n          (input)=\"onSearchInput(($any($event.target)).value)\"\n          [placeholder]=\"searchPlaceholder()\"\n          class=\"h-10 w-full rounded-xl border border-gray-200 bg-white pl-9 pr-3 text-sm text-gray-700 placeholder:text-gray-400 focus:border-primary-400 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100\"\n        />\n      </div>\n    }\n\n    @if (isCheckable()) {\n      <label class=\"inline-flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"allChecked()\"\n          (change)=\"toggleAllChecks(($any($event.target)).checked)\"\n          class=\"h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n        />\n        Select all\n      </label>\n    }\n\n    <span class=\"rounded-full bg-gray-100 px-2.5 py-1 text-xs font-semibold text-gray-600 dark:bg-gray-800 dark:text-gray-300\">\n      {{ visibleItemCount() }} items\n    </span>\n\n    @if (isSelectable()) {\n      <span class=\"rounded-full bg-primary-100 px-2.5 py-1 text-xs font-semibold text-primary-700 dark:bg-primary-900/35 dark:text-primary-300\">\n        {{ selectedCount() }} selected\n      </span>\n    }\n  </div>\n\n  @if (bulkActions().length > 0 && bulkSelectedCount() > 0) {\n    <div class=\"sticky top-0 z-20 flex flex-wrap items-center gap-2 border-b border-primary-200/80 bg-primary-50/90 px-4 py-2 backdrop-blur dark:border-primary-900/40 dark:bg-primary-950/70\">\n      <span class=\"text-xs font-semibold text-primary-700 dark:text-primary-300\">{{ bulkSelectedCount() }} selected</span>\n      @for (action of bulkActions(); track action.id) {\n        <button\n          type=\"button\"\n          (click)=\"onBulkAction(action)\"\n          [ngClass]=\"[\n            'inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-xs font-medium transition-colors',\n            actionToneClass(action.tone)\n          ]\"\n        >\n          @if (action.iconPath) {\n            <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path [attr.d]=\"action.iconPath\" />\n            </svg>\n          }\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  }\n\n  @if (isNested()) {\n    <div\n      class=\"max-h-[420px] overflow-auto\"\n      [style.height.px]=\"isVirtualized() ? viewportHeight() : null\"\n      (scroll)=\"onContainerScroll($event)\"\n    >\n      @if (flattenedNestedItems().length === 0) {\n        <div class=\"px-4 py-10 text-center text-sm text-gray-500 dark:text-gray-400\">{{ emptyMessage() }}</div>\n      } @else {\n        <div class=\"pt-2 divide-y divide-gray-100 dark:divide-gray-800\">\n          @for (node of flattenedNestedItems(); track trackByNested($index, node)) {\n            <div\n              class=\"flex items-start gap-2\"\n              [ngClass]=\"[\n                rowPadding(),\n                node.item.disabled ? 'opacity-50' : 'hover:bg-gray-50/70 dark:hover:bg-gray-800/60',\n                isSelected(node.item) ? 'bg-primary-50/80 dark:bg-primary-950/35' : ''\n              ]\"\n              [style.padding-left]=\"nestedIndent(node.depth)\"\n            >\n              @if (node.hasChildren) {\n                <button\n                  type=\"button\"\n                  class=\"mt-1 inline-flex h-6 w-6 items-center justify-center rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800\"\n                  (click)=\"toggleExpand(node.item)\"\n                  [attr.aria-label]=\"isExpanded(node.item) ? 'Collapse node' : 'Expand node'\"\n                >\n                  <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n                    @if (isExpanded(node.item)) {\n                      <path d=\"M19 12H5\" />\n                    } @else {\n                      <path d=\"M12 5v14M5 12h14\" />\n                    }\n                  </svg>\n                </button>\n              } @else {\n                <span class=\"mt-1 h-6 w-6\"></span>\n              }\n\n              @if (isCheckable()) {\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isChecked(node.item)\"\n                  (change)=\"toggleCheck(node.item, ($any($event.target)).checked)\"\n                  [disabled]=\"node.item.disabled\"\n                  class=\"mt-1.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                />\n              }\n\n              @if (!isCheckable() && isSelectable()) {\n                <input\n                  [type]=\"selectionMode() === 'single' ? 'radio' : 'checkbox'\"\n                  name=\"list-view-select-nested\"\n                  [checked]=\"isSelected(node.item)\"\n                  (change)=\"toggleSelected(node.item, ($any($event.target)).checked)\"\n                  [disabled]=\"node.item.disabled\"\n                  class=\"mt-1.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                />\n              }\n\n              <button\n                type=\"button\"\n                class=\"min-w-0 flex-1 text-left\"\n                data-lv-row-btn=\"1\"\n                [disabled]=\"node.item.disabled\"\n                (click)=\"onItemActivate(node.item)\"\n              >\n                <p class=\"truncate text-sm font-semibold text-gray-900 dark:text-gray-100\">{{ node.item.title }}</p>\n                @if (node.item.subtitle || node.item.description) {\n                  <p class=\"mt-0.5 truncate text-xs text-gray-500 dark:text-gray-400\">\n                    {{ node.item.subtitle || node.item.description }}\n                  </p>\n                }\n              </button>\n\n              @if (node.item.badge) {\n                <span class=\"rounded-full bg-primary-100 px-2 py-0.5 text-[11px] font-semibold text-primary-700 dark:bg-primary-900/35 dark:text-primary-300\">\n                  {{ node.item.badge }}\n                </span>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  } @else if (isGrouped()) {\n    <div class=\"max-h-[420px] overflow-auto\" (scroll)=\"onContainerScroll($event)\">\n      @if (groupedItems().length === 0) {\n        <div class=\"px-4 py-10 text-center text-sm text-gray-500 dark:text-gray-400\">{{ emptyMessage() }}</div>\n      } @else {\n        <div>\n          @for (group of groupedItems(); track group.label) {\n            <section>\n              <header\n                [ngClass]=\"stickyGroupHeaders() ? 'sticky top-0 z-10 bg-gray-50/90 dark:bg-gray-950/90 backdrop-blur' : 'bg-gray-50 dark:bg-gray-950/70'\"\n                class=\"border-y border-gray-200/70 px-4 py-2 text-xs font-semibold uppercase tracking-[0.12em] text-gray-500 dark:border-gray-700/80 dark:text-gray-400\"\n              >\n                {{ group.label }}\n              </header>\n\n              @for (item of group.items; track trackById($index, item)) {\n                <div\n                  [ngClass]=\"[\n                    rowPadding(),\n                    'flex items-start gap-3 border-b border-gray-100/80 dark:border-gray-800',\n                    item.unread ? 'bg-primary-50/45 dark:bg-primary-950/25' : '',\n                    item.disabled ? 'opacity-50' : 'hover:bg-gray-50/70 dark:hover:bg-gray-800/55'\n                  ]\"\n                >\n                  <button type=\"button\" class=\"min-w-0 flex-1 text-left\" data-lv-row-btn=\"1\" [disabled]=\"item.disabled\" (click)=\"onItemActivate(item)\">\n                    <div class=\"flex items-center justify-between gap-2\">\n                      <p class=\"truncate text-sm font-semibold text-gray-900 dark:text-gray-100\">{{ item.title }}</p>\n                      @if (item.meta) {\n                        <span class=\"shrink-0 text-xs text-gray-500 dark:text-gray-400\">{{ item.meta }}</span>\n                      }\n                    </div>\n                    @if (item.subtitle || item.description) {\n                      <p class=\"mt-1 text-xs text-gray-500 dark:text-gray-400\">{{ item.subtitle || item.description }}</p>\n                    }\n                  </button>\n                </div>\n              }\n            </section>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <div\n      class=\"overflow-auto\"\n      [style.height.px]=\"(isVirtualized() || isScrollingMode()) ? viewportHeight() : null\"\n      [style.max-height.px]=\"!isVirtualized() && !isScrollingMode() ? viewportHeight() : null\"\n      (scroll)=\"onContainerScroll($event)\"\n    >\n      @if (renderItems().length === 0) {\n        <div class=\"px-4 py-10 text-center text-sm text-gray-500 dark:text-gray-400\">{{ emptyMessage() }}</div>\n      } @else {\n        @if (isVirtualized()) {\n          <div [style.height.px]=\"totalVirtualHeight()\" class=\"relative\">\n            <div [style.height.px]=\"topSpacerHeight()\"></div>\n\n            @for (item of renderItems(); track trackById($index, item)) {\n              <div\n                [ngClass]=\"[\n                  rowPadding(),\n                  'flex items-start gap-3 border-b border-gray-100/80 dark:border-gray-800',\n                  item.unread ? 'bg-primary-50/45 dark:bg-primary-950/25' : '',\n                  isSelected(item) ? 'bg-primary-100/60 dark:bg-primary-900/25' : '',\n                  item.disabled ? 'opacity-50' : 'hover:bg-gray-50/70 dark:hover:bg-gray-800/55'\n                ]\"\n                [style.height.px]=\"itemHeight()\"\n              >\n                @if (isCheckable()) {\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isChecked(item)\"\n                    (change)=\"toggleCheck(item, ($any($event.target)).checked)\"\n                    [disabled]=\"item.disabled\"\n                    class=\"mt-1 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                  />\n                }\n\n                @if (!isCheckable() && isSelectable()) {\n                  <input\n                    [type]=\"selectionMode() === 'single' ? 'radio' : 'checkbox'\"\n                    name=\"list-view-select\"\n                    [checked]=\"isSelected(item)\"\n                    (change)=\"toggleSelected(item, ($any($event.target)).checked)\"\n                    [disabled]=\"item.disabled\"\n                    class=\"mt-1 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                  />\n                }\n\n                <button type=\"button\" class=\"min-w-0 flex-1 text-left\" data-lv-row-btn=\"1\" [disabled]=\"item.disabled\" (click)=\"onItemActivate(item)\">\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <p class=\"truncate text-sm font-semibold text-gray-900 dark:text-gray-100\">{{ item.title }}</p>\n                    @if (item.meta || item.timestamp) {\n                      <span class=\"shrink-0 text-xs text-gray-500 dark:text-gray-400\">{{ item.meta || item.timestamp }}</span>\n                    }\n                  </div>\n                  @if (item.subtitle || item.description) {\n                    <p class=\"mt-1 truncate text-xs text-gray-500 dark:text-gray-400\">{{ item.subtitle || item.description }}</p>\n                  }\n                </button>\n              </div>\n            }\n\n            <div [style.height.px]=\"bottomSpacerHeight()\"></div>\n          </div>\n        } @else {\n          <div class=\"divide-y divide-gray-100 dark:divide-gray-800\">\n            @for (item of renderItems(); track trackById($index, item)) {\n              <div\n                [ngClass]=\"[\n                  rowPadding(),\n                  'flex items-start gap-3',\n                  item.unread ? 'bg-primary-50/45 dark:bg-primary-950/25' : '',\n                  isSelected(item) ? 'bg-primary-100/60 dark:bg-primary-900/25' : '',\n                  item.disabled ? 'opacity-50' : 'hover:bg-gray-50/70 dark:hover:bg-gray-800/55'\n                ]\"\n              >\n                @if (isCheckable()) {\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isChecked(item)\"\n                    (change)=\"toggleCheck(item, ($any($event.target)).checked)\"\n                    [disabled]=\"item.disabled\"\n                    class=\"mt-1 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                  />\n                }\n\n                @if (!isCheckable() && isSelectable()) {\n                  <input\n                    [type]=\"selectionMode() === 'single' ? 'radio' : 'checkbox'\"\n                    name=\"list-view-select\"\n                    [checked]=\"isSelected(item)\"\n                    (change)=\"toggleSelected(item, ($any($event.target)).checked)\"\n                    [disabled]=\"item.disabled\"\n                    class=\"mt-1 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                  />\n                }\n\n                @if (isCallHistoryMode()) {\n                  <span [ngClass]=\"['mt-0.5 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-800', callTypeClass(item.callType)]\">\n                    <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                      <path [attr.d]=\"callTypeIcon(item.callType)\" />\n                    </svg>\n                  </span>\n                } @else if (item.avatarUrl) {\n                  <img [src]=\"item.avatarUrl\" [alt]=\"item.title\" class=\"h-9 w-9 rounded-xl object-cover\" loading=\"lazy\" />\n                } @else {\n                  <span class=\"inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gray-100 text-xs font-bold text-gray-600 dark:bg-gray-800 dark:text-gray-300\">\n                    {{ initials(item) }}\n                  </span>\n                }\n\n                <button type=\"button\" class=\"min-w-0 flex-1 text-left\" data-lv-row-btn=\"1\" [disabled]=\"item.disabled\" (click)=\"onItemActivate(item)\">\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <p class=\"truncate text-sm font-semibold text-gray-900 dark:text-gray-100\">{{ item.title }}</p>\n                    @if (item.meta || item.timestamp) {\n                      <span class=\"shrink-0 text-xs text-gray-500 dark:text-gray-400\">{{ item.meta || item.timestamp }}</span>\n                    }\n                  </div>\n\n                  @if (isTemplateMode()) {\n                    @if (item.description) {\n                      <p class=\"mt-1 text-xs text-gray-500 dark:text-gray-400\">{{ item.description }}</p>\n                    }\n                    @if (item.tags?.length) {\n                      <div class=\"mt-2 flex flex-wrap gap-1.5\">\n                        @for (tag of item.tags; track tag) {\n                          <span class=\"rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-300\">\n                            {{ tag }}\n                          </span>\n                        }\n                      </div>\n                    }\n                  } @else {\n                    @if (item.subtitle || item.description) {\n                      <p class=\"mt-1 truncate text-xs text-gray-500 dark:text-gray-400\">{{ item.subtitle || item.description }}</p>\n                    }\n                  }\n                </button>\n\n                <div class=\"flex shrink-0 flex-col items-end gap-1.5\">\n                  @if (item.badge) {\n                    <span class=\"rounded-full bg-primary-100 px-2 py-0.5 text-[11px] font-semibold text-primary-700 dark:bg-primary-900/35 dark:text-primary-300\">\n                      {{ item.badge }}\n                    </span>\n                  }\n                  @if (item.duration || item.amount) {\n                    <span class=\"text-xs text-gray-500 dark:text-gray-400\">{{ item.duration || item.amount }}</span>\n                  }\n                </div>\n\n                @if (hasQuickActions()) {\n                  <div class=\"hidden shrink-0 items-center gap-1 sm:flex\">\n                    @for (action of quickActions(); track action.id) {\n                      <button\n                        type=\"button\"\n                        (click)=\"onQuickAction(item, action); $event.stopPropagation()\"\n                        [ngClass]=\"[\n                          'inline-flex items-center gap-1 rounded-lg border px-2 py-1 text-[11px] font-medium transition-colors',\n                          actionToneClass(action.tone)\n                        ]\"\n                        [attr.aria-label]=\"action.label\"\n                      >\n                        @if (action.iconPath) {\n                          <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n                            <path [attr.d]=\"action.iconPath\" />\n                          </svg>\n                        }\n                        {{ action.label }}\n                      </button>\n                    }\n                  </div>\n                }\n              </div>\n\n              @if (hasQuickActions()) {\n                <div class=\"mt-2 flex flex-wrap gap-1 sm:hidden\">\n                  @for (action of quickActions(); track action.id) {\n                    <button\n                      type=\"button\"\n                      (click)=\"onQuickAction(item, action); $event.stopPropagation()\"\n                      [ngClass]=\"[\n                        'inline-flex items-center gap-1 rounded-lg border px-2 py-1 text-[11px] font-medium transition-colors',\n                        actionToneClass(action.tone)\n                      ]\"\n                      [attr.aria-label]=\"action.label\"\n                    >\n                      @if (action.iconPath) {\n                        <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n                          <path [attr.d]=\"action.iconPath\" />\n                        </svg>\n                      }\n                      {{ action.label }}\n                    </button>\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n      }\n\n      @if ((isScrollingMode() || infiniteScroll()) && (loadingMore() || hasMore())) {\n        <div class=\"border-t border-gray-200/70 px-4 py-3 text-center dark:border-gray-700/80\">\n          @if (loadingMore()) {\n            <span class=\"inline-flex items-center gap-2 text-xs font-medium text-gray-500 dark:text-gray-400\">\n              <svg class=\"h-4 w-4 animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n                <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.2\"></circle>\n                <path d=\"M12 3a9 9 0 0 1 9 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n              </svg>\n              Loading more items...\n            </span>\n          } @else {\n            <span class=\"text-xs text-gray-500 dark:text-gray-400\">Scroll to load more</span>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (isCheckable()) {\n    <div class=\"border-t border-gray-200/80 px-4 py-2 text-xs text-gray-500 dark:border-gray-700/70 dark:text-gray-400\">\n      {{ checkedCount() }} checked\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], checkable: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkable", required: false }] }], nested: [{ type: i0.Input, args: [{ isSignal: true, alias: "nested", required: false }] }], virtualized: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualized", required: false }] }], grouped: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouped", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], stickyGroupHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyGroupHeaders", required: false }] }], infiniteScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScroll", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], loadingMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMore", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], announceActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "announceActions", required: false }] }], showQuickActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showQuickActions", required: false }] }], quickActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickActions", required: false }] }], bulkActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "bulkActions", required: false }] }], enableBulkHotkeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableBulkHotkeys", required: false }] }], bulkHotkeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "bulkHotkeys", required: false }] }], enableRovingFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRovingFocus", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }, { type: i0.Output, args: ["selectedIdsChange"] }], checkedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkedIds", required: false }] }, { type: i0.Output, args: ["checkedIdsChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], checkChange: [{ type: i0.Output, args: ["checkChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], quickActionClick: [{ type: i0.Output, args: ["quickActionClick"] }], bulkActionClick: [{ type: i0.Output, args: ["bulkActionClick"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SvListViewComponent };
+//# sourceMappingURL=styloviz-list-view.mjs.map

package/fesm2022/styloviz-list-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styloviz-list-view.mjs","sources":["../../../../projects/list-view-free/src/lib/list-view.component.ts","../../../../projects/list-view-free/src/lib/list-view.component.html","../../../../projects/list-view-free/src/styloviz-list-view.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\n\nexport type ListViewMode =\n  | 'default'\n  | 'checklist'\n  | 'nested'\n  | 'virtualization'\n  | 'scrolling'\n  | 'grouped'\n  | 'template'\n  | 'call-history';\n\nexport type ListViewVariant = 'default' | 'soft' | 'outlined';\nexport type ListViewDensity = 'compact' | 'comfortable' | 'spacious';\nexport type ListViewSelectionMode = 'none' | 'single' | 'multiple';\nexport type ListViewCallType = 'incoming' | 'outgoing' | 'missed' | 'video';\nexport type ListViewActionTone = 'neutral' | 'primary' | 'danger';\n\nexport interface ListViewItem {\n  id: string | number;\n  title: string;\n  subtitle?: string;\n  description?: string;\n  group?: string;\n  badge?: string;\n  meta?: string;\n  timestamp?: string;\n  duration?: string;\n  avatarUrl?: string;\n  iconPath?: string;\n  tags?: string[];\n  amount?: string;\n  callType?: ListViewCallType;\n  unread?: boolean;\n  disabled?: boolean;\n  children?: ListViewItem[];\n}\n\nexport interface ListViewItemClickEvent {\n  item: ListViewItem;\n}\n\nexport interface ListViewCheckChangeEvent {\n  item: ListViewItem;\n  checked: boolean;\n}\n\nexport interface ListViewLoadMoreEvent {\n  visibleCount: number;\n  totalCount: number;\n}\n\nexport interface ListViewQuickAction {\n  id: string;\n  label: string;\n  iconPath?: string;\n  tone?: ListViewActionTone;\n}\n\nexport interface ListViewQuickActionClickEvent {\n  item: ListViewItem;\n  action: ListViewQuickAction;\n}\n\nexport interface ListViewBulkAction {\n  id: string;\n  label: string;\n  iconPath?: string;\n  tone?: ListViewActionTone;\n}\n\nexport interface ListViewBulkActionClickEvent {\n  action: ListViewBulkAction;\n  selectedIds: Set<string | number>;\n}\n\ninterface ListViewGroup {\n  label: string;\n  items: ListViewItem[];\n}\n\ninterface FlattenedItem {\n  item: ListViewItem;\n  depth: number;\n  hasChildren: boolean;\n}\n\n@Component({\n  selector: 'sv-list-view',\n  standalone: true,\n  imports: [NgClass],\n  templateUrl: './list-view.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SvListViewComponent {\n  /** Items to render (label, meta, optional children/avatar/actions). */\n  items = input<ListViewItem[]>([]);\n  /** Preset pattern: default, checklist, nested, card, etc. @default 'default' */\n  mode = input<ListViewMode>('default');\n  /** Visual variant. @default 'default' */\n  variant = input<ListViewVariant>('default');\n  /** Row density. @default 'comfortable' */\n  density = input<ListViewDensity>('comfortable');\n\n  /** Selection behaviour: none, single or multiple. @default 'none' */\n  selectionMode = input<ListViewSelectionMode>('none');\n  /** Show checkboxes on rows. @default false */\n  checkable = input<boolean>(false);\n  /** Enable nested (tree) rows. @default false */\n  nested = input<boolean>(false);\n  /** Virtualize long lists for performance. @default false */\n  virtualized = input<boolean>(false);\n  /** Group rows under section headers. @default false */\n  grouped = input<boolean>(false);\n  /** Show a search box to filter items. @default false */\n  searchable = input<boolean>(false);\n  /** Keep group headers pinned while scrolling. @default true */\n  stickyGroupHeaders = input<boolean>(true);\n\n  /** Load more items as the user scrolls to the end. @default false */\n  infiniteScroll = input<boolean>(false);\n  /** Whether more items are available to load. @default false */\n  hasMore = input<boolean>(false);\n  /** Show a loading indicator while fetching more. @default false */\n  loadingMore = input<boolean>(false);\n  /** Viewport height (px) for the virtualized list. @default 360 */\n  viewportHeight = input<number>(360);\n  /** Estimated row height (px) for virtualization. @default 68 */\n  itemHeight = input<number>(68);\n  /** Extra rows rendered above/below the viewport. @default 5 */\n  overscan = input<number>(5);\n\n  /** Placeholder for the search box. @default 'Search list items' */\n  searchPlaceholder = input<string>('Search list items');\n  /** Message shown when no items match. @default 'No items match your filters.' */\n  emptyMessage = input<string>('No items match your filters.');\n  /** Extra CSS classes for the root. */\n  customClass = input<string>('');\n  /** Accessible label for the list. @default 'List view' */\n  ariaLabel = input<string>('List view');\n  /** Announce row actions to screen readers. @default true */\n  announceActions = input<boolean>(true);\n  /** Show per-row quick actions on hover/focus. @default false */\n  showQuickActions = input<boolean>(false);\n  /** Per-row quick actions. */\n  quickActions = input<ListViewQuickAction[]>([]);\n  /** Bulk actions for checked rows. */\n  bulkActions = input<ListViewBulkAction[]>([]);\n  /** Enable keyboard hotkeys for bulk actions. @default false */\n  enableBulkHotkeys = input<boolean>(false);\n  /** Map of hotkey → bulk action id. */\n  bulkHotkeys = input<Record<string, string>>({});\n  /** Enable roving-tabindex keyboard navigation. @default true */\n  enableRovingFocus = input<boolean>(true);\n\n  /** Selected row ids (two-way). */\n  selectedIds = model<Set<string | number>>(new Set());\n  /** Checked row ids (two-way). */\n  checkedIds = model<Set<string | number>>(new Set());\n\n  /** Emitted with the clicked item. */\n  itemClick = output<ListViewItemClickEvent>();\n  /** Emitted with the current selection set. */\n  selectionChange = output<Set<string | number>>();\n  /** Emitted when a row's checkbox changes. */\n  checkChange = output<ListViewCheckChangeEvent>();\n  /** Emitted when more items should be loaded (infinite scroll). */\n  loadMore = output<ListViewLoadMoreEvent>();\n  /** Emitted when a quick action is clicked. */\n  quickActionClick = output<ListViewQuickActionClickEvent>();\n  /** Emitted when a bulk action is triggered. */\n  bulkActionClick = output<ListViewBulkActionClickEvent>();\n\n  readonly query = signal<string>('');\n  readonly liveAnnouncement = signal<string>('');\n  private readonly host = inject(ElementRef<HTMLElement>);\n  private readonly scrollTop = signal<number>(0);\n  private readonly expandedIds = signal<Set<string | number>>(new Set());\n  private readonly loadingGuard = signal<boolean>(false);\n\n  readonly isCheckable = computed(() => this.checkable() || this.mode() === 'checklist');\n  readonly isSelectable = computed(() => this.selectionMode() !== 'none');\n  readonly selectedCount = computed(() => this.selectedIds().size);\n  readonly bulkSelectedIds = computed(() => (this.isCheckable() ? this.checkedIds() : this.selectedIds()));\n  readonly bulkSelectedCount = computed(() => this.bulkSelectedIds().size);\n  readonly hasQuickActions = computed(() => this.showQuickActions() && this.quickActions().length > 0);\n  readonly isNested = computed(() => this.nested());\n  readonly isVirtualized = computed(() => this.virtualized() || this.mode() === 'virtualization');\n  readonly isGrouped = computed(() => this.grouped());\n  readonly isTemplateMode = computed(() => this.mode() === 'template');\n  readonly isCallHistoryMode = computed(() => this.mode() === 'call-history');\n  readonly isScrollingMode = computed(() => false);\n\n  readonly filteredItems = computed<ListViewItem[]>(() => {\n    const q = this.query().trim().toLowerCase();\n    const source = this.items();\n    if (!q) return source;\n\n    if (this.isNested()) {\n      return this.filterNested(source, q);\n    }\n\n    return source.filter(item => this.itemMatches(item, q));\n  });\n\n  readonly flattenedNestedItems = computed<FlattenedItem[]>(() => {\n    if (!this.isNested()) return [];\n    return this.flattenTree(this.filteredItems(), 0);\n  });\n\n  readonly groupedItems = computed<ListViewGroup[]>(() => {\n    if (!this.isGrouped()) return [];\n\n    const map = new Map<string, ListViewItem[]>();\n    for (const item of this.filteredItems()) {\n      const key = item.group?.trim() || 'Ungrouped';\n      const groupItems = map.get(key) ?? [];\n      groupItems.push(item);\n      map.set(key, groupItems);\n    }\n\n    return [...map.entries()].map(([label, items]) => ({ label, items }));\n  });\n\n  readonly flatItems = computed<ListViewItem[]>(() => {\n    if (this.isNested()) return [];\n    if (this.isGrouped()) return this.groupedItems().flatMap(g => g.items);\n    return this.filteredItems();\n  });\n\n  readonly totalVirtualHeight = computed(() => this.flatItems().length * this.itemHeight());\n\n  readonly virtualRange = computed(() => {\n    if (!this.isVirtualized() || this.isNested()) {\n      return { start: 0, end: this.flatItems().length };\n    }\n\n    const rowHeight = Math.max(1, this.itemHeight());\n    const total = this.flatItems().length;\n    const visibleRows = Math.ceil(this.viewportHeight() / rowHeight);\n    const start = Math.max(0, Math.floor(this.scrollTop() / rowHeight) - this.overscan());\n    const end = Math.min(total, start + visibleRows + this.overscan() * 2);\n\n    return { start, end };\n  });\n\n  readonly virtualItems = computed<ListViewItem[]>(() => {\n    const range = this.virtualRange();\n    return this.flatItems().slice(range.start, range.end);\n  });\n\n  readonly topSpacerHeight = computed(() => this.virtualRange().start * this.itemHeight());\n  readonly bottomSpacerHeight = computed(() => {\n    const range = this.virtualRange();\n    const trailing = Math.max(0, this.flatItems().length - range.end);\n    return trailing * this.itemHeight();\n  });\n\n  readonly renderItems = computed<ListViewItem[]>(() =>\n    this.isVirtualized() && !this.isNested() ? this.virtualItems() : this.flatItems()\n  );\n\n  readonly allVisibleIds = computed<(string | number)[]>(() => {\n    if (this.isNested()) {\n      return this.flattenedNestedItems().map(n => n.item.id);\n    }\n    return this.flatItems().map(item => item.id);\n  });\n\n  readonly allChecked = computed(() => {\n    const ids = this.allVisibleIds();\n    if (!ids.length) return false;\n    const checked = this.checkedIds();\n    return ids.every(id => checked.has(id));\n  });\n\n  readonly checkedCount = computed(() => this.checkedIds().size);\n  readonly visibleItemCount = computed(() => {\n    if (this.isNested()) {\n      return this.countTreeItems(this.filteredItems());\n    }\n    return this.flatItems().length;\n  });\n\n  readonly rootClasses = computed(() => {\n    const base =\n      'rounded-2xl border bg-white/90 shadow-sm backdrop-blur-sm dark:bg-gray-900/80 dark:shadow-none';\n\n    const variantMap: Record<ListViewVariant, string> = {\n      default: 'border-gray-200/80 dark:border-gray-700/70',\n      soft: 'border-primary-100/80 bg-primary-50/40 dark:border-primary-900/50 dark:bg-primary-950/25',\n      outlined: 'border-2 border-gray-300 dark:border-gray-600',\n    };\n\n    return [base, variantMap[this.variant()], this.customClass()].filter(Boolean).join(' ');\n  });\n\n  readonly rowPadding = computed(() => {\n    const densityMap: Record<ListViewDensity, string> = {\n      compact: 'px-3 py-2',\n      comfortable: 'px-4 py-3',\n      spacious: 'px-5 py-4',\n    };\n    return densityMap[this.density()];\n  });\n\n  onSearchInput(value: string): void {\n    this.query.set(value);\n  }\n\n  onContainerScroll(event: Event): void {\n    const target = event.target as HTMLElement;\n    this.scrollTop.set(target.scrollTop);\n\n    if (!this.infiniteScroll() || !this.hasMore() || this.loadingMore() || this.loadingGuard()) {\n      return;\n    }\n\n    const threshold = 100;\n    const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - threshold;\n    if (!nearBottom) return;\n\n    this.loadingGuard.set(true);\n    this.loadMore.emit({ visibleCount: this.renderItems().length, totalCount: this.flatItems().length });\n    queueMicrotask(() => this.loadingGuard.set(false));\n  }\n\n  onItemActivate(item: ListViewItem): void {\n    if (item.disabled) return;\n\n    this.itemClick.emit({ item });\n\n    if (this.selectionMode() === 'single') {\n      const next = new Set<string | number>([item.id]);\n      this.selectedIds.set(next);\n      this.selectionChange.emit(next);\n      this.announce(`Selected ${item.title}.`);\n      return;\n    }\n\n    if (this.selectionMode() === 'multiple') {\n      const next = new Set(this.selectedIds());\n      if (next.has(item.id)) next.delete(item.id);\n      else next.add(item.id);\n      this.selectedIds.set(next);\n      this.selectionChange.emit(next);\n      this.announce(next.has(item.id) ? `Selected ${item.title}.` : `Deselected ${item.title}.`);\n    }\n  }\n\n  toggleCheck(item: ListViewItem, checked: boolean): void {\n    if (item.disabled) return;\n\n    const next = new Set(this.checkedIds());\n    if (checked) next.add(item.id);\n    else next.delete(item.id);\n\n    this.checkedIds.set(next);\n    this.checkChange.emit({ item, checked });\n    this.announce(checked ? `Checked ${item.title}.` : `Unchecked ${item.title}.`);\n  }\n\n  toggleAllChecks(checked: boolean): void {\n    const next = checked ? new Set(this.allVisibleIds()) : new Set<string | number>();\n    this.checkedIds.set(next);\n    this.announce(checked ? `Selected all ${next.size} visible items.` : 'Cleared all selected items.');\n  }\n\n  toggleExpand(item: ListViewItem): void {\n    if (!item.children?.length) return;\n\n    const next = new Set(this.expandedIds());\n    if (next.has(item.id)) next.delete(item.id);\n    else next.add(item.id);\n    this.expandedIds.set(next);\n  }\n\n  isExpanded(item: ListViewItem): boolean {\n    return this.expandedIds().has(item.id);\n  }\n\n  isSelected(item: ListViewItem): boolean {\n    return this.selectedIds().has(item.id);\n  }\n\n  isChecked(item: ListViewItem): boolean {\n    return this.checkedIds().has(item.id);\n  }\n\n  toggleSelected(item: ListViewItem, checked: boolean): void {\n    if (item.disabled || this.selectionMode() === 'none') {\n      return;\n    }\n\n    if (this.selectionMode() === 'single') {\n      const next = checked ? new Set<string | number>([item.id]) : new Set<string | number>();\n      this.selectedIds.set(next);\n      this.selectionChange.emit(next);\n      return;\n    }\n\n    const next = new Set(this.selectedIds());\n    if (checked) next.add(item.id);\n    else next.delete(item.id);\n    this.selectedIds.set(next);\n    this.selectionChange.emit(next);\n    this.announce(checked ? `Selected ${item.title}.` : `Deselected ${item.title}.`);\n  }\n\n  onQuickAction(item: ListViewItem, action: ListViewQuickAction): void {\n    if (item.disabled) return;\n    this.quickActionClick.emit({ item, action });\n    this.announce(`${action.label} action triggered for ${item.title}.`);\n  }\n\n  onBulkAction(action: ListViewBulkAction): void {\n    const selected = new Set(this.bulkSelectedIds());\n    this.bulkActionClick.emit({ action, selectedIds: selected });\n    this.announce(`${action.label} applied to ${selected.size} selected item${selected.size === 1 ? '' : 's'}.`);\n  }\n\n  onRootKeydown(event: KeyboardEvent): void {\n    if (event.metaKey || event.ctrlKey || event.altKey) {\n      return;\n    }\n\n    const target = event.target as HTMLElement | null;\n    const tag = target?.tagName.toLowerCase();\n    if (tag === 'input' || tag === 'textarea' || tag === 'select' || target?.isContentEditable) {\n      return;\n    }\n\n    if (this.enableRovingFocus() && this.handleRovingFocusKey(event, target)) {\n      return;\n    }\n\n    if (!this.enableBulkHotkeys() || this.bulkSelectedCount() === 0 || this.bulkActions().length === 0) {\n      return;\n    }\n\n    const key = event.key.toLowerCase();\n    const explicit = this.bulkHotkeys()[key];\n\n    const fallbackMap: Record<string, string> = {\n      delete: 'delete',\n      backspace: 'delete',\n      a: 'archive',\n      r: 'mark-read',\n    };\n\n    const actionId = explicit ?? fallbackMap[key];\n    if (!actionId) {\n      return;\n    }\n\n    const action = this.bulkActions().find(item => item.id === actionId);\n    if (!action) {\n      return;\n    }\n\n    event.preventDefault();\n    this.onBulkAction(action);\n  }\n\n  private handleRovingFocusKey(event: KeyboardEvent, target: HTMLElement | null): boolean {\n    const key = event.key;\n    if (key !== 'ArrowDown' && key !== 'ArrowUp' && key !== 'Home' && key !== 'End') {\n      return false;\n    }\n\n    const rowButtons = this.rowButtons();\n    if (!rowButtons.length) {\n      return false;\n    }\n\n    const current = target?.closest('[data-lv-row-btn=\"1\"]') as HTMLButtonElement | null;\n    const currentIndex = current ? rowButtons.indexOf(current) : -1;\n\n    let nextIndex = 0;\n    if (key === 'ArrowDown') {\n      nextIndex = currentIndex < 0 ? 0 : Math.min(rowButtons.length - 1, currentIndex + 1);\n    } else if (key === 'ArrowUp') {\n      nextIndex = currentIndex < 0 ? rowButtons.length - 1 : Math.max(0, currentIndex - 1);\n    } else if (key === 'Home') {\n      nextIndex = 0;\n    } else {\n      nextIndex = rowButtons.length - 1;\n    }\n\n    event.preventDefault();\n    rowButtons[nextIndex].focus();\n    return true;\n  }\n\n  private rowButtons(): HTMLButtonElement[] {\n    const hostEl = this.host.nativeElement as HTMLElement;\n    return Array.from(hostEl.querySelectorAll('button[data-lv-row-btn=\"1\"]:not([disabled])')) as HTMLButtonElement[];\n  }\n\n  trackById(_: number, item: ListViewItem): string | number {\n    return item.id;\n  }\n\n  trackByNested(_: number, node: FlattenedItem): string | number {\n    return node.item.id;\n  }\n\n  callTypeIcon(type: ListViewCallType | undefined): string {\n    if (type === 'incoming') return 'M5 12l5-5m0 0l5 5m-5-5v12';\n    if (type === 'outgoing') return 'M19 12l-5 5m0 0l-5-5m5 5V5';\n    if (type === 'video') return 'M15 10l4.553-2.276A1 1 0 0 1 21 8.618v6.764a1 1 0 0 1-1.447.894L15 14';\n    return 'M6 18L18 6M6 6l12 12';\n  }\n\n  callTypeClass(type: ListViewCallType | undefined): string {\n    if (type === 'incoming') return 'text-emerald-600 dark:text-emerald-400';\n    if (type === 'outgoing') return 'text-primary-600 dark:text-primary-400';\n    if (type === 'video') return 'text-violet-600 dark:text-violet-400';\n    return 'text-red-600 dark:text-red-400';\n  }\n\n  initials(item: ListViewItem): string {\n    const source = item.title.trim().split(/\\s+/).slice(0, 2).map(part => part[0] ?? '').join('');\n    return source.toUpperCase() || 'NA';\n  }\n\n  nestedIndent(depth: number): string {\n    const baseIndent = 0.5;\n    return `${baseIndent + depth * 1.2}rem`;\n  }\n\n  actionToneClass(tone: ListViewActionTone | undefined): string {\n    if (tone === 'primary') {\n      return 'border-primary-200 bg-primary-50 text-primary-700 hover:bg-primary-100 dark:border-primary-900/60 dark:bg-primary-900/30 dark:text-primary-300 dark:hover:bg-primary-900/45';\n    }\n    if (tone === 'danger') {\n      return 'border-red-200 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-900/60 dark:bg-red-900/30 dark:text-red-300 dark:hover:bg-red-900/45';\n    }\n    return 'border-gray-200 bg-white text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900/60 dark:text-gray-300 dark:hover:bg-gray-800';\n  }\n\n  private announce(message: string): void {\n    if (!this.announceActions()) {\n      return;\n    }\n\n    this.liveAnnouncement.set('');\n    queueMicrotask(() => this.liveAnnouncement.set(message));\n  }\n\n  private itemMatches(item: ListViewItem, query: string): boolean {\n    const haystack = [\n      item.title,\n      item.subtitle,\n      item.description,\n      item.group,\n      item.badge,\n      item.meta,\n      item.timestamp,\n      item.duration,\n      item.amount,\n      ...(item.tags ?? []),\n    ]\n      .filter(Boolean)\n      .join(' ')\n      .toLowerCase();\n\n    return haystack.includes(query);\n  }\n\n  private filterNested(items: ListViewItem[], query: string): ListViewItem[] {\n    const result: ListViewItem[] = [];\n\n    for (const item of items) {\n      const filteredChildren = item.children?.length ? this.filterNested(item.children, query) : [];\n      if (this.itemMatches(item, query) || filteredChildren.length > 0) {\n        result.push({ ...item, children: filteredChildren });\n      }\n    }\n\n    return result;\n  }\n\n  private flattenTree(items: ListViewItem[], depth: number): FlattenedItem[] {\n    const rows: FlattenedItem[] = [];\n\n    for (const item of items) {\n      const hasChildren = Boolean(item.children?.length);\n      rows.push({ item, depth, hasChildren });\n\n      if (hasChildren && this.expandedIds().has(item.id)) {\n        rows.push(...this.flattenTree(item.children ?? [], depth + 1));\n      }\n    }\n\n    return rows;\n  }\n\n  private countTreeItems(items: ListViewItem[]): number {\n    let total = 0;\n    for (const item of items) {\n      total += 1;\n      if (item.children?.length) {\n        total += this.countTreeItems(item.children);\n      }\n    }\n    return total;\n  }\n}\n","<div\n  [ngClass]=\"rootClasses()\"\n  class=\"focus-within:ring-2 focus-within:ring-primary-500/30\"\n  role=\"region\"\n  [attr.aria-label]=\"ariaLabel()\"\n  tabindex=\"0\"\n  (keydown)=\"onRootKeydown($event)\"\n>\n  <p class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveAnnouncement() }}</p>\n\n  <div class=\"flex flex-wrap items-center justify-between gap-2 border-b border-gray-200/80 px-4 py-3 dark:border-gray-700/70\">\n    @if (searchable() || mode() === 'scrolling' || mode() === 'virtualization') {\n      <div class=\"relative min-w-[220px] flex-1\">\n        <svg\n          class=\"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"11\" cy=\"11\" r=\"8\" />\n          <path d=\"M21 21l-4.3-4.3\" />\n        </svg>\n\n        <input\n          type=\"search\"\n          [value]=\"query()\"\n          (input)=\"onSearchInput(($any($event.target)).value)\"\n          [placeholder]=\"searchPlaceholder()\"\n          class=\"h-10 w-full rounded-xl border border-gray-200 bg-white pl-9 pr-3 text-sm text-gray-700 placeholder:text-gray-400 focus:border-primary-400 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100\"\n        />\n      </div>\n    }\n\n    @if (isCheckable()) {\n      <label class=\"inline-flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"allChecked()\"\n          (change)=\"toggleAllChecks(($any($event.target)).checked)\"\n          class=\"h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n        />\n        Select all\n      </label>\n    }\n\n    <span class=\"rounded-full bg-gray-100 px-2.5 py-1 text-xs font-semibold text-gray-600 dark:bg-gray-800 dark:text-gray-300\">\n      {{ visibleItemCount() }} items\n    </span>\n\n    @if (isSelectable()) {\n      <span class=\"rounded-full bg-primary-100 px-2.5 py-1 text-xs font-semibold text-primary-700 dark:bg-primary-900/35 dark:text-primary-300\">\n        {{ selectedCount() }} selected\n      </span>\n    }\n  </div>\n\n  @if (bulkActions().length > 0 && bulkSelectedCount() > 0) {\n    <div class=\"sticky top-0 z-20 flex flex-wrap items-center gap-2 border-b border-primary-200/80 bg-primary-50/90 px-4 py-2 backdrop-blur dark:border-primary-900/40 dark:bg-primary-950/70\">\n      <span class=\"text-xs font-semibold text-primary-700 dark:text-primary-300\">{{ bulkSelectedCount() }} selected</span>\n      @for (action of bulkActions(); track action.id) {\n        <button\n          type=\"button\"\n          (click)=\"onBulkAction(action)\"\n          [ngClass]=\"[\n            'inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-xs font-medium transition-colors',\n            actionToneClass(action.tone)\n          ]\"\n        >\n          @if (action.iconPath) {\n            <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path [attr.d]=\"action.iconPath\" />\n            </svg>\n          }\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  }\n\n  @if (isNested()) {\n    <div\n      class=\"max-h-[420px] overflow-auto\"\n      [style.height.px]=\"isVirtualized() ? viewportHeight() : null\"\n      (scroll)=\"onContainerScroll($event)\"\n    >\n      @if (flattenedNestedItems().length === 0) {\n        <div class=\"px-4 py-10 text-center text-sm text-gray-500 dark:text-gray-400\">{{ emptyMessage() }}</div>\n      } @else {\n        <div class=\"pt-2 divide-y divide-gray-100 dark:divide-gray-800\">\n          @for (node of flattenedNestedItems(); track trackByNested($index, node)) {\n            <div\n              class=\"flex items-start gap-2\"\n              [ngClass]=\"[\n                rowPadding(),\n                node.item.disabled ? 'opacity-50' : 'hover:bg-gray-50/70 dark:hover:bg-gray-800/60',\n                isSelected(node.item) ? 'bg-primary-50/80 dark:bg-primary-950/35' : ''\n              ]\"\n              [style.padding-left]=\"nestedIndent(node.depth)\"\n            >\n              @if (node.hasChildren) {\n                <button\n                  type=\"button\"\n                  class=\"mt-1 inline-flex h-6 w-6 items-center justify-center rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800\"\n                  (click)=\"toggleExpand(node.item)\"\n                  [attr.aria-label]=\"isExpanded(node.item) ? 'Collapse node' : 'Expand node'\"\n                >\n                  <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n                    @if (isExpanded(node.item)) {\n                      <path d=\"M19 12H5\" />\n                    } @else {\n                      <path d=\"M12 5v14M5 12h14\" />\n                    }\n                  </svg>\n                </button>\n              } @else {\n                <span class=\"mt-1 h-6 w-6\"></span>\n              }\n\n              @if (isCheckable()) {\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isChecked(node.item)\"\n                  (change)=\"toggleCheck(node.item, ($any($event.target)).checked)\"\n                  [disabled]=\"node.item.disabled\"\n                  class=\"mt-1.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                />\n              }\n\n              @if (!isCheckable() && isSelectable()) {\n                <input\n                  [type]=\"selectionMode() === 'single' ? 'radio' : 'checkbox'\"\n                  name=\"list-view-select-nested\"\n                  [checked]=\"isSelected(node.item)\"\n                  (change)=\"toggleSelected(node.item, ($any($event.target)).checked)\"\n                  [disabled]=\"node.item.disabled\"\n                  class=\"mt-1.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                />\n              }\n\n              <button\n                type=\"button\"\n                class=\"min-w-0 flex-1 text-left\"\n                data-lv-row-btn=\"1\"\n                [disabled]=\"node.item.disabled\"\n                (click)=\"onItemActivate(node.item)\"\n              >\n                <p class=\"truncate text-sm font-semibold text-gray-900 dark:text-gray-100\">{{ node.item.title }}</p>\n                @if (node.item.subtitle || node.item.description) {\n                  <p class=\"mt-0.5 truncate text-xs text-gray-500 dark:text-gray-400\">\n                    {{ node.item.subtitle || node.item.description }}\n                  </p>\n                }\n              </button>\n\n              @if (node.item.badge) {\n                <span class=\"rounded-full bg-primary-100 px-2 py-0.5 text-[11px] font-semibold text-primary-700 dark:bg-primary-900/35 dark:text-primary-300\">\n                  {{ node.item.badge }}\n                </span>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  } @else if (isGrouped()) {\n    <div class=\"max-h-[420px] overflow-auto\" (scroll)=\"onContainerScroll($event)\">\n      @if (groupedItems().length === 0) {\n        <div class=\"px-4 py-10 text-center text-sm text-gray-500 dark:text-gray-400\">{{ emptyMessage() }}</div>\n      } @else {\n        <div>\n          @for (group of groupedItems(); track group.label) {\n            <section>\n              <header\n                [ngClass]=\"stickyGroupHeaders() ? 'sticky top-0 z-10 bg-gray-50/90 dark:bg-gray-950/90 backdrop-blur' : 'bg-gray-50 dark:bg-gray-950/70'\"\n                class=\"border-y border-gray-200/70 px-4 py-2 text-xs font-semibold uppercase tracking-[0.12em] text-gray-500 dark:border-gray-700/80 dark:text-gray-400\"\n              >\n                {{ group.label }}\n              </header>\n\n              @for (item of group.items; track trackById($index, item)) {\n                <div\n                  [ngClass]=\"[\n                    rowPadding(),\n                    'flex items-start gap-3 border-b border-gray-100/80 dark:border-gray-800',\n                    item.unread ? 'bg-primary-50/45 dark:bg-primary-950/25' : '',\n                    item.disabled ? 'opacity-50' : 'hover:bg-gray-50/70 dark:hover:bg-gray-800/55'\n                  ]\"\n                >\n                  <button type=\"button\" class=\"min-w-0 flex-1 text-left\" data-lv-row-btn=\"1\" [disabled]=\"item.disabled\" (click)=\"onItemActivate(item)\">\n                    <div class=\"flex items-center justify-between gap-2\">\n                      <p class=\"truncate text-sm font-semibold text-gray-900 dark:text-gray-100\">{{ item.title }}</p>\n                      @if (item.meta) {\n                        <span class=\"shrink-0 text-xs text-gray-500 dark:text-gray-400\">{{ item.meta }}</span>\n                      }\n                    </div>\n                    @if (item.subtitle || item.description) {\n                      <p class=\"mt-1 text-xs text-gray-500 dark:text-gray-400\">{{ item.subtitle || item.description }}</p>\n                    }\n                  </button>\n                </div>\n              }\n            </section>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <div\n      class=\"overflow-auto\"\n      [style.height.px]=\"(isVirtualized() || isScrollingMode()) ? viewportHeight() : null\"\n      [style.max-height.px]=\"!isVirtualized() && !isScrollingMode() ? viewportHeight() : null\"\n      (scroll)=\"onContainerScroll($event)\"\n    >\n      @if (renderItems().length === 0) {\n        <div class=\"px-4 py-10 text-center text-sm text-gray-500 dark:text-gray-400\">{{ emptyMessage() }}</div>\n      } @else {\n        @if (isVirtualized()) {\n          <div [style.height.px]=\"totalVirtualHeight()\" class=\"relative\">\n            <div [style.height.px]=\"topSpacerHeight()\"></div>\n\n            @for (item of renderItems(); track trackById($index, item)) {\n              <div\n                [ngClass]=\"[\n                  rowPadding(),\n                  'flex items-start gap-3 border-b border-gray-100/80 dark:border-gray-800',\n                  item.unread ? 'bg-primary-50/45 dark:bg-primary-950/25' : '',\n                  isSelected(item) ? 'bg-primary-100/60 dark:bg-primary-900/25' : '',\n                  item.disabled ? 'opacity-50' : 'hover:bg-gray-50/70 dark:hover:bg-gray-800/55'\n                ]\"\n                [style.height.px]=\"itemHeight()\"\n              >\n                @if (isCheckable()) {\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isChecked(item)\"\n                    (change)=\"toggleCheck(item, ($any($event.target)).checked)\"\n                    [disabled]=\"item.disabled\"\n                    class=\"mt-1 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                  />\n                }\n\n                @if (!isCheckable() && isSelectable()) {\n                  <input\n                    [type]=\"selectionMode() === 'single' ? 'radio' : 'checkbox'\"\n                    name=\"list-view-select\"\n                    [checked]=\"isSelected(item)\"\n                    (change)=\"toggleSelected(item, ($any($event.target)).checked)\"\n                    [disabled]=\"item.disabled\"\n                    class=\"mt-1 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                  />\n                }\n\n                <button type=\"button\" class=\"min-w-0 flex-1 text-left\" data-lv-row-btn=\"1\" [disabled]=\"item.disabled\" (click)=\"onItemActivate(item)\">\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <p class=\"truncate text-sm font-semibold text-gray-900 dark:text-gray-100\">{{ item.title }}</p>\n                    @if (item.meta || item.timestamp) {\n                      <span class=\"shrink-0 text-xs text-gray-500 dark:text-gray-400\">{{ item.meta || item.timestamp }}</span>\n                    }\n                  </div>\n                  @if (item.subtitle || item.description) {\n                    <p class=\"mt-1 truncate text-xs text-gray-500 dark:text-gray-400\">{{ item.subtitle || item.description }}</p>\n                  }\n                </button>\n              </div>\n            }\n\n            <div [style.height.px]=\"bottomSpacerHeight()\"></div>\n          </div>\n        } @else {\n          <div class=\"divide-y divide-gray-100 dark:divide-gray-800\">\n            @for (item of renderItems(); track trackById($index, item)) {\n              <div\n                [ngClass]=\"[\n                  rowPadding(),\n                  'flex items-start gap-3',\n                  item.unread ? 'bg-primary-50/45 dark:bg-primary-950/25' : '',\n                  isSelected(item) ? 'bg-primary-100/60 dark:bg-primary-900/25' : '',\n                  item.disabled ? 'opacity-50' : 'hover:bg-gray-50/70 dark:hover:bg-gray-800/55'\n                ]\"\n              >\n                @if (isCheckable()) {\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isChecked(item)\"\n                    (change)=\"toggleCheck(item, ($any($event.target)).checked)\"\n                    [disabled]=\"item.disabled\"\n                    class=\"mt-1 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                  />\n                }\n\n                @if (!isCheckable() && isSelectable()) {\n                  <input\n                    [type]=\"selectionMode() === 'single' ? 'radio' : 'checkbox'\"\n                    name=\"list-view-select\"\n                    [checked]=\"isSelected(item)\"\n                    (change)=\"toggleSelected(item, ($any($event.target)).checked)\"\n                    [disabled]=\"item.disabled\"\n                    class=\"mt-1 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800\"\n                  />\n                }\n\n                @if (isCallHistoryMode()) {\n                  <span [ngClass]=\"['mt-0.5 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-800', callTypeClass(item.callType)]\">\n                    <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                      <path [attr.d]=\"callTypeIcon(item.callType)\" />\n                    </svg>\n                  </span>\n                } @else if (item.avatarUrl) {\n                  <img [src]=\"item.avatarUrl\" [alt]=\"item.title\" class=\"h-9 w-9 rounded-xl object-cover\" loading=\"lazy\" />\n                } @else {\n                  <span class=\"inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gray-100 text-xs font-bold text-gray-600 dark:bg-gray-800 dark:text-gray-300\">\n                    {{ initials(item) }}\n                  </span>\n                }\n\n                <button type=\"button\" class=\"min-w-0 flex-1 text-left\" data-lv-row-btn=\"1\" [disabled]=\"item.disabled\" (click)=\"onItemActivate(item)\">\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <p class=\"truncate text-sm font-semibold text-gray-900 dark:text-gray-100\">{{ item.title }}</p>\n                    @if (item.meta || item.timestamp) {\n                      <span class=\"shrink-0 text-xs text-gray-500 dark:text-gray-400\">{{ item.meta || item.timestamp }}</span>\n                    }\n                  </div>\n\n                  @if (isTemplateMode()) {\n                    @if (item.description) {\n                      <p class=\"mt-1 text-xs text-gray-500 dark:text-gray-400\">{{ item.description }}</p>\n                    }\n                    @if (item.tags?.length) {\n                      <div class=\"mt-2 flex flex-wrap gap-1.5\">\n                        @for (tag of item.tags; track tag) {\n                          <span class=\"rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-300\">\n                            {{ tag }}\n                          </span>\n                        }\n                      </div>\n                    }\n                  } @else {\n                    @if (item.subtitle || item.description) {\n                      <p class=\"mt-1 truncate text-xs text-gray-500 dark:text-gray-400\">{{ item.subtitle || item.description }}</p>\n                    }\n                  }\n                </button>\n\n                <div class=\"flex shrink-0 flex-col items-end gap-1.5\">\n                  @if (item.badge) {\n                    <span class=\"rounded-full bg-primary-100 px-2 py-0.5 text-[11px] font-semibold text-primary-700 dark:bg-primary-900/35 dark:text-primary-300\">\n                      {{ item.badge }}\n                    </span>\n                  }\n                  @if (item.duration || item.amount) {\n                    <span class=\"text-xs text-gray-500 dark:text-gray-400\">{{ item.duration || item.amount }}</span>\n                  }\n                </div>\n\n                @if (hasQuickActions()) {\n                  <div class=\"hidden shrink-0 items-center gap-1 sm:flex\">\n                    @for (action of quickActions(); track action.id) {\n                      <button\n                        type=\"button\"\n                        (click)=\"onQuickAction(item, action); $event.stopPropagation()\"\n                        [ngClass]=\"[\n                          'inline-flex items-center gap-1 rounded-lg border px-2 py-1 text-[11px] font-medium transition-colors',\n                          actionToneClass(action.tone)\n                        ]\"\n                        [attr.aria-label]=\"action.label\"\n                      >\n                        @if (action.iconPath) {\n                          <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n                            <path [attr.d]=\"action.iconPath\" />\n                          </svg>\n                        }\n                        {{ action.label }}\n                      </button>\n                    }\n                  </div>\n                }\n              </div>\n\n              @if (hasQuickActions()) {\n                <div class=\"mt-2 flex flex-wrap gap-1 sm:hidden\">\n                  @for (action of quickActions(); track action.id) {\n                    <button\n                      type=\"button\"\n                      (click)=\"onQuickAction(item, action); $event.stopPropagation()\"\n                      [ngClass]=\"[\n                        'inline-flex items-center gap-1 rounded-lg border px-2 py-1 text-[11px] font-medium transition-colors',\n                        actionToneClass(action.tone)\n                      ]\"\n                      [attr.aria-label]=\"action.label\"\n                    >\n                      @if (action.iconPath) {\n                        <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n                          <path [attr.d]=\"action.iconPath\" />\n                        </svg>\n                      }\n                      {{ action.label }}\n                    </button>\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n      }\n\n      @if ((isScrollingMode() || infiniteScroll()) && (loadingMore() || hasMore())) {\n        <div class=\"border-t border-gray-200/70 px-4 py-3 text-center dark:border-gray-700/80\">\n          @if (loadingMore()) {\n            <span class=\"inline-flex items-center gap-2 text-xs font-medium text-gray-500 dark:text-gray-400\">\n              <svg class=\"h-4 w-4 animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n                <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.2\"></circle>\n                <path d=\"M12 3a9 9 0 0 1 9 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n              </svg>\n              Loading more items...\n            </span>\n          } @else {\n            <span class=\"text-xs text-gray-500 dark:text-gray-400\">Scroll to load more</span>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (isCheckable()) {\n    <div class=\"border-t border-gray-200/80 px-4 py-2 text-xs text-gray-500 dark:border-gray-700/70 dark:text-gray-400\">\n      {{ checkedCount() }} checked\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@styloviz/list-view",
+  "version": "0.1.1",
+  "description": "Market-ready list patterns: default, checklist, nested tree, virtualized, grouped, template cards, call history and infinite scrolling.",
+  "license": "MIT",
+  "author": "sazzad-bs23",
+  "homepage": "https://styloviz.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rhossain/angular-tailwind-dashboard-components.git",
+    "directory": "projects/list-view-free"
+  },
+  "bugs": {
+    "url": "https://github.com/rhossain/angular-tailwind-dashboard-components/issues"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
+    "@angular/forms": ">=21.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/styloviz-list-view.mjs",
+  "typings": "types/styloviz-list-view.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/styloviz-list-view.d.ts",
+      "default": "./fesm2022/styloviz-list-view.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/styloviz-list-view.d.ts

@@ -0,0 +1,210 @@
+import * as _angular_core from '@angular/core';
+
+type ListViewMode = 'default' | 'checklist' | 'nested' | 'virtualization' | 'scrolling' | 'grouped' | 'template' | 'call-history';
+type ListViewVariant = 'default' | 'soft' | 'outlined';
+type ListViewDensity = 'compact' | 'comfortable' | 'spacious';
+type ListViewSelectionMode = 'none' | 'single' | 'multiple';
+type ListViewCallType = 'incoming' | 'outgoing' | 'missed' | 'video';
+type ListViewActionTone = 'neutral' | 'primary' | 'danger';
+interface ListViewItem {
+    id: string | number;
+    title: string;
+    subtitle?: string;
+    description?: string;
+    group?: string;
+    badge?: string;
+    meta?: string;
+    timestamp?: string;
+    duration?: string;
+    avatarUrl?: string;
+    iconPath?: string;
+    tags?: string[];
+    amount?: string;
+    callType?: ListViewCallType;
+    unread?: boolean;
+    disabled?: boolean;
+    children?: ListViewItem[];
+}
+interface ListViewItemClickEvent {
+    item: ListViewItem;
+}
+interface ListViewCheckChangeEvent {
+    item: ListViewItem;
+    checked: boolean;
+}
+interface ListViewLoadMoreEvent {
+    visibleCount: number;
+    totalCount: number;
+}
+interface ListViewQuickAction {
+    id: string;
+    label: string;
+    iconPath?: string;
+    tone?: ListViewActionTone;
+}
+interface ListViewQuickActionClickEvent {
+    item: ListViewItem;
+    action: ListViewQuickAction;
+}
+interface ListViewBulkAction {
+    id: string;
+    label: string;
+    iconPath?: string;
+    tone?: ListViewActionTone;
+}
+interface ListViewBulkActionClickEvent {
+    action: ListViewBulkAction;
+    selectedIds: Set<string | number>;
+}
+interface ListViewGroup {
+    label: string;
+    items: ListViewItem[];
+}
+interface FlattenedItem {
+    item: ListViewItem;
+    depth: number;
+    hasChildren: boolean;
+}
+declare class SvListViewComponent {
+    /** Items to render (label, meta, optional children/avatar/actions). */
+    items: _angular_core.InputSignal<ListViewItem[]>;
+    /** Preset pattern: default, checklist, nested, card, etc. @default 'default' */
+    mode: _angular_core.InputSignal<ListViewMode>;
+    /** Visual variant. @default 'default' */
+    variant: _angular_core.InputSignal<ListViewVariant>;
+    /** Row density. @default 'comfortable' */
+    density: _angular_core.InputSignal<ListViewDensity>;
+    /** Selection behaviour: none, single or multiple. @default 'none' */
+    selectionMode: _angular_core.InputSignal<ListViewSelectionMode>;
+    /** Show checkboxes on rows. @default false */
+    checkable: _angular_core.InputSignal<boolean>;
+    /** Enable nested (tree) rows. @default false */
+    nested: _angular_core.InputSignal<boolean>;
+    /** Virtualize long lists for performance. @default false */
+    virtualized: _angular_core.InputSignal<boolean>;
+    /** Group rows under section headers. @default false */
+    grouped: _angular_core.InputSignal<boolean>;
+    /** Show a search box to filter items. @default false */
+    searchable: _angular_core.InputSignal<boolean>;
+    /** Keep group headers pinned while scrolling. @default true */
+    stickyGroupHeaders: _angular_core.InputSignal<boolean>;
+    /** Load more items as the user scrolls to the end. @default false */
+    infiniteScroll: _angular_core.InputSignal<boolean>;
+    /** Whether more items are available to load. @default false */
+    hasMore: _angular_core.InputSignal<boolean>;
+    /** Show a loading indicator while fetching more. @default false */
+    loadingMore: _angular_core.InputSignal<boolean>;
+    /** Viewport height (px) for the virtualized list. @default 360 */
+    viewportHeight: _angular_core.InputSignal<number>;
+    /** Estimated row height (px) for virtualization. @default 68 */
+    itemHeight: _angular_core.InputSignal<number>;
+    /** Extra rows rendered above/below the viewport. @default 5 */
+    overscan: _angular_core.InputSignal<number>;
+    /** Placeholder for the search box. @default 'Search list items' */
+    searchPlaceholder: _angular_core.InputSignal<string>;
+    /** Message shown when no items match. @default 'No items match your filters.' */
+    emptyMessage: _angular_core.InputSignal<string>;
+    /** Extra CSS classes for the root. */
+    customClass: _angular_core.InputSignal<string>;
+    /** Accessible label for the list. @default 'List view' */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /** Announce row actions to screen readers. @default true */
+    announceActions: _angular_core.InputSignal<boolean>;
+    /** Show per-row quick actions on hover/focus. @default false */
+    showQuickActions: _angular_core.InputSignal<boolean>;
+    /** Per-row quick actions. */
+    quickActions: _angular_core.InputSignal<ListViewQuickAction[]>;
+    /** Bulk actions for checked rows. */
+    bulkActions: _angular_core.InputSignal<ListViewBulkAction[]>;
+    /** Enable keyboard hotkeys for bulk actions. @default false */
+    enableBulkHotkeys: _angular_core.InputSignal<boolean>;
+    /** Map of hotkey → bulk action id. */
+    bulkHotkeys: _angular_core.InputSignal<Record<string, string>>;
+    /** Enable roving-tabindex keyboard navigation. @default true */
+    enableRovingFocus: _angular_core.InputSignal<boolean>;
+    /** Selected row ids (two-way). */
+    selectedIds: _angular_core.ModelSignal<Set<string | number>>;
+    /** Checked row ids (two-way). */
+    checkedIds: _angular_core.ModelSignal<Set<string | number>>;
+    /** Emitted with the clicked item. */
+    itemClick: _angular_core.OutputEmitterRef<ListViewItemClickEvent>;
+    /** Emitted with the current selection set. */
+    selectionChange: _angular_core.OutputEmitterRef<Set<string | number>>;
+    /** Emitted when a row's checkbox changes. */
+    checkChange: _angular_core.OutputEmitterRef<ListViewCheckChangeEvent>;
+    /** Emitted when more items should be loaded (infinite scroll). */
+    loadMore: _angular_core.OutputEmitterRef<ListViewLoadMoreEvent>;
+    /** Emitted when a quick action is clicked. */
+    quickActionClick: _angular_core.OutputEmitterRef<ListViewQuickActionClickEvent>;
+    /** Emitted when a bulk action is triggered. */
+    bulkActionClick: _angular_core.OutputEmitterRef<ListViewBulkActionClickEvent>;
+    readonly query: _angular_core.WritableSignal<string>;
+    readonly liveAnnouncement: _angular_core.WritableSignal<string>;
+    private readonly host;
+    private readonly scrollTop;
+    private readonly expandedIds;
+    private readonly loadingGuard;
+    readonly isCheckable: _angular_core.Signal<boolean>;
+    readonly isSelectable: _angular_core.Signal<boolean>;
+    readonly selectedCount: _angular_core.Signal<number>;
+    readonly bulkSelectedIds: _angular_core.Signal<Set<string | number>>;
+    readonly bulkSelectedCount: _angular_core.Signal<number>;
+    readonly hasQuickActions: _angular_core.Signal<boolean>;
+    readonly isNested: _angular_core.Signal<boolean>;
+    readonly isVirtualized: _angular_core.Signal<boolean>;
+    readonly isGrouped: _angular_core.Signal<boolean>;
+    readonly isTemplateMode: _angular_core.Signal<boolean>;
+    readonly isCallHistoryMode: _angular_core.Signal<boolean>;
+    readonly isScrollingMode: _angular_core.Signal<boolean>;
+    readonly filteredItems: _angular_core.Signal<ListViewItem[]>;
+    readonly flattenedNestedItems: _angular_core.Signal<FlattenedItem[]>;
+    readonly groupedItems: _angular_core.Signal<ListViewGroup[]>;
+    readonly flatItems: _angular_core.Signal<ListViewItem[]>;
+    readonly totalVirtualHeight: _angular_core.Signal<number>;
+    readonly virtualRange: _angular_core.Signal<{
+        start: number;
+        end: number;
+    }>;
+    readonly virtualItems: _angular_core.Signal<ListViewItem[]>;
+    readonly topSpacerHeight: _angular_core.Signal<number>;
+    readonly bottomSpacerHeight: _angular_core.Signal<number>;
+    readonly renderItems: _angular_core.Signal<ListViewItem[]>;
+    readonly allVisibleIds: _angular_core.Signal<(string | number)[]>;
+    readonly allChecked: _angular_core.Signal<boolean>;
+    readonly checkedCount: _angular_core.Signal<number>;
+    readonly visibleItemCount: _angular_core.Signal<number>;
+    readonly rootClasses: _angular_core.Signal<string>;
+    readonly rowPadding: _angular_core.Signal<string>;
+    onSearchInput(value: string): void;
+    onContainerScroll(event: Event): void;
+    onItemActivate(item: ListViewItem): void;
+    toggleCheck(item: ListViewItem, checked: boolean): void;
+    toggleAllChecks(checked: boolean): void;
+    toggleExpand(item: ListViewItem): void;
+    isExpanded(item: ListViewItem): boolean;
+    isSelected(item: ListViewItem): boolean;
+    isChecked(item: ListViewItem): boolean;
+    toggleSelected(item: ListViewItem, checked: boolean): void;
+    onQuickAction(item: ListViewItem, action: ListViewQuickAction): void;
+    onBulkAction(action: ListViewBulkAction): void;
+    onRootKeydown(event: KeyboardEvent): void;
+    private handleRovingFocusKey;
+    private rowButtons;
+    trackById(_: number, item: ListViewItem): string | number;
+    trackByNested(_: number, node: FlattenedItem): string | number;
+    callTypeIcon(type: ListViewCallType | undefined): string;
+    callTypeClass(type: ListViewCallType | undefined): string;
+    initials(item: ListViewItem): string;
+    nestedIndent(depth: number): string;
+    actionToneClass(tone: ListViewActionTone | undefined): string;
+    private announce;
+    private itemMatches;
+    private filterNested;
+    private flattenTree;
+    private countTreeItems;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvListViewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvListViewComponent, "sv-list-view", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "nested": { "alias": "nested"; "required": false; "isSignal": true; }; "virtualized": { "alias": "virtualized"; "required": false; "isSignal": true; }; "grouped": { "alias": "grouped"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "stickyGroupHeaders": { "alias": "stickyGroupHeaders"; "required": false; "isSignal": true; }; "infiniteScroll": { "alias": "infiniteScroll"; "required": false; "isSignal": true; }; "hasMore": { "alias": "hasMore"; "required": false; "isSignal": true; }; "loadingMore": { "alias": "loadingMore"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "announceActions": { "alias": "announceActions"; "required": false; "isSignal": true; }; "showQuickActions": { "alias": "showQuickActions"; "required": false; "isSignal": true; }; "quickActions": { "alias": "quickActions"; "required": false; "isSignal": true; }; "bulkActions": { "alias": "bulkActions"; "required": false; "isSignal": true; }; "enableBulkHotkeys": { "alias": "enableBulkHotkeys"; "required": false; "isSignal": true; }; "bulkHotkeys": { "alias": "bulkHotkeys"; "required": false; "isSignal": true; }; "enableRovingFocus": { "alias": "enableRovingFocus"; "required": false; "isSignal": true; }; "selectedIds": { "alias": "selectedIds"; "required": false; "isSignal": true; }; "checkedIds": { "alias": "checkedIds"; "required": false; "isSignal": true; }; }, { "selectedIds": "selectedIdsChange"; "checkedIds": "checkedIdsChange"; "itemClick": "itemClick"; "selectionChange": "selectionChange"; "checkChange": "checkChange"; "loadMore": "loadMore"; "quickActionClick": "quickActionClick"; "bulkActionClick": "bulkActionClick"; }, never, never, true, never>;
+}
+
+export { SvListViewComponent };
+export type { ListViewActionTone, ListViewBulkAction, ListViewBulkActionClickEvent, ListViewCallType, ListViewDensity, ListViewItem, ListViewMode, ListViewQuickAction, ListViewQuickActionClickEvent, ListViewSelectionMode, ListViewVariant };