ng-primitives 0.120.4 → 0.121.0

package/fesm2022/ng-primitives-select.mjs

@@ -1,29 +1,34 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, Directive, output, computed, HostListener, inject, ViewContainerRef, TemplateRef, Injector, signal, InjectionToken } from '@angular/core';
+import { signal, input, booleanAttribute, Directive, computed, output, inject, TemplateRef, ViewContainerRef, Injector, InjectionToken } from '@angular/core';
+import { uniqueId } from 'ng-primitives/utils';
 import { ngpFormControl } from 'ng-primitives/form-field';
 import { ngpInteractions } from 'ng-primitives/interactions';
-import { uniqueId } from 'ng-primitives/utils';
-import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
-import { observeResize, injectElementRef, scrollIntoViewIfNeeded, domSort } from 'ng-primitives/internal';
-import { createOverlay, coerceFlip, coerceOffset } from 'ng-primitives/portal';
+import { injectElementRef, domSort, observeResize, scrollIntoViewIfNeeded } from 'ng-primitives/internal';
+import { createPrimitive, controlled, attrBinding, deprecatedSetter, emitter, dataBinding, listener, styleBinding, onDestroy } from 'ng-primitives/state';
+import { provideControlContainerIsolation, createOverlay, coerceFlip, coerceOffset } from 'ng-primitives/portal';
 import { activeDescendantManager } from 'ng-primitives/a11y';
 
-/**
- * The state token for the Select primitive.
- */
-const NgpNativeSelectStateToken = createStateToken('Select');
-/**
- * Provides the Select state.
- */
-const provideNativeSelectState = createStateProvider(NgpNativeSelectStateToken);
-/**
- * Injects the Select state.
- */
-const injectNativeSelectState = createStateInjector(NgpNativeSelectStateToken);
-/**
- * The Select state registration function.
- */
-const selectNativeSelectState = createState(NgpNativeSelectStateToken);
+const [NgpNativeSelectStateToken, ngpNativeSelect, injectNativeSelectState, provideNativeSelectState,] = createPrimitive('NgpNativeSelect', ({ disabled: _disabled = signal(false), id = signal(uniqueId('ngp-native-select')), }) => {
+    const element = injectElementRef();
+    const disabled = controlled(_disabled);
+    // Setup interactions
+    ngpInteractions({
+        hover: true,
+        press: true,
+        focus: true,
+        focusVisible: true,
+        disabled: disabled,
+    });
+    ngpFormControl({ id: id, disabled: disabled });
+    attrBinding(element, 'disabled', disabled);
+    function setDisabled(value) {
+        disabled.set(value);
+    }
+    return {
+        disabled: deprecatedSetter(disabled, 'setDisabled'),
+        setDisabled,
+    };
+});
 
 /**
  * Apply the `ngpNativeSelect` directive to a select element that you want to enhance.
@@ -33,543 +38,149 @@ class NgpNativeSelect {
         /**
          * The id of the select. If not provided, a unique id will be generated.
          */
-        this.id = input(uniqueId('ngp-native-select'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.id = input(uniqueId('ngp-native-select'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /**
          * Whether the select is disabled.
          */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpNativeSelectDisabled',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpNativeSelectDisabled',
-                transform: booleanAttribute,
-            }]));
-        /**
-         * The select state.
-         */
-        this.state = selectNativeSelectState(this);
-        ngpInteractions({
-            hover: true,
-            press: true,
-            focus: true,
-            focusVisible: true,
-            disabled: this.state.disabled,
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'ngpNativeSelectDisabled',
+            transform: booleanAttribute });
+        ngpNativeSelect({
+            id: this.id,
+            disabled: this.disabled,
         });
