ng-primitives 0.120.5 → 0.121.0

package/fesm2022/ng-primitives-combobox.mjs

@@ -4,8 +4,8 @@ import { ngpInteractions } from 'ng-primitives/interactions';
 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 { provideControlContainerIsolation, createOverlay, coerceFlip, coerceOffset } from 'ng-primitives/portal';
 import { ngpFormControl } from 'ng-primitives/form-field';
-import { createOverlay, coerceFlip, coerceOffset } from 'ng-primitives/portal';
 import { activeDescendantManager } from 'ng-primitives/a11y';
 
 /**
@@ -35,9 +35,9 @@ class NgpComboboxButton {
          */
         this.elementRef = injectElementRef();
         /** The id of the button. */
-        this.id = input(uniqueId('ngp-combobox-button'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.id = input(uniqueId('ngp-combobox-button'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /** The id of the dropdown. */
-        this.dropdownId = computed(() => this.state().dropdown()?.id(), ...(ngDevMode ? [{ debugName: "dropdownId" }] : []));
+        this.dropdownId = computed(() => this.state().dropdown()?.id(), ...(ngDevMode ? [{ debugName: "dropdownId" }] : /* istanbul ignore next */ []));
         ngpInteractions({
             hover: true,
             press: true,
@@ -49,10 +49,10 @@ class NgpComboboxButton {
         await this.state().toggleDropdown();
         this.state().input()?.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpComboboxButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpComboboxButton, isStandalone: true, selector: "button[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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpComboboxButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpComboboxButton, isStandalone: true, selector: "button[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: "20.3.9", ngImport: i0, type: NgpComboboxButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpComboboxButton, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[ngpComboboxButton]',
@@ -91,17 +91,18 @@ class NgpComboboxDropdown {
          */
         this.elementRef = injectElementRef();
         /** The id of the dropdown. */
-        this.id = input(uniqueId('ngp-combobox-dropdown'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.id = input(uniqueId('ngp-combobox-dropdown'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         this.state().registerDropdown(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpComboboxDropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", 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()", "style.left.px": "state().overlay()?.position()?.x", "style.top.px": "state().overlay()?.position()?.y", "style.--ngp-combobox-transform-origin": "state().overlay()?.transformOrigin()", "style.--ngp-combobox-available-width.px": "state().overlay()?.availableWidth()", "style.--ngp-combobox-available-height.px": "state().overlay()?.availableHeight()", "style.--ngp-combobox-width.px": "comboboxDimensions().width", "style.--ngp-combobox-input-width.px": "inputDimensions().width", "style.--ngp-combobox-button-width.px": "buttonDimensions().width" } }, exportAs: ["ngpComboboxDropdown"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpComboboxDropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", 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()", "style.left.px": "state().overlay()?.position()?.x", "style.top.px": "state().overlay()?.position()?.y", "style.--ngp-combobox-transform-origin": "state().overlay()?.transformOrigin()", "style.--ngp-combobox-available-width.px": "state().overlay()?.availableWidth()", "style.--ngp-combobox-available-height.px": "state().overlay()?.availableHeight()", "style.--ngp-combobox-width.px": "comboboxDimensions().width", "style.--ngp-combobox-input-width.px": "inputDimensions().width", "style.--ngp-combobox-button-width.px": "buttonDimensions().width" } }, providers: [provideControlContainerIsolation()], exportAs: ["ngpComboboxDropdown"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpComboboxDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpComboboxDropdown, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpComboboxDropdown]',
                     exportAs: 'ngpComboboxDropdown',
+                    providers: [provideControlContainerIsolation()],
                     host: {
                         role: 'listbox',
                         '[id]': 'id()',
@@ -127,11 +128,11 @@ class NgpComboboxInput {
          */
         this.elementRef = injectElementRef();
         /** The id of the input. */
-        this.id = input(uniqueId('ngp-combobox-input'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.id = input(uniqueId('ngp-combobox-input'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /** The id of the dropdown. */
-        this.dropdownId = computed(() => this.state().dropdown()?.id(), ...(ngDevMode ? [{ debugName: "dropdownId" }] : []));
+        this.dropdownId = computed(() => this.state().dropdown()?.id(), ...(ngDevMode ? [{ debugName: "dropdownId" }] : /* istanbul ignore next */ []));
         /** The id of the active descendant. */
-        this.activeDescendant = computed(() => this.state().activeDescendantManager.id(), ...(ngDevMode ? [{ debugName: "activeDescendant" }] : []));
+        this.activeDescendant = computed(() => this.state().activeDescendantManager.id(), ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
         /** Determine if the pointer was used to focus the input. */
         this.pointerFocused = false;
         /**
@@ -246,10 +247,10 @@ class NgpComboboxInput {
     handlePointerDown() {
         this.pointerFocused = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpComboboxInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpComboboxInput, isStandalone: true, selector: "input[ngpComboboxInput]", inputs: { id: { classPropertyName: "id", publicName: "id", 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()", "pointerdown": "handlePointerDown()" }, 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpComboboxInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpComboboxInput, isStandalone: true, selector: "input[ngpComboboxInput]", inputs: { id: { classPropertyName: "id", publicName: "id", 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()", "pointerdown": "handlePointerDown()" }, 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: "20.3.9", ngImport: i0, type: NgpComboboxInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpComboboxInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[ngpComboboxInput]',
@@ -311,26 +312,18 @@ class NgpComboboxOption {
          */
         this.elementRef = injectElementRef();
         /** The id of the option. */
-        this.id = input(uniqueId('ngp-combobox-option'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.id = input(uniqueId('ngp-combobox-option'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /** @required The value of the option. */
-        this.value = input(undefined, ...(ngDevMode ? [{ debugName: "value", alias: 'ngpComboboxOptionValue' }] : [{
-                alias: 'ngpComboboxOptionValue',
-            }]));
+        this.value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), alias: 'ngpComboboxOptionValue' });
         /** The disabled state of the option. */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpComboboxOptionDisabled',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpComboboxOptionDisabled',
-                transform: booleanAttribute,
-            }]));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), 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,
-            }]));
+        this.index = input(undefined, { ...(ngDevMode ? { debugName: "index" } : /* istanbul ignore next */ {}), alias: 'ngpComboboxOptionIndex',
+            transform: numberAttribute });
         /**
          * Event emitted when the option is activated via click or keyboard.
          * This is useful for options without values that need custom behavior.
@@ -350,7 +343,7 @@ class NgpComboboxOption {
                 return this.state().activeDescendantManager.index() === index;
             }
             return this.state().activeDescendantManager.id() === this.id();
-        }, ...(ngDevMode ? [{ debugName: "active" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
         /** Whether this option is selected. */
         this.selected = computed(() => {
             const value = this.value();
@@ -375,7 +368,7 @@ class NgpComboboxOption {
                 return (Array.isArray(stateValue) && stateValue.some(v => this.state().compareWith()(value, v)));
             }
             return this.state().compareWith()(value, stateValue);
-        }, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
         this.state().registerOption(this);
         ngpInteractions({
             hover: true,
@@ -433,10 +426,10 @@ class NgpComboboxOption {
             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 }, index: { classPropertyName: "index", publicName: "ngpComboboxOptionIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "ngpComboboxOptionActivated" }, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpComboboxOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", 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 } }, outputs: { activated: "ngpComboboxOptionActivated" }, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpComboboxOption, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpComboboxOption]',
@@ -474,7 +467,7 @@ class NgpComboboxPortal {
          * The overlay that manages the popover
          * @internal
          */
-        this.overlay = signal(null, ...(ngDevMode ? [{ debugName: "overlay" }] : []));
+        this.overlay = signal(null, ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
         this.state().registerPortal(this);
     }
     /** Cleanup the portal. */
@@ -522,10 +515,10 @@ class NgpComboboxPortal {
         };
         this.overlay.set(createOverlay(config));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpComboboxPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpComboboxPortal, isStandalone: true, selector: "[ngpComboboxPortal]", exportAs: ["ngpComboboxPortal"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpComboboxPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: NgpComboboxPortal, isStandalone: true, selector: "[ngpComboboxPortal]", exportAs: ["ngpComboboxPortal"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpComboboxPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpComboboxPortal, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpComboboxPortal]',
@@ -570,118 +563,93 @@ class NgpCombobox {
         /** Access the injector. */
         this.injector = inject(Injector);
         /** The value of the combobox. */
-        this.value = input(undefined, ...(ngDevMode ? [{ debugName: "value", alias: 'ngpComboboxValue' }] : [{
-                alias: 'ngpComboboxValue',
-            }]));
+        this.value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), alias: 'ngpComboboxValue' });
         /** Event emitted when the value changes. */
         this.valueChange = output({
             alias: 'ngpComboboxValueChange',
         });
         /** Whether the combobox is multiple selection. */
-        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", alias: 'ngpComboboxMultiple',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpComboboxMultiple',
-                transform: booleanAttribute,
-            }]));
+        this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), alias: 'ngpComboboxMultiple',
+            transform: booleanAttribute });
         /** Whether the combobox is disabled. */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpComboboxDisabled',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpComboboxDisabled',
-                transform: booleanAttribute,
-            }]));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'ngpComboboxDisabled',
+            transform: booleanAttribute });
         /** Whether the combobox allows deselection in single selection mode. */
