@lion/ui 0.0.1

package/components/localize/src/LocalizeMixin.js

@@ -0,0 +1,165 @@
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+import { nothing } from 'lit';
+import { until } from 'lit/directives/until.js';
+import { localize } from './singleton.js';
+
+/**
+ * @typedef {import('lit/directive.js').DirectiveResult} DirectiveResult
+ * @typedef {import('../types/LocalizeMixinTypes.js').LocalizeMixin} LocalizeMixin
+ */
+
+/**
+ * # LocalizeMixin - for self managed templates
+ * @type {LocalizeMixin}
+ * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
+ */
+const LocalizeMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+  class LocalizeMixin extends superclass {
+    /**
+     * @returns {Object.<string,function>[]}
+     */
+    static get localizeNamespaces() {
+      return [];
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    static get waitForLocalizeNamespaces() {
+      return true;
+    }
+
+    constructor() {
+      super();
+
+      /** @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 performUpdate() {
+      if (Object.getPrototypeOf(this).constructor.waitForLocalizeNamespaces) {
+        await this.localizeNamespacesLoaded;
+      }
+      super.performUpdate();
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      if (this.localizeNamespacesLoaded) {
+        this.localizeNamespacesLoaded.then(() => this.onLocaleReady());
+      }
+      localize.addEventListener('__localeChanging', this.__boundLocalizeOnLocaleChanging);
+      localize.addEventListener('localeChanged', this.__boundLocalizeOnLocaleChanged);
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      localize.removeEventListener('__localeChanging', this.__boundLocalizeOnLocaleChanging);
+      localize.removeEventListener('localeChanged', this.__boundLocalizeOnLocaleChanged);
+    }
+
+    /**
+     * @param {string | string[]} keys
+     * @param {Object.<string,?>} [variables]
+     * @param {Object} [options]
+     * @param {string} [options.locale]
+     * @returns {string | DirectiveResult}
+     */
+    msgLit(keys, variables, options) {
+      if (this.__localizeMessageSync) {
+        return localize.msg(keys, variables, options);
+      }
+
+      if (!this.localizeNamespacesLoaded) {
+        return '';
+      }
+
+      return until(
+        this.localizeNamespacesLoaded.then(() => localize.msg(keys, variables, options)),
+        nothing,
+      );
+    }
+
+    /**
+     * @returns {string[]}
+     * @private
+     */
+    __getUniqueNamespaces() {
+      /** @type {string[]} */
+      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 = localize.loadNamespaces(this.__getUniqueNamespaces());
+    }
+
+    /**
+     * Start loading namespaces on the event that is sent immediately
+     * when localize.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

@@ -0,0 +1,56 @@
+import { getLocale } from '../utils/getLocale.js';
+import { localize } from '../singleton.js';
+import { normalizeIntlDate } from './utils/normalizeIntlDate.js';
+
+/** @typedef {import('../../types/LocalizeMixinTypes.js').DatePostProcessor} DatePostProcessor */
+
+/**
+ * Formats date based on locale and options
+ *
+ * @param {Date} date
+ * @param {import('../../types/LocalizeMixinTypes.js').FormatDateOptions} [options] Intl options are available
+ * @returns {string}
+ */
+export function formatDate(date, options) {
+  if (!(date instanceof Date)) {
+    return '';
+  }
+
+  const formatOptions =
+    options || /** @type {import('../../types/LocalizeMixinTypes.js').FormatDateOptions} */ ({});
+  /**
+   * Set smart defaults if:
+   * 1) no options object is passed
+   * 2) options object is passed, but none of the following props on it: day, month, year.
+   */
+  if (!options || (options && !options.day && !options.month && !options.year)) {
+    formatOptions.year = 'numeric';
+    formatOptions.month = '2-digit';
+    formatOptions.day = '2-digit';
+  }
+  const computedLocale = getLocale(formatOptions && formatOptions.locale);
+  let formattedDate = '';
+  try {
+    formattedDate = new Intl.DateTimeFormat(computedLocale, formatOptions).format(date);
+  } catch (e) {
+    formattedDate = '';
+  }
+
+  if (localize.formatDateOptions.postProcessors.size > 0) {
+    Array.from(localize.formatDateOptions.postProcessors).forEach(([locale, fn]) => {
+      if (locale === computedLocale) {
+        formattedDate = fn(formattedDate);
+      }
+    });
+  }
+
+  if (formatOptions.postProcessors && formatOptions.postProcessors.size > 0) {
+    Array.from(formatOptions.postProcessors).forEach(([locale, fn]) => {
+      if (locale === computedLocale) {
+        formattedDate = fn(formattedDate);
+      }
+    });
+  }
+
+  return normalizeIntlDate(formattedDate, computedLocale, formatOptions);
+}

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

@@ -0,0 +1,50 @@
+import { sanitizedDateTimeFormat } from './utils/sanitizedDateTimeFormat.js';
+import { splitDate } from './utils/splitDate.js';
+
+/**
+ * To compute the localized date format
+ * @returns {string}
+ */
+export function getDateFormatBasedOnLocale() {
+  /**
+   *
+   * @param {ArrayLike.<string>} dateParts
+   * @returns {string[]}
+   */
+  function computePositions(dateParts) {
+    /**
+     * @param {number} index
+     * @returns {string}
+     */
+    function getPartByIndex(index) {
+      /** @type {Object.<string,string>} */
+      const template = {
+        2012: 'year',
+        12: 'month',
+        20: 'day',
+      };
+      const key = dateParts[index];
+      return template[key];
+    }
+
+    return [1, 3, 5].map(getPartByIndex);
+  }
+
+  // Arbitrary date with different values for year,month,day
+  const date = new Date();
+  date.setDate(20);
+  date.setMonth(11);
+  date.setFullYear(2012);
+
+  // Strange characters added by IE11 need to be taken into account here
+  const formattedDate = sanitizedDateTimeFormat(date);
+
+  // 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);
+  }
+  return `${dateFormat.positions[0]}-${dateFormat.positions[1]}-${dateFormat.positions[2]}`;
+}

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

@@ -0,0 +1,37 @@
+import { normalizeIntlDate } from './utils/normalizeIntlDate.js';
+import { forceShortMonthNamesForEnGb } from './utils/forceShortMonthNamesForEnGb.js';
+
+/** @type {Object.<string, Object.<string,string[]>>} */
+const monthsLocaleCache = {};
+
+/**
+ * @desc Returns month names for locale
+ * @param {Object} options
+ * @param {string} [options.locale] locale
+ * @param {"long" | "numeric" | "2-digit" | "short" | "narrow"} [options.style=long] long, short or narrow
+ * @returns {string[]} like: ['January', 'February', ...etc].
+ */
+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 });
+  for (let i = 0; i < 12; i += 1) {
+    const date = new Date(2019, i, 1);
+    const formattedDate = formatter.format(date);
+    const normalizedDate = normalizeIntlDate(formattedDate);
+    months.push(normalizedDate);
+  }
+  if (locale === 'en-GB' && style === 'short') {
+    months = forceShortMonthNamesForEnGb(months);
+  }
+  monthsLocaleCache[locale] = monthsLocaleCache[locale] || {};
+  monthsLocaleCache[locale][style] = months;
+
+  return months;
+}

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

