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

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

@@ -1,16 +1,16 @@
 import * as i0 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 { input, inject, ElementRef, Directive, ChangeDetectorRef, signal, Renderer2, booleanAttribute, EventEmitter, effect, untracked, computed, TemplateRef, forwardRef, HostListener, Output, ViewChildren, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { dataSourceAttribute, DataRequest } from '@bootkit/ng0/data';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { LocalizationService, defaultObjectFormatter, objectFormatterAttribute } from '@bootkit/ng0/localization';
+import { LocalizationService, defaultFormatter, objectFormatterAttribute } from '@bootkit/ng0/localization';
 import { defaultEqualityComparer, equalityComparerAttribute, defaultValueWriter, valueWriterAttribute, noopFilter, filterPredicateAttribute, trackByIndex, TrackByAttribute, CssClassAttribute, IdGeneratorAttribute, IfDirective } from '@bootkit/ng0/common';
 
 /**
- * ListItemComponent represents an individual item within a ListComponent.
+ * ListItem represents an individual item within a ListComponent.
  */
-class ListItemComponent {
+class ListItem {
     /**
      * The value associated with the item. This can be of any type.
      */
@@ -83,7 +83,7 @@ class ListItemComponent {
         this.elementRef.nativeElement.focus();
     }
     _getTabIndex() {
-        let focus = this.list.focus();
+        let focus = this.list.focusMode();
         // if (this.list.isDisabled()) {
         //     return undefined;
         // }
@@ -95,22 +95,22 @@ class ListItemComponent {
             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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ListItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.1", type: ListItem, 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: { "attr.id": "id()", "attr.tabIndex": "_getTabIndex()" } }, exportAs: ["ng0ListItem"], ngImport: i0 });
 }
-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()',
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ListItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng0-list-item',
+                    exportAs: 'ng0ListItem',
+                    standalone: true,
+                    host: {
                         '[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.
@@ -118,15 +118,19 @@ let uuid = 0;
 class ListComponent {
     _localizationService = inject(LocalizationService);
     _changeDetector = inject(ChangeDetectorRef);
-    _value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : []));
     _changeCallback;
     _touchCallback;
+    _selectedItems = new Set();
     _sourceItems = signal([], ...(ngDevMode ? [{ debugName: "_sourceItems" }] : []));
-    _selectedValues = new Set();
+    _itemTemplate;
     _activeItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_activeItem" }] : []));
-    _visibleItems;
     _isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : []));
-    itemTemplate;
+    _value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _renderer = inject(Renderer2);
+    /**
+     * A list of all visible list items.
+     */
+    listItems;
     /**
      * Reference to the host element
      */
@@ -153,28 +157,28 @@ class ListComponent {
             transform: booleanAttribute
         }]));
     /**
-    * A custom comparer function or the name of a field for comparing two objects.
+    * A comparer to compare items for selection.
+    * Default uses strict equality (===).
     */
     compareBy = input(defaultEqualityComparer, ...(ngDevMode ? [{ debugName: "compareBy", transform: equalityComparerAttribute }] : [{
             transform: equalityComparerAttribute
         }]));
     /**
-     * Custom format function to convert an item to a string for display.
+     * A fromatter to convert each 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._localizationService.get()) }] : [{
+    formatBy = input(defaultFormatter, ...(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.
+     * Custom value writer to extract the value of any object while writing values.
      */
     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.
