@lion/ui 0.22.0 → 0.24.0

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

@@ -9,10 +9,9 @@ import { getInputMembers } from '@lion/ui/input-test-helpers.js';
 
 const tagString = 'lion-input';
 const tag = unsafeStatic(tagString);
-
 describe('<lion-input>', () => {
   it('delegates readOnly property and readonly attribute', async () => {
-    const el = /** @type {LionInput} */ (await fixture(html`<${tag} readonly></${tag}>`));
+    const el = /** @type {LionInput} */ await fixture(html`<${tag} readonly></${tag}>`);
     const { _inputNode } = getInputMembers(el);
     expect(_inputNode.readOnly).to.equal(true);
     el.readOnly = false;
@@ -20,25 +19,20 @@ describe('<lion-input>', () => {
     expect(el.readOnly).to.equal(false);
     expect(_inputNode.readOnly).to.equal(false);
   });
-
   it('delegates value attribute', async () => {
-    const el = /** @type {LionInput} */ (await fixture(html`<${tag} value="prefilled"></${tag}>`));
+    const el = /** @type {LionInput} */ await fixture(html`<${tag} value="prefilled"></${tag}>`);
     const { _inputNode } = getInputMembers(el);
     expect(_inputNode.getAttribute('value')).to.equal('prefilled');
   });
-
   it('can be disabled via attribute', async () => {
-    const el = /** @type {LionInput} */ (await fixture(html`<${tag} disabled></${tag}>`));
+    const el = /** @type {LionInput} */ await fixture(html`<${tag} disabled></${tag}>`);
     const { _inputNode } = getInputMembers(el);
-
     expect(el.disabled).to.equal(true);
     expect(_inputNode.disabled).to.equal(true);
   });
-
   it('can be disabled via property', async () => {
-    const el = /** @type {LionInput} */ (await fixture(html`<${tag}></${tag}>`));
+    const el = /** @type {LionInput} */ await fixture(html`<${tag}></${tag}>`);
     const { _inputNode } = getInputMembers(el);
-
     el.disabled = true;
     await el.updateComplete;
     expect(_inputNode.disabled).to.equal(true);
@@ -46,50 +40,45 @@ describe('<lion-input>', () => {
 
   // TODO: Add test that css pointerEvents is none if disabled.
   it('is disabled when disabled property is passed', async () => {
-    const el = /** @type {LionInput} */ (await fixture(html`<${tag}></${tag}>`));
+    const el = /** @type {LionInput} */ await fixture(html`<${tag}></${tag}>`);
     const { _inputNode } = getInputMembers(el);
     expect(_inputNode.hasAttribute('disabled')).to.equal(false);
-
     el.disabled = true;
     await el.updateComplete;
     await aTimeout(0);
-
     expect(_inputNode.hasAttribute('disabled')).to.equal(true);
-    const disabledEl = /** @type {LionInput} */ (await fixture(html`<${tag} disabled></${tag}>`));
+    const disabledEl = /** @type {LionInput} */ await fixture(html`<${tag} disabled></${tag}>`);
     const { _inputNode: _inputNodeDisabled } = getInputMembers(disabledEl);
     expect(_inputNodeDisabled.hasAttribute('disabled')).to.equal(true);
   });
-
   it('reads initial value from attribute value', async () => {
-    const el = /** @type {LionInput} */ (await fixture(html`<${tag} value="one"></${tag}>`));
+    const el = /** @type {LionInput} */ await fixture(html`<${tag} value="one"></${tag}>`);
     expect(
-      /** @type {HTMLInputElement[]} */ (Array.from(el.children)).find(
-        child => child.slot === 'input',
+      /** @type {HTMLInputElement[]} */ Array.from(el.children).find(
+        (child) => child.slot === 'input',
       )?.value,
     ).to.equal('one');
   });
-
   it('delegates value property', async () => {
-    const el = /** @type {LionInput} */ (await fixture(html`<${tag}></${tag}>`));
+    const el = /** @type {LionInput} */ await fixture(html`<${tag}></${tag}>`);
     expect(
-      /** @type {HTMLInputElement[]} */ (Array.from(el.children)).find(
-        child => child.slot === 'input',
+      /** @type {HTMLInputElement[]} */ Array.from(el.children).find(
+        (child) => child.slot === 'input',
       )?.value,
     ).to.equal('');
     el.value = 'one';
     expect(el.value).to.equal('one');
     expect(
-      /** @type {HTMLInputElement[]} */ (Array.from(el.children)).find(
-        child => child.slot === 'input',
+      /** @type {HTMLInputElement[]} */ Array.from(el.children).find(
+        (child) => child.slot === 'input',
       )?.value,
     ).to.equal('one');
   });
 
   // This is necessary for security, so that _inputNodes autocomplete can be set to 'off'
   it('delegates autocomplete property', async () => {
-    const el = /** @type {LionInput} */ (await fixture(html`<${tag}></${tag}>`));
+    const el = /** @type {LionInput} */ await fixture(html`<${tag}></${tag}>`);
     const { _inputNode } = getInputMembers(el);
-
     expect(_inputNode.autocomplete).to.equal('');
     expect(_inputNode.hasAttribute('autocomplete')).to.be.false;
     el.autocomplete = 'off';
@@ -97,11 +86,9 @@ describe('<lion-input>', () => {
     expect(_inputNode.autocomplete).to.equal('off');
     expect(_inputNode.getAttribute('autocomplete')).to.equal('off');
   });
-
   it('preserves the caret position on value change for native text fields (input|textarea)', async () => {
-    const el = /** @type {LionInput} */ (await fixture(html`<${tag}></${tag}>`));
+    const el = /** @type {LionInput} */ await fixture(html`<${tag}></${tag}>`);
     const { _inputNode } = getInputMembers(el);
-
     await triggerFocusFor(el);
     await el.updateComplete;
     _inputNode.value = 'hello world';
@@ -111,45 +98,36 @@ describe('<lion-input>', () => {
     expect(_inputNode.selectionStart).to.equal(2);
     expect(_inputNode.selectionEnd).to.equal(2);
   });
-
   it('automatically creates an <input> element if not provided by user', async () => {
-    const el = /** @type {LionInput} */ (
+    const el =
+      /** @type {LionInput} */
       await fixture(html`
       <${tag}></${tag}>
-    `)
-    );
+    `);
     const { _inputNode } = getInputMembers(el);
-
     expect(el.querySelector('input')).to.equal(_inputNode);
   });
-
   it('has a type which is reflected to an attribute and is synced down to the native input', async () => {
-    const el = /** @type {LionInput} */ (await fixture(html`<${tag}></${tag}>`));
+    const el = /** @type {LionInput} */ await fixture(html`<${tag}></${tag}>`);
     const { _inputNode } = getInputMembers(el);
-
     expect(el.type).to.equal('text');
     expect(el.getAttribute('type')).to.equal('text');
     expect(_inputNode.getAttribute('type')).to.equal('text');
-
     el.type = 'foo';
     await el.updateComplete;
     expect(el.getAttribute('type')).to.equal('foo');
     expect(_inputNode.getAttribute('type')).to.equal('foo');
   });
-
   it('has an attribute that can be used to set the placeholder text of the input', async () => {
-    const el = /** @type {LionInput} */ (await fixture(html`<${tag} placeholder="text"></${tag}>`));
+    const el = /** @type {LionInput} */ await fixture(html`<${tag} placeholder="text"></${tag}>`);
     const { _inputNode } = getInputMembers(el);
-
     expect(el.getAttribute('placeholder')).to.equal('text');
     expect(_inputNode.getAttribute('placeholder')).to.equal('text');
-
     el.placeholder = 'foo';
     await el.updateComplete;
     expect(el.getAttribute('placeholder')).to.equal('foo');
     expect(_inputNode.getAttribute('placeholder')).to.equal('foo');
   });
-
   it('should remove validation when disabled state toggles', async () => {
     const HasX = class extends Validator {
       static get validatorName() {
@@ -164,62 +142,54 @@ describe('<lion-input>', () => {
         return result;
       }
     };
-    const el = /** @type {LionInput} */ (
+    const el =
+      /** @type {LionInput} */
       await fixture(html`
       <${tag}
         .validators=${[new HasX()]}
         .modelValue=${'a@b.nl'}
       ></${tag}>
-    `)
-    );
+    `);
     expect(el.hasFeedbackFor).to.deep.equal(['error']);
     expect(el.validationStates.error.HasX).to.exist;
-
     el.disabled = true;
     await el.updateComplete;
     expect(el.hasFeedbackFor).to.deep.equal([]);
     expect(el.validationStates.error).to.deep.equal({});
   });
-
   describe('Delegation', () => {
     it('delegates property value', async () => {
-      const el = /** @type {LionInput} */ (await fixture(html`<${tag}></${tag}>`));
+      const el = /** @type {LionInput} */ await fixture(html`<${tag}></${tag}>`);
       const { _inputNode } = getInputMembers(el);
-
       expect(_inputNode.value).to.equal('');
       el.value = 'one';
       expect(el.value).to.equal('one');
       expect(_inputNode.value).to.equal('one');
     });
-
     it('delegates property selectionStart and selectionEnd', async () => {
-      const el = /** @type {LionInput} */ (
+      const el =
+        /** @type {LionInput} */
         await fixture(html`
         <${tag}
           .modelValue=${'Some text to select'}
         ></${tag}>
-      `)
-      );
+      `);
       const { _inputNode } = getInputMembers(el);
-
       el.selectionStart = 5;
       el.selectionEnd = 12;
       expect(_inputNode.selectionStart).to.equal(5);
       expect(_inputNode.selectionEnd).to.equal(12);
     });
   });
-
   describe('Accessibility', () => {
     it('is accessible', async () => {
       const el = await fixture(html`<${tag} label="Label"></${tag}>`);
       await expect(el).to.be.accessible();
     });
-
     it('is accessible when readonly', async () => {
       const el = await fixture(html`<${tag} readonly label="Label"></${tag}>`);
       await expect(el).to.be.accessible();
     });
-
     it('is accessible when disabled', async () => {
       const el = await fixture(html`<${tag} disabled label="Label"></${tag}>`);
       await expect(el).to.be.accessible();

package/components/input/test-helpers/getInputMembers.js

@@ -9,9 +9,9 @@ import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
  * @param { LionInput } el
  */
 export function getInputMembers(el) {
-  const obj = getFormControlMembers(/** @type { * & FormControlHost } */ (el));
+  const obj = getFormControlMembers(/** @type { * & FormControlHost } */ el);
   return {
     ...obj,
-    _inputNode: /** @type {HTMLInputElement} */ (obj._inputNode),
+    _inputNode: /** @type {HTMLInputElement} */ obj._inputNode,
   };
 }

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

@@ -7,7 +7,7 @@ import { parseAmount } from './parsers.js';
 
 /**
  * @typedef {import('../../form-core/types/FormatMixinTypes.js').FormatOptions} FormatOptions
- * @typedef {FormatOptions & {locale?:string;currency:string|undefined}} AmountFormatOptions
+ * @typedef {FormatOptions & {locale?:string;currency:string|undefined;currencySymbol:string|undefined;}} AmountFormatOptions
  */
 
 /**
@@ -25,6 +25,10 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
        * reader users
        */
       currency: String,
+      currencyLabel: {
+        type: String,
+        attribute: 'currency-label',
+      },
       /**
        * @desc the modelValue of the input-amount has the 'Number' type. This allows
        * Application Developers to easily read from and write to this input or write custom
@@ -35,11 +39,14 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
        * The slot to put the currency display node in. Can be 'prefix', 'suffix', 'before' and 'after'.
        * Default will be 'after'.
        */
-      _currencyDisplayNodeSlot: { attribute: false },
-      locale: { attribute: false },
+      _currencyDisplayNodeSlot: {
+        attribute: false,
+      },
+      locale: {
+        attribute: false,
+      },
     };
   }
-
   get slots() {
     return {
       ...super.slots,
@@ -53,7 +60,6 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
       },
     };
   }
-
   static get styles() {
     return [
       ...super.styles,
@@ -64,13 +70,13 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
       `,
     ];
   }
-
   constructor() {
     super();
     this.parser = parseAmount;
     this.formatter = formatAmount;
     /** @type {string | undefined} */
     this.currency = undefined;
+    this.currencyLabel = '';
     /** @type {string | undefined} */
     this.locale = undefined;
     this.__currencyDisplayNodeIsConnected = true;
@@ -78,13 +84,11 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
     /** @protected */
     this._currencyDisplayNodeSlot = 'after';
   }
-
   connectedCallback() {
     // eslint-disable-next-line wc/guard-super-call
     super.connectedCallback();
     this.type = 'text';
     this._inputNode.setAttribute('inputmode', 'decimal');
-
     if (this.currency) {
       this.__setCurrencyDisplayLabel();
     }
@@ -94,15 +98,16 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has('currency')) {
-      this._onCurrencyChanged({ currency: this.currency || null });
+      this._onCurrencyChanged({
+        currency: this.currency || null,
+      });
     }
-
     if (changedProperties.has('locale') && this.locale !== changedProperties.get('locale')) {
       if (this.locale) {
         /** @type {AmountFormatOptions} */
-        (this.formatOptions).locale = this.locale;
+        this.formatOptions.locale = this.locale;
       } else {
-        delete (/** @type {AmountFormatOptions} */ (this.formatOptions).locale);
+        delete (/** @type {AmountFormatOptions} */ this.formatOptions.locale);
       }
       this.__reformat();
     }
@@ -118,7 +123,9 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
   _connectSlotMixin() {
     super._connectSlotMixin();
     if (this._isPrivateSlot(this._currencyDisplayNodeSlot)) {
-      this._onCurrencyChanged({ currency: this.currency || null });
+      this._onCurrencyChanged({
+        currency: this.currency || null,
+      });
     }
   }
 
@@ -155,7 +162,7 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
     }
 
     /** @type {AmountFormatOptions} */
-    (this.formatOptions).currency = currency || undefined;
+    this.formatOptions.currency = currency || undefined;
     if (currency) {
       if (!this.__currencyDisplayNodeIsConnected) {
         this.appendChild(this.__currencyDisplayNode);
@@ -165,9 +172,10 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
         this.__currencyDisplayNodeIsConnected = true;
       }
       this.__currencyDisplayNode.textContent = this.__currencyLabel;
-
       try {
-        this._calculateValues({ source: null });
+        this._calculateValues({
+          source: null,
+        });
       } catch (e) {
         // In case Intl.NumberFormat gives error for invalid currency
         // we should catch, remove the node, and rethrow (since it's still a user error)
@@ -189,33 +197,36 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
    * @private
    */
   get __currencyDisplayNode() {
-    const node = /** @type {HTMLElement[]} */ (Array.from(this.children)).find(
-      child => child.slot === this._currencyDisplayNodeSlot,
+    const node = /** @type {HTMLElement[]} */ Array.from(this.children).find(
+      (child) => child.slot === this._currencyDisplayNodeSlot,
     );
     if (node) {
       this.__storedCurrencyDisplayNode = node;
     }
-
     return node || this.__storedCurrencyDisplayNode;
   }
 
   /** @private */
   __setCurrencyDisplayLabel() {
-    // TODO: (@erikkroes) for optimal a11y, abbreviations should be part of aria-label
-    // example, for a language switch with text 'en', an aria-label of 'english' is not
-    // sufficient, it should also contain the abbreviation.
     if (this.__currencyDisplayNode) {
+      const label = this.currencyLabel || this.currency || '';
+      let currencyName = '';
+      if (this.currency) {
+        currencyName = getCurrencyName(this.currency, {});
+      }
       this.__currencyDisplayNode.setAttribute(
         'aria-label',
-        this.currency ? getCurrencyName(this.currency, {}) : '',
+        `${label} ${currencyName ? `(${currencyName})` : ''}`,
       );
     }
   }
-
   get __currencyLabel() {
-    return this.currency ? formatCurrencyLabel(this.currency, this._localizeManager.locale) : '';
+    let label = this.currencyLabel || '';
+    if (!label && this.currency) {
+      label = formatCurrencyLabel(this.currency, this._localizeManager.locale);
+    }
+    return label;
   }
-
   __reformat() {
     this.formattedValue = this._callFormatter();
   }

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

@@ -5,29 +5,28 @@ import {
 } from '@lion/ui/localize-no-side-effects.js';
 
 /**
- * @typedef {import('../../localize/types/LocalizeMixinTypes.js').FormatNumberOptions} FormatOptions
+ * @typedef {import('../../localize/types/LocalizeMixinTypes.js').FormatNumberOptions} FormatNumberOptions
+ * @typedef {import('../../localize/types/LocalizeMixinTypes.js').FormatNumberPart} FormatNumberPart
  */
 
 /**
  * Formats a number considering the default fraction digits provided by Intl.
  *
  * @param {number} modelValue Number to format
- * @param {FormatOptions} [givenOptions]
+ * @param {FormatNumberOptions} [givenOptions]
  */
 export function formatAmount(modelValue, givenOptions) {
-  /** @type {FormatOptions} */
+  /** @type {FormatNumberOptions} */
   const options = {
     currency: 'EUR',
     ...givenOptions,
   };
-
   if (typeof options.minimumFractionDigits === 'undefined') {
     options.minimumFractionDigits = getFractionDigits(options.currency);
   }
   if (typeof options.maximumFractionDigits === 'undefined') {
     options.maximumFractionDigits = getFractionDigits(options.currency);
   }
-
   return formatNumber(modelValue, options);
 }
 

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

@@ -38,9 +38,7 @@ export function parseAmount(value, givenOptions) {
   if (unmatchedInput && givenOptions?.mode !== 'pasted') {
     return undefined;
   }
-
   const number = parseNumber(trimmedValue, givenOptions);
-
   if (typeof number !== 'number' || Number.isNaN(number)) {
     return undefined;
   }
@@ -49,7 +47,6 @@ export function parseAmount(value, givenOptions) {
   const options = {
     ...givenOptions,
   };
-
   if (options.currency && typeof options.maximumFractionDigits === 'undefined') {
     options.maximumFractionDigits = getFractionDigits(options.currency);
   }

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

@@ -1,88 +1,110 @@
 import { expect } from '@open-wc/testing';
 import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
-
 import { formatAmount } from '@lion/ui/input-amount.js';
+import { formatCurrencyLabel } from '../src/formatters.js';
+describe('formatters', () => {
+  describe('formatAmount()', () => {
+    const localizeManager = getLocalizeManager();
+    afterEach(() => {
+      localizeTearDown();
+    });
+    it('formats number with options', async () => {
+      expect(
+        formatAmount(12.345678, {
+          locale: 'en-GB',
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        }),
+      ).to.equal('12.35');
+      expect(
+        formatAmount(12.345678, {
+          locale: 'nl-NL',
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        }),
+      ).to.equal('12,35');
+      expect(
+        formatAmount(12345678, {
+          locale: 'en-GB',
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        }),
+      ).to.equal('12,345,678.00');
+      expect(
+        formatAmount(12345678, {
+          locale: 'nl-NL',
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        }),
+      ).to.equal('12.345.678,00');
+      expect(
+        formatAmount(12.345678, {
+          locale: 'en-GB',
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 1,
+        }),
+      ).to.equal('12.3');
+      expect(
+        formatAmount(12.345678, {
+          locale: 'en-GB',
+          minimumFractionDigits: 3,
+          maximumFractionDigits: 3,
+        }),
+      ).to.equal('12.346');
+      expect(
+        formatAmount(-12.345678, {
+          locale: 'en-GB',
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        }),
+      ).to.equal('−12.35');
+    });
+    it('formats the right amount of fraction digits for a certain currency', async () => {
+      expect(
+        formatAmount(123456.78, {
+          locale: 'en-GB',
+          currency: 'EUR',
+        }),
+      ).to.equal('123,456.78');
+      expect(
+        formatAmount(123456.78, {
+          locale: 'en-GB',
+          currency: 'JOD',
+        }),
+      ).to.equal('123,456.780');
+    });
+    it('fallbacks to global locale and EUR by default', async () => {
+      localizeManager.locale = 'en-GB';
+      expect(formatAmount(12345678)).to.equal('12,345,678.00');
+      localizeManager.locale = 'nl-NL';
+      expect(formatAmount(12345678)).to.equal('12.345.678,00');
+    });
 
-describe('formatAmount()', () => {
-  const localizeManager = getLocalizeManager();
-
-  afterEach(() => {
-    localizeTearDown();
+    // TODO: make it work with big numbers, e.g. make use of BigInt
+    it.skip('rounds up big numbers', async () => {
+      expect(
+        formatAmount(1e21, {
+          locale: 'en-GB',
+          currency: 'EUR',
+        }),
+      ).to.equal('1,000,000,000,000,000,000,000.00');
+      // eslint-disable-next-line no-loss-of-precision
+      expect(
+        formatAmount(12345678987654321.42, {
+          locale: 'en-GB',
+          currency: 'EUR',
+        }),
+      ).to.equal('12,345,678,987,654,321.42');
+    });
   });
-
-  it('formats number with options', async () => {
-    expect(
-      formatAmount(12.345678, {
-        locale: 'en-GB',
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-      }),
-    ).to.equal('12.35');
-    expect(
-      formatAmount(12.345678, {
-        locale: 'nl-NL',
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-      }),
-    ).to.equal('12,35');
-    expect(
-      formatAmount(12345678, {
-        locale: 'en-GB',
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-      }),
-    ).to.equal('12,345,678.00');
-    expect(
-      formatAmount(12345678, {
-        locale: 'nl-NL',
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-      }),
-    ).to.equal('12.345.678,00');
-    expect(
-      formatAmount(12.345678, {
-        locale: 'en-GB',
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 1,
-      }),
-    ).to.equal('12.3');
-    expect(
-      formatAmount(12.345678, {
-        locale: 'en-GB',
-        minimumFractionDigits: 3,
-        maximumFractionDigits: 3,
-      }),
-    ).to.equal('12.346');
-    expect(
-      formatAmount(-12.345678, {
-        locale: 'en-GB',
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-      }),
-    ).to.equal('−12.35');
-  });
-
-  it('formats the right amount of fraction digits for a certain currency', async () => {
-    expect(formatAmount(123456.78, { locale: 'en-GB', currency: 'EUR' })).to.equal('123,456.78');
-    expect(formatAmount(123456.78, { locale: 'en-GB', currency: 'JOD' })).to.equal('123,456.780');
-  });
-
-  it('fallbacks to global locale and EUR by default', async () => {
-    localizeManager.locale = 'en-GB';
-    expect(formatAmount(12345678)).to.equal('12,345,678.00');
-    localizeManager.locale = 'nl-NL';
-    expect(formatAmount(12345678)).to.equal('12.345.678,00');
-  });
-
-  // TODO: make it work with big numbers, e.g. make use of BigInt
-  it.skip('rounds up big numbers', async () => {
-    expect(formatAmount(1e21, { locale: 'en-GB', currency: 'EUR' })).to.equal(
-      '1,000,000,000,000,000,000,000.00',
-    );
-    // eslint-disable-next-line no-loss-of-precision
-    expect(formatAmount(12345678987654321.42, { locale: 'en-GB', currency: 'EUR' })).to.equal(
-      '12,345,678,987,654,321.42',
-    );
+  describe('formatCurrencyLabel()', () => {
+    it('gives back the correct currency label', async () => {
+      expect(formatCurrencyLabel('EUR', 'en-GB')).to.equal('EUR');
+      expect(formatCurrencyLabel('USD', 'en-GB')).to.equal('USD');
+    });
+    it('gives nothing back if no currency has been provided', async () => {
+      expect(formatCurrencyLabel('', 'en-GB')).to.equal('');
+    });
   });
 });

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

@@ -2,17 +2,13 @@ import {
   runFormatMixinSuite,
   runInteractionStateMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
-
 import '@lion/ui/define/lion-input-amount.js';
-
 const tagString = 'lion-input-amount';
-
 describe('<lion-input-amount> integrations', () => {
   runInteractionStateMixinSuite({
     tagString,
     allowedModelValueTypes: [Number],
   });
-
   runFormatMixinSuite({
     tagString,
     modelValueType: Number,