svelte-tel-input 3.2.2 → 3.3.1

package/README.md

@@ -26,16 +26,17 @@ npm install --save svelte-tel-input
 - Prevent non-digits typing into the input, except the leading `+` sign (and `space` optionally).
 - Handle copy-pasted phone numbers, it's sanitize non-digit characters except the leading `+` sign (and `space` optionally).
 - Automatic placeholder generation for the selected country.
+- International or National formatted phone numbers.
 
 ## Usage
 
 ### Advanced
 
-_Snippet would be too long_ - [REPL](https://stackblitz.com/edit/svelte-tel-input-repl-1jfaar?file=README.md) (StackBlitz)
+_Snippet would be too long_ - [Example](https://github.com/gyurielf/svelte-tel-input/blob/main/apps/site/src/lib/components/examples/AdvancedPhoneInput.svelte) - [REPL](https://stackblitz.com/edit/svelte-tel-input-repl-1jfaar?file=README.md) (StackBlitz)
 
 ### Basic
 
-[REPL](https://stackblitz.com/edit/svelte-tel-input-repl?file=README.md) (StackBlitz)
+[Example](https://github.com/gyurielf/svelte-tel-input/blob/main/apps/site/src/lib/components/examples/BasicPhoneInput.svelte) - [REPL](https://stackblitz.com/edit/svelte-tel-input-repl?file=README.md) (StackBlitz)
 
 ```html
 <script lang="ts">
@@ -127,7 +128,9 @@ Config options:
     // Allow or disallow spaces in the input field
     spaces: true,
     // If you have a parsed phone number and you change country manually from outside, then it's set the `valid` prop to false.
-    invalidateOnCountryChange: false
+    invalidateOnCountryChange: false,
+    // Formatted output `national` | `international`
+    format: 'national'
 }
 ```
 

package/dist/components/{Input → input}/TelInput.svelte

@@ -11,7 +11,8 @@ const dispatch = createEventDispatcher();
 const defaultOptions = {
   autoPlaceholder: true,
   spaces: true,
-  invalidateOnCountryChange: false
+  invalidateOnCountryChange: false,
+  format: "national"
 };
 export let country;
 export let value;
@@ -33,9 +34,10 @@ const handleInputAction = (value2) => {
   handleParsePhoneNumber(value2, country);
 };
 const updateCountry = (countryCode) => {
-  country = countryCode;
-  prevCountry = countryCode;
-  dispatch("updateCountry", country);
+  if (countryCode !== country) {
+    country = prevCountry = countryCode;
+    dispatch("updateCountry", country);
+  }
   return country;
 };
 const handleParsePhoneNumber = (input, currCountry = null) => {
@@ -59,16 +61,14 @@ const handleParsePhoneNumber = (input, currCountry = null) => {
         throw err;
       }
     }
-    if (detailedValue?.isValid && combinedOptions.spaces && detailedValue?.formatOriginal) {
-      if (inputValue === detailedValue?.formatOriginal) {
-        inputValue = null;
-      }
-      inputValue = detailedValue?.formatOriginal;
-    } else if (detailedValue?.isValid && detailedValue?.nationalNumber) {
-      if (inputValue === detailedValue?.nationalNumber) {
-        inputValue = null;
+    if (detailedValue?.isValid) {
+      const formatOption = combinedOptions.format === "national" ? "nationalNumber" : "e164";
+      const formattedValue = combinedOptions.format === "national" ? "formatOriginal" : "formatInternational";
+      if (combinedOptions.spaces && detailedValue?.[formattedValue]) {
+        inputValue = inputValue === detailedValue[formattedValue] ? null : detailedValue[formattedValue] ?? null;
+      } else if (detailedValue?.[formatOption]) {
+        inputValue = inputValue === detailedValue[formatOption] ? null : detailedValue[formatOption] ?? null;
       }
-      inputValue = detailedValue?.nationalNumber;
     }
     value = detailedValue?.e164 ?? input ?? null;
     valid = detailedValue?.isValid ?? false;
@@ -80,9 +80,7 @@ const handleParsePhoneNumber = (input, currCountry = null) => {
       prevCountry = currCountry;
       valid = !options.invalidateOnCountryChange;
       value = null;
-      if (inputValue !== null || inputValue !== "") {
-        inputValue = null;
-      }
+      inputValue = null;
       detailedValue = null;
       dispatch("updateValid", valid);
       dispatch("updateValue", value);
@@ -109,7 +107,10 @@ const countryChangeWatch = watcher(null, countryChangeWatchFunction);
 $:
   $countryChangeWatch = country;
 $:
-  getPlaceholder = combinedOptions.autoPlaceholder ? country ? generatePlaceholder(country) : null : placeholder;
+  getPlaceholder = combinedOptions.autoPlaceholder ? country ? generatePlaceholder(country, {
+    format: combinedOptions.format,
+    spaces: combinedOptions.spaces
+  }) : null : placeholder;
 $:
   if (value === null && inputValue !== null && detailedValue !== null) {
     inputValue = null;
@@ -117,15 +118,8 @@ $:
     dispatch("updateDetailedValue", detailedValue);
   }
 const initialize = () => {
-  if (value && country) {
-    handleParsePhoneNumber(value, country);
-  } else if (value) {
-    const numberHasCountry = getCountryForPartialE164Number(value);
-    if (numberHasCountry) {
-      handleParsePhoneNumber(value, numberHasCountry);
-    } else {
-      handleParsePhoneNumber(value, null);
-    }
+  if (value) {
+    handleParsePhoneNumber(value, getCountryForPartialE164Number(value) || country);
   }
 };
 onMount(() => {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { default as TelInput } from './components/Input/TelInput.svelte';
+export { default as TelInput } from './components/input/TelInput.svelte';
 export { getCurrentCountry, inputParser, inspectAllowedChars, normalizeTelInput, getCountryForPartialE164Number, clickOutsideAction, isSelected } from './utils/index.js';
 export { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js/max';
 export { normalizedCountries } from './assets/index.js';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { default as TelInput } from './components/Input/TelInput.svelte';
+export { default as TelInput } from './components/input/TelInput.svelte';
 export { getCurrentCountry, inputParser, inspectAllowedChars, normalizeTelInput, getCountryForPartialE164Number, clickOutsideAction, isSelected } from './utils/index.js';
 export { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js/max';
 export { normalizedCountries } from './assets/index.js';

package/dist/types/index.d.ts

@@ -76,12 +76,11 @@ export interface TelInputOptions {
 	 */
 	invalidateOnCountryChange?: boolean;
 	/**
-	 *  "formatInternational": "+36 20 123 4567",
-	 *  "formatOriginal": "20 123 4567",
-	 *  "formatNational": "06 20 123 4567",
-	 * @default 'original'
+	 *  "international": `+36 20 123 4567`,
+	 *  "default": `20 123 4567`
+	 * @default national
 	 */
-	// format: 'original' | 'national' | 'international';
+	format?: 'national' | 'international';
 }
 
 export type {

package/dist/utils/helpers.d.ts

@@ -5,7 +5,10 @@ export declare const isNumber: (value: number) => boolean;
 export declare const normalizeTelInput: (input?: PhoneNumber) => {
     [k: string]: string | boolean | E164Number | import("libphonenumber-js/types").CountryCallingCode | import("libphonenumber-js/types").NationalNumber | null | undefined;
 };
-export declare const generatePlaceholder: (country: CountryCode, format?: 'international' | 'national' | 'default') => string;
+export declare const generatePlaceholder: (country: CountryCode, { format, spaces }?: {
+    format: 'international' | 'national';
+    spaces: boolean;
+}) => string;
 export declare const isSelected: <T extends {
     id: string;
 }>(itemToSelect: string | T, selectedItem: string | T | null | undefined) => boolean;
@@ -68,6 +71,6 @@ export declare const allowedCharacters: (character: string, { spaces }?: {
 }) => string;
 export declare const inputParser: (text: string, { allowSpaces, parseCharacter }: {
     allowSpaces: boolean;
-    parseCharacter: (characted: string, val: string, allowSpaces?: boolean) => string;
+    parseCharacter: (char: string, val: string, allowSpaces?: boolean) => string | undefined;
 }) => string;
 export declare const inspectAllowedChars: (character: string, value: string, allowSpaces?: boolean) => string;

package/dist/utils/helpers.js

@@ -1,7 +1,9 @@
 import { AsYouType, Metadata, getCountryCallingCode, getExampleNumber } from 'libphonenumber-js/max';
 import examples from 'libphonenumber-js/mobile/examples';
 export const capitalize = (str) => {
-    return (str && str[0].toUpperCase() + str.slice(1).toLowerCase()) || '';
+    if (!str)
+        return '';
+    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
 };
 // Use carefully, it can be rate limited.
 export const getCurrentCountry = async () => {
@@ -44,20 +46,24 @@ export const normalizeTelInput = (input) => {
     }).filter(([, value]) => value !== null));
     return filteredResult;
 };
-export const generatePlaceholder = (country, format = 'default') => {
+export const generatePlaceholder = (country, { format, spaces } = {
+    format: 'national',
+    spaces: true
+}) => {
     const examplePhoneNumber = getExampleNumber(country, examples);
     if (examplePhoneNumber) {
-        const countryCallingCode = examplePhoneNumber.countryCallingCode;
         switch (format) {
             case 'international':
-                return examplePhoneNumber.formatInternational();
-            case 'national':
-                return examplePhoneNumber.formatNational();
+                return spaces
+                    ? examplePhoneNumber.formatInternational()
+                    : examplePhoneNumber.number;
             default:
-                return examplePhoneNumber
-                    .formatInternational()
-                    .slice(countryCallingCode.length + 1)
-                    .trim();
+                return spaces
+                    ? examplePhoneNumber
+                        .formatInternational()
+                        .slice(examplePhoneNumber.countryCallingCode.length + 1)
+                        .trim()
+                    : examplePhoneNumber.nationalNumber;
         }
     }
     else {
@@ -65,28 +71,13 @@ export const generatePlaceholder = (country, format = 'default') => {
     }
 };
 export const isSelected = (itemToSelect, selectedItem) => {
-    if (!selectedItem || selectedItem === null) {
+    if (!selectedItem) {
         return false;
     }
-    if (typeof selectedItem === 'object' &&
-        typeof itemToSelect === 'object' &&
-        selectedItem !== null &&
-        itemToSelect !== null) {
-        if (typeof selectedItem === 'object' &&
-            typeof itemToSelect === 'object' &&
-            selectedItem.id === itemToSelect.id) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-    else if (itemToSelect === selectedItem) {
-        return true;
-    }
-    else {
-        return false;
+    if (typeof selectedItem === 'object' && typeof itemToSelect === 'object') {
+        return selectedItem.id === itemToSelect.id;
     }
+    return itemToSelect === selectedItem;
 };
 export const getInternationalPhoneNumberPrefix = (country) => {
     const ONLY_DIGITS_REGEXP = /^\d+$/;
@@ -276,13 +267,11 @@ export const allowedCharacters = (character, { spaces } = {
 };
 export const inputParser = (text, { allowSpaces, parseCharacter }) => {
     let value = '';
-    let index = 0;
-    while (index < text.length) {
+    for (let index = 0; index < text.length; index++) {
         const character = parseCharacter(text[index], value, allowSpaces);
         if (character !== undefined) {
             value += character;
         }
-        index++;
     }
     return value;
 };

package/dist/utils/index.d.ts

@@ -1,4 +1,3 @@
 export * from './helpers.js';
-export * from './typeCheck.js';
 export * from './directives/clickOutsideAction.js';
 export * from './directives/telInputAction.js';

package/dist/utils/index.js

@@ -1,4 +1,3 @@
 export * from './helpers.js';
-export * from './typeCheck.js';
 export * from './directives/clickOutsideAction.js';
 export * from './directives/telInputAction.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "3.2.2",
+  "version": "3.3.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -30,45 +30,47 @@
     "svelte": "^3.58.0 || ^4.0.0"
   },
   "dependencies": {
-    "libphonenumber-js": "^1.10.37"
+    "libphonenumber-js": "^1.10.39"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "2.1.0",
-    "@sveltejs/kit": "^1.22.3",
+    "@sveltejs/kit": "^1.22.4",
     "@sveltejs/package": "^2.2.0",
     "@testing-library/svelte": "^4.0.3",
     "@testing-library/user-event": "^14.4.3",
     "@types/micromatch": "^4.0.2",
-    "@typescript-eslint/eslint-plugin": "^6.1.0",
-    "@typescript-eslint/parser": "^6.1.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
     "autoprefixer": "^10.4.14",
     "cssnano": "^6.0.1",
     "dotenv": "^16.3.1",
     "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-svelte": "^2.32.4",
     "jsdom": "^22.1.0",
     "micromatch": "^4.0.5",
     "postcss": "^8.4.27",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
-    "publint": "^0.1.16",
+    "publint": "^0.2.0",
     "svelte": "^3.58.0",
     "svelte-check": "^3.4.6",
     "svelte2tsx": "^0.6.19",
     "tailwindcss": "^3.3.3",
-    "tslib": "^2.6.0",
+    "tslib": "^2.6.1",
     "typescript": "^5.1.6",
-    "vite": "^4.4.6",
-    "vitest": "^0.33.0"
+    "vite": "^4.4.8",
+    "vitest": "^0.34.1"
   },
   "type": "module",
   "license": "MIT",
   "files": [
     "dist"
   ],
+  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
   "typesVersions": {
     "*": {
       "types": [

package/dist/assets/regions.d.ts

@@ -1 +0,0 @@
-export declare const rawRegions: (string | number | string[])[][];

package/dist/assets/regions.js

@@ -1,43 +0,0 @@
-// Country model:
-// [
-//    Country name,
-//    Regions,
-//    iso2 code,
-//    International dial code,
-//    Format (if available),
-//    Order priority (if >1 country with same dial code),
-//    Area codes (if >1 country with same dial code)
-// ]
-//
-// Regions:
-// ['america', 'europe', 'asia', 'oceania', 'africa']
-//
-// Sub-regions:
-// ['north-america', 'south-america', 'central-america', 'carribean',
-//  'eu-union', 'ex-ussr', 'ex-yugos', 'baltic', 'middle-east', 'north-africa']
-export const rawRegions = [
-    ['American Samoa', ['oceania'], 'as', '1684'],
-    ['Anguilla', ['america', 'carribean'], 'ai', '1264'],
-    ['Bermuda', ['america', 'north-america'], 'bm', '1441'],
-    ['British Virgin Islands', ['america', 'carribean'], 'vg', '1284'],
-    ['Cayman Islands', ['america', 'carribean'], 'ky', '1345'],
-    ['Cook Islands', ['oceania'], 'ck', '682'],
-    ['Falkland Islands', ['america', 'south-america'], 'fk', '500'],
-    ['Faroe Islands', ['europe'], 'fo', '298'],
-    ['Gibraltar', ['europe'], 'gi', '350'],
-    ['Greenland', ['america'], 'gl', '299'],
-    ['Jersey', ['europe', 'eu-union'], 'je', '44', '.... ......'],
-    ['Montserrat', ['america', 'carribean'], 'ms', '1664'],
-    ['Niue', ['asia'], 'nu', '683'],
-    ['Norfolk Island', ['oceania'], 'nf', '672'],
-    ['Northern Mariana Islands', ['oceania'], 'mp', '1670'],
-    ['Saint Barthélemy', ['america', 'carribean'], 'bl', '590', '', 1],
-    ['Saint Helena', ['africa'], 'sh', '290'],
-    ['Saint Martin', ['america', 'carribean'], 'mf', '590', '', 2],
-    ['Saint Pierre and Miquelon', ['america', 'north-america'], 'pm', '508'],
-    ['Sint Maarten', ['america', 'carribean'], 'sx', '1721'],
-    ['Tokelau', ['oceania'], 'tk', '690'],
-    ['Turks and Caicos Islands', ['america', 'carribean'], 'tc', '1649'],
-    ['U.S. Virgin Islands', ['america', 'carribean'], 'vi', '1340'],
-    ['Wallis and Futuna', ['oceania'], 'wf', '681']
-];

package/dist/assets/telTypes.d.ts

@@ -1,5 +0,0 @@
-export declare const telTypes: {
-    id: string;
-    value: string;
-    label: string;
-}[];

package/dist/assets/telTypes.js

@@ -1,16 +0,0 @@
-import { capitalize } from '../utils/index.js';
-export const telTypes = [
-    'PREMIUM_RATE',
-    'TOLL_FREE',
-    'SHARED_COST',
-    'VOIP',
-    'PERSONAL_NUMBER',
-    'PAGER',
-    'UAN',
-    'VOICEMAIL',
-    'FIXED_LINE_OR_MOBILE',
-    'FIXED_LINE',
-    'MOBILE'
-].map((el) => {
-    return { id: el, value: el, label: capitalize(el.split('_').join(' ')) };
-});

package/dist/utils/typeCheck.d.ts

@@ -1 +0,0 @@
-export declare const isStringArray: (items: unknown) => items is string[];

package/dist/utils/typeCheck.js

@@ -1,3 +0,0 @@
-export const isStringArray = (items) => {
-    return Array.isArray(items) && items.length > 0 && typeof items[0] === 'string';
-};