intl-tel-input 25.8.2 → 25.8.4

package/README.md

@@ -77,16 +77,16 @@ _Note: We have now dropped support for all versions of Internet Explorer because
 ## Getting Started (Using a CDN)
 1. Add the CSS
   ```html
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.2/build/css/intlTelInput.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.4/build/css/intlTelInput.css">
   ```
 
 2. Add the plugin script and initialise it on your input element
   ```html
-  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.2/build/js/intlTelInput.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.4/build/js/intlTelInput.min.js"></script>
   <script>
     const input = document.querySelector("#phone");
     window.intlTelInput(input, {
-      loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.2/build/js/utils.js"),
+      loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.4/build/js/utils.js"),
     });
   </script>
   ```
@@ -207,7 +207,7 @@ Automatically format the number as the user types. This feature will be disabled
 
 **formatOnDisplay**  
 Type: `Boolean` Default: `true`  
-Format the input value (according to the `nationalMode` option) during initialisation, and on `setNumber`. Requires the [utils script to be loaded](#loading-the-utilities-script).
+Format the input value (according to the `nationalMode` option) during initialisation, when a new country is selected, on `setNumber` and on `setCountry`. Requires the [utils script to be loaded](#loading-the-utilities-script).
 
 **geoIpLookup**  
 Type: `Function` Default: `null`  
@@ -322,7 +322,7 @@ The `loadUtils` option takes a function which returns a Promise which resolves t
 ```js
 // (A) import utils module from a CDN
 intlTelInput(htmlInputElement, {
-  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.2/build/js/utils.js"),
+  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.4/build/js/utils.js"),
 });
 
 // (B) import utils module from your own hosted version of utils.js
@@ -459,7 +459,7 @@ const isValid = iti.isValidNumberPrecise();
 Returns: `true`/`false`
 
 **setCountry**  
-Change the selected country. It should be rare, if ever, that you need to do this, as the selected country gets updated automatically when calling `setNumber` and passing a number including an international dial code, which is the recommended usage. Note you can omit the country code argument to set the country to the default empty (globe) state.
+Change the selected country. It should be rare, if ever, that you need to do this, as the selected country gets updated automatically when calling `setNumber` and passing a number including an international dial code, which is the recommended usage. Note you can omit the country code argument to set the country to the default empty (globe) state. _Note that if `formatOnDisplay` is enabled, this will attempt to format the number to either national or international format according to the `nationalMode` option._  
 ```js
 iti.setCountry("gb");
 ```
@@ -606,7 +606,7 @@ The `loadUtils` option takes a function which returns a Promise which resolves t
 ```js
 // (A) import utils module from a CDN
 intlTelInput(htmlInputElement, {
-  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.2/build/js/utils.js"),
+  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.4/build/js/utils.js"),
 });
 
 // (B) import utils module from your own hosted version of utils.js

package/angular/README.md

@@ -29,7 +29,7 @@ import "intl-tel-input/styles";
 
 See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/angular/demo/validation/validation.component.ts) 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/angularWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/angular"` 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/angularWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/angular"` 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 Angular component.

package/angular/build/IntlTelInput.js

@@ -1946,7 +1946,7 @@ var Iti = class _Iti {
         this.dropdownArrow = createEl("div", { class: "iti__arrow", "aria-hidden": "true" }, selectedCountryPrimary);
       }
       if (separateDialCode) {
-        this.selectedDialCode = createEl("div", { class: "iti__selected-dial-code", "aria-hidden": "true", dir: "ltr" }, this.selectedCountry);
+        this.selectedDialCode = createEl("div", { class: "iti__selected-dial-code", dir: "ltr" }, this.selectedCountry);
       }
       if (allowDropdown) {
         const extraClasses = fixDropdownWidth ? "" : "iti--flexible-dropdown-width";
@@ -2227,7 +2227,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;
@@ -2251,8 +2251,8 @@ var Iti = class _Iti {
       } else if (!/[^+0-9]/.test(this.telInput.value)) {
         userOverrideFormatting = false;
       }
-      const disableFormatOnSetNumber = (e === null || e === void 0 ? void 0 : e.detail) && e.detail["isSetNumber"] && !formatOnDisplay;
-      if (formatAsYouType && !userOverrideFormatting && !disableFormatOnSetNumber) {
+      const isSetNumber = (e === null || e === void 0 ? void 0 : 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;
@@ -2645,20 +2645,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;
@@ -2703,20 +2703,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
@@ -2755,6 +2741,9 @@ var Iti = class _Iti {
     const countryChanged = this._setCountry(listItem.getAttribute("data-country-code"));
     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();
@@ -3031,6 +3020,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();
     }
   }
@@ -3108,7 +3100,7 @@ var intlTelInput = Object.assign((input, options) => {
   attachUtils,
   startedLoadingUtilsScript: false,
   startedLoadingAutoCountry: false,
-  version: "25.8.2"
+  version: "25.8.4"
 });
 var intl_tel_input_default = intlTelInput;
 

package/angular/build/IntlTelInputWithUtils.js

@@ -1946,7 +1946,7 @@ var Iti = class _Iti {
         this.dropdownArrow = createEl("div", { class: "iti__arrow", "aria-hidden": "true" }, selectedCountryPrimary);
       }
       if (separateDialCode) {
-        this.selectedDialCode = createEl("div", { class: "iti__selected-dial-code", "aria-hidden": "true", dir: "ltr" }, this.selectedCountry);
+        this.selectedDialCode = createEl("div", { class: "iti__selected-dial-code", dir: "ltr" }, this.selectedCountry);
       }
       if (allowDropdown) {
         const extraClasses = fixDropdownWidth ? "" : "iti--flexible-dropdown-width";
@@ -2227,7 +2227,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;
@@ -2251,8 +2251,8 @@ var Iti = class _Iti {
       } else if (!/[^+0-9]/.test(this.telInput.value)) {
         userOverrideFormatting = false;
       }
-      const disableFormatOnSetNumber = (e === null || e === void 0 ? void 0 : e.detail) && e.detail["isSetNumber"] && !formatOnDisplay;
-      if (formatAsYouType && !userOverrideFormatting && !disableFormatOnSetNumber) {
+      const isSetNumber = (e === null || e === void 0 ? void 0 : 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;
@@ -2645,20 +2645,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;
@@ -2703,20 +2703,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
@@ -2755,6 +2741,9 @@ var Iti = class _Iti {
     const countryChanged = this._setCountry(listItem.getAttribute("data-country-code"));
     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();
@@ -3031,6 +3020,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();
     }
   }
@@ -3108,7 +3100,7 @@ var intlTelInput = Object.assign((input, options) => {
   attachUtils,
   startedLoadingUtilsScript: false,
   startedLoadingAutoCountry: false,
-  version: "25.8.2"
+  version: "25.8.4"
 });
 var intl_tel_input_default = intlTelInput;
 

package/angular/build/types/intl-tel-input.d.ts

@@ -176,7 +176,6 @@ export declare class Iti {
     private _setCountry;
     private _updateInputPadding;
     private _updateMaxLength;
-    private _setSelectedCountryTitleAttribute;
     private _getHiddenSelectedCountryWidth;
     private _updatePlaceholder;
     private _selectListItem;

package/build/js/data.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v25.8.2
+ * International Telephone Input v25.8.4
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */

package/build/js/data.min.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v25.8.2
+ * International Telephone Input v25.8.4
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */

package/build/js/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/build/js/intlTelInput.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v25.8.2
+ * International Telephone Input v25.8.4
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */
@@ -2031,7 +2031,7 @@ var factoryOutput = (() => {
         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
           );
         }
@@ -2353,7 +2353,7 @@ var factoryOutput = (() => {
     }
     //* 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;
@@ -2377,8 +2377,8 @@ var factoryOutput = (() => {
         } 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;
@@ -2778,20 +2778,20 @@ var factoryOutput = (() => {
       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;
@@ -2841,20 +2841,6 @@ var factoryOutput = (() => {
         }
       }
     }
-    _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
@@ -2904,6 +2890,9 @@ var factoryOutput = (() => {
       );
       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();
@@ -3201,6 +3190,9 @@ var factoryOutput = (() => {
       if (isCountryChange) {
         this._setCountry(iso2Lower);
         this._updateDialCode(this.selectedCountryData.dialCode);
+        if (this.options.formatOnDisplay) {
+          this._updateValFromNumber(this.telInput.value);
+        }
         this._triggerCountryChange();
       }
     }
@@ -3280,7 +3272,7 @@ var factoryOutput = (() => {
       attachUtils,
       startedLoadingUtilsScript: false,
       startedLoadingAutoCountry: false,
-      version: "25.8.2"
+      version: "25.8.4"
     }
   );
   var intl_tel_input_default = intlTelInput;