intl-tel-input 25.8.6 → 25.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "25.8.6",
+  "version": "25.10.1",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",
@@ -100,18 +100,18 @@
     "lint:spelling": "cspell --dot --gitignore --no-progress '**'",
     "watch": "grunt watch",
     "build": "grunt build",
-    "prepublishOnly": "grunt build",
-    "build:js": "grunt js",
-    "build:jsfast": "grunt jsfast",
+    "build:js": "grunt build:js",
+    "build:jsfast": "grunt build:jsfast",
     "build:translations": "grunt build:translations",
     "build:utils": "grunt build:utils",
-    "build:css": "grunt css",
-    "build:img": "grunt img",
-    "build:react": "grunt react",
-    "build:vue": "grunt vue",
-    "build:angular": "grunt angular",
+    "build:css": "grunt build:css",
+    "build:img": "grunt build:img",
+    "build:react": "grunt build:react",
+    "build:vue": "grunt build:vue",
+    "build:angular": "grunt build:angular",
     "build:travis": "grunt build:travis",
-  "vue:demo": "vite --config vue/demo/validation/vite.config.js"
+    "prepublishOnly": "grunt build",
+    "vue:demo": "vite --config vue/demo/validation/vite.config.js"
   },
   "style": "build/css/intlTelInput.css",
   "main": "./build/js/intlTelInput.js",

package/react/README.md

@@ -28,7 +28,7 @@ import "intl-tel-input/styles";
 
 See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/validation/ValidationApp.tsx) for a more fleshed-out example of how to handle validation.
 
-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 IntlTelInput from `"intl-tel-input/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` 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.8.6/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 IntlTelInput from `"intl-tel-input/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` 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.10.1/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput React component.

package/react/build/IntlTelInput.cjs

