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

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

@@ -1,44 +1,42 @@
 import * as i0 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 { signal, inject, ElementRef, Renderer2, ChangeDetectorRef, input, booleanAttribute, model, effect, untracked, computed, TemplateRef, forwardRef, HostListener, ContentChild, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 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 { 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 { LocalizationService, defaultFormatter, objectFormatterAttribute } from '@bootkit/ng0/localization';
+import * as i1 from '@bootkit/ng0/components/list';
 import { ListModule, ListComponent } from '@bootkit/ng0/components/list';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { defaultEqualityComparer, equalityComparerAttribute, defaultValueWriter, valueWriterAttribute, defaultFilter, filterPredicateAttribute, CssClassAttribute, IdGeneratorAttribute } from '@bootkit/ng0/common';
 
 /**
  * Select component that allows users to choose an option from a dropdown list.
  */
 class SelectComponent {
-    _resizeObserver;
-    _resizeObserverInitialized = false;
+    // private _resizeObserver?: ResizeObserver;
     _viewpoerRulerSubscription;
     _filterElementRef;
     _listComponent;
     _changeCallback;
     _touchCallback;
-    _options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : []));
+    _sourceItems = signal(undefined, ...(ngDevMode ? [{ debugName: "_sourceItems" }] : []));
+    _selectedItems = new Set();
     _isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : []));
-    // protected readonly _selectedOptionIndex = signal<number>(-1);
-    _activeOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_activeOptionIndex" }] : []));
-    _optionTemplate;
     _positionStrategy;
     _scrollStrategy;
     _overlay = inject(Overlay);
-    _document = inject(DOCUMENT);
-    _ls = inject(LocalizationService);
-    _destroyRef = inject(DestroyRef);
-    _el = inject((ElementRef));
+    _localizationService = inject(LocalizationService);
+    _elementRef = inject((ElementRef));
+    _filterValue = signal('', ...(ngDevMode ? [{ debugName: "_filterValue" }] : []));
     _renderer = inject(Renderer2);
     _viewportRuler = inject(ViewportRuler);
-    _changeDetector = inject(ChangeDetectorRef);
-    _activateSlectedItemEffectRef;
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    /**
+     * Template for rendering each item in the select component.
+     */
+    itemTemplate;
     /**
      * The data source for the select component.
      * This can be an array of data, a function that returns an observable of data,
@@ -47,35 +45,37 @@ 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.
      */
     multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: booleanAttribute }] : [{
             transform: booleanAttribute
         }]));
+    /**
+     * Indicates whether to show selection indicator (checkbox/radio) next to each item.
+     * Default is false.
+     */
+    showSelectionIndicator = input(false, ...(ngDevMode ? [{ debugName: "showSelectionIndicator", transform: booleanAttribute }] : [{
+            transform: booleanAttribute
+        }]));
     /**
      * Indicates whether the dropdown is open or closed.
      */
     open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     /**
-    * A custom comparer function or the name of a field for comparing two objects.
+    * A comparer to compare items for selection.
     */
     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.
+     * A fromatter to convert each item to a string for display.
      */
