@lion/ui 0.23.0 → 0.24.0

package/components/calendar/test-helpers/DayObject.js

@@ -20,11 +20,9 @@ export class DayObject {
     return this.el.parentNode?.parentNode?.parentNode?.parentNode?.parentNode?.parentNode
       ?.parentNode;
   }
-
   get cellEl() {
-    return /** @type {HTMLElement} */ (this.el.parentElement);
+    return /** @type {HTMLElement} */ this.el.parentElement;
   }
-
   get buttonEl() {
     return this.el;
   }
@@ -36,23 +34,18 @@ export class DayObject {
   get isDisabled() {
     return this.buttonEl.getAttribute('aria-disabled') === 'true';
   }
-
   get isSelected() {
     return this.buttonEl.hasAttribute('selected');
   }
-
   get isToday() {
     return this.buttonEl.hasAttribute('today');
   }
-
   get isCentral() {
     return this.buttonEl.getAttribute('tabindex') === '0';
   }
-
   get isFocused() {
-    return /** @type {ShadowRoot} */ (this.calendarShadowRoot).activeElement === this.buttonEl;
+    return /** @type {ShadowRoot} */ this.calendarShadowRoot.activeElement === this.buttonEl;
   }
-
   get monthday() {
     return Number(this.buttonEl.children[0].textContent);
   }
@@ -63,21 +56,20 @@ export class DayObject {
 
   get weekdayNameShort() {
     const weekdayEls = Array.from(
-      /** @type {HTMLElement} */ (this.el.parentElement?.parentElement)?.querySelectorAll(
+      /** @type {HTMLElement} */ this.el.parentElement?.parentElement?.querySelectorAll(
         '.calendar__day-cell',
       ),
     );
-    const dayIndex = weekdayEls.indexOf(/** @type {HTMLElement} */ (this.el.parentElement));
+    const dayIndex = weekdayEls.indexOf(/** @type {HTMLElement} */ this.el.parentElement);
     return weekdayNames['en-GB'].Sunday.short[dayIndex];
   }
-
   get weekdayNameLong() {
     const weekdayEls = Array.from(
-      /** @type {HTMLElement} */ (this.el.parentElement?.parentElement)?.querySelectorAll(
+      /** @type {HTMLElement} */ this.el.parentElement?.parentElement?.querySelectorAll(
         '.calendar__day-cell',
       ),
     );
-    const dayIndex = weekdayEls.indexOf(/** @type {HTMLElement} */ (this.el.parentElement));
+    const dayIndex = weekdayEls.indexOf(/** @type {HTMLElement} */ this.el.parentElement);
     return weekdayNames['en-GB'].Sunday.long[dayIndex];
   }
 
@@ -85,7 +77,7 @@ export class DayObject {
    * Other
    */
   get cellIndex() {
-    return Array.from(/** @type {HTMLElement} */ (this.cellEl.parentElement).children).indexOf(
+    return Array.from(/** @type {HTMLElement} */ this.cellEl.parentElement.children).indexOf(
       this.cellEl,
     );
   }

package/components/calendar/test-suites/LionCalendar.suite.js

@@ -3,11 +3,9 @@ import { expect, html, fixture, waitUntil, unsafeStatic, defineCE } from '@open-
 import sinon from 'sinon';
 import '@lion/ui/define/lion-calendar.js';
 import { sendKeys } from '@web/test-runner-commands';
-
 export function runCalendarSuite({ klass = LionCalendar } = {}) {
   const tagStringCalendar = defineCE(class extends klass {});
   const tagCalendar = unsafeStatic(tagStringCalendar);
-
   it('should fire keyboard press events on keyup and not on keydown', async () => {
     /**
      * This test covers a corner case where `keydown`, `keyup`, and `focus` events happen across different elements.
@@ -39,7 +37,6 @@ export function runCalendarSuite({ klass = LionCalendar } = {}) {
     const getDialogEl = () => el.querySelector('dialog');
     const openDialogButtonClickHandler = () => getDialogEl()?.showModal();
     const userSelectedDateChangedHandler = () => getDialogEl()?.close();
-
     el = await fixture(html`
       <div>
         <button 
@@ -57,11 +54,9 @@ export function runCalendarSuite({ klass = LionCalendar } = {}) {
         </dialog>
       </div>
     `);
-
     const openDialogButton = el.querySelector('button');
-    const calendarEl = /** @type {LionCalendar} */ (el.querySelector(tagStringCalendar));
+    const calendarEl = /** @type {LionCalendar} */ el.querySelector(tagStringCalendar);
     await calendarEl?.updateComplete;
-
     openDialogButton?.focus();
     openDialogButton?.click();
     /**
@@ -71,9 +66,12 @@ export function runCalendarSuite({ klass = LionCalendar } = {}) {
       calendarEl?.shadowRoot?.querySelector('.calendar__day-button[selected]');
     await waitUntil(getSelectedDateEl);
     getSelectedDateEl()?.focus();
-    await sendKeys({ press: 'ArrowLeft' });
-    await sendKeys({ press: 'Enter' });
-
+    await sendKeys({
+      press: 'ArrowLeft',
+    });
+    await sendKeys({
+      press: 'Enter',
+    });
     expect(keyUpSpy.called).to.equal(false);
   });
 }

package/components/checkbox-group/src/LionCheckboxIndeterminate.js

@@ -45,20 +45,18 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
    * @protected
    */
   get _checkboxGroupNode() {
-    return /** @type LionCheckboxGroup */ (this._parentFormGroup);
+    return /** @type LionCheckboxGroup */ this._parentFormGroup;
   }
 
   /**
    * @protected
    */
   get _subCheckboxes() {
-    return /** @type LionCheckbox[] */ (this.__subCheckboxes);
+    return /** @type LionCheckbox[] */ this.__subCheckboxes;
   }
-
   _storeIndeterminateState() {
-    this._indeterminateSubStates = this._subCheckboxes.map(checkbox => checkbox.checked);
+    this._indeterminateSubStates = this._subCheckboxes.map((checkbox) => checkbox.checked);
   }
-
   _setOldState() {
     if (this.indeterminate) {
       this._oldState = 'indeterminate';
@@ -75,10 +73,8 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
     if (!subCheckboxes.length) {
       return;
     }
-
     this.__settingOwnChecked = true;
-    const checkedElements = subCheckboxes.filter(checkbox => checkbox.checked);
-
+    const checkedElements = subCheckboxes.filter((checkbox) => checkbox.checked);
     switch (subCheckboxes.length - checkedElements.length) {
       // all checked
       case 0:
@@ -93,7 +89,7 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
       default: {
         this.indeterminate = true;
         const disabledUncheckedElements = subCheckboxes.filter(
-          checkbox => checkbox.disabled && checkbox.checked === false,
+          (checkbox) => checkbox.disabled && checkbox.checked === false,
         );
         this.checked =
           subCheckboxes.length - checkedElements.length - disabledUncheckedElements.length === 0;
@@ -103,7 +99,6 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
       this.__settingOwnChecked = false;
     });
   }
-
   _setBasedOnMixedState() {
     switch (this._oldState) {
       case 'checked':
@@ -133,31 +128,27 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
     if (this.disabled) {
       return;
     }
-    const _ev = /** @type {CustomEvent} */ (ev);
+    const _ev = /** @type {CustomEvent} */ ev;
 
     // If the model value change event is coming from out own _inputNode
     // and we're not already setting our own (mixed) state programmatically
     if (_ev.detail.formPath[0] === this && !this.__settingOwnChecked) {
-      const allEqual = (/** @type {any[]} */ arr) => arr.every(val => val === arr[0]);
+      const allEqual = (/** @type {any[]} */ arr) => arr.every((val) => val === arr[0]);
       // If our child checkboxes states are all the same, we shouldn't be able to reach indeterminate (mixed) state
       if (this.mixedState && !allEqual(this._indeterminateSubStates)) {
         this._setBasedOnMixedState();
       }
-
       this.__settingOwnSubs = true;
-
       const subCheckboxes = this._subCheckboxes;
-      const checkedElements = subCheckboxes.filter(checkbox => checkbox.checked);
-      const disabledElements = subCheckboxes.filter(checkbox => checkbox.disabled);
+      const checkedElements = subCheckboxes.filter((checkbox) => checkbox.checked);
+      const disabledElements = subCheckboxes.filter((checkbox) => checkbox.disabled);
       const allChecked =
         subCheckboxes.length > 0 && subCheckboxes.length === checkedElements.length;
       const allDisabled =
         subCheckboxes.length > 0 && subCheckboxes.length === disabledElements.length;
-
       if (allDisabled) {
         this.checked = allChecked;
       }
-
       if (this.indeterminate && this.mixedState) {
         this._subCheckboxes.forEach((checkbox, i) => {
           // eslint-disable-next-line no-param-reassign
@@ -165,8 +156,8 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
         });
       } else {
         this._subCheckboxes
-          .filter(checkbox => !checkbox.disabled)
-          .forEach(checkbox => {
+          .filter((checkbox) => !checkbox.disabled)
+          .forEach((checkbox) => {
             // eslint-disable-next-line no-param-reassign
             checkbox.checked = this._inputNode.checked;
           });
@@ -182,7 +173,6 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
         }
       });
     }
-
     if (this.mixedState) {
       this._setOldState();
     }
@@ -205,10 +195,10 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
    * @protected
    */
   _onRequestToAddFormElement(ev) {
-    if (!(/** @type {HTMLElement} */ (ev.target).hasAttribute('role'))) {
-      /** @type {HTMLElement} */ (ev.target)?.setAttribute('role', 'listitem');
+    if (!(/** @type {HTMLElement} */ ev.target.hasAttribute('role'))) {
+      /** @type {HTMLElement} */ ev.target?.setAttribute('role', 'listitem');
     }
-    this.__addToSubCheckboxes(/** @type {CustomEvent} */ (ev).detail.element);
+    this.__addToSubCheckboxes(/** @type {CustomEvent} */ ev.detail.element);
     this._setOwnCheckedState();
   }
 
@@ -218,10 +208,10 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
    */
   // eslint-disable-next-line class-methods-use-this
   _onRequestToRemoveFormElement(ev) {
-    if (/** @type {HTMLElement} */ (ev.target).getAttribute('role') === 'listitem') {
-      /** @type {HTMLElement} */ (ev.target)?.removeAttribute('role');
+    if (/** @type {HTMLElement} */ ev.target.getAttribute('role') === 'listitem') {
+      /** @type {HTMLElement} */ ev.target?.removeAttribute('role');
     }
-    this.__removeFromSubCheckboxes(/** @type {CustomEvent} */ (ev).detail.element);
+    this.__removeFromSubCheckboxes(/** @type {CustomEvent} */ ev.detail.element);
   }
 
   /**
@@ -242,7 +232,6 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
       this.__subCheckboxes.splice(index, 1);
     }
   }
-
   constructor() {
     super();
     this.indeterminate = false;
@@ -254,13 +243,11 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
     this._indeterminateSubStates = [];
     this.mixedState = false;
   }
-
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener('model-value-changed', this.__onModelValueChanged);
     this.addEventListener('form-element-register', this._onRequestToAddFormElement);
   }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener('model-value-changed', this.__onModelValueChanged);

package/components/checkbox-group/test/lion-checkbox-group-integrations.test.js

@@ -1,6 +1,5 @@
 import { runChoiceGroupMixinSuite } from '@lion/ui/form-core-test-suites.js';
 import '@lion/ui/define/lion-checkbox-group.js';
-
 runChoiceGroupMixinSuite({
   parentTagString: 'lion-checkbox-group',
   childTagString: 'lion-checkbox',

package/components/checkbox-group/test/lion-checkbox-group.test.js

@@ -9,12 +9,10 @@ import '@lion/ui/define/lion-checkbox-group.js';
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
 
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionCheckboxGroup>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionCheckboxGroup>} */ _fixture;
 beforeEach(() => {
   localizeTearDown();
 });
-
 describe('<lion-checkbox-group>', () => {
   describe('resetGroup', () => {
     // TODO move to FormGroupMixin test suite and let CheckboxGroup make use of them
@@ -25,42 +23,42 @@ describe('<lion-checkbox-group>', () => {
           <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
           <lion-checkbox
             label="Marie Curie"
-            .modelValue=${{ value: 'Marie Curie', checked: false }}
+            .modelValue=${{
+              value: 'Marie Curie',
+              checked: false,
+            }}
           ></lion-checkbox>
         </lion-checkbox-group>
       `);
       el.formElements[0].checked = true;
       expect(el.modelValue).to.deep.equal(['Archimedes']);
-
       el.resetGroup();
       expect(el.modelValue).to.deep.equal([]);
     });
-
     it('restores default values of arrays if changes were made', async () => {
       const el = await fixture(html`
         <lion-checkbox-group name="scientists[]" label="Favorite scientists">
           <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
           <lion-checkbox
             label="Francis Bacon"
-            .modelValue=${{ value: 'Francis Bacon', checked: true }}
+            .modelValue=${{
+              value: 'Francis Bacon',
+              checked: true,
+            }}
           ></lion-checkbox>
           <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
         </lion-checkbox-group>
       `);
       el.formElements[0].checked = true;
       expect(el.modelValue).to.deep.equal(['Archimedes', 'Francis Bacon']);
-
       el.resetGroup();
       expect(el.modelValue).to.deep.equal(['Francis Bacon']);
-
       el.formElements[2].checked = true;
       expect(el.modelValue).to.deep.equal(['Francis Bacon', 'Marie Curie']);
-
       el.resetGroup();
       expect(el.modelValue).to.deep.equal(['Francis Bacon']);
     });
   });
-
   it('is accessible', async () => {
     const el = await fixture(html`
       <lion-checkbox-group name="scientists[]" label="Who are your favorite scientists?">
@@ -68,13 +66,15 @@ describe('<lion-checkbox-group>', () => {
         <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
         <lion-checkbox
           label="Marie Curie"
-          .modelValue=${{ value: 'Marie Curie', checked: false }}
+          .modelValue=${{
+            value: 'Marie Curie',
+            checked: false,
+          }}
         ></lion-checkbox>
       </lion-checkbox-group>
     `);
     await expect(el).to.be.accessible();
   });
-
   it('is accessible when pre-selected', async () => {
     const el = await fixture(html`
       <lion-checkbox-group name="scientists[]" label="Who are your favorite scientists?">
@@ -86,13 +86,15 @@ describe('<lion-checkbox-group>', () => {
         ></lion-checkbox>
         <lion-checkbox
           label="Marie Curie"
-          .modelValue=${{ value: 'Marie Curie', checked: true }}
+          .modelValue=${{
+            value: 'Marie Curie',
+            checked: true,
+          }}
         ></lion-checkbox>
       </lion-checkbox-group>
     `);
     await expect(el).to.be.accessible();
   });
-
   it('is accessible when disabled', async () => {
     const el = await fixture(html`
       <lion-checkbox-group name="scientists[]" label="Who are your favorite scientists?" disabled>
@@ -100,7 +102,10 @@ describe('<lion-checkbox-group>', () => {
         <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
         <lion-checkbox
           label="Marie Curie"
-          .modelValue=${{ value: 'Marie Curie', checked: true }}
+          .modelValue=${{
+            value: 'Marie Curie',
+            checked: true,
+          }}
         ></lion-checkbox>
       </lion-checkbox-group>
     `);

package/components/checkbox-group/test/lion-checkbox-indeterminate-integrations.test.js

@@ -1,11 +1,11 @@
 import '@lion/ui/define/lion-checkbox-indeterminate.js';
 import '@lion/ui/define/lion-checkbox-group.js';
 import '@lion/ui/define/lion-checkbox.js';
-
 import { runChoiceInputMixinSuite } from '@lion/ui/form-core-test-suites.js';
 import { runCheckboxIndeterminateSuite } from '../test-suites/CheckboxIndeterminate.suite.js';
-
-runChoiceInputMixinSuite({ tagString: 'lion-checkbox-indeterminate' });
+runChoiceInputMixinSuite({
+  tagString: 'lion-checkbox-indeterminate',
+});
 runCheckboxIndeterminateSuite({
   tagString: 'lion-checkbox-indeterminate',
   groupTagString: 'lion-checkbox-group',

package/components/checkbox-group/test/lion-checkbox-integrations.test.js

@@ -1,4 +1,5 @@
 import '@lion/ui/define/lion-checkbox.js';
 import { runChoiceInputMixinSuite } from '@lion/ui/form-core-test-suites.js';
-
-runChoiceInputMixinSuite({ tagString: 'lion-checkbox' });
+runChoiceInputMixinSuite({
+  tagString: 'lion-checkbox',
+});

package/components/checkbox-group/test/lion-checkbox.test.js

@@ -13,30 +13,44 @@ describe('<lion-checkbox>', () => {
     `);
     expect(el.getAttribute('type')).to.equal('checkbox');
   });
-
   it('can be reset when unchecked by default', async () => {
-    const el = /**  @type {LionCheckbox} */ (
-      await fixture(html` <lion-checkbox name="checkbox" .choiceValue=${'male'}></lion-checkbox> `)
-    );
-    expect(el._initialModelValue).to.deep.equal({ value: 'male', checked: false });
+    const el =
+      /**  @type {LionCheckbox} */
+      await fixture(html` <lion-checkbox name="checkbox" .choiceValue=${'male'}></lion-checkbox> `);
+    expect(el._initialModelValue).to.deep.equal({
+      value: 'male',
+      checked: false,
+    });
     el.checked = true;
-    expect(el.modelValue).to.deep.equal({ value: 'male', checked: true });
-
+    expect(el.modelValue).to.deep.equal({
+      value: 'male',
+      checked: true,
+    });
     el.reset();
-    expect(el.modelValue).to.deep.equal({ value: 'male', checked: false });
+    expect(el.modelValue).to.deep.equal({
+      value: 'male',
+      checked: false,
+    });
   });
-
   it('can be reset when checked by default', async () => {
-    const el = /**  @type {LionCheckbox} */ (
+    const el =
+      /**  @type {LionCheckbox} */
       await fixture(html`
         <lion-checkbox name="checkbox" .choiceValue=${'male'} checked></lion-checkbox>
-      `)
-    );
-    expect(el._initialModelValue).to.deep.equal({ value: 'male', checked: true });
+      `);
+    expect(el._initialModelValue).to.deep.equal({
+      value: 'male',
+      checked: true,
+    });
     el.checked = false;
-    expect(el.modelValue).to.deep.equal({ value: 'male', checked: false });
-
+    expect(el.modelValue).to.deep.equal({
+      value: 'male',
+      checked: false,
+    });
     el.reset();
-    expect(el.modelValue).to.deep.equal({ value: 'male', checked: true });
+    expect(el.modelValue).to.deep.equal({
+      value: 'male',
+      checked: true,
+    });
   });
 });