svelte-tel-input 3.5.1 → 3.6.0

package/README.md

@@ -63,12 +63,12 @@ _Snippet would be too long_ - [Example](https://github.com/gyurielf/svelte-tel-i
     name="Country"
     bind:value={selectedCountry}
   >
-    <option value={null} hidden={country !== null}>Please select</option>
+    <option value={null} hidden={selectedCountry !== null}>Please select</option>
     {#each normalizedCountries as currentCountry (currentCountry.id)}
       <option
         value={currentCountry.iso2}
-        selected={currentCountry.iso2 === country}
-        aria-selected={currentCountry.iso2 === country}
+        selected={currentCountry.iso2 === selectedCountry}
+        aria-selected={currentCountry.iso2 === selectedCountry}
       >
         {currentCountry.iso2} (+{currentCountry.dialCode})
       </option>
@@ -79,7 +79,7 @@ _Snippet would be too long_ - [Example](https://github.com/gyurielf/svelte-tel-i
     bind:value
     bind:valid
     bind:detailedValue
-    class="basic-tel-input {!isValid ? 'invalid' : ''}"
+    class="basic-tel-input {!valid ? 'invalid' : ''}"
   />
 </div>
 

package/dist/components/input/TelInput.svelte

@@ -1,17 +1,19 @@
-<script>import { createEventDispatcher, onMount } from "svelte";
+<script>import { createEventDispatcher, onMount, tick } from "svelte";
 import { parsePhoneNumberWithError, ParseError } from "libphonenumber-js/max";
 import {
   normalizeTelInput,
   getCountryForPartialE164Number,
   generatePlaceholder,
-  telInputAction
+  telInputAction,
+  allowedCharacters
 } from "../../utils/index.js";
 const dispatch = createEventDispatcher();
 const defaultOptions = {
   autoPlaceholder: true,
   spaces: true,
   invalidateOnCountryChange: false,
-  format: "national"
+  format: "national",
+  strictCountry: false
 };
 export let autocomplete = null;
 let classes = "";
@@ -44,19 +46,34 @@ const updateCountry = (countryCode) => {
     country = countryCode;
     prevCountry = country;
     dispatch("updateCountry", country);
+    dispatch("updateDetailedValue", detailedValue);
   }
   return country;
 };
-const handleParsePhoneNumber = (rawInput, currCountry = null) => {
+const findNewCursorPosition = (newValue, formattedValue, initialCursorPosition) => {
+  let fvIndex = 0;
+  for (let nvIndex = 0; nvIndex < initialCursorPosition; nvIndex++) {
+    const nvChar = allowedCharacters(newValue[nvIndex], { spaces: false });
+    if (nvChar >= "0" && nvChar <= "9") {
+      while (!(formattedValue[fvIndex] >= "0" && formattedValue[fvIndex] <= "9") && fvIndex < formattedValue.length) {
+        fvIndex++;
+      }
+      fvIndex++;
+    }
+  }
+  return fvIndex;
+};
+const handleParsePhoneNumber = async (rawInput, currCountry = null) => {
   const input = rawInput;
   if (input !== null) {
-    const numberHasCountry = getCountryForPartialE164Number(input);
-    if (numberHasCountry && numberHasCountry !== prevCountry) {
-      updateCountry(numberHasCountry);
+    const detectedCountry = getCountryForPartialE164Number(input);
+    const useCountry = options?.strictCountry ? currCountry : detectedCountry ?? currCountry;
+    if (!options?.strictCountry && detectedCountry && detectedCountry !== prevCountry) {
+      updateCountry(detectedCountry);
     }
     try {
       detailedValue = normalizeTelInput(
-        parsePhoneNumberWithError(input, numberHasCountry ?? currCountry ?? void 0)
+        parsePhoneNumberWithError(input, useCountry ?? void 0)
       );
     } catch (err) {
       if (err instanceof ParseError) {
@@ -71,10 +88,31 @@ const handleParsePhoneNumber = (rawInput, currCountry = null) => {
     }
     const formatOption = combinedOptions.format === "national" ? "nationalNumber" : "e164";
     const formattedValue = combinedOptions.format === "national" ? "formatOriginal" : "formatInternational";
+    const initialCursorPosition = el?.selectionStart || 0;
     if (combinedOptions.spaces && detailedValue?.[formattedValue]) {
       inputValue = detailedValue[formattedValue] ?? null;
+      await tick();
+      if (el) {
+        const newCursorPosition = findNewCursorPosition(
+          input,
+          inputValue,
+          initialCursorPosition
+        );
+        el.selectionStart = newCursorPosition;
+        el.selectionEnd = newCursorPosition;
+      }
     } else if (detailedValue?.[formatOption]) {
       inputValue = detailedValue[formatOption] ?? null;
+      await tick();
+      if (el) {
+        const newCursorPosition = findNewCursorPosition(
+          input,
+          inputValue,
+          initialCursorPosition
+        );
+        el.selectionStart = newCursorPosition;
+        el.selectionEnd = newCursorPosition;
+      }
     }
     value = detailedValue?.e164 ?? input ?? null;
     valid = detailedValue?.isValid ?? false;
@@ -124,13 +162,16 @@ export const updateValue = (newValue, newCountry) => {
   if (castedValue) {
     handleParsePhoneNumber(
       castedValue,
-      getCountryForPartialE164Number(castedValue) || newCountry
+      options?.strictCountry ? country : getCountryForPartialE164Number(castedValue) || newCountry
     );
   }
 };
 onMount(() => {
   if (value) {
-    handleParsePhoneNumber(value, getCountryForPartialE164Number(value) || country);
+    handleParsePhoneNumber(
+      value,
+      options?.strictCountry ? country : getCountryForPartialE164Number(value) || country
+    );
   }
 });
 </script>
@@ -162,6 +203,7 @@ onMount(() => {
 	use:telInputAction={{
 		handler: handleInputAction,
 		spaces: combinedOptions.spaces,
-		value
+		value,
+		strictCountryCode: combinedOptions.strictCountry
 	}}
 />

package/dist/types/index.d.ts

@@ -75,6 +75,11 @@ export interface TelInputOptions {
 	 * @default false
 	 */
 	invalidateOnCountryChange?: boolean;
+	/**
+	 * Prevent automatic country parsing from the input value. It validates via the passed `country` property value.
+	 * @default false
+	 */
+	strictCountry?: boolean;
 	/**
 	 *  "international": `+36 20 123 4567`,
 	 *  "default": `20 123 4567`

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

@@ -1,8 +1,9 @@
 import type { E164Number } from 'libphonenumber-js';
-export declare const telInputAction: (node: HTMLInputElement, { handler, spaces }: {
+export declare const telInputAction: (node: HTMLInputElement, { handler, spaces, strictCountryCode }: {
     handler: (val: string) => void;
     spaces: boolean;
     value: E164Number | null;
+    strictCountryCode: boolean;
 }) => {
     update(params: {
         handler: (val: string) => void;

package/dist/utils/directives/telInputAction.js

@@ -1,11 +1,12 @@
 import { inspectAllowedChars, inputParser } from '../../index.js';
-export const telInputAction = (node, { handler, spaces }) => {
+export const telInputAction = (node, { handler, spaces, strictCountryCode }) => {
     const onInput = (event) => {
         if (node && node.contains(event.target)) {
             const currentValue = event.target.value;
             const formattedInput = inputParser(currentValue, {
                 parseCharacter: inspectAllowedChars,
-                allowSpaces: spaces
+                allowSpaces: spaces,
+                disallowPlusSign: strictCountryCode
             });
             node.value = formattedInput;
             handler(formattedInput);

package/dist/utils/helpers.d.ts

@@ -69,8 +69,9 @@ export declare const isSupportedCountry: (country: CountryCode, metadata: Metada
 export declare const allowedCharacters: (character: string, { spaces }?: {
     spaces?: boolean;
 }) => string;
-export declare const inputParser: (text: string, { allowSpaces, parseCharacter }: {
+export declare const inputParser: (text: string, { allowSpaces, parseCharacter, disallowPlusSign }: {
     allowSpaces: boolean;
-    parseCharacter: (char: string, val: string, allowSpaces?: boolean) => string | undefined;
+    disallowPlusSign: boolean;
+    parseCharacter: (char: string, val: string, allowSpaces: boolean, disallowPlusSign: boolean) => string | undefined;
 }) => string;
-export declare const inspectAllowedChars: (character: string, value: string, allowSpaces?: boolean) => string;
+export declare const inspectAllowedChars: (character: string, value: string, allowSpaces: boolean, disallowPlusSign: boolean) => string;

package/dist/utils/helpers.js

@@ -31,16 +31,16 @@ export const normalizeTelInput = (input) => {
         isPossible: input ? input.isPossible() : false,
         phoneNumber: input ? input.number : null,
         countryCallingCode: input ? input.countryCallingCode : null,
-        formattedNumber: input ? input.formatInternational() : null,
+        formattedNumber: input ? new AsYouType().input(input.number) : null,
         nationalNumber: input ? input.nationalNumber : null,
-        formatInternational: input ? input.formatInternational() : null,
+        formatInternational: input ? new AsYouType().input(input.number) : null,
         formatOriginal: input
-            ? input
-                .formatInternational()
+            ? new AsYouType()
+                .input(input.number)
                 .slice(input.countryCallingCode.length + 1)
                 .trim()
             : null,
-        formatNational: input ? input.formatNational() : null,
+        formatNational: input ? new AsYouType(input.country).input(input.number) : null,
         uri: input ? input.getURI() : null,
         e164: input ? input.number : null
     }).filter(([, value]) => value !== null));
@@ -265,19 +265,19 @@ export const allowedCharacters = (character, { spaces } = {
     // Allow digits
     return DIGITS[character];
 };
-export const inputParser = (text, { allowSpaces, parseCharacter }) => {
+export const inputParser = (text, { allowSpaces, parseCharacter, disallowPlusSign }) => {
     let value = '';
     for (let index = 0; index < text.length; index++) {
-        const character = parseCharacter(text[index], value, allowSpaces);
+        const character = parseCharacter(text[index], value, allowSpaces, disallowPlusSign);
         if (character !== undefined) {
             value += character;
         }
     }
     return value;
 };
-export const inspectAllowedChars = (character, value, allowSpaces) => {
+export const inspectAllowedChars = (character, value, allowSpaces, disallowPlusSign) => {
     // Leading plus is allowed
-    if (character === '+') {
+    if (!disallowPlusSign && character === '+') {
         if (!value) {
             return character;
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "3.5.1",
+  "version": "3.6.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -27,7 +27,7 @@
     "pnpm": ">= 8"
   },
   "peerDependencies": {
-    "svelte": "^3.58.0 || ^4.0.0"
+    "svelte": "^3.58.0 || ^4.0.0 || ^5.0.0"
   },
   "dependencies": {
     "libphonenumber-js": "1.10.43"