ng-primitives 0.72.0 → 0.73.1

package/fesm2022/ng-primitives-select.mjs

@@ -1,47 +1,49 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, Directive } from '@angular/core';
+import { input, booleanAttribute, Directive, computed, HostListener, inject, ViewContainerRef, TemplateRef, Injector, signal, InjectionToken, output, afterRenderEffect } from '@angular/core';
 import { setupFormControl } from 'ng-primitives/form-field';
-import { setupInteractions } from 'ng-primitives/internal';
+import { setupInteractions, observeResize, injectElementRef } from 'ng-primitives/internal';
 import { uniqueId } from 'ng-primitives/utils';
 import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import { createOverlay } from 'ng-primitives/portal';
+import { activeDescendantManager } from 'ng-primitives/a11y';
 
 /**
- * The state token  for the Select primitive.
+ * The state token for the Select primitive.
  */
-const NgpSelectStateToken = createStateToken('Select');
+const NgpNativeSelectStateToken = createStateToken('Select');
 /**
  * Provides the Select state.
  */
-const provideSelectState = createStateProvider(NgpSelectStateToken);
+const provideNativeSelectState = createStateProvider(NgpNativeSelectStateToken);
 /**
  * Injects the Select state.
  */
-const injectSelectState = createStateInjector(NgpSelectStateToken);
+const injectNativeSelectState = createStateInjector(NgpNativeSelectStateToken);
 /**
  * The Select state registration function.
  */
-const selectState = createState(NgpSelectStateToken);
+const selectNativeSelectState = createState(NgpNativeSelectStateToken);
 
 /**
- * Apply the `ngpSelect` directive to a select element that you want to enhance.
+ * Apply the `ngpNativeSelect` directive to a select element that you want to enhance.
  */