-        this.allowDeselect = input(false, ...(ngDevMode ? [{ debugName: "allowDeselect", alias: 'ngpComboboxAllowDeselect',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpComboboxAllowDeselect',
-                transform: booleanAttribute,
-            }]));
+        this.allowDeselect = input(false, { ...(ngDevMode ? { debugName: "allowDeselect" } : /* istanbul ignore next */ {}), alias: 'ngpComboboxAllowDeselect',
+            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, ...(ngDevMode ? [{ debugName: "compareWith", alias: 'ngpComboboxCompareWith' }] : [{
-                alias: 'ngpComboboxCompareWith',
-            }]));
+        this.compareWith = input(Object.is, { ...(ngDevMode ? { debugName: "compareWith" } : /* istanbul ignore next */ {}), alias: 'ngpComboboxCompareWith' });
         /** The position of the dropdown. */
-        this.placement = input(this.config.placement, ...(ngDevMode ? [{ debugName: "placement", alias: 'ngpComboboxDropdownPlacement' }] : [{
-                alias: 'ngpComboboxDropdownPlacement',
-            }]));
+        this.placement = input(this.config.placement, { ...(ngDevMode ? { debugName: "placement" } : /* istanbul ignore next */ {}), alias: 'ngpComboboxDropdownPlacement' });
         /** The container for the dropdown. */
-        this.container = input(this.config.container, ...(ngDevMode ? [{ debugName: "container", alias: 'ngpComboboxDropdownContainer' }] : [{
-                alias: 'ngpComboboxDropdownContainer',
-            }]));
+        this.container = input(this.config.container, { ...(ngDevMode ? { debugName: "container" } : /* istanbul ignore next */ {}), alias: 'ngpComboboxDropdownContainer' });
         /** Whether the dropdown should flip when there is not enough space. Can be a boolean to enable/disable, or an object with padding and fallbackPlacements options. */
-        this.flip = input(this.config.flip, ...(ngDevMode ? [{ debugName: "flip", alias: 'ngpComboboxDropdownFlip',
-                transform: coerceFlip }] : [{
-                alias: 'ngpComboboxDropdownFlip',
-                transform: coerceFlip,
-            }]));
+        this.flip = input(this.config.flip, { ...(ngDevMode ? { debugName: "flip" } : /* istanbul ignore next */ {}), alias: 'ngpComboboxDropdownFlip',
+            transform: coerceFlip });
         /**
          * Define the offset of the combobox dropdown relative to the trigger.
          * Can be a number (applies to mainAxis) or an object with mainAxis, crossAxis, and alignmentAxis.
          * @default 0
          */
-        this.offset = input(this.config.offset, ...(ngDevMode ? [{ debugName: "offset", alias: 'ngpComboboxDropdownOffset',
-                transform: coerceOffset }] : [{
-                alias: 'ngpComboboxDropdownOffset',
-                transform: coerceOffset,
-            }]));
+        this.offset = input(this.config.offset, { ...(ngDevMode ? { debugName: "offset" } : /* istanbul ignore next */ {}), alias: 'ngpComboboxDropdownOffset',
+            transform: coerceOffset });
         /**
          * A function that will scroll the active option into view. This can be overridden
          * for cases such as virtual scrolling where we cannot scroll the option directly because
          * it may not be rendered.
          */
-        this.scrollToOption = input(undefined, ...(ngDevMode ? [{ debugName: "scrollToOption", alias: 'ngpComboboxScrollToOption' }] : [{
-                alias: 'ngpComboboxScrollToOption',
-            }]));
+        this.scrollToOption = input(undefined, { ...(ngDevMode ? { debugName: "scrollToOption" } : /* istanbul ignore next */ {}), alias: 'ngpComboboxScrollToOption' });
         /**
          * 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' }]));
+        this.allOptions = input(undefined, { ...(ngDevMode ? { debugName: "allOptions" } : /* istanbul ignore next */ {}), alias: 'ngpComboboxOptions' });
         /**
          * Store the combobox input
          * @internal
          */
