@lion/ui 0.0.9 → 0.0.11

package/components/input-datepicker/src/localizeNamespaceLoader.js

@@ -0,0 +1,188 @@
+/**
+ * @param {Promise<{default:object}>[]} importPromises
+ */
+async function combineLocalizeImports(importPromises) {
+  const localizeObjects = await Promise.all(importPromises);
+  const combinedResult = localizeObjects[0];
+  for (const localizeObject of localizeObjects.slice(1)) {
+    Object.entries(localizeObject.default).forEach(([key, val]) => {
+      combinedResult.default[key] = val;
+    });
+  }
+  return combinedResult;
+}
+
+export const localizeNamespaceLoader = /** @param {string} locale */ locale => {
+  switch (locale) {
+    case 'bg-BG':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/bg-BG.js'),
+        import('@lion/ui/input-datepicker-translations/bg-BG.js'),
+      ]);
+    case 'bg':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/bg.js'),
+        import('@lion/ui/input-datepicker-translations/bg.js'),
+      ]);
+    case 'cs-CZ':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/cs-CZ.js'),
+        import('@lion/ui/input-datepicker-translations/cs-CZ.js'),
+      ]);
+    case 'cs':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/cs.js'),
+        import('@lion/ui/input-datepicker-translations/cs.js'),
+      ]);
+    case 'de-DE':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/de-DE.js'),
+        import('@lion/ui/input-datepicker-translations/de-DE.js'),
+      ]);
+    case 'de':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/de.js'),
+        import('@lion/ui/input-datepicker-translations/de.js'),
+      ]);
+    case 'en-AU':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/en-AU.js'),
+        import('@lion/ui/input-datepicker-translations/en-AU.js'),
+      ]);
+    case 'en-GB':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/en-GB.js'),
+        import('@lion/ui/input-datepicker-translations/en-GB.js'),
+      ]);
+    case 'en-US':
+      return import('@lion/ui/input-datepicker-translations/en-US.js');
+    case 'en-PH':
+    case 'en':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/en.js'),
+        import('@lion/ui/input-datepicker-translations/en.js'),
+      ]);
+
+    case 'es-ES':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/es-ES.js'),
+        import('@lion/ui/input-datepicker-translations/es-ES.js'),
+      ]);
+    case 'es':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/es.js'),
+        import('@lion/ui/input-datepicker-translations/es.js'),
+      ]);
+    case 'fr-FR':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/fr-FR.js'),
+        import('@lion/ui/input-datepicker-translations/fr-FR.js'),
+      ]);
+    case 'fr-BE':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/fr-BE.js'),
+        import('@lion/ui/input-datepicker-translations/fr-BE.js'),
+      ]);
+    case 'fr':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/fr.js'),
+        import('@lion/ui/input-datepicker-translations/fr.js'),
+      ]);
+    case 'hu-HU':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/hu-HU.js'),
+        import('@lion/ui/input-datepicker-translations/hu-HU.js'),
+      ]);
+    case 'hu':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/hu.js'),
+        import('@lion/ui/input-datepicker-translations/hu.js'),
+      ]);
+    case 'it-IT':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/it-IT.js'),
+        import('@lion/ui/input-datepicker-translations/it-IT.js'),
+      ]);
+    case 'it':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/it.js'),
+        import('@lion/ui/input-datepicker-translations/it.js'),
+      ]);
+    case 'nl-BE':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/nl-BE.js'),
+        import('@lion/ui/input-datepicker-translations/nl-BE.js'),
+      ]);
+    case 'nl-NL':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/nl-NL.js'),
+        import('@lion/ui/input-datepicker-translations/nl-NL.js'),
+      ]);
+    case 'nl':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/nl.js'),
+        import('@lion/ui/input-datepicker-translations/nl.js'),
+      ]);
+    case 'pl-PL':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/pl-PL.js'),
+        import('@lion/ui/input-datepicker-translations/pl-PL.js'),
+      ]);
+    case 'pl':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/pl.js'),
+        import('@lion/ui/input-datepicker-translations/pl.js'),
+      ]);
+    case 'ro-RO':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/ro-RO.js'),
+        import('@lion/ui/input-datepicker-translations/ro-RO.js'),
+      ]);
+    case 'ro':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/ro.js'),
+        import('@lion/ui/input-datepicker-translations/ro.js'),
+      ]);
+    case 'ru-RU':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/ru-RU.js'),
+        import('@lion/ui/input-datepicker-translations/ru-RU.js'),
+      ]);
+    case 'ru':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/ru.js'),
+        import('@lion/ui/input-datepicker-translations/ru.js'),
+      ]);
+    case 'sk-SK':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/sk-SK.js'),
+        import('@lion/ui/input-datepicker-translations/sk-SK.js'),
+      ]);
+    case 'sk':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/sk.js'),
+        import('@lion/ui/input-datepicker-translations/sk.js'),
+      ]);
+    case 'uk-UA':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/uk-UA.js'),
+        import('@lion/ui/input-datepicker-translations/uk-UA.js'),
+      ]);
+    case 'uk':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/uk.js'),
+        import('@lion/ui/input-datepicker-translations/uk.js'),
+      ]);
+    case 'zh-CN':
+    case 'zh':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/zh.js'),
+        import('@lion/ui/input-datepicker-translations/zh.js'),
+      ]);
+    default:
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/en.js'),
+        import('@lion/ui/input-datepicker-translations/en.js'),
+      ]);
+  }
+};

