intl-tel-input 25.10.0 → 25.10.3

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.10.0/build/css/intlTelInput.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.3/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.10.0/build/js/intlTelInput.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.3/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.10.0/build/js/utils.js"),
+      loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.3/build/js/utils.js"),
     });
   </script>
   ```
@@ -326,7 +326,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.10.0/build/js/utils.js"),
+  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.3/build/js/utils.js"),
 });
 
 // (B) import utils module from your own hosted version of utils.js
@@ -610,7 +610,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.10.0/build/js/utils.js"),
+  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.3/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.10.0/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.10.3/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

@@ -1921,7 +1921,12 @@ var Iti = class _Iti {
     const wrapper = createEl("div", { class: parentClasses });
     (_a = this.telInput.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(wrapper, this.telInput);
     if (allowDropdown || showFlags || separateDialCode) {
-      this.countryContainer = createEl("div", { class: "iti__country-container" }, wrapper);
+      this.countryContainer = createEl(
+        "div",
+        // visibly hidden until we measure it's width to set the input padding correctly
+        { class: "iti__country-container iti__v-hide" },
+        wrapper
+      );
       if (this.showSelectedCountryOnLeft) {
         this.countryContainer.style.left = "0px";
       } else {
@@ -2032,7 +2037,10 @@ var Iti = class _Iti {
       }
     }
     wrapper.appendChild(this.telInput);
-    this._updateInputPadding();
+    if (this.countryContainer) {
+      this._updateInputPadding();
+      this.countryContainer.classList.remove("iti__v-hide");
+    }
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name") || "";
       const names = hiddenInput(telInputName);
@@ -2674,7 +2682,8 @@ var Iti = class _Iti {
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
     if (this.selectedCountry) {
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+      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`;
@@ -2706,21 +2715,27 @@ var Iti = class _Iti {
       }
     }
   }
-  //* 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
-  //* will definitely exist.
+  //* When input is in a hidden container during init, we cannot calculate the selected country width.
+  //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
+  //* To get the right styling to apply, all we need is a shallow clone of the container,
+  //* and then to inject a deep clone of the selectedCountry element.
   _getHiddenSelectedCountryWidth() {
     if (this.telInput.parentNode) {
+      let body;
+      try {
+        body = window.top.document.body;
+      } catch (e) {
+        body = document.body;
+      }
       const containerClone = this.telInput.parentNode.cloneNode(false);
       containerClone.style.visibility = "hidden";
-      document.body.appendChild(containerClone);
+      body.appendChild(containerClone);
       const countryContainerClone = this.countryContainer.cloneNode();
       containerClone.appendChild(countryContainerClone);
       const selectedCountryClone = this.selectedCountry.cloneNode(true);
       countryContainerClone.appendChild(selectedCountryClone);
       const width = selectedCountryClone.offsetWidth;
-      document.body.removeChild(containerClone);
+      body.removeChild(containerClone);
       return width;
     }
     return 0;
@@ -3104,7 +3119,7 @@ var intlTelInput = Object.assign((input, options) => {
   attachUtils,
   startedLoadingUtilsScript: false,
   startedLoadingAutoCountry: false,
-  version: "25.10.0"
+  version: "25.10.3"
 });
 var intl_tel_input_default = intlTelInput;
 
@@ -3153,10 +3168,19 @@ var IntlTelInputComponent = class {
     }
   }
   ngAfterViewInit() {
-    var _a;
+    var _a, _b;
     if (this.initialValue) {
       (_a = this.iti) === null || _a === void 0 ? void 0 : _a.setNumber(this.initialValue);
     }
+    if (this.disabled) {
+      (_b = this.iti) === null || _b === void 0 ? void 0 : _b.setDisabled(this.disabled);
+    }
+  }
+  ngOnChanges(changes) {
+    var _a;
+    if (changes["disabled"]) {
+      (_a = this.iti) === null || _a === void 0 ? void 0 : _a.setDisabled(this.disabled || false);
+    }
   }
   handleInput() {
     if (!this.iti)
@@ -3198,8 +3222,8 @@ var IntlTelInputComponent = class {
   }
   // ============ ControlValueAccessor Implementation ============
   writeValue(value) {
-    if (this.iti && value) {
-      this.iti.setNumber(value);
+    if (this.iti) {
+      this.iti.setNumber(value || "");
     }
   }
   registerOnChange(fn) {
@@ -3209,7 +3233,9 @@ var IntlTelInputComponent = class {
     this.onTouched = fn;
   }
   setDisabledState(isDisabled) {
+    var _a;
     this.disabled = isDisabled;
+    (_a = this.iti) === null || _a === void 0 ? void 0 : _a.setDisabled(isDisabled);
   }
   // ============ Validator Implementation ============
   validate(control) {
@@ -3254,7 +3280,7 @@ IntlTelInputComponent.\u0275cmp = /* @__PURE__ */ i0.\u0275\u0275defineComponent
     useExisting: forwardRef(() => IntlTelInputComponent),
     multi: true
   }
-])], decls: 2, vars: 1, consts: [["inputRef", ""], ["type", "tel", 3, "input", "blur", "disabled"]], template: function IntlTelInputComponent_Template(rf, ctx) {
+]), i0.\u0275\u0275NgOnChangesFeature], decls: 2, vars: 0, consts: [["inputRef", ""], ["type", "tel", 3, "input", "blur"]], template: function IntlTelInputComponent_Template(rf, ctx) {
   if (rf & 1) {
     const _r1 = i0.\u0275\u0275getCurrentView();
     i0.\u0275\u0275elementStart(0, "input", 1, 0);
@@ -3267,9 +3293,6 @@ IntlTelInputComponent.\u0275cmp = /* @__PURE__ */ i0.\u0275\u0275defineComponent
     });
     i0.\u0275\u0275elementEnd();
   }
