fix(input-tel): make use of awesome-phonenumber

Co-authored-by: Thijs Louisse <thijs.louisse@ing.com>

.changeset/little-melons-lay.md

@@ -0,0 +1,5 @@
+---
+'@lion/input-tel': patch
+---
+
+Make use of awsome-phonenumber, remove local copy

packages/input-tel-dropdown/src/LionInputTelDropdown.js

@@ -20,13 +20,12 @@ import { localize } from '@lion/localize';
  * @typedef {import('lit/directives/ref.js').Ref} Ref
  * @typedef {import('@lion/core').RenderOptions} RenderOptions
  * @typedef {import('@lion/form-core/types/FormatMixinTypes').FormatHost} FormatHost
- * @typedef {import('@lion/input-tel/types').FormatStrategy} FormatStrategy
  * @typedef {import('@lion/input-tel/types').RegionCode} RegionCode
  * @typedef {import('../types').TemplateDataForDropdownInputTel} TemplateDataForDropdownInputTel
  * @typedef {import('../types').OnDropdownChangeEvent} OnDropdownChangeEvent
  * @typedef {import('../types').DropdownRef} DropdownRef
  * @typedef {import('../types').RegionMeta} RegionMeta
- * @typedef {* & import('@lion/input-tel/src/lib/awesome-phonenumber-esm').default} AwesomePhoneNumber
+ * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
  * @typedef {import('@lion/select-rich').LionSelectRich} LionSelectRich
  * @typedef {import('@lion/overlays').OverlayController} OverlayController
  * @typedef {TemplateDataForDropdownInputTel & {data: {regionMetaList:RegionMeta[]}}} TemplateDataForIntlInputTel

packages/input-tel-dropdown/types/index.d.ts

@@ -1,4 +1,4 @@
-import { RegionCode } from '@lion/input-tel/types/types';
+import { RegionCode } from '@lion/input-tel/types';
 import { LionSelectRich } from '@lion/select-rich';
 import { LionCombobox } from '@lion/combobox';
 

packages/input-tel/package.json

@@ -40,7 +40,8 @@
     "@lion/core": "0.22.0",
     "@lion/form-core": "0.17.1",
     "@lion/input": "0.17.0",
