ng-primitives 0.89.0 → 0.91.0

package/fesm2022/ng-primitives-combobox.mjs

@@ -4,7 +4,7 @@ import { ngpInteractions } from 'ng-primitives/interactions';
 import { injectElementRef, observeResize } from 'ng-primitives/internal';
 import { uniqueId } from 'ng-primitives/utils';
 import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
-import { setupFormControl } from 'ng-primitives/form-field';
+import { ngpFormControl } from 'ng-primitives/form-field';
 import { createOverlay } 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'));
+        this.id = input(uniqueId('ngp-combobox-button'), ...(ngDevMode ? [{ debugName: "id" }] : []));
         /** The id of the dropdown. */
-        this.dropdownId = computed(() => this.state().dropdown()?.id());
+        this.dropdownId = computed(() => this.state().dropdown()?.id(), ...(ngDevMode ? [{ debugName: "dropdownId" }] : []));
         ngpInteractions({
             hover: true,
             press: true,
@@ -49,13 +49,13 @@ class NgpComboboxButton {
         await this.state().toggleDropdown();
         this.state().input()?.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpComboboxButton, isStandalone: true, selector: "[ngpComboboxButton]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "tabindex": "-1", "aria-haspopup": "listbox" }, listeners: { "click": "toggleDropdown()" }, properties: { "id": "id()", "attr.aria-controls": "dropdownId()", "attr.aria-expanded": "state().open()", "attr.data-open": "state().open() ? \"\" : undefined", "attr.data-disabled": "state().disabled() ? \"\" : undefined", "attr.data-multiple": "state().multiple() ? \"\" : undefined", "disabled": "state().disabled()" } }, exportAs: ["ngpComboboxButton"], ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpComboboxButton, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ngpComboboxButton]',
+                    selector: 'button[ngpComboboxButton]',
                     exportAs: 'ngpComboboxButton',
                     host: {
                         type: 'button',
@@ -70,7 +70,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         '[disabled]': 'state().disabled()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { toggleDropdown: [{
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], toggleDropdown: [{
                 type: HostListener,
                 args: ['click']
             }] } });
@@ -91,13 +91,13 @@ class NgpComboboxDropdown {
          */
         this.elementRef = injectElementRef();
         /** The id of the dropdown. */
-        this.id = input(uniqueId('ngp-combobox-dropdown'));
+        this.id = input(uniqueId('ngp-combobox-dropdown'), ...(ngDevMode ? [{ debugName: "id" }] : []));
         this.state().registerDropdown(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxDropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpComboboxDropdown, isStandalone: true, selector: "[ngpComboboxDropdown]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "id": "id()", "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-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: "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-width.px": "comboboxDimensions().width", "style.--ngp-combobox-input-width.px": "inputDimensions().width", "style.--ngp-combobox-button-width.px": "buttonDimensions().width" } }, exportAs: ["ngpComboboxDropdown"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpComboboxDropdown, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpComboboxDropdown]',
@@ -113,7 +113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         '[style.--ngp-combobox-button-width.px]': 'buttonDimensions().width',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 class NgpComboboxInput {
     constructor() {
@@ -125,18 +125,18 @@ class NgpComboboxInput {
          */
         this.elementRef = injectElementRef();
         /** The id of the input. */
-        this.id = input(uniqueId('ngp-combobox-input'));
+        this.id = input(uniqueId('ngp-combobox-input'), ...(ngDevMode ? [{ debugName: "id" }] : []));
         /** The id of the dropdown. */
-        this.dropdownId = computed(() => this.state().dropdown()?.id());
+        this.dropdownId = computed(() => this.state().dropdown()?.id(), ...(ngDevMode ? [{ debugName: "dropdownId" }] : []));
         /** The id of the active descendant. */
-        this.activeDescendant = computed(() => this.state().activeDescendantManager.activeDescendant());
+        this.activeDescendant = computed(() => this.state().activeDescendantManager.activeDescendant(), ...(ngDevMode ? [{ debugName: "activeDescendant" }] : []));
         /** Determine if the pointer was used to focus the input. */
         this.pointerFocused = false;
         /**
          * The control status - this is required as we apply them to the combobox element as well as the input element.
          * @internal
          */
-        this.controlStatus = setupFormControl({ id: this.id, disabled: this.state().disabled });
+        this.controlStatus = ngpFormControl({ id: this.id, disabled: this.state().disabled });
         ngpInteractions({
             focus: true,
             hover: true,
@@ -241,10 +241,10 @@ class NgpComboboxInput {
     handlePointerDown() {
         this.pointerFocused = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpComboboxInput, isStandalone: true, selector: "input[ngpComboboxInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "type": "text", "autocomplete": "off", "autocorrect": "off", "spellcheck": "false", "aria-haspopup": "listbox", "aria-autocomplete": "list" }, listeners: { "keydown": "handleKeydown($event)", "blur": "closeDropdown($event)", "focus": "highlightText($event)", "pointerdown": "handlePointerDown($event)" }, properties: { "id": "id()", "attr.aria-controls": "state().open() ? dropdownId() : undefined", "attr.aria-expanded": "state().open()", "attr.data-open": "state().open() ? \"\" : undefined", "attr.data-disabled": "state().disabled() ? \"\" : undefined", "attr.data-multiple": "state().multiple() ? \"\" : undefined", "attr.aria-activedescendant": "activeDescendant()", "disabled": "state().disabled()" } }, exportAs: ["ngpComboboxInput"], ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpComboboxInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[ngpComboboxInput]',
@@ -267,7 +267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         '[disabled]': 'state().disabled()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { handleKeydown: [{
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], handleKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }], closeDropdown: [{
@@ -275,10 +275,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 args: ['blur', ['$event']]
             }], highlightText: [{
                 type: HostListener,
-                args: ['focus', ['$event']]
+                args: ['focus']
             }], handlePointerDown: [{
                 type: HostListener,
-                args: ['pointerdown', ['$event']]
+                args: ['pointerdown']
             }] } });
 
 /**
@@ -304,21 +304,22 @@ class NgpComboboxOption {
          */
         this.elementRef = injectElementRef();
         /** The id of the option. */
