@lion/ui 0.13.0 → 0.14.0

package/components/input-amount-dropdown/src/currencyUtil.js

@@ -0,0 +1,324 @@
+/**
+ * This country to currency list was exported from Java.
+ * Java contains a country:currency map according to the i18n spec, but JS does not.
+ *
+ * @type {import("../types/index.js").countryToCurrencyList}
+ *
+ * @example
+ * // The following Java code can be used to export the countryToCurrencyList
+ *
+ * import java.util.Currency;
+ * import java.util.Locale;
+ *
+ * public class Main {
+ *     public static void main(String[] args) {
+ *         // get all ISO countries
+ *         String[] ISOCountryCodes = Locale.getISOCountries();
+ *
+ *         // loop over all the countries.
+ *         for (String country : ISOCountryCodes) {
+ *             try {
+ *                 // get the locale for said country
+ *                 Locale locale = new Locale("", country);
+ *
+ *                 // creates a Currency instance which has a bunch of standardized information.
+ *                 // from that class we can get the currency linked to the country.
+ *                 String currencyCode = Currency.getInstance(locale).getCurrencyCode();
+ *
+ *                 // prints to the console, which can be copied to update the map if changes occurred
+ *                 String output = country + ": '" + currencyCode + "',\n";
+ *                 System.out.print(output);
+ *             } catch (Exception e) {
+ *             }
+ *         }
+ *     }
+ * }
+ */
+const countryToCurrencyList = {
+  AD: 'EUR',
+  AE: 'AED',
+  AF: 'AFN',
+  AG: 'XCD',
+  AI: 'XCD',
+  AL: 'ALL',
+  AM: 'AMD',
+  AO: 'AOA',
+  AR: 'ARS',
+  AS: 'USD',
+  AT: 'EUR',
+  AU: 'AUD',
+  AW: 'AWG',
+  AX: 'EUR',
+  AZ: 'AZN',
+  BA: 'BAM',
+  BB: 'BBD',
+  BD: 'BDT',
+  BE: 'EUR',
+  BF: 'XOF',
+  BG: 'BGN',
+  BH: 'BHD',
+  BI: 'BIF',
+  BJ: 'XOF',
+  BL: 'EUR',
+  BM: 'BMD',
+  BN: 'BND',
+  BO: 'BOB',
+  BQ: 'USD',
+  BR: 'BRL',
+  BS: 'BSD',
+  BT: 'BTN',
+  BV: 'NOK',
+  BW: 'BWP',
+  BY: 'BYN',
+  BZ: 'BZD',
+  CA: 'CAD',
+  CC: 'AUD',
+  CD: 'CDF',
+  CF: 'XAF',
+  CG: 'XAF',
+  CH: 'CHF',
+  CI: 'XOF',
+  CK: 'NZD',
+  CL: 'CLP',
+  CM: 'XAF',
+  CN: 'CNY',
+  CO: 'COP',
+  CR: 'CRC',
+  CU: 'CUP',
+  CV: 'CVE',
+  CW: 'XCG',
+  CX: 'AUD',
+  CY: 'EUR',
+  CZ: 'CZK',
+  DE: 'EUR',
+  DJ: 'DJF',
+  DK: 'DKK',
+  DM: 'XCD',
+  DO: 'DOP',
+  DZ: 'DZD',
+  EC: 'USD',
+  EE: 'EUR',
+  EG: 'EGP',
+  EH: 'MAD',
+  ER: 'ERN',
+  ES: 'EUR',
+  ET: 'ETB',
+  FI: 'EUR',
+  FJ: 'FJD',
+  FK: 'FKP',
+  FM: 'USD',
+  FO: 'DKK',
+  FR: 'EUR',
+  GA: 'XAF',
+  GB: 'GBP',
+  GD: 'XCD',
+  GE: 'GEL',
+  GF: 'EUR',
+  GG: 'GBP',
+  GH: 'GHS',
+  GI: 'GIP',
+  GL: 'DKK',
+  GM: 'GMD',
+  GN: 'GNF',
+  GP: 'EUR',
+  GQ: 'XAF',
+  GR: 'EUR',
+  GS: 'GBP',
+  GT: 'GTQ',
+  GU: 'USD',
+  GW: 'XOF',
+  GY: 'GYD',
+  HK: 'HKD',
+  HM: 'AUD',
+  HN: 'HNL',
+  HR: 'EUR',
+  HT: 'HTG',
+  HU: 'HUF',
+  ID: 'IDR',
+  IE: 'EUR',
+  IL: 'ILS',
+  IM: 'GBP',
+  IN: 'INR',
+  IO: 'USD',
+  IQ: 'IQD',
+  IR: 'IRR',
+  IS: 'ISK',
+  IT: 'EUR',
+  JE: 'GBP',
+  JM: 'JMD',
+  JO: 'JOD',
+  JP: 'JPY',
+  KE: 'KES',
+  KG: 'KGS',
+  KH: 'KHR',
+  KI: 'AUD',
+  KM: 'KMF',
+  KN: 'XCD',
+  KP: 'KPW',
+  KR: 'KRW',
+  KW: 'KWD',
+  KY: 'KYD',
+  KZ: 'KZT',
+  LA: 'LAK',
+  LB: 'LBP',
+  LC: 'XCD',
+  LI: 'CHF',
+  LK: 'LKR',
+  LR: 'LRD',
+  LS: 'LSL',
+  LT: 'EUR',
+  LU: 'EUR',
+  LV: 'EUR',
+  LY: 'LYD',
+  MA: 'MAD',
+  MC: 'EUR',
+  MD: 'MDL',
+  ME: 'EUR',
+  MF: 'EUR',
+  MG: 'MGA',
+  MH: 'USD',
+  MK: 'MKD',
+  ML: 'XOF',
+  MM: 'MMK',
+  MN: 'MNT',
+  MO: 'MOP',
+  MP: 'USD',
+  MQ: 'EUR',
+  MR: 'MRU',
+  MS: 'XCD',
+  MT: 'EUR',
+  MU: 'MUR',
+  MV: 'MVR',
+  MW: 'MWK',
+  MX: 'MXN',
+  MY: 'MYR',
+  MZ: 'MZN',
+  NA: 'NAD',
+  NC: 'XPF',
+  NE: 'XOF',
+  NF: 'AUD',
+  NG: 'NGN',
+  NI: 'NIO',
+  NL: 'EUR',
+  NO: 'NOK',
+  NP: 'NPR',
+  NR: 'AUD',
+  NU: 'NZD',
+  NZ: 'NZD',
+  OM: 'OMR',
+  PA: 'PAB',
+  PE: 'PEN',
+  PF: 'XPF',
+  PG: 'PGK',
+  PH: 'PHP',
+  PK: 'PKR',
+  PL: 'PLN',
+  PM: 'EUR',
+  PN: 'NZD',
+  PR: 'USD',
+  PS: 'ILS',
+  PT: 'EUR',
+  PW: 'USD',
+  PY: 'PYG',
+  QA: 'QAR',
+  RE: 'EUR',
+  RO: 'RON',
+  RS: 'RSD',
+  RU: 'RUB',
+  RW: 'RWF',
+  SA: 'SAR',
+  SB: 'SBD',
+  SC: 'SCR',
+  SD: 'SDG',
+  SE: 'SEK',
+  SG: 'SGD',
+  SH: 'SHP',
+  SI: 'EUR',
+  SJ: 'NOK',
+  SK: 'EUR',
+  SL: 'SLE',
+  SM: 'EUR',
+  SN: 'XOF',
+  SO: 'SOS',
+  SR: 'SRD',
+  SS: 'SSP',
+  ST: 'STN',
+  SV: 'SVC',
+  SX: 'XCG',
+  SY: 'SYP',
+  SZ: 'SZL',
+  TC: 'USD',
+  TD: 'XAF',
+  TF: 'EUR',
+  TG: 'XOF',
+  TH: 'THB',
+  TJ: 'TJS',
+  TK: 'NZD',
+  TL: 'USD',
+  TM: 'TMT',
+  TN: 'TND',
+  TO: 'TOP',
+  TR: 'TRY',
+  TT: 'TTD',
+  TV: 'AUD',
+  TW: 'TWD',
+  TZ: 'TZS',
+  UA: 'UAH',
+  UG: 'UGX',
+  UM: 'USD',
+  US: 'USD',
+  UY: 'UYU',
+  UZ: 'UZS',
+  VA: 'EUR',
+  VC: 'XCD',
+  VE: 'VES',
+  VG: 'USD',
+  VI: 'USD',
+  VN: 'VND',
+  VU: 'VUV',
+  WF: 'XPF',
+  WS: 'WST',
+  YE: 'YER',
+  YT: 'EUR',
+  ZA: 'ZAR',
+  ZM: 'ZMW',
+  ZW: 'ZWG',
+};
+
+/**
+ * Map containing all countries and its corresponding currency, following the i18n standard.
+ * @type {import("../types/index.js").RegionToCurrencyMap}
+ */
+const countryToCurrencyMap = /** @type {import("../types/index.js").RegionToCurrencyMap} */ (
+  new Map(Object.entries(countryToCurrencyList))
+);
+
+/**
+ * Set with all possible currencies derived from the i18n standard.
+ * @type {import("../types/index.js").AllCurrenciesSet}
+ */
+const allCurrencies = new Set(Object.values(countryToCurrencyList).sort());
+
+/**
+ * Matches a currency symbol to a currency code, with a given locale based on Intl.numberFormat.
+ * @param {import("./LionInputAmountDropdown.js").CurrencyCode} currency
+ * @param {string} locale
+ * @returns {string}
+ */
+const getCurrencySymbol = (currency, locale) => {
+  if (!locale || !currency) {
+    return '';
+  }
+
+  return (
+    new Intl.NumberFormat(locale, { style: 'currency', currency })
+      .formatToParts(1)
+      .find(x => x.type === 'currency')?.value || ''
+  );
+};
+
+export const currencyUtil = {
+  countryToCurrencyMap,
+  allCurrencies,
+  getCurrencySymbol,
+};

