@intl-tel-input/vue 28.0.6 → 28.0.7

package/dist/{IntlTelInput-BkMX88Pm.js → IntlTelInput-Dy-tkOBK.js}

@@ -1661,6 +1661,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 	#w = null;
 	#T = /* @__PURE__ */ new Map();
 	#E = null;
+	#D;
 	telInputEl;
 	hadInitialPlaceholder;
 	constructor(e, t, n) {
@@ -1675,12 +1676,13 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 	}
 	buildMarkup(e, t) {
 		this.#i = e, this.#a = t, this.telInputEl.classList.add("iti__tel-input"), this.telInputEl.hasAttribute("type") || this.telInputEl.setAttribute("type", "tel"), this.telInputEl.hasAttribute("autocomplete") || this.telInputEl.setAttribute("autocomplete", "tel"), this.telInputEl.hasAttribute("inputmode") || this.telInputEl.setAttribute("inputmode", "tel");
-		let n = this.#D();
-		this.#O(n), n.appendChild(this.telInputEl), this.#j(), this.#M(n), this.ensureDropdownWidthSet();
+		let n = this.#O();
+		this.#k(n), n.appendChild(this.telInputEl), this.#M(), this.#I(), this.#N(n), this.ensureDropdownWidthSet();
 	}
-	#D() {
+	#O() {
 		let { allowDropdown: e, showFlags: t, containerClass: n, useFullscreenPopup: r } = this.#e, i = q("div", { class: K({
 			iti: !0,
+			"iti--input-container": !0,
 			"iti--allow-dropdown": e,
 			"iti--show-flags": t,
 			"iti--inline-dropdown": !r,
@@ -1688,7 +1690,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 		}) });
 		return this.#n && i.setAttribute("dir", "ltr"), this.telInputEl.before(i), i;
 	}
-	#O(e) {
+	#k(e) {
 		let { allowDropdown: t, separateDialCode: n, showFlags: r } = this.#e;
 		if (!t && !r && !n) return;
 		this.#c = q("div", { class: `iti__country-container ${_.V_HIDE}` }, e), t ? (this.#l = q("button", {
@@ -1703,7 +1705,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 		this.#u = q("div", { class: _.FLAG }, i), t && (this.#f = q("div", {
 			class: "iti__arrow",
 			[I.HIDDEN]: "true"
-		}, i)), n && (this.#d = q("div", { class: "iti__selected-dial-code" }, this.#l)), t && this.#k();
+		}, i)), n && (this.#d = q("div", { class: "iti__selected-dial-code" }, this.#l)), t && this.#A();
 	}
 	ensureDropdownWidthSet() {
 		let { fixDropdownWidth: e, allowDropdown: t } = this.#e;
@@ -1711,19 +1713,19 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 		let n = this.telInputEl.offsetWidth;
 		n > 0 && (this.#p.style.width = `${n}px`);
 	}
-	#k() {
+	#A() {
 		let { fixDropdownWidth: e, useFullscreenPopup: t, countrySearch: n, i18n: r, dropdownContainer: i, containerClass: a } = this.#e, o = e ? "" : "iti--flexible-dropdown-width";
 		this.#p = q("div", {
 			id: `iti-${this.#t}__dropdown-content`,
 			class: `iti__dropdown-content ${_.HIDE} ${o}`,
 			role: "dialog",
 			[I.MODAL]: "true"
-		}), this.#n && this.#p.setAttribute("dir", "rtl"), n && this.#A(), this.#_ = q("ul", {
+		}), this.#n && this.#p.setAttribute("dir", "rtl"), n && this.#j(), this.#_ = q("ul", {
 			class: "iti__country-list",
 			id: `iti-${this.#t}__country-listbox`,
 			role: "listbox",
 			[I.LABEL]: r.countryListAriaLabel
-		}, this.#p), this.#N(), n && this.#R(), t || (this.#s = this.#L(), n && (this.#p.style.height = `${this.#s}px`)), i ? (this.#S = q("div", { class: K({
+		}, this.#p), this.#P(), n && this.#B(), t || (this.#s = this.#z(), n && (this.#p.style.height = `${this.#s}px`)), i ? (this.#S = q("div", { class: K({
 			iti: !0,
 			"iti--container": !0,
 			"iti--fullscreen-popup": t,
@@ -1731,7 +1733,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 			[a]: !!a
 		}) }), this.#S.appendChild(this.#p)) : this.#c.appendChild(this.#p);
 	}
-	#A() {
+	#j() {
 		let { i18n: e, searchInputClass: t } = this.#e, n = q("div", { class: "iti__search-input-wrapper" }, this.#p);
 		this.#m = q("span", {
 			class: "iti__search-icon",
