@lion/ui 0.0.1

package/components/listbox/types/LionOption.ts

@@ -0,0 +1,6 @@
+import { ChoiceGroupHost } from '../../form-core/types/choice-group/ChoiceGroupMixinTypes.js';
+
+export declare class LionOptionHost {
+  constructor(...args: any[]);
+  protected _parentFormGroup: ChoiceGroupHost;
+}

package/components/listbox/types/ListboxMixinTypes.ts

@@ -0,0 +1,104 @@
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement, CSSResultArray } from 'lit';
+import { SlotHost } from '../../core/types/SlotMixinTypes.js';
+
+import { FormControlHost } from '../../form-core/types/FormControlMixinTypes.js';
+import { FormRegistrarHost } from '../../form-core/types/registration/FormRegistrarMixinTypes.js';
+import { ChoiceGroupHost } from '../../form-core/types/choice-group/ChoiceGroupMixinTypes.js';
+import { LionOptions } from '../src/LionOptions.js';
+import { LionOption } from '../src/LionOption.js';
+
+export declare class ListboxHost {
+  static get styles(): CSSResultArray;
+  /**
+   * When true, will synchronize activedescendant and selected element on
+   * arrow key navigation.
+   * This behavior can usually be seen on <select> on the Windows platform.
+   * Note that this behavior cannot be used when multiple-choice is true.
+   * See: https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus
+   */
+  public selectionFollowsFocus: Boolean;
+  /**
+   * Will give first option active state when navigated to the next option from
+   * last option.
+   */
+  public rotateKeyboardNavigation: Boolean;
+  /**
+   * Informs screen reader and affects keyboard navigation.
+   * By default 'vertical'
+   */
+  public orientation: 'vertical' | 'horizontal';
+
+  public hasNoDefaultSelected: boolean;
+
+  public singleOption: boolean;
+  // protected _invokerNode: HTMLElement;
+
+  public checkedIndex: number | number[];
+
+  public activeIndex: number;
+
+  public formElements: LionOption[];
+
+  public setCheckedIndex(index: number | number[]): void;
+
+  /** Reset interaction states and modelValue */
+  public reset(): void;
+
+  protected get _scrollTargetNode(): HTMLElement;
+
+  protected get _listboxNode(): LionOptions;
+
+  protected _listboxReceivesNoFocus: boolean;
+
+  protected _noTypeAhead: boolean;
+
+  protected _uncheckChildren(): void;
+
+  private __setupListboxNode(): void;
+
+  protected _handleTypeAhead(ev: KeyboardEvent, params: { setAsChecked: boolean }): void;
+
+  protected _getPreviousEnabledOption(currentIndex: number, offset?: number): number;
+
+  protected _getNextEnabledOption(currentIndex: number, offset?: number): number;
+
+  protected _listboxOnKeyDown(ev: KeyboardEvent): void;
+
+  protected _listboxOnKeyUp(ev: KeyboardEvent): void;
+
+  protected _scrollIntoView(el: HTMLElement, scrollTargetEl: HTMLElement | undefined): void;
+
+  protected _setupListboxNode(): void;
+
+  protected _teardownListboxNode(): void;
+
+  protected _listboxOnClick(ev: MouseEvent): void;
+
+  protected _setupListboxInteractions(): void;
+
+  protected _onChildActiveChanged(ev: Event): void;
+
+  protected get _activeDescendantOwnerNode(): HTMLElement;
+
+  protected _onListboxContentChanged(): void;
+
+  private __pendingTypeAheadTimeout: number | undefined;
+}
+
+export declare function ListboxImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<ListboxHost> &
+  Pick<typeof ListboxHost, keyof typeof ListboxHost> &
+  Constructor<ChoiceGroupHost> &
+  Pick<typeof ChoiceGroupHost, keyof typeof ChoiceGroupHost> &
+  Constructor<SlotHost> &
+  Pick<typeof SlotHost, keyof typeof SlotHost> &
+  Constructor<FormRegistrarHost> &
+  Pick<typeof FormRegistrarHost, keyof typeof FormRegistrarHost> &
+  Constructor<FormControlHost> &
+  Pick<typeof FormControlHost, keyof typeof FormControlHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
+
+export type ListboxMixin = typeof ListboxImplementation;

