@lion/ui 0.22.0 → 0.24.0

package/components/listbox/types/ListboxMixinTypes.ts

@@ -25,7 +25,13 @@ export declare class ListboxHost {
   public rotateKeyboardNavigation: Boolean;
   /**
    * Informs screen reader and affects keyboard navigation.
-   * By default 'vertical'
+   * By default 'vertical'.
+   *
+   * TODO: rename to `axis: 'inline' | 'block'` (the vocabulary the menu's `InteractiveListMixin` uses),
+   * together with `rotateKeyboardNavigation` -> `wrap` and `multipleChoice` -> `multiple`. Must be
+   * non-breaking: the old properties and their attributes stay available as deprecated aliases for a
+   * release (dev-only deprecation warning), and only then get `@deprecated` here and disappear in a
+   * major. See the TODO at the top of src/ListboxMixin.js.
    */
   public orientation: 'vertical' | 'horizontal';
 

package/components/localize/src/LocalizeManager.js

@@ -1,7 +1,6 @@
 // @ts-expect-error
 import MessageFormat from '@bundled-es-modules/message-format/MessageFormat.js';
 import { isServer } from 'lit';
-
 import isLocalizeESModule from './isLocalizeESModule.js';
 
 /**
@@ -17,7 +16,10 @@ import isLocalizeESModule from './isLocalizeESModule.js';
  * In the future, we might want to look into more advanced SSR of localized messages
  */
 const documentElement = isServer
-  ? { getAttribute: () => null, lang: '' }
+  ? {
+      getAttribute: () => null,
+      lang: '',
+    }
   : globalThis.document?.documentElement;
 
 /**
@@ -117,15 +119,13 @@ export class LocalizeManager extends EventTarget {
    */
   set locale(newLocale) {
     this.#assertCorrectLocale(newLocale);
-
     if (!this.#shouldHandleTranslationTools) {
       const oldLocale = documentElement.lang;
       this._setHtmlLangAttribute(newLocale);
       this._onLocaleChanged(newLocale, oldLocale);
       return;
     }
-
-    const oldLocale = /** @type {string} */ (this.#localeProvidedViaDataLangAttr);
+    const oldLocale = /** @type {string} */ this.#localeProvidedViaDataLangAttr;
     this.#localeProvidedViaDataLangAttr = newLocale;
     const isLangAutoOrTranslationToolNotProcessed = this.#localeSetByTranslationTool === null;
     if (isLangAutoOrTranslationToolNotProcessed) {
@@ -140,7 +140,6 @@ export class LocalizeManager extends EventTarget {
   get loadingComplete() {
     const hasPendingCacheForLocale =
       typeof this.__namespaceLoaderPromisesCache[this.locale] === 'object';
-
     return !hasPendingCacheForLocale
       ? Promise.resolve()
       : Promise.all(Object.values(this.__namespaceLoaderPromisesCache[this.locale]));
@@ -157,7 +156,6 @@ export class LocalizeManager extends EventTarget {
 
   /** @protected */
   _fallbackLocale;
-
   constructor({
     allowOverridesForExistingNamespaces = false,
     autoLoadOnLocaleChange = false,
@@ -165,24 +163,19 @@ export class LocalizeManager extends EventTarget {
     fallbackLocale = '',
   } = {}) {
     super();
-
     this.__allowOverridesForExistingNamespaces = allowOverridesForExistingNamespaces;
     this._autoLoadOnLocaleChange = !!autoLoadOnLocaleChange;
     this._showKeyAsFallback = showKeyAsFallback;
     this._fallbackLocale = fallbackLocale;
-
     const localeProvidedViaDataLangAttr = documentElement.getAttribute('data-localize-lang');
     this.#shouldHandleTranslationTools = Boolean(localeProvidedViaDataLangAttr);
-
     if (this.#shouldHandleTranslationTools) {
-      this.locale = /** @type {string} */ (localeProvidedViaDataLangAttr);
+      this.locale = /** @type {string} */ localeProvidedViaDataLangAttr;
       this._setupTranslationToolSupport();
     }
-
     if (!documentElement.lang) {
       documentElement.lang = this.locale || 'en-GB';
     }
-
     this._setupHtmlLangAttributeObserver();
   }
 
@@ -202,9 +195,7 @@ export class LocalizeManager extends EventTarget {
         `Namespace "${namespace}" has been already added for the locale "${locale}".`,
       );
     }
-
     this.__storage[locale] = this.__storage[locale] || {};
-
     if (this.__allowOverridesForExistingNamespaces) {
       this.__storage[locale][namespace] = {
         ...this.__storage[locale][namespace],
@@ -233,7 +224,10 @@ export class LocalizeManager extends EventTarget {
     return Promise.all(
       namespaces.map(
         /** @param {NamespaceObject} namespace */
-        namespace => this.loadNamespace(namespace, { locale }),
+        (namespace) =>
+          this.loadNamespace(namespace, {
+            locale,
+          }),
       ),
     );
   }
@@ -244,22 +238,23 @@ export class LocalizeManager extends EventTarget {
    * @param {string} [options.locale]
    * @returns {Promise<Object|void>}
    */
-  loadNamespace(namespaceObj, { locale = this.locale } = { locale: this.locale }) {
+  loadNamespace(
+    namespaceObj,
+    { locale = this.locale } = {
+      locale: this.locale,
+    },
+  ) {
     const isDynamicImport = typeof namespaceObj === 'object';
-
-    const namespace = /** @type {string} */ (
-      isDynamicImport ? Object.keys(namespaceObj)[0] : namespaceObj
-    );
-
+    const namespace =
+      /** @type {string} */
+      isDynamicImport ? Object.keys(namespaceObj)[0] : namespaceObj;
     if (this._isNamespaceInCache(locale, namespace)) {
       return Promise.resolve();
     }
-
     const existingLoaderPromise = this._getCachedNamespaceLoaderPromise(locale, namespace);
     if (existingLoaderPromise) {
       return existingLoaderPromise;
     }
-
     return this._loadNamespaceData(locale, namespaceObj, isDynamicImport, namespace);
   }
 
@@ -279,11 +274,9 @@ export class LocalizeManager extends EventTarget {
     const formatter = new MessageFormat(message, locale);
     return formatter.format(vars);
   }
-
   teardown() {
     this._teardownHtmlLangAttributeObserver();
   }
-
   reset() {
     this.__storage = {};
     this.__namespacePatternsMap = new Map();
@@ -347,10 +340,9 @@ export class LocalizeManager extends EventTarget {
   /** @protected */
   _setupHtmlLangAttributeObserver() {
     if (isServer) return;
-
     if (!this._htmlLangAttributeObserver) {
-      this._htmlLangAttributeObserver = new MutationObserver(mutations => {
-        mutations.forEach(mutation => {
+      this._htmlLangAttributeObserver = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
           if (this.#shouldHandleTranslationTools) {
             if (documentElement.lang === 'auto') {
               // Google Translate is switched off
@@ -417,7 +409,7 @@ export class LocalizeManager extends EventTarget {
        * @param {Object} obj
        * @param {Object} obj.default
        */
-      obj => {
+      (obj) => {
         // add data only if we have the promise in cache
         if (
           this.__namespaceLoaderPromisesCache[locale] &&
@@ -441,7 +433,7 @@ export class LocalizeManager extends EventTarget {
     let loader = this.__namespaceLoadersCache[namespace];
     if (!loader) {
       if (isDynamicImport) {
-        const _namespaceObj = /** @type {Object<string,function>} */ (namespaceObj);
+        const _namespaceObj = /** @type {Object<string,function>} */ namespaceObj;
         loader = _namespaceObj[namespace];
         this.__namespaceLoadersCache[namespace] = loader;
       } else {
@@ -449,13 +441,10 @@ export class LocalizeManager extends EventTarget {
         this.__namespaceLoadersCache[namespace] = loader;
       }
     }
-
     if (!loader) {
       throw new Error(`Namespace "${namespace}" was not properly setup.`);
     }
-
     this.__namespaceLoadersCache[namespace] = loader;
-
     return loader;
   }
 
@@ -543,14 +532,27 @@ export class LocalizeManager extends EventTarget {
     // Event firing immediately, does not wait for loading the translations
     this.dispatchEvent(new CustomEvent('__localeChanging'));
     if (newLocale === oldLocale) return;
-
     if (this._autoLoadOnLocaleChange) {
       this._loadAllMissing(newLocale, oldLocale);
       this.loadingComplete.then(() => {
-        this.dispatchEvent(new CustomEvent('localeChanged', { detail: { newLocale, oldLocale } }));
+        this.dispatchEvent(
+          new CustomEvent('localeChanged', {
+            detail: {
+              newLocale,
+              oldLocale,
+            },
+          }),
+        );
       });
     } else {
-      this.dispatchEvent(new CustomEvent('localeChanged', { detail: { newLocale, oldLocale } }));
+      this.dispatchEvent(
+        new CustomEvent('localeChanged', {
+          detail: {
+            newLocale,
+            oldLocale,
+          },
+        }),
+      );
     }
   }
 
@@ -562,7 +564,7 @@ export class LocalizeManager extends EventTarget {
   _loadAllMissing(newLocale, oldLocale) {
     const oldLocaleNamespaces = this.__storage[oldLocale] || {};
     const newLocaleNamespaces = this.__storage[newLocale] || {};
-    Object.keys(oldLocaleNamespaces).forEach(namespace => {
+    Object.keys(oldLocaleNamespaces).forEach((namespace) => {
       const newNamespaceData = newLocaleNamespaces[namespace];
       if (!newNamespaceData) {
         this.loadNamespace(namespace, {
@@ -622,7 +624,6 @@ export class LocalizeManager extends EventTarget {
       (message, name) => (typeof message === 'object' ? message[name] : message),
       messages,
     );
-
     return String(result || (this._showKeyAsFallback ? key : ''));
   }
 
@@ -633,7 +634,6 @@ export class LocalizeManager extends EventTarget {
   // eslint-disable-next-line class-methods-use-this
   #assertCorrectLocale(value) {
     if (value.includes('-')) return;
-
     throw new Error(`
       Locale was set to ${value}.
       Language only locales are not allowed, please use the full language locale e.g. 'en-GB' instead of 'en'.

package/components/localize/src/LocalizeMixin.js

@@ -15,168 +15,141 @@ import { getLocalizeManager } from './getLocalizeManager.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
 // prettier-ignore
-const LocalizeMixinImplementation = /** @type {LocalizeMixin} */ (superclass =>
-  class LocalizeMixin extends superclass {
-    /**
-     * @returns {NamespaceObject[]}
-     */
-    static get localizeNamespaces() {
-      return [];
-    }
-
-    /**
-     * @returns {boolean}
-     */
-    static get waitForLocalizeNamespaces() {
-      return true;
-    }
-
-    /** @param {...any} restArgs */
-    constructor(...restArgs) {
-      super(...restArgs);
-
-      this._localizeManager = getLocalizeManager();
-
-      /** @private */
-      this.__boundLocalizeOnLocaleChanged =
-        /** @param {...Object} args */
-        (...args) => {
-          const event = /** @type {CustomEvent} */ (Array.from(args)[0]);
-          this.__localizeOnLocaleChanged(event);
-        };
-
-      this.__boundLocalizeOnLocaleChanging = () => {
-        this.__localizeOnLocaleChanging();
-      };
-
-      // should be loaded in advance
-      /** @private */
-      this.__localizeStartLoadingNamespaces();
-
-      if (this.localizeNamespacesLoaded) {
-        this.localizeNamespacesLoaded.then(() => {
-          /** @private */
-          this.__localizeMessageSync = true;
-        });
-      }
-    }
-
-    /**
-     * hook into LitElement to only render once all translations are loaded
-     * @returns {Promise.<void>}
-     */
-    async scheduleUpdate() {
-      if (Object.getPrototypeOf(this).constructor.waitForLocalizeNamespaces) {
-        await this.localizeNamespacesLoaded;
-      }
-      super.scheduleUpdate();
-    }
-
-    connectedCallback() {
-      super.connectedCallback();
-      if (this.localizeNamespacesLoaded) {
-        this.localizeNamespacesLoaded.then(() => this.onLocaleReady());
-      }
-      this._localizeManager.addEventListener(
-        '__localeChanging',
-        this.__boundLocalizeOnLocaleChanging,
-      );
-      this._localizeManager.addEventListener('localeChanged', this.__boundLocalizeOnLocaleChanged);
-    }
-
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this._localizeManager.removeEventListener(
-        '__localeChanging',
-        this.__boundLocalizeOnLocaleChanging,
-      );
-      this._localizeManager.removeEventListener(
-        'localeChanged',
-        this.__boundLocalizeOnLocaleChanged,
-      );
-    }
-
-    /**
-     * @param {string | string[]} keys
-     * @param {Object.<string,any>} [variables]
-     * @param {Object} [options]
-     * @param {string} [options.locale]
-     * @returns {string | DirectiveResult}
-     */
-    msgLit(keys, variables, options) {
-      if (this.__localizeMessageSync) {
-        return this._localizeManager.msg(keys, variables, options);
-      }
-
-      if (!this.localizeNamespacesLoaded) {
-        return '';
-      }
-
-      return until(
-        this.localizeNamespacesLoaded.then(() =>
-          this._localizeManager.msg(keys, variables, options),
-        ),
-        nothing,
-      );
-    }
-
-    /**
-     * @returns {NamespaceObject[]}
-     * @private
-     */
-    __getUniqueNamespaces() {
-      /** @type {NamespaceObject[]} */
-      const uniqueNamespaces = [];
-
-      // IE11 does not support iterable in the constructor
-      const s = new Set();
-      Object.getPrototypeOf(this).constructor.localizeNamespaces.forEach(s.add.bind(s));
-      s.forEach(uniqueNamespace => {
-        uniqueNamespaces.push(uniqueNamespace);
-      });
-      return uniqueNamespaces;
-    }
+const LocalizeMixinImplementation = /** @type {LocalizeMixin} */superclass => class LocalizeMixin extends superclass {
+  /**
+   * @returns {NamespaceObject[]}
+   */
+  static get localizeNamespaces() {
+    return [];
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  static get waitForLocalizeNamespaces() {
+    return true;
+  }
+
+  /** @param {...any} restArgs */
+  constructor(...restArgs) {
+    super(...restArgs);
+    this._localizeManager = getLocalizeManager();
 
     /** @private */
-    __localizeStartLoadingNamespaces() {
-      this.localizeNamespacesLoaded = this._localizeManager.loadNamespaces(
-        this.__getUniqueNamespaces(),
-      );
+    this.__boundLocalizeOnLocaleChanged = /** @param {...Object} args */
+    (...args) => {
+      const event = /** @type {CustomEvent} */Array.from(args)[0];
+      this.__localizeOnLocaleChanged(event);
+    };
+    this.__boundLocalizeOnLocaleChanging = () => {
+      this.__localizeOnLocaleChanging();
+    };
+
+    // should be loaded in advance
+    /** @private */
+    this.__localizeStartLoadingNamespaces();
+    if (this.localizeNamespacesLoaded) {
+      this.localizeNamespacesLoaded.then(() => {
+        /** @private */
+        this.__localizeMessageSync = true;
+      });
     }
-
-    /**
-     * Start loading namespaces on the event that is sent immediately
-     * when this._localizeManager.locale changes --> 'localeChanging'
-     * @private
-     */
-    __localizeOnLocaleChanging() {
-      this.__localizeStartLoadingNamespaces();
+  }
+
+  /**
+   * hook into LitElement to only render once all translations are loaded
+   * @returns {Promise.<void>}
+   */
+  async scheduleUpdate() {
+    if (Object.getPrototypeOf(this).constructor.waitForLocalizeNamespaces) {
+      await this.localizeNamespacesLoaded;
     }
-
-    /**
-     * @param {CustomEvent} event
-     * @private
-     */
-    __localizeOnLocaleChanged(event) {
-      this.onLocaleChanged(event.detail.newLocale, event.detail.oldLocale);
+    super.scheduleUpdate();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.localizeNamespacesLoaded) {
+      this.localizeNamespacesLoaded.then(() => this.onLocaleReady());
     }
-
-    onLocaleReady() {
-      this.onLocaleUpdated();
+    this._localizeManager.addEventListener('__localeChanging', this.__boundLocalizeOnLocaleChanging);
+    this._localizeManager.addEventListener('localeChanged', this.__boundLocalizeOnLocaleChanged);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._localizeManager.removeEventListener('__localeChanging', this.__boundLocalizeOnLocaleChanging);
+    this._localizeManager.removeEventListener('localeChanged', this.__boundLocalizeOnLocaleChanged);
+  }
+
+  /**
+   * @param {string | string[]} keys
+   * @param {Object.<string,any>} [variables]
+   * @param {Object} [options]
+   * @param {string} [options.locale]
+   * @returns {string | DirectiveResult}
+   */
+  msgLit(keys, variables, options) {
+    if (this.__localizeMessageSync) {
+      return this._localizeManager.msg(keys, variables, options);
     }
-
-    /**
-     * @param {string} newLocale
-     * @param {string} oldLocale
-     */
-    // eslint-disable-next-line no-unused-vars
-    onLocaleChanged(newLocale, oldLocale) {
-      this.onLocaleUpdated();
-      this.requestUpdate();
+    if (!this.localizeNamespacesLoaded) {
+      return '';
     }
-
-    // eslint-disable-next-line class-methods-use-this
-    onLocaleUpdated() {}
-  });
-
+    return until(this.localizeNamespacesLoaded.then(() => this._localizeManager.msg(keys, variables, options)), nothing);
+  }
+
+  /**
+   * @returns {NamespaceObject[]}
+   * @private
+   */
+  __getUniqueNamespaces() {
+    /** @type {NamespaceObject[]} */
+    const uniqueNamespaces = [];
+
+    // IE11 does not support iterable in the constructor
+    const s = new Set();
+    Object.getPrototypeOf(this).constructor.localizeNamespaces.forEach(s.add.bind(s));
+    s.forEach(uniqueNamespace => {
+      uniqueNamespaces.push(uniqueNamespace);
+    });
+    return uniqueNamespaces;
+  }
+
+  /** @private */
+  __localizeStartLoadingNamespaces() {
+    this.localizeNamespacesLoaded = this._localizeManager.loadNamespaces(this.__getUniqueNamespaces());
+  }
+
+  /**
+   * Start loading namespaces on the event that is sent immediately
+   * when this._localizeManager.locale changes --> 'localeChanging'
+   * @private
+   */
+  __localizeOnLocaleChanging() {
+    this.__localizeStartLoadingNamespaces();
+  }
+
+  /**
+   * @param {CustomEvent} event
+   * @private
+   */
+  __localizeOnLocaleChanged(event) {
+    this.onLocaleChanged(event.detail.newLocale, event.detail.oldLocale);
+  }
+  onLocaleReady() {
+    this.onLocaleUpdated();
+  }
+
+  /**
+   * @param {string} newLocale
+   * @param {string} oldLocale
+   */
+  // eslint-disable-next-line no-unused-vars
+  onLocaleChanged(newLocale, oldLocale) {
+    this.onLocaleUpdated();
+    this.requestUpdate();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  onLocaleUpdated() {}
+};
 export const LocalizeMixin = dedupeMixin(LocalizeMixinImplementation);

package/components/localize/src/date/formatDate.js

@@ -16,9 +16,8 @@ export function formatDate(date, options) {
   if (!(date instanceof Date)) {
     return '';
   }
-
   const formatOptions =
-    options || /** @type {import('../../types/LocalizeMixinTypes.js').FormatDateOptions} */ ({});
+    options || /** @type {import('../../types/LocalizeMixinTypes.js').FormatDateOptions} */ {};
   /**
    * Set smart defaults if:
    * 1) no options object is passed
@@ -36,7 +35,6 @@ export function formatDate(date, options) {
   } catch (e) {
     formattedDate = '';
   }
-
   if (localizeManager.formatDateOptions.postProcessors.size > 0) {
     Array.from(localizeManager.formatDateOptions.postProcessors).forEach(([locale, fn]) => {
       if (locale === computedLocale) {
@@ -44,7 +42,6 @@ export function formatDate(date, options) {
       }
     });
   }
-
   if (formatOptions.postProcessors && formatOptions.postProcessors.size > 0) {
     Array.from(formatOptions.postProcessors).forEach(([locale, fn]) => {
       if (locale === computedLocale) {
@@ -52,6 +49,5 @@ export function formatDate(date, options) {
       }
     });
   }
-
   return normalizeIntlDate(formattedDate, computedLocale, formatOptions);
 }

package/components/localize/src/date/getDateFormatBasedOnLocale.js

@@ -27,7 +27,6 @@ export function getDateFormatBasedOnLocale(locale) {
       const key = dateParts[index];
       return template[key];
     }
-
     return [1, 3, 5].map(getPartByIndex);
   }
 
@@ -36,13 +35,16 @@ export function getDateFormatBasedOnLocale(locale) {
   date.setDate(20);
   date.setMonth(11);
   date.setFullYear(2012);
-  const options = locale ? { locale } : {};
+  const options = locale
+    ? {
+        locale,
+      }
+    : {};
   // Strange characters added by IE11 need to be taken into account here
   const formattedDate = sanitizedDateTimeFormat(date, options);
 
   // For Dutch locale, dateParts would match: [ 1:'20', 2:'-', 3:'12', 4:'-', 5:'2012' ]
   const dateParts = splitDate(formattedDate);
-
   const dateFormat = {};
   if (dateParts) {
     dateFormat.positions = computePositions(dateParts);

package/components/localize/src/date/getMonthNames.js

@@ -14,14 +14,13 @@ const monthsLocaleCache = {};
  */
 export function getMonthNames({ locale = 'en-GB', style = 'long' } = {}) {
   let months = monthsLocaleCache[locale] && monthsLocaleCache[locale][style];
-
   if (months) {
     return months;
   }
-
   months = [];
-
-  const formatter = new Intl.DateTimeFormat(locale, { month: style });
+  const formatter = new Intl.DateTimeFormat(locale, {
+    month: style,
+  });
   for (let i = 0; i < 12; i += 1) {
     const date = new Date(2019, i, 1);
     const formattedDate = formatter.format(date);
@@ -35,6 +34,5 @@ export function getMonthNames({ locale = 'en-GB', style = 'long' } = {}) {
   }
   monthsLocaleCache[locale] = monthsLocaleCache[locale] || {};
   monthsLocaleCache[locale][style] = months;
-
   return months;
 }

package/components/localize/src/date/getWeekdayNames.js

@@ -11,11 +11,9 @@ const weekdayNamesCache = {};
 function getCachedWeekdayNames(locale) {
   const cachedWeekdayNames = weekdayNamesCache[locale];
   let weekdays;
-
   if (cachedWeekdayNames) {
     return cachedWeekdayNames;
   }
-
   weekdayNamesCache[locale] = {
     long: [],
     short: [],
@@ -24,12 +22,11 @@ function getCachedWeekdayNames(locale) {
 
   /** @type {Array<"long" | "short" | "narrow">} style */
   const styles = ['long', 'short', 'narrow'];
-  styles.forEach(style => {
+  styles.forEach((style) => {
     weekdays = weekdayNamesCache[locale][style];
     const formatter = new Intl.DateTimeFormat(locale, {
       weekday: style,
     });
-
     const date = new Date('2019/04/07'); // start from Sunday
     for (let i = 0; i < 7; i += 1) {
       const weekday = formatter.format(date);
@@ -38,7 +35,6 @@ function getCachedWeekdayNames(locale) {
       date.setDate(date.getDate() + 1);
     }
   });
-
   return weekdayNamesCache[locale];
 }