@lion/ui 0.23.0 → 0.24.0

package/components/overlays/test-suites/WithHoverInteraction.suite.js

@@ -12,200 +12,217 @@ import sinon from 'sinon';
 export function runWithHoverInteractionSuite({ tagString, invokerTagString, suffix = '' }) {
   const tag = unsafeStatic(tagString);
   const invokerTag = unsafeStatic(invokerTagString);
-
   describe(`inherited withHoverInteraction behavior (touch)${suffix}`, () => {
     /** @type {sinon.SinonFakeTimers} */
     let clock;
     /** @type {typeof window.matchMedia} */
     let originalMatchMedia;
-
     beforeEach(() => {
       clock = sinon.useFakeTimers();
       originalMatchMedia = window.matchMedia;
-      window.matchMedia = query =>
-        /** @type {MediaQueryList} */ ({
-          matches: query === '(hover: hover)' ? false : originalMatchMedia(query).matches,
-          media: query,
-          onchange: null,
-          addListener: () => {},
-          removeListener: () => {},
-          addEventListener: () => {},
-          removeEventListener: () => {},
-          dispatchEvent: () => false,
-        });
+      window.matchMedia = (query) => /** @type {MediaQueryList} */ ({
+        matches: query === '(hover: hover)' ? false : originalMatchMedia(query).matches,
+        media: query,
+        onchange: null,
+        addListener: () => {},
+        removeListener: () => {},
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        dispatchEvent: () => false,
+      });
     });
-
     afterEach(() => {
       window.matchMedia = originalMatchMedia;
       clock.restore();
     });
-
     it('opens after holding for longpressDuration (500ms)', async () => {
-      const el = /** @type {HoverInteractionEl} */ (
+      const el =
+        /** @type {HoverInteractionEl} */
         await fixture(html`
         <${tag}>
           <div slot="content">Tooltip content</div>
           <${invokerTag} slot="invoker">Invoker</${invokerTag}>
         </${tag}>
-      `)
-      );
-      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
-
+      `);
+      const invoker = /** @type {HTMLElement} */ el.querySelector('[slot="invoker"]');
       invoker.dispatchEvent(
-        new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+        new PointerEvent('pointerdown', {
+          pointerType: 'touch',
+          bubbles: true,
+        }),
       );
       clock.runAll();
       await Promise.resolve();
-
       expect(el._overlayCtrl.isShown).to.equal(true);
     });
-
     it('stays hidden on brief touch: pointerup cancels the timer', async () => {
-      const el = /** @type {HoverInteractionEl} */ (
+      const el =
+        /** @type {HoverInteractionEl} */
         await fixture(html`
         <${tag}>
           <div slot="content">Tooltip content</div>
           <${invokerTag} slot="invoker">Invoker</${invokerTag}>
         </${tag}>
-      `)
+      `);
+      const invoker = /** @type {HTMLElement} */ el.querySelector('[slot="invoker"]');
+      invoker.dispatchEvent(
+        new PointerEvent('pointerdown', {
+          pointerType: 'touch',
+          bubbles: true,
+        }),
       );
-      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
-
       invoker.dispatchEvent(
-        new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+        new PointerEvent('pointerup', {
+          pointerType: 'touch',
+          bubbles: true,
+        }),
       );
-      invoker.dispatchEvent(new PointerEvent('pointerup', { pointerType: 'touch', bubbles: true }));
       clock.tick(500);
       await el.updateComplete;
-
       expect(el._overlayCtrl.isShown).to.equal(false);
     });
-
     it('ignores non-touch pointer events (mouse)', async () => {
-      const el = /** @type {HoverInteractionEl} */ (
+      const el =
+        /** @type {HoverInteractionEl} */
         await fixture(html`
         <${tag}>
           <div slot="content">Tooltip content</div>
           <${invokerTag} slot="invoker">Invoker</${invokerTag}>
         </${tag}>
-      `)
-      );
-      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
-
+      `);
+      const invoker = /** @type {HTMLElement} */ el.querySelector('[slot="invoker"]');
       invoker.dispatchEvent(
-        new PointerEvent('pointerdown', { pointerType: 'mouse', bubbles: true }),
+        new PointerEvent('pointerdown', {
+          pointerType: 'mouse',
+          bubbles: true,
+        }),
       );
       clock.tick(500);
       await el.updateComplete;
-
       expect(el._overlayCtrl.isShown).to.equal(false);
     });
-
     it('auto-closes after longpressDuration once press ends', async () => {
-      const el = /** @type {HoverInteractionEl} */ (
+      const el =
+        /** @type {HoverInteractionEl} */
         await fixture(html`
         <${tag}>
           <div slot="content">Tooltip content</div>
           <${invokerTag} slot="invoker">Invoker</${invokerTag}>
         </${tag}>
-      `)
-      );
-      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
-
+      `);
+      const invoker = /** @type {HTMLElement} */ el.querySelector('[slot="invoker"]');
       invoker.dispatchEvent(
-        new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+        new PointerEvent('pointerdown', {
+          pointerType: 'touch',
+          bubbles: true,
+        }),
       );
       clock.runAll();
       await Promise.resolve();
       expect(el._overlayCtrl.isShown).to.equal(true);
-
-      invoker.dispatchEvent(new PointerEvent('pointerup', { pointerType: 'touch', bubbles: true }));
+      invoker.dispatchEvent(
+        new PointerEvent('pointerup', {
+          pointerType: 'touch',
+          bubbles: true,
+        }),
+      );
       await clock.tickAsync(501);
       expect(el._overlayCtrl.isShown).to.equal(false);
     });
-
     it('disables text selection on the invoker on init and restores it on teardown', async () => {
-      const el = /** @type {HoverInteractionEl} */ (
+      const el =
+        /** @type {HoverInteractionEl} */
         await fixture(html`
         <${tag}>
           <div slot="content">Tooltip content</div>
           <${invokerTag} slot="invoker">Invoker</${invokerTag}>
         </${tag}>
-      `)
-      );
-      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+      `);
+      const invoker = /** @type {HTMLElement} */ el.querySelector('[slot="invoker"]');
       const getUserSelect = () =>
         invoker.style.getPropertyValue('user-select') ||
         invoker.style.getPropertyValue('-webkit-user-select');
       expect(getUserSelect()).to.equal('none');
-
       el._overlayCtrl.teardown();
       expect(getUserSelect()).to.equal('');
     });
-
     it('does not open on tap-triggered focusin', async () => {
-      const el = /** @type {HoverInteractionEl} */ (
+      const el =
+        /** @type {HoverInteractionEl} */
         await fixture(html`
         <${tag}>
           <div slot="content">Tooltip content</div>
           <${invokerTag} slot="invoker">Invoker</${invokerTag}>
         </${tag}>
-      `)
+      `);
+      const invoker = /** @type {HTMLElement} */ el.querySelector('[slot="invoker"]');
+      invoker.dispatchEvent(
+        new Event('focusin', {
+          bubbles: true,
+        }),
       );
-      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
-
-      invoker.dispatchEvent(new Event('focusin', { bubbles: true }));
       clock.tick(300);
       await el.updateComplete;
-
       expect(el._overlayCtrl.isShown).to.equal(false);
     });
