@ngbase/adk 0.1.19 → 0.1.21

package/fesm2022/ngbase-adk-select.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, booleanAttribute, output, signal, linkedSignal, Directive, contentChildren, viewChild, TemplateRef, model, computed, effect, untracked, contentChild } from '@angular/core';
+import { signal, Directive, inject, ElementRef, viewChild, TemplateRef, model, input, booleanAttribute, output, computed, effect, untracked, contentChild, numberAttribute, linkedSignal, forwardRef, DestroyRef } from '@angular/core';
 import * as i1 from '@ngbase/adk/a11y';
-import { AccessibleItem, AccessibleGroup, Autofocus } from '@ngbase/adk/a11y';
+import { AccessibleGroup, AccessibleItem, Autofocus } from '@ngbase/adk/a11y';
 import { uniqueId, filterFunction } from '@ngbase/adk/utils';
 import { Directionality } from '@ngbase/adk/bidi';
 import { ngbPopoverPortal } from '@ngbase/adk/popover';
@@ -9,80 +9,34 @@ import { Subject } from 'rxjs';
 import * as i2 from '@ngbase/adk/form-field';
 import { InputBase } from '@ngbase/adk/form-field';
 
-class NgbOption {
-    constructor() {
-        this.allyItem = inject(AccessibleItem);
-        this.el = inject(ElementRef);
-        // inputs
-        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
-        this.ayId = input(...(ngDevMode ? [undefined, { debugName: "ayId" }] : []));
-        // outputs
-        this.onSelectionChange = output();
-        this.multiple = signal(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
-        this.checked = signal(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
-        this.active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
-        this._ayId = linkedSignal({ ...(ngDevMode ? { debugName: "_ayId" } : {}), source: this.ayId, computation: id => id || '' });
-        this.allyItem._ayId = this._ayId;
-        this.allyItem._disabled = this.disabled;
-    }
-    selectOption() { }
-    setAyId(id) {
-        this._ayId.set(id);
-    }
-    label() {
-        return this.el.nativeElement.textContent || '';
-    }
-    focus() {
-        this.el.nativeElement.scrollIntoView({ block: 'nearest' });
-        this.el.nativeElement.classList.add('bg-muted');
-    }
-    unselect() {
-        this.el.nativeElement.classList.remove('bg-muted');
-    }
-    getValue() {
-        if (this.value() === undefined) {
-            return this.label();
-        }
-        return this.value();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: NgbOption, isStandalone: true, selector: "[ngbOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ayId: { classPropertyName: "ayId", publicName: "ayId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, host: { attributes: { "role": "option", "tabindex": "-1" }, listeners: { "click": "selectOption()" } }, hostDirectives: [{ directive: i1.AccessibleItem }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbOption, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngbOption]',
-                    hostDirectives: [AccessibleItem],
-                    host: {
-                        role: 'option',
-                        tabindex: '-1',
-                        '(click)': 'selectOption()',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ayId: [{ type: i0.Input, args: [{ isSignal: true, alias: "ayId", required: false }] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }] } });
-
 class NgbSelectTarget {
     constructor() {
         this.target = signal(null, ...(ngDevMode ? [{ debugName: "target" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbSelectTarget, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: NgbSelectTarget, isStandalone: true, selector: "[ngbSelectTarget]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgbSelectTarget, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: NgbSelectTarget, isStandalone: true, selector: "[ngbSelectTarget]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbSelectTarget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgbSelectTarget, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbSelectTarget]',
                 }]
         }] });
 class SelectBase {
+    registerOption(option) {
+        this.registered.update(list => [...list, option]);
+    }
+    unregisterOption(option) {
+        this.registered.update(list => list.filter(o => o !== option));
+    }
     constructor(isSelect) {
         this.isSelect = isSelect;
         // Dependencies
         this.el = inject(ElementRef);
         this.dir = inject(Directionality);
         this.target = inject(NgbSelectTarget, { optional: true });
-        this.list = contentChildren(NgbOption, { ...(ngDevMode ? { debugName: "list" } : {}), descendants: true });
+        this.registered = signal([], ...(ngDevMode ? [{ debugName: "registered" }] : []));
+        this.list = this.registered.asReadonly();
         this.popover = ngbPopoverPortal();
         this.optionsTemplate = viewChild('optionsTemplate', { ...(ngDevMode ? { debugName: "optionsTemplate" } : {}), read: TemplateRef });
         this.container = viewChild('container', { ...(ngDevMode ? { debugName: "container" } : {}), read: ElementRef });
@@ -91,6 +45,7 @@ class SelectBase {
         this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+        this.labelFn = input(undefined, ...(ngDevMode ? [{ debugName: "labelFn" }] : []));
         this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : {}), transform: booleanAttribute });
         this.noAutoClose = input(false, { ...(ngDevMode ? { debugName: "noAutoClose" } : {}), transform: booleanAttribute });
         this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
@@ -106,21 +61,34 @@ class SelectBase {
         this.previousValue = '';
         this.events = new Subject();
         this.ayId = uniqueId();
+        // Cache of value -> label. Populated when options register/are selected.
+        // Allows display value to persist after option is destroyed (e.g. virtual scroll).
+        this.labelCache = signal(new Map(), ...(ngDevMode ? [{ debugName: "labelCache" }] : []));
         this.cValue = computed(() => {
             if (!this.isSelect && this.status() === 'opened') {
                 return this.previousValue;
             }
             const multiple = this.multiple();
+            const filtered = this.values();
+            const labelFn = this.labelFn();
+            const cache = this.labelCache();
             const options = this.list();
-            const filtered = this.values(); // .filter(x => x !== undefined && x !== null && x !== '');
-            const values = filtered.length
-                ? options.reduce((acc, option) => {
-                    if (filtered.includes(option.getValue())) {
-                        acc.push(option.label());
-                    }
-                    return acc;
-                }, [])
-                : [];
+            const values = filtered
+                .filter(v => v !== undefined && v !== null && v !== '')
+                .map(v => {
+                // Prefer fresh DOM label if option currently registered
+                const opt = options.find(o => o.getValue() === v);
+                if (opt)
+                    return opt.label();
+                // Then cached label from previous registration
+                const cached = cache.get(v);
+                if (cached)
+                    return cached;
+                // Then user-supplied label function (data-driven virtual scroll)
+                if (labelFn)
+                    return labelFn(v);
+                return '';
+            });
             // if the value is greater than 1, then take the first value and add a plus sign with the length of the remaining values
             if (multiple && values.length > 1) {
                 this.previousValue = `${values[0]} (+${values.length - 1})`;
@@ -175,6 +143,31 @@ class SelectBase {
                 option.checked.set(values.includes(option.getValue()));
             });
         });
+        // Cache labels of currently-selected options so display value survives
+        // option destruction (e.g., virtual scroll removing off-screen items).
+        effect(() => {
+            const options = this.list();
+            const values = this.values();
+            untracked(() => {
+                const cache = this.labelCache();
+                let next = null;
+                for (const o of options) {
+                    const v = o.getValue();
+                    if (!values.includes(v))
+                        continue;
+                    const lbl = o.label();
+                    if (!lbl)
+                        continue;
+                    if (cache.get(v) !== lbl) {
+                        if (!next)
+                            next = new Map(cache);
+                        next.set(v, lbl);
+                    }
+                }
+                if (next)
+                    this.labelCache.set(next);
+            });
+        });
         // Sync value model to internal values array
         effect(() => this.updateValues(this.value()));
     }
@@ -204,10 +197,10 @@ class SelectBase {
             this.withInPopup = e.type !== 'mouseleave';
         });
         if (!this.isSelect) {
-            diaRef.events.subscribe(() => {
-                document.addEventListener('click', this.clickHandler);
-                this.events.next('open');
-            });
+            // diaRef.events.subscribe(() => {
+            document.addEventListener('click', this.clickHandler);
+            this.events.next('open');
+            // });
         }
         else {
             this.events.next('open');
@@ -285,21 +278,41 @@ class SelectBase {
     ngOnDestroy() {
         this.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", type: SelectBase, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, noAutoClose: { classPropertyName: "noAutoClose", publicName: "noAutoClose", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", opened: "opened", closed: "closed" }, queries: [{ propertyName: "list", predicate: NgbOption, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "optionsTemplate", first: true, predicate: ["optionsTemplate"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "optionsGroup", first: true, predicate: ["optionsGroup"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SelectBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.2", type: SelectBase, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, labelFn: { classPropertyName: "labelFn", publicName: "labelFn", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, noAutoClose: { classPropertyName: "noAutoClose", publicName: "noAutoClose", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "optionsTemplate", first: true, predicate: ["optionsTemplate"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "optionsGroup", first: true, predicate: ["optionsGroup"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SelectBase, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: undefined }], propDecorators: { list: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NgbOption), { ...{ descendants: true }, isSignal: true }] }], optionsTemplate: [{ type: i0.ViewChild, args: ['optionsTemplate', { ...{ read: TemplateRef }, isSignal: true }] }], container: [{ type: i0.ViewChild, args: ['container', { ...{ read: ElementRef }, isSignal: true }] }], optionsGroup: [{ type: i0.ViewChild, args: ['optionsGroup', { ...{ read: ElementRef }, isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], noAutoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "noAutoClose", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+        }], ctorParameters: () => [{ type: undefined }], propDecorators: { optionsTemplate: [{ type: i0.ViewChild, args: ['optionsTemplate', { ...{ read: TemplateRef }, isSignal: true }] }], container: [{ type: i0.ViewChild, args: ['container', { ...{ read: ElementRef }, isSignal: true }] }], optionsGroup: [{ type: i0.ViewChild, args: ['optionsGroup', { ...{ read: ElementRef }, isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], labelFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFn", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], noAutoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "noAutoClose", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+function flattenForVirtualScroll(items, groupKey, groupLabelKey) {
+    if (!groupKey) {
+        return items.map(item => ({ type: 'option', value: item }));
+    }
+    const result = [];
+    for (const group of items) {
+        result.push({
+            type: 'group-header',
+            label: group[groupLabelKey || 'label'],
+        });
+        const children = group[groupKey];
+        if (children) {
+            for (const child of children) {
+                result.push({ type: 'option', value: child });
+            }
+        }
+    }
+    return result;
+}
 
 class NgbSelectOption {
     constructor() {
         this.template = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: NgbSelectOption, isStandalone: true, selector: "[ngbSelectOption]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgbSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: NgbSelectOption, isStandalone: true, selector: "[ngbSelectOption]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbSelectOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgbSelectOption, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbSelectOption]',
@@ -309,10 +322,10 @@ class SelectValue {
     constructor() {
         this.select = inject((NgbSelect));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: SelectValue, isStandalone: true, selector: "button[ngbSelectValue]", host: { attributes: { "type": "button", "role": "combobox", "tabindex": "-1" }, properties: { "disabled": "select.disabled()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SelectValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: SelectValue, isStandalone: true, selector: "button[ngbSelectValue]", host: { attributes: { "type": "button", "role": "combobox", "tabindex": "-1" }, properties: { "disabled": "select.disabled()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectValue, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SelectValue, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[ngbSelectValue]',
@@ -332,10 +345,10 @@ class NgbSelectOptionGroup {
         this.group._loop.set(false);
         this.group._ayId.set(this.select.ayId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbSelectOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: NgbSelectOptionGroup, isStandalone: true, selector: "[ngbSelectOptionGroup]", hostDirectives: [{ directive: i1.AccessibleGroup }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgbSelectOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: NgbSelectOptionGroup, isStandalone: true, selector: "[ngbSelectOptionGroup]", hostDirectives: [{ directive: i1.AccessibleGroup }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbSelectOptionGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgbSelectOptionGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbSelectOptionGroup]',
@@ -349,12 +362,84 @@ class NgbSelect extends SelectBase {
         this.search = model('', ...(ngDevMode ? [{ debugName: "search" }] : []));
         this.filterFn = input((option) => option, ...(ngDevMode ? [{ debugName: "filterFn" }] : []));
         this.filterOptions = input(...(ngDevMode ? [undefined, { debugName: "filterOptions" }] : []));
+        // Virtual scroll inputs
+        this.virtualScroll = input(false, { ...(ngDevMode ? { debugName: "virtualScroll" } : {}), transform: booleanAttribute });
+        this.itemSize = input(36, { ...(ngDevMode ? { debugName: "itemSize" } : {}), transform: numberAttribute });
+        this.groupKey = input(...(ngDevMode ? [undefined, { debugName: "groupKey" }] : []));
+        this.groupLabelKey = input(...(ngDevMode ? [undefined, { debugName: "groupLabelKey" }] : []));
         this.optionsFilter = filterFunction(this.options, computed(() => this.filterOptions() ?? { filter: this.filterFn() }));
+        // Flattened items for virtual scroll rendering
+        this.virtualItems = computed(() => {
+            if (!this.virtualScroll())
+                return [];
+            const filtered = this.optionsFilter.filteredList();
+            return flattenForVirtualScroll(filtered, this.groupKey(), this.groupLabelKey());
+        }, ...(ngDevMode ? [{ debugName: "virtualItems" }] : []));
+        // Keyboard navigation state for virtual mode
+        this.focusedVirtualIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedVirtualIndex" }] : []));
+        this.scrollToIndexFn = signal(null, ...(ngDevMode ? [{ debugName: "scrollToIndexFn" }] : []));
+        // Reset scroll position when filtered list changes in virtual mode
+        effect(() => {
+            this.optionsFilter.filteredList();
+            untracked(() => {
+                if (this.virtualScroll()) {
+                    this.focusedVirtualIndex.set(-1);
+                    this.scrollToIndexFn()?.call(null, 0);
+                }
+            });
+        });
+    }
+    handleVirtualKeydown(event) {
+        const items = this.virtualItems();
+        if (!items.length)
+            return;
+        const current = this.focusedVirtualIndex();
+        let next = current;
+        switch (event.key) {
+            case 'ArrowDown':
+                next = current + 1;
+                break;
+            case 'ArrowUp':
+                next = current - 1;
+                break;
+            case 'Enter':
+            case ' ': {
+                const item = items[current];
+                if (item?.type === 'option' && item.value !== undefined) {
+                    this.selectVirtualItem(item.value);
+                }
+                event.preventDefault();
+                return;
+            }
+            case 'Escape':
+                this.close();
+                event.preventDefault();
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        // Skip group headers
+        const dir = event.key === 'ArrowDown' ? 1 : -1;
+        while (next >= 0 && next < items.length && items[next].type === 'group-header') {
+            next += dir;
+        }
+        if (next < 0 || next >= items.length)
+            return;
+        this.focusedVirtualIndex.set(next);
+        this.scrollToIndexFn()?.call(null, next);
+    }
+    selectVirtualItem(value) {
+        const list = this.list();
+        const option = list.find(o => o.getValue() === value);
+        if (option) {
+            option.selectOption();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", type: NgbSelect, isStandalone: true, selector: "[ngbSelect]", inputs: { search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange" }, host: { attributes: { "role": "listbox", "type": "button" }, listeners: { "click": "open()", "blur": "touched.set(true)", "keydown.arrowdown": "$event.preventDefault(); open()", "keydown.arrowup": "$event.preventDefault(); open()", "keydown.enter": "$event.preventDefault(); open()", "keydown.space": "$event.preventDefault(); open()" }, properties: { "tabindex": "disabled() ? -1 : 0" } }, providers: [{ provide: SelectBase, useExisting: NgbSelect }], queries: [{ propertyName: "optionTemplate", first: true, predicate: (NgbSelectOption), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgbSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.2", type: NgbSelect, isStandalone: true, selector: "[ngbSelect]", inputs: { search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, groupKey: { classPropertyName: "groupKey", publicName: "groupKey", isSignal: true, isRequired: false, transformFunction: null }, groupLabelKey: { classPropertyName: "groupLabelKey", publicName: "groupLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange" }, host: { attributes: { "role": "listbox", "type": "button" }, listeners: { "click": "open()", "blur": "touched.set(true)", "keydown.arrowdown": "$event.preventDefault(); open()", "keydown.arrowup": "$event.preventDefault(); open()", "keydown.enter": "$event.preventDefault(); open()", "keydown.space": "$event.preventDefault(); open()" }, properties: { "tabindex": "disabled() ? -1 : 0" } }, providers: [{ provide: SelectBase, useExisting: NgbSelect }], queries: [{ propertyName: "optionTemplate", first: true, predicate: (NgbSelectOption), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgbSelect, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbSelect]',
@@ -371,7 +456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '[tabindex]': 'disabled() ? -1 : 0',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgbSelectOption), { isSignal: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], filterOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOptions", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgbSelectOption), { isSignal: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], filterOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOptions", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], groupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupKey", required: false }] }], groupLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupLabelKey", required: false }] }] } });
 function aliasSelect(select) {
     return [
         { provide: SelectBase, useExisting: select },
@@ -379,15 +464,73 @@ function aliasSelect(select) {
     ];
 }
 
+class NgbOption {
+    constructor() {
+        this.allyItem = inject(AccessibleItem);
+        this.el = inject(ElementRef);
+        // inputs
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+        this.ayId = input(...(ngDevMode ? [undefined, { debugName: "ayId" }] : []));
+        // outputs
+        this.onSelectionChange = output();
+        this.multiple = signal(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+        this.checked = signal(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+        this.active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+        this._ayId = linkedSignal({ ...(ngDevMode ? { debugName: "_ayId" } : {}), source: this.ayId, computation: id => id || '' });
+        this.allyItem._ayId = this._ayId;
+        this.allyItem._disabled = this.disabled;
+        const select = inject(forwardRef(() => SelectBase), { optional: true });
+        if (select) {
+            select.registerOption(this);
+            inject(DestroyRef).onDestroy(() => select.unregisterOption(this));
+        }
+    }
+    selectOption() { }
+    setAyId(id) {
+        this._ayId.set(id);
+    }
+    label() {
+        return this.el.nativeElement.textContent || '';
+    }
+    focus() {
+        this.el.nativeElement.scrollIntoView({ block: 'nearest' });
+        this.el.nativeElement.classList.add('bg-muted');
+    }
+    unselect() {
+        this.el.nativeElement.classList.remove('bg-muted');
+    }
+    getValue() {
+        if (this.value() === undefined) {
+            return this.label();
+        }
+        return this.value();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgbOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.2", type: NgbOption, isStandalone: true, selector: "[ngbOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ayId: { classPropertyName: "ayId", publicName: "ayId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, host: { attributes: { "role": "option", "tabindex": "-1" }, listeners: { "click": "selectOption()" } }, hostDirectives: [{ directive: i1.AccessibleItem }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgbOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbOption]',
+                    hostDirectives: [AccessibleItem],
+                    host: {
+                        role: 'option',
+                        tabindex: '-1',
+                        '(click)': 'selectOption()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ayId: [{ type: i0.Input, args: [{ isSignal: true, alias: "ayId", required: false }] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }] } });
+
 class NgbOptionGroup {
     constructor() {
         this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: NgbOptionGroup, isStandalone: true, selector: "[ngbOptionGroup]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgbOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.2", type: NgbOptionGroup, isStandalone: true, selector: "[ngbOptionGroup]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbOptionGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgbOptionGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbOptionGroup]',
@@ -422,10 +565,10 @@ class NgbSelectInput {
     updateSearch(value) {
         this.inputBase.value.set(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbSelectInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: NgbSelectInput, isStandalone: true, selector: "input[ngbSelectInput]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "placeholder": "placeholder()", "tabindex": "0" } }, exportAs: ["ngbSelectInput"], hostDirectives: [{ directive: i1.Autofocus }, { directive: i2.InputBase, inputs: ["value", "value"], outputs: ["valueChange", "valueChange"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgbSelectInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.2", type: NgbSelectInput, isStandalone: true, selector: "input[ngbSelectInput]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "placeholder": "placeholder()", "tabindex": "0" } }, exportAs: ["ngbSelectInput"], hostDirectives: [{ directive: i1.Autofocus }, { directive: i2.InputBase, inputs: ["value", "value"], outputs: ["valueChange", "valueChange"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbSelectInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgbSelectInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[ngbSelectInput]',
@@ -441,10 +584,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }] } });
 class NgbSelectTrigger {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: NgbSelectTrigger, isStandalone: true, selector: "[ngbSelectTrigger]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgbSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: NgbSelectTrigger, isStandalone: true, selector: "[ngbSelectTrigger]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbSelectTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgbSelectTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbSelectTrigger]',
@@ -455,10 +598,10 @@ class ListSelection extends SelectBase {
     constructor() {
         super(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ListSelection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: ListSelection, isStandalone: true, selector: "[ngbListSelection]", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ListSelection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: ListSelection, isStandalone: true, selector: "[ngbListSelection]", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ListSelection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ListSelection, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbListSelection]',
@@ -473,5 +616,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ListSelection, NgbOption, NgbOptionGroup, NgbSelect, NgbSelectInput, NgbSelectOption, NgbSelectOptionGroup, NgbSelectTarget, NgbSelectTrigger, SelectBase, SelectValue, aliasSelect };
+export { ListSelection, NgbOption, NgbOptionGroup, NgbSelect, NgbSelectInput, NgbSelectOption, NgbSelectOptionGroup, NgbSelectTarget, NgbSelectTrigger, SelectBase, SelectValue, aliasSelect, flattenForVirtualScroll };
 //# sourceMappingURL=ngbase-adk-select.mjs.map