svelte-tel-input 1.1.2 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # svelte-tel-input
 
+## 1.2.0
+
+### Minor Changes
+
+-   fix: improved validation ([#132](https://github.com/gyurielf/svelte-tel-input/pull/132))
+
+## 1.1.3
+
+### Patch Changes
+
+-   fix: make parsedTelInput prop optional ([#129](https://github.com/gyurielf/svelte-tel-input/pull/129))
+
 ## 1.1.2
 
 ### Patch Changes

package/components/Input/TelInput.svelte

@@ -1,13 +1,12 @@
 <script>import { createEventDispatcher, onMount } from "svelte";
-import metadata from "libphonenumber-js/metadata.min.json";
-import { parsePhoneNumberWithError, ParseError } from "libphonenumber-js";
+import { parsePhoneNumberWithError, ParseError } from "libphonenumber-js/max";
 import { telInputAction } from "../../utils/directives/telInputAction";
 import { normalizeTelInput, getCountryForPartialE164Number } from "../../utils/helpers";
 import { watcher } from "../../stores";
 const dispatch = createEventDispatcher();
 export let country;
 export let value;
-export let parsedTelInput;
+export let parsedTelInput = null;
 export let valid = true;
 export let disabled = false;
 let inputValue = value;
@@ -22,7 +21,7 @@ const updateCountry = (countryCode) => {
 };
 const handleParsePhoneNumber = (input, currCountry = null) => {
   if (input) {
-    const numberHasCountry = getCountryForPartialE164Number(input, { metadata });
+    const numberHasCountry = getCountryForPartialE164Number(input);
     if (numberHasCountry && numberHasCountry !== prevCountry) {
       updateCountry(numberHasCountry);
     }
@@ -64,7 +63,7 @@ const initialize = () => {
   if (value && country) {
     handleParsePhoneNumber(value, country);
   } else if (value) {
-    const numberHasCountry = getCountryForPartialE164Number(value, { metadata });
+    const numberHasCountry = getCountryForPartialE164Number(value);
     if (numberHasCountry) {
       updateCountry(numberHasCountry);
       handleParsePhoneNumber(value, country);

package/components/Input/TelInput.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         [x: string]: any;
         country: CountryCode | null;
         value: E164Number | null;
-        parsedTelInput: Partial<NormalizedTelNumber> | null;
+        parsedTelInput?: Partial<NormalizedTelNumber> | null | undefined;
         valid?: boolean | undefined;
         disabled?: boolean | undefined;
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -22,7 +22,7 @@
     "pnpm": ">= 7"
   },
   "dependencies": {
-    "libphonenumber-js": "^1.10.18",
+    "libphonenumber-js": "^1.10.20",
     "svelte": "^3.55.1"
   },
   "devDependencies": {
@@ -30,33 +30,35 @@
     "@changesets/get-github-info": "^0.5.2",
     "@changesets/types": "^5.2.1",
     "@macfja/svelte-persistent-store": "^2.2.1",
-    "@playwright/test": "^1.29.2",
-    "@sveltejs/adapter-static": "^1.0.4",
-    "@sveltejs/kit": "^1.1.1",
+    "@playwright/test": "^1.30.0",
+    "@sveltejs/adapter-static": "^2.0.1",
+    "@sveltejs/kit": "^1.8.3",
     "@sveltejs/package": "^1.0.2",
     "@testing-library/svelte": "^3.2.2",
-    "@typescript-eslint/eslint-plugin": "^5.48.2",
-    "@typescript-eslint/parser": "^5.48.2",
+    "@testing-library/user-event": "^14.4.3",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
     "autoprefixer": "^10.4.13",
-    "cssnano": "^5.1.14",
+    "cssnano": "^5.1.15",
     "dotenv": "^16.0.3",
-    "edit-package-json": "^0.8.7",
-    "eslint": "^8.32.0",
+    "edit-package-json": "^0.8.8",
+    "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "husky": "^8.0.3",
+    "jsdom": "^21.1.0",
     "micromatch": "^4.0.5",
     "postcss": "^8.4.21",
-    "prettier": "^2.8.3",
+    "prettier": "^2.8.4",
     "prettier-plugin-svelte": "^2.9.0",
     "schema-dts": "^1.1.0",
-    "svelte-check": "^3.0.2",
-    "svelte2tsx": "^0.6.0",
-    "tailwindcss": "^3.2.4",
-    "tslib": "^2.4.1",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4",
-    "vitest": "^0.27.2"
+    "svelte-check": "^3.0.3",
+    "svelte2tsx": "^0.6.1",
+    "tailwindcss": "^3.2.7",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.3",
+    "vitest": "^0.28.5"
   },
   "type": "module",
   "license": "MIT",

package/utils/helpers.d.ts

@@ -8,17 +8,16 @@ export declare const normalizeTelInput: (input?: PhoneNumber) => {
 export declare const isSelected: <T extends {
     id: string;
 }>(itemToSelect: string | T, selectedItem: string | T | null | undefined) => boolean;
-export declare const getInternationalPhoneNumberPrefix: (country: CountryCode, metadata: MetadataJson) => string;
+export declare const getInternationalPhoneNumberPrefix: (country: CountryCode) => string;
 /**
  * Trims phone number digits if they exceed the maximum possible length
  * for a national (significant) number for the country.
  * @param  {string} number - A possibly incomplete phone number digits string. Can be a possibly incomplete E.164 phone number.
  * @param  {string} country
- * @param  {object} metadata - `libphonenumber-js` metadata.
  * @return {string} Can be empty.
  */
-export declare const trimNumber: (number: E164Number, country: CountryCode, metadata: MetadataJson) => string;
-export declare const getMaxNumberLength: (country: CountryCode, metadata: MetadataJson) => number;
+export declare const trimNumber: (number: E164Number, country: CountryCode) => string;
+export declare const getMaxNumberLength: (country: CountryCode) => number;
 /**
  * If the phone number being input is an international one
  * then tries to derive the country from the phone number.
@@ -26,22 +25,19 @@ export declare const getMaxNumberLength: (country: CountryCode, metadata: Metada
  * @param {string} partialE164Number - A possibly incomplete E.164 phone number.
  * @param {string?} country - Currently selected country.
  * @param {string[]?} countries - A list of available countries. If not passed then "all countries" are assumed.
- * @param  {object} metadata - `libphonenumber-js` metadata.
  * @return {string?}
  */
-export declare const getCountryForPartialE164Number: (partialE164Number: E164Number, { country, countries, required, metadata }: {
+export declare const getCountryForPartialE164Number: (partialE164Number: E164Number, { country, countries, required }?: {
     country?: CountryCode | undefined;
     countries?: Countries[] | undefined;
     required?: boolean | undefined;
-    metadata: MetadataJson;
 }) => CountryCode | undefined;
 /**
  * Determines the country for a given (possibly incomplete) E.164 phone number.
  * @param  {string} number - A possibly incomplete E.164 phone number.
- * @param  {object} metadata - `libphonenumber-js` metadata.
  * @return {string?}
  */
-export declare const getCountryFromPossiblyIncompleteInternationalPhoneNumber: (number: E164Number, metadata: MetadataJson) => CountryCode | undefined;
+export declare const getCountryFromPossiblyIncompleteInternationalPhoneNumber: (number: E164Number) => CountryCode | undefined;
 /**
  * Parses a partially entered national phone number digits
  * (or a partially entered E.164 international phone number)
@@ -49,17 +45,16 @@ export declare const getCountryFromPossiblyIncompleteInternationalPhoneNumber: (
  * National significant number returned doesn't come with a national prefix.
  * @param {string} number - National number digits. Or possibly incomplete E.164 phone number.
  * @param {string?} country
- * @param {object} metadata - `libphonenumber-js` metadata.
  * @return {string} [result]
  */
-export declare const getNationalSignificantNumberDigits: (number: E164Number, country: CountryCode, metadata: MetadataJson) => import("libphonenumber-js/types").NationalNumber | undefined;
+export declare const getNationalSignificantNumberDigits: (number: E164Number, country: CountryCode) => import("libphonenumber-js/types").NationalNumber | undefined;
 /**
  * Checks if a partially entered E.164 phone number could belong to a country.
  * @param  {string} number
  * @param  {CountryCode} country
  * @return {boolean}
  */
-export declare const couldNumberBelongToCountry: (number: E164Number, country: CountryCode, metadata: MetadataJson) => boolean;
+export declare const couldNumberBelongToCountry: (number: E164Number, country: CountryCode) => boolean;
 export declare const isSupportedCountry: (country: CountryCode, metadata: MetadataJson) => boolean;
 /**
  * These mappings map a character (key) to a specific digit that should

package/utils/helpers.js

@@ -1,4 +1,4 @@
-import { AsYouType, Metadata, getCountryCallingCode } from 'libphonenumber-js/core';
+import { AsYouType, Metadata, getCountryCallingCode } from 'libphonenumber-js/max';
 export const capitalize = (str) => {
     return (str && str[0].toUpperCase() + str.slice(1).toLowerCase()) || '';
 };
@@ -67,13 +67,13 @@ export const isSelected = (itemToSelect, selectedItem) => {
         return false;
     }
 };
-export const getInternationalPhoneNumberPrefix = (country, metadata) => {
+export const getInternationalPhoneNumberPrefix = (country) => {
     const ONLY_DIGITS_REGEXP = /^\d+$/;
     // Standard international phone number prefix: "+" and "country calling code".
-    let prefix = '+' + getCountryCallingCode(country, metadata);
+    let prefix = '+' + getCountryCallingCode(country);
     // Get "leading digits" for a phone number of the country.
     // If there're "leading digits" then they can be part of the prefix too.
-    const newMetadata = new Metadata(metadata);
+    const newMetadata = new Metadata();
     const leadingDigits = newMetadata.numberingPlan?.leadingDigits();
     if (leadingDigits && ONLY_DIGITS_REGEXP.test(leadingDigits)) {
         prefix += leadingDigits;
@@ -85,22 +85,21 @@ export const getInternationalPhoneNumberPrefix = (country, metadata) => {
  * for a national (significant) number for the country.
  * @param  {string} number - A possibly incomplete phone number digits string. Can be a possibly incomplete E.164 phone number.
  * @param  {string} country
- * @param  {object} metadata - `libphonenumber-js` metadata.
  * @return {string} Can be empty.
  */
-export const trimNumber = (number, country, metadata) => {
-    const nationalSignificantNumberPart = getNationalSignificantNumberDigits(number, country, metadata);
+export const trimNumber = (number, country) => {
+    const nationalSignificantNumberPart = getNationalSignificantNumberDigits(number, country);
     if (nationalSignificantNumberPart) {
-        const overflowDigitsCount = nationalSignificantNumberPart.length - getMaxNumberLength(country, metadata);
+        const overflowDigitsCount = nationalSignificantNumberPart.length - getMaxNumberLength(country);
         if (overflowDigitsCount > 0) {
             return number.slice(0, number.length - overflowDigitsCount);
         }
     }
     return number;
 };
-export const getMaxNumberLength = (country, metadata) => {
+export const getMaxNumberLength = (country) => {
     // Get "possible lengths" for a phone number of the country.
-    const newMetadata = new Metadata(metadata);
+    const newMetadata = new Metadata();
     newMetadata.selectNumberingPlan(country);
     // Return the last "possible length".
     if (newMetadata.numberingPlan) {
@@ -117,15 +116,14 @@ export const getMaxNumberLength = (country, metadata) => {
  * @param {string} partialE164Number - A possibly incomplete E.164 phone number.
  * @param {string?} country - Currently selected country.
  * @param {string[]?} countries - A list of available countries. If not passed then "all countries" are assumed.
- * @param  {object} metadata - `libphonenumber-js` metadata.
  * @return {string?}
  */
-export const getCountryForPartialE164Number = (partialE164Number, { country, countries, required, metadata }) => {
+export const getCountryForPartialE164Number = (partialE164Number, { country, countries, required } = {}) => {
     if (partialE164Number === '+') {
         // Don't change the currently selected country yet.
         return country;
     }
-    const derived_country = getCountryFromPossiblyIncompleteInternationalPhoneNumber(partialE164Number, metadata);
+    const derived_country = getCountryFromPossiblyIncompleteInternationalPhoneNumber(partialE164Number);
     // If a phone number is being input in international form
     // and the country can already be derived from it,
     // then select that country.
@@ -135,9 +133,7 @@ export const getCountryForPartialE164Number = (partialE164Number, { country, cou
     // If "International" country option has not been disabled
     // and the international phone number entered doesn't correspond
     // to the currently selected country then reset the currently selected country.
-    else if (country &&
-        !required &&
-        !couldNumberBelongToCountry(partialE164Number, country, metadata)) {
+    else if (country && !required && !couldNumberBelongToCountry(partialE164Number, country)) {
         return undefined;
     }
     // Don't change the currently selected country.
@@ -146,11 +142,10 @@ export const getCountryForPartialE164Number = (partialE164Number, { country, cou
 /**
  * Determines the country for a given (possibly incomplete) E.164 phone number.
  * @param  {string} number - A possibly incomplete E.164 phone number.
- * @param  {object} metadata - `libphonenumber-js` metadata.
  * @return {string?}
  */
-export const getCountryFromPossiblyIncompleteInternationalPhoneNumber = (number, metadata) => {
-    const formatter = new AsYouType(undefined, metadata);
+export const getCountryFromPossiblyIncompleteInternationalPhoneNumber = (number) => {
+    const formatter = new AsYouType();
     formatter.input(number);
     // // `001` is a special "non-geograpical entity" code
     // // in Google's `libphonenumber` library.
@@ -166,12 +161,11 @@ export const getCountryFromPossiblyIncompleteInternationalPhoneNumber = (number,
  * National significant number returned doesn't come with a national prefix.
  * @param {string} number - National number digits. Or possibly incomplete E.164 phone number.
  * @param {string?} country
- * @param {object} metadata - `libphonenumber-js` metadata.
  * @return {string} [result]
  */
-export const getNationalSignificantNumberDigits = (number, country, metadata) => {
+export const getNationalSignificantNumberDigits = (number, country) => {
     // Create "as you type" formatter.
-    const formatter = new AsYouType(country, metadata);
+    const formatter = new AsYouType(country);
     // Input partial national phone number.
     formatter.input(number);
     // Return the parsed partial national phone number.
@@ -184,8 +178,8 @@ export const getNationalSignificantNumberDigits = (number, country, metadata) =>
  * @param  {CountryCode} country
  * @return {boolean}
  */
-export const couldNumberBelongToCountry = (number, country, metadata) => {
-    const intlPhoneNumberPrefix = getInternationalPhoneNumberPrefix(country, metadata);
+export const couldNumberBelongToCountry = (number, country) => {
+    const intlPhoneNumberPrefix = getInternationalPhoneNumberPrefix(country);
     let i = 0;
     while (i < number.length && i < intlPhoneNumberPrefix.length) {
         if (number[i] !== intlPhoneNumberPrefix[i]) {