intl-tel-input 25.8.6 → 25.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "25.8.6",
+  "version": "25.10.0",
   "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.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

@@ -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.
@@ -3164,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);
@@ -3268,7 +3271,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.6"
+    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

@@ -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.
@@ -3128,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);
@@ -3232,7 +3235,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.6"
+    version: "25.10.0"
   }
 );
 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.
@@ -3164,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);
@@ -3268,7 +3271,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.6"
+    version: "25.10.0"
   }
 );
 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.
@@ -3128,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);
@@ -3232,7 +3235,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.6"
+    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.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.0/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.

package/vue/build/IntlTelInput.mjs

@@ -1,4 +1,4 @@
-import { mergeModels as k, useModel as M, ref as N, onMounted as E, watch as B, onUnmounted as R, withDirectives as F, createElementBlock as V, openBlock as z, mergeProps as O, vModelText as $ } from "vue";
+import { mergeModels as A, useModel as M, ref as N, onMounted as E, watch as B, onUnmounted as R, withDirectives as F, createElementBlock as V, openBlock as z, mergeProps as O, vModelText as $ } from "vue";
 const j = [
   [
     "af",
@@ -1601,6 +1601,8 @@ const D = (u) => typeof window < "u" && typeof window.matchMedia == "function" &
   }
   return !1;
 }, x = {
+  // Allow alphanumeric "phonewords" (e.g. +1 800 FLOWERS) as valid numbers
+  allowPhonewords: !1,
   //* Whether or not to allow the dropdown.
   allowDropdown: !0,
   //* Add a placeholder in the input with an example number for the selected country.
@@ -1667,7 +1669,7 @@ const D = (u) => typeof window < "u" && typeof window.matchMedia == "function" &
   "887",
   "888",
   "889"
-], v = (u) => u.replace(/\D/g, ""), A = (u = "") => u.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(), P = (u) => {
+], v = (u) => u.replace(/\D/g, ""), k = (u = "") => u.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(), P = (u) => {
   const t = v(u);
   if (t.charAt(0) === "1") {
     const e = t.substring(1, 4);
@@ -1725,7 +1727,7 @@ class L {
   //* Precompute and cache country search tokens to speed up filtering
   _cacheSearchTokens() {
     for (const t of this.countries)
-      t.normalisedName = A(t.name), t.initials = t.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((e) => e[0]).join("").toLowerCase(), t.dialCodePlus = `+${t.dialCode}`;
+      t.normalisedName = k(t.name), t.initials = t.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((e) => e[0]).join("").toLowerCase(), t.dialCodePlus = `+${t.dialCode}`;
   }
   //* Sort countries by countryOrder option (if present), then name.
   _sortCountries() {
@@ -2167,7 +2169,7 @@ class L {
   _filterCountries(t, e = !1) {
     let i = !0;
     this.countryList.innerHTML = "";
-    const s = A(t), n = s.length, r = [], o = [], d = [], C = [], c = [], p = [];
+    const s = k(t), n = s.length, r = [], o = [], d = [], C = [], c = [], p = [];
     for (const a of this.countries)
       e || n === 0 ? d.push(a) : a.iso2 === s ? r.push(a) : a.normalisedName.startsWith(s) ? o.push(a) : a.normalisedName.includes(s) ? d.push(a) : s === a.dialCode || s === a.dialCodePlus ? C.push(a) : a.dialCodePlus.includes(s) ? c.push(a) : a.initials.includes(s) && p.push(a);
     const y = [
@@ -2530,12 +2532,12 @@ class L {
   _validateNumber(t) {
     if (!this.selectedCountryData.iso2)
       return !1;
-    const e = this._getFullNumber(), i = e.search(new RegExp("\\p{L}", "u")), s = (n) => t ? this._utilsIsValidNumber(n) : this._utilsIsPossibleNumber(n);
-    if (i > -1) {
-      const n = e.substring(0, i), r = s(n), o = s(e);
-      return r && o;
+    const e = (r) => t ? this._utilsIsValidNumber(r) : this._utilsIsPossibleNumber(r), i = this._getFullNumber(), s = i.search(new RegExp("\\p{L}", "u"));
+    if (s > -1 && !this.options.allowPhonewords) {
+      const r = i.substring(0, s), o = e(r), d = e(i);
+      return o && d;
     }
-    return s(e);
+    return e(i);
   }
   _utilsIsValidNumber(t) {
     return l.utils ? l.utils.isValidNumber(t, this.selectedCountryData.iso2, this.options.validationNumberTypes) : null;
@@ -2600,11 +2602,11 @@ const Y = (u) => {
     attachUtils: Y,
     startedLoadingUtilsScript: !1,
     startedLoadingAutoCountry: !1,
-    version: "25.8.6"
+    version: "25.10.0"
   }
 ), Z = {
   __name: "IntlTelInput",
-  props: /* @__PURE__ */ k({
+  props: /* @__PURE__ */ A({
     disabled: {
       type: Boolean,
       default: !1
@@ -2628,7 +2630,7 @@ const Y = (u) => {
     },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ k([
+  emits: /* @__PURE__ */ A([
     "changeNumber",
     "changeCountry",
     "changeValidity",