@bootkit/ng0 0.0.0-alpha.24 → 0.0.0-alpha.25

package/fesm2022/bootkit-ng0-components-list.mjs

@@ -1,36 +1,132 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, Renderer2, DestroyRef, ChangeDetectorRef, signal, computed, ElementRef, input, booleanAttribute, EventEmitter, effect, TemplateRef, forwardRef, HostListener, Output, ContentChild, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { input, inject, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component, ChangeDetectorRef, signal, booleanAttribute, EventEmitter, effect, untracked, computed, TemplateRef, forwardRef, HostListener, Output, ContentChild, ViewChildren, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { dataSourceAttribute, DataRequest } from '@bootkit/ng0/data';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { defaultEqualityComparer, equalityComparerAttribute, defaultValueWriter, valueWriterAttribute, noopFilter, filterPredicateAttribute, CssClassAttribute, sequentialIdGenerator } from '@bootkit/ng0/common';
 import { LocalizationService, defaultObjectFormatter, objectFormatterAttribute } from '@bootkit/ng0/localization';
+import { defaultEqualityComparer, equalityComparerAttribute, defaultValueWriter, valueWriterAttribute, noopFilter, filterPredicateAttribute, trackByIndex, TrackByAttribute, CssClassAttribute, IdGeneratorAttribute, IfDirective } from '@bootkit/ng0/common';
 
 /**
- * Select component that allows users to choose an option from a dropdown list.
+ * ListItemComponent represents an individual item within a ListComponent.
+ */
+class ListItemComponent {
+    /**
+     * The value associated with the item. This can be of any type.
+     */
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    /**
+     * The id of the item.
+     */
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+    /**
+     * Reference to the parent list component
+     */
+    list = inject(ListComponent);
+    /**
+     * Reference to the host element
+     */
+    elementRef = inject(ElementRef);
+    /**
+     * Indicates whether the item is active.
+     * @returns True if the item is active, false otherwise.
+     */
+    isActive() {
+        return this.list.isActive(this);
+    }
+    /**
+     * Indicates whether the item is selected.
+     * @returns True if the item is selected, false otherwise.
+     */
+    isSelected() {
+        return this.list.isSelected(this.value());
+    }
+    /**
+     * Selects the item.
+     * @returns
+     */
+    select() {
+        return this.list.select(this.value());
+    }
+    /**
+     * Deselects the item.
+     * @returns
+     */
+    deselect() {
+        this.list.deselect(this);
+    }
+    /**
+     * Toggles the selection state of the item.
+     * @returns void
+     */
+    toggle() {
+        this.list.toggle(this.value());
+    }
+    // /**
+    //  * Indicates whether the item is disabled. Default is false.
+    //  */
+    // public readonly disabled = input(false, { transform: booleanAttribute });
+    /**
+     * Scrolls the item into view within its parent container.
+     * @param position The vertical alignment of the item after scrolling.
+     *                 Can be 'start', 'center', 'end', or 'nearest'.
+     *                 Default is 'nearest'.
+     * @param behavior The scrolling behavior.
+     */
+    scrollIntoView(position, behavior) {
+        this.elementRef.nativeElement.scrollIntoView({ block: position, behavior: behavior });
+    }
+    /**
+     * Sets focus on the item.
+     */
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    _getTabIndex() {
+        let focus = this.list.focus();
+        // if (this.list.isDisabled()) {
+        //     return undefined;
+        // }
+        if (focus == 'none' || focus == 'activeDescendant') {
+            return undefined;
+        }
+        else {
+            // focus: roving
+            return this.isActive() ? 0 : -1;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ListItemComponent, isStandalone: true, selector: "ng0-list-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active": "isActive()", "class.selected": "isSelected()", "attr.id": "id()", "attr.tabIndex": "_getTabIndex()" } }, exportAs: ["ng0ListItem"], ngImport: i0, template: "@let formatter = list.formatBy();\r\n\r\n@if(list.itemTemplate) {\r\n<ng-container *ngTemplateOutlet=\"list.itemTemplate; context: { $implicit: {ref: this, value: value()}}\" />\r\n} @else {\r\n@if(list.showSelectionIndicator()) {\r\n<input class=\"form-check-input ng0-list-selection-indicator\"\r\n       tabindex=\"-1\"\r\n       [checked]=\"isSelected()\"\r\n       [attr.type]=\"list.multiple() ? 'checkbox' : 'radio'\">\r\n}\r\n\r\n{{formatter(value())}}\r\n}", styles: ["ng0-list-item{display:flex;padding:.5rem}ng0-list-item .ng0-list-selection-indicator{margin-inline-end:.5rem}ng0-list-item.selected{background-color:var(--bs-primary);color:var(--bs-light)}ng0-list-item.active:not(.selected){background-color:color-mix(in srgb,var(--bs-primary),white 85%)}ng0-list-item:hover:not(.selected):not(.disabled):not(.active){background-color:color-mix(in srgb,var(--bs-primary),white 95%)}ng0-list-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}ng0-list-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}ng0-list-item:focus,ng0-list-item:focus-visible{outline:0;box-shadow:var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng0-list-item', exportAs: 'ng0ListItem', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        CommonModule,
+                    ], host: {
+                        '[class.active]': 'isActive()',
+                        '[class.selected]': 'isSelected()',
+                        '[attr.id]': 'id()',
+                        '[attr.tabIndex]': '_getTabIndex()'
+                    }, template: "@let formatter = list.formatBy();\r\n\r\n@if(list.itemTemplate) {\r\n<ng-container *ngTemplateOutlet=\"list.itemTemplate; context: { $implicit: {ref: this, value: value()}}\" />\r\n} @else {\r\n@if(list.showSelectionIndicator()) {\r\n<input class=\"form-check-input ng0-list-selection-indicator\"\r\n       tabindex=\"-1\"\r\n       [checked]=\"isSelected()\"\r\n       [attr.type]=\"list.multiple() ? 'checkbox' : 'radio'\">\r\n}\r\n\r\n{{formatter(value())}}\r\n}", styles: ["ng0-list-item{display:flex;padding:.5rem}ng0-list-item .ng0-list-selection-indicator{margin-inline-end:.5rem}ng0-list-item.selected{background-color:var(--bs-primary);color:var(--bs-light)}ng0-list-item.active:not(.selected){background-color:color-mix(in srgb,var(--bs-primary),white 85%)}ng0-list-item:hover:not(.selected):not(.disabled):not(.active){background-color:color-mix(in srgb,var(--bs-primary),white 95%)}ng0-list-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}ng0-list-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}ng0-list-item:focus,ng0-list-item:focus-visible{outline:0;box-shadow:var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}\n"] }]
+        }] });
+
+let uuid = 0;
+/**
+ * ListComponent is a versatile component that displays a list of items with support for single or multiple selection,
+ * custom item templates, filtering, and keyboard navigation.
  */
 class ListComponent {
-    _document = inject(DOCUMENT);
-    _ls = inject(LocalizationService);
-    _renderer = inject(Renderer2);
-    _destroyRef = inject(DestroyRef);
+    _localizationService = inject(LocalizationService);
     _changeDetector = inject(ChangeDetectorRef);
-    _value = undefined;
+    _value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : []));
     _changeCallback;
     _touchCallback;