package/components/input-amount-dropdown/src/formatters.js

@@ -0,0 +1,24 @@
+import { formatAmount as _formatAmount } from '@lion/ui/input-amount.js';
+import { currencyUtil } from './currencyUtil.js';
+
+/**
+ * @typedef {import('../../localize/types/LocalizeMixinTypes.js').FormatNumberOptions} FormatOptions
+ * @typedef {import('../types/index.js').AmountDropdownModelValue} AmountDropdownModelValue
+ */
+
+/**
+ * Formats a number considering the default fraction digits provided by Intl.
+ *
+ * @param {import('../types/index.js').AmountDropdownModelValue} modelValue  to format
+ * @param {FormatOptions} [givenOptions]
+ * @param {AmountDropdownModelValue|undefined} [context]
+ */
+export const formatAmount = (modelValue, givenOptions, context) => {
+  // @ts-expect-error - cannot cast string to CurrencyCode outside a TS file
+  if (currencyUtil.allCurrencies.has(modelValue?.currency) && context) {
+    // TODO: better way of setting parent currency
+    context.currency = modelValue?.currency;
+  }
+  // @ts-expect-error - cannot cast string to CurrencyCode outside a TS file
+  return _formatAmount(modelValue?.amount, givenOptions);
+};

package/components/input-amount-dropdown/src/localizeNamespaceLoader.js

