intl-tel-input 25.10.11 → 25.10.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "25.10.11",
+  "version": "25.10.12",
   "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.10.11/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.10.12/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

@@ -2298,15 +2298,8 @@ var Iti = class _Iti {
   _detectEnvironmentAndLayout() {
     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) {
-      if (this.isRTL) {
-        this.originalPaddingRight = this.telInput.style.paddingRight;
-      } else {
-        this.originalPaddingLeft = this.telInput.style.paddingLeft;
-      }
+      this.originalPaddingLeft = this.telInput.style.paddingLeft;
     }
   }
   _createInitPromises() {
@@ -2377,6 +2370,9 @@ var Iti = class _Iti {
       [containerClass]: Boolean(containerClass)
     });
     const wrapper = createEl("div", { class: parentClasses });
+    if (this.isRTL) {
+      wrapper.setAttribute("dir", "ltr");
+    }
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
     return wrapper;
   }
@@ -2393,11 +2389,6 @@ var Iti = class _Iti {
         { class: "iti__country-container iti__v-hide" },
         wrapper
       );
-      if (this.showSelectedCountryOnLeft) {
-        this.countryContainer.style.left = "0px";
-      } else {
-        this.countryContainer.style.right = "0px";
-      }
       if (allowDropdown) {
         this.selectedCountry = createEl(
           "button",
@@ -2441,7 +2432,7 @@ var Iti = class _Iti {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code", dir: "ltr" },
+          { class: "iti__selected-dial-code" },
           this.selectedCountry
         );
       }
@@ -2466,6 +2457,9 @@ var Iti = class _Iti {
       role: "dialog",
       "aria-modal": "true"
     });
+    if (this.isRTL) {
+      this.dropdownContent.setAttribute("dir", "rtl");
+    }
     if (countrySearch) {
       this._buildSearchUI();
     }
@@ -3303,11 +3297,7 @@ var Iti = class _Iti {
       const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
       const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
       const inputPadding = selectedCountryWidth + 6;
-      if (this.showSelectedCountryOnLeft) {
-        this.telInput.style.paddingLeft = `${inputPadding}px`;
-      } else {
-        this.telInput.style.paddingRight = `${inputPadding}px`;
-      }
+      this.telInput.style.paddingLeft = `${inputPadding}px`;
     }
   }
   //* Update the maximum valid number length for the currently selected country.
@@ -3591,11 +3581,7 @@ var Iti = class _Iti {
     }
     this.telInput.removeAttribute("data-intl-tel-input-id");
     if (separateDialCode) {
-      if (this.isRTL) {
-        this.telInput.style.paddingRight = this.originalPaddingRight;
-      } else {
-        this.telInput.style.paddingLeft = this.originalPaddingLeft;
-      }
+      this.telInput.style.paddingLeft = this.originalPaddingLeft;
     }
     const wrapper = this.telInput.parentNode;
     wrapper?.parentNode?.insertBefore(this.telInput, wrapper);
@@ -3646,11 +3632,19 @@ var Iti = class _Iti {
     }
     return -99;
   }
-  //* Validate the input val (with precise=false)
+  //* Validate the input val using number length only
   isValidNumber() {
+    const { dialCode, iso2 } = this.selectedCountryData;
+    if (dialCode === "44" && intlTelInput.utils) {
+      const number = this._getFullNumber();
+      const coreNumber = intlTelInput.utils.getCoreNumber(number, iso2);
+      if (coreNumber[0] === "7" && coreNumber.length !== 10) {
+        return false;
+      }
+    }
     return this._validateNumber(false);
   }
-  //* Validate the input val (with precise=true)
+  //* Validate the input val with precise validation
   isValidNumberPrecise() {
     return this._validateNumber(true);
   }
