intl-tel-input 25.8.5 → 25.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "25.8.5",
+  "version": "25.10.0",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",
@@ -100,17 +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",
-  "vue:demo": "vite --config vue/demo/validation/vite.config.js"
+    "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",
+    "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.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 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.0/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

@@ -1624,7 +1624,7 @@ var countries_default = countryTranslations;
 
 // src/js/intl-tel-input/i18n/en/interface.ts
 var interfaceTranslations = {
-  selectedCountryAriaLabel: "Change country, selected ${country}",
+  selectedCountryAriaLabel: "Change country, selected ${countryName} (${dialCode})",
   noCountrySelected: "Select country",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
@@ -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.
@@ -2768,7 +2770,7 @@ var Iti = class _Iti {
   //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
   _setCountry(iso2) {
     const { separateDialCode, showFlags, i18n } = this.options;
-    const prevCountry = this.selectedCountryData.iso2 ? this.selectedCountryData : {};
+    const prevIso2 = this.selectedCountryData.iso2 || "";
     this.selectedCountryData = iso2 ? this._getCountryData(iso2, false) || {} : {};
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
@@ -2777,8 +2779,9 @@ var Iti = class _Iti {
       const flagClass = iso2 && showFlags ? `iti__flag iti__${iso2}` : "iti__flag iti__globe";
       let ariaLabel, title;
       if (iso2) {
-        title = this.selectedCountryData.name;
-        ariaLabel = i18n.selectedCountryAriaLabel.replace("${country}", this.selectedCountryData.name);
+        const { name, dialCode } = this.selectedCountryData;
+        title = name;
+        ariaLabel = i18n.selectedCountryAriaLabel.replace("${countryName}", name).replace("${dialCode}", `+${dialCode}`);
       } else {
         title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
@@ -2794,7 +2797,7 @@ var Iti = class _Iti {
     }
     this._updatePlaceholder();
     this._updateMaxLength();
-    return prevCountry.iso2 !== iso2;
+    return prevIso2 !== iso2;
   }
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
@@ -3163,10 +3166,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);
@@ -3267,7 +3271,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.5"
+    version: "25.10.0"
   }
 );
 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

@@ -1588,7 +1588,7 @@ var countries_default = countryTranslations;
 
 // src/js/intl-tel-input/i18n/en/interface.ts
 var interfaceTranslations = {
-  selectedCountryAriaLabel: "Change country, selected ${country}",
+  selectedCountryAriaLabel: "Change country, selected ${countryName} (${dialCode})",
   noCountrySelected: "Select country",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
@@ -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.
@@ -2732,7 +2734,7 @@ var Iti = class _Iti {
   //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
   _setCountry(iso2) {
     const { separateDialCode, showFlags, i18n } = this.options;
-    const prevCountry = this.selectedCountryData.iso2 ? this.selectedCountryData : {};
+    const prevIso2 = this.selectedCountryData.iso2 || "";
     this.selectedCountryData = iso2 ? this._getCountryData(iso2, false) || {} : {};
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
@@ -2741,8 +2743,9 @@ var Iti = class _Iti {
       const flagClass = iso2 && showFlags ? `iti__flag iti__${iso2}` : "iti__flag iti__globe";
       let ariaLabel, title;
       if (iso2) {
-        title = this.selectedCountryData.name;
-        ariaLabel = i18n.selectedCountryAriaLabel.replace("${country}", this.selectedCountryData.name);
+        const { name, dialCode } = this.selectedCountryData;
+        title = name;
+        ariaLabel = i18n.selectedCountryAriaLabel.replace("${countryName}", name).replace("${dialCode}", `+${dialCode}`);
       } else {
         title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
@@ -2758,7 +2761,7 @@ var Iti = class _Iti {
     }
     this._updatePlaceholder();
     this._updateMaxLength();
-    return prevCountry.iso2 !== iso2;
+    return prevIso2 !== iso2;
   }
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
@@ -3127,10 +3130,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);
@@ -3231,7 +3235,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.5"
+    version: "25.10.0"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.cjs

@@ -1624,7 +1624,7 @@ var countries_default = countryTranslations;
 
 // src/js/intl-tel-input/i18n/en/interface.ts
 var interfaceTranslations = {
-  selectedCountryAriaLabel: "Change country, selected ${country}",
+  selectedCountryAriaLabel: "Change country, selected ${countryName} (${dialCode})",
   noCountrySelected: "Select country",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
@@ -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.
@@ -2768,7 +2770,7 @@ var Iti = class _Iti {
   //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
   _setCountry(iso2) {
     const { separateDialCode, showFlags, i18n } = this.options;
-    const prevCountry = this.selectedCountryData.iso2 ? this.selectedCountryData : {};
+    const prevIso2 = this.selectedCountryData.iso2 || "";
     this.selectedCountryData = iso2 ? this._getCountryData(iso2, false) || {} : {};
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
@@ -2777,8 +2779,9 @@ var Iti = class _Iti {
       const flagClass = iso2 && showFlags ? `iti__flag iti__${iso2}` : "iti__flag iti__globe";
       let ariaLabel, title;
       if (iso2) {
-        title = this.selectedCountryData.name;
-        ariaLabel = i18n.selectedCountryAriaLabel.replace("${country}", this.selectedCountryData.name);
+        const { name, dialCode } = this.selectedCountryData;
+        title = name;
+        ariaLabel = i18n.selectedCountryAriaLabel.replace("${countryName}", name).replace("${dialCode}", `+${dialCode}`);
       } else {
         title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
@@ -2794,7 +2797,7 @@ var Iti = class _Iti {
     }
     this._updatePlaceholder();
     this._updateMaxLength();
-    return prevCountry.iso2 !== iso2;
+    return prevIso2 !== iso2;
   }
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
@@ -3163,10 +3166,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);
@@ -3267,7 +3271,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.5"
+    version: "25.10.0"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -1588,7 +1588,7 @@ var countries_default = countryTranslations;
 
 // src/js/intl-tel-input/i18n/en/interface.ts
 var interfaceTranslations = {
-  selectedCountryAriaLabel: "Change country, selected ${country}",
+  selectedCountryAriaLabel: "Change country, selected ${countryName} (${dialCode})",
   noCountrySelected: "Select country",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
@@ -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.
@@ -2732,7 +2734,7 @@ var Iti = class _Iti {
   //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
   _setCountry(iso2) {
     const { separateDialCode, showFlags, i18n } = this.options;
-    const prevCountry = this.selectedCountryData.iso2 ? this.selectedCountryData : {};
+    const prevIso2 = this.selectedCountryData.iso2 || "";
     this.selectedCountryData = iso2 ? this._getCountryData(iso2, false) || {} : {};
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
@@ -2741,8 +2743,9 @@ var Iti = class _Iti {
       const flagClass = iso2 && showFlags ? `iti__flag iti__${iso2}` : "iti__flag iti__globe";
       let ariaLabel, title;
       if (iso2) {
-        title = this.selectedCountryData.name;
-        ariaLabel = i18n.selectedCountryAriaLabel.replace("${country}", this.selectedCountryData.name);
+        const { name, dialCode } = this.selectedCountryData;
+        title = name;
+        ariaLabel = i18n.selectedCountryAriaLabel.replace("${countryName}", name).replace("${dialCode}", `+${dialCode}`);
       } else {
         title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
@@ -2758,7 +2761,7 @@ var Iti = class _Iti {
     }
     this._updatePlaceholder();
     this._updateMaxLength();
-    return prevCountry.iso2 !== iso2;
+    return prevIso2 !== iso2;
   }
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
@@ -3127,10 +3130,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);
@@ -3231,7 +3235,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.5"
+    version: "25.10.0"
   }
 );
 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.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 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.0/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.