-    "@lion/localize": "0.24.0"
+    "@lion/localize": "0.24.0",
+    "awesome-phonenumber": "^3.0.1"
   },
   "keywords": [
     "input",

packages/input-tel/src/LionInputTel.js

@@ -9,12 +9,12 @@ import { PhoneNumber } from './validators.js';
 import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
 
 /**
- * @typedef {import('../types').FormatStrategy} FormatStrategy
  * @typedef {import('../types').RegionCode} RegionCode
- * @typedef {import('../types').PhoneNumberType} PhoneNumberType
+ * @typedef {import('awesome-phonenumber').PhoneNumberFormat} PhoneNumberFormat
+ * @typedef {import('awesome-phonenumber').PhoneNumberTypes} PhoneNumberTypes
  * @typedef {import('@lion/form-core/types/FormatMixinTypes').FormatOptions} FormatOptions
- * @typedef {* & import('@lion/input-tel/src/lib/awesome-phonenumber-esm').default} AwesomePhoneNumber
+ * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
- * @typedef {FormatOptions & {regionCode: RegionCode; formatStrategy: FormatStrategy}} FormatOptionsTel
+ * @typedef {FormatOptions & {regionCode: RegionCode; formatStrategy: PhoneNumberFormat}} FormatOptionsTel
  */
 
 export class LionInputTel extends LocalizeMixin(LionInput) {
@@ -65,7 +65,7 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
    * -'unknown'
    * See https://www.npmjs.com/package/awesome-phonenumber
    * @readonly
-   * @property {PhoneNumberType|undefined} activePhoneNumberType
+   * @property {PhoneNumberTypes|undefined} activePhoneNumberTypes
    */
   get activePhoneNumberType() {
     let pn;
@@ -135,7 +135,7 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
      * Determines what the formatter output should look like.
      * Formatting strategies as provided by google-libphonenumber
      * See: https://www.npmjs.com/package/google-libphonenumber
-     * @type {FormatStrategy}
+     * @type {PhoneNumberFormat}
      */
     this.formatStrategy = 'international';
 
@@ -286,7 +286,7 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
    */
   _onPhoneNumberUtilReady() {
     // This should trigger a rerender in shadow dom
-    this._phoneUtil = /** @type {PhoneNumber} */ (PhoneUtilManager.PhoneUtil);
+    this._phoneUtil = /** @type {AwesomePhoneNumber} */ (PhoneUtilManager.PhoneUtil);
     // This should trigger a rerender in light dom
     this._scheduleLightDomRender();
     // Format when libPhoneNumber is loaded

packages/input-tel/src/PhoneUtilManager.js

@@ -9,7 +9,7 @@ let resolveLoaded;
  */
 export class PhoneUtilManager {
   static async loadLibPhoneNumber() {
-    const PhoneUtil = (await import('./lib/awesome-phonenumber-esm.js')).default;
+    const PhoneUtil = (await import('awesome-phonenumber')).default;
     this.PhoneUtil = PhoneUtil;
     resolveLoaded(undefined);
     return PhoneUtil;

packages/input-tel/src/formatters.js

@@ -1,16 +1,16 @@
 import { PhoneUtilManager } from './PhoneUtilManager.js';
 
 /**
- * @typedef {import('../types').FormatStrategy} FormatStrategy
+ * @typedef {import('awesome-phonenumber').PhoneNumberFormat} PhoneNumberFormat
  * @typedef {import('../types').RegionCode} RegionCode
- * @typedef {* & import('@lion/input-tel/src/lib/awesome-phonenumber-esm').default} AwesomePhoneNumber
+ * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
  */
 
 /**
  * @param {string} modelValue
  * @param {object} options
  * @param {RegionCode} options.regionCode
- * @param {FormatStrategy} [options.formatStrategy='international']
+ * @param {PhoneNumberFormat} [options.formatStrategy='international']
  * @returns {string}
  */
 export function formatPhoneNumber(modelValue, { regionCode, formatStrategy = 'international' }) {

packages/input-tel/src/parsers.js

@@ -2,12 +2,12 @@ import { PhoneUtilManager } from './PhoneUtilManager.js';
 
 /**
  * @typedef {import('../types').RegionCode} RegionCode
- * @typedef {* & import('@lion/input-tel/src/lib/awesome-phonenumber-esm').default} AwesomePhoneNumber
+ * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
  */
 
 /**
  * @param {string} viewValue
- * @param {{regionCode:RegionCode;}} options
+ * @param {{regionCode:RegionCode}} options
  * @returns {string}
  */
 export function parsePhoneNumber(viewValue, { regionCode }) {

packages/input-tel/src/preprocessors.js

@@ -2,9 +2,9 @@ import { PhoneUtilManager } from './PhoneUtilManager.js';
 import { formatPhoneNumber } from './formatters.js';
 
 /**
- * @typedef {import('../types').FormatStrategy} FormatStrategy
  * @typedef {import('../types').RegionCode} RegionCode
- * @typedef {* & import('@lion/input-tel/src/lib/awesome-phonenumber-esm').default} AwesomePhoneNumber
+ * @typedef {import('awesome-phonenumber').PhoneNumberFormat} PhoneNumberFormat
+ * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
  */
 
 /**
@@ -13,7 +13,7 @@ import { formatPhoneNumber } from './formatters.js';
  * @param {RegionCode} options.regionCode
  * @param {string} options.prevViewValue
  * @param {number} options.currentCaretIndex
- * @param {FormatStrategy} options.formatStrategy
+ * @param {PhoneNumberFormat} options.formatStrategy
  * @returns {{viewValue:string; caretIndex:number;}|undefined}
  */
 export function liveFormatPhoneNumber(

packages/input-tel/src/validators.js

@@ -3,7 +3,7 @@ import { PhoneUtilManager } from './PhoneUtilManager.js';
 
 /**
  * @typedef {import('../types').RegionCode} RegionCode
- * @typedef {* & import('@lion/input-tel/src/lib/awesome-phonenumber-esm').default} AwesomePhoneNumber
+ * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
  */
 
 /**

packages/input-tel/test/validators.test.js

@@ -8,7 +8,7 @@ import {
 } from '../test-helpers/mockPhoneUtilManager.js';
 
 /**
- * @typedef {* & import('@lion/input-tel/src/lib/awesome-phonenumber-esm').default} AwesomePhoneNumber
+ * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
  */
 
 // For enum output, see: https://www.npmjs.com/package/awesome-phonenumber

packages/input-tel/types/index.d.ts

@@ -1,46 +1,6 @@
-/*
- * Phone number types as provided by google-libphonenumber
- * See:
- * - https://www.npmjs.com/package/google-libphonenumber
- * - https://www.npmjs.com/package/awesome-phonenumber
- */
-export type PhoneNumberType =
-  | 'fixed-line'
-  | 'fixed-line-or-mobile'
-  | 'mobile'
-  | 'pager'
-  | 'personal-number'
-  | 'premium-rate'
-  | 'shared-cost'
-  | 'toll-free'
-  | 'uan'
-  | 'voip'
-  | 'unknown';
-
-/*
- * Phone number possibilities as provided by google-libphonenumber
- * See:
- * - https://www.npmjs.com/package/google-libphonenumber
- * - https://www.npmjs.com/package/awesome-phonenumber
- */
-export type PhoneNumberPossibility =
-  | 'is-possible'
-  | 'invalid-country-code'
-  | 'too-long'
-  | 'too-short'
-  | 'unknown';
-
-/*
- * Phone number formats / formatting strategies as provided by google-libphonenumber
- * See:
- * - https://www.npmjs.com/package/google-libphonenumber
- * - https://www.npmjs.com/package/awesome-phonenumber
- */
-export type FormatStrategy = 'e164' | 'international' | 'national' | 'rfc3966' | 'significant';
-
 /**
  * Supported countries/regions as provided via
- * `libphonenumber.PhoneNumberUtil.getInstance().getSupportedRegions()`
+ * `libphonenumber.getSupportedRegionCodes()`
  */
 export type RegionCode =
   | 'AC'

yarn.lock

@@ -3430,6 +3430,11 @@ autosize@4.0.2:
   resolved "https://registry.yarnpkg.com/autosize/-/autosize-4.0.2.tgz#073cfd07c8bf45da4b9fd153437f5bafbba1e4c9"
   integrity sha512-jnSyH2d+qdfPGpWlcuhGiHmqBJ6g3X+8T+iRwFrHPLVcdoGJE/x6Qicm6aDHfTsbgZKxyV8UU/YB2p4cjKDRRA==
 
+awesome-phonenumber@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/awesome-phonenumber/-/awesome-phonenumber-3.0.1.tgz#8d73aaa1c2b0a660b117567b0d9797623457e1d0"
+  integrity sha512-H5rqjTJ1+HxmyuSKDoPgvHUgP+RBRhtWQ25ccy4BmSLQL5UVg3K+yo2QCX4IlkxiVNst3suGMArV9TH7B1KEPw==
+
 axe-core@^4.3.3:
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.3.3.tgz#b55cd8e8ddf659fe89b064680e1c6a4dceab0325"