intl-tel-input 25.8.3 → 25.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "25.8.3",
+  "version": "25.8.5",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",
@@ -118,10 +118,12 @@
   "exports": {
     ".": {
       "types": "./build/js/intlTelInput.d.ts",
+      "import": "./build/js/intlTelInput.js",
       "default": "./build/js/intlTelInput.js"
     },
     "./intlTelInputWithUtils": {
       "types": "./build/js/intlTelInput.d.ts",
+      "import": "./build/js/intlTelInputWithUtils.js",
       "default": "./build/js/intlTelInputWithUtils.js"
     },
     "./data": "./build/js/data.js",
@@ -129,11 +131,13 @@
     "./react": {
       "types": "./react/build/IntlTelInput.d.ts",
       "require": "./react/build/IntlTelInput.cjs",
+      "import": "./react/build/IntlTelInput.js",
       "default": "./react/build/IntlTelInput.js"
     },
     "./reactWithUtils": {
       "types": "./react/build/IntlTelInput.d.ts",
       "require": "./react/build/IntlTelInputWithUtils.cjs",
+      "import": "./react/build/IntlTelInputWithUtils.js",
       "default": "./react/build/IntlTelInputWithUtils.js"
     },
     "./vue": {
@@ -144,18 +148,22 @@
     },
     "./angular": {
       "types": "./angular/build/types/intl-tel-input/angular.d.ts",
+      "import": "./angular/build/IntlTelInput.js",
       "default": "./angular/build/IntlTelInput.js"
     },
     "./angularWithUtils": {
       "types": "./angular/build/types/intl-tel-input/angularWithUtils.d.ts",
+      "import": "./angular/build/IntlTelInputWithUtils.js",
       "default": "./angular/build/IntlTelInputWithUtils.js"
     },
     "./i18n": {
       "types": "./build/js/intlTelInput.d.ts",
+      "import": "./build/js/i18n/index.js",
       "default": "./build/js/i18n/index.js"
     },
     "./i18n/*": {
       "types": "./build/js/intlTelInput.d.ts",
+      "import": "./build/js/i18n/*/index.js",
       "default": "./build/js/i18n/*/index.js"
     },
     "./styles": "./build/css/intlTelInput.css",

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.3/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.8.5/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

@@ -2348,7 +2348,7 @@ var Iti = class _Iti {
   }
   //* Initialize the tel input listeners.
   _initTelInputListeners() {
-    const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay, allowDropdown, countrySearch } = this.options;
+    const { strictMode, formatAsYouType, separateDialCode, allowDropdown, countrySearch } = this.options;
     let userOverrideFormatting = false;
     if (/\p{L}/u.test(this.telInput.value)) {
       userOverrideFormatting = true;
@@ -2372,8 +2372,8 @@ var Iti = class _Iti {
       } else if (!/[^+0-9]/.test(this.telInput.value)) {
         userOverrideFormatting = false;
       }
-      const disableFormatOnSetNumber = e?.detail && e.detail["isSetNumber"] && !formatOnDisplay;
-      if (formatAsYouType && !userOverrideFormatting && !disableFormatOnSetNumber) {
+      const isSetNumber = e?.detail && e.detail["isSetNumber"];
+      if (formatAsYouType && !userOverrideFormatting && !isSetNumber) {
         const currentCaretPos = this.telInput.selectionStart || 0;
         const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos);
         const relevantCharsBeforeCaret = valueBeforeCaret.replace(/[^+0-9]/g, "").length;
@@ -2885,6 +2885,9 @@ var Iti = class _Iti {
     );
     this._closeDropdown();
     this._updateDialCode(listItem.getAttribute("data-dial-code"));
+    if (this.options.formatOnDisplay) {
+      this._updateValFromNumber(this.telInput.value);
+    }
     this.telInput.focus();
     if (countryChanged) {
       this._triggerCountryChange();
@@ -3182,6 +3185,9 @@ var Iti = class _Iti {
     if (isCountryChange) {
       this._setCountry(iso2Lower);
       this._updateDialCode(this.selectedCountryData.dialCode);
+      if (this.options.formatOnDisplay) {
+        this._updateValFromNumber(this.telInput.value);
+      }
       this._triggerCountryChange();
     }
   }
@@ -3261,7 +3267,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.3"
+    version: "25.8.5"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.js

@@ -2312,7 +2312,7 @@ var Iti = class _Iti {
   }
   //* Initialize the tel input listeners.
   _initTelInputListeners() {
-    const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay, allowDropdown, countrySearch } = this.options;
+    const { strictMode, formatAsYouType, separateDialCode, allowDropdown, countrySearch } = this.options;
     let userOverrideFormatting = false;
     if (/\p{L}/u.test(this.telInput.value)) {
       userOverrideFormatting = true;
@@ -2336,8 +2336,8 @@ var Iti = class _Iti {
       } else if (!/[^+0-9]/.test(this.telInput.value)) {
         userOverrideFormatting = false;
       }
-      const disableFormatOnSetNumber = e?.detail && e.detail["isSetNumber"] && !formatOnDisplay;
-      if (formatAsYouType && !userOverrideFormatting && !disableFormatOnSetNumber) {
+      const isSetNumber = e?.detail && e.detail["isSetNumber"];
+      if (formatAsYouType && !userOverrideFormatting && !isSetNumber) {
         const currentCaretPos = this.telInput.selectionStart || 0;
         const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos);
         const relevantCharsBeforeCaret = valueBeforeCaret.replace(/[^+0-9]/g, "").length;
@@ -2849,6 +2849,9 @@ var Iti = class _Iti {
     );
     this._closeDropdown();
     this._updateDialCode(listItem.getAttribute("data-dial-code"));
+    if (this.options.formatOnDisplay) {
+      this._updateValFromNumber(this.telInput.value);
+    }
     this.telInput.focus();
     if (countryChanged) {
       this._triggerCountryChange();
@@ -3146,6 +3149,9 @@ var Iti = class _Iti {
     if (isCountryChange) {
       this._setCountry(iso2Lower);
       this._updateDialCode(this.selectedCountryData.dialCode);
+      if (this.options.formatOnDisplay) {
+        this._updateValFromNumber(this.telInput.value);
+      }
       this._triggerCountryChange();
     }
   }
@@ -3225,7 +3231,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.3"
+    version: "25.8.5"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.cjs

@@ -2348,7 +2348,7 @@ var Iti = class _Iti {
   }
   //* Initialize the tel input listeners.
   _initTelInputListeners() {
-    const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay, allowDropdown, countrySearch } = this.options;
+    const { strictMode, formatAsYouType, separateDialCode, allowDropdown, countrySearch } = this.options;
     let userOverrideFormatting = false;
     if (/\p{L}/u.test(this.telInput.value)) {
       userOverrideFormatting = true;
@@ -2372,8 +2372,8 @@ var Iti = class _Iti {
       } else if (!/[^+0-9]/.test(this.telInput.value)) {
         userOverrideFormatting = false;
       }
-      const disableFormatOnSetNumber = e?.detail && e.detail["isSetNumber"] && !formatOnDisplay;
-      if (formatAsYouType && !userOverrideFormatting && !disableFormatOnSetNumber) {
+      const isSetNumber = e?.detail && e.detail["isSetNumber"];
+      if (formatAsYouType && !userOverrideFormatting && !isSetNumber) {
         const currentCaretPos = this.telInput.selectionStart || 0;
         const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos);
         const relevantCharsBeforeCaret = valueBeforeCaret.replace(/[^+0-9]/g, "").length;
@@ -2885,6 +2885,9 @@ var Iti = class _Iti {
     );
     this._closeDropdown();
     this._updateDialCode(listItem.getAttribute("data-dial-code"));
+    if (this.options.formatOnDisplay) {
+      this._updateValFromNumber(this.telInput.value);
+    }
     this.telInput.focus();
     if (countryChanged) {
       this._triggerCountryChange();
@@ -3182,6 +3185,9 @@ var Iti = class _Iti {
     if (isCountryChange) {
       this._setCountry(iso2Lower);
       this._updateDialCode(this.selectedCountryData.dialCode);
+      if (this.options.formatOnDisplay) {
+        this._updateValFromNumber(this.telInput.value);
+      }
       this._triggerCountryChange();
     }
   }
@@ -3261,7 +3267,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.3"
+    version: "25.8.5"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -2312,7 +2312,7 @@ var Iti = class _Iti {
   }
   //* Initialize the tel input listeners.
   _initTelInputListeners() {
-    const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay, allowDropdown, countrySearch } = this.options;
+    const { strictMode, formatAsYouType, separateDialCode, allowDropdown, countrySearch } = this.options;
     let userOverrideFormatting = false;
     if (/\p{L}/u.test(this.telInput.value)) {
       userOverrideFormatting = true;
@@ -2336,8 +2336,8 @@ var Iti = class _Iti {
       } else if (!/[^+0-9]/.test(this.telInput.value)) {
         userOverrideFormatting = false;
       }
-      const disableFormatOnSetNumber = e?.detail && e.detail["isSetNumber"] && !formatOnDisplay;
-      if (formatAsYouType && !userOverrideFormatting && !disableFormatOnSetNumber) {
+      const isSetNumber = e?.detail && e.detail["isSetNumber"];
+      if (formatAsYouType && !userOverrideFormatting && !isSetNumber) {
         const currentCaretPos = this.telInput.selectionStart || 0;
         const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos);
         const relevantCharsBeforeCaret = valueBeforeCaret.replace(/[^+0-9]/g, "").length;
@@ -2849,6 +2849,9 @@ var Iti = class _Iti {
     );
     this._closeDropdown();
     this._updateDialCode(listItem.getAttribute("data-dial-code"));
+    if (this.options.formatOnDisplay) {
+      this._updateValFromNumber(this.telInput.value);
+    }
     this.telInput.focus();
     if (countryChanged) {
       this._triggerCountryChange();
@@ -3146,6 +3149,9 @@ var Iti = class _Iti {
     if (isCountryChange) {
       this._setCountry(iso2Lower);
       this._updateDialCode(this.selectedCountryData.dialCode);
+      if (this.options.formatOnDisplay) {
+        this._updateValFromNumber(this.telInput.value);
+      }
       this._triggerCountryChange();
     }
   }
@@ -3225,7 +3231,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.3"
+    version: "25.8.5"
   }
 );
 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.3/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.8.5/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.