@lion/ui 0.22.0 → 0.24.0

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

@@ -13,7 +13,6 @@ import {
   html,
 } from '@open-wc/testing';
 import { nothing } from 'lit/html.js';
-
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
 /**
@@ -22,12 +21,12 @@ import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
 
-const fixture = /** @type {(arg: string | TemplateResult) => Promise<LionInputTelDropdown>} */ (
-  _fixture
-);
-const fixtureSync = /** @type {(arg: string | TemplateResult) => LionInputTelDropdown} */ (
-  _fixtureSync
-);
+const fixture =
+  /** @type {(arg: string | TemplateResult) => Promise<LionInputTelDropdown>} */
+  _fixture;
+const fixtureSync =
+  /** @type {(arg: string | TemplateResult) => LionInputTelDropdown} */
+  _fixtureSync;
 
 /**
  * @param {DropdownElement | HTMLSelectElement} dropdownEl
@@ -45,18 +44,19 @@ function getDropdownValue(dropdownEl) {
  */
 export function runInputTelDropdownSuite(
   // @ts-expect-error
-  { klass, hasParentheses } = { klass: LionInputTelDropdown, hasParentheses: false },
+  { klass, hasParentheses } = {
+    klass: LionInputTelDropdown,
+    hasParentheses: false,
+  },
 ) {
   // @ts-ignore
-  const tagName = defineCE(/** @type {* & HTMLElement} */ (class extends klass {}));
+  const tagName = defineCE(/** @type {* & HTMLElement} */ class extends klass {});
   const tag = unsafeStatic(tagName);
-
   describe('LionInputTelDropdown', () => {
     beforeEach(async () => {
       // Wait till PhoneUtilManager has been loaded
       await PhoneUtilManager.loadComplete;
     });
-
     it('syncs value of dropdown on init if input has no value', async () => {
       const el = await fixture(
         html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}" ></${tag}> `,
@@ -64,11 +64,10 @@ export function runInputTelDropdownSuite(
       expect(el.activeRegion).to.equal('GB');
       const expectedNumber = hasParentheses ? '(+44)' : '+44';
       expect(el.value).to.equal(expectedNumber);
-      expect(getDropdownValue(/** @type {DropdownElement} */ (el.refs.dropdown.value))).to.equal(
+      expect(getDropdownValue(/** @type {DropdownElement} */ el.refs.dropdown.value)).to.equal(
         'GB',
       );
     });
-
     it('syncs value of dropdown on reset if input has no value', async () => {
       const el = await fixture(
         html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}" ></${tag}> `,
@@ -82,7 +81,6 @@ export function runInputTelDropdownSuite(
       const expectedNumber = hasParentheses ? '(+44)' : '+44';
       expect(el.value).to.equal(expectedNumber);
     });
-
     it('syncs value of dropdown on init if input has no value does not influence interaction states', async () => {
       const el = await fixture(
         html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}" ></${tag}> `,
@@ -90,14 +88,12 @@ export function runInputTelDropdownSuite(
       expect(el.dirty).to.be.false;
       expect(el.prefilled).to.be.false;
     });
-
     it('syncs value of dropdown on reset also resets interaction states', async () => {
       const el = await fixture(
         html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}" ></${tag}> `,
       );
       el.modelValue = '+31612345678';
       await el.updateComplete;
-
       expect(el.dirty).to.be.true;
       expect(el.prefilled).to.be.false;
       el.reset();
@@ -105,7 +101,6 @@ export function runInputTelDropdownSuite(
       expect(el.dirty).to.be.false;
       expect(el.prefilled).to.be.false;
     });
-
     it('sets correct interaction states on init if input has a value', async () => {
       const el = await fixture(
         html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .modelValue="${'+31612345678'}"></${tag}> `,
@@ -113,7 +108,6 @@ export function runInputTelDropdownSuite(
       expect(el.dirty).to.be.false;
       expect(el.prefilled).to.be.true;
     });
-
     describe('Dropdown display', () => {
       it('calls `templates.dropdown` with TemplateDataForDropdownInputTel object', async () => {
         const el =
@@ -123,16 +117,16 @@ export function runInputTelDropdownSuite(
           .preferredRegions="${['PH']}"
           ></${tag}> `);
         const spy = sinon.spy(
-          /** @type {typeof LionInputTelDropdown} */ (el.constructor).templates,
+          /** @type {typeof LionInputTelDropdown} */ el.constructor.templates,
           'dropdown',
         );
         await el.updateComplete;
         const dropdownNode = el.refs.dropdown.value;
-        const templateDataForDropdown = /** @type {TemplateDataForDropdownInputTel} */ (
-          spy.args[0][0]
-        );
+        const templateDataForDropdown =
+          /** @type {TemplateDataForDropdownInputTel} */
+          spy.args[0][0];
         expect(templateDataForDropdown).to.eql(
-          /** @type {TemplateDataForDropdownInputTel} */ ({
+          /** @type {TemplateDataForDropdownInputTel} */ {
             data: {
               activeRegion: 'NL',
               regionMetaList: [
@@ -167,93 +161,89 @@ export function runInputTelDropdownSuite(
                   // @ts-expect-error [allow-protected]
                   'model-value-changed': el._onDropdownValueChange,
                 },
-                props: { style: 'height: 100%;' },
-                ref: { value: dropdownNode },
+                props: {
+                  style: 'height: 100%;',
+                },
+                ref: {
+                  value: dropdownNode,
+                },
               },
               // @ts-expect-error [allow-protected]
               input: el._inputNode,
             },
-          }),
+          },
         );
         spy.restore();
       });
-
       it('can override "all-countries-label"', async () => {
         const el =
           fixtureSync(html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}" 
           .preferredRegions="${['PH']}"
           ></${tag}> `);
         const spy = sinon.spy(
-          /** @type {typeof LionInputTelDropdown} */ (el.constructor).templates,
+          /** @type {typeof LionInputTelDropdown} */ el.constructor.templates,
           'dropdown',
         );
         // @ts-expect-error [allow-protected]
         el._allCountriesLabel = 'foo';
         await el.updateComplete;
-        const templateDataForDropdown = /** @type {TemplateDataForDropdownInputTel} */ (
-          spy.args[0][0]
-        );
-
+        const templateDataForDropdown =
+          /** @type {TemplateDataForDropdownInputTel} */
+          spy.args[0][0];
         expect(templateDataForDropdown.refs.dropdown.labels.allCountries).to.eql('foo');
         spy.restore();
       });
-
       it('can override "preferred-countries-label"', async () => {
         const el =
           fixtureSync(html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}" 
           .preferredRegions="${['PH']}"
           ></${tag}> `);
         const spy = sinon.spy(
-          /** @type {typeof LionInputTelDropdown} */ (el.constructor).templates,
+          /** @type {typeof LionInputTelDropdown} */ el.constructor.templates,
           'dropdown',
         );
         // @ts-expect-error [allow-protected]
         el._preferredCountriesLabel = 'foo';
         await el.updateComplete;
-        const templateDataForDropdown = /** @type {TemplateDataForDropdownInputTel} */ (
-          spy.args[0][0]
-        );
+        const templateDataForDropdown =
+          /** @type {TemplateDataForDropdownInputTel} */
+          spy.args[0][0];
         expect(templateDataForDropdown.refs.dropdown.labels.preferredCountries).to.eql('foo');
         spy.restore();
       });
-
       it('syncs dropdown value initially from activeRegion', async () => {
         const el = await fixture(
           html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${['DE']}"></${tag}> `,
         );
-        expect(getDropdownValue(/** @type {DropdownElement} */ (el.refs.dropdown.value))).to.equal(
+        expect(getDropdownValue(/** @type {DropdownElement} */ el.refs.dropdown.value)).to.equal(
           'DE',
         );
       });
-
       it('syncs disabled attribute to dropdown', async () => {
         const el = await fixture(
           html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  disabled></${tag}> `,
         );
-        expect(/** @type {HTMLElement} */ (el.refs.dropdown.value)?.hasAttribute('disabled')).to.be
+        expect(/** @type {HTMLElement} */ el.refs.dropdown.value?.hasAttribute('disabled')).to.be
           .true;
       });
-
       it('disables dropdown on readonly', async () => {
         const el = await fixture(
           html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  readonly></${tag}> `,
         );
-        expect(/** @type {HTMLElement} */ (el.refs.dropdown.value)?.hasAttribute('disabled')).to.be
+        expect(/** @type {HTMLElement} */ el.refs.dropdown.value?.hasAttribute('disabled')).to.be
           .true;
       });
-
       it('renders to prefix slot in light dom', async () => {
         const el = await fixture(
           html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${['DE']}"></${tag}> `,
         );
-        const prefixSlot = /** @type {HTMLElement} */ (
-          /** @type {HTMLElement} */ (el.refs.dropdown.value)
-        );
+        const prefixSlot =
+          /** @type {HTMLElement} */
+          /** @type {HTMLElement} */ el.refs.dropdown.value;
         expect(prefixSlot.getAttribute('slot')).to.equal('prefix');
         expect(prefixSlot.slot).to.equal('prefix');
         expect(prefixSlot.parentElement).to.equal(el);
       });
-
       it('rerenders light dom when PhoneUtil loaded', async () => {
         const { resolveLoaded } = mockPhoneUtilManager();
         const el = await fixture(
@@ -267,7 +257,6 @@ export function runInputTelDropdownSuite(
         restorePhoneUtilManager();
         spy.restore();
       });
-
       it('has the correct nameForLocale, based on browser language', async () => {
         const el =
           fixtureSync(html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}" 
@@ -276,7 +265,7 @@ export function runInputTelDropdownSuite(
           .preferredRegions="${['PH']}"
           ></${tag}> `);
         const spy = sinon.spy(
-          /** @type {typeof LionInputTelDropdown} */ (el.constructor).templates,
+          /** @type {typeof LionInputTelDropdown} */ el.constructor.templates,
           'dropdown',
         );
         // @ts-ignore
@@ -285,11 +274,11 @@ export function runInputTelDropdownSuite(
         el._localizeManager.locale = 'fr-BE';
         await el.updateComplete;
         const dropdownNode = el.refs.dropdown.value;
-        const templateDataForDropdown = /** @type {TemplateDataForDropdownInputTel} */ (
-          spy.args[0][0]
-        );
+        const templateDataForDropdown =
+          /** @type {TemplateDataForDropdownInputTel} */
+          spy.args[0][0];
         expect(templateDataForDropdown).to.eql(
-          /** @type {TemplateDataForDropdownInputTel} */ ({
+          /** @type {TemplateDataForDropdownInputTel} */ {
             data: {
               activeRegion: 'NL',
               regionMetaList: [
@@ -324,20 +313,23 @@ export function runInputTelDropdownSuite(
                   // @ts-expect-error [allow-protected]
                   'model-value-changed': el._onDropdownValueChange,
                 },
-                props: { style: 'height: 100%;' },
-                ref: { value: dropdownNode },
+                props: {
+                  style: 'height: 100%;',
+                },
+                ref: {
+                  value: dropdownNode,
+                },
               },
               // @ts-expect-error [allow-protected]
               input: el._inputNode,
             },
-          }),
+          },
         );
         spy.restore();
         // @ts-ignore
         el._localizeManager.locale = originalLocale; // restore the locale back to original
       });
     });
-
     describe('On dropdown value change', () => {
       it('changes the currently active country code in the textbox', async () => {
         const el = await fixture(html`
@@ -356,7 +348,6 @@ export function runInputTelDropdownSuite(
         await el.updateComplete;
         expect(el.value).to.equal(expectedNumber);
       });
-
       it('changes the currently active country code in the textbox when empty', async () => {
         const el = await fixture(
           html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${['NL', 'BE']}"></${tag}> `,
@@ -369,13 +360,9 @@ export function runInputTelDropdownSuite(
         const expectedNumber = hasParentheses ? '(+32)' : '+32';
         expect(el.value).to.equal(expectedNumber);
       });
-
       it('changes the currently active country code in the textbox when empty with parentheses', async () => {
         const el = await fixture(
-          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  format-country-code-style="parentheses" .allowedRegions="${[
-            'NL',
-            'BE',
-          ]}"></${tag}> `,
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  format-country-code-style="parentheses" .allowedRegions="${['NL', 'BE']}"></${tag}> `,
         );
         el.value = '';
         // @ts-ignore
@@ -384,7 +371,6 @@ export function runInputTelDropdownSuite(
         await el.updateComplete;
         expect(el.value).to.equal('(+32)');
       });
-
       it('changes the currently active country code in the textbox when invalid', async () => {
         const el = await fixture(
           html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${['NL', 'BE']}"></${tag}> `,
@@ -397,7 +383,6 @@ export function runInputTelDropdownSuite(
         const expectedNumber = hasParentheses ? '(+32)' : '+32';
         expect(el.value).to.equal(expectedNumber);
       });
-
       it('changes the currently active country code in the textbox when invalid and small part of phone number', async () => {
         const el = await fixture(
           html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${['NL', 'BE']}"></${tag}> `,
@@ -410,7 +395,6 @@ export function runInputTelDropdownSuite(
         const expectedNumber = hasParentheses ? '(+32) 2' : '+32 2';
         expect(el.value).to.equal(expectedNumber);
       });
-
       it('changes the currently active country code in the textbox when invalid and bigger part of phone number', async () => {
         const el = await fixture(
           html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${['NL', 'BE']}"></${tag}> `,
@@ -423,7 +407,6 @@ export function runInputTelDropdownSuite(
         const expectedNumber = hasParentheses ? '(+32)612345678' : '+32612345678';
         expect(el.value).to.equal(expectedNumber);
       });
-
       it('changes the currently phonenumber completely in the textbox when not sure what to replace', async () => {
         const el = await fixture(
           html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${['NL', 'BE']}""></${tag}> `,
@@ -436,13 +419,9 @@ export function runInputTelDropdownSuite(
         const expectedNumber = hasParentheses ? '(+32)' : '+32';
         expect(el.value).to.equal(expectedNumber);
       });
-
       it('keeps focus on dropdownElement after selection if selected via unopened dropdown', async () => {
         const el = await fixture(
-          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${[
-            'NL',
-            'BE',
-          ]}" .modelValue="${'+31612345678'}"></${tag}> `,
+          html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .allowedRegions="${['NL', 'BE']}" .modelValue="${'+31612345678'}"></${tag}> `,
         );
         const dropdownElement = el.refs.dropdown.value;
         // @ts-ignore
@@ -452,7 +431,6 @@ export function runInputTelDropdownSuite(
         expect(isActiveElement(el._inputNode)).to.be.false;
       });
     });
-
     describe('On activeRegion change', () => {
       it('updates dropdown value ', async () => {
         const el = await fixture(
@@ -462,11 +440,10 @@ export function runInputTelDropdownSuite(
         // @ts-expect-error [allow protected]
         el._setActiveRegion('BE');
         await el.updateComplete;
-        expect(getDropdownValue(/** @type {DropdownElement} */ (el.refs.dropdown.value))).to.equal(
+        expect(getDropdownValue(/** @type {DropdownElement} */ el.refs.dropdown.value)).to.equal(
           'BE',
         );
       });
-
       it('keeps dropdown value if countryCode is the same', async () => {
         const el = await fixture(
           html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  .modelValue="${'+12345678901'}"></${tag}> `,
@@ -475,12 +452,11 @@ export function runInputTelDropdownSuite(
         // @ts-expect-error [allow-protected-in test]
         el._setActiveRegion('AG'); // Also +1
         await el.updateComplete;
-        expect(getDropdownValue(/** @type {DropdownElement} */ (el.refs.dropdown.value))).to.equal(
+        expect(getDropdownValue(/** @type {DropdownElement} */ el.refs.dropdown.value)).to.equal(
           'US',
         );
       });
     });
-
     describe('is empthy', () => {
       it('ignores initial countrycode', async () => {
         const el = await fixture(
@@ -489,7 +465,6 @@ export function runInputTelDropdownSuite(
         // @ts-ignore
         expect(el._isEmpty()).to.be.true;
       });
-
       it('ignores initial countrycode with parentheses', async () => {
         const el = await fixture(
           html` <${tag} format-country-code-style="${hasParentheses ? 'parentheses' : nothing}"  format-country-code-style="parentheses"></${tag}> `,

package/components/listbox/src/LionListbox.js

@@ -17,7 +17,10 @@ export class LionListbox extends ListboxMixin(
    * @configure InteractionStateMixin, ValidateMixin
    */
   get _feedbackConditionMeta() {
-    return { ...super._feedbackConditionMeta, focused: this.focused };
+    return {
+      ...super._feedbackConditionMeta,
+      focused: this.focused,
+    };
   }
 
   /**

package/components/listbox/src/LionOption.js

@@ -28,6 +28,7 @@ export class LionOption extends DisabledMixin(
     };
   }
 
+  /** @returns {import('lit').CSSResultArray} */
   static get styles() {
     return [
       css`
@@ -67,7 +68,6 @@ export class LionOption extends DisabledMixin(
   get slots() {
     return {};
   }
-
   constructor() {
     super();
     this.active = false;
@@ -85,9 +85,12 @@ export class LionOption extends DisabledMixin(
    */
   requestUpdate(name, oldValue, options) {
     super.requestUpdate(name, oldValue, options);
-
     if (name === 'active' && this.active !== oldValue) {
-      this.dispatchEvent(new Event('active-changed', { bubbles: true }));
+      this.dispatchEvent(
+        new Event('active-changed', {
+          bubbles: true,
+        }),
+      );
     }
   }
 
@@ -99,7 +102,6 @@ export class LionOption extends DisabledMixin(
     if (changedProperties.has('checked')) {
       this.setAttribute('aria-selected', `${this.checked}`);
     }
-
     if (changedProperties.has('disabled')) {
       this.setAttribute('aria-disabled', `${this.disabled}`);
     }
@@ -116,7 +118,6 @@ export class LionOption extends DisabledMixin(
       </div>
     `;
   }
-
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'option');
@@ -137,9 +138,9 @@ export class LionOption extends DisabledMixin(
     if (this.disabled) {
       return;
     }
-    const parentForm = /** @type {unknown} */ (this._parentFormGroup);
+    const parentForm = /** @type {unknown} */ this._parentFormGroup;
     this._isHandlingUserInput = true;
-    if (parentForm && /** @type {ChoiceGroupHost} */ (parentForm).multipleChoice) {
+    if (parentForm && /** @type {ChoiceGroupHost} */ parentForm.multipleChoice) {
       // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; Lit reactive property: read through a typed local instead (e.g. const next = this.x ?? DEFAULT) - a class field would shadow the accessor Lit creates from static properties
       this.checked = !this.checked;
       this.active = !this.active;

package/components/listbox/src/LionOptions.js

@@ -14,17 +14,14 @@ export class LionOptions extends FormRegistrarPortalMixin(LitElement) {
       },
     };
   }
-
   constructor() {
     super();
     this.tabIndex = 0;
   }
-
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'listbox');
   }
-
   createRenderRoot() {
     return this;
   }