@@ -3659,6 +3653,9 @@ var Iti = class _Iti {
   }
   //* Shared internal validation logic to handle alpha character extension rules.
   _validateNumber(precise) {
+    if (!intlTelInput.utils) {
+      return null;
+    }
     if (!this.selectedCountryData.iso2) {
       return false;
     }
@@ -3770,7 +3767,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.10.11"
+    version: "25.10.12"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.d.ts

@@ -178,7 +178,6 @@ declare module "intl-tel-input" {
         private options;
         private hadInitialPlaceholder;
         private isRTL;
-        private showSelectedCountryOnLeft;
         private isAndroid;
         private selectedCountryData;
         private countries;
@@ -203,7 +202,6 @@ declare module "intl-tel-input" {
         private hiddenInputCountry;
         private maxCoreNumberLength;
         private defaultCountry;
-        private originalPaddingRight;
         private originalPaddingLeft;
         private _handleHiddenInputSubmit;
         private _handleLabelClick;

package/react/build/IntlTelInput.js

@@ -2262,15 +2262,8 @@ var Iti = class _Iti {
   _detectEnvironmentAndLayout() {
     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) {
-      if (this.isRTL) {
-        this.originalPaddingRight = this.telInput.style.paddingRight;
-      } else {
-        this.originalPaddingLeft = this.telInput.style.paddingLeft;
-      }
+      this.originalPaddingLeft = this.telInput.style.paddingLeft;
     }
   }
   _createInitPromises() {
@@ -2341,6 +2334,9 @@ var Iti = class _Iti {
       [containerClass]: Boolean(containerClass)
     });
     const wrapper = createEl("div", { class: parentClasses });
+    if (this.isRTL) {
+      wrapper.setAttribute("dir", "ltr");
+    }
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
     return wrapper;
   }
@@ -2357,11 +2353,6 @@ var Iti = class _Iti {
         { class: "iti__country-container iti__v-hide" },
         wrapper
       );
-      if (this.showSelectedCountryOnLeft) {
-        this.countryContainer.style.left = "0px";
-      } else {
-        this.countryContainer.style.right = "0px";
-      }
       if (allowDropdown) {
         this.selectedCountry = createEl(
           "button",
@@ -2405,7 +2396,7 @@ var Iti = class _Iti {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code", dir: "ltr" },
+          { class: "iti__selected-dial-code" },
           this.selectedCountry
         );
       }
@@ -2430,6 +2421,9 @@ var Iti = class _Iti {
       role: "dialog",
       "aria-modal": "true"
     });
+    if (this.isRTL) {
+      this.dropdownContent.setAttribute("dir", "rtl");
+    }
     if (countrySearch) {
       this._buildSearchUI();
     }
@@ -3267,11 +3261,7 @@ var Iti = class _Iti {
       const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
       const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
       const inputPadding = selectedCountryWidth + 6;
-      if (this.showSelectedCountryOnLeft) {
-        this.telInput.style.paddingLeft = `${inputPadding}px`;
-      } else {
-        this.telInput.style.paddingRight = `${inputPadding}px`;
-      }
+      this.telInput.style.paddingLeft = `${inputPadding}px`;
     }
   }
   //* Update the maximum valid number length for the currently selected country.
@@ -3555,11 +3545,7 @@ var Iti = class _Iti {
     }
     this.telInput.removeAttribute("data-intl-tel-input-id");
     if (separateDialCode) {
-      if (this.isRTL) {
-        this.telInput.style.paddingRight = this.originalPaddingRight;
-      } else {
-        this.telInput.style.paddingLeft = this.originalPaddingLeft;
-      }
+      this.telInput.style.paddingLeft = this.originalPaddingLeft;
     }
     const wrapper = this.telInput.parentNode;
     wrapper?.parentNode?.insertBefore(this.telInput, wrapper);
@@ -3610,11 +3596,19 @@ var Iti = class _Iti {
     }
     return -99;
   }
-  //* Validate the input val (with precise=false)
+  //* Validate the input val using number length only
   isValidNumber() {
+    const { dialCode, iso2 } = this.selectedCountryData;
+    if (dialCode === "44" && intlTelInput.utils) {
+      const number = this._getFullNumber();
+      const coreNumber = intlTelInput.utils.getCoreNumber(number, iso2);
+      if (coreNumber[0] === "7" && coreNumber.length !== 10) {
+        return false;
+      }
+    }
     return this._validateNumber(false);
   }
-  //* Validate the input val (with precise=true)
+  //* Validate the input val with precise validation
   isValidNumberPrecise() {
     return this._validateNumber(true);
   }
