intl-tel-input 25.5.1 → 25.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "25.5.1",
+  "version": "25.5.2",
   "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.5.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 alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.5.2/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

@@ -1790,6 +1790,7 @@ var Iti = class {
     }
     this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
     this.isRTL = !!this.telInput.closest("[dir=rtl]");
+    this.telInput.dir = "ltr";
     const showOnDefaultSide = this.options.allowDropdown || this.options.separateDialCode;
     this.showSelectedCountryOnLeft = this.isRTL ? !showOnDefaultSide : showOnDefaultSide;
     if (this.options.separateDialCode) {
@@ -2008,7 +2009,7 @@ var Iti = class {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code", "aria-hidden": "true" },
+          { class: "iti__selected-dial-code", "aria-hidden": "true", dir: "ltr" },
           this.selectedCountry
         );
       }
@@ -2126,7 +2127,7 @@ var Iti = class {
         content += `<div class='iti__flag iti__${c.iso2}'></div>`;
       }
       content += `<span class='iti__country-name'>${c.name}</span>`;
-      content += `<span class='iti__dial-code'>+${c.dialCode}</span>`;
+      content += `<span class='iti__dial-code' dir='ltr'>+${c.dialCode}</span>`;
       listItem.insertAdjacentHTML("beforeend", content);
     }
   }
@@ -3202,7 +3203,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.5.1"
+    version: "25.5.2"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.js

@@ -1754,6 +1754,7 @@ var Iti = class {
     }
     this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
     this.isRTL = !!this.telInput.closest("[dir=rtl]");
+    this.telInput.dir = "ltr";
     const showOnDefaultSide = this.options.allowDropdown || this.options.separateDialCode;
     this.showSelectedCountryOnLeft = this.isRTL ? !showOnDefaultSide : showOnDefaultSide;
     if (this.options.separateDialCode) {
@@ -1972,7 +1973,7 @@ var Iti = class {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code", "aria-hidden": "true" },
+          { class: "iti__selected-dial-code", "aria-hidden": "true", dir: "ltr" },
           this.selectedCountry
         );
       }
@@ -2090,7 +2091,7 @@ var Iti = class {
         content += `<div class='iti__flag iti__${c.iso2}'></div>`;
       }
       content += `<span class='iti__country-name'>${c.name}</span>`;
-      content += `<span class='iti__dial-code'>+${c.dialCode}</span>`;
+      content += `<span class='iti__dial-code' dir='ltr'>+${c.dialCode}</span>`;
       listItem.insertAdjacentHTML("beforeend", content);
     }
   }
@@ -3166,7 +3167,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.5.1"
+    version: "25.5.2"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.cjs

@@ -1790,6 +1790,7 @@ var Iti = class {
     }
     this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
     this.isRTL = !!this.telInput.closest("[dir=rtl]");
+    this.telInput.dir = "ltr";
     const showOnDefaultSide = this.options.allowDropdown || this.options.separateDialCode;
     this.showSelectedCountryOnLeft = this.isRTL ? !showOnDefaultSide : showOnDefaultSide;
     if (this.options.separateDialCode) {
@@ -2008,7 +2009,7 @@ var Iti = class {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code", "aria-hidden": "true" },
+          { class: "iti__selected-dial-code", "aria-hidden": "true", dir: "ltr" },
           this.selectedCountry
         );
       }
@@ -2126,7 +2127,7 @@ var Iti = class {
         content += `<div class='iti__flag iti__${c.iso2}'></div>`;
       }
       content += `<span class='iti__country-name'>${c.name}</span>`;
-      content += `<span class='iti__dial-code'>+${c.dialCode}</span>`;
+      content += `<span class='iti__dial-code' dir='ltr'>+${c.dialCode}</span>`;
       listItem.insertAdjacentHTML("beforeend", content);
     }
   }
@@ -3202,7 +3203,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.5.1"
+    version: "25.5.2"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -1754,6 +1754,7 @@ var Iti = class {
     }
     this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
     this.isRTL = !!this.telInput.closest("[dir=rtl]");
