svelte-tel-input 4.0.0 → 4.0.2

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,
@@ -31,7 +33,7 @@
 		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,
@@ -161,8 +163,18 @@
 	const getValidationError = (
 		isEmpty: boolean,
 		parseValid: boolean,
-		resolvedCountry: CountryCode | null | undefined
+		resolvedCountry: CountryCode | null | undefined,
+		currentCountry: CountryCode | null | undefined = country
 	): ValidationError => {
+		if (
+			combinedOptions.lockCountry &&
+			currentCountry != null &&
+			resolvedCountry != null &&
+			resolvedCountry !== currentCountry
+		) {
+			return 'COUNTRY_NOT_ALLOWED';
+		}
+
 		const allowed = combinedOptions.allowedCountries;
 		if (allowed?.length && resolvedCountry != null && !allowed.includes(resolvedCountry)) {
 			return 'COUNTRY_NOT_ALLOWED';
@@ -176,9 +188,10 @@
 	const applyValidity = (
 		isEmpty: boolean,
 		parseValid: boolean,
-		resolvedCountry?: CountryCode | null
+		resolvedCountry?: CountryCode | null,
+		currentCountry: CountryCode | null | undefined = country
 	) => {
-		const error = getValidationError(isEmpty, parseValid, resolvedCountry);
+		const error = getValidationError(isEmpty, parseValid, resolvedCountry, currentCountry);
 		valid = error === null;
 		validationError = error;
 		onValidityChange?.(valid, error);
@@ -193,7 +206,12 @@
 			if (inputValue === '') {
 				applyValidity(true, false, country);
 			} else {
-				applyValidity(false, detailedValue?.isValid ?? false, country);
+				applyValidity(
+					false,
+					detailedValue?.isPhoneValid ?? false,
+					detailedValue?.countryCode ?? country,
+					country
+				);
 			}
 		}
 		const { onblur } = rest;
@@ -319,21 +337,22 @@
 			}
 		}
 
-		// If the resolved country is not in allowedCountries, the phone number is
-		// intrinsically valid (libphonenumber-js says so) but the application rejects
-		// it. Patch detailedValue to reflect this so that detailedValue.isValid is
-		// consistent with the component's `valid` prop and `validationError`.
-		const _allowedCountries = combinedOptions.allowedCountries;
-		if (
-			detailedValue &&
-			_allowedCountries?.length &&
-			detailedValue.countryCode != null &&
-			!_allowedCountries.includes(detailedValue.countryCode)
-		) {
+		const resolvedCountry =
+			detailedValue?.countryCode ?? numberHasCountry?.iso2 ?? country ?? null;
+		const componentValidationError = detailedValue
+			? getValidationError(
+					false,
+					detailedValue.isPhoneValid ?? false,
+					resolvedCountry,
+					currCountry ?? country
+				)
+			: null;
+
+		if (detailedValue && componentValidationError !== detailedValue.validationError) {
 			detailedValue = {
 				...detailedValue,
-				isValid: false,
-				validationError: 'COUNTRY_NOT_ALLOWED'
+				isValid: componentValidationError === null && detailedValue.isPhoneValid,
+				validationError: componentValidationError
 			};
 		}
 
@@ -348,7 +367,12 @@
 		onValueChange?.(value, detailedValue);
 
 		if (shouldValidate) {
-			applyValidity(false, detailedValue?.isValid ?? false, country);
+			applyValidity(
+				false,
+				detailedValue?.isPhoneValid ?? false,
+				resolvedCountry,
+				currCountry ?? country
+			);
 		}
 	};
 

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,13 +38,13 @@ export interface DetailedValue {
 	uri: string | null;
 	e164: string | null;
 	/** Granular validation error when `isValid` is `false`. */
-	validationError?: ValidationError;
+	validationError: ValidationError;
 }
 
 /**
  * The reason the current phone number input is invalid.
  * - `'REQUIRED'` — field is empty and `required` is `true`
- * - `'COUNTRY_NOT_ALLOWED'` — the resolved country is not in `options.allowedCountries`
+ * - `'COUNTRY_NOT_ALLOWED'` — the resolved country is not in `options.allowedCountries`, or `options.lockCountry` rejects an international number that resolves to a different country than the locked one
  * - `'TOO_SHORT'` — number has too few digits
  * - `'TOO_LONG'` — number has too many digits
  * - `'NOT_A_NUMBER'` — input does not look like a phone number at all
@@ -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.
@@ -166,4 +166,4 @@ export interface Props extends HTMLInputAttributes {
 	onLoad?: () => void;
 }
 
-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.0",
+  "version": "4.0.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -47,7 +47,7 @@
     "micromatch": "^4.0.8",
     "postcss": "^8.5.8",
     "publint": "^0.3.18",
-    "svelte": "^5.54.0",
+    "svelte": "^5.55.0",
     "svelte-check": "^4.4.5",
     "svelte2tsx": "^0.7.52",
     "tailwindcss": "^4.2.2",
@@ -55,7 +55,7 @@
     "typescript": "^5.9.3",
     "valibot": "^1.3.1",
     "vite": "^7.3.1",
-    "vitest": "^4.1.0",
+    "vitest": "^4.1.1",
     "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);
-        }
-    };
-};