@lion/ui 0.23.0 → 0.24.0

package/components/select-rich/test-helpers/getSelectRichMembers.js

@@ -13,6 +13,9 @@ export function getSelectRichMembers(el) {
   return {
     ...obj,
     // @ts-ignore [allow-protected] in test
-    ...{ _invokerNode: el._invokerNode, _overlayCtrl: el._overlayCtrl },
+    ...{
+      _invokerNode: el._invokerNode,
+      _overlayCtrl: el._overlayCtrl,
+    },
   };
 }

package/components/steps/src/LionStep.js

@@ -55,17 +55,15 @@ export class LionStep extends LitElement {
       },
     };
   }
-
   constructor() {
     super();
     this.status = 'untouched';
     // eslint-disable-next-line no-unused-vars
-    this.condition = /** @param {Object} [data] */ data => true;
+    this.condition = /** @param {Object} [data] */ (data) => true;
     this.invertCondition = false;
     this.forwardOnly = false;
     this.initialStep = false;
   }
-
   static get styles() {
     return [
       css`
@@ -83,7 +81,6 @@ export class LionStep extends LitElement {
       `,
     ];
   }
-
   render() {
     return html`<slot></slot>`;
   }
@@ -91,22 +88,34 @@ export class LionStep extends LitElement {
   /** @param {import('lit').PropertyValues } changedProperties */
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
-    this.controller = /** @type {LionSteps} */ (this.parentNode);
+    this.controller = /** @type {LionSteps} */ this.parentNode;
   }
