@bootkit/ng0 0.0.0-alpha.21 → 0.0.0-alpha.23

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

@@ -1,31 +1,40 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, ChangeDetectorRef, signal, input, booleanAttribute, TemplateRef, forwardRef, HostListener, ContentChild, ChangeDetectionStrategy, Component, NgModule } 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 * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { dataSourceAttribute, defaultBooleanValueComparer, BooleanValueComparerAttribute, defaultValueExtractor, ValueExtractorAttribute, stringFilter, FilterPredicateAttribute, DataRequest } from '@bootkit/ng0/data';
+import { dataSourceAttribute, DataRequest } from '@bootkit/ng0/data';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { CssClassAttribute, sequentialIdGenerator } from '@bootkit/ng0/common';
-import { LocalizationService, defaultValueFormatter, ValueFormatterAttribute } from '@bootkit/ng0/localization';
+import { defaultEqualityComparer, equalityComparerAttribute, defaultValueWriter, valueWriterAttribute, noopFilter, filterPredicateAttribute, CssClassAttribute, sequentialIdGenerator } from '@bootkit/ng0/common';
+import { LocalizationService, defaultObjectFormatter, objectFormatterAttribute } from '@bootkit/ng0/localization';
 
 /**
  * Select component that allows users to choose an option from a dropdown list.
  */
 class ListComponent {
-    _el;
-    _renderer;
-    _destroyRef;
     _document = inject(DOCUMENT);
     _ls = inject(LocalizationService);
+    _renderer = inject(Renderer2);
+    _destroyRef = inject(DestroyRef);
     _changeDetector = inject(ChangeDetectorRef);
-    _value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : []));
-    _onChangeCallback;
-    _onTouchedCallback;
+    _value = undefined;
+    _changeCallback;
+    _touchCallback;
+    _selectedIndices = new Set();
     _items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : []));
     _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" }] : []));
+    /**
+     * Reference to the host element
+     */
+    elementRef = inject((ElementRef));
     /**
      * The data source for the select component.
      * This can be an array of data, a function that returns an observable of data,
@@ -44,80 +53,192 @@ class ListComponent {
      * Indicates whether to show selection indicator (checkbox/radio) next to each item.
      * Default is false.
      */
