intl-tel-input 24.5.1 → 24.6.0

package/react/build/IntlTelInputWithUtils.cjs

@@ -1659,6 +1659,8 @@ var defaults = {
   i18n: {},
   //* Initial country.
   initialCountry: "",
+  //* Specify the path to the libphonenumber script to enable validation/formatting.
+  loadUtilsOnInit: "",
   //* National vs international formatting for numbers e.g. placeholders and displaying existing numbers.
   nationalMode: true,
   //* Display only these countries.
@@ -1679,7 +1681,7 @@ var defaults = {
       navigator.userAgent
     ) || window.innerWidth <= 500
   ) : false,
-  //* Specify the path to the libphonenumber script to enable validation/formatting.
+  //* Deprecated! Use `loadUtilsOnInit` instead.
   utilsScript: "",
   //* The number type to enforce during validation.
   validationNumberType: "MOBILE"
@@ -1741,9 +1743,9 @@ var createEl = (name, attrs, container) => {
   }
   return el;
 };
-var forEachInstance = (method) => {
+var forEachInstance = (method, ...args) => {
   const { instances } = intlTelInput;
-  Object.values(instances).forEach((instance) => instance[method]());
+  Object.values(instances).forEach((instance) => instance[method](...args));
 };
 var Iti = class {
   constructor(input, customOptions = {}) {
@@ -2191,14 +2193,21 @@ var Iti = class {
   }
   //* Init many requests: utils script / geo ip lookup.
   _initRequests() {
-    const { utilsScript, initialCountry, geoIpLookup } = this.options;
-    if (utilsScript && !intlTelInput.utils) {
+    let { loadUtilsOnInit, utilsScript, initialCountry, geoIpLookup } = this.options;
+    if (!loadUtilsOnInit && utilsScript) {
+      console.warn("intl-tel-input: The `utilsScript` option is deprecated and will be removed in a future release! Please use the `loadUtilsOnInit` option instead.");
+      loadUtilsOnInit = utilsScript;
+    }
+    if (loadUtilsOnInit && !intlTelInput.utils) {
+      this._handlePageLoad = () => {
+        window.removeEventListener("load", this._handlePageLoad);
+        intlTelInput.loadUtils(loadUtilsOnInit)?.catch(() => {
+        });
+      };
       if (intlTelInput.documentReady()) {
-        intlTelInput.loadUtils(utilsScript);
+        this._handlePageLoad();
       } else {
-        window.addEventListener("load", () => {
-          intlTelInput.loadUtils(utilsScript);
-        });
+        window.addEventListener("load", this._handlePageLoad);
       }
     } else {
       this.resolveUtilsScriptPromise();
@@ -2295,13 +2304,17 @@ var Iti = class {
             const isInitialPlus = !alreadyHasPlus && this.telInput.selectionStart === 0 && e.key === "+";
             const isNumeric = /^[0-9]$/.test(e.key);
             const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
-            const fullNumber = this._getFullNumber();
-            const coreNumber = intlTelInput.utils.getCoreNumber(fullNumber, this.selectedCountryData.iso2);
-            const hasReachedMaxLength = this.maxCoreNumberLength && coreNumber.length >= this.maxCoreNumberLength;
-            const selectedText = value.substring(this.telInput.selectionStart, this.telInput.selectionEnd);
-            const hasSelectedDigit = /\d/.test(selectedText);
-            const isChangingDialCode = isInitialPlus ? true : this._isChangingDialCode(e.key);
-            if (!isAllowedChar || hasReachedMaxLength && !hasSelectedDigit && !isChangingDialCode) {
+            const newValue = value.slice(0, this.telInput.selectionStart) + e.key + value.slice(this.telInput.selectionEnd);
+            const newFullNumber = this._getFullNumber(newValue);
+            const coreNumber = intlTelInput.utils.getCoreNumber(newFullNumber, this.selectedCountryData.iso2);
+            const hasExceededMaxLength = this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength;
+            let isChangingDialCode = false;
+            if (alreadyHasPlus) {
+              const currentCountry = this.selectedCountryData.iso2;
+              const newCountry = this._getCountryFromNumber(newFullNumber);
+              isChangingDialCode = newCountry !== currentCountry;
+            }
+            if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
               e.preventDefault();
             }
           }
@@ -2310,17 +2323,6 @@ var Iti = class {
       this.telInput.addEventListener("keydown", this._handleKeydownEvent);
     }
   }
-  _isChangingDialCode(char) {
-    const value = this.telInput.value;
-    if (value.charAt(0) === "+") {
-      const currentCountry = this.selectedCountryData.iso2;
-      const newValue = value.slice(0, this.telInput.selectionStart) + char + value.slice(this.telInput.selectionEnd);
-      const newFullNumber = this._getFullNumber(newValue);
-      const newCountry = this._getCountryFromNumber(newFullNumber);
-      return newCountry !== currentCountry;
-    }
-    return false;
-  }
   //* Adhere to the input's maxlength attr.
   _cap(number) {
     const max = parseInt(this.telInput.getAttribute("maxlength") || "", 10);
@@ -2664,22 +2666,26 @@ var Iti = class {
   //* Update the maximum valid number length for the currently selected country.
   _updateMaxLength() {
     const { strictMode, placeholderNumberType, validationNumberType } = this.options;
+    const { iso2 } = this.selectedCountryData;
     if (strictMode && intlTelInput.utils) {
-      if (this.selectedCountryData.iso2) {
+      if (iso2) {
         const numberType = intlTelInput.utils.numberType[placeholderNumberType];
         let exampleNumber = intlTelInput.utils.getExampleNumber(
-          this.selectedCountryData.iso2,
+          iso2,
           false,
           numberType,
           true
         );
         let validNumber = exampleNumber;
-        while (intlTelInput.utils.isPossibleNumber(exampleNumber, this.selectedCountryData.iso2, validationNumberType)) {
+        while (intlTelInput.utils.isPossibleNumber(exampleNumber, iso2, validationNumberType)) {
           validNumber = exampleNumber;
           exampleNumber += "0";
         }
-        const coreNumber = intlTelInput.utils.getCoreNumber(validNumber, this.selectedCountryData.iso2);
+        const coreNumber = intlTelInput.utils.getCoreNumber(validNumber, iso2);
         this.maxCoreNumberLength = coreNumber.length;
+        if (iso2 === "by") {
+          this.maxCoreNumberLength = coreNumber.length + 1;
+        }
       } else {
         this.maxCoreNumberLength = null;
       }
@@ -2786,6 +2792,9 @@ var Iti = class {
         this.dropdown.parentNode.removeChild(this.dropdown);
       }
     }
+    if (this._handlePageLoad) {
+      window.removeEventListener("load", this._handlePageLoad);
+    }
     this._trigger("close:countrydropdown");
   }
   //* Check if an element is visible within it's container, else scroll until it is.
@@ -3074,22 +3083,39 @@ var Iti = class {
     }
   }
 };
-var loadUtils = (path) => {
+var loadUtils = (source) => {
   if (!intlTelInput.utils && !intlTelInput.startedLoadingUtilsScript) {
+    let loadCall;
+    if (typeof source === "string") {
+      loadCall = Promise.reject(new Error("INTENTIONALLY BROKEN: this build of intl-tel-input includes the utilities module inline, but it has incorrectly attempted to load the utilities separately. If you are seeing this message, something is broken!"));
+    } else if (typeof source === "function") {
+      try {
+        loadCall = source();
+        if (!(loadCall instanceof Promise)) {
+          throw new TypeError(`The function passed to loadUtils must return a promise for the utilities module, not ${typeof loadCall}`);
+        }
+      } catch (error) {
+        return Promise.reject(error);
+      }
+    } else {
+      return Promise.reject(new TypeError(`The argument passed to loadUtils must be a URL string or a function that returns a promise for the utilities module, not ${typeof source}`));
+    }
     intlTelInput.startedLoadingUtilsScript = true;
-    return new Promise((resolve, reject) => {
-      import_INTENTIONALLY_BROKEN(
-        /* webpackIgnore: true */
-        /* @vite-ignore */
-        path
-      ).then(({ default: utils2 }) => {
-        intlTelInput.utils = utils2;
-        forEachInstance("handleUtils");
-        resolve(true);
-      }).catch(() => {
-        forEachInstance("rejectUtilsScriptPromise");
-        reject();
-      });
+    return loadCall.then((module2) => {
+      const utils2 = module2?.default;
+      if (!utils2 || typeof utils2 !== "object") {
+        if (typeof source === "string") {
+          throw new TypeError(`The module loaded from ${source} did not set utils as its default export.`);
+        } else {
+          throw new TypeError("The loader function passed to loadUtils did not resolve to a module object with utils as its default export.");
+        }
+      }
+      intlTelInput.utils = utils2;
+      forEachInstance("handleUtils");
+      return true;
+    }).catch((error) => {
+      forEachInstance("rejectUtilsScriptPromise", error);
+      throw error;
     });
   }
   return null;
@@ -3116,7 +3142,9 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "24.5.1"
+    startedLoadingUtilsScript: false,
+    startedLoadingAutoCountry: false,
+    version: "24.6.0"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -1623,6 +1623,8 @@ var defaults = {
   i18n: {},
   //* Initial country.
   initialCountry: "",
+  //* Specify the path to the libphonenumber script to enable validation/formatting.
+  loadUtilsOnInit: "",
   //* National vs international formatting for numbers e.g. placeholders and displaying existing numbers.
   nationalMode: true,
   //* Display only these countries.
@@ -1643,7 +1645,7 @@ var defaults = {
       navigator.userAgent
     ) || window.innerWidth <= 500
   ) : false,
-  //* Specify the path to the libphonenumber script to enable validation/formatting.
+  //* Deprecated! Use `loadUtilsOnInit` instead.
   utilsScript: "",
   //* The number type to enforce during validation.
   validationNumberType: "MOBILE"
@@ -1705,9 +1707,9 @@ var createEl = (name, attrs, container) => {
   }
   return el;
 };
-var forEachInstance = (method) => {
+var forEachInstance = (method, ...args) => {
   const { instances } = intlTelInput;
-  Object.values(instances).forEach((instance) => instance[method]());
+  Object.values(instances).forEach((instance) => instance[method](...args));
 };
 var Iti = class {
   constructor(input, customOptions = {}) {
@@ -2155,14 +2157,21 @@ var Iti = class {
   }
   //* Init many requests: utils script / geo ip lookup.
   _initRequests() {
-    const { utilsScript, initialCountry, geoIpLookup } = this.options;
-    if (utilsScript && !intlTelInput.utils) {
+    let { loadUtilsOnInit, utilsScript, initialCountry, geoIpLookup } = this.options;
+    if (!loadUtilsOnInit && utilsScript) {
+      console.warn("intl-tel-input: The `utilsScript` option is deprecated and will be removed in a future release! Please use the `loadUtilsOnInit` option instead.");
+      loadUtilsOnInit = utilsScript;
+    }
+    if (loadUtilsOnInit && !intlTelInput.utils) {
+      this._handlePageLoad = () => {
+        window.removeEventListener("load", this._handlePageLoad);
+        intlTelInput.loadUtils(loadUtilsOnInit)?.catch(() => {
+        });
+      };
       if (intlTelInput.documentReady()) {
-        intlTelInput.loadUtils(utilsScript);
+        this._handlePageLoad();
       } else {
-        window.addEventListener("load", () => {
-          intlTelInput.loadUtils(utilsScript);
-        });
+        window.addEventListener("load", this._handlePageLoad);
       }
     } else {
       this.resolveUtilsScriptPromise();
@@ -2259,13 +2268,17 @@ var Iti = class {
             const isInitialPlus = !alreadyHasPlus && this.telInput.selectionStart === 0 && e.key === "+";
             const isNumeric = /^[0-9]$/.test(e.key);
             const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
-            const fullNumber = this._getFullNumber();
-            const coreNumber = intlTelInput.utils.getCoreNumber(fullNumber, this.selectedCountryData.iso2);
-            const hasReachedMaxLength = this.maxCoreNumberLength && coreNumber.length >= this.maxCoreNumberLength;
-            const selectedText = value.substring(this.telInput.selectionStart, this.telInput.selectionEnd);
-            const hasSelectedDigit = /\d/.test(selectedText);
-            const isChangingDialCode = isInitialPlus ? true : this._isChangingDialCode(e.key);
-            if (!isAllowedChar || hasReachedMaxLength && !hasSelectedDigit && !isChangingDialCode) {
+            const newValue = value.slice(0, this.telInput.selectionStart) + e.key + value.slice(this.telInput.selectionEnd);
+            const newFullNumber = this._getFullNumber(newValue);
+            const coreNumber = intlTelInput.utils.getCoreNumber(newFullNumber, this.selectedCountryData.iso2);
+            const hasExceededMaxLength = this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength;
+            let isChangingDialCode = false;
+            if (alreadyHasPlus) {
+              const currentCountry = this.selectedCountryData.iso2;
+              const newCountry = this._getCountryFromNumber(newFullNumber);
+              isChangingDialCode = newCountry !== currentCountry;
+            }
+            if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
               e.preventDefault();
             }
           }
@@ -2274,17 +2287,6 @@ var Iti = class {
       this.telInput.addEventListener("keydown", this._handleKeydownEvent);
     }
   }
-  _isChangingDialCode(char) {
-    const value = this.telInput.value;
-    if (value.charAt(0) === "+") {
-      const currentCountry = this.selectedCountryData.iso2;
-      const newValue = value.slice(0, this.telInput.selectionStart) + char + value.slice(this.telInput.selectionEnd);
-      const newFullNumber = this._getFullNumber(newValue);
-      const newCountry = this._getCountryFromNumber(newFullNumber);
-      return newCountry !== currentCountry;
-    }
-    return false;
-  }
   //* Adhere to the input's maxlength attr.
   _cap(number) {
     const max = parseInt(this.telInput.getAttribute("maxlength") || "", 10);
@@ -2628,22 +2630,26 @@ var Iti = class {
   //* Update the maximum valid number length for the currently selected country.
   _updateMaxLength() {
     const { strictMode, placeholderNumberType, validationNumberType } = this.options;
+    const { iso2 } = this.selectedCountryData;
     if (strictMode && intlTelInput.utils) {
-      if (this.selectedCountryData.iso2) {
+      if (iso2) {
         const numberType = intlTelInput.utils.numberType[placeholderNumberType];
         let exampleNumber = intlTelInput.utils.getExampleNumber(
-          this.selectedCountryData.iso2,
+          iso2,
           false,
           numberType,
           true
         );
         let validNumber = exampleNumber;
-        while (intlTelInput.utils.isPossibleNumber(exampleNumber, this.selectedCountryData.iso2, validationNumberType)) {
+        while (intlTelInput.utils.isPossibleNumber(exampleNumber, iso2, validationNumberType)) {
           validNumber = exampleNumber;
           exampleNumber += "0";
         }
-        const coreNumber = intlTelInput.utils.getCoreNumber(validNumber, this.selectedCountryData.iso2);
+        const coreNumber = intlTelInput.utils.getCoreNumber(validNumber, iso2);
         this.maxCoreNumberLength = coreNumber.length;
+        if (iso2 === "by") {
+          this.maxCoreNumberLength = coreNumber.length + 1;
+        }
       } else {
         this.maxCoreNumberLength = null;
       }
@@ -2750,6 +2756,9 @@ var Iti = class {
         this.dropdown.parentNode.removeChild(this.dropdown);
       }
     }
+    if (this._handlePageLoad) {
+      window.removeEventListener("load", this._handlePageLoad);
+    }
     this._trigger("close:countrydropdown");
   }
   //* Check if an element is visible within it's container, else scroll until it is.
@@ -3038,22 +3047,39 @@ var Iti = class {
     }
   }
 };
-var loadUtils = (path) => {
+var loadUtils = (source) => {
   if (!intlTelInput.utils && !intlTelInput.startedLoadingUtilsScript) {
+    let loadCall;
+    if (typeof source === "string") {
+      loadCall = Promise.reject(new Error("INTENTIONALLY BROKEN: this build of intl-tel-input includes the utilities module inline, but it has incorrectly attempted to load the utilities separately. If you are seeing this message, something is broken!"));
+    } else if (typeof source === "function") {
+      try {
+        loadCall = source();
+        if (!(loadCall instanceof Promise)) {
+          throw new TypeError(`The function passed to loadUtils must return a promise for the utilities module, not ${typeof loadCall}`);
+        }
+      } catch (error) {
+        return Promise.reject(error);
+      }
+    } else {
+      return Promise.reject(new TypeError(`The argument passed to loadUtils must be a URL string or a function that returns a promise for the utilities module, not ${typeof source}`));
+    }
     intlTelInput.startedLoadingUtilsScript = true;
-    return new Promise((resolve, reject) => {
-      import_INTENTIONALLY_BROKEN(
-        /* webpackIgnore: true */
-        /* @vite-ignore */
-        path
-      ).then(({ default: utils2 }) => {
-        intlTelInput.utils = utils2;
-        forEachInstance("handleUtils");
-        resolve(true);
-      }).catch(() => {
-        forEachInstance("rejectUtilsScriptPromise");
-        reject();
-      });
+    return loadCall.then((module) => {
+      const utils2 = module?.default;
+      if (!utils2 || typeof utils2 !== "object") {
+        if (typeof source === "string") {
+          throw new TypeError(`The module loaded from ${source} did not set utils as its default export.`);
+        } else {
+          throw new TypeError("The loader function passed to loadUtils did not resolve to a module object with utils as its default export.");
+        }
+      }
+      intlTelInput.utils = utils2;
+      forEachInstance("handleUtils");
+      return true;
+    }).catch((error) => {
+      forEachInstance("rejectUtilsScriptPromise", error);
+      throw error;
     });
   }
   return null;
@@ -3080,7 +3106,9 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "24.5.1"
+    startedLoadingUtilsScript: false,
+    startedLoadingAutoCountry: false,
+    version: "24.6.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 `utilsScript` 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 `utilsScript` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@24.5.1/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 `utilsScript` 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 `utilsScript` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@24.6.0/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.