intl-tel-input 27.0.2 → 27.0.4

package/dist/js/intlTelInputWithUtils.mjs

@@ -2371,7 +2371,6 @@ var UI = class _UI {
     const wrapper = this.#createWrapperAndInsert();
     this.#maybeBuildCountryContainer(wrapper);
     wrapper.appendChild(this.telInput);
-    this.#maybeEnsureDropdownWidthSet();
     this.#maybeUpdateInputPaddingAndReveal();
     this.#maybeBuildHiddenInputs(wrapper);
   }
@@ -2453,7 +2452,7 @@ var UI = class _UI {
       this.#buildDropdownContent();
     }
   }
-  #maybeEnsureDropdownWidthSet() {
+  maybeEnsureDropdownWidthSet() {
     const { fixDropdownWidth, allowDropdown } = this.#options;
     if (!allowDropdown || !fixDropdownWidth || this.#dropdownContent.style.width) {
       return;
@@ -2861,7 +2860,7 @@ var UI = class _UI {
   // UI: Open the dropdown (DOM only).
   openDropdown() {
     const { countrySearch, dropdownAlwaysOpen, dropdownContainer } = this.#options;
-    this.#maybeEnsureDropdownWidthSet();
+    this.maybeEnsureDropdownWidthSet();
     if (dropdownContainer) {
       this.#handleDropdownContainer();
     } else {
@@ -3336,6 +3335,7 @@ var Iti = class _Iti {
     this.#processCountryData();
     this.#ui.generateMarkup(this.#countries);
     this.#setInitialState();
+    this.#ui.maybeEnsureDropdownWidthSet();
     this.#initListeners();
     this.#initRequests();
     if (this.#options.dropdownAlwaysOpen) {
@@ -4502,7 +4502,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "27.0.2"
+    version: "27.0.4"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "27.0.2",
+  "version": "27.0.4",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "type": "module",
   "license": "MIT",

package/react/dist/IntlTelInput.js

@@ -2353,7 +2353,6 @@ var UI = class _UI {
     const wrapper = this.#createWrapperAndInsert();
     this.#maybeBuildCountryContainer(wrapper);
     wrapper.appendChild(this.telInput);
-    this.#maybeEnsureDropdownWidthSet();
     this.#maybeUpdateInputPaddingAndReveal();
     this.#maybeBuildHiddenInputs(wrapper);
   }
@@ -2435,7 +2434,7 @@ var UI = class _UI {
       this.#buildDropdownContent();
     }
   }
-  #maybeEnsureDropdownWidthSet() {
+  maybeEnsureDropdownWidthSet() {
     const { fixDropdownWidth, allowDropdown } = this.#options;
     if (!allowDropdown || !fixDropdownWidth || this.#dropdownContent.style.width) {
       return;
@@ -2843,7 +2842,7 @@ var UI = class _UI {
   // UI: Open the dropdown (DOM only).
   openDropdown() {
     const { countrySearch, dropdownAlwaysOpen, dropdownContainer } = this.#options;
-    this.#maybeEnsureDropdownWidthSet();
+    this.maybeEnsureDropdownWidthSet();
     if (dropdownContainer) {
       this.#handleDropdownContainer();
     } else {
@@ -3304,6 +3303,7 @@ var Iti = class _Iti {
     this.#processCountryData();
     this.#ui.generateMarkup(this.#countries);
     this.#setInitialState();
+    this.#ui.maybeEnsureDropdownWidthSet();
     this.#initListeners();
     this.#initRequests();
     if (this.#options.dropdownAlwaysOpen) {
@@ -4470,7 +4470,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "27.0.2"
+    version: "27.0.4"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/dist/IntlTelInputWithUtils.js

@@ -2353,7 +2353,6 @@ var UI = class _UI {
     const wrapper = this.#createWrapperAndInsert();
     this.#maybeBuildCountryContainer(wrapper);
     wrapper.appendChild(this.telInput);
-    this.#maybeEnsureDropdownWidthSet();
     this.#maybeUpdateInputPaddingAndReveal();
     this.#maybeBuildHiddenInputs(wrapper);
   }
@@ -2435,7 +2434,7 @@ var UI = class _UI {
       this.#buildDropdownContent();
     }
   }
-  #maybeEnsureDropdownWidthSet() {
+  maybeEnsureDropdownWidthSet() {
     const { fixDropdownWidth, allowDropdown } = this.#options;
     if (!allowDropdown || !fixDropdownWidth || this.#dropdownContent.style.width) {
       return;
@@ -2843,7 +2842,7 @@ var UI = class _UI {
   // UI: Open the dropdown (DOM only).
   openDropdown() {
     const { countrySearch, dropdownAlwaysOpen, dropdownContainer } = this.#options;
-    this.#maybeEnsureDropdownWidthSet();
+    this.maybeEnsureDropdownWidthSet();
     if (dropdownContainer) {
       this.#handleDropdownContainer();
     } else {
@@ -3304,6 +3303,7 @@ var Iti = class _Iti {
     this.#processCountryData();
     this.#ui.generateMarkup(this.#countries);
     this.#setInitialState();
+    this.#ui.maybeEnsureDropdownWidthSet();
     this.#initListeners();
     this.#initRequests();
     if (this.#options.dropdownAlwaysOpen) {
@@ -4470,7 +4470,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "27.0.2"
+    version: "27.0.4"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/vue/dist/{IntlTelInput-D7BKnLyx.js → IntlTelInput-DksRM5_Z.js}

@@ -1538,7 +1538,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 	generateMarkup(e) {
 		this.#i = e, this.telInput.classList.add("iti__tel-input"), this.telInput.hasAttribute("type") || this.telInput.setAttribute("type", "tel"), this.telInput.hasAttribute("autocomplete") || this.telInput.setAttribute("autocomplete", "tel"), this.telInput.hasAttribute("inputmode") || this.telInput.setAttribute("inputmode", "tel");
 		let t = this.#g();
-		this.#_(t), t.appendChild(this.telInput), this.#v(), this.#x(), this.#S(t);
+		this.#_(t), t.appendChild(this.telInput), this.#b(), this.#x(t);
 	}
 	#g() {
 		let { allowDropdown: e, showFlags: t, containerClass: n, useFullscreenPopup: r } = this.#e, i = U("div", { class: H({
@@ -1565,27 +1565,27 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 		this.selectedCountryInner = U("div", { class: _.FLAG }, i), t && (this.#c = U("div", {
 			class: "iti__arrow",
 			[j.HIDDEN]: "true"
-		}, i)), n && (this.#s = U("div", { class: "iti__selected-dial-code" }, this.selectedCountry)), t && this.#y();
+		}, i)), n && (this.#s = U("div", { class: "iti__selected-dial-code" }, this.selectedCountry)), t && this.#v();
 	}
-	#v() {
+	maybeEnsureDropdownWidthSet() {
 		let { fixDropdownWidth: e, allowDropdown: t } = this.#e;
 		if (!t || !e || this.#l.style.width) return;
 		let n = this.telInput.offsetWidth;
 		n > 0 && (this.#l.style.width = `${n}px`);
 	}
-	#y() {
+	#v() {
 		let { fixDropdownWidth: e, useFullscreenPopup: t, countrySearch: n, i18n: r, dropdownContainer: i, containerClass: a } = this.#e, o = e ? "" : "iti--flexible-dropdown-width";
 		this.#l = U("div", {
 			id: `iti-${this.#t}__dropdown-content`,
 			class: `iti__dropdown-content ${_.HIDE} ${o}`,
 			role: "dialog",
 			[j.MODAL]: "true"
-		}), this.#n && this.#l.setAttribute("dir", "rtl"), n && this.#b(), this.countryList = U("ul", {
+		}), this.#n && this.#l.setAttribute("dir", "rtl"), n && this.#y(), this.countryList = U("ul", {
 			class: "iti__country-list",
 			id: `iti-${this.#t}__country-listbox`,
 			role: "listbox",
 			[j.LABEL]: r.countryListAriaLabel
-		}, this.#l), this.#C(), n && this.#O(), t || (this.#o = this.#D(), n && (this.#l.style.height = `${this.#o}px`)), i ? (this.#p = U("div", { class: H({
+		}, this.#l), this.#S(), n && this.#D(), t || (this.#o = this.#E(), n && (this.#l.style.height = `${this.#o}px`)), i ? (this.#p = U("div", { class: H({
 			iti: !0,
 			"iti--container": !0,
 			"iti--fullscreen-popup": t,
@@ -1593,7 +1593,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 			[a]: !!a
 		}) }), this.#p.appendChild(this.#l)) : this.countryContainer.appendChild(this.#l);
 	}
-	#b() {
+	#y() {
 		let { i18n: e, searchInputClass: t } = this.#e, n = U("div", { class: "iti__search-input-wrapper" }, this.#l);
 		this.#u = U("span", {
 			class: "iti__search-icon",
@@ -1619,10 +1619,10 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 			[j.HIDDEN]: "true"
 		}, this.#l), this.#d.textContent = e.searchEmptyState ?? null;
 	}
-	#x() {
-		this.countryContainer && (this.#w(), this.countryContainer.classList.remove(_.V_HIDE));
+	#b() {
+		this.countryContainer && (this.#C(), this.countryContainer.classList.remove(_.V_HIDE));
 	}
-	#S(e) {
+	#x(e) {
 		let { hiddenInput: t } = this.#e;
 		if (!t) return;
 		let n = t(this.telInput.getAttribute("name") || "");
@@ -1641,7 +1641,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 			}), e.appendChild(this.hiddenInputCountry));
 		}
 	}
