@lion/ui 0.9.1 → 0.10.1

package/components/form-core/src/FormatMixin.js

@@ -1,14 +1,15 @@
 /* eslint-disable class-methods-use-this */
 
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
+
+import { ValidateMixin } from './validate/ValidateMixin.js';
 import { FormControlMixin } from './FormControlMixin.js';
 import { Unparseable } from './validate/Unparseable.js';
-import { ValidateMixin } from './validate/ValidateMixin.js';
 
 /**
- * @typedef {import('../types/FormatMixinTypes.js').FormatMixin} FormatMixin
- * @typedef {import('../types/FormatMixinTypes.js').FormatOptions} FormatOptions
  * @typedef {import('../types/FormControlMixinTypes.js').ModelValueEventDetails} ModelValueEventDetails
+ * @typedef {import('../types/FormatMixinTypes.js').FormatOptions} FormatOptions
+ * @typedef {import('../types/FormatMixinTypes.js').FormatMixin} FormatMixin
  */
 
 // For a future breaking release:
@@ -69,6 +70,16 @@ const FormatMixinImplementation = superclass =>
       };
     }
 
+    /**
+     * During format/parse, we sometimes need to know how the current viewValue the user
+     * interacts with "came to be". Was it already formatted before for instance?
+     * If so, in case of an amount input, we might want to stick to the curent interpretation of separators.
+     */
+    #viewValueState = {
+      didFormatterOutputSyncToView: false,
+      didFormatterRun: false,
+    };
+
     /**
      * @param {string} [name]
      * @param {unknown} [oldValue]
@@ -93,7 +104,7 @@ const FormatMixinImplementation = superclass =>
      * The view value. Will be delegated to `._inputNode.value`
      */
     get value() {
-      return (this._inputNode && this._inputNode.value) || this.__value || '';
+      return this._inputNode?.value || this.__value || '';
     }
 
     /** @param {string} value */
@@ -249,7 +260,11 @@ const FormatMixinImplementation = superclass =>
       // Apparently, the parser was not able to produce a satisfactory output for the desired
       // modelValue type, based on the current viewValue. Unparseable allows to restore all
       // states (for instance from a lost user session), since it saves the current viewValue.
-      const result = this.parser(value, this.formatOptions);
+      const result = this.parser(value, {
+        ...this.formatOptions,
+        mode: this.#getFormatOptionsMode(),
+        viewValueStates: this.#getFormatOptionsViewValueStates(),
+      });
       return result !== undefined ? result : new Unparseable(value);
     }
 
@@ -258,6 +273,8 @@ const FormatMixinImplementation = superclass =>
      * @private
      */
     _callFormatter() {
+      this.#viewValueState.didFormatterRun = false;
+
       // - Why check for this.hasError?
       // We only want to format values that are considered valid. For best UX,
       // we only 'reward' valid inputs.
@@ -269,13 +286,8 @@ const FormatMixinImplementation = superclass =>
       // imperatively, we DO want to format a value (it is the only way to get meaningful
       // input into `._inputNode` with modelValue as input)
 
-      if (
-        this._isHandlingUserInput &&
-        this.hasFeedbackFor?.length &&
-        this.hasFeedbackFor.includes('error') &&
-        this._inputNode
-      ) {
-        return this._inputNode ? this.value : undefined;
+      if (this._isHandlingUserInput && this.hasFeedbackFor?.includes('error') && this._inputNode) {
+        return this.value;
       }
 
       if (this.modelValue instanceof Unparseable) {
@@ -285,7 +297,13 @@ const FormatMixinImplementation = superclass =>
         return this.modelValue.viewValue;
       }
 
-      return this.formatter(this.modelValue, this.formatOptions);
+      this.#viewValueState.didFormatterRun = true;
+
+      return this.formatter(this.modelValue, {
+        ...this.formatOptions,
+        mode: this.#getFormatOptionsMode(),
+        viewValueStates: this.#getFormatOptionsViewValueStates(),
+      });
     }
 
     /**
@@ -348,7 +366,6 @@ const FormatMixinImplementation = superclass =>
      * @private
      */
     __handlePreprocessor() {
-      const unprocessedValue = this.value;
       let currentCaretIndex = this.value.length;
       // Be gentle with Safari
       if (
@@ -364,7 +381,6 @@ const FormatMixinImplementation = superclass =>
         prevViewValue: this.__prevViewValue,
       });
 
-      this.__prevViewValue = unprocessedValue;
       if (preprocessedValue === undefined) {
         // Make sure we do no set back original value, so we preserve
         // caret index (== selectionStart/selectionEnd)
@@ -393,6 +409,8 @@ const FormatMixinImplementation = superclass =>
       if (this._reflectBackOn()) {
         // Text 'undefined' should not end up in <input>
         this.value = typeof this.formattedValue !== 'undefined' ? this.formattedValue : '';
+        this.#viewValueState.didFormatterOutputSyncToView =
+          Boolean(this.formattedValue) && this.#viewValueState.didFormatterRun;
       }
     }
 
@@ -459,7 +477,7 @@ const FormatMixinImplementation = superclass =>
       /**
        * Configuration object that will be available inside the formatter function
        */
-      this.formatOptions = /** @type {FormatOptions} */ ({});
+      this.formatOptions = /** @type {FormatOptions} */ ({ mode: 'auto' });
 
       /**
        * The view value is the result of the formatter function (when available).
@@ -543,10 +561,8 @@ const FormatMixinImplementation = superclass =>
      */
     __onPaste() {
       this._isPasting = true;
-      this.formatOptions.mode = 'pasted';
       setTimeout(() => {
         this._isPasting = false;
-        this.formatOptions.mode = 'auto';
       });
     }
 
@@ -588,6 +604,38 @@ const FormatMixinImplementation = superclass =>
         this._inputNode.removeEventListener('compositionend', this.__onCompositionEvent);
       }
     }