-        this.id = input(uniqueId('ngp-combobox-option'));
+        this.id = input(uniqueId('ngp-combobox-option'), ...(ngDevMode ? [{ debugName: "id" }] : []));
         /** @required The value of the option. */
-        this.value = input(undefined, {
-            alias: 'ngpComboboxOptionValue',
-        });
+        this.value = input(undefined, ...(ngDevMode ? [{ debugName: "value", alias: 'ngpComboboxOptionValue' }] : [{
+                alias: 'ngpComboboxOptionValue',
+            }]));
         /** The disabled state of the option. */
-        this.disabled = input(false, {
-            alias: 'ngpComboboxOptionDisabled',
-            transform: booleanAttribute,
-        });
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpComboboxOptionDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpComboboxOptionDisabled',
+                transform: booleanAttribute,
+            }]));
         /**
          * Whether this option is the active descendant.
          * @internal
          */
-        this.active = computed(() => this.state().activeDescendantManager.activeDescendant() === this.id());
+        this.active = computed(() => this.state().activeDescendantManager.activeDescendant() === this.id(), ...(ngDevMode ? [{ debugName: "active" }] : []));
         /** Whether this option is selected. */
         this.selected = computed(() => {
             const value = this.value();
@@ -341,7 +342,7 @@ class NgpComboboxOption {
                 return (Array.isArray(stateValue) && stateValue.some(v => this.state().compareWith()(value, v)));
             }
             return this.state().compareWith()(value, stateValue);
-        });
+        }, ...(ngDevMode ? [{ debugName: "selected" }] : []));
         this.state().registerOption(this);
         ngpInteractions({
             hover: true,
@@ -388,10 +389,10 @@ class NgpComboboxOption {
     onPointerLeave() {
         this.state().activeDescendantManager.activate(undefined);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpComboboxOption, isStandalone: true, selector: "[ngpComboboxOption]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpComboboxOptionValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpComboboxOptionDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "click": "select()", "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()" }, properties: { "id": "id()", "attr.tabindex": "-1", "attr.aria-selected": "selected() ? \"true\" : undefined", "attr.data-selected": "selected() ? \"\" : undefined", "attr.data-active": "active() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined" } }, exportAs: ["ngpComboboxOption"], ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpComboboxOption, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpComboboxOption]',
@@ -407,7 +408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         '(click)': 'select()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { 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 }] }], onPointerEnter: [{
                 type: HostListener,
                 args: ['pointerenter']
             }], onPointerLeave: [{
@@ -429,7 +430,7 @@ class NgpComboboxPortal {
          * The overlay that manages the popover
          * @internal
          */
-        this.overlay = signal(null);
+        this.overlay = signal(null, ...(ngDevMode ? [{ debugName: "overlay" }] : []));
         this.state().registerPortal(this);
     }
     /** Cleanup the portal. */
@@ -474,10 +475,10 @@ class NgpComboboxPortal {
         };
         this.overlay.set(createOverlay(config));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpComboboxPortal, isStandalone: true, selector: "[ngpComboboxPortal]", exportAs: ["ngpComboboxPortal"], ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpComboboxPortal, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpComboboxPortal]',
@@ -520,79 +521,82 @@ class NgpCombobox {
         /** Access the injector. */
         this.injector = inject(Injector);
         /** The value of the combobox. */
-        this.value = input(undefined, {
-            alias: 'ngpComboboxValue',
-        });
+        this.value = input(undefined, ...(ngDevMode ? [{ debugName: "value", alias: 'ngpComboboxValue' }] : [{
+                alias: 'ngpComboboxValue',
+            }]));
         /** Event emitted when the value changes. */
         this.valueChange = output({
             alias: 'ngpComboboxValueChange',
         });
         /** Whether the combobox is multiple selection. */
-        this.multiple = input(false, {
-            alias: 'ngpComboboxMultiple',
-            transform: booleanAttribute,
-        });
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", alias: 'ngpComboboxMultiple',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpComboboxMultiple',
+                transform: booleanAttribute,
+            }]));
         /** Whether the combobox is disabled. */