-	#C() {
+	#S() {
 		let e = document.createDocumentFragment();
 		for (let t = 0; t < this.#i.length; t++) {
 			let n = this.#i[t], r = H({ [_.COUNTRY_ITEM]: !0 }), i = U("li", {
@@ -1659,13 +1659,13 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 		}
 		this.countryList.appendChild(e);
 	}
-	#w() {
+	#C() {
 		if (this.selectedCountry) {
-			let e = this.#e.separateDialCode ? C.SANE_SELECTED_WITH_DIAL_WIDTH : C.SANE_SELECTED_NO_DIAL_WIDTH, t = (this.selectedCountry.offsetWidth || this.#E() || e) + C.INPUT_PADDING_EXTRA_LEFT;
+			let e = this.#e.separateDialCode ? C.SANE_SELECTED_WITH_DIAL_WIDTH : C.SANE_SELECTED_NO_DIAL_WIDTH, t = (this.selectedCountry.offsetWidth || this.#T() || e) + C.INPUT_PADDING_EXTRA_LEFT;
 			this.telInput.style.paddingLeft = `${t}px`;
 		}
 	}
-	static #T() {
+	static #w() {
 		let e;
 		try {
 			e = window.top.document.body;
@@ -1674,9 +1674,9 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 		}
 		return e;
 	}