package/components/input-datepicker/test/lion-input-datepicker.test.js

@@ -44,15 +44,17 @@ describe('<lion-input-datepicker>', () => {
       const elObj = new DatepickerInputObject(el);
       await elObj.openCalendar();
 
-      expect(elObj.overlayEl.shadowRoot.querySelector('.calendar-overlay')).not.to.equal(null);
-      expect(elObj.overlayEl.shadowRoot.querySelector('.calendar-overlay__header')).not.to.equal(
-        null,
-      );
-      expect(elObj.overlayEl.shadowRoot.querySelector('.calendar-overlay__heading')).not.to.equal(
-        null,
-      );
       expect(
-        elObj.overlayEl.shadowRoot.querySelector('.calendar-overlay__close-button'),
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.calendar-overlay'),
+      ).not.to.equal(null);
+      expect(
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.calendar-overlay__header'),
+      ).not.to.equal(null);
+      expect(
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.calendar-overlay__heading'),
+      ).not.to.equal(null);
+      expect(
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.calendar-overlay__close-button'),
       ).not.to.equal(null);
     });
 
@@ -74,11 +76,7 @@ describe('<lion-input-datepicker>', () => {
       `);
       const elObj = new DatepickerInputObject(el);
       await elObj.openCalendar();
-      expect(
-        /** @type {HTMLSlotElement} */ (
-          elObj.overlayHeadingEl.querySelector('slot[name="heading"]')
-        ).assignedNodes()[0],
-      ).lightDom.to.equal('Pick your date');
+      expect(elObj.overlayHeadingEl.textContent).to.equal('Pick your date');
     });
 
     it('can have a custom heading', async () => {
@@ -90,11 +88,7 @@ describe('<lion-input-datepicker>', () => {
       `);
       const elObj = new DatepickerInputObject(el);
       await elObj.openCalendar();
-      expect(
-        /** @type {HTMLSlotElement} */ (
-          elObj.overlayHeadingEl.querySelector('slot[name="heading"]')
-        ).assignedNodes()[0],
-      ).lightDom.to.equal('foo');
+      expect(elObj.overlayHeadingEl.innerText).to.equal('foo');
     });
 
     it('closes the calendar on [esc] key', async () => {
@@ -670,7 +664,8 @@ describe('<lion-input-datepicker>', () => {
       expect(submitSpy.callCount).to.equal(0);
     });
 
-    it('is hidden when attribute hidden is true', async () => {
+    // TODO: remove: became irrelevant after we don't need dialog-frame
+    it.skip('is hidden when attribute hidden is true', async () => {
       const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
 
       await el.updateComplete;
@@ -690,7 +685,7 @@ describe('<lion-input-datepicker>', () => {
       await myElObj.openCalendar();
       expect(el.hasArrow).to.be.false;
       expect(
-        el?.shadowRoot?.contains(myElObj.overlayController.contentNode),
+        myElObj.overlayController.contentNode.classList.contains('overlays__overlay--bottom-sheet'),
         'Datepicker does not get rendered as bottom sheet',
       ).to.be.false;
     });

package/components/input-datepicker/test-helpers/DatepickerInputObject.js

@@ -29,7 +29,7 @@ export class DatepickerInputObject {
 
   async closeCalendar() {
     this.overlayCloseButtonEl.click();
-    await this.overlayEl.updateComplete;
+    await this.el.updateComplete;
   }
 
   /**
@@ -58,13 +58,13 @@ export class DatepickerInputObject {
 
   get overlayHeadingEl() {
     return /** @type {HTMLElement} */ (
-      this.overlayEl && this.overlayEl.shadowRoot?.querySelector('.calendar-overlay__heading')
+      this.overlayEl && this.el.shadowRoot?.querySelector('.calendar-overlay__heading')
     );
   }
 
   get overlayCloseButtonEl() {
     return /** @type {HTMLElement} */ (
-      this.calendarEl && this.overlayEl.shadowRoot?.querySelector('#close-button')
+      this.calendarEl && this.el.shadowRoot?.querySelector('#close-button')
     );
   }
 

package/components/input-tel/src/parsers.js

@@ -25,7 +25,7 @@ export function parsePhoneNumber(viewValue, { regionCode }) {
     // eslint-disable-next-line no-empty
   } catch (_) {}
 
-  if (pn) {
+  if (pn?.number) {
     return pn.number.e164;
   }
 

package/components/listbox/test-suites/ListboxMixin.suite.js

@@ -394,7 +394,7 @@ export function runListboxMixinSuite(customConfig = {}) {
         await el.updateComplete;
         await el.updateComplete; // need 2 awaits as overlay.show is an async function
 
-        await expect(el).to.be.accessible();
+        await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
       });
 
       // NB: regular listbox is always 'opened', but needed for combobox and select-rich
@@ -405,7 +405,7 @@ export function runListboxMixinSuite(customConfig = {}) {
             <${optionTag} .choiceValue=${20}>Item 2</${optionTag}>
           </${tag}>
         `);
-        await expect(el).to.be.accessible();
+        await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
       });
 
       it('does not have a tabindex', async () => {
@@ -430,7 +430,7 @@ export function runListboxMixinSuite(customConfig = {}) {
         const el = await fixture(html`
           <${tag} opened has-no-default-selected autocomplete="none" show-all-on-empty>
             <${optionTag} .choiceValue=${'10'} id="first">Item 1</${optionTag}>
-            <${optionTag} .choiceValue=${'20'} checked id="second">Item 2</${optionTag}>
+            <${optionTag} .choiceValue=${'20'} id="second">Item 2</${optionTag}>
           </${tag}>
         `);
         const { _activeDescendantOwnerNode } = getListboxMembers(el);

package/components/localize/src/singleton.js

@@ -4,7 +4,7 @@ import { LocalizeManager } from './LocalizeManager.js';
 /** @type {LocalizeManager} */
 // eslint-disable-next-line import/no-mutable-exports
 export const localize =
-  singletonManager.get('@lion/ui::localize::0.x') ||
+  /** @type {LocalizeManager} */ (singletonManager.get('@lion/ui::localize::0.x')) ||
   new LocalizeManager({
     autoLoadOnLocaleChange: true,
     fallbackLocale: 'en-GB',

package/components/localize/test/number/formatNumber.test.js

@@ -294,17 +294,13 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
 
     describe('en-PH', () => {
       it('supports basics', () => {
-        // TODO: This test is broken on Firefox and Chromium, check and fix when the intl change is permanent
-        if (!isSafari) {
-          return;
-        }
         localize.locale = 'en-PH';
         expect(formatNumber(123456.789, currencyCode('EUR'))).to.equal('EUR 123,456.79');
         expect(formatNumber(123456.789, currencyCode('USD'))).to.equal('USD 123,456.79');
         expect(formatNumber(123456.789, currencyCode('JPY'))).to.equal('JPY 123,457');
         expect(formatNumber(123456.789, currencySymbol('EUR'))).to.equal('€123,456.79');
-        expect(formatNumber(123456.789, currencySymbol('USD'))).to.equal('US$123,456.79');
-        expect(formatNumber(123456.789, currencySymbol('JPY'))).to.equal('JP¥123,457');
+        expect(formatNumber(123456.789, currencySymbol('USD'))).to.equal('$123,456.79');
+        expect(formatNumber(123456.789, currencySymbol('JPY'))).to.equal('¥123,457');
       });
     });