-    formatBy = input(defaultObjectFormatter, ...(ngDevMode ? [{ debugName: "formatBy", transform: objectFormatterAttribute(this._ls.get()) }] : [{
-            transform: objectFormatterAttribute(this._ls.get())
+    formatBy = input(defaultFormatter, ...(ngDevMode ? [{ debugName: "formatBy", transform: objectFormatterAttribute(this._localizationService.get()) }] : [{
+            transform: objectFormatterAttribute(this._localizationService.get())
         }]));
     /**
-     * Custom value writer 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
@@ -84,58 +84,106 @@ class SelectComponent {
      * Indicates whether the select component is filterable.
      */
     filterable = input(false, ...(ngDevMode ? [{ debugName: "filterable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /**
-     * Placeholder text for the filter input field.
-     */
-    filterPlaceholder = input('', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
     /**
      * Custom filter function to filter items based on a filter value.
      * Default checks if the item contains the filter value (case-insensitive).
      */
-    filterBy = input(noopFilter, ...(ngDevMode ? [{ debugName: "filterBy" }] : []));
+    filterBy = input(defaultFilter, ...(ngDevMode ? [{ debugName: "filterBy", transform: filterPredicateAttribute }] : [{
+            transform: filterPredicateAttribute
+        }]));
+    /**
+     * Placeholder text for the filter input field.
+     */
+    filterPlaceholder = input(undefined, ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
     /**
      * CSS class or classes to apply to the items.
      */
-    itemClass = input((item) => undefined, ...(ngDevMode ? [{ debugName: "itemClass", transform: CssClassAttribute }] : [{
+    itemClass = input(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.
+     * A function that generates unique ids for each item in the list.
+     * If set to a function, it will be called with the item as an argument to generate the id.
+     * If set to undefined, no ids will be generated for the items.
+     * @default undefined
      */
-    idGenerator = input(sequentialIdGenerator('ng0-select-item-'), ...(ngDevMode ? [{ debugName: "idGenerator" }] : []));
+    idGenerator = input(undefined, ...(ngDevMode ? [{ debugName: "idGenerator", transform: IdGeneratorAttribute }] : [{
+            transform: IdGeneratorAttribute
+        }]));
     constructor() {
-        this._renderer.addClass(this._el.nativeElement, 'form-select');
-        this._renderer.setAttribute(this._el.nativeElement, 'tabindex', '0');
+        ['ng0-select', 'form-select'].forEach(c => this._renderer.addClass(this._elementRef.nativeElement, c));
         this._scrollStrategy = this._overlay.scrollStrategies.block();
         effect(() => {
-            var value = this.value(); // track value
-            this._changeCallback?.(value);
+            let source = this.source();
+            source.load(new DataRequest()).subscribe(res => {
+                untracked(() => {
+                    this._sourceItems.set(res.data);
+                    this._findAndSelectItems();
+                    this._changeDetectorRef.markForCheck();
+                });
+            });
         });
-        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();
-                }
+    }
+    /**
+     * Indicates whether the given value is selected.
+     * @param item
+     * @returns
+     */
+    isSelected(value) {
+        return this._selectedItems.has(value);
+    }
+    /**
+     * Selects the given value.
+     * @param item
+     */
+    select(value) {
+        if (this.multiple()) {
+            if (!this._selectedItems.has(value)) {
+                this._selectedItems.add(value);
+                this._updateValue();
+                this._changeCallback?.(this._value());
             }
-        }, ...(ngDevMode ? [{ debugName: "_activateSlectedItemEffectRef" }] : []));
+        }
+        else {
+            this._selectedItems.clear();
+            this._selectedItems.add(value);
+            this._updateValue();
+            this._changeCallback?.(this._value());
+        }
     }
-    ngOnInit() {
-        this.source().load(new DataRequest()).pipe(takeUntilDestroyed(this._destroyRef)).subscribe(res => {
-            this._options.set(res.data);
-            this._changeDetector.markForCheck();
-        });
+    /**
+     * Deselects the given value.
+     * @param item
+     */
+    deselect(value) {
+        this._selectedItems.delete(value);
+        this._updateValue();
+        this._changeCallback?.(this._value());
+    }
+    /**
+     * Toggles the selection state of the given value.
+     * @param item
+    */
+    toggle(value) {
+        if (this.isSelected(value)) {
+            this.deselect(value);
+        }
+        else {
+            this.select(value);
+        }
     }
     writeValue(obj) {
-        this.value.set(obj);
+        if (this.multiple()) {
+            if (obj === null || obj === undefined) {
+                obj = [];
+            }
+            else if (!Array.isArray(obj)) {
+                throw Error('invalid value. Expected an array in multiple selection mode.');
+            }
+        }
+        this._value.set(obj);
+        this._findAndSelectItems();
+        this._changeDetectorRef.markForCheck();
     }
     registerOnChange(fn) {
         this._changeCallback = fn;
@@ -146,13 +194,48 @@ class SelectComponent {
     setDisabledState(isDisabled) {
         this._isDisabled.set(isDisabled);
     }
-    _onFilterBlur() {
-        // use setTimeout to allow next element receives the focus.
-        // setTimeout(() => {
-        //     if (!this._el.nativeElement.matches(':focus')) {
-        //         this.open.set(false);
-        //     }
-        // }, 0);
+    _findAndSelectItems() {
+        let value = this._value();
+        let compareBy = this.compareBy();
+        let sourceItems = this._sourceItems();
+        if (sourceItems == undefined) {
+            return;
+        }
+        let findAndSelect = (v) => {
+            let index = sourceItems.findIndex(sourceItem => compareBy(sourceItem, v));
+            if (index > -1) {
+                let item = sourceItems.at(index);
+                this._selectedItems.add(item);
+            }
+        };
+        if (this.multiple()) {
+            if (Array.isArray(value)) {
+                value.forEach(v => findAndSelect(v));
+            }
+        }
+        else {
+            findAndSelect(value);
+        }
+    }
+    _updateValue() {
+        let value;
+        if (this.multiple()) {
+            let values = [];
+            this._selectedItems.forEach(v => {
+                values.push(this.writeBy()(v));
+            });
+            value = values;
+        }
+        else {
+            if (this._selectedItems.size > 0) {
+                let first = this._selectedItems.values().next().value;
+                value = this.writeBy()(first);
+            }
+            else {
+                value = undefined;
+            }
+        }
+        this._value.set(value);
     }
     _onOverlayAttach() {
         this._listenToResizeEvents();
@@ -160,6 +243,7 @@ class SelectComponent {
             if (this.filterable()) {
                 this._filterElementRef?.nativeElement.focus();
             }
+            this._listComponent.writeValue(this._value());
             // if (this._activeOptionIndex() > -1) {
             //     this._listComponent?.active(this._activeOptionIndex());
             // }
@@ -167,161 +251,144 @@ class SelectComponent {
     }
     _onOverlayDetach() {
         this._unlistenFromResizeEvents();
-        this._el.nativeElement.focus();
+        this._elementRef.nativeElement.focus();
+        this._filterValue.set('');
         this.open.set(false);
     }
     _onListSelectionChange(e) {
+        let value = e.item.value();
+        if (this.multiple()) {
+            this.toggle(value);
+        }
+        else {
+            this.select(value);
+        }
+        // this.selectionChange.emit({ item: item, list: this });
+        this._changeDetectorRef.detectChanges();
         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" }] : []));
+    _filterPredicate = computed(() => {
+        let filterValue = this._filterValue();
+        let filterBy = this.filterBy();
+        return (item) => filterBy(item, filterValue);
+    }, ...(ngDevMode ? [{ debugName: "_filterPredicate" }] : []));
+    _onFilterKeydown(e) {
+        let keys = ['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End'];
+        if (e.key === 'Tab') {
+            e.preventDefault();
+            this.open.set(false);
+        }
+        if (keys.includes(e.key)) {
+            e.preventDefault();
+            const newEvent = new KeyboardEvent(e.type, e);
+            this._listComponent?.elementRef.nativeElement.dispatchEvent(newEvent);
+        }
+    }
     _listenToResizeEvents() {
         this._viewportRuler.change().subscribe(x => {
             this.open.set(false);
         });
-        this._resizeObserver = new ResizeObserver(e => {
-            // Sterategy 1: close overlay
-            if (!this._resizeObserverInitialized) {
-                this._resizeObserverInitialized = true;
-                return;
-            }
-            else {
-                this.open.set(false);
-                this._resizeObserver?.disconnect();
-            }
-            // Sterategy 2: update overlay size
-            // const width = (e[0].target as HTMLDivElement).offsetWidth;
-            // this._connectedOverlay.overlayRef.updateSize({ width });
-        });
-        this._resizeObserver.observe(this._el.nativeElement);
+        // this._resizeObserver = new ResizeObserver(e => {
+        //     // update overlay size
+        //     // const width = (e[0].target as HTMLDivElement).offsetWidth;
+        //     // this._connectedOverlay.overlayRef.updateSize({ width });
+        // });
+        // this._resizeObserver.observe(this._elementRef.nativeElement);
     }
     _unlistenFromResizeEvents() {
         this._viewpoerRulerSubscription?.unsubscribe();
         this._viewpoerRulerSubscription = undefined;
-        this._resizeObserver?.disconnect();
-        this._resizeObserver = undefined;
-        this._resizeObserverInitialized = false;
-    }
-    _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);
-        }
+        // this._resizeObserver?.disconnect();
+        // this._resizeObserver = undefined;
     }
     _onHostKeydown(e) {
-        if (this._isDisabled())
-            return;
-        let optionsCount = this._options().length;
-        if (optionsCount == 0) {
+        let sourceItems = this._sourceItems();
+        let itemsCount = sourceItems?.length || 0;
+        if (this._isDisabled() || !sourceItems || itemsCount === 0) {
             return;
         }
         if (this.open()) {
             const newEvent = new KeyboardEvent(e.type, e);
             this._listComponent?.elementRef.nativeElement.dispatchEvent(newEvent);
+            return;
+        }
+        let selectedItemindex;
+        if (this._selectedItems.size == 0) {
+            selectedItemindex = -1;
         }
         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;
-            }
+            let firstValue = this._selectedItems.values().next().value;
+            selectedItemindex = sourceItems.findIndex(i => i === firstValue);
+        }
+        switch (e.key) {
+            case 'ArrowDown':
+                if (selectedItemindex < itemsCount - 1) {
+                    this.select(sourceItems[selectedItemindex + 1]);
+                }
+                e.preventDefault();
+                break;
+            case 'ArrowUp':
+                if (selectedItemindex > 0) {
+                    this.select(sourceItems[selectedItemindex - 1]);
+                }
+                e.preventDefault();
+                break;
+            case 'Enter':
+                this.open.set(true);
+                e.preventDefault();
+                break;
+            case 'Home':
+                if (itemsCount > 0) {
+                    this.select(sourceItems[0]);
+                }
+                e.preventDefault();
+                break;
+            case 'End':
+                if (itemsCount > 0) {
+                    this.select(sourceItems[itemsCount - 1]);
+                }
+                e.preventDefault();
+                break;
         }
+        this._changeDetectorRef.markForCheck();
     }
     _onHostClick(e) {
-        if (!this._isDisabled()) {
-            this.open.update(x => !x);
-            // this._onTouchedCallback?.(this._selectedValue());
+        if (this._isDisabled() || this.source().isLoading()) {
+            return;
         }
+        this.open.update(x => !x);
+        this._touchCallback?.();
     }
     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 }, 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: [{
+    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 }, showSelectionIndicator: { classPropertyName: "showSelectionIndicator", publicName: "showSelectionIndicator", 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 }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", 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: { open: "openChange" }, host: { listeners: { "keydown": "_onHostKeydown($event)", "click": "_onHostClick($event)" }, properties: { "class.ng0-select-open": "open()", "class.ng0-select-filterable": "filterable()", "class.ng0-select-loading": "source().isLoading()", "attr.disabled": "_isDisabled() ? \"\" : undefined", "attr.aria-disabled": "_isDisabled() ? \"\" : undefined", "attr.tabindex": "_isDisabled() ? undefined : 0" } }, 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 }, { 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              [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", "trackBy", "itemClass", "focus", "idGenerator"], outputs: ["selectionChange"], exportAs: ["ng0List"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+            }], queries: [{ propertyName: "itemTemplate", 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: "@if(multiple()) {\r\n\r\n@for(item of _selectedItems.values(); track $index; let last=$last) {\r\n{{formatBy()(item)}}@if(!last) {,}\r\n}\r\n\r\n} @else {\r\n@if(_selectedItems.size > 0) {\r\n{{formatBy()(_selectedItems.values().next().value)}}\r\n}\r\n}\r\n\r\n@if(source().isLoading()) {\r\n<div class=\"spinner-grow text-secondary spinner-grow-sm ng0-select-spinner\" role=\"status\">\r\n    <span class=\"visually-hidden\">Loading...</span>\r\n</div>\r\n\r\n&nbsp; <!-- This space is required to prevent layout shift after loading indicator hides. -->\r\n}\r\n\r\n<ng-template cdkConnectedOverlay\r\n             [cdkConnectedOverlayOrigin]=\"_elementRef.nativeElement\"\r\n             [cdkConnectedOverlayOpen]=\"open()\"\r\n             [cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\r\n             [cdkConnectedOverlayPush]=\"false\"\r\n             [cdkConnectedOverlayFlexibleDimensions]=\"true\"\r\n             [cdkConnectedOverlayPanelClass]=\"['ng0-select-dropdown']\"\r\n             [cdkConnectedOverlayWidth]=\"_elementRef.nativeElement.clientWidth\"\r\n             (overlayOutsideClick)=\"this.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\">\r\n        <input #filterInput\r\n               type=\"text\"\r\n               class=\"ng0-select-filter-input\"\r\n               [attr.placeholder]=\"filterPlaceholder()\"\r\n               (input)=\"_filterValue.set($event.target.value)\"\r\n               (keydown)=\"_onFilterKeydown($event)\">\r\n    </div>\r\n    }\r\n\r\n    <ng0-select-list #list\r\n                     [source]=\"_sourceItems()\"\r\n                     [multiple]=\"multiple()\"\r\n                     [formatBy]=\"formatBy()\"\r\n                     [compareBy]=\"compareBy()\"\r\n                     [itemClass]=\"itemClass()\"\r\n                     [showSelectionIndicator]=\"showSelectionIndicator()\"\r\n                     [itemTemplate]=\"itemTemplate\"\r\n                     [filterBy]=\"_filterPredicate()\"\r\n                     focusMode=\"none\"\r\n                     (mousedown)=\"$event.preventDefault(); $event.stopImmediatePropagation()\"\r\n                     (selectionChange)=\"_onListSelectionChange($event)\">\r\n    </ng0-select-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],ng0-select.disabled{opacity:.5;pointer-events:none}ng0-select:empty:before{content:\" \";white-space:pre}ng0-select:focus,ng0-select:focus-visible,ng0-select.ng0-select-open.ng0-select-filterable{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-select-dropdown{display:flex;flex-direction:column;background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow-y:auto;margin:var(--bs-focus-ring-width, 0) 0}.ng0-select-filter-container{padding:.5rem;background-color:inherit}.ng0-select-filter-container .ng0-select-filter-input{width:100%;border:1px solid var(--bs-border-color);border-radius:.2rem;padding:.25rem}.ng0-select-filter-container .ng0-select-filter-input:focus,.ng0-select-filter-container .ng0-select-filter-input:focus-visible{outline:0}ng0-select-list{flex-grow:1;overflow-y:auto}ng0-select-list ng0-list-item{padding:.5rem;display:flex}ng0-select-list ng0-list-item.selected{background-color:var(--bs-primary);color:var(--bs-light)}ng0-select-list ng0-list-item.active:not(.selected){background-color:color-mix(in srgb,var(--bs-primary),white 85%)}ng0-select-list ng0-list-item:hover:not(.selected):not(.disabled):not(.active){background-color:color-mix(in srgb,var(--bs-primary),white 95%)}ng0-select-list ng0-list-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}ng0-select-list ng0-list-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}ng0-select-list ng0-list-item .ng0-selection-indicator{margin-inline-end:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i1.ListComponent, selector: "ng0-list, ng0-select-list", inputs: ["source", "multiple", "showSelectionIndicator", "compareBy", "formatBy", "writeBy", "filterBy", "trackBy", "itemClass", "focusMode", "idGenerator", "itemTemplate"], outputs: ["selectionChange"], exportAs: ["ng0List"] }, { 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"] }], 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,
-                        ListModule,
-                    ], providers: [{
+            args: [{ selector: 'ng0-select', exportAs: 'ng0Select', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, ListModule, OverlayModule], providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true
                         }], host: {
                         '[class.ng0-select-open]': 'open()',
+                        '[class.ng0-select-filterable]': 'filterable()',
                         '[class.ng0-select-loading]': 'source().isLoading()',
-                        '[attr.aria-activedescendant]': '_activeOptionIndex() > -1 ? (_options()[_activeOptionIndex()].id) : undefined',
-                        '[attr.disabled]': '_isDisabled()',
-                        '[attr.aria-disabled]': '_isDisabled()'
-                    }, 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              [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"] }]
+                        '[attr.disabled]': '_isDisabled() ? "" : undefined',
+                        '[attr.aria-disabled]': '_isDisabled() ? "" : undefined',
+                        '[attr.tabindex]': '_isDisabled() ? undefined : 0',
+                    }, template: "@if(multiple()) {\r\n\r\n@for(item of _selectedItems.values(); track $index; let last=$last) {\r\n{{formatBy()(item)}}@if(!last) {,}\r\n}\r\n\r\n} @else {\r\n@if(_selectedItems.size > 0) {\r\n{{formatBy()(_selectedItems.values().next().value)}}\r\n}\r\n}\r\n\r\n@if(source().isLoading()) {\r\n<div class=\"spinner-grow text-secondary spinner-grow-sm ng0-select-spinner\" role=\"status\">\r\n    <span class=\"visually-hidden\">Loading...</span>\r\n</div>\r\n\r\n&nbsp; <!-- This space is required to prevent layout shift after loading indicator hides. -->\r\n}\r\n\r\n<ng-template cdkConnectedOverlay\r\n             [cdkConnectedOverlayOrigin]=\"_elementRef.nativeElement\"\r\n             [cdkConnectedOverlayOpen]=\"open()\"\r\n             [cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\r\n             [cdkConnectedOverlayPush]=\"false\"\r\n             [cdkConnectedOverlayFlexibleDimensions]=\"true\"\r\n             [cdkConnectedOverlayPanelClass]=\"['ng0-select-dropdown']\"\r\n             [cdkConnectedOverlayWidth]=\"_elementRef.nativeElement.clientWidth\"\r\n             (overlayOutsideClick)=\"this.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\">\r\n        <input #filterInput\r\n               type=\"text\"\r\n               class=\"ng0-select-filter-input\"\r\n               [attr.placeholder]=\"filterPlaceholder()\"\r\n               (input)=\"_filterValue.set($event.target.value)\"\r\n               (keydown)=\"_onFilterKeydown($event)\">\r\n    </div>\r\n    }\r\n\r\n    <ng0-select-list #list\r\n                     [source]=\"_sourceItems()\"\r\n                     [multiple]=\"multiple()\"\r\n                     [formatBy]=\"formatBy()\"\r\n                     [compareBy]=\"compareBy()\"\r\n                     [itemClass]=\"itemClass()\"\r\n                     [showSelectionIndicator]=\"showSelectionIndicator()\"\r\n                     [itemTemplate]=\"itemTemplate\"\r\n                     [filterBy]=\"_filterPredicate()\"\r\n                     focusMode=\"none\"\r\n                     (mousedown)=\"$event.preventDefault(); $event.stopImmediatePropagation()\"\r\n                     (selectionChange)=\"_onListSelectionChange($event)\">\r\n    </ng0-select-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],ng0-select.disabled{opacity:.5;pointer-events:none}ng0-select:empty:before{content:\" \";white-space:pre}ng0-select:focus,ng0-select:focus-visible,ng0-select.ng0-select-open.ng0-select-filterable{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-select-dropdown{display:flex;flex-direction:column;background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow-y:auto;margin:var(--bs-focus-ring-width, 0) 0}.ng0-select-filter-container{padding:.5rem;background-color:inherit}.ng0-select-filter-container .ng0-select-filter-input{width:100%;border:1px solid var(--bs-border-color);border-radius:.2rem;padding:.25rem}.ng0-select-filter-container .ng0-select-filter-input:focus,.ng0-select-filter-container .ng0-select-filter-input:focus-visible{outline:0}ng0-select-list{flex-grow:1;overflow-y:auto}ng0-select-list ng0-list-item{padding:.5rem;display:flex}ng0-select-list ng0-list-item.selected{background-color:var(--bs-primary);color:var(--bs-light)}ng0-select-list ng0-list-item.active:not(.selected){background-color:color-mix(in srgb,var(--bs-primary),white 85%)}ng0-select-list ng0-list-item:hover:not(.selected):not(.disabled):not(.active){background-color:color-mix(in srgb,var(--bs-primary),white 95%)}ng0-select-list ng0-list-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}ng0-select-list ng0-list-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}ng0-select-list ng0-list-item .ng0-selection-indicator{margin-inline-end:.5rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _filterElementRef: [{
                 type: ViewChild,
                 args: ['filterInput']
             }], _listComponent: [{
                 type: ViewChild,
                 args: [ListComponent]
-            }], _optionTemplate: [{
+            }], itemTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef]
             }], _onHostKeydown: [{