-        ngpFormControl({ id: this.state.id, disabled: this.state.disabled });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpNativeSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpNativeSelect, isStandalone: true, selector: "select[ngpNativeSelect]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpNativeSelectDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.disabled": "state.disabled() || null" } }, providers: [provideNativeSelectState()], exportAs: ["ngpNativeSelect"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpNativeSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpNativeSelect, isStandalone: true, selector: "select[ngpNativeSelect]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpNativeSelectDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideNativeSelectState()], exportAs: ["ngpNativeSelect"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpNativeSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpNativeSelect, decorators: [{
             type: Directive,
             args: [{
                     selector: 'select[ngpNativeSelect]',
                     exportAs: 'ngpNativeSelect',
                     providers: [provideNativeSelectState()],
-                    host: {
-                        '[attr.disabled]': 'state.disabled() || null',
-                    },
                 }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpNativeSelectDisabled", required: false }] }] } });
 
-/**
- * The state token  for the Select primitive.
- */
-const NgpSelectStateToken = createStateToken('Select');
-/**
- * Provides the Select state.
- */
-const provideSelectState = createStateProvider(NgpSelectStateToken);
-/**
- * Injects the Select state.
- */
-const injectSelectState = createStateInjector(NgpSelectStateToken);
-/**
- * The Select state registration function.
- */
-const selectState = createState(NgpSelectStateToken);
-
-class NgpSelectDropdown {
-    constructor() {
-        /** Access the select state. */
-        this.state = injectSelectState();
-        /** The dimensions of the select. */
-        this.selectDimensions = observeResize(() => this.state().elementRef.nativeElement);
-        /**
-         * Access the element reference.
-         * @internal
-         */
-        this.elementRef = injectElementRef();
-        /** The id of the dropdown. */
-        this.id = input(uniqueId('ngp-select-dropdown'), ...(ngDevMode ? [{ debugName: "id" }] : []));
-        this.state().registerDropdown(this);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSelectDropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpSelectDropdown, isStandalone: true, selector: "[ngpSelectDropdown]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "id": "id()", "style.left.px": "state().overlay()?.position()?.x", "style.top.px": "state().overlay()?.position()?.y", "style.--ngp-select-transform-origin": "state().overlay()?.transformOrigin()", "style.--ngp-select-available-width.px": "state().overlay()?.availableWidth()", "style.--ngp-select-available-height.px": "state().overlay()?.availableHeight()", "style.--ngp-select-width.px": "selectDimensions().width" } }, exportAs: ["ngpSelectDropdown"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSelectDropdown, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngpSelectDropdown]',
-                    exportAs: 'ngpSelectDropdown',
-                    host: {
-                        role: 'listbox',
-                        '[id]': 'id()',
-                        '[style.left.px]': 'state().overlay()?.position()?.x',
-                        '[style.top.px]': 'state().overlay()?.position()?.y',
-                        '[style.--ngp-select-transform-origin]': 'state().overlay()?.transformOrigin()',
-                        '[style.--ngp-select-available-width.px]': 'state().overlay()?.availableWidth()',
-                        '[style.--ngp-select-available-height.px]': 'state().overlay()?.availableHeight()',
-                        '[style.--ngp-select-width.px]': 'selectDimensions().width',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
-
-class NgpSelectOption {
-    constructor() {
-        /** Access the select state. */
-        this.state = injectSelectState();
-        /**
-         * The element reference of the option.
-         * @internal
-         */
-        this.elementRef = injectElementRef();
-        /** The id of the option. */
-        this.id = input(uniqueId('ngp-select-option'), ...(ngDevMode ? [{ debugName: "id" }] : []));
-        /** @required The value of the option. */
-        this.value = input(undefined, ...(ngDevMode ? [{ debugName: "value", alias: 'ngpSelectOptionValue' }] : [{
-                alias: 'ngpSelectOptionValue',
-            }]));
-        /** The disabled state of the option. */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpSelectOptionDisabled',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpSelectOptionDisabled',
-                transform: booleanAttribute,
-            }]));
-        /** The index of the option in the list. */
-        this.index = input(undefined, ...(ngDevMode ? [{ debugName: "index", alias: 'ngpSelectOptionIndex' }] : [{
-                alias: 'ngpSelectOptionIndex',
-            }]));
-        /**
-         * Event emitted when the option is activated via click or keyboard.
-         * This is useful for options without values that need custom behavior.
-         */
-        this.activated = output({
-            alias: 'ngpSelectOptionActivated',
-        });
-        /**
-         * Whether this option is the active descendant.
-         * @internal
-         */
-        this.active = computed(() => {
-            // if the option has an index, use that to determine if it's active because this
-            // is required for virtual scrolling scenarios
-            const index = this.index();
-            if (index !== undefined) {
-                return this.state().activeDescendantManager.index() === index;
-            }
-            return this.state().activeDescendantManager.id() === this.id();
-        }, ...(ngDevMode ? [{ debugName: "active" }] : []));
-        /** Whether this option is selected. */
-        this.selected = computed(() => {
-            const value = this.value();
-            const stateValue = this.state().value();
-            // Only treat `undefined` as "no value" (allow '', 0, false).
-            if (value === undefined) {
-                return false;
-            }
-            if (this.state().multiple()) {
-                return (Array.isArray(stateValue) && stateValue.some(v => this.state().compareWith()(value, v)));
-            }
-            // Only treat `undefined` as "no selection" (allow '', 0, false).
-            if (stateValue === undefined) {
-                return false;
+const [NgpSelectStateToken, ngpSelect, _injectSelectState, provideSelectState] = createPrimitive('NgpSelect', ({ id = signal(uniqueId('ngp-select')), value: _value = signal(undefined), multiple = signal(false), disabled: _disabled = signal(false), compareWith = signal(Object.is), placement = signal('bottom'), container = signal('body'), flip = signal(true), offset = signal(0), scrollToOption = signal(undefined), allOptions = signal(undefined), onValueChange, onOpenChange, }) => {
+    const elementRef = injectElementRef();
+    const value = controlled(_value);
+    const disabled = controlled(_disabled, false);
+    const valueChangeEmitter = emitter();
+    function setValue(newValue, options) {
+        value.set(newValue);
+        if (options?.emit !== false) {
+            onValueChange?.(newValue);
+            valueChangeEmitter.emit(newValue);
+        }
+    }
+    function setDisabled(isDisabled) {
+        disabled.set(isDisabled);
+    }
+    ngpInteractions({
+        focus: true,
+        focusWithin: true,
+        hover: true,
+        press: true,
+        disabled,
+    });
+    ngpFormControl({ id, disabled });
+    const portal = signal(undefined, ...(ngDevMode ? [{ debugName: "portal" }] : /* istanbul ignore next */ []));
+    const dropdown = signal(undefined, ...(ngDevMode ? [{ debugName: "dropdown" }] : /* istanbul ignore next */ []));
+    const options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    const overlay = computed(() => portal()?.overlay(), ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
+    const open = computed(() => overlay()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    const sortedOptions = computed(() => domSort(options(), option => option.elementRef.nativeElement, option => option.index?.()), ...(ngDevMode ? [{ debugName: "sortedOptions" }] : /* istanbul ignore next */ []));
+    const activeDescendantManagerInstance = activeDescendantManager({
+        // we must wrap the signal in a computed to ensure it is not used before it is defined
+        disabled: computed(() => disabled()),
+        wrap: signal(true),
+        count: computed(() => allOptions()?.length ?? options().length),
+        getItemId: index => getOptionAtIndex(index)?.id(),
+        isItemDisabled: index => getOptionAtIndex(index)?.disabled() ?? false,
+        scrollIntoView: index => {
+            const isPositioned = portal()?.overlay()?.isPositioned() ?? false;
+            if (!isPositioned || index === -1) {
+                return;
             }
-            return this.state().compareWith()(value, stateValue);
-        }, ...(ngDevMode ? [{ debugName: "selected" }] : []));
-        this.state().registerOption(this);
-        ngpInteractions({
-            hover: true,
-            press: true,
-            disabled: this.disabled,
-        });
-    }
-    ngOnDestroy() {
-        this.state().unregisterOption(this);
-    }
-    /**
-     * Select the option.
-     * @internal
-     */
-    select() {
-        if (this.disabled()) {
-            return;
-        }
-        this.activated.emit();
-        this.state().toggleOption(this.id());
-    }
-    /**
-     * Scroll the option into view.
-     * @internal
-     */
-    scrollIntoView() {
-        scrollIntoViewIfNeeded(this.elementRef.nativeElement);
-    }
-    /**
-     * Whenever the pointer enters the option, activate it.
-     * @internal
-     */
-    onPointerEnter() {
-        // if we have a known index, use that to activate the option because this
-        // is required for virtual scrolling scenarios
-        const index = this.index();
-        if (index !== undefined) {
-            this.state().activeDescendantManager.activateByIndex(index, {
-                scroll: false,
-                origin: 'pointer',
-            });
-            return;
-        }
-        // otherwise, activate by id
-        this.state().activeDescendantManager.activateById(this.id(), {
-            scroll: false,
-            origin: 'pointer',
-        });
-    }
-    /**
-     * Whenever the pointer leaves the option, deactivate it.
-     * @internal
-     */
-    onPointerLeave() {
-        if (this.state().activeDescendantManager.id() === this.id()) {
-            this.state().activeDescendantManager.reset({ origin: 'pointer' });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpSelectOption, isStandalone: true, selector: "[ngpSelectOption]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpSelectOptionValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpSelectOptionDisabled", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "ngpSelectOptionIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "ngpSelectOptionActivated" }, host: { attributes: { "role": "option" }, listeners: { "click": "select()", "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()" }, properties: { "id": "id()", "attr.tabindex": "-1", "attr.aria-selected": "selected() ? \"true\" : undefined", "attr.data-selected": "selected() ? \"\" : undefined", "attr.data-active": "active() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined" } }, exportAs: ["ngpSelectOption"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSelectOption, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngpSelectOption]',
-                    exportAs: 'ngpSelectOption',
-                    host: {
-                        role: 'option',
-                        '[id]': 'id()',
-                        '[attr.tabindex]': '-1',
-                        '[attr.aria-selected]': 'selected() ? "true" : undefined',
-                        '[attr.data-selected]': 'selected() ? "" : undefined',
-                        '[attr.data-active]': 'active() ? "" : undefined',
-                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
-                        '(click)': 'select()',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectOptionValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectOptionDisabled", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectOptionIndex", required: false }] }], activated: [{ type: i0.Output, args: ["ngpSelectOptionActivated"] }], onPointerEnter: [{
-                type: HostListener,
-                args: ['pointerenter']
-            }], onPointerLeave: [{
-                type: HostListener,
-                args: ['pointerleave']
-            }] } });
-
-class NgpSelectPortal {
-    constructor() {
-        /** Access the select state. */
-        this.state = injectSelectState();
-        /** Access the view container reference. */
-        this.viewContainerRef = inject(ViewContainerRef);
-        /** Access the template reference. */
-        this.templateRef = inject(TemplateRef);
-        /** Access the injector. */
-        this.injector = inject(Injector);
-        /**
-         * The overlay that manages the popover
-         * @internal
-         */
-        this.overlay = signal(null, ...(ngDevMode ? [{ debugName: "overlay" }] : []));
-        this.state().registerPortal(this);
-    }
-    /** Cleanup the portal. */
-    ngOnDestroy() {
-        this.overlay()?.destroy();
-    }
-    /**
-     * Attach the portal.
-     * @internal
-     */
-    show() {
-        // Create the overlay if it doesn't exist yet
-        if (!this.overlay()) {
-            this.createOverlay();
-        }
-        // Show the overlay
-        return this.overlay().show();
-    }
-    /**
-     * Detach the portal.
-     * @internal
-     */
-    async detach() {
-        this.overlay()?.hide();
-    }
-    /**
-     * Create the overlay that will contain the dropdown
-     */
-    createOverlay() {
-        // Create config for the overlay
-        const config = {
-            content: this.templateRef,
-            viewContainerRef: this.viewContainerRef,
-            triggerElement: this.state().elementRef.nativeElement,
-            injector: this.injector,
-            placement: this.state().placement,
-            offset: this.state().offset(),
-            flip: this.state().flip(),
-            closeOnOutsideClick: true,
-            closeOnEscape: true,
-            restoreFocus: false,
-            scrollBehaviour: 'reposition',
-            container: this.state().container(),
-            onClose: () => this.state().onOverlayClosed(),
-        };
-        this.overlay.set(createOverlay(config));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSelectPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpSelectPortal, isStandalone: true, selector: "[ngpSelectPortal]", exportAs: ["ngpSelectPortal"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSelectPortal, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngpSelectPortal]',
-                    exportAs: 'ngpSelectPortal',
-                }]
-        }], ctorParameters: () => [] });
-
-const defaultSelectConfig = {
-    placement: 'bottom',
-    container: 'body',
-    flip: true,
-    offset: 0,
-};
-const NgpSelectConfigToken = new InjectionToken('NgpSelectConfigToken');
-/**
- * Provide the default Select configuration
- * @param config The Select configuration
- * @returns The provider
- */
-function provideSelectConfig(config) {
-    return [
-        {
-            provide: NgpSelectConfigToken,
-            useValue: { ...defaultSelectConfig, ...config },
+            scrollTo(index);
         },
-    ];
-}
-/**
- * Inject the Select configuration
- * @returns The global Select configuration
- */
-function injectSelectConfig() {
-    return inject(NgpSelectConfigToken, { optional: true }) ?? defaultSelectConfig;
-}
-
-class NgpSelect {
-    constructor() {
-        /** Access the select configuration. */
-        this.config = injectSelectConfig();
-        /** @internal Access the select element. */
-        this.elementRef = injectElementRef();
-        /** Access the injector. */
-        this.injector = inject(Injector);
-        /** The unique id of the select. */
-        this.id = input(uniqueId('ngp-select'), ...(ngDevMode ? [{ debugName: "id" }] : []));
-        /** The value of the select. */
-        this.value = input(undefined, ...(ngDevMode ? [{ debugName: "value", alias: 'ngpSelectValue' }] : [{
-                alias: 'ngpSelectValue',
-            }]));
-        /** Event emitted when the value changes. */
-        this.valueChange = output({
-            alias: 'ngpSelectValueChange',
-        });
-        /** Whether the select is multiple selection. */
-        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", alias: 'ngpSelectMultiple',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpSelectMultiple',
-                transform: booleanAttribute,
-            }]));
-        /** Whether the select is disabled. */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpSelectDisabled',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpSelectDisabled',
-                transform: booleanAttribute,
-            }]));
-        /** Emit when the dropdown open state changes. */
-        this.openChange = output({
-            alias: 'ngpSelectOpenChange',
-        });
-        /** The comparator function used to compare options. */
-        this.compareWith = input(Object.is, ...(ngDevMode ? [{ debugName: "compareWith", alias: 'ngpSelectCompareWith' }] : [{
-                alias: 'ngpSelectCompareWith',
-            }]));
-        /** The position of the dropdown. */
-        this.placement = input(this.config.placement, ...(ngDevMode ? [{ debugName: "placement", alias: 'ngpSelectDropdownPlacement' }] : [{
-                alias: 'ngpSelectDropdownPlacement',
-            }]));
-        /** The container for the dropdown. */
-        this.container = input(this.config.container, ...(ngDevMode ? [{ debugName: "container", alias: 'ngpSelectDropdownContainer' }] : [{
-                alias: 'ngpSelectDropdownContainer',
-            }]));
-        /** Whether the dropdown should flip when there is not enough space. Can be a boolean to enable/disable, or an object with padding and fallbackPlacements options. */
-        this.flip = input(this.config.flip, ...(ngDevMode ? [{ debugName: "flip", alias: 'ngpSelectDropdownFlip',
-                transform: coerceFlip }] : [{
-                alias: 'ngpSelectDropdownFlip',
-                transform: coerceFlip,
-            }]));
-        /**
-         * Define the offset of the select dropdown relative to the trigger.
-         * Can be a number (applies to mainAxis) or an object with mainAxis, crossAxis, and alignmentAxis.
-         * @default 0
-         */
-        this.offset = input(this.config.offset, ...(ngDevMode ? [{ debugName: "offset", alias: 'ngpSelectDropdownOffset',
-                transform: coerceOffset }] : [{
-                alias: 'ngpSelectDropdownOffset',
-                transform: coerceOffset,
-            }]));
-        /**
-         * A function that will scroll the active option into view. This can be overridden
-         * for cases such as virtual scrolling where we cannot scroll the option directly because
-         * it may not be rendered.
-         */
-        this.scrollToOption = input(undefined, ...(ngDevMode ? [{ debugName: "scrollToOption", alias: 'ngpSelectScrollToOption' }] : [{
-                alias: 'ngpSelectScrollToOption',
-            }]));
-        /**
-         * Provide all the option values to the select. This is useful for virtual scrolling scenarios
-         * where not all options are rendered in the DOM. This is not an alternative to adding the options
-         * in the DOM, it is only to provide the select with the full list of options. This list should match
-         * the order of the options as they would appear in the DOM.
-         */
-        this.allOptions = input(undefined, ...(ngDevMode ? [{ debugName: "allOptions", alias: 'ngpSelectOptions' }] : [{ alias: 'ngpSelectOptions' }]));
-        /**
-         * Store the select portal.
-         * @internal
-         */
-        this.portal = signal(undefined, ...(ngDevMode ? [{ debugName: "portal" }] : []));
-        /**
-         * Store the select dropdown.
-         * @internal
-         */
-        this.dropdown = signal(undefined, ...(ngDevMode ? [{ debugName: "dropdown" }] : []));
-        /**
-         * Store the select options.
-         * @internal
-         */
-        this.options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : []));
-        /**
-         * Access the overlay
-         * @internal
-         */
-        this.overlay = computed(() => this.portal()?.overlay(), ...(ngDevMode ? [{ debugName: "overlay" }] : []));
-        /**
-         * The open state of the select.
-         * @internal
-         */
-        this.open = computed(() => this.overlay()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "open" }] : []));
-        /**
-         * The options sorted by their index or DOM position.
-         * @internal
-         */
-        this.sortedOptions = computed(() => domSort(this.options(), option => option.elementRef.nativeElement, option => option.index?.()), ...(ngDevMode ? [{ debugName: "sortedOptions" }] : []));
-        /**
-         * The active key descendant manager.
-         * @internal
-         */
-        this.activeDescendantManager = activeDescendantManager({
-            // we must wrap the signal in a computed to ensure it is not used before it is defined
-            disabled: computed(() => this.state.disabled()),
-            wrap: signal(true),
-            count: computed(() => this.allOptions()?.length ?? this.options().length),
-            getItemId: index => this.getOptionAtIndex(index)?.id(),
-            isItemDisabled: index => this.getOptionAtIndex(index)?.disabled() ?? false,
-            scrollIntoView: index => {
-                const isPositioned = this.portal()?.overlay()?.isPositioned() ?? false;
-                if (!isPositioned || index === -1) {
-                    return;
-                }
-                this.scrollTo(index);
-            },
-        });
-        /** The state of the select. */
-        this.state = selectState(this);
-        ngpInteractions({
-            focus: true,
-            focusWithin: true,
-            hover: true,
-            press: true,
-            disabled: this.state.disabled,
-        });
-        ngpFormControl({ id: this.state.id, disabled: this.state.disabled });
-    }
+    });
+    // Host bindings
+    attrBinding(elementRef, 'role', 'combobox');
+    attrBinding(elementRef, 'id', id);
+    attrBinding(elementRef, 'aria-expanded', open);
+    attrBinding(elementRef, 'aria-controls', () => (open() ? dropdown()?.id() : undefined));
+    attrBinding(elementRef, 'aria-activedescendant', () => open() ? activeDescendantManagerInstance.id() : undefined);
+    attrBinding(elementRef, 'tabindex', () => (disabled() ? -1 : 0));
+    dataBinding(elementRef, 'data-open', () => (open() ? '' : null));
+    dataBinding(elementRef, 'data-disabled', () => (disabled() ? '' : null));
+    dataBinding(elementRef, 'data-multiple', () => (multiple() ? '' : null));
+    // Event listeners
+    listener(elementRef, 'click', () => void toggleDropdown());
+    listener(elementRef, 'keydown', handleKeydown);
+    listener(elementRef, 'blur', onBlur);
     /**
      * Open the dropdown.
      * @internal
      */