-class NgpSelect {
+class NgpNativeSelect {
     constructor() {
         /**
          * The id of the select. If not provided, a unique id will be generated.
          */
-        this.id = input(uniqueId('ngp-select'));
+        this.id = input(uniqueId('ngp-native-select'));
         /**
          * Whether the select is disabled.
          */
         this.disabled = input(false, {
-            alias: 'ngpSelectDisabled',
+            alias: 'ngpNativeSelectDisabled',
             transform: booleanAttribute,
         });
         /**
          * The select state.
          */
-        this.state = selectState(this);
+        this.state = selectNativeSelectState(this);
         setupInteractions({
             hover: true,
             press: true,
@@ -51,25 +53,695 @@ class NgpSelect {
         });
         setupFormControl({ id: this.state.id, disabled: this.state.disabled });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpNativeSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpNativeSelect, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'select[ngpNativeSelect]',
+                    exportAs: 'ngpNativeSelect',
+                    providers: [provideNativeSelectState()],
+                    host: {
+                        '[attr.disabled]': 'state.disabled() || null',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * 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'));
+        this.state().registerDropdown(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSelectDropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", 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-width.px": "selectDimensions().width" } }, exportAs: ["ngpSelectDropdown"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", 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-width.px]': 'selectDimensions().width',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+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'));
+        /** @required The value of the option. */
+        this.value = input(undefined, {
+            alias: 'ngpSelectOptionValue',
+        });
+        /** The disabled state of the option. */
+        this.disabled = input(false, {
+            alias: 'ngpSelectOptionDisabled',
+            transform: booleanAttribute,
+        });
+        /**
+         * Whether this option is the active descendant.
+         * @internal
+         */
+        this.active = computed(() => this.state().activeDescendantManager.activeDescendant() === this.id());
+        /** Whether this option is selected. */
+        this.selected = computed(() => {
+            const value = this.value();
+            if (!value) {
+                return false;
+            }
+            if (this.state().multiple()) {
+                return (Array.isArray(value) && value.some(v => this.state().compareWith()(v, this.state().value())));
+            }
+            return this.state().compareWith()(value, this.state().value());
+        });
+        this.state().registerOption(this);
+        setupInteractions({
+            hover: true,
+            press: true,
+            disabled: this.disabled,
+        });
+    }
+    ngOnInit() {
+        if (this.value() === undefined) {
+            throw new Error('ngpSelectOption: The value input is required. Please provide a value for the option.');
+        }
+    }
+    ngOnDestroy() {
+        this.state().unregisterOption(this);
+    }
+    /**
+     * Select the option.
+     * @internal
+     */
+    select() {
+        if (this.disabled()) {
+            return;
+        }
+        this.state().toggleOption(this);
+    }
+    /**
+     * Scroll the option into view.
+     * @internal
+     */
+    scrollIntoView() {
+        this.elementRef.nativeElement.scrollIntoView({ block: 'nearest' });
+    }
+    /**
+     * Whenever the pointer enters the option, activate it.
+     * @internal
+     */
+    onPointerEnter() {
+        this.state().activeDescendantManager.activate(this);
+    }
+    /**
+     * Whenever the pointer leaves the option, deactivate it.
+     * @internal
+     */
+    onPointerLeave() {
+        this.state().activeDescendantManager.activate(undefined);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", 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 } }, 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: "19.2.11", 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: { 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);
+        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(),
+            closeOnOutsideClick: true,
+            closeOnEscape: true,
+            restoreFocus: false,
+            scrollBehaviour: 'reposition',
+            container: this.state().container(),
+        };
+        this.overlay.set(createOverlay(config));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSelectPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpSelectPortal, isStandalone: true, selector: "[ngpSelectPortal]", exportAs: ["ngpSelectPortal"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSelectPortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpSelectPortal]',
+                    exportAs: 'ngpSelectPortal',
+                }]
+        }], ctorParameters: () => [] });
+
+const defaultSelectConfig = {
+    placement: 'bottom',
+    container: null,
+};
+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();
+        /** @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'));
+        /** The value of the select. */
+        this.value = input(undefined, {
+            alias: 'ngpSelectValue',
+        });
+        /** Event emitted when the value changes. */
+        this.valueChange = output({
+            alias: 'ngpSelectValueChange',
+        });
+        /** Whether the select is multiple selection. */
+        this.multiple = input(false, {
+            alias: 'ngpSelectMultiple',
+            transform: booleanAttribute,
+        });
+        /** Whether the select is disabled. */
+        this.disabled = input(false, {
+            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, {
+            alias: 'ngpSelectCompareWith',
+        });
+        /** The position of the dropdown. */
+        this.placement = input(this.config.placement, {
+            alias: 'ngpSelectDropdownPlacement',
+        });
+        /** The container for the dropdown. */
+        this.container = input(this.config.container, {
+            alias: 'ngpSelectDropdownContainer',
+        });
+        /**
+         * Store the select portal.
+         * @internal
+         */
+        this.portal = signal(undefined);
+        /**
+         * Store the select dropdown.
+         * @internal
+         */
+        this.dropdown = signal(undefined);
+        /**
+         * Store the select options.
+         * @internal
+         */
+        this.options = signal([]);
+        /**
+         * Access the overlay
+         * @internal
+         */
+        this.overlay = computed(() => this.portal()?.overlay());
+        /**
+         * The open state of the select.
+         * @internal
+         */
+        this.open = computed(() => this.overlay()?.isOpen() ?? false);
+        /**
+         * 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()),
+            items: this.options,
+        });
+        /** The state of the select. */
+        this.state = selectState(this);
+        setupInteractions({
+            focus: true,
+            focusWithin: true,
+            hover: true,
+            press: true,
+            disabled: this.state.disabled,
+        });
+        setupFormControl({ id: this.state.id, disabled: this.state.disabled });
+        // any time the active descendant changes, ensure we scroll it into view
+        // perform after next render to ensure the DOM is updated
+        // e.g. the dropdown is open before the option is scrolled into view
+        afterRenderEffect({
+            write: () => {
+                const isPositioned = this.portal()?.overlay()?.isPositioned() ?? false;
+                const activeItem = this.activeDescendantManager.activeItem();
+                if (!isPositioned || !activeItem) {
+                    return;
+                }
+                this.activeDescendantManager.activeItem()?.scrollIntoView?.();
+            },
+        });
+    }
+    /**
+     * Open the dropdown.
+     * @internal
+     */
+    async openDropdown() {
+        if (this.state.disabled() || this.open()) {
+            return;
+        }
+        this.openChange.emit(true);
+        await this.portal()?.show();
+        // if there is a selected option(s), set the active descendant to the first selected option
+        const selectedOption = this.options().find(option => this.isOptionSelected(option));
+        // if there is no selected option, set the active descendant to the first option
+        const targetOption = selectedOption ?? this.options()[0];
+        // if there is no target option, do nothing
+        if (!targetOption) {
+            return;
+        }
+        // activate the selected option or the first option
+        this.activeDescendantManager.activate(targetOption);
+    }
+    /**
+     * Close the dropdown.
+     * @internal
+     */
+    closeDropdown() {
+        if (!this.open()) {
+            return;
+        }
+        this.openChange.emit(false);
+        this.portal()?.detach();
+        // clear the active descendant
+        this.activeDescendantManager.reset();
+    }
+    /**
+     * Toggle the dropdown.
+     * @internal
+     */
+    async toggleDropdown() {
+        if (this.open()) {
+            this.closeDropdown();
+        }
+        else {
+            await this.openDropdown();
+        }
+    }
+    /**
+     * Select an option.
+     * @param option The option to select.
+     * @internal
+     */
+    selectOption(option) {
+        if (this.state.disabled()) {
+            return;
+        }
+        if (!option) {
+            this.state.value.set(undefined);
+            this.closeDropdown();
+            return;
+        }
+        if (this.state.multiple()) {
+            // if the option is already selected, do nothing
+            if (this.isOptionSelected(option)) {
+                return;
+            }
+            const value = [...(this.state.value() ?? []), option.value()];
+            // add the option to the value
+            this.state.value.set(value);
+            this.valueChange.emit(value);
+        }
+        else {
+            this.state.value.set(option.value());
+            this.valueChange.emit(option.value());
+            // close the dropdown on single selection
+            this.closeDropdown();
+        }
+    }
+    /**
+     * Deselect an option.
+     * @param option The option to deselect.
+     * @internal
+     */
+    deselectOption(option) {
+        // 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(option) || !this.state.multiple()) {
+            return;
+        }
+        const values = this.state.value() ?? [];
+        const newValue = values.filter(v => !this.state.compareWith()(v, option.value()));
+        // remove the option from the value
+        this.state.value.set(newValue);
+        this.valueChange.emit(newValue);
+    }
+    /**
+     * Toggle the selection of an option.
+     * @param option The option to toggle.
+     * @internal
+     */
+    toggleOption(option) {
+        if (this.state.disabled()) {
+            return;
+        }
+        // if the state is single selection, we don't allow toggling
+        if (!this.state.multiple()) {
+            // always select the option in single selection mode even if it is already selected so that we update the input
+            this.selectOption(option);
+            return;
+        }
+        // otherwise toggle the option
+        if (this.isOptionSelected(option)) {
+            this.deselectOption(option);
+        }
+        else {
+            this.selectOption(option);
+        }
+    }
+    /**
+     * Determine if an option is selected.
+     * @param option The option to check.
+     * @internal
+     */
+    isOptionSelected(option) {
+        if (this.state.disabled()) {
+            return false;
+        }
+        const value = this.state.value();
+        if (!value) {
+            return false;
+        }
+        if (this.state.multiple()) {
+            return value && value.some(v => this.state.compareWith()(option.value(), v));
+        }
+        return this.state.compareWith()(option.value(), value);
+    }
+    /**
+     * 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()) {
+            return;
+        }
+        const options = this.options();
+        // if there are no options, do nothing
+        if (options.length === 0) {
+            return;
+        }
+        // if there is no active option, activate the first option
+        if (!this.activeDescendantManager.activeItem()) {
+            const selectedOption = options.find(option => this.isOptionSelected(option));
+            // if there is a selected option(s), set the active descendant to the first selected option
+            const targetOption = selectedOption ?? options[0];
+            this.activeDescendantManager.activate(targetOption);
+            return;
+        }
+        // otherwise activate the next option
+        this.activeDescendantManager.next();
+    }
+    /**
+     * Activate the previous option in the list if there is one.
+     * @internal
+     */
+    activatePreviousOption() {
+        if (this.state.disabled()) {
+            return;
+        }
+        const options = this.options();
+        // if there are no options, do nothing
+        if (options.length === 0) {
+            return;
+        }
+        // if there is no active option, activate the last option
+        if (!this.activeDescendantManager.activeItem()) {
+            const selectedOption = options.find(option => this.isOptionSelected(option));
+            // if there is a selected option(s), set the active descendant to the first selected option
+            const targetOption = selectedOption ?? options[options.length - 1];
+            this.activeDescendantManager.activate(targetOption);
+            return;
+        }
+        // otherwise activate the previous option
+        this.activeDescendantManager.previous();
+    }
+    /**
+     * Register the dropdown portal with the select.
+     * @param portal The dropdown portal.
+     * @internal
+     */
+    registerPortal(portal) {
+        this.portal.set(portal);
+    }
+    /**
+     * Register the dropdown with the select.
+     * @param dropdown The dropdown to register.
+     * @internal
+     */
+    registerDropdown(dropdown) {
+        this.dropdown.set(dropdown);
+    }
+    /**
+     * Register an option with the select.
+     * @param option The option to register.
+     * @internal
+     */
+    registerOption(option) {
+        this.options.update(options => [...options, 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));
+    }
+    /**
+     * Focus the select.
+     * @internal
+     */
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    /** Handle keydown events for accessibility. */
+    handleKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                if (this.open()) {
+                    this.activateNextOption();
+                }
+                else {
+                    this.openDropdown();
+                }
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+                if (this.open()) {
+                    this.activatePreviousOption();
+                }
+                else {
+                    this.openDropdown();
+                    this.activeDescendantManager.last();
+                }
+                event.preventDefault();
+                break;
+            case 'Home':
+                if (this.open()) {
+                    this.activeDescendantManager.first();
+                }
+                event.preventDefault();
+                break;
+            case 'End':
+                if (this.open()) {
+                    this.activeDescendantManager.last();
+                }
+                event.preventDefault();
+                break;
+            case 'Enter':
+                if (this.open()) {
+                    this.selectOption(this.activeDescendantManager.activeItem());
+                }
+                else {
+                    this.openDropdown();
+                }
+                event.preventDefault();
+                break;
+            case ' ':
+                this.toggleDropdown();
+                event.preventDefault();
+                break;
+        }
+    }
+    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)) {
+            return;
+        }
+        this.closeDropdown();
+        event.preventDefault();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpSelect, isStandalone: true, selector: "select[ngpSelect]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpSelectDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()", "attr.disabled": "disabled() || null" } }, providers: [provideSelectState()], exportAs: ["ngpSelect"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", 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 } }, 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": "state.open()", "attr.aria-controls": "state.open() ? state.dropdown()?.id() : undefined", "attr.aria-activedescendant": "state.open() ? activeDescendantManager.activeDescendant() : undefined", "attr.tabindex": "state.disabled() ? -1 : 0", "attr.data-open": "state.open() ? \"\" : undefined", "attr.data-disabled": "state.disabled() ? \"\" : undefined", "attr.data-multiple": "state.multiple() ? \"\" : undefined" } }, providers: [provideSelectState()], exportAs: ["ngpSelect"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSelect, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'select[ngpSelect]',
+                    selector: '[ngpSelect]',
                     exportAs: 'ngpSelect',
                     providers: [provideSelectState()],
                     host: {
-                        '[id]': 'id()',
-                        '[attr.disabled]': 'disabled() || null',
+                        role: 'combobox',
+                        '[id]': 'state.id()',
+                        '[attr.aria-expanded]': 'state.open()',
+                        '[attr.aria-controls]': 'state.open() ? state.dropdown()?.id() : undefined',
+                        '[attr.aria-activedescendant]': 'state.open() ? activeDescendantManager.activeDescendant() : undefined',
+                        '[attr.tabindex]': 'state.disabled() ? -1 : 0',
+                        '[attr.data-open]': 'state.open() ? "" : undefined',
+                        '[attr.data-disabled]': 'state.disabled() ? "" : undefined',
+                        '[attr.data-multiple]': 'state.multiple() ? "" : undefined',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { toggleDropdown: [{
+                type: HostListener,
+                args: ['click']
+            }], handleKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur', ['$event']]
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgpSelect, injectSelectState, provideSelectState };
+export { NgpNativeSelect, NgpSelect, NgpSelectDropdown, NgpSelectOption, NgpSelectPortal, injectNativeSelectState, injectSelectState, provideNativeSelectState, provideSelectState };
 //# sourceMappingURL=ng-primitives-select.mjs.map