@@ -3623,6 +3617,9 @@ var Iti = class _Iti {
   }
   //* Shared internal validation logic to handle alpha character extension rules.
   _validateNumber(precise) {
+    if (!intlTelInput.utils) {
+      return null;
+    }
     if (!this.selectedCountryData.iso2) {
       return false;
     }
@@ -3734,7 +3731,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.10.11"
+    version: "25.10.12"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.cjs

@@ -2298,15 +2298,8 @@ var Iti = class _Iti {
   _detectEnvironmentAndLayout() {
     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) {
-      if (this.isRTL) {
-        this.originalPaddingRight = this.telInput.style.paddingRight;
-      } else {
-        this.originalPaddingLeft = this.telInput.style.paddingLeft;
-      }
+      this.originalPaddingLeft = this.telInput.style.paddingLeft;
     }
   }
   _createInitPromises() {
@@ -2377,6 +2370,9 @@ var Iti = class _Iti {
       [containerClass]: Boolean(containerClass)
     });
     const wrapper = createEl("div", { class: parentClasses });
+    if (this.isRTL) {
+      wrapper.setAttribute("dir", "ltr");
+    }
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
     return wrapper;
   }
@@ -2393,11 +2389,6 @@ var Iti = class _Iti {
         { class: "iti__country-container iti__v-hide" },
         wrapper
       );
-      if (this.showSelectedCountryOnLeft) {
-        this.countryContainer.style.left = "0px";
-      } else {
-        this.countryContainer.style.right = "0px";
-      }
       if (allowDropdown) {
         this.selectedCountry = createEl(
           "button",
@@ -2441,7 +2432,7 @@ var Iti = class _Iti {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code", dir: "ltr" },
+          { class: "iti__selected-dial-code" },
           this.selectedCountry
         );
       }
@@ -2466,6 +2457,9 @@ var Iti = class _Iti {
       role: "dialog",
       "aria-modal": "true"
     });
+    if (this.isRTL) {
+      this.dropdownContent.setAttribute("dir", "rtl");
+    }
     if (countrySearch) {
       this._buildSearchUI();
     }
@@ -3303,11 +3297,7 @@ var Iti = class _Iti {
       const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
       const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
       const inputPadding = selectedCountryWidth + 6;
-      if (this.showSelectedCountryOnLeft) {
-        this.telInput.style.paddingLeft = `${inputPadding}px`;
-      } else {
-        this.telInput.style.paddingRight = `${inputPadding}px`;
-      }
+      this.telInput.style.paddingLeft = `${inputPadding}px`;
     }
   }
   //* Update the maximum valid number length for the currently selected country.
@@ -3591,11 +3581,7 @@ var Iti = class _Iti {
     }
     this.telInput.removeAttribute("data-intl-tel-input-id");
     if (separateDialCode) {
-      if (this.isRTL) {
-        this.telInput.style.paddingRight = this.originalPaddingRight;
-      } else {
-        this.telInput.style.paddingLeft = this.originalPaddingLeft;
-      }
+      this.telInput.style.paddingLeft = this.originalPaddingLeft;
     }
     const wrapper = this.telInput.parentNode;
     wrapper?.parentNode?.insertBefore(this.telInput, wrapper);
@@ -3646,11 +3632,19 @@ var Iti = class _Iti {
     }
     return -99;
   }
-  //* Validate the input val (with precise=false)
+  //* Validate the input val using number length only
   isValidNumber() {
+    const { dialCode, iso2 } = this.selectedCountryData;
+    if (dialCode === "44" && intlTelInput.utils) {
+      const number = this._getFullNumber();
+      const coreNumber = intlTelInput.utils.getCoreNumber(number, iso2);
+      if (coreNumber[0] === "7" && coreNumber.length !== 10) {
+        return false;
+      }
+    }
     return this._validateNumber(false);
   }
-  //* Validate the input val (with precise=true)
+  //* Validate the input val with precise validation
   isValidNumberPrecise() {
     return this._validateNumber(true);
   }