@@ -1757,10 +1759,10 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 			[I.HIDDEN]: "true"
 		}, this.#p), this.#b.textContent = e.searchEmptyState ?? null;
 	}
-	#j() {
-		this.#c && (this.#P(), this.#c.classList.remove(_.V_HIDE));
+	#M() {
+		this.#c && (this.#F(), this.#c.classList.remove(_.V_HIDE));
 	}
-	#M(e) {
+	#N(e) {
 		let { hiddenInput: t } = this.#e;
 		if (!t) return;
 		let n = t(this.telInputEl.getAttribute("name") || "");
@@ -1779,7 +1781,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 			}), e.appendChild(this.#y));
 		}
 	}
-	#N() {
+	#P() {
 		let e = document.createDocumentFragment();
 		for (let t = 0; t < this.#i.length; t++) {
 			let n = this.#i[t], r = K({ [_.COUNTRY_ITEM]: !0 }), i = q("li", {
@@ -1797,13 +1799,18 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 		}
 		this.#_.appendChild(e);
 	}
-	#P() {
+	#F() {
 		if (this.#l) {
-			let e = this.#e.separateDialCode ? S.FALLBACK_SELECTED_WITH_DIAL_WIDTH : S.FALLBACK_SELECTED_NO_DIAL_WIDTH, t = (this.#l.offsetWidth || this.#I() || e) + S.INPUT_PADDING_EXTRA_LEFT;
+			let e = this.#e.separateDialCode ? S.FALLBACK_SELECTED_WITH_DIAL_WIDTH : S.FALLBACK_SELECTED_NO_DIAL_WIDTH, t = (this.#l.offsetWidth || this.#R() || e) + S.INPUT_PADDING_EXTRA_LEFT;
 			this.telInputEl.style.paddingLeft = `${t}px`;
 		}
 	}
-	static #F() {
+	#I() {
+		!this.#l || typeof ResizeObserver > "u" || (this.#D = new ResizeObserver(() => {
+			this.#l?.offsetWidth && this.#F();
+		}), this.#D.observe(this.#l));
+	}
+	static #L() {
 		let e;
 		try {
 			e = window.top.document.body;
@@ -1812,9 +1819,9 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 		}
 		return e;
 	}
-	#I() {
+	#R() {
 		if (!this.telInputEl.parentNode) return 0;
-		let t = e.#F(), n = this.telInputEl.parentNode.cloneNode(!1);
+		let t = e.#L(), n = this.telInputEl.parentNode.cloneNode(!1);
 		n.style.visibility = "hidden", t.appendChild(n);
 		let r = this.#c.cloneNode();
 		n.appendChild(r);
@@ -1823,53 +1830,53 @@ 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;
 	}
-	#L() {
-		let t = e.#F();
+	#z() {
+		let t = e.#L();
 		this.#p.classList.remove(_.HIDE);
 		let n = q("div", { class: "iti iti--inline-dropdown" });
 		n.appendChild(this.#p), n.style.visibility = "hidden", t.appendChild(n);
 		let r = this.#p.offsetHeight;
 		return t.removeChild(n), n.style.visibility = "", this.#p.classList.add(_.HIDE), r > 0 ? r : S.FALLBACK_DROPDOWN_HEIGHT;
 	}
-	#R() {
+	#B() {
 		let { i18n: e } = this.#e, t = this.#_.childElementCount;
 		this.#x.textContent = e.searchSummaryAria(t);
 	}
-	#z(e) {
+	#V(e) {
 		let t;
 		if (e === "") t = this.#i;
 		else {
 			let n = ge.toAscii(e);
 			t = me(this.#i, this.#a, n);
 		}
-		this.#ee(t);
+		this.#ne(t);
 	}
 	prefillSearchWithPlus() {
-		this.#h.value = "+", this.#h.focus(), this.#z("");
+		this.#h.value = "+", this.#h.focus(), this.#V("");
 	}
-	#B() {
+	#H() {
 		let e = this.#h.value.trim();
-		this.#z(e), this.#h.value ? this.#g.classList.remove(_.HIDE) : this.#g.classList.add(_.HIDE);
+		this.#V(e), this.#h.value ? this.#g.classList.remove(_.HIDE) : this.#g.classList.add(_.HIDE);
 	}
-	#V() {
+	#U() {
 		this.#o && clearTimeout(this.#o), this.#o = setTimeout(() => {
-			this.#B(), this.#o = null;
+			this.#H(), this.#o = null;
 		}, x.SEARCH_DEBOUNCE_MS);
 	}
