ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Co-authored-by: Thijs Louisse <thijs.louisse@ing.com>
This commit is contained in:
gerjanvangeest 2022-05-10 15:16:24 +02:00 committed by Thijs Louisse
parent 33fd1bef09
commit d382887e67
14 changed files with 33 additions and 15062 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/little-melons-lay.md Normal file
View file

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

3
packages/input-tel-dropdown/src/LionInputTelDropdown.js
View file

@ -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

2
packages/input-tel-dropdown/types/index.d.ts vendored
View file

@ -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';

3
packages/input-tel/package.json
View file

@ -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",

14
packages/input-tel/src/LionInputTel.js
View file

@ -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 {FormatOptions & {regionCode: RegionCode; formatStrategy: FormatStrategy}} FormatOptionsTel
* @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
* @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

2
packages/input-tel/src/PhoneUtilManager.js
View file

@ -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;

6
packages/input-tel/src/formatters.js
View file

@ -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' }) {

14999
packages/input-tel/src/lib/awesome-phonenumber-esm.js
View file

File diff suppressed because it is too large Load diff

4
packages/input-tel/src/parsers.js
View file

@ -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 }) {

6
packages/input-tel/src/preprocessors.js
View file

@ -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(

2
packages/input-tel/src/validators.js
View file

@ -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
*/
/**

2
packages/input-tel/test/validators.test.js
View file

@ -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

42
packages/input-tel/types/index.d.ts vendored
View file

@ -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'

5
yarn.lock
View file

@ -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"