intl-tel-input 25.12.5 → 25.13.0

package/README.md

@@ -81,16 +81,16 @@ _Note: We have now dropped support for all versions of Internet Explorer because
 ## Getting Started (Using a CDN)
 1. Add the CSS
   ```html
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.5/build/css/intlTelInput.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.0/build/css/intlTelInput.css">
   ```
 
 2. Add the plugin script and initialise it on your input element
   ```html
-  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.5/build/js/intlTelInput.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.0/build/js/intlTelInput.min.js"></script>
   <script>
     const input = document.querySelector("#phone");
     window.intlTelInput(input, {
-      loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.5/build/js/utils.js"),
+      loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.0/build/js/utils.js"),
     });
   </script>
   ```
@@ -328,12 +328,12 @@ Set the initial country selection by specifying its country code, e.g. `"us"` fo
 Type: `() => Promise<module>` Default: `null`  
 This is one way to lazy load the included utils.js (to enable formatting/validation, etc) - see [Loading The Utilities Script](#loading-the-utilities-script) for more options.
 
-The `loadUtils` option takes a function that returns a Promise resolving to the utils module (see example code below). You can `import` the utils module in different ways: (A) from a CDN, (B) from your own hosted version of [utils.js](https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.5/build/js/utils.js), or (C) if you use a bundler like Webpack, Vite or Parcel, you can import it directly from the package.
+The `loadUtils` option takes a function that returns a Promise resolving to the utils module (see example code below). You can `import` the utils module in different ways: (A) from a CDN, (B) from your own hosted version of [utils.js](https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.0/build/js/utils.js), or (C) if you use a bundler like Webpack, Vite or Parcel, you can import it directly from the package.
 
 ```js
 // (A) import utils module from a CDN
 intlTelInput(htmlInputElement, {
-  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.5/build/js/utils.js"),
+  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.0/build/js/utils.js"),
 });
 
 // (B) import utils module from your own hosted version of utils.js

package/angular/README.md

@@ -54,7 +54,7 @@ import "intl-tel-input/styles";
 
 See the [validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/angular/demo/validation/validation.component.ts) for a more fleshed-out example of how to handle validation, or check out the [form demo](https://github.com/jackocnr/intl-tel-input/blob/master/angular/demo/form/form.component.ts) for an alternative approach using `ReactiveFormsModule`.
 
-A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just `import { IntlTelInputComponent } from "intl-tel-input/angularWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/angular"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.5/build/js/utils.js"`.
+A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just `import { IntlTelInputComponent } from "intl-tel-input/angularWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/angular"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.0/build/js/utils.js"`.
 
 ## Props
 

package/angular/build/IntlTelInput.js

@@ -2805,6 +2805,45 @@ var Iti = class _Iti {
   static _getIsAndroid() {
     return typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
   }
+  _updateNumeralSet(str) {
+    if (/[\u0660-\u0669]/.test(str)) {
+      this.userNumeralSet = "arabic-indic";
+    } else if (/[\u06F0-\u06F9]/.test(str)) {
+      this.userNumeralSet = "persian";
+    } else {
+      this.userNumeralSet = "ascii";
+    }
+  }
+  _mapAsciiToUserNumerals(str) {
+    if (!this.userNumeralSet) {
+      this._updateNumeralSet(this.ui.telInput.value);
+    }
+    if (this.userNumeralSet === "ascii") {
+      return str;
+    }
+    const base = this.userNumeralSet === "arabic-indic" ? 1632 : 1776;
+    return str.replace(/[0-9]/g, (d) => String.fromCharCode(base + Number(d)));
+  }
+  // Normalize Eastern Arabic (U+0660-0669) and Persian/Extended Arabic-Indic (U+06F0-06F9) numerals to ASCII 0-9
+  _normaliseNumerals(str) {
+    if (!str) {
+      return "";
+    }
+    this._updateNumeralSet(str);
+    if (this.userNumeralSet === "ascii") {
+      return str;
+    }
+    const base = this.userNumeralSet === "arabic-indic" ? 1632 : 1776;
+    const regex = this.userNumeralSet === "arabic-indic" ? /[\u0660-\u0669]/g : /[\u06F0-\u06F9]/g;
+    return str.replace(regex, (ch) => String.fromCharCode(48 + (ch.charCodeAt(0) - base)));
+  }
+  _getTelInputValue() {
+    const inputValue = this.ui.telInput.value.trim();
+    return this._normaliseNumerals(inputValue);
+  }
+  _setTelInputValue(asciiValue) {
+    this.ui.telInput.value = this._mapAsciiToUserNumerals(asciiValue);
+  }
   _createInitPromises() {
     const autoCountryPromise = new Promise((resolve, reject) => {
       this.resolveAutoCountryPromise = resolve;
@@ -2839,8 +2878,9 @@ var Iti = class _Iti {
   //* 1. Extracting a dial code from the given number
   //* 2. Using explicit initialCountry
   _setInitialState(overrideAutoCountry = false) {
-    const attributeValue = this.ui.telInput.getAttribute("value");
-    const inputValue = this.ui.telInput.value;
+    const attributeValueRaw = this.ui.telInput.getAttribute("value");
+    const attributeValue = this._normaliseNumerals(attributeValueRaw);
+    const inputValue = this._getTelInputValue();
     const useAttribute = attributeValue && attributeValue.startsWith("+") && (!inputValue || !inputValue.startsWith("+"));
     const val = useAttribute ? attributeValue : inputValue;
     const dialCode = this._getDialCode(val);
@@ -2992,38 +3032,40 @@ var Iti = class _Iti {
   _bindInputListener() {
     const { strictMode, formatAsYouType, separateDialCode, allowDropdown, countrySearch } = this.options;
     let userOverrideFormatting = false;
-    if (REGEX.ALPHA_UNICODE.test(this.ui.telInput.value)) {
+    if (REGEX.ALPHA_UNICODE.test(this._getTelInputValue())) {
       userOverrideFormatting = true;
     }
     const handleInputEvent = (e) => {
+      const inputValue = this._getTelInputValue();
       if (this.isAndroid && (e === null || e === void 0 ? void 0 : e.data) === "+" && separateDialCode && allowDropdown && countrySearch) {
         const currentCaretPos = this.ui.telInput.selectionStart || 0;
-        const valueBeforeCaret = this.ui.telInput.value.substring(0, currentCaretPos - 1);
-        const valueAfterCaret = this.ui.telInput.value.substring(currentCaretPos);
-        this.ui.telInput.value = valueBeforeCaret + valueAfterCaret;
+        const valueBeforeCaret = inputValue.substring(0, currentCaretPos - 1);
+        const valueAfterCaret = inputValue.substring(currentCaretPos);
+        this._setTelInputValue(valueBeforeCaret + valueAfterCaret);
         this._openDropdownWithPlus();
         return;
       }
-      if (this._updateCountryFromNumber(this.ui.telInput.value)) {
+      if (this._updateCountryFromNumber(inputValue)) {
         this._triggerCountryChange();
       }
       const isFormattingChar = (e === null || e === void 0 ? void 0 : e.data) && REGEX.NON_PLUS_NUMERIC.test(e.data);
-      const isPaste = (e === null || e === void 0 ? void 0 : e.inputType) === INPUT_TYPES.PASTE && this.ui.telInput.value;
+      const isPaste = (e === null || e === void 0 ? void 0 : e.inputType) === INPUT_TYPES.PASTE && inputValue;
       if (isFormattingChar || isPaste && !strictMode) {
         userOverrideFormatting = true;
-      } else if (!REGEX.NON_PLUS_NUMERIC.test(this.ui.telInput.value)) {
+      } else if (!REGEX.NON_PLUS_NUMERIC.test(inputValue)) {
         userOverrideFormatting = false;
       }
       const isSetNumber = (e === null || e === void 0 ? void 0 : e.detail) && e.detail["isSetNumber"];
-      if (formatAsYouType && !userOverrideFormatting && !isSetNumber) {
+      const isAscii = this.userNumeralSet === "ascii";
+      if (formatAsYouType && !userOverrideFormatting && !isSetNumber && isAscii) {
         const currentCaretPos = this.ui.telInput.selectionStart || 0;
-        const valueBeforeCaret = this.ui.telInput.value.substring(0, currentCaretPos);
+        const valueBeforeCaret = inputValue.substring(0, currentCaretPos);
         const relevantCharsBeforeCaret = valueBeforeCaret.replace(REGEX.NON_PLUS_NUMERIC_GLOBAL, "").length;
         const isDeleteForwards = (e === null || e === void 0 ? void 0 : e.inputType) === INPUT_TYPES.DELETE_FWD;
         const fullNumber = this._getFullNumber();
-        const formattedValue = formatNumberAsYouType(fullNumber, this.ui.telInput.value, intlTelInput.utils, this.selectedCountryData, this.options.separateDialCode);
+        const formattedValue = formatNumberAsYouType(fullNumber, inputValue, intlTelInput.utils, this.selectedCountryData, this.options.separateDialCode);
         const newCaretPos = translateCursorPosition(relevantCharsBeforeCaret, formattedValue, currentCaretPos, isDeleteForwards);
-        this.ui.telInput.value = formattedValue;
+        this._setTelInputValue(formattedValue);
         this.ui.telInput.setSelectionRange(newCaretPos, newCaretPos);
       }
     };
@@ -3042,12 +3084,18 @@ var Iti = class _Iti {
             return;
           }
           if (strictMode) {
-            const value = this.ui.telInput.value;
-            const alreadyHasPlus = value.startsWith("+");
+            const inputValue = this._getTelInputValue();
+            const alreadyHasPlus = inputValue.startsWith("+");
             const isInitialPlus = !alreadyHasPlus && this.ui.telInput.selectionStart === 0 && e.key === "+";
-            const isNumeric = /^[0-9]$/.test(e.key);
+            const normalisedKey = this._normaliseNumerals(e.key);
+            const isNumeric = /^[0-9]$/.test(normalisedKey);
             const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
-            const newValue = value.slice(0, this.ui.telInput.selectionStart) + e.key + value.slice(this.ui.telInput.selectionEnd);
+            const input = this.ui.telInput;
+            const selStart = input.selectionStart;
+            const selEnd = input.selectionEnd;
+            const before = inputValue.slice(0, selStart);
+            const after = inputValue.slice(selEnd);
+            const newValue = before + e.key + after;
             const newFullNumber = this._getFullNumber(newValue);
             const coreNumber = intlTelInput.utils.getCoreNumber(newFullNumber, this.selectedCountryData.iso2);
             const hasExceededMaxLength = this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength;
@@ -3071,34 +3119,38 @@ var Iti = class _Iti {
         const input = this.ui.telInput;
         const selStart = input.selectionStart;
         const selEnd = input.selectionEnd;
-        const before = input.value.slice(0, selStart);
-        const after = input.value.slice(selEnd);
+        const inputValue = this._getTelInputValue();
+        const before = inputValue.slice(0, selStart);
+        const after = inputValue.slice(selEnd);
         const iso2 = this.selectedCountryData.iso2;
-        const pasted = e.clipboardData.getData("text");
+        const pastedRaw = e.clipboardData.getData("text");
+        const pasted = this._normaliseNumerals(pastedRaw);
         const initialCharSelected = selStart === 0 && selEnd > 0;
-        const allowLeadingPlus = !input.value.startsWith("+") || initialCharSelected;
+        const allowLeadingPlus = !inputValue.startsWith("+") || initialCharSelected;
         const allowedChars = pasted.replace(REGEX.NON_PLUS_NUMERIC_GLOBAL, "");
         const hasLeadingPlus = allowedChars.startsWith("+");
         const numerics = allowedChars.replace(/\+/g, "");
         const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
         let newVal = before + sanitised + after;
-        let coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
-        while (coreNumber.length === 0 && newVal.length > 0) {
-          newVal = newVal.slice(0, -1);
-          coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
-        }
-        if (!coreNumber) {
-          return;
-        }
-        if (this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength) {
-          if (input.selectionEnd === input.value.length) {
-            const trimLength = coreNumber.length - this.maxCoreNumberLength;
-            newVal = newVal.slice(0, newVal.length - trimLength);
-          } else {
+        if (newVal.length > 5) {
+          let coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
+          while (coreNumber.length === 0 && newVal.length > 0) {
+            newVal = newVal.slice(0, -1);
+            coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
+          }
+          if (!coreNumber) {
             return;
           }
+          if (this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength) {
+            if (input.selectionEnd === inputValue.length) {
+              const trimLength = coreNumber.length - this.maxCoreNumberLength;
+              newVal = newVal.slice(0, newVal.length - trimLength);
+            } else {
+              return;
+            }
+          }
         }
-        input.value = newVal;
+        this._setTelInputValue(newVal);
         const caretPos = selStart + sanitised.length;
         input.setSelectionRange(caretPos, caretPos);
         input.dispatchEvent(new InputEvent("input", { bubbles: true }));
@@ -3237,6 +3289,7 @@ var Iti = class _Iti {
           this._handleEnterKey();
         } else if (e.key === KEYS.ESC) {
           this._closeDropdown();
+          this.ui.selectedCountry.focus();
         }
       }
       if (!this.options.countrySearch && REGEX.HIDDEN_SEARCH_CHAR.test(e.key)) {
@@ -3334,7 +3387,7 @@ var Iti = class _Iti {
       number = intlTelInput.utils.formatNumber(number, this.selectedCountryData.iso2, format);
     }
     number = this._beforeSetNumber(number);
-    this.ui.telInput.value = number;
+    this._setTelInputValue(number);
   }
   //* Check if need to select a new country based on the given number
   //* Note: called from _setInitialState, keyup handler, setNumber.
@@ -3488,7 +3541,8 @@ var Iti = class _Iti {
     const dialCode = listItem.dataset[DATA_KEYS.DIAL_CODE];
     this._updateDialCode(dialCode);
     if (this.options.formatOnDisplay) {
-      this._updateValFromNumber(this.ui.telInput.value);
+      const inputValue = this._getTelInputValue();
+      this._updateValFromNumber(inputValue);
     }
     this.ui.telInput.focus();
     if (countryChanged) {
@@ -3519,7 +3573,7 @@ var Iti = class _Iti {
   //* Replace any existing dial code with the new one
   //* Note: called from _selectListItem and setCountry
   _updateDialCode(newDialCodeBare) {
-    const inputVal = this.ui.telInput.value;
+    const inputVal = this._getTelInputValue();
     const newDialCode = `+${newDialCodeBare}`;
     let newNumber;
     if (inputVal.startsWith("+")) {
@@ -3529,7 +3583,7 @@ var Iti = class _Iti {
       } else {
         newNumber = newDialCode;
       }
-      this.ui.telInput.value = newNumber;
+      this._setTelInputValue(newNumber);
     }
   }
   //* Try and extract a valid international dial code from a full telephone number.
@@ -3566,7 +3620,7 @@ var Iti = class _Iti {
   }
   //* Get the input val, adding the dial code if separateDialCode is enabled.
   _getFullNumber(overrideVal) {
-    const val = overrideVal || this.ui.telInput.value.trim();
+    const val = overrideVal ? this._normaliseNumerals(overrideVal) : this._getTelInputValue();
     const { dialCode } = this.selectedCountryData;
     let prefix;
     const numericVal = getNumeric(val);
@@ -3604,8 +3658,9 @@ var Iti = class _Iti {
   //* This is called when the utils request completes.
   handleUtils() {
     if (intlTelInput.utils) {
-      if (this.ui.telInput.value) {
-        this._updateValFromNumber(this.ui.telInput.value);
+      const inputValue = this._getTelInputValue();
+      if (inputValue) {
+        this._updateValFromNumber(inputValue);
       }
       if (this.selectedCountryData.iso2) {
         this._updatePlaceholder();
@@ -3645,7 +3700,9 @@ var Iti = class _Iti {
   getNumber(format) {
     if (intlTelInput.utils) {
       const { iso2 } = this.selectedCountryData;
-      return intlTelInput.utils.formatNumber(this._getFullNumber(), iso2, format);
+      const fullNumber = this._getFullNumber();
+      const formattedNumber = intlTelInput.utils.formatNumber(fullNumber, iso2, format);
+      return this._mapAsciiToUserNumerals(formattedNumber);
     }
     return "";
   }
@@ -3722,15 +3779,17 @@ var Iti = class _Iti {
       this._setCountry(iso2Lower);
       this._updateDialCode(this.selectedCountryData.dialCode);
       if (this.options.formatOnDisplay) {
-        this._updateValFromNumber(this.ui.telInput.value);
+        const inputValue = this._getTelInputValue();
+        this._updateValFromNumber(inputValue);
       }
       this._triggerCountryChange();
     }
   }
   //* Set the input value and update the country.
   setNumber(number) {
-    const countryChanged = this._updateCountryFromNumber(number);
-    this._updateValFromNumber(number);
+    const normalisedNumber = this._normaliseNumerals(number);
+    const countryChanged = this._updateCountryFromNumber(normalisedNumber);
+    this._updateValFromNumber(normalisedNumber);
     if (countryChanged) {
       this._triggerCountryChange();
     }
@@ -3807,7 +3866,7 @@ var intlTelInput = Object.assign((input, options) => {
   attachUtils,
   startedLoadingUtilsScript: false,
   startedLoadingAutoCountry: false,
-  version: "25.12.5"
+  version: "25.13.0"
 });
 var intl_tel_input_default = intlTelInput;