svelte-tel-input 4.1.1 → 4.3.0

package/dist/components/input/TelInput.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { onMount, untrack } from 'svelte';
-	import { ParseError } from 'libphonenumber-js/max';
+	import { ParseError } from 'libphonenumber-js/max/es6';
 	import { generatePlaceholder } from '../../utils/index.js';
 	import { parsePhoneInput } from '../../utils/helpers.js';
 	import { telInputAction } from '../../utils/directives/telInputAction.js';
-	import { getCountry, guessCountryByPartialNumber } from '../../utils/countryHelpers.js';
+	import { getCountryByIso2, guessCountryByPartialNumber } from '../../utils/countryHelpers.js';
 	import type { CountryCode, TelInputOptions, Props, ValidationError } from '../../types';
 
 	const defaultOptions = {
@@ -29,6 +29,7 @@
 		onValueChange,
 		onError,
 		initialFormat = 'international',
+		placeholderFormat = undefined,
 		value = $bindable(''),
 		country = $bindable(null),
 		defaultCountry = null,
@@ -37,46 +38,59 @@
 		validationError = $bindable<Readonly<ValidationError>>(null),
 		options = defaultOptions,
 		el = $bindable(undefined),
+		validateProps = false,
 		'aria-invalid': ariaInvalidProp = undefined,
 		...rest
 	}: Props = $props();
 
-	untrack(() => {
-		const badProp = (prop: string, expected: string, got: unknown): never => {
-			const gotDesc =
-				got !== null && typeof got === 'object'
-					? Array.isArray(got)
-						? 'array'
-						: `object { ${Object.keys(got as object)
-								.slice(0, 4)
-								.join(', ')}${Object.keys(got as object).length > 4 ? ', …' : ''} }`
-					: typeof got;
-			throw new TypeError(
-				`<TelInput> invalid prop "${prop}": expected ${expected}, but received ${gotDesc}.`
-			);
-		};
-
-		if (typeof value !== 'string') badProp('value', 'string', value);
-		if (country !== null && country !== undefined && typeof country !== 'string')
-			badProp('country', 'CountryCode | null | undefined', country);
-		if (name !== null && name !== undefined && typeof name !== 'string')
-			badProp('name', 'string | null', name);
-		if (placeholder !== null && placeholder !== undefined && typeof placeholder !== 'string')
-			badProp('placeholder', 'string | null', placeholder);
-		if (disabled !== undefined && disabled !== null && typeof disabled !== 'boolean')
-			badProp('disabled', 'boolean', disabled);
-		if (readonly !== null && readonly !== undefined && typeof readonly !== 'boolean')
-			badProp('readonly', 'boolean | null', readonly);
-		if (required !== null && required !== undefined && typeof required !== 'boolean')
-			badProp('required', 'boolean | null', required);
-		if (size !== null && size !== undefined && typeof size !== 'number')
-			badProp('size', 'number | null', size);
-		if (
-			options !== undefined &&
-			(typeof options !== 'object' || options === null || Array.isArray(options))
-		)
-			badProp('options', 'TelInputOptions object', options);
-	});
+	// Runtime prop type-checking, opt-in via `validateProps`. Off by default so the
+	// checks add nothing to production bundles; enable it (e.g. in development) to
+	// get descriptive errors on malformed props.
+	// Intentionally reads the initial value only — this is a one-time init guard.
+	// svelte-ignore state_referenced_locally
+	if (validateProps)
+		untrack(() => {
+			const badProp = (prop: string, expected: string, got: unknown): never => {
+				const gotDesc =
+					got !== null && typeof got === 'object'
+						? Array.isArray(got)
+							? 'array'
+							: `object { ${Object.keys(got as object)
+									.slice(0, 4)
+									.join(
+										', '
+									)}${Object.keys(got as object).length > 4 ? ', …' : ''} }`
+						: typeof got;
+				throw new TypeError(
+					`<TelInput> invalid prop "${prop}": expected ${expected}, but received ${gotDesc}.`
+				);
+			};
+
+			if (typeof value !== 'string') badProp('value', 'string', value);
+			if (country !== null && country !== undefined && typeof country !== 'string')
+				badProp('country', 'CountryCode | null | undefined', country);
+			if (name !== null && name !== undefined && typeof name !== 'string')
+				badProp('name', 'string | null', name);
+			if (
+				placeholder !== null &&
+				placeholder !== undefined &&
+				typeof placeholder !== 'string'
+			)
+				badProp('placeholder', 'string | null', placeholder);
+			if (disabled !== undefined && disabled !== null && typeof disabled !== 'boolean')
+				badProp('disabled', 'boolean', disabled);
+			if (readonly !== null && readonly !== undefined && typeof readonly !== 'boolean')
+				badProp('readonly', 'boolean | null', readonly);
+			if (required !== null && required !== undefined && typeof required !== 'boolean')
+				badProp('required', 'boolean | null', required);
+			if (size !== null && size !== undefined && typeof size !== 'number')
+				badProp('size', 'number | null', size);
+			if (
+				options !== undefined &&
+				(typeof options !== 'object' || options === null || Array.isArray(options))
+			)
+				badProp('options', 'TelInputOptions object', options);
+		});
 
 	// Fix: initialize to null so server and client start with an identical render.
 	// The ID is generated only in onMount (client-only), avoiding UUID hydration mismatches.
