@lion/ui 0.23.0 → 0.24.0

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

@@ -14,133 +14,134 @@ import '@lion/ui/define/lion-input-amount.js';
 
 describe('<lion-input-amount>', () => {
   const localize = getLocalizeManager();
-
   beforeEach(() => {
     localizeTearDown();
   });
-
   it('uses formatAmount for formatting', async () => {
-    const el = /** @type {LionInputAmount} */ (
-      await fixture(`<lion-input-amount></lion-input-amount>`)
-    );
+    const el =
+      /** @type {LionInputAmount} */
+      await fixture(`<lion-input-amount></lion-input-amount>`);
     expect(el.formatter).to.equal(formatAmount);
   });
-
   it('formatAmount uses currency provided on webcomponent', async () => {
     // JOD displays 3 fraction digits by default
     localize.locale = 'fr-FR';
-    const el = /** @type {LionInputAmount} */ (
+    const el =
+      /** @type {LionInputAmount} */
       await fixture(
         html`<lion-input-amount currency="JOD" .modelValue="${123}"></lion-input-amount>`,
-      )
-    );
+      );
     expect(el.formattedValue).to.equal('123,000');
   });
-
   it('formatAmount uses locale provided in formatOptions', async () => {
-    let el = /** @type {LionInputAmount} */ (
+    let el =
+      /** @type {LionInputAmount} */
       await fixture(html`
         <lion-input-amount
-          .formatOptions="${{ locale: 'en-GB' }}"
+          .formatOptions="${{
+            locale: 'en-GB',
+          }}"
           .modelValue="${123}"
         ></lion-input-amount>
-      `)
-    );
+      `);
     expect(el.formattedValue).to.equal('123.00');
     el = await fixture(html`
       <lion-input-amount
-        .formatOptions="${{ locale: 'nl-NL' }}"
+        .formatOptions="${{
+          locale: 'nl-NL',
+        }}"
         .modelValue="${123}"
       ></lion-input-amount>
     `);
     expect(el.formattedValue).to.equal('123,00');
   });
-
   it('supports overriding decimalSeparator in formatOptions', async () => {
-    const el = /** @type {LionInputAmount} */ (
+    const el =
+      /** @type {LionInputAmount} */
       await fixture(
         html`<lion-input-amount
-          .formatOptions="${{ locale: 'nl-NL', decimalSeparator: '.' }}"
+          .formatOptions="${{
+            locale: 'nl-NL',
+            decimalSeparator: '.',
+          }}"
           .modelValue="${99}"
         ></lion-input-amount>`,
-      )
-    );
+      );
     expect(el.formattedValue).to.equal('99.00');
   });
-
   it('supports overriding groupSeparator in formatOptions', async () => {
-    const el = /** @type {LionInputAmount} */ (
+    const el =
+      /** @type {LionInputAmount} */
       await fixture(
         html`<lion-input-amount
-          .formatOptions="${{ locale: 'nl-NL', groupSeparator: ',', decimalSeparator: '.' }}"
+          .formatOptions="${{
+            locale: 'nl-NL',
+            groupSeparator: ',',
+            decimalSeparator: '.',
+          }}"
           .modelValue="${9999}"
         ></lion-input-amount>`,
-      )
-    );
+      );
     expect(el.formattedValue).to.equal('9,999.00');
   });
-
   it('ignores global locale change if property is provided', async () => {
-    const el = /** @type {LionInputAmount} */ (
+    const el =
+      /** @type {LionInputAmount} */
       await fixture(html`
         <lion-input-amount .modelValue=${123456.78} .locale="${'en-GB'}"></lion-input-amount>
-      `)
-    );
+      `);
     expect(el.formattedValue).to.equal('123,456.78'); // British
     localize.locale = 'nl-NL';
     await aTimeout(0);
     expect(el.formattedValue).to.equal('123,456.78'); // should stay British
   });
-
   it('reformats the formattedValue when locale property changes', async () => {
-    const el = /** @type {LionInputAmount} */ (
+    const el =
+      /** @type {LionInputAmount} */
       await fixture(html`
         <lion-input-amount .modelValue=${123456.78} .locale="${'en-GB'}"></lion-input-amount>
-      `)
-    );
+      `);
     expect(el.formattedValue).to.equal('123,456.78');
     el.locale = 'nl-NL';
     await el.updateComplete;
     expect(el.formattedValue).to.equal('123.456,78');
   });
-
   it('reformats the formattedValue with global locale if locale property is unset', async () => {
-    const el = /** @type {LionInputAmount} */ (
+    const el =
+      /** @type {LionInputAmount} */
       await fixture(html`
         <lion-input-amount .modelValue=${123456.78} .locale="${'nl-NL'}"></lion-input-amount>
-      `)
-    );
+      `);
     expect(el.formattedValue).to.equal('123.456,78');
     el.locale = '';
     await el.updateComplete;
     expect(el.formattedValue).to.equal('123,456.78');
   });
