@lion/ui 0.13.0 → 0.14.0

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

@@ -0,0 +1,322 @@
+import { LionInputAmountDropdown } from '@lion/ui/input-amount-dropdown.js';
+import sinon from 'sinon';
+import {
+  fixtureSync as _fixtureSync,
+  fixture as _fixture,
+  unsafeStatic,
+  aTimeout,
+  defineCE,
+  expect,
+  html,
+} from '@open-wc/testing';
+
+import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
+import { mimicUserChangingDropdown } from '../test-helpers/mimicUserChangingDropdown.js';
+
+/**
+ * @typedef {import('../types/index.js').TemplateDataForDropdownInputAmount} TemplateDataForDropdownInputAmount
+ * @typedef {HTMLSelectElement|HTMLElement & {modelValue:string}} DropdownElement
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+
+const fixture = /** @type {(arg: string | TemplateResult) => Promise<LionInputAmountDropdown>} */ (
+  _fixture
+);
+const fixtureSync = /** @type {(arg: string | TemplateResult) => LionInputAmountDropdown} */ (
+  _fixtureSync
+);
+
+/**
+ * @param {DropdownElement | HTMLSelectElement} dropdownEl
+ * @returns {string}
+ */
+function getDropdownValue(dropdownEl) {
+  if ('modelValue' in dropdownEl) {
+    return dropdownEl.modelValue;
+  }
+  return dropdownEl.value;
+}
+
+/**
+ * @param {{ klass:LionInputAmountDropdown }} config
+ */
+// @ts-expect-error
+export function runInputAmountDropdownSuite({ klass } = { klass: LionInputAmountDropdown }) {
+  // @ts-ignore
+  const tagName = defineCE(/** @type {* & HTMLElement} */ (class extends klass {}));
+  const tag = unsafeStatic(tagName);
+
+  describe('LionInputAmountDropdown', () => {
+    it('syncs value of dropdown on init if input has no value', async () => {
+      const el = await fixture(html` <${tag}></${tag}> `);
+      expect(el.value).to.equal('');
+      expect(getDropdownValue(/** @type {DropdownElement} */ (el.refs.dropdown.value))).to.equal(
+        'GBP',
+      );
+      expect(el.modelValue).to.eql({ currency: 'GBP' });
+    });
+
+    it('syncs value of dropdown on reset if input has no value', async () => {
+      const el = await fixture(html` <${tag}></${tag}> `);
+      el.modelValue = { currency: 'EUR', amount: 123 };
+      await el.updateComplete;
+      el.reset();
+      await el.updateComplete;
+      expect(el.modelValue).to.eql({ currency: 'GBP' });
+      expect(el.value).to.equal('');
+    });
+
+    it('syncs value of dropdown on init if input has no value does not influence interaction states', async () => {
+      const el = await fixture(html` <${tag}></${tag}> `);
+      expect(el.dirty).to.be.false;
+      expect(el.prefilled).to.be.false;
+    });
+
+    it('syncs value of dropdown on reset also resets interaction states', async () => {
+      const el = await fixture(html` <${tag}></${tag}> `);
+      el.modelValue = { currency: 'EUR', amount: 123 };
+      await el.updateComplete;
+
+      expect(el.dirty).to.be.true;
+      expect(el.prefilled).to.be.false;
+      el.reset();
+      await el.updateComplete;
+      expect(el.dirty).to.be.false;
+      expect(el.prefilled).to.be.false;
+    });
+
+    it('syncs value of dropdown when preferredCurrency is set', async () => {
+      const el = await fixture(html` <${tag}
+          .preferredCurrencies="${['JPY', 'EUR']}"
+          ></${tag}> `);
+      expect(el.modelValue).to.eql({ currency: 'JPY' });
+    });
+
+    it('sets correct interaction states on init if input has a value', async () => {
+      const el = await fixture(
+        html` <${tag} .modelValue="${{ currency: 'EUR', amount: 123 }}"></${tag}> `,
+      );
+      expect(el.dirty).to.be.false;
+      expect(el.prefilled).to.be.true;
+    });
+
+    describe('Dropdown display', () => {
+      it('calls `templates.dropdown` with TemplateDataForDropdownInputAmount object', async () => {
+        const modelValue = { currency: 'EUR', amount: 123 };
+        const el = fixtureSync(html` <${tag}
+          .modelValue="${modelValue}"
+          .allowedCurrencies="${['EUR', 'GBP']}"
+          .preferredCurrencies="${['GBP']}"
+          ></${tag}> `);
+        const spy = sinon.spy(
+          /** @type {typeof LionInputAmountDropdown} */ (el.constructor).templates,
+          'dropdown',
+        );
+
+        await el.updateComplete;
+        const dropdownNode = el.refs.dropdown.value;
+        const templateDataForDropdown = /** @type {TemplateDataForDropdownInputAmount} */ (
+          spy.args[0][0]
+        );
+        expect(templateDataForDropdown).to.eql(
+          /** @type {TemplateDataForDropdownInputAmount} */ ({
+            data: {
+              currency: 'EUR',
+              regionMetaList: [
+                {
+                  currencyCode: 'EUR',
+                  currencySymbol: '€',
+                  nameForLocale: 'Euro',
+                },
+              ],
+              regionMetaListPreferred: [
+                {
+                  currencyCode: 'GBP',
+                  currencySymbol: '£',
+                  nameForLocale: 'British Pound',
+                },
+              ],
+            },
+            refs: {
+              dropdown: {
+                labels: {
+                  selectCurrency: 'Select currency',
+                  allCurrencies: 'All currencies',
+                  preferredCurrencies: 'Suggested currencies',
+                },
+                listeners: {
+                  // @ts-expect-error [allow-protected]
+                  change: el._onDropdownValueChange,
+                  // @ts-expect-error [allow-protected]
+                  'model-value-changed': el._onDropdownValueChange,
+                },
+                props: { style: 'height: 100%;' },
+                ref: {
+                  value: dropdownNode,
+                },
+              },
+              // @ts-expect-error [allow-protected]
+              input: el._inputNode,
+            },
+          }),
+        );
+        spy.restore();
+      });
+
+      it('can override "all-currencies-label"', async () => {
+        const el = fixtureSync(html` <${tag}
+          .preferredCurrencies="${['GBP']}"
+          ></${tag}> `);
+        const spy = sinon.spy(
+          /** @type {typeof LionInputAmountDropdown} */ (el.constructor).templates,
+          'dropdown',
+        );
+        // @ts-expect-error [allow-protected]
+        el._allCurrenciesLabel = 'foo';
+        await el.updateComplete;
+        const templateDataForDropdown = /** @type {TemplateDataForDropdownInputAmount} */ (
+          spy.args[0][0]
+        );
+
+        expect(templateDataForDropdown.refs.dropdown.labels.allCurrencies).to.eql('foo');
+        spy.restore();
+      });
+
+      it('can override "preferred-currencies-label"', async () => {
+        const el = fixtureSync(html` <${tag}
+          .preferredCurrencies="${['GBP']}"
+          ></${tag}> `);
+        const spy = sinon.spy(
+          /** @type {typeof LionInputAmountDropdown} */ (el.constructor).templates,
+          'dropdown',
+        );
+        // @ts-expect-error [allow-protected]
+        el._preferredCurrenciesLabel = 'foo';
+        await el.updateComplete;
+        const templateDataForDropdown = /** @type {TemplateDataForDropdownInputAmount} */ (
+          spy.args[0][0]
+        );
+        expect(templateDataForDropdown.refs.dropdown.labels.preferredCurrencies).to.eql('foo');
+        spy.restore();
+      });
+
+      it('syncs dropdown value initially from locale', async () => {
+        const el = await fixture(html` <${tag} .allowedCurrencies="${['GBP']}"></${tag}> `);
+        expect(getDropdownValue(/** @type {DropdownElement} */ (el.refs.dropdown.value))).to.equal(
+          'GBP',
+        );
+        expect(el.modelValue).to.eql({
+          currency: 'GBP',
+        });
+      });
+
+      it('syncs disabled attribute to dropdown', async () => {
+        const el = await fixture(html` <${tag} disabled></${tag}> `);
+        expect(/** @type {HTMLElement} */ (el.refs.dropdown.value)?.hasAttribute('disabled')).to.be
+          .true;
+      });
+
+      it('disables dropdown on readonly', async () => {
+        const el = await fixture(html` <${tag} readonly></${tag}> `);
+        expect(/** @type {HTMLElement} */ (el.refs.dropdown.value)?.hasAttribute('disabled')).to.be
+          .true;
+      });
+
+      it('renders to prefix slot in light dom', async () => {
+        const el = await fixture(html` <${tag} .allowedCurrencies="${['GBP']}"></${tag}> `);
+        const prefixSlot = /** @type {HTMLElement} */ (
+          /** @type {HTMLElement} */ (el.refs.dropdown.value)
+        );
+        expect(prefixSlot.getAttribute('slot')).to.equal('prefix');
+        expect(prefixSlot.slot).to.equal('prefix');
+        expect(prefixSlot.parentElement).to.equal(el);
+      });
+
+      it('renders to suffix slot in light dom', async () => {
+        class WithSuffixRenderInputAmountDropdown extends LionInputAmountDropdown {
+          constructor() {
+            super();
+
+            this._dropdownSlot = 'suffix';
+          }
+        }
+
+        const suffixTagName = defineCE(WithSuffixRenderInputAmountDropdown);
+        const suffixTag = unsafeStatic(suffixTagName);
+
+        const el = await fixture(html`
+          <${suffixTag}
+            .allowedCurrencies="${['GBP']}"
+          ></${suffixTag}>
+        `);
+        const prefixSlot = /** @type {HTMLElement} */ (
+          /** @type {HTMLElement} */ (el.refs.dropdown.value)
+        );
+        expect(prefixSlot.getAttribute('slot')).to.equal('suffix');
+        expect(prefixSlot.slot).to.equal('suffix');
+        expect(prefixSlot.parentElement).to.equal(el);
+      });
+
+      it('rerenders light dom when CurrencyUtil loaded', async () => {
+        const el = await fixture(html` <${tag} .allowedCurrencies="${['GBP']}"></${tag}> `);
+        // @ts-ignore
+        const spy = sinon.spy(el, '__rerenderSlot');
+        await aTimeout(0);
+        expect(spy).to.have.been.calledWith('prefix');
+        spy.restore();
+      });
+    });
+
+    describe('On dropdown value change', () => {
+      it('changes the currently active currency code in the textbox', async () => {
+        const el = await fixture(html`
+          <${tag}
+            .allowedCurrencies="${['GBP', 'EUR']}"
+            .modelValue="${{ currency: 'GBP', amount: 123 }}"
+          ></${tag}>
+        `);
+        // @ts-ignore
+        mimicUserChangingDropdown(el.refs.dropdown.value, 'EUR');
+        await el.updateComplete;
+        expect(el.currency).to.equal('EUR');
+        expect(el.modelValue).to.eql({ amount: 123, currency: 'EUR' });
+        await el.updateComplete;
+        expect(el.value).to.equal('123.00');
+      });
+
+      it('changes the currently active country code in the textbox when empty', async () => {
+        const el = await fixture(html` <${tag} .allowedCurrencies="${['GBP', 'EUR']}"></${tag}> `);
+        el.value = '';
+        // @ts-ignore
+        mimicUserChangingDropdown(el.refs.dropdown.value, 'EUR');
+        await el.updateComplete;
+        await el.updateComplete;
+
+        expect(el.modelValue).to.eql({ currency: 'EUR', amount: '' });
+      });
+
+      it('keeps focus on dropdownElement after selection if selected via unopened dropdown', async () => {
+        const el = await fixture(
+          html` <${tag} .allowedCurrencies="${[
+            'GBP',
+            'EUR',
+          ]}" .modelValue="${{ currency: 'GBP', amount: 123 }}"></${tag}> `,
+        );
+        const dropdownElement = el.refs.dropdown.value;
+        // @ts-ignore
+        mimicUserChangingDropdown(dropdownElement, 'EUR');
+        await el.updateComplete;
+        // @ts-expect-error [allow-protected-in-tests]
+        expect(isActiveElement(el._inputNode)).to.be.false;
+      });
+    });
+  });
+
+  describe('is empty', () => {
+    it('ignores initial currencyCode', async () => {
+      const el = await fixture(html` <${tag}></${tag}> `);
+      // @ts-ignore
+      expect(el._isEmpty(), 'empty').to.be.true;
+    });
+  });
+}

