intl-tel-input 25.8.2 → 25.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "25.8.2",
+  "version": "25.8.4",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",

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.2/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.4/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

@@ -2026,7 +2026,7 @@ var Iti = class _Iti {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code", "aria-hidden": "true", dir: "ltr" },
+          { class: "iti__selected-dial-code", dir: "ltr" },
           this.selectedCountry
         );
       }
@@ -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;
@@ -2773,20 +2773,20 @@ var Iti = class _Iti {
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
     }
-    if (this.selectedCountryInner) {
-      let flagClass = "";
-      let ariaLabel = "";
-      if (iso2 && showFlags) {
-        flagClass = `iti__flag iti__${iso2}`;
+    if (this.selectedCountry) {
+      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);
       } else {
-        flagClass = "iti__flag iti__globe";
+        title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
       }
       this.selectedCountryInner.className = flagClass;
+      this.selectedCountry.setAttribute("title", title);
       this.selectedCountry.setAttribute("aria-label", ariaLabel);
     }
-    this._setSelectedCountryTitleAttribute(iso2, separateDialCode);
     if (separateDialCode) {
       const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
       this.selectedDialCode.innerHTML = dialCode;
@@ -2836,20 +2836,6 @@ var Iti = class _Iti {
       }
     }
   }
-  _setSelectedCountryTitleAttribute(iso2 = null, separateDialCode) {
-    if (!this.selectedCountry) {
-      return;
-    }
-    let title;
-    if (iso2 && !separateDialCode) {
-      title = `${this.selectedCountryData.name}: +${this.selectedCountryData.dialCode}`;
-    } else if (iso2) {
-      title = this.selectedCountryData.name;
-    } else {
-      title = this.options.i18n.noCountrySelected;
-    }
-    this.selectedCountry.setAttribute("title", title);
-  }
   //* 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
@@ -2899,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();
@@ -3196,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();
     }
   }
@@ -3275,7 +3267,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.2"
+    version: "25.8.4"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.d.ts

@@ -470,7 +470,6 @@ declare module "intl-tel-input" {
         private _setCountry;
         private _updateInputPadding;
         private _updateMaxLength;
-        private _setSelectedCountryTitleAttribute;
         private _getHiddenSelectedCountryWidth;
         private _updatePlaceholder;
         private _selectListItem;

package/react/build/IntlTelInput.js

@@ -1990,7 +1990,7 @@ var Iti = class _Iti {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code", "aria-hidden": "true", dir: "ltr" },
+          { class: "iti__selected-dial-code", dir: "ltr" },
           this.selectedCountry
         );
       }
@@ -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;
@@ -2737,20 +2737,20 @@ var Iti = class _Iti {
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
     }
-    if (this.selectedCountryInner) {
-      let flagClass = "";
-      let ariaLabel = "";
-      if (iso2 && showFlags) {
-        flagClass = `iti__flag iti__${iso2}`;
+    if (this.selectedCountry) {
+      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);
       } else {
-        flagClass = "iti__flag iti__globe";
+        title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
       }
       this.selectedCountryInner.className = flagClass;
+      this.selectedCountry.setAttribute("title", title);
       this.selectedCountry.setAttribute("aria-label", ariaLabel);
     }
-    this._setSelectedCountryTitleAttribute(iso2, separateDialCode);
     if (separateDialCode) {
       const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
       this.selectedDialCode.innerHTML = dialCode;
@@ -2800,20 +2800,6 @@ var Iti = class _Iti {
       }
     }
   }
-  _setSelectedCountryTitleAttribute(iso2 = null, separateDialCode) {
-    if (!this.selectedCountry) {
-      return;
-    }
-    let title;
-    if (iso2 && !separateDialCode) {
-      title = `${this.selectedCountryData.name}: +${this.selectedCountryData.dialCode}`;
-    } else if (iso2) {
-      title = this.selectedCountryData.name;
-    } else {
-      title = this.options.i18n.noCountrySelected;
-    }
-    this.selectedCountry.setAttribute("title", title);
-  }
   //* 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
