svelte-tel-input 4.2.0 → 4.3.1

package/dist/components/input/TelInput.svelte

@@ -1,11 +1,17 @@
 <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 { parsePhoneInput, toNationalFormat } from '../../utils/helpers.js';
 	import { telInputAction } from '../../utils/directives/telInputAction.js';
-	import { getCountry, guessCountryByPartialNumber } from '../../utils/countryHelpers.js';
-	import type { CountryCode, TelInputOptions, Props, ValidationError } from '../../types';
+	import { getCountryByIso2, guessCountryByPartialNumber } from '../../utils/countryHelpers.js';
+	import type {
+		CountryCode,
+		TelInputOptions,
+		Props,
+		ValidationError,
+		PreParsed
+	} from '../../types';
 
 	const defaultOptions = {
 		autoPlaceholder: true,
@@ -38,46 +44,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.
@@ -124,7 +143,7 @@
 			if (fullDialCodeMatch) effectiveCountryIso2 = detected?.iso2 ?? null;
 		}
 		const countryObj = effectiveCountryIso2
-			? getCountry({ field: 'iso2', value: effectiveCountryIso2 })
+			? getCountryByIso2(effectiveCountryIso2)
 			: undefined;
 		try {
 			const details = parsePhoneInput(value, countryObj);
@@ -132,13 +151,14 @@
 			if (
 				initialFormat === 'national' &&
 				details.formattedNumber &&
-				details.countryCallingCode
+				details.countryCallingCode &&
+				details.formattedNumber.startsWith(`+${details.countryCallingCode} `)
 			) {
-				const prefix = `+${details.countryCallingCode} `;
-				if (details.formattedNumber.startsWith(prefix)) {
-					const national = details.formattedNumber.slice(prefix.length);
-					return spaces ? national : national.replace(/\s/g, '');
-				}
+				return toNationalFormat(
+					details.formattedNumber,
+					details.countryCallingCode,
+					spaces
+				);
 			}
 			return spaces ? (details.formattedNumber ?? value) : value;
 		} catch {
@@ -160,7 +180,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
@@ -173,11 +192,11 @@
 		...options
 	});
 