+
+    /**
+     * This method will be called right before a parser or formatter gets called and computes
+     * the formatOptions.mode. In short, it gives meta info about how the user interacted with
+     * the form control, as these user interactions can influence the formatting/parsing behavior.
+     *
+     * It's important that the behavior of these can be different during a paste or user edit,
+     * but not during programmatic setting of values (like setting modelValue).
+     * @returns {'auto'|'pasted'|'user-edited'}
+     */
+    #getFormatOptionsMode() {
+      if (this._isPasting) {
+        return 'pasted';
+      }
+      const isUserEditing = this._isHandlingUserInput && this.__prevViewValue;
+      if (isUserEditing) {
+        return 'user-edited';
+      }
+      return 'auto';
+    }
+
+    /**
+     * @returns {FormatOptions['viewValueStates']}
+     */
+    #getFormatOptionsViewValueStates() {
+      /** @type {FormatOptions['viewValueStates']}} */
+      const states = [];
+      if (this.#viewValueState.didFormatterOutputSyncToView) {
+        states.push('formatted');
+      }
+      return states;
+    }
   };
 
 export const FormatMixin = dedupeMixin(FormatMixinImplementation);

package/components/form-core/src/choice-group/ChoiceInputMixin.js

@@ -171,7 +171,9 @@ const ChoiceInputMixinImplementation = superclass =>
     render() {
       return html`
         <slot name="input"></slot>
-        <div class="choice-field__graphic-container">${this._choiceGraphicTemplate()}</div>
+        <div class="choice-field__graphic-container" aria-hidden="true">
+          ${this._choiceGraphicTemplate()}
+        </div>
         <div class="choice-field__label">
           <slot name="label"></slot>
         </div>

package/components/form-core/test-suites/FormatMixin.suite.js

@@ -5,6 +5,8 @@ import sinon from 'sinon';
 import { Unparseable, Validator, FormatMixin } from '@lion/ui/form-core.js';
 import { getFormControlMembers, mimicUserInput } from '@lion/ui/form-core-test-helpers.js';
 
+const isLionInputStepper = (/** @type {FormatClass} */ el) => 'valueTextMapping' in el;
+
 /**
  * @typedef {import('../types/FormControlMixinTypes.js').FormControlHost} FormControlHost
  * @typedef {ArrayConstructor | ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | DateConstructor | 'iban' | 'email'} modelValueType
@@ -480,7 +482,7 @@ export function runFormatMixinSuite(customConfig) {
           /**
            * @param {FormatClass} el
            */
-          function paste(el, val = 'lorem') {
+          function mimicPaste(el, val = 'lorem') {
             const { _inputNode } = getFormControlMembers(el);
             _inputNode.value = val;
             _inputNode.dispatchEvent(new ClipboardEvent('paste', { bubbles: true }));
@@ -494,12 +496,17 @@ export function runFormatMixinSuite(customConfig) {
           `)
             );
             const formatterSpy = sinon.spy(el, 'formatter');
