svelte-tel-input 4.0.2 → 4.1.1

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

@@ -28,6 +28,7 @@
 		onValidityChange,
 		onValueChange,
 		onError,
+		initialFormat = 'international',
 		value = $bindable(''),
 		country = $bindable(null),
 		defaultCountry = null,
@@ -127,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;
@@ -149,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,
@@ -157,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');
 	};
 
@@ -357,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;
@@ -387,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);
@@ -399,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);
 			}
 		});
@@ -436,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/types/index.d.ts

@@ -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 { CountryCode };

package/dist/utils/helpers.js

@@ -108,7 +108,7 @@ export const inputParser = (input, { allowSpaces }) => {
     return value;
 };
 // ---------------------------------------------------------------------------
-// Phone-number normalizer (merged from newHelpers.ts)
+// Phone-number normalizer
 // ---------------------------------------------------------------------------
 const normalizeForLibphonenumber = (input) => {
     let value = '';
@@ -193,8 +193,23 @@ export const parsePhoneInput = (input, country) => {
         }
         else if (defaultCountryIso2) {
             const formatted = formatIncompletePhoneNumber(capped, defaultCountryIso2);
-            if (formatted === capped && formatInternational && countryCallingCode) {
-                formattedNumber = formatInternational.slice(countryCallingCode.length + 1).trim();
+            if (formatted === capped && country?.dialCode) {
+                if (phone && phone.nationalNumber !== capped) {
+                    // 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()
+                            : stripSpecialChars(capped);
+                }
+                else {
+                    // National significant digits (partial or complete, no trunk prefix).
+                    // 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());
+                }
             }
             else {
                 formattedNumber = stripSpecialChars(formatted || capped);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "4.0.2",
+  "version": "4.1.1",
   "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.55.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",