chore(ui): lint and types fixes

docs/components/collapsible/assets/CustomCollapsible.js

@@ -56,6 +56,8 @@ export class CustomCollapsible extends LionCollapsible {
     contentNode.style.setProperty('opacity', '1');
     contentNode.style.setProperty('padding', '12px 0');
     contentNode.style.setProperty('max-height', '0px');
+    // @ts-ignore
+    // eslint-disable-next-line no-promise-executor-return
     await new Promise(resolve => requestAnimationFrame(() => resolve()));
     contentNode.style.setProperty('max-height', expectedHeight);
     await this._waitForTransition({ contentNode });
@@ -105,6 +107,8 @@ export class CustomCollapsible extends LionCollapsible {
    */
   async __calculateHeight(contentNode) {
     contentNode.style.setProperty('max-height', '');
+    // @ts-ignore
+    // eslint-disable-next-line no-promise-executor-return
     await new Promise(resolve => requestAnimationFrame(() => resolve()));
     return this._contentHeight; // Expected height i.e. actual size once collapsed after animation
   }

docs/fundamentals/tools/singleton-manager/example-complex/overlayCompatibility.js

@@ -1,4 +1,4 @@
-import { OverlaysManager , OverlaysManager as OverlaysManager2 } from 'overlays';
+import { OverlaysManager, OverlaysManager as OverlaysManager2 } from 'overlays';
 import { singletonManager } from 'singleton-manager';
 
 let compatibleManager1;

packages/ajax/test/interceptors/cacheInterceptors.test.js

@@ -25,6 +25,7 @@ describe('cache interceptors', () => {
    */
   const returnResponseOnTick = (timeout, i) =>
     new Promise(resolve =>
+      // eslint-disable-next-line no-promise-executor-return
       window.setTimeout(() => resolve(new Response(`mock response ${i}`)), timeout),
     );
 

packages/ui/components/calendar/src/LionCalendar.js

@@ -815,7 +815,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     ) {
       this.__focusedDate = /** @type {HTMLButtonElement & { date: Date }} */ (
         this.shadowRoot?.activeElement
-      ).date;
+      )?.date;
     }
   }
 

packages/ui/components/calendar/test-helpers/DayObject.js

@@ -63,7 +63,7 @@ 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',
       ),
     );