@@ -0,0 +1,60 @@
+import { normalizeIntlDate } from './utils/normalizeIntlDate.js';
+
+/** @type {Object.<string, Object.<string,string[]>>} */
+const weekdayNamesCache = {};
+
+/**
+ * @desc Return cached weekday names for locale for all styles ('long', 'short', 'narrow')
+ * @param {string} locale locale
+ * @returns {Object.<string,string[]>} - like { long: ['Sunday', 'Monday'...], short: ['Sun', ...], narrow: ['S', ...] }
+ */
+function getCachedWeekdayNames(locale) {
+  const cachedWeekdayNames = weekdayNamesCache[locale];
+  let weekdays;
+
+  if (cachedWeekdayNames) {
+    return cachedWeekdayNames;
+  }
+
+  weekdayNamesCache[locale] = {
+    long: [],
+    short: [],
+    narrow: [],
+  };
+
+  /** @type {Array<"long" | "short" | "narrow">} style */
+  const styles = ['long', 'short', 'narrow'];
+  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);
+      const normalizedWeekday = normalizeIntlDate(weekday);
+      weekdays.push(normalizedWeekday);
+      date.setDate(date.getDate() + 1);
+    }
+  });
+
+  return weekdayNamesCache[locale];
+}
+
+/**
+ * @desc Returns weekday names for locale
+ * @param {Object} options
+ * @param {string} [options.locale] locale
+ * @param {string} [options.style=long] long, short or narrow
+ * @param {number} [options.firstDayOfWeek=0] 0 (Sunday), 1 (Monday), etc...
+ * @returns {string[]} like: ['Sunday', 'Monday', 'Tuesday', ...etc].
+ */
+export function getWeekdayNames({ locale = 'en-GB', style = 'long', firstDayOfWeek = 0 } = {}) {
+  const weekdays = getCachedWeekdayNames(locale)[style];
+  const orderedWeekdays = [];
+  for (let i = firstDayOfWeek; i < firstDayOfWeek + 7; i += 1) {
+    orderedWeekdays.push(weekdays[i % 7]);
+  }
+  return orderedWeekdays;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * @desc Makes suitable for date comparisons
+ * @param {Date} date
+ * @returns {Date}
+ */
+export function normalizeDateTime(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}

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

@@ -0,0 +1,72 @@
+import { getDateFormatBasedOnLocale } from './getDateFormatBasedOnLocale.js';
+import { localize } from '../singleton.js';
+import { addLeadingZero } from './utils/addLeadingZero.js';
+
+/**
+ * @param {function} fn
+ */
+const memoize = fn => {
+  /** @type {Object.<any, any>} */
+  const cache = {};
+
+  return /** @param {any} parm */ parm => {
+    const n = parm;
+    if (n in cache) {
+      return cache[n];
+    }
+    const result = fn(n);
+    cache[n] = result;
+    return result;
+  };
+};
+
+const memoizedGetDateFormatBasedOnLocale = memoize(getDateFormatBasedOnLocale);
+
+/**
+ * To parse a date into the right format
+ *
+ * @param {string} dateString
+ * @returns {Date | undefined}
+ */
+export function parseDate(dateString) {
+  const stringToParse = addLeadingZero(dateString);
+  let parsedString;
+
+  switch (memoizedGetDateFormatBasedOnLocale(localize.locale)) {
+    case 'day-month-year':
+      parsedString = `${stringToParse.slice(6, 10)}/${stringToParse.slice(
+        3,
+        5,
+      )}/${stringToParse.slice(0, 2)}`;
+      break;
+    case 'month-day-year':
+      parsedString = `${stringToParse.slice(6, 10)}/${stringToParse.slice(
+        0,
+        2,
+      )}/${stringToParse.slice(3, 5)}`;
+      break;
+    case 'year-month-day':
+      parsedString = `${stringToParse.slice(0, 4)}/${stringToParse.slice(
+        5,
+        7,
+      )}/${stringToParse.slice(8, 10)}`;
+      break;
+    default:
+      parsedString = '0000/00/00';
+  }
+
+  const [year, month, day] = parsedString.split('/').map(Number);
+  const parsedDate = new Date(Date.UTC(year, month - 1, day));
+
+  // Check if parsedDate is not `Invalid Date` or that the date has changed (e.g. the not existing 31.02.2020)
+  if (
+    year > 0 &&
+    month > 0 &&
+    day > 0 &&
+    parsedDate.getDate() === day &&
+    parsedDate.getMonth() === month - 1
+  ) {
+    return parsedDate;
+  }
+  return undefined;
+}

package/components/localize/src/date/utils/addLeadingZero.js

@@ -0,0 +1,20 @@
+import { splitDate } from './splitDate.js';
+import { pad } from './pad.js';
+
+/**
+ * To add a leading zero to a single number
+ *
+ * @param {string} dateString
+ * @returns {string}
+ */
+export function addLeadingZero(dateString) {
+  const dateParts = splitDate(dateString);
+  const delimiter = dateParts ? dateParts[2] : '';
+  const dateArray =
+    dateString.split && dateString.split(delimiter).filter(str => str.trim().length > 0);
+  if (!dateArray || dateArray.length !== 3) {
+    // prevent fail on invalid dates
+    return '';
+  }
+  return dateArray.map(pad).join('-');
+}

package/components/localize/src/date/utils/clean.js

@@ -0,0 +1,13 @@
+import { trim } from './trim.js';
+
+/**
+ * To clean date from added characters from IE
+ *
+ * @param {string} dateAsString
+ * @returns {string}
+ */
+export function clean(dateAsString) {
+  // list of separators is from wikipedia https://www.wikiwand.com/en/Date_format_by_country
+  // slash, point, dash or space
+  return trim(dateAsString.replace(/[^\d-. /]/g, ''));
+}

package/components/localize/src/date/utils/forceShortMonthNamesForEnGb.js

@@ -0,0 +1,10 @@
+/**
+ * @param {string[]} months
+ */
+export function forceShortMonthNamesForEnGb(months) {
+  if (months[8] === 'Sept') {
+    // eslint-disable-next-line no-param-reassign
+    months[8] = 'Sep';
+  }
+  return months;
+}

package/components/localize/src/date/utils/normalizeIntlDate.js

@@ -0,0 +1,69 @@
+/**
+ * To filter out some added characters in IE
+ *
+ * @param {string} str
+ * @param {string} [locale='']
+ * @param {import('../../../types/LocalizeMixinTypes.js').FormatDateOptions} options Intl options are available
+ * @returns {string}
+ */
+export function normalizeIntlDate(str, locale = '', { weekday, year, month, day } = {}) {
+  const dateString = [];
+  for (let i = 0, n = str.length; i < n; i += 1) {
+    // remove unicode 160
+    if (str.charCodeAt(i) === 160) {
+      dateString.push(' ');
+      // remove unicode 8206
+    } else if (str.charCodeAt(i) === 8206) {
+      dateString.push('');
+    } else {
+      dateString.push(str.charAt(i));
+    }
+  }
+
+  const result = dateString.join('');
+
+  // Normalize webkit date formatting without year
+  if (!year && weekday === 'long' && month === 'long' && day === '2-digit') {
+    const CHINESE_LOCALES = [
+      // Webkit has a space while chrome and firefox not. Example: ("10月12日 星期六")
+      'zh-CN',
+      'zh-Hans',
+      'zh-Hans-CN',
+      'zh-Hans-HK',
+      'zh-Hans-MO',
+      'zh-Hans-SG',
+      // Skip 'zh-Hant' and 'zh-Hant-TW', since webkit/firefox/chromium are aligned.
+      // 'zh-Hant',
+      // 'zh-Hant-TW',
+      'zh-Hant-HK',
+      'zh-Hant-MO',
+    ];
+
+    if (CHINESE_LOCALES.includes(locale)) {
+      return result.replace(' ', '');
+    }
+
+    if (result.indexOf(',') === -1 && locale === 'en-GB') {
+      // Saturday 12 October -> Saturday, 12 October
+      const match = result.match(/^(\w*) (\d*) (\w*)$/);
+      if (match !== null) {
+        return `${match[1]}, ${match[2]} ${match[3]}`;
+      }
+    }
+
+    if (result.indexOf(', ') !== -1 && locale === 'sk-SK') {
+      // sobota, 12. októbra -> sobota 12. októbra
+      return result.replace(', ', ' ');
+    }
+
+    if (locale === 'en-PH') {
+      // Saturday, October 12 -> Saturday, 12 October
+      const match = result.match(/^(\w*), (\w*) (\d*)$/);
+      if (match !== null) {
+        return `${match[1]}, ${match[3]} ${match[2]}`;
+      }
+    }
+  }
+
+  return result;
+}

package/components/localize/src/date/utils/pad.js

@@ -0,0 +1,11 @@
+/**
+ * To get the absolute value of a number.
+ *
+ * @param  {string} n - number in string format
+ * @returns {string}
+ */
+export function pad(n) {
+  const digitRegex = /^\d+$/;
+  const v = digitRegex.test(String(n)) ? Math.abs(Number(n)) : n;
+  return String(v < 10 ? `0${v}` : v);
+}

package/components/localize/src/date/utils/sanitizedDateTimeFormat.js

@@ -0,0 +1,13 @@
+import { formatDate } from '../formatDate.js';
+import { clean } from './clean.js';
+
+/**
+ * To sanitize a date from IE11 handling
+ *
+ * @param {Date} date
+ * @returns {string}
+ */
+export function sanitizedDateTimeFormat(date) {
+  const fDate = formatDate(date);
+  return clean(fDate);
+}

package/components/localize/src/date/utils/splitDate.js

@@ -0,0 +1,9 @@
+/**
+ * To split a date into days, months, years, etc
+ *
+ * @param {string} dateAsString
+ * @returns {ArrayLike.<string> | null}
+ */
+export function splitDate(dateAsString) {
+  return dateAsString.match(/(\d{1,4})([^\d]+)(\d{1,4})([^\d]+)(\d{1,4})/);
+}

package/components/localize/src/date/utils/trim.js

@@ -0,0 +1,9 @@
+/**
+ * To trim the date
+ *
+ * @param {string} dateAsString
+ * @returns {string}
+ */
+export function trim(dateAsString) {
+  return dateAsString.replace(/^[^\d]*/g, '').replace(/[^\d]*$/g, '');
+}

package/components/localize/src/isLocalizeESModule.js

@@ -0,0 +1,7 @@
+/**
+ * @param {Object.<string, Object>} obj
+ * @returns {boolean}
+ */
+export default function isLocalizeESModule(obj) {
+  return !!(obj && obj.default && typeof obj.default === 'object' && Object.keys(obj).length === 1);
+}

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

@@ -0,0 +1,53 @@
+/** @typedef {import('../../types/LocalizeMixinTypes.js').NumberPostProcessor} NumberPostProcessor */
+
+import { localize } from '../singleton.js';
+import { getLocale } from '../utils/getLocale.js';
+import { formatNumberToParts } from './formatNumberToParts.js';
+
+/**
+ * Formats a number based on locale and options. It uses Intl for the formatting.
+ *
+ * @typedef {import('../../types/LocalizeMixinTypes.js').FormatNumberPart} FormatNumberPart
+ * @typedef {import('../../types/LocalizeMixinTypes.js').FormatNumberOptions} FormatOptions
+ * @param {number} number Number to be formatted
+ * @param {FormatOptions} [options] Intl options are available extended by roundMode and returnIfNaN
+ * @returns {string}
+ */
+export function formatNumber(number, options = /** @type {FormatOptions} */ ({})) {
+  if (number === undefined || number === null) return '';
+  const formattedToParts = formatNumberToParts(number, options);
+  // If number is not a number
+  if (
+    formattedToParts === options.returnIfNaN ||
+    formattedToParts === localize.formatNumberOptions.returnIfNaN
+  ) {
+    return /** @type {string} */ (formattedToParts);
+  }
+  let printNumberOfParts = '';
+  // update numberOfParts because there may be some parts added
+  const numberOfParts = formattedToParts && formattedToParts.length;
+  for (let i = 0; i < numberOfParts; i += 1) {
+    const part = /** @type {FormatNumberPart} */ (formattedToParts[i]);
+    printNumberOfParts += part.value;
+  }
+
+  const computedLocale = getLocale(options && options.locale);
+
+  if (localize.formatNumberOptions.postProcessors.size > 0) {
+    Array.from(localize.formatNumberOptions.postProcessors).forEach(([locale, fn]) => {
+      if (locale === computedLocale) {
+        printNumberOfParts = fn(printNumberOfParts);
+      }
+    });
+  }
+
+  if (options.postProcessors && options.postProcessors.size > 0) {
+    Array.from(options.postProcessors).forEach(([locale, fn]) => {
+      if (locale === computedLocale) {
+        printNumberOfParts = fn(printNumberOfParts);
+      }
+    });
+  }
+
+  return printNumberOfParts;
+}