intl-tel-input 25.8.5 → 25.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "25.8.5",
+  "version": "25.8.6",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",
@@ -110,6 +110,7 @@
     "build:react": "grunt react",
     "build:vue": "grunt vue",
     "build:angular": "grunt angular",
+    "build:travis": "grunt build:travis",
   "vue:demo": "vite --config vue/demo/validation/vite.config.js"
   },
   "style": "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.5/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.6/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

@@ -1624,7 +1624,7 @@ var countries_default = countryTranslations;
 
 // src/js/intl-tel-input/i18n/en/interface.ts
 var interfaceTranslations = {
-  selectedCountryAriaLabel: "Change country, selected ${country}",
+  selectedCountryAriaLabel: "Change country, selected ${countryName} (${dialCode})",
   noCountrySelected: "Select country",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
@@ -2768,7 +2768,7 @@ var Iti = class _Iti {
   //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
   _setCountry(iso2) {
     const { separateDialCode, showFlags, i18n } = this.options;
-    const prevCountry = this.selectedCountryData.iso2 ? this.selectedCountryData : {};
+    const prevIso2 = this.selectedCountryData.iso2 || "";
     this.selectedCountryData = iso2 ? this._getCountryData(iso2, false) || {} : {};
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
@@ -2777,8 +2777,9 @@ var Iti = class _Iti {
       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);
+        const { name, dialCode } = this.selectedCountryData;
+        title = name;
+        ariaLabel = i18n.selectedCountryAriaLabel.replace("${countryName}", name).replace("${dialCode}", `+${dialCode}`);
       } else {
         title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
@@ -2794,7 +2795,7 @@ var Iti = class _Iti {
     }
     this._updatePlaceholder();
     this._updateMaxLength();
-    return prevCountry.iso2 !== iso2;
+    return prevIso2 !== iso2;
   }
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
@@ -3267,7 +3268,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.5"
+    version: "25.8.6"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.js

@@ -1588,7 +1588,7 @@ var countries_default = countryTranslations;
 
 // src/js/intl-tel-input/i18n/en/interface.ts
 var interfaceTranslations = {
-  selectedCountryAriaLabel: "Change country, selected ${country}",
+  selectedCountryAriaLabel: "Change country, selected ${countryName} (${dialCode})",
   noCountrySelected: "Select country",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
@@ -2732,7 +2732,7 @@ var Iti = class _Iti {
   //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
   _setCountry(iso2) {
     const { separateDialCode, showFlags, i18n } = this.options;
-    const prevCountry = this.selectedCountryData.iso2 ? this.selectedCountryData : {};
+    const prevIso2 = this.selectedCountryData.iso2 || "";
     this.selectedCountryData = iso2 ? this._getCountryData(iso2, false) || {} : {};
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
@@ -2741,8 +2741,9 @@ var Iti = class _Iti {
       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);
+        const { name, dialCode } = this.selectedCountryData;
+        title = name;
+        ariaLabel = i18n.selectedCountryAriaLabel.replace("${countryName}", name).replace("${dialCode}", `+${dialCode}`);
       } else {
         title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
@@ -2758,7 +2759,7 @@ var Iti = class _Iti {
     }
     this._updatePlaceholder();
     this._updateMaxLength();
-    return prevCountry.iso2 !== iso2;
+    return prevIso2 !== iso2;
   }
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
@@ -3231,7 +3232,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.5"
+    version: "25.8.6"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.cjs

@@ -1624,7 +1624,7 @@ var countries_default = countryTranslations;
 
 // src/js/intl-tel-input/i18n/en/interface.ts
 var interfaceTranslations = {
-  selectedCountryAriaLabel: "Change country, selected ${country}",
+  selectedCountryAriaLabel: "Change country, selected ${countryName} (${dialCode})",
   noCountrySelected: "Select country",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
@@ -2768,7 +2768,7 @@ var Iti = class _Iti {
   //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
   _setCountry(iso2) {
     const { separateDialCode, showFlags, i18n } = this.options;
-    const prevCountry = this.selectedCountryData.iso2 ? this.selectedCountryData : {};
+    const prevIso2 = this.selectedCountryData.iso2 || "";
     this.selectedCountryData = iso2 ? this._getCountryData(iso2, false) || {} : {};
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
@@ -2777,8 +2777,9 @@ var Iti = class _Iti {
       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);
+        const { name, dialCode } = this.selectedCountryData;
+        title = name;
+        ariaLabel = i18n.selectedCountryAriaLabel.replace("${countryName}", name).replace("${dialCode}", `+${dialCode}`);
       } else {
         title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
@@ -2794,7 +2795,7 @@ var Iti = class _Iti {
     }
     this._updatePlaceholder();
     this._updateMaxLength();
-    return prevCountry.iso2 !== iso2;
+    return prevIso2 !== iso2;
   }
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
@@ -3267,7 +3268,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.5"
+    version: "25.8.6"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -1588,7 +1588,7 @@ var countries_default = countryTranslations;
 
 // src/js/intl-tel-input/i18n/en/interface.ts
 var interfaceTranslations = {
-  selectedCountryAriaLabel: "Change country, selected ${country}",
+  selectedCountryAriaLabel: "Change country, selected ${countryName} (${dialCode})",
   noCountrySelected: "Select country",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
@@ -2732,7 +2732,7 @@ var Iti = class _Iti {
   //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
   _setCountry(iso2) {
     const { separateDialCode, showFlags, i18n } = this.options;
-    const prevCountry = this.selectedCountryData.iso2 ? this.selectedCountryData : {};
+    const prevIso2 = this.selectedCountryData.iso2 || "";
     this.selectedCountryData = iso2 ? this._getCountryData(iso2, false) || {} : {};
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
@@ -2741,8 +2741,9 @@ var Iti = class _Iti {
       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);
+        const { name, dialCode } = this.selectedCountryData;
+        title = name;
+        ariaLabel = i18n.selectedCountryAriaLabel.replace("${countryName}", name).replace("${dialCode}", `+${dialCode}`);
       } else {
         title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
@@ -2758,7 +2759,7 @@ var Iti = class _Iti {
     }
     this._updatePlaceholder();
     this._updateMaxLength();
-    return prevCountry.iso2 !== iso2;
+    return prevIso2 !== iso2;
   }
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
@@ -3231,7 +3232,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.5"
+    version: "25.8.6"
   }
 );
 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.5/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.6/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.