ng-primitives 0.43.1 → 0.44.0

package/fesm2022/ng-primitives-combobox.mjs

@@ -0,0 +1,807 @@
+import * as i0 from '@angular/core';
+import { input, Directive, computed, HostListener, booleanAttribute, inject, TemplateRef, ViewContainerRef, Injector, signal, effect, output, afterNextRender } from '@angular/core';
+import { injectElementRef, setupInteractions, explicitEffect } from 'ng-primitives/internal';
+import { uniqueId } from 'ng-primitives/utils';
+import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import { DOCUMENT } from '@angular/common';
+import { flip, autoUpdate, computePosition } from '@floating-ui/dom';
+import { createPortal } from 'ng-primitives/portal';
+import { observeResize } from 'ng-primitives/resize';
+import { activeDescendantManager } from 'ng-primitives/a11y';
+
+/**
+ * The state token  for the Combobox primitive.
+ */
+const NgpComboboxStateToken = createStateToken('Combobox');
+/**
+ * Provides the Combobox state.
+ */
+const provideComboboxState = createStateProvider(NgpComboboxStateToken);
+/**
+ * Injects the Combobox state.
+ */
+const injectComboboxState = createStateInjector(NgpComboboxStateToken);
+/**
+ * The Combobox state registration function.
+ */
+const comboboxState = createState(NgpComboboxStateToken);
+
+class NgpComboboxDropdown {
+    constructor() {
+        /** Access the combobox state. */
+        this.state = injectComboboxState();
+        /**
+         * Access the element reference.
+         * @internal
+         */
+        this.elementRef = injectElementRef();
+        /** The id of the dropdown. */
+        this.id = input(uniqueId('ngp-combobox-dropdown'));
+        this.state().registerDropdown(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxDropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpComboboxDropdown, isStandalone: true, selector: "[ngpComboboxDropdown]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "id": "id()" } }, exportAs: ["ngpComboboxDropdown"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxDropdown, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpComboboxDropdown]',
+                    exportAs: 'ngpComboboxDropdown',
+                    host: {
+                        role: 'listbox',
+                        '[id]': 'id()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+class NgpComboboxInput {
+    constructor() {
+        /** Access the combobox state. */
+        this.state = injectComboboxState();
+        /**
+         * Access the element reference.
+         * @internal
+         */
+        this.elementRef = injectElementRef();
+        /** The id of the input. */
+        this.id = input(uniqueId('ngp-combobox-input'));
+        /**
+         * Extract the string representation of the value.
+         */
+        this.displayWith = input((value) => {
+            if (typeof value === 'string') {
+                return value;
+            }
+            throw new Error('You must provide a displayWith function for non-string values');
+        });
+        /** The id of the dropdown. */
+        this.dropdownId = computed(() => this.state().dropdown()?.id());
+        /** The id of the active descendant. */
+        this.activeDescendant = computed(() => this.state().activeDescendantManager.activeDescendant());
+        /** Determine if the pointer was used to focus the input. */
+        this.pointerFocused = false;
+        setupInteractions({
+            focus: true,
+            hover: true,
+            press: true,
+            disabled: this.state().disabled,
+        });
+        this.state().registerInput(this);
+    }
+    /** Handle keydown events for accessibility. */
+    handleKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                if (this.state().open()) {
+                    this.state().activateNextOption();
+                }
+                else {
+                    this.state().openDropdown();
+                }
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+                if (this.state().open()) {
+                    this.state().activatePreviousOption();
+                }
+                else {
+                    this.state().openDropdown();
+                    this.state().activeDescendantManager.last();
+                }
+                event.preventDefault();
+                break;
+            case 'Home':
+                if (this.state().open()) {
+                    this.state().activeDescendantManager.first();
+                }
+                event.preventDefault();
+                break;
+            case 'End':
+                if (this.state().open()) {
+                    this.state().activeDescendantManager.last();
+                }
+                event.preventDefault();
+                break;
+            case 'Enter':
+                if (this.state().open()) {
+                    this.state().selectOption(this.state().activeDescendantManager.activeItem());
+                }
+                event.preventDefault();
+                break;
+            case 'Escape':
+                this.state().closeDropdown();
+                event.preventDefault();
+                break;
+            default:
+                // Ignore keys with length > 1 (e.g., 'Shift', 'ArrowLeft', 'Enter', etc.)
+                // Filter out control/meta key combos (e.g., Ctrl+C)
+                if (event.key.length > 1 || event.ctrlKey || event.metaKey || event.altKey) {
+                    return;
+                }
+                // if this was a character key, we want to open the dropdown
+                this.state().openDropdown();
+        }
+    }
+    closeDropdown(event) {
+        const relatedTarget = event.relatedTarget;
+        // if the blur was caused by focus moving to the dropdown, don't close
+        if (relatedTarget &&
+            this.state().dropdown()?.elementRef.nativeElement.contains(relatedTarget)) {
+            return;
+        }
+        // if the blur was caused by focus moving to the button, don't close
+        if (relatedTarget && this.state().button()?.elementRef.nativeElement.contains(relatedTarget)) {
+            return;
+        }
+        this.state().closeDropdown();
+        event.preventDefault();
+    }
+    /**
+     * Focus the input field
+     * @internal
+     */
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    highlightText() {
+        if (this.pointerFocused) {
+            this.pointerFocused = false;
+            return;
+        }
+        // highlight the text in the input
+        this.elementRef.nativeElement.setSelectionRange(0, this.elementRef.nativeElement.value.length);
+    }
+    handlePointerDown() {
+        this.pointerFocused = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpComboboxInput, isStandalone: true, selector: "input[ngpComboboxInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "type": "text", "autocomplete": "off", "autocorrect": "off", "spellcheck": "false", "aria-haspopup": "listbox", "aria-autocomplete": "list" }, listeners: { "keydown": "handleKeydown($event)", "blur": "closeDropdown($event)", "focus": "highlightText($event)", "pointerdown": "handlePointerDown($event)" }, properties: { "id": "id()", "attr.aria-controls": "state().open() ? dropdownId() : undefined", "attr.aria-expanded": "state().open()", "attr.data-open": "state().open() ? \"\" : undefined", "attr.data-disabled": "state().disabled() ? \"\" : undefined", "attr.data-multiple": "state().multiple() ? \"\" : undefined", "attr.aria-activedescendant": "activeDescendant()", "disabled": "state().disabled()" } }, exportAs: ["ngpComboboxInput"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[ngpComboboxInput]',
+                    exportAs: 'ngpComboboxInput',
+                    host: {
+                        role: 'combobox',
+                        type: 'text',
+                        autocomplete: 'off',
+                        autocorrect: 'off',
+                        spellcheck: 'false',
+                        'aria-haspopup': 'listbox',
+                        'aria-autocomplete': 'list',
+                        '[id]': 'id()',
+                        '[attr.aria-controls]': 'state().open() ? dropdownId() : undefined',
+                        '[attr.aria-expanded]': 'state().open()',
+                        '[attr.data-open]': 'state().open() ? "" : undefined',
+                        '[attr.data-disabled]': 'state().disabled() ? "" : undefined',
+                        '[attr.data-multiple]': 'state().multiple() ? "" : undefined',
+                        '[attr.aria-activedescendant]': 'activeDescendant()',
+                        '[disabled]': 'state().disabled()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { handleKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], closeDropdown: [{
+                type: HostListener,
+                args: ['blur', ['$event']]
+            }], highlightText: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
+            }], handlePointerDown: [{
+                type: HostListener,
+                args: ['pointerdown', ['$event']]
+            }] } });
+
+class NgpComboboxOption {
+    constructor() {
+        /** Access the combobox state. */
+        this.state = injectComboboxState();
+        /**
+         * The element reference of the option.
+         * @internal
+         */
+        this.elementRef = injectElementRef();
+        /** The id of the option. */
+        this.id = input(uniqueId('ngp-combobox-option'));
+        /** The value of the option. */
+        this.value = input(undefined, {
+            alias: 'ngpComboboxOptionValue',
+        });
+        /** The disabled state of the option. */
+        this.disabled = input(false, {
+            alias: 'ngpComboboxOptionDisabled',
+            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('ngpComboboxOption: 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: NgpComboboxOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpComboboxOption, isStandalone: true, selector: "[ngpComboboxOption]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpComboboxOptionValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpComboboxOptionDisabled", 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: ["ngpComboboxOption"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpComboboxOption]',
+                    exportAs: 'ngpComboboxOption',
+                    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 NgpComboboxPortal {
+    constructor() {
+        /** Access the combobox state. */
+        this.state = injectComboboxState();
+        /** Access the template reference. */
+        this.templateRef = inject(TemplateRef);
+        /** Access the view container reference. */
+        this.viewContainerRef = inject(ViewContainerRef);
+        /** Access the injector. */
+        this.injector = inject(Injector);
+        /** Access the document. */
+        this.document = inject(DOCUMENT);
+        /**
+         * Store the embedded view reference.
+         * @internal
+         */
+        this.viewRef = signal(null);
+        /** Store the dispose function. */
+        this.dispose = null;
+        /** The position of the dropdown. */
+        this.position = signal({ x: 0, y: 0 });
+        /** The dimensions of the combobox. */
+        this.comboboxDimensions = observeResize(() => this.state().elementRef.nativeElement);
+        /** The dimensions of the combobox. */
+        this.inputDimensions = observeResize(() => this.state().input()?.elementRef.nativeElement);
+        /** Store the combobox button dimensions. */
+        this.buttonDimensions = observeResize(() => this.state().button()?.elementRef.nativeElement);
+        this.state().registerPortal(this);
+        effect(() => {
+            const dropdownElement = this.viewRef()?.getElements()[0];
+            if (!dropdownElement) {
+                return;
+            }
+            const position = this.position();
+            const comboboxWidth = this.comboboxDimensions().width;
+            const inputWidth = this.inputDimensions().width;
+            const buttonWidth = this.buttonDimensions().width;
+            if (!dropdownElement) {
+                return;
+            }
+            const styles = {
+                position: 'absolute',
+                left: `${position.x}px`,
+                top: `${position.y}px`,
+                '--ngp-combobox-width': `${comboboxWidth}px`,
+                '--ngp-combobox-input-width': `${inputWidth}px`,
+                '--ngp-combobox-button-width': `${buttonWidth}px`,
+            };
+            for (const [key, value] of Object.entries(styles)) {
+                dropdownElement.style.setProperty(key, value);
+            }
+        });
+    }
+    /** Cleanup the portal. */
+    ngOnDestroy() {
+        this.detach();
+        this.dispose?.();
+    }
+    /**
+     * Attach the portal.
+     * @internal
+     */
+    attach() {
+        const viewRef = createPortal(this.templateRef, this.viewContainerRef, this.injector);
+        viewRef.attach(this.document.body);
+        viewRef.detectChanges();
+        this.viewRef.set(viewRef);
+        const dropdownElement = this.viewRef()?.getElements()[0];
+        if (!dropdownElement) {
+            throw new Error('Dropdown element not found');
+        }
+        let placement;
+        const middleware = [];
+        switch (this.state().dropdownPosition()) {
+            case 'top':
+                placement = 'top-start';
+                break;
+            case 'bottom':
+                placement = 'bottom-start';
+                break;
+            case 'auto':
+                placement = 'bottom-start';
+                middleware.push(flip({ fallbackPlacements: ['top-start'] }));
+                break;
+        }
+        this.dispose = autoUpdate(this.state().elementRef.nativeElement, dropdownElement, async () => {
+            const position = await computePosition(this.state().elementRef.nativeElement, dropdownElement, { placement, middleware, strategy: 'absolute' });
+            this.position.set({ x: position.x, y: position.y });
+        });
+    }
+    /**
+     * Detach the portal.
+     * @internal
+     */
+    async detach() {
+        await this.viewRef()?.detach();
+        this.viewRef.set(null);
+        this.dispose?.();
+        this.dispose = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpComboboxPortal, isStandalone: true, selector: "[ngpComboboxPortal]", exportAs: ["ngpComboboxPortal"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxPortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpComboboxPortal]',
+                    exportAs: 'ngpComboboxPortal',
+                }]
+        }], ctorParameters: () => [] });
+
+class NgpCombobox {
+    constructor() {
+        /** @internal Access the combobox element. */
+        this.elementRef = injectElementRef();
+        /** Access the injector. */
+        this.injector = inject(Injector);
+        /** The value of the combobox. */
+        this.value = input(undefined, {
+            alias: 'ngpComboboxValue',
+        });
+        /** Event emitted when the value changes. */
+        this.valueChange = output({
+            alias: 'ngpComboboxValueChange',
+        });
+        /** Whether the combobox is multiple selection. */
+        this.multiple = input(false, {
+            alias: 'ngpComboboxMultiple',
+            transform: booleanAttribute,
+        });
+        /** Whether the combobox is disabled. */
+        this.disabled = input(false, {
+            alias: 'ngpComboboxDisabled',
+            transform: booleanAttribute,
+        });
+        /** Emit when the dropdown open state changes. */
+        this.openChange = output({
+            alias: 'ngpComboboxOpenChange',
+        });
+        /** The comparator function used to compare options. */
+        this.compareWith = input(Object.is, {
+            alias: 'ngpComboboxCompareWith',
+        });
+        /** The position of the dropdown. */
+        this.dropdownPosition = input('bottom', {
+            alias: 'ngpComboboxDropdownPosition',
+        });
+        /**
+         * Store the combobox input
+         * @internal
+         */
+        this.input = signal(undefined);
+        /**
+         * Store the combobox button.
+         * @internal
+         */
+        this.button = signal(undefined);
+        /**
+         * Store the combobox portal.
+         * @internal
+         */
+        this.portal = signal(undefined);
+        /**
+         * Store the combobox dropdown.
+         * @internal
+         */
+        this.dropdown = signal(undefined);
+        /**
+         * Store the combobox options.
+         * @internal
+         */
+        this.options = signal([]);
+        /**
+         * The open state of the combobox.
+         * @internal
+         */
+        this.open = computed(() => this.portal()?.viewRef() !== null);
+        /**
+         * 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 combobox. */
+        this.state = comboboxState(this);
+        // any time the active descendant changes, ensure we scroll it into view
+        explicitEffect([this.activeDescendantManager.activeItem], ([option]) => 
+        // perform after next render to ensure the DOM is updated
+        // e.g. the dropdown is open before the option is scrolled into view
+        afterNextRender({ write: () => option?.scrollIntoView?.() }, { injector: this.injector }));
+    }
+    /**
+     * Open the dropdown.
+     * @internal
+     */
+    openDropdown() {
+        if (this.state.disabled() || this.open()) {
+            return;
+        }
+        this.portal()?.attach();
+        // 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
+     */
+    toggleDropdown() {
+        if (this.open()) {
+            this.closeDropdown();
+        }
+        else {
+            this.openDropdown();
+        }
+    }
+    /**
+     * Select an option.
+     * @param option The option to select.
+     * @internal
+     */
+    selectOption(option) {
+        if (this.state.disabled() || this.isOptionSelected(option)) {
+            return;
+        }
+        if (this.state.multiple()) {
+            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 combobox is disabled or the option is not selected, do nothing
+        // if the combobox 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 (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 combobox.
+     * @param portal The dropdown portal.
+     * @internal
+     */
+    registerPortal(portal) {
+        this.portal.set(portal);
+    }
+    /**
+     * Register the combobox input with the combobox.
+     * @param input The combobox input.
+     * @internal
+     */
+    registerInput(input) {
+        this.input.set(input);
+    }
+    /**
+     * Register the combobox button with the combobox.
+     * @param button The combobox button.
+     * @internal
+     */
+    registerButton(button) {
+        this.button.set(button);
+    }
+    /**
+     * Register the dropdown with the combobox.
+     * @param dropdown The dropdown to register.
+     * @internal
+     */
+    registerDropdown(dropdown) {
+        this.dropdown.set(dropdown);
+    }
+    /**
+     * Register an option with the combobox.
+     * @param option The option to register.
+     * @internal
+     */
+    registerOption(option) {
+        this.options.update(options => [...options, option]);
+    }
+    /**
+     * Unregister an option from the combobox.
+     * @param option The option to unregister.
+     * @internal
+     */
+    unregisterOption(option) {
+        this.options.update(options => options.filter(o => o !== option));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpCombobox, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpCombobox, isStandalone: true, selector: "[ngpCombobox]", inputs: { value: { classPropertyName: "value", publicName: "ngpComboboxValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "ngpComboboxMultiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpComboboxDisabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "ngpComboboxCompareWith", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "ngpComboboxDropdownPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpComboboxValueChange", openChange: "ngpComboboxOpenChange" }, host: { properties: { "attr.data-open": "state.open() ? \"\" : undefined", "attr.data-disabled": "state.disabled() ? \"\" : undefined", "attr.data-multiple": "state.multiple() ? \"\" : undefined" } }, providers: [provideComboboxState()], exportAs: ["ngpCombobox"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpCombobox, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpCombobox]',
+                    exportAs: 'ngpCombobox',
+                    providers: [provideComboboxState()],
+                    host: {
+                        '[attr.data-open]': 'state.open() ? "" : undefined',
+                        '[attr.data-disabled]': 'state.disabled() ? "" : undefined',
+                        '[attr.data-multiple]': 'state.multiple() ? "" : undefined',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+class NgpComboboxButton {
+    constructor() {
+        /** Access the combobox state. */
+        this.state = injectComboboxState();
+        /**
+         * Access the element reference.
+         * @internal
+         */
+        this.elementRef = injectElementRef();
+        /** The id of the button. */
+        this.id = input(uniqueId('ngp-combobox-button'));
+        /** The id of the dropdown. */
+        this.dropdownId = computed(() => this.state().dropdown()?.id());
+        setupInteractions({
+            hover: true,
+            press: true,
+            disabled: this.state().disabled,
+        });
+        this.state().registerButton(this);
+    }
+    toggleDropdown() {
+        this.state().toggleDropdown();
+        this.state().input()?.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpComboboxButton, isStandalone: true, selector: "[ngpComboboxButton]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "tabindex": "-1", "aria-haspopup": "listbox" }, listeners: { "click": "toggleDropdown()" }, properties: { "id": "id()", "attr.aria-controls": "dropdownId()", "attr.aria-expanded": "state().open()", "attr.data-open": "state().open() ? \"\" : undefined", "attr.data-disabled": "state().disabled() ? \"\" : undefined", "attr.data-multiple": "state().multiple() ? \"\" : undefined", "disabled": "state().disabled()" } }, exportAs: ["ngpComboboxButton"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpComboboxButton]',
+                    exportAs: 'ngpComboboxButton',
+                    host: {
+                        type: 'button',
+                        tabindex: '-1',
+                        'aria-haspopup': 'listbox',
+                        '[id]': 'id()',
+                        '[attr.aria-controls]': 'dropdownId()',
+                        '[attr.aria-expanded]': 'state().open()',
+                        '[attr.data-open]': 'state().open() ? "" : undefined',
+                        '[attr.data-disabled]': 'state().disabled() ? "" : undefined',
+                        '[attr.data-multiple]': 'state().multiple() ? "" : undefined',
+                        '[disabled]': 'state().disabled()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { toggleDropdown: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgpCombobox, NgpComboboxButton, NgpComboboxDropdown, NgpComboboxInput, NgpComboboxOption, NgpComboboxPortal, injectComboboxState, provideComboboxState };
+//# sourceMappingURL=ng-primitives-combobox.mjs.map