-	#E() {
+	#T() {
 		if (!this.telInput.parentNode) return 0;
-		let t = e.#T(), n = this.telInput.parentNode.cloneNode(!1);
+		let t = e.#w(), n = this.telInput.parentNode.cloneNode(!1);
 		n.style.visibility = "hidden", t.appendChild(n);
 		let r = this.countryContainer.cloneNode();
 		n.appendChild(r);
@@ -1685,33 +1685,33 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 		let a = i.offsetWidth;
 		return t.removeChild(n), a;
 	}
-	#D() {
-		let t = e.#T();
+	#E() {
+		let t = e.#w();
 		this.#l.classList.remove(_.HIDE);
 		let n = U("div", { class: "iti iti--inline-dropdown" });
 		n.appendChild(this.#l), n.style.visibility = "hidden", t.appendChild(n);
 		let r = this.#l.offsetHeight;
 		return t.removeChild(n), n.style.visibility = "", this.#l.classList.add(_.HIDE), r > 0 ? r : C.SANE_DROPDOWN_HEIGHT;
 	}
-	#O() {
+	#D() {
 		let { i18n: e } = this.#e, t = this.countryList.childElementCount;
 		this.#f.textContent = e.searchSummaryAria(t);
 	}
 	filterCountriesByQuery(e) {
 		let t;
-		t = e === "" ? this.#i : ce(this.#i, e), this.#j(t);
+		t = e === "" ? this.#i : ce(this.#i, e), this.#A(t);
 	}
-	#k() {
+	#O() {
 		let e = this.searchInput.value.trim();
 		this.filterCountriesByQuery(e), this.searchInput.value ? this.searchClearButton.classList.remove(_.HIDE) : this.searchClearButton.classList.add(_.HIDE);
 	}
 	handleSearchChange() {
 		this.#a && clearTimeout(this.#a), this.#a = setTimeout(() => {
-			this.#k(), this.#a = null;
+			this.#O(), this.#a = null;
 		}, x.SEARCH_DEBOUNCE_MS);
 	}
 	handleSearchClear() {
-		this.searchInput.value = "", this.searchInput.focus(), this.#k();
+		this.searchInput.value = "", this.searchInput.focus(), this.#O();
 	}
 	scrollCountryListToItem(e) {
 		let t = this.countryList, n = t.getBoundingClientRect(), r = e.getBoundingClientRect(), i = r.top - n.top + t.scrollTop;
@@ -1731,7 +1731,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 		let t = e === v.ARROW_UP ? this.highlightedItem?.previousElementSibling : this.highlightedItem?.nextElementSibling;
 		!t && this.countryList.childElementCount > 1 && (t = e === v.ARROW_UP ? this.countryList.lastElementChild : this.countryList.firstElementChild), t && (this.scrollCountryListToItem(t), this.highlightListItem(t, !1));
 	}
