@ngstarter-ui/components 21.0.49 → 21.0.50

package/fesm2022/ngstarter-ui-components-select.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, InjectionToken, inject, TemplateRef, input, numberAttribute, booleanAttribute, contentChild, computed, ChangeDetectionStrategy, Component, ElementRef, ChangeDetectorRef, signal, contentChildren, output, viewChild, model, DestroyRef, effect, untracked, forwardRef } from '@angular/core';
+import { Directive, InjectionToken, inject, TemplateRef, input, numberAttribute, booleanAttribute, contentChild, computed, ChangeDetectionStrategy, Component, ElementRef, ChangeDetectorRef, signal, contentChildren, output, viewChildren, viewChild, model, DestroyRef, effect, untracked, forwardRef } from '@angular/core';
 import { outputToObservable } from '@angular/core/rxjs-interop';
 import { NgControl } from '@angular/forms';
 import { NgTemplateOutlet } from '@angular/common';
@@ -7,7 +7,7 @@ import { SelectionModel } from '@angular/cdk/collections';
 import * as i1 from '@angular/cdk/overlay';
 import { CdkConnectedOverlay, OverlayModule, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { Subject, takeUntil } from 'rxjs';
-import { OPTION, Optgroup, OPTION_PARENT } from '@ngstarter-ui/components/option';
+import { OPTION, Optgroup, Option, OPTION_PARENT } from '@ngstarter-ui/components/option';
 export { Optgroup, Option } from '@ngstarter-ui/components/option';
 import { FORM_FIELD, FormFieldControl } from '@ngstarter-ui/components/form-field';
 import { AUTOFOCUSABLE } from '@ngstarter-ui/components/core';
@@ -104,6 +104,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                     }, styles: [":host{display:block;position:relative;flex:1;overflow:auto;min-height:0;max-height:var(--ngs-select-panel-max-height, var(--ngs-dropdown-max-height, 256px));padding:var(--ngs-select-content-padding, var(--ngs-dropdown-padding, calc(var(--spacing, .25rem) * 2)));box-sizing:border-box}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
+class SelectHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: SelectHeader, isStandalone: true, selector: "ngs-select-header", host: { classAttribute: "ngs-select-header" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block;background:var(--ngs-select-panel-bg, var(--ngs-dropdown-bg))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-select-header', standalone: true, imports: [], template: '<ng-content />', host: {
+                        'class': 'ngs-select-header'
+                    }, styles: [":host{display:block;background:var(--ngs-select-panel-bg, var(--ngs-dropdown-bg))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class SelectOptionContentDef {
+    templateRef = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectOptionContentDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: SelectOptionContentDef, isStandalone: true, selector: "ng-template[ngsOptionContentDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectOptionContentDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[ngsOptionContentDef]',
+                    standalone: true
+                }]
+        }] });
+
+class SelectValueDef {
+    templateRef = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectValueDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: SelectValueDef, isStandalone: true, selector: "ng-template[ngsSelectValueDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectValueDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[ngsSelectValueDef]',
+                    standalone: true
+                }]
+        }] });
+
 class SelectChange {
     source;
     value;
@@ -134,6 +177,12 @@ class Select {
     multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     hideCheckIcon = input(false, { ...(ngDevMode ? { debugName: "hideCheckIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    dataSource = input(null, ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    pageSize = input(25, { ...(ngDevMode ? { debugName: "pageSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    searchDebounce = input(250, { ...(ngDevMode ? { debugName: "searchDebounce" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    minSearchLength = input(0, { ...(ngDevMode ? { debugName: "minSearchLength" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    loadOnOpen = input(true, { ...(ngDevMode ? { debugName: "loadOnOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     tabIndex = input(0, { ...(ngDevMode ? { debugName: "tabIndex" } : /* istanbul ignore next */ {}), transform: (value) => value == null ? 0 : parseInt(value + '', 10) });
     ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
@@ -142,10 +191,17 @@ class Select {
     selectionChange = output();
     opened = output();
     closed = output();
-    options = contentChildren(OPTION, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
+    projectedOptions = contentChildren(OPTION, { ...(ngDevMode ? { debugName: "projectedOptions" } : /* istanbul ignore next */ {}), descendants: true });
+    dataSourceOptions = viewChildren(OPTION, ...(ngDevMode ? [{ debugName: "dataSourceOptions" }] : /* istanbul ignore next */ []));
+    options = computed(() => [
+        ...this.projectedOptions(),
+        ...this.dataSourceOptions()
+    ], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     optionGroups = contentChildren(Optgroup, { ...(ngDevMode ? { debugName: "optionGroups" } : /* istanbul ignore next */ {}), descendants: true });
     customTrigger = contentChildren(SelectTrigger, { ...(ngDevMode ? { debugName: "customTrigger" } : /* istanbul ignore next */ {}), descendants: true });
     filterTrigger = contentChildren(FilterTrigger, { ...(ngDevMode ? { debugName: "filterTrigger" } : /* istanbul ignore next */ {}), descendants: true });
+    optionContentDef = contentChild(SelectOptionContentDef, { ...(ngDevMode ? { debugName: "optionContentDef" } : /* istanbul ignore next */ {}), descendants: true });
+    selectValueDef = contentChild(SelectValueDef, { ...(ngDevMode ? { debugName: "selectValueDef" } : /* istanbul ignore next */ {}), descendants: true });
     overlayDir = viewChild(CdkConnectedOverlay, ...(ngDevMode ? [{ debugName: "overlayDir" }] : /* istanbul ignore next */ []));
     panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
     origin = viewChild('origin', ...(ngDevMode ? [{ debugName: "origin" }] : /* istanbul ignore next */ []));
@@ -172,10 +228,34 @@ class Select {
     _optionsContentChanges = signal(0, ...(ngDevMode ? [{ debugName: "_optionsContentChanges" }] : /* istanbul ignore next */ []));
     _errorState = signal(false, ...(ngDevMode ? [{ debugName: "_errorState" }] : /* istanbul ignore next */ []));
     get errorState() { return this._errorState(); }
+    asyncOptions = signal([], ...(ngDevMode ? [{ debugName: "asyncOptions" }] : /* istanbul ignore next */ []));
+    asyncSearch = signal('', ...(ngDevMode ? [{ debugName: "asyncSearch" }] : /* istanbul ignore next */ []));
+    asyncLoading = signal(false, ...(ngDevMode ? [{ debugName: "asyncLoading" }] : /* istanbul ignore next */ []));
+    asyncLoadingMore = signal(false, ...(ngDevMode ? [{ debugName: "asyncLoadingMore" }] : /* istanbul ignore next */ []));
+    asyncError = signal(null, ...(ngDevMode ? [{ debugName: "asyncError" }] : /* istanbul ignore next */ []));
+    asyncHasMore = signal(false, ...(ngDevMode ? [{ debugName: "asyncHasMore" }] : /* istanbul ignore next */ []));
+    asyncEnabled = computed(() => !!this.dataSource(), ...(ngDevMode ? [{ debugName: "asyncEnabled" }] : /* istanbul ignore next */ []));
+    _asyncSelectedCache = signal([], ...(ngDevMode ? [{ debugName: "_asyncSelectedCache" }] : /* istanbul ignore next */ []));
+    _asyncPage = 0;
+    _asyncCursor;
+    _asyncSearchTimer = null;
+    _asyncRequestId = 0;
+    _asyncAbortController = null;
+    _lastDataSource = undefined;
+    _lastInitialSelectedKey = '';
+    _destroyed = false;
     _empty = computed(() => {
         this._selectionChanges();
+        this._asyncSelectedCache();
+        this.asyncOptions();
         const value = this.value();
         const isValueEmpty = value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0);
+        if (isValueEmpty) {
+            return true;
+        }
+        if (this.asyncEnabled()) {
+            return this._selectedValues(value).every(selectedValue => !this._asyncOptionForValue(selectedValue));
+        }
         const isEmpty = (this._selectionModel?.isEmpty() ?? true) && isValueEmpty;
         return isEmpty;
     }, ...(ngDevMode ? [{ debugName: "_empty" }] : /* istanbul ignore next */ []));
@@ -228,6 +308,18 @@ class Select {
                 }
             });
         });
+        effect(() => {
+            const dataSource = this.dataSource();
+            untracked(() => {
+                if (dataSource !== this._lastDataSource) {
+                    this._lastDataSource = dataSource;
+                    this._resetAsyncState();
+                }
+                if (!dataSource) {
+                    return;
+                }
+            });
+        });
         effect(() => {
             this._optionsContentChanges();
             untracked(() => {
@@ -242,13 +334,19 @@ class Select {
         this._selectionChanges();
         this.options();
         this._optionsContentChanges();
+        this._asyncSelectedCache();
+        this.asyncOptions();
         if (this.empty) {
             return '';
         }
         if (this.multiple()) {
-            return this._selectionModel.selected.map(option => option.viewValue).join(', ');
+            const values = this._selectedValues(this.value());
+            return values
+                .map(value => this._viewValueForValue(value))
+                .filter(value => value.length > 0)
+                .join(', ');
         }
-        return this._selectionModel.selected[0]?.viewValue || '';
+        return this._selectionModel.selected[0]?.viewValue || this._viewValueForValue(this.value()) || '';
     }, ...(ngDevMode ? [{ debugName: "triggerValue" }] : /* istanbul ignore next */ []));
     selectedCount = computed(() => {
         this._selectionChanges();
@@ -264,12 +362,66 @@ class Select {
     }, ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
     selectedData = computed(() => {
         this._selectionChanges();
+        this._asyncSelectedCache();
+        this.asyncOptions();
+        if (this.asyncEnabled()) {
+            if (this.multiple()) {
+                return this._selectedValues(this.value()).map(value => this._dataForValue(value));
+            }
+            const value = this.value();
+            return value === null || value === undefined || value === '' ? null : this._dataForValue(value);
+        }
         if (this.multiple()) {
             return this._selectionModel.selected.map(option => this._getOptionData(option));
         }
         const selectedOption = this._selectionModel.selected[0];
         return selectedOption ? this._getOptionData(selectedOption) : null;
     }, ...(ngDevMode ? [{ debugName: "selectedData" }] : /* istanbul ignore next */ []));
+    selectValueContext = computed(() => {
+        this._selectionChanges();
+        this._asyncSelectedCache();
+        this.asyncOptions();
+        const values = this._selectedValues(this.value());
+        const labels = values.map(value => this._viewValueForValue(value)).filter(label => label.length > 0);
+        const options = values
+            .map(value => this._displayOptionForValue(value))
+            .filter((option) => !!option);
+        if (this.multiple()) {
+            const data = values.map(value => this._dataForValue(value));
+            return {
+                $implicit: data,
+                data,
+                option: options,
+                value: values,
+                label: labels.join(', '),
+                labels,
+                count: values.length,
+                multiple: true
+            };
+        }
+        const value = values[0] ?? null;
+        const data = value === null ? null : this._dataForValue(value);
+        return {
+            $implicit: data,
+            data,
+            option: options[0] ?? null,
+            value,
+            label: labels[0] ?? '',
+            labels,
+            count: values.length,
+            multiple: false
+        };
+    }, ...(ngDevMode ? [{ debugName: "selectValueContext" }] : /* istanbul ignore next */ []));
+    selectValueTemplateReady = computed(() => {
+        this._selectionChanges();
+        this._asyncSelectedCache();
+        this.asyncOptions();
+        if (!this.asyncEnabled()) {
+            return true;
+        }
+        const values = this._selectedValues(this.value());
+        return values.length > 0 && values.every(value => !!this._asyncOptionForValue(value));
+    }, ...(ngDevMode ? [{ debugName: "selectValueTemplateReady" }] : /* istanbul ignore next */ []));
     ngAfterContentInit() {
     }
     _resetOptions() {
@@ -285,6 +437,8 @@ class Select {
         });
     }
     ngOnDestroy() {
+        this._destroyed = true;
+        this._asyncAbortController?.abort();
         this._destroy.next();
         this._destroy.complete();
         this._optionsDestroy.next();
@@ -314,6 +468,22 @@ class Select {
         this._focused.set(true);
         this.stateChanges.set(undefined);
         this.opened.emit();
+        if (this.dataSource() && this.loadOnOpen() && !this.asyncLoading()) {
+            const selectedValues = this._selectedValues(this.value());
+            const selectedKey = this._selectedValuesKey(selectedValues);
+            const initialKey = `${this.pageSize()}:${selectedKey}`;
+            const missingSelectedOption = selectedValues.some(value => !this._asyncOptionForValue(value));
+            const shouldLoadOptions = this.asyncOptions().length === 0 || missingSelectedOption;
+            if (shouldLoadOptions) {
+                const reason = selectedValues.length > 0 && missingSelectedOption && initialKey !== this._lastInitialSelectedKey
+                    ? 'initial'
+                    : 'open';
+                if (reason === 'initial') {
+                    this._lastInitialSelectedKey = initialKey;
+                }
+                void this._loadFirstPage(reason);
+            }
+        }
         setTimeout(() => {
             this._scrollToSelectedOption();
         }, 10);
@@ -393,7 +563,55 @@ class Select {
             this.close();
         }
     }
+    onAsyncSearchInput(value) {
+        this.asyncSearch.set(value);
+        if (this._asyncSearchTimer) {
+            clearTimeout(this._asyncSearchTimer);
+        }
+        this._asyncSearchTimer = setTimeout(() => {
+            this._asyncSearchTimer = null;
+            if (value.length > 0 && value.length < this.minSearchLength()) {
+                this.asyncOptions.set([]);
+                this.asyncHasMore.set(false);
+                this.asyncError.set(null);
+                return;
+            }
+            void this._loadFirstPage('search');
+        }, Math.max(0, this.searchDebounce()));
+    }
+    onAsyncContentScroll(event) {
+        const target = event.target;
+        if (!target || !this.asyncHasMore() || this.asyncLoading() || this.asyncLoadingMore()) {
+            return;
+        }
+        const threshold = 32;
+        const remaining = target.scrollHeight - target.scrollTop - target.clientHeight;
+        if (remaining <= threshold) {
+            void this._loadNextPage();
+        }
+    }
+    retryAsyncLoad() {
+        void this._loadFirstPage(this.asyncSearch() ? 'search' : 'open');
+    }
+    asyncOptionContext(option) {
+        const selected = this._selectedValues(this.value())
+            .some(value => this._compareValues(value, option.value));
+        return {
+            $implicit: option.data === undefined ? option.value : option.data,
+            data: option.data === undefined ? option.value : option.data,
+            option,
+            value: option.value,
+            label: option.label,
+            selected,
+            disabled: option.disabled === true,
+            multiple: this.multiple()
+        };
+    }
     _selectOption(option) {
+        if (this.asyncEnabled() && this.multiple()) {
+            this._selectAsyncMultipleOption(option);
+            return;
+        }
         const wasSelected = this._selectionModel.isSelected(option);
         if (this.multiple()) {
             this._selectionModel.toggle(option);
@@ -405,6 +623,19 @@ class Select {
             this._propagateChanges();
         }
     }
+    _selectAsyncMultipleOption(option) {
+        const optionValue = option.value();
+        const selectedValues = this._selectedValues(this.value());
+        const selectedIndex = selectedValues.findIndex(value => this._compareValues(value, optionValue));
+        const nextValues = selectedIndex >= 0
+            ? selectedValues.filter((_, index) => index !== selectedIndex)
+            : [...selectedValues, optionValue];
+        this.value.set(nextValues);
+        this._setSelectionByValue(nextValues);
+        this._onChange(nextValues);
+        this.selectionChange.emit(new SelectChange(this, nextValues));
+        this._cdr.markForCheck();
+    }
     _propagateChanges() {
         let valueToEmit;
         if (this.multiple()) {
@@ -452,6 +683,25 @@ class Select {
             }
         }
         const option = selected.elementRef.nativeElement;
+        this._scrollOptionElementIntoContainer(option, scrollContainer);
+    }
+    _scrollToAsyncOptionValue(value) {
+        const panel = this.panel()?.nativeElement;
+        if (!panel) {
+            return;
+        }
+        const scrollContainer = panel.querySelector('.ngs-select-async-content');
+        if (!scrollContainer) {
+            return;
+        }
+        const option = this.dataSourceOptions()
+            .find(option => this._compareValues(option.value(), value));
+        if (!option) {
+            return;
+        }
+        this._scrollOptionElementIntoContainer(option.elementRef.nativeElement, scrollContainer);
+    }
+    _scrollOptionElementIntoContainer(option, scrollContainer) {
         let offsetTop = 0;
         let currentElement = option;
         while (currentElement && currentElement !== scrollContainer && scrollContainer.contains(currentElement)) {
@@ -462,10 +712,10 @@ class Select {
         const containerScrollTop = scrollContainer.scrollTop;
         const containerHeight = scrollContainer.clientHeight;
         if (offsetTop < containerScrollTop) {
-            scrollContainer.scrollTop = offsetTop;
+            this._setScrollTop(scrollContainer, offsetTop);
         }
         else if (offsetTop + optionHeight > containerScrollTop + containerHeight) {
-            scrollContainer.scrollTop = offsetTop - containerHeight + optionHeight;
+            this._setScrollTop(scrollContainer, offsetTop - containerHeight + optionHeight);
         }
         // Дополнительная проверка: если скролл все еще не там, попробуем через getBoundingClientRect
         // но только как fallback, так как offsetTop надежнее если offsetParent настроены верно.
@@ -474,13 +724,21 @@ class Select {
         if (optionRect.top < containerRect.top || optionRect.bottom > containerRect.bottom) {
             const relativeOffsetTop = optionRect.top - containerRect.top + scrollContainer.scrollTop;
             if (relativeOffsetTop < scrollContainer.scrollTop) {
-                scrollContainer.scrollTop = relativeOffsetTop;
+                this._setScrollTop(scrollContainer, relativeOffsetTop);
             }
             else if (relativeOffsetTop + optionHeight > scrollContainer.scrollTop + containerHeight) {
-                scrollContainer.scrollTop = relativeOffsetTop - containerHeight + optionHeight;
+                this._setScrollTop(scrollContainer, relativeOffsetTop - containerHeight + optionHeight);
             }
         }
     }
+    _setScrollTop(element, value) {
+        try {
+            element.scrollTop = value;
+        }
+        catch {
+            // Some test DOM mocks expose scrollTop as read-only.
+        }
+    }
     _getOptionIndex(option) {
         return this.options().indexOf(option);
     }
@@ -504,8 +762,205 @@ class Select {
             this._selectionModel.select(correspondingOption);
         }
     }
+    async _loadFirstPage(reason) {
+        await this._loadAsyncPage({ reason, append: false });
+    }
+    async _loadNextPage() {
+        await this._loadAsyncPage({ reason: 'page', append: true });
+    }
+    async _loadAsyncPage(config) {
+        const dataSource = this.dataSource();
+        if (!dataSource) {
+            return;
+        }
+        if (config.append && (!this.asyncHasMore() || this.asyncLoadingMore())) {
+            return;
+        }
+        this._asyncAbortController?.abort();
+        const abortController = new AbortController();
+        this._asyncAbortController = abortController;
+        const requestId = ++this._asyncRequestId;
+        const nextPage = config.append ? this._asyncPage + 1 : 1;
+        let firstLoadedOptionValue;
+        let hasLoadedOptionToScroll = false;
+        if (config.append) {
+            this.asyncLoadingMore.set(true);
+        }
+        else {
+            this.asyncLoading.set(true);
+            this.asyncError.set(null);
+            this._asyncPage = 0;
+            this._asyncCursor = undefined;
+            this.asyncHasMore.set(false);
+        }
+        try {
+            const result = await dataSource({
+                search: this.asyncSearch(),
+                page: nextPage,
+                pageSize: this.pageSize(),
+                cursor: config.append ? this._asyncCursor : undefined,
+                selectedValues: this._selectedValues(this.value()),
+                reason: config.reason,
+                signal: abortController.signal
+            });
+            if (requestId !== this._asyncRequestId || abortController.signal.aborted) {
+                return;
+            }
+            const normalized = this._normalizeAsyncResult(result);
+            const items = config.append
+                ? this._mergeAsyncOptions(this.asyncOptions(), normalized.items)
+                : this._mergeAsyncOptions([], normalized.items);
+            const firstLoadedOption = normalized.items[0];
+            if (firstLoadedOption) {
+                firstLoadedOptionValue = firstLoadedOption.value;
+                hasLoadedOptionToScroll = true;
+            }
+            this.asyncOptions.set(items);
+            this._cacheAsyncSelectedOptions(normalized.items);
+            this.asyncHasMore.set(!!normalized.hasMore);
+            this._asyncCursor = normalized.nextCursor;
+            this._asyncPage = nextPage;
+            this.asyncError.set(null);
+            this._optionsContentChanges.update(v => v + 1);
+        }
+        catch (error) {
+            if (requestId === this._asyncRequestId && !abortController.signal.aborted) {
+                this.asyncError.set(error);
+            }
+        }
+        finally {
+            if (requestId === this._asyncRequestId) {
+                this.asyncLoading.set(false);
+                this.asyncLoadingMore.set(false);
+                if (!this._destroyed) {
+                    this._cdr.detectChanges();
+                    if (hasLoadedOptionToScroll) {
+                        this._scrollToAsyncOptionValue(firstLoadedOptionValue);
+                    }
+                    this._cdr.markForCheck();
+                }
+            }
+        }
+    }
+    _normalizeAsyncResult(result) {
+        if (Array.isArray(result)) {
+            return {
+                items: result,
+                hasMore: false
+            };
+        }
+        return {
+            ...result,
+            items: result.items ?? []
+        };
+    }
+    _mergeAsyncOptions(current, incoming) {
+        const merged = [...current];
+        incoming.forEach(option => {
+            const existingIndex = merged.findIndex(currentOption => this._compareValues(currentOption.value, option.value));
+            if (existingIndex >= 0) {
+                merged[existingIndex] = option;
+            }
+            else {
+                merged.push(option);
+            }
+        });
+        return merged;
+    }
+    _cacheAsyncSelectedOptions(options) {
+        const selectedValues = this._selectedValues(this.value());
+        if (selectedValues.length === 0) {
+            this._asyncSelectedCache.set([]);
+            return;
+        }
+        const cached = this._mergeAsyncOptions(this._asyncSelectedCache(), options)
+            .filter(option => selectedValues.some(value => this._compareValues(value, option.value)));
+        this._asyncSelectedCache.set(cached);
+    }
+    _resetAsyncState() {
+        this._asyncAbortController?.abort();
+        this._asyncRequestId++;
+        this.asyncOptions.set([]);
+        this.asyncSearch.set('');
+        this.asyncLoading.set(false);
+        this.asyncLoadingMore.set(false);
+        this.asyncError.set(null);
+        this.asyncHasMore.set(false);
+        this._asyncSelectedCache.set([]);
+        this._asyncPage = 0;
+        this._asyncCursor = undefined;
+        this._lastInitialSelectedKey = '';
+    }
+    _selectedValues(value) {
+        if (this.multiple()) {
+            return Array.isArray(value)
+                ? value.filter(item => item !== null && item !== undefined && item !== '')
+                : [];
+        }
+        return value === null || value === undefined || value === '' ? [] : [value];
+    }
+    _selectedValuesKey(values) {
+        return values.map(value => `${typeof value}:${String(value)}`).join('|');
+    }
+    _viewValueForValue(value) {
+        const asyncOption = this._asyncOptionForValue(value);
+        if (asyncOption) {
+            return asyncOption.label;
+        }
+        const option = this._optionForValue(value);
+        if (option) {
+            return option.viewValue;
+        }
+        return '';
+    }
+    _dataForValue(value) {
+        const option = this._optionForValue(value);
+        if (option) {
+            return this._getOptionData(option);
+        }
+        const asyncOption = this._asyncOptionForValue(value);
+        if (this.asyncEnabled()) {
+            return asyncOption?.data ?? null;
+        }
+        return value;
+    }
+    _displayOptionForValue(value) {
+        const asyncOption = this._asyncOptionForValue(value);
+        if (asyncOption) {
+            return asyncOption;
+        }
+        const option = this._optionForValue(value);
+        if (option) {
+            const data = this._getOptionData(option);
+            return {
+                label: option.viewValue,
+                value: option.value(),
+                data
+            };
+        }
+        return undefined;
+    }
+    _optionForValue(value) {
+        return this.options().find(option => {
+            try {
+                return option.value() != null && this._compareValues(option.value(), value);
+            }
+            catch {
+                return false;
+            }
+        });
+    }
+    _asyncOptionForValue(value) {
+        return [
+            ...this.asyncOptions(),
+            ...this._asyncSelectedCache()
+        ].find(option => this._compareValues(option.value, value));
+    }
+    _compareValues(first, second) {
+        return first === second || Object.is(first, second);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Select, isStandalone: true, selector: "ngs-select", inputs: { _id: { classPropertyName: "_id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, _placeholder: { classPropertyName: "_placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, _disabledInput: { classPropertyName: "_disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hideCheckIcon: { classPropertyName: "hideCheckIcon", publicName: "hideCheckIcon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", opened: "opened", closed: "closed", value: "valueChange" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "none", "aria-haspopup": "listbox" }, listeners: { "click": "toggle()", "keydown": "_handleKeydown($event)", "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex()", "attr.aria-controls": "panelOpen() ? id + \"-panel\" : null", "attr.aria-expanded": "panelOpen()", "attr.aria-label": "ariaLabel()", "attr.aria-required": "required", "attr.aria-disabled": "disabled", "attr.aria-invalid": "errorState", "class.ngs-select-disabled": "disabled", "class.ngs-select-invalid": "errorState", "class.ngs-select-required": "required", "class.ngs-select-empty": "empty", "class.ngs-select-panel-open": "panelOpen()", "class.ngs-select-has-filter-trigger": "filterTrigger().length > 0", "class.ngs-select-clearable": "clearable()", "class.ngs-select-has-clear": "showClearButton()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Select, isStandalone: true, selector: "ngs-select", inputs: { _id: { classPropertyName: "_id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, _placeholder: { classPropertyName: "_placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, _disabledInput: { classPropertyName: "_disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hideCheckIcon: { classPropertyName: "hideCheckIcon", publicName: "hideCheckIcon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchDebounce: { classPropertyName: "searchDebounce", publicName: "searchDebounce", isSignal: true, isRequired: false, transformFunction: null }, minSearchLength: { classPropertyName: "minSearchLength", publicName: "minSearchLength", isSignal: true, isRequired: false, transformFunction: null }, loadOnOpen: { classPropertyName: "loadOnOpen", publicName: "loadOnOpen", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", opened: "opened", closed: "closed", value: "valueChange" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "none", "aria-haspopup": "listbox" }, listeners: { "click": "toggle()", "keydown": "_handleKeydown($event)", "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex()", "attr.aria-controls": "panelOpen() ? id + \"-panel\" : null", "attr.aria-expanded": "panelOpen()", "attr.aria-label": "ariaLabel()", "attr.aria-required": "required", "attr.aria-disabled": "disabled", "attr.aria-invalid": "errorState", "class.ngs-select-disabled": "disabled", "class.ngs-select-invalid": "errorState", "class.ngs-select-required": "required", "class.ngs-select-empty": "empty", "class.ngs-select-panel-open": "panelOpen()", "class.ngs-select-has-filter-trigger": "filterTrigger().length > 0", "class.ngs-select-clearable": "clearable()", "class.ngs-select-has-clear": "showClearButton()" } }, providers: [
             {
                 provide: FormFieldControl,
                 useExisting: forwardRef(() => Select)
@@ -522,13 +977,16 @@ class Select {
                 provide: AUTOFOCUSABLE,
                 useExisting: forwardRef(() => Select)
             }
-        ], queries: [{ propertyName: "selectBody", predicate: SelectBody, isSignal: true }, { propertyName: "options", predicate: OPTION, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: Optgroup, descendants: true, isSignal: true }, { propertyName: "customTrigger", predicate: SelectTrigger, descendants: true, isSignal: true }, { propertyName: "filterTrigger", predicate: FilterTrigger, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "origin", first: true, predicate: ["origin"], descendants: true, isSignal: true }], exportAs: ["ngsSelect"], ngImport: i0, template: "<div class=\"ngs-select-trigger\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n  <div class=\"ngs-select-value\">\n    @if (customTrigger().length > 0 || filterTrigger().length > 0) {\n      <ng-content select=\"ngs-select-trigger\"/>\n      <ng-content select=\"ngs-filter-trigger\"/>\n    } @else {\n      @if (empty) {\n        <span class=\"ngs-select-placeholder\">{{ placeholder }}</span>\n      } @else {\n        <span class=\"ngs-select-value-text\">{{ triggerValue() }}</span>\n      }\n    }\n  </div>\n</div>\n@if (showClearButton()) {\n  <button\n    type=\"button\"\n    class=\"ngs-select-clear-button\"\n    aria-label=\"Clear selection\"\n    (click)=\"clear($event)\">\n    <svg viewBox=\"0 0 24 24\" class=\"ngs-select-clear-icon\" aria-hidden=\"true\">\n      <path\n        fill=\"currentColor\"\n        d=\"M6.22 6.22a.75.75 0 0 1 1.06 0L12 10.94l4.72-4.72a.75.75 0 1 1 1.06 1.06L13.06 12l4.72 4.72a.75.75 0 1 1-1.06 1.06L12 13.06l-4.72 4.72a.75.75 0 0 1-1.06-1.06L10.94 12 6.22 7.28a.75.75 0 0 1 0-1.06Z\"/>\n    </svg>\n  </button>\n}\n<div class=\"ngs-select-arrow-wrapper\">\n  <svg viewBox=\"0 0 24 24\" class=\"ngs-select-arrow\">\n    <path fill=\"currentColor\"\n          d=\"M4.22 8.47a.75.75 0 0 1 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06\"></path>\n  </svg>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayWidth]=\"overlayWidth\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (positionChange)=\"_onPositionChange($event)\"\n  (detach)=\"close()\"\n>\n  <div\n    class=\"ngs-select-panel\"\n    [class.ngs-select-panel-above]=\"_panelPosition() === 'top'\"\n    #panel\n    [attr.id]=\"id + '-panel'\"\n    (keydown)=\"_handleKeydown($event)\"\n  >\n    <ng-content select=\"ngs-select-header\"/>\n\n    @if (selectBody().length > 0) {\n      <ng-content select=\"ngs-select-body\"/>\n    } @else {\n      <div class=\"ngs-select-content\">\n        <ng-content select=\"ngs-optgroup,ngs-option\" />\n        <ng-content/>\n      </div>\n    }\n\n    <ng-content select=\"ngs-select-footer\"/>\n  </div>\n</ng-template>\n", styles: [":host{--ngs-select-arrow-color: var(--ngs-color-on-surface-variant);--ngs-select-font-size: var(--ngs-field-font-size);--ngs-select-placeholder-color: var(--ngs-field-label-color);--ngs-select-border-color: var(--ngs-field-border-color);--ngs-select-min-width: 120px;--ngs-select-arrow-container-width: calc(var(--spacing, .25rem) * 5);--ngs-select-arrow-size: 18px;--ngs-select-clear-container-width: calc(var(--spacing, .25rem) * 6);--ngs-select-clear-icon-size: 20px;--ngs-select-clear-overlap: 0px;--ngs-select-clear-color: var(--ngs-color-on-surface-variant);--ngs-select-clear-hover-color: var(--ngs-color-danger);display:inline-block;outline:none;cursor:pointer;font-size:var(--ngs-select-font-size);min-width:var(--ngs-select-min-width);padding-right:var(--ngs-select-arrow-container-width)}:host:has(ngs-filter-trigger){--ngs-select-min-width: 0;--ngs-select-arrow-container-width: calc(var(--spacing, .25rem) * 7);position:relative}:host.ngs-select-has-clear{padding-right:calc(var(--ngs-select-arrow-container-width) + var(--ngs-select-clear-container-width) - var(--ngs-select-clear-overlap))}:host.ngs-select-has-filter-trigger.ngs-select-has-clear{--ngs-select-clear-overlap: calc(var(--spacing, .25rem) * 2)}:host.ngs-select-panel-open.ngs-select-has-filter-trigger .ngs-select-arrow-wrapper{transform:rotate(-180deg)}:host.ngs-select-disabled{cursor:default;pointer-events:none;--ngs-select-border-color: var(--ngs-color-outline)}@supports (color: color-mix(in lab,red,red)){:host.ngs-select-disabled{--ngs-select-border-color: color-mix(in srgb, var(--ngs-color-outline), transparent 80%)}}:host.ngs-select-disabled .ngs-select-trigger{opacity:.38}:host .ngs-select-value{display:flex;align-items:center;max-width:100%;min-width:0;height:100%;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--ngs-field-line-height);font-size:var(--ngs-field-font-size)}:host .ngs-select-value-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-select-placeholder{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ngs-select-placeholder-color)}.ngs-form-field :host{min-width:0}:host .ngs-select-arrow{width:var(--ngs-select-arrow-size);height:var(--ngs-select-arrow-size);display:flex;color:var(--ngs-select-arrow-color)}:host .ngs-select-clear-button{align-items:center;justify-content:center;flex-shrink:0;display:inline-flex;position:absolute;right:calc(var(--ngs-select-arrow-container-width) - var(--ngs-select-clear-overlap));top:0;bottom:0;width:var(--ngs-select-clear-container-width);padding:0;border:0;background:transparent;color:var(--ngs-select-clear-color);cursor:pointer;outline:none;transition:color .15s ease}:host .ngs-select-clear-button:hover{color:var(--ngs-select-clear-hover-color)}:host .ngs-select-clear-button:focus-visible{color:var(--ngs-select-clear-hover-color)}.ngs-form-field:not(.ngs-form-field-has-label) :host .ngs-select-clear-button,.ngs-paginator :host .ngs-select-clear-button{top:0}:host .ngs-select-clear-icon{width:var(--ngs-select-clear-icon-size);height:var(--ngs-select-clear-icon-size);display:flex}:host .ngs-select-arrow-wrapper{align-items:center;justify-content:center;flex-shrink:0;display:inline-flex;transition:transform .2s ease;position:absolute;right:0;top:0;bottom:0;width:var(--ngs-select-arrow-container-width)}.ngs-form-field:not(.ngs-form-field-has-label) :host .ngs-select-arrow-wrapper,.ngs-paginator :host .ngs-select-arrow-wrapper{top:0}:host .ngs-select-trigger{display:flex;align-items:center;height:100%;min-width:0;overflow:hidden;position:relative;box-sizing:border-box;line-height:var(--ngs-field-line-height);font-size:var(--ngs-field-font-size)}:host .ngs-select-trigger .hidden{display:none}:host ::ng-deep ngs-select-trigger,:host ::ng-deep .ngs-select-trigger-content{display:flex;align-items:center;min-width:0;max-width:100%;height:100%;overflow:hidden;white-space:nowrap}:host ::ng-deep .ngs-select-trigger-content{gap:var(--ngs-select-trigger-gap, var(--ngs-dropdown-item-gap, calc(var(--spacing, .25rem) * 2)))}:host ::ng-deep .ngs-select-trigger-icon{flex:none;line-height:0}:host ::ng-deep .ngs-select-trigger-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host-context(.ngs-form-field-focused) .ngs-select-arrow-wrapper{transform:rotate(180deg)}.ngs-select-panel{background:var(--ngs-select-panel-bg, var(--ngs-dropdown-bg));box-shadow:var(--ngs-select-panel-shadow, var(--ngs-dropdown-shadow));border-radius:var(--ngs-dropdown-radius);width:100%;transform-origin:top;animation:ngs-dropdown-panel-showing .15s cubic-bezier(0,0,.2,1);display:flex;flex-direction:column;overflow:hidden;outline:var(--ngs-select-panel-border, var(--ngs-dropdown-border))}.ngs-select-panel.ngs-select-panel-above{transform-origin:bottom}.ngs-select-panel:not(:has(.ngs-select-body)){max-height:var(--ngs-select-panel-max-height, var(--ngs-dropdown-max-height, 256px))}.ngs-select-panel .ngs-select-header,.ngs-select-panel .ngs-select-footer{display:block;flex:none;z-index:1}.ngs-select-panel .ngs-select-content{position:relative;padding:var(--ngs-select-content-padding, var(--ngs-dropdown-padding, calc(var(--spacing, .25rem) * 2)));overflow:auto;max-height:inherit}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
+        ], queries: [{ propertyName: "selectBody", predicate: SelectBody, isSignal: true }, { propertyName: "projectedOptions", predicate: OPTION, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: Optgroup, descendants: true, isSignal: true }, { propertyName: "customTrigger", predicate: SelectTrigger, descendants: true, isSignal: true }, { propertyName: "filterTrigger", predicate: FilterTrigger, descendants: true, isSignal: true }, { propertyName: "optionContentDef", first: true, predicate: SelectOptionContentDef, descendants: true, isSignal: true }, { propertyName: "selectValueDef", first: true, predicate: SelectValueDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dataSourceOptions", predicate: OPTION, descendants: true, isSignal: true }, { propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "origin", first: true, predicate: ["origin"], descendants: true, isSignal: true }], exportAs: ["ngsSelect"], ngImport: i0, template: "<div class=\"ngs-select-trigger\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n  <div class=\"ngs-select-value\">\n    @if (customTrigger().length > 0 || filterTrigger().length > 0) {\n      <ng-content select=\"ngs-select-trigger\"/>\n      <ng-content select=\"ngs-filter-trigger\"/>\n    } @else {\n      @if (empty) {\n        <span class=\"ngs-select-placeholder\">{{ placeholder }}</span>\n      } @else if (selectValueTemplateReady() && selectValueDef(); as valueTpl) {\n        <span class=\"ngs-select-value-text\">\n          <ng-container\n            [ngTemplateOutlet]=\"valueTpl.templateRef\"\n            [ngTemplateOutletContext]=\"selectValueContext()\"/>\n        </span>\n      } @else {\n        <span class=\"ngs-select-value-text\">{{ triggerValue() }}</span>\n      }\n    }\n  </div>\n</div>\n@if (showClearButton()) {\n  <button\n    type=\"button\"\n    class=\"ngs-select-clear-button\"\n    aria-label=\"Clear selection\"\n    (click)=\"clear($event)\">\n    <svg viewBox=\"0 0 24 24\" class=\"ngs-select-clear-icon\" aria-hidden=\"true\">\n      <path\n        fill=\"currentColor\"\n        d=\"M6.22 6.22a.75.75 0 0 1 1.06 0L12 10.94l4.72-4.72a.75.75 0 1 1 1.06 1.06L13.06 12l4.72 4.72a.75.75 0 1 1-1.06 1.06L12 13.06l-4.72 4.72a.75.75 0 0 1-1.06-1.06L10.94 12 6.22 7.28a.75.75 0 0 1 0-1.06Z\"/>\n    </svg>\n  </button>\n}\n<div class=\"ngs-select-arrow-wrapper\">\n  <svg viewBox=\"0 0 24 24\" class=\"ngs-select-arrow\">\n    <path fill=\"currentColor\"\n          d=\"M4.22 8.47a.75.75 0 0 1 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06\"></path>\n  </svg>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayWidth]=\"overlayWidth\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (positionChange)=\"_onPositionChange($event)\"\n  (detach)=\"close()\"\n>\n  <div\n    class=\"ngs-select-panel\"\n    [class.ngs-select-panel-above]=\"_panelPosition() === 'top'\"\n    #panel\n    [attr.id]=\"id + '-panel'\"\n    (keydown)=\"_handleKeydown($event)\"\n  >\n    <ng-content select=\"ngs-select-header\"/>\n\n    @if (selectBody().length > 0) {\n      <ng-content select=\"ngs-select-body\"/>\n    } @else if (asyncEnabled()) {\n      @if (searchable()) {\n        <ngs-select-header>\n          <div class=\"ngs-select-search sticky top-0 z-1 bg-surface-container-lowest\">\n            <input\n              class=\"ngs-select-search-input w-full text-sm focus:outline-none border-b border-surface-container-high focus:border-b-primary h-14 px-3\"\n              type=\"text\"\n              [value]=\"asyncSearch()\"\n              placeholder=\"Search...\"\n              aria-label=\"Search options\"\n              autocomplete=\"off\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown)=\"$event.stopPropagation()\"\n              (input)=\"onAsyncSearchInput($any($event.target).value)\">\n          </div>\n        </ngs-select-header>\n      }\n\n      <div class=\"ngs-select-content ngs-select-async-content\" (scroll)=\"onAsyncContentScroll($event)\">\n        @if (asyncLoading()) {\n          <div class=\"ngs-select-state\">Loading...</div>\n        } @else if (asyncError()) {\n          <button type=\"button\" class=\"ngs-select-state ngs-select-retry\" (click)=\"retryAsyncLoad()\">\n            Could not load options. Try again.\n          </button>\n        } @else {\n          @for (option of asyncOptions(); track option.value) {\n            <ngs-option [value]=\"option.value\" [data]=\"option.data\" [disabled]=\"option.disabled ?? false\">\n              @if (optionContentDef(); as optionTpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"optionTpl.templateRef\"\n                  [ngTemplateOutletContext]=\"asyncOptionContext(option)\"/>\n              } @else {\n                {{ option.label }}\n              }\n            </ngs-option>\n          }\n\n          @if (asyncOptions().length === 0) {\n            <div class=\"ngs-select-state\">No options</div>\n          } @else if (asyncLoadingMore()) {\n            <div class=\"ngs-select-state\">Loading more...</div>\n          }\n        }\n      </div>\n    } @else {\n      <div class=\"ngs-select-content\">\n        <ng-content select=\"ngs-optgroup,ngs-option\" />\n        <ng-content/>\n      </div>\n    }\n\n    <ng-content select=\"ngs-select-footer\"/>\n  </div>\n</ng-template>\n", styles: [":host{--ngs-select-arrow-color: var(--ngs-color-on-surface-variant);--ngs-select-font-size: var(--ngs-field-font-size);--ngs-select-placeholder-color: var(--ngs-field-label-color);--ngs-select-border-color: var(--ngs-field-border-color);--ngs-select-min-width: 120px;--ngs-select-arrow-container-width: calc(var(--spacing, .25rem) * 5);--ngs-select-arrow-size: 18px;--ngs-select-clear-container-width: calc(var(--spacing, .25rem) * 6);--ngs-select-clear-icon-size: 20px;--ngs-select-clear-overlap: 0px;--ngs-select-clear-color: var(--ngs-color-on-surface-variant);--ngs-select-clear-hover-color: var(--ngs-color-danger);display:inline-block;outline:none;cursor:pointer;font-size:var(--ngs-select-font-size);min-width:var(--ngs-select-min-width);padding-right:var(--ngs-select-arrow-container-width)}:host:has(ngs-filter-trigger){--ngs-select-min-width: 0;--ngs-select-arrow-container-width: calc(var(--spacing, .25rem) * 7);position:relative}:host.ngs-select-has-clear{padding-right:calc(var(--ngs-select-arrow-container-width) + var(--ngs-select-clear-container-width) - var(--ngs-select-clear-overlap))}:host.ngs-select-has-filter-trigger.ngs-select-has-clear{--ngs-select-clear-overlap: calc(var(--spacing, .25rem) * 2)}:host.ngs-select-panel-open.ngs-select-has-filter-trigger .ngs-select-arrow-wrapper{transform:rotate(-180deg)}:host.ngs-select-disabled{cursor:default;pointer-events:none;--ngs-select-border-color: var(--ngs-color-outline)}@supports (color: color-mix(in lab,red,red)){:host.ngs-select-disabled{--ngs-select-border-color: color-mix(in srgb, var(--ngs-color-outline), transparent 80%)}}:host.ngs-select-disabled .ngs-select-trigger{opacity:.38}:host .ngs-select-value{display:flex;align-items:center;max-width:100%;min-width:0;height:100%;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--ngs-field-line-height);font-size:var(--ngs-field-font-size)}:host .ngs-select-value-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-select-placeholder{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ngs-select-placeholder-color)}.ngs-form-field :host{min-width:0}:host .ngs-select-arrow{width:var(--ngs-select-arrow-size);height:var(--ngs-select-arrow-size);display:flex;color:var(--ngs-select-arrow-color)}:host .ngs-select-clear-button{align-items:center;justify-content:center;flex-shrink:0;display:inline-flex;position:absolute;right:calc(var(--ngs-select-arrow-container-width) - var(--ngs-select-clear-overlap));top:0;bottom:0;width:var(--ngs-select-clear-container-width);padding:0;border:0;background:transparent;color:var(--ngs-select-clear-color);cursor:pointer;outline:none;transition:color .15s ease}:host .ngs-select-clear-button:hover{color:var(--ngs-select-clear-hover-color)}:host .ngs-select-clear-button:focus-visible{color:var(--ngs-select-clear-hover-color)}.ngs-form-field:not(.ngs-form-field-has-label) :host .ngs-select-clear-button,.ngs-paginator :host .ngs-select-clear-button{top:0}:host .ngs-select-clear-icon{width:var(--ngs-select-clear-icon-size);height:var(--ngs-select-clear-icon-size);display:flex}:host .ngs-select-arrow-wrapper{align-items:center;justify-content:center;flex-shrink:0;display:inline-flex;transition:transform .2s ease;position:absolute;right:0;top:0;bottom:0;width:var(--ngs-select-arrow-container-width)}.ngs-form-field:not(.ngs-form-field-has-label) :host .ngs-select-arrow-wrapper,.ngs-paginator :host .ngs-select-arrow-wrapper{top:0}:host .ngs-select-trigger{display:flex;align-items:center;height:100%;min-width:0;overflow:hidden;position:relative;box-sizing:border-box;line-height:var(--ngs-field-line-height);font-size:var(--ngs-field-font-size)}:host .ngs-select-trigger .hidden{display:none}:host ::ng-deep ngs-select-trigger,:host ::ng-deep .ngs-select-trigger-content{display:flex;align-items:center;min-width:0;max-width:100%;height:100%;overflow:hidden;white-space:nowrap}:host ::ng-deep .ngs-select-trigger-content{gap:var(--ngs-select-trigger-gap, var(--ngs-dropdown-item-gap, calc(var(--spacing, .25rem) * 2)))}:host ::ng-deep .ngs-select-trigger-icon{flex:none;line-height:0}:host ::ng-deep .ngs-select-trigger-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host-context(.ngs-form-field-focused) .ngs-select-arrow-wrapper{transform:rotate(180deg)}.ngs-select-panel{background:var(--ngs-select-panel-bg, var(--ngs-dropdown-bg));box-shadow:var(--ngs-select-panel-shadow, var(--ngs-dropdown-shadow));border-radius:var(--ngs-dropdown-radius);width:100%;transform-origin:top;animation:ngs-dropdown-panel-showing .15s cubic-bezier(0,0,.2,1);display:flex;flex-direction:column;overflow:hidden;outline:var(--ngs-select-panel-border, var(--ngs-dropdown-border))}.ngs-select-panel.ngs-select-panel-above{transform-origin:bottom}.ngs-select-panel:not(:has(.ngs-select-body)){max-height:var(--ngs-select-panel-max-height, var(--ngs-dropdown-max-height, 256px))}.ngs-select-panel .ngs-select-header,.ngs-select-panel .ngs-select-footer{display:block;flex:none;z-index:1}.ngs-select-panel .ngs-select-content{position:relative;padding:var(--ngs-select-content-padding, var(--ngs-dropdown-padding, calc(var(--spacing, .25rem) * 2)));overflow:auto;max-height:inherit}.ngs-select-panel .ngs-select-search{position:sticky;top:0;z-index:1;background:var(--ngs-select-search-bg, var(--ngs-color-surface-container-lowest, var(--ngs-select-panel-bg, var(--ngs-dropdown-bg))))}.ngs-select-panel .ngs-select-search-input{width:100%;min-width:0;height:var(--ngs-select-search-height, calc(var(--spacing, .25rem) * 14));padding:0 var(--ngs-select-search-padding-inline, calc(var(--spacing, .25rem) * 3));border:0;border-bottom:var(--ngs-select-search-border, 1px solid var(--ngs-color-surface-container-high, var(--ngs-color-outline-variant)));outline:none;background:transparent;color:var(--ngs-select-search-color, var(--ngs-color-on-surface));font:inherit;font-size:var(--ngs-select-search-font-size, var(--ngs-font-size-sm, .875rem))}.ngs-select-panel .ngs-select-search-input:focus{border-bottom-color:var(--ngs-select-search-focus-border-color, var(--ngs-color-primary))}.ngs-select-panel .ngs-select-state{display:flex;align-items:center;width:100%;min-height:var(--ngs-select-state-min-height, 36px);padding:var(--ngs-select-state-padding, calc(var(--spacing, .25rem) * 2));border:0;background:transparent;color:var(--ngs-select-state-color, var(--ngs-color-on-surface-variant));font:inherit;font-size:var(--ngs-select-state-font-size, var(--ngs-field-font-size));text-align:left}.ngs-select-panel .ngs-select-retry{cursor:pointer}.ngs-select-panel .ngs-select-retry:hover,.ngs-select-panel .ngs-select-retry:focus-visible{color:var(--ngs-select-state-action-color, var(--ngs-color-primary))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: SelectHeader, selector: "ngs-select-header" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Select, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-select', exportAs: 'ngsSelect', standalone: true, imports: [
+            args: [{ selector: 'ngs-select', exportAs: 'ngsSelect', imports: [
                         OverlayModule,
-                        CdkOverlayOrigin
+                        CdkOverlayOrigin,
+                        Option,
+                        SelectHeader,
+                        NgTemplateOutlet
                     ], providers: [
                         {
                             provide: FormFieldControl,
@@ -570,19 +1028,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         '(keydown)': '_handleKeydown($event)',
                         '(focus)': '_onFocus()',
                         '(blur)': '_onBlur()',
-                    }, template: "<div class=\"ngs-select-trigger\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n  <div class=\"ngs-select-value\">\n    @if (customTrigger().length > 0 || filterTrigger().length > 0) {\n      <ng-content select=\"ngs-select-trigger\"/>\n      <ng-content select=\"ngs-filter-trigger\"/>\n    } @else {\n      @if (empty) {\n        <span class=\"ngs-select-placeholder\">{{ placeholder }}</span>\n      } @else {\n        <span class=\"ngs-select-value-text\">{{ triggerValue() }}</span>\n      }\n    }\n  </div>\n</div>\n@if (showClearButton()) {\n  <button\n    type=\"button\"\n    class=\"ngs-select-clear-button\"\n    aria-label=\"Clear selection\"\n    (click)=\"clear($event)\">\n    <svg viewBox=\"0 0 24 24\" class=\"ngs-select-clear-icon\" aria-hidden=\"true\">\n      <path\n        fill=\"currentColor\"\n        d=\"M6.22 6.22a.75.75 0 0 1 1.06 0L12 10.94l4.72-4.72a.75.75 0 1 1 1.06 1.06L13.06 12l4.72 4.72a.75.75 0 1 1-1.06 1.06L12 13.06l-4.72 4.72a.75.75 0 0 1-1.06-1.06L10.94 12 6.22 7.28a.75.75 0 0 1 0-1.06Z\"/>\n    </svg>\n  </button>\n}\n<div class=\"ngs-select-arrow-wrapper\">\n  <svg viewBox=\"0 0 24 24\" class=\"ngs-select-arrow\">\n    <path fill=\"currentColor\"\n          d=\"M4.22 8.47a.75.75 0 0 1 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06\"></path>\n  </svg>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayWidth]=\"overlayWidth\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (positionChange)=\"_onPositionChange($event)\"\n  (detach)=\"close()\"\n>\n  <div\n    class=\"ngs-select-panel\"\n    [class.ngs-select-panel-above]=\"_panelPosition() === 'top'\"\n    #panel\n    [attr.id]=\"id + '-panel'\"\n    (keydown)=\"_handleKeydown($event)\"\n  >\n    <ng-content select=\"ngs-select-header\"/>\n\n    @if (selectBody().length > 0) {\n      <ng-content select=\"ngs-select-body\"/>\n    } @else {\n      <div class=\"ngs-select-content\">\n        <ng-content select=\"ngs-optgroup,ngs-option\" />\n        <ng-content/>\n      </div>\n    }\n\n    <ng-content select=\"ngs-select-footer\"/>\n  </div>\n</ng-template>\n", styles: [":host{--ngs-select-arrow-color: var(--ngs-color-on-surface-variant);--ngs-select-font-size: var(--ngs-field-font-size);--ngs-select-placeholder-color: var(--ngs-field-label-color);--ngs-select-border-color: var(--ngs-field-border-color);--ngs-select-min-width: 120px;--ngs-select-arrow-container-width: calc(var(--spacing, .25rem) * 5);--ngs-select-arrow-size: 18px;--ngs-select-clear-container-width: calc(var(--spacing, .25rem) * 6);--ngs-select-clear-icon-size: 20px;--ngs-select-clear-overlap: 0px;--ngs-select-clear-color: var(--ngs-color-on-surface-variant);--ngs-select-clear-hover-color: var(--ngs-color-danger);display:inline-block;outline:none;cursor:pointer;font-size:var(--ngs-select-font-size);min-width:var(--ngs-select-min-width);padding-right:var(--ngs-select-arrow-container-width)}:host:has(ngs-filter-trigger){--ngs-select-min-width: 0;--ngs-select-arrow-container-width: calc(var(--spacing, .25rem) * 7);position:relative}:host.ngs-select-has-clear{padding-right:calc(var(--ngs-select-arrow-container-width) + var(--ngs-select-clear-container-width) - var(--ngs-select-clear-overlap))}:host.ngs-select-has-filter-trigger.ngs-select-has-clear{--ngs-select-clear-overlap: calc(var(--spacing, .25rem) * 2)}:host.ngs-select-panel-open.ngs-select-has-filter-trigger .ngs-select-arrow-wrapper{transform:rotate(-180deg)}:host.ngs-select-disabled{cursor:default;pointer-events:none;--ngs-select-border-color: var(--ngs-color-outline)}@supports (color: color-mix(in lab,red,red)){:host.ngs-select-disabled{--ngs-select-border-color: color-mix(in srgb, var(--ngs-color-outline), transparent 80%)}}:host.ngs-select-disabled .ngs-select-trigger{opacity:.38}:host .ngs-select-value{display:flex;align-items:center;max-width:100%;min-width:0;height:100%;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--ngs-field-line-height);font-size:var(--ngs-field-font-size)}:host .ngs-select-value-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-select-placeholder{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ngs-select-placeholder-color)}.ngs-form-field :host{min-width:0}:host .ngs-select-arrow{width:var(--ngs-select-arrow-size);height:var(--ngs-select-arrow-size);display:flex;color:var(--ngs-select-arrow-color)}:host .ngs-select-clear-button{align-items:center;justify-content:center;flex-shrink:0;display:inline-flex;position:absolute;right:calc(var(--ngs-select-arrow-container-width) - var(--ngs-select-clear-overlap));top:0;bottom:0;width:var(--ngs-select-clear-container-width);padding:0;border:0;background:transparent;color:var(--ngs-select-clear-color);cursor:pointer;outline:none;transition:color .15s ease}:host .ngs-select-clear-button:hover{color:var(--ngs-select-clear-hover-color)}:host .ngs-select-clear-button:focus-visible{color:var(--ngs-select-clear-hover-color)}.ngs-form-field:not(.ngs-form-field-has-label) :host .ngs-select-clear-button,.ngs-paginator :host .ngs-select-clear-button{top:0}:host .ngs-select-clear-icon{width:var(--ngs-select-clear-icon-size);height:var(--ngs-select-clear-icon-size);display:flex}:host .ngs-select-arrow-wrapper{align-items:center;justify-content:center;flex-shrink:0;display:inline-flex;transition:transform .2s ease;position:absolute;right:0;top:0;bottom:0;width:var(--ngs-select-arrow-container-width)}.ngs-form-field:not(.ngs-form-field-has-label) :host .ngs-select-arrow-wrapper,.ngs-paginator :host .ngs-select-arrow-wrapper{top:0}:host .ngs-select-trigger{display:flex;align-items:center;height:100%;min-width:0;overflow:hidden;position:relative;box-sizing:border-box;line-height:var(--ngs-field-line-height);font-size:var(--ngs-field-font-size)}:host .ngs-select-trigger .hidden{display:none}:host ::ng-deep ngs-select-trigger,:host ::ng-deep .ngs-select-trigger-content{display:flex;align-items:center;min-width:0;max-width:100%;height:100%;overflow:hidden;white-space:nowrap}:host ::ng-deep .ngs-select-trigger-content{gap:var(--ngs-select-trigger-gap, var(--ngs-dropdown-item-gap, calc(var(--spacing, .25rem) * 2)))}:host ::ng-deep .ngs-select-trigger-icon{flex:none;line-height:0}:host ::ng-deep .ngs-select-trigger-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host-context(.ngs-form-field-focused) .ngs-select-arrow-wrapper{transform:rotate(180deg)}.ngs-select-panel{background:var(--ngs-select-panel-bg, var(--ngs-dropdown-bg));box-shadow:var(--ngs-select-panel-shadow, var(--ngs-dropdown-shadow));border-radius:var(--ngs-dropdown-radius);width:100%;transform-origin:top;animation:ngs-dropdown-panel-showing .15s cubic-bezier(0,0,.2,1);display:flex;flex-direction:column;overflow:hidden;outline:var(--ngs-select-panel-border, var(--ngs-dropdown-border))}.ngs-select-panel.ngs-select-panel-above{transform-origin:bottom}.ngs-select-panel:not(:has(.ngs-select-body)){max-height:var(--ngs-select-panel-max-height, var(--ngs-dropdown-max-height, 256px))}.ngs-select-panel .ngs-select-header,.ngs-select-panel .ngs-select-footer{display:block;flex:none;z-index:1}.ngs-select-panel .ngs-select-content{position:relative;padding:var(--ngs-select-content-padding, var(--ngs-dropdown-padding, calc(var(--spacing, .25rem) * 2)));overflow:auto;max-height:inherit}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [], propDecorators: { selectBody: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SelectBody), { isSignal: true }] }], _id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], _placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], _disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], hideCheckIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCheckIcon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OPTION), { ...{ descendants: true }, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Optgroup), { ...{ descendants: true }, isSignal: true }] }], customTrigger: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SelectTrigger), { ...{ descendants: true }, isSignal: true }] }], filterTrigger: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FilterTrigger), { ...{ descendants: true }, isSignal: true }] }], overlayDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], origin: [{ type: i0.ViewChild, args: ['origin', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
-
-class SelectHeader {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: SelectHeader, isStandalone: true, selector: "ngs-select-header", host: { classAttribute: "ngs-select-header" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block;background:var(--ngs-select-panel-bg, var(--ngs-dropdown-bg))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectHeader, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngs-select-header', standalone: true, imports: [], template: '<ng-content />', host: {
-                        'class': 'ngs-select-header'
-                    }, styles: [":host{display:block;background:var(--ngs-select-panel-bg, var(--ngs-dropdown-bg))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
-        }] });
+                    }, template: "<div class=\"ngs-select-trigger\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n  <div class=\"ngs-select-value\">\n    @if (customTrigger().length > 0 || filterTrigger().length > 0) {\n      <ng-content select=\"ngs-select-trigger\"/>\n      <ng-content select=\"ngs-filter-trigger\"/>\n    } @else {\n      @if (empty) {\n        <span class=\"ngs-select-placeholder\">{{ placeholder }}</span>\n      } @else if (selectValueTemplateReady() && selectValueDef(); as valueTpl) {\n        <span class=\"ngs-select-value-text\">\n          <ng-container\n            [ngTemplateOutlet]=\"valueTpl.templateRef\"\n            [ngTemplateOutletContext]=\"selectValueContext()\"/>\n        </span>\n      } @else {\n        <span class=\"ngs-select-value-text\">{{ triggerValue() }}</span>\n      }\n    }\n  </div>\n</div>\n@if (showClearButton()) {\n  <button\n    type=\"button\"\n    class=\"ngs-select-clear-button\"\n    aria-label=\"Clear selection\"\n    (click)=\"clear($event)\">\n    <svg viewBox=\"0 0 24 24\" class=\"ngs-select-clear-icon\" aria-hidden=\"true\">\n      <path\n        fill=\"currentColor\"\n        d=\"M6.22 6.22a.75.75 0 0 1 1.06 0L12 10.94l4.72-4.72a.75.75 0 1 1 1.06 1.06L13.06 12l4.72 4.72a.75.75 0 1 1-1.06 1.06L12 13.06l-4.72 4.72a.75.75 0 0 1-1.06-1.06L10.94 12 6.22 7.28a.75.75 0 0 1 0-1.06Z\"/>\n    </svg>\n  </button>\n}\n<div class=\"ngs-select-arrow-wrapper\">\n  <svg viewBox=\"0 0 24 24\" class=\"ngs-select-arrow\">\n    <path fill=\"currentColor\"\n          d=\"M4.22 8.47a.75.75 0 0 1 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06\"></path>\n  </svg>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayWidth]=\"overlayWidth\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (positionChange)=\"_onPositionChange($event)\"\n  (detach)=\"close()\"\n>\n  <div\n    class=\"ngs-select-panel\"\n    [class.ngs-select-panel-above]=\"_panelPosition() === 'top'\"\n    #panel\n    [attr.id]=\"id + '-panel'\"\n    (keydown)=\"_handleKeydown($event)\"\n  >\n    <ng-content select=\"ngs-select-header\"/>\n\n    @if (selectBody().length > 0) {\n      <ng-content select=\"ngs-select-body\"/>\n    } @else if (asyncEnabled()) {\n      @if (searchable()) {\n        <ngs-select-header>\n          <div class=\"ngs-select-search sticky top-0 z-1 bg-surface-container-lowest\">\n            <input\n              class=\"ngs-select-search-input w-full text-sm focus:outline-none border-b border-surface-container-high focus:border-b-primary h-14 px-3\"\n              type=\"text\"\n              [value]=\"asyncSearch()\"\n              placeholder=\"Search...\"\n              aria-label=\"Search options\"\n              autocomplete=\"off\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown)=\"$event.stopPropagation()\"\n              (input)=\"onAsyncSearchInput($any($event.target).value)\">\n          </div>\n        </ngs-select-header>\n      }\n\n      <div class=\"ngs-select-content ngs-select-async-content\" (scroll)=\"onAsyncContentScroll($event)\">\n        @if (asyncLoading()) {\n          <div class=\"ngs-select-state\">Loading...</div>\n        } @else if (asyncError()) {\n          <button type=\"button\" class=\"ngs-select-state ngs-select-retry\" (click)=\"retryAsyncLoad()\">\n            Could not load options. Try again.\n          </button>\n        } @else {\n          @for (option of asyncOptions(); track option.value) {\n            <ngs-option [value]=\"option.value\" [data]=\"option.data\" [disabled]=\"option.disabled ?? false\">\n              @if (optionContentDef(); as optionTpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"optionTpl.templateRef\"\n                  [ngTemplateOutletContext]=\"asyncOptionContext(option)\"/>\n              } @else {\n                {{ option.label }}\n              }\n            </ngs-option>\n          }\n\n          @if (asyncOptions().length === 0) {\n            <div class=\"ngs-select-state\">No options</div>\n          } @else if (asyncLoadingMore()) {\n            <div class=\"ngs-select-state\">Loading more...</div>\n          }\n        }\n      </div>\n    } @else {\n      <div class=\"ngs-select-content\">\n        <ng-content select=\"ngs-optgroup,ngs-option\" />\n        <ng-content/>\n      </div>\n    }\n\n    <ng-content select=\"ngs-select-footer\"/>\n  </div>\n</ng-template>\n", styles: [":host{--ngs-select-arrow-color: var(--ngs-color-on-surface-variant);--ngs-select-font-size: var(--ngs-field-font-size);--ngs-select-placeholder-color: var(--ngs-field-label-color);--ngs-select-border-color: var(--ngs-field-border-color);--ngs-select-min-width: 120px;--ngs-select-arrow-container-width: calc(var(--spacing, .25rem) * 5);--ngs-select-arrow-size: 18px;--ngs-select-clear-container-width: calc(var(--spacing, .25rem) * 6);--ngs-select-clear-icon-size: 20px;--ngs-select-clear-overlap: 0px;--ngs-select-clear-color: var(--ngs-color-on-surface-variant);--ngs-select-clear-hover-color: var(--ngs-color-danger);display:inline-block;outline:none;cursor:pointer;font-size:var(--ngs-select-font-size);min-width:var(--ngs-select-min-width);padding-right:var(--ngs-select-arrow-container-width)}:host:has(ngs-filter-trigger){--ngs-select-min-width: 0;--ngs-select-arrow-container-width: calc(var(--spacing, .25rem) * 7);position:relative}:host.ngs-select-has-clear{padding-right:calc(var(--ngs-select-arrow-container-width) + var(--ngs-select-clear-container-width) - var(--ngs-select-clear-overlap))}:host.ngs-select-has-filter-trigger.ngs-select-has-clear{--ngs-select-clear-overlap: calc(var(--spacing, .25rem) * 2)}:host.ngs-select-panel-open.ngs-select-has-filter-trigger .ngs-select-arrow-wrapper{transform:rotate(-180deg)}:host.ngs-select-disabled{cursor:default;pointer-events:none;--ngs-select-border-color: var(--ngs-color-outline)}@supports (color: color-mix(in lab,red,red)){:host.ngs-select-disabled{--ngs-select-border-color: color-mix(in srgb, var(--ngs-color-outline), transparent 80%)}}:host.ngs-select-disabled .ngs-select-trigger{opacity:.38}:host .ngs-select-value{display:flex;align-items:center;max-width:100%;min-width:0;height:100%;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--ngs-field-line-height);font-size:var(--ngs-field-font-size)}:host .ngs-select-value-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-select-placeholder{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ngs-select-placeholder-color)}.ngs-form-field :host{min-width:0}:host .ngs-select-arrow{width:var(--ngs-select-arrow-size);height:var(--ngs-select-arrow-size);display:flex;color:var(--ngs-select-arrow-color)}:host .ngs-select-clear-button{align-items:center;justify-content:center;flex-shrink:0;display:inline-flex;position:absolute;right:calc(var(--ngs-select-arrow-container-width) - var(--ngs-select-clear-overlap));top:0;bottom:0;width:var(--ngs-select-clear-container-width);padding:0;border:0;background:transparent;color:var(--ngs-select-clear-color);cursor:pointer;outline:none;transition:color .15s ease}:host .ngs-select-clear-button:hover{color:var(--ngs-select-clear-hover-color)}:host .ngs-select-clear-button:focus-visible{color:var(--ngs-select-clear-hover-color)}.ngs-form-field:not(.ngs-form-field-has-label) :host .ngs-select-clear-button,.ngs-paginator :host .ngs-select-clear-button{top:0}:host .ngs-select-clear-icon{width:var(--ngs-select-clear-icon-size);height:var(--ngs-select-clear-icon-size);display:flex}:host .ngs-select-arrow-wrapper{align-items:center;justify-content:center;flex-shrink:0;display:inline-flex;transition:transform .2s ease;position:absolute;right:0;top:0;bottom:0;width:var(--ngs-select-arrow-container-width)}.ngs-form-field:not(.ngs-form-field-has-label) :host .ngs-select-arrow-wrapper,.ngs-paginator :host .ngs-select-arrow-wrapper{top:0}:host .ngs-select-trigger{display:flex;align-items:center;height:100%;min-width:0;overflow:hidden;position:relative;box-sizing:border-box;line-height:var(--ngs-field-line-height);font-size:var(--ngs-field-font-size)}:host .ngs-select-trigger .hidden{display:none}:host ::ng-deep ngs-select-trigger,:host ::ng-deep .ngs-select-trigger-content{display:flex;align-items:center;min-width:0;max-width:100%;height:100%;overflow:hidden;white-space:nowrap}:host ::ng-deep .ngs-select-trigger-content{gap:var(--ngs-select-trigger-gap, var(--ngs-dropdown-item-gap, calc(var(--spacing, .25rem) * 2)))}:host ::ng-deep .ngs-select-trigger-icon{flex:none;line-height:0}:host ::ng-deep .ngs-select-trigger-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host-context(.ngs-form-field-focused) .ngs-select-arrow-wrapper{transform:rotate(180deg)}.ngs-select-panel{background:var(--ngs-select-panel-bg, var(--ngs-dropdown-bg));box-shadow:var(--ngs-select-panel-shadow, var(--ngs-dropdown-shadow));border-radius:var(--ngs-dropdown-radius);width:100%;transform-origin:top;animation:ngs-dropdown-panel-showing .15s cubic-bezier(0,0,.2,1);display:flex;flex-direction:column;overflow:hidden;outline:var(--ngs-select-panel-border, var(--ngs-dropdown-border))}.ngs-select-panel.ngs-select-panel-above{transform-origin:bottom}.ngs-select-panel:not(:has(.ngs-select-body)){max-height:var(--ngs-select-panel-max-height, var(--ngs-dropdown-max-height, 256px))}.ngs-select-panel .ngs-select-header,.ngs-select-panel .ngs-select-footer{display:block;flex:none;z-index:1}.ngs-select-panel .ngs-select-content{position:relative;padding:var(--ngs-select-content-padding, var(--ngs-dropdown-padding, calc(var(--spacing, .25rem) * 2)));overflow:auto;max-height:inherit}.ngs-select-panel .ngs-select-search{position:sticky;top:0;z-index:1;background:var(--ngs-select-search-bg, var(--ngs-color-surface-container-lowest, var(--ngs-select-panel-bg, var(--ngs-dropdown-bg))))}.ngs-select-panel .ngs-select-search-input{width:100%;min-width:0;height:var(--ngs-select-search-height, calc(var(--spacing, .25rem) * 14));padding:0 var(--ngs-select-search-padding-inline, calc(var(--spacing, .25rem) * 3));border:0;border-bottom:var(--ngs-select-search-border, 1px solid var(--ngs-color-surface-container-high, var(--ngs-color-outline-variant)));outline:none;background:transparent;color:var(--ngs-select-search-color, var(--ngs-color-on-surface));font:inherit;font-size:var(--ngs-select-search-font-size, var(--ngs-font-size-sm, .875rem))}.ngs-select-panel .ngs-select-search-input:focus{border-bottom-color:var(--ngs-select-search-focus-border-color, var(--ngs-color-primary))}.ngs-select-panel .ngs-select-state{display:flex;align-items:center;width:100%;min-height:var(--ngs-select-state-min-height, 36px);padding:var(--ngs-select-state-padding, calc(var(--spacing, .25rem) * 2));border:0;background:transparent;color:var(--ngs-select-state-color, var(--ngs-color-on-surface-variant));font:inherit;font-size:var(--ngs-select-state-font-size, var(--ngs-field-font-size));text-align:left}.ngs-select-panel .ngs-select-retry{cursor:pointer}.ngs-select-panel .ngs-select-retry:hover,.ngs-select-panel .ngs-select-retry:focus-visible{color:var(--ngs-select-state-action-color, var(--ngs-color-primary))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectBody: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SelectBody), { isSignal: true }] }], _id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], _placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], _disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], hideCheckIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCheckIcon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounce", required: false }] }], minSearchLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSearchLength", required: false }] }], loadOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadOnOpen", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], projectedOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OPTION), { ...{ descendants: true }, isSignal: true }] }], dataSourceOptions: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => OPTION), { isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Optgroup), { ...{ descendants: true }, isSignal: true }] }], customTrigger: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SelectTrigger), { ...{ descendants: true }, isSignal: true }] }], filterTrigger: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FilterTrigger), { ...{ descendants: true }, isSignal: true }] }], optionContentDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectOptionContentDef), { ...{ descendants: true }, isSignal: true }] }], selectValueDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectValueDef), { ...{ descendants: true }, isSignal: true }] }], overlayDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], origin: [{ type: i0.ViewChild, args: ['origin', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class SelectFooter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -599,5 +1046,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FilterTrigger, FilterTriggerValueDirective, SELECT, Select, SelectBody, SelectChange, SelectFooter, SelectHeader, SelectTrigger, _Select };
+export { FilterTrigger, FilterTriggerValueDirective, SELECT, Select, SelectBody, SelectChange, SelectFooter, SelectHeader, SelectOptionContentDef, SelectTrigger, SelectValueDef, _Select };
 //# sourceMappingURL=ngstarter-ui-components-select.mjs.map