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

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

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { signal, inject, DOCUMENT, DestroyRef, ElementRef, Renderer2, ChangeDetectorRef, input, booleanAttribute, model, TemplateRef, forwardRef, HostListener, ContentChild, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { signal, inject, DOCUMENT, DestroyRef, ElementRef, Renderer2, ChangeDetectorRef, input, model, booleanAttribute, effect, computed, TemplateRef, forwardRef, HostListener, ContentChild, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { dataSourceAttribute, defaultBooleanValueComparer, BooleanValueComparerAttribute, defaultValueExtractor, ValueExtractorAttribute, stringFilter, DataRequest } from '@bootkit/ng0/data';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { dataSourceAttribute, DataRequest } from '@bootkit/ng0/data';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i2 from '@angular/cdk/overlay';
 import { Overlay, ViewportRuler, OverlayModule } from '@angular/cdk/overlay';
-import { CssClassAttribute, _IdGenerator } from '@bootkit/ng0/common';
-import { LocalizationService, defaultValueFormatter, ValueFormatterAttribute } from '@bootkit/ng0/localization';
-import * as i3 from '@angular/cdk/listbox';
-import { CdkListboxModule } from '@angular/cdk/listbox';
+import { defaultEqualityComparer, equalityComparerAttribute, defaultValueWriter, valueWriterAttribute, noopFilter, CssClassAttribute, sequentialIdGenerator, findValuesByComparer, findValueByComparer } from '@bootkit/ng0/common';
+import { LocalizationService, defaultObjectFormatter, objectFormatterAttribute } from '@bootkit/ng0/localization';
+import * as i3 from '@bootkit/ng0/components/list';
+import { ListModule, ListComponent } from '@bootkit/ng0/components/list';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 /**
  * Select component that allows users to choose an option from a dropdown list.
@@ -19,13 +19,13 @@ class SelectComponent {
     _resizeObserver;
     _resizeObserverInitialized = false;
     _viewpoerRulerSubscription;
-    _cdkListboxValue = signal(undefined, ...(ngDevMode ? [{ debugName: "_cdkListboxValue" }] : []));
     _filterElementRef;
-    _onChangeCallback;
-    _onTouchedCallback;
+    _listComponent;
+    _changeCallback;
+    _touchCallback;
     _options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : []));
     _isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : []));
-    _selectedOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_selectedOptionIndex" }] : []));
+    // protected readonly _selectedOptionIndex = signal<number>(-1);
     _activeOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_activeOptionIndex" }] : []));
     _optionTemplate;
     _positionStrategy;
@@ -38,6 +38,7 @@ class SelectComponent {
     _renderer = inject(Renderer2);
     _viewportRuler = inject(ViewportRuler);
     _changeDetector = inject(ChangeDetectorRef);
+    _activateSlectedItemEffectRef;
     /**
      * The data source for the select component.
      * This can be an array of data, a function that returns an observable of data,
@@ -46,6 +47,10 @@ class SelectComponent {
     source = input.required(...(ngDevMode ? [{ debugName: "source", transform: v => dataSourceAttribute(v) }] : [{
             transform: v => dataSourceAttribute(v)
         }]));
+    /**
+     * Value of the select component.
+     */
+    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
     /**
      * Indicates whether multi selection is enabled or not.
      */
@@ -59,24 +64,24 @@ class SelectComponent {
     /**
     * 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.
+     * Custom value writer 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
         }]));
     /**
-     * Indicates whether the dropdown is filterable.
+     * Indicates whether the select component is filterable.
      */
     filterable = input(false, ...(ngDevMode ? [{ debugName: "filterable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
@@ -87,248 +92,96 @@ class SelectComponent {
      * Custom filter function to filter items based on a filter value.
      * Default checks if the item contains the filter value (case-insensitive).
      */
-    filterBy = input(stringFilter, ...(ngDevMode ? [{ debugName: "filterBy" }] : []));
+    filterBy = input(noopFilter, ...(ngDevMode ? [{ debugName: "filterBy" }] : []));
     /**
-     * CSS class or classes to apply to the list container.
+     * CSS class or classes to apply to the items.
      */
     itemClass = input((item) => undefined, ...(ngDevMode ? [{ debugName: "itemClass", transform: CssClassAttribute }] : [{
             transform: CssClassAttribute
         }]));
+    /**
+     * Custom id generator function to generate unique ids for each item.
+     * Default generates sequential ids with the prefix 'ng0-select-item-'.
+     * If set to undefined, no ids will be generated.
+     */
+    idGenerator = input(sequentialIdGenerator('ng0-select-item-'), ...(ngDevMode ? [{ debugName: "idGenerator" }] : []));
     constructor() {
         this._renderer.addClass(this._el.nativeElement, 'form-select');
         this._renderer.setAttribute(this._el.nativeElement, 'tabindex', '0');
         this._scrollStrategy = this._overlay.scrollStrategies.block();
-    }
-    ngOnInit() {
-        this._loadItems();
-        this._handleDataSourceChange();
-    }
-    _loadItems() {
-        var r = new DataRequest();
-        this.source().load(r).pipe(takeUntilDestroyed(this._destroyRef)).subscribe(res => {
-            this._insertOptions(0, ...res.data);
+        effect(() => {
+            var value = this.value(); // track value
+            this._changeCallback?.(value);
         });
-    }
-    _handleDataSourceChange() {
-        let options = this._options();
-        this.source().change.subscribe(e => {
-            e.changes.forEach(change => {
-                switch (change.type) {
-                    case 'insert':
-                        this._insertOptions(change.index, ...change.items);
-                        break;
-                    case 'replace':
-                        options[change.index].value = change.value;
-                        break;
-                    case 'remove':
-                        options.splice(change.index, change.count);
-                }
-            });
+        effect(() => {
+            var value = this.open(); // track value
         });
+        this._activateSlectedItemEffectRef = effect(() => {
+            var value = this.value(); // track value
+            var options = this._options(); // track options
+            if (!this.multiple() && this._activeOptionIndex() == -1 && options.length > 0) {
+                let index = options.findIndex(x => this.compareBy()(x, this.value()));
+                if (index > -1) {
+                    this._activeOptionIndex.set(index);
+                    this._activateSlectedItemEffectRef.destroy();
+                }
+            }
+        }, ...(ngDevMode ? [{ debugName: "_activateSlectedItemEffectRef" }] : []));
     }
-    /**
-     * Selects an option by index
-     */
-    _selectByIndex(index) {
-        let optionsCount = this._options().length;
-        if (optionsCount == 0 || index < 0 || index > optionsCount - 1) {
-            throw new Error('Index out of range');
-        }
-        if (index == this._selectedOptionIndex()) {
-            return;
-        }
-        let option = this._options()[index];
-        this._cdkListboxValue.set(this.writeBy()(option.value));
-        this._onChangeCallback(this._cdkListboxValue());
-    }
-    // /**
-    //  * Sets an option as active
-    //  */
-    // public active(index: number) {
-    //     if (index < 0) {
-    //         throw Error();
-    //     }
-    //     this._activeOptionIndex.set(index);
-    //     if (this.open()) {
-    //         this.scrollItemIntoView(this._activeOptionIndex(), 'nearest');
-    //     }
-    // }
-    // /**
-    //  * 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.
-    //  */
-    // public scrollItemIntoView(index: number, position?: ScrollLogicalPosition, behavior?: ScrollBehavior) {
-    //     let item = this._options()[index];
-    //     let elm = this._document.getElementById(item.id) as HTMLUListElement;
-    //     elm!.scrollIntoView({ block: position, behavior: behavior });
-    // }
-    _insertOptions(index, ...items) {
-        // let filter = this.filterBy()()
-        var options = items.map(x => ({
-            id: this._getNextOptionId(),
-            value: x,
-            show: true
-        }));
-        if (Number.isInteger(index)) {
-            this._options().splice(index, 0, ...options);
-        }
-        else {
-            this._options().push(...options);
-        }
-        this._changeDetector.markForCheck();
+    ngOnInit() {
+        this.source().load(new DataRequest()).pipe(takeUntilDestroyed(this._destroyRef)).subscribe(res => {
+            this._options.set(res.data);
+            this._changeDetector.markForCheck();
+        });
     }
     writeValue(obj) {
-        let value;
-        if (this.multiple()) {
-            if (Array.isArray(obj)) {
-                value = obj;
-            }
-            else if (obj === null || obj === undefined) {
-                value = [];
-            }
-            else {
-                throw Error('Provide an array or null as the value of ng0-select component.');
-            }
-        }
-        else {
-            value = [obj];
-        }
-        this._cdkListboxValue.set(value);
-        // Update selection state of items
-        // let compareBy = this.compareBy();
-        // if (this.multiple()) {
-        //     this._items().forEach(x => x.selected = (value as any[]).some(y => compareBy(x.value, y)));
-        // } else {
-        //     this._items().forEach(x => x.selected = compareBy(x.value, value));
-        // }
+        this.value.set(obj);
     }
     registerOnChange(fn) {
-        this._onChangeCallback = fn;
+        this._changeCallback = fn;
     }
     registerOnTouched(fn) {
-        this._onTouchedCallback = fn;
+        this._touchCallback = fn;
     }
     setDisabledState(isDisabled) {
         this._isDisabled.set(isDisabled);
     }
-    _onKeydown(e, firedByFilter = false) {
-        let open = this.open();
-        if (this._isDisabled())
-            return;
-        let optionsCount = this._options().length;
-        if (optionsCount == 0) {
-            return;
-        }
-        switch (e.key) {
-            case 'ArrowDown':
-                if (open) {
-                    if (this._activeOptionIndex() < optionsCount - 1) {
-                        // this.active(this._activeOptionIndex() + 1);
-                    }
-                }
-                else {
-                    if (this._selectedOptionIndex() < optionsCount - 1) {
-                        this._selectByIndex(this._selectedOptionIndex() + 1);
-                    }
-                }
-                e.preventDefault();
-                break;
-            case 'ArrowUp':
-                if (open) {
-                    if (this._activeOptionIndex() > 0) {
-                        // this.active(this._activeOptionIndex()! - 1);
-                    }
-                }
-                else {
-                    if (this._selectedOptionIndex() > 0) {
-                        this._selectByIndex(this._selectedOptionIndex() - 1);
-                    }
-                }
-                e.preventDefault();
-                break;
-            case 'Enter':
-                if (open) {
-                    if (this._activeOptionIndex() == this._selectedOptionIndex()) {
-                        this.open.set(false);
-                    }
-                    else {
-                        this._selectByIndex(this._activeOptionIndex());
-                        this.open.set(false);
-                    }
-                }
-                else {
-                    this.open.set(true);
-                }
-                e.preventDefault();
-                break;
-            case ' ':
-                if (!open) {
-                    this.open.set(true);
-                }
-                e.preventDefault();
-                break;
-            case 'Escape':
-                this.open.set(false);
-                e.preventDefault();
-                break;
-            case 'Home':
-                if (open) {
-                    // this.active(0);
-                }
-                else {
-                    this._selectByIndex(0);
-                }
-                e.preventDefault();
-                break;
-            case 'End':
-                if (open) {
-                    // this.active(optionsCount - 1);
-                }
-                else {
-                    this._selectByIndex(optionsCount - 1);
-                }
-                e.preventDefault();
-                break;
-        }
-    }
     _onFilterBlur() {
         // use setTimeout to allow next element receives the focus.
-        setTimeout(() => {
-            if (!this._el.nativeElement.matches(':focus')) {
-                this.open.set(false);
-            }
-        }, 0);
-    }
-    _filterItems(filter) {
-        let filterFunc = this.filterBy();
-        this._options().forEach(x => x.show = filterFunc(x.value, filter));
+        // setTimeout(() => {
+        //     if (!this._el.nativeElement.matches(':focus')) {
+        //         this.open.set(false);
+        //     }
+        // }, 0);
     }
     _onOverlayAttach() {
-        this._activeOptionIndex.set(this._selectedOptionIndex());
         this._listenToResizeEvents();
-        if (this.filterable()) {
-            setTimeout(() => {
+        setTimeout(() => {
+            if (this.filterable()) {
                 this._filterElementRef?.nativeElement.focus();
-            }, 0);
-        }
-        if (this._selectedOptionIndex() > -1) {
-            // this.scrollItemIntoView(this._selectedOptionIndex(), 'start', 'instant');
-        }
+            }
+            if (this._activeOptionIndex() > -1) {
+                this._listComponent?.active(this._activeOptionIndex());
+            }
+        }, 0);
     }
     _onOverlayDetach() {
         this._unlistenFromResizeEvents();
-        if (this.filterable()) {
-            this._el?.nativeElement.focus();
-            this._options().forEach(x => x.show = false);
-        }
+        this._el.nativeElement.focus();
+        this.open.set(false);
     }
-    _getNextOptionId() {
-        return `ng0-select-item-${_IdGenerator.next().toString()}`;
+    _onListSelectionChange(e) {
+        if (!this.multiple()) {
+            this._activeOptionIndex.set(e.index);
+            this.open.set(false);
+        }
     }
+    // Find the value in options using the comparer function
+    _mappedValue = computed(() => {
+        return this.multiple() ?
+            findValuesByComparer(this._options(), this.value(), this.compareBy()) :
+            findValueByComparer(this._options(), this.value(), this.compareBy());
+    }, ...(ngDevMode ? [{ debugName: "_mappedValue" }] : []));
     _listenToResizeEvents() {
         this._viewportRuler.change().subscribe(x => {
             this.open.set(false);
@@ -356,25 +209,101 @@ class SelectComponent {
         this._resizeObserver = undefined;
         this._resizeObserverInitialized = false;
     }
-    _onHostClick(e) {
+    _selectFirst() {
+        let optionsCount = this._options().length;
+        if (optionsCount > 0) {
+            this._activeOptionIndex.set(0);
+            let value = this.writeBy()(this._options()[this._activeOptionIndex()]);
+            this.value.set(value);
+        }
+    }
+    _selectLast() {
+        let optionsCount = this._options().length;
+        if (optionsCount > 0) {
+            this._activeOptionIndex.set(optionsCount - 1);
+            let value = this.writeBy()(this._options()[this._activeOptionIndex()]);
+            this.value.set(value);
+        }
+    }
+    _selectNext() {
+        let optionsCount = this._options().length;
+        if (this._activeOptionIndex() < optionsCount - 1) {
+            this._activeOptionIndex.update(x => x + 1);
+            let value = this.writeBy()(this._options()[this._activeOptionIndex()]);
+            this.value.set(value);
+        }
+    }
+    _selectPrevious() {
+        // let optionsCount = this._options().length;
+        if (this._activeOptionIndex() > 0) {
+            this._activeOptionIndex.update(x => x - 1);
+            let value = this.writeBy()(this._options()[this._activeOptionIndex()]);
+            this.value.set(value);
+        }
+    }
+    _onHostKeydown(e) {
         if (this._isDisabled())
             return;
-        this.open.update(x => !x);
-        // this._onTouchedCallback?.(this._selectedValue());
+        let optionsCount = this._options().length;
+        if (optionsCount == 0) {
+            return;
+        }
+        if (this.open()) {
+            const newEvent = new KeyboardEvent(e.type, e);
+            this._listComponent?.elementRef.nativeElement.dispatchEvent(newEvent);
+        }
+        else {
+            switch (e.key) {
+                case 'ArrowDown':
+                    if (this.multiple())
+                        return;
+                    this._selectNext();
+                    e.preventDefault();
+                    break;
+                case 'ArrowUp':
+                    if (this.multiple())
+                        return;
+                    this._selectPrevious();
+                    e.preventDefault();
+                    break;
+                case 'Enter':
+                    this.open.set(!this.open());
+                    // e.preventDefault();
+                    break;
+                case 'Home':
+                    if (this.multiple())
+                        return;
+                    this._selectFirst();
+                    e.preventDefault();
+                    break;
+                case 'End':
+                    if (this.multiple())
+                        return;
+                    this._selectLast();
+                    e.preventDefault();
+                    break;
+            }
+        }
+    }
+    _onHostClick(e) {
+        if (!this._isDisabled()) {
+            this.open.update(x => !x);
+            // this._onTouchedCallback?.(this._selectedValue());
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: SelectComponent, isStandalone: true, selector: "ng0-select", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", 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 }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", 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 } }, outputs: { open: "openChange" }, host: { listeners: { "keydown": "_onKeydown($event)", "click": "_onHostClick($event)" }, properties: { "class.ng0-select-open": "open()", "class.ng0-select-loading": "source().isLoading()", "attr.aria-activedescendant": "_activeOptionIndex() > -1 ? (_options()[_activeOptionIndex()].id) : undefined", "attr.disabled": "_isDisabled()", "attr.aria-disabled": "_isDisabled()" } }, providers: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: SelectComponent, isStandalone: true, selector: "ng0-select", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", 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 }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", 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 }, idGenerator: { classPropertyName: "idGenerator", publicName: "idGenerator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", open: "openChange" }, host: { listeners: { "keydown": "_onHostKeydown($event)", "click": "_onHostClick($event)" }, properties: { "class.ng0-select-open": "open()", "class.ng0-select-loading": "source().isLoading()", "attr.aria-activedescendant": "_activeOptionIndex() > -1 ? (_options()[_activeOptionIndex()].id) : undefined", "attr.disabled": "_isDisabled()", "attr.aria-disabled": "_isDisabled()" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true
-            }], queries: [{ propertyName: "_optionTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "_filterElementRef", first: true, predicate: ["filterInput"], descendants: true }], exportAs: ["ng0Select"], ngImport: i0, template: "@let formattedValue = formatBy()(_cdkListboxValue());\r\n\r\n@if(formattedValue == null || formattedValue == '') {\r\n&nbsp;\r\n}@else {\r\n{{formattedValue}}\r\n}\r\n\r\n@if(source().isLoading()) {\r\n<div class=\"spinner-border text-success spinner-border-sm ng0-select-spinner\" role=\"status\">\r\n    <span class=\"visually-hidden\">Loading...</span>\r\n</div>\r\n}\r\n\r\n<ng-template cdkConnectedOverlay\r\n             [cdkConnectedOverlayOrigin]=\"_el.nativeElement\"\r\n             [cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\r\n             [cdkConnectedOverlayOpen]=\"open()\"\r\n             [cdkConnectedOverlayPush]=\"false\"\r\n             [cdkConnectedOverlayFlexibleDimensions]=\"true\"\r\n             [cdkConnectedOverlayPanelClass]=\"['ng0-select-dropdown-container', 'shadow']\"\r\n             [cdkConnectedOverlayWidth]=\"_el.nativeElement.clientWidth\"\r\n             (overlayOutsideClick)=\"open.set(false)\"\r\n             (attach)=\"_onOverlayAttach()\"\r\n             (detach)=\"_onOverlayDetach()\">\r\n\r\n    @if(filterable()) {\r\n    <div class=\"ng0-select-filter-container border-bottom\">\r\n        <input #filterInput\r\n               type=\"text\"\r\n               class=\"ng0-select-filter-input form-control form-control-sm\"\r\n               [attr.placeholder]=\"filterPlaceholder()\"\r\n               (keydown)=\"_onKeydown($event, true)\"\r\n               (blur)=\"_onFilterBlur()\"\r\n               (input)=\"_filterItems($event.target.value)\">\r\n    </div>\r\n    }\r\n\r\n    <ul class=\"ng0-select-dropdown\"\r\n        cdkListbox\r\n        [cdkListboxValue]=\"_cdkListboxValue()\"\r\n        [attr.tabindex]=\"_isDisabled() ? undefined : -1\"\r\n        [class.is-open]=\"open()\">\r\n\r\n        @for (option of _options(); track $index) {\r\n        <li [cdkOption]=\"option.value\"\r\n            #cdkOption=\"cdkOption\"\r\n            [attr.id]=\"option.id\"\r\n            class=\"ng0-select-option\"\r\n            [class.ng0-select-option-active]=\"cdkOption.isActive()\"\r\n            [class.ng0-select-option-selected]=\"cdkOption.isSelected()\"\r\n            [class.ng0-select-option-filtered]=\"!option.show\"\r\n            (click)=\"cdkOption.select(); open.set(false)\"\r\n            (keyup.enter)=\"open.set(false)\">\r\n            @if(_optionTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"_optionTemplate; context: { $implicit: option}\" />\r\n            } @else {\r\n            @let v = formatBy()(option.value);\r\n            @if(v) {\r\n            {{v}}\r\n            }@else {\r\n            &nbsp;\r\n            }\r\n            }\r\n        </li>\r\n        }\r\n    </ul>\r\n</ng-template>", styles: ["ng0-select{user-select:none;-webkit-user-select:none;-moz-user-select:none;display:flex!important;align-items:center}ng0-select.disabled{background-color:var(--bs-secondary-bg)}.ng0-select-dropdown-container{display:flex;flex-direction:column;background-color:var(--bs-body-bg);border-radius:var(--bs-border-radius);padding:.5rem var(--bs-dropdown-padding-x);--ng0-select-item-padding-x: 1rem;--ng0-select-item-padding-y: .25rem}.ng0-select-dropdown-container ul.ng0-select-dropdown{list-style:none;border-start-start-radius:0;border-start-end-radius:0;padding:0!important;margin:0;flex-grow:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.4) transparent}.ng0-select-dropdown-container ul.ng0-select-dropdown.is-open{border-top:none}.ng0-select-dropdown-container ul.ng0-select-dropdown li{overflow:hidden;cursor:pointer;padding:var(--ng0-select-item-padding-y) var(--ng0-select-item-padding-x)}.ng0-select-dropdown-container ul.ng0-select-dropdown li:hover{background-color:var(--bs-tertiary-bg)}.ng0-select-dropdown-container ul.ng0-select-dropdown li.ng0-select-option-selected{background-color:var(--bs-primary);color:var(--bs-light)}.ng0-select-dropdown-container ul.ng0-select-dropdown li.ng0-select-option-active:not(.ng0-select-option-selected){background-color:var(--bs-gray-300);color:var(--bs-body)}.ng0-select-dropdown-container ul.ng0-select-dropdown li.ng0-select-option-filtered{display:none!important}.ng0-select-dropdown-container .ng0-select-filter-container{padding:1rem var(--ng0-select-item-padding-x);background-color:inherit}.ng0-select-dropdown-container .ng0-select-filter-container .ng0-select-filter-input{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+            }], queries: [{ propertyName: "_optionTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "_filterElementRef", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "_listComponent", first: true, predicate: ListComponent, descendants: true }], exportAs: ["ng0Select"], ngImport: i0, template: "@let formattedValue = formatBy()(_mappedValue());\r\n\r\n@if(formattedValue == null || formattedValue == '') {\r\n&nbsp;\r\n}@else {\r\n{{formattedValue}}\r\n}\r\n\r\n@if(source().isLoading()) {\r\n<div class=\"spinner-border text-success spinner-border-sm ng0-select-spinner\" role=\"status\">\r\n    <span class=\"visually-hidden\">Loading...</span>\r\n</div>\r\n}\r\n\r\n<ng-template cdkConnectedOverlay\r\n             [cdkConnectedOverlayOrigin]=\"_el.nativeElement\"\r\n             [cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\r\n             [cdkConnectedOverlayOpen]=\"open()\"\r\n             [cdkConnectedOverlayPush]=\"false\"\r\n             [cdkConnectedOverlayFlexibleDimensions]=\"true\"\r\n             [cdkConnectedOverlayPanelClass]=\"['ng0-select-dropdown-container', 'shadow']\"\r\n             [cdkConnectedOverlayWidth]=\"_el.nativeElement.clientWidth\"\r\n             (overlayOutsideClick)=\"open.set(false)\"\r\n             (attach)=\"_onOverlayAttach()\"\r\n             (detach)=\"_onOverlayDetach()\">\r\n\r\n    @if(filterable()) {\r\n    <div class=\"ng0-select-filter-container border-bottom\">\r\n        <input #filterInput\r\n               type=\"text\"\r\n               class=\"ng0-select-filter-input form-control form-control-sm\"\r\n               [attr.placeholder]=\"filterPlaceholder()\"\r\n               (blur)=\"_onFilterBlur()\"\r\n               >\r\n    </div>\r\n    }\r\n\r\n    <ng0-list #list\r\n              [source]=\"source()\"\r\n              \r\n              [multiple]=\"multiple()\"\r\n              [idGenerator]=\"idGenerator()\"\r\n              [filterBy]=\"filterBy()\"\r\n              [compareBy]=\"compareBy()\"\r\n              focus=\"none\"\r\n              style=\"border: none; border-radius: 0;\"\r\n              (mousedown)=\"$event.preventDefault(); $event.stopImmediatePropagation()\"\r\n              (click)=\"open.set(false)\"\r\n              (selectionChange)=\"_onListSelectionChange($event)\">\r\n\r\n        <ng-template let-option>\r\n            @if(_optionTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"_optionTemplate; context: { $implicit: option}\" />\r\n            }@else {\r\n            {{formatBy()(option.value)}}\r\n            }\r\n        </ng-template>\r\n\r\n    </ng0-list>\r\n</ng-template>", styles: ["ng0-select{user-select:none;-webkit-user-select:none;-moz-user-select:none;display:flex!important;align-items:center}ng0-select.disabled{background-color:var(--bs-secondary-bg)}.ng0-select-dropdown-container{display:flex;flex-direction:column;background-color:var(--bs-body-bg);border-radius:var(--bs-border-radius);padding:.5rem var(--bs-dropdown-padding-x);--ng0-select-item-padding-x: 1rem;--ng0-select-item-padding-y: .25rem}.ng0-select-dropdown-container ul.ng0-select-dropdown{list-style:none;border-start-start-radius:0;border-start-end-radius:0;padding:0!important;margin:0;flex-grow:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.4) transparent}.ng0-select-dropdown-container ul.ng0-select-dropdown.is-open{border-top:none}.ng0-select-dropdown-container ul.ng0-select-dropdown li{overflow:hidden;cursor:pointer;padding:var(--ng0-select-item-padding-y) var(--ng0-select-item-padding-x)}.ng0-select-dropdown-container ul.ng0-select-dropdown li:hover{background-color:var(--bs-tertiary-bg)}.ng0-select-dropdown-container ul.ng0-select-dropdown li.ng0-select-option-selected{background-color:var(--bs-primary);color:var(--bs-light)}.ng0-select-dropdown-container ul.ng0-select-dropdown li.ng0-select-option-active:not(.ng0-select-option-selected){background-color:var(--bs-gray-300);color:var(--bs-body)}.ng0-select-dropdown-container ul.ng0-select-dropdown li.ng0-select-option-filtered{display:none!important}.ng0-select-dropdown-container .ng0-select-filter-container{padding:.5rem var(--ng0-select-item-padding-x);background-color:inherit}.ng0-select-dropdown-container .ng0-select-filter-container .ng0-select-filter-input{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i3.ListComponent, selector: "ng0-list", inputs: ["source", "multiple", "showSelectionIndicator", "compareBy", "formatBy", "writeBy", "filterBy", "itemClass", "focus", "idGenerator"], outputs: ["selectionChange"], exportAs: ["ng0List"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng0-select', exportAs: 'ng0Select', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         OverlayModule,
-                        CdkListboxModule
+                        ListModule,
                     ], providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SelectComponent),
@@ -385,14 +314,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         '[attr.aria-activedescendant]': '_activeOptionIndex() > -1 ? (_options()[_activeOptionIndex()].id) : undefined',
                         '[attr.disabled]': '_isDisabled()',
                         '[attr.aria-disabled]': '_isDisabled()'
-                    }, template: "@let formattedValue = formatBy()(_cdkListboxValue());\r\n\r\n@if(formattedValue == null || formattedValue == '') {\r\n&nbsp;\r\n}@else {\r\n{{formattedValue}}\r\n}\r\n\r\n@if(source().isLoading()) {\r\n<div class=\"spinner-border text-success spinner-border-sm ng0-select-spinner\" role=\"status\">\r\n    <span class=\"visually-hidden\">Loading...</span>\r\n</div>\r\n}\r\n\r\n<ng-template cdkConnectedOverlay\r\n             [cdkConnectedOverlayOrigin]=\"_el.nativeElement\"\r\n             [cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\r\n             [cdkConnectedOverlayOpen]=\"open()\"\r\n             [cdkConnectedOverlayPush]=\"false\"\r\n             [cdkConnectedOverlayFlexibleDimensions]=\"true\"\r\n             [cdkConnectedOverlayPanelClass]=\"['ng0-select-dropdown-container', 'shadow']\"\r\n             [cdkConnectedOverlayWidth]=\"_el.nativeElement.clientWidth\"\r\n             (overlayOutsideClick)=\"open.set(false)\"\r\n             (attach)=\"_onOverlayAttach()\"\r\n             (detach)=\"_onOverlayDetach()\">\r\n\r\n    @if(filterable()) {\r\n    <div class=\"ng0-select-filter-container border-bottom\">\r\n        <input #filterInput\r\n               type=\"text\"\r\n               class=\"ng0-select-filter-input form-control form-control-sm\"\r\n               [attr.placeholder]=\"filterPlaceholder()\"\r\n               (keydown)=\"_onKeydown($event, true)\"\r\n               (blur)=\"_onFilterBlur()\"\r\n               (input)=\"_filterItems($event.target.value)\">\r\n    </div>\r\n    }\r\n\r\n    <ul class=\"ng0-select-dropdown\"\r\n        cdkListbox\r\n        [cdkListboxValue]=\"_cdkListboxValue()\"\r\n        [attr.tabindex]=\"_isDisabled() ? undefined : -1\"\r\n        [class.is-open]=\"open()\">\r\n\r\n        @for (option of _options(); track $index) {\r\n        <li [cdkOption]=\"option.value\"\r\n            #cdkOption=\"cdkOption\"\r\n            [attr.id]=\"option.id\"\r\n            class=\"ng0-select-option\"\r\n            [class.ng0-select-option-active]=\"cdkOption.isActive()\"\r\n            [class.ng0-select-option-selected]=\"cdkOption.isSelected()\"\r\n            [class.ng0-select-option-filtered]=\"!option.show\"\r\n            (click)=\"cdkOption.select(); open.set(false)\"\r\n            (keyup.enter)=\"open.set(false)\">\r\n            @if(_optionTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"_optionTemplate; context: { $implicit: option}\" />\r\n            } @else {\r\n            @let v = formatBy()(option.value);\r\n            @if(v) {\r\n            {{v}}\r\n            }@else {\r\n            &nbsp;\r\n            }\r\n            }\r\n        </li>\r\n        }\r\n    </ul>\r\n</ng-template>", styles: ["ng0-select{user-select:none;-webkit-user-select:none;-moz-user-select:none;display:flex!important;align-items:center}ng0-select.disabled{background-color:var(--bs-secondary-bg)}.ng0-select-dropdown-container{display:flex;flex-direction:column;background-color:var(--bs-body-bg);border-radius:var(--bs-border-radius);padding:.5rem var(--bs-dropdown-padding-x);--ng0-select-item-padding-x: 1rem;--ng0-select-item-padding-y: .25rem}.ng0-select-dropdown-container ul.ng0-select-dropdown{list-style:none;border-start-start-radius:0;border-start-end-radius:0;padding:0!important;margin:0;flex-grow:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.4) transparent}.ng0-select-dropdown-container ul.ng0-select-dropdown.is-open{border-top:none}.ng0-select-dropdown-container ul.ng0-select-dropdown li{overflow:hidden;cursor:pointer;padding:var(--ng0-select-item-padding-y) var(--ng0-select-item-padding-x)}.ng0-select-dropdown-container ul.ng0-select-dropdown li:hover{background-color:var(--bs-tertiary-bg)}.ng0-select-dropdown-container ul.ng0-select-dropdown li.ng0-select-option-selected{background-color:var(--bs-primary);color:var(--bs-light)}.ng0-select-dropdown-container ul.ng0-select-dropdown li.ng0-select-option-active:not(.ng0-select-option-selected){background-color:var(--bs-gray-300);color:var(--bs-body)}.ng0-select-dropdown-container ul.ng0-select-dropdown li.ng0-select-option-filtered{display:none!important}.ng0-select-dropdown-container .ng0-select-filter-container{padding:1rem var(--ng0-select-item-padding-x);background-color:inherit}.ng0-select-dropdown-container .ng0-select-filter-container .ng0-select-filter-input{width:100%}\n"] }]
+                    }, template: "@let formattedValue = formatBy()(_mappedValue());\r\n\r\n@if(formattedValue == null || formattedValue == '') {\r\n&nbsp;\r\n}@else {\r\n{{formattedValue}}\r\n}\r\n\r\n@if(source().isLoading()) {\r\n<div class=\"spinner-border text-success spinner-border-sm ng0-select-spinner\" role=\"status\">\r\n    <span class=\"visually-hidden\">Loading...</span>\r\n</div>\r\n}\r\n\r\n<ng-template cdkConnectedOverlay\r\n             [cdkConnectedOverlayOrigin]=\"_el.nativeElement\"\r\n             [cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\r\n             [cdkConnectedOverlayOpen]=\"open()\"\r\n             [cdkConnectedOverlayPush]=\"false\"\r\n             [cdkConnectedOverlayFlexibleDimensions]=\"true\"\r\n             [cdkConnectedOverlayPanelClass]=\"['ng0-select-dropdown-container', 'shadow']\"\r\n             [cdkConnectedOverlayWidth]=\"_el.nativeElement.clientWidth\"\r\n             (overlayOutsideClick)=\"open.set(false)\"\r\n             (attach)=\"_onOverlayAttach()\"\r\n             (detach)=\"_onOverlayDetach()\">\r\n\r\n    @if(filterable()) {\r\n    <div class=\"ng0-select-filter-container border-bottom\">\r\n        <input #filterInput\r\n               type=\"text\"\r\n               class=\"ng0-select-filter-input form-control form-control-sm\"\r\n               [attr.placeholder]=\"filterPlaceholder()\"\r\n               (blur)=\"_onFilterBlur()\"\r\n               >\r\n    </div>\r\n    }\r\n\r\n    <ng0-list #list\r\n              [source]=\"source()\"\r\n              \r\n              [multiple]=\"multiple()\"\r\n              [idGenerator]=\"idGenerator()\"\r\n              [filterBy]=\"filterBy()\"\r\n              [compareBy]=\"compareBy()\"\r\n              focus=\"none\"\r\n              style=\"border: none; border-radius: 0;\"\r\n              (mousedown)=\"$event.preventDefault(); $event.stopImmediatePropagation()\"\r\n              (click)=\"open.set(false)\"\r\n              (selectionChange)=\"_onListSelectionChange($event)\">\r\n\r\n        <ng-template let-option>\r\n            @if(_optionTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"_optionTemplate; context: { $implicit: option}\" />\r\n            }@else {\r\n            {{formatBy()(option.value)}}\r\n            }\r\n        </ng-template>\r\n\r\n    </ng0-list>\r\n</ng-template>", styles: ["ng0-select{user-select:none;-webkit-user-select:none;-moz-user-select:none;display:flex!important;align-items:center}ng0-select.disabled{background-color:var(--bs-secondary-bg)}.ng0-select-dropdown-container{display:flex;flex-direction:column;background-color:var(--bs-body-bg);border-radius:var(--bs-border-radius);padding:.5rem var(--bs-dropdown-padding-x);--ng0-select-item-padding-x: 1rem;--ng0-select-item-padding-y: .25rem}.ng0-select-dropdown-container ul.ng0-select-dropdown{list-style:none;border-start-start-radius:0;border-start-end-radius:0;padding:0!important;margin:0;flex-grow:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.4) transparent}.ng0-select-dropdown-container ul.ng0-select-dropdown.is-open{border-top:none}.ng0-select-dropdown-container ul.ng0-select-dropdown li{overflow:hidden;cursor:pointer;padding:var(--ng0-select-item-padding-y) var(--ng0-select-item-padding-x)}.ng0-select-dropdown-container ul.ng0-select-dropdown li:hover{background-color:var(--bs-tertiary-bg)}.ng0-select-dropdown-container ul.ng0-select-dropdown li.ng0-select-option-selected{background-color:var(--bs-primary);color:var(--bs-light)}.ng0-select-dropdown-container ul.ng0-select-dropdown li.ng0-select-option-active:not(.ng0-select-option-selected){background-color:var(--bs-gray-300);color:var(--bs-body)}.ng0-select-dropdown-container ul.ng0-select-dropdown li.ng0-select-option-filtered{display:none!important}.ng0-select-dropdown-container .ng0-select-filter-container{padding:.5rem var(--ng0-select-item-padding-x);background-color:inherit}.ng0-select-dropdown-container .ng0-select-filter-container .ng0-select-filter-input{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _filterElementRef: [{
                 type: ViewChild,
                 args: ['filterInput']
+            }], _listComponent: [{
+                type: ViewChild,
+                args: [ListComponent]
             }], _optionTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef]
-            }], _onKeydown: [{
+            }], _onHostKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }], _onHostClick: [{