-	#A(e) {
+	#k(e) {
 		if (this.#m && this.#m.dataset.countryCode !== e && (this.#m.setAttribute(j.SELECTED, "false"), this.#m.querySelector(".iti__country-check")?.remove(), this.#m = null), e && !this.#m) {
 			let t = this.countryList.querySelector(`[data-country-code="${e}"]`);
 			if (t) {
@@ -1744,14 +1744,14 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 			}
 		}
 	}
-	#j(e) {
+	#A(e) {
 		this.countryList.replaceChildren();
 		let t = !0;
 		for (let n of e) {
 			let e = n.nodeById[this.#t];
 			e && (this.countryList.appendChild(e), t &&= (this.highlightListItem(e, !1), !1));
 		}
-		t ? (this.highlightListItem(null, !1), this.#d && this.#d.classList.remove(_.HIDE)) : this.#d && this.#d.classList.add(_.HIDE), this.countryList.scrollTop = 0, this.#O();
+		t ? (this.highlightListItem(null, !1), this.#d && this.#d.classList.remove(_.HIDE)) : this.#d && this.#d.classList.add(_.HIDE), this.countryList.scrollTop = 0, this.#D();
 	}
 	destroy() {
 		this.telInput.iti = void 0, delete this.telInput.dataset.intlTelInputId, this.#e.separateDialCode && (this.telInput.style.paddingLeft = this.#r);
@@ -1761,27 +1761,27 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 	}
 	openDropdown() {
 		let { countrySearch: e, dropdownAlwaysOpen: t, dropdownContainer: n } = this.#e;
-		if (this.#v(), n) this.#N();
+		if (this.maybeEnsureDropdownWidthSet(), n) this.#M();
 		else {
-			let e = this.#M(), t = this.telInput.offsetHeight + C.DROPDOWN_MARGIN;
+			let e = this.#j(), t = this.telInput.offsetHeight + C.DROPDOWN_MARGIN;
 			e ? this.#l.style.top = `${t}px` : this.#l.style.bottom = `${t}px`;
 		}
 		this.#l.classList.remove(_.HIDE), this.selectedCountry.setAttribute(j.EXPANDED, "true");
 		let r = this.#m ?? this.countryList.firstElementChild;
 		r && (this.highlightListItem(r, !1), this.scrollCountryListToItem(r)), e && !t && this.searchInput.focus(), this.#e.useFullscreenPopup && this.#p && window.visualViewport && (this.#h = () => {
-			this.#P(), this.highlightedItem && this.scrollCountryListToItem(this.highlightedItem);
+			this.#N(), this.highlightedItem && this.scrollCountryListToItem(this.highlightedItem);
 		}, window.visualViewport.addEventListener("resize", this.#h)), this.#c.classList.add(_.ARROW_UP);
 	}
 	closeDropdown() {
 		let { countrySearch: e, dropdownContainer: t } = this.#e;
-		this.#l.classList.add(_.HIDE), this.selectedCountry.setAttribute(j.EXPANDED, "false"), e && (this.searchInput.removeAttribute(j.ACTIVE_DESCENDANT), this.searchInput.value = "", this.#k(), this.highlightedItem &&= (this.highlightedItem.classList.remove(_.HIGHLIGHT), null)), this.#c.classList.remove(_.ARROW_UP), this.#h && window.visualViewport && (window.visualViewport.removeEventListener("resize", this.#h), this.#h = null), t ? (this.#p.remove(), this.#p.style.top = "", this.#p.style.bottom = "", this.#p.style.paddingLeft = "", this.#p.style.paddingRight = "") : (this.#l.style.top = "", this.#l.style.bottom = "");
+		this.#l.classList.add(_.HIDE), this.selectedCountry.setAttribute(j.EXPANDED, "false"), e && (this.searchInput.removeAttribute(j.ACTIVE_DESCENDANT), this.searchInput.value = "", this.#O(), this.highlightedItem &&= (this.highlightedItem.classList.remove(_.HIGHLIGHT), null)), this.#c.classList.remove(_.ARROW_UP), this.#h && window.visualViewport && (window.visualViewport.removeEventListener("resize", this.#h), this.#h = null), t ? (this.#p.remove(), this.#p.style.top = "", this.#p.style.bottom = "", this.#p.style.paddingLeft = "", this.#p.style.paddingRight = "") : (this.#l.style.top = "", this.#l.style.bottom = "");
 	}
-	#M() {
+	#j() {
 		if (this.#e.dropdownAlwaysOpen) return !0;
 		let e = this.telInput.getBoundingClientRect(), t = e.top, n = window.innerHeight - e.bottom;
 		return n >= this.#o || n >= t;
 	}
-	#N() {
+	#M() {
 		let { dropdownContainer: e, useFullscreenPopup: t } = this.#e;
 		if (t) {
 			if (window.innerWidth >= C.NARROW_VIEWPORT_WIDTH) {
@@ -1790,11 +1790,11 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 			}
 		} else {
 			let e = this.telInput.getBoundingClientRect();
-			this.#p.style.left = `${e.left}px`, this.#M() ? this.#p.style.top = `${e.bottom + C.DROPDOWN_MARGIN}px` : (this.#p.style.top = "unset", this.#p.style.bottom = `${window.innerHeight - e.top + C.DROPDOWN_MARGIN}px`);
+			this.#p.style.left = `${e.left}px`, this.#j() ? this.#p.style.top = `${e.bottom + C.DROPDOWN_MARGIN}px` : (this.#p.style.top = "unset", this.#p.style.bottom = `${window.innerHeight - e.top + C.DROPDOWN_MARGIN}px`);
 		}
 		e.appendChild(this.#p);
 	}
-	#P() {
+	#N() {
 		let e = window.visualViewport;
 		if (!e || !this.#p) return;
 		let t = window.innerHeight - e.height;
@@ -1805,13 +1805,13 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 	}
 	setCountry(e) {
 		let { allowDropdown: t, showFlags: n, separateDialCode: r, i18n: i } = this.#e, a = e?.name, o = e?.dialCode, s = e?.iso2 ?? "";
-		if (t && this.#A(s), this.selectedCountry) {
+		if (t && this.#k(s), this.selectedCountry) {
 			let e = s && n ? `${_.FLAG} iti__${s}` : `${_.FLAG} ${_.GLOBE}`, t, r, c;
 			s ? (r = a, t = i.selectedCountryAriaLabel.replace("${countryName}", a).replace("${dialCode}", `+${o}`), c = n ? "" : W()) : (r = i.noCountrySelected, t = i.noCountrySelected, c = W()), this.selectedCountryInner.className = e, this.selectedCountry.setAttribute("title", r), this.selectedCountry.setAttribute(j.LABEL, t), this.selectedCountryInner.innerHTML = c;
 		}
 		if (r) {
 			let e = o ? `+${o}` : "";
-			this.#s.textContent = e, this.#w();
+			this.#s.textContent = e, this.#C();
 		}
 	}
 }, pe = (e) => {
@@ -1992,7 +1992,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 		return i && (this.#h = X()), a && (this.#g = X()), Promise.all([this.#h?.promise, this.#g?.promise]).then(() => {});
 	}
 	#b() {
-		this.#f = new AbortController(), this.#x(), this.#e.generateMarkup(this.#r), this.#S(), this.#C(), this.#E(), this.#t.dropdownAlwaysOpen && this.#F();
+		this.#f = new AbortController(), this.#x(), this.#e.generateMarkup(this.#r), this.#S(), this.#e.maybeEnsureDropdownWidthSet(), this.#C(), this.#E(), this.#t.dropdownAlwaysOpen && this.#F();
 	}
 	#x() {
 		me(this.#r, this.#t), ge(this.#r, this.#t), _e(this.#r);
@@ -2464,7 +2464,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 	},
 	startedLoadingUtilsScript: !1,
 	startedLoadingAutoCountry: !1,
-	version: "27.0.2"
+	version: "27.0.4"
 }), $ = Q, we = /* @__PURE__ */ n({
 	inheritAttrs: !1,
 	__name: "IntlTelInput",

package/vue/dist/IntlTelInput.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "./IntlTelInput-D7BKnLyx.js";
+import { n as e, t } from "./IntlTelInput-DksRM5_Z.js";
 //#region vue/src/index.ts
 var n = t;
 //#endregion

package/vue/dist/IntlTelInputWithUtils.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "./IntlTelInput-D7BKnLyx.js";
+import { n as e, t } from "./IntlTelInput-DksRM5_Z.js";
 //#region dist/js/utils.js
 var n = {};
 //#endregion