-
   it('uses parseAmount for parsing', async () => {
-    const el = /** @type {LionInputAmount} */ (
-      await fixture(`<lion-input-amount></lion-input-amount>`)
-    );
+    const el =
+      /** @type {LionInputAmount} */
+      await fixture(`<lion-input-amount></lion-input-amount>`);
     expect(el.parser).to.equal(parseAmount);
   });
-
   it('sets correct amount of decimals', async () => {
-    const el = /** @type {LionInputAmount} */ (
-      await fixture(html`<lion-input-amount .modelValue=${100.123}></lion-input-amount>`)
-    );
-    const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ (el));
+    const el =
+      /** @type {LionInputAmount} */
+      await fixture(html`<lion-input-amount .modelValue=${100.123}></lion-input-amount>`);
+    const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ el);
     expect(_inputNode.value).to.equal('100.12');
   });
-
   it('formats with locale when formatOptions.mode is "user-edited" and value has three decimal places', async () => {
-    const el = /** @type {LionInputAmount} */ (
+    const el =
+      /** @type {LionInputAmount} */
       await fixture(
         html`<lion-input-amount
           .modelValue=${123456.78}
           currency="EUR"
-          .formatOptions="${{ locale: 'nl-NL' }}"
+          .formatOptions="${{
+            locale: 'nl-NL',
+          }}"
         ></lion-input-amount>`,
-      )
-    );
+      );
     const parserSpy = sinon.spy(el, 'parser');
     const formatterSpy = sinon.spy(el, 'formatter');
 
@@ -169,20 +170,20 @@ describe('<lion-input-amount>', () => {
     expect(el.formattedValue).to.equal('1.234,00');
     expect(formatterSpy.lastCall.args[1]?.mode).to.equal('auto');
   });
-
   it('formats with heuristic when formatOptions.mode is "user-edited" and value has two decimal places', async () => {
-    const el = /** @type {LionInputAmount} */ (
+    const el =
+      /** @type {LionInputAmount} */
       await fixture(
         html`<lion-input-amount
           .modelValue=${64}
           currency="EUR"
-          .formatOptions="${{ locale: 'en-GB' }}"
+          .formatOptions="${{
+            locale: 'en-GB',
+          }}"
         ></lion-input-amount>`,
-      )
-    );
+      );
     const parserSpy = sinon.spy(el, 'parser');
     const formatterSpy = sinon.spy(el, 'formatter');
-
     expect(el.formattedValue).to.equal('64.00');
     // @ts-expect-error [allow-protected] in test
     expect(el._inputNode.value).to.equal('64.00');
@@ -194,7 +195,6 @@ describe('<lion-input-amount>', () => {
     expect(formatterSpy.lastCall.args[1]?.mode).to.equal('user-edited');
     expect(el.modelValue).to.equal(64);
     expect(el.formattedValue).to.equal('64.00');
-
     mimicUserInput(el, '64,0');
     expect(parserSpy.lastCall.args[1]?.mode).to.equal('user-edited');
     expect(formatterSpy.lastCall.args[1]?.mode).to.equal('user-edited');
@@ -208,86 +208,78 @@ describe('<lion-input-amount>', () => {
     expect(el.formattedValue).to.equal('1,234.00');
     expect(formatterSpy.lastCall.args[1]?.mode).to.equal('auto');
   });
-
   it('sets inputmode attribute to decimal', async () => {
-    const el = /** @type {LionInputAmount} */ (
-      await fixture(`<lion-input-amount></lion-input-amount>`)
-    );
-    const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ (el));
+    const el =
+      /** @type {LionInputAmount} */
+      await fixture(`<lion-input-amount></lion-input-amount>`);
+    const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ el);
     expect(_inputNode.getAttribute('inputmode')).to.equal('decimal');
   });
-
   it('has type="text" to activate default keyboard on mobile with all necessary symbols', async () => {
-    const el = /** @type {LionInputAmount} */ (
-      await fixture(`<lion-input-amount></lion-input-amount>`)
-    );
-    const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ (el));
+    const el =
+      /** @type {LionInputAmount} */
+      await fixture(`<lion-input-amount></lion-input-amount>`);
+    const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ el);
     expect(_inputNode.type).to.equal('text');
   });
