ng-primitives 0.99.6 → 0.100.0

package/fesm2022/ng-primitives-combobox.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, computed, HostListener, Directive, booleanAttribute, inject, ViewContainerRef, TemplateRef, Injector, signal, InjectionToken, output } from '@angular/core';
+import { input, computed, HostListener, Directive, booleanAttribute, numberAttribute, inject, ViewContainerRef, TemplateRef, Injector, signal, InjectionToken, output } from '@angular/core';
 import { ngpInteractions } from 'ng-primitives/interactions';
-import { injectElementRef, observeResize } from 'ng-primitives/internal';
+import { injectElementRef, observeResize, scrollIntoViewIfNeeded, domSort } from 'ng-primitives/internal';
 import { uniqueId } from 'ng-primitives/utils';
 import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
 import { ngpFormControl } from 'ng-primitives/form-field';
@@ -129,7 +129,7 @@ class NgpComboboxInput {
         /** The id of the dropdown. */
         this.dropdownId = computed(() => this.state().dropdown()?.id(), ...(ngDevMode ? [{ debugName: "dropdownId" }] : []));
         /** The id of the active descendant. */
-        this.activeDescendant = computed(() => this.state().activeDescendantManager.activeDescendant(), ...(ngDevMode ? [{ debugName: "activeDescendant" }] : []));
+        this.activeDescendant = computed(() => this.state().activeDescendantManager.id(), ...(ngDevMode ? [{ debugName: "activeDescendant" }] : []));
         /** Determine if the pointer was used to focus the input. */
         this.pointerFocused = false;
         /**
@@ -181,7 +181,7 @@ class NgpComboboxInput {
                 break;
             case 'Enter':
                 if (this.state().open()) {
-                    const activeItem = this.state().activeDescendantManager.activeItem();
+                    const activeItem = this.state().activeDescendantManager.id();
                     if (activeItem) {
                         this.state().toggleOption(activeItem);
                     }
@@ -315,11 +315,28 @@ class NgpComboboxOption {
                 alias: 'ngpComboboxOptionDisabled',
                 transform: booleanAttribute,
             }]));
+        /**
+         * The index of the option in the combobox. This can be used to define the order of options
+         * when virtual scrolling is used or when the order is not determined by DOM order.
+         */
+        this.index = input(undefined, ...(ngDevMode ? [{ debugName: "index", alias: 'ngpComboboxOptionIndex',
+                transform: numberAttribute }] : [{
+                alias: 'ngpComboboxOptionIndex',
+                transform: numberAttribute,
+            }]));
         /**
          * Whether this option is the active descendant.
          * @internal
          */
-        this.active = computed(() => this.state().activeDescendantManager.activeDescendant() === this.id(), ...(ngDevMode ? [{ debugName: "active" }] : []));
+        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();
@@ -366,31 +383,46 @@ class NgpComboboxOption {
         if (this.disabled()) {
             return;
         }
-        this.state().toggleOption(this);
+        this.state().toggleOption(this.id());
     }
     /**
      * Scroll the option into view.
      * @internal
      */
     scrollIntoView() {
-        this.elementRef.nativeElement.scrollIntoView({ block: 'nearest' });
+        scrollIntoViewIfNeeded(this.elementRef.nativeElement);
     }
     /**
      * Whenever the pointer enters the option, activate it.
      * @internal
      */
     onPointerEnter() {
-        this.state().activeDescendantManager.activate(this);
+        // if we have a known index, use that to activate the option (required for virtual scrolling)
+        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() {
-        this.state().activeDescendantManager.activate(undefined);
+        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: NgpComboboxOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", 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 }, index: { classPropertyName: "index", publicName: "ngpComboboxOptionIndex", 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: "20.3.9", ngImport: i0, type: NgpComboboxOption, decorators: [{
             type: Directive,
@@ -408,7 +440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         '(click)': 'select()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxOptionValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxOptionDisabled", required: false }] }], onPointerEnter: [{
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxOptionValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxOptionDisabled", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxOptionIndex", required: false }] }], onPointerEnter: [{
                 type: HostListener,
                 args: ['pointerenter']
             }], onPointerLeave: [{
@@ -562,6 +594,31 @@ class NgpCombobox {
         this.container = input(this.config.container, ...(ngDevMode ? [{ debugName: "container", alias: 'ngpComboboxDropdownContainer' }] : [{
                 alias: 'ngpComboboxDropdownContainer',
             }]));
+        /**
+         * 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: 'ngpComboboxScrollToOption' }] : [{
+                alias: 'ngpComboboxScrollToOption',
+            }]));
+        /**
+         * The number of options within the combobox. By default this is calculated based on the
+         * options added to the combobox, but in virtual scrolling scenarios the total number of options
+         * may be different from the number of rendered options.
+         */
+        this.optionCount = input(undefined, ...(ngDevMode ? [{ debugName: "optionCount", alias: 'ngpComboboxOptionCount',
+                transform: numberAttribute }] : [{
+                alias: 'ngpComboboxOptionCount',
+                transform: numberAttribute,
+            }]));
+        /**
+         * Provide all the option values to the combobox. 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 combobox 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: 'ngpComboboxOptions' }] : [{ alias: 'ngpComboboxOptions' }]));
         /**
          * Store the combobox input
          * @internal
@@ -597,6 +654,11 @@ class NgpCombobox {
          * @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
@@ -604,13 +666,16 @@ class NgpCombobox {
         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,
-            onActiveDescendantChange: activeItem => {
+            wrap: signal(true),
+            count: computed(() => this.state.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 || !activeItem) {
+                if (!isPositioned || index === -1) {
                     return;
                 }
-                this.activeDescendantManager.activeItem()?.scrollIntoView?.();
+                this.scrollTo(index);
             },
         });
         /** The control status */
@@ -635,16 +700,27 @@ class NgpCombobox {
         }
         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) {
+        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 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()));
+        }
+        // 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);
             return;
         }
         // activate the selected option or the first option