@@ -123,7 +137,7 @@
 			if (fullDialCodeMatch) effectiveCountryIso2 = detected?.iso2 ?? null;
 		}
 		const countryObj = effectiveCountryIso2
-			? getCountry({ field: 'iso2', value: effectiveCountryIso2 })
+			? getCountryByIso2(effectiveCountryIso2)
 			: undefined;
 		try {
 			const details = parsePhoneInput(value, countryObj);
@@ -159,7 +173,6 @@
 	//Initialized to the incoming prop values so the first render never false-fires.
 	let _lastWrittenValue: string = value;
 	let _lastWrittenCountry: CountryCode | null | undefined = untrack(() => country);
-	// let isInitialized = $state(false);
 
 	// When true, `handleParsePhoneNumber` and the spaces-effect will display the
 	// national (dial-code-stripped) format.  Starts as `true` when
@@ -249,7 +262,7 @@
 	};
 
 	const getCountryObj = (iso2: CountryCode | null | undefined) =>
-		iso2 ? getCountry({ field: 'iso2', value: iso2 }) : undefined;
+		iso2 ? getCountryByIso2(iso2) : undefined;
 
 	const handleParsePhoneNumber = (
 		rawInput: string | null,
@@ -419,7 +432,8 @@
 	const getPlaceholder = $derived(
 		combinedOptions.autoPlaceholder && initialCountry
 			? generatePlaceholder(initialCountry, {
-					spaces: combinedOptions.spaces
+					spaces: combinedOptions.spaces,
+					format: placeholderFormat ?? initialFormat
 				})
 			: placeholder
 	);
@@ -493,7 +507,6 @@
 			// so national format is applied automatically when initialFormat='national'. Later maybe this could be optional.
 			handleParsePhoneNumber(value, currentCountry);
 		}
-		// isInitialized = true;
 		onLoad?.();
 	});
 

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { default as TelInput } from './components/input/TelInput.svelte';
-export { parse, normalizeToE164, pickCountries } from './utils/index.js';
+export { parse, normalizeToE164, pickCountries, getCountryByIso2 } from './utils/index.js';
 export { countries } from './assets/index.js';

package/dist/index.js

@@ -1,3 +1,3 @@
 export { default as TelInput } from './components/input/TelInput.svelte';
-export { parse, normalizeToE164, pickCountries } from './utils/index.js';
+export { parse, normalizeToE164, pickCountries, getCountryByIso2 } from './utils/index.js';
 export { countries } from './assets/index.js';

package/dist/types/index.d.ts

@@ -138,6 +138,13 @@ export interface Props extends HTMLInputAttributes {
 	options?: TelInputOptions;
 	/** Binding to the underlying `<input>` element */
 	el?: HTMLInputElement | undefined;
+	/**
+	 * Run runtime type-checking on incoming props, throwing a descriptive
+	 * `TypeError` on a mismatch. Off by default so it adds nothing to production
+	 * bundles; enable it (e.g. in development) to catch malformed props early.
+	 * @default false
+	 */
+	validateProps?: boolean;
 	/**
 	 * Callback fired when the country changes (auto-detected or user-selected).
 	 * @param newCountry The new country code or null.
@@ -173,6 +180,14 @@ export interface Props extends HTMLInputAttributes {
 	 * @default 'international'
 	 */
 	initialFormat?: 'international' | 'national';
+	/**
+	 * Controls the format of the auto-generated placeholder (when `autoPlaceholder` is enabled).
+	 * - `'international'` — placeholder includes the country dial code prefix (e.g. `+1 201 555 0123`).
+	 * - `'national'` — placeholder shows the national part only (e.g. `201 555 0123`).
+	 *
+	 * When not provided, `initialFormat` is used as the fallback. If neither is provided, defaults to `'international'`.
+	 */
+	placeholderFormat?: 'international' | 'national';
 }
 
 export type { CountryCode };