-            paste(el);
+            mimicPaste(el);
             expect(formatterSpy).to.be.called;
-            expect(/** @type {{mode: string}} */ (formatterSpy.args[0][1]).mode).to.equal('pasted');
+            expect(/** @type {{mode: string}} */ (formatterSpy.lastCall.args[1]).mode).to.equal(
+              'pasted',
+            );
+            // give microtask of _isPasting chance to reset
             await aTimeout(0);
-            mimicUserInput(el, '');
-            expect(/** @type {{mode: string}} */ (formatterSpy.args[0][1]).mode).to.equal('auto');
+            el.modelValue = 'foo';
+            expect(/** @type {{mode: string}} */ (formatterSpy.lastCall.args[1]).mode).to.equal(
+              'auto',
+            );
           });
 
           it('sets protected value "_isPasting" for Subclassers', async () => {
@@ -509,7 +516,7 @@ export function runFormatMixinSuite(customConfig) {
           `)
             );
             const formatterSpy = sinon.spy(el, 'formatter');
-            paste(el);
+            mimicPaste(el);
             expect(formatterSpy).to.have.been.called;
             // @ts-ignore [allow-protected] in test
             expect(el._isPasting).to.be.true;
@@ -526,7 +533,7 @@ export function runFormatMixinSuite(customConfig) {
             );
             // @ts-ignore [allow-protected] in test
             const reflectBackSpy = sinon.spy(el, '_reflectBackOn');
-            paste(el);
+            mimicPaste(el);
             expect(reflectBackSpy).to.have.been.called;
           });
 
@@ -538,10 +545,65 @@ export function runFormatMixinSuite(customConfig) {
             );
             // @ts-ignore [allow-protected] in test
             const reflectBackSpy = sinon.spy(el, '_reflectBackOn');
-            paste(el);
+            mimicPaste(el);
             expect(reflectBackSpy).to.have.been.called;
           });
         });
+
+        describe('On user input', () => {
+          it('adjusts formatOptions.mode to "user-edited" for parser when user changes value', async () => {
+            const el = /** @type {FormatClass} */ (
+              await fixture(html`<${tag}><input slot="input"></${tag}>`)
+            );
+
+            const parserSpy = sinon.spy(el, 'parser');
+
+            // Here we get auto as we start from '' (so there was no value to edit)
+            mimicUserInput(el, 'some val');
+            expect(/** @type {{mode: string}} */ (parserSpy.lastCall.args[1]).mode).to.equal(
+              'auto',
+            );
+            await el.updateComplete;
+
+            mimicUserInput(el, 'some other val');
+            expect(/** @type {{mode: string}} */ (parserSpy.lastCall.args[1]).mode).to.equal(
+              'user-edited',
+            );
+          });
+
+          it('adjusts formatOptions.viewValueStates when user already formatted value', async () => {
+            const el = /** @type {FormatClass} */ (
+              await fixture(html`<${tag}><input slot="input"></${tag}>`)
+            );
+
+            // Neutralize config, so that we know for sure that the user has formatted the value
+            // when this suite is run on extended classes
+
+            // always reflect back formattedVlaue to view (instead of on blur or else)
+            // @ts-expect-error [allow-protected] in test
+            el._reflectBackOn = () => true;
+            // avoid non-formatted values due to validators in extended classes
+            el.defaultValidators = [];
+            // avoid Unparseable due to parsers in extended classes
+            el.parser = v => v;
+            // @ts-expect-error
+            el.formatter = v => v;
+
+            const parserSpy = sinon.spy(el, 'parser');
+            const formatterSpy = sinon.spy(el, 'formatter');
+
+            mimicUserInput(el, 'some val');
+            expect(parserSpy.lastCall.args[1].viewValueStates).to.not.include('formatted');
+            // @ts-expect-error
+            expect(formatterSpy.lastCall.args[1].viewValueStates).to.not.include('formatted');
+            await el.updateComplete;
+
+            mimicUserInput(el, 'some other val');
+            expect(parserSpy.lastCall.args[1].viewValueStates).to.include('formatted');
+            // @ts-expect-error
+            expect(formatterSpy.lastCall.args[1].viewValueStates).to.include('formatted');
+          });
+        });
       });
 
       describe('Parser', () => {
@@ -597,6 +659,43 @@ export function runFormatMixinSuite(customConfig) {
           expect(_inputNode.value).to.equal(val);
         });
 
+        it('does only calculate derived values as consequence of user input when preprocessed value is different from previous view value', async () => {
+          const val = generateValueBasedOnType({ viewValue: true }) || 'init-value';
+          if (typeof val !== 'string') return;
+
+          const preprocessorSpy = sinon.spy(v => v.replace(/\$$/g, ''));
+          const el = /** @type {FormatClass} */ (
+            await fixture(html`
+          <${tag} .preprocessor=${preprocessorSpy}>
+            <input slot="input" .value="${val}">
+          </${tag}>
+        `)
+          );
+
+          // TODO: find out why we need to skip this for lion-input-stepper
+          if (isLionInputStepper(el)) return;
+
+          /**
+           * The _calculateValues method is called inside _onUserInputChanged w/o providing args
+           * @param {sinon.SinonSpyCall} call
+           * @returns {boolean}
+           */
+          const isCalculateCallAfterUserInput = call => call.args[0]?.length === 0;
+
+          const didRecalculateAfterUserInput = (/** @type {sinon.SinonSpy<any[], any>} */ spy) =>
+            spy.callCount > 1 && !spy.getCalls().find(isCalculateCallAfterUserInput);
+
+          // @ts-expect-error [allow-protected] in test
+          const calcValuesSpy = sinon.spy(el, '_calculateValues');
+          // this value gets preprocessed to 'val'
+          mimicUserInput(el, `${val}$`);
+          expect(didRecalculateAfterUserInput(calcValuesSpy)).to.be.false;
+
+          // this value gets preprocessed to 'value' (and thus differs from previous)
+          mimicUserInput(el, `${val}ue$`);
+          expect(didRecalculateAfterUserInput(calcValuesSpy)).to.be.true;
+        });
+
         it('does not preprocess during composition', async () => {
           const el = /** @type {FormatClass} */ (
             await fixture(html`

package/components/form-core/types/FormatMixinTypes.ts

@@ -3,7 +3,10 @@ import { LitElement } from 'lit';
 import { ValidateHost } from './validate/ValidateMixinTypes.js';
 import { FormControlHost } from './FormControlMixinTypes.js';
 
-export type FormatOptions = { mode: 'pasted' | 'auto' } & object;
+export type FormatOptions = {
+  mode: 'pasted' | 'auto' | 'user-edited';
+  viewValueStates?: 'formatted'[];
+};
 export declare class FormatHost {
   /**
    * Converts viewValue to modelValue

package/components/form-integrations/test/dialog-integrations.test.js

@@ -9,6 +9,7 @@ import { html } from 'lit';
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 import { getAllTagNames } from './helpers/helpers.js';
 import './helpers/umbrella-form.js';
+
 /**
  * @typedef {import('./helpers/umbrella-form.js').UmbrellaForm} UmbrellaForm
  * @typedef {import('../../dialog/src/LionDialog.js').LionDialog} LionDialog
@@ -25,10 +26,12 @@ describe('Form inside dialog Integrations', () => {
       </lion-dialog>`,
     );
 
-    // @ts-ignore
-    const formEl = /** @type {LionForm} */ (el._overlayCtrl.contentNode._lionFormNode);
+    // @ts-expect-error [allow-protected-in-tests]
+    const umbrellaEl = el._overlayCtrl.contentNode;
+    const formEl = /** @type {LionForm} */ (umbrellaEl._lionFormNode);
     await formEl.registrationComplete;
     const registeredEls = getAllTagNames(formEl);
+    await umbrellaEl.waitForAllChildrenUpdates();
 
     expect(registeredEls).to.eql([
       'lion-fieldset',
@@ -86,6 +89,7 @@ describe('Form inside dialog Integrations', () => {
         </div>
       </lion-dialog>
     `);
+
     // @ts-expect-error [allow-protected-in-tests]
     el._overlayInvokerNode.click();
     const lionInput = el.querySelector('[name="input"]');

package/components/input-amount/src/parsers.js

@@ -1,7 +1,7 @@
 import { parseNumber, getFractionDigits } from '@lion/ui/localize-no-side-effects.js';
 
 /**
- * @typedef {import('../../localize/types/LocalizeMixinTypes.js').FormatNumberOptions} FormatOptions
+ * @typedef {import('../../localize/types/LocalizeMixinTypes.js').FormatNumberOptions} FormatNumberOptions
  */
 
 /**
@@ -28,7 +28,7 @@ function round(value, decimals) {
  * parseAmount('1,234.56', {currency: 'JOD'}); => 1234.560
  *
  * @param {string} value Number to be parsed
- * @param {FormatOptions} [givenOptions] Locale Options
+ * @param {FormatNumberOptions} [givenOptions] Locale Options
  */
 export function parseAmount(value, givenOptions) {
   const unmatchedInput = value.match(/[^0-9,.\- ]/g);
@@ -44,7 +44,7 @@ export function parseAmount(value, givenOptions) {
     return undefined;
   }
 
-  /** @type {FormatOptions} */
+  /** @type {FormatNumberOptions} */
   const options = {
     ...givenOptions,
   };

package/components/input-amount/test/lion-input-amount.test.js

@@ -1,10 +1,11 @@
 import { aTimeout, expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
-import { localize } from '@lion/ui/localize.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 import { getInputMembers } from '@lion/ui/input-test-helpers.js';
 import { LionInputAmount, formatAmount, parseAmount } from '@lion/ui/input-amount.js';
-
+import { mimicUserInput } from '@lion/ui/form-core-test-helpers.js';
+import sinon from 'sinon';
 import '@lion/ui/define/lion-input-amount.js';
 
 /**
@@ -12,6 +13,8 @@ import '@lion/ui/define/lion-input-amount.js';
  */
 
 describe('<lion-input-amount>', () => {
+  const localize = getLocalizeManager();
+
   beforeEach(() => {
     localizeTearDown();
   });
@@ -128,6 +131,37 @@ describe('<lion-input-amount>', () => {
     expect(_inputNode.value).to.equal('100.12');
   });
 
+  it('adjusts formats with locale when formatOptions.mode is "user-edited"', async () => {
+    const el = /** @type {LionInputAmount} */ (
+      await fixture(
+        html`<lion-input-amount
+          .modelValue=${123456.78}
+          currency="EUR"
+          .formatOptions="${{ locale: 'nl-NL' }}"
+        ></lion-input-amount>`,
+      )
+    );
+    const parserSpy = sinon.spy(el, 'parser');
+    const formatterSpy = sinon.spy(el, 'formatter');
+
+    // @ts-expect-error [allow-protected] in test
+    expect(el._inputNode.value).to.equal('123.456,78');
+
+    // When editing an already existing value, we interpet the separators as they are
+    mimicUserInput(el, '123.456');
+    expect(parserSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+    expect(formatterSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+    expect(el.modelValue).to.equal(123456);
+    expect(el.formattedValue).to.equal('123.456,00');
+
+    // Formatting should only affect values that should be formatted / parsed as a consequence of user input.
+    // When a user finished editing, the default should be restored.
+    // (think of a programmatically set modelValue, that should behave idempotent, regardless of when it is set)
+    el.modelValue = 1234;
+    expect(el.formattedValue).to.equal('1.234,00');
+    expect(formatterSpy.lastCall.args[1]?.mode).to.equal('auto');
+  });
+
   it('sets inputmode attribute to decimal', async () => {
     const el = /** @type {LionInputAmount} */ (
       await fixture(`<lion-input-amount></lion-input-amount>`)

package/components/input-amount/test/parsers.test.js

@@ -60,4 +60,15 @@ describe('parseAmount()', async () => {
     expect(parseAmount('foo1', { mode: 'pasted' })).to.equal(1);
     expect(parseAmount('EUR 1,50', { mode: 'pasted' })).to.equal(1.5);
   });
+
+  it('parses based on locale when "user-edited" mode used combined with viewValueStates "formatted"', async () => {
+    expect(parseAmount('123,456.78', { mode: 'auto' })).to.equal(123456.78);
+    expect(
+      parseAmount('123,456.78', { mode: 'user-edited', viewValueStates: ['formatted'] }),
+    ).to.equal(123456.78);
+    expect(parseAmount('123.456,78', { mode: 'auto' })).to.equal(123456.78);
+    expect(
+      parseAmount('123.456,78', { mode: 'user-edited', viewValueStates: ['formatted'] }),
+    ).to.equal(123.45678);
+  });
 });

package/components/input-tel-dropdown/src/LionInputTelDropdown.js

@@ -181,7 +181,7 @@ export class LionInputTelDropdown extends LionInputTel {
 
         return {
           template: templates.dropdown(this._templateDataDropdown),
-          renderAsDirectHostChild: Boolean,
+          renderAsDirectHostChild: true,
         };
       },
     };

package/components/localize/src/number/getDecimalSeparator.js

@@ -8,7 +8,7 @@ import { getLocale } from '../utils/getLocale.js';
  * @returns {string} The separator
  */
 export function getDecimalSeparator(locale, options) {
-  if (options && options.decimalSeparator) {
+  if (options?.decimalSeparator) {
     return options.decimalSeparator;
   }
   const computedLocale = getLocale(locale);

package/components/localize/src/number/parseNumber.js

@@ -16,14 +16,18 @@ import { getDecimalSeparator } from './getDecimalSeparator.js';
  * parseNumber('1,234.56'); // method: heuristic => 1234.56
  *
  * @param {string} value Clean number (only [0-9 ,.]) to be parsed
- * @param {object} options
- * @param {string?} [options.mode] auto|pasted
+ * @param {{mode?:'auto'|'pasted'|'user-edited'; viewValueStates?:string[]}} options
  * @return {string} unparseable|withLocale|heuristic
  */
-function getParseMode(value, { mode = 'auto' } = {}) {
+function getParseMode(value, { mode = 'auto', viewValueStates } = {}) {
   const separators = value.match(/[., ]/g);
 
-  if (!separators) {
+  // When a user edits an existing value, we already formatted it with a certain locale.
+  // For best UX, we stick with this locale
+  const shouldAlignWithExistingSeparators =
+    viewValueStates?.includes('formatted') && mode === 'user-edited';
+
+  if (!separators || shouldAlignWithExistingSeparators) {
     return 'withLocale';
   }
   if (mode === 'auto' && separators.length === 1) {
@@ -52,8 +56,7 @@ function getParseMode(value, { mode = 'auto' } = {}) {
  * @param {import('../../types/LocalizeMixinTypes.js').FormatNumberOptions} options Locale Options
  */
 function parseWithLocale(value, options) {
-  const locale = options && options.locale ? options.locale : undefined;
-  const separator = getDecimalSeparator(locale, options);
+  const separator = getDecimalSeparator(options?.locale, options);
   const regexNumberAndLocaleSeparator = new RegExp(`[0-9${separator}-]`, 'g');
   let numberAndLocaleSeparator = value.match(regexNumberAndLocaleSeparator)?.join('');
   if (separator === ',') {

package/components/localize/test/number/parseNumber.test.js

@@ -74,6 +74,17 @@ describe('parseNumber()', () => {
     expect(parseNumber('123456.78', { mode: 'pasted' })).to.equal(123456.78);
   });
 
+  it('detects separators withLocale when "user-edited" mode combined with viewValueStates "formatted" used e.g. 123.456,78', async () => {
+    expect(parseNumber('123,456.78', { mode: 'auto' })).to.equal(123456.78);
+    expect(
+      parseNumber('123,456.78', { mode: 'user-edited', viewValueStates: ['formatted'] }),
+    ).to.equal(123456.78);
+    expect(parseNumber('123.456,78', { mode: 'auto' })).to.equal(123456.78);
+    expect(
+      parseNumber('123.456,78', { mode: 'user-edited', viewValueStates: ['formatted'] }),
+    ).to.equal(123.45678);
+  });
+
   it('detects separators unparseable when there are 2 same ones e.g. 1.234.56', () => {
     expect(parseNumber('1.234.56')).to.equal(123456);
     expect(parseNumber('1,234,56')).to.equal(123456);

package/components/localize/types/LocalizeMixinTypes.ts

@@ -21,7 +21,7 @@ export declare interface FormatDateOptions extends Intl.DateTimeFormatOptions {
 
   roundMode?: string;
   returnIfNaN?: string;
-  mode?: 'pasted' | 'auto';
+  mode?: 'pasted' | 'auto' | 'user-edited';
 
   postProcessors?: Map<string, DatePostProcessor>;
 }
@@ -41,8 +41,8 @@ export declare interface FormatNumberOptions extends Intl.NumberFormatOptions {
   // https://en.wikipedia.org/wiki/Decimal_separator#Digit_grouping
   // note the half space in there as well
   groupSeparator?: ',' | '.' | ' ' | '_' | ' ' | "'";
-  mode?: 'pasted' | 'auto';
-
+  mode?: 'pasted' | 'auto' | 'user-edited';
+  viewValueStates?: 'formatted'[];
   postProcessors?: Map<string, NumberPostProcessor>;
 }