intl-tel-input 26.0.1 → 26.0.3

package/package.json

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

package/react/README.md

@@ -32,7 +32,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.
 
 ## Utils Script
-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 just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@26.0.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/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 just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@26.0.3/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

@@ -2489,12 +2489,22 @@ var processAllCountries = (options) => {
 };
 var generateCountryNames = (countries, options) => {
   const { countryNameLocale, i18n } = options;
-  const hasDisplayNames = typeof Intl !== "undefined" && typeof Intl.DisplayNames === "function";
-  const displayNames = hasDisplayNames ? new Intl.DisplayNames(countryNameLocale, {
-    type: "region"
-  }) : null;
+  let displayNames;
+  try {
+    const hasDisplayNames = typeof Intl !== "undefined" && typeof Intl.DisplayNames === "function";
+    if (hasDisplayNames) {
+      displayNames = new Intl.DisplayNames(countryNameLocale, {
+        type: "region"
+      });
+    } else {
+      displayNames = null;
+    }
+  } catch (e) {
+    console.error(e);
+    displayNames = null;
+  }
   for (const c of countries) {
-    c.name = i18n[c.iso2] || displayNames?.of(c.iso2.toUpperCase());
+    c.name = i18n[c.iso2] || displayNames?.of(c.iso2.toUpperCase()) || "";
   }
 };
 var processDialCodes = (countries) => {
@@ -3410,7 +3420,7 @@ var Iti = class _Iti {
         const { name, dialCode } = this.selectedCountryData;
         title = name;
         ariaLabel = i18n.selectedCountryAriaLabel.replace("${countryName}", name).replace("${dialCode}", `+${dialCode}`);
-        selectedCountryInner = "";
+        selectedCountryInner = showFlags ? "" : buildGlobeIcon();
       } else {
         title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
@@ -3856,7 +3866,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "26.0.1"
+    version: "26.0.3"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.js

@@ -2453,12 +2453,22 @@ var processAllCountries = (options) => {
 };
 var generateCountryNames = (countries, options) => {
   const { countryNameLocale, i18n } = options;
-  const hasDisplayNames = typeof Intl !== "undefined" && typeof Intl.DisplayNames === "function";
-  const displayNames = hasDisplayNames ? new Intl.DisplayNames(countryNameLocale, {
-    type: "region"
-  }) : null;
+  let displayNames;
+  try {
+    const hasDisplayNames = typeof Intl !== "undefined" && typeof Intl.DisplayNames === "function";
+    if (hasDisplayNames) {
+      displayNames = new Intl.DisplayNames(countryNameLocale, {
+        type: "region"
+      });
+    } else {
+      displayNames = null;
+    }
+  } catch (e) {
+    console.error(e);
+    displayNames = null;
+  }
   for (const c of countries) {
-    c.name = i18n[c.iso2] || displayNames?.of(c.iso2.toUpperCase());
+    c.name = i18n[c.iso2] || displayNames?.of(c.iso2.toUpperCase()) || "";
   }
 };
 var processDialCodes = (countries) => {
@@ -3374,7 +3384,7 @@ var Iti = class _Iti {
         const { name, dialCode } = this.selectedCountryData;
         title = name;
         ariaLabel = i18n.selectedCountryAriaLabel.replace("${countryName}", name).replace("${dialCode}", `+${dialCode}`);
-        selectedCountryInner = "";
+        selectedCountryInner = showFlags ? "" : buildGlobeIcon();
       } else {
         title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
@@ -3820,7 +3830,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "26.0.1"
+    version: "26.0.3"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.cjs

@@ -2489,12 +2489,22 @@ var processAllCountries = (options) => {
 };
 var generateCountryNames = (countries, options) => {
   const { countryNameLocale, i18n } = options;
-  const hasDisplayNames = typeof Intl !== "undefined" && typeof Intl.DisplayNames === "function";
-  const displayNames = hasDisplayNames ? new Intl.DisplayNames(countryNameLocale, {
-    type: "region"
-  }) : null;
+  let displayNames;
+  try {
+    const hasDisplayNames = typeof Intl !== "undefined" && typeof Intl.DisplayNames === "function";
+    if (hasDisplayNames) {
+      displayNames = new Intl.DisplayNames(countryNameLocale, {
+        type: "region"
+      });
+    } else {
+      displayNames = null;
+    }
+  } catch (e) {
+    console.error(e);
+    displayNames = null;
+  }
   for (const c of countries) {
-    c.name = i18n[c.iso2] || displayNames?.of(c.iso2.toUpperCase());
+    c.name = i18n[c.iso2] || displayNames?.of(c.iso2.toUpperCase()) || "";
   }
 };
 var processDialCodes = (countries) => {
@@ -3410,7 +3420,7 @@ var Iti = class _Iti {
         const { name, dialCode } = this.selectedCountryData;
         title = name;
         ariaLabel = i18n.selectedCountryAriaLabel.replace("${countryName}", name).replace("${dialCode}", `+${dialCode}`);
-        selectedCountryInner = "";
+        selectedCountryInner = showFlags ? "" : buildGlobeIcon();
       } else {
         title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
@@ -3856,7 +3866,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "26.0.1"
+    version: "26.0.3"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -2453,12 +2453,22 @@ var processAllCountries = (options) => {
 };
 var generateCountryNames = (countries, options) => {
   const { countryNameLocale, i18n } = options;
-  const hasDisplayNames = typeof Intl !== "undefined" && typeof Intl.DisplayNames === "function";
-  const displayNames = hasDisplayNames ? new Intl.DisplayNames(countryNameLocale, {
-    type: "region"
-  }) : null;
+  let displayNames;
+  try {
+    const hasDisplayNames = typeof Intl !== "undefined" && typeof Intl.DisplayNames === "function";
+    if (hasDisplayNames) {
+      displayNames = new Intl.DisplayNames(countryNameLocale, {
+        type: "region"
+      });
+    } else {
+      displayNames = null;
+    }
+  } catch (e) {
+    console.error(e);
+    displayNames = null;
+  }
   for (const c of countries) {
-    c.name = i18n[c.iso2] || displayNames?.of(c.iso2.toUpperCase());
+    c.name = i18n[c.iso2] || displayNames?.of(c.iso2.toUpperCase()) || "";
   }
 };
 var processDialCodes = (countries) => {
@@ -3374,7 +3384,7 @@ var Iti = class _Iti {
         const { name, dialCode } = this.selectedCountryData;
         title = name;
         ariaLabel = i18n.selectedCountryAriaLabel.replace("${countryName}", name).replace("${dialCode}", `+${dialCode}`);
-        selectedCountryInner = "";
+        selectedCountryInner = showFlags ? "" : buildGlobeIcon();
       } else {
         title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
@@ -3820,7 +3830,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "26.0.1"
+    version: "26.0.3"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/svelte/README.md

@@ -28,7 +28,7 @@ Try it for yourself by downloading and building the project yourself in 3 simple
 
 See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/svelte/demo/validation/App.svelte) 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/svelteWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/svelte"` 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@26.0.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/svelteWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/svelte"` 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@26.0.3/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Svelte component.