-
     it('suppresses focusin that immediately follows a touch pointerdown', async () => {
-      const el = /** @type {HoverInteractionEl} */ (
+      const el =
+        /** @type {HoverInteractionEl} */
         await fixture(html`
         <${tag}>
           <div slot="content">Tooltip content</div>
           <${invokerTag} slot="invoker">Invoker</${invokerTag}>
         </${tag}>
-      `)
+      `);
+      const invoker = /** @type {HTMLElement} */ el.querySelector('[slot="invoker"]');
+      invoker.dispatchEvent(
+        new PointerEvent('pointerdown', {
+          pointerType: 'touch',
+          bubbles: true,
+        }),
       );
-      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
-
       invoker.dispatchEvent(
-        new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+        new PointerEvent('pointerup', {
+          pointerType: 'touch',
+          bubbles: true,
+        }),
+      );
+      invoker.dispatchEvent(
+        new Event('focusin', {
+          bubbles: true,
+        }),
       );
-      invoker.dispatchEvent(new PointerEvent('pointerup', { pointerType: 'touch', bubbles: true }));
-      invoker.dispatchEvent(new Event('focusin', { bubbles: true }));
       clock.tick(1);
       await el.updateComplete;
-
       expect(el._overlayCtrl.isShown).to.equal(false);
     });
-
     it('suppresses click after completed longpress', async () => {
-      const el = /** @type {HoverInteractionEl} */ (
+      const el =
+        /** @type {HoverInteractionEl} */
         await fixture(html`
         <${tag}>
           <div slot="content">Tooltip content</div>
           <${invokerTag} slot="invoker">Invoker</${invokerTag}>
         </${tag}>
-      `)
-      );
-      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+      `);
+      const invoker = /** @type {HTMLElement} */ el.querySelector('[slot="invoker"]');
       let clickTriggered = false;
-
       invoker.addEventListener('click', () => {
         clickTriggered = true;
       });
-
       invoker.dispatchEvent(
-        new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+        new PointerEvent('pointerdown', {
+          pointerType: 'touch',
+          bubbles: true,
+        }),
       );
       clock.runAll();
       await Promise.resolve();
-
-      invoker.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      invoker.dispatchEvent(
+        new MouseEvent('click', {
+          bubbles: true,
+        }),
+      );
       expect(clickTriggered).to.equal(false);
     });
   });