+    this.telInput.dir = "ltr";
     const showOnDefaultSide = this.options.allowDropdown || this.options.separateDialCode;
     this.showSelectedCountryOnLeft = this.isRTL ? !showOnDefaultSide : showOnDefaultSide;
     if (this.options.separateDialCode) {
@@ -1972,7 +1973,7 @@ var Iti = class {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code", "aria-hidden": "true" },
+          { class: "iti__selected-dial-code", "aria-hidden": "true", dir: "ltr" },
           this.selectedCountry
         );
       }
@@ -2090,7 +2091,7 @@ var Iti = class {
         content += `<div class='iti__flag iti__${c.iso2}'></div>`;
       }
       content += `<span class='iti__country-name'>${c.name}</span>`;
-      content += `<span class='iti__dial-code'>+${c.dialCode}</span>`;
+      content += `<span class='iti__dial-code' dir='ltr'>+${c.dialCode}</span>`;
       listItem.insertAdjacentHTML("beforeend", content);
     }
   }
@@ -3166,7 +3167,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.5.1"
+    version: "25.5.2"
   }
 );
 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.5.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/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.5.2/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.

package/vue/build/IntlTelInput.mjs

@@ -1698,7 +1698,7 @@ class W {
   }
   //* Can't be private as it's called from intlTelInput convenience wrapper.
   _init() {
-    this.options.useFullscreenPopup && (this.options.fixDropdownWidth = !1), this.options.onlyCountries.length === 1 && (this.options.initialCountry = this.options.onlyCountries[0]), this.options.separateDialCode && (this.options.nationalMode = !1), this.options.allowDropdown && !this.options.showFlags && !this.options.separateDialCode && (this.options.nationalMode = !1), this.options.useFullscreenPopup && !this.options.dropdownContainer && (this.options.dropdownContainer = document.body), this.isAndroid = typeof navigator < "u" ? /Android/i.test(navigator.userAgent) : !1, this.isRTL = !!this.telInput.closest("[dir=rtl]");
+    this.options.useFullscreenPopup && (this.options.fixDropdownWidth = !1), this.options.onlyCountries.length === 1 && (this.options.initialCountry = this.options.onlyCountries[0]), this.options.separateDialCode && (this.options.nationalMode = !1), this.options.allowDropdown && !this.options.showFlags && !this.options.separateDialCode && (this.options.nationalMode = !1), this.options.useFullscreenPopup && !this.options.dropdownContainer && (this.options.dropdownContainer = document.body), this.isAndroid = typeof navigator < "u" ? /Android/i.test(navigator.userAgent) : !1, this.isRTL = !!this.telInput.closest("[dir=rtl]"), this.telInput.dir = "ltr";
     const t = this.options.allowDropdown || this.options.separateDialCode;
     this.showSelectedCountryOnLeft = this.isRTL ? !t : t, this.options.separateDialCode && (this.isRTL ? this.originalPaddingRight = this.telInput.style.paddingRight : this.originalPaddingLeft = this.telInput.style.paddingLeft), this.options.i18n = { ...k, ...this.options.i18n };
     const e = new Promise((s, n) => {
@@ -1837,7 +1837,7 @@ class W {
         b
       )), e && (this.selectedDialCode = m(
         "div",
-        { class: "iti__selected-dial-code", "aria-hidden": "true" },
+        { class: "iti__selected-dial-code", "aria-hidden": "true", dir: "ltr" },
         this.selectedCountry
       )), t) {
         const f = r ? "" : "iti--flexible-dropdown-width";
@@ -1914,7 +1914,7 @@ class W {
       );
       e.nodeById[this.id] = s;
       let n = "";
-      this.options.showFlags && (n += `<div class='iti__flag iti__${e.iso2}'></div>`), n += `<span class='iti__country-name'>${e.name}</span>`, n += `<span class='iti__dial-code'>+${e.dialCode}</span>`, s.insertAdjacentHTML("beforeend", n);
+      this.options.showFlags && (n += `<div class='iti__flag iti__${e.iso2}'></div>`), n += `<span class='iti__country-name'>${e.name}</span>`, n += `<span class='iti__dial-code' dir='ltr'>+${e.dialCode}</span>`, s.insertAdjacentHTML("beforeend", n);
     }
   }
   //* Set the initial state of the input value and the selected country by:
@@ -2537,7 +2537,7 @@ const G = (h) => {
     attachUtils: G,
     startedLoadingUtilsScript: !1,
     startedLoadingAutoCountry: !1,
-    version: "25.5.1"
+    version: "25.5.2"
   }
 ), Y = {
   __name: "IntlTelInput",

package/vue/build/IntlTelInputWithUtils.mjs

@@ -1698,7 +1698,7 @@ class j2 {
   }
   //* Can't be private as it's called from intlTelInput convenience wrapper.
   _init() {
-    this.options.useFullscreenPopup && (this.options.fixDropdownWidth = !1), this.options.onlyCountries.length === 1 && (this.options.initialCountry = this.options.onlyCountries[0]), this.options.separateDialCode && (this.options.nationalMode = !1), this.options.allowDropdown && !this.options.showFlags && !this.options.separateDialCode && (this.options.nationalMode = !1), this.options.useFullscreenPopup && !this.options.dropdownContainer && (this.options.dropdownContainer = document.body), this.isAndroid = typeof navigator < "u" ? /Android/i.test(navigator.userAgent) : !1, this.isRTL = !!this.telInput.closest("[dir=rtl]");
+    this.options.useFullscreenPopup && (this.options.fixDropdownWidth = !1), this.options.onlyCountries.length === 1 && (this.options.initialCountry = this.options.onlyCountries[0]), this.options.separateDialCode && (this.options.nationalMode = !1), this.options.allowDropdown && !this.options.showFlags && !this.options.separateDialCode && (this.options.nationalMode = !1), this.options.useFullscreenPopup && !this.options.dropdownContainer && (this.options.dropdownContainer = document.body), this.isAndroid = typeof navigator < "u" ? /Android/i.test(navigator.userAgent) : !1, this.isRTL = !!this.telInput.closest("[dir=rtl]"), this.telInput.dir = "ltr";
     const e = this.options.allowDropdown || this.options.separateDialCode;
     this.showSelectedCountryOnLeft = this.isRTL ? !e : e, this.options.separateDialCode && (this.isRTL ? this.originalPaddingRight = this.telInput.style.paddingRight : this.originalPaddingLeft = this.telInput.style.paddingLeft), this.options.i18n = { ...u2, ...this.options.i18n };
     const i = new Promise((o, a) => {
@@ -1837,7 +1837,7 @@ class j2 {
         O
       )), i && (this.selectedDialCode = E(
         "div",
-        { class: "iti__selected-dial-code", "aria-hidden": "true" },
+        { class: "iti__selected-dial-code", "aria-hidden": "true", dir: "ltr" },
         this.selectedCountry
       )), e) {
         const T = g ? "" : "iti--flexible-dropdown-width";
@@ -1914,7 +1914,7 @@ class j2 {
       );
       i.nodeById[this.id] = o;
       let a = "";
-      this.options.showFlags && (a += `<div class='iti__flag iti__${i.iso2}'></div>`), a += `<span class='iti__country-name'>${i.name}</span>`, a += `<span class='iti__dial-code'>+${i.dialCode}</span>`, o.insertAdjacentHTML("beforeend", a);
+      this.options.showFlags && (a += `<div class='iti__flag iti__${i.iso2}'></div>`), a += `<span class='iti__country-name'>${i.name}</span>`, a += `<span class='iti__dial-code' dir='ltr'>+${i.dialCode}</span>`, o.insertAdjacentHTML("beforeend", a);
     }
   }
   //* Set the initial state of the input value and the selected country by:
@@ -2537,7 +2537,7 @@ const W2 = (I) => {
     attachUtils: W2,
     startedLoadingUtilsScript: !1,
     startedLoadingAutoCountry: !1,
-    version: "25.5.1"
+    version: "25.5.2"
   }
 );
 (function() {