@@ -0,0 +1,7 @@
+/* eslint-disable import/no-extraneous-dependencies */
+export const localizeNamespaceLoader = /** @param {string} locale */ locale => {
+  switch (locale) {
+    default:
+      return import('@lion/ui/input-amount-dropdown-translations/en.js');
+  }
+};

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

@@ -0,0 +1,23 @@
+import { parseAmount as _parseAmount } from '@lion/ui/input-amount.js';
+
+/**
+ * Uses `parseAmount()` to parse a number string and return the best possible javascript number.
+ * Rounds up the number with the correct amount of decimals according to the currency.
+ *
+ * @example
+ * parseAmount('1,234.56', {currency: 'EUR'}); => { amount: 1234.56, currency: 'EUR' }
+ * parseAmount('1,234.56', {currency: 'JPY'}); => { amount: 1235, currency: 'JPY' }
+ * parseAmount('1,234.56', {currency: 'JOD'}); => { amount: 1234.560, currency: 'JOD' }
+ *
+ * @param {string} value Number to be parsed
+ * @param {import('../../localize/types/LocalizeMixinTypes.js').FormatNumberOptions} [givenOptions] Locale Options
+ * @returns {import('../types/index.js').AmountDropdownModelValue}
+ */
+export const parseAmount = (value, givenOptions) => {
+  const parsedAmount = _parseAmount(value, givenOptions);
+
+  return {
+    amount: parsedAmount,
+    currency: givenOptions?.currency,
+  };
+};