-    showIndicator = input(false, ...(ngDevMode ? [{ debugName: "showIndicator", transform: booleanAttribute }] : [{
+    showSelectionIndicator = input(false, ...(ngDevMode ? [{ debugName: "showSelectionIndicator", transform: booleanAttribute }] : [{
             transform: booleanAttribute
         }]));
     /**
     * A custom comparer function or the name of a field for comparing two objects.
     */
-    compareBy = input(defaultBooleanValueComparer, ...(ngDevMode ? [{ debugName: "compareBy", transform: BooleanValueComparerAttribute }] : [{
-            transform: BooleanValueComparerAttribute
+    compareBy = input(defaultEqualityComparer, ...(ngDevMode ? [{ debugName: "compareBy", transform: equalityComparerAttribute }] : [{
+            transform: equalityComparerAttribute
         }]));
     /**
      * 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(defaultValueFormatter, ...(ngDevMode ? [{ debugName: "formatBy", transform: ValueFormatterAttribute(this._ls.get()) }] : [{
-            transform: ValueFormatterAttribute(this._ls.get())
+    formatBy = input(defaultObjectFormatter, ...(ngDevMode ? [{ debugName: "formatBy", transform: objectFormatterAttribute(this._ls.get()) }] : [{
+            transform: objectFormatterAttribute(this._ls.get())
         }]));
     /**
      * Custom value extractor function to extract the value of any object while writing values.
      */
-    writeBy = input(defaultValueExtractor, ...(ngDevMode ? [{ debugName: "writeBy", transform: ValueExtractorAttribute }] : [{
-            transform: ValueExtractorAttribute
+    writeBy = input(defaultValueWriter, ...(ngDevMode ? [{ debugName: "writeBy", transform: valueWriterAttribute }] : [{
+            transform: valueWriterAttribute
         }]));
     /**
      * A custom filter predicate function to filter items based on a search string.
      * Default checks if the item's string representation contains the filter string (case-insensitive).
      * The filter predicate can be a function or a string representing the property name to filter.
      */
-    filterBy = input(stringFilter, ...(ngDevMode ? [{ debugName: "filterBy", transform: FilterPredicateAttribute }] : [{
-            transform: FilterPredicateAttribute
+    filterBy = input(noopFilter, ...(ngDevMode ? [{ debugName: "filterBy", transform: filterPredicateAttribute }] : [{
+            transform: filterPredicateAttribute
         }]));
     /**
      * CSS class or classes to apply to the list container.
      * Default is undefined.
      */
-    itemClass = input((item) => undefined, ...(ngDevMode ? [{ debugName: "itemClass", transform: CssClassAttribute }] : [{
+    itemClass = input((item) => ['ng0-list-item'], ...(ngDevMode ? [{ debugName: "itemClass", transform: CssClassAttribute }] : [{
             transform: CssClassAttribute
         }]));
+    /**
+     * Defines the focus behavior of the list component.
+     * - 'none': No keyboard interaction is possible. The list cannot be focused.
+     * - 'roving': Roving tabindex is enabled. The list can be focused and the active item is tabbable.
+     * - 'activeDescendant': The list can be focused, but no item is tabbable. The active item is indicated using aria-activedescendant.
+     * @default 'activeDescendant'.
+     */
     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-')
+     */
     idGenerator = input(sequentialIdGenerator('ng0-list-item-'), ...(ngDevMode ? [{ debugName: "idGenerator" }] : []));
-    constructor(_el, _renderer, _destroyRef) {
-        this._el = _el;
-        this._renderer = _renderer;
-        this._destroyRef = _destroyRef;
+    /**
+     * Event emitted when the selection state of an item changes by user interaction.
+     */
+    selectionChange = new EventEmitter();
+    constructor() {
+        effect(() => {
+            let source = this.source(); // track source
+            this._activeOptionIndex.set(-1);
+            this._selectedIndices.clear();
+            this._loadItems();
+        });
     }
-    ngOnInit() {
-        this._loadItems();
-        this._listenToDataSourceChanges();
+    /**
+     * Gets the items of the list component.
+     * @returns A readonly array of the items in the list.
+     */
+    items() {
+        return [...this._items()];
     }
     /**
      * 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
      */
-    active(index) {
-        if (index < 0) {
-            throw Error();
+    active(index, scrollIntoView = true) {
+        if (index < 0 || index >= this._items().length) {
+            throw Error('Index out of range');
         }
         this._activeOptionIndex.set(index);
-        // this.scrollItemIntoView(this._activeOptionIndex(), 'nearest');
+        if (scrollIntoView) {
+            this.scrollIntoView(this._activeOptionIndex(), 'nearest');
+        }
+    }
+    /**
+     * Selects an option by index
+     * @param index The index of the option to select.
+     * @returns void
+     */
+    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);
+        }
+        this._changeCallback?.(this._value);
+        this._changeDetector.markForCheck();
     }
     /**
-     * Filters the list items based on the provided criteria.
-     * @param params The filter parameters to apply.
+     * Deselects an option by index
+     * @param index The index of the option to deselect.
      * @returns void
      */
-    filter(...params) {
-        let filterBy = this.filterBy();
-        this._items().forEach(x => x.filtered = !filterBy(x.value, ...params));
+    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();
     }
     /**
-     * Clears any applied filters and shows all items in the list.
+     * Toggles the selection state of an option by index
+     * @param index The index of the option to toggle.
      * @returns void
      */
-    clearFilter() {
-        this._items().forEach(x => x.filtered = false);
+    toggle(index) {
+        if (this.isSelected(index)) {
+            this.deselect(index);
+        }
+        else {
+            this.select(index);
+        }
+    }
+    /**
+     * Checks if an option is selected.
+     * @param index The index of the option to check.
+     * @returns True if the option is selected, false otherwise.
+     */
+    isSelected(index) {
+        return this._selectedIndices.has(index);
+    }
+    /**
+     * Checks if an option is active.
+     * @param index The index of the option to check.
+     * @returns True if the option is active, false otherwise.
+     */
+    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.
@@ -127,72 +248,121 @@ class ListComponent {
      *                 Default is 'nearest'.
      * @param behavior The scrolling behavior.
      */
-    scrollItemIntoView(index, position, behavior) {
+    scrollIntoView(index, position, behavior) {
         let item = this._items()[index];
         let elm = this._document.getElementById(item.id);
         elm.scrollIntoView({ block: position, behavior: behavior });
     }
-    /**
-     * Toggles the selection of an option by index
-     */
-    toggleSelection(index) {
-        let optionsCount = this._items().length;
-        if (optionsCount == 0 || index < 0 || index > optionsCount - 1) {
-            throw new Error('Index out of range');
-        }
-        let item = this._items()[index];
-        let writeValueBy = this.writeBy();
-        if (this.multiple()) {
-            item.selected = !item.selected;
-            let selectedValues = this._items().filter(x => x.selected).map(x => (x.value));
-            this._value.set(selectedValues);
+    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.');
         }
-        else {
-            if (item.selected) {
-                return;
+        let compareBy = this.compareBy();
+        let findAndSelect = (v) => {
+            let index = this._items().findIndex(i => compareBy(i.value, v));
+            if (index > -1) {
+                this._selectedIndices.add(index);
             }
-            let itemValue = writeValueBy(item.value);
-            this._items().forEach(x => x.selected = false);
-            item.selected = true;
-            this._value.set(itemValue);
-        }
-        this._onChangeCallback(this._value());
-    }
-    writeValue(v) {
-        let value;
+        };
+        this._selectedIndices.clear();
         if (this.multiple()) {
-            if (Array.isArray(v)) {
-                value = v;
-            }
-            else if (v === null || v === undefined) {
-                value = [];
-            }
-            else {
-                throw Error('Provide an array or null as the value ng0-list component');
+            if (Array.isArray(value)) {
+                value.forEach(i => findAndSelect(i));
             }
         }
         else {
-            value = v;
+            findAndSelect(value);
         }
-        this._value.set(value);
-        // Update selection state of items
-        let compareBy = this.compareBy();
-        if (this.multiple()) {
-            this._items().forEach(x => x.selected = value.some(y => compareBy(x.value, y)));
-        }
-        else {
-            this._items().forEach(x => x.selected = compareBy(x.value, value));
+        this._value = value;
+        this._changeDetector.markForCheck();
+        if (fireCallback) {
+            this._changeCallback?.(value);
         }
     }
     registerOnChange(fn) {
-        this._onChangeCallback = fn;
+        this._changeCallback = fn;
     }
     registerOnTouched(fn) {
-        this._onTouchedCallback = fn;
+        this._touchCallback = fn;
     }
     setDisabledState(isDisabled) {
         this._isDisabled.set(isDisabled);
     }
+    _getItemTabIndex(index) {
+        let focus = this.focus();
+        if (this._isDisabled() || focus == 'none' || focus == 'activeDescendant') {
+            return undefined;
+        }
+        else {
+            // roving
+            return this._activeOptionIndex() === index ? 0 : -1;
+        }
+    }
+    _handleUserSelection(index, item) {
+        let selected;
+        this.active(index);
+        if (this.multiple() && this.isSelected(index)) {
+            this.deselect(index);
+            selected = false;
+        }
+        else {
+            this.select(index);
+            selected = true;
+        }
+        this.selectionChange.emit({
+            value: item.value,
+            index: index,
+            selected: selected,
+            selectedIndices: this.selectedIndices(),
+            list: this,
+        });
+    }
+    _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();
+            });
+        });
+    }
+    _createItems(items) {
+        let idGenerator = this.idGenerator();
+        return items.map(x => ({
+            id: idGenerator(x),
+            value: x,
+        }));
+    }
+    _onHostClick() {
+        if (this.focus() != 'none') {
+            this.elementRef.nativeElement.focus();
+        }
+    }
     _onKeydown(e, firedByFilter = false) {
         if (this._isDisabled())
             return;
@@ -200,22 +370,31 @@ class ListComponent {
         if (optionsCount == 0) {
             return;
         }
+        let index = this._activeOptionIndex();
         switch (e.key) {
             case 'ArrowDown':
-                if (this._activeOptionIndex() < optionsCount - 1) {
-                    this.active(this._activeOptionIndex() + 1);
+                if (index < optionsCount - 1) {
+                    this.active(index + 1);
                 }
                 e.preventDefault();
                 break;
             case 'ArrowUp':
-                if (this._activeOptionIndex() > 0) {
-                    this.active(this._activeOptionIndex() - 1);
+                if (index > 0) {
+                    this.active(index - 1);
                 }
                 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':
-                this.toggleSelection(this._activeOptionIndex());
-                e.preventDefault();
+                if (index > -1) {
+                    this._handleUserSelection(index, this._items()[index]);
+                }
+                // e.preventDefault();
                 break;
             case 'Home':
                 this.active(0);
@@ -227,78 +406,42 @@ class ListComponent {
                 break;
         }
     }
-    _loadItems() {
-        var r = new DataRequest();
-        this.source().load(r).pipe(takeUntilDestroyed(this._destroyRef)).subscribe(res => {
-            this._insertItems(0, ...res.data);
-        });
-    }
-    _listenToDataSourceChanges() {
-        this.source().change.subscribe(e => {
-            let options = this._items();
-            e.changes.forEach(change => {
-                switch (change.type) {
-                    case 'insert':
-                        this._insertItems(change.index, ...change.items);
-                        break;
-                    case 'replace':
-                        options[change.index].value = change.value;
-                        break;
-                    case 'remove':
-                        options.splice(change.index, change.count);
-                }
-            });
-            // this._changeDetector.markForCheck();
-        });
-    }
-    _insertItems(index, ...items) {
-        // let filter = this.filterBy()()
-        let idGenerator = this.idGenerator();
-        let compareBy = this.compareBy();
-        let value = this._value();
-        let isItemSelected = this.multiple() && Array.isArray(value) ?
-            (item) => value.some(x => compareBy(x.value, item)) :
-            (item) => compareBy(value, item);
-        var options = items.map(x => ({
-            id: idGenerator ? idGenerator(x) : undefined,
-            value: x,
-            selected: isItemSelected(x),
-            filtered: false,
-        }));
-        if (Number.isInteger(index)) {
-            this._items().splice(index, 0, ...options);
-        }
-        else {
-            this._items().push(...options);
+    _verifyIndexRange(index) {
+        let optionsCount = this._items().length;
+        if (optionsCount == 0 || index < 0 || index > optionsCount - 1) {
+            throw new Error('Index out of range');
         }
-        this._changeDetector.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.DestroyRef }], 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 }, showIndicator: { classPropertyName: "showIndicator", publicName: "showIndicator", 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 } }, host: { listeners: { "keydown": "_onKeydown($event)" }, properties: { "class.ng0-list-loading": "source().isLoading()", "attr.aria-activedescendant": "_activeOptionIndex() > -1 ? (_items()[_activeOptionIndex()].id) : undefined", "attr.disabled": "_isDisabled()", "attr.tabindex": "_isDisabled() || focus() === \"none\" ? \"-1\" : \"0\"", "attr.aria-disabled": "_isDisabled()" } }, providers: [{
+    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: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ListComponent),
                 multi: true
-            }], queries: [{ propertyName: "_itemTemplate", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["ng0List"], ngImport: i0, template: "@for (i of _items(); track $index) {\r\n@if(!i.filtered) {\r\n<div class=\"ng0-list-item\"\r\n     [ngClass]=\"itemClass()(i)\"\r\n     [attr.id]=\"i.id\"\r\n     [class.ng0-list-item-active]=\"$index == _activeOptionIndex()\"\r\n     [class.ng0-list-item-selected]=\"i.selected\"\r\n     (click)=\"toggleSelection($index);\">\r\n\r\n    @if(_itemTemplate) {\r\n    <ng-container *ngTemplateOutlet=\"_itemTemplate; context: { $implicit: i}\" />\r\n    } @else {\r\n\r\n    @if(showIndicator()) {\r\n    <input class=\"form-check-input ng0-list-item-indicator\"\r\n           [checked]=\"i.selected\"\r\n           [attr.type]=\"multiple() ? 'checkbox' : 'radio'\"\r\n           [attr.name]=\"i.id\"\r\n           [attr.id]=\"i.id\">\r\n    }\r\n\r\n    {{formatBy()(i.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}:host.disabled{background-color:var(--bs-secondary-bg)}.ng0-list-item{display:flex;padding-inline-start:.5rem}.ng0-list-item .ng0-list-item-indicator{margin-inline-end:.5rem}\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: "ngmodule", type: OverlayModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            }], 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 });
 }
 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: [
                         CommonModule,
-                        OverlayModule,
                     ], providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ListComponent),
                             multi: true
                         }], host: {
                         '[class.ng0-list-loading]': 'source().isLoading()',
-                        '[attr.aria-activedescendant]': '_activeOptionIndex() > -1 ? (_items()[_activeOptionIndex()].id) : undefined',
+                        '[attr.aria-activedescendant]': '_ariaActiveDescendant()',
                         '[attr.disabled]': '_isDisabled()',
-                        '[attr.tabindex]': '_isDisabled() || focus() === "none" ? "-1" : "0"',
+                        '[attr.tabindex]': '_isDisabled() || focus() === "none" ? undefined : "0"',
                         '[attr.aria-disabled]': '_isDisabled()'
-                    }, template: "@for (i of _items(); track $index) {\r\n@if(!i.filtered) {\r\n<div class=\"ng0-list-item\"\r\n     [ngClass]=\"itemClass()(i)\"\r\n     [attr.id]=\"i.id\"\r\n     [class.ng0-list-item-active]=\"$index == _activeOptionIndex()\"\r\n     [class.ng0-list-item-selected]=\"i.selected\"\r\n     (click)=\"toggleSelection($index);\">\r\n\r\n    @if(_itemTemplate) {\r\n    <ng-container *ngTemplateOutlet=\"_itemTemplate; context: { $implicit: i}\" />\r\n    } @else {\r\n\r\n    @if(showIndicator()) {\r\n    <input class=\"form-check-input ng0-list-item-indicator\"\r\n           [checked]=\"i.selected\"\r\n           [attr.type]=\"multiple() ? 'checkbox' : 'radio'\"\r\n           [attr.name]=\"i.id\"\r\n           [attr.id]=\"i.id\">\r\n    }\r\n\r\n    {{formatBy()(i.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}:host.disabled{background-color:var(--bs-secondary-bg)}.ng0-list-item{display:flex;padding-inline-start:.5rem}.ng0-list-item .ng0-list-item-indicator{margin-inline-end:.5rem}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.DestroyRef }], propDecorators: { _itemTemplate: [{
+                    }, 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: [{
                 type: ContentChild,
                 args: [TemplateRef]
+            }], selectionChange: [{
+                type: Output
+            }], _onHostClick: [{
+                type: HostListener,
+                args: ['click']
             }], _onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]