fix(input-amount,localize): make decimalSeparator formatOptions work (#1769)

.changeset/rare-tomatoes-kiss.md

@@ -0,0 +1,6 @@
+---
+'@lion/input-amount': patch
+'@lion/localize': patch
+---
+
+Fixes the already existing decimalSeparator property to actually override the decimal with the prop in formatNumberToParts.

packages/input-amount/test/lion-input-amount.test.js

@@ -58,6 +58,18 @@ describe('<lion-input-amount>', () => {
     expect(el.formattedValue).to.equal('123,00');
   });
 
+  it('supports overriding decimalSeparator in formatOptions', async () => {
+    const el = /** @type {LionInputAmount} */ (
+      await fixture(
+        html`<lion-input-amount
+          .formatOptions="${{ locale: 'nl-NL', decimalSeparator: '.' }}"
+          .modelValue="${99}"
+        ></lion-input-amount>`,
+      )
+    );
+    expect(el.formattedValue).to.equal('99.00');
+  });
+
   it('ignores global locale change if property is provided', async () => {
     const el = /** @type {LionInputAmount} */ (
       await fixture(html`

packages/localize/src/number/formatNumberToParts.js

@@ -83,9 +83,9 @@ export function formatNumberToParts(number, options = {}) {
         formattedParts.push({ type: 'integer', value: numberPart });
         numberPart = '';
       }
-      const decimal = getDecimalSeparator(computedLocale);
+      const decimal = getDecimalSeparator(computedLocale, options);
-      if (formattedNumber[i] === decimal) {
+      if (formattedNumber[i] === decimal || options.decimalSeparator === decimal) {
-        formattedParts.push({ type: 'decimal', value: formattedNumber[i] });
+        formattedParts.push({ type: 'decimal', value: decimal });
         fraction = true;
       } else {
         formattedParts.push({ type: 'group', value: formattedNumber[i] });

packages/localize/src/number/getDecimalSeparator.js

@@ -4,9 +4,13 @@ import { getLocale } from '../utils/getLocale.js';
  * To get the decimal separator
  *
  * @param {string} [locale] To override the browser locale
+ * @param {import('../../types/LocalizeMixinTypes').FormatNumberOptions} [options]
  * @returns {string} The separator
  */
-export function getDecimalSeparator(locale) {
+export function getDecimalSeparator(locale, options) {
+  if (options && options.decimalSeparator) {
+    return options.decimalSeparator;
+  }
   const computedLocale = getLocale(locale);
   const formattedNumber = Intl.NumberFormat(computedLocale, {
     style: 'decimal',

packages/localize/src/number/parseNumber.js

@@ -64,12 +64,11 @@ function getParseMode(value, { mode = 'auto' } = {}) {
  * parseWithLocale('1,234', { locale: 'en-GB' }) => 1234
  *
  * @param {string} value Number to be parsed
- * @param {Object} options Locale Options
+ * @param {import('../../types/LocalizeMixinTypes').FormatNumberOptions} options Locale Options
- * @param {string} [options.locale]
  */
 function parseWithLocale(value, options) {
   const locale = options && options.locale ? options.locale : undefined;
-  const separator = getDecimalSeparator(locale);
+  const separator = getDecimalSeparator(locale, options);
   const regexNumberAndLocaleSeparator = new RegExp(`[0-9${separator}-]`, 'g');
   let numberAndLocaleSeparator = value.match(regexNumberAndLocaleSeparator)?.join('');
   if (separator === ',') {
@@ -119,7 +118,7 @@ function parseHeuristic(value) {
  * parseNumber('1,234.56'); // method: heuristic => 1234.56
  *
  * @param {string} value Number to be parsed
- * @param {object} [options] Locale Options
+ * @param {import('../../types/LocalizeMixinTypes').FormatNumberOptions} [options] Locale Options
  */
 export function parseNumber(value, options) {
   const containsNumbers = value.match(/\d/g);

packages/localize/test/number/getDecimalSeparator.test.js

@@ -8,4 +8,9 @@ describe('getDecimalSeparator', () => {
     expect(getDecimalSeparator('nl-NL')).to.equal(',');
     expect(getDecimalSeparator('fr-FR')).to.equal(',');
   });
+
+  it('will return the decimalSeparator from options if passed', () => {
+    expect(getDecimalSeparator('nl-NL')).to.equal(',');
+    expect(getDecimalSeparator('nl-NL', { decimalSeparator: '.' })).to.equal('.');
+  });
 });

yarn.lock

@@ -11637,6 +11637,11 @@ singleton-manager@1.4.2:
   resolved "https://registry.yarnpkg.com/singleton-manager/-/singleton-manager-1.4.2.tgz#4649acafca3eccf987d828ab16369ee59c4a22a5"
   integrity sha512-3/K7K61TiN0+tw32HRC3AZQBacN0Ky/NmHEnhofFPEFROqZ5T6BXK45Z94OQsvuFD2euOVOU40XDNeTal63Baw==
 
+singleton-manager@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/singleton-manager/-/singleton-manager-1.4.3.tgz#bdfd71e3b8c99ee8a0d9086496a795c84f886d0e"
+  integrity sha512-Jy1Ib9cO9xCQ6UZ/vyFOqqWMnSpfZ8/Sc2vme944aWsCLO+lMPiFG9kGZGpyiRT9maYeI0JyZH1CGgjmkSN8VA==
+
 sinon@^7.2.2:
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/sinon/-/sinon-7.5.0.tgz#e9488ea466070ea908fd44a3d6478fd4923c67ec"