From 6f331f54b5eed87756c33eb32f10ec45a13aecc3 Mon Sep 17 00:00:00 2001
From: Ervin Sabic <esabic@gearsite.net>
Date: Tue, 22 Apr 2025 12:24:43 -0500
Subject: [PATCH 1/3] additional tests and better negative number support.
 performance improvements and typo fixes

---
 docs/usage/controls.md                        |  25 +
 .../components/control/local-number.gts       | 483 ++++++++++++++++++
 .../src/-private/components/field.gts         |  18 +
 test-app/app/controllers/index.ts             |   1 +
 test-app/app/templates/index.hbs              |  20 +-
 ...eadless-form-control-local-number-test.gts | 409 +++++++++++++++
 6 files changed, 955 insertions(+), 1 deletion(-)
 create mode 100644 packages/ember-headless-form/src/-private/components/control/local-number.gts
 create mode 100644 test-app/tests/integration/components/headless-form-control-local-number-test.gts

diff --git a/docs/usage/controls.md b/docs/usage/controls.md
index 42077170..2065bda1 100644
--- a/docs/usage/controls.md
+++ b/docs/usage/controls.md
@@ -159,3 +159,28 @@ Renders a native `<select>` dropdown. It will yield another `Option` component f
   <button type='submit'>Submit</button>
 </HeadlessForm>
 ```
+
+## Localized Number
+
+This will render a text input that attempts to format a number using a given Locale and number options. You would set `@locale` to something like `"en-US"` and `@formatOptions` would contain the [options that you would typically pass to a Intl.NumberFormat constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat). The supported options are `decimal`, `currency`, `percent`, and sometimes `unit` depending on the specified locale. If no locale is specified it will use the user's locale set by `navigator.language`.
+
+### Return Values
+The value that is set on the given data will always be a number. Meaning something like `"1 234,56 $US"` when formatting for US Dollars with a French Locale will set the actual data to `1234.56`. What is shown in the text box is a display to the user. As for percentages, those are returned as numbers, meaning `"10%"` will set the value to `0.10`. 
+
+```hbs
+<HeadlessForm as |form|>
+  <form.Field @name='donation' as |field|>
+    <div class='my-2 flex flex-col'>
+      <field.Label>
+        How much would you like to donate?
+      </field.Label>
+      <field.LocalNumber
+        class='border rounded px-2'
+        @locale='en-US'
+        @formatOptions={{hash style='currency' currency='USD'}}
+        required
+      />
+    </div>
+  </form.Field>
+</HeadlessForm>
+```
\ No newline at end of file
diff --git a/packages/ember-headless-form/src/-private/components/control/local-number.gts b/packages/ember-headless-form/src/-private/components/control/local-number.gts
new file mode 100644
index 00000000..62ba2126
--- /dev/null
+++ b/packages/ember-headless-form/src/-private/components/control/local-number.gts
@@ -0,0 +1,483 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+import { on } from '@ember/modifier';
+import { action }from '@ember/object';
+
+/**
+ *  This component works to solve using localized number inputs and will render a text field to support it as
+ *  a normal number input field only supports "." as a decimal separator no matter the locale. It will format
+ *  the numbers correctly as the user types into the field. When data is presented, it is formatted
+ *  into the expected decimal value for data storage. Ex, a German user may type 1.234,56 but this data should be
+ *  saved in the database as 1234.56.
+ *
+ *  You should be able to use the majority of the input options available to Intl.NumberFormat aside from scientific notation
+ *  and compact notation.
+ */
+
+export interface HeadlessFormControlLocalNumberComponentSignature {
+  Element: HTMLInputElement;
+  Args: {
+    /**
+     * Some inputs are specific to locales, like numbers.
+     * Ex:
+     * "en-us"
+     * If this ends up being undefined it will simply use the locale of the user.
+     *
+     * ? While the linked resource below mentions you can pass in a Intl.Locale object, the current library we use for this doesn't
+     * ? support it. So stick with strings using a BCP 47 language tag.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#locales
+     * @see https://datatracker.ietf.org/doc/html/rfc4647
+     */
+    locale?: string
+
+    /**
+     * Adding the ability to add additional options for the formatter. This currently only applies to number types.
+     * Ex:
+     * { style: 'currency', currency: 'EUR' }
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    formatOptions?: object,
+
+    // the following are private arguments curried by the component helper, so users will never have to use those
+
+    /*
+     * @internal
+     */
+    value: string | number;
+
+    /*
+     * @internal
+     */
+    name: string;
+
+    /*
+     * @internal
+     */
+    fieldId: string;
+
+    /*
+     * @internal
+     */
+    setValue: (value: string | number) => void;
+
+    /*
+     * @internal
+     */
+    invalid: boolean;
+
+    /*
+     * @internal
+     */
+    errorId: string;
+  }
+}
+
+class LocalNumberInputValue {
+    /**
+     * Instance of the Intl.NumberFormat created using arguments provided on initialization
+     */
+    public readonly toFormatter: Intl.NumberFormat;
+    /**
+     * Result of Intl.NumberFormat().formatToParts
+     */
+    public parts!: Array<Intl.NumberFormatPart>;
+    /**
+     * The "true" stored value of the number we are working with. Ex $1,500.72 would be "1500.72"
+     */
+    public dataValue!: number;
+    /**
+     * Resolved options of Intl.NumberFormat
+     */
+    public readonly resolvedOptions;
+    /**
+     * Base 10 numbers based on the given locale. Providing support for non-latin numbers.
+     */
+    public readonly localeNumbers: Array<string>;
+    /**
+     * Decimal separator for the formatting
+     */
+    public readonly decimalSep: string;
+    /**
+     * Negative symbol for formatting
+     */
+    public readonly negative: string;
+    /**
+     *
+     */
+    public readonly dataRegex: RegExp;
+
+    constructor(locale = "en-US", options:Intl.NumberFormatOptions = {}, value:number|string = 0){
+      // Build the initial formatter with given options and value then save the parts to use later.
+      this.toFormatter = new Intl.NumberFormat(locale, options);
+      this.resolvedOptions = this.toFormatter.resolvedOptions();
+
+      // We setup a temporary formatter with only the locale because some formatters like units may mess with the number itself.
+      const tmpFormatter = new Intl.NumberFormat(locale, {});
+
+      // Build numbers 0-9 for whatever locale we're working with. Supports base 10 number systems.
+      this.localeNumbers = Array.from({ length: 10 }, (_, i) => {
+        const parts = tmpFormatter.formatToParts(i);
+        const integerPart = parts.find(part => part.type === "integer") ?? {value:<number>i};
+
+        // Account for number formatter multiplying wholes by 100 when doing percentages.
+        return integerPart.value;
+      }) as Array<string>;
+
+      // Use the temporary formatter to extract parts from "-0.01" to give us both the negative symbol and decimal for the locale.
+      const parts = tmpFormatter.formatToParts("-0.01");
+
+      this.decimalSep = parts.find(part => part.type === 'decimal')?.value ?? ".";
+      this.negative = parts.find(part => part.type === 'minusSign')?.value ?? "-";
+
+      const sep = this.escapeRegex(this.decimalSep);
+      const neg = this.escapeRegex(this.negative);
+
+      // This regex will first serve to only return numbers and the decimal separators
+      this.dataRegex = new RegExp(`[^\\p{Nd}(?:${sep}${neg})]+`, 'gu');
+
+      this.updateInput(String(value));
+    }
+
+    get preNumLen():number {
+      let sum = 0;
+
+      for (const item of this.parts) {
+        if (["integer", "fraction", "minusSign"].includes(item.type)) {
+          break;
+        } else {
+          sum += item.value.length;
+        }
+      }
+
+      return sum;
+    }
+
+    get postNumLen():number {
+      let sum = 0;
+
+      for (const item of [...this.parts].reverse()) {
+        if (["integer", "fraction", "minusSign"].includes(item.type)) {
+          break;
+        } else {
+          sum += item.value.length;
+        }
+      }
+
+      return sum;
+    }
+
+    /**
+     * Get the relevant non-number length.
+     */
+    get nonNumberLength():number {
+      return [...this.parts].filter((item) => !["integer", "fraction", "decimal"].includes(item.type)).reduce((total, item) => total + item.value.length, 0);
+    }
+
+    /**
+    *  Different languages define their zeros differently. For example, arabic uses "٠" while english will use "0".
+    *  We need to know what their zero is in order to know when to programmatically run the formatter.
+    */
+    get zero(): string {
+      return this.localeNumbers[0] ?? "0";
+    }
+
+    /**
+     * Get the formatted value the user might expect.
+     */
+    get displayedValue() :string {
+      return this.toFormatter.format(this.dataValue);
+    }
+
+    /**
+     * Determine whether or not decimals are used for this formatting type.
+     * Will return true if there is a set minimum or max amount of fraction digits and the decimal separator isn't blank.
+     */
+    get hasDecimals(): boolean {
+      return ((this.resolvedOptions.minimumFractionDigits ?? 0) > 0 || (this.resolvedOptions.maximumFractionDigits ?? 0) > 0) && this.decimalSep != "";
+    }
+
+    /**
+     * Determine whether or not this input has boundaries
+     */
+    get hasBounds(): boolean {
+      return (this.preNumLen ?? 0) > 0 || (this.postNumLen ?? 0) > 0;
+    }
+
+    /**
+     * Determine whether or not the number is in a saveable state.
+     * Inputs are considered invalid if:
+     * - they would result in NaN with the data value
+     * - they have more than one decimal separator and also should have decimals
+     */
+    get isValid(): boolean {
+      // Skip decimal checks if there isn't one defined.
+      if(!this.hasDecimals){
+        return !isNaN(this.dataValue);
+      }
+
+      // Decimal Checks
+      const sections = this.displayedValue.split(this.decimalSep);
+
+      return !(isNaN(this.dataValue) || sections.length > 2)
+    }
+
+    /**
+     * We will use this method until RegExp.escape is more commonly implemented.
+     * https://tc39.es/proposal-regex-escaping/
+     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/escape
+     */
+    private escapeRegex(toEscape: string): string {
+      if(toEscape == ",") return toEscape;
+
+      /*
+      Uncomment when we can use it.
+      if(RegExp.escape != undefined){
+        return RegExp.escape(toEscape);
+      }else {
+        return toEscape.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+      }*/
+
+      return toEscape.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+    }
+
+    /**
+     * Try to get the value by removing irrelevant characters and then performing regex on the substring to remove anything that isn't a number.
+     */
+    public parseValue(data:string):number {
+      // Apply all regex
+      let value:string|number = data.replace(this.dataRegex, '');
+
+      // Finally swap out all of locale numbers for the localized numbers.
+      // Inspired by: https://github.com/ApelegHQ/intl-number-parser/blob/master/src/NumberParser.ts
+      value = this.localeNumbers.reduce((acc,cv,i) => acc.split(cv).join(String(i)), value);
+
+      // swap the locale decimal separator with a period because that's what parseFloat expects.
+      if(this.hasDecimals){
+        value = value.replace(this.decimalSep, ".");
+      }
+
+      value = parseFloat(value);
+
+      // Percentage Support
+      if(this.resolvedOptions.style === "percent"){
+        value *= 0.01;
+      }else{
+        value = value.toFixed(this.resolvedOptions.maximumFractionDigits);
+      }
+
+      return value as number;
+    }
+
+    /**
+     * Get the relevant portion of the given string. Ex, "123,456.45 US Dollars" should yield us 123,456.45
+     * as determined by the formatting options on this object.
+     */
+    public getRelevantData(data:string):string{
+      if(this.hasBounds){
+        data = data.substring(this.preNumLen, data.length - this.postNumLen);
+      }
+
+      return data;
+    }
+
+    /**
+     * Update the value of the input object.
+     */
+    public updateInput(value:string): void{
+      // Extract the actual value by stripping away anything that isn't a number or a decimal.
+      this.dataValue = this.parseValue(value);
+      // Break up parts and determine the area where the actual number is.
+      this.parts = this.toFormatter.formatToParts(this.dataValue);
+    }
+}
+
+export default class HeadlessFormControlLocalNumberComponent extends Component<HeadlessFormControlLocalNumberComponentSignature>{
+    // Value of field before user's previous and most recent input
+    private pastVal: LocalNumberInputValue;
+    private currentVal: LocalNumberInputValue;
+
+    constructor(
+      owner: unknown,
+      args: HeadlessFormControlLocalNumberComponentSignature['Args']
+    ){
+      super(owner, args);
+
+      this.pastVal = new LocalNumberInputValue(this.args.locale, this.args.formatOptions, this.args.value ?? "0");
+      this.currentVal = new LocalNumberInputValue(this.args.locale, this.args.formatOptions, this.args.value ?? "0");
+    }
+
+    /*
+    * Set the user's input to a position on a text box.
+    */
+    private setCaretPos(elem: HTMLInputElement, caretPos:number, caretPosEnd?:number):void {
+      if (document.activeElement == elem) {
+        elem.focus();
+        elem.setSelectionRange(caretPos, caretPosEnd ?? caretPos);
+      }
+    }
+
+    /**
+     * Reset for invalid inputs.
+     * First try to go back to the previous value if it's valid.
+     * If the last value isn't valid check if a value was provided and go to that.
+     * If there is no value originally provided and the previous input is invalid, default to 0.
+     */
+    private resetInput(elem: HTMLInputElement): void{
+        assert('Expected HTMLInputElement', elem instanceof HTMLInputElement);
+
+        if(this.pastVal.isValid){
+          this.currentVal.updateInput(this.pastVal.displayedValue);
+        }else if(this.args.value) {
+          this.currentVal.updateInput(String(this.args.value));
+        }else {
+          this.currentVal.updateInput(this.currentVal.zero);
+        }
+
+        elem.value = this.currentVal.displayedValue;
+
+        return;
+    }
+
+    /**
+     * Handler for input events.
+     */
+    @action
+    handleInput(e: Event | InputEvent): void {
+      assert('Expected HTMLInputElement', e.target instanceof HTMLInputElement);
+
+      let caretPos: number = e.target.selectionStart ?? 0;
+      const relevantData = this.currentVal.getRelevantData(e.target.value);
+
+      // Allow for empty inputs.
+      if(relevantData == ""){
+        this.args.setValue(0);
+        this.currentVal.updateInput(String(this.currentVal.zero));
+        e.target.value = this.currentVal.displayedValue;
+
+        return;
+      }
+
+      // Allow for initial negative number inputs. Ex, user typing in -0 or 0- or just - likely indicates they want to input a negative number.
+      if((relevantData.includes(`${this.currentVal.negative}`) && relevantData.length < 2) || relevantData.includes(`${this.currentVal.negative+this.currentVal.zero}`) || relevantData.includes(`${this.currentVal.zero+this.currentVal.negative}`)){
+        this.args.setValue(0);
+        this.currentVal.updateInput(String(this.currentVal.zero));
+        e.target.value = this.currentVal.negative;
+
+        return;
+      }
+
+      this.currentVal.updateInput(e.target.value);
+      // Update our current value instance with the new input.
+
+      if(!this.currentVal.isValid){
+        this.resetInput(e.target);
+
+        return;
+      }
+
+      if(this.currentVal.hasDecimals){
+        const decimalPos: number = e.target.value.indexOf(this.currentVal.decimalSep);
+
+        if(decimalPos >= 0){
+          const maxDecPlaces = this.currentVal.resolvedOptions.maximumFractionDigits;
+          const minDecPlaces = this.currentVal.resolvedOptions.minimumFractionDigits;
+          const parts = relevantData.split(this.currentVal.decimalSep);
+
+          // Jump to decimal if there is already one present and the most recent input was a decimal.
+          if(parts.length > 2){
+            this.resetInput(e.target);
+            this.setCaretPos(e.target, decimalPos+1);
+
+            return;
+          }
+
+          // Mostly doing this to fix the linter error. It would not typically make it this far without a decimal.
+          if(parts[1] != undefined){
+            // Allow for precision inputs ex 0.001. But not beyond the max and maintaining the minimum.
+            if((relevantData.endsWith(this.currentVal.decimalSep) || (relevantData.endsWith(this.currentVal.zero) && caretPos > decimalPos)) && parts[1].length <= maxDecPlaces && parts[1].length >= minDecPlaces){
+              return;
+            }
+
+            // Inputs going over the maximum allotted decimal places will shift the fraction into the whole. (Right side input)
+            if(parts[1].length > (maxDecPlaces ?? 0)){
+              // Split the value by the decimal point to get value before and after.
+              let [pre,post = ""] = relevantData.split(this.currentVal.decimalSep);
+
+              // Determine how big of a difference there is between the maximum decimals and the attempted input.
+              // This will give us how much we need to shift from the post to the pre.
+              const diff = Math.abs(maxDecPlaces - post.length);
+
+              // Shift the value from the fraction to the whole.
+              pre = pre+post.substring(0,diff);
+              post = post.substring(diff, post.length);
+
+              // Update the input. (Put the decimal place back, recombine the string);
+              e.target.value = pre+this.currentVal.decimalSep+post;
+              this.currentVal.updateInput(e.target.value);
+            }
+          }
+        }
+      }
+
+      const currentNonNums = this.currentVal.nonNumberLength;
+      const pastNonNums = this.pastVal.nonNumberLength;
+
+      // Account for changes in non numberical values that would cause the caret to shift.
+      if (currentNonNums !== pastNonNums) {
+        caretPos += (currentNonNums - pastNonNums);
+      }
+
+      e.target.value = this.currentVal.displayedValue;
+      this.args.setValue(this.currentVal.dataValue);
+      // Update past value.
+      this.pastVal.updateInput(e.target.value);
+      this.setCaretPos(e.target, caretPos);
+    }
+
+    /**
+     * Ensures the Caret remains within the bounds of the data and adjusts to whatever is on the start or ends.
+     */
+    @action
+    handleSelectionChange(e: Event | InputEvent): void {
+      assert('Expected HTMLInputElement', e.target instanceof HTMLInputElement);
+
+      // Keep input caret within bounds of data.
+      if(this.currentVal.hasBounds){
+        let caretPos: number = e.target.selectionStart ?? 0;
+        const caretEndPos: number = e.target.selectionEnd ?? 0;
+        // Determine valid caret range based on current value. (Where is the value)
+        const validStart = this.currentVal.preNumLen;
+        const validEnd = e.target.value.length - this.currentVal.postNumLen;
+
+        // Handle whole selections (ctrl+a, select all)
+        if(caretPos == 0 && e.target.value.length == caretEndPos){
+          this.setCaretPos(e.target, validStart, validEnd);
+
+          return;
+        }
+
+        // If we're out of bounds, shift it to the closest in bound position.
+        if (caretPos < validStart || caretPos > validEnd || caretEndPos < validStart || caretEndPos > validEnd) {
+          caretPos = Math.abs(caretPos - validStart) < Math.abs(caretPos - validEnd) ? validStart : validEnd;
+          this.setCaretPos(e.target, caretPos);
+        }
+      }
+    }
+
+    <template>
+      <input
+        name={{@name}}
+        type="text"
+        id={{@fieldId}}
+        value={{this.currentVal.displayedValue}}
+        aria-invalid={{if @invalid "true"}}
+        aria-describedBy={{if @invalid @errorId}}
+        inputmode="decimal"
+        ...attributes
+        {{on "input" this.handleInput }}
+        {{on "selectionchange" this.handleSelectionChange }}
+      />
+    </template>
+}
diff --git a/packages/ember-headless-form/src/-private/components/field.gts b/packages/ember-headless-form/src/-private/components/field.gts
index ca1a5a21..72dee916 100644
--- a/packages/ember-headless-form/src/-private/components/field.gts
+++ b/packages/ember-headless-form/src/-private/components/field.gts
@@ -8,6 +8,7 @@ import { uniqueId } from '../utils';
 import CheckboxComponent from './control/checkbox';
 import CheckboxGroupComponent from './control/checkbox-group';
 import InputComponent from './control/input';
+import LocalNumberComponent from './control/local-number';
 import RadioGroupComponent from './control/radio-group';
 import SelectComponent from './control/select';
 import TextareaComponent from './control/textarea';
@@ -145,6 +146,13 @@ export interface HeadlessFormFieldComponentSignature<
           typeof TextareaComponent,
           'name' | 'fieldId' | 'value' | 'setValue' | 'invalid' | 'errorId'
         >;
+        /**
+         * Yielded control that will attempt to format number inputs to a specified locale.
+         */
+        LocalNumber: WithBoundArgs<
+          typeof LocalNumberComponent,
+          'name' | 'fieldId' | 'value' | 'setValue' | 'invalid' | 'errorId' | 'locale' | 'formatOptions'
+        >;
 
         /**
          * The current value of the field's form data.
@@ -227,6 +235,7 @@ export default class HeadlessFormFieldComponent<
   ErrorsComponent = ErrorsComponent<DATA[KEY]>;
   SelectComponent = SelectComponent;
   TextareaComponent = TextareaComponent;
+  LocalNumberComponent = LocalNumberComponent;
   RadioGroupComponent = RadioGroupComponent;
   CheckboxGroupComponent = CheckboxGroupComponent;
   CaptureEventsModifier = CaptureEventsModifier;
@@ -383,6 +392,15 @@ export default class HeadlessFormFieldComponent<
             setValue=this.setValue
             invalid=this.hasErrors
           )
+          LocalNumber=(component
+            this.LocalNumberComponent
+            name=@name
+            fieldId=fieldId
+            errorId=errorId
+            value=this.valueAsStringOrNumber
+            setValue=this.setValue
+            invalid=this.hasErrors
+          )
           value=this.value
           setValue=setValue
           id=fieldId
diff --git a/test-app/app/controllers/index.ts b/test-app/app/controllers/index.ts
index 62afb3c7..c4dfb4a3 100644
--- a/test-app/app/controllers/index.ts
+++ b/test-app/app/controllers/index.ts
@@ -8,6 +8,7 @@ interface MyFormData {
   email?: string;
   country?: string;
   accept_tos?: boolean;
+  donation?: number;
   comment?: string;
 }
 
diff --git a/test-app/app/templates/index.hbs b/test-app/app/templates/index.hbs
index fc7c8ab0..1435dfa5 100644
--- a/test-app/app/templates/index.hbs
+++ b/test-app/app/templates/index.hbs
@@ -29,7 +29,25 @@
       <field.Errors class='text-red-600' />
     </div>
   </form.Field>
-
+  <form.Field @name='donation' as |field|>
+    <div class='my-2 flex flex-col'>
+      <field.Label class={{if field.isInvalid 'text-red-500'}}>
+        How much would you like to donate?
+      </field.Label>
+      <field.LocalNumber
+        class='border rounded px-2 {{if field.isInvalid "border-red-500"}}'
+        @locale='en-US'
+        @value="-123456.78"
+        @formatOptions={{hash style='currency' currency='USD'}}
+        required
+      />
+      <field.Errors class='text-red-600' />
+    </div>
+  </form.Field>
+  {{#if form.data.donation}}
+    Donating:
+    {{form.data.donation}}
+  {{/if}}
   <form.Field @name='gender' as |field|>
     <field.RadioGroup class='my-2 flex flex-col' as |group|>
       <group.Label>Gender</group.Label>
diff --git a/test-app/tests/integration/components/headless-form-control-local-number-test.gts b/test-app/tests/integration/components/headless-form-control-local-number-test.gts
new file mode 100644
index 00000000..0c4a67f0
--- /dev/null
+++ b/test-app/tests/integration/components/headless-form-control-local-number-test.gts
@@ -0,0 +1,409 @@
+import { click, render, typeIn } from '@ember/test-helpers';
+import { module, skip, test } from 'qunit';
+
+import { HeadlessForm } from 'ember-headless-form';
+import { setupRenderingTest } from 'test-app/tests/helpers';
+
+module("Integration Component HeadlessForm > Local Number", function(hooks) {
+  setupRenderingTest(hooks);
+
+  // requires no arguments
+  test("field renders as a text input with no arguments", async function(assert){
+    await render(
+      <template>
+        <HeadlessForm as |form|>
+          <form.Field @name="localNum" as |field| >
+            <field.LocalNumber />
+          </form.Field>
+        </HeadlessForm>
+      </template>);
+
+      const textInput = (this.element.querySelector("input") as HTMLInputElement).type;
+
+      assert.strictEqual(textInput, "text", "form field renders as text with no arguments.");
+  })
+
+  // Format this number in an English USA Locale.
+  test("field renders en-US number correctly", async function(assert) {
+    await render(
+      <template>
+        <HeadlessForm as |form|>
+          <form.Field @name="localNum" as |field| >
+            <field.LocalNumber
+              @locale="en-US"
+              @value="123456.789"
+             />
+          </form.Field>
+        </HeadlessForm>
+      </template>);
+
+      const inputValue = (this.element.querySelector("input") as HTMLInputElement).value;
+
+      assert.strictEqual(inputValue, "123,456.789", "input renders US formatted numbers correctly")
+  })
+
+  // Support the rendering of currency.
+  test("field supports formatting options to render currency", async function(assert) {
+
+    const options = {
+      "style":"currency",
+      "currency":"USD"
+    };
+
+    await render(
+      <template>
+        <HeadlessForm as |form|>
+          <form.Field @name="localNum" as |field| >
+            <field.LocalNumber
+              @locale='en-US'
+              @formatOptions={{options}}
+             />
+          </form.Field>
+        </HeadlessForm>
+      </template>);
+
+      await typeIn("input", "123456.78");
+
+      const inputValue = (this.element.querySelector("input") as HTMLInputElement).value;
+
+      assert.strictEqual(inputValue, "$123,456.78", "input renders US dollars correctly");
+  })
+
+  // Support the rendering of currency with right-sided symbol. (French Euro placement.)
+  // "123456.78" = "123 456,78 €" This is to ensure input placement is correct.
+  // Test failure cannot be reproduced in the browser.
+  // https://github.com/emberjs/ember-test-helpers/issues/1535
+  skip("field supports right sided symbol currency placement", async function(assert) {
+
+    const options = {
+      "style":"currency",
+      "currency":"EUR"
+    };
+
+    await render(
+      <template>
+        <HeadlessForm as |form|>
+          <form.Field @name="localNum" as |field| >
+            <field.LocalNumber
+              @locale='fr-FR'
+              @formatOptions={{options}}
+             />
+          </form.Field>
+        </HeadlessForm>
+      </template>);
+
+      await typeIn("input", "123456.78");
+
+      const inputValue = (this.element.querySelector("input") as HTMLInputElement).value;
+
+      assert.strictEqual(inputValue, "123 456,78 €", "input renders euros in french locale correctly");
+  })
+
+  // Correctly format number upon input
+  test("formatting between inputs", async function(assert) {
+    const options = {
+      "style":"currency",
+      "currency":"USD"
+    };
+
+    await render(
+    <template>
+      <HeadlessForm as |form|>
+        <form.Field @name="localNum" as |field| >
+          <field.LocalNumber
+            @locale='en-US'
+            @formatOptions={{options}}
+          />
+        </form.Field>
+      </HeadlessForm>
+    </template>);
+
+    await typeIn("input", "0.02", {delay:1});
+
+    let inputValue = (this.element.querySelector("input") as HTMLInputElement).value;
+
+    assert.strictEqual(inputValue, "$0.02", "input formats correctly for number entry.");
+
+    await typeIn("input", "123", {delay:20});
+
+    inputValue = (this.element.querySelector("input") as HTMLInputElement).value;
+
+    assert.strictEqual(inputValue, "$21.23", "input formats correctly for additional entry.");
+
+    })
+
+  // Right-side input working correctly transferring to integer portion on dollars. Ex, input 125 is turned into $1.25 and not $100.25
+  test("Formatting right side entry and handling decimal jump", async function(assert) {
+    const options = {
+      "style":"currency",
+      "currency":"USD"
+    };
+
+    await render(
+    <template>
+      <HeadlessForm as |form|>
+        <form.Field @name="localNum" as |field| >
+          <field.LocalNumber
+            @locale='en-US'
+            @formatOptions={{options}}
+            @value="0.00"
+          />
+        </form.Field>
+      </HeadlessForm>
+    </template>);
+
+    await typeIn("input", "125", {delay:20});
+
+    let input = (this.element.querySelector("input") as HTMLInputElement);
+
+    assert.strictEqual(input.value, "$1.25", "input formats correctly for number entry.");
+
+    await typeIn("input", ".");
+
+    assert.strictEqual(input.selectionStart, 3, "double entry of decimal point jumps to correct position");
+  })
+
+  // display non-latin numbers correctly (ex, arabic.) 123456.789 = '١٢٣٬٤٥٦٫٧٨٩'
+  test("Displaying arabic number (١٢٣٬٤٥٦٫٧٨٩ = ١٢٣٬٤٥٦٫٧٨٩) correctly", async function(assert) {
+
+    await render(
+    <template>
+      <HeadlessForm as |form|>
+        <form.Field @name="localNum" as |field| >
+          <field.LocalNumber
+            @locale='ar-SA'
+          />
+        </form.Field>
+      </HeadlessForm>
+    </template>);
+
+    await typeIn("input", "١٢٣٤٥٦٫٧٨٩");
+
+    let inputValue = (this.element.querySelector("input") as HTMLInputElement).value;
+
+    assert.strictEqual(inputValue, "١٢٣٬٤٥٦٫٧٨٩", "input formats correctly for number entry.");
+  })
+
+  // Arabic leading zero decimal input. 123456.001 = ١٢٣٬٤٥٦٫٠٠١
+  test("Leading zero decimal input for arabic. (١٢٣٬٤٥٦٫٠٠١ = ١٢٣٤٥٦٫٠٠١)", async function(assert) {
+
+    await render(
+    <template>
+      <HeadlessForm as |form|>
+        <form.Field @name="localNum" as |field| >
+          <field.LocalNumber
+            @locale='ar-SA'
+          />
+        </form.Field>
+      </HeadlessForm>
+    </template>);
+
+    await typeIn("input", "١٢٣٤٥٦٫٠٠١");
+
+    let inputValue = (this.element.querySelector("input") as HTMLInputElement).value;
+
+    assert.strictEqual(inputValue, "١٢٣٬٤٥٦٫٠٠١", "input formats arabic leading zeros correctly");
+  })
+
+  // correct caret positioning for written out currencies. (ex positioning is correct for "$" and "US dollars" respectively)
+  test("Correct caret positioning for 'name' currency display formats. Ex: 100 US dollars", async function(assert) {
+
+    const options = {
+      style:"currency",
+      currency:"USD",
+      currencyDisplay:"name"
+    };
+
+    await render(
+    <template>
+      <HeadlessForm as |form|>
+        <form.Field @name="localNum" as |field| >
+          <field.LocalNumber
+            @locale='en-US'
+            @formatOptions={{options}}
+          />
+        </form.Field>
+      </HeadlessForm>
+    </template>);
+
+    const inputBox = this.element.querySelector("input") as HTMLInputElement
+
+    await click(inputBox);
+
+    assert.strictEqual(inputBox.selectionStart, 4, "caret position is correct when clicking element");
+  })
+
+  // formatting to percentages
+  test("correct formatting for percentages", async function(assert) {
+    const options = {
+      "style":"percent",
+    };
+
+    await render(
+    <template>
+      <HeadlessForm as |form|>
+        <form.Field @name="localNum" as |field| >
+          <field.LocalNumber
+            @locale='en-US'
+            @formatOptions={{options}}
+          />
+        </form.Field>
+      </HeadlessForm>
+    </template>);
+
+    await typeIn("input", "123456");
+
+    let inputValue = (this.element.querySelector("input") as HTMLInputElement).value;
+
+    assert.strictEqual(inputValue, "123,456%", "input formats percentages correctly");
+  })
+
+  // Support for units
+  test("correct formatting for unit formats", async function(assert) {
+    const options = {
+      style:"unit",
+      unit:"liter",
+    };
+
+    await render(
+    <template>
+      <HeadlessForm as |form|>
+        <form.Field @name="localNum" as |field| >
+          <field.LocalNumber
+            @locale='en-US'
+            @formatOptions={{options}}
+          />
+        </form.Field>
+      </HeadlessForm>
+    </template>);
+
+    await typeIn("input", "123456789", {delay:1});
+
+    let inputValue = (this.element.querySelector("input") as HTMLInputElement).value;
+
+    assert.strictEqual(inputValue, "123,456,789 L", "input formats units correctly");
+  })
+
+  // Empty input
+  test("empty input resets to zero", async function(assert) {
+    await render(
+      <template>
+        <HeadlessForm as |form|>
+          <form.Field @name="localNum" as |field|>
+            <field.LocalNumber @locale="en-US" />
+          </form.Field>
+        </HeadlessForm>
+      </template>
+    );
+
+    let input = this.element.querySelector("input") as HTMLInputElement;
+
+    await typeIn("input", "");
+
+    // Assuming the default is "0" when no value is provided.
+    assert.strictEqual(input.value, "0", "Empty input resets to zero");
+  });
+
+  test("invalid input reverts to previous valid state", async function(assert) {
+
+    await render(
+      <template>
+        <HeadlessForm as |form|>
+          <form.Field @name="localNum" as |field|>
+            <field.LocalNumber
+              @locale="en-US"
+              @value="123.45"
+            />
+          </form.Field>
+        </HeadlessForm>
+      </template>
+    );
+
+    let input = this.element.querySelector("input") as HTMLInputElement;
+
+    await typeIn("input", "abc");
+
+    // It should revert to "123.45"
+    assert.strictEqual(input.value, "123.45", "Invalid input reverts to previous valid state");
+  });
+
+
+  test("negative number input is supported.", async function(assert) {
+    await render(
+      <template>
+        <HeadlessForm as |form|>
+          <form.Field @name="localNum" as |field|>
+            <field.LocalNumber
+              @locale="en-US"
+            />
+          </form.Field>
+        </HeadlessForm>
+      </template>
+    );
+
+    let input = this.element.querySelector("input") as HTMLInputElement;
+
+    await typeIn("input", "-123.456");
+
+    assert.strictEqual(input.value, "-123.456", "Negative number input support");
+  })
+
+  test("prefilled negative number input", async function(assert) {
+    const options = {
+      style:"currency",
+      currency:"USD",
+    };
+
+    await render(
+      <template>
+        <HeadlessForm as |form|>
+          <form.Field @name="localNum" as |field|>
+            <field.LocalNumber
+              @locale="en-US"
+              @value="-123456.78"
+              @formatOptions={{options}}
+            />
+          </form.Field>
+        </HeadlessForm>
+      </template>
+    );
+
+    let input = this.element.querySelector("input") as HTMLInputElement;
+
+    assert.strictEqual(input.value, "-$123,456.78", "Prefilled negative number input support");
+  });
+
+  /**
+   * Skipping because test helpers do not currently take caret position into account when inputting.
+   * https://github.com/emberjs/ember-test-helpers/issues/1535
+   */
+  skip("multiple decimals are handled", async function(assert) {
+    const options = {
+      style: "currency",
+      currency: "USD"
+    };
+
+    await render(
+      <template>
+        <HeadlessForm as |form|>
+          <form.Field @name="localNum" as |field|>
+            <field.LocalNumber
+              @locale="en-US"
+              @formatOptions={{options}}
+              @value="0.00"
+            />
+          </form.Field>
+        </HeadlessForm>
+      </template>
+    );
+
+    let input = this.element.querySelector("input") as HTMLInputElement;
+
+    // For example, typing "123.45.67" should result in a properly formatted value.
+    await typeIn("input", "12345.67");
+
+    // Adjust the expected value to what your implementation should yield.
+    assert.strictEqual(input.value, "$12,367.45", "Extra decimals are collapsed to a single decimal");
+  });
+
+})

From b18b8eb176aedffcf359bb22548579ab54abde3e Mon Sep 17 00:00:00 2001
From: Ervin Sabic <esabic@gearsite.net>
Date: Tue, 22 Apr 2025 15:06:46 -0500
Subject: [PATCH 2/3] additional ux changes for decimals

---
 .../components/control/local-number.gts       | 102 +++++++++++-------
 test-app/app/templates/index.hbs              |   2 -
 2 files changed, 62 insertions(+), 42 deletions(-)

diff --git a/packages/ember-headless-form/src/-private/components/control/local-number.gts b/packages/ember-headless-form/src/-private/components/control/local-number.gts
index 62ba2126..09e31b3d 100644
--- a/packages/ember-headless-form/src/-private/components/control/local-number.gts
+++ b/packages/ember-headless-form/src/-private/components/control/local-number.gts
@@ -108,7 +108,7 @@ class LocalNumberInputValue {
      */
     public readonly dataRegex: RegExp;
 
-    constructor(locale = "en-US", options:Intl.NumberFormatOptions = {}, value:number|string = 0){
+    constructor(locale = "en-US", options:Intl.NumberFormatOptions = {}, value = 0){
       // Build the initial formatter with given options and value then save the parts to use later.
       this.toFormatter = new Intl.NumberFormat(locale, options);
       this.resolvedOptions = this.toFormatter.resolvedOptions();
@@ -126,7 +126,7 @@ class LocalNumberInputValue {
       }) as Array<string>;
 
       // Use the temporary formatter to extract parts from "-0.01" to give us both the negative symbol and decimal for the locale.
-      const parts = tmpFormatter.formatToParts("-0.01");
+      const parts = tmpFormatter.formatToParts(-0.01);
 
       this.decimalSep = parts.find(part => part.type === 'decimal')?.value ?? ".";
       this.negative = parts.find(part => part.type === 'minusSign')?.value ?? "-";
@@ -134,12 +134,15 @@ class LocalNumberInputValue {
       const sep = this.escapeRegex(this.decimalSep);
       const neg = this.escapeRegex(this.negative);
 
-      // This regex will first serve to only return numbers and the decimal separators
+      // This regex will serve to only return numbers and the decimal separators along with negative symbols.
       this.dataRegex = new RegExp(`[^\\p{Nd}(?:${sep}${neg})]+`, 'gu');
 
       this.updateInput(String(value));
     }
 
+    /**
+     *  Length of non-number related strings before the data value. (Ex: $123.45) would return 1 because of the dollar sign.
+     */
     get preNumLen():number {
       let sum = 0;
 
@@ -154,6 +157,9 @@ class LocalNumberInputValue {
       return sum;
     }
 
+    /**
+     * Length of non-number related strings after the data value. (Ex: 123.45 US Dollars) would return 11 because of the length of" US Dollars".
+     */
     get postNumLen():number {
       let sum = 0;
 
@@ -209,18 +215,23 @@ class LocalNumberInputValue {
      * Determine whether or not the number is in a saveable state.
      * Inputs are considered invalid if:
      * - they would result in NaN with the data value
+     * - the given number is finite.
      * - they have more than one decimal separator and also should have decimals
      */
     get isValid(): boolean {
+      // Check for infinity edge case along with NaN. By explicitly using Number.isFinite, we are allowing only numbers. String will not be valid.
+
+      if(!Number.isFinite(this.dataValue)){
+        return false;
+      }
+
       // Skip decimal checks if there isn't one defined.
       if(!this.hasDecimals){
-        return !isNaN(this.dataValue);
+        return true;
       }
 
-      // Decimal Checks
-      const sections = this.displayedValue.split(this.decimalSep);
-
-      return !(isNaN(this.dataValue) || sections.length > 2)
+      // Decimal Checks. Make sure the user didn't type more than one.
+      return this.displayedValue.split(this.decimalSep).length <= 2;
     }
 
     /**
@@ -247,31 +258,32 @@ class LocalNumberInputValue {
      */
     public parseValue(data:string):number {
       // Apply all regex
-      let value:string|number = data.replace(this.dataRegex, '');
+      let valueString:string = data.replace(this.dataRegex, '');
 
       // Finally swap out all of locale numbers for the localized numbers.
       // Inspired by: https://github.com/ApelegHQ/intl-number-parser/blob/master/src/NumberParser.ts
-      value = this.localeNumbers.reduce((acc,cv,i) => acc.split(cv).join(String(i)), value);
+      valueString = this.localeNumbers.reduce((acc,cv,i) => acc.split(cv).join(String(i)), valueString);
 
       // swap the locale decimal separator with a period because that's what parseFloat expects.
       if(this.hasDecimals){
-        value = value.replace(this.decimalSep, ".");
+        valueString = valueString.replace(this.decimalSep, ".");
       }
 
-      value = parseFloat(value);
+      let value:number = Number.parseFloat(valueString);
 
       // Percentage Support
       if(this.resolvedOptions.style === "percent"){
         value *= 0.01;
       }else{
-        value = value.toFixed(this.resolvedOptions.maximumFractionDigits);
+        // Have to run parseFloat again because toFixed returns a string.
+        value = parseFloat(value.toFixed(this.resolvedOptions.maximumFractionDigits));
       }
 
-      return value as number;
+      return value;
     }
 
     /**
-     * Get the relevant portion of the given string. Ex, "123,456.45 US Dollars" should yield us 123,456.45
+     * Get the relevant portion of the given string. Ex, "123,456.45 US Dollars" should yield us "123,456.45"
      * as determined by the formatting options on this object.
      */
     public getRelevantData(data:string):string{
@@ -332,7 +344,7 @@ export default class HeadlessFormControlLocalNumberComponent extends Component<H
         }else if(this.args.value) {
           this.currentVal.updateInput(String(this.args.value));
         }else {
-          this.currentVal.updateInput(this.currentVal.zero);
+          this.currentVal.updateInput(String(this.currentVal.zero));
         }
 
         elem.value = this.currentVal.displayedValue;
@@ -385,6 +397,9 @@ export default class HeadlessFormControlLocalNumberComponent extends Component<H
           const minDecPlaces = this.currentVal.resolvedOptions.minimumFractionDigits;
           const parts = relevantData.split(this.currentVal.decimalSep);
 
+          assert('Could not find split point for decimal position', parts[1] != undefined);
+
+
           // Jump to decimal if there is already one present and the most recent input was a decimal.
           if(parts.length > 2){
             this.resetInput(e.target);
@@ -393,31 +408,38 @@ export default class HeadlessFormControlLocalNumberComponent extends Component<H
             return;
           }
 
-          // Mostly doing this to fix the linter error. It would not typically make it this far without a decimal.
-          if(parts[1] != undefined){
-            // Allow for precision inputs ex 0.001. But not beyond the max and maintaining the minimum.
-            if((relevantData.endsWith(this.currentVal.decimalSep) || (relevantData.endsWith(this.currentVal.zero) && caretPos > decimalPos)) && parts[1].length <= maxDecPlaces && parts[1].length >= minDecPlaces){
-              return;
-            }
-
-            // Inputs going over the maximum allotted decimal places will shift the fraction into the whole. (Right side input)
-            if(parts[1].length > (maxDecPlaces ?? 0)){
-              // Split the value by the decimal point to get value before and after.
-              let [pre,post = ""] = relevantData.split(this.currentVal.decimalSep);
-
-              // Determine how big of a difference there is between the maximum decimals and the attempted input.
-              // This will give us how much we need to shift from the post to the pre.
-              const diff = Math.abs(maxDecPlaces - post.length);
-
-              // Shift the value from the fraction to the whole.
-              pre = pre+post.substring(0,diff);
-              post = post.substring(diff, post.length);
-
-              // Update the input. (Put the decimal place back, recombine the string);
-              e.target.value = pre+this.currentVal.decimalSep+post;
-              this.currentVal.updateInput(e.target.value);
-            }
+          // Allow for precision inputs ex 0.001. But not beyond the max and maintaining the minimum.
+          if((relevantData.endsWith(this.currentVal.decimalSep) || (relevantData.endsWith(this.currentVal.zero) && caretPos > decimalPos)) && parts[1].length <= maxDecPlaces && parts[1].length >= minDecPlaces){
+            return;
           }
+
+          // Inputs going over the maximum allotted decimal places will shift the fraction into the whole. (Right side input) if the user is inputting from the back of the number. Otherwise, trim.
+          if(parts[1].length > (maxDecPlaces ?? 0) && caretPos === this.currentVal.preNumLen + relevantData.length){
+            // Split the value by the decimal point to get value before and after.
+            let [pre,post = ""] = relevantData.split(this.currentVal.decimalSep);
+
+            // Determine how big of a difference there is between the maximum decimals and the attempted input.
+            // This will give us how much we need to shift from the post to the pre.
+            const diff = Math.abs(maxDecPlaces - post.length);
+
+            // Shift the value from the fraction to the whole.
+            pre = pre+post.substring(0,diff);
+            post = post.substring(diff, post.length);
+
+            // Update the input. (Put the decimal place back, recombine the string);
+            e.target.value = pre+this.currentVal.decimalSep+post;
+          }else {
+            // Split the value by the decimal point to get value before and after.
+            let [pre,post = ""] = relevantData.split(this.currentVal.decimalSep);
+
+            // Remove anything in the decimal place that goes over what is allowed.
+            post = post.slice(0, maxDecPlaces);
+
+            // Restitch the value together again.
+            e.target.value = pre+this.currentVal.decimalSep+post;
+          }
+
+          this.currentVal.updateInput(e.target.value);
         }
       }
 
diff --git a/test-app/app/templates/index.hbs b/test-app/app/templates/index.hbs
index 1435dfa5..50087459 100644
--- a/test-app/app/templates/index.hbs
+++ b/test-app/app/templates/index.hbs
@@ -37,8 +37,6 @@
       <field.LocalNumber
         class='border rounded px-2 {{if field.isInvalid "border-red-500"}}'
         @locale='en-US'
-        @value="-123456.78"
-        @formatOptions={{hash style='currency' currency='USD'}}
         required
       />
       <field.Errors class='text-red-600' />

From 5dd6ae90ff71ec3ab9fe0d3b3c9a7eb42eecb82c Mon Sep 17 00:00:00 2001
From: Ervin Sabic <esabic@gearsite.net>
Date: Wed, 23 Apr 2025 09:46:26 -0500
Subject: [PATCH 3/3] localized number input

---
 .../src/-private/components/control/local-number.gts            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ember-headless-form/src/-private/components/control/local-number.gts b/packages/ember-headless-form/src/-private/components/control/local-number.gts
index 09e31b3d..e41b97e7 100644
--- a/packages/ember-headless-form/src/-private/components/control/local-number.gts
+++ b/packages/ember-headless-form/src/-private/components/control/local-number.gts
@@ -104,7 +104,7 @@ class LocalNumberInputValue {
      */
     public readonly negative: string;
     /**
-     *
+     *  This regex will serve to only return numbers and the decimal separators along with negative symbols.
      */
     public readonly dataRegex: RegExp;