@lion/ui 0.0.1

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

@@ -0,0 +1,353 @@
+import { Unparseable } from '@lion/ui/form-core.js';
+import { LocalizeMixin, localize } from '@lion/ui/localize.js';
+import { LionInput } from '@lion/ui/input.js';
+
+import { PhoneUtilManager } from './PhoneUtilManager.js';
+import { liveFormatPhoneNumber } from './preprocessors.js';
+import { formatPhoneNumber } from './formatters.js';
+import { parsePhoneNumber } from './parsers.js';
+import { PhoneNumber } from './validators.js';
+import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
+
+/**
+ * @typedef {import('../types/index.js').RegionCode} RegionCode
+ * @typedef {import('awesome-phonenumber').PhoneNumberFormat} PhoneNumberFormat
+ * @typedef {import('awesome-phonenumber').PhoneNumberTypes} PhoneNumberTypes
+ * @typedef {import('../../form-core/types/FormatMixinTypes.js').FormatOptions} FormatOptions
+ * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
+ * @typedef {FormatOptions & {regionCode: RegionCode; formatStrategy: PhoneNumberFormat; formatCountryCodeStyle: string;}} FormatOptionsTel
+ */
+
+export class LionInputTel extends LocalizeMixin(LionInput) {
+  /**
+   * @configure LitElement
+   */
+  static properties = {
+    allowedRegions: { type: Array },
+    formatStrategy: { type: String, attribute: 'format-strategy' },
+    formatCountryCodeStyle: { type: String, attribute: 'format-country-code-style' },
+    activeRegion: { type: String },
+    _phoneUtil: { type: Object, state: true },
+    _needsLightDomRender: { type: Number, state: true },
+  };
+
+  static localizeNamespaces = [
+    { 'lion-input-tel': localizeNamespaceLoader },
+    ...super.localizeNamespaces,
+  ];
+
+  /**
+   * Currently active region based on:
+   * 1. allowed regions: get the region from configured allowed regions (if one entry)
+   * 2. user input: try to derive active region from user input
+   * 3. locale: try to get the region from locale (`html[lang]` attribute)
+   * @readonly
+   * @property {RegionCode|undefined}activeRegion
+   */
+  get activeRegion() {
+    return this.__activeRegion;
+  }
+
+  // @ts-ignore read only
+  // eslint-disable-next-line class-methods-use-this, no-empty-function
+  set activeRegion(v) {}
+
+  /**
+   * Type of phone number, derived from textbox value. Enum with values:
+   * -'fixed-line'
+   * -'fixed-line-or-mobile'
+   * -'mobile'
+   * -'pager'
+   * -'personal-number'
+   * -'premium-rate'
+   * -'shared-cost'
+   * -'toll-free'
+   * -'uan'
+   * -'voip'
+   * -'unknown'
+   * See https://www.npmjs.com/package/awesome-phonenumber
+   * @readonly
+   * @property {PhoneNumberTypes|undefined} activePhoneNumberTypes
+   */
+  get activePhoneNumberType() {
+    let pn;
+    try {
+      pn = this._phoneUtil && this._phoneUtil(this.modelValue, this.activeRegion);
+      // eslint-disable-next-line no-empty
+    } catch (_) {}
+    return pn?.g?.type || 'unknown';
+  }
+
+  // @ts-ignore read only
+  // eslint-disable-next-line class-methods-use-this, no-empty-function
+  set activePhoneNumberType(v) {}
+
+  /**
+   * Protected setter for activeRegion, only meant for subclassers
+   * @protected
+   * @param {RegionCode|undefined} newValue
+   */
+  _setActiveRegion(newValue) {
+    const oldValue = this.activeRegion;
+    this.__activeRegion = newValue;
+    this.requestUpdate('activeRegion', oldValue);
+  }
+
+  /**
+   * Used for rendering the region/country list
+   * @property _allowedOrAllRegions
+   * @type {RegionCode[]}
+   */
+  get _allowedOrAllRegions() {
+    return (
+      (this.allowedRegions?.length
+        ? this.allowedRegions
+        : this._phoneUtil?.getSupportedRegionCodes()) || []
+    );
+  }
+
+  /**
+   * @property _phoneUtilLoadComplete
+   * @protected
+   * @type {Promise<PhoneNumber>}
+   */
+  // eslint-disable-next-line class-methods-use-this
+  get _phoneUtilLoadComplete() {
+    return PhoneUtilManager.loadComplete;
+  }
+
+  /**
+   * Set a default name for this field, so that validation feedback will be always
+   * accessible and linguistically correct
+   * @configure FormControlMixin
+   */
+  // @ts-expect-error
+  // eslint-disable-next-line class-methods-use-this
+  get fieldName() {
+    return localize.msg('lion-input-tel:phoneNumber');
+  }
+
+  /**
+   * @lifecycle platform
+   */
+  constructor() {
+    super();
+
+    /**
+     * Determines what the formatter output should look like.
+     * Formatting strategies as provided by google-libphonenumber
+     * See: https://www.npmjs.com/package/google-libphonenumber
+     * @type {PhoneNumberFormat}
+     */
+    this.formatStrategy = 'international';
+
+    /**
+     * Extra styling of the format strategy
+     * default | parentheses
+     * @type {string}
+     */
+    this.formatCountryCodeStyle = 'default';
+
+    /**
+     * The regions that should be considered when international phone numbers are detected.
+     * (when not configured, all regions worldwide will be considered)
+     * @type {RegionCode[]}
+     */
+    this.allowedRegions = [];
+
+    /** @private */
+    this.__isPhoneNumberValidatorInstance = new PhoneNumber();
+    /**  @configures ValidateMixin */
+    this.defaultValidators.push(this.__isPhoneNumberValidatorInstance);
+
+    // Expose awesome-phonenumber lib for Subclassers
+    /**
+     * @protected
+     * @type {AwesomePhoneNumber|null}
+     */
+    this._phoneUtil = PhoneUtilManager.isLoaded
+      ? /** @type {AwesomePhoneNumber} */ (PhoneUtilManager.PhoneUtil)
+      : null;
+
+    /**
+     * Helper that triggers a light dom render aligned with update loop.
+     * TODO: combine with render fn of SlotMixin
+     * @protected
+     * @type {number}
+     */
+    this._needsLightDomRender = 0;
+
+    if (!PhoneUtilManager.isLoaded) {
+      PhoneUtilManager.loadComplete.then(() => {
+        this._onPhoneNumberUtilReady();
+      });
+    }
+  }
+
+  /**
+   * @param {import('lit-element').PropertyValues } changedProperties
+   */
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+
+    // This will trigger the right keyboard on mobile
+    this._inputNode.inputMode = 'tel';
+  }
+
+  /**
+   * @param {import('lit-element').PropertyValues } changedProperties
+   */
+  updated(changedProperties) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('activeRegion')) {
+      // Make sure new modelValue is computed, but prevent formattedValue from being set when focused
+      this.__isUpdatingRegionWhileFocused = this.focused;
+      this._calculateValues({ source: null });
+      this.__isUpdatingRegionWhileFocused = false;
+
+      this.__isPhoneNumberValidatorInstance.param = this.activeRegion;
+      /** @type {FormatOptionsTel} */
+      (this.formatOptions).regionCode = /** @type {RegionCode} */ (this.activeRegion);
+    }
+
+    if (changedProperties.has('formatStrategy')) {
+      this._calculateValues({ source: null });
+      /** @type {FormatOptionsTel} */
+      (this.formatOptions).formatStrategy = this.formatStrategy;
+    }
+
+    if (changedProperties.has('formatCountryCodeStyle')) {
+      this._calculateValues({ source: null });
+      /** @type {FormatOptionsTel} */
+      (this.formatOptions).formatCountryCodeStyle = this.formatCountryCodeStyle;
+    }
+
+    if (changedProperties.has('modelValue') || changedProperties.has('allowedRegions')) {
+      this.__calculateActiveRegion();
+    }
+  }
+
+  /**
+   * @configure LocalizeMixin
+   */
+  onLocaleUpdated() {
+    super.onLocaleUpdated();
+
+    const localeSplitted = localize.locale.split('-');
+    /**
+     * @protected
+     * @type {RegionCode}
+     */
+    this._langIso = /** @type {RegionCode} */ (
+      localeSplitted[localeSplitted.length - 1].toUpperCase()
+    );
+    this.__calculateActiveRegion();
+  }
+
+  /**
+   * @configure FormatMixin
+   * @param {string} modelValue
+   * @returns {string}
+   */
+  formatter(modelValue) {
+    return formatPhoneNumber(modelValue, {
+      regionCode: /** @type {RegionCode} */ (this.activeRegion),
+      formatStrategy: this.formatStrategy,
+      formatCountryCodeStyle: this.formatCountryCodeStyle,
+    });
+  }
+
+  /**
+   * @configure FormatMixin
+   * @param {string} viewValue a phone number without (or with) country code, like '06 12345678'
+   * @returns {string} a trimmed phone number with country code, like '+31612345678'
+   */
+  parser(viewValue) {
+    return parsePhoneNumber(viewValue, {
+      regionCode: /** @type {RegionCode} */ (this.activeRegion),
+    });
+  }
+
+  /**
+   * @configure FormatMixin
+   * @param {string} viewValue
+   * @param {object} options
+   * @param {string} options.prevViewValue
+   * @param {number} options.currentCaretIndex
+   * @returns {{ viewValue: string; caretIndex: number; } | undefined }
+   */
+  preprocessor(viewValue, { currentCaretIndex, prevViewValue }) {
+    return liveFormatPhoneNumber(viewValue, {
+      regionCode: /** @type {RegionCode} */ (this.activeRegion),
+      formatStrategy: this.formatStrategy,
+      formatCountryCodeStyle: this.formatCountryCodeStyle,
+      currentCaretIndex,
+      prevViewValue,
+    });
+  }
+
+  /**
+   * Do not reflect back .formattedValue during typing (this normally wouldn't happen when
+   * FormatMixin calls _calculateValues based on user input, but for LionInputTel we need to
+   * call it on .activeRegion change)
+   * @enhance FormatMixin
+   * @returns {boolean}
+   */
+  _reflectBackOn() {
+    return !this.__isUpdatingRegionWhileFocused && super._reflectBackOn();
+  }
+
+  /**
+   * @protected
+   */
+  _onPhoneNumberUtilReady() {
+    // This should trigger a rerender in shadow dom
+    this._phoneUtil = /** @type {AwesomePhoneNumber} */ (PhoneUtilManager.PhoneUtil);
+    // This should trigger a rerender in light dom
+    this._scheduleLightDomRender();
+    // Format when libPhoneNumber is loaded
+    this._calculateValues({ source: null });
+    this.__calculateActiveRegion();
+  }
+
+  /**
+   * This allows to hook into the update hook
+   * @protected
+   */
+  _scheduleLightDomRender() {
+    this._needsLightDomRender += 1;
+  }
+
+  /**
+   * @private
+   */
+  __calculateActiveRegion() {
+    // 1. Get the region from preconfigured allowed region (if one entry)
+    if (this.allowedRegions?.length === 1) {
+      this._setActiveRegion(this.allowedRegions[0]);
+      return;
+    }
+
+    // 2. Try to derive action region from user value
+    const regex = /[+0-9]+/gi;
+    const value = !(this.modelValue instanceof Unparseable)
+      ? this.modelValue
+      : this.value.match(regex)?.join('');
+    const regionDerivedFromValue = value && this._phoneUtil && this._phoneUtil(value).g?.regionCode;
+
+    if (regionDerivedFromValue && this._allowedOrAllRegions.includes(regionDerivedFromValue)) {
+      this._setActiveRegion(regionDerivedFromValue);
+      return;
+    }
+
+    // 3. Try to get the region from locale
+    if (this._langIso && this._allowedOrAllRegions.includes(this._langIso)) {
+      this._setActiveRegion(this._langIso);
+      return;
+    }
+
+    // 4. Not derivable
+    this._setActiveRegion(undefined);
+  }
+}

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