-  if (rf & 2) {
-    i0.\u0275\u0275property("disabled", ctx.disabled);
-  }
 }, encapsulation: 2 });
 (() => {
   (typeof ngDevMode === "undefined" || ngDevMode) && i0.\u0275setClassMetadata(IntlTelInputComponent, [{
@@ -3283,7 +3306,6 @@ IntlTelInputComponent.\u0275cmp = /* @__PURE__ */ i0.\u0275\u0275defineComponent
       #inputRef
       (input)="handleInput()"
       (blur)="handleBlur()"
-      [disabled]="disabled"
     />
   `,
       providers: [
@@ -3323,7 +3345,7 @@ IntlTelInputComponent.\u0275cmp = /* @__PURE__ */ i0.\u0275\u0275defineComponent
   }] });
 })();
 (() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && i0.\u0275setClassDebugInfo(IntlTelInputComponent, { className: "IntlTelInputComponent", filePath: "intl-tel-input/angular.ts", lineNumber: 42 });
+  (typeof ngDevMode === "undefined" || ngDevMode) && i0.\u0275setClassDebugInfo(IntlTelInputComponent, { className: "IntlTelInputComponent", filePath: "intl-tel-input/angular.ts", lineNumber: 41 });
 })();
 export {
   IntlTelInputComponent,

package/angular/build/IntlTelInputWithUtils.js

@@ -1921,7 +1921,12 @@ var Iti = class _Iti {
     const wrapper = createEl("div", { class: parentClasses });
     (_a = this.telInput.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(wrapper, this.telInput);
     if (allowDropdown || showFlags || separateDialCode) {
-      this.countryContainer = createEl("div", { class: "iti__country-container" }, wrapper);
+      this.countryContainer = createEl(
+        "div",
+        // visibly hidden until we measure it's width to set the input padding correctly
+        { class: "iti__country-container iti__v-hide" },
+        wrapper
+      );
       if (this.showSelectedCountryOnLeft) {
         this.countryContainer.style.left = "0px";
       } else {
@@ -2032,7 +2037,10 @@ var Iti = class _Iti {
       }
     }
     wrapper.appendChild(this.telInput);
-    this._updateInputPadding();
+    if (this.countryContainer) {
+      this._updateInputPadding();
+      this.countryContainer.classList.remove("iti__v-hide");
+    }
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name") || "";
       const names = hiddenInput(telInputName);
@@ -2674,7 +2682,8 @@ var Iti = class _Iti {
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
     if (this.selectedCountry) {
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+      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`;
@@ -2706,21 +2715,27 @@ var Iti = class _Iti {
       }
     }
   }
-  //* 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
-  //* will definitely exist.
+  //* When input is in a hidden container during init, we cannot calculate the selected country width.
+  //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
+  //* To get the right styling to apply, all we need is a shallow clone of the container,
+  //* and then to inject a deep clone of the selectedCountry element.
   _getHiddenSelectedCountryWidth() {
     if (this.telInput.parentNode) {
+      let body;
+      try {
+        body = window.top.document.body;
+      } catch (e) {
+        body = document.body;
+      }
       const containerClone = this.telInput.parentNode.cloneNode(false);
       containerClone.style.visibility = "hidden";
-      document.body.appendChild(containerClone);
+      body.appendChild(containerClone);
       const countryContainerClone = this.countryContainer.cloneNode();
       containerClone.appendChild(countryContainerClone);
       const selectedCountryClone = this.selectedCountry.cloneNode(true);
       countryContainerClone.appendChild(selectedCountryClone);
       const width = selectedCountryClone.offsetWidth;
-      document.body.removeChild(containerClone);
+      body.removeChild(containerClone);
       return width;
     }
     return 0;
@@ -3104,7 +3119,7 @@ var intlTelInput = Object.assign((input, options) => {
   attachUtils,
   startedLoadingUtilsScript: false,
   startedLoadingAutoCountry: false,
-  version: "25.10.0"
+  version: "25.10.3"
 });
 var intl_tel_input_default = intlTelInput;
 
@@ -9590,10 +9605,19 @@ var IntlTelInputComponent = class {
     }
   }
   ngAfterViewInit() {
-    var _a;
+    var _a, _b;
     if (this.initialValue) {
       (_a = this.iti) === null || _a === void 0 ? void 0 : _a.setNumber(this.initialValue);
     }
+    if (this.disabled) {
+      (_b = this.iti) === null || _b === void 0 ? void 0 : _b.setDisabled(this.disabled);
+    }
+  }
+  ngOnChanges(changes) {
+    var _a;
+    if (changes["disabled"]) {
+      (_a = this.iti) === null || _a === void 0 ? void 0 : _a.setDisabled(this.disabled || false);
+    }
   }
   handleInput() {
     if (!this.iti)
@@ -9635,8 +9659,8 @@ var IntlTelInputComponent = class {
   }
   // ============ ControlValueAccessor Implementation ============
   writeValue(value) {
-    if (this.iti && value) {
-      this.iti.setNumber(value);
+    if (this.iti) {
+      this.iti.setNumber(value || "");
     }
   }
   registerOnChange(fn) {
@@ -9646,7 +9670,9 @@ var IntlTelInputComponent = class {
     this.onTouched = fn;
   }
   setDisabledState(isDisabled) {
+    var _a;
     this.disabled = isDisabled;
+    (_a = this.iti) === null || _a === void 0 ? void 0 : _a.setDisabled(isDisabled);
   }
   // ============ Validator Implementation ============
   validate(control) {
@@ -9691,7 +9717,7 @@ IntlTelInputComponent.\u0275cmp = /* @__PURE__ */ i0.\u0275\u0275defineComponent
     useExisting: forwardRef(() => IntlTelInputComponent),
     multi: true
   }
-])], decls: 2, vars: 1, consts: [["inputRef", ""], ["type", "tel", 3, "input", "blur", "disabled"]], template: function IntlTelInputComponent_Template(rf, ctx) {
+]), i0.\u0275\u0275NgOnChangesFeature], decls: 2, vars: 0, consts: [["inputRef", ""], ["type", "tel", 3, "input", "blur"]], template: function IntlTelInputComponent_Template(rf, ctx) {
   if (rf & 1) {
     const _r1 = i0.\u0275\u0275getCurrentView();
     i0.\u0275\u0275elementStart(0, "input", 1, 0);
@@ -9704,9 +9730,6 @@ IntlTelInputComponent.\u0275cmp = /* @__PURE__ */ i0.\u0275\u0275defineComponent
     });
     i0.\u0275\u0275elementEnd();
   }