@@ -2863,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();
@@ -3160,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();
     }
   }
@@ -3239,7 +3231,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.2"
+    version: "25.8.4"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.cjs

@@ -2026,7 +2026,7 @@ var Iti = class _Iti {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code", "aria-hidden": "true", dir: "ltr" },
+          { class: "iti__selected-dial-code", dir: "ltr" },
           this.selectedCountry
         );
       }
@@ -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;
@@ -2773,20 +2773,20 @@ var Iti = class _Iti {
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
     }
-    if (this.selectedCountryInner) {
-      let flagClass = "";
-      let ariaLabel = "";
-      if (iso2 && showFlags) {
-        flagClass = `iti__flag iti__${iso2}`;
+    if (this.selectedCountry) {
+      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);
       } else {
-        flagClass = "iti__flag iti__globe";
+        title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
       }
       this.selectedCountryInner.className = flagClass;
+      this.selectedCountry.setAttribute("title", title);
       this.selectedCountry.setAttribute("aria-label", ariaLabel);
     }
-    this._setSelectedCountryTitleAttribute(iso2, separateDialCode);
     if (separateDialCode) {
       const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
       this.selectedDialCode.innerHTML = dialCode;
@@ -2836,20 +2836,6 @@ var Iti = class _Iti {
       }
     }
   }
-  _setSelectedCountryTitleAttribute(iso2 = null, separateDialCode) {
-    if (!this.selectedCountry) {
-      return;
-    }
-    let title;
-    if (iso2 && !separateDialCode) {
-      title = `${this.selectedCountryData.name}: +${this.selectedCountryData.dialCode}`;
-    } else if (iso2) {
-      title = this.selectedCountryData.name;
-    } else {
-      title = this.options.i18n.noCountrySelected;
-    }
-    this.selectedCountry.setAttribute("title", title);
-  }
   //* 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
@@ -2899,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();
@@ -3196,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();
     }
   }
@@ -3275,7 +3267,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.2"
+    version: "25.8.4"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -1990,7 +1990,7 @@ var Iti = class _Iti {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code", "aria-hidden": "true", dir: "ltr" },
+          { class: "iti__selected-dial-code", dir: "ltr" },
           this.selectedCountry
         );
       }
@@ -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;
@@ -2737,20 +2737,20 @@ var Iti = class _Iti {
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
     }
-    if (this.selectedCountryInner) {
-      let flagClass = "";
-      let ariaLabel = "";
-      if (iso2 && showFlags) {
-        flagClass = `iti__flag iti__${iso2}`;
+    if (this.selectedCountry) {
+      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);
       } else {
-        flagClass = "iti__flag iti__globe";
+        title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
       }
       this.selectedCountryInner.className = flagClass;
+      this.selectedCountry.setAttribute("title", title);
       this.selectedCountry.setAttribute("aria-label", ariaLabel);
     }
-    this._setSelectedCountryTitleAttribute(iso2, separateDialCode);
     if (separateDialCode) {
       const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
       this.selectedDialCode.innerHTML = dialCode;
@@ -2800,20 +2800,6 @@ var Iti = class _Iti {
       }
     }
   }
-  _setSelectedCountryTitleAttribute(iso2 = null, separateDialCode) {
-    if (!this.selectedCountry) {
-      return;
-    }
-    let title;
-    if (iso2 && !separateDialCode) {
-      title = `${this.selectedCountryData.name}: +${this.selectedCountryData.dialCode}`;
-    } else if (iso2) {
-      title = this.selectedCountryData.name;
-    } else {
-      title = this.options.i18n.noCountrySelected;
-    }
-    this.selectedCountry.setAttribute("title", title);
-  }
   //* 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
@@ -2863,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();
@@ -3160,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();
     }
   }
@@ -3239,7 +3231,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.2"
+    version: "25.8.4"
   }
 );
 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.2/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.4/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.