svelte-tel-input 3.3.8 → 3.4.0

package/dist/assets/examplePhoneNumbers.d.ts

@@ -1,248 +1,3 @@
-declare const _default: {
-    readonly AC: "40123";
-    readonly AD: "312345";
-    readonly AE: "501234567";
-    readonly AF: "701234567";
-    readonly AG: "2684641234";
-    readonly AI: "2642351234";
-    readonly AL: "672123456";
-    readonly AM: "77123456";
-    readonly AO: "923123456";
-    readonly AR: "91123456789";
-    readonly AS: "6847331234";
-    readonly AT: "664123456";
-    readonly AU: "412345678";
-    readonly AW: "5601234";
-    readonly AX: "412345678";
-    readonly AZ: "401234567";
-    readonly BA: "61123456";
-    readonly BB: "2462501234";
-    readonly BD: "1812345678";
-    readonly BE: "470123456";
-    readonly BF: "70123456";
-    readonly BG: "43012345";
-    readonly BH: "36001234";
-    readonly BI: "79561234";
-    readonly BJ: "90011234";
-    readonly BL: "690001234";
-    readonly BM: "4413701234";
-    readonly BN: "7123456";
-    readonly BO: "71234567";
-    readonly BQ: "3181234";
-    readonly BR: "11961234567";
-    readonly BS: "2423591234";
-    readonly BT: "17123456";
-    readonly BW: "71123456";
-    readonly BY: "294911911";
-    readonly BZ: "6221234";
-    readonly CA: "5062345678";
-    readonly CC: "412345678";
-    readonly CD: "991234567";
-    readonly CF: "70012345";
-    readonly CG: "061234567";
-    readonly CH: "781234567";
-    readonly CI: "0123456789";
-    readonly CK: "71234";
-    readonly CL: "221234567";
-    readonly CM: "671234567";
-    readonly CN: "13123456789";
-    readonly CO: "3211234567";
-    readonly CR: "83123456";
-    readonly CU: "51234567";
-    readonly CV: "9911234";
-    readonly CW: "95181234";
-    readonly CX: "412345678";
-    readonly CY: "96123456";
-    readonly CZ: "601123456";
-    readonly DE: "15123456789";
-    readonly DJ: "77831001";
-    readonly DK: "32123456";
-    readonly DM: "7672251234";
-    readonly DO: "8092345678";
-    readonly DZ: "551234567";
-    readonly EC: "991234567";
-    readonly EE: "51234567";
-    readonly EG: "1001234567";
-    readonly EH: "650123456";
-    readonly ER: "7123456";
-    readonly ES: "612345678";
-    readonly ET: "911234567";
-    readonly FI: "412345678";
-    readonly FJ: "7012345";
-    readonly FK: "51234";
-    readonly FM: "3501234";
-    readonly FO: "211234";
-    readonly FR: "612345678";
-    readonly GA: "06031234";
-    readonly GB: "7400123456";
-    readonly GD: "4734031234";
-    readonly GE: "555123456";
-    readonly GF: "694201234";
-    readonly GG: "7781123456";
-    readonly GH: "231234567";
-    readonly GI: "57123456";
-    readonly GL: "221234";
-    readonly GM: "3012345";
-    readonly GN: "601123456";
-    readonly GP: "690001234";
-    readonly GQ: "222123456";
-    readonly GR: "6912345678";
-    readonly GT: "51234567";
-    readonly GU: "6713001234";
-    readonly GW: "955012345";
-    readonly GY: "6091234";
-    readonly HK: "51234567";
-    readonly HN: "91234567";
-    readonly HR: "921234567";
-    readonly HT: "34101234";
-    readonly HU: "201234567";
-    readonly ID: "812345678";
-    readonly IE: "850123456";
-    readonly IL: "502345678";
-    readonly IM: "7924123456";
-    readonly IN: "8123456789";
-    readonly IO: "3801234";
-    readonly IQ: "7912345678";
-    readonly IR: "9123456789";
-    readonly IS: "6111234";
-    readonly IT: "3123456789";
-    readonly JE: "7797712345";
-    readonly JM: "8762101234";
-    readonly JO: "790123456";
-    readonly JP: "9012345678";
-    readonly KE: "712123456";
-    readonly KG: "700123456";
-    readonly KH: "91234567";
-    readonly KI: "72001234";
-    readonly KM: "3212345";
-    readonly KN: "8697652917";
-    readonly KP: "1921234567";
-    readonly KR: "1020000000";
-    readonly KW: "50012345";
-    readonly KY: "3453231234";
-    readonly KZ: "7710009998";
-    readonly LA: "2023123456";
-    readonly LB: "71123456";
-    readonly LC: "7582845678";
-    readonly LI: "660234567";
-    readonly LK: "712345678";
-    readonly LR: "770123456";
-    readonly LS: "50123456";
-    readonly LT: "61234567";
-    readonly LU: "628123456";
-    readonly LV: "21234567";
-    readonly LY: "912345678";
-    readonly MA: "650123456";
-    readonly MC: "612345678";
-    readonly MD: "62112345";
-    readonly ME: "67622901";
-    readonly MF: "690001234";
-    readonly MG: "321234567";
-    readonly MH: "2351234";
-    readonly MK: "72345678";
-    readonly ML: "65012345";
-    readonly MM: "92123456";
-    readonly MN: "88123456";
-    readonly MO: "66123456";
-    readonly MP: "6702345678";
-    readonly MQ: "696201234";
-    readonly MR: "22123456";
-    readonly MS: "6644923456";
-    readonly MT: "96961234";
-    readonly MU: "52512345";
-    readonly MV: "7712345";
-    readonly MW: "991234567";
-    readonly MX: "12221234567";
-    readonly MY: "123456789";
-    readonly MZ: "821234567";
-    readonly NA: "811234567";
-    readonly NC: "751234";
-    readonly NE: "93123456";
-    readonly NF: "381234";
-    readonly NG: "8021234567";
-    readonly NI: "81234567";
-    readonly NL: "612345678";
-    readonly NO: "40612345";
-    readonly NP: "9841234567";
-    readonly NR: "5551234";
-    readonly NU: "8884012";
-    readonly NZ: "211234567";
-    readonly OM: "92123456";
-    readonly PA: "61234567";
-    readonly PE: "912345678";
-    readonly PF: "87123456";
-    readonly PG: "70123456";
-    readonly PH: "9051234567";
-    readonly PK: "3012345678";
-    readonly PL: "512345678";
-    readonly PM: "551234";
-    readonly PR: "7872345678";
-    readonly PS: "599123456";
-    readonly PT: "912345678";
-    readonly PW: "6201234";
-    readonly PY: "961456789";
-    readonly QA: "33123456";
-    readonly RE: "692123456";
-    readonly RO: "712034567";
-    readonly RS: "601234567";
-    readonly RU: "9123456789";
-    readonly RW: "720123456";
-    readonly SA: "512345678";
-    readonly SB: "7421234";
-    readonly SC: "2510123";
-    readonly SD: "911231234";
-    readonly SE: "701234567";
-    readonly SG: "81234567";
-    readonly SH: "51234";
-    readonly SI: "31234567";
-    readonly SJ: "41234567";
-    readonly SK: "912123456";
-    readonly SL: "25123456";
-    readonly SM: "66661212";
-    readonly SN: "701234567";
-    readonly SO: "71123456";
-    readonly SR: "7412345";
-    readonly SS: "977123456";
-    readonly ST: "9812345";
-    readonly SV: "70123456";
-    readonly SX: "7215205678";
-    readonly SY: "944567890";
-    readonly SZ: "76123456";
-    readonly TA: "8999";
-    readonly TC: "6492311234";
-    readonly TD: "63012345";
-    readonly TG: "90112345";
-    readonly TH: "812345678";
-    readonly TJ: "917123456";
-    readonly TK: "7290";
-    readonly TL: "77212345";
-    readonly TM: "66123456";
-    readonly TN: "20123456";
-    readonly TO: "7715123";
-    readonly TR: "5012345678";
-    readonly TT: "8682911234";
-    readonly TV: "901234";
-    readonly TW: "912345678";
-    readonly TZ: "621234567";
-    readonly UA: "501234567";
-    readonly UG: "712345678";
-    readonly US: "2015550123";
-    readonly UY: "94231234";
-    readonly UZ: "912345678";
-    readonly VA: "3123456789";
-    readonly VC: "7844301234";
-    readonly VE: "4121234567";
-    readonly VG: "2843001234";
-    readonly VI: "3406421234";
-    readonly VN: "912345678";
-    readonly VU: "5912345";
-    readonly WF: "821234";
-    readonly WS: "7212345";
-    readonly XK: "43201234";
-    readonly YE: "712345678";
-    readonly YT: "639012345";
-    readonly ZA: "711234567";
-    readonly ZM: "955123456";
-    readonly ZW: "712345678";
-};
+import type { Examples } from 'libphonenumber-js';
+declare const _default: Examples;
 export default _default;