-	const handleInputAction = (value: string) => {
+	const handleInputAction = (value: string, preParsed?: PreParsed) => {
 		if (disabled || readonly) return;
 		// First user keystroke exits the "initial national format" display mode.
 		_showNationalFormat = false;
-		handleParsePhoneNumber(value, country, combinedOptions.validateOn !== 'blur');
+		handleParsePhoneNumber(value, country, combinedOptions.validateOn !== 'blur', preParsed);
 	};
 
 	const getValidationError = (
@@ -250,12 +269,13 @@
 	};
 
 	const getCountryObj = (iso2: CountryCode | null | undefined) =>
-		iso2 ? getCountry({ field: 'iso2', value: iso2 }) : undefined;
+		iso2 ? getCountryByIso2(iso2) : undefined;
 
 	const handleParsePhoneNumber = (
 		rawInput: string | null,
 		currCountry: CountryCode | null = null,
-		shouldValidate = true
+		shouldValidate = true,
+		preParsed?: PreParsed
 	) => {
 		// Country-only change: reset state unless option says to keep valid.
 		if (rawInput === null && currCountry !== null) {
@@ -342,8 +362,14 @@
 				? numberHasCountry
 				: selectedCountry;
 
+		// Reuse the action's parse when it used the same country we resolved to;
+		// only the dial-code country-switch path needs a re-parse.
+		const canReuse =
+			preParsed !== undefined && (normalizerCountry?.iso2 ?? null) === preParsed.countryIso2;
 		try {
-			detailedValue = parsePhoneInput(rawInput, normalizerCountry);
+			detailedValue = canReuse
+				? preParsed.detail
+				: parsePhoneInput(rawInput, normalizerCountry);
 		} catch (err) {
 			if (err instanceof ParseError) {
 				detailedValue = {
@@ -382,17 +408,14 @@
 		if (
 			_showNationalFormat &&
 			detailedValue?.formattedNumber &&
-			detailedValue?.countryCallingCode
+			detailedValue?.countryCallingCode &&
+			detailedValue.formattedNumber.startsWith(`+${detailedValue.countryCallingCode} `)
 		) {
-			const _prefix = `+${detailedValue.countryCallingCode} `;
-			if (detailedValue.formattedNumber.startsWith(_prefix)) {
-				const _national = detailedValue.formattedNumber.slice(_prefix.length);
-				inputValue = combinedOptions.spaces ? _national : _national.replace(/\s/g, '');
-			} else {
-				inputValue = combinedOptions.spaces
-					? (detailedValue.formattedNumber ?? rawInput)
-					: rawInput;
-			}
+			inputValue = toNationalFormat(
+				detailedValue.formattedNumber,
+				detailedValue.countryCallingCode,
+				combinedOptions.spaces
+			);
 		} else {
 			inputValue = combinedOptions.spaces
 				? (detailedValue?.formattedNumber ?? rawInput)
@@ -435,14 +458,17 @@
 				if (
 					_showNationalFormat &&
 					detailedValue.formattedNumber &&
-					detailedValue.countryCallingCode
+					detailedValue.countryCallingCode &&
+					detailedValue.formattedNumber.startsWith(
+						`+${detailedValue.countryCallingCode} `
+					)
 				) {
-					const prefix = `+${detailedValue.countryCallingCode} `;
-					if (detailedValue.formattedNumber.startsWith(prefix)) {
-						const national = detailedValue.formattedNumber.slice(prefix.length);
-						inputValue = spaces ? national : national.replace(/\s/g, '');
-						return;
-					}
+					inputValue = toNationalFormat(
+						detailedValue.formattedNumber,
+						detailedValue.countryCallingCode,
+						spaces
+					);
+					return;
 				}
 				inputValue = spaces
 					? (detailedValue.formattedNumber ?? inputValue)
@@ -495,7 +521,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

@@ -41,6 +41,16 @@ export interface DetailedValue {
 	validationError: ValidationError;
 }
 
+/**
+ * A parse result carried from the input action to the component, alongside the
+ * country it was parsed with, so the component can reuse it instead of parsing
+ * the same input a second time.
+ */
+export interface PreParsed {
+	detail: DetailedValue;
+	countryIso2: CountryCode | null;
+}
+
 /**
  * The reason the current phone number input is invalid.
  * - `'REQUIRED'` — field is empty and `required` is `true`
@@ -138,6 +148,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.

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.d.ts

@@ -1,6 +1,6 @@
-import type { CountryCode } from '../../types/index.js';
+import type { CountryCode, PreParsed } from '../../types/index.js';
 interface TelInputActionParams {
-    handler: (val: string) => void;
+    handler: (val: string, preParsed?: PreParsed) => void;
     spaces: boolean;
     country: CountryCode | null | undefined;
     value: string;

package/dist/utils/directives/telInputAction.js

@@ -1,21 +1,7 @@
-import { getCountry } from '../countryHelpers.js';
-import { parsePhoneInput } from '../helpers.js';
+import { getCountryByIso2 } from '../countryHelpers.js';
+import { parsePhoneInput, normalizeForLibphonenumber } from '../helpers.js';
 import { calculateCursorPosition } from '../cursorPosition.js';
 let inputState = null;
-const normalizeUserInput = (input) => {
-    let value = '';
-    for (let i = 0; i < input.length; i++) {
-        const ch = input[i];
-        if (ch >= '0' && ch <= '9') {
-            value += ch;
-            continue;
-        }
-        if (ch === '+' && value.length === 0) {
-            value += ch;
-        }
-    }
-    return value;
-};
 const isFormattingChar = (ch) => {
     if (!ch)
         return false;
@@ -108,10 +94,8 @@ 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 normalized = normalizeForLibphonenumber(userInput);
+    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 +107,6 @@ const onInput = (event, params, node) => {
     const newPosition = calculateCursorPosition({
         beforeValue: state.beforeValue,
         beforeCursor: state.beforeCursor,
-        beforeSelection: state.beforeSelection,
         afterInputValue: userInput,
         afterInputCursor: currentCursor,
         afterValue: formattedInput,
@@ -134,8 +117,9 @@ const onInput = (event, params, node) => {
     // Update value and cursor
     node.value = formattedInput;
     node.setSelectionRange(newPosition, newPosition);
-    // Notify parent component
-    params.handler(formattedInput);
+    // Notify parent component, passing the already-computed parse so the
+    // component can reuse it instead of re-parsing the same input.
+    params.handler(formattedInput, { detail: details, countryIso2: params.country ?? null });
     // Clear state
     inputState = null;
 };

package/dist/utils/helpers.d.ts

@@ -4,22 +4,8 @@ export declare const generatePlaceholder: (country: CountryCode, { spaces, forma
     spaces: boolean;
     format?: "international" | "national";
 }) => 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;
-}) => string;
+export declare const normalizeForLibphonenumber: (input: string) => string;
+export declare const toNationalFormat: (internationalFormat: string, countryCallingCode: string, spaces: boolean) => string;
 export declare const parsePhoneInput: (input: string, country: Country | undefined) => DetailedValue;
 /**
  * Parse a raw phone number string into a `DetailedValue`.

package/dist/utils/helpers.js

@@ -1,8 +1,6 @@
-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');
+import { getCountryByIso2 } from './countryHelpers.js';
 export const generatePlaceholder = (country, { spaces, format } = {
     spaces: true,
     format: 'international'
@@ -10,12 +8,7 @@ export const generatePlaceholder = (country, { spaces, format } = {
     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 toNationalFormat(examplePhoneNumber.formatInternational().trim(), examplePhoneNumber.countryCallingCode, spaces);
         }
         return spaces ? examplePhoneNumber.formatInternational().trim() : examplePhoneNumber.number;
     }
@@ -24,102 +17,10 @@ export const generatePlaceholder = (country, { spaces, format } = {
         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
 // ---------------------------------------------------------------------------
-const normalizeForLibphonenumber = (input) => {
+export const normalizeForLibphonenumber = (input) => {
     let value = '';
     for (let i = 0; i < input.length; i++) {
         const ch = input[i];
@@ -176,6 +77,14 @@ const stripSpecialChars = (s) => s
     .replace(/[()-]/g, ' ')
     .replace(/\s{2,}/g, ' ')
     .trim();
+const stripCallingCode = (internationalFormat, countryCallingCode) => internationalFormat.slice(countryCallingCode.length + 1).trim();
+export const toNationalFormat = (internationalFormat, countryCallingCode, spaces) => {
+    const prefix = `+${countryCallingCode} `;
+    const national = internationalFormat.startsWith(prefix)
+        ? internationalFormat.slice(prefix.length)
+        : internationalFormat;
+    return spaces ? national : national.replace(/\s/g, '');
+};
 export const parsePhoneInput = (input, country) => {
     const normalized = normalizeForLibphonenumber(input);
     const defaultCountryIso2 = country?.iso2;
@@ -203,13 +112,22 @@ export const parsePhoneInput = (input, country) => {
         else if (defaultCountryIso2) {
             const formatted = formatIncompletePhoneNumber(capped, defaultCountryIso2);
             if (formatted === capped && country?.dialCode) {
-                if (phone && phone.nationalNumber !== capped) {
+                // Calling-code leak: libphonenumber consumed a leading digit that
+                // equals the country calling code as the code itself, so
+                // nationalNumber is shorter than what the user typed (e.g. US "11"
+                // → nationalNumber "1"). Those digits are national input, not a
+                // trunk prefix — fall through to the synthesis branch below so the
+                // typed digit is preserved instead of being sliced off.
+                const isCallingCodeLeak = !!countryCallingCode &&
+                    capped.startsWith(countryCallingCode) &&
+                    phone?.nationalNumber === capped.slice(countryCallingCode.length);
+                if (phone && phone.nationalNumber !== capped && !isCallingCodeLeak) {
                     // Trunk-prefixed complete number (e.g. GB "07947…" → nationalNumber
                     // "7947…"). Synthesis would be invalid; use the actual international
                     // format which correctly omits the trunk prefix.
                     formattedNumber =
                         formatInternational && countryCallingCode
-                            ? formatInternational.slice(countryCallingCode.length + 1).trim()
+                            ? stripCallingCode(formatInternational, countryCallingCode)
                             : stripSpecialChars(capped);
                 }
                 else {
@@ -217,7 +135,7 @@ export const parsePhoneInput = (input, country) => {
                     // Synthesize an international string to get consistent spacing from
                     // the first digit, then strip "+{dialCode} ".
                     const intl = formatIncompletePhoneNumber(`+${country.dialCode}${capped}`);
-                    formattedNumber = stripSpecialChars(intl.slice(country.dialCode.length + 1).trim());
+                    formattedNumber = stripSpecialChars(stripCallingCode(intl, country.dialCode));
                 }
             }
             else {
@@ -245,7 +163,7 @@ export const parsePhoneInput = (input, country) => {
         formatInternational,
         formatNational,
         formatOriginal: formatInternational && countryCallingCode
-            ? formatInternational.slice(countryCallingCode.length + 1).trim()
+            ? stripCallingCode(formatInternational, countryCallingCode)
             : null,
         formattedNumber,
         isPossible: asYouType.isPossible(),
@@ -265,7 +183,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.2.0",
+  "version": "4.3.1",
   "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.42"
+    "libphonenumber-js": "1.13.7"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "7.0.1",
-    "@sveltejs/kit": "^2.57.1",
-    "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "@tailwindcss/vite": "^4.2.4",
+    "@sveltejs/kit": "^2.67.0",
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@tailwindcss/vite": "^4.3.1",
     "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/svelte": "^5.3.1",
+    "@testing-library/svelte": "^5.4.2",
     "@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",
-    "svelte": "^5.55.4",
-    "svelte-check": "^4.4.6",
-    "svelte2tsx": "^0.7.53",
-    "tailwindcss": "^4.2.4",
+    "postcss": "^8.5.15",
+    "publint": "^0.3.21",
+    "svelte": "^5.56.4",
+    "svelte-check": "^4.7.1",
+    "svelte2tsx": "^0.7.57",
+    "tailwindcss": "^4.3.1",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "valibot": "^1.3.1",
-    "vite": "^7.3.2",
-    "vitest": "^4.1.5",
-    "zod": "^4.3.6"
+    "typescript": "^6.0.3",
+    "valibot": "^1.4.1",
+    "vite": "^8.1.0",
+    "vitest": "^4.1.9",
+    "zod": "^4.4.3"
   },
   "type": "module",
   "license": "MIT",