@lion/ui 0.22.0 → 0.24.0

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

@@ -1,7 +1,6 @@
 import { css, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-
 import { LionInputAmount } from '@lion/ui/input-amount.js';
 import { currencyUtil } from './currencyUtil.js';
 import { formatAmount } from './formatters.js';
@@ -19,11 +18,9 @@ const hasChangedAmountDropdownModelValue = (newValue, oldValue) => {
   if (newValue === oldValue) {
     return false;
   }
-
   if (!newValue || !oldValue || typeof newValue !== 'object' || typeof oldValue !== 'object') {
     return newValue !== oldValue;
   }
-
   return newValue.currency !== oldValue.currency || !Object.is(newValue.amount, oldValue.amount);
 };
 
@@ -80,9 +77,15 @@ export class LionInputAmountDropdown extends LionInputAmount {
         attribute: false,
         hasChanged: hasChangedAmountDropdownModelValue,
       },
-      preferredCurrencies: { type: Array },
-      allowedCurrencies: { type: Array },
-      __dropdownSlot: { type: String },
+      preferredCurrencies: {
+        type: Array,
+      },
+      allowedCurrencies: {
+        type: Array,
+      },
+      __dropdownSlot: {
+        type: String,
+      },
     };
   }
 
@@ -103,27 +106,27 @@ export class LionInputAmountDropdown extends LionInputAmount {
   // @ts-expect-error - modelValue is overridden as an accessor but is defined as a property in parent class
   set modelValue(value) {
     if (value) {
-      this.__modelValue = /** @type {import('../types/index.js').AmountDropdownModelValue} */ (
-        value
-      );
+      this.__modelValue = /** @type {import('../types/index.js').AmountDropdownModelValue} */ value;
       // Below is needed because A1 and A2 in _callParser (FormatMixin) return values that are the wrong type.
     } else {
-      this.__modelValue = { currency: this.currency, amount: '' };
+      this.__modelValue = {
+        currency: this.currency,
+        amount: '',
+      };
     }
   }
-
   get modelValue() {
-    return /** @type {import('../types/index.js').AmountDropdownModelValue} */ (this.__modelValue);
+    return /** @type {import('../types/index.js').AmountDropdownModelValue} */ this.__modelValue;
   }
-
   static localizeNamespaces = [
-    { 'lion-input-amount-dropdown': localizeNamespaceLoader },
+    {
+      'lion-input-amount-dropdown': localizeNamespaceLoader,
+    },
     ...super.localizeNamespaces,
   ];
-
   refs = {
     /** @type {DropdownRef} */
-    dropdown: /** @type {DropdownRef} */ (createRef()),
+    dropdown: /** @type {DropdownRef} */ createRef(),
   };
 
   /**
@@ -171,7 +174,6 @@ export class LionInputAmountDropdown extends LionInputAmount {
       },
       input: this._inputNode,
     };
-
     return {
       refs,
       data: {
@@ -189,15 +191,12 @@ export class LionInputAmountDropdown extends LionInputAmount {
   get _dropdownSlot() {
     return /** @type {string} */ this.__dropdownSlot;
   }
-
   set _dropdownSlot(position) {
     if (position !== 'suffix' && position !== 'prefix') {
       throw new Error('Only the suffix and prefix slots are valid positions for the dropdown.');
     }
-
     this.__dropdownSlot = position;
   }