-    _selectedIndices = new Set();
-    _items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : []));
+    _sourceItems = signal([], ...(ngDevMode ? [{ debugName: "_sourceItems" }] : []));
+    _selectedValues = new Set();
+    _activeItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_activeItem" }] : []));
+    _visibleItems;
     _isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : []));
-    _activeOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_activeOptionIndex" }] : []));
-    _itemTemplate;
-    _ariaActiveDescendant = computed(() => {
-        if (this.focus() == 'activeDescendant' && this._activeOptionIndex() > -1 && this._items().length) {
-            return this._items()[this._activeOptionIndex()].id;
-        }
-        return undefined;
-    }, ...(ngDevMode ? [{ debugName: "_ariaActiveDescendant" }] : []));
+    itemTemplate;
     /**
      * Reference to the host element
      */
@@ -66,8 +162,8 @@ class ListComponent {
      * Custom format function to convert an item to a string for display.
      * Default converts the item to a string using its toString method.
      */
-    formatBy = input(defaultObjectFormatter, ...(ngDevMode ? [{ debugName: "formatBy", transform: objectFormatterAttribute(this._ls.get()) }] : [{
-            transform: objectFormatterAttribute(this._ls.get())
+    formatBy = input(defaultObjectFormatter, ...(ngDevMode ? [{ debugName: "formatBy", transform: objectFormatterAttribute(this._localizationService.get()) }] : [{
+            transform: objectFormatterAttribute(this._localizationService.get())
         }]));
     /**
      * Custom value extractor function to extract the value of any object while writing values.
@@ -83,6 +179,23 @@ class ListComponent {
     filterBy = input(noopFilter, ...(ngDevMode ? [{ debugName: "filterBy", transform: filterPredicateAttribute }] : [{
             transform: filterPredicateAttribute
         }]));
+    /**
+     * A function that uniquely identifies each item in the list.
+     * If set to a function, it will be called with the index and item as arguments to generate the unique id.
+     * If set to a string, it will be used as the property name to extract the unique id from each item.
+     * Two predifined trackBy options are available:
+     * - '@index': uses the index of the item as its unique id.
+     * - '@item': uses the item itself as its unique id.
+     * @example
+     * trackBy="@index"
+     * trackBy="@item"
+     * trackBy="objectFieldName"
+     * [trackBy]="customTrackByFunction"
+     * @default trackByIndex
+     */
+    trackBy = input(trackByIndex, ...(ngDevMode ? [{ debugName: "trackBy", transform: TrackByAttribute }] : [{
+            transform: TrackByAttribute
+        }]));
     /**
      * CSS class or classes to apply to the list container.
      * Default is undefined.
@@ -99,188 +212,108 @@ class ListComponent {
      */
     focus = input('activeDescendant', ...(ngDevMode ? [{ debugName: "focus" }] : []));
     /**
-     * Custom id generator function to generate unique ids for each item.
-     * Default generates sequential ids with the prefix 'ng0-list-item-'.
-     * If set to undefined, no ids will be generated.
-     * @default sequentialIdGenerator('ng0-list-item-')
+     * A function that generates unique ids for each item in the list.
+     * If set to a function, it will be called with the item as an argument to generate the id.
+     * If set to undefined, no ids will be generated for the items.
+     * @default undefined
      */
-    idGenerator = input(sequentialIdGenerator('ng0-list-item-'), ...(ngDevMode ? [{ debugName: "idGenerator" }] : []));
+    idGenerator = input(undefined, ...(ngDevMode ? [{ debugName: "idGenerator", transform: IdGeneratorAttribute }] : [{
+            transform: IdGeneratorAttribute
+        }]));
     /**
      * Event emitted when the selection state of an item changes by user interaction.
      */
     selectionChange = new EventEmitter();
+    _uuid;
     constructor() {
+        this._uuid = ++uuid;
         effect(() => {
-            let source = this.source(); // track source
-            this._activeOptionIndex.set(-1);
-            this._selectedIndices.clear();
-            this._loadItems();
+            let source = this.source();
+            source.load(new DataRequest()).subscribe(res => {
+                untracked(() => {
+                    this._activeItem.set(undefined);
+                    this._sourceItems.set(res.data);
+                    this._findAndSelectItems();
+                });
+            });
         });
     }
     /**
-     * Gets the items of the list component.
-     * @returns A readonly array of the items in the list.
+     * Indicates whether an item is active.
+     * @param item
+     * @returns
      */
-    items() {
-        return [...this._items()];
+    isActive(item) {
+        return item === this._activeItem();
     }
     /**
-     * Sets an option as active
-     * @param index The index of the option to set as active.
-     * @param scrollIntoView Whether to scroll the active option into view. Default is true.
-     * @returns void
+     * Indicates whether the given value is selected.
+     * @param item
+     * @returns
      */
-    active(index, scrollIntoView = true) {
-        if (index < 0 || index >= this._items().length) {
-            throw Error('Index out of range');
-        }
-        this._activeOptionIndex.set(index);
-        if (scrollIntoView) {
-            this.scrollIntoView(this._activeOptionIndex(), 'nearest');
-        }
+    isSelected(value) {
+        return this._selectedValues.has(value);
     }
     /**
-     * Selects an option by index
-     * @param index The index of the option to select.
-     * @returns void
+     * Selects the given value.
+     * @param item
      */
-    select(index) {
-        this._verifyIndexRange(index);
-        if (this._selectedIndices.has(index)) {
-            return;
-        }
-        else {
-            if (!this.multiple()) {
-                this._selectedIndices.clear();
-            }
-            this._selectedIndices.add(index);
-        }
-        if (this.multiple()) {
-            this._value = [];
-            for (const idx of this._selectedIndices) {
-                this._value.push(this.writeBy()(this._items()[idx].value));
-            }
-        }
-        else {
-            this._value = this.writeBy()(this._items()[index].value);
+    select(value) {
+        if (!this._selectedValues.has(value())) {
+            this._selectedValues.add(value());
+            this._changeCallback?.(this._value());
         }
-        this._changeCallback?.(this._value);
-        this._changeDetector.markForCheck();
     }
     /**
-     * Deselects an option by index
-     * @param index The index of the option to deselect.
-     * @returns void
+     * Deselects the given value.
+     * @param item
      */
-    deselect(index) {
-        this._verifyIndexRange(index);
-        if (this._selectedIndices.has(index)) {
-            this._selectedIndices.delete(index);
-        }
-        else {
-            return;
-        }
-        if (this.multiple()) {
-            this._value = [];
-            for (const idx of this._selectedIndices) {
-                this._value.push(this.writeBy()(this._items()[idx].value));
-            }
-        }
-        else {
-            this._value = undefined;
-        }
-        this._changeCallback?.(this._value);
-        this._changeDetector.markForCheck();
+    deselect(value) {
+        this._selectedValues.delete(value);
+        this._changeCallback?.(this._value());
     }
     /**
-     * Toggles the selection state of an option by index
-     * @param index The index of the option to toggle.
-     * @returns void
+     * Toggles the selection state of the given value.
+     * @param item
      */
-    toggle(index) {
-        if (this.isSelected(index)) {
-            this.deselect(index);
+    toggle(value) {
+        if (this.isSelected(value)) {
+            this.deselect(value);
         }
         else {
-            this.select(index);
+            this.select(value);
         }
     }
     /**
-     * Checks if an option is selected.
-     * @param index The index of the option to check.
-     * @returns True if the option is selected, false otherwise.
+     * Deselects all items in the list.
      */
-    isSelected(index) {
-        return this._selectedIndices.has(index);
+    deselectAll() {
+        this._selectedValues.clear();
+        this._changeCallback?.(this._value());
     }
     /**
-     * Checks if an option is active.
-     * @param index The index of the option to check.
-     * @returns True if the option is active, false otherwise.
+     * Selects all items in the list. Only applicable in multiple selection mode.
      */
-    isActive(index) {
-        return this._activeOptionIndex() === index;
-    }
-    /**
-     * Sets the value of the list component.
-     * @param value The value to set. Can be a single value or an array of values in multiple selection mode.
-     */
-    set(value) {
-        this._setValue(value, true);
-    }
-    /**
-     * Gets the currently selected indices.
-     * @returns An array of the currently selected indices.
-     * @description
-     * - In single selection mode, the array will contain at most one item.
-     * - In multiple selection mode, the array can contain multiple items.
-     * - Changing the selection should be done using select(), deselect(), or toggle() methods to ensure proper event emission and state management.
-     * - Direct manipulation of the returned array will not affect the component's state.
-     */
-    selectedIndices() {
-        return Array.from(this._selectedIndices);
-    }
-    /**
-     * Scrolls the item at the specified index into view within the dropdown list.
-     * @param index The index of the item to scroll into view.
-     * @param position The vertical alignment of the item after scrolling.
-     *                 Can be 'start', 'center', 'end', or 'nearest'.
-     *                 Default is 'nearest'.
-     * @param behavior The scrolling behavior.
-     */
-    scrollIntoView(index, position, behavior) {
-        let item = this._items()[index];
-        let elm = this._document.getElementById(item.id);
-        elm.scrollIntoView({ block: position, behavior: behavior });
+    selectAll() {
+        if (this.multiple()) {
+            this._selectedValues.clear();
+            this._sourceItems().forEach(i => this._selectedValues.add(i));
+            this._changeCallback?.(this._value());
+        }
+        throw new Error('selectAll is only available in multiple selection mode.');
     }
     writeValue(value) {
-        this._setValue(value, false);
-    }
-    _setValue(value, fireCallback) {
-        if (this.multiple() && value !== null && value !== undefined && !Array.isArray(value)) {
-            throw Error('invalid value. Expected an array in multiple selection mode.');
-        }
-        let compareBy = this.compareBy();
-        let findAndSelect = (v) => {
-            let index = this._items().findIndex(i => compareBy(i.value, v));
-            if (index > -1) {
-                this._selectedIndices.add(index);
-            }
-        };
-        this._selectedIndices.clear();
         if (this.multiple()) {
-            if (Array.isArray(value)) {
-                value.forEach(i => findAndSelect(i));
+            if (value === null || value === undefined) {
+                value = [];
+            }
+            else if (!Array.isArray(value)) {
+                throw Error('invalid value. Expected an array in multiple selection mode.');
             }
         }
-        else {
-            findAndSelect(value);
-        }
-        this._value = value;
+        this._value.set(value);
+        this._findAndSelectItems();
         this._changeDetector.markForCheck();
-        if (fireCallback) {
-            this._changeCallback?.(value);
-        }
     }
     registerOnChange(fn) {
         this._changeCallback = fn;
@@ -291,150 +324,180 @@ class ListComponent {
     setDisabledState(isDisabled) {
         this._isDisabled.set(isDisabled);
     }
-    _getItemTabIndex(index) {
-        let focus = this.focus();
-        if (this._isDisabled() || focus == 'none' || focus == 'activeDescendant') {
-            return undefined;
+    _handleUserSelection(item) {
+        let value = item.value();
+        this._activeItem.set(item);
+        if (this.multiple()) {
+            if (this.isSelected(value)) {
+                this._selectedValues.delete(value);
+            }
+            else {
+                this._selectedValues.add(value);
+            }
         }
         else {
-            // roving
-            return this._activeOptionIndex() === index ? 0 : -1;
+            this._selectedValues.clear();
+            this._selectedValues.add(value);
         }
+        this._updateValue();
+        this._changeCallback?.(this._value());
+        this.selectionChange.emit({
+            item: item,
+            list: this,
+        });
+        this._changeDetector.detectChanges();
     }
-    _handleUserSelection(index, item) {
-        let selected;
-        this.active(index);
-        if (this.multiple() && this.isSelected(index)) {
-            this.deselect(index);
-            selected = false;
+    _showLoadingSppiner = computed(() => {
+        let source = this.source();
+        return source.isLoading() && source.type == 'remote';
+    }, ...(ngDevMode ? [{ debugName: "_showLoadingSppiner" }] : []));
+    _findAndSelectItems() {
+        let value = this._value();
+        let compareBy = this.compareBy();
+        let findAndSelect = (v) => {
+            let index = this._sourceItems().findIndex(i => compareBy(i, v));
+            if (index > -1) {
+                let item = this._sourceItems().at(index);
+                this._selectedValues.add(item);
+            }
+        };
+        if (this.multiple()) {
+            if (Array.isArray(value)) {
+                value.forEach(v => findAndSelect(v));
+            }
         }
         else {
-            this.select(index);
-            selected = true;
+            findAndSelect(value);
         }
-        this.selectionChange.emit({
-            value: item.value,
-            index: index,
-            selected: selected,
-            selectedIndices: this.selectedIndices(),
-            list: this,
-        });
+        this._changeDetector.markForCheck();
     }
-    _loadItems() {
-        var r = new DataRequest();
-        this.source().load(r).pipe(takeUntilDestroyed(this._destroyRef)).subscribe(res => {
-            let items = this._createItems(res.data);
-            this._items().push(...items);
-        });
-        // listen to changes
-        this.source().change.subscribe(e => {
-            let items = this._items();
-            e.changes.forEach(change => {
-                switch (change.type) {
-                    case 'push':
-                        this._items().push(...this._createItems(change.items));
-                        break;
-                    // case 'replace':
-                    //     change.replacements.forEach(({ index, value }) => {
-                    //         items[index] = { id: this.idGenerator()(value), value };
-                    //     });
-                    //     break;
-                    // case 'remove':
-                    //     this._activeOptionIndex.set(-1);
-                    //     change.indices.forEach(i => {
-                    //         this.deselect(i);
-                    //         items.splice(i, 1)
-                    //     });
-                    //     break;
-                }
-                this._changeDetector.markForCheck();
+    _updateValue() {
+        if (this.multiple()) {
+            let values = [];
+            this._selectedValues.forEach(v => {
+                values.push(this.writeBy()(v));
             });
-        });
-    }
-    _createItems(items) {
-        let idGenerator = this.idGenerator();
-        return items.map(x => ({
-            id: idGenerator(x),
-            value: x,
-        }));
+            this._value.set(values);
+        }
+        else {
+            if (this._selectedValues.size > 0) {
+                let first = this._selectedValues.values().next().value;
+                this._value.set(this.writeBy()(first));
+            }
+            else {
+                this._value.set(undefined);
+            }
+        }
     }
-    _onHostClick() {
-        if (this.focus() != 'none') {
-            this.elementRef.nativeElement.focus();
+    _hostAriaActiveDescendant = computed(() => {
+        if (this._activeItem() && !this._isDisabled() && this.focus() == 'activeDescendant') {
+            return this._activeItem().id();
+        }
+        return undefined;
+    }, ...(ngDevMode ? [{ debugName: "_hostAriaActiveDescendant" }] : []));
+    _hostTabIndex = computed(() => {
+        let isDisabled = this._isDisabled(); // track _isDisabled
+        let activeItem = this._activeItem(); // track _activeItem
+        if (isDisabled) {
+            return undefined;
+        }
+        switch (this.focus()) {
+            case 'none':
+                return undefined;
+            case 'activeDescendant':
+                return 0;
+            case 'roving':
+                return activeItem ? undefined : 0;
         }
+    }, ...(ngDevMode ? [{ debugName: "_hostTabIndex" }] : []));
+    _onHostClick() {
+        // if (this.focus() != 'none') {
+        //     this.elementRef.nativeElement.focus();
+        // }
     }
-    _onKeydown(e, firedByFilter = false) {
+    _onHostBlur() {
+        this._touchCallback?.();
+    }
+    _onKeydown(e) {
         if (this._isDisabled())
             return;
-        let optionsCount = this._items().length;
-        if (optionsCount == 0) {
+        let visibleItemsCount = this._visibleItems.length;
+        if (visibleItemsCount == 0) {
             return;
         }
-        let index = this._activeOptionIndex();
+        let activeItemindex = this._visibleItems.toArray().findIndex(i => i === this._activeItem());
+        console.log(this._activeItem(), activeItemindex);
         switch (e.key) {
             case 'ArrowDown':
-                if (index < optionsCount - 1) {
-                    this.active(index + 1);
+                if (activeItemindex == -1) {
+                    const first = this._visibleItems.get(0);
+                    this._activeItem.set(first);
+                }
+                else if (activeItemindex < visibleItemsCount - 1) {
+                    const next = this._visibleItems.get(activeItemindex + 1);
+                    this._activeItem.set(next);
                 }
                 e.preventDefault();
                 break;
             case 'ArrowUp':
-                if (index > 0) {
-                    this.active(index - 1);
+                if (activeItemindex == -1) {
+                    const last = this._visibleItems.get(visibleItemsCount - 1);
+                    this._activeItem.set(last);
+                }
+                else if (activeItemindex > 0) {
+                    const previous = this._visibleItems.get(activeItemindex - 1);
+                    this._activeItem.set(previous);
                 }
                 e.preventDefault();
                 break;
-            case 'Tab': // Go to next item if roving focus is enabled
-                // if (this.focus() === 'roving' && index < optionsCount - 1) {
-                //     this.active(index + 1);
-                //     e.preventDefault();
-                // }
-                break;
             case 'Enter':
-                if (index > -1) {
-                    this._handleUserSelection(index, this._items()[index]);
+                if (activeItemindex > -1) {
+                    this._handleUserSelection(this._visibleItems.get(activeItemindex));
                 }
-                // e.preventDefault();
                 break;
             case 'Home':
-                this.active(0);
+                const first = this._visibleItems.get(0);
+                this._activeItem.set(first);
                 e.preventDefault();
                 break;
             case 'End':
-                this.active(optionsCount - 1);
+                const last = this._visibleItems.get(visibleItemsCount - 1);
+                this._activeItem.set(last);
                 e.preventDefault();
                 break;
         }
-    }
-    _verifyIndexRange(index) {
-        let optionsCount = this._items().length;
-        if (optionsCount == 0 || index < 0 || index > optionsCount - 1) {
-            throw new Error('Index out of range');
+        if (this.focus() === 'roving') {
+            this._activeItem()?.focus();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ListComponent, isStandalone: true, selector: "ng0-list", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showSelectionIndicator: { classPropertyName: "showSelectionIndicator", publicName: "showSelectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, compareBy: { classPropertyName: "compareBy", publicName: "compareBy", isSignal: true, isRequired: false, transformFunction: null }, formatBy: { classPropertyName: "formatBy", publicName: "formatBy", isSignal: true, isRequired: false, transformFunction: null }, writeBy: { classPropertyName: "writeBy", publicName: "writeBy", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, focus: { classPropertyName: "focus", publicName: "focus", isSignal: true, isRequired: false, transformFunction: null }, idGenerator: { classPropertyName: "idGenerator", publicName: "idGenerator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "click": "_onHostClick()", "keydown": "_onKeydown($event)" }, properties: { "class.ng0-list-loading": "source().isLoading()", "attr.aria-activedescendant": "_ariaActiveDescendant()", "attr.disabled": "_isDisabled()", "attr.tabindex": "_isDisabled() || focus() === \"none\" ? undefined : \"0\"", "attr.aria-disabled": "_isDisabled()" } }, providers: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ListComponent, isStandalone: true, selector: "ng0-list", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showSelectionIndicator: { classPropertyName: "showSelectionIndicator", publicName: "showSelectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, compareBy: { classPropertyName: "compareBy", publicName: "compareBy", isSignal: true, isRequired: false, transformFunction: null }, formatBy: { classPropertyName: "formatBy", publicName: "formatBy", isSignal: true, isRequired: false, transformFunction: null }, writeBy: { classPropertyName: "writeBy", publicName: "writeBy", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, focus: { classPropertyName: "focus", publicName: "focus", isSignal: true, isRequired: false, transformFunction: null }, idGenerator: { classPropertyName: "idGenerator", publicName: "idGenerator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "click": "_onHostClick()", "blur": "_onHostBlur()", "keydown": "_onKeydown($event)" }, properties: { "class.ng0-list-loading": "source().isLoading()", "attr.aria-activedescendant": "_hostAriaActiveDescendant()", "attr.disabled": "_isDisabled() ? \"\" : undefined", "attr.aria-disabled": "_isDisabled() ? \"\" : undefined", "attr.tabindex": "_hostTabIndex()" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ListComponent),
                 multi: true
-            }], queries: [{ propertyName: "_itemTemplate", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["ng0List"], ngImport: i0, template: "@let formatter = formatBy();\r\n@let filter = filterBy();\r\n\r\n\r\n@for (item of _items(); track item.id) {\r\n@let selected= isSelected($index);\r\n@let active= isActive($index);\r\n\r\n@if(filter(item)) {\r\n<div\r\n     [ngClass]=\"itemClass()(item)\"\r\n     [attr.id]=\"item.id\"\r\n     [class.active]=\"active\"\r\n     [class.selected]=\"selected\"\r\n     [attr.tabIndex]=\"_getItemTabIndex($index)\"\r\n     (click)=\"_handleUserSelection($index, item)\">\r\n\r\n       @if(_itemTemplate) {\r\n       <ng-container *ngTemplateOutlet=\"_itemTemplate; context: { $implicit: {\r\n              id: item.id,\r\n              value: item.value,\r\n              selected: selected,       \r\n              active: active,\r\n       }}\" />\r\n       } @else {\r\n\r\n       @if(showSelectionIndicator()) {\r\n       <input class=\"form-check-input ng0-list-selection-indicator\"\r\n              tabindex=\"-1\"\r\n              [checked]=\"selected\"\r\n              [attr.type]=\"multiple() ? 'checkbox' : 'radio'\"\r\n              [attr.name]=\"item.id\"\r\n              [attr.id]=\"item.id\">\r\n       }\r\n\r\n       {{formatter(item.value)}}\r\n\r\n       }\r\n</div>\r\n}\r\n}", styles: [":host{display:block;overflow-y:auto;overflow-x:hidden;-webkit-user-select:none;user-select:none;border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius)}:host.disabled{background-color:var(--bs-secondary-bg)}:host .ng0-list-item{display:flex;padding:.5rem}:host .ng0-list-item .ng0-list-selection-indicator{margin-inline-end:.5rem}:host .ng0-list-item.selected{background-color:var(--bs-primary);color:var(--bs-light)}:host .ng0-list-item.active:not(.selected){background-color:var(--bs-gray-300)}:host .ng0-list-item:hover:not(.selected):not(.disabled):not(.active){background-color:var(--bs-gray-100)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            }], queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "_visibleItems", predicate: ListItemComponent, descendants: true }], exportAs: ["ng0List"], ngImport: i0, template: "@let filter = filterBy();\r\n\r\n@for (item of _sourceItems(); track trackBy()($index, item)) {\r\n<ng0-list-item *ng0If=\"filter(item)\"\r\n               #listItem=\"ng0ListItem\"\r\n               [id]=\"idGenerator()?.(item)\"\r\n               [value]=\"item\"\r\n               [ngClass]=\"itemClass()(item)\"\r\n               (click)=\"_handleUserSelection(listItem);\">\r\n</ng0-list-item>\r\n}\r\n\r\n@if(_showLoadingSppiner()) {\r\n@if(_sourceItems().length == 0) {\r\n<div style=\"text-align: center; padding: 0.5rem 0;\">\r\n       <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n</div>\r\n}@else {\r\n<div class=\"ng0-list-loading-cover\">\r\n       <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n</div>\r\n}\r\n}\r\n\r\n<ng-template #spinner>\r\n       <div class=\"spinner-border spinner-sm text-primary ng0-list-loading-indicator\" role=\"status\">\r\n              <span class=\"visually-hidden\">Loading...</span>\r\n       </div>\r\n</ng-template>", styles: ["ng0-list{display:block;position:relative;-webkit-user-select:none;user-select:none;border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);min-height:1rem}ng0-list:focus,ng0-list:focus-visible{outline:0;box-shadow:var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}ng0-list[disabled],ng0-list.disabled{opacity:.5;pointer-events:none}ng0-list .ng0-list-loading-cover{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffffb3;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IfDirective, selector: "[ng0If]", inputs: ["ng0If"], exportAs: ["ng0If"] }, { kind: "component", type: ListItemComponent, selector: "ng0-list-item", inputs: ["value", "id"], exportAs: ["ng0ListItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng0-list', exportAs: 'ng0List', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'ng0-list', exportAs: 'ng0List', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         CommonModule,
+                        IfDirective,
+                        ListItemComponent
                     ], providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ListComponent),
                             multi: true
                         }], host: {
                         '[class.ng0-list-loading]': 'source().isLoading()',
-                        '[attr.aria-activedescendant]': '_ariaActiveDescendant()',
-                        '[attr.disabled]': '_isDisabled()',
-                        '[attr.tabindex]': '_isDisabled() || focus() === "none" ? undefined : "0"',
-                        '[attr.aria-disabled]': '_isDisabled()'
-                    }, template: "@let formatter = formatBy();\r\n@let filter = filterBy();\r\n\r\n\r\n@for (item of _items(); track item.id) {\r\n@let selected= isSelected($index);\r\n@let active= isActive($index);\r\n\r\n@if(filter(item)) {\r\n<div\r\n     [ngClass]=\"itemClass()(item)\"\r\n     [attr.id]=\"item.id\"\r\n     [class.active]=\"active\"\r\n     [class.selected]=\"selected\"\r\n     [attr.tabIndex]=\"_getItemTabIndex($index)\"\r\n     (click)=\"_handleUserSelection($index, item)\">\r\n\r\n       @if(_itemTemplate) {\r\n       <ng-container *ngTemplateOutlet=\"_itemTemplate; context: { $implicit: {\r\n              id: item.id,\r\n              value: item.value,\r\n              selected: selected,       \r\n              active: active,\r\n       }}\" />\r\n       } @else {\r\n\r\n       @if(showSelectionIndicator()) {\r\n       <input class=\"form-check-input ng0-list-selection-indicator\"\r\n              tabindex=\"-1\"\r\n              [checked]=\"selected\"\r\n              [attr.type]=\"multiple() ? 'checkbox' : 'radio'\"\r\n              [attr.name]=\"item.id\"\r\n              [attr.id]=\"item.id\">\r\n       }\r\n\r\n       {{formatter(item.value)}}\r\n\r\n       }\r\n</div>\r\n}\r\n}", styles: [":host{display:block;overflow-y:auto;overflow-x:hidden;-webkit-user-select:none;user-select:none;border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius)}:host.disabled{background-color:var(--bs-secondary-bg)}:host .ng0-list-item{display:flex;padding:.5rem}:host .ng0-list-item .ng0-list-selection-indicator{margin-inline-end:.5rem}:host .ng0-list-item.selected{background-color:var(--bs-primary);color:var(--bs-light)}:host .ng0-list-item.active:not(.selected){background-color:var(--bs-gray-300)}:host .ng0-list-item:hover:not(.selected):not(.disabled):not(.active){background-color:var(--bs-gray-100)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { _itemTemplate: [{
+                        '[attr.aria-activedescendant]': '_hostAriaActiveDescendant()',
+                        '[attr.disabled]': '_isDisabled() ? "" : undefined',
+                        '[attr.aria-disabled]': '_isDisabled() ? "" : undefined',
+                        '[attr.tabindex]': '_hostTabIndex()',
+                    }, template: "@let filter = filterBy();\r\n\r\n@for (item of _sourceItems(); track trackBy()($index, item)) {\r\n<ng0-list-item *ng0If=\"filter(item)\"\r\n               #listItem=\"ng0ListItem\"\r\n               [id]=\"idGenerator()?.(item)\"\r\n               [value]=\"item\"\r\n               [ngClass]=\"itemClass()(item)\"\r\n               (click)=\"_handleUserSelection(listItem);\">\r\n</ng0-list-item>\r\n}\r\n\r\n@if(_showLoadingSppiner()) {\r\n@if(_sourceItems().length == 0) {\r\n<div style=\"text-align: center; padding: 0.5rem 0;\">\r\n       <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n</div>\r\n}@else {\r\n<div class=\"ng0-list-loading-cover\">\r\n       <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n</div>\r\n}\r\n}\r\n\r\n<ng-template #spinner>\r\n       <div class=\"spinner-border spinner-sm text-primary ng0-list-loading-indicator\" role=\"status\">\r\n              <span class=\"visually-hidden\">Loading...</span>\r\n       </div>\r\n</ng-template>", styles: ["ng0-list{display:block;position:relative;-webkit-user-select:none;user-select:none;border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);min-height:1rem}ng0-list:focus,ng0-list:focus-visible{outline:0;box-shadow:var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}ng0-list[disabled],ng0-list.disabled{opacity:.5;pointer-events:none}ng0-list .ng0-list-loading-cover{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffffb3;display:flex;align-items:center;justify-content:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _visibleItems: [{
+                type: ViewChildren,
+                args: [ListItemComponent]
+            }], itemTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef]
             }], selectionChange: [{
@@ -442,6 +505,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
             }], _onHostClick: [{
                 type: HostListener,
                 args: ['click']
+            }], _onHostBlur: [{
+                type: HostListener,
+                args: ['blur']
             }], _onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]