package/components/overlays/translations/bg-BG.js

@@ -1,5 +1,4 @@
 import bg from './bg.js';
-
 export default {
   ...bg,
 };

package/components/overlays/translations/cs-CZ.js

@@ -1,5 +1,4 @@
 import cs from './cs.js';
-
 export default {
   ...cs,
 };

package/components/overlays/translations/de-DE.js

@@ -1,5 +1,4 @@
 import de from './de.js';
-
 export default {
   ...de,
 };

package/components/overlays/translations/en-AU.js

@@ -1,5 +1,4 @@
 import en from './en.js';
-
 export default {
   ...en,
 };

package/components/overlays/translations/en-GB.js

@@ -1,5 +1,4 @@
 import en from './en.js';
-
 export default {
   ...en,
 };

package/components/overlays/translations/en-US.js

@@ -1,5 +1,4 @@
 import en from './en.js';
-
 export default {
   ...en,
 };

package/components/overlays/translations/es-ES.js

@@ -1,5 +1,4 @@
 import es from './es.js';
-
 export default {
   ...es,
 };

package/components/overlays/translations/fr-BE.js

@@ -1,5 +1,4 @@
 import fr from './fr.js';
-
 export default {
   ...fr,
 };

package/components/overlays/translations/fr-FR.js

@@ -1,5 +1,4 @@
 import fr from './fr.js';
-
 export default {
   ...fr,
 };

package/components/overlays/translations/hu-HU.js

@@ -1,5 +1,4 @@
 import hu from './hu.js';
-
 export default {
   ...hu,
 };

package/components/overlays/translations/it-IT.js

@@ -1,5 +1,4 @@
 import it from './it.js';
-
 export default {
   ...it,
 };

package/components/overlays/translations/nl-BE.js

@@ -1,5 +1,4 @@
 import nl from './nl.js';
-
 export default {
   ...nl,
 };

package/components/overlays/translations/nl-NL.js

@@ -1,5 +1,4 @@
 import nl from './nl.js';
-
 export default {
   ...nl,
 };

package/components/overlays/translations/pl-PL.js

@@ -1,5 +1,4 @@
 import pl from './pl.js';
