@lion/ui 0.22.0 → 0.24.0

package/components/switch/test/lion-switch-button.test.js

@@ -8,35 +8,29 @@ import '@lion/ui/define/lion-switch-button.js';
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
 
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionSwitchButton>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionSwitchButton>} */ _fixture;
 describe('lion-switch-button', () => {
   /** @type {LionSwitchButton} */
   let el;
   beforeEach(async () => {
     el = await fixture(html`<lion-switch-button></lion-switch-button>`);
   });
-
   it('should be focusable', () => {
     expect(el.tabIndex).to.equal(0);
     expect(el.getAttribute('tabindex')).to.equal('0');
   });
-
   it('should not have a [type]', () => {
     expect(el.hasAttribute('type')).to.be.false;
   });
-
   it('should have checked=false by default', () => {
     expect(el.checked).to.equal(false);
     expect(el.hasAttribute('checked')).to.be.false;
   });
-
   it('is hidden when attribute hidden is true', async () => {
     el.hidden = true;
     await el.updateComplete;
     expect(el).not.to.be.displayed;
   });
-
   it('should toggle the value of "checked" on click', async () => {
     expect(el.checked).to.be.false;
     expect(el.hasAttribute('checked')).to.be.false;
@@ -49,20 +43,26 @@ describe('lion-switch-button', () => {
     expect(el.checked).to.be.false;
     expect(el.hasAttribute('checked')).to.be.false;
   });
-
   it('should toggle the value of "checked" on key-up', async () => {
     expect(el.checked).to.be.false;
     expect(el.hasAttribute('checked')).to.be.false;
-    el.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+    el.dispatchEvent(
+      new KeyboardEvent('keyup', {
+        key: 'Enter',
+      }),
+    );
     await el.updateComplete;
     expect(el.checked).to.be.true;
     expect(el.hasAttribute('checked')).to.be.true;
-    el.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
+    el.dispatchEvent(
+      new KeyboardEvent('keyup', {
+        key: ' ',
+      }),
+    );
     await el.updateComplete;
     expect(el.checked).to.be.false;
     expect(el.hasAttribute('checked')).to.be.false;
   });
-
   it('can be disabled', async () => {
     el.disabled = true;
     expect(el.checked).to.be.false;
@@ -77,7 +77,6 @@ describe('lion-switch-button', () => {
     expect(el.checked).to.be.true;
     expect(el.hasAttribute('checked')).to.be.true;
   });
-
   it('can be readonly', async () => {
     el.readOnly = true;
     expect(el.checked).to.be.false;
@@ -91,14 +90,13 @@ describe('lion-switch-button', () => {
     expect(el.checked).to.be.true;
     expect(el.hasAttribute('checked')).to.be.true;
   });
-
   it('should dispatch "checked-changed" event when toggled', () => {
     const handlerSpy = sinon.spy();
     el.addEventListener('checked-changed', handlerSpy);
     el.click();
     el.click();
     expect(handlerSpy.callCount).to.equal(2);
-    const checkCall = /** @param {import('sinon').SinonSpyCall} call */ call => {
+    const checkCall = /** @param {import('sinon').SinonSpyCall} call */ (call) => {
       expect(call.args).to.have.lengthOf(1);
       const e = call.args[0];
       expect(e).to.be.an.instanceof(Event);
@@ -107,14 +105,13 @@ describe('lion-switch-button', () => {
     checkCall(handlerSpy.getCall(0));
     checkCall(handlerSpy.getCall(1));
   });
-
   it('should dispatch "checked-changed" event when checked changed', () => {
     const handlerSpy = sinon.spy();
     el.addEventListener('checked-changed', handlerSpy);
     el.checked = true;
     el.checked = false;
     expect(handlerSpy.callCount).to.equal(2);
-    const checkCall = /** @param {import('sinon').SinonSpyCall} call */ call => {
+    const checkCall = /** @param {import('sinon').SinonSpyCall} call */ (call) => {
       expect(call.args).to.have.lengthOf(1);
       const e = call.args[0];
       expect(e).to.be.an.instanceof(Event);
@@ -123,7 +120,6 @@ describe('lion-switch-button', () => {
     checkCall(handlerSpy.getCall(0));
     checkCall(handlerSpy.getCall(1));
   });
-
   it('should not dispatch "checked-changed" event if disabled', () => {
     const handlerSpy = sinon.spy();
     el.disabled = true;
@@ -131,7 +127,6 @@ describe('lion-switch-button', () => {
     el.click();
     expect(handlerSpy.called).to.be.false;
   });
-
   it('should not dispatch "checked-changed" event if readonly', () => {
     const handlerSpy = sinon.spy();
     el.readOnly = true;
@@ -139,7 +134,6 @@ describe('lion-switch-button', () => {
     el.click();
     expect(handlerSpy.called).to.be.false;
   });
-
   it('should not dispatch "checked-changed" event if disabled on update', () => {
     const handlerSpy = sinon.spy();
     el.disabled = true;
@@ -147,7 +141,6 @@ describe('lion-switch-button', () => {
     el.checked = !el.checked;
     expect(handlerSpy.called).to.be.false;
   });
-
   it('should not dispatch "checked-changed" event if readonly on update', () => {
     const handlerSpy = sinon.spy();
     el.readOnly = true;
@@ -155,12 +148,11 @@ describe('lion-switch-button', () => {
     el.checked = !el.checked;
     expect(handlerSpy.called).to.be.false;
   });
-
   it('should not dispatch "checked-changed" event if not initialized on update', async () => {
     const handlerSpy = sinon.spy();
-    const elSync = /** @type {LionSwitchButton} */ (
-      fixtureSync(html`<lion-switch-button @checked-changed="${handlerSpy}" .checked=${true} />`)
-    );
+    const elSync =
+      /** @type {LionSwitchButton} */
+      fixtureSync(html`<lion-switch-button @checked-changed="${handlerSpy}" .checked=${true} />`);
     expect(elSync.__initialized).to.be.false;
     await elementUpdated(elSync);
     expect(elSync.__initialized).to.be.true;
@@ -169,26 +161,22 @@ describe('lion-switch-button', () => {
     await elementUpdated(elSync);
     expect(handlerSpy.called).to.be.true;
   });
-
   describe('a11y', () => {
     it('should manage "aria-checked"', async () => {
       expect(el.hasAttribute('aria-checked')).to.be.true;
       expect(el.getAttribute('aria-checked')).to.equal('false');
-
       el.click();
       await el.updateComplete;
       expect(el.getAttribute('aria-checked')).to.equal('true');
       el.click();
       await el.updateComplete;
       expect(el.getAttribute('aria-checked')).to.equal('false');
-
       el.checked = true;
       await el.updateComplete;
       expect(el.getAttribute('aria-checked')).to.equal('true');
       el.checked = false;
       await el.updateComplete;
       expect(el.getAttribute('aria-checked')).to.equal('false');
-
       el.setAttribute('checked', '');
       await el.updateComplete;
       expect(el.getAttribute('aria-checked')).to.equal('true');

package/components/switch/test/lion-switch.test.js

@@ -5,7 +5,6 @@ import { LionSwitch } from '@lion/ui/switch.js';
 import { html } from 'lit/static-html.js';
 import '@lion/ui/define/lion-switch.js';
 import sinon from 'sinon';
-
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
 /**
@@ -18,7 +17,6 @@ const IsTrue = class extends Validator {
   static get validatorName() {
     return 'IsTrue';
   }
-
   execute() {
     return true;
   }
@@ -28,18 +26,18 @@ const IsTrue = class extends Validator {
  * @param { LionSwitch } el
  */
 function getSwitchMembers(el) {
-  const obj = getFormControlMembers(/** @type { * & FormControlHost } */ (el));
-  return { ...obj, _inputNode: /** @type {LionSwitchButton} */ (obj._inputNode) };
+  const obj = getFormControlMembers(/** @type { * & FormControlHost } */ el);
+  return {
+    ...obj,
+    _inputNode: /** @type {LionSwitchButton} */ obj._inputNode,
+  };
 }
-
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionSwitch>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionSwitch>} */ _fixture;
 describe('lion-switch', () => {
   it('should have default "input" element', async () => {
     const el = await fixture(html`<lion-switch></lion-switch>`);
-    expect(Array.from(el.children).find(child => child.slot === 'input')).not.to.be.false;
+    expect(Array.from(el.children).find((child) => child.slot === 'input')).not.to.be.false;
   });
-
   it('clicking the label should toggle the checked state', async () => {
     const el = await fixture(html`<lion-switch label="Enable Setting"></lion-switch>`);
     const { _labelNode } = getFormControlMembers(el);
@@ -48,37 +46,30 @@ describe('lion-switch', () => {
     _labelNode.click();
     expect(el.checked).to.be.false;
   });
-
   it('clicking the label should not toggle the checked state when disabled', async () => {
     const el = await fixture(html`<lion-switch disabled label="Enable Setting"></lion-switch>`);
     const { _labelNode } = getFormControlMembers(el);
     _labelNode.click();
     expect(el.checked).to.be.false;
   });
-
   it('clicking the label should focus the toggle button', async () => {
     const el = await fixture(html`<lion-switch label="Enable Setting"></lion-switch>`);
     const { _inputNode, _labelNode } = getSwitchMembers(el);
-
     _labelNode.click();
     expect(isActiveElement(_inputNode)).to.be.true;
   });
-
   it('clicking the label should not focus the toggle button when disabled', async () => {
     const el = await fixture(html`<lion-switch disabled label="Enable Setting"></lion-switch>`);
     const { _inputNode, _labelNode } = getSwitchMembers(el);
-
     _labelNode.click();
     expect(isActiveElement(_inputNode)).to.be.false;
   });
-
   it('clicking the label should not toggle the checked state when readonly', async () => {
     const el = await fixture(html`<lion-switch readonly label="Enable Setting"></lion-switch>`);
     const { _labelNode } = getFormControlMembers(el);
     _labelNode.click();
     expect(el.checked).to.be.false;
   });
-
   it('should sync its "disabled" state to child button', async () => {
     const el = await fixture(html`<lion-switch disabled></lion-switch>`);
     const { _inputNode } = getSwitchMembers(el);
@@ -90,12 +81,10 @@ describe('lion-switch', () => {
     expect(_inputNode.disabled).to.be.false;
     expect(_inputNode.hasAttribute('disabled')).to.be.false;
   });
-
   it('is hidden when attribute hidden is true', async () => {
     const el = await fixture(html`<lion-switch hidden></lion-switch>`);
     expect(el).not.to.be.displayed;
   });
-
   it('should sync its "checked" state to child button', async () => {
     const uncheckedEl = await fixture(html`<lion-switch></lion-switch>`);
     const { _inputNode: uncheckeInputNode } = getSwitchMembers(uncheckedEl);
@@ -110,7 +99,6 @@ describe('lion-switch', () => {
     expect(uncheckeInputNode.checked).to.be.true;
     expect(checkeInputNode.checked).to.be.false;
   });
-
   it('should sync "checked" state received from child button', async () => {
     const el = await fixture(html`<lion-switch></lion-switch>`);
     const { _inputNode } = getSwitchMembers(el);
@@ -121,7 +109,6 @@ describe('lion-switch', () => {
     button.click();
     expect(el.checked).to.be.false;
   });
-
   it('synchronizes modelValue to checked state and vice versa', async () => {
     const el = await fixture(html`<lion-switch .choiceValue=${'foo'}></lion-switch>`);
     expect(el.checked).to.be.false;
@@ -136,7 +123,6 @@ describe('lion-switch', () => {
       value: 'foo',
     });
   });
-
   it('should dispatch "checked-changed" event when toggled via button or label', async () => {
     const handlerSpy = sinon.spy();
     const el = await fixture(html`<lion-switch .choiceValue=${'foo'}></lion-switch>`);
@@ -146,7 +132,7 @@ describe('lion-switch', () => {
     _labelNode.click();
     await el.updateComplete;
     expect(handlerSpy.callCount).to.equal(2);
-    const checkCall = /** @param {import('sinon').SinonSpyCall} call */ call => {
+    const checkCall = /** @param {import('sinon').SinonSpyCall} call */ (call) => {
       expect(call.args).to.have.lengthOf(1);
       const e = call.args[0];
       expect(e).to.be.an.instanceof(Event);
@@ -155,7 +141,6 @@ describe('lion-switch', () => {
     checkCall(handlerSpy.getCall(0));
     checkCall(handlerSpy.getCall(1));
   });
-
   it('should dispatch "checked-changed" event when checked changed', async () => {
     const handlerSpy = sinon.spy();
     const el = await fixture(html`<lion-switch .choiceValue=${'foo'}></lion-switch>`);
@@ -164,7 +149,6 @@ describe('lion-switch', () => {
     await el.updateComplete;
     expect(handlerSpy.callCount).to.equal(1);
   });
-
   it('should not propagate the "checked-changed" event further up when caught by switch', async () => {
     const handlerSpy = sinon.spy();
     const parentHandlerSpy = sinon.spy();
@@ -173,13 +157,12 @@ describe('lion-switch', () => {
         <lion-switch @checked-changed=${handlerSpy} .choiceValue=${'foo'}></lion-switch>
       </div>
     `);
-    const switchEl = /** @type {LionSwitch} */ (el.firstElementChild);
+    const switchEl = /** @type {LionSwitch} */ el.firstElementChild;
     switchEl.checked = true;
     await switchEl.updateComplete;
     expect(handlerSpy.callCount).to.equal(1);
     expect(parentHandlerSpy.callCount).to.equal(0);
   });
-
   it('can be configured to show feedback messages immediately', async () => {
     const tagName = 'custom-switch';
     if (!customElements.get(tagName)) {
@@ -206,7 +189,14 @@ describe('lion-switch', () => {
     }
     const el = await fixture(
       html`<custom-switch
-        .validators="${[new IsTrue({}, { type: 'info' })]}"
+        .validators="${[
+          new IsTrue(
+            {},
+            {
+              type: 'info',
+            },
+          ),
+        ]}"
         .feedbackCondition="${(
           /** @type {string} */ type,
           /** @type {object} */ meta,
@@ -221,23 +211,19 @@ describe('lion-switch', () => {
     );
     expect(el.showsFeedbackFor).to.eql(['info']);
   });
-
   describe('Accessibility', () => {
     it('passes axe a11y audit', async () => {
       const el = await fixture(html`<lion-switch name="hi" label="My label"></lion-switch>`);
       await expect(el).to.be.accessible();
-
       el.checked = true;
       await el.updateComplete;
       await expect(el).to.be.accessible();
     });
-
     it('passes axe a11y audit when disabled', async () => {
       const el = await fixture(
         html`<lion-switch name="hi" label="My label" disabled></lion-switch>`,
       );
       await expect(el).to.be.accessible();
-
       el.checked = true;
       await el.updateComplete;
       await expect(el).to.be.accessible();

package/components/tabs/src/LionTabs.js

@@ -77,7 +77,6 @@ function selectButton(el, withFocus = false) {
   if (withFocus) {
     el.focus();
   }
-
   el.setAttribute('selected', 'true');
   el.setAttribute('aria-selected', 'true');
   el.setAttribute('tabindex', '0');
@@ -96,7 +95,7 @@ function deselectButton(el) {
  * @param {Event} ev
  */
 function handleButtonKeydown(ev) {
-  const _ev = /** @type {KeyboardEvent} */ (ev);
+  const _ev = /** @type {KeyboardEvent} */ ev;
   switch (_ev.key) {
     case 'ArrowDown':
     case 'ArrowRight':
@@ -127,7 +126,6 @@ export class LionTabs extends LitElement {
       },
     };
   }
-
   static get styles() {
     return [
       css`
@@ -155,7 +153,6 @@ export class LionTabs extends LitElement {
       `,
     ];
   }
-
   render() {
     return html`
       <div class="tabs__tab-group" role="tablist">
@@ -166,7 +163,6 @@ export class LionTabs extends LitElement {
       </div>
     `;
   }
-
   constructor() {
     super();
     /**
@@ -180,19 +176,17 @@ export class LionTabs extends LitElement {
     super.firstUpdated(changedProperties);
     this.__setupSlots();
     if (this.tabs[0]?.disabled) {
-      this.selectedIndex = this.tabs.findIndex(tab => !tab.disabled);
+      this.selectedIndex = this.tabs.findIndex((tab) => !tab.disabled);
     }
   }
-
   get tabs() {
-    return /** @type {HTMLButtonElement[]} */ (Array.from(this.children)).filter(
-      child => child.slot === 'tab',
+    return /** @type {HTMLButtonElement[]} */ Array.from(this.children).filter(
+      (child) => child.slot === 'tab',
     );
   }
-
   get panels() {
-    return /** @type {HTMLElement[]} */ (Array.from(this.children)).filter(
-      child => child.slot === 'panel',
+    return /** @type {HTMLElement[]} */ Array.from(this.children).filter(
+      (child) => child.slot === 'panel',
     );
   }
 
@@ -200,7 +194,7 @@ export class LionTabs extends LitElement {
    * // TODO: check if this is a false positive or if we can improve
    * @configure ReactiveElement
    */
-  static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
+  static enabledWarnings = super.enabledWarnings?.filter((w) => w !== 'change-in-update') || [];
 
   /** @private */
   __setupSlots() {
@@ -211,7 +205,6 @@ export class LionTabs extends LitElement {
         this.__setupStore();
         this.__updateSelected(false);
       };
-
       if (tabSlot) {
         tabSlot.addEventListener('slotchange', handleSlotChange);
       }
@@ -228,7 +221,6 @@ export class LionTabs extends LitElement {
         `The amount of tabs (${this.tabs.length}) doesn't match the amount of panels (${this.panels.length}).`,
       );
     }
-
     this.tabs.forEach((button, index) => {
       const uid = uuid();
       const panel = this.panels[index];
@@ -243,11 +235,13 @@ export class LionTabs extends LitElement {
         keydownHandler: handleButtonKeydown.bind(this),
         keyupHandler: this.__handleButtonKeyup.bind(this),
       };
-      setupPanel({ ...entry, el: entry.panel });
+      setupPanel({
+        ...entry,
+        el: entry.panel,
+      });
       setupButton(entry);
       deselectPanel(entry.panel);
       deselectButton(entry.button);
-
       if (this.__store) {
         this.__store.push(entry);
       }
@@ -259,7 +253,7 @@ export class LionTabs extends LitElement {
     if (!this.__store) {
       return;
     }
-    this.__store.forEach(entry => {
+    this.__store.forEach((entry) => {
       cleanButton(entry);
     });
     this.__store = [];
@@ -273,7 +267,7 @@ export class LionTabs extends LitElement {
    * @private
    */
   __getNextNotDisabledTab(tabs, currentTab, dir) {
-    let orderedNotDisabledTabs = /** @type {HTMLButtonElement[]} */ ([]);
+    let orderedNotDisabledTabs = /** @type {HTMLButtonElement[]} */ [];
     const nextNotDisabledTabs = tabs.filter((tab, i) => !tab.disabled && i > this.selectedIndex);
     const prevNotDisabledTabs = tabs.filter((tab, i) => !tab.disabled && i < this.selectedIndex);
     if (dir === 'right') {
@@ -292,24 +286,27 @@ export class LionTabs extends LitElement {
    */
   __getNextAvailableIndex(newIndex, direction) {
     const currentTab = this.tabs[this.selectedIndex];
-    if (this.tabs.every(tab => !tab.disabled)) {
+    if (this.tabs.every((tab) => !tab.disabled)) {
       return newIndex;
     }
     if (direction === 'ArrowRight' || direction === 'ArrowDown') {
       const nextNotDisabledTab = this.__getNextNotDisabledTab(this.tabs, currentTab, 'right');
-      return this.tabs.findIndex(tab => nextNotDisabledTab === tab);
+      return this.tabs.findIndex((tab) => nextNotDisabledTab === tab);
     }
     if (direction === 'ArrowLeft' || direction === 'ArrowUp') {
       const nextNotDisabledTab = this.__getNextNotDisabledTab(this.tabs, currentTab, 'left');
-      return this.tabs.findIndex(tab => nextNotDisabledTab === tab);
+      return this.tabs.findIndex((tab) => nextNotDisabledTab === tab);
     }
     if (direction === 'Home') {
-      return this.tabs.findIndex(tab => !tab.disabled);
+      return this.tabs.findIndex((tab) => !tab.disabled);
     }
     if (direction === 'End') {
       const notDisabledTabs = this.tabs
-        .map((tab, i) => ({ disabled: tab.disabled, index: i }))
-        .filter(tab => !tab.disabled);
+        .map((tab, i) => ({
+          disabled: tab.disabled,
+          index: i,
+        }))
+        .filter((tab) => !tab.disabled);
       return notDisabledTabs[notDisabledTabs.length - 1].index;
     }
     return -1;
@@ -331,7 +328,7 @@ export class LionTabs extends LitElement {
    * @private
    */
   __handleButtonKeyup(ev) {
-    const _ev = /** @type {KeyboardEvent} */ (ev);
+    const _ev = /** @type {KeyboardEvent} */ ev;
     if (typeof this.selectedIndex === 'number') {
       switch (_ev.key) {
         case 'ArrowDown':
@@ -418,8 +415,8 @@ export class LionTabs extends LitElement {
     ) {
       return;
     }
-    const previousButton = this.tabs.find(child => child.hasAttribute('selected'));
-    const previousPanel = this.panels.find(child => child.hasAttribute('selected'));
+    const previousButton = this.tabs.find((child) => child.hasAttribute('selected'));
+    const previousPanel = this.panels.find((child) => child.hasAttribute('selected'));
     if (previousButton) {
       deselectButton(previousButton);
     }