+     * Custom filter function to filter items.
+     * Default is a noop filter that does not filter any items.
      */
     filterBy = input(noopFilter, ...(ngDevMode ? [{ debugName: "filterBy", transform: filterPredicateAttribute }] : [{
             transform: filterPredicateAttribute
@@ -200,7 +204,7 @@ class ListComponent {
      * CSS class or classes to apply to the list container.
      * Default is undefined.
      */
-    itemClass = input((item) => ['ng0-list-item'], ...(ngDevMode ? [{ debugName: "itemClass", transform: CssClassAttribute }] : [{
+    itemClass = input(undefined, ...(ngDevMode ? [{ debugName: "itemClass", transform: CssClassAttribute }] : [{
             transform: CssClassAttribute
         }]));
     /**
@@ -210,7 +214,7 @@ class ListComponent {
      * - '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" }] : []));
+    focusMode = input('activeDescendant', ...(ngDevMode ? [{ debugName: "focusMode" }] : []));
     /**
      * 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.
@@ -224,16 +228,18 @@ class ListComponent {
      * Event emitted when the selection state of an item changes by user interaction.
      */
     selectionChange = new EventEmitter();
-    _uuid;
+    /**
+     * The template to use for each item in the list.
+     */
+    itemTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
     constructor() {
-        this._uuid = ++uuid;
         effect(() => {
-            let source = this.source();
-            source.load(new DataRequest()).subscribe(res => {
+            this.source().load(new DataRequest()).subscribe(res => {
                 untracked(() => {
                     this._activeItem.set(undefined);
                     this._sourceItems.set(res.data);
-                    this._findAndSelectItems();
+                    this._updateSelectedItems();
+                    this._activateFirstSelectedItem();
                 });
             });
         });
@@ -252,15 +258,24 @@ class ListComponent {
      * @returns
      */
     isSelected(value) {
-        return this._selectedValues.has(value);
+        return this._selectedItems.has(value);
     }
     /**
      * Selects the given value.
      * @param item
      */
     select(value) {
-        if (!this._selectedValues.has(value())) {
-            this._selectedValues.add(value());
+        if (this.multiple()) {
+            if (!this._selectedItems.has(value)) {
+                this._selectedItems.add(value);
+                this._updateValue();
+                this._changeCallback?.(this._value());
+            }
+        }
+        else {
+            this._selectedItems.clear();
+            this._selectedItems.add(value);
+            this._updateValue();
             this._changeCallback?.(this._value());
         }
     }
@@ -269,7 +284,8 @@ class ListComponent {
      * @param item
      */
     deselect(value) {
-        this._selectedValues.delete(value);
+        this._selectedItems.delete(value);
+        this._updateValue();
         this._changeCallback?.(this._value());
     }
     /**
@@ -288,7 +304,8 @@ class ListComponent {
      * Deselects all items in the list.
      */
     deselectAll() {
-        this._selectedValues.clear();
+        this._selectedItems.clear();
+        this._updateValue();
         this._changeCallback?.(this._value());
     }
     /**
@@ -296,11 +313,26 @@ class ListComponent {
      */
     selectAll() {
         if (this.multiple()) {
-            this._selectedValues.clear();
-            this._sourceItems().forEach(i => this._selectedValues.add(i));
+            this._selectedItems.clear();
+            this._sourceItems().forEach(i => this._selectedItems.add(i));
+            this._updateValue();
             this._changeCallback?.(this._value());
         }
-        throw new Error('selectAll is only available in multiple selection mode.');
+        else {
+            throw new Error('selectAll is only available in multiple selection mode.');
+        }
+    }
+    /**
+     * Gets the current value(s) of the list.
+     */
+    get value() {
+        return this._value();
+    }
+    /**
+     * Gets the current items in the list.
+     */
+    get items() {
+        return this._sourceItems();
     }
     writeValue(value) {
         if (this.multiple()) {
@@ -312,7 +344,8 @@ class ListComponent {
             }
         }
         this._value.set(value);
-        this._findAndSelectItems();
+        this._updateSelectedItems();
+        this._activateFirstSelectedItem();
         this._changeDetector.markForCheck();
     }
     registerOnChange(fn) {
@@ -324,43 +357,34 @@ class ListComponent {
     setDisabledState(isDisabled) {
         this._isDisabled.set(isDisabled);
     }
-    _handleUserSelection(item) {
+    _handleUserSelection(item, index) {
         let value = item.value();
-        this._activeItem.set(item);
         if (this.multiple()) {
-            if (this.isSelected(value)) {
-                this._selectedValues.delete(value);
-            }
-            else {
-                this._selectedValues.add(value);
-            }
+            this.toggle(value);
         }
         else {
-            this._selectedValues.clear();
-            this._selectedValues.add(value);
+            this.select(value);
         }
-        this._updateValue();
-        this._changeCallback?.(this._value());
-        this.selectionChange.emit({
-            item: item,
-            list: this,
-        });
+        this._activeItem.set(item);
+        this.selectionChange.emit({ index, value: item.value(), item: item, list: this });
         this._changeDetector.detectChanges();
     }
     _showLoadingSppiner = computed(() => {
         let source = this.source();
         return source.isLoading() && source.type == 'remote';
     }, ...(ngDevMode ? [{ debugName: "_showLoadingSppiner" }] : []));
-    _findAndSelectItems() {
+    _updateSelectedItems() {
         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);
+                this._selectedItems.add(item);
             }
+            return index;
         };
+        this._selectedItems.clear();
         if (this.multiple()) {
             if (Array.isArray(value)) {
                 value.forEach(v => findAndSelect(v));
@@ -369,39 +393,49 @@ class ListComponent {
         else {
             findAndSelect(value);
         }
-        this._changeDetector.markForCheck();
+    }
+    _activateFirstSelectedItem() {
+        if (this._selectedItems.size > 0) {
+            let value = this._selectedItems.values().next().value;
+            let item = this.listItems?.find(i => i.value() === value);
+            if (item) {
+                this._activeItem.set(item);
+            }
+        }
     }
     _updateValue() {
+        let value;
         if (this.multiple()) {
             let values = [];
-            this._selectedValues.forEach(v => {
+            this._selectedItems.forEach(v => {
                 values.push(this.writeBy()(v));
             });
-            this._value.set(values);
+            value = values;
         }
         else {
-            if (this._selectedValues.size > 0) {
-                let first = this._selectedValues.values().next().value;
-                this._value.set(this.writeBy()(first));
+            if (this._selectedItems.size > 0) {
+                let first = this._selectedItems.values().next().value;
+                value = this.writeBy()(first);
             }
             else {
-                this._value.set(undefined);
+                value = undefined;
             }
         }
+        this._value.set(value);
     }
     _hostAriaActiveDescendant = computed(() => {
-        if (this._activeItem() && !this._isDisabled() && this.focus() == 'activeDescendant') {
+        if (this._activeItem() && !this._isDisabled() && this.focusMode() == 'activeDescendant') {
             return this._activeItem().id();
         }
         return undefined;
     }, ...(ngDevMode ? [{ debugName: "_hostAriaActiveDescendant" }] : []));
     _hostTabIndex = computed(() => {
-        let isDisabled = this._isDisabled(); // track _isDisabled
-        let activeItem = this._activeItem(); // track _activeItem
+        let isDisabled = this._isDisabled(); // track the value
+        let activeItem = this._activeItem(); // track the value
         if (isDisabled) {
             return undefined;
         }
-        switch (this.focus()) {
+        switch (this.focusMode()) {
             case 'none':
                 return undefined;
             case 'activeDescendant':
@@ -410,79 +444,71 @@ class ListComponent {
                 return activeItem ? undefined : 0;
         }
     }, ...(ngDevMode ? [{ debugName: "_hostTabIndex" }] : []));
-    _onHostClick() {
-        // if (this.focus() != 'none') {
-        //     this.elementRef.nativeElement.focus();
-        // }
-    }
     _onHostBlur() {
         this._touchCallback?.();
     }
     _onKeydown(e) {
         if (this._isDisabled())
             return;
-        let visibleItemsCount = this._visibleItems.length;
-        if (visibleItemsCount == 0) {
+        let listLength = this.listItems.length;
+        if (listLength == 0) {
             return;
         }
-        let activeItemindex = this._visibleItems.toArray().findIndex(i => i === this._activeItem());
-        console.log(this._activeItem(), activeItemindex);
+        let activeItem = this._activeItem();
+        let activeItemindex = activeItem ? this.listItems.toArray().findIndex(i => i === activeItem) : -1;
         switch (e.key) {
             case 'ArrowDown':
-                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);
+                if (activeItemindex < listLength - 1) {
+                    const next = this.listItems.get(activeItemindex + 1);
                     this._activeItem.set(next);
                 }
                 e.preventDefault();
                 break;
             case 'ArrowUp':
                 if (activeItemindex == -1) {
-                    const last = this._visibleItems.get(visibleItemsCount - 1);
+                    const last = this.listItems.get(listLength - 1);
                     this._activeItem.set(last);
                 }
                 else if (activeItemindex > 0) {
-                    const previous = this._visibleItems.get(activeItemindex - 1);
+                    const previous = this.listItems.get(activeItemindex - 1);
                     this._activeItem.set(previous);
                 }
                 e.preventDefault();
                 break;
             case 'Enter':
-                if (activeItemindex > -1) {
-                    this._handleUserSelection(this._visibleItems.get(activeItemindex));
+                if (activeItem) {
+                    this._handleUserSelection(activeItem, activeItemindex);
                 }
                 break;
             case 'Home':
-                const first = this._visibleItems.get(0);
+                const first = this.listItems.get(0);
                 this._activeItem.set(first);
                 e.preventDefault();
                 break;
             case 'End':
-                const last = this._visibleItems.get(visibleItemsCount - 1);
+                const last = this.listItems.get(listLength - 1);
                 this._activeItem.set(last);
                 e.preventDefault();
                 break;
         }
-        if (this.focus() === 'roving') {
+        this._activeItem()?.scrollIntoView('nearest', listLength > 100 ? 'instant' : 'smooth');
+        if (this.focusMode() === '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 }, 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: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ListComponent, isStandalone: true, selector: "ng0-list, ng0-select-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 }, focusMode: { classPropertyName: "focusMode", publicName: "focusMode", isSignal: true, isRequired: false, transformFunction: null }, idGenerator: { classPropertyName: "idGenerator", publicName: "idGenerator", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "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 }], 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 });
+            }], queries: [{ propertyName: "_itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "listItems", predicate: ListItem, descendants: true }], exportAs: ["ng0List"], ngImport: i0, template: "@let filter = filterBy();\r\n@let formatter = formatBy();\r\n\r\n@for (item of _sourceItems(); track trackBy()($index, item)) {\r\n\r\n<ng0-list-item #listItem=\"ng0ListItem\"\r\n               *ng0If=\"!filter || filter(item)\"\r\n               [value]=\"item\"\r\n               [id]=\"idGenerator()?.(item)\"\r\n               [class.active]=\"isActive(listItem)\"\r\n               [class.selected]=\"isSelected(item)\"\r\n               [ngClass]=\"itemClass()?.(item)\"\r\n               (click)=\"_handleUserSelection(listItem, $index);\">\r\n\r\n       @if(itemTemplate() || _itemTemplate) {\r\n       @let template = itemTemplate() || _itemTemplate;\r\n       <ng-container *ngTemplateOutlet=\"template; context: { $implicit: {item: listItem, value: item}}\" />\r\n       } @else {\r\n       @if(showSelectionIndicator()) {\r\n       <input class=\"form-check-input ng0-selection-indicator\"\r\n              tabindex=\"-1\"\r\n              [checked]=\"isSelected(item)\"\r\n              [attr.type]=\"multiple() ? 'checkbox' : 'radio'\">\r\n       }\r\n\r\n       {{formatter(item)}}\r\n       }\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:not(.ng0-list-unstyled){display:block;position:relative;-webkit-user-select:none;user-select:none;border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius)}ng0-list:not(.ng0-list-unstyled):focus,ng0-list:not(.ng0-list-unstyled):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:not(.ng0-list-unstyled)[disabled],ng0-list:not(.ng0-list-unstyled).disabled{opacity:.5;pointer-events:none}ng0-list:not(.ng0-list-unstyled) .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}ng0-list:not(.ng0-list-unstyled) ng0-list-item{display:flex;padding:.5rem}ng0-list:not(.ng0-list-unstyled) ng0-list-item .ng0-selection-indicator{margin-inline-end:.5rem}ng0-list:not(.ng0-list-unstyled) ng0-list-item:focus,ng0-list:not(.ng0-list-unstyled) 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)}ng0-list:not(.ng0-list-unstyled) ng0-list-item.selected{background-color:var(--bs-primary);color:var(--bs-light)}ng0-list:not(.ng0-list-unstyled) ng0-list-item.active:not(.selected){background-color:color-mix(in srgb,var(--bs-primary),white 85%)}ng0-list:not(.ng0-list-unstyled) ng0-list-item:hover:not(.selected):not(.disabled):not(.active){background-color:color-mix(in srgb,var(--bs-primary),white 95%)}ng0-list:not(.ng0-list-unstyled) ng0-list-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}ng0-list:not(.ng0-list-unstyled) ng0-list-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}\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: "directive", type: ListItem, 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, encapsulation: ViewEncapsulation.None, imports: [
+            args: [{ selector: 'ng0-list, ng0-select-list', exportAs: 'ng0List', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         CommonModule,
                         IfDirective,
-                        ListItemComponent
+                        ListItem
                     ], providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ListComponent),
@@ -493,18 +519,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         '[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: [{
+                    }, template: "@let filter = filterBy();\r\n@let formatter = formatBy();\r\n\r\n@for (item of _sourceItems(); track trackBy()($index, item)) {\r\n\r\n<ng0-list-item #listItem=\"ng0ListItem\"\r\n               *ng0If=\"!filter || filter(item)\"\r\n               [value]=\"item\"\r\n               [id]=\"idGenerator()?.(item)\"\r\n               [class.active]=\"isActive(listItem)\"\r\n               [class.selected]=\"isSelected(item)\"\r\n               [ngClass]=\"itemClass()?.(item)\"\r\n               (click)=\"_handleUserSelection(listItem, $index);\">\r\n\r\n       @if(itemTemplate() || _itemTemplate) {\r\n       @let template = itemTemplate() || _itemTemplate;\r\n       <ng-container *ngTemplateOutlet=\"template; context: { $implicit: {item: listItem, value: item}}\" />\r\n       } @else {\r\n       @if(showSelectionIndicator()) {\r\n       <input class=\"form-check-input ng0-selection-indicator\"\r\n              tabindex=\"-1\"\r\n              [checked]=\"isSelected(item)\"\r\n              [attr.type]=\"multiple() ? 'checkbox' : 'radio'\">\r\n       }\r\n\r\n       {{formatter(item)}}\r\n       }\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:not(.ng0-list-unstyled){display:block;position:relative;-webkit-user-select:none;user-select:none;border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius)}ng0-list:not(.ng0-list-unstyled):focus,ng0-list:not(.ng0-list-unstyled):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:not(.ng0-list-unstyled)[disabled],ng0-list:not(.ng0-list-unstyled).disabled{opacity:.5;pointer-events:none}ng0-list:not(.ng0-list-unstyled) .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}ng0-list:not(.ng0-list-unstyled) ng0-list-item{display:flex;padding:.5rem}ng0-list:not(.ng0-list-unstyled) ng0-list-item .ng0-selection-indicator{margin-inline-end:.5rem}ng0-list:not(.ng0-list-unstyled) ng0-list-item:focus,ng0-list:not(.ng0-list-unstyled) 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)}ng0-list:not(.ng0-list-unstyled) ng0-list-item.selected{background-color:var(--bs-primary);color:var(--bs-light)}ng0-list:not(.ng0-list-unstyled) ng0-list-item.active:not(.selected){background-color:color-mix(in srgb,var(--bs-primary),white 85%)}ng0-list:not(.ng0-list-unstyled) ng0-list-item:hover:not(.selected):not(.disabled):not(.active){background-color:color-mix(in srgb,var(--bs-primary),white 95%)}ng0-list:not(.ng0-list-unstyled) ng0-list-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}ng0-list:not(.ng0-list-unstyled) ng0-list-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _itemTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef]
+            }], listItems: [{
+                type: ViewChildren,
+                args: [ListItem]
             }], selectionChange: [{
                 type: Output
-            }], _onHostClick: [{
-                type: HostListener,
-                args: ['click']
             }], _onHostBlur: [{
                 type: HostListener,
                 args: ['blur']