package/components/input-amount-dropdown/src/serializers.js

@@ -0,0 +1,24 @@
+/**
+ * Serializes the modelValue to the international standard notation.
+ * @param {import("../types/index.js").AmountDropdownModelValue} modelValue
+ * @returns {string}
+ */
+export const serializer = modelValue =>
+  /**
+   * There seems to be some debate on a common international notation vs localization.
+   * The unwritten standard is, e.g: EUR 123
+   */
+  `${modelValue?.currency} ${modelValue?.amount}`;
+
+/**
+ * Deserializes the serializedValue back to modelValue.
+ * @param {string} serializedValue
+ * @returns {import("../types/index.js").AmountDropdownModelValue}
+ */
+export const deserializer = serializedValue => {
+  const [currency, amount] = serializedValue.split(' ');
+  return {
+    currency,
+    amount,
+  };
+};

package/components/input-amount-dropdown/src/validators.js

@@ -0,0 +1,22 @@
+import { IsNumber, Validator } from '@lion/ui/form-core.js';
+import { currencyUtil } from './currencyUtil.js';
+
+/**
+ * @typedef {import('../../form-core/types/validate/validate.js').FeedbackMessageData} FeedbackMessageData
+ */
+
+export class CurrencyAndAmount extends Validator {
+  static validatorName = 'CurrencyAndAmount';
+
+  /**
+   * @param {import('../types/index.js').AmountDropdownModelValue} modelValue amount and currency symbol
+   */
+  // eslint-disable-next-line class-methods-use-this
+  execute(modelValue) {
+    // @ts-expect-error - cannot cast string to CurrencyCode outside a TS file
+    const validCurrencyCode = currencyUtil.allCurrencies.has(modelValue?.currency);
+    const isNumber = new IsNumber().execute(modelValue.amount);
+
+    return validCurrencyCode && isNumber;
+  }
+}

package/components/input-amount-dropdown/test/LionInputAmountDropdown.test.js