@@ -1661,6 +1661,8 @@ var computeDefaultUseFullscreenPopup = () => {
   return false;
 };
 var defaults = {
+  // Allow alphanumeric "phonewords" (e.g. +1 800 FLOWERS) as valid numbers
+  allowPhonewords: false,
   //* Whether or not to allow the dropdown.
   allowDropdown: true,
   //* Add a placeholder in the input with an example number for the selected country.
@@ -1975,7 +1977,8 @@ var Iti = class _Iti {
     if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
         "div",
-        { class: "iti__country-container" },
+        // visibly hidden until we measure it's width to set the input padding correctly
+        { class: "iti__country-container iti__v-hide" },
         wrapper
       );
       if (this.showSelectedCountryOnLeft) {
@@ -2140,7 +2143,10 @@ var Iti = class _Iti {
       }
     }
     wrapper.appendChild(this.telInput);
-    this._updateInputPadding();
+    if (this.countryContainer) {
+      this._updateInputPadding();
+      this.countryContainer.classList.remove("iti__v-hide");
+    }
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name") || "";
       const names = hiddenInput(telInputName);
@@ -2800,7 +2806,8 @@ var Iti = class _Iti {
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
     if (this.selectedCountry) {
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+      const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
+      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
       const inputPadding = selectedCountryWidth + 6;
       if (this.showSelectedCountryOnLeft) {
         this.telInput.style.paddingLeft = `${inputPadding}px`;
@@ -2837,21 +2844,27 @@ var Iti = class _Iti {
       }
     }
   }
-  //* When the input is in a hidden container during initialisation, we must inject some markup
-  //* into the end of the DOM to calculate the correct offsetWidth.
-  //* NOTE: this is only used when separateDialCode is enabled, so countryContainer and selectedCountry
-  //* will definitely exist.
+  //* When input is in a hidden container during init, we cannot calculate the selected country width.
+  //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
+  //* To get the right styling to apply, all we need is a shallow clone of the container,
+  //* and then to inject a deep clone of the selectedCountry element.
   _getHiddenSelectedCountryWidth() {
     if (this.telInput.parentNode) {
+      let body;
+      try {
+        body = window.top.document.body;
+      } catch (e) {
+        body = document.body;
+      }
       const containerClone = this.telInput.parentNode.cloneNode(false);
       containerClone.style.visibility = "hidden";
-      document.body.appendChild(containerClone);
+      body.appendChild(containerClone);
       const countryContainerClone = this.countryContainer.cloneNode();
       containerClone.appendChild(countryContainerClone);
       const selectedCountryClone = this.selectedCountry.cloneNode(true);
       countryContainerClone.appendChild(selectedCountryClone);
       const width = selectedCountryClone.offsetWidth;
-      document.body.removeChild(containerClone);
+      body.removeChild(containerClone);
       return width;
     }
     return 0;
@@ -3164,10 +3177,11 @@ var Iti = class _Iti {
     if (!this.selectedCountryData.iso2) {
       return false;
     }
+    const testValidity = (s) => precise ? this._utilsIsValidNumber(s) : this._utilsIsPossibleNumber(s);
     const val = this._getFullNumber();
     const alphaCharPosition = val.search(/\p{L}/u);
-    const testValidity = (s) => precise ? this._utilsIsValidNumber(s) : this._utilsIsPossibleNumber(s);
-    if (alphaCharPosition > -1) {
+    const hasAlphaChar = alphaCharPosition > -1;
+    if (hasAlphaChar && !this.options.allowPhonewords) {
       const beforeAlphaChar = val.substring(0, alphaCharPosition);
       const beforeAlphaIsValid = testValidity(beforeAlphaChar);
       const isValid = testValidity(val);
@@ -3268,7 +3282,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.6"
+    version: "25.10.1"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.d.ts

@@ -346,6 +346,7 @@ declare module "intl-tel-input" {
     };
     interface AllOptions {
         allowDropdown: boolean;
+        allowPhonewords: boolean;
         autoPlaceholder: string;
         containerClass: string;
         countryOrder: string[];

package/react/build/IntlTelInput.js

@@ -1625,6 +1625,8 @@ var computeDefaultUseFullscreenPopup = () => {
   return false;
 };
 var defaults = {
+  // Allow alphanumeric "phonewords" (e.g. +1 800 FLOWERS) as valid numbers
+  allowPhonewords: false,
   //* Whether or not to allow the dropdown.
   allowDropdown: true,
   //* Add a placeholder in the input with an example number for the selected country.
@@ -1939,7 +1941,8 @@ var Iti = class _Iti {
     if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
         "div",
-        { class: "iti__country-container" },
+        // visibly hidden until we measure it's width to set the input padding correctly
+        { class: "iti__country-container iti__v-hide" },
         wrapper
       );
       if (this.showSelectedCountryOnLeft) {
@@ -2104,7 +2107,10 @@ var Iti = class _Iti {
       }
     }
     wrapper.appendChild(this.telInput);
-    this._updateInputPadding();
+    if (this.countryContainer) {
+      this._updateInputPadding();
+      this.countryContainer.classList.remove("iti__v-hide");
+    }
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name") || "";
       const names = hiddenInput(telInputName);
@@ -2764,7 +2770,8 @@ var Iti = class _Iti {
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
     if (this.selectedCountry) {
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+      const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
+      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
       const inputPadding = selectedCountryWidth + 6;
       if (this.showSelectedCountryOnLeft) {
         this.telInput.style.paddingLeft = `${inputPadding}px`;
@@ -2801,21 +2808,27 @@ var Iti = class _Iti {
       }
     }
   }
-  //* When the input is in a hidden container during initialisation, we must inject some markup
-  //* into the end of the DOM to calculate the correct offsetWidth.
-  //* NOTE: this is only used when separateDialCode is enabled, so countryContainer and selectedCountry
-  //* will definitely exist.
+  //* When input is in a hidden container during init, we cannot calculate the selected country width.
+  //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
+  //* To get the right styling to apply, all we need is a shallow clone of the container,
+  //* and then to inject a deep clone of the selectedCountry element.
   _getHiddenSelectedCountryWidth() {
     if (this.telInput.parentNode) {
+      let body;
+      try {
+        body = window.top.document.body;
+      } catch (e) {
+        body = document.body;
+      }
       const containerClone = this.telInput.parentNode.cloneNode(false);
       containerClone.style.visibility = "hidden";
-      document.body.appendChild(containerClone);
+      body.appendChild(containerClone);
       const countryContainerClone = this.countryContainer.cloneNode();
       containerClone.appendChild(countryContainerClone);
       const selectedCountryClone = this.selectedCountry.cloneNode(true);
       countryContainerClone.appendChild(selectedCountryClone);
       const width = selectedCountryClone.offsetWidth;
-      document.body.removeChild(containerClone);
+      body.removeChild(containerClone);
       return width;
     }
     return 0;
@@ -3128,10 +3141,11 @@ var Iti = class _Iti {
     if (!this.selectedCountryData.iso2) {
       return false;
     }
+    const testValidity = (s) => precise ? this._utilsIsValidNumber(s) : this._utilsIsPossibleNumber(s);
     const val = this._getFullNumber();
     const alphaCharPosition = val.search(/\p{L}/u);
-    const testValidity = (s) => precise ? this._utilsIsValidNumber(s) : this._utilsIsPossibleNumber(s);
-    if (alphaCharPosition > -1) {
+    const hasAlphaChar = alphaCharPosition > -1;
+    if (hasAlphaChar && !this.options.allowPhonewords) {
       const beforeAlphaChar = val.substring(0, alphaCharPosition);
       const beforeAlphaIsValid = testValidity(beforeAlphaChar);
       const isValid = testValidity(val);
@@ -3232,7 +3246,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.6"
+    version: "25.10.1"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.cjs

@@ -1661,6 +1661,8 @@ var computeDefaultUseFullscreenPopup = () => {
   return false;
 };
 var defaults = {
+  // Allow alphanumeric "phonewords" (e.g. +1 800 FLOWERS) as valid numbers
+  allowPhonewords: false,
   //* Whether or not to allow the dropdown.
   allowDropdown: true,
   //* Add a placeholder in the input with an example number for the selected country.
@@ -1975,7 +1977,8 @@ var Iti = class _Iti {
     if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
         "div",
-        { class: "iti__country-container" },
+        // visibly hidden until we measure it's width to set the input padding correctly
+        { class: "iti__country-container iti__v-hide" },
         wrapper
       );
       if (this.showSelectedCountryOnLeft) {
@@ -2140,7 +2143,10 @@ var Iti = class _Iti {
       }
     }
     wrapper.appendChild(this.telInput);
-    this._updateInputPadding();
+    if (this.countryContainer) {
+      this._updateInputPadding();
+      this.countryContainer.classList.remove("iti__v-hide");
+    }
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name") || "";
       const names = hiddenInput(telInputName);
@@ -2800,7 +2806,8 @@ var Iti = class _Iti {
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
     if (this.selectedCountry) {
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+      const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
+      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
       const inputPadding = selectedCountryWidth + 6;
       if (this.showSelectedCountryOnLeft) {
         this.telInput.style.paddingLeft = `${inputPadding}px`;
@@ -2837,21 +2844,27 @@ var Iti = class _Iti {
       }
     }
   }
-  //* When the input is in a hidden container during initialisation, we must inject some markup
-  //* into the end of the DOM to calculate the correct offsetWidth.
-  //* NOTE: this is only used when separateDialCode is enabled, so countryContainer and selectedCountry
-  //* will definitely exist.
+  //* When input is in a hidden container during init, we cannot calculate the selected country width.
+  //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
+  //* To get the right styling to apply, all we need is a shallow clone of the container,
+  //* and then to inject a deep clone of the selectedCountry element.
   _getHiddenSelectedCountryWidth() {
     if (this.telInput.parentNode) {
+      let body;
+      try {
+        body = window.top.document.body;
+      } catch (e) {
+        body = document.body;
+      }
       const containerClone = this.telInput.parentNode.cloneNode(false);
       containerClone.style.visibility = "hidden";
-      document.body.appendChild(containerClone);
+      body.appendChild(containerClone);
       const countryContainerClone = this.countryContainer.cloneNode();
       containerClone.appendChild(countryContainerClone);
       const selectedCountryClone = this.selectedCountry.cloneNode(true);
       countryContainerClone.appendChild(selectedCountryClone);
       const width = selectedCountryClone.offsetWidth;
-      document.body.removeChild(containerClone);
+      body.removeChild(containerClone);
       return width;
     }
     return 0;
@@ -3164,10 +3177,11 @@ var Iti = class _Iti {
     if (!this.selectedCountryData.iso2) {
       return false;
     }
+    const testValidity = (s) => precise ? this._utilsIsValidNumber(s) : this._utilsIsPossibleNumber(s);
     const val = this._getFullNumber();
     const alphaCharPosition = val.search(/\p{L}/u);
-    const testValidity = (s) => precise ? this._utilsIsValidNumber(s) : this._utilsIsPossibleNumber(s);
-    if (alphaCharPosition > -1) {
+    const hasAlphaChar = alphaCharPosition > -1;
+    if (hasAlphaChar && !this.options.allowPhonewords) {
       const beforeAlphaChar = val.substring(0, alphaCharPosition);
       const beforeAlphaIsValid = testValidity(beforeAlphaChar);
       const isValid = testValidity(val);
@@ -3268,7 +3282,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.6"
+    version: "25.10.1"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -1625,6 +1625,8 @@ var computeDefaultUseFullscreenPopup = () => {
   return false;
 };
 var defaults = {
+  // Allow alphanumeric "phonewords" (e.g. +1 800 FLOWERS) as valid numbers
+  allowPhonewords: false,
   //* Whether or not to allow the dropdown.
   allowDropdown: true,
   //* Add a placeholder in the input with an example number for the selected country.
@@ -1939,7 +1941,8 @@ var Iti = class _Iti {
     if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
         "div",
-        { class: "iti__country-container" },
+        // visibly hidden until we measure it's width to set the input padding correctly
+        { class: "iti__country-container iti__v-hide" },
         wrapper
       );
       if (this.showSelectedCountryOnLeft) {
@@ -2104,7 +2107,10 @@ var Iti = class _Iti {
       }
     }
     wrapper.appendChild(this.telInput);
-    this._updateInputPadding();
+    if (this.countryContainer) {
+      this._updateInputPadding();
+      this.countryContainer.classList.remove("iti__v-hide");
+    }
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name") || "";
       const names = hiddenInput(telInputName);
@@ -2764,7 +2770,8 @@ var Iti = class _Iti {
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
     if (this.selectedCountry) {
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+      const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
+      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
       const inputPadding = selectedCountryWidth + 6;
       if (this.showSelectedCountryOnLeft) {
         this.telInput.style.paddingLeft = `${inputPadding}px`;
@@ -2801,21 +2808,27 @@ var Iti = class _Iti {
       }
     }
   }
-  //* When the input is in a hidden container during initialisation, we must inject some markup
-  //* into the end of the DOM to calculate the correct offsetWidth.
-  //* NOTE: this is only used when separateDialCode is enabled, so countryContainer and selectedCountry
-  //* will definitely exist.
+  //* When input is in a hidden container during init, we cannot calculate the selected country width.
+  //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
+  //* To get the right styling to apply, all we need is a shallow clone of the container,
+  //* and then to inject a deep clone of the selectedCountry element.
   _getHiddenSelectedCountryWidth() {
     if (this.telInput.parentNode) {
+      let body;
+      try {
+        body = window.top.document.body;
+      } catch (e) {
+        body = document.body;
+      }
       const containerClone = this.telInput.parentNode.cloneNode(false);
       containerClone.style.visibility = "hidden";
-      document.body.appendChild(containerClone);
+      body.appendChild(containerClone);
       const countryContainerClone = this.countryContainer.cloneNode();
       containerClone.appendChild(countryContainerClone);
       const selectedCountryClone = this.selectedCountry.cloneNode(true);
       countryContainerClone.appendChild(selectedCountryClone);
       const width = selectedCountryClone.offsetWidth;
-      document.body.removeChild(containerClone);
+      body.removeChild(containerClone);
       return width;
     }
     return 0;
@@ -3128,10 +3141,11 @@ var Iti = class _Iti {
     if (!this.selectedCountryData.iso2) {
       return false;
     }
+    const testValidity = (s) => precise ? this._utilsIsValidNumber(s) : this._utilsIsPossibleNumber(s);
     const val = this._getFullNumber();
     const alphaCharPosition = val.search(/\p{L}/u);
-    const testValidity = (s) => precise ? this._utilsIsValidNumber(s) : this._utilsIsPossibleNumber(s);
-    if (alphaCharPosition > -1) {
+    const hasAlphaChar = alphaCharPosition > -1;
+    if (hasAlphaChar && !this.options.allowPhonewords) {
       const beforeAlphaChar = val.substring(0, alphaCharPosition);
       const beforeAlphaIsValid = testValidity(beforeAlphaChar);
       const isValid = testValidity(val);
@@ -3232,7 +3246,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.6"
+    version: "25.10.1"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/vue/README.md

@@ -34,7 +34,7 @@ See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master
 "vue:demo": "vite --config vue/demo/[demo variant]/vite.config.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 IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` 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.8.6/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 IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` 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.10.1/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.