@radix-ng/primitives 1.1.0 → 1.1.1

package/fesm2022/radix-ng-primitives-number-field.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { numberAttribute, computed, signal, inject, DestroyRef, input, booleanAttribute, Directive, ElementRef, model, output, effect, untracked, NgModule } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/core';
-import { createContext, clamp, getActiveElement, RdxFormUiControlBase, injectControlValueAccessor, injectId, createCancelableChangeEventDetails, RdxControlValueAccessor } from '@radix-ng/primitives/core';
+import { createContext, clamp, getActiveElement, RdxFormUiControlBase, injectControlValueAccessor, injectId, useNativeFormControl, serializeNativeFormValue, createCancelableChangeEventDetails, RdxControlValueAccessor } from '@radix-ng/primitives/core';
 import { NumberFormatter, NumberParser } from '@internationalized/number';
 import * as i1$1 from '@radix-ng/primitives/portal';
 import { RdxPortal } from '@radix-ng/primitives/portal';
@@ -362,15 +362,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         }] });
 
 /**
- * The hidden native `input[type=number]` that mirrors the field value for native form submission
- * and browser constraint validation (min/max/step/required). Place it inside the root, alongside
- * the visible `[rdxNumberFieldInput]`.
+ * The optional hidden native `input[type=number]` that mirrors the field value for browser constraint
+ * validation (min/max/step/required) and autofill. When present it also owns native form serialization;
+ * without it the root generates a plain hidden entry. Place it inside the root, alongside the visible
+ * `[rdxNumberFieldInput]`.
  *
  * @see https://base-ui.com/react/components/number-field
  */
 class RdxNumberFieldHiddenInput {
     constructor() {
         this.rootContext = injectNumberFieldRootContext();
+        const input = inject(ElementRef).nativeElement;
+        this.rootContext.registerNativeInput(input);
+        inject(DestroyRef).onDestroy(() => this.rootContext.registerNativeInput(null));
     }
     /** Move focus to the visible input when the hidden one is focused (e.g. via form validation). */
     onFocus() {
@@ -413,7 +417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '(change)': 'onChange($event)'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * A stepper button that increases the field value when clicked or held.
@@ -720,10 +724,10 @@ class RdxNumberFieldRoot extends RdxFormUiControlBase {
          * @default false
          */
         this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Name of the hidden input rendered by `[rdxNumberFieldHiddenInput]`, for form submission. */
+        /** Name used when serializing this field into native `FormData`. */
         this.name = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
-        /** Id of the form the hidden input belongs to. Useful when it is rendered outside the form. */
+        /** Id of an external form that owns this field. */
         this.form = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "form" }] : /* istanbul ignore next */ []));
         /** The uncontrolled value of the field when it is initially rendered. */
@@ -748,6 +752,9 @@ class RdxNumberFieldRoot extends RdxFormUiControlBase {
         /** @ignore The native input element, registered by `[rdxNumberFieldInput]`. */
         this.inputEl = signal(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+        /** @ignore Optional native number input that owns constraints/autofill and form serialization. */
+        this.nativeInputEl = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nativeInputEl" }] : /* istanbul ignore next */ []));
         /**
          * @ignore Gate that prevents the formatted value from overwriting in-progress typing.
          * Plain field (not a signal): it is toggled imperatively inside event handlers.
@@ -771,6 +778,26 @@ class RdxNumberFieldRoot extends RdxFormUiControlBase {
         /** @ignore The current numeric value (`null` when empty). */
         this.currentValue = computed(() => this.cva.value() ?? null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+        // The hidden number input remains an opt-in constraint-validation/autofill bridge and owns native
+        // serialization when present. Otherwise the shared layer supplies a plain hidden form control.
+        this.nativeFormControl = useNativeFormControl({
+            name: this.name,
+            form: this.form,
+            disabled: this.isDisabled,
+            value: this.currentValue,
+            serialize: serializeNativeFormValue,
+            hasNativeControl: computed(() => this.nativeInputEl() !== null),
+            defaultValue: () => this.defaultValue() ?? this.cva.value() ?? null,
+            onReset: (value) => {
+                this.value.set(value);
+                if (!this.resetNgControl(value)) {
+                    this.cva.setValue(value);
+                }
+                this.allowInputSync = true;
+                this.setInputValue(this.formatNumber(value));
+                this.formUi.resetInteractionState?.();
+            }
+        });
         /** @ignore */
         this.minWithDefault = computed(() => this.min() ?? Number.MIN_SAFE_INTEGER, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "minWithDefault" }] : /* istanbul ignore next */ []));
@@ -849,6 +876,10 @@ class RdxNumberFieldRoot extends RdxFormUiControlBase {
     registerInput(el) {
         this.inputEl.set(el);
     }
+    /** @ignore Registers the optional native constraint/autofill input. */
+    registerNativeInput(el) {
+        this.nativeInputEl.set(el);
+    }
     /** @ignore Sets the displayed text without changing the numeric value. */
     setInputValue(text) {
         this.inputValue.set(text);