@radix-ng/primitives 1.0.5 → 1.0.7

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

@@ -122,7 +122,8 @@ function toValidatedNumber(value, options) {
  */
 function createPressAndHold(options) {
     const destroyRef = inject(DestroyRef);
-    const isPressing = signal(false, ...(ngDevMode ? [{ debugName: "isPressing" }] : /* istanbul ignore next */ []));
+    const isPressing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPressing" }] : /* istanbul ignore next */ []));
     let startEvent = null;
     let startX = 0;
     let startY = 0;
@@ -221,9 +222,11 @@ class RdxNumberFieldButton {
         /** @ignore Disabled for display/focus purposes (own state, root disabled, or bound reached). */
         this.buttonDisabled = computed(() => this.disabled() ||
             this.rootContext.isDisabled() ||
-            (this.isIncrement ? this.rootContext.isIncrementDisabled() : this.rootContext.isDecrementDisabled()), ...(ngDevMode ? [{ debugName: "buttonDisabled" }] : /* istanbul ignore next */ []));
+            (this.isIncrement ? this.rootContext.isIncrementDisabled() : this.rootContext.isDecrementDisabled()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonDisabled" }] : /* istanbul ignore next */ []));
         /** @ignore Disabled for interaction purposes (also blocked while read-only). */
-        this.interactionDisabled = computed(() => this.buttonDisabled() || this.rootContext.readonly(), ...(ngDevMode ? [{ debugName: "interactionDisabled" }] : /* istanbul ignore next */ []));
+        this.interactionDisabled = computed(() => this.buttonDisabled() || this.rootContext.readonly(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "interactionDisabled" }] : /* istanbul ignore next */ []));
         const root = this.rootContext;
         this.press = createPressAndHold({
             disabled: () => this.interactionDisabled(),
@@ -280,19 +283,23 @@ class RdxNumberFieldButton {
             root.setValue(parsed, this.pressReason, event, this.direction);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNumberFieldButton, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "tabindex": "-1" }, listeners: { "click": "onClick($event)", "pointerdown": "onPointerDown($event)", "contextmenu": "$event.preventDefault()" }, properties: { "attr.aria-controls": "rootContext.id()", "attr.aria-readonly": "rootContext.readonly() ? \"true\" : undefined", "attr.disabled": "buttonDisabled() ? \"\" : undefined", "attr.data-disabled": "buttonDisabled() ? \"\" : undefined", "attr.data-pressed": "press.isPressing() ? \"\" : undefined", "style.user-select": "\"none\"", "style.-webkit-user-select": "\"none\"" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxNumberFieldButton, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "tabindex": "-1" }, listeners: { "click": "onClick($event)", "pointerdown": "onPointerDown($event)", "contextmenu": "$event.preventDefault()" }, properties: { "attr.aria-controls": "rootContext.id()", "attr.disabled": "interactionDisabled() ? \"\" : undefined", "attr.data-disabled": "buttonDisabled() ? \"\" : undefined", "attr.data-readonly": "rootContext.readonly() ? \"\" : undefined", "attr.data-pressed": "press.isPressing() ? \"\" : undefined", "style.user-select": "\"none\"", "style.-webkit-user-select": "\"none\"" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldButton, decorators: [{
             type: Directive,
             args: [{
                     host: {
                         type: 'button',
                         tabindex: '-1',
                         '[attr.aria-controls]': 'rootContext.id()',
-                        '[attr.aria-readonly]': 'rootContext.readonly() ? "true" : undefined',
-                        '[attr.disabled]': 'buttonDisabled() ? "" : undefined',
+                        // Read-only blocks interaction too, so the button is natively disabled (Base UI passes
+                        // `disabled: disabled || readOnly` to useButton). `aria-readonly` is intentionally NOT set —
+                        // it isn't a valid state for `role=button`. `data-disabled` stays tied to the true disabled
+                        // state so styling can tell disabled apart from read-only (`data-readonly`).
+                        '[attr.disabled]': 'interactionDisabled() ? "" : undefined',
                         '[attr.data-disabled]': 'buttonDisabled() ? "" : undefined',
+                        '[attr.data-readonly]': 'rootContext.readonly() ? "" : undefined',
                         '[attr.data-pressed]': 'press.isPressing() ? "" : undefined',
                         '[style.user-select]': '"none"',
                         '[style.-webkit-user-select]': '"none"',
@@ -313,10 +320,10 @@ class RdxNumberFieldDecrement extends RdxNumberFieldButton {
         super(...arguments);
         this.isIncrement = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldDecrement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNumberFieldDecrement, isStandalone: true, selector: "button[rdxNumberFieldDecrement]", host: { attributes: { "aria-label": "Decrease" } }, exportAs: ["rdxNumberFieldDecrement"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldDecrement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxNumberFieldDecrement, isStandalone: true, selector: "button[rdxNumberFieldDecrement]", host: { attributes: { "aria-label": "Decrease" } }, exportAs: ["rdxNumberFieldDecrement"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldDecrement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldDecrement, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[rdxNumberFieldDecrement]',
@@ -336,10 +343,10 @@ class RdxNumberFieldGroup {
     constructor() {
         this.rootContext = injectNumberFieldRootContext();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNumberFieldGroup, isStandalone: true, selector: "div[rdxNumberFieldGroup]", host: { attributes: { "role": "group" }, properties: { "attr.data-disabled": "rootContext.isDisabled() ? \"\" : undefined", "attr.data-readonly": "rootContext.readonly() ? \"\" : undefined", "attr.data-required": "rootContext.required() ? \"\" : undefined", "attr.data-scrubbing": "rootContext.isScrubbing() ? \"\" : undefined" } }, exportAs: ["rdxNumberFieldGroup"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxNumberFieldGroup, isStandalone: true, selector: "div[rdxNumberFieldGroup]", host: { attributes: { "role": "group" }, properties: { "attr.data-disabled": "rootContext.isDisabled() ? \"\" : undefined", "attr.data-readonly": "rootContext.readonly() ? \"\" : undefined", "attr.data-required": "rootContext.required() ? \"\" : undefined", "attr.data-scrubbing": "rootContext.isScrubbing() ? \"\" : undefined" } }, exportAs: ["rdxNumberFieldGroup"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[rdxNumberFieldGroup]',
@@ -381,10 +388,10 @@ class RdxNumberFieldHiddenInput {
         root.setValue(parsedValue, 'none', event);
         root.commitValue(root.lastChangedValue ?? root.currentValue());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldHiddenInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNumberFieldHiddenInput, isStandalone: true, selector: "input[rdxNumberFieldHiddenInput]", host: { attributes: { "type": "number", "tabindex": "-1", "aria-hidden": "true" }, listeners: { "focus": "onFocus()", "change": "onChange($event)" }, properties: { "attr.name": "rootContext.name()", "attr.form": "rootContext.form()", "value": "rootContext.currentValue() ?? \"\"", "attr.min": "rootContext.min()", "attr.max": "rootContext.max()", "attr.step": "rootContext.step()", "disabled": "rootContext.isDisabled()", "attr.required": "rootContext.required() ? \"\" : undefined" }, styleAttribute: "transform: translateX(-100%); position: absolute; overflow: hidden; pointer-events: none; opacity: 0; margin: 0;" }, exportAs: ["rdxNumberFieldHiddenInput"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldHiddenInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxNumberFieldHiddenInput, isStandalone: true, selector: "input[rdxNumberFieldHiddenInput]", host: { attributes: { "type": "number", "tabindex": "-1", "aria-hidden": "true" }, listeners: { "focus": "onFocus()", "change": "onChange($event)" }, properties: { "attr.name": "rootContext.name()", "attr.form": "rootContext.form()", "value": "rootContext.currentValue() ?? \"\"", "attr.min": "rootContext.min()", "attr.max": "rootContext.max()", "attr.step": "rootContext.step()", "disabled": "rootContext.isDisabled()", "attr.required": "rootContext.required() ? \"\" : undefined" }, styleAttribute: "transform: translateX(-100%); position: absolute; overflow: hidden; pointer-events: none; opacity: 0; margin: 0;" }, exportAs: ["rdxNumberFieldHiddenInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldHiddenInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldHiddenInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[rdxNumberFieldHiddenInput]',
@@ -418,10 +425,10 @@ class RdxNumberFieldIncrement extends RdxNumberFieldButton {
         super(...arguments);
         this.isIncrement = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldIncrement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNumberFieldIncrement, isStandalone: true, selector: "button[rdxNumberFieldIncrement]", host: { attributes: { "aria-label": "Increase" } }, exportAs: ["rdxNumberFieldIncrement"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldIncrement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxNumberFieldIncrement, isStandalone: true, selector: "button[rdxNumberFieldIncrement]", host: { attributes: { "aria-label": "Increase" } }, exportAs: ["rdxNumberFieldIncrement"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldIncrement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldIncrement, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[rdxNumberFieldIncrement]',
@@ -581,10 +588,10 @@ class RdxNumberFieldInput {
             reason: 'wheel'
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNumberFieldInput, isStandalone: true, selector: "input[rdxNumberFieldInput]", host: { attributes: { "type": "text", "autocomplete": "off", "autocorrect": "off", "spellcheck": "false", "aria-roledescription": "Number field" }, listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)", "input": "onInput($event)", "beforeinput": "onBeforeInput($event)", "keydown": "onKeydown($event)", "paste": "onPaste($event)", "wheel": "onWheel($event)" }, properties: { "id": "rootContext.id()", "value": "rootContext.inputValue()", "attr.inputmode": "rootContext.inputMode()", "attr.aria-invalid": "rootContext.required() && rootContext.currentValue() === null ? \"true\" : undefined", "disabled": "rootContext.isDisabled()", "attr.readonly": "rootContext.readonly() ? \"\" : undefined", "required": "rootContext.required()", "attr.data-disabled": "rootContext.isDisabled() ? \"\" : undefined", "attr.data-readonly": "rootContext.readonly() ? \"\" : undefined", "attr.data-required": "rootContext.required() ? \"\" : undefined" } }, exportAs: ["rdxNumberFieldInput"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxNumberFieldInput, isStandalone: true, selector: "input[rdxNumberFieldInput]", host: { attributes: { "type": "text", "autocomplete": "off", "autocorrect": "off", "spellcheck": "false", "aria-roledescription": "Number field" }, listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)", "input": "onInput($event)", "beforeinput": "onBeforeInput($event)", "keydown": "onKeydown($event)", "paste": "onPaste($event)", "wheel": "onWheel($event)" }, properties: { "id": "rootContext.id()", "value": "rootContext.inputValue()", "attr.inputmode": "rootContext.inputMode()", "attr.aria-invalid": "rootContext.required() && rootContext.currentValue() === null ? \"true\" : undefined", "disabled": "rootContext.isDisabled()", "attr.readonly": "rootContext.readonly() ? \"\" : undefined", "required": "rootContext.required()", "attr.data-disabled": "rootContext.isDisabled() ? \"\" : undefined", "attr.data-readonly": "rootContext.readonly() ? \"\" : undefined", "attr.data-required": "rootContext.required() ? \"\" : undefined" } }, exportAs: ["rdxNumberFieldInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[rdxNumberFieldInput]',
@@ -648,7 +655,8 @@ class RdxNumberFieldRoot {
         /** @ignore */
         this.cva = injectControlValueAccessor();
         /** The id of the input element. */
-        this.id = input(injectId('rdx-number-field-'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        this.id = input(injectId('rdx-number-field-'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /** The minimum value of the field. */
         this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
         /** The maximum value of the field. */
@@ -685,9 +693,11 @@ class RdxNumberFieldRoot {
          */
         this.allowWheelScrub = input(false, { ...(ngDevMode ? { debugName: "allowWheelScrub" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Options used to format the input value (forwarded to `Intl.NumberFormat`). */
-        this.format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : /* istanbul ignore next */ []));
+        this.format = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "format" }] : /* istanbul ignore next */ []));
         /** The locale used to parse and format the value. */
-        this.locale = input('en', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        this.locale = input('en', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
         /**
          * When `true`, the user cannot interact with the field.
          * @default false
@@ -704,13 +714,17 @@ class RdxNumberFieldRoot {
          */
         this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Name of the hidden input rendered by `[rdxNumberFieldHiddenInput]`, for form submission. */
-        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+        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. */
-        this.form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : /* istanbul ignore next */ []));
+        this.form = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "form" }] : /* istanbul ignore next */ []));
         /** The uncontrolled value of the field when it is initially rendered. */
-        this.defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+        this.defaultValue = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : /* istanbul ignore next */ []));
         /** The controlled value of the field. Use with `(onValueChange)` or two-way `[(value)]`. */
-        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.value = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /** Emitted when the value changes (during interaction or programmatically). */
         this.onValueChange = output();
         /**
@@ -719,11 +733,14 @@ class RdxNumberFieldRoot {
          */
         this.onValueCommitted = output();
         /** @ignore The formatted text shown in the input element. */
-        this.inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
+        this.inputValue = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
         /** @ignore Whether a scrub gesture is in progress. */
-        this.isScrubbing = signal(false, ...(ngDevMode ? [{ debugName: "isScrubbing" }] : /* istanbul ignore next */ []));
+        this.isScrubbing = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isScrubbing" }] : /* istanbul ignore next */ []));
         /** @ignore The native input element, registered by `[rdxNumberFieldInput]`. */
-        this.inputEl = signal(undefined, ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+        this.inputEl = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputEl" }] : /* 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.
@@ -734,32 +751,40 @@ class RdxNumberFieldRoot {
         /** @ignore Whether a programmatic change is awaiting a commit. */
         this.hasPendingCommit = false;
         /** @ignore */
-        this.isDisabled = computed(() => !!this.cva.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.isDisabled = computed(() => !!this.cva.disabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
         this.formatter = useNumberFormatter(this.locale, this.format);
         this.parser = useNumberParser(this.locale, this.format);
         /** @ignore The current numeric value (`null` when empty). */
-        this.currentValue = computed(() => this.cva.value() ?? null, ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+        this.currentValue = computed(() => this.cva.value() ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.minWithDefault = computed(() => this.min() ?? Number.MIN_SAFE_INTEGER, ...(ngDevMode ? [{ debugName: "minWithDefault" }] : /* istanbul ignore next */ []));
+        this.minWithDefault = computed(() => this.min() ?? Number.MIN_SAFE_INTEGER, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minWithDefault" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.maxWithDefault = computed(() => this.max() ?? Number.MAX_SAFE_INTEGER, ...(ngDevMode ? [{ debugName: "maxWithDefault" }] : /* istanbul ignore next */ []));
+        this.maxWithDefault = computed(() => this.max() ?? Number.MAX_SAFE_INTEGER, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxWithDefault" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.minWithZeroDefault = computed(() => this.min() ?? 0, ...(ngDevMode ? [{ debugName: "minWithZeroDefault" }] : /* istanbul ignore next */ []));
+        this.minWithZeroDefault = computed(() => this.min() ?? 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minWithZeroDefault" }] : /* istanbul ignore next */ []));
         /** @ignore Whether incrementing further is a no-op (value already at max). */
         this.isIncrementDisabled = computed(() => {
             const value = this.currentValue();
             return value != null && value >= this.maxWithDefault();
-        }, ...(ngDevMode ? [{ debugName: "isIncrementDisabled" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isIncrementDisabled" }] : /* istanbul ignore next */ []));
         /** @ignore Whether decrementing further is a no-op (value already at min). */
         this.isDecrementDisabled = computed(() => {
             const value = this.currentValue();
             return value != null && value <= this.minWithDefault();
-        }, ...(ngDevMode ? [{ debugName: "isDecrementDisabled" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDecrementDisabled" }] : /* istanbul ignore next */ []));
         /** @ignore Software-keyboard hint based on whether the format allows fractional digits. */
         this.inputMode = computed(() => {
             const hasDecimals = (this.formatter().resolvedOptions().maximumFractionDigits ?? 0) > 0;
             return hasDecimals ? 'decimal' : 'numeric';
-        }, ...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
         // Apply the uncontrolled initial value once it is provided.
         effect(() => {
             const dv = this.defaultValue();
@@ -878,10 +903,10 @@ class RdxNumberFieldRoot {
         this.value.set(value);
         this.cva.setValue(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNumberFieldRoot, isStandalone: true, selector: "div[rdxNumberFieldRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, smallStep: { classPropertyName: "smallStep", publicName: "smallStep", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null }, snapOnStep: { classPropertyName: "snapOnStep", publicName: "snapOnStep", isSignal: true, isRequired: false, transformFunction: null }, allowOutOfRange: { classPropertyName: "allowOutOfRange", publicName: "allowOutOfRange", isSignal: true, isRequired: false, transformFunction: null }, allowWheelScrub: { classPropertyName: "allowWheelScrub", publicName: "allowWheelScrub", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange", onValueCommitted: "onValueCommitted" }, host: { attributes: { "role": "group" }, properties: { "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-readonly": "readonly() ? \"\" : undefined", "attr.data-required": "required() ? \"\" : undefined", "attr.data-scrubbing": "isScrubbing() ? \"\" : undefined" } }, providers: [provideNumberFieldRootContext(() => inject(RdxNumberFieldRoot))], exportAs: ["rdxNumberFieldRoot"], hostDirectives: [{ directive: i1.RdxControlValueAccessor, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxNumberFieldRoot, isStandalone: true, selector: "div[rdxNumberFieldRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, smallStep: { classPropertyName: "smallStep", publicName: "smallStep", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null }, snapOnStep: { classPropertyName: "snapOnStep", publicName: "snapOnStep", isSignal: true, isRequired: false, transformFunction: null }, allowOutOfRange: { classPropertyName: "allowOutOfRange", publicName: "allowOutOfRange", isSignal: true, isRequired: false, transformFunction: null }, allowWheelScrub: { classPropertyName: "allowWheelScrub", publicName: "allowWheelScrub", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange", onValueCommitted: "onValueCommitted" }, host: { attributes: { "role": "group" }, properties: { "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-readonly": "readonly() ? \"\" : undefined", "attr.data-required": "required() ? \"\" : undefined", "attr.data-scrubbing": "isScrubbing() ? \"\" : undefined" } }, providers: [provideNumberFieldRootContext(() => inject(RdxNumberFieldRoot))], exportAs: ["rdxNumberFieldRoot"], hostDirectives: [{ directive: i1.RdxControlValueAccessor, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldRoot, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldRoot, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[rdxNumberFieldRoot]',
@@ -954,7 +979,8 @@ class RdxNumberFieldScrubArea {
          * The direction the cursor must move to change the value.
          * @default 'horizontal'
          */
-        this.direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+        this.direction = input('horizontal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
         /**
          * How many pixels the cursor must move before the value changes. Higher is less sensitive.
          * @default 2
@@ -964,10 +990,14 @@ class RdxNumberFieldScrubArea {
          * If set, the distance the cursor may move from the scrub area center before it loops back.
          */
         this.teleportDistance = input(undefined, { ...(ngDevMode ? { debugName: "teleportDistance" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
-        this.isScrubbing = signal(false, ...(ngDevMode ? [{ debugName: "isScrubbing" }] : /* istanbul ignore next */ []));
-        this.isTouchInput = signal(false, ...(ngDevMode ? [{ debugName: "isTouchInput" }] : /* istanbul ignore next */ []));
-        this.isPointerLockDenied = signal(false, ...(ngDevMode ? [{ debugName: "isPointerLockDenied" }] : /* istanbul ignore next */ []));
-        this.cursorEl = signal(null, ...(ngDevMode ? [{ debugName: "cursorEl" }] : /* istanbul ignore next */ []));
+        this.isScrubbing = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isScrubbing" }] : /* istanbul ignore next */ []));
+        this.isTouchInput = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isTouchInput" }] : /* istanbul ignore next */ []));
+        this.isPointerLockDenied = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPointerLockDenied" }] : /* istanbul ignore next */ []));
+        this.cursorEl = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cursorEl" }] : /* istanbul ignore next */ []));
         this.scrubAreaEl = inject(ElementRef).nativeElement;
         this.isScrubbingRef = false;
         this.didMove = false;
@@ -981,7 +1011,8 @@ class RdxNumberFieldScrubArea {
             isPointerLockDenied: this.isPointerLockDenied.asReadonly(),
             registerCursor: (el) => this.cursorEl.set(el)
         };
-        this.canScrub = computed(() => !this.rootContext.isDisabled() && !this.rootContext.readonly(), ...(ngDevMode ? [{ debugName: "canScrub" }] : /* istanbul ignore next */ []));
+        this.canScrub = computed(() => !this.rootContext.isDisabled() && !this.rootContext.readonly(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canScrub" }] : /* istanbul ignore next */ []));
         const root = this.rootContext;
         // Register global listeners only while actively scrubbing.
         effect((onCleanup) => {
@@ -1145,10 +1176,10 @@ class RdxNumberFieldScrubArea {
             cursor.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / this.visualScale})`;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldScrubArea, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNumberFieldScrubArea, isStandalone: true, selector: "[rdxNumberFieldScrubArea]", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, pixelSensitivity: { classPropertyName: "pixelSensitivity", publicName: "pixelSensitivity", isSignal: true, isRequired: false, transformFunction: null }, teleportDistance: { classPropertyName: "teleportDistance", publicName: "teleportDistance", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, listeners: { "pointerdown": "onPointerDown($event)", "touchstart": "onTouchStart($event)" }, properties: { "style.touch-action": "\"none\"", "style.user-select": "\"none\"", "style.-webkit-user-select": "\"none\"", "attr.data-disabled": "rootContext.isDisabled() ? \"\" : undefined", "attr.data-readonly": "rootContext.readonly() ? \"\" : undefined", "attr.data-scrubbing": "isScrubbing() ? \"\" : undefined" } }, providers: [provideNumberFieldScrubAreaContext(() => inject(RdxNumberFieldScrubArea).context)], exportAs: ["rdxNumberFieldScrubArea"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldScrubArea, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxNumberFieldScrubArea, isStandalone: true, selector: "[rdxNumberFieldScrubArea]", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, pixelSensitivity: { classPropertyName: "pixelSensitivity", publicName: "pixelSensitivity", isSignal: true, isRequired: false, transformFunction: null }, teleportDistance: { classPropertyName: "teleportDistance", publicName: "teleportDistance", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, listeners: { "pointerdown": "onPointerDown($event)", "touchstart": "onTouchStart($event)" }, properties: { "style.touch-action": "\"none\"", "style.user-select": "\"none\"", "style.-webkit-user-select": "\"none\"", "attr.data-disabled": "rootContext.isDisabled() ? \"\" : undefined", "attr.data-readonly": "rootContext.readonly() ? \"\" : undefined", "attr.data-scrubbing": "isScrubbing() ? \"\" : undefined" } }, providers: [provideNumberFieldScrubAreaContext(() => inject(RdxNumberFieldScrubArea).context)], exportAs: ["rdxNumberFieldScrubArea"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldScrubArea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldScrubArea, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNumberFieldScrubArea]',
@@ -1187,14 +1218,15 @@ class RdxNumberFieldScrubAreaCursor {
         this.shouldRender = computed(() => this.scrubContext.isScrubbing() &&
             !isWebKitBrowser() &&
             !this.scrubContext.isTouchInput() &&
-            !this.scrubContext.isPointerLockDenied(), ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
+            !this.scrubContext.isPointerLockDenied(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
         this.scrubContext.registerCursor(this.elementRef.nativeElement);
         inject(DestroyRef).onDestroy(() => this.scrubContext.registerCursor(null));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldScrubAreaCursor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNumberFieldScrubAreaCursor, isStandalone: true, selector: "[rdxNumberFieldScrubAreaCursor]", host: { attributes: { "role": "presentation" }, properties: { "style.position": "\"fixed\"", "style.top.px": "0", "style.left.px": "0", "style.pointer-events": "\"none\"", "style.opacity": "shouldRender() ? \"1\" : \"0\"" } }, exportAs: ["rdxNumberFieldScrubAreaCursor"], hostDirectives: [{ directive: i1$1.RdxPortal }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldScrubAreaCursor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxNumberFieldScrubAreaCursor, isStandalone: true, selector: "[rdxNumberFieldScrubAreaCursor]", host: { attributes: { "role": "presentation" }, properties: { "style.position": "\"fixed\"", "style.top.px": "0", "style.left.px": "0", "style.pointer-events": "\"none\"", "style.opacity": "shouldRender() ? \"1\" : \"0\"" } }, exportAs: ["rdxNumberFieldScrubAreaCursor"], hostDirectives: [{ directive: i1$1.RdxPortal }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldScrubAreaCursor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldScrubAreaCursor, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNumberFieldScrubAreaCursor]',
@@ -1222,8 +1254,8 @@ const _imports = [
     RdxNumberFieldScrubAreaCursor
 ];
 class RdxNumberFieldModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldModule, imports: [RdxNumberFieldRoot,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldModule, imports: [RdxNumberFieldRoot,
             RdxNumberFieldGroup,
             RdxNumberFieldInput,
             RdxNumberFieldHiddenInput,
@@ -1238,9 +1270,9 @@ class RdxNumberFieldModule {
             RdxNumberFieldDecrement,
             RdxNumberFieldScrubArea,
             RdxNumberFieldScrubAreaCursor] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNumberFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [..._imports],