-
   enter() {
     this.status = 'entered';
-    this.dispatchEvent(new CustomEvent('enter', { bubbles: true, composed: true }));
+    this.dispatchEvent(
+      new CustomEvent('enter', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
   }
-
   leave() {
     this.status = 'left';
-    this.dispatchEvent(new CustomEvent('leave', { bubbles: true, composed: true }));
+    this.dispatchEvent(
+      new CustomEvent('leave', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
   }
-
   skip() {
     this.status = 'skipped';
-    this.dispatchEvent(new CustomEvent('skip', { bubbles: true, composed: true }));
+    this.dispatchEvent(
+      new CustomEvent('skip', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
   }
 
   /** @param {Object} [data] */
@@ -119,5 +128,5 @@ export class LionStep 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') || [];
 }

package/components/steps/src/LionSteps.js

@@ -23,7 +23,6 @@ export class LionSteps extends LitElement {
       `,
     ];
   }
-
   static get properties() {
     /**
      * Fired when a transition between steps happens.
@@ -47,7 +46,6 @@ export class LionSteps extends LitElement {
       },
     };
   }
-
   constructor() {
     super();
     /** @type {{[key: string]: any}} */
@@ -62,7 +60,6 @@ export class LionSteps extends LitElement {
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
     this._max = this.steps.length - 1;
-
     let hasInitial = false;
     this.steps.forEach((step, i) => {
       if (step.initialStep && i !== 0) {
@@ -80,38 +77,38 @@ export class LionSteps extends LitElement {
     super.updated(changedProperties);
     if (changedProperties.has('current')) {
       this._onCurrentChanged(
-        { current: this.current },
-        { current: /** @type {number} */ (changedProperties.get('current')) },
+        {
+          current: this.current,
+        },
+        {
+          current: /** @type {number} */ changedProperties.get('current'),
+        },
       );
     }
   }
-
   render() {
     return html`<slot></slot>`;
   }
-
   next() {
     this._goTo(this.current + 1, this.current);
   }
-
   previous() {
     this._goTo(this.current - 1, this.current);
   }
-
   get steps() {
-    const defaultSlot = /** @type {HTMLSlotElement} */ (
-      this.shadowRoot?.querySelector('slot:not([name])')
-    );
-    return /** @type {LionStep[]} */ (defaultSlot.assignedNodes()).filter(
-      node => node.nodeType === Node.ELEMENT_NODE,
-    );
+    const defaultSlot =
+      /** @type {HTMLSlotElement} */
+      this.shadowRoot?.querySelector('slot:not([name])');
+    return /** @type {LionStep[]} */ defaultSlot
+      .assignedNodes()
+      .filter((node) => node.nodeType === Node.ELEMENT_NODE);
   }
 
   /**
    * // 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') || [];
 
   /**
    * @param {number} newCurrent
@@ -121,10 +118,8 @@ export class LionSteps extends LitElement {
     if (newCurrent < 0 || newCurrent > this._max) {
       throw new Error(`There is no step at index ${newCurrent}.`);
     }
-
     const nextStep = this.steps[newCurrent];
     const back = newCurrent < oldCurrent;
-
     if (nextStep.passesCondition(this.data)) {
       if (back && nextStep.forwardOnly) {
         this._goTo(newCurrent - 1, oldCurrent);
@@ -148,18 +143,20 @@ export class LionSteps extends LitElement {
   _changeStep(newCurrent, oldCurrent) {
     const oldStepElement = this.steps[oldCurrent];
     const newStepElement = this.steps[newCurrent];
-    const fromStep = { number: oldCurrent, element: oldStepElement };
-    const toStep = { number: newCurrent, element: newStepElement };
-
+    const fromStep = {
+      number: oldCurrent,
+      element: oldStepElement,
+    };
+    const toStep = {
+      number: newCurrent,
+      element: newStepElement,
+    };
     oldStepElement.leave();
-
     if (this.current !== newCurrent) {
       this._internalCurrentSync = true;
       this.current = newCurrent;
     }
-
     newStepElement.enter();
-
     this._dispatchTransitionEvent(fromStep, toStep);
   }
 
@@ -172,7 +169,10 @@ export class LionSteps extends LitElement {
       new CustomEvent('transition', {
         bubbles: true,
         composed: true,
-        detail: { fromStep, toStep },
+        detail: {
+          fromStep,
+          toStep,
+        },
       }),
     );
   }

package/components/steps/test/lion-step.test.js

@@ -1,6 +1,5 @@
 import { expect, fixture, oneEvent } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
-
 import '@lion/ui/define/lion-step.js';
 
 /**
@@ -14,41 +13,39 @@ describe('lion-step', () => {
         <lion-step>Step 1</lion-step>
       </fake-lion-steps>
     `);
-    expect(/** @type {LionStep} */ (el.children[0]).condition()).to.equal(true);
-    expect(/** @type {LionStep} */ (el.children[0]).passesCondition()).to.equal(true);
+    expect(/** @type {LionStep} */ el.children[0].condition()).to.equal(true);
+    expect(/** @type {LionStep} */ el.children[0].passesCondition()).to.equal(true);
   });
-
   it('does not invert condition by default', async () => {
     const el = await fixture(html`
       <fake-lion-steps>
         <lion-step>Step 1</lion-step>
       </fake-lion-steps>
     `);
-    expect(/** @type {LionStep} */ (el.children[0]).invertCondition).to.equal(false);
-    expect(/** @type {LionStep} */ (el.children[0]).passesCondition()).to.equal(true);
+    expect(/** @type {LionStep} */ el.children[0].invertCondition).to.equal(false);
+    expect(/** @type {LionStep} */ el.children[0].passesCondition()).to.equal(true);
   });
-
   it('can invert its condition', async () => {
     const el = await fixture(html`
       <fake-lion-steps>
         <lion-step>Step 1</lion-step>
       </fake-lion-steps>
     `);
-    /** @type {LionStep} */ (el.children[0]).condition = () => true;
-    /** @type {LionStep} */ (el.children[0]).invertCondition = true;
-    expect(/** @type {LionStep} */ (el.children[0]).condition()).to.equal(true);
-    expect(/** @type {LionStep} */ (el.children[0]).passesCondition()).to.equal(false);
+    /** @type {LionStep} */
+    el.children[0].condition = () => true;
+    /** @type {LionStep} */
+    el.children[0].invertCondition = true;
+    expect(/** @type {LionStep} */ el.children[0].condition()).to.equal(true);
+    expect(/** @type {LionStep} */ el.children[0].passesCondition()).to.equal(false);
   });
-
   it('has "untouched" status by default', async () => {
     const el = await fixture(html`
       <fake-lion-steps>
         <lion-step>Step 1</lion-step>
       </fake-lion-steps>
     `);
-    expect(/** @type {LionStep} */ (el.children[0]).status).to.equal('untouched');
+    expect(/** @type {LionStep} */ el.children[0].status).to.equal('untouched');
   });
-
   it('is hidden when attribute hidden is true', async () => {
     const el = await fixture(html`
       <fake-lion-steps>
@@ -57,16 +54,14 @@ describe('lion-step', () => {
     `);
     expect(el.children[0]).not.to.be.displayed;
   });
-
   it('communicates with a parent steps controller to handles actions', async () => {
     const el = await fixture(html`
       <fake-lion-steps>
         <lion-step>Step 1</lion-step>
       </fake-lion-steps>
     `);
-    expect(/** @type {LionStep} */ (el.children[0]).controller).to.equal(el);
+    expect(/** @type {LionStep} */ el.children[0].controller).to.equal(el);
   });
-
   describe('navigation', () => {
     it('can be entered', async () => {
       const el = await fixture(html`
@@ -74,31 +69,29 @@ describe('lion-step', () => {
           <lion-step>Step 1</lion-step>
         </fake-lion-steps>
       `);
-      setTimeout(() => /** @type {LionStep} */ (el.children[0]).enter(), 0);
+      setTimeout(() => /** @type {LionStep} */ el.children[0].enter(), 0);
       await oneEvent(el.children[0], 'enter');
-      expect(/** @type {LionStep} */ (el.children[0]).status).to.equal('entered');
+      expect(/** @type {LionStep} */ el.children[0].status).to.equal('entered');
     });
-
     it('can be left', async () => {
       const el = await fixture(html`
         <fake-lion-steps>
           <lion-step>Step 1</lion-step>
         </fake-lion-steps>
       `);
-      setTimeout(() => /** @type {LionStep} */ (el.children[0]).leave(), 0);
+      setTimeout(() => /** @type {LionStep} */ el.children[0].leave(), 0);
       await oneEvent(el.children[0], 'leave');
-      expect(/** @type {LionStep} */ (el.children[0]).status).to.equal('left');
+      expect(/** @type {LionStep} */ el.children[0].status).to.equal('left');
     });
-
     it('can be skipped', async () => {
       const el = await fixture(html`
         <fake-lion-steps>
           <lion-step>Step 1</lion-step>
         </fake-lion-steps>
       `);
-      setTimeout(() => /** @type {LionStep} */ (el.children[0]).skip(), 0);
+      setTimeout(() => /** @type {LionStep} */ el.children[0].skip(), 0);
       await oneEvent(el.children[0], 'skip');
-      expect(/** @type {LionStep} */ (el.children[0]).status).to.equal('skipped');
+      expect(/** @type {LionStep} */ el.children[0].status).to.equal('skipped');
     });
   });
 });