@@ -0,0 +1,38 @@
+/** @type {(value: any) => void} */
+let resolveLoaded;
+
+/**
+ * - Handles lazy loading of the (relatively large) google-libphonenumber library, allowing
+ * for quick first paints
+ * - Maintains one instance of phoneNumberUtil that can be shared across multiple places
+ * - Allows for easy mocking in unit tests
+ */
+export class PhoneUtilManager {
+  static async loadLibPhoneNumber() {
+    const PhoneUtil = (await import('awesome-phonenumber')).default;
+    this.PhoneUtil = PhoneUtil;
+    resolveLoaded(undefined);
+    return PhoneUtil;
+  }
+
+  /**
+   * Check if google-libphonenumber has been loaded
+   */
+  static get isLoaded() {
+    return Boolean(this.PhoneUtil);
+  }
+}
+
+/**
+ * Wait till google-libphonenumber has been loaded
+ * @example
+ * ```js
+ * await PhoneUtilManager.loadComplete;
+ * ```
+ */
+PhoneUtilManager.loadComplete = new Promise(resolve => {
+  resolveLoaded = resolve;
+});
+
+// initialize
+PhoneUtilManager.loadLibPhoneNumber();

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

@@ -0,0 +1,87 @@
+import { PhoneUtilManager } from './PhoneUtilManager.js';
+
+/**
+ * @typedef {import('awesome-phonenumber').PhoneNumberFormat} PhoneNumberFormat
+ * @typedef {import('../types/index.js').RegionCode} RegionCode
+ * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
+ */
+
+/**
+ * @param {string} value
+ * @param {object} options
+ * @param {RegionCode} options.regionCode
+ * @param {string} options.formatCountryCodeStyle
+ */
+export function getFormatCountryCodeStyle(value, { regionCode, formatCountryCodeStyle }) {
+  const countryCode = PhoneUtilManager?.PhoneUtil?.getCountryCodeForRegionCode(regionCode);
+  if (
+    formatCountryCodeStyle === 'parentheses' &&
+    countryCode &&
+    value.includes(`+${countryCode}`) &&
+    !value.includes(`(`)
+  ) {
+    return value.replace(`+${countryCode}`, `(+${countryCode})`);
+  }
+  return value;
+}
+
+/**
+ * @param {string} modelValue
+ * @param {object} options
+ * @param {RegionCode} options.regionCode
+ * @param {PhoneNumberFormat} [options.formatStrategy='international']
+ * @param {string} [options.formatCountryCodeStyle='default']
+ * @returns {string}
+ */
+export function formatPhoneNumber(
+  modelValue,
+  { regionCode, formatStrategy = 'international', formatCountryCodeStyle = 'default' },
+) {
+  // Do not format when not loaded
+  if (!PhoneUtilManager.isLoaded) {
+    return modelValue;
+  }
+
+  // eslint-disable-next-line prefer-destructuring
+  const PhoneUtil = /** @type {AwesomePhoneNumber} */ (PhoneUtilManager.PhoneUtil);
+
+  let pn;
+  try {
+    pn = new PhoneUtil(modelValue, regionCode);
+    // eslint-disable-next-line no-empty
+  } catch (_) {}
+
+  if (modelValue?.length >= 4 && modelValue?.length <= 16 && pn?.isValid()) {
+    let formattedValue;
+
+    switch (formatStrategy) {
+      case 'e164':
+        formattedValue = pn.getNumber('e164'); // -> '+46707123456' (default)
+        break;
+      case 'international':
+        formattedValue = pn.getNumber('international'); // -> '+46 70 712 34 56'
+        break;
+      case 'national':
+        formattedValue = pn.getNumber('national'); // -> '070-712 34 56'
+        break;
+      case 'rfc3966':
+        formattedValue = pn.getNumber('rfc3966'); // -> 'tel:+46-70-712-34-56'
+        break;
+      case 'significant':
+        formattedValue = pn.getNumber('significant'); // -> '707123456'
+        break;
+      default:
+        break;
+    }
+
+    if (formatCountryCodeStyle !== 'default') {
+      return getFormatCountryCodeStyle(formattedValue, { regionCode, formatCountryCodeStyle });
+    }
+    return formattedValue;
+  }
+
+  if (formatCountryCodeStyle !== 'default') {
+    return getFormatCountryCodeStyle(modelValue, { regionCode, formatCountryCodeStyle });
+  }
+  return modelValue;
+}

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

