@lion/ui 0.23.0 → 0.25.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

@@ -39,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,
@@ -57,7 +60,6 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
       },
     };
   }
-
   static get styles() {
     return [
       ...super.styles,
@@ -68,7 +70,6 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
       `,
     ];
   }
-
   constructor() {
     super();
     this.parser = parseAmount;
@@ -83,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();
     }
@@ -99,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();
     }
@@ -123,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,
+      });
     }
   }
 
@@ -160,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);
@@ -170,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)
@@ -194,13 +197,12 @@ 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;
   }
 
@@ -218,7 +220,6 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
       );
     }
   }
-
   get __currencyLabel() {
     let label = this.currencyLabel || '';
     if (!label && this.currency) {
@@ -226,7 +227,6 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
     }
     return label;
   }
-
   __reformat() {
     this.formattedValue = this._callFormatter();
   }

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

@@ -21,14 +21,12 @@ export function formatAmount(modelValue, givenOptions) {
     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);
 }
 
@@ -41,6 +39,5 @@ export function formatCurrencyLabel(currency, locale) {
   if (currency === '') {
     return '';
   }
-
   return normalizeCurrencyLabel(currency, locale);
 }

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,18 +1,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 { 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, {
@@ -64,12 +60,20 @@ describe('formatters', () => {
         }),
       ).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');
+      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');
@@ -79,22 +83,26 @@ describe('formatters', () => {
 
     // 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',
-      );
+      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',
-      );
+      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,