package/dist/utils/countryHelpers.d.ts

@@ -1,4 +1,10 @@
 import type { CountryCode, Country } from '../types/index.js';
+/**
+ * Look up a country by its ISO 3166-1 alpha-2 code (e.g. `'US'`, `'HU'`).
+ *
+ * O(1) against the bundled country list. Returns `undefined` if not found.
+ */
+export declare const getCountryByIso2: (iso2: CountryCode) => Country | undefined;
 export declare const getCountry: ({ field, value, countries }: {
     /**
      * Field to search by

package/dist/utils/countryHelpers.js

@@ -1,8 +1,22 @@
 import { countries as normalizedCountries } from '../assets/index.js';
+// O(1) lookup index for the default country list, keyed by ISO 3166-1 alpha-2.
+// Built once at module load. iso2 lookups run on every keystroke, so they go
+// through this Map instead of a linear scan over ~249 countries.
+const iso2Index = new Map(normalizedCountries.map((c) => [c.iso2, c]));
+/**
+ * Look up a country by its ISO 3166-1 alpha-2 code (e.g. `'US'`, `'HU'`).
+ *
+ * O(1) against the bundled country list. Returns `undefined` if not found.
+ */
+export const getCountryByIso2 = (iso2) => iso2Index.get(iso2);
 export const getCountry = ({ field, value, countries = normalizedCountries }) => {
     if (['priority'].includes(field)) {
         throw new Error(`Field "${field}" is not supported`);
     }
+    // Fast path: iso2 lookups against the default list hit the prebuilt index.
+    if (field === 'iso2' && countries === normalizedCountries) {
+        return iso2Index.get(value);
+    }
     return countries.find((currentCountry) => {
         return value === currentCountry[field];
     });

package/dist/utils/cursorPosition.d.ts

@@ -1,7 +1,6 @@
 interface CalculateCursorPositionProps {
     beforeValue: string;
     beforeCursor: number;
-    beforeSelection: number;
     afterInputValue?: string;
     afterInputCursor?: number;
     afterValue: string;
@@ -18,16 +17,4 @@ export declare const isDigit: (char?: string) => boolean;
  * Calculate the correct cursor position after input formatting
  */
 export declare const calculateCursorPosition: ({ beforeValue, beforeCursor, afterInputValue, afterInputCursor, afterValue, currentCursor, isDeletion, deletionDirection, hasSelection }: CalculateCursorPositionProps) => number;
-interface GetCursorPositionProps {
-    phoneBeforeInput: string;
-    phoneAfterInput: string;
-    phoneAfterFormatted: string;
-    cursorPositionAfterInput: number;
-    leftOffset?: number;
-    deletion?: 'forward' | 'backward' | undefined;
-    isReplacement?: boolean;
-}
-export declare const isNumeric: (char?: string) => boolean;
-export declare const getCursorPosition: (props: GetCursorPositionProps) => number;
-export declare const setCursorPosition: (node: HTMLInputElement, cursorPosition: number) => void;
 export {};

package/dist/utils/cursorPosition.js

@@ -104,31 +104,3 @@ export const calculateCursorPosition = ({ beforeValue, beforeCursor, afterInputV
     const newPos = findNthRelevantPosition(afterValue, digitsBefore, true);
     return Math.min(skipFormattingChars(afterValue, newPos), afterValue.length);
 };
-export const isNumeric = isDigit;
-export const getCursorPosition = (props) => {
-    return calculateCursorPosition({
-        beforeValue: props.phoneBeforeInput,
-        beforeCursor: props.cursorPositionAfterInput,
-        beforeSelection: 0,
-        afterInputValue: props.phoneAfterInput,
-        afterInputCursor: props.cursorPositionAfterInput,
-        afterValue: props.phoneAfterFormatted,
-        isDeletion: !!props.deletion,
-        deletionDirection: props.deletion || null,
-        hasSelection: false
-    });
-};
-export const setCursorPosition = (node, cursorPosition) => {
-    /**
-     * HACK: should set cursor on the next tick to make sure that the phone value is updated
-     * useTimeout with 0ms provides issues when two keys are pressed same time
-     */
-    Promise.resolve().then(() => {
-        // workaround for safari autofocus bug:
-        // Check if the input is focused before setting the cursor, otherwise safari sometimes autofocuses on setSelectionRange
-        if (typeof window === 'undefined' || node !== document?.activeElement) {
-            return;
-        }
-        node?.setSelectionRange(cursorPosition, cursorPosition);
-    });
-};

package/dist/utils/directives/telInputAction.js

@@ -1,4 +1,4 @@
-import { getCountry } from '../countryHelpers.js';
+import { getCountryByIso2 } from '../countryHelpers.js';
 import { parsePhoneInput } from '../helpers.js';
 import { calculateCursorPosition } from '../cursorPosition.js';
 let inputState = null;
@@ -109,9 +109,7 @@ const onInput = (event, params, node) => {
     const userInput = node.value;
     const currentCursor = node.selectionStart ?? 0;
     const normalized = normalizeUserInput(userInput);
-    const countryObj = params.country
-        ? getCountry({ field: 'iso2', value: params.country })
-        : undefined;
+    const countryObj = params.country ? getCountryByIso2(params.country) : undefined;
     const details = parsePhoneInput(normalized, countryObj);
     // Display formatting:
     // - When `spaces` is true, show formatted-as-you-type output (national or intl)
@@ -123,7 +121,6 @@ const onInput = (event, params, node) => {
     const newPosition = calculateCursorPosition({
         beforeValue: state.beforeValue,
         beforeCursor: state.beforeCursor,
-        beforeSelection: state.beforeSelection,
         afterInputValue: userInput,
         afterInputCursor: currentCursor,
         afterValue: formattedInput,

package/dist/utils/helpers.d.ts

@@ -1,23 +1,8 @@
 import type { Country, DetailedValue } from '../types/index.js';
 import type { CountryCode } from 'libphonenumber-js';
-export declare const generatePlaceholder: (country: CountryCode, { spaces }?: {
+export declare const generatePlaceholder: (country: CountryCode, { spaces, format }?: {
     spaces: boolean;
-}) => string;
-export declare const isSelected: <T extends {
-    id: string;
-}>(itemToSelect: T | string, selectedItem: (T | undefined | null) | string) => boolean;
-/**
- * These mappings map a character (key) to a specific digit that should
- * replace it for normalization purposes.
- * @param {string} character
- * @returns {string}
- */
-export declare const allowedCharacters: (character: string, { spaces, plusSign }?: {
-    spaces?: boolean;
-    plusSign?: boolean;
-}) => string | undefined;
-export declare const inputParser: (input: string, { allowSpaces }: {
-    allowSpaces: boolean;
+    format?: "international" | "national";
 }) => string;
 export declare const parsePhoneInput: (input: string, country: Country | undefined) => DetailedValue;
 /**

package/dist/utils/helpers.js

@@ -1,13 +1,20 @@
-import { AsYouType, getExampleNumber, formatIncompletePhoneNumber, validatePhoneNumberLength } from 'libphonenumber-js/max';
+import { AsYouType, getExampleNumber, formatIncompletePhoneNumber, validatePhoneNumberLength } from 'libphonenumber-js/max/es6';
 import { examplePhoneNumbers, countries } from '../assets/index.js';
-import { getCountry } from './countryHelpers.js';
-const whiteSpaceRegex = new RegExp('[\\t\\n\\v\\f\\r \\u00a0\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u200b\\u2028\\u2029\\u3000]', 'g');
-const plusSignRegex = new RegExp('\\+', 'g');
-export const generatePlaceholder = (country, { spaces } = {
-    spaces: true
+import { getCountryByIso2 } from './countryHelpers.js';
+export const generatePlaceholder = (country, { spaces, format } = {
+    spaces: true,
+    format: 'international'
 }) => {
     const examplePhoneNumber = getExampleNumber(country, examplePhoneNumbers);
     if (examplePhoneNumber) {
+        if (format === 'national') {
+            const international = examplePhoneNumber.formatInternational().trim();
+            const prefix = `+${examplePhoneNumber.countryCallingCode} `;
+            const national = international.startsWith(prefix)
+                ? international.slice(prefix.length)
+                : international;
+            return spaces ? national : national.replace(/\s/g, '');
+        }
         return spaces ? examplePhoneNumber.formatInternational().trim() : examplePhoneNumber.number;
     }
     else {
@@ -15,98 +22,6 @@ export const generatePlaceholder = (country, { spaces } = {
         return '';
     }
 };
-export const isSelected = (itemToSelect, selectedItem) => {
-    if (!selectedItem) {
-        return false;
-    }
-    if (typeof selectedItem === 'object' && typeof itemToSelect === 'object') {
-        return selectedItem.id === itemToSelect.id;
-    }
-    return itemToSelect === selectedItem;
-};
-/**
- * These mappings map a character (key) to a specific digit that should
- * replace it for normalization purposes.
- * @param {string} character
- * @returns {string}
- */
-export const allowedCharacters = (character, { spaces, plusSign } = {
-    spaces: true,
-    plusSign: true
-}) => {
-    const DIGITS = {
-        '0': '0',
-        '1': '1',
-        '2': '2',
-        '3': '3',
-        '4': '4',
-        '5': '5',
-        '6': '6',
-        '7': '7',
-        '8': '8',
-        '9': '9',
-        '\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,
-    };
-    // Type Guard for index signature.
-    const isValidKey = (key) => {
-        return key in DIGITS;
-    };
-    // Allow spaces && plus sign character
-    if ((spaces && whiteSpaceRegex.test(character)) ||
-        (plusSign && plusSignRegex.test(character))) {
-        return character;
-    }
-    if (isValidKey(character))
-        return DIGITS[character];
-};
-export const inputParser = (input, { allowSpaces }) => {
-    let value = '';
-    for (let index = 0; index < input.length; index++) {
-        if (input[index] === '+' && !value) {
-            value += input[index];
-        }
-        else {
-            const character = allowedCharacters(input[index], { spaces: allowSpaces });
-            if (character !== undefined) {
-                value += character;
-            }
-        }
-    }
-    // We force the + sign as a prefix for the number.
-    if (value.length > 0 && !value.startsWith('+')) {
-        value = '+' + value;
-    }
-    return value;
-};
 // ---------------------------------------------------------------------------
 // Phone-number normalizer
 // ---------------------------------------------------------------------------
@@ -256,7 +171,7 @@ export const parsePhoneInput = (input, country) => {
  *                  default country when the number has no leading `+`.
  */
 export const parse = (raw, country) => {
-    const countryObj = country ? getCountry({ field: 'iso2', value: country }) : undefined;
+    const countryObj = country ? getCountryByIso2(country) : undefined;
     return parsePhoneInput(raw, countryObj);
 };
 /**

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export { generatePlaceholder, parse, normalizeToE164, pickCountries } from './helpers.js';
+export { getCountryByIso2 } from './countryHelpers.js';

package/dist/utils/index.js

@@ -1 +1,2 @@
 export { generatePlaceholder, parse, normalizeToE164, pickCountries } from './helpers.js';
+export { getCountryByIso2 } from './countryHelpers.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "4.1.1",
+  "version": "4.3.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -30,34 +30,34 @@
     "svelte": "^5.0.0"
   },
   "dependencies": {
-    "libphonenumber-js": "1.12.41"
+    "libphonenumber-js": "1.13.6"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "7.0.1",
     "@sveltejs/kit": "^2.57.1",
-    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "@tailwindcss/vite": "^4.2.3",
+    "@tailwindcss/vite": "^4.3.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/svelte": "^5.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/micromatch": "^4.0.10",
     "@types/node": "^22.17.0",
     "dotenv": "^17.4.2",
-    "jsdom": "^29.0.2",
+    "jsdom": "^29.1.1",
     "micromatch": "^4.0.8",
     "postcss": "^8.5.10",
-    "publint": "^0.3.18",
+    "publint": "^0.3.21",
     "svelte": "^5.55.4",
-    "svelte-check": "^4.4.6",
-    "svelte2tsx": "^0.7.53",
-    "tailwindcss": "^4.2.3",
+    "svelte-check": "^4.6.0",
+    "svelte2tsx": "^0.7.56",
+    "tailwindcss": "^4.3.1",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "valibot": "^1.3.1",
+    "valibot": "^1.4.1",
     "vite": "^7.3.2",
-    "vitest": "^4.1.4",
-    "zod": "^4.3.6"
+    "vitest": "^4.1.5",
+    "zod": "^4.4.3"
   },
   "type": "module",
   "license": "MIT",