fix(input-amount): normalize added for currency label (#618)

packages/input-amount/src/LionInputAmount.js

@@ -1,9 +1,9 @@
 import { css } from '@lion/core';
-import { LocalizeMixin, getCurrencyName } from '@lion/localize';
+import { LocalizeMixin, getCurrencyName, localize } from '@lion/localize';
 import { LionInput } from '@lion/input';
 import { IsNumber } from '@lion/validate';
 import { parseAmount } from './parsers.js';
-import { formatAmount } from './formatters.js';
+import { formatAmount, formatCurrencyLabel } from './formatters.js';
 
 /**
  * `LionInputAmount` is a class for an amount custom form element (`<lion-input-amount>`).
@@ -40,7 +40,8 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
           // The data-label attribute will make sure that FormControl adds this to
           // input[aria-labelledby]
           el.setAttribute('data-label', '');
-          el.textContent = this.currency;
+
+          el.textContent = this.__getCurrencyLabel();
           return el;
         }
         return null;
@@ -114,7 +115,7 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
 
   _onCurrencyChanged({ currency }) {
     if (this._isPrivateSlot('after')) {
-      this._currencyDisplayNode.textContent = currency;
+      this._currencyDisplayNode.textContent = this.__getCurrencyLabel();
     }
     this.formatOptions.currency = currency;
     this._calculateValues();
@@ -127,4 +128,12 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
     // sufficient, it should also contain the abbreviation.
     this._currencyDisplayNode.setAttribute('aria-label', getCurrencyName(this.currency));
   }
+
+  __getCurrencyLabel() {
+    return formatCurrencyLabel(this.currency, this.__getLocale());
+  }
+
+  __getLocale() {
+    return this.locale || localize.locale;
+  }
 }

packages/input-amount/src/formatters.js

@@ -1,4 +1,4 @@
-import { formatNumber, getFractionDigits } from '@lion/localize';
+import { formatNumber, getFractionDigits, normalizeCurrencyLabel } from '@lion/localize';
 
 /**
  * Formats a number considering the default fraction digits provided by Intl
@@ -23,3 +23,10 @@ export function formatAmount(modelValue, givenOptions) {
 
   return formatNumber(modelValue, options);
 }
+
+export function formatCurrencyLabel(currency, locale) {
+  if (currency === '') {
+    return '';
+  }
+  return normalizeCurrencyLabel(currency, locale);
+}

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

@@ -79,6 +79,12 @@ describe('<lion-input-amount>', () => {
     expect(Array.from(el.children).find(child => child.slot === 'after').innerText).to.equal('EUR');
   });
 
+  it('displays correct currency for TRY if locale is tr-TR', async () => {
+    localize.locale = 'tr-TR';
+    const el = await fixture(`<lion-input-amount currency="TRY"></lion-input-amount>`);
+    expect(Array.from(el.children).find(child => child.slot === 'after').innerText).to.equal('TL');
+  });
+
   it('can update currency', async () => {
     const el = await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`);
     el.currency = 'USD';

packages/localize/index.js

@@ -13,3 +13,4 @@ export { getGroupSeparator } from './src/number/getGroupSeparator.js';
 export { localize, setLocalize } from './src/localize.js';
 export { LocalizeManager } from './src/LocalizeManager.js';
 export { LocalizeMixin } from './src/LocalizeMixin.js';
+export { normalizeCurrencyLabel } from './src/number/normalizeCurrencyLabel.js';

packages/localize/src/number/normalizeCurrencyLabel.js

@@ -0,0 +1,13 @@
+/**
+ * Function that fixes currency label with locale options
+ *
+ * @param {String} currency
+ * @param {string} locale
+ * @returns {string} currency
+ */
+export function normalizeCurrencyLabel(currency, locale) {
+  if (currency === 'TRY' && locale === 'tr-TR') {
+    return 'TL';
+  }
+  return currency;
+}