svelte-tel-input 4.0.1 → 4.1.0

package/README.md

@@ -9,7 +9,7 @@ A **headless**, fully customizable **Svelte 5** phone input toolkit.
 All the ingredients to parse, format, and validate international phone numbers — you build the UI.
 Store in [E.164](https://en.wikipedia.org/wiki/E.164). Ship with any CSS framework, design system, or custom markup.
 
-[Documentation](https://svelte-tel-input.vercel.app/) · [Playground](https://svelte-tel-input.vercel.app/playground/) · [Changelog](CHANGELOG.md)
+[Documentation](https://svelte-tel-input.vercel.app/) · [Playground](https://svelte-tel-input.vercel.app/playground/) · [Changelog](https://github.com/gyurielf/svelte-tel-input/blob/main/packages/svelte-tel-input/CHANGELOG.md)
 
 </div>
 
@@ -80,7 +80,10 @@ Full API reference, options, events, types, and examples are on the **[documenta
 - [Options](https://svelte-tel-input.vercel.app/reference/options/)
 - [Events / Callbacks](https://svelte-tel-input.vercel.app/reference/events/)
 - [API Methods](https://svelte-tel-input.vercel.app/reference/api/)
+- [Validators](https://svelte-tel-input.vercel.app/reference/validators/)
+- [Utilities](https://svelte-tel-input.vercel.app/reference/utilities/)
 - [Types](https://svelte-tel-input.vercel.app/reference/types/)
+- [Assets](https://svelte-tel-input.vercel.app/reference/assets/)
 - [Playground](https://svelte-tel-input.vercel.app/playground/)
 
 ## Support

package/dist/components/input/TelInput.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { onMount, untrack } from 'svelte';
 	import { ParseError } from 'libphonenumber-js/max';
-	import { generatePlaceholder, parsePhoneInput, telInputAction } from '../../utils/index.js';
+	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 type { CountryCode, TelInputOptions, Props, ValidationError } from '../../types';
-	import { getCountry, guessCountryByPartialNumber } from '../../utils/directives/countryHelpers';
 
 	const defaultOptions = {
 		autoPlaceholder: true,
@@ -26,12 +28,13 @@
 		onValidityChange,
 		onValueChange,
 		onError,
+		initialFormat = 'international',
 		value = $bindable(''),
 		country = $bindable(null),
 		defaultCountry = null,
 		detailedValue = $bindable(null),
 		valid = $bindable(true),
-		validationError = $bindable<ValidationError>(null),
+		validationError = $bindable<Readonly<ValidationError>>(null),
 		options = defaultOptions,
 		el = $bindable(undefined),
 		'aria-invalid': ariaInvalidProp = undefined,
@@ -125,6 +128,17 @@
 		try {
 			const details = parsePhoneInput(value, countryObj);
 			const spaces = options?.spaces ?? defaultOptions.spaces;
+			if (
+				initialFormat === 'national' &&
+				details.formattedNumber &&
+				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 spaces ? (details.formattedNumber ?? value) : value;
 		} catch {
 			return value;
@@ -147,6 +161,11 @@
 	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
+	// `initialFormat='national'` and is cleared the first time the user types.
+	let _showNationalFormat = untrack(() => initialFormat === 'national');
+
 	// Merge options into default opts, to be able to set just one config option.
 	const combinedOptions = $derived({
 		...defaultOptions,
@@ -155,6 +174,8 @@
 
 	const handleInputAction = (value: string) => {
 		if (disabled || readonly) return;
+		// First user keystroke exits the "initial national format" display mode.
+		_showNationalFormat = false;
 		handleParsePhoneNumber(value, country, combinedOptions.validateOn !== 'blur');
 	};
 
@@ -355,9 +376,27 @@
 		}
 
 		// `inputValue` is the displayed value (must stay in sync with the directive's formatting).
-		inputValue = combinedOptions.spaces
-			? (detailedValue?.formattedNumber ?? rawInput)
-			: rawInput;
+		// When `_showNationalFormat` is true (initial render, user hasn't typed yet),
+		// strip the dial-code prefix so the value appears in national format.
+		if (
+			_showNationalFormat &&
+			detailedValue?.formattedNumber &&
+			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;
+			}
+		} else {
+			inputValue = combinedOptions.spaces
+				? (detailedValue?.formattedNumber ?? rawInput)
+				: rawInput;
+		}
 
 		// `value` is the stored value (E.164 when possible).
 		value = detailedValue?.e164 ?? rawInput;
@@ -385,11 +424,24 @@
 			: placeholder
 	);
 
-	// Re-format displayed value when spaces option changes
+	// Re-format displayed value when spaces option changes.
+	// Also respects _showNationalFormat so the initial national rendering is preserved.
 	$effect(() => {
 		const spaces = combinedOptions.spaces;
 		untrack(() => {
 			if (inputValue !== '' && detailedValue) {
+				if (
+					_showNationalFormat &&
+					detailedValue.formattedNumber &&
+					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 = spaces
 					? (detailedValue.formattedNumber ?? inputValue)
 					: (detailedValue.e164 ?? inputValue);
@@ -397,13 +449,16 @@
 		});
 	});
 
-	//Detect externally driven value changes (e.g. parent sets bind:value, or resets to null).
+	//Detect externally driven value changes (e.g. parent sets bind:value, or resets to '').
 	//The shadow `_lastWrittenValue` is stamped on every internal write inside
 	//handleParsePhoneNumber, so any difference here means the parent changed it.
 	$effect(() => {
 		const currentValue = value;
 		untrack(() => {
 			if (currentValue !== _lastWrittenValue) {
+				// External change (parent set value): re-apply initialFormat so the
+				// display respects it, just like on initial load.
+				_showNationalFormat = initialFormat === 'national';
 				handleParsePhoneNumber(currentValue, country ?? null);
 			}
 		});
@@ -434,6 +489,8 @@
 		if (value) {
 			// If country is specified, use it; otherwise, use the initial country (which is figured out from value)
 			const currentCountry = country || initialCountry;
+			// handleParsePhoneNumber respects _showNationalFormat internally,
+			// so national format is applied automatically when initialFormat='national'. Later maybe this could be optional.
 			handleParsePhoneNumber(value, currentCountry);
 		}
 		// isInitialized = true;

package/dist/index.d.ts

@@ -1,4 +1,3 @@
 export { default as TelInput } from './components/input/TelInput.svelte';
-export { inputParser, clickOutsideAction, isSelected, parsePhoneInput, parse, normalizeToE164, pickCountries } from './utils/index.js';
-export { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js/max';
+export { parse, normalizeToE164, pickCountries } from './utils/index.js';
 export { countries } from './assets/index.js';

package/dist/index.js

@@ -1,4 +1,3 @@
 export { default as TelInput } from './components/input/TelInput.svelte';
-export { inputParser, clickOutsideAction, isSelected, parsePhoneInput, parse, normalizeToE164, pickCountries } from './utils/index.js';
-export { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js/max';
+export { parse, normalizeToE164, pickCountries } from './utils/index.js';
 export { countries } from './assets/index.js';

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-import type { CountryCallingCode, CountryCode, MetadataJson, PhoneNumber } from 'libphonenumber-js';
+import type { CountryCode } from 'libphonenumber-js';
 import type { HTMLInputAttributes } from 'svelte/elements';
 
 export interface Country {
@@ -38,7 +38,7 @@ export interface DetailedValue {
 	uri: string | null;
 	e164: string | null;
 	/** Granular validation error when `isValid` is `false`. */
-	validationError?: ValidationError;
+	validationError: ValidationError;
 }
 
 /**
@@ -133,7 +133,7 @@ export interface Props extends HTMLInputAttributes {
 	/** Validity of the input based on the config settings. */
 	valid?: boolean;
 	/** The reason the current value is invalid, or `null` when valid. */
-	validationError?: ValidationError;
+	validationError?: Readonly<ValidationError>;
 	/** You can turn on and off certain features by this object */
 	options?: TelInputOptions;
 	/** Binding to the underlying `<input>` element */
@@ -148,7 +148,7 @@ export interface Props extends HTMLInputAttributes {
 	 * @param newValidity The new validity state.
 	 * @param error The validation error type.
 	 */
-	onValidityChange?: (newValidity: boolean, error: ValidationError) => void;
+	onValidityChange?: (newValidity: boolean, error: Readonly<ValidationError>) => void;
 	/**
 	 * Callback fired when the value or details change.
 	 * @param newValue The new E164 value.
@@ -164,6 +164,15 @@ export interface Props extends HTMLInputAttributes {
 	 * Callback fired after component initialization.
 	 */
 	onLoad?: () => void;
+	/**
+	 * Controls how the initial `value` is displayed in the input field.
+	 * - `'international'` — displays the number with the country dial code prefix (e.g. `+36 20 123 4567`). This is the default.
+	 * - `'national'` — displays the national part only (e.g. `20 123 4567`), while `value` remains E164. The `country` prop will be auto-detected from the value if not explicitly set.
+	 *
+	 * This only affects the initial render and outside change from the provided `value` prop; user input behaviour is unchanged.
+	 * @default 'international'
+	 */
+	initialFormat?: 'international' | 'national';
 }
 
-export type { CountryCallingCode, CountryCode, PhoneNumber, MetadataJson };
+export type { CountryCode };

package/dist/utils/{directives/countryHelpers.d.ts → countryHelpers.d.ts}

@@ -1,4 +1,4 @@
-import type { CountryCode, Country } from '../../types/index.js';
+import type { CountryCode, Country } from '../types/index.js';
 export declare const getCountry: ({ field, value, countries }: {
     /**
      * Field to search by

package/dist/utils/{directives/countryHelpers.js → countryHelpers.js}

@@ -1,4 +1,4 @@
-import { countries as normalizedCountries } from '../../assets/index.js';
+import { countries as normalizedCountries } from '../assets/index.js';
 export const getCountry = ({ field, value, countries = normalizedCountries }) => {
     if (['priority'].includes(field)) {
         throw new Error(`Field "${field}" is not supported`);

package/dist/utils/directives/telInputAction.js

@@ -1,6 +1,6 @@
-import { getCountry } from './countryHelpers.js';
+import { getCountry } from '../countryHelpers.js';
 import { parsePhoneInput } from '../helpers.js';
-import { calculateCursorPosition } from './cursorPosition.js';
+import { calculateCursorPosition } from '../cursorPosition.js';
 let inputState = null;
 const normalizeUserInput = (input) => {
     let value = '';

package/dist/utils/helpers.js

@@ -1,6 +1,6 @@
 import { AsYouType, getExampleNumber, formatIncompletePhoneNumber, validatePhoneNumberLength } from 'libphonenumber-js/max';
 import { examplePhoneNumbers, countries } from '../assets/index.js';
-import { getCountry } from './directives/countryHelpers.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 } = {

package/dist/utils/index.d.ts

@@ -1,3 +1 @@
-export { generatePlaceholder, inputParser, isSelected, parse, normalizeToE164, parsePhoneInput, pickCountries } from './helpers.js';
-export * from './directives/clickOutsideAction.js';
-export * from './directives/telInputAction.js';
+export { generatePlaceholder, parse, normalizeToE164, pickCountries } from './helpers.js';

package/dist/utils/index.js

@@ -1,3 +1 @@
-export { generatePlaceholder, inputParser, isSelected, parse, normalizeToE164, parsePhoneInput, pickCountries } from './helpers.js';
-export * from './directives/clickOutsideAction.js';
-export * from './directives/telInputAction.js';
+export { generatePlaceholder, parse, normalizeToE164, pickCountries } from './helpers.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -30,32 +30,33 @@
     "svelte": "^5.0.0"
   },
   "dependencies": {
-    "libphonenumber-js": "1.12.40"
+    "libphonenumber-js": "1.12.41"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "7.0.1",
-    "@sveltejs/kit": "^2.55.0",
+    "@sveltejs/kit": "^2.57.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "@tailwindcss/vite": "^4.2.2",
+    "@tailwindcss/vite": "^4.2.3",
     "@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",
-    "dotenv": "^17.3.1",
-    "jsdom": "^29.0.1",
+    "@types/node": "^22.17.0",
+    "dotenv": "^17.4.2",
+    "jsdom": "^29.0.2",
     "micromatch": "^4.0.8",
-    "postcss": "^8.5.8",
+    "postcss": "^8.5.10",
     "publint": "^0.3.18",
-    "svelte": "^5.54.0",
-    "svelte-check": "^4.4.5",
-    "svelte2tsx": "^0.7.52",
-    "tailwindcss": "^4.2.2",
+    "svelte": "^5.55.4",
+    "svelte-check": "^4.4.6",
+    "svelte2tsx": "^0.7.53",
+    "tailwindcss": "^4.2.3",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
     "valibot": "^1.3.1",
-    "vite": "^7.3.1",
-    "vitest": "^4.1.1",
+    "vite": "^7.3.2",
+    "vitest": "^4.1.4",
     "zod": "^4.3.6"
   },
   "type": "module",

package/dist/utils/directives/clickOutsideAction.d.ts

@@ -1,3 +0,0 @@
-export declare const clickOutsideAction: (node: HTMLElement, handler: () => void, skipPrevented?: boolean) => {
-    destroy: () => void;
-};

package/dist/utils/directives/clickOutsideAction.js

@@ -1,18 +0,0 @@
-export const clickOutsideAction = (node, handler, skipPrevented = true) => {
-    const handleClick = async (event) => {
-        if (skipPrevented) {
-            if (!node.contains(event.target) && !event.defaultPrevented)
-                handler();
-        }
-        else {
-            if (!node.contains(event.target))
-                handler();
-        }
-    };
-    document.addEventListener('click', handleClick, true);
-    return {
-        destroy() {
-            document.removeEventListener('click', handleClick, true);
-        }
-    };
-};