-	#H() {
-		this.#h.value = "", this.#h.focus(), this.#B();
+	#W() {
+		this.#h.value = "", this.#h.focus(), this.#H();
 	}
-	#U(e) {
+	#G(e) {
 		let t = this.#_, n = t.getBoundingClientRect(), r = e.getBoundingClientRect(), i = r.top - n.top + t.scrollTop;
 		r.top < n.top ? t.scrollTop = i : r.bottom > n.bottom && (t.scrollTop = i - n.height + r.height);
 	}
-	#W(e, t = !0) {
+	#K(e, t = !0) {
 		if (this.#w?.classList.remove(_.HIGHLIGHT), e) {
 			if (e.classList.add(_.HIGHLIGHT), this.#e.countrySearch) {
 				let t = e.getAttribute("id") || "";
 				this.#h.setAttribute(I.ACTIVE_DESCENDANT, t);
 			}
-			t && this.#U(e), this.#w = e;
+			t && this.#G(e), this.#w = e;
 		} else this.#w = null;
 	}
 	bindHiddenInputSubmitListener(e, t, n) {
@@ -1896,41 +1903,41 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 	}
 	openDropdown(e, t) {
 		let { countrySearch: n, dropdownAlwaysOpen: r, dropdownContainer: i } = this.#e;
-		if (this.#E = new AbortController(), this.ensureDropdownWidthSet(), i) this.#ne();
+		if (this.#E = new AbortController(), this.ensureDropdownWidthSet(), i) this.#ie();
 		else {
-			let e = this.#te(), t = this.telInputEl.offsetHeight + S.DROPDOWN_MARGIN;
+			let e = this.#re(), t = this.telInputEl.offsetHeight + S.DROPDOWN_MARGIN;
 			e ? this.#p.style.top = `${t}px` : this.#p.style.bottom = `${t}px`;
 		}
 		this.#p.classList.remove(_.HIDE), this.#l.setAttribute(I.EXPANDED, "true");
 		let a = this.#C ?? this.#_.firstElementChild;
-		a && this.#W(a), n && !r && this.#h.focus(), this.#e.useFullscreenPopup && this.#S && window.visualViewport && window.visualViewport.addEventListener("resize", () => {
-			this.#re(), this.#w && this.#U(this.#w);
-		}, { signal: this.#E.signal }), this.#f.classList.add(_.ARROW_UP), this.#G(e, t);
+		a && this.#K(a), n && !r && this.#h.focus(), this.#e.useFullscreenPopup && this.#S && window.visualViewport && window.visualViewport.addEventListener("resize", () => {
+			this.#ae(), this.#w && this.#G(this.#w);
+		}, { signal: this.#E.signal }), this.#f.classList.add(_.ARROW_UP), this.#q(e, t);
 	}
-	#G(e, t) {
+	#q(e, t) {
 		let n = this.#E.signal;
-		this.#K(n), this.#q(n, e), this.#e.dropdownAlwaysOpen || this.#J(n, t), this.#Y(n, e, t), this.#e.countrySearch && this.#X(n), !this.#e.useFullscreenPopup && this.#e.dropdownContainer && window.addEventListener("scroll", t, { signal: n });
+		this.#J(n), this.#Y(n, e), this.#e.dropdownAlwaysOpen || this.#X(n, t), this.#Z(n, e, t), this.#e.countrySearch && this.#Q(n), !this.#e.useFullscreenPopup && this.#e.dropdownContainer && window.addEventListener("scroll", t, { signal: n });
 	}
-	#K(e) {
+	#J(e) {
 		this.#_.addEventListener("mouseover", (e) => {
 			let t = e.target?.closest(`.${_.COUNTRY_ITEM}`);
-			t && this.#W(t, !1);
+			t && this.#K(t, !1);
 		}, { signal: e });
 	}
-	#q(e, t) {
+	#Y(e, t) {
 		this.#_.addEventListener("click", (e) => {
 			let n = e.target?.closest(`.${_.COUNTRY_ITEM}`);
 			n && t(n);
 		}, { signal: e });
 	}
-	#J(e, t) {
+	#X(e, t) {
 		setTimeout(() => {
 			document.documentElement.addEventListener("click", (e) => {
 				this.#p.contains(e.target) || t();
 			}, { signal: e });
 		}, 0);
 	}