package/components/localize/src/LocalizeManager.js

@@ -0,0 +1,599 @@
+// @ts-ignore
+import MessageFormat from '@bundled-es-modules/message-format/MessageFormat.js';
+import isLocalizeESModule from './isLocalizeESModule.js';
+
+/**
+ * @typedef {import('../types/LocalizeMixinTypes.js').NamespaceObject} NamespaceObject
+ */
+
+/** @typedef {import('../types/LocalizeMixinTypes.js').DatePostProcessor} DatePostProcessor */
+/** @typedef {import('../types/LocalizeMixinTypes.js').NumberPostProcessor} NumberPostProcessor */
+
+/**
+ * `LocalizeManager` manages your translations (includes loading)
+ */
+export class LocalizeManager {
+  // eslint-disable-line no-unused-vars
+  constructor({
+    autoLoadOnLocaleChange = false,
+    fallbackLocale = '',
+    showKeyAsFallback = false,
+  } = {}) {
+    /** @private */
+    this.__delegationTarget = document.createDocumentFragment();
+    /** @protected */
+    this._autoLoadOnLocaleChange = !!autoLoadOnLocaleChange;
+    /** @protected */
+    this._fallbackLocale = fallbackLocale;
+    /** @protected */
+    this._showKeyAsFallback = showKeyAsFallback;
+
+    /**
+     * @type {Object.<string, Object.<string, Object>>}
+     * @private
+     */
+    this.__storage = {};
+
+    /**
+     * @type {Map.<RegExp|string, function>}
+     * @private
+     */
+    this.__namespacePatternsMap = new Map();
+
+    /**
+     * @type {Object.<string, function|null>}
+     * @private
+     */
+    this.__namespaceLoadersCache = {};
+
+    /**
+     * @type {Object.<string, Object.<string, Promise.<Object|void>>>}
+     * @private
+     */
+    this.__namespaceLoaderPromisesCache = {};
+
+    this.formatNumberOptions = {
+      returnIfNaN: '',
+      /** @type {Map<string,DatePostProcessor>} */
+      postProcessors: new Map(),
+    };
+
+    this.formatDateOptions = {
+      /** @type {Map<string,DatePostProcessor>} */
+      postProcessors: new Map(),
+    };
+
+    /**
+     * Via html[data-localize-lang], developers are allowed to set the initial locale, without
+     * having to worry about whether locale is initialized before 3rd parties like Google Translate.
+     * When this value differs from html[lang], we assume the 3rd party took
+     * control over the page language and we set this._langAttrSetByTranslationTool to html[lang]
+     */
+    const initialLocale = document.documentElement.getAttribute('data-localize-lang');
+
+    /** @protected */
+    this._supportExternalTranslationTools = Boolean(initialLocale);
+
+    if (this._supportExternalTranslationTools) {
+      this.locale = initialLocale || 'en-GB';
+      this._setupTranslationToolSupport();
+    }
+
+    if (!document.documentElement.lang) {
+      document.documentElement.lang = this.locale || 'en-GB';
+    }
+
+    /** @protected */
+    this._setupHtmlLangAttributeObserver();
+  }
+
+  /** @protected */
+  _setupTranslationToolSupport() {
+    /**
+     * This value allows for support for Google Translate (or other 3rd parties taking control
+     * of the html[lang] attribute).
+     *
+     * Have the following scenario in mind:
+     * 1. locale is initialized by developer via html[data-localize-lang="en-US"] and
+     * html[lang="en-US"]. When localize is loaded (note that this also can be after step 2 below),
+     * it will sync its initial state from html[data-localize-lang]
+     * 2. Google Translate kicks in for the French language. It will set html[lang="fr"].
+     * This new language is not one known by us, so we most likely don't have translations for
+     * this file. Therefore, we do NOT sync this value to LocalizeManager. The manager should
+     * still ask for known resources (in this case for locale 'en-US')
+     * 3. locale is changed (think of a language dropdown)
+     * It's a bit of a weird case, because we would not expect an end user to do this. If he/she
+     * does, make sure that we do not go against Google Translate, so we maintain accessibility
+     * (by not altering html[lang]). We detect this by reading _langAttrSetByTranslationTool:
+     * when its value is null, we consider Google translate 'not active'.
+     *
+     * When Google Translate is turned off by the user (html[lang=auto]),
+     * `localize.locale` will be synced to html[lang] again
+     *
+     * Keep in mind that all of the above also works with other tools than Google Translate,
+     * but this is the most widely used tool and therefore used as an example.
+     */
+    this._langAttrSetByTranslationTool = document.documentElement.lang || null;
+  }
+
+  teardown() {
+    this._teardownHtmlLangAttributeObserver();
+  }
+
+  /**
+   * @returns {string}
+   */
+  get locale() {
+    if (this._supportExternalTranslationTools) {
+      return this.__locale || '';
+    }
+    return document.documentElement.lang;
+  }
+
+  /**
+   * @param {string} value
+   */
+  set locale(value) {
+    /** @type {string} */
+    let oldLocale;
+    if (this._supportExternalTranslationTools) {
+      oldLocale = /** @type {string} */ (this.__locale);
+      this.__locale = value;
+      if (this._langAttrSetByTranslationTool === null) {
+        this._setHtmlLangAttribute(value);
+      }
+    } else {
+      oldLocale = document.documentElement.lang;
+      this._setHtmlLangAttribute(value);
+    }
+
+    if (!value.includes('-')) {
+      this.__handleLanguageOnly(value);
+    }
+
+    this._onLocaleChanged(value, oldLocale);
+  }
+
+  /**
+   * @param {string} locale
+   * @protected
+   */
+  _setHtmlLangAttribute(locale) {
+    this._teardownHtmlLangAttributeObserver();
+    document.documentElement.lang = locale;
+    this._setupHtmlLangAttributeObserver();
+  }
+
+  /**
+   * @param {string} value
+   * @throws {Error} Language only locales are not allowed(Use 'en-GB' instead of 'en')
+   * @private
+   */
+  // eslint-disable-next-line class-methods-use-this
+  __handleLanguageOnly(value) {
+    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'.
+      See https://github.com/ing-bank/lion/issues/187 for more information.
+    `);
+  }
+
+  /**
+   * @returns {Promise.<Object|void>}
+   */
+  get loadingComplete() {
+    if (typeof this.__namespaceLoaderPromisesCache[this.locale] === 'object') {
+      return Promise.all(Object.values(this.__namespaceLoaderPromisesCache[this.locale]));
+    }
+    return Promise.resolve();
+  }
+
+  reset() {
+    this.__storage = {};
+    this.__namespacePatternsMap = new Map();
+    this.__namespaceLoadersCache = {};
+    this.__namespaceLoaderPromisesCache = {};
+  }
+
+  /**
+   * @param {string} locale
+   * @param {string} namespace
+   * @param {object} data
+   * @throws {Error} Namespace can be added only once, for a given locale
+   */
+  addData(locale, namespace, data) {
+    if (this._isNamespaceInCache(locale, namespace)) {
+      throw new Error(
+        `Namespace "${namespace}" has been already added for the locale "${locale}".`,
+      );
+    }
+
+    this.__storage[locale] = this.__storage[locale] || {};
+    this.__storage[locale][namespace] = data;
+  }
+
+  /**
+   * @param {RegExp|string} pattern
+   * @param {function} loader
+   */
+  setupNamespaceLoader(pattern, loader) {
+    this.__namespacePatternsMap.set(pattern, loader);
+  }
+
+  /**
+   * @param {NamespaceObject[]} namespaces
+   * @param {Object} options
+   * @param {string} [options.locale]
+   * @returns {Promise.<Object>}
+   */
+  loadNamespaces(namespaces, { locale } = {}) {
+    return Promise.all(
+      namespaces.map(
+        /** @param {NamespaceObject} namespace */
+        namespace => this.loadNamespace(namespace, { locale }),
+      ),
+    );
+  }
+
+  /**
+   * @param {NamespaceObject} namespaceObj
+   * @param {Object} options
+   * @param {string} [options.locale]
+   * @returns {Promise.<Object|void>}
+   */
+  loadNamespace(namespaceObj, { locale = this.locale } = { locale: this.locale }) {
+    const isDynamicImport = typeof namespaceObj === 'object';
+
+    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);
+  }
+
+  /**
+   * @param {string | string[]} keys
+   * @param {Object.<string,?>} [vars]
+   * @param {Object} [opts]
+   * @param {string} [opts.locale]
+   * @returns {string}
+   */
+  msg(keys, vars, opts = {}) {
+    const locale = opts.locale ? opts.locale : this.locale;
+    const message = this._getMessageForKeys(keys, locale);
+    if (!message) {
+      return '';
+    }
+    const formatter = new MessageFormat(message, locale);
+    return formatter.format(vars);
+  }
+
+  /** @protected */
+  _setupHtmlLangAttributeObserver() {
+    if (!this._htmlLangAttributeObserver) {
+      this._htmlLangAttributeObserver = new MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+          if (this._supportExternalTranslationTools) {
+            if (document.documentElement.lang === 'auto') {
+              // Google Translate is switched off
+              this._langAttrSetByTranslationTool = null;
+              this._setHtmlLangAttribute(this.locale);
+            } else {
+              this._langAttrSetByTranslationTool = document.documentElement.lang;
+            }
+          } else {
+            this._onLocaleChanged(document.documentElement.lang, mutation.oldValue || '');
+          }
+        });
+      });
+    }
+    this._htmlLangAttributeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['lang'],
+      attributeOldValue: true,
+    });
+  }
+
+  /** @protected */
+  _teardownHtmlLangAttributeObserver() {
+    if (this._htmlLangAttributeObserver) {
+      this._htmlLangAttributeObserver.disconnect();
+    }
+  }
+
+  /**
+   * @param {string} locale
+   * @param {string} namespace
+   * @protected
+   */
+  _isNamespaceInCache(locale, namespace) {
+    return !!(this.__storage[locale] && this.__storage[locale][namespace]);
+  }
+
+  /**
+   * @param {string} locale
+   * @param {string} namespace
+   * @protected
+   */
+  _getCachedNamespaceLoaderPromise(locale, namespace) {
+    if (this.__namespaceLoaderPromisesCache[locale]) {
+      return this.__namespaceLoaderPromisesCache[locale][namespace];
+    }
+    return null;
+  }
+
+  /**
+   * @param {string} locale
+   * @param {NamespaceObject} namespaceObj
+   * @param {boolean} isDynamicImport
+   * @param {string} namespace
+   * @returns {Promise.<Object|void>}
+   * @protected
+   */
+  _loadNamespaceData(locale, namespaceObj, isDynamicImport, namespace) {
+    const loader = this._getNamespaceLoader(namespaceObj, isDynamicImport, namespace);
+    const loaderPromise = this._getNamespaceLoaderPromise(loader, locale, namespace);
+    this._cacheNamespaceLoaderPromise(locale, namespace, loaderPromise);
+    return loaderPromise.then(
+      /**
+       * @param {Object} obj
+       * @param {Object} obj.default
+       */
+      obj => {
+        // add data only if we have the promise in cache
+        if (
+          this.__namespaceLoaderPromisesCache[locale] &&
+          this.__namespaceLoaderPromisesCache[locale][namespace] === loaderPromise
+        ) {
+          const data = isLocalizeESModule(obj) ? obj.default : obj;
+          this.addData(locale, namespace, data);
+        }
+      },
+    );
+  }
+
+  /**
+   * @param {NamespaceObject} namespaceObj
+   * @param {boolean} isDynamicImport
+   * @param {string} namespace
+   * @throws {Error} Namespace shall setup properly. Check loader!
+   * @protected
+   */
+  _getNamespaceLoader(namespaceObj, isDynamicImport, namespace) {
+    let loader = this.__namespaceLoadersCache[namespace];
+    if (!loader) {
+      if (isDynamicImport) {
+        const _namespaceObj = /** @type {Object.<string,function>} */ (namespaceObj);
+        loader = _namespaceObj[namespace];
+        this.__namespaceLoadersCache[namespace] = loader;
+      } else {
+        loader = this._lookupNamespaceLoader(namespace);
+        this.__namespaceLoadersCache[namespace] = loader;
+      }
+    }
+
+    if (!loader) {
+      throw new Error(`Namespace "${namespace}" was not properly setup.`);
+    }
+
+    this.__namespaceLoadersCache[namespace] = loader;
+
+    return loader;
+  }
+
+  /**
+   * @param {function} loader
+   * @param {string} locale
+   * @param {string} namespace
+   * @param {string} [fallbackLocale]
+   * @returns {Promise.<any>}
+   * @throws {Error} Data for namespace and (locale or fallback locale) could not be loaded.
+   * @protected
+   */
+  _getNamespaceLoaderPromise(loader, locale, namespace, fallbackLocale = this._fallbackLocale) {
+    return loader(locale, namespace).catch(() => {
+      const lang = this._getLangFromLocale(locale);
+      return loader(lang, namespace).catch(() => {
+        if (fallbackLocale) {
+          return this._getNamespaceLoaderPromise(loader, fallbackLocale, namespace, '').catch(
+            () => {
+              const fallbackLang = this._getLangFromLocale(fallbackLocale);
+              throw new Error(
+                `Data for namespace "${namespace}" and current locale "${locale}" or fallback locale "${fallbackLocale}" could not be loaded. ` +
+                  `Make sure you have data either for locale "${locale}" (and/or generic language "${lang}") or for fallback "${fallbackLocale}" (and/or "${fallbackLang}").`,
+              );
+            },
+          );
+        }
+        throw new Error(
+          `Data for namespace "${namespace}" and locale "${locale}" could not be loaded. ` +
+            `Make sure you have data for locale "${locale}" (and/or generic language "${lang}").`,
+        );
+      });
+    });
+  }
+
+  /**
+   * @param {string} locale
+   * @param {string} namespace
+   * @param {Promise.<Object|void>} promise
+   * @protected
+   */
+  _cacheNamespaceLoaderPromise(locale, namespace, promise) {
+    if (!this.__namespaceLoaderPromisesCache[locale]) {
+      this.__namespaceLoaderPromisesCache[locale] = {};
+    }
+    this.__namespaceLoaderPromisesCache[locale][namespace] = promise;
+  }
+
+  /**
+   * @param {string} namespace
+   * @returns {function|null}
+   * @protected
+   */
+  _lookupNamespaceLoader(namespace) {
+    /* eslint-disable no-restricted-syntax */
+    for (const [key, value] of this.__namespacePatternsMap) {
+      const isMatchingString = typeof key === 'string' && key === namespace;
+      const isMatchingRegexp =
+        typeof key === 'object' && key.constructor.name === 'RegExp' && key.test(namespace);
+      if (isMatchingString || isMatchingRegexp) {
+        return value;
+      }
+    }
+    return null;
+    /* eslint-enable no-restricted-syntax */
+  }
+
+  /**
+   * @param {string} locale
+   * @returns {string}
+   * @protected
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _getLangFromLocale(locale) {
+    return locale.substring(0, 2);
+  }
+
+  /**
+   * @param {string} type
+   * @param {EventListener} listener
+   * @param {...Object} options
+   */
+  addEventListener(type, listener, ...options) {
+    this.__delegationTarget.addEventListener(type, listener, ...options);
+  }
+
+  /**
+   * @param {string} type
+   * @param {EventListener} listener
+   * @param {...Object} options
+   */
+  removeEventListener(type, listener, ...options) {
+    this.__delegationTarget.removeEventListener(type, listener, ...options);
+  }
+
+  /**
+   *  @param {CustomEvent} event
+   */
+  dispatchEvent(event) {
+    this.__delegationTarget.dispatchEvent(event);
+  }
+
+  /**
+   * @param {string} newLocale
+   * @param {string} oldLocale
+   * @returns {undefined}
+   * @protected
+   */
+  _onLocaleChanged(newLocale, oldLocale) {
+    // 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 } }));
+      });
+    } else {
+      this.dispatchEvent(new CustomEvent('localeChanged', { detail: { newLocale, oldLocale } }));
+    }
+  }
+
+  /**
+   * @param {string} newLocale
+   * @param {string} oldLocale
+   * @protected
+   */
+  _loadAllMissing(newLocale, oldLocale) {
+    const oldLocaleNamespaces = this.__storage[oldLocale] || {};
+    const newLocaleNamespaces = this.__storage[newLocale] || {};
+    Object.keys(oldLocaleNamespaces).forEach(namespace => {
+      const newNamespaceData = newLocaleNamespaces[namespace];
+      if (!newNamespaceData) {
+        this.loadNamespace(namespace, {
+          locale: newLocale,
+        });
+      }
+    });
+  }
+
+  /**
+   * @param {string | string[]} keys
+   * @param {string} locale
+   * @returns {string | undefined}
+   * @protected
+   */
+  _getMessageForKeys(keys, locale) {
+    if (typeof keys === 'string') {
+      return this._getMessageForKey(keys, locale);
+    }
+    const reversedKeys = Array.from(keys).reverse(); // Array.from prevents mutation of argument
+    let key;
+    let message;
+    while (reversedKeys.length) {
+      key = reversedKeys.pop();
+      message = this._getMessageForKey(key, locale);
+      if (message) {
+        return message;
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * @param {string | undefined} key
+   * @param {string} locale
+   * @returns {string}
+   * @throws {Error} `key`is missing namespace. The format for `key` is "namespace:name"
+   * @protected
+   *
+   */
+  _getMessageForKey(key, locale) {
+    if (!key || key.indexOf(':') === -1) {
+      throw new Error(
+        `Namespace is missing in the key "${key}". The format for keys is "namespace:name".`,
+      );
+    }
+    const [ns, namesString] = key.split(':');
+    const namespaces = this.__storage[locale];
+    const messages = namespaces ? namespaces[ns] : {};
+    const names = namesString.split('.');
+    const result = names.reduce(
+      /**
+       * @param {Object.<string, any> | string} message
+       * @param {string} name
+       * @returns {string}
+       */
+      (message, name) => (typeof message === 'object' ? message[name] : message),
+      messages,
+    );
+
+    return String(result || (this._showKeyAsFallback ? key : ''));
+  }
+
+  /**
+   * @param {{locale:string, postProcessor:DatePostProcessor}} options
+   */
+  setDatePostProcessorForLocale({ locale, postProcessor }) {
+    this.formatDateOptions.postProcessors.set(locale, postProcessor);
+  }
+
+  /**
+   * @param {{locale:string, postProcessor:NumberPostProcessor}} options
+   */
+  setNumberPostProcessorForLocale({ locale, postProcessor }) {
+    this.formatNumberOptions.postProcessors.set(locale, postProcessor);
+  }
+}