@lion/ui 0.23.0 → 0.24.0

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

@@ -15,19 +15,16 @@ describe('lion-tooltip', () => {
   describe('Integration tests', () => {
     const tagString = 'lion-tooltip';
     const tag = unsafeStatic(tagString);
-
     runOverlayMixinSuite({
       tagString,
       tag,
       suffix: ' for lion-tooltip',
     });
   });
-
   runWithHoverInteractionSuite({
     tagString: 'lion-tooltip',
     invokerTagString: 'button',
   });
-
   describe('Basic', () => {
     /** @type {sinon.SinonFakeTimers} */
     let clock;
@@ -37,16 +34,15 @@ describe('lion-tooltip', () => {
     afterEach(() => {
       clock.restore();
     });
-
     it('shows content on mouseenter and hide on mouseleave', async () => {
-      const el = /** @type {LionTooltip} */ (
+      const el =
+        /** @type {LionTooltip} */
         await fixture(html`
           <lion-tooltip>
             <div slot="content">Hey there</div>
             <button slot="invoker">Tooltip button</button>
           </lion-tooltip>
-        `)
-      );
+        `);
       const eventMouseEnter = new Event('mouseenter');
       // @ts-expect-error [allow-protected-in-tests]
       el._overlayInvokerNode.dispatchEvent(eventMouseEnter);
@@ -63,16 +59,15 @@ describe('lion-tooltip', () => {
       // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(false);
     });
-
     it('shows content on mouseenter and remain shown on focusout', async () => {
-      const el = /** @type {LionTooltip} */ (
+      const el =
+        /** @type {LionTooltip} */
         await fixture(html`
           <lion-tooltip>
             <div slot="content">Hey there</div>
             <button slot="invoker">Tooltip button</button>
           </lion-tooltip>
-        `)
-      );
+        `);
       const eventMouseEnter = new Event('mouseenter');
       // @ts-expect-error [allow-protected-in-tests]
       el._overlayInvokerNode.dispatchEvent(eventMouseEnter);
@@ -88,19 +83,18 @@ describe('lion-tooltip', () => {
       // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(true);
     });
-
     it('shows content on focusin and hide on focusout', async () => {
-      const el = /** @type {LionTooltip} */ (
+      const el =
+        /** @type {LionTooltip} */
         await fixture(html`
           <lion-tooltip>
             <div slot="content">Hey there</div>
             <button slot="invoker">Tooltip button</button>
           </lion-tooltip>
-        `)
-      );
-      const invoker = /** @type {HTMLElement} */ (
-        Array.from(el.children).find(child => child.slot === 'invoker')
-      );
+        `);
+      const invoker =
+        /** @type {HTMLElement} */
+        Array.from(el.children).find((child) => child.slot === 'invoker');
       const eventFocusIn = new Event('focusin');
       invoker.dispatchEvent(eventFocusIn);
       clock.tick(300);
@@ -115,19 +109,18 @@ describe('lion-tooltip', () => {
       // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(false);
     });
-
     it('shows content on focusin and remain shown on mouseleave', async () => {
-      const el = /** @type {LionTooltip} */ (
+      const el =
+        /** @type {LionTooltip} */
         await fixture(html`
           <lion-tooltip>
             <div slot="content">Hey there</div>
             <button slot="invoker">Tooltip button</button>
           </lion-tooltip>
-        `)
-      );
-      const invoker = /** @type {HTMLElement} */ (
-        Array.from(el.children).find(child => child.slot === 'invoker')
-      );
+        `);
+      const invoker =
+        /** @type {HTMLElement} */
+        Array.from(el.children).find((child) => child.slot === 'invoker');
       const eventFocusIn = new Event('focusin');
       invoker.dispatchEvent(eventFocusIn);
       clock.tick(300);
@@ -141,19 +134,18 @@ describe('lion-tooltip', () => {
       // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(true);
     });
-
     it('stays hidden on disabled invoker', async () => {
-      const el = /** @type {LionTooltip} */ (
+      const el =
+        /** @type {LionTooltip} */
         await fixture(html`
           <lion-tooltip>
             <div slot="content">Hey there</div>
             <button slot="invoker" disabled>Tooltip button</button>
           </lion-tooltip>
-        `)
-      );
-      const invoker = /** @type {HTMLElement} */ (
-        Array.from(el.children).find(child => child.slot === 'invoker')
-      );
+        `);
+      const invoker =
+        /** @type {HTMLElement} */
+        Array.from(el.children).find((child) => child.slot === 'invoker');
       const eventMouseEnter = new Event('mouseenter');
       el.dispatchEvent(eventMouseEnter);
       await el.updateComplete;
@@ -165,19 +157,18 @@ describe('lion-tooltip', () => {
       // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(false);
     });
-
     it('stays hidden on aria-disabled invoker', async () => {
-      const el = /** @type {LionTooltip} */ (
+      const el =
+        /** @type {LionTooltip} */
         await fixture(html`
           <lion-tooltip>
             <div slot="content">Hey there</div>
             <button slot="invoker" aria-disabled="true">Tooltip button</button>
           </lion-tooltip>
-        `)
-      );
-      const invoker = /** @type {HTMLElement} */ (
-        Array.from(el.children).find(child => child.slot === 'invoker')
-      );
+        `);
+      const invoker =
+        /** @type {HTMLElement} */
+        Array.from(el.children).find((child) => child.slot === 'invoker');
       const eventMouseEnter = new Event('mouseenter');
       el.dispatchEvent(eventMouseEnter);
       await el.updateComplete;
@@ -189,28 +180,25 @@ describe('lion-tooltip', () => {
       // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(false);
     });
-
     it('gets hidden when invoker gets disabled', async () => {
-      const el = /** @type {LionTooltip} */ (
+      const el =
+        /** @type {LionTooltip} */
         await fixture(html`
           <lion-tooltip>
             <div slot="content">Hey there</div>
             <button slot="invoker">Tooltip button</button>
           </lion-tooltip>
-        `)
-      );
-      const invoker = /** @type {HTMLButtonElement} */ (
-        Array.from(el.children).find(child => child.slot === 'invoker')
-      );
+        `);
+      const invoker =
+        /** @type {HTMLButtonElement} */
+        Array.from(el.children).find((child) => child.slot === 'invoker');
       const eventFocusIn = new Event('focusin');
       invoker.dispatchEvent(eventFocusIn);
       clock.tick(300);
       await el.updateComplete;
       // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(true);
-
       invoker.setAttribute('disabled', '');
-
       const eventFocusOut = new Event('focusout');
       invoker.dispatchEvent(eventFocusOut);
       clock.tick(300);
@@ -219,9 +207,9 @@ describe('lion-tooltip', () => {
       // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(false);
     });
-
     it('contains html when specified in tooltip content body', async () => {
-      const el = /** @type {LionTooltip} */ (
+      const el =
+        /** @type {LionTooltip} */
         await fixture(html`
           <lion-tooltip>
             <div slot="content">
@@ -229,18 +217,16 @@ describe('lion-tooltip', () => {
             </div>
             <button slot="invoker">Tooltip button</button>
           </lion-tooltip>
-        `)
-      );
-      const invoker = /** @type {HTMLElement} */ (
-        Array.from(el.children).find(child => child.slot === 'invoker')
-      );
+        `);
+      const invoker =
+        /** @type {HTMLElement} */
+        Array.from(el.children).find((child) => child.slot === 'invoker');
       const event = new Event('mouseenter');
       invoker.dispatchEvent(event);
       await el.updateComplete;
       expect(el.querySelector('strong')).to.not.be.undefined;
     });
   });
-
   describe('Arrow', () => {
     /** @type {sinon.SinonFakeTimers} */
     let clock;
@@ -250,9 +236,9 @@ describe('lion-tooltip', () => {
     afterEach(() => {
       clock.restore();
     });
-
     it('shows when "has-arrow" is configured', async () => {
-      const el = /** @type {LionTooltip} */ (
+      const el =
+        /** @type {LionTooltip} */
         await fixture(html`
           <lion-tooltip has-arrow>
             <div slot="content">
@@ -260,31 +246,28 @@ describe('lion-tooltip', () => {
             </div>
             <button slot="invoker">Tooltip button</button>
           </lion-tooltip>
-        `)
-      );
+        `);
       expect(el._arrowNode).to.be.displayed;
     });
-
     it('makes sure positioning of the arrow is correct', async () => {
-      const el = /** @type {LionTooltip} */ (
+      const el =
+        /** @type {LionTooltip} */
         await fixture(html`
           <lion-tooltip
             has-arrow
             .config="${
-              /** @type {OverlayConfig} */ ({
+              /** @type {OverlayConfig} */ {
                 popperConfig: {
                   placement: 'right',
                 },
-              })
+              }
             }"
             style="position: relative; top: 10px;"
           >
             <div slot="content" style="height: 30px; background-color: red;">Hey there</div>
             <button slot="invoker" style="height: 30px;">Tooltip button</button>
           </lion-tooltip>
-        `)
-      );
-
+        `);
       el.opened = true;
       clock.tick(300);
       await el.repositionComplete;
@@ -296,7 +279,7 @@ describe('lion-tooltip', () => {
       ); */
 
       expect(
-        getComputedStyle(/** @type {HTMLElement} */ (el._arrowNode)).getPropertyValue('left'),
+        getComputedStyle(/** @type {HTMLElement} */ el._arrowNode).getPropertyValue('left'),
       ).to.equal(
         '-10px',
         `arrow height is 8px so this offset should be taken into account to align the arrow properly,
@@ -305,31 +288,27 @@ describe('lion-tooltip', () => {
       );
     });
   });
-
   describe('Positioning', () => {
     it('updates popper positioning correctly, without overriding other modifiers', async () => {
-      const el = /** @type {LionTooltip} */ (
+      const el =
+        /** @type {LionTooltip} */
         await fixture(html`
           <lion-tooltip style="position: absolute; top: 100px" opened>
             <div slot="content">Hey there</div>
             <div slot="invoker">Tooltip button</div>
           </lion-tooltip>
-        `)
-      );
-
+        `);
       await aTimeout(0);
       // TODO: we are testing a protected property `_overlayCtrl` here, which is not ideal
       // @ts-ignore
       const initialPopperModifiers = el._overlayCtrl.config.popperConfig.modifiers;
       // @ts-ignore
       expect(el._overlayCtrl.config.popperConfig.placement).to.equal('top');
-
       el.config = {
         popperConfig: {
           placement: 'bottom',
         },
       };
-
       el.opened = false;
       el.opened = true;
       await aTimeout(0);
@@ -340,80 +319,74 @@ describe('lion-tooltip', () => {
       expect(el._overlayCtrl.config.popperConfig.placement).to.equal('bottom');
     });
   });
-
   describe('Accessibility', () => {
     it('should have a tooltip role set on the tooltip', async () => {
-      const el = /** @type {LionTooltip} */ (
+      const el =
+        /** @type {LionTooltip} */
         await fixture(html`
           <lion-tooltip>
             <div slot="content">Hey there</div>
             <button slot="invoker">Tooltip button</button>
           </lion-tooltip>
-        `)
-      );
+        `);
 
       // FIXME: This should be refactored to Array.from(this.children).find(child => child.slot === 'content').
       // When this issue is fixed https://github.com/ing-bank/lion/issues/382
-      const content = /** @type {HTMLElement} */ (el.querySelector('[slot=content]'));
+      const content = /** @type {HTMLElement} */ el.querySelector('[slot=content]');
       expect(content.getAttribute('role')).to.be.equal('tooltip');
     });
-
     it('should have aria-describedby role set on the invoker', async () => {
-      const el = /** @type {LionTooltip} */ (
+      const el =
+        /** @type {LionTooltip} */
         await fixture(html`
           <lion-tooltip>
             <div slot="content">Hey there</div>
             <button slot="invoker">Tooltip button</button>
           </lion-tooltip>
-        `)
-      );
-      const content = /** @type {HTMLElement} */ (el.querySelector('[slot=content]'));
-      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot=invoker]'));
+        `);
+      const content = /** @type {HTMLElement} */ el.querySelector('[slot=content]');
+      const invoker = /** @type {HTMLElement} */ el.querySelector('[slot=invoker]');
       expect(invoker.getAttribute('aria-describedby')).to.be.equal(content.id);
       expect(invoker.getAttribute('aria-labelledby')).to.be.equal(null);
     });
-
     it('should have aria-labelledby role set on the invoker when [ invoker-relation="label"]', async () => {
-      const el = /** @type {LionTooltip} */ (
+      const el =
+        /** @type {LionTooltip} */
         await fixture(html`
           <lion-tooltip invoker-relation="label">
             <div slot="content">Hey there</div>
             <button slot="invoker">Tooltip button</button>
           </lion-tooltip>
-        `)
-      );
-      const content = /** @type {HTMLElement} */ (el.querySelector('[slot=content]'));
-      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot=invoker]'));
+        `);
+      const content = /** @type {HTMLElement} */ el.querySelector('[slot=content]');
+      const invoker = /** @type {HTMLElement} */ el.querySelector('[slot=invoker]');
       expect(invoker.getAttribute('aria-describedby')).to.be.equal(null);
       expect(invoker.getAttribute('aria-labelledby')).to.be.equal(content.id);
     });
-
     it('should be accessible when closed', async () => {
-      const el = /** @type {LionTooltip} */ (
+      const el =
+        /** @type {LionTooltip} */
         await fixture(html`
           <lion-tooltip>
             <div slot="content">Hey there</div>
             <button slot="invoker">Tooltip button</button>
           </lion-tooltip>
-        `)
-      );
+        `);
       await expect(el).to.be.accessible;
     });
-
     it('should be accessible when opened', async () => {
-      const el = /** @type {LionTooltip} */ (
+      const el =
+        /** @type {LionTooltip} */
         await fixture(html`
           <lion-tooltip>
             <div slot="content">Hey there</div>
             <button slot="invoker">Tooltip button</button>
           </lion-tooltip>
-        `)
-      );
-      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+        `);
+      const invoker = /** @type {HTMLElement} */ el.querySelector('[slot="invoker"]');
       const eventFocusIn = new Event('focusin');
       invoker.dispatchEvent(eventFocusIn);
       await el.updateComplete;
-
       await expect(el).to.be.accessible;
     });
   });

package/components/validate-messages/src/getLocalizedMessage.js

@@ -9,7 +9,7 @@ let pendingPromise;
 /**
  * @param {string} string
  */
-const capitalize = string => (string && string[0].toUpperCase() + string.slice(1)) || '';
+const capitalize = (string) => (string && string[0].toUpperCase() + string.slice(1)) || '';
 
 /**
  * @param {{localize: LocalizeManager}} opts
@@ -18,10 +18,9 @@ export async function loadValidateNamespace({ localize }) {
   if (pendingPromise) {
     return pendingPromise;
   }
-
   pendingPromise = localize.loadNamespace(
     {
-      'lion-validate': /** @param {string} locale */ locale => {
+      'lion-validate': /** @param {string} locale */ (locale) => {
         switch (locale) {
           case 'bg-BG':
             return import('@lion/ui/validate-messages-translations/bg-BG.js');
@@ -101,9 +100,10 @@ export async function loadValidateNamespace({ localize }) {
         }
       },
     },
-    { locale: localize.locale },
+    {
+      locale: localize.locale,
+    },
   );
-
   return pendingPromise;
 }
 
@@ -112,14 +112,15 @@ export async function loadValidateNamespace({ localize }) {
  * @returns {Promise<string|Element>}
  */
 export const getLocalizedMessage = async ({ data, localize }) => {
-  await loadValidateNamespace({ localize });
+  await loadValidateNamespace({
+    localize,
+  });
   if (data) {
     const operationMode =
       data.formControl?.operationMode !== 'enter' && data.name === 'Required'
         ? capitalize(data.formControl?.operationMode)
         : undefined;
     const validatorName = operationMode ? `_${data.name}${operationMode}` : data.name;
-
     return localize.msg(`lion-validate:${data.type}.${validatorName}`, data);
   }
   return '';

package/components/validate-messages/src/loadDefaultFeedbackMessages.js

@@ -7,5 +7,7 @@ import { loadDefaultFeedbackMessagesNoSideEffects } from './loadDefaultFeedbackM
  */
 
 export function loadDefaultFeedbackMessages() {
-  return loadDefaultFeedbackMessagesNoSideEffects({ localize: getLocalizeManager() });
+  return loadDefaultFeedbackMessagesNoSideEffects({
+    localize: getLocalizeManager(),
+  });
 }

package/components/validate-messages/src/loadDefaultFeedbackMessagesNoSideEffects.js

@@ -18,10 +18,14 @@ export function loadDefaultFeedbackMessagesNoSideEffects({ localize }) {
   if (isLoaded === true) {
     return;
   }
-
-  loadComboboxMessagesNoSideEffects({ localize });
-  loadFormCoreMessagesNoSideEffects({ localize });
-  loadInputTelMessagesNoSideEffects({ localize });
-
+  loadComboboxMessagesNoSideEffects({
+    localize,
+  });
+  loadFormCoreMessagesNoSideEffects({
+    localize,
+  });
+  loadInputTelMessagesNoSideEffects({
+    localize,
+  });
   isLoaded = true;
 }

package/components/validate-messages/src/per-entrypoint/loadComboboxMessagesNoSideEffects.js

@@ -16,7 +16,10 @@ export function loadComboboxMessagesNoSideEffects({ localize }) {
   if (isLoaded === true) return;
 
   /** @param {FeedbackMessageData} data */
-  MatchesOption.getMessage = async data => getLocalizedMessage({ data, localize });
-
+  MatchesOption.getMessage = async (data) =>
+    getLocalizedMessage({
+      data,
+      localize,
+    });
   isLoaded = true;
 }

package/components/validate-messages/src/per-entrypoint/loadFormCoreMessagesNoSideEffects.js

@@ -34,44 +34,108 @@ export function loadFormCoreMessagesNoSideEffects({ localize }) {
   if (isLoaded === true) return;
 
   /** @param {FeedbackMessageData} data */
-  Required.getMessage = async data => getLocalizedMessage({ data, localize });
-  /** @param {FeedbackMessageData} data */
-  EqualsLength.getMessage = async data => getLocalizedMessage({ data, localize });
-  /** @param {FeedbackMessageData} data */
-  MinLength.getMessage = async data => getLocalizedMessage({ data, localize });
-  /** @param {FeedbackMessageData} data */
-  MaxLength.getMessage = async data => getLocalizedMessage({ data, localize });
-  /** @param {FeedbackMessageData} data */
-  MinMaxLength.getMessage = async data => getLocalizedMessage({ data, localize });
-  /** @param {FeedbackMessageData} data */
-  Pattern.getMessage = async data => getLocalizedMessage({ data, localize });
-  /** @param {FeedbackMessageData} data */
-  IsEmail.getMessage = async data => getLocalizedMessage({ data, localize });
-  /** @param {FeedbackMessageData} data */
-  IsNumber.getMessage = async data => getLocalizedMessage({ data, localize });
-  /** @param {FeedbackMessageData} data */
-  MinNumber.getMessage = async data => getLocalizedMessage({ data, localize });
-  /** @param {FeedbackMessageData} data */
-  MaxNumber.getMessage = async data => getLocalizedMessage({ data, localize });
-  /** @param {FeedbackMessageData} data */
-  MinMaxNumber.getMessage = async data => getLocalizedMessage({ data, localize });
-  /** @param {FeedbackMessageData} data */
-  IsDate.getMessage = async data => getLocalizedMessage({ data, localize });
-  /** @param {FeedbackMessageData} data */
-  MinDate.getMessage = async data => getLocalizedMessage({ data, localize });
-  /** @param {FeedbackMessageData} data */
-  MaxDate.getMessage = async data => getLocalizedMessage({ data, localize });
-  /** @param {FeedbackMessageData} data */
-  MinMaxDate.getMessage = async data => getLocalizedMessage({ data, localize });
-  /** @param {FeedbackMessageData} data */
-  IsDateDisabled.getMessage = async data => getLocalizedMessage({ data, localize });
-
-  DefaultSuccess.getMessage = async data => {
-    await loadValidateNamespace({ localize });
+  Required.getMessage = async (data) =>
+    getLocalizedMessage({
+      data,
+      localize,
+    });
+  /** @param {FeedbackMessageData} data */
+  EqualsLength.getMessage = async (data) =>
+    getLocalizedMessage({
+      data,
+      localize,
+    });
+  /** @param {FeedbackMessageData} data */
+  MinLength.getMessage = async (data) =>
+    getLocalizedMessage({
+      data,
+      localize,
+    });
+  /** @param {FeedbackMessageData} data */
+  MaxLength.getMessage = async (data) =>
+    getLocalizedMessage({
+      data,
+      localize,
+    });
+  /** @param {FeedbackMessageData} data */
+  MinMaxLength.getMessage = async (data) =>
+    getLocalizedMessage({
+      data,
+      localize,
+    });
+  /** @param {FeedbackMessageData} data */
+  Pattern.getMessage = async (data) =>
+    getLocalizedMessage({
+      data,
+      localize,
+    });
+  /** @param {FeedbackMessageData} data */
+  IsEmail.getMessage = async (data) =>
+    getLocalizedMessage({
+      data,
+      localize,
+    });
+  /** @param {FeedbackMessageData} data */
+  IsNumber.getMessage = async (data) =>
+    getLocalizedMessage({
+      data,
+      localize,
+    });
+  /** @param {FeedbackMessageData} data */
+  MinNumber.getMessage = async (data) =>
+    getLocalizedMessage({
+      data,
+      localize,
+    });
+  /** @param {FeedbackMessageData} data */
+  MaxNumber.getMessage = async (data) =>
+    getLocalizedMessage({
+      data,
+      localize,
+    });
+  /** @param {FeedbackMessageData} data */
+  MinMaxNumber.getMessage = async (data) =>
+    getLocalizedMessage({
+      data,
+      localize,
+    });
+  /** @param {FeedbackMessageData} data */
+  IsDate.getMessage = async (data) =>
+    getLocalizedMessage({
+      data,
+      localize,
+    });
+  /** @param {FeedbackMessageData} data */
+  MinDate.getMessage = async (data) =>
+    getLocalizedMessage({
+      data,
+      localize,
+    });
+  /** @param {FeedbackMessageData} data */
+  MaxDate.getMessage = async (data) =>
+    getLocalizedMessage({
+      data,
+      localize,
+    });
+  /** @param {FeedbackMessageData} data */
+  MinMaxDate.getMessage = async (data) =>
+    getLocalizedMessage({
+      data,
+      localize,
+    });
+  /** @param {FeedbackMessageData} data */
+  IsDateDisabled.getMessage = async (data) =>
+    getLocalizedMessage({
+      data,
+      localize,
+    });
+  DefaultSuccess.getMessage = async (data) => {
+    await loadValidateNamespace({
+      localize,
+    });
     const randomKeys = localize.msg('lion-validate:success.RandomOk').split(',');
     const key = randomKeys[Math.floor(Math.random() * randomKeys.length)].trim();
     return localize.msg(`lion-validate:${key}`, data);
   };
-
   isLoaded = true;
 }