@@ -0,0 +1,199 @@
+import { mimicUserChangingDropdown } from '@lion/ui/input-amount-dropdown-test-helpers.js';
+import { runInputAmountDropdownSuite } from '@lion/ui/input-amount-dropdown-test-suites.js';
+import { LionInputAmountDropdown } from '@lion/ui/input-amount-dropdown.js';
+import { aTimeout, expect, fixture } from '@open-wc/testing';
+import { LionSelectRich } from '@lion/ui/select-rich.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { LionOption } from '@lion/ui/listbox.js';
+import { ref } from 'lit/directives/ref.js';
+import { html } from 'lit';
+
+import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
+import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
+import '@lion/ui/define/lion-input-amount-dropdown.js';
+
+/**
+ * @typedef {import('../types/index.js').TemplateDataForDropdownInputAmount} TemplateDataForDropdownInputAmount
+ * @typedef {HTMLSelectElement|HTMLElement & {modelValue:string}} DropdownElement
+ * @typedef {import('../types/index.js').RegionMeta} RegionMeta
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+
+class WithFormControlInputAmountDropdown extends ScopedElementsMixin(LionInputAmountDropdown) {
+  /**
+   * @configure ScopedElementsMixin
+   */
+  static scopedElements = {
+    ...super.scopedElements,
+    'lion-select-rich': LionSelectRich,
+    'lion-option': LionOption,
+  };
+
+  static templates = {
+    ...(super.templates || {}),
+    /**
+     * @param {TemplateDataForDropdownInputAmount} templateDataForDropdown
+     */
+    dropdown: templateDataForDropdown => {
+      const { refs, data } = templateDataForDropdown;
+      // TODO: once spread directive available, use it per ref (like ref(refs?.dropdown?.ref))
+      return html`
+        <lion-select-rich
+          ${ref(refs?.dropdown?.ref)}
+          label="${refs?.dropdown?.labels?.country}"
+          label-sr-only
+          @model-value-changed="${refs?.dropdown?.listeners['model-value-changed']}"
+          style="${refs?.dropdown?.props?.style}"
+        >
+          ${repeat(
+            data.regionMetaList,
+            regionMeta => regionMeta.currencyCode,
+            regionMeta => html`
+              <lion-option .choiceValue="${regionMeta.currencyCode}"> </lion-option>
+            `,
+          )}
+        </lion-select-rich>
+      `;
+    },
+  };
+}
+
+runInputAmountDropdownSuite();
+
+describe('WithFormControlInputAmountDropdown', () => {
+  // @ts-expect-error
+  // Runs it for LionSelectRich, which uses .modelValue/@model-value-changed instead of .value/@change
+  runInputAmountDropdownSuite({ klass: WithFormControlInputAmountDropdown });
+
+  it('focuses the textbox right after selection if selected via opened dropdown if interaction-mode is mac', async () => {
+    class InputAmountDropdownMac extends LionInputAmountDropdown {
+      static templates = {
+        ...(super.templates || {}),
+        /**
+         * @param {TemplateDataForDropdownInputAmount} templateDataForDropdown
+         */
+        dropdown: templateDataForDropdown => {
+          const { refs, data } = templateDataForDropdown;
+          // TODO: once spread directive available, use it per ref (like ref(refs?.dropdown?.ref))
+          return html`
+            <lion-select-rich
+              ${ref(refs?.dropdown?.ref)}
+              label="${refs?.dropdown?.labels?.country}"
+              label-sr-only
+              @model-value-changed="${refs?.dropdown?.listeners['model-value-changed']}"
+              style="${refs?.dropdown?.props?.style}"
+              interaction-mode="mac"
+            >
+              ${repeat(
+                data.regionMetaList,
+                regionMeta => regionMeta.currencyCode,
+                regionMeta => html`
+                  <lion-option .choiceValue="${regionMeta.currencyCode}"> </lion-option>
+                `,
+              )}
+            </lion-select-rich>
+          `;
+        },
+      };
+    }
+    customElements.define('input-amount-dropdown-mac', InputAmountDropdownMac);
+    const el = /** @type {LionInputAmountDropdown} */ (
+      await fixture(html`
+        <input-amount-dropdown-mac
+          .allowedCurrencies="${['GBP', 'EUR']}"
+          .modelValue="{ currency: 'GBP', amount: '123' }"
+        ></input-amount-dropdown-mac>
+      `)
+    );
+    const dropdownElement = el.refs.dropdown.value;
+    // @ts-expect-error [allow-protected-in-tests]
+    if (dropdownElement?._overlayCtrl) {
+      // @ts-expect-error [allow-protected-in-tests]
+      dropdownElement._overlayCtrl.show();
+      mimicUserChangingDropdown(dropdownElement, 'EUR');
+      await el.updateComplete;
+      await aTimeout(0);
+      // @ts-expect-error [allow-protected-in-tests]
+      expect(isActiveElement(el._inputNode)).to.be.true;
+    }
+  });
+
+  it('does not focus the textbox right after selection if selected via opened dropdown if interaction-mode is windows/linux', async () => {
+    class InputAmountDropdownWindows extends LionInputAmountDropdown {
+      static templates = {
+        ...(super.templates || {}),
+        /**
+         * @param {TemplateDataForDropdownInputAmount} templateDataForDropdown
+         */
+        dropdown: templateDataForDropdown => {
+          const { refs, data } = templateDataForDropdown;
+          // TODO: once spread directive available, use it per ref (like ref(refs?.dropdown?.ref))
+          return html`
+            <lion-select-rich
+              ${ref(refs?.dropdown?.ref)}
+              label="${refs?.dropdown?.labels?.country}"
+              label-sr-only
+              @model-value-changed="${refs?.dropdown?.listeners['model-value-changed']}"
+              style="${refs?.dropdown?.props?.style}"
+              interaction-mode="windows/linux"
+            >
+              ${repeat(
+                data.regionMetaList,
+                regionMeta => regionMeta.currencyCode,
+                regionMeta => html`
+                  <lion-option .choiceValue="${regionMeta.currencyCode}"> </lion-option>
+                `,
+              )}
+            </lion-select-rich>
+          `;
+        },
+      };
+    }
+    customElements.define('input-amount-dropdown-windows', InputAmountDropdownWindows);
+    const el = /** @type {LionInputAmountDropdown} */ (
+      await fixture(html`
+        <input-amount-dropdown-windows
+          .allowedCurrencies="${['GBP', 'EUR']}"
+          .modelValue="{ currency: 'GBP', amount: '123' }"
+        ></input-amount-dropdown-windows>
+      `)
+    );
+    const dropdownElement = el.refs.dropdown.value;
+    // @ts-expect-error [allow-protected-in-tests]
+    if (dropdownElement?._overlayCtrl) {
+      // @ts-expect-error [allow-protected-in-tests]
+      dropdownElement._overlayCtrl.show();
+      mimicUserChangingDropdown(dropdownElement, 'EUR');
+      await el.updateComplete;
+      await aTimeout(0);
+      // @ts-expect-error [allow-protected-in-tests]
+      expect(isActiveElement(el._inputNode)).to.be.false;
+    }
+  });
+
+  describe('defaultValidators', () => {
+    it('without interaction are not called', async () => {
+      const el = /** @type {LionInputAmountDropdown} */ (
+        await fixture(html`
+          <lion-input-amount-dropdown .allowedCurrencies="${['EUR']}"></lion-input-amount-dropdown>
+        `)
+      );
+      await aTimeout(0);
+      expect(el.hasFeedbackFor).to.deep.equal([]);
+    });
+
+    it('with interaction are called', async () => {
+      const el = /** @type {LionInputAmountDropdown} */ (
+        await fixture(html`
+          <lion-input-amount-dropdown
+            .allowedCurrencies="${['GBP', 'EUR']}"
+          ></lion-input-amount-dropdown>
+        `)
+      );
+      el.modelValue = { currency: 'EUR' };
+      await aTimeout(0);
+      el.modelValue = { currency: 'EUR', amount: '' };
+      expect(el.hasFeedbackFor).to.deep.equal(['error']);
+    });
+  });
+});

package/components/input-amount-dropdown/test-helpers/mimicUserChangingDropdown.js

@@ -0,0 +1,22 @@
+/**
+ * @typedef {HTMLSelectElement|HTMLElement & {modelValue:string}} DropdownElement
+ */
+
+/**
+ * @param {DropdownElement} dropdownEl
+ * @param {string} value
+ */
+export function mimicUserChangingDropdown(dropdownEl, value) {
+  if ('modelValue' in dropdownEl) {
+    // eslint-disable-next-line no-param-reassign
+    dropdownEl.modelValue = value;
+    dropdownEl.dispatchEvent(
+      new CustomEvent('model-value-changed', { detail: { isTriggeredByUser: true } }),
+    );
+  } else {
+    // eslint-disable-next-line no-param-reassign
+    dropdownEl.value = value;
+    dropdownEl.dispatchEvent(new Event('change'));
+    dropdownEl.dispatchEvent(new Event('input'));
+  }
+}