@@ -0,0 +1,75 @@
+/* eslint-disable import/no-extraneous-dependencies */
+export const localizeNamespaceLoader = /** @param {string} locale */ locale => {
+  switch (locale) {
+    case 'bg-BG':
+      return import('@lion/ui/input-tel-translations/bg-BG.js');
+    case 'bg':
+      return import('@lion/ui/input-tel-translations/bg.js');
+    case 'cs-CZ':
+      return import('@lion/ui/input-tel-translations/cs-CZ.js');
+    case 'cs':
+      return import('@lion/ui/input-tel-translations/cs.js');
+    case 'de-DE':
+      return import('@lion/ui/input-tel-translations/de-DE.js');
+    case 'de':
+      return import('@lion/ui/input-tel-translations/de.js');
+    case 'en-AU':
+      return import('@lion/ui/input-tel-translations/en-AU.js');
+    case 'en-GB':
+      return import('@lion/ui/input-tel-translations/en-GB.js');
+    case 'en-US':
+      return import('@lion/ui/input-tel-translations/en-US.js');
+    case 'en-PH':
+    case 'en':
+      return import('@lion/ui/input-tel-translations/en.js');
+    case 'es-ES':
+      return import('@lion/ui/input-tel-translations/es-ES.js');
+    case 'es':
+      return import('@lion/ui/input-tel-translations/es.js');
+    case 'fr-FR':
+      return import('@lion/ui/input-tel-translations/fr-FR.js');
+    case 'fr-BE':
+      return import('@lion/ui/input-tel-translations/fr-BE.js');
+    case 'fr':
+      return import('@lion/ui/input-tel-translations/fr.js');
+    case 'hu-HU':
+      return import('@lion/ui/input-tel-translations/hu-HU.js');
+    case 'hu':
+      return import('@lion/ui/input-tel-translations/hu.js');
+    case 'it-IT':
+      return import('@lion/ui/input-tel-translations/it-IT.js');
+    case 'it':
+      return import('@lion/ui/input-tel-translations/it.js');
+    case 'nl-BE':
+      return import('@lion/ui/input-tel-translations/nl-BE.js');
+    case 'nl-NL':
+      return import('@lion/ui/input-tel-translations/nl-NL.js');
+    case 'nl':
+      return import('@lion/ui/input-tel-translations/nl.js');
+    case 'pl-PL':
+      return import('@lion/ui/input-tel-translations/pl-PL.js');
+    case 'pl':
+      return import('@lion/ui/input-tel-translations/pl.js');
+    case 'ro-RO':
+      return import('@lion/ui/input-tel-translations/ro-RO.js');
+    case 'ro':
+      return import('@lion/ui/input-tel-translations/ro.js');
+    case 'ru-RU':
+      return import('@lion/ui/input-tel-translations/ru-RU.js');
+    case 'ru':
+      return import('@lion/ui/input-tel-translations/ru.js');
+    case 'sk-SK':
+      return import('@lion/ui/input-tel-translations/sk-SK.js');
+    case 'sk':
+      return import('@lion/ui/input-tel-translations/sk.js');
+    case 'uk-UA':
+      return import('@lion/ui/input-tel-translations/uk-UA.js');
+    case 'uk':
+      return import('@lion/ui/input-tel-translations/uk.js');
+    case 'zh-CN':
+    case 'zh':
+      return import('@lion/ui/input-tel-translations/zh.js');
+    default:
+      return import('@lion/ui/input-tel-translations/en.js');
+  }
+};

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

