intl-tel-input 25.8.6 → 25.10.1

package/README.md

@@ -1,4 +1,4 @@
-# International Telephone Input <img src="https://img.shields.io/github/package-json/v/jackocnr/intl-tel-input.svg" alt="version"/> <img src="https://img.shields.io/npm/dm/intl-tel-input.svg"  alt="downloads"/>
+# International Telephone Input [![Build Status](https://app.travis-ci.com/jackocnr/intl-tel-input.svg?branch=master)](https://app.travis-ci.com/jackocnr/intl-tel-input) <img src="https://img.shields.io/github/package-json/v/jackocnr/intl-tel-input.svg" alt="version"/> <img src="https://img.shields.io/npm/dm/intl-tel-input.svg"  alt="downloads"/>
 
 <img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/vue-icon.png" alt="Vue logo" width="16px" />  NEWS: we now have our own <a href="https://github.com/jackocnr/intl-tel-input/tree/master/vue">Vue component</a>!
 
@@ -77,16 +77,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.8.6/build/css/intlTelInput.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.1/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.8.6/build/js/intlTelInput.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.1/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.8.6/build/js/utils.js"),
+      loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.1/build/js/utils.js"),
     });
   </script>
   ```
@@ -163,6 +163,10 @@ When you initialise the plugin, the first argument is the input element, and the
 Type: `Boolean` Default: `true`  
 Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected country is not clickable. Also, if showFlags is enabled we display the selected flag on the right instead because it is just a marker of state. Note that if `separateDialCode` is enabled, `allowDropdown` is forced to `true` as the dropdown is required when the user types "+" in this case. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--allowdropdown) (using the React component).
 
+**allowPhonewords**  
+Type: `Boolean` Default: `false`  
+Whether or not the validation methods return `true` for numbers containing phonewords e.g. "+1 702 FLOWERS".
+
 **autoPlaceholder**  
 Type: `String` Default: `"polite"`  
 Set the input's placeholder to an example number for the selected country, and update it if the country changes. You can specify the number type using the `placeholderNumberType` option. By default, it is set to `"polite"`, which means it will only set the placeholder if the input doesn't already have one. You can also set it to `"aggressive"`, which will replace any existing placeholder, or `"off"`. Requires the [utils script to be loaded](#loading-the-utilities-script).
@@ -322,7 +326,7 @@ The `loadUtils` option takes a function which returns a Promise which resolves t
 ```js
 // (A) import utils module from a CDN
 intlTelInput(htmlInputElement, {
-  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.6/build/js/utils.js"),
+  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.1/build/js/utils.js"),
 });
 
 // (B) import utils module from your own hosted version of utils.js
@@ -606,7 +610,7 @@ The `loadUtils` option takes a function which returns a Promise which resolves t
 ```js
 // (A) import utils module from a CDN
 intlTelInput(htmlInputElement, {
-  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.6/build/js/utils.js"),
+  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.1/build/js/utils.js"),
 });
 
 // (B) import utils module from your own hosted version of utils.js

package/angular/README.md

@@ -29,7 +29,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.
 
-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/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.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/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.10.1/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Angular component.

package/angular/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.
@@ -1919,7 +1921,12 @@ var Iti = class _Iti {
     const wrapper = createEl("div", { class: parentClasses });
     (_a = this.telInput.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(wrapper, this.telInput);
     if (allowDropdown || showFlags || separateDialCode) {
-      this.countryContainer = createEl("div", { class: "iti__country-container" }, wrapper);
+      this.countryContainer = createEl(
+        "div",
+        // 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) {
         this.countryContainer.style.left = "0px";
       } else {
@@ -2030,7 +2037,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);
@@ -2672,7 +2682,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`;
@@ -2704,21 +2715,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;
@@ -2999,10 +3016,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);
@@ -3101,7 +3119,7 @@ var intlTelInput = Object.assign((input, options) => {
   attachUtils,
   startedLoadingUtilsScript: false,
   startedLoadingAutoCountry: false,
-  version: "25.8.6"
+  version: "25.10.1"
 });
 var intl_tel_input_default = intlTelInput;
 

package/angular/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.
@@ -1919,7 +1921,12 @@ var Iti = class _Iti {
     const wrapper = createEl("div", { class: parentClasses });
     (_a = this.telInput.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(wrapper, this.telInput);
     if (allowDropdown || showFlags || separateDialCode) {
-      this.countryContainer = createEl("div", { class: "iti__country-container" }, wrapper);
+      this.countryContainer = createEl(
+        "div",
+        // 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) {
         this.countryContainer.style.left = "0px";
       } else {
@@ -2030,7 +2037,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);
@@ -2672,7 +2682,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`;
@@ -2704,21 +2715,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;
@@ -2999,10 +3016,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);
@@ -3101,7 +3119,7 @@ var intlTelInput = Object.assign((input, options) => {
   attachUtils,
   startedLoadingUtilsScript: false,
   startedLoadingAutoCountry: false,
-  version: "25.8.6"
+  version: "25.10.1"
 });
 var intl_tel_input_default = intlTelInput;
 

package/angular/build/types/intl-tel-input.d.ts

@@ -52,6 +52,7 @@ type SelectedCountryData = {
 };
 interface AllOptions {
     allowDropdown: boolean;
+    allowPhonewords: boolean;
     autoPlaceholder: string;
     containerClass: string;
     countryOrder: string[];

package/build/js/data.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v25.8.6
+ * International Telephone Input v25.10.1
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */

package/build/js/data.min.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v25.8.6
+ * International Telephone Input v25.10.1
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */

package/build/js/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/build/js/intlTelInput.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v25.8.6
+ * International Telephone Input v25.10.1
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */
@@ -1666,6 +1666,8 @@ var factoryOutput = (() => {
     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.
@@ -1980,7 +1982,8 @@ var factoryOutput = (() => {
       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) {
@@ -2145,7 +2148,10 @@ var factoryOutput = (() => {
         }
       }
       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);
@@ -2805,7 +2811,8 @@ var factoryOutput = (() => {
     //* 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`;
@@ -2842,21 +2849,27 @@ var factoryOutput = (() => {
         }
       }
     }
-    //* 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;
@@ -3169,10 +3182,11 @@ var factoryOutput = (() => {
       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);
@@ -3273,7 +3287,7 @@ var factoryOutput = (() => {
       attachUtils,
       startedLoadingUtilsScript: false,
       startedLoadingAutoCountry: false,
-      version: "25.8.6"
+      version: "25.10.1"
     }
   );
   var intl_tel_input_default = intlTelInput;