-        this.activeDescendantManager.activate(targetOption);
+        this.activeDescendantManager.first();
     }
     /**
      * Close the dropdown.
@@ -691,7 +767,7 @@ class NgpCombobox {
                 return; // Do nothing in single selection mode
             }
             // Get currently visible regular options (respects filtering)
-            const regularOptions = this.options().filter(opt => opt.value() !== 'all' && opt.value() !== undefined);
+            const regularOptions = this.sortedOptions().filter(opt => opt.value() !== 'all' && opt.value() !== undefined);
             const allValues = regularOptions.map(opt => opt.value());
             this.state.value.set(allValues);
             this.valueChange.emit(allValues);
@@ -699,7 +775,7 @@ class NgpCombobox {
         }
         if (this.state.multiple()) {
             // if the option is already selected, do nothing
-            if (this.isOptionSelected(option)) {
+            if (this.isOptionSelected(option.value())) {
                 return;
             }
             const value = [...this.state.value(), option.value()];
@@ -721,7 +797,7 @@ class NgpCombobox {
      */
     deselectOption(option) {
         // if the combobox is disabled or the option is not selected, do nothing
-        if (this.state.disabled() || !this.isOptionSelected(option)) {
+        if (this.state.disabled() || !this.isOptionSelected(option.value())) {
             return;
         }
         // in single selection mode, only allow deselecting if allowDeselect is true
@@ -752,19 +828,23 @@ class NgpCombobox {
     }
     /**
      * Toggle the selection of an option.
-     * @param option The option to toggle.
+     * @param id The id of the option to toggle.
      * @internal
      */
-    toggleOption(option) {
+    toggleOption(id) {
         if (this.state.disabled()) {
             return;
         }
+        const option = this.sortedOptions().find(opt => opt.id() === id);
+        if (!option) {
+            return;
+        }
         // Handle select all for select/deselect all functionality - only works in multiple selection mode
         if (option.value() === 'all') {
             if (!this.state.multiple()) {
                 return; // Do nothing in single selection mode
             }
-            if (this.isOptionSelected(option)) {
+            if (this.isOptionSelected(option.value())) {
                 this.deselectOption(option);
             }
             else {
@@ -774,7 +854,7 @@ class NgpCombobox {
         }
         if (this.state.multiple()) {
             // In multiple selection mode, always allow toggling
-            if (this.isOptionSelected(option)) {
+            if (this.isOptionSelected(option.value())) {
                 this.deselectOption(option);
             }
             else {
@@ -783,7 +863,7 @@ class NgpCombobox {
         }
         else {
             // In single selection mode, check if deselection is allowed
-            if (this.isOptionSelected(option) && this.state.allowDeselect()) {
+            if (this.isOptionSelected(option.value()) && this.state.allowDeselect()) {
                 // Deselect the option by setting value to undefined
                 this.state.value.set(undefined);
                 this.valueChange.emit(undefined);
@@ -803,7 +883,8 @@ class NgpCombobox {
         if (this.state.disabled()) {
             return false;
         }
-        const optionValue = option.value();
+        // Handle both NgpComboboxOption and T types
+        const optionValue = option.value?.() ?? option;
         const value = this.state.value();
         // Handle select all functionality - only works in multiple selection mode
         if (optionValue === 'all') {
@@ -811,7 +892,7 @@ class NgpCombobox {
                 return false; // Never selected in single selection mode
             }
             const selectedValues = Array.isArray(value) ? value : [];
-            return areAllOptionsSelected(this.options(), selectedValues, this.state.compareWith());
+            return areAllOptionsSelected(this.sortedOptions(), selectedValues, this.state.compareWith());
         }
         if (!value) {
             return false;
@@ -830,21 +911,21 @@ class NgpCombobox {
         if (this.state.disabled()) {
             return;
         }
-        const options = this.options();
+        const options = this.sortedOptions();
         // 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 (this.activeDescendantManager.index() === -1) {
+            const selectedOption = options.findIndex(option => this.isOptionSelected(option.value()));
             // 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);
+            const targetOption = selectedOption !== -1 ? selectedOption : 0;
+            this.activeDescendantManager.activateByIndex(targetOption, { origin: 'keyboard' });
             return;
         }
         // otherwise activate the next option
-        this.activeDescendantManager.next();
+        this.activeDescendantManager.next({ origin: 'keyboard' });
     }
     /**
      * Activate the previous option in the list if there is one.
@@ -854,21 +935,21 @@ class NgpCombobox {
         if (this.state.disabled()) {
             return;
         }
-        const options = this.options();
+        const options = this.sortedOptions();
         // 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 (this.activeDescendantManager.index() === -1) {
+            const selectedOption = options.findIndex(option => this.isOptionSelected(option.value()));
             // 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);
+            const targetOption = selectedOption !== -1 ? selectedOption : options.length - 1;
+            this.activeDescendantManager.activateByIndex(targetOption, { origin: 'keyboard' });
             return;
         }
         // otherwise activate the previous option
-        this.activeDescendantManager.previous();
+        this.activeDescendantManager.previous({ origin: 'keyboard' });
     }
     /**
      * Register the dropdown portal with the combobox.
@@ -973,21 +1054,21 @@ class NgpCombobox {
                 break;
             case 'Home':
                 if (this.open()) {
-                    this.activeDescendantManager.first();
+                    this.activeDescendantManager.first({ origin: 'keyboard' });
                 }
                 event.preventDefault();
                 break;
             case 'End':
                 if (this.open()) {
-                    this.activeDescendantManager.last();
+                    this.activeDescendantManager.last({ origin: 'keyboard' });
                 }
                 event.preventDefault();
                 break;
             case 'Enter':
                 if (this.open()) {
-                    const activeItem = this.activeDescendantManager.activeItem();
-                    if (activeItem) {
-                        this.toggleOption(activeItem);
+                    const activeId = this.activeDescendantManager.id();
+                    if (activeId) {
+                        this.toggleOption(activeId);
                     }
                 }
                 event.preventDefault();
@@ -1032,8 +1113,27 @@ class NgpCombobox {
         }
         this.closeDropdown();
     }
+    scrollTo(index) {
+        const scrollToOption = this.state.scrollToOption();
+        if (scrollToOption) {
+            scrollToOption(index);
+            return;
+        }
+        const option = this.getOptionAtIndex(index);
+        if (option) {
+            option.scrollIntoView();
+        }
+    }
+    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);
+        if (optionIndex !== -1) {
+            return this.options()[optionIndex];
+        }
+        return this.sortedOptions()[index];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpCombobox, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", 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 }, allowDeselect: { classPropertyName: "allowDeselect", publicName: "ngpComboboxAllowDeselect", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "ngpComboboxCompareWith", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpComboboxDropdownPlacement", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpComboboxDropdownContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpComboboxValueChange", openChange: "ngpComboboxOpenChange" }, host: { listeners: { "keydown": "handleKeydown($event)", "blur": "onBlur($event)" }, properties: { "attr.tabindex": "input() ? -1 : (state.disabled() ? -1 : 0)", "attr.data-open": "open() ? \"\" : undefined", "attr.data-disabled": "state.disabled() ? \"\" : undefined", "attr.data-multiple": "state.multiple() ? \"\" : undefined", "attr.data-invalid": "controlStatus()?.invalid ? \"\" : undefined", "attr.data-valid": "controlStatus()?.valid ? \"\" : undefined", "attr.data-touched": "controlStatus()?.touched ? \"\" : undefined", "attr.data-pristine": "controlStatus()?.pristine ? \"\" : undefined", "attr.data-dirty": "controlStatus()?.dirty ? \"\" : undefined", "attr.data-pending": "controlStatus()?.pending ? \"\" : undefined" } }, providers: [provideComboboxState()], exportAs: ["ngpCombobox"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", 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 }, allowDeselect: { classPropertyName: "allowDeselect", publicName: "ngpComboboxAllowDeselect", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "ngpComboboxCompareWith", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpComboboxDropdownPlacement", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpComboboxDropdownContainer", isSignal: true, isRequired: false, transformFunction: null }, scrollToOption: { classPropertyName: "scrollToOption", publicName: "ngpComboboxScrollToOption", isSignal: true, isRequired: false, transformFunction: null }, optionCount: { classPropertyName: "optionCount", publicName: "ngpComboboxOptionCount", isSignal: true, isRequired: false, transformFunction: null }, allOptions: { classPropertyName: "allOptions", publicName: "ngpComboboxOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpComboboxValueChange", openChange: "ngpComboboxOpenChange" }, host: { listeners: { "keydown": "handleKeydown($event)", "blur": "onBlur($event)" }, properties: { "attr.tabindex": "input() ? -1 : (state.disabled() ? -1 : 0)", "attr.data-open": "open() ? \"\" : undefined", "attr.data-disabled": "state.disabled() ? \"\" : undefined", "attr.data-multiple": "state.multiple() ? \"\" : undefined", "attr.data-invalid": "controlStatus()?.invalid ? \"\" : undefined", "attr.data-valid": "controlStatus()?.valid ? \"\" : undefined", "attr.data-touched": "controlStatus()?.touched ? \"\" : undefined", "attr.data-pristine": "controlStatus()?.pristine ? \"\" : undefined", "attr.data-dirty": "controlStatus()?.dirty ? \"\" : undefined", "attr.data-pending": "controlStatus()?.pending ? \"\" : undefined" } }, providers: [provideComboboxState()], exportAs: ["ngpCombobox"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpCombobox, decorators: [{
             type: Directive,
@@ -1054,7 +1154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         '[attr.data-pending]': 'controlStatus()?.pending ? "" : undefined',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["ngpComboboxValueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxMultiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxDisabled", required: false }] }], allowDeselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxAllowDeselect", required: false }] }], openChange: [{ type: i0.Output, args: ["ngpComboboxOpenChange"] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxCompareWith", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxDropdownPlacement", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxDropdownContainer", required: false }] }], handleKeydown: [{
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["ngpComboboxValueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxMultiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxDisabled", required: false }] }], allowDeselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxAllowDeselect", required: false }] }], openChange: [{ type: i0.Output, args: ["ngpComboboxOpenChange"] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxCompareWith", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxDropdownPlacement", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxDropdownContainer", required: false }] }], scrollToOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxScrollToOption", required: false }] }], optionCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxOptionCount", required: false }] }], allOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxOptions", required: false }] }], handleKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }], onBlur: [{