-	#Y(e, t, n) {
+	#Z(e, t, n) {
 		let r = "", i = null;
 		document.addEventListener("keydown", (e) => {
 			[
@@ -1938,53 +1945,53 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 				v.ARROW_DOWN,
 				v.ENTER,
 				v.ESC
-			].includes(e.key) && (e.preventDefault(), e.stopPropagation(), e.key === v.ARROW_UP || e.key === v.ARROW_DOWN ? this.#Q(e.key) : e.key === v.ENTER && !e.isComposing ? t(this.#w) : e.key === v.ESC && (n(), this.#l.focus())), !this.#e.countrySearch && e.target !== this.telInputEl && b.HIDDEN_SEARCH_CHAR.test(e.key) && (e.stopPropagation(), i && clearTimeout(i), r += e.key.toLowerCase(), this.#Z(r), i = setTimeout(() => {
+			].includes(e.key) && (e.preventDefault(), e.stopPropagation(), e.key === v.ARROW_UP || e.key === v.ARROW_DOWN ? this.#ee(e.key) : e.key === v.ENTER && !e.isComposing ? t(this.#w) : e.key === v.ESC && (n(), this.#l.focus())), !this.#e.countrySearch && e.target !== this.telInputEl && b.HIDDEN_SEARCH_CHAR.test(e.key) && (e.stopPropagation(), i && clearTimeout(i), r += e.key.toLowerCase(), this.#$(r), i = setTimeout(() => {
 				r = "";
 			}, x.HIDDEN_SEARCH_RESET_MS));
 		}, { signal: e });
 	}
-	#X(e) {
-		this.#h.addEventListener("input", () => this.#V(), { signal: e }), this.#g.addEventListener("click", () => this.#H(), { signal: e });
+	#Q(e) {
+		this.#h.addEventListener("input", () => this.#U(), { signal: e }), this.#g.addEventListener("click", () => this.#W(), { signal: e });
 	}
-	#Z(e) {
+	#$(e) {
 		let t = he(this.#i, this.#a, e);
 		if (t) {
 			let e = this.#T.get(t.iso2);
-			this.#W(e);
+			this.#K(e);
 		}
 	}
-	#Q(e) {
+	#ee(e) {
 		let t = e === v.ARROW_UP ? this.#w?.previousElementSibling : this.#w?.nextElementSibling;
-		!t && this.#_.childElementCount > 1 && (t = e === v.ARROW_UP ? this.#_.lastElementChild : this.#_.firstElementChild), t && this.#W(t);
+		!t && this.#_.childElementCount > 1 && (t = e === v.ARROW_UP ? this.#_.lastElementChild : this.#_.firstElementChild), t && this.#K(t);
 	}
-	#$(e) {
+	#te(e) {
 		if (this.#C && this.#C.dataset[F.ISO2] !== e && (this.#C.setAttribute(I.SELECTED, "false"), this.#C.querySelector(".iti__country-check")?.remove(), this.#C = null), e && !this.#C) {
 			let t = this.#_.querySelector(`[data-iso2="${e}"]`);
 			t && (t.setAttribute(I.SELECTED, "true"), q("span", {
 				class: "iti__country-check",
 				[I.HIDDEN]: "true"
-			}, t).appendChild(de()), this.#C = t, this.#e.dropdownAlwaysOpen && this.#W(t));
+			}, t).appendChild(de()), this.#C = t, this.#e.dropdownAlwaysOpen && this.#K(t));
 		}
 	}