package/components/input-amount-dropdown/translations/en.js

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'All currencies',
+  selectCurrency: 'Select currency',
+  suggestedCurrencies: 'Suggested currencies',
+};

package/components/input-amount-dropdown/types/index.ts

@@ -0,0 +1,234 @@
+import { LionSelectRich } from '@lion/ui/select-rich.js';
+import { LionCombobox } from '@lion/ui/combobox.js';
+import { OverlayController } from '../../overlays/src/OverlayController.js';
+
+type RefTemplateData = {
+  ref?: { value?: HTMLElement };
+  props?: { [key: string]: any };
+  listeners?: { [key: string]: any };
+  labels?: { [key: string]: any };
+};
+
+export type RegionMeta = {
+  currencyCode: CurrencyCode;
+  nameForLocale?: string;
+  currencySymbol?: string;
+};
+
+export type OnDropdownChangeEvent = Event & {
+  target: { value?: string; modelValue?: string; _overlayCtrl?: OverlayController };
+  detail?: { initialize: boolean };
+};
+
+export type DropdownRef = { value: HTMLSelectElement | LionSelectRich | LionCombobox | undefined };
+
+export type TemplateDataForDropdownInputAmount = {
+  refs: {
+    dropdown: RefTemplateData & {
+      ref: DropdownRef;
+      props: { style: string };
+      listeners: {
+        change: (event: OnDropdownChangeEvent) => void;
+        'model-value-changed': (event: OnDropdownChangeEvent) => void;
+      };
+      labels: { selectCurrency: string };
+    };
+    input: HTMLInputElement;
+  };
+  data: {
+    currency: CurrencyCode | string;
+    regionMetaList: RegionMeta[];
+    regionMetaListPreferred: RegionMeta[];
+  };
+};
+
+export type AmountDropdownModelValue = {
+  currency?: CurrencyCode | string;
+  amount?: number | string;
+};
+
+/**
+ * All currency codes according to i18n
+ */
+export type CurrencyCode =
+  | 'EUR'
+  | 'AED'
+  | 'AFN'
+  | 'XCD'
+  | 'ALL'
+  | 'AMD'
+  | 'AOA'
+  | 'ARS'
+  | 'USD'
+  | 'AUD'
+  | 'AWG'
+  | 'AZN'
+  | 'BAM'
+  | 'BBD'
+  | 'BDT'
+  | 'XOF'
+  | 'BGN'
+  | 'BHD'
+  | 'BIF'
+  | 'BMD'
+  | 'BND'
+  | 'BOB'
+  | 'BRL'
+  | 'BSD'
+  | 'BTN'
+  | 'NOK'
+  | 'BWP'
+  | 'BYN'
+  | 'BZD'
+  | 'CAD'
+  | 'CDF'
+  | 'XAF'
+  | 'CHF'
+  | 'NZD'
+  | 'CLP'
+  | 'CNY'
+  | 'COP'
+  | 'CRC'
+  | 'CUP'
+  | 'CVE'
+  | 'ANG'
+  | 'CZK'
+  | 'DJF'
+  | 'DKK'
+  | 'DOP'
+  | 'DZD'
+  | 'EGP'
+  | 'MAD'
+  | 'ERN'
+  | 'ETB'
+  | 'FJD'
+  | 'FKP'
+  | 'GBP'
+  | 'GEL'
+  | 'GHS'
+  | 'GIP'
+  | 'GMD'
+  | 'GNF'
+  | 'GTQ'
+  | 'GYD'
+  | 'HKD'
+  | 'HNL'
+  | 'HTG'
+  | 'HUF'
+  | 'IDR'
+  | 'ILS'
+  | 'INR'
+  | 'IQD'
+  | 'IRR'
+  | 'ISK'
+  | 'JMD'
+  | 'JOD'
+  | 'JPY'
+  | 'KES'
+  | 'KGS'
+  | 'KHR'
+  | 'KMF'
+  | 'KPW'
+  | 'KRW'
+  | 'KWD'
+  | 'KYD'
+  | 'KZT'
+  | 'LAK'
+  | 'LBP'
+  | 'LKR'
+  | 'LRD'
+  | 'LSL'
+  | 'LYD'
+  | 'MDL'
+  | 'MGA'
+  | 'MKD'
+  | 'MMK'
+  | 'MNT'
+  | 'MOP'
+  | 'MRU'
+  | 'MUR'
+  | 'MVR'
+  | 'MWK'
+  | 'MXN'
+  | 'MYR'
+  | 'MZN'
+  | 'NAD'
+  | 'XPF'
+  | 'NGN'
+  | 'NIO'
+  | 'NPR'
+  | 'OMR'
+  | 'PAB'
+  | 'PEN'
+  | 'PGK'
+  | 'PHP'
+  | 'PKR'
+  | 'PLN'
+  | 'PYG'
+  | 'QAR'
+  | 'RON'
+  | 'RSD'
+  | 'RUB'
+  | 'RWF'
+  | 'SAR'
+  | 'SBD'
+  | 'SCR'
+  | 'SDG'
+  | 'SEK'
+  | 'SGD'
+  | 'SHP'
+  | 'SLE'
+  | 'SOS'
+  | 'SRD'
+  | 'SSP'
+  | 'STN'
+  | 'SVC'
+  | 'SYP'
+  | 'SZL'
+  | 'THB'
+  | 'TJS'
+  | 'TMT'
+  | 'TND'
+  | 'TOP'
+  | 'TRY'
+  | 'TTD'
+  | 'TWD'
+  | 'TZS'
+  | 'UAH'
+  | 'UGX'
+  | 'UYU'
+  | 'UZS'
+  | 'VED'
+  | 'VES'
+  | 'VND'
+  | 'VUV'
+  | 'WST'
+  | 'XCG'
+  | 'YER'
+  | 'ZAR'
+  | 'ZMW'
+  | 'ZWG';
+
+/**
+ * Type for country to currency list.
+ * The type is set to Partial as there are some islands that don't have a corresponding
+ * currencyCode as a standard (at the time of writing at least).
+ *
+ * Said missing countries code: AC, TA, XK
+ */
+export type countryToCurrencyList = Partial<{
+  [key in import('../../input-tel/types/index.js').RegionCode]: CurrencyCode;
+}>;
+
+/**
+ * Represents a mapping of region codes to currency codes using a Map.
+ */
+export type RegionToCurrencyMap = Map<
+  import('../../input-tel/types/index.js').RegionCode,
+  CurrencyCode
+>;
+
+/**
+ * Represents a set of all unique currency codes derived from the RegionToCurrencyMap values.
+ */
+export type AllCurrenciesSet = Set<CurrencyCode>;