-  if (rf & 2) {
-    i0.\u0275\u0275property("disabled", ctx.disabled);
-  }
 }, encapsulation: 2 });
 (() => {
   (typeof ngDevMode === "undefined" || ngDevMode) && i0.\u0275setClassMetadata(IntlTelInputComponent, [{
@@ -9720,7 +9743,6 @@ IntlTelInputComponent.\u0275cmp = /* @__PURE__ */ i0.\u0275\u0275defineComponent
       #inputRef
       (input)="handleInput()"
       (blur)="handleBlur()"
-      [disabled]="disabled"
     />
   `,
       providers: [
@@ -9760,7 +9782,7 @@ IntlTelInputComponent.\u0275cmp = /* @__PURE__ */ i0.\u0275\u0275defineComponent
   }] });
 })();
 (() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && i0.\u0275setClassDebugInfo(IntlTelInputComponent, { className: "IntlTelInputComponent", filePath: "intl-tel-input/angularwithutils.ts", lineNumber: 43 });
+  (typeof ngDevMode === "undefined" || ngDevMode) && i0.\u0275setClassDebugInfo(IntlTelInputComponent, { className: "IntlTelInputComponent", filePath: "intl-tel-input/angularwithutils.ts", lineNumber: 42 });
 })();
 export {
   IntlTelInputComponent,

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

@@ -1,11 +1,11 @@
 import intlTelInput from "../intl-tel-input";
 import { Iti, SomeOptions } from "../intl-tel-input";
-import { OnInit, OnDestroy, ElementRef, EventEmitter, AfterViewInit } from "@angular/core";
+import { OnInit, OnDestroy, ElementRef, EventEmitter, AfterViewInit, OnChanges, SimpleChanges } from "@angular/core";
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from "@angular/forms";
 import * as i0 from "@angular/core";
 export { intlTelInput };
 export declare const PHONE_ERROR_MESSAGES: string[];
-export declare class IntlTelInputComponent implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor, Validator {
+export declare class IntlTelInputComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges, ControlValueAccessor, Validator {
     inputRef: ElementRef<HTMLInputElement>;
     initialValue: string;
     usePreciseValidation: boolean;
@@ -23,6 +23,7 @@ export declare class IntlTelInputComponent implements OnInit, AfterViewInit, OnD
     private onValidatorChange;
     ngOnInit(): void;
     ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     handleInput(): void;
     handleBlur(): void;
     getInstance(): Iti | null;

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

@@ -1,11 +1,11 @@
 import intlTelInput from "./intlTelInputWithUtils";
 import { Iti, SomeOptions } from "../intl-tel-input";
-import { OnInit, OnDestroy, ElementRef, EventEmitter, AfterViewInit } from "@angular/core";
+import { OnInit, OnDestroy, ElementRef, EventEmitter, AfterViewInit, OnChanges, SimpleChanges } from "@angular/core";
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from "@angular/forms";
 import * as i0 from "@angular/core";
 export { intlTelInput };
 export declare const PHONE_ERROR_MESSAGES: string[];
-export declare class IntlTelInputComponent implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor, Validator {
+export declare class IntlTelInputComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges, ControlValueAccessor, Validator {
     inputRef: ElementRef<HTMLInputElement>;
     initialValue: string;
     usePreciseValidation: boolean;
@@ -23,6 +23,7 @@ export declare class IntlTelInputComponent implements OnInit, AfterViewInit, OnD
     private onValidatorChange;
     ngOnInit(): void;
     ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     handleInput(): void;
     handleBlur(): void;
     getInstance(): Iti | null;

package/build/js/data.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v25.10.0
+ * International Telephone Input v25.10.3
  * 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.10.0
+ * International Telephone Input v25.10.3
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */

package/build/js/intlTelInput.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v25.10.0
+ * International Telephone Input v25.10.3
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */
@@ -1982,7 +1982,8 @@ var factoryOutput = (() => {
       if (allowDropdown || showFlags || separateDialCode) {
         this.countryContainer = createEl(
           "div",
-          { class: "iti__country-container" },
+          // visibly hidden until we measure it's width to set the input padding correctly
+          { class: "iti__country-container iti__v-hide" },
           wrapper
         );
         if (this.showSelectedCountryOnLeft) {
@@ -2147,7 +2148,10 @@ var factoryOutput = (() => {
         }
       }
       wrapper.appendChild(this.telInput);
-      this._updateInputPadding();
+      if (this.countryContainer) {
+        this._updateInputPadding();
+        this.countryContainer.classList.remove("iti__v-hide");
+      }
       if (hiddenInput) {
         const telInputName = this.telInput.getAttribute("name") || "";
         const names = hiddenInput(telInputName);
@@ -2807,7 +2811,8 @@ var factoryOutput = (() => {
     //* Update the input padding to make space for the selected country/dial code.
     _updateInputPadding() {
       if (this.selectedCountry) {
-        const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+        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`;
@@ -2844,21 +2849,27 @@ var factoryOutput = (() => {
         }
       }
     }
-    //* 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
-    //* will definitely exist.
+    //* When input is in a hidden container during init, we cannot calculate the selected country width.
+    //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
+    //* To get the right styling to apply, all we need is a shallow clone of the container,
+    //* and then to inject a deep clone of the selectedCountry element.
     _getHiddenSelectedCountryWidth() {
       if (this.telInput.parentNode) {
+        let body;
+        try {
+          body = window.top.document.body;
+        } catch (e) {
+          body = document.body;
+        }
         const containerClone = this.telInput.parentNode.cloneNode(false);
         containerClone.style.visibility = "hidden";
-        document.body.appendChild(containerClone);
+        body.appendChild(containerClone);
         const countryContainerClone = this.countryContainer.cloneNode();
         containerClone.appendChild(countryContainerClone);
         const selectedCountryClone = this.selectedCountry.cloneNode(true);
         countryContainerClone.appendChild(selectedCountryClone);
         const width = selectedCountryClone.offsetWidth;
-        document.body.removeChild(containerClone);
+        body.removeChild(containerClone);
         return width;
       }
       return 0;
@@ -3276,7 +3287,7 @@ var factoryOutput = (() => {
       attachUtils,
       startedLoadingUtilsScript: false,
       startedLoadingAutoCountry: false,
-      version: "25.10.0"
+      version: "25.10.3"
     }
   );
   var intl_tel_input_default = intlTelInput;