-	#ee(e) {
+	#ne(e) {
 		this.#_.replaceChildren();
 		let t = !0;
 		for (let n of e) {
 			let e = this.#T.get(n.iso2);
-			e && (this.#_.appendChild(e), t &&= (this.#W(e, !1), !1));
+			e && (this.#_.appendChild(e), t &&= (this.#K(e, !1), !1));
 		}
-		t ? (this.#W(null), this.#b && this.#b.classList.remove(_.HIDE)) : this.#b && this.#b.classList.add(_.HIDE), this.#_.scrollTop = 0, this.#R();
+		t ? (this.#K(null), this.#b && this.#b.classList.remove(_.HIDE)) : this.#b && this.#b.classList.add(_.HIDE), this.#_.scrollTop = 0, this.#B();
 	}
 	closeDropdown() {
 		let { countrySearch: e, dropdownContainer: t } = this.#e;
-		this.#E.abort(), this.#E = null, this.#p.classList.add(_.HIDE), this.#l.setAttribute(I.EXPANDED, "false"), e && (this.#h.removeAttribute(I.ACTIVE_DESCENDANT), this.#h.value = "", this.#B(), this.#w &&= (this.#w.classList.remove(_.HIGHLIGHT), null)), this.#f.classList.remove(_.ARROW_UP), t ? (this.#S.remove(), this.#S.style.top = "", this.#S.style.bottom = "", this.#S.style.paddingLeft = "", this.#S.style.paddingRight = "") : (this.#p.style.top = "", this.#p.style.bottom = "");
+		this.#E.abort(), this.#E = null, this.#p.classList.add(_.HIDE), this.#l.setAttribute(I.EXPANDED, "false"), e && (this.#h.removeAttribute(I.ACTIVE_DESCENDANT), this.#h.value = "", this.#H(), this.#w &&= (this.#w.classList.remove(_.HIGHLIGHT), null)), this.#f.classList.remove(_.ARROW_UP), t ? (this.#S.remove(), this.#S.style.top = "", this.#S.style.bottom = "", this.#S.style.paddingLeft = "", this.#S.style.paddingRight = "") : (this.#p.style.top = "", this.#p.style.bottom = "");
 	}
-	#te() {
+	#re() {
 		if (this.#e.dropdownAlwaysOpen) return !0;
 		let e = this.telInputEl.getBoundingClientRect(), t = e.top, n = window.innerHeight - e.bottom;
 		return n >= this.#s || n >= t;
 	}
-	#ne() {
+	#ie() {
 		let { dropdownContainer: e, useFullscreenPopup: t } = this.#e;
 		if (t) {
 			if (window.innerWidth >= S.NARROW_VIEWPORT_WIDTH) {
@@ -1993,11 +2000,11 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 			}
 		} else {
 			let e = this.telInputEl.getBoundingClientRect();
-			this.#S.style.left = `${e.left}px`, this.#te() ? this.#S.style.top = `${e.bottom + S.DROPDOWN_MARGIN}px` : (this.#S.style.top = "unset", this.#S.style.bottom = `${window.innerHeight - e.top + S.DROPDOWN_MARGIN}px`);
+			this.#S.style.left = `${e.left}px`, this.#re() ? this.#S.style.top = `${e.bottom + S.DROPDOWN_MARGIN}px` : (this.#S.style.top = "unset", this.#S.style.bottom = `${window.innerHeight - e.top + S.DROPDOWN_MARGIN}px`);
 		}
 		e.appendChild(this.#S);
 	}
-	#re() {
+	#ae() {
 		let e = window.visualViewport;
 		if (!e || !this.#S) return;
 		let t = window.innerHeight - e.height;
@@ -2020,17 +2027,17 @@ 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.#$(s), this.#l) {
+		if (t && this.#te(s), this.#l) {
 			let e = s && n ? `${_.FLAG} iti__${s}` : `${_.FLAG} ${_.GLOBE}`, t, r, c = null;
 			s ? (r = a, t = i.selectedCountryAriaLabel.replace("${countryName}", a).replace("${dialCode}", `+${o}`), n || (c = fe())) : (r = i.noCountrySelected, t = i.noCountrySelected, c = fe()), this.#u.className = e, this.#l.setAttribute("title", r), this.#l.setAttribute(I.LABEL, t), c ? this.#u.replaceChildren(c) : this.#u.replaceChildren();
 		}
 		if (r) {
 			let e = o ? `+${o}` : "";
-			this.#d.textContent = e, this.#P();
+			this.#d.textContent = e, this.#F();
 		}
 	}
 	destroy() {
-		this.telInputEl.iti = void 0, delete this.telInputEl.dataset[F.INSTANCE_ID], this.telInputEl.style.paddingLeft = this.#r;
+		this.telInputEl.iti = void 0, delete this.telInputEl.dataset[F.INSTANCE_ID], this.#D?.disconnect(), this.telInputEl.style.paddingLeft = this.#r;
 		let e = this.telInputEl.parentNode;
 		e && (e.before(this.telInputEl), e.remove()), this.#T.clear();
 	}
@@ -2637,7 +2644,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 	},
 	startedLoadingUtils: !1,
 	startedLoadingAutoCountry: !1,
-	version: "28.0.6",
+	version: "28.0.7",
 	NUMBER_FORMAT: M,
 	NUMBER_TYPE: N,
 	VALIDATION_ERROR: P

package/dist/IntlTelInput.js

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

package/dist/IntlTelInputWithUtils.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "./IntlTelInput-BkMX88Pm.js";
+import { n as e, t } from "./IntlTelInput-Dy-tkOBK.js";
 //#region packages/core/dist/js/utils.js
 var n = {};
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intl-tel-input/vue",
-  "version": "28.0.6",
+  "version": "28.0.7",
   "description": "A Vue component for intl-tel-input, for entering, formatting, and validating international telephone numbers",
   "type": "module",
   "license": "MIT",
@@ -24,7 +24,7 @@
     "README.md"
   ],
   "dependencies": {
-    "intl-tel-input": "^28.0.6"
+    "intl-tel-input": "^28.0.7"
   },
   "peerDependencies": {
     "vue": "^3.0.0"