package/dist/components/input/TelInput.svelte

@@ -36,8 +36,7 @@ const combinedOptions = {
   ...options
 };
 const handleInputAction = (value2) => {
-  if (disabled || readonly)
-    return;
+  if (disabled || readonly) return;
   handleParsePhoneNumber(value2, country);
 };
 const updateCountry = (countryCode) => {
@@ -48,7 +47,8 @@ const updateCountry = (countryCode) => {
   }
   return country;
 };
-const handleParsePhoneNumber = (input, currCountry = null) => {
+const handleParsePhoneNumber = (rawInput, currCountry = null) => {
+  const input = rawInput;
   if (input !== null) {
     const numberHasCountry = getCountryForPartialE164Number(input);
     if (numberHasCountry && numberHasCountry !== prevCountry) {
@@ -110,19 +110,25 @@ const countryChangeWatchFunction = () => {
   countryWatchInitRun = false;
 };
 const countryChangeWatch = watcher(null, countryChangeWatchFunction);
-$:
-  $countryChangeWatch = country;
-$:
-  getPlaceholder = combinedOptions.autoPlaceholder ? country ? generatePlaceholder(country, {
-    format: combinedOptions.format,
-    spaces: combinedOptions.spaces
-  }) : null : placeholder;
-$:
-  if (value === null && inputValue !== null && detailedValue !== null) {
-    inputValue = null;
-    detailedValue = null;
-    dispatch("updateDetailedValue", detailedValue);
+$: $countryChangeWatch = country;
+$: getPlaceholder = combinedOptions.autoPlaceholder && country ? generatePlaceholder(country, {
+  format: combinedOptions.format,
+  spaces: combinedOptions.spaces
+}) : placeholder;
+$: if (value === null && inputValue !== null && detailedValue !== null) {
+  inputValue = null;
+  detailedValue = null;
+  dispatch("updateDetailedValue", detailedValue);
+}
+export const updateValue = (newValue, newCountry) => {
+  const castedValue = newValue;
+  if (castedValue) {
+    handleParsePhoneNumber(
+      castedValue,
+      getCountryForPartialE164Number(castedValue) || newCountry
+    );
   }
+};
 onMount(() => {
   if (value) {
     handleParsePhoneNumber(value, getCountryForPartialE164Number(value) || country);

package/dist/components/input/TelInput.svelte.d.ts

@@ -2,20 +2,21 @@ import { SvelteComponentTyped } from "svelte";
 import type { DetailedValue, CountryCode, E164Number, TelInputOptions } from '../../types';
 declare const __propDef: {
     props: {
-        autocomplete?: string | null | undefined;
-        /** You can set the classes of the input field*/ class?: string | undefined;
-        /** You can disable the component and set the disabled attribute of the input field */ disabled?: boolean | undefined;
-        /** You can set the id attribute of the input field */ id?: string | undefined;
-        /** You can set the name attribute of the input field */ name?: string | null | undefined;
-        /** It will overwrite the autoPlaceholder ! */ placeholder?: string | null | undefined;
-        /** You can set the readonly attribute of the input field */ readonly?: boolean | null | undefined;
-        /** Set the required attribute on the input element */ required?: boolean | null | undefined;
-        /** You can set the size attribute of the input field */ size?: number | null | undefined;
+        autocomplete?: string | null;
+        /** You can set the classes of the input field*/ class?: string;
+        /** You can disable the component and set the disabled attribute of the input field */ disabled?: boolean;
+        /** You can set the id attribute of the input field */ id?: string;
+        /** You can set the name attribute of the input field */ name?: string | null;
+        /** It will overwrite the autoPlaceholder ! */ placeholder?: string | null;
+        /** You can set the readonly attribute of the input field */ readonly?: boolean | null;
+        /** Set the required attribute on the input element */ required?: boolean | null;
+        /** You can set the size attribute of the input field */ size?: number | null;
         /** The core value of the input, this is the only one what you can store. It's an E164 phone number.*/ value: E164Number | null;
         /** It's accept any Country Code Alpha-2 (ISO 3166) */ country: CountryCode | null;
-        /** Detailed parse of the E164 phone number */ detailedValue?: Partial<DetailedValue> | null | undefined;
-        /** Validity of the input based on the config settings.*/ valid?: boolean | undefined;
-        /** You can turn on and off certain features by this object */ options?: TelInputOptions | undefined;
+        /** Detailed parse of the E164 phone number */ detailedValue?: Partial<DetailedValue> | null;
+        /** Validity of the input based on the config settings.*/ valid?: boolean;
+        /** You can turn on and off certain features by this object */ options?: TelInputOptions;
+        updateValue?: (newValue: string | E164Number | null, newCountry: CountryCode | null) => void;
     };
     events: {
         beforeinput: InputEvent;
@@ -42,5 +43,6 @@ export type TelInputProps = typeof __propDef.props;
 export type TelInputEvents = typeof __propDef.events;
 export type TelInputSlots = typeof __propDef.slots;
 export default class TelInput extends SvelteComponentTyped<TelInputProps, TelInputEvents, TelInputSlots> {
+    get updateValue(): (newValue: string | E164Number | null, newCountry: CountryCode | null) => void;
 }
 export {};

package/dist/stores/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 export declare const watcher: (initialValue: string | null, watchFunction: (oldVal: string | null, newVal: string | null) => void) => {
     subscribe: (this: void, run: import("svelte/store").Subscriber<string | null>, invalidate?: import("svelte/store").Invalidator<string | null> | undefined) => import("svelte/store").Unsubscriber;
     set: (value: string | null) => void;

package/dist/types/index.d.ts

@@ -39,11 +39,11 @@ export interface DetailedValue {
 	isValid: boolean;
 	phoneNumber: string | null;
 	countryCallingCode: CountryCallingCode | null;
-	formattedNumber: string | null;
-	formatOriginal: string | null;
-	nationalNumber: string | null;
-	formatInternational: string | null;
-	formatNational: string | null;
+	formattedNumber: E164Number | null;
+	formatOriginal: E164Number | null;
+	nationalNumber: E164Number | null;
+	formatInternational: E164Number | null;
+	formatNational: E164Number | null;
 	uri: string | null;
 	e164: E164Number | null;
 	error?: string;

package/dist/utils/helpers.d.ts

@@ -6,12 +6,12 @@ export declare const normalizeTelInput: (input?: PhoneNumber) => {
     [k: string]: string | boolean | import("libphonenumber-js/types").NationalNumber | E164Number | import("libphonenumber-js/types").CountryCallingCode | null | undefined;
 };
 export declare const generatePlaceholder: (country: CountryCode, { format, spaces }?: {
-    format: 'international' | 'national';
+    format: "international" | "national";
     spaces: boolean;
 }) => string;
 export declare const isSelected: <T extends {
     id: string;
-}>(itemToSelect: string | T, selectedItem: string | T | null | undefined) => boolean;
+}>(itemToSelect: T | string, selectedItem: (T | undefined | null) | string) => boolean;
 export declare const getInternationalPhoneNumberPrefix: (country: CountryCode) => string;
 /**
  * Trims phone number digits if they exceed the maximum possible length
@@ -32,9 +32,9 @@ export declare const getMaxNumberLength: (country: CountryCode) => number;
  * @return {string?}
  */
 export declare const getCountryForPartialE164Number: (partialE164Number: E164Number, { country, countries, required }?: {
-    country?: CountryCode | undefined;
-    countries?: Countries[] | undefined;
-    required?: boolean | undefined;
+    country?: CountryCode;
+    countries?: Countries[];
+    required?: boolean;
 }) => CountryCode | undefined;
 /**
  * Determines the country for a given (possibly incomplete) E.164 phone number.
@@ -67,7 +67,7 @@ export declare const isSupportedCountry: (country: CountryCode, metadata: Metada
  * @returns {string}
  */
 export declare const allowedCharacters: (character: string, { spaces }?: {
-    spaces?: boolean | undefined;
+    spaces?: boolean;
 }) => string;
 export declare const inputParser: (text: string, { allowSpaces, parseCharacter }: {
     allowSpaces: boolean;

package/dist/utils/helpers.js

@@ -224,35 +224,35 @@ export const allowedCharacters = (character, { spaces } = {
         '7': '7',
         '8': '8',
         '9': '9',
-        '\uFF10': '0',
-        '\uFF11': '1',
-        '\uFF12': '2',
-        '\uFF13': '3',
-        '\uFF14': '4',
-        '\uFF15': '5',
-        '\uFF16': '6',
-        '\uFF17': '7',
-        '\uFF18': '8',
-        '\uFF19': '9',
-        '\u0660': '0',
-        '\u0661': '1',
-        '\u0662': '2',
-        '\u0663': '3',
-        '\u0664': '4',
-        '\u0665': '5',
-        '\u0666': '6',
-        '\u0667': '7',
-        '\u0668': '8',
-        '\u0669': '9',
-        '\u06F0': '0',
-        '\u06F1': '1',
-        '\u06F2': '2',
-        '\u06F3': '3',
-        '\u06F4': '4',
-        '\u06F5': '5',
-        '\u06F6': '6',
-        '\u06F7': '7',
-        '\u06F8': '8',
+        '\uFF10': '0', // Fullwidth digit 0
+        '\uFF11': '1', // Fullwidth digit 1
+        '\uFF12': '2', // Fullwidth digit 2
+        '\uFF13': '3', // Fullwidth digit 3
+        '\uFF14': '4', // Fullwidth digit 4
+        '\uFF15': '5', // Fullwidth digit 5
+        '\uFF16': '6', // Fullwidth digit 6
+        '\uFF17': '7', // Fullwidth digit 7
+        '\uFF18': '8', // Fullwidth digit 8
+        '\uFF19': '9', // Fullwidth digit 9
+        '\u0660': '0', // Arabic-indic digit 0
+        '\u0661': '1', // Arabic-indic digit 1
+        '\u0662': '2', // Arabic-indic digit 2
+        '\u0663': '3', // Arabic-indic digit 3
+        '\u0664': '4', // Arabic-indic digit 4
+        '\u0665': '5', // Arabic-indic digit 5
+        '\u0666': '6', // Arabic-indic digit 6
+        '\u0667': '7', // Arabic-indic digit 7
+        '\u0668': '8', // Arabic-indic digit 8
+        '\u0669': '9', // Arabic-indic digit 9
+        '\u06F0': '0', // Eastern-Arabic digit 0
+        '\u06F1': '1', // Eastern-Arabic digit 1
+        '\u06F2': '2', // Eastern-Arabic digit 2
+        '\u06F3': '3', // Eastern-Arabic digit 3
+        '\u06F4': '4', // Eastern-Arabic digit 4
+        '\u06F5': '5', // Eastern-Arabic digit 5
+        '\u06F6': '6', // Eastern-Arabic digit 6
+        '\u06F7': '7', // Eastern-Arabic digit 7
+        '\u06F8': '8', // Eastern-Arabic digit 8
         '\u06F9': '9' // Eastern-Arabic digit 9,
     };
     // Allow spaces

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "3.3.8",
+  "version": "3.4.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -30,38 +30,39 @@
     "svelte": "^3.58.0 || ^4.0.0"
   },
   "dependencies": {
-    "libphonenumber-js": "^1.10.43"
+    "libphonenumber-js": "1.10.43"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "2.1.0",
-    "@sveltejs/kit": "^1.23.0",
-    "@sveltejs/package": "^2.2.2",
-    "@testing-library/svelte": "^4.0.3",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/micromatch": "^4.0.2",
-    "@typescript-eslint/eslint-plugin": "^6.5.0",
-    "@typescript-eslint/parser": "^6.5.0",
-    "autoprefixer": "^10.4.15",
-    "cssnano": "^6.0.1",
-    "dotenv": "^16.3.1",
-    "eslint": "^8.48.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-svelte": "^2.33.0",
-    "jsdom": "^22.1.0",
-    "micromatch": "^4.0.5",
-    "postcss": "^8.4.28",
-    "prettier": "^3.0.2",
-    "prettier-plugin-svelte": "^3.0.3",
-    "publint": "^0.2.2",
-    "svelte": "^4.2.0",
-    "svelte-check": "^3.5.1",
-    "svelte2tsx": "^0.6.21",
-    "tailwindcss": "^3.3.3",
-    "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vitest": "^0.34.3"
+    "@sveltejs/adapter-auto": "3.2.2",
+    "@sveltejs/kit": "^2.5.17",
+    "@sveltejs/package": "^2.3.2",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@testing-library/svelte": "^5.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/micromatch": "^4.0.8",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
+    "autoprefixer": "^10.4.19",
+    "cssnano": "^7.0.3",
+    "dotenv": "^16.4.5",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-svelte": "^2.41.0",
+    "jsdom": "^24.1.0",
+    "micromatch": "^4.0.7",
+    "postcss": "^8.4.38",
+    "prettier": "^3.3.2",
+    "prettier-plugin-svelte": "^3.2.5",
+    "publint": "^0.2.8",
+    "svelte": "^4.2.18",
+    "svelte-check": "^3.8.4",
+    "svelte2tsx": "^0.7.13",
+    "tailwindcss": "^3.4.4",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.2",
+    "vite": "^5.3.1",
+    "vitest": "^1.6.0"
   },
   "type": "module",
   "license": "MIT",
@@ -87,8 +88,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "default": "./dist/index.js"
+      "svelte": "./dist/index.js"
     },
     "./types": {
       "types": "./dist/types/index.d.ts",
@@ -113,8 +113,8 @@
     "lint:fix": "pnpm run eslint:fix && pnpm run prettier:fix",
     "package:watch": "svelte-kit sync && svelte-package --watch",
     "package": "svelte-kit sync && pnpm run convert && svelte-package && pnpm run check:publint",
-    "prettier:check": "prettier --check --plugin-search-dir=. .",
-    "prettier:fix": "prettier --write --plugin-search-dir=. .",
+    "prettier:check": "prettier --check .",
+    "prettier:fix": "prettier --write .",
     "svelte-check": "svelte-kit sync && svelte-check --ignore 'dist,build,coverage,.svelte-kit,package' --fail-on-warnings",
     "sync": "svelte-kit sync",
     "test": "vitest",