package/components/input-file/src/LionInputFile.js

@@ -31,6 +31,15 @@ function formatBytes(bytes, decimals = 2) {
   return `${parseFloat((bytes / k ** i).toFixed(dm))}${sizes[i]}`;
 }
 
+/**
+ * LionInputFile: A file input component
+ * This component allows users to select files, displays selected files, and handles file uploads.
+ *
+ * @slot file-select-button - [private] The button to open the file dialog
+ * @slot selected-file-list - [private] The list of selected files
+ *
+ * @customElement lion-input-file
+ */
 export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField)) {
   static get scopedElements() {
     return {

package/components/input-tel/src/LionInputTel.js

@@ -18,6 +18,9 @@ import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
  * @typedef {FormatOptions & {regionCode: RegionCode; formatStrategy: PhoneNumberFormat; formatCountryCodeStyle: string;}} FormatOptionsTel
  */
 
+/**
+ * @customElement lion-input-tel
+ */
 export class LionInputTel extends LocalizeMixin(LionInput) {
   /**
    * @configure LitElement

package/components/input-tel/types/index.ts

@@ -36,6 +36,7 @@ export type RegionCode =
   | 'BR'
   | 'BS'
   | 'BT'
+  | 'BV'
   | 'BW'
   | 'BY'
   | 'BZ'
@@ -91,11 +92,13 @@ export type RegionCode =
   | 'GP'
   | 'GQ'
   | 'GR'
+  | 'GS'
   | 'GT'
   | 'GU'
   | 'GW'
   | 'GY'
   | 'HK'
+  | 'HM'
   | 'HN'
   | 'HR'
   | 'HT'
@@ -180,6 +183,7 @@ export type RegionCode =
   | 'PK'
   | 'PL'
   | 'PM'
+  | 'PN'
   | 'PR'
   | 'PS'
   | 'PT'
@@ -215,6 +219,7 @@ export type RegionCode =
   | 'TA'
   | 'TC'
   | 'TD'
+  | 'TF'
   | 'TG'
   | 'TH'
   | 'TJ'
@@ -230,6 +235,7 @@ export type RegionCode =
   | 'TZ'
   | 'UA'
   | 'UG'
+  | 'UM'
   | 'US'
   | 'UY'
   | 'UZ'

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

@@ -40,6 +40,8 @@ import { regionCodeToLocale } from './regionCodeToLocale.js';
  * possible. Also, it doesn't need to be a `FormControl`, because it's purely a helper element
  * to provide better UX: the modelValue (the text field) contains all needed info, since it's in
  * `e164` format that contains all info (both region code and national phone number).
+ *
+ * @customElement lion-input-tel-dropdown
  */
 export class LionInputTelDropdown extends LionInputTel {
   refs = {

package/components/listbox/src/LionListbox.js

@@ -7,6 +7,8 @@ import { ListboxMixin } from './ListboxMixin.js';
 /**
  * LionListbox: implements the wai-aria listbox design pattern and integrates it as a Lion
  * FormControl
+ *
+ * @customElement lion-listbox
  */
 export class LionListbox extends ListboxMixin(
   FocusMixin(InteractionStateMixin(ValidateMixin(LitElement))),

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

@@ -5,7 +5,7 @@ import { formatNumberToParts } from './formatNumberToParts.js';
  * getFractionDigits('JOD'); // return 3
  *
  * @typedef {import('../../types/LocalizeMixinTypes.js').FormatNumberPart} FormatNumberPart
- * @param {string} [currency="EUR"] Currency code e.g. EUR
+ * @param {import('../../../input-amount-dropdown/types/index.js').CurrencyCode | string} [currency="EUR"] Currency code e.g. EUR
  * @returns {number} fraction for the given currency
  */
 export function getFractionDigits(currency = 'EUR') {

package/components/overlays/src/OverlayMixin.js

@@ -9,6 +9,10 @@ import { isEqualConfig } from './utils/is-equal-config.js';
  */
 
 /**
+ * @slot backdrop - The backdrop element for the overlay
+ * @slot content - The content element for the overlay
+ * @slot invoker - The invoker element for the overlay
+ *
  * @type {OverlayMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */

package/components/progress-indicator/src/LionProgressIndicator.js

@@ -5,6 +5,10 @@ import { getLocalizeManager, LocalizeMixin } from '@lion/ui/localize-no-side-eff
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
+
+/**
+ * @customElement lion-progress-indicator
+ */
 export class LionProgressIndicator extends LocalizeMixin(LitElement) {
   static get properties() {
     return {

package/components/radio-group/src/LionRadioGroup.js

@@ -2,7 +2,9 @@ import { LitElement } from 'lit';
 import { ChoiceGroupMixin, FormGroupMixin } from '@lion/ui/form-core.js';
 
 /**
- * A wrapper around multiple radios.
+ * LionRadioGroup: A wrapper around multiple radios.
+ *
+ * @customElement lion-radio-group
  */
 export class LionRadioGroup extends ChoiceGroupMixin(FormGroupMixin(LitElement)) {
   connectedCallback() {