@@ -73,7 +73,7 @@ export class DayObject {
 
   get weekdayNameLong() {
     const weekdayEls = Array.from(
-      /** @type {HTMLElement} */ (this.el.parentElement?.parentElement).querySelectorAll(
+      /** @type {HTMLElement} */ (this.el.parentElement?.parentElement)?.querySelectorAll(
         '.calendar__day-cell',
       ),
     );

packages/ui/components/drawer/src/LionDrawer.js

@@ -115,6 +115,7 @@ export class LionDrawer extends LionCollapsible {
     const prop = this.position === 'top' ? 'height' : 'width';
 
     contentNode.style.setProperty(prop, /** @type {string} */ (min));
+    // eslint-disable-next-line no-promise-executor-return
     await new Promise(resolve => requestAnimationFrame(() => resolve(true)));
     contentNode.style.setProperty(prop, /** @type {string} */ (max));
     await this._waitForTransition({ contentNode });

packages/ui/components/form-core/test-helpers/ExampleValidators.js

@@ -2,9 +2,7 @@
 import { Validator } from '@lion/ui/form-core.js';
 
 export class AlwaysInvalid extends Validator {
-  static get validatorName() {
+  static validatorName = 'AlwaysInvalid';
-    return 'AlwaysInvalid';
-  }
 
   execute() {
     const showMessage = true;

packages/ui/components/form-core/test-suites/FormRegistrationMixins.suite.js

@@ -165,6 +165,7 @@ export const runRegistrationSuite = customConfig => {
     it('works for components that have a delayed render', async () => {
       class PerformUpdate extends FormRegistrarMixin(LitElement) {
         async performUpdate() {
+          // eslint-disable-next-line no-promise-executor-return
           await new Promise(resolve => setTimeout(() => resolve(undefined), 10));
           await super.performUpdate();
         }
@@ -359,6 +360,7 @@ export const runRegistrationSuite = customConfig => {
         const delayedPortalString = defineCE(
           class extends FormRegistrarPortalMixin(LitElement) {
             async performUpdate() {
+              // eslint-disable-next-line no-promise-executor-return
               await new Promise(resolve => setTimeout(() => resolve(undefined), 10));
               await super.performUpdate();
             }

packages/ui/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.js

@@ -517,7 +517,11 @@ export function runValidateMixinFeedbackPart() {
             .submitted=${true}
             .validators=${[constructorValidator]}
             .modelValue=${'cat'}
-            .fieldName=${new Promise(resolve => resolve('myField'))}
+            .fieldName=${new Promise(
+              (
+                resolve, // eslint-disable-next-line no-promise-executor-return
+              ) => resolve('myField'),
+            )}
           >${lightDom}</${tag}>
         `)
         );
@@ -537,6 +541,7 @@ export function runValidateMixinFeedbackPart() {
 
       it('".getMessage()" gets .fieldName defined on Validator config', async () => {
         const constructorValidator = new MinLength(4, {
+          // eslint-disable-next-line no-promise-executor-return
           fieldName: new Promise(resolve => resolve('myFieldViaCfg')),
         });
         const ctorValidator = /** @type {typeof MinLength} */ (constructorValidator.constructor);
@@ -548,7 +553,11 @@ export function runValidateMixinFeedbackPart() {
             .submitted=${true}
             .validators=${[constructorValidator]}
             .modelValue=${'cat'}
-            .fieldName=${new Promise(resolve => resolve('myField'))}
+            .fieldName=${new Promise(
+              (
+                resolve, // eslint-disable-next-line no-promise-executor-return
+              ) => resolve('myField'),
+            )}
           >${lightDom}</${tag}>
         `)
         );

packages/ui/components/form-core/test/validate/StringValidators.test.js

@@ -124,7 +124,7 @@ describe('String Validation', () => {
     isEnabled = validator.execute('#LionRests');
     expect(isEnabled).to.be.true;
 
-    validator = new Pattern(new RegExp('#LionRocks'));
+    validator = new Pattern(/#LionRocks/);
     isEnabled = validator.execute('Some string #LionRocks');
     expect(isEnabled).to.be.false;
 

packages/ui/components/helpers/src/SbActionLogger.js

@@ -5,6 +5,7 @@ import { css, html, LitElement, render } from 'lit';
 export class SbActionLogger extends LitElement {
   static get properties() {
     return {
+      // eslint-disable-next-line lit/no-native-attributes
       title: { type: String, reflect: true },
       simple: { type: Boolean, reflect: true },
       __logCounter: { type: Number },

packages/ui/components/icon/src/LionIcon.js

@@ -57,14 +57,6 @@ export class LionIcon extends LitElement {
         type: String,
         attribute: 'icon-id',
       },
-      /**
-       * @private
-       */
-      role: {
-        type: String,
-        attribute: 'role',
-        reflect: true,
-      },
     };
   }
 
@@ -101,7 +93,6 @@ export class LionIcon extends LitElement {
 
   constructor() {
     super();
-    this.role = 'img';
     this.ariaLabel = '';
     this.iconId = '';
     /**
@@ -131,6 +122,7 @@ export class LionIcon extends LitElement {
     // ensures that aria-hidden is set if there is no aria-label attribute
     this._onLabelChanged();
     super.connectedCallback();
+    this.setAttribute('role', 'img');
   }
 
   /**

packages/ui/components/icon/test/lion-icon.test.js

@@ -185,10 +185,12 @@ describe('lion-icon', () => {
     try {
       icons.addIconResolver(
         'foo',
+        // eslint-disable-next-line no-promise-executor-return
         () => new Promise(resolve => setTimeout(() => resolve(heartSvg), 10)),
       );
       icons.addIconResolver(
         'bar',
+        // eslint-disable-next-line no-promise-executor-return
         () => new Promise(resolve => setTimeout(() => resolve(hammerSvg), 4)),
       );
       const el = await fixture(html`<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>`);

packages/ui/components/input-range/test/lion-input-range.test.js

@@ -19,10 +19,14 @@ describe('<lion-input-range>', () => {
       <lion-input-range .modelValue=${75} unit="${`%`}"></lion-input-range>
     `);
     expect(
-      /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.input-range__value')).innerText,
+      /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.input-range__value')
+      ).innerText,
     ).to.equal('75');
     expect(
-      /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.input-range__unit')).innerText,
+      /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.input-range__unit')
+      ).innerText,
     ).to.equal('%');
   });
 
@@ -30,12 +34,14 @@ describe('<lion-input-range>', () => {
     const el = await fixture(`<lion-input-range min="100" max="200"></lion-input-range>`);
     expect(el.shadowRoot?.querySelectorAll('.input-range__limits span').length).to.equal(2);
     expect(
-      /** @type {HTMLElement} */ (el.shadowRoot?.querySelectorAll('.input-range__limits span')[0])
+      /** @type {HTMLElement} */ (
-        .innerText,
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits span')[0]
+      ).innerText,
     ).to.equal(el.min.toString());
     expect(
-      /** @type {HTMLElement} */ (el.shadowRoot?.querySelectorAll('.input-range__limits span')[1])
+      /** @type {HTMLElement} */ (
-        .innerText,
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits span')[1]
+      ).innerText,
     ).to.equal(el.max.toString());
   });
 

packages/ui/components/listbox/src/LionOptions.js

@@ -7,10 +7,6 @@ import { FormRegistrarPortalMixin } from '@lion/ui/form-core.js';
 export class LionOptions extends FormRegistrarPortalMixin(LitElement) {
   static get properties() {
     return {
-      role: {
-        type: String,
-        reflect: true,
-      },
       tabIndex: {
         type: Number,
         reflect: true,
@@ -21,10 +17,14 @@ export class LionOptions extends FormRegistrarPortalMixin(LitElement) {
 
   constructor() {
     super();
-    this.role = 'listbox';
     this.tabIndex = 0;
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'listbox');
+  }
+
   createRenderRoot() {
     return this;
   }

packages/ui/components/localize/src/number/utils/normalize-format-number-to-parts/normalizeIntl.js

@@ -17,6 +17,7 @@ import { forceFRBESymbols, forceSymbols } from './forceSymbols.js';
  * @param {string} _locale
  * @returns {FormatNumberPart[]}
  */
+// eslint-disable-next-line default-param-last
 export function normalizeIntl(formattedParts, options = {}, _locale) {
   let normalize = forceNormalSpaces(formattedParts);
   // Dutch and Belgian currency must be moved to end of number

packages/ui/components/localize/test-helpers/fake-imports.js

@@ -56,5 +56,6 @@ export async function fakeImport(path, ms = 0) {
       setTimeout(() => resolveOrReject(result, resolve, reject), ms);
     });
   }
+  // eslint-disable-next-line no-promise-executor-return
   return new Promise((resolve, reject) => resolveOrReject(result, resolve, reject));
 }

packages/ui/components/select/test/lion-select.test.js

@@ -60,7 +60,7 @@ describe('lion-select', () => {
     expect(lionSelect.formattedValue).to.equal('');
 
     const select = /** @type {HTMLSlotElement} */ (
-      lionSelect.shadowRoot?.querySelector('slot[name=input]')
+      /** @type {ShadowRoot} */ (lionSelect.shadowRoot).querySelector('slot[name=input]')
     ).assignedElements()[0];
     const options = select.querySelectorAll('option');
     options[1].textContent = 'Item 2';

packages/ui/components/switch/src/LionSwitchButton.js

@@ -4,10 +4,6 @@ import { DisabledWithTabIndexMixin } from '@lion/ui/core.js';
 export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
   static get properties() {
     return {
-      role: {
-        type: String,
-        reflect: true,
-      },
       checked: {
         type: Boolean,
         reflect: true,
@@ -76,7 +72,6 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
     // inputNode = this, which always requires a value prop
     this.value = '';
 
-    this.role = 'switch';
     this.checked = false;
     this.__initialized = false;
     /** @protected */
@@ -89,6 +84,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
 
   connectedCallback() {
     super.connectedCallback();
+    this.setAttribute('role', 'switch');
     this.setAttribute('aria-checked', `${this.checked}`);
     this.addEventListener('click', this._toggleChecked);
     this.addEventListener('keydown', this.__handleKeydown);

packages/ui/components/tabs/src/LionTabs.js

@@ -345,6 +345,13 @@ export class LionTabs extends LitElement {
     }
   }
 
+  /**
+   * @return {number}
+   */
+  get selectedIndex() {
+    return this.__selectedIndex || 0;
+  }
+
   /**
    * @param {number} value The new index
    */
@@ -371,13 +378,6 @@ export class LionTabs extends LitElement {
     this.requestUpdate('selectedIndex', stale);
   }
 
-  /**
-   * @return {number}
-   */
-  get selectedIndex() {
-    return this.__selectedIndex || 0;
-  }
-
   /** @protected */
   get _pairCount() {
     return (this.__store && this.__store.length) || 0;

packages/ui/components/textarea/src/LionTextarea.js

@@ -198,7 +198,7 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {
     let count = 3; // max tasks to wait for
     // @ts-ignore this property is added by webcomponentsjs polyfill for old browsers
     while (count !== 0 && !this.__shady_native_contains(this._inputNode)) {
-      // eslint-disable-next-line no-await-in-loop
+      // eslint-disable-next-line no-await-in-loop, no-promise-executor-return
       await new Promise(resolve => setTimeout(resolve));
       count -= 1;
     }

packages/ui/docs/components/collapsible/assets/CustomCollapsible.js

@@ -1,115 +0,0 @@
-import { LionCollapsible } from '@lion/ui/collapsible.js';
-
-const EVENT = {
-  TRANSITION_END: 'transitionend',
-  TRANSITION_START: 'transitionstart',
-};
-/**
- * `CustomCollapsible` is a class for custom collapsible element (`<custom-collapsible>` web component).
- * @customElement custom-collapsible
- */
-// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
-export class CustomCollapsible extends LionCollapsible {
-  static get properties() {
-    return {
-      transitioning: {
-        type: Boolean,
-        reflect: true,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-    this.transitioning = false;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this._contentNode?.style.setProperty(
-      'transition',
-      'max-height 0.35s, padding 0.35s, opacity 0.35s',
-    );
-    if (this.opened) {
-      this._contentNode?.style.setProperty('padding', '12px 0');
-    }
-  }
-
-  /**
-   * Wait until transition is finished.
-   * @override
-   */
-  toggle() {
-    if (!this.transitioning) {
-      super.toggle();
-    }
-  }
-
-  /**
-   * Trigger show animation and wait for transition to be finished.
-   * @param {Object} options - element node and its options
-   * @param {HTMLElement} options.contentNode
-   * @override
-   */
-  async _showAnimation({ contentNode }) {
-    const expectedHeight = await this.__calculateHeight(contentNode);
-    contentNode.style.setProperty('opacity', '1');
-    contentNode.style.setProperty('padding', '12px 0');
-    contentNode.style.setProperty('max-height', '0px');
-    // eslint-disable-next-line no-promise-executor-return
-    await new Promise(resolve => requestAnimationFrame(() => resolve(undefined)));
-    contentNode.style.setProperty('max-height', expectedHeight);
-    await this._waitForTransition({ contentNode });
-  }
-
-  /**
-   * Trigger hide animation and wait for transition to be finished.
-   * @param {Object} options - element node and its options
-   * @param {HTMLElement} options.contentNode
-   * @override
-   */
-  async _hideAnimation({ contentNode }) {
-    if (this._contentHeight === '0px') {
-      return;
-    }
-    ['opacity', 'padding', 'max-height'].map(prop => contentNode.style.setProperty(prop, '0'));
-    await this._waitForTransition({ contentNode });
-  }
-
-  /**
-   *  Wait until the transition event is finished.
-   * @param {Object} options - element node and its options
-   * @param {HTMLElement} options.contentNode
-   * @returns {Promise<void>} transition event
-   */
-  _waitForTransition({ contentNode }) {
-    return new Promise(resolve => {
-      const transitionStarted = () => {
-        contentNode.removeEventListener(EVENT.TRANSITION_START, transitionStarted);
-        this.transitioning = true;
-      };
-      contentNode.addEventListener(EVENT.TRANSITION_START, transitionStarted);
-
-      const transitionEnded = () => {
-        contentNode.removeEventListener(EVENT.TRANSITION_END, transitionEnded);
-        this.transitioning = false;
-        resolve();
-      };
-      contentNode.addEventListener(EVENT.TRANSITION_END, transitionEnded);
-    });
-  }
-
-  /**
-   * Calculate total content height after collapsible opens
-   * @param {HTMLElement} contentNode content node
-   * @private
-   */
-  async __calculateHeight(contentNode) {
-    contentNode.style.setProperty('max-height', '');
-    // eslint-disable-next-line no-promise-executor-return
-    await new Promise(resolve => requestAnimationFrame(() => resolve(undefined)));
-    return this._contentHeight; // Expected height i.e. actual size once collapsed after animation
-  }
-}
-
-customElements.define('custom-collapsible', CustomCollapsible);