-    async openDropdown() {
-        if (this.state.disabled() || this.open()) {
+    async function openDropdown() {
+        if (disabled() || open()) {
             return;
         }
-        this.openChange.emit(true);
-        await this.portal()?.show();
+        onOpenChange?.(true);
+        await portal()?.show();
         let selectedOptionIdx = -1;
         // if we have been provided with allOptions, we need to find the selected option(s) from that list
-        if (this.state.allOptions()) {
-            selectedOptionIdx = this.state
-                .allOptions()
-                .findIndex(option => this.isOptionSelected(option));
+        if (allOptions()) {
+            selectedOptionIdx = allOptions().findIndex(option => isOptionSelected(option));
         }
         // if we don't have allOptions, find the selected option(s) from the registered options
         if (selectedOptionIdx === -1) {
             // if there is a selected option(s), set the active descendant to the first selected option
-            selectedOptionIdx = this.sortedOptions().findIndex(option => this.isOptionSelected(option.value()));
+            selectedOptionIdx = sortedOptions().findIndex(option => isOptionSelected(option.value()));
         }
         // if after checking there is a selected option, set the active descendant to the first option
         if (selectedOptionIdx !== -1) {
             // scroll to and activate the selected option
-            this.scrollTo(selectedOptionIdx);
-            this.activeDescendantManager.activateByIndex(selectedOptionIdx);
+            scrollTo(selectedOptionIdx);
+            activeDescendantManagerInstance.activateByIndex(selectedOptionIdx);
             return;
         }
         // activate the selected option or the first option
-        this.activeDescendantManager.first();
+        activeDescendantManagerInstance.first();
     }
     /**
      * Close the dropdown.
      * @internal
      */
-    closeDropdown() {
-        if (!this.open()) {
+    function closeDropdown() {
+        if (!open()) {
             return;
         }
-        this.portal()?.detach();
+        portal()?.hide();
     }
     /**
-     * Handles the dropdown being closed.
-     * Emits the openChange event and resets the active descendant.
+     * Handle the overlay being closed (whether via imperative closeDropdown(),
+     * outside click, or Escape). Emits openChange(false) and resets the active
+     * descendant. Wired in from select-portal-state.ts via the overlay onClose
+     * config — this is the single source of truth for the close-side emit so
+     * external close paths (outside click, Escape) also fire openChange.
      * @internal
      */
-    onOverlayClosed() {
-        this.openChange.emit(false);
-        // clear the active descendant
-        this.activeDescendantManager.reset();
+    function onOverlayClose() {
+        onOpenChange?.(false);
+        activeDescendantManagerInstance.reset();
     }
     /**
      * Toggle the dropdown.
      * @internal
      */
-    async toggleDropdown() {
-        if (this.open()) {
-            this.closeDropdown();
+    async function toggleDropdown() {
+        if (open()) {
+            closeDropdown();
         }
         else {
-            await this.openDropdown();
+            await openDropdown();
         }
     }
     /**
@@ -577,14 +188,14 @@ class NgpSelect {
      * @param index The index of the option to select.
      * @internal
      */
-    selectOption(id) {
-        if (this.state.disabled()) {
+    function selectOption(id) {
+        if (disabled()) {
             return;
         }
-        const option = this.sortedOptions().find(opt => opt.id() === id);
+        const option = sortedOptions().find(opt => opt.id() === id);
         if (!option) {
-            this.state.value.set(undefined);
-            this.closeDropdown();
+            setValue(undefined, { emit: false });
+            closeDropdown();
             return;
         }
         const optionValue = option.value();
@@ -592,21 +203,19 @@ class NgpSelect {
         if (optionValue === undefined) {
             return;
         }
-        if (this.state.multiple()) {
+        if (multiple()) {
             // if the option is already selected, do nothing
-            if (this.isOptionSelected(optionValue)) {
+            if (isOptionSelected(optionValue)) {
                 return;
             }
-            const value = [...(this.state.value() ?? []), optionValue];
+            const newValue = [...(value() ?? []), optionValue];
             // add the option to the value
-            this.state.value.set(value);
-            this.valueChange.emit(value);
+            setValue(newValue);
         }
         else {
-            this.state.value.set(optionValue);
-            this.valueChange.emit(optionValue);
+            setValue(optionValue);
             // close the dropdown on single selection
-            this.closeDropdown();
+            closeDropdown();
         }
     }
     /**
@@ -614,7 +223,7 @@ class NgpSelect {
      * @param option The option to deselect.
      * @internal
      */
-    deselectOption(option) {
+    function deselectOption(option) {
         const optionValue = option.value();
         // Options without values cannot be deselected (and should never be selected).
         if (optionValue === undefined) {
@@ -622,25 +231,24 @@ class NgpSelect {
         }
         // if the select is disabled or the option is not selected, do nothing
         // if the select is single selection, we don't allow deselecting
-        if (this.state.disabled() || !this.isOptionSelected(optionValue) || !this.state.multiple()) {
+        if (disabled() || !isOptionSelected(optionValue) || !multiple()) {
             return;
         }
-        const values = this.state.value() ?? [];
-        const newValue = values.filter(v => !this.state.compareWith()(v, optionValue));
+        const values = value() ?? [];
+        const newValue = values.filter(v => !compareWith()(v, optionValue));
         // remove the option from the value
-        this.state.value.set(newValue);
-        this.valueChange.emit(newValue);
+        setValue(newValue);
     }
     /**
      * Toggle the selection of an option.
      * @param id The id of the option to toggle.
      * @internal
      */
-    toggleOption(id) {
-        if (this.state.disabled()) {
+    function toggleOption(id) {
+        if (disabled()) {
             return;
         }
-        const option = this.sortedOptions().find(opt => opt.id() === id);
+        const option = sortedOptions().find(opt => opt.id() === id);
         if (!option) {
             return;
         }
@@ -650,17 +258,17 @@ class NgpSelect {
             return;
         }
         // if the state is single selection, we don't allow toggling
-        if (!this.state.multiple()) {
+        if (!multiple()) {
             // always select the option in single selection mode even if it is already selected so that we update the input
-            this.selectOption(id);
+            selectOption(id);
             return;
         }
         // otherwise toggle the option
-        if (this.isOptionSelected(optionValue)) {
-            this.deselectOption(option);
+        if (isOptionSelected(optionValue)) {
+            deselectOption(option);
         }
         else {
-            this.selectOption(id);
+            selectOption(id);
         }
     }
     /**
@@ -668,224 +276,716 @@ class NgpSelect {
      * @param option The option to check.
      * @internal
      */
-    isOptionSelected(option) {
-        if (this.state.disabled()) {
+    function isOptionSelected(option) {
+        if (disabled()) {
             return false;
         }
-        const value = this.state.value();
+        const currentValue = value();
         // Only treat `undefined` as "no selection" (allow '', 0, false).
-        if (value === undefined) {
+        if (currentValue === undefined) {
             return false;
         }
-        if (this.state.multiple()) {
-            return Array.isArray(value) && value.some(v => this.state.compareWith()(option, v));
+        if (multiple()) {
+            return Array.isArray(currentValue) && currentValue.some(v => compareWith()(option, v));
         }
-        return this.state.compareWith()(option, value);
+        return compareWith()(option, currentValue);
     }
     /**
      * Activate the next option in the list if there is one.
      * If there is no option currently active, activate the selected option or the first option.
      * @internal
      */
-    activateNextOption() {
-        if (this.state.disabled()) {
+    function activateNextOption() {
+        if (disabled()) {
             return;
         }
-        const options = this.sortedOptions();
+        const currentOptions = sortedOptions();
         // if there are no options, do nothing
-        if (options.length === 0) {
+        if (currentOptions.length === 0) {
             return;
         }
         // if there is no active option, activate the first option
-        if (this.activeDescendantManager.index() === -1) {
-            const selectedOption = options.findIndex(option => this.isOptionSelected(option.value()));
+        if (activeDescendantManagerInstance.index() === -1) {
+            const selectedOption = currentOptions.findIndex(option => isOptionSelected(option.value()));
             // if there is a selected option(s), set the active descendant to the first selected option
             const targetOption = selectedOption !== -1 ? selectedOption : 0;
-            this.activeDescendantManager.activateByIndex(targetOption, { origin: 'keyboard' });
+            activeDescendantManagerInstance.activateByIndex(targetOption, { origin: 'keyboard' });
             return;
         }
         // otherwise activate the next option
-        this.activeDescendantManager.next({ origin: 'keyboard' });
+        activeDescendantManagerInstance.next({ origin: 'keyboard' });
     }
     /**
      * Activate the previous option in the list if there is one.
      * @internal
      */
-    activatePreviousOption() {
-        if (this.state.disabled()) {
+    function activatePreviousOption() {
+        if (disabled()) {
             return;
         }
-        const options = this.sortedOptions();
+        const currentOptions = sortedOptions();
         // if there are no options, do nothing
-        if (options.length === 0) {
+        if (currentOptions.length === 0) {
             return;
         }
         // if there is no active option, activate the last option
-        if (this.activeDescendantManager.index() === -1) {
-            const selectedOption = options.findIndex(option => this.isOptionSelected(option.value()));
+        if (activeDescendantManagerInstance.index() === -1) {
+            const selectedOption = currentOptions.findIndex(option => isOptionSelected(option.value()));
             // if there is a selected option(s), set the active descendant to the first selected option
-            const targetOption = selectedOption !== -1 ? selectedOption : options.length - 1;
-            this.activeDescendantManager.activateByIndex(targetOption, { origin: 'keyboard' });
+            const targetOption = selectedOption !== -1 ? selectedOption : currentOptions.length - 1;
+            activeDescendantManagerInstance.activateByIndex(targetOption, { origin: 'keyboard' });
             return;
         }
         // otherwise activate the previous option
-        this.activeDescendantManager.previous({ origin: 'keyboard' });
+        activeDescendantManagerInstance.previous({ origin: 'keyboard' });
     }
     /**
      * Register the dropdown portal with the select.
      * @param portal The dropdown portal.
      * @internal
      */
-    registerPortal(portal) {
-        this.portal.set(portal);
+    function registerPortal(portalInstance) {
+        portal.set(portalInstance);
     }
     /**
      * Register the dropdown with the select.
      * @param dropdown The dropdown to register.
      * @internal
      */
-    registerDropdown(dropdown) {
-        this.dropdown.set(dropdown);
+    function registerDropdown(dropdownInstance) {
+        dropdown.set(dropdownInstance);
     }
     /**
      * Register an option with the select.
      * @param option The option to register.
      * @internal
      */
-    registerOption(option) {
-        this.options.update(options => [...options, option]);
+    function registerOption(option) {
+        options.update(current => [...current, option]);
     }
     /**
      * Unregister an option from the select.
      * @param option The option to unregister.
      * @internal
      */
-    unregisterOption(option) {
-        this.options.update(options => options.filter(o => o !== option));
+    function unregisterOption(option) {
+        options.update(current => current.filter(o => o !== option));
     }
     /**
      * Focus the select.
      * @internal
      */
-    focus() {
-        this.elementRef.nativeElement.focus();
+    function focus() {
+        elementRef.nativeElement.focus();
     }
     /** Handle keydown events for accessibility. */
-    handleKeydown(event) {
+    function handleKeydown(event) {
         switch (event.key) {
             case 'ArrowDown':
-                if (this.open()) {
-                    this.activateNextOption();
+                if (open()) {
+                    activateNextOption();
                 }
                 else {
-                    this.openDropdown();
+                    void openDropdown();
                 }
                 event.preventDefault();
                 break;
             case 'ArrowUp':
-                if (this.open()) {
-                    this.activatePreviousOption();
+                if (open()) {
+                    activatePreviousOption();
                 }
                 else {
-                    this.openDropdown();
-                    this.activeDescendantManager.last();
+                    void openDropdown();
+                    activeDescendantManagerInstance.last();
                 }
                 event.preventDefault();
                 break;
             case 'Home':
-                if (this.open()) {
-                    this.activeDescendantManager.first({ origin: 'keyboard' });
+                if (open()) {
+                    activeDescendantManagerInstance.first({ origin: 'keyboard' });
                 }
                 event.preventDefault();
                 break;
             case 'End':
-                if (this.open()) {
-                    this.activeDescendantManager.last({ origin: 'keyboard' });
+                if (open()) {
+                    activeDescendantManagerInstance.last({ origin: 'keyboard' });
                 }
                 event.preventDefault();
                 break;
             case 'Enter':
-                if (this.open()) {
-                    const activeId = this.activeDescendantManager.id();
+                if (open()) {
+                    const activeId = activeDescendantManagerInstance.id();
                     if (activeId) {
-                        const option = this.sortedOptions().find(opt => opt.id() === activeId);
+                        const option = sortedOptions().find(opt => opt.id() === activeId);
                         option?.select();
                     }
                 }
                 else {
-                    this.openDropdown();
+                    void openDropdown();
                 }
                 event.preventDefault();
                 break;
             case ' ':
-                this.toggleDropdown();
+                void toggleDropdown();
                 event.preventDefault();
                 break;
         }
     }
-    onBlur(event) {
+    function onBlur(event) {
         const relatedTarget = event.relatedTarget;
         // if the blur was caused by focus moving to the dropdown, don't close
-        if (relatedTarget && this.dropdown()?.elementRef.nativeElement.contains(relatedTarget)) {
+        if (relatedTarget && dropdown()?.elementRef.nativeElement.contains(relatedTarget)) {
             return;
         }
-        this.closeDropdown();
+        closeDropdown();
         event.preventDefault();
     }
-    scrollTo(index) {
-        const scrollToOption = this.state.scrollToOption();
-        if (scrollToOption) {
-            scrollToOption(index);
+    function scrollTo(index) {
+        const customScrollToOption = scrollToOption();
+        if (customScrollToOption) {
+            customScrollToOption(index);
             return;
         }
-        const option = this.getOptionAtIndex(index);
+        const option = getOptionAtIndex(index);
         if (option) {
             option.scrollIntoView();
         }
     }
-    getOptionAtIndex(index) {
+    function getOptionAtIndex(index) {
         // if the option has an index, use that to get the option because this is required for virtual scrolling scenarios
-        const optionIndex = this.options().findIndex(opt => opt.index?.() === index);
+        const optionIndex = options().findIndex(opt => opt.index?.() === index);
         if (optionIndex !== -1) {
-            return this.options()[optionIndex];
+            return options()[optionIndex];
+        }
+        return sortedOptions()[index];
+    }
+    return {
+        elementRef,
+        id,
+        value: deprecatedSetter(value, 'setValue', v => setValue(v)),
+        multiple,
+        disabled: deprecatedSetter(disabled, 'setDisabled', setDisabled),
+        compareWith,
+        placement,
+        container,
+        flip,
+        offset,
+        scrollToOption,
+        allOptions,
+        portal,
+        dropdown,
+        options,
+        overlay,
+        open,
+        sortedOptions,
+        activeDescendantManager: activeDescendantManagerInstance,
+        openDropdown,
+        closeDropdown,
+        onOverlayClose,
+        toggleDropdown,
+        selectOption,
+        deselectOption,
+        toggleOption,
+        isOptionSelected,
+        activateNextOption,
+        activatePreviousOption,
+        setValue,
+        setDisabled,
+        valueChange: valueChangeEmitter.asObservable(),
+        registerPortal,
+        registerDropdown,
+        registerOption,
+        unregisterOption,
+        focus,
+    };
+});
+function injectSelectState(options) {
+    return _injectSelectState(options);
+}
+
+const [NgpSelectDropdownStateToken, ngpSelectDropdown, _injectSelectDropdownState, provideSelectDropdownState,] = createPrimitive('NgpSelectDropdown', ({ id: _id = signal(uniqueId('ngp-select-dropdown')) }) => {
+    const elementRef = injectElementRef();
+    const selectState = injectSelectState();
+    const selectDimensions = observeResize(() => selectState().elementRef.nativeElement);
+    // Host bindings
+    attrBinding(elementRef, 'role', 'listbox');
+    attrBinding(elementRef, 'id', _id);
+    styleBinding(elementRef, 'left.px', () => selectState().overlay()?.position()?.x ?? null);
+    styleBinding(elementRef, 'top.px', () => selectState().overlay()?.position()?.y ?? null);
+    styleBinding(elementRef, '--ngp-select-transform-origin', () => selectState().overlay()?.transformOrigin() ?? null);
+    styleBinding(elementRef, '--ngp-select-available-width.px', () => selectState().overlay()?.availableWidth() ?? null);
+    styleBinding(elementRef, '--ngp-select-available-height.px', () => selectState().overlay()?.availableHeight() ?? null);
+    styleBinding(elementRef, '--ngp-select-width.px', () => selectDimensions().width ?? null);
+    const state = {
+        elementRef,
+        id: _id,
+    };
+    selectState().registerDropdown(state);
+    return state;
+});
+function injectSelectDropdownState(options) {
+    return _injectSelectDropdownState(options);
+}
+
+class NgpSelectDropdown {
+    constructor() {
+        /** The id of the dropdown. */
+        this.id = input(uniqueId('ngp-select-dropdown'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        ngpSelectDropdown({
+            id: this.id,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpSelectDropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpSelectDropdown, isStandalone: true, selector: "[ngpSelectDropdown]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideControlContainerIsolation()], exportAs: ["ngpSelectDropdown"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpSelectDropdown, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpSelectDropdown]',
+                    exportAs: 'ngpSelectDropdown',
+                    providers: [provideControlContainerIsolation()],
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+const [NgpSelectOptionStateToken, ngpSelectOption, _injectSelectOptionState, provideSelectOptionState,] = createPrimitive('NgpSelectOption', ({ id = signal(uniqueId('ngp-select-option')), value = signal(undefined), disabled = signal(false), index = signal(undefined), onActivated, }) => {
+    const elementRef = injectElementRef();
+    const selectState = injectSelectState();
+    ngpInteractions({
+        hover: true,
+        press: true,
+        disabled: disabled,
+    });
+    // Computed states
+    const active = computed(() => {
+        const idx = index();
+        if (idx !== undefined) {
+            return selectState().activeDescendantManager.index() === idx;
+        }
+        return selectState().activeDescendantManager.id() === id();
+    }, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    const selected = computed(() => {
+        const val = value();
+        const stateValue = selectState().value();
+        if (val === undefined) {
+            return false;
+        }
+        if (selectState().multiple()) {
+            return (Array.isArray(stateValue) && stateValue.some(v => selectState().compareWith()(val, v)));
+        }
+        if (stateValue === undefined) {
+            return false;
         }
-        return this.sortedOptions()[index];
+        return selectState().compareWith()(val, stateValue);
+    }, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    // Host bindings
+    attrBinding(elementRef, 'role', 'option');
+    attrBinding(elementRef, 'tabindex', -1);
+    attrBinding(elementRef, 'id', id);
+    attrBinding(elementRef, 'aria-selected', () => (selected() ? 'true' : undefined));
+    dataBinding(elementRef, 'data-selected', () => (selected() ? '' : null));
+    dataBinding(elementRef, 'data-active', () => (active() ? '' : null));
+    dataBinding(elementRef, 'data-disabled', () => (disabled() ? '' : null));
+    // Event listeners
+    listener(elementRef, 'click', () => select());
+    listener(elementRef, 'pointerenter', () => activateOnPointerEnter());
+    listener(elementRef, 'pointerleave', () => deactivateOnPointerLeave());
+    // Methods
+    function select() {
+        if (disabled()) {
+            return;
+        }
+        onActivated?.();
+        selectState().toggleOption(id());
+    }
+    function scrollIntoView() {
+        scrollIntoViewIfNeeded(elementRef.nativeElement);
+    }
+    function activateOnPointerEnter() {
+        const idx = index();
+        if (idx !== undefined) {
+            selectState().activeDescendantManager.activateByIndex(idx, {
+                scroll: false,
+                origin: 'pointer',
+            });
+            return;
+        }
+        selectState().activeDescendantManager.activateById(id(), {
+            scroll: false,
+            origin: 'pointer',
+        });
+    }
+    function deactivateOnPointerLeave() {
+        if (selectState().activeDescendantManager.id() === id()) {
+            selectState().activeDescendantManager.reset({ origin: 'pointer' });
+        }
+    }
+    const state = {
+        elementRef,
+        id,
+        value,
+        disabled,
+        index,
+        active,
+        selected,
+        select,
+        scrollIntoView,
+        activateOnPointerEnter,
+        deactivateOnPointerLeave,
+        emitActivated: () => onActivated?.(),
+    };
+    selectState().registerOption(state);
+    onDestroy(() => {
+        selectState().unregisterOption(state);
+    });
+    return state;
+});
+function injectSelectOptionState(options) {
+    return _injectSelectOptionState(options);
+}
+
+class NgpSelectOption {
+    constructor() {
+        /** Access the select state. */
+        this.selectState = injectSelectState();
+        /** The id of the option. */
+        this.id = input(uniqueId('ngp-select-option'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /** @required The value of the option. */
+        this.value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), alias: 'ngpSelectOptionValue' });
+        /** The disabled state of the option. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'ngpSelectOptionDisabled',
+            transform: booleanAttribute });
+        /** The index of the option in the list. */
+        this.index = input(undefined, { ...(ngDevMode ? { debugName: "index" } : /* istanbul ignore next */ {}), alias: 'ngpSelectOptionIndex' });
+        /**
+         * Event emitted when the option is activated via click or keyboard.
+         * This is useful for options without values that need custom behavior.
+         */
+        this.activated = output({
+            alias: 'ngpSelectOptionActivated',
+        });
+        /** Access the select option state */
+        this.state = ngpSelectOption({
+            id: this.id,
+            value: this.value,
+            disabled: this.disabled,
+            index: this.index,
+            onActivated: () => this.activated.emit(),
+        });
+    }
+    /**
+     * Select the option.
+     * @internal
+     */
+    select() {
+        this.state.select();
+    }
+    /**
+     * Scroll the option into view.
+     * @internal
+     */
+    scrollIntoView() {
+        this.state.scrollIntoView();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpSelectOption, isStandalone: true, selector: "[ngpSelectOption]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpSelectOptionValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpSelectOptionDisabled", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "ngpSelectOptionIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "ngpSelectOptionActivated" }, exportAs: ["ngpSelectOption"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpSelectOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpSelectOption]',
+                    exportAs: 'ngpSelectOption',
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectOptionValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectOptionDisabled", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectOptionIndex", required: false }] }], activated: [{ type: i0.Output, args: ["ngpSelectOptionActivated"] }] } });
+
+const [NgpSelectPortalStateToken, ngpSelectPortal, _injectSelectPortalState, provideSelectPortalState,] = createPrimitive('NgpSelectPortal', ({}) => {
+    const templateRef = inject(TemplateRef);
+    const viewContainerRef = inject(ViewContainerRef);
+    const injector = inject(Injector);
+    const selectState = injectSelectState();
+    const overlay = signal(null, ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
+    // Methods
+    async function show() {
+        if (!overlay()) {
+            createOverlayInstance();
+        }
+        return overlay()?.show();
+    }
+    function hide() {
+        overlay()?.hide();
+    }
+    function destroy() {
+        overlay()?.destroy();
+    }
+    function createOverlayInstance() {
+        const overlayConfig = {
+            content: templateRef,
+            viewContainerRef,
+            triggerElement: selectState().elementRef.nativeElement,
+            injector,
+            placement: selectState().placement,
+            offset: selectState().offset(),
+            flip: selectState().flip(),
+            container: selectState().container(),
+            closeOnOutsideClick: true,
+            closeOnEscape: true,
+            restoreFocus: false,
+            scrollBehaviour: 'reposition',
+            onClose: () => selectState().onOverlayClose(),
+        };
+        overlay.set(createOverlay(overlayConfig));
+    }
+    const state = {
+        overlay,
+        show,
+        hide,
+        destroy,
+    };
+    selectState().registerPortal(state);
+    return state;
+});
+function injectSelectPortalState(options) {
+    return _injectSelectPortalState(options);
+}
+
+class NgpSelectPortal {
+    constructor() {
+        this.state = ngpSelectPortal({});
+    }
+    /**
+     * Attach the portal.
+     * @internal
+     */
+    show() {
+        return this.state.show();
+    }
+    /**
+     * Detach the portal.
+     * @internal
+     */
+    detach() {
+        this.state.hide();
+    }
+    ngOnDestroy() {
+        this.state.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpSelectPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: NgpSelectPortal, isStandalone: true, selector: "[ngpSelectPortal]", exportAs: ["ngpSelectPortal"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpSelectPortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpSelectPortal]',
+                    exportAs: 'ngpSelectPortal',
+                }]
+        }] });
+
+const defaultSelectConfig = {
+    placement: 'bottom',
+    container: 'body',
+    flip: true,
+    offset: 0,
+};
+const NgpSelectConfigToken = new InjectionToken('NgpSelectConfigToken');
+/**
+ * Provide the default Select configuration
+ * @param config The Select configuration
+ * @returns The provider
+ */
+function provideSelectConfig(config) {
+    return [
+        {
+            provide: NgpSelectConfigToken,
+            useValue: { ...defaultSelectConfig, ...config },
+        },
+    ];
+}
+/**
+ * Inject the Select configuration
+ * @returns The global Select configuration
+ */
+function injectSelectConfig() {
+    return inject(NgpSelectConfigToken, { optional: true }) ?? defaultSelectConfig;
+}
+
+class NgpSelect {
+    constructor() {
+        /** Access the select configuration. */
+        this.config = injectSelectConfig();
+        /** The unique id of the select. */
+        this.id = input(uniqueId('ngp-select'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /** The value of the select. */
+        this.value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), alias: 'ngpSelectValue' });
+        /** Event emitted when the value changes. */
+        this.valueChange = output({
+            alias: 'ngpSelectValueChange',
+        });
+        /** Whether the select is multiple selection. */
+        this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), alias: 'ngpSelectMultiple',
+            transform: booleanAttribute });
+        /** Whether the select is disabled. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'ngpSelectDisabled',
+            transform: booleanAttribute });
+        /** Emit when the dropdown open state changes. */
+        this.openChange = output({
+            alias: 'ngpSelectOpenChange',
+        });
+        /** The comparator function used to compare options. */
+        this.compareWith = input(Object.is, { ...(ngDevMode ? { debugName: "compareWith" } : /* istanbul ignore next */ {}), alias: 'ngpSelectCompareWith' });
+        /** The position of the dropdown. */
+        this.placement = input(this.config.placement, { ...(ngDevMode ? { debugName: "placement" } : /* istanbul ignore next */ {}), alias: 'ngpSelectDropdownPlacement' });
+        /** The container for the dropdown. */
+        this.container = input(this.config.container, { ...(ngDevMode ? { debugName: "container" } : /* istanbul ignore next */ {}), alias: 'ngpSelectDropdownContainer' });
+        /** Whether the dropdown should flip when there is not enough space. Can be a boolean to enable/disable, or an object with padding and fallbackPlacements options. */
+        this.flip = input(this.config.flip, { ...(ngDevMode ? { debugName: "flip" } : /* istanbul ignore next */ {}), alias: 'ngpSelectDropdownFlip',
+            transform: coerceFlip });
+        /**
+         * Define the offset of the select dropdown relative to the trigger.
+         * Can be a number (applies to mainAxis) or an object with mainAxis, crossAxis, and alignmentAxis.
+         * @default 0
+         */
+        this.offset = input(this.config.offset, { ...(ngDevMode ? { debugName: "offset" } : /* istanbul ignore next */ {}), alias: 'ngpSelectDropdownOffset',
+            transform: coerceOffset });
+        /**
+         * A function that will scroll the active option into view. This can be overridden
+         * for cases such as virtual scrolling where we cannot scroll the option directly because
+         * it may not be rendered.
+         */
+        this.scrollToOption = input(undefined, { ...(ngDevMode ? { debugName: "scrollToOption" } : /* istanbul ignore next */ {}), alias: 'ngpSelectScrollToOption' });
+        /**
+         * Provide all the option values to the select. This is useful for virtual scrolling scenarios
+         * where not all options are rendered in the DOM. This is not an alternative to adding the options
+         * in the DOM, it is only to provide the select with the full list of options. This list should match
+         * the order of the options as they would appear in the DOM.
+         */
+        this.allOptions = input(undefined, { ...(ngDevMode ? { debugName: "allOptions" } : /* istanbul ignore next */ {}), alias: 'ngpSelectOptions' });
+        /** The state of the select. */
+        this.state = ngpSelect({
+            id: this.id,
+            value: this.value,
+            multiple: this.multiple,
+            disabled: this.disabled,
+            compareWith: this.compareWith,
+            placement: this.placement,
+            container: this.container,
+            flip: this.flip,
+            offset: this.offset,
+            scrollToOption: this.scrollToOption,
+            allOptions: this.allOptions,
+            onValueChange: value => this.valueChange.emit(value),
+            onOpenChange: open => this.openChange.emit(open),
+        });
+        /** @internal Access the select element. */
+        this.elementRef = this.state.elementRef;
+        /**
+         * Store the select portal.
+         * @internal
+         */
+        this.portal = this.state.portal;
+        /**
+         * Store the select dropdown.
+         * @internal
+         */
+        this.dropdown = this.state.dropdown;
+        /**
+         * Store the select options.
+         * @internal
+         */
+        this.options = this.state.options;
+        /**
+         * Access the overlay
+         * @internal
+         */
+        this.overlay = this.state.overlay;
+        /**
+         * The open state of the select.
+         * @internal
+         */
+        this.open = this.state.open;
+        /**
+         * The options sorted by their index or DOM position.
+         * @internal
+         */
+        this.sortedOptions = this.state.sortedOptions;
+        /**
+         * The active key descendant manager.
+         * @internal
+         */
+        this.activeDescendantManager = this.state.activeDescendantManager;
+    }
+    /**
+     * Open the dropdown.
+     * @internal
+     */
+    openDropdown() {
+        return this.state.openDropdown();
+    }
+    /**
+     * Close the dropdown.
+     * @internal
+     */
+    closeDropdown() {
+        return this.state.closeDropdown();
+    }
+    /**
+     * Toggle the dropdown.
+     * @internal
+     */
+    toggleDropdown() {
+        return this.state.toggleDropdown();
+    }
+    /**
+     * Select an option.
+     * @param id The id of the option to select.
+     * @internal
+     */
+    selectOption(id) {
+        this.state.selectOption(id);
+    }
+    /**
+     * Determine if an option is selected.
+     * @param option The option to check.
+     * @internal
+     */
+    isOptionSelected(option) {
+        return this.state.isOptionSelected(option);
+    }
+    /**
+     * Activate the next option in the list if there is one.
+     * If there is no option currently active, activate the selected option or the first option.
+     * @internal
+     */
+    activateNextOption() {
+        this.state.activateNextOption();
+    }
+    /**
+     * Activate the previous option in the list if there is one.
+     * @internal
+     */
+    activatePreviousOption() {
+        this.state.activatePreviousOption();
+    }
+    /**
+     * Focus the select.
+     * @internal
+     */
+    focus() {
+        this.state.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpSelect, isStandalone: true, selector: "[ngpSelect]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpSelectValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "ngpSelectMultiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpSelectDisabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "ngpSelectCompareWith", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpSelectDropdownPlacement", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpSelectDropdownContainer", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpSelectDropdownFlip", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpSelectDropdownOffset", isSignal: true, isRequired: false, transformFunction: null }, scrollToOption: { classPropertyName: "scrollToOption", publicName: "ngpSelectScrollToOption", isSignal: true, isRequired: false, transformFunction: null }, allOptions: { classPropertyName: "allOptions", publicName: "ngpSelectOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpSelectValueChange", openChange: "ngpSelectOpenChange" }, host: { attributes: { "role": "combobox" }, listeners: { "click": "toggleDropdown()", "keydown": "handleKeydown($event)", "blur": "onBlur($event)" }, properties: { "id": "state.id()", "attr.aria-expanded": "open()", "attr.aria-controls": "open() ? dropdown()?.id() : undefined", "attr.aria-activedescendant": "open() ? activeDescendantManager.id() : undefined", "attr.tabindex": "state.disabled() ? -1 : 0", "attr.data-open": "open() ? \"\" : undefined", "attr.data-disabled": "state.disabled() ? \"\" : undefined", "attr.data-multiple": "state.multiple() ? \"\" : undefined" } }, providers: [provideSelectState()], exportAs: ["ngpSelect"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpSelect, isStandalone: true, selector: "[ngpSelect]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpSelectValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "ngpSelectMultiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpSelectDisabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "ngpSelectCompareWith", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpSelectDropdownPlacement", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpSelectDropdownContainer", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpSelectDropdownFlip", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpSelectDropdownOffset", isSignal: true, isRequired: false, transformFunction: null }, scrollToOption: { classPropertyName: "scrollToOption", publicName: "ngpSelectScrollToOption", isSignal: true, isRequired: false, transformFunction: null }, allOptions: { classPropertyName: "allOptions", publicName: "ngpSelectOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpSelectValueChange", openChange: "ngpSelectOpenChange" }, providers: [provideSelectState()], exportAs: ["ngpSelect"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpSelect, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpSelect]',
                     exportAs: 'ngpSelect',
                     providers: [provideSelectState()],
-                    host: {
-                        role: 'combobox',
-                        '[id]': 'state.id()',
-                        '[attr.aria-expanded]': 'open()',
-                        '[attr.aria-controls]': 'open() ? dropdown()?.id() : undefined',
-                        '[attr.aria-activedescendant]': 'open() ? activeDescendantManager.id() : undefined',
-                        '[attr.tabindex]': 'state.disabled() ? -1 : 0',
-                        '[attr.data-open]': 'open() ? "" : undefined',
-                        '[attr.data-disabled]': 'state.disabled() ? "" : undefined',
-                        '[attr.data-multiple]': 'state.multiple() ? "" : undefined',
-                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["ngpSelectValueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectMultiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectDisabled", required: false }] }], openChange: [{ type: i0.Output, args: ["ngpSelectOpenChange"] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectCompareWith", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectDropdownPlacement", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectDropdownContainer", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectDropdownFlip", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectDropdownOffset", required: false }] }], scrollToOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectScrollToOption", required: false }] }], allOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectOptions", required: false }] }], toggleDropdown: [{
-                type: HostListener,
-                args: ['click']
-            }], handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], onBlur: [{
-                type: HostListener,
-                args: ['blur', ['$event']]
-            }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["ngpSelectValueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectMultiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectDisabled", required: false }] }], openChange: [{ type: i0.Output, args: ["ngpSelectOpenChange"] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectCompareWith", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectDropdownPlacement", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectDropdownContainer", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectDropdownFlip", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectDropdownOffset", required: false }] }], scrollToOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectScrollToOption", required: false }] }], allOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectOptions", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgpNativeSelect, NgpSelect, NgpSelectDropdown, NgpSelectOption, NgpSelectPortal, injectNativeSelectState, injectSelectConfig, injectSelectState, provideNativeSelectState, provideSelectConfig, provideSelectState };
+export { NgpNativeSelect, NgpSelect, NgpSelectDropdown, NgpSelectDropdownStateToken, NgpSelectOption, NgpSelectOptionStateToken, NgpSelectPortal, NgpSelectPortalStateToken, NgpSelectStateToken, injectNativeSelectState, injectSelectConfig, injectSelectDropdownState, injectSelectOptionState, injectSelectPortalState, injectSelectState, ngpSelect, ngpSelectDropdown, ngpSelectOption, ngpSelectPortal, provideNativeSelectState, provideSelectConfig, provideSelectDropdownState, provideSelectOptionState, provideSelectPortalState, provideSelectState };
 //# sourceMappingURL=ng-primitives-select.mjs.map