@lion/ui 0.23.0 → 0.24.0

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

@@ -1,6 +1,5 @@
 import { html, css } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
-
 import { LionInputTel } from '@lion/ui/input-tel.js';
 import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { getFlagSymbol } from './getFlagSymbol.js';
@@ -46,7 +45,7 @@ import { regionCodeToLocale } from './regionCodeToLocale.js';
 export class LionInputTelDropdown extends LionInputTel {
   refs = {
     /** @type {DropdownRef} */
-    dropdown: /** @type {DropdownRef} */ (createRef()),
+    dropdown: /** @type {DropdownRef} */ createRef(),
   };
 
   /**
@@ -97,7 +96,6 @@ export class LionInputTelDropdown extends LionInputTel {
       },
       input: this._inputNode,
     };
-
     return {
       refs,
       data: {
@@ -107,7 +105,6 @@ export class LionInputTelDropdown extends LionInputTel {
       },
     };
   }
-
   static templates = {
     dropdown: (/** @type {TemplateDataForDropdownInputTel} */ templateDataForDropdown) => {
       const { refs, data } = templateDataForDropdown;
@@ -171,9 +168,8 @@ export class LionInputTelDropdown extends LionInputTel {
     return {
       ...super.slots,
       prefix: () => {
-        const ctor = /** @type {typeof LionInputTelDropdown} */ (this.constructor);
+        const ctor = /** @type {typeof LionInputTelDropdown} */ this.constructor;
         const { templates } = ctor;
-
         return {
           template: templates.dropdown(this._templateDataDropdown),
           renderAsDirectHostChild: true,
@@ -187,7 +183,6 @@ export class LionInputTelDropdown extends LionInputTel {
    */
   onLocaleUpdated() {
     super.onLocaleUpdated();
-
     this.__namesForLocale = new Intl.DisplayNames([this._localizeManager.locale], {
       type: 'region',
     });
@@ -234,12 +229,9 @@ export class LionInputTelDropdown extends LionInputTel {
    */
   constructor() {
     super();
-
     this._allCountriesLabel = '';
     this._preferredCountriesLabel = '';
-
     this.__regionMetaList = [];
-
     this.__regionMetaListPreferred = [];
 
     /**
@@ -260,7 +252,6 @@ export class LionInputTelDropdown extends LionInputTel {
    */
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
-
     if (changedProperties.has('allowedRegions')) {
       this.__createRegionMeta();
     }
@@ -271,9 +262,7 @@ export class LionInputTelDropdown extends LionInputTel {
    */
   updated(changedProperties) {
     super.updated(changedProperties);
-
     this.__syncRegionWithDropdown();
-
     if (changedProperties.has('disabled') || changedProperties.has('readOnly')) {
       if (this.disabled || this.readOnly) {
         this.refs.dropdown?.value?.setAttribute('disabled', '');
@@ -281,7 +270,6 @@ export class LionInputTelDropdown extends LionInputTel {
         this.refs.dropdown?.value?.removeAttribute('disabled');
       }
     }
-
     if (changedProperties.has('_phoneUtil')) {
       this._initModelValueBasedOnDropdown();
     }
@@ -325,14 +313,12 @@ export class LionInputTelDropdown extends LionInputTel {
   _onDropdownValueChange(event) {
     const isInitializing = event.detail?.initialize || !this._phoneUtil;
     const dropdownElement = event.target;
-    const dropdownValue = /** @type {RegionCode} */ (
-      dropdownElement.modelValue || dropdownElement.value
-    );
-
+    const dropdownValue =
+      /** @type {RegionCode} */
+      dropdownElement.modelValue || dropdownElement.value;
     if (isInitializing || this.activeRegion === dropdownValue) {
       return;
     }
-
     const prevActiveRegion = this.activeRegion;
     this._setActiveRegion(dropdownValue);
 
@@ -341,7 +327,6 @@ export class LionInputTelDropdown extends LionInputTel {
     if (prevActiveRegion !== this.activeRegion && !this.focused && this._phoneUtil) {
       const prevCountryCode = this._phoneUtil.getCountryCodeForRegionCode(prevActiveRegion);
       const countryCode = this._phoneUtil.getCountryCodeForRegionCode(this.activeRegion);
-
       if (this.value.includes(`+${prevCountryCode}`)) {
         this.modelValue = this._callParser(
           this.value.replace(`+${prevCountryCode}`, `+${countryCode}`),
@@ -367,7 +352,6 @@ export class LionInputTelDropdown extends LionInputTel {
       return;
     }
     const inputCountryCode = this._phoneUtil?.getCountryCodeForRegionCode(regionCode);
-
     if ('modelValue' in dropdownElement) {
       const dropdownCountryCode = this._phoneUtil?.getCountryCodeForRegionCode(
         dropdownElement.modelValue,
@@ -375,7 +359,8 @@ export class LionInputTelDropdown extends LionInputTel {
       if (dropdownCountryCode === inputCountryCode) {
         return;
       }
-      /** @type {* & FormatHost} */ (dropdownElement).modelValue = regionCode;
+      /** @type {* & FormatHost} */
+      dropdownElement.modelValue = regionCode;
     } else {
       const dropdownCountryCode = this._phoneUtil?.getCountryCodeForRegionCode(
         dropdownElement.value,
@@ -383,7 +368,8 @@ export class LionInputTelDropdown extends LionInputTel {
       if (dropdownCountryCode === inputCountryCode) {
         return;
       }
-      /** @type {HTMLSelectElement} */ (dropdownElement).value = regionCode;
+      /** @type {HTMLSelectElement} */
+      dropdownElement.value = regionCode;
     }
   }
 
@@ -400,23 +386,19 @@ export class LionInputTelDropdown extends LionInputTel {
     if (!this._allowedOrAllRegions?.length || !this.__namesForLocale) {
       return;
     }
-
     this.__regionMetaList = [];
     this.__regionMetaListPreferred = [];
-    this._allowedOrAllRegions.forEach(regionCode => {
+    this._allowedOrAllRegions.forEach((regionCode) => {
       // @ts-ignore relatively new platform api
       const namesForRegion = new Intl.DisplayNames([regionCodeToLocale(regionCode)], {
         type: 'region',
       });
       const countryCode =
         this._phoneUtil && this._phoneUtil.getCountryCodeForRegionCode(regionCode);
-
       const flagSymbol = getFlagSymbol(regionCode);
-
       const destinationList = this.preferredRegions.includes(regionCode)
         ? this.__regionMetaListPreferred
         : this.__regionMetaList;
-
       destinationList.push({
         regionCode,
         countryCode,

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

@@ -4,7 +4,9 @@
  * @param {string} regionCode
  */
 export function regionCodeToLocale(regionCode) {
-  const locale = new Intl.Locale('und', { region: regionCode }); // Set language as undetermined.
+  const locale = new Intl.Locale('und', {
+    region: regionCode,
+  }); // Set language as undetermined.
   const maximizedLocale = locale.maximize(); // Determine the most likely full locale for a region with an undetermined language.
   return maximizedLocale.baseName;
 }

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

@@ -10,7 +10,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 { mockPhoneUtilManager, restorePhoneUtilManager } from '@lion/ui/input-tel-test-helpers.js';
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
@@ -33,13 +32,12 @@ class WithFormControlInputTelDropdown extends ScopedElementsMixin(LionInputTelDr
     'lion-select-rich': LionSelectRich,
     'lion-option': LionOption,
   };
-
   static templates = {
     ...(super.templates || {}),
     /**
      * @param {TemplateDataForDropdownInputTel} 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`
@@ -52,8 +50,8 @@ class WithFormControlInputTelDropdown extends ScopedElementsMixin(LionInputTelDr
         >
           ${repeat(
             data.regionMetaList,
-            regionMeta => regionMeta.regionCode,
-            regionMeta => html`
+            (regionMeta) => regionMeta.regionCode,
+            (regionMeta) => html`
               <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
             `,
           )}
@@ -62,29 +60,30 @@ class WithFormControlInputTelDropdown extends ScopedElementsMixin(LionInputTelDr
     },
   };
 }
-
 runInputTelDropdownSuite();
 // @ts-ignore
-runInputTelDropdownSuite({ klass: LionInputTelDropdown, hasParentheses: true });
+runInputTelDropdownSuite({
+  klass: LionInputTelDropdown,
+  hasParentheses: true,
+});
 runInputTelDropdownParenthesesSuite();
-
 describe('WithFormControlInputTelDropdown', () => {
   // @ts-expect-error
   // Runs it for LionSelectRich, which uses .modelValue/@model-value-changed instead of .value/@change
-  runInputTelDropdownSuite({ klass: WithFormControlInputTelDropdown });
-
+  runInputTelDropdownSuite({
+    klass: WithFormControlInputTelDropdown,
+  });
   it("it doesn't set the country as modelValue, only as viewValue", async () => {
-    const el = /** @type {LionInputTelDropdown} */ (
+    const el =
+      /** @type {LionInputTelDropdown} */
       await fixture(html`
         <lion-input-tel-dropdown .allowedRegions="${['NL']}"></lion-input-tel-dropdown>
-      `)
-    );
+      `);
 
     // @ts-expect-error [allow-protected-in-tests]
     expect(el._inputNode.value).to.equal('+31');
     expect(el.modelValue).to.equal('');
   });
-
   it('focuses the textbox right after selection if selected via opened dropdown if interaction-mode is mac', async () => {
     class InputTelDropdownMac extends LionInputTelDropdown {
       static templates = {
@@ -92,7 +91,7 @@ describe('WithFormControlInputTelDropdown', () => {
         /**
          * @param {TemplateDataForDropdownInputTel} 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`
@@ -106,8 +105,8 @@ describe('WithFormControlInputTelDropdown', () => {
             >
               ${repeat(
                 data.regionMetaList,
-                regionMeta => regionMeta.regionCode,
-                regionMeta => html`
+                (regionMeta) => regionMeta.regionCode,
+                (regionMeta) => html`
                   <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
                 `,
               )}
@@ -117,14 +116,14 @@ describe('WithFormControlInputTelDropdown', () => {
       };
     }
     customElements.define('input-tel-dropdown-mac', InputTelDropdownMac);
-    const el = /** @type {LionInputTelDropdown} */ (
+    const el =
+      /** @type {LionInputTelDropdown} */
       await fixture(html`
         <input-tel-dropdown-mac
           .allowedRegions="${['NL', 'BE']}"
           .modelValue="${'+31612345678'}"
         ></input-tel-dropdown-mac>
-      `)
-    );
+      `);
     const dropdownElement = el.refs.dropdown.value;
     // @ts-expect-error [allow-protected-in-tests]
     if (dropdownElement?._overlayCtrl) {
@@ -137,7 +136,6 @@ describe('WithFormControlInputTelDropdown', () => {
       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 InputTelDropdownWindows extends LionInputTelDropdown {
       static templates = {
@@ -145,7 +143,7 @@ describe('WithFormControlInputTelDropdown', () => {
         /**
          * @param {TemplateDataForDropdownInputTel} 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`
@@ -159,8 +157,8 @@ describe('WithFormControlInputTelDropdown', () => {
             >
               ${repeat(
                 data.regionMetaList,
-                regionMeta => regionMeta.regionCode,
-                regionMeta => html`
+                (regionMeta) => regionMeta.regionCode,
+                (regionMeta) => html`
                   <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
                 `,
               )}
@@ -170,14 +168,14 @@ describe('WithFormControlInputTelDropdown', () => {
       };
     }
     customElements.define('input-tel-dropdown-windows', InputTelDropdownWindows);
-    const el = /** @type {LionInputTelDropdown} */ (
+    const el =
+      /** @type {LionInputTelDropdown} */
       await fixture(html`
         <input-tel-dropdown-windows
           .allowedRegions="${['NL', 'BE']}"
           .modelValue="${'+31612345678'}"
         ></input-tel-dropdown-windows>
-      `)
-    );
+      `);
     const dropdownElement = el.refs.dropdown.value;
     // @ts-expect-error [allow-protected-in-tests]
     if (dropdownElement?._overlayCtrl) {
@@ -190,37 +188,32 @@ describe('WithFormControlInputTelDropdown', () => {
       expect(isActiveElement(el._inputNode)).to.be.false;
     }
   });
-
   describe('defaultValidators', () => {
     /** @type {(value:any) => void} */
     let resolveLoaded;
     beforeEach(() => {
       ({ resolveLoaded } = mockPhoneUtilManager());
     });
-
     afterEach(() => {
       restorePhoneUtilManager();
     });
-
     it('without interaction are not called', async () => {
-      const el = /** @type {LionInputTelDropdown} */ (
+      const el =
+        /** @type {LionInputTelDropdown} */
         await fixture(html`
           <lion-input-tel-dropdown .allowedRegions="${['NL']}"></lion-input-tel-dropdown>
-        `)
-      );
+        `);
       resolveLoaded(undefined);
       await aTimeout(0);
       expect(el.hasFeedbackFor).to.deep.equal([]);
     });
-
     it('with interaction are called', async () => {
-      const el = /** @type {LionInputTelDropdown} */ (
+      const el =
+        /** @type {LionInputTelDropdown} */
         await fixture(html`
           <lion-input-tel-dropdown .allowedRegions="${['NL']}"></lion-input-tel-dropdown>
-        `)
-      );
+        `);
       el.modelValue = '+31 6';
-
       resolveLoaded(undefined);
       await aTimeout(0);
       expect(el.hasFeedbackFor).to.deep.equal(['error']);

package/components/input-tel-dropdown/test/regionCodeToLocale.test.js

@@ -1,6 +1,5 @@
 import { expect } from '@open-wc/testing';
 import { regionCodeToLocale } from '../src/regionCodeToLocale.js';
-
 describe('regionCodeToLocale', () => {
   it('returns the most likely locale basename for a region', () => {
     expect(regionCodeToLocale('NL')).to.equal('nl-Latn-NL');

package/components/input-tel-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

package/components/input-tel-dropdown/test-suites/LionInputTelDropdown--parentheses.suite.js

@@ -19,17 +19,20 @@ import {
  * @typedef {import('./types.js').TelDropdownConfig} TelDropdownConfig
  */
 
-const fixture = /** @type {(arg: string | TemplateResult) => Promise<LionInputTelDropdown>} */ (
-  _fixture
-);
+const fixture =
+  /** @type {(arg: string | TemplateResult) => Promise<LionInputTelDropdown>} */
+  _fixture;
 
 /**
  * @type {TelDropdownConfig}
  */
 const telDropdownConfig = {
-  getTelDropdownInvokerEl: el => el.querySelector('select'),
+  getTelDropdownInvokerEl: (el) => el.querySelector('select'),
   selectNlOption: async () => {
-    await selectOption({ selector: 'select', value: 'NL' });
+    await selectOption({
+      selector: 'select',
+      value: 'NL',
+    });
   },
 };
 
@@ -39,12 +42,14 @@ const telDropdownConfig = {
 
 export function runInputTelDropdownParenthesesSuite(
   // @ts-ignore
-  { klass, config } = { klass: LionInputTelDropdown, config: telDropdownConfig },
+  { klass, config } = {
+    klass: LionInputTelDropdown,
+    config: telDropdownConfig,
+  },
 ) {
   // @ts-ignore
-  const tagName = defineCE(/** @type {* & HTMLElement} */ (class extends klass {}));
+  const tagName = defineCE(/** @type {* & HTMLElement} */ class extends klass {});
   const tag = unsafeStatic(tagName);
-
   describe('LionInputTelDropdown suite with `parentheses`', () => {
     /**
      * @type {LionInputTelDropdown}
@@ -56,7 +61,6 @@ export function runInputTelDropdownParenthesesSuite(
       el = await fixture(html` <${tag} format-country-code-style="parentheses"></${tag}> `);
       await el.updateComplete;
     });
-
     describe('Dropdown value is in sync with text input', () => {
       it('should set correct active region when selecting a country from dropdown ', async () => {
         const dropdownInvoker = config.getTelDropdownInvokerEl(el);
@@ -65,7 +69,6 @@ export function runInputTelDropdownParenthesesSuite(
         await config.selectNlOption(el);
         expect(el.activeRegion).to.equal('NL');
       });
-
       it('updates dropdown value', async () => {
         const dropdown = config.getTelDropdownInvokerEl(el);
         // @ts-ignore
@@ -80,7 +83,9 @@ export function runInputTelDropdownParenthesesSuite(
         await sendKeys({
           type: '(+91) 99',
         });
-        await sendKeys({ press: 'Backspace' });
+        await sendKeys({
+          press: 'Backspace',
+        });
         // @ts-ignore
         expect(input.value).to.equal('(+91) 9');
         expect(el.activeRegion).to.equal('IN');