@lion/ui 0.23.0 → 0.25.0

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

@@ -11,7 +11,7 @@ import '@lion/ui/define/lion-steps.js';
  * @typedef {{[key: string]: any}} UnknownData
  */
 
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionSteps>} */ (_fixture);
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionSteps>} */ _fixture;
 
 /**
  *
@@ -22,11 +22,11 @@ const fixture = /** @type {(arg: TemplateResult) => Promise<LionSteps>} */ (_fix
  * @returns {Promise<void>}
  */
 async function checkWorkflow(steps, expected) {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     /** @type {number[]} */
     const transitions = [];
-    steps.addEventListener('transition', event => {
-      const _event = /** @type {CustomEvent} */ (event);
+    steps.addEventListener('transition', (event) => {
+      const _event = /** @type {CustomEvent} */ event;
       if (!transitions.length) {
         transitions.push(_event.detail.fromStep.number);
       }
@@ -36,26 +36,23 @@ async function checkWorkflow(steps, expected) {
       // allow time for other transitions to happen if any
       const transitionsString = transitions.join(' => ');
       expect(transitionsString).to.equal(expected.transitions, 'transition flow is different');
-      const statusesString = /** @type {LionStep[]} */ (Array.from(steps.children))
-        .map(step => step.status)
+      const statusesString = /** @type {LionStep[]} */ Array.from(steps.children)
+        .map((step) => step.status)
         .join(' ');
       expect(statusesString).to.equal(expected.statuses, 'steps statuses are different');
       resolve();
     });
   });
 }
-
 describe('lion-steps', () => {
   it('can be instantiated', async () => {
     const el = await fixture(html`<lion-steps> </lion-steps>`);
     expect(el).to.be.a('HTMLElement');
   });
-
   it('is hidden when attribute hidden is true', async () => {
     const el = await fixture(html`<lion-steps hidden> </lion-steps>`);
     expect(el).not.to.be.displayed;
   });
-
   it('has "steps" getter that returns default slot elements', async () => {
     const el = await fixture(html`
       <lion-steps>
@@ -70,7 +67,6 @@ describe('lion-steps', () => {
     expect(el.steps[1].tagName).to.equal('LION-STEP');
     expect(el.steps[2].tagName).to.equal('OTHER-STEP-ELEMENT');
   });
-
   describe('initialization', () => {
     it('activates step with an "initial-step" attribute', async () => {
       const el = await fixture(html`
@@ -80,10 +76,9 @@ describe('lion-steps', () => {
         </lion-steps>
       `);
       expect(el.current).to.equal(0);
-      expect(/** @type {LionStep} */ (el.children[0]).status).to.equal('entered');
+      expect(/** @type {LionStep} */ el.children[0].status).to.equal('entered');
     });
   });
-
   describe('navigation', () => {
     it('can navigate to the next step', async () => {
       const el = await fixture(html`
@@ -92,9 +87,7 @@ describe('lion-steps', () => {
           <lion-step>Step 1</lion-step>
         </lion-steps>
       `);
-
       setTimeout(() => el.next());
-
       const { detail } = await oneEvent(el, 'transition');
       expect(detail.fromStep.number).to.equal(0);
       expect(detail.fromStep.element.innerHTML).to.equal('Step 0');
@@ -102,7 +95,6 @@ describe('lion-steps', () => {
       expect(detail.toStep.element.innerHTML).to.equal('Step 1');
       expect(el.current).to.equal(1);
     });
-
     it('can navigate to the previous step', async () => {
       const el = await fixture(html`
         <lion-steps>
@@ -110,9 +102,7 @@ describe('lion-steps', () => {
           <lion-step initial-step>Step 1</lion-step>
         </lion-steps>
       `);
-
       setTimeout(() => el.previous());
-
       const { detail } = await oneEvent(el, 'transition');
       expect(detail.fromStep.number).to.equal(1);
       expect(detail.fromStep.element.innerHTML).to.equal('Step 1');
@@ -120,7 +110,6 @@ describe('lion-steps', () => {
       expect(detail.toStep.element.innerHTML).to.equal('Step 0');
       expect(el.current).to.equal(0);
     });
-
     it('prevents navigating to the next step if user is on the last step', async () => {
       const el = await fixture(html`
         <lion-steps>
@@ -134,7 +123,6 @@ describe('lion-steps', () => {
       expect(cb.callCount).to.equal(0);
       expect(el.current).to.equal(1);
     });
-
     it('prevents navigating to the previous step if user is on the first step', async () => {
       const el = await fixture(html`
         <lion-steps>
@@ -148,35 +136,35 @@ describe('lion-steps', () => {
       expect(cb.callCount).to.equal(0);
       expect(el.current).to.equal(0);
     });
-
     it('can navigate to an arbitrary step skipping intermediate conditions', async () => {
       const el = await fixture(html`
-        <lion-steps .data=${{ age: 25 }}>
+        <lion-steps
+          .data=${{
+            age: 25,
+          }}
+        >
           <lion-step initial-step>Step 0</lion-step>
-          <lion-step .condition=${/** @param {UnknownData} data */ data => data.age < 18}
+          <lion-step .condition=${/** @param {UnknownData} data */ (data) => data.age < 18}
             >Step 1</lion-step
           >
           <lion-step>Step 2</lion-step>
-          <lion-step .condition=${/** @param {UnknownData} data */ data => data.age < 22}
+          <lion-step .condition=${/** @param {UnknownData} data */ (data) => data.age < 22}
             >Step 3</lion-step
           >
           <lion-step>Step 4</lion-step>
         </lion-steps>
       `);
-
       el.current = 2;
       await checkWorkflow(el, {
         transitions: '0 => 2',
         statuses: 'left untouched entered untouched untouched',
       });
-
       el.current = 3; // can't enter because of condition move to next available one
       await checkWorkflow(el, {
         transitions: '2 => 4',
         statuses: 'left untouched left skipped entered',
       });
     });
-
     it('throws an error if current step is set out of bounds', async () => {
       const el = await fixture(html`
         <lion-steps>
@@ -185,17 +173,15 @@ describe('lion-steps', () => {
           <lion-step>Step 2</lion-step>
         </lion-steps>
       `);
-
       expect(() => el._goTo(3, el.current)).to.throw(Error, 'There is no step at index 3.');
       expect(() => el._goTo(-1, el.current)).to.throw(Error, 'There is no step at index -1.');
     });
   });
-
   describe('events', () => {
     it('will fire lion-step @leave event before changing .current', async () => {
       let currentInLeaveEvent;
-      const onLeave = /** @param {Event} ev */ ev => {
-        currentInLeaveEvent = /** @type {LionStep} */ (ev.target).controller?.current;
+      const onLeave = /** @param {Event} ev */ (ev) => {
+        currentInLeaveEvent = /** @type {LionStep} */ ev.target.controller?.current;
       };
       const el = await fixture(html`
         <lion-steps>
@@ -207,11 +193,10 @@ describe('lion-steps', () => {
       el.next();
       expect(currentInLeaveEvent).to.equal(0);
     });
-
     it('will fire lion-step @enter event after changing .current', async () => {
       let currentInEnterEvent;
-      const onEnter = /** @param {Event} ev */ ev => {
-        currentInEnterEvent = /** @type {LionStep} */ (ev.target).controller?.current;
+      const onEnter = /** @param {Event} ev */ (ev) => {
+        currentInEnterEvent = /** @type {LionStep} */ ev.target.controller?.current;
       };
       const el = await fixture(html`
         <lion-steps>
@@ -223,7 +208,6 @@ describe('lion-steps', () => {
       el.next();
       expect(currentInEnterEvent).to.equal(1);
     });
-
     it('will fire initial @enter event on first step with or with [initial-step] attribute', async () => {
       const firstEnterSpy = sinon.spy();
       await fixture(html`
@@ -234,7 +218,6 @@ describe('lion-steps', () => {
         </lion-steps>
       `);
       expect(firstEnterSpy).to.have.been.calledOnce;
-
       const firstEnterSpyWithInitial = sinon.spy();
       await fixture(html`
         <lion-steps>
@@ -245,7 +228,6 @@ describe('lion-steps', () => {
       `);
       expect(firstEnterSpyWithInitial).to.have.been.calledOnce;
     });
-
     it('will fire initial @enter event only once if [initial-step] is not on first step', async () => {
       const firstEnterSpy = sinon.spy();
       const secondEnterSpy = sinon.spy();
@@ -263,106 +245,105 @@ describe('lion-steps', () => {
       expect(secondEnterSpy).to.have.been.calledOnce;
     });
   });
-
   describe('workflow with data and conditions', () => {
     it('navigates to the next step which passes the condition', async () => {
       const el = await fixture(html`
-        <lion-steps .data=${{ age: 25 }}>
+        <lion-steps
+          .data=${{
+            age: 25,
+          }}
+        >
           <lion-step initial-step>Step 0</lion-step>
-          <lion-step .condition=${/** @param {UnknownData} data */ data => data.age < 18}
+          <lion-step .condition=${/** @param {UnknownData} data */ (data) => data.age < 18}
             >Step 1</lion-step
           >
           <lion-step
-            .condition=${/** @param {UnknownData} data */ data => data.age >= 18 && data.age < 21}
+            .condition=${/** @param {UnknownData} data */ (data) => data.age >= 18 && data.age < 21}
             >Step 2</lion-step
           >
-          <lion-step .condition=${/** @param {UnknownData} data */ data => data.age >= 21}
+          <lion-step .condition=${/** @param {UnknownData} data */ (data) => data.age >= 21}
             >Step 3</lion-step
           >
           <lion-step>Step 4</lion-step>
         </lion-steps>
       `);
-
       setTimeout(() => el.next());
-
       await checkWorkflow(el, {
         transitions: '0 => 3',
         statuses: 'left skipped skipped entered untouched',
       });
     });
-
     it('skips steps with failing condition when navigating to the next step', async () => {
       const el = await fixture(html`
-        <lion-steps .data=${{ age: 19 }}>
+        <lion-steps
+          .data=${{
+            age: 19,
+          }}
+        >
           <lion-step initial-step>Step 0</lion-step>
-          <lion-step .condition=${/** @param {UnknownData} data */ data => data.age < 18}
+          <lion-step .condition=${/** @param {UnknownData} data */ (data) => data.age < 18}
             >Step 1</lion-step
           >
           <lion-step
-            .condition=${/** @param {UnknownData} data */ data => data.age >= 18 && data.age < 21}
+            .condition=${/** @param {UnknownData} data */ (data) => data.age >= 18 && data.age < 21}
             >Step 2</lion-step
           >
-          <lion-step .condition=${/** @param {UnknownData} data */ data => data.age >= 21}
+          <lion-step .condition=${/** @param {UnknownData} data */ (data) => data.age >= 21}
             >Step 3</lion-step
           >
           <lion-step>Step 4</lion-step>
         </lion-steps>
       `);
-
       el.next();
-
       setTimeout(() => el.next());
-
       await checkWorkflow(el, {
         transitions: '2 => 4',
         statuses: 'left skipped left skipped entered',
       });
     });
-
     it('skips steps with failing condition when navigating to the previous step', async () => {
       const el = await fixture(html`
-        <lion-steps .data=${{ age: 15 }}>
+        <lion-steps
+          .data=${{
+            age: 15,
+          }}
+        >
           <lion-step initial-step>Step 0</lion-step>
-          <lion-step .condition=${/** @param {UnknownData} data */ data => data.age < 18}
+          <lion-step .condition=${/** @param {UnknownData} data */ (data) => data.age < 18}
             >Step 1</lion-step
           >
           <lion-step
-            .condition=${/** @param {UnknownData} data */ data => data.age >= 18 && data.age < 21}
+            .condition=${/** @param {UnknownData} data */ (data) => data.age >= 18 && data.age < 21}
             >Step 2</lion-step
           >
-          <lion-step .condition=${/** @param {UnknownData} data */ data => data.age >= 21}
+          <lion-step .condition=${/** @param {UnknownData} data */ (data) => data.age >= 21}
             >Step 3</lion-step
           >
           <lion-step>Step 4</lion-step>
         </lion-steps>
       `);
-
       el.next();
       el.next();
-
       setTimeout(() => el.previous());
-
       await checkWorkflow(el, {
         transitions: '4 => 1',
         statuses: 'left entered skipped skipped left',
       });
     });
   });
-
   describe('workflow with inverted condition', () => {
     it('behaves like "if not" when inverted condition is present', async () => {
       const el = await fixture(html`
         <lion-steps .data=${{}}>
           <lion-step initial-step>Step 0</lion-step>
           <lion-step
-            .condition=${/** @param {UnknownData} data */ data => data.age < 18}
+            .condition=${/** @param {UnknownData} data */ (data) => data.age < 18}
             invert-condition
             >Step 1</lion-step
           >
           <lion-step>Step 2</lion-step>
         </lion-steps>
       `);
-
       setTimeout(() => {
         el.data.age = 15;
         el.next();
@@ -373,15 +354,13 @@ describe('lion-steps', () => {
         el.previous();
         el.previous();
       });
-
       await checkWorkflow(el, {
         transitions: '0 => 2 => 0 => 1 => 2 => 1 => 0',
         statuses: 'entered left left',
       });
     });
-
     it('behaves like "if/else" in case both condition and inverted condition are present', async () => {
-      const condition = /** @param {UnknownData} data */ data => data.age < 18;
+      const condition = /** @param {UnknownData} data */ (data) => data.age < 18;
       const el = await fixture(html`
         <lion-steps .data=${{}}>
           <lion-step initial-step>Step 0</lion-step>
@@ -389,7 +368,6 @@ describe('lion-steps', () => {
           <lion-step .condition=${condition} invert-condition>Step 2</lion-step>
         </lion-steps>
       `);
-
       setTimeout(() => {
         el.data.age = 15;
         el.next();
@@ -398,14 +376,12 @@ describe('lion-steps', () => {
         el.next();
         el.previous();
       });
-
       await checkWorkflow(el, {
         transitions: '0 => 1 => 0 => 2 => 0',
         statuses: 'entered skipped left',
       });
     });
   });
-
   describe('workflow with forward-only', () => {
     it('activates step when going forward', async () => {
       const el = await fixture(html`
@@ -415,18 +391,15 @@ describe('lion-steps', () => {
           <lion-step>Step 2</lion-step>
         </lion-steps>
       `);
-
       setTimeout(() => {
         el.next();
         el.next();
       });
-
       await checkWorkflow(el, {
         transitions: '0 => 1 => 2',
         statuses: 'left left entered',
       });
     });
-
     it('skips step when going back to prevent reevaluation of "service" steps', async () => {
       const el = await fixture(html`
         <lion-steps>
@@ -435,18 +408,14 @@ describe('lion-steps', () => {
           <lion-step>Step 2</lion-step>
         </lion-steps>
       `);
-
       el.next();
       el.next();
-
       setTimeout(() => el.previous());
-
       await checkWorkflow(el, {
         transitions: '2 => 0',
         statuses: 'entered left left',
       });
     });
-
     it('does not set "skipped" status when going back', async () => {
       const el = await fixture(html`
         <lion-steps>
@@ -455,12 +424,10 @@ describe('lion-steps', () => {
           <lion-step>Step 2</lion-step>
         </lion-steps>
       `);
-
       el.next();
       el.next();
       el.previous();
-
-      expect(/** @type {LionStep} */ (el.children[1]).status).to.equal('left');
+      expect(/** @type {LionStep} */ el.children[1].status).to.equal('left');
     });
   });
 });

package/components/switch/src/LionSwitch.js

@@ -21,7 +21,6 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
       `,
     ];
   }
-
   static get scopedElements() {
     return {
       // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
@@ -38,11 +37,10 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
    */
   // @ts-ignore [editor]: prevents vscode from complaining
   get _inputNode() {
-    return /** @type {LionSwitchButton} */ (
-      Array.from(this.children).find(el => el.slot === 'input')
+    return /** @type {LionSwitchButton} */ Array.from(this.children).find(
+      (el) => el.slot === 'input',
     );
   }
-
   get slots() {
     return {
       ...super.slots,
@@ -74,14 +72,12 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
   _groupTwoTemplate() {
     return html`${this._inputGroupTemplate()}`;
   }
-
   constructor() {
     super();
     this.checked = false;
     /** @private */
     this.__handleButtonSwitchCheckedChanged = this.__handleButtonSwitchCheckedChanged.bind(this);
   }
-
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged);
@@ -90,7 +86,6 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
     }
     this._syncButtonSwitch();
   }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this._inputNode) {

package/components/switch/src/LionSwitchButton.js

@@ -13,10 +13,13 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
         type: Boolean,
         reflect: true,
       },
-      readOnly: { type: Boolean, attribute: 'readonly', reflect: true },
+      readOnly: {
+        type: Boolean,
+        attribute: 'readonly',
+        reflect: true,
+      },
     };
   }
-
   static get styles() {
     return [
       css`
@@ -63,7 +66,6 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
       `,
     ];
   }
-
   render() {
     return html`
       <div class="btn">
@@ -78,7 +80,6 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
 
   /** @private */
   __handleKeyup;
-
   constructor() {
     super();
     // inputNode = this, which always requires a value prop
@@ -91,7 +92,6 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
     this.__handleKeydown = this._handleKeydown.bind(this);
     this.__handleKeyup = this._handleKeyup.bind(this);
   }
-
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'switch');
@@ -100,7 +100,6 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
     this.addEventListener('keydown', this.__handleKeydown);
     this.addEventListener('keyup', this.__handleKeyup);
   }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener('click', this._toggleChecked);