-        this.disabled = input(false, {
-            alias: 'ngpComboboxDisabled',
-            transform: booleanAttribute,
-        });
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpComboboxDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpComboboxDisabled',
+                transform: booleanAttribute,
+            }]));
         /** Whether the combobox allows deselection in single selection mode. */
-        this.allowDeselect = input(false, {
-            alias: 'ngpComboboxAllowDeselect',
-            transform: booleanAttribute,
-        });
+        this.allowDeselect = input(false, ...(ngDevMode ? [{ debugName: "allowDeselect", alias: 'ngpComboboxAllowDeselect',
+                transform: booleanAttribute }] : [{
+                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, {
-            alias: 'ngpComboboxCompareWith',
-        });
+        this.compareWith = input(Object.is, ...(ngDevMode ? [{ debugName: "compareWith", alias: 'ngpComboboxCompareWith' }] : [{
+                alias: 'ngpComboboxCompareWith',
+            }]));
         /** The position of the dropdown. */
-        this.placement = input(this.config.placement, {
-            alias: 'ngpComboboxDropdownPlacement',
-        });
+        this.placement = input(this.config.placement, ...(ngDevMode ? [{ debugName: "placement", alias: 'ngpComboboxDropdownPlacement' }] : [{
+                alias: 'ngpComboboxDropdownPlacement',
+            }]));
         /** The container for the dropdown. */
-        this.container = input(this.config.container, {
-            alias: 'ngpComboboxDropdownContainer',
-        });
+        this.container = input(this.config.container, ...(ngDevMode ? [{ debugName: "container", alias: 'ngpComboboxDropdownContainer' }] : [{
+                alias: 'ngpComboboxDropdownContainer',
+            }]));
         /**
          * Store the combobox input
          * @internal
          */
-        this.input = signal(undefined);
+        this.input = signal(undefined, ...(ngDevMode ? [{ debugName: "input" }] : []));
         /**
          * Store the combobox button.
          * @internal
          */
-        this.button = signal(undefined);
+        this.button = signal(undefined, ...(ngDevMode ? [{ debugName: "button" }] : []));
         /**
          * Store the combobox portal.
          * @internal
          */
-        this.portal = signal(undefined);
+        this.portal = signal(undefined, ...(ngDevMode ? [{ debugName: "portal" }] : []));
         /**
          * Store the combobox dropdown.
          * @internal
          */
-        this.dropdown = signal(undefined);
+        this.dropdown = signal(undefined, ...(ngDevMode ? [{ debugName: "dropdown" }] : []));
         /**
          * Store the combobox options.
          * @internal
          */
-        this.options = signal([]);
+        this.options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : []));
         /**
          * Access the overlay
          * @internal
          */
-        this.overlay = computed(() => this.portal()?.overlay());
+        this.overlay = computed(() => this.portal()?.overlay(), ...(ngDevMode ? [{ debugName: "overlay" }] : []));
         /**
          * The open state of the combobox.
          * @internal
          */
-        this.open = computed(() => this.overlay()?.isOpen() ?? false);
+        this.open = computed(() => this.overlay()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "open" }] : []));
         /**
          * The active key descendant manager.
          * @internal
@@ -603,7 +607,7 @@ class NgpCombobox {
             items: this.options,
         });
         /** The control status */
-        this.controlStatus = computed(() => this.input()?.controlStatus());
+        this.controlStatus = computed(() => this.input()?.controlStatus(), ...(ngDevMode ? [{ debugName: "controlStatus" }] : []));
         /** The state of the combobox. */
         this.state = comboboxState(this);
         ngpInteractions({
@@ -1034,10 +1038,10 @@ class NgpCombobox {
         }
         this.closeDropdown();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpCombobox, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpCombobox, isStandalone: true, selector: "[ngpCombobox]", inputs: { value: { classPropertyName: "value", publicName: "ngpComboboxValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "ngpComboboxMultiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpComboboxDisabled", isSignal: true, isRequired: false, transformFunction: null }, 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": "state.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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpCombobox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpCombobox, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpCombobox]',
@@ -1045,7 +1049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                     providers: [provideComboboxState()],
                     host: {
                         '[attr.tabindex]': 'input() ? -1 : (state.disabled() ? -1 : 0)',
-                        '[attr.data-open]': 'state.open() ? "" : undefined',
+                        '[attr.data-open]': 'open() ? "" : undefined',
                         '[attr.data-disabled]': 'state.disabled() ? "" : undefined',
                         '[attr.data-multiple]': 'state.multiple() ? "" : undefined',
                         '[attr.data-invalid]': 'controlStatus()?.invalid ? "" : undefined',
@@ -1056,7 +1060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         '[attr.data-pending]': 'controlStatus()?.pending ? "" : undefined',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { 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 }] }], handleKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }], onBlur: [{