-        this.input = signal(undefined, ...(ngDevMode ? [{ debugName: "input" }] : []));
+        this.input = signal(undefined, ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
         /**
          * Store the combobox button.
          * @internal
          */
-        this.button = signal(undefined, ...(ngDevMode ? [{ debugName: "button" }] : []));
+        this.button = signal(undefined, ...(ngDevMode ? [{ debugName: "button" }] : /* istanbul ignore next */ []));
         /**
          * Store the combobox portal.
          * @internal
          */
-        this.portal = signal(undefined, ...(ngDevMode ? [{ debugName: "portal" }] : []));
+        this.portal = signal(undefined, ...(ngDevMode ? [{ debugName: "portal" }] : /* istanbul ignore next */ []));
         /**
          * Store the combobox dropdown.
          * @internal
          */
-        this.dropdown = signal(undefined, ...(ngDevMode ? [{ debugName: "dropdown" }] : []));
+        this.dropdown = signal(undefined, ...(ngDevMode ? [{ debugName: "dropdown" }] : /* istanbul ignore next */ []));
         /**
          * Store the combobox options.
          * @internal
          */
-        this.options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+        this.options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
         /**
          * Access the overlay
          * @internal
          */
-        this.overlay = computed(() => this.portal()?.overlay(), ...(ngDevMode ? [{ debugName: "overlay" }] : []));
+        this.overlay = computed(() => this.portal()?.overlay(), ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
         /**
          * The open state of the combobox.
          * @internal
          */
-        this.open = computed(() => this.overlay()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+        this.open = computed(() => this.overlay()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
         /**
          * 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" }] : []));
+        this.sortedOptions = computed(() => domSort(this.options(), option => option.elementRef.nativeElement, option => option.index()), ...(ngDevMode ? [{ debugName: "sortedOptions" }] : /* istanbul ignore next */ []));
         /**
          * The active key descendant manager.
          * @internal
@@ -702,7 +670,7 @@ class NgpCombobox {
             },
         });
         /** The control status */
-        this.controlStatus = computed(() => this.input()?.controlStatus(), ...(ngDevMode ? [{ debugName: "controlStatus" }] : []));
+        this.controlStatus = computed(() => this.input()?.controlStatus(), ...(ngDevMode ? [{ debugName: "controlStatus" }] : /* istanbul ignore next */ []));
         /** The state of the combobox. */
         this.state = comboboxState(this);
         ngpInteractions({
@@ -1183,10 +1151,10 @@ class NgpCombobox {
         }
         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 }, flip: { classPropertyName: "flip", publicName: "ngpComboboxDropdownFlip", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpComboboxDropdownOffset", isSignal: true, isRequired: false, transformFunction: null }, scrollToOption: { classPropertyName: "scrollToOption", publicName: "ngpComboboxScrollToOption", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpCombobox, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", 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 }, flip: { classPropertyName: "flip", publicName: "ngpComboboxDropdownFlip", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpComboboxDropdownOffset", isSignal: true, isRequired: false, transformFunction: null }, scrollToOption: { classPropertyName: "scrollToOption", publicName: "ngpComboboxScrollToOption", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpCombobox, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpCombobox]',