ng-primitives 0.99.6 → 0.100.0

package/fesm2022/ng-primitives-select.mjs

@@ -4,7 +4,7 @@ import { ngpFormControl } from 'ng-primitives/form-field';
 import { ngpInteractions } from 'ng-primitives/interactions';
 import { uniqueId } from 'ng-primitives/utils';
 import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
-import { observeResize, injectElementRef } from 'ng-primitives/internal';
+import { observeResize, injectElementRef, scrollIntoViewIfNeeded, domSort } from 'ng-primitives/internal';
 import { createOverlay } from 'ng-primitives/portal';
 import { activeDescendantManager } from 'ng-primitives/a11y';
 
@@ -142,11 +142,23 @@ class NgpSelectOption {
                 alias: 'ngpSelectOptionDisabled',
                 transform: booleanAttribute,
             }]));
+        /** The index of the option in the list. */
+        this.index = input(undefined, ...(ngDevMode ? [{ debugName: "index", alias: 'ngpSelectOptionIndex' }] : [{
+                alias: 'ngpSelectOptionIndex',
+            }]));
         /**
          * 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();
@@ -182,31 +194,47 @@ class NgpSelectOption {
         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 because this
+        // is required for virtual scrolling scenarios
+        const index = this.index();
+        if (index !== undefined) {
+            this.state().activeDescendantManager.activateByIndex(index, {
+                scroll: false,
+                origin: 'pointer',
+            });
+            return;
+        }
+        // otherwise, activate by id
+        this.state().activeDescendantManager.activateById(this.id(), {
+            scroll: false,
+            origin: 'pointer',
+        });
     }
     /**
      * Whenever the pointer leaves the option, deactivate it.
      * @internal
      */
     onPointerLeave() {
-        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: NgpSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpSelectOption, isStandalone: true, selector: "[ngpSelectOption]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpSelectOptionValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpSelectOptionDisabled", isSignal: true, isRequired: false, transformFunction: null } }, 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpSelectOption, isStandalone: true, selector: "[ngpSelectOption]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpSelectOptionValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpSelectOptionDisabled", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "ngpSelectOptionIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "click": "select()", "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()" }, properties: { "id": "id()", "attr.tabindex": "-1", "attr.aria-selected": "selected() ? \"true\" : undefined", "attr.data-selected": "selected() ? \"\" : undefined", "attr.data-active": "active() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined" } }, exportAs: ["ngpSelectOption"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSelectOption, decorators: [{
             type: Directive,
@@ -224,7 +252,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: "ngpSelectOptionValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectOptionDisabled", required: false }] }], onPointerEnter: [{
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectOptionValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectOptionDisabled", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectOptionIndex", required: false }] }], onPointerEnter: [{
                 type: HostListener,
                 args: ['pointerenter']
             }], onPointerLeave: [{
@@ -374,6 +402,21 @@ class NgpSelect {
         this.container = input(this.config.container, ...(ngDevMode ? [{ debugName: "container", alias: 'ngpSelectDropdownContainer' }] : [{
                 alias: 'ngpSelectDropdownContainer',
             }]));
+        /**
+         * A function that will scroll the active option into view. This can be overridden
+         * for cases such as virtual scrolling where we cannot scroll the option directly because
+         * it may not be rendered.
+         */
+        this.scrollToOption = input(undefined, ...(ngDevMode ? [{ debugName: "scrollToOption", alias: 'ngpSelectScrollToOption' }] : [{
+                alias: 'ngpSelectScrollToOption',
+            }]));
+        /**
+         * Provide all the option values to the select. This is useful for virtual scrolling scenarios
+         * where not all options are rendered in the DOM. This is not an alternative to adding the options
+         * in the DOM, it is only to provide the select with the full list of options. This list should match
+         * the order of the options as they would appear in the DOM.
+         */
+        this.allOptions = input(undefined, ...(ngDevMode ? [{ debugName: "allOptions", alias: 'ngpSelectOptions' }] : [{ alias: 'ngpSelectOptions' }]));
         /**
          * Store the select portal.
          * @internal
@@ -399,6 +442,11 @@ class NgpSelect {
          * @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
@@ -406,13 +454,16 @@ class NgpSelect {
         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.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 state of the select. */
@@ -436,16 +487,27 @@ class NgpSelect {
         }
         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.
@@ -474,13 +536,14 @@ class NgpSelect {
     }
     /**
      * Select an option.
-     * @param option The option to select.
+     * @param index The index of the option to select.
      * @internal
      */
-    selectOption(option) {
+    selectOption(id) {
         if (this.state.disabled()) {
             return;
         }
+        const option = this.sortedOptions().find(opt => opt.id() === id);
         if (!option) {
             this.state.value.set(undefined);
             this.closeDropdown();
@@ -488,7 +551,7 @@ class NgpSelect {
         }
         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()];
@@ -511,7 +574,7 @@ class NgpSelect {
     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()) {
+        if (this.state.disabled() || !this.isOptionSelected(option.value()) || !this.state.multiple()) {
             return;
         }
         const values = this.state.value() ?? [];
@@ -522,25 +585,29 @@ class NgpSelect {
     }
     /**
      * 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;
+        }
         // 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);
+            this.selectOption(id);
             return;
         }
         // otherwise toggle the option
-        if (this.isOptionSelected(option)) {
+        if (this.isOptionSelected(option.value())) {
             this.deselectOption(option);
         }
         else {
-            this.selectOption(option);
+            this.selectOption(id);
         }
     }
     /**
@@ -557,9 +624,9 @@ class NgpSelect {
             return false;
         }
         if (this.state.multiple()) {
-            return value && value.some(v => this.state.compareWith()(option.value(), v));
+            return value && value.some(v => this.state.compareWith()(option, v));
         }
-        return this.state.compareWith()(option.value(), value);
+        return this.state.compareWith()(option, value);
     }
     /**
      * Activate the next option in the list if there is one.
@@ -570,21 +637,21 @@ class NgpSelect {
         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.
@@ -594,21 +661,21 @@ class NgpSelect {
         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 select.
@@ -673,19 +740,22 @@ class NgpSelect {
                 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()) {
-                    this.selectOption(this.activeDescendantManager.activeItem());
+                    const activeId = this.activeDescendantManager.id();
+                    if (activeId) {
+                        this.selectOption(activeId);
+                    }
                 }
                 else {
                     this.openDropdown();
@@ -707,8 +777,27 @@ class NgpSelect {
         this.closeDropdown();
         event.preventDefault();
     }
+    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: NgpSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpSelect, isStandalone: true, selector: "[ngpSelect]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpSelectValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "ngpSelectMultiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpSelectDisabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "ngpSelectCompareWith", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpSelectDropdownPlacement", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpSelectDropdownContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpSelectValueChange", openChange: "ngpSelectOpenChange" }, host: { attributes: { "role": "combobox" }, listeners: { "click": "toggleDropdown()", "keydown": "handleKeydown($event)", "blur": "onBlur($event)" }, properties: { "id": "state.id()", "attr.aria-expanded": "open()", "attr.aria-controls": "open() ? dropdown()?.id() : undefined", "attr.aria-activedescendant": "open() ? activeDescendantManager.activeDescendant() : undefined", "attr.tabindex": "state.disabled() ? -1 : 0", "attr.data-open": "open() ? \"\" : undefined", "attr.data-disabled": "state.disabled() ? \"\" : undefined", "attr.data-multiple": "state.multiple() ? \"\" : undefined" } }, providers: [provideSelectState()], exportAs: ["ngpSelect"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpSelect, isStandalone: true, selector: "[ngpSelect]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpSelectValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "ngpSelectMultiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpSelectDisabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "ngpSelectCompareWith", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpSelectDropdownPlacement", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpSelectDropdownContainer", isSignal: true, isRequired: false, transformFunction: null }, scrollToOption: { classPropertyName: "scrollToOption", publicName: "ngpSelectScrollToOption", isSignal: true, isRequired: false, transformFunction: null }, allOptions: { classPropertyName: "allOptions", publicName: "ngpSelectOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpSelectValueChange", openChange: "ngpSelectOpenChange" }, host: { attributes: { "role": "combobox" }, listeners: { "click": "toggleDropdown()", "keydown": "handleKeydown($event)", "blur": "onBlur($event)" }, properties: { "id": "state.id()", "attr.aria-expanded": "open()", "attr.aria-controls": "open() ? dropdown()?.id() : undefined", "attr.aria-activedescendant": "open() ? activeDescendantManager.id() : undefined", "attr.tabindex": "state.disabled() ? -1 : 0", "attr.data-open": "open() ? \"\" : undefined", "attr.data-disabled": "state.disabled() ? \"\" : undefined", "attr.data-multiple": "state.multiple() ? \"\" : undefined" } }, providers: [provideSelectState()], exportAs: ["ngpSelect"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSelect, decorators: [{
             type: Directive,
@@ -721,14 +810,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         '[id]': 'state.id()',
                         '[attr.aria-expanded]': 'open()',
                         '[attr.aria-controls]': 'open() ? dropdown()?.id() : undefined',
-                        '[attr.aria-activedescendant]': 'open() ? activeDescendantManager.activeDescendant() : undefined',
+                        '[attr.aria-activedescendant]': 'open() ? activeDescendantManager.id() : undefined',
                         '[attr.tabindex]': 'state.disabled() ? -1 : 0',
                         '[attr.data-open]': 'open() ? "" : undefined',
                         '[attr.data-disabled]': 'state.disabled() ? "" : undefined',
                         '[attr.data-multiple]': 'state.multiple() ? "" : undefined',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["ngpSelectValueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectMultiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectDisabled", required: false }] }], openChange: [{ type: i0.Output, args: ["ngpSelectOpenChange"] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectCompareWith", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectDropdownPlacement", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectDropdownContainer", required: false }] }], toggleDropdown: [{
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["ngpSelectValueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectMultiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectDisabled", required: false }] }], openChange: [{ type: i0.Output, args: ["ngpSelectOpenChange"] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectCompareWith", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectDropdownPlacement", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectDropdownContainer", required: false }] }], scrollToOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectScrollToOption", required: false }] }], allOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSelectOptions", required: false }] }], toggleDropdown: [{
                 type: HostListener,
                 args: ['click']
             }], handleKeydown: [{