@@ -0,0 +1,34 @@
+import { PhoneUtilManager } from './PhoneUtilManager.js';
+
+/**
+ * @typedef {import('../types/index.js').RegionCode} RegionCode
+ * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
+ */
+
+/**
+ * @param {string} viewValue
+ * @param {{regionCode:RegionCode}} options
+ * @returns {string}
+ */
+export function parsePhoneNumber(viewValue, { regionCode }) {
+  // Do not format when not loaded
+  if (!PhoneUtilManager.isLoaded) {
+    return viewValue;
+  }
+
+  // eslint-disable-next-line prefer-destructuring
+  const PhoneNumber = /** @type {AwesomePhoneNumber} */ (PhoneUtilManager.PhoneUtil);
+  const regex = /[+0-9]+/gi;
+  const strippedViewValue = viewValue.match(regex)?.join('');
+  let pn;
+  try {
+    pn = PhoneNumber(strippedViewValue, regionCode);
+    // eslint-disable-next-line no-empty
+  } catch (_) {}
+
+  if (pn) {
+    return pn.getNumber('e164');
+  }
+
+  return viewValue;
+}

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

@@ -0,0 +1,66 @@
+import { formatPhoneNumber, getFormatCountryCodeStyle } from './formatters.js';
+import { PhoneUtilManager } from './PhoneUtilManager.js';
+
+/**
+ * @typedef {import('../types/index.js').RegionCode} RegionCode
+ * @typedef {import('awesome-phonenumber').PhoneNumberFormat} PhoneNumberFormat
+ * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
+ */
+
+/**
+ * @param {string} viewValue
+ * @param {object} options
+ * @param {RegionCode} options.regionCode
+ * @param {string} options.prevViewValue
+ * @param {number} options.currentCaretIndex
+ * @param {PhoneNumberFormat} options.formatStrategy
+ * @param {string?} [options.formatCountryCodeStyle='default']
+ * @returns {{viewValue:string; caretIndex:number;}|undefined}
+ */
+export function liveFormatPhoneNumber(
+  viewValue,
+  { regionCode, formatStrategy, prevViewValue, currentCaretIndex, formatCountryCodeStyle },
+) {
+  const diff = viewValue.length - prevViewValue.length;
+  // Do not format when not loaded
+  if (diff <= 0 || !PhoneUtilManager.isLoaded) {
+    return undefined;
+  }
+
+  // eslint-disable-next-line prefer-destructuring
+  const PhoneNumber = /** @type {AwesomePhoneNumber} */ (PhoneUtilManager.PhoneUtil);
+  const ayt = PhoneNumber.getAsYouType(regionCode);
+
+  for (const char of viewValue) {
+    if (char !== '') {
+      ayt.addChar(char);
+    }
+  }
+
+  let parenthesesAdded = false;
+  let newViewValue = formatPhoneNumber(ayt.number(), { regionCode, formatStrategy });
+  if (formatCountryCodeStyle === 'parentheses' && regionCode && !newViewValue.includes(`(`)) {
+    newViewValue = getFormatCountryCodeStyle(newViewValue, { regionCode, formatCountryCodeStyle });
+    parenthesesAdded = true;
+  }
+
+  /**
+   * Given following situation:
+   * - viewValue: `+316123`
+   * - currentCaretIndex: 2 (inbetween 3 and 1)
+   * - prevViewValue `+36123` (we inserted '1' at position 2)
+   * => we should get `+31 6123`, and new caretIndex should be 3, and not newViewValue.length
+   */
+  const countryCode = PhoneUtilManager?.PhoneUtil?.getCountryCodeForRegionCode(regionCode);
+  const diffBetweenNewAndCurrent = newViewValue.length - viewValue.length;
+  let newCaretIndex = currentCaretIndex + diffBetweenNewAndCurrent;
+  if (
+    parenthesesAdded &&
+    countryCode &&
+    viewValue.length > countryCode.toString().length + 1 &&
+    currentCaretIndex <= countryCode.toString().length + 1
+  ) {
+    newCaretIndex -= 2;
+  }
+  return newViewValue ? { viewValue: newViewValue, caretIndex: newCaretIndex } : undefined;
+}