@@ -3659,6 +3653,9 @@ var Iti = class _Iti {
   }
   //* Shared internal validation logic to handle alpha character extension rules.
   _validateNumber(precise) {
+    if (!intlTelInput.utils) {
+      return null;
+    }
     if (!this.selectedCountryData.iso2) {
       return false;
     }
@@ -3770,7 +3767,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.10.11"
+    version: "25.10.12"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -2262,15 +2262,8 @@ var Iti = class _Iti {
   _detectEnvironmentAndLayout() {
     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) {
-      if (this.isRTL) {
-        this.originalPaddingRight = this.telInput.style.paddingRight;
-      } else {
-        this.originalPaddingLeft = this.telInput.style.paddingLeft;
-      }
+      this.originalPaddingLeft = this.telInput.style.paddingLeft;
     }
   }
   _createInitPromises() {
@@ -2341,6 +2334,9 @@ var Iti = class _Iti {
       [containerClass]: Boolean(containerClass)
     });
     const wrapper = createEl("div", { class: parentClasses });
+    if (this.isRTL) {
+      wrapper.setAttribute("dir", "ltr");
+    }
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
     return wrapper;
   }
@@ -2357,11 +2353,6 @@ var Iti = class _Iti {
         { class: "iti__country-container iti__v-hide" },
         wrapper
       );
-      if (this.showSelectedCountryOnLeft) {
-        this.countryContainer.style.left = "0px";
-      } else {
-        this.countryContainer.style.right = "0px";
-      }
       if (allowDropdown) {
         this.selectedCountry = createEl(
           "button",
@@ -2405,7 +2396,7 @@ var Iti = class _Iti {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code", dir: "ltr" },
+          { class: "iti__selected-dial-code" },
           this.selectedCountry
         );
       }
@@ -2430,6 +2421,9 @@ var Iti = class _Iti {
       role: "dialog",
       "aria-modal": "true"
     });
+    if (this.isRTL) {
+      this.dropdownContent.setAttribute("dir", "rtl");
+    }
     if (countrySearch) {
       this._buildSearchUI();
     }
@@ -3267,11 +3261,7 @@ var Iti = class _Iti {
       const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
       const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
       const inputPadding = selectedCountryWidth + 6;
-      if (this.showSelectedCountryOnLeft) {
-        this.telInput.style.paddingLeft = `${inputPadding}px`;
-      } else {
-        this.telInput.style.paddingRight = `${inputPadding}px`;
-      }
+      this.telInput.style.paddingLeft = `${inputPadding}px`;
     }
   }
   //* Update the maximum valid number length for the currently selected country.
@@ -3555,11 +3545,7 @@ var Iti = class _Iti {
     }
     this.telInput.removeAttribute("data-intl-tel-input-id");
     if (separateDialCode) {
-      if (this.isRTL) {
-        this.telInput.style.paddingRight = this.originalPaddingRight;
-      } else {
-        this.telInput.style.paddingLeft = this.originalPaddingLeft;
-      }
+      this.telInput.style.paddingLeft = this.originalPaddingLeft;
     }
     const wrapper = this.telInput.parentNode;
     wrapper?.parentNode?.insertBefore(this.telInput, wrapper);
@@ -3610,11 +3596,19 @@ var Iti = class _Iti {
     }
     return -99;
   }
-  //* Validate the input val (with precise=false)
+  //* Validate the input val using number length only
   isValidNumber() {
+    const { dialCode, iso2 } = this.selectedCountryData;
+    if (dialCode === "44" && intlTelInput.utils) {
+      const number = this._getFullNumber();
+      const coreNumber = intlTelInput.utils.getCoreNumber(number, iso2);
+      if (coreNumber[0] === "7" && coreNumber.length !== 10) {
+        return false;
+      }
+    }
     return this._validateNumber(false);
   }
-  //* Validate the input val (with precise=true)
+  //* Validate the input val with precise validation
   isValidNumberPrecise() {
     return this._validateNumber(true);
   }
@@ -3623,6 +3617,9 @@ var Iti = class _Iti {
   }
   //* Shared internal validation logic to handle alpha character extension rules.
   _validateNumber(precise) {
+    if (!intlTelInput.utils) {
+      return null;
+    }
     if (!this.selectedCountryData.iso2) {
       return false;
     }
@@ -3734,7 +3731,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.10.11"
+    version: "25.10.12"
   }
 );
 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.10.11/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.10.12/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.