-
 export default {
   ...pl,
 };

package/components/overlays/translations/ro-RO.js

@@ -1,5 +1,4 @@
 import ro from './ro.js';
-
 export default {
   ...ro,
 };

package/components/overlays/translations/ru-RU.js

@@ -1,5 +1,4 @@
 import ru from './ru.js';
-
 export default {
   ...ru,
 };

package/components/overlays/translations/sk-SK.js

@@ -1,5 +1,4 @@
 import sk from './sk.js';
-
 export default {
   ...sk,
 };

package/components/overlays/translations/tr-TR.js

@@ -1,5 +1,4 @@
 import tr from './tr.js';
-
 export default {
   ...tr,
 };

package/components/overlays/translations/uk-UA.js

@@ -1,5 +1,4 @@
 import uk from './uk.js';
-
 export default {
   ...uk,
 };

package/components/pagination/src/LionPagination.js

@@ -35,11 +35,10 @@ export class LionPagination extends LocalizeMixin(LitElement) {
       `,
     ];
   }
-
   static get localizeNamespaces() {
     return [
       {
-        'lion-pagination': /** @param {string} locale */ locale => {
+        'lion-pagination': /** @param {string} locale */ (locale) => {
           switch (locale) {
             case 'bg-BG':
               return import('@lion/ui/pagination-translations/bg.js');
@@ -87,7 +86,6 @@ export class LionPagination extends LocalizeMixin(LitElement) {
       ...super.localizeNamespaces,
     ];
   }
-
   static get properties() {
     return {
       current: {
@@ -118,7 +116,6 @@ export class LionPagination extends LocalizeMixin(LitElement) {
 
   /** @private */
   __visiblePages;
-
   constructor() {
     super();
     this.__visiblePages = 5;
@@ -206,16 +203,16 @@ export class LionPagination extends LocalizeMixin(LitElement) {
       const pos5 = this.current + 1;
       //  if pos 3 is lower than 4 we have a predefined list of elements
       if (pos4 <= 4) {
-        const list = /** @type {(number|'...')[]} */ (
-          [...Array(this.__visiblePages)].map((_, idx) => start + idx)
-        );
+        const list =
+          /** @type {(number|'...')[]} */
+          [...Array(this.__visiblePages)].map((_, idx) => start + idx);
         list.push('...');
         list.push(this.count);
         return list;
       }
       //  if we are close to the end of the list with the current page then we have again a predefined list
       if (finish - pos4 <= 3) {
-        const list = /** @type {(number|'...')[]} */ ([]);
+        const list = /** @type {(number|'...')[]} */ [];
         list.push(1);
         list.push('...');
         const listRemaining = [...Array(this.__visiblePages)].map(
@@ -223,7 +220,6 @@ export class LionPagination extends LocalizeMixin(LitElement) {
         );
         return list.concat(listRemaining);
       }
-
       return [start, '...', pos3, pos4, pos5, '...', finish];
     }
     return [...Array(finish - start + 1)].map((_, idx) => start + idx);
@@ -284,13 +280,15 @@ export class LionPagination extends LocalizeMixin(LitElement) {
    * @protected
    */
   _renderNavList() {
-    return this.__calculateNavList().map(page =>
+    return this.__calculateNavList().map((page) =>
       page === '...'
         ? html` <li><span>${page}</span></li> `
         : html`
             <li>
               <button
-                aria-label="${this.msgLit('lion-pagination:page', { page })}"
+                aria-label="${this.msgLit('lion-pagination:page', {
+                  page,
+                })}"
                 aria-current=${page === this.current}
                 aria-live="${page === this.current ? 'polite' : 'off'}"
                 @click=${() => this.__fire(page)}
@@ -301,7 +299,6 @@ export class LionPagination extends LocalizeMixin(LitElement) {
           `,
     );
   }
-
   render() {
     return html`
       <nav role="navigation" aria-label="${this.msgLit('lion-pagination:label')}">