-
   describe('currencyLabel', async () => {
     it('shows no currency by default', async () => {
       const el = await fixture(`<lion-input-amount></lion-input-amount>`);
-      expect(Array.from(el.children).find(child => child.slot === 'after')).to.be.undefined;
+      expect(Array.from(el.children).find((child) => child.slot === 'after')).to.be.undefined;
     });
-
     it('displays currency if provided', async () => {
-      const el = /** @type {LionInputAmount} */ (
-        await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`)
-      );
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`);
       expect(
-        /** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'after')
+        /** @type {HTMLElement[]} */ 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 = /** @type {LionInputAmount} */ (
-        await fixture(`<lion-input-amount currency="TRY"></lion-input-amount>`)
-      );
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(`<lion-input-amount currency="TRY"></lion-input-amount>`);
       expect(
-        /** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'after')
+        /** @type {HTMLElement[]} */ Array.from(el.children).find((child) => child.slot === 'after')
           ?.innerText,
       ).to.equal('TL');
     });
-
     it('displays currency symbol if provided via formatOptions', async () => {
-      const el = /** @type {LionInputAmount} */ (
+      const el =
+        /** @type {LionInputAmount} */
         await fixture(
           html`<lion-input-amount currency="EUR" currency-label="€"></lion-input-amount>`,
-        )
-      );
-      const currLabel = /** @type {HTMLElement[]} */ (Array.from(el.children)).find(
-        child => child.slot === 'after',
+        );
+      const currLabel = /** @type {HTMLElement[]} */ Array.from(el.children).find(
+        (child) => child.slot === 'after',
       );
       expect(currLabel?.innerText).to.equal('€');
       expect(currLabel?.getAttribute('aria-label')).to.equal('€ (euros)');
     });
-
     it('can update currency', async () => {
-      const el = /** @type {LionInputAmount} */ (
-        await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`)
-      );
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`);
       el.currency = 'USD';
       await el.updateComplete;
       expect(
-        /** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'after')
+        /** @type {HTMLElement[]} */ Array.from(el.children).find((child) => child.slot === 'after')
           ?.innerText,
       ).to.equal('USD');
     });
   });
-
   it('reformats on locale changes', async () => {
-    const el = /** @type {LionInputAmount} */ (
+    const el =
+      /** @type {LionInputAmount} */
       await fixture(
         html`<lion-input-amount
           label="Price"
           currency="EUR"
           .modelValue=${123.45}
         ></lion-input-amount>`,
-      )
-    );
+      );
     expect(el.formattedValue).to.equal('123.45');
     localize.locale = 'nl-NL';
     await el.updateComplete;
@@ -296,61 +288,55 @@ describe('<lion-input-amount>', () => {
     await el._feedbackNode.localizeNamespacesLoaded;
     expect(el.formattedValue).to.equal('123,45');
   });
-
   it('removes the currency label when currency switches from EUR to undefined', async () => {
-    const el = /** @type {LionInputAmount} */ (
-      await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`)
-    );
+    const el =
+      /** @type {LionInputAmount} */
+      await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`);
     expect(
-      /** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'after')
+      /** @type {HTMLElement[]} */ Array.from(el.children).find((child) => child.slot === 'after')
         ?.innerText,
     ).to.equal('EUR');
     el.currency = undefined;
     await el.updateComplete;
     expect(
-      /** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'after'),
+      /** @type {HTMLElement[]} */ Array.from(el.children).find((child) => child.slot === 'after'),
     ).to.be.undefined;
   });
-
   it('adds the currency label when currency switches from undefined to EUR', async () => {
-    const el = /** @type {LionInputAmount} */ (
-      await fixture(`<lion-input-amount></lion-input-amount>`)
-    );
+    const el =
+      /** @type {LionInputAmount} */
+      await fixture(`<lion-input-amount></lion-input-amount>`);
     expect(
-      /** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'after'),
+      /** @type {HTMLElement[]} */ Array.from(el.children).find((child) => child.slot === 'after'),
     ).to.be.undefined;
-
     el.currency = 'EUR';
     await el.updateComplete;
-    const currLabel = /** @type {HTMLElement[]} */ (Array.from(el.children)).find(
-      child => child.slot === 'after',
+    const currLabel = /** @type {HTMLElement[]} */ Array.from(el.children).find(
+      (child) => child.slot === 'after',
     );
     expect(currLabel?.innerText).to.equal('EUR');
     expect(currLabel?.getAttribute('aria-label')).to.equal('EUR (euros)');
   });
-
   it('sets currency label on the after element', async () => {
-    const el = /** @type {LionInputAmount} */ (
+    const el =
+      /** @type {LionInputAmount} */
       await fixture(`
         <lion-input-amount>
           <span slot="after" id="123">Currency, please</span>
-        </lion-input-amount>`)
-    );
-    const mySlotLabel = /** @type {HTMLElement[]} */ (Array.from(el.children)).find(
-      child => child.slot === 'after',
+        </lion-input-amount>`);
+    const mySlotLabel = /** @type {HTMLElement[]} */ Array.from(el.children).find(
+      (child) => child.slot === 'after',
     );
     expect(mySlotLabel?.id).to.equal('123');
-
     el.currency = 'EUR';
     await el.updateComplete;
-    const currLabel = /** @type {HTMLElement[]} */ (Array.from(el.children)).find(
-      child => child.slot === 'after',
+    const currLabel = /** @type {HTMLElement[]} */ Array.from(el.children).find(
+      (child) => child.slot === 'after',
     );
     expect(currLabel).to.equal(mySlotLabel);
     expect(currLabel?.id).to.equal('123');
     expect(currLabel?.innerText).to.equal('EUR');
   });
-
   it('can override the currency label slot', async () => {
     customElements.define(
       'my-input-amount',
@@ -364,11 +350,10 @@ describe('<lion-input-amount>', () => {
     );
     const el = await fixture(html`<my-input-amount currency="EUR"></my-input-amount>`);
     expect(
-      /** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'suffix')
+      /** @type {HTMLElement[]} */ Array.from(el.children).find((child) => child.slot === 'suffix')
         ?.innerText,
     ).to.equal('EUR');
   });
-
   describe('Accessibility', () => {
     it('is accessible', async () => {
       const el = await fixture(
@@ -376,60 +361,51 @@ describe('<lion-input-amount>', () => {
       );
       await expect(el).to.be.accessible();
     });
-
     it('is accessible when readonly', async () => {
       const el = await fixture(
         `<lion-input-amount readonly .modelValue=${'123'}><label slot="label">Label</label></lion-input-amount>`,
       );
       await expect(el).to.be.accessible();
     });
-
     it('is accessible when disabled', async () => {
       const el = await fixture(
         `<lion-input-amount disabled><label slot="label">Label</label></lion-input-amount>`,
       );
       await expect(el).to.be.accessible();
     });
-
     it('adds currency id to aria-labelledby of input', async () => {
-      const el = /** @type {LionInputAmount} */ (
-        await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`)
-      );
-      const label = /** @type {HTMLElement[]} */ (Array.from(el.children)).find(
-        child => child.slot === 'after',
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`);
+      const label = /** @type {HTMLElement[]} */ Array.from(el.children).find(
+        (child) => child.slot === 'after',
       );
       expect(label?.getAttribute('data-label')).to.be.not.null;
-      const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ (el));
+      const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ el);
       expect(_inputNode.getAttribute('aria-labelledby')).to.contain(label?.id);
     });
-
     it('adds currency id to aria-labelledby of input when currency switches from undefined', async () => {
-      const el = /** @type {LionInputAmount} */ (
-        await fixture(`<lion-input-amount></lion-input-amount>`)
-      );
-
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(`<lion-input-amount></lion-input-amount>`);
       el.currency = 'EUR';
-
       let resolved = await el.updateComplete;
       while (!resolved) {
         resolved = await el.updateComplete;
       }
-
-      const label = /** @type {HTMLElement[]} */ (Array.from(el.children)).find(
-        child => child.slot === 'after',
+      const label = /** @type {HTMLElement[]} */ Array.from(el.children).find(
+        (child) => child.slot === 'after',
       );
-      const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ (el));
-
+      const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ el);
       expect(label?.id).not.equal('');
       expect(_inputNode.getAttribute('aria-labelledby')).to.contain(label?.id);
     });
-
     it('adds an aria-label to currency slot', async () => {
-      const el = /** @type {LionInputAmount} */ (
-        await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`)
-      );
-      const label = /** @type {HTMLElement[]} */ (Array.from(el.children)).find(
-        child => child.slot === 'after',
+      const el =
+        /** @type {LionInputAmount} */
+        await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`);
+      const label = /** @type {HTMLElement[]} */ Array.from(el.children).find(
+        (child) => child.slot === 'after',
       );
       expect(label?.getAttribute('aria-label')).to.equal('EUR (euros)');
       el.currency = 'USD';

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

@@ -2,18 +2,14 @@ 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 { parseAmount } from '@lion/ui/input-amount.js';
-
 describe('parseAmount()', async () => {
   const localizeManager = getLocalizeManager();
-
   beforeEach(() => {
     localizeManager.locale = 'en-GB';
   });
-
   afterEach(() => {
     localizeTearDown();
   });
-
   it('with currency set to correct amount of decimals', async () => {
     expect(
       parseAmount('1.015', {
@@ -36,7 +32,6 @@ describe('parseAmount()', async () => {
       }),
     ).to.equal(100.124);
   });
-
   it('with no currency keeps all decimals', async () => {
     expect(parseAmount('1.015')).to.equal(1.015);
   });
@@ -48,36 +43,57 @@ describe('parseAmount()', async () => {
     // eslint-disable-next-line no-loss-of-precision
     expect(parseAmount('12,345,678,987,654,321.42')).to.equal(12345678987654321.42);
   });
-
   it('returns undefined if an invalid value is entered', async () => {
     expect(parseAmount('foo')).to.equal(undefined);
     expect(parseAmount('foo1')).to.equal(undefined);
     expect(parseAmount('EUR 1,50')).to.equal(undefined);
     expect(parseAmount('--1')).to.equal(undefined);
   });
-
   it('ignores letters when "pasted" mode used', async () => {
-    expect(parseAmount('foo1', { mode: 'pasted' })).to.equal(1);
-    expect(parseAmount('EUR 1,50', { mode: 'pasted' })).to.equal(1.5);
+    expect(
+      parseAmount('foo1', {
+        mode: 'pasted',
+      }),
+    ).to.equal(1);
+    expect(
+      parseAmount('EUR 1,50', {
+        mode: 'pasted',
+      }),
+    ).to.equal(1.5);
   });
-
   it('trim spaces when "pasted" mode used', async () => {
     // Use case: there is a cell in Excel which is formatted as Accounting, Currency: Zl, Decimal 2
     // and the whole cell is copied
-    expect(parseAmount(' 1,00 zł ', { mode: 'pasted' })).to.equal(1);
+    expect(
+      parseAmount(' 1,00 zł ', {
+        mode: 'pasted',
+      }),
+    ).to.equal(1);
   });
-
   it('parses based on locale when "user-edited" mode used combined with viewValueStates "formatted"', async () => {
-    expect(parseAmount('123,456.78', { mode: 'auto' })).to.equal(123456.78);
     expect(
-      parseAmount('123,456.78', { mode: 'user-edited', viewValueStates: ['formatted'] }),
+      parseAmount('123,456.78', {
+        mode: 'auto',
+      }),
+    ).to.equal(123456.78);
+    expect(
+      parseAmount('123,456.78', {
+        mode: 'user-edited',
+        viewValueStates: ['formatted'],
+      }),
+    ).to.equal(123456.78);
+    expect(
+      parseAmount('123.456,78', {
+        mode: 'auto',
+      }),
     ).to.equal(123456.78);
-    expect(parseAmount('123.456,78', { mode: 'auto' })).to.equal(123456.78);
     expect(
-      parseAmount('123.456,78', { mode: 'user-edited', viewValueStates: ['formatted'] }),
+      parseAmount('123.456,78', {
+        mode: 'user-edited',
+        viewValueStates: ['formatted'],
+      }),
     ).to.equal(123456.78);
   });
-
   it('parses negative numbers', async () => {
     expect(parseAmount('−15.00')).to.equal(-15);
     expect(parseAmount('-333.33')).to.equal(-333.33);

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

@@ -1,12 +1,9 @@
 import { expect } from '@open-wc/testing';
-
 import { preprocessAmount } from '@lion/ui/input-amount.js';
-
 describe('preprocessAmount()', () => {
   it('preprocesses numbers to filter out non-digits', async () => {
     expect(preprocessAmount('123as@dh2^!#')).to.equal('1232');
   });
-
   it('does not filter out separator characters', async () => {
     expect(preprocessAmount('123 456,78.90')).to.equal(
       '123 456,78.90',