-
   static templates = {
     dropdown: (/** @type {TemplateDataForDropdownInputAmount} */ templateDataForDropdown) => {
       const { refs, data } = templateDataForDropdown;
@@ -286,9 +285,8 @@ export class LionInputAmountDropdown extends LionInputAmount {
     return {
       ...super.slots,
       [this._dropdownSlot]: () => {
-        const ctor = /** @type {typeof LionInputAmountDropdown} */ (this.constructor);
+        const ctor = /** @type {typeof LionInputAmountDropdown} */ this.constructor;
         const { templates } = ctor;
-
         return {
           template: templates.dropdown(this._templateDataDropdown),
           renderAsDirectHostChild: true,
@@ -302,20 +300,17 @@ export class LionInputAmountDropdown extends LionInputAmount {
    */
   onLocaleUpdated() {
     super.onLocaleUpdated();
-
     const localeSplitted = this._localizeManager.locale.split('-');
     /**
      * @protected
      * @type {RegionCode}
      */
-    this._langIso = /** @type {RegionCode} */ (
-      localeSplitted[localeSplitted.length - 1].toUpperCase()
-    );
-
+    this._langIso =
+      /** @type {RegionCode} */
+      localeSplitted[localeSplitted.length - 1].toUpperCase();
     this.__namesForLocale = new Intl.DisplayNames([this._langIso], {
       type: 'currency',
     });
-
     this.__calculateActiveCurrency();
     this.__createCurrencyMeta();
   }
@@ -358,11 +353,13 @@ export class LionInputAmountDropdown extends LionInputAmount {
    */
   constructor() {
     super();
-
     this.parser = parseAmount;
 
     /** @type {import('../types/index.js').AmountDropdownModelValue} */
-    this.__modelValue = { currency: this.currency, amount: '' };
+    this.__modelValue = {
+      currency: this.currency,
+      amount: '',
+    };
 
     /**
      * @param {import("../types/index.js").AmountDropdownModelValue} modelValue
@@ -371,7 +368,6 @@ export class LionInputAmountDropdown extends LionInputAmount {
     this.formatter = (modelValue, givenOptions) => formatAmount(modelValue, givenOptions, this);
     this.serializer = serializer;
     this.deserializer = deserializer;
-
     this.defaultValidators = [new CurrencyAndAmount()];
 
     /**
@@ -391,12 +387,9 @@ export class LionInputAmountDropdown extends LionInputAmount {
      * @type {CurrencyCode[]}
      */
     this.allowedCurrencies = [];
-
     this._allCurrenciesLabel = '';
     this._preferredCurrenciesLabel = '';
-
     this.__regionMetaList = [];
-
     this.__regionMetaListPreferred = [];
 
     /**
@@ -409,7 +402,6 @@ export class LionInputAmountDropdown extends LionInputAmount {
      * @type {EventListener}
      */
     this.__syncCurrencyWithDropdown = this.__syncCurrencyWithDropdown.bind(this);
-
     this._currencyUtil = currencyUtil;
   }
 
@@ -419,7 +411,6 @@ export class LionInputAmountDropdown extends LionInputAmount {
    */
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
-
     if (changedProperties.has('allowedCurrencies')) {
       this.__createCurrencyMeta();
     }
@@ -430,9 +421,7 @@ export class LionInputAmountDropdown extends LionInputAmount {
    */
   updated(changedProperties) {
     super.updated(changedProperties);
-
     this.__syncCurrencyWithDropdown();
-
     if (changedProperties.has('disabled') || changedProperties.has('readOnly')) {
       if (this.disabled || this.readOnly) {
         this.refs.dropdown?.value?.setAttribute('disabled', '');
@@ -440,7 +429,6 @@ export class LionInputAmountDropdown extends LionInputAmount {
         this.refs.dropdown?.value?.removeAttribute('disabled');
       }
     }
-
     if (changedProperties.has('allowedCurrencies') && this.allowedCurrencies.length > 0) {
       this.__calculateActiveCurrency();
     }
@@ -462,7 +450,10 @@ export class LionInputAmountDropdown extends LionInputAmount {
     const { currency, amount } = this._initialModelValue || {};
     if (!currency && !this.dirty) {
       this.__initializedCurrencyCode = this.currency;
-      this._initialModelValue = { currency: this.currency, amount };
+      this._initialModelValue = {
+        currency: this.currency,
+        amount,
+      };
       this.modelValue = this._initialModelValue;
       this.initInteractionState();
     }
@@ -489,9 +480,9 @@ export class LionInputAmountDropdown extends LionInputAmount {
   _onDropdownValueChange(event) {
     const isInitializing = event.detail?.initialize;
     const dropdownElement = event.target;
-    const dropdownValue = /** @type {RegionCode} */ (
-      dropdownElement.modelValue || dropdownElement.value
-    );
+    const dropdownValue =
+      /** @type {RegionCode} */
+      dropdownElement.modelValue || dropdownElement.value;
     // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; declared `string` but legitimately reset to undefined: widen the type in the types file (API change) or guard the read with a local
     if (isInitializing || this.currency === dropdownValue) {
       return;
@@ -502,13 +493,15 @@ export class LionInputAmountDropdown extends LionInputAmount {
 
     /** @type {RegionCode | string} */
     this.currency = dropdownValue;
-
     if (prevCurrency !== this.currency && !this.focused) {
       if (!this.value) {
-        this.modelValue = { currency: this.currency, amount: this.value };
+        this.modelValue = {
+          currency: this.currency,
+          amount: this.value,
+        };
       } else {
         /** @type {AmountFormatOptions} */
-        (this.formatOptions).currency = this.currency;
+        this.formatOptions.currency = this.currency;
         this.modelValue = this._callParser(this.value);
       }
     }
@@ -522,19 +515,20 @@ export class LionInputAmountDropdown extends LionInputAmount {
     if (!dropdownElement || !currencyCode) {
       return;
     }
-
     if ('modelValue' in dropdownElement) {
       const dropdownCurrencyCode = dropdownElement.modelValue;
       if (dropdownCurrencyCode === currencyCode) {
         return;
       }
-      /** @type {* & FormatHost} */ (dropdownElement).modelValue = currencyCode;
+      /** @type {* & FormatHost} */
+      dropdownElement.modelValue = currencyCode;
     } else {
       const dropdownCurrencyCode = dropdownElement.value;
       if (dropdownCurrencyCode === currencyCode) {
         return;
       }
-      /** @type {HTMLSelectElement} */ (dropdownElement).value = currencyCode;
+      /** @type {HTMLSelectElement} */
+      dropdownElement.value = currencyCode;
     }
   }
 
@@ -550,15 +544,12 @@ export class LionInputAmountDropdown extends LionInputAmount {
     if (!this._allowedOrAllCurrencies?.length || !this.__namesForLocale) {
       return;
     }
-
     this.__regionMetaList = [];
     this.__regionMetaListPreferred = [];
-
-    this._allowedOrAllCurrencies.forEach(currencyCode => {
+    this._allowedOrAllCurrencies.forEach((currencyCode) => {
       const destinationList = this.preferredCurrencies.includes(currencyCode)
         ? this.__regionMetaListPreferred
         : this.__regionMetaList;
-
       destinationList.push({
         currencyCode,
         nameForLocale: this.__namesForLocale?.of(currencyCode),
@@ -580,7 +571,6 @@ export class LionInputAmountDropdown extends LionInputAmount {
   _repropagationCondition() {
     return false;
   }
-
   __calculateActiveCurrency() {
     // 1. Get the currency from pre-configured allowed currencies (if one entry)
     if (this.allowedCurrencies?.length === 1) {
@@ -591,7 +581,7 @@ export class LionInputAmountDropdown extends LionInputAmount {
     // 2. Try to get the currency from user input
     if (
       this.modelValue?.currency &&
-      this.allowedCurrencies?.includes(/** @type {CurrencyCode} */ (this.modelValue?.currency))
+      this.allowedCurrencies?.includes(/** @type {CurrencyCode} */ this.modelValue?.currency)
     ) {
       this.currency = this.modelValue.currency;
       return;
@@ -612,14 +602,14 @@ export class LionInputAmountDropdown extends LionInputAmount {
         this._currencyUtil?.countryToCurrencyMap.get(this._langIso),
       )
     ) {
-      this.currency = /** @type {any} */ (
-        this._currencyUtil?.countryToCurrencyMap.get(this._langIso)
-      );
+      this.currency =
+        /** @type {any} */
+        this._currencyUtil?.countryToCurrencyMap.get(this._langIso);
       return;
     }
 
     // 5. Not derivable
-    this.currency = /** @type {any} */ (undefined);
+    this.currency = /** @type {any} */ undefined;
   }
 
   /**

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

@@ -289,9 +289,9 @@ const countryToCurrencyList = {
  * 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))
-);
+const countryToCurrencyMap =
+  /** @type {import("../types/index.js").RegionToCurrencyMap} */
+  new Map(Object.entries(countryToCurrencyList));
 
 /**
  * Set with all possible currencies derived from the i18n standard.
@@ -309,14 +309,15 @@ const getCurrencySymbol = (currency, locale) => {
   if (!locale || !currency) {
     return '';
   }
-
   return (
-    new Intl.NumberFormat(locale, { style: 'currency', currency })
+    new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency,
+    })
       .formatToParts(1)
-      .find(x => x.type === 'currency')?.value || ''
+      .find((x) => x.type === 'currency')?.value || ''
   );
 };
-
 export const currencyUtil = {
   countryToCurrencyMap,
   allCurrencies,

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

@@ -15,7 +15,6 @@ import { parseAmount as _parseAmount } from '@lion/ui/input-amount.js';
  */
 export const parseAmount = (value, givenOptions) => {
   const parsedAmount = _parseAmount(value, givenOptions);
-
   return {
     amount: parsedAmount,
     currency: givenOptions?.currency,

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

@@ -16,7 +16,6 @@ export class CurrencyAndAmount extends Validator {
     // @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

@@ -8,7 +8,6 @@ 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 { ifDefined } from 'lit/directives/if-defined.js';
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
@@ -31,13 +30,12 @@ class WithFormControlInputAmountDropdown extends ScopedElementsMixin(LionInputAm
     'lion-select-rich': LionSelectRich,
     'lion-option': LionOption,
   };
-
   static templates = {
     ...(super.templates || {}),
     /**
      * @param {TemplateDataForDropdownInputAmount} templateDataForDropdown
      */
-    dropdown: templateDataForDropdown => {
+    dropdown: (templateDataForDropdown) => {
       const { refs, data } = templateDataForDropdown;
       // TODO: once spread directive available, use it per ref (like ref(refs?.dropdown?.ref))
       return html`
@@ -50,8 +48,8 @@ class WithFormControlInputAmountDropdown extends ScopedElementsMixin(LionInputAm
         >
           ${repeat(
             data.regionMetaList,
-            regionMeta => regionMeta.currencyCode,
-            regionMeta => html`
+            (regionMeta) => regionMeta.currencyCode,
+            (regionMeta) => html`
               <lion-option .choiceValue="${regionMeta.currencyCode}"> </lion-option>
             `,
           )}
@@ -60,14 +58,13 @@ class WithFormControlInputAmountDropdown extends ScopedElementsMixin(LionInputAm
     },
   };
 }
-
 runInputAmountDropdownSuite();
-
 describe('WithFormControlInputAmountDropdown', () => {
   // @ts-expect-error
   // Runs it for LionSelectRich, which uses .modelValue/@model-value-changed instead of .value/@change
-  runInputAmountDropdownSuite({ klass: WithFormControlInputAmountDropdown });
-
+  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 = {
@@ -75,7 +72,7 @@ describe('WithFormControlInputAmountDropdown', () => {
         /**
          * @param {TemplateDataForDropdownInputAmount} templateDataForDropdown
          */
-        dropdown: templateDataForDropdown => {
+        dropdown: (templateDataForDropdown) => {
           const { refs, data } = templateDataForDropdown;
           // TODO: once spread directive available, use it per ref (like ref(refs?.dropdown?.ref))
           return html`
@@ -89,8 +86,8 @@ describe('WithFormControlInputAmountDropdown', () => {
             >
               ${repeat(
                 data.regionMetaList,
-                regionMeta => regionMeta.currencyCode,
-                regionMeta => html`
+                (regionMeta) => regionMeta.currencyCode,
+                (regionMeta) => html`
                   <lion-option .choiceValue="${regionMeta.currencyCode}"> </lion-option>
                 `,
               )}
@@ -100,14 +97,14 @@ describe('WithFormControlInputAmountDropdown', () => {
       };
     }
     customElements.define('input-amount-dropdown-mac', InputAmountDropdownMac);
-    const el = /** @type {LionInputAmountDropdown} */ (
+    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) {
@@ -120,7 +117,6 @@ describe('WithFormControlInputAmountDropdown', () => {
       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 = {
@@ -128,7 +124,7 @@ describe('WithFormControlInputAmountDropdown', () => {
         /**
          * @param {TemplateDataForDropdownInputAmount} templateDataForDropdown
          */
-        dropdown: templateDataForDropdown => {
+        dropdown: (templateDataForDropdown) => {
           const { refs, data } = templateDataForDropdown;
           // TODO: once spread directive available, use it per ref (like ref(refs?.dropdown?.ref))
           return html`
@@ -142,8 +138,8 @@ describe('WithFormControlInputAmountDropdown', () => {
             >
               ${repeat(
                 data.regionMetaList,
-                regionMeta => regionMeta.currencyCode,
-                regionMeta => html`
+                (regionMeta) => regionMeta.currencyCode,
+                (regionMeta) => html`
                   <lion-option .choiceValue="${regionMeta.currencyCode}"> </lion-option>
                 `,
               )}
@@ -153,14 +149,14 @@ describe('WithFormControlInputAmountDropdown', () => {
       };
     }
     customElements.define('input-amount-dropdown-windows', InputAmountDropdownWindows);
-    const el = /** @type {LionInputAmountDropdown} */ (
+    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) {
@@ -173,42 +169,44 @@ describe('WithFormControlInputAmountDropdown', () => {
       expect(isActiveElement(el._inputNode)).to.be.false;
     }
   });
-
   describe('defaultValidators', () => {
     it('without interaction are not called', async () => {
-      const el = /** @type {LionInputAmountDropdown} */ (
+      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} */ (
+      const el =
+        /** @type {LionInputAmountDropdown} */
         await fixture(html`
           <lion-input-amount-dropdown
             .allowedCurrencies="${['GBP', 'EUR']}"
           ></lion-input-amount-dropdown>
-        `)
-      );
-      el.modelValue = { currency: 'EUR' };
+        `);
+      el.modelValue = {
+        currency: 'EUR',
+      };
       await aTimeout(0);
-      el.modelValue = { currency: 'EUR', amount: '' };
+      el.modelValue = {
+        currency: 'EUR',
+        amount: '',
+      };
       expect(el.hasFeedbackFor).to.deep.equal([]);
     });
   });
-
   it('includes error in showsFeedbackFor when required, empty, and touched & dirty', async () => {
-    const el = /** @type {LionInputAmountDropdown} */ (
+    const el =
+      /** @type {LionInputAmountDropdown} */
       await fixture(html`
         <lion-input-amount-dropdown
           .allowedCurrencies="${['GBP', 'EUR']}"
           .validators="${[new Required()]}"
         ></lion-input-amount-dropdown>
-      `)
-    );
+      `);
     await el.updateComplete;
     el.touched = true;
     el.dirty = true;

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

@@ -1,34 +1,39 @@
 import { runFormatMixinSuite } from '@lion/ui/form-core-test-suites.js';
-
 import '@lion/ui/define/lion-input-amount-dropdown.js';
-
 const tagString = 'lion-input-amount-dropdown';
-
 describe('<lion-input-amount-dropdown> integrations', () => {
   runFormatMixinSuite({
     tagString,
     modelValueType: Object,
-    parser: value => value.replace('foo: ', ''),
+    parser: (value) => value.replace('foo: ', ''),
     valueToggler: ({ toggleValue, viewValue }) => {
       if (viewValue) {
         return !toggleValue ? '123' : '456';
       }
-      return !toggleValue ? { amount: 123, currency: 'EUR' } : { amount: 456, currency: 'EUR' };
+      return !toggleValue
+        ? {
+            amount: 123,
+            currency: 'EUR',
+          }
+        : {
+            amount: 456,
+            currency: 'EUR',
+          };
     },
-    getExpectedInitialModelValue: el => ({
-      currency: /** @type {any} */ (el).currency,
+    getExpectedInitialModelValue: (el) => ({
+      currency: /** @type {any} */ el.currency,
       amount: '',
     }),
-    getExpectedInitialFormattedValue: el => ({
-      currency: /** @type {any} */ (el).currency,
+    getExpectedInitialFormattedValue: (el) => ({
+      currency: /** @type {any} */ el.currency,
       amount: '',
     }),
-    getExpectedInitialSerializedValue: el => ({
-      currency: /** @type {any} */ (el).currency,
+    getExpectedInitialSerializedValue: (el) => ({
+      currency: /** @type {any} */ el.currency,
       amount: '',
     }),
-    getExpectedModelValueForEmptyInputNode: el => ({
-      currency: /** @type {any} */ (el).currency,
+    getExpectedModelValueForEmptyInputNode: (el) => ({
+      currency: /** @type {any} */ el.currency,
       amount: '',
     }),
     valueChangeCounterOffset: 0,

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

@@ -11,7 +11,11 @@ export function mimicUserChangingDropdown(dropdownEl, value) {
     // eslint-disable-next-line no-param-reassign
     dropdownEl.modelValue = value;
     dropdownEl.dispatchEvent(
-      new CustomEvent('model-value-changed', { detail: { isTriggeredByUser: true } }),
+      new CustomEvent('model-value-changed', {
+        detail: {
+          isTriggeredByUser: true,
+        },
+      }),
     );
   } else {
     // eslint-disable-next-line no-param-reassign