@intl-tel-input/vue 29.3.0 → 29.4.1

package/README.md

@@ -1,6 +1,6 @@
 # Vue component for intl-tel-input
 
-For entering, formatting, and validating international telephone numbers.
+For entering, formatting, and validating international telephone numbers. Requires Vue 3.
 
 [Explore docs »](https://intl-tel-input.com/docs/vue-component)
 

package/dist/{IntlTelInput-B6i9DFRz.js → IntlTelInput-DGKXDaPb.js}

@@ -1350,6 +1350,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 	excludeCountries: null,
 	matchDropdownWidth: !0,
 	formatAsYouType: !0,
+	fullscreenParent: null,
 	hiddenInputs: null,
 	uiTranslations: {},
 	initialCountry: "",
@@ -1465,8 +1466,9 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 				t[n] = r;
 				break;
 			case "dropdownParent":
+			case "fullscreenParent":
 				if (r !== null && !ae(r)) {
-					W("dropdownParent", "an HTMLElement or null", r);
+					W(n, "an HTMLElement or null", r);
 					break;
 				}
 				t[n] = r;
@@ -1789,7 +1791,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 			id: `iti-${this.#t}__country-listbox`,
 			role: "listbox",
 			[R.LABEL]: r.countryListAriaLabel
-		}, this.#m), this.#L(), n && this.#U(), o) {
+		}, this.#m), n || this.#v.setAttribute("tabindex", "0"), this.#L(), n && this.#U(), o) {
 			let e = pe({
 				iti: !0,
 				"iti--detached-country-selector": !0,
@@ -1801,8 +1803,8 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 		} else this.#l.appendChild(this.#m);
 	}
 	#N() {
-		let { countrySelectorMode: e, dropdownParent: t } = this.#e;
-		return e === I.FULLSCREEN ? document.body : e === I.DROPDOWN ? t : null;
+		let { countrySelectorMode: e, dropdownParent: t, fullscreenParent: n } = this.#e;
+		return e === I.FULLSCREEN ? n ?? document.body : e === I.DROPDOWN ? t : null;
 	}
 	#P() {
 		let { uiTranslations: e, searchInputClass: t } = this.#e, n = K("div", { class: this.#k("searchWrapper", "iti__search-input-wrapper") }, this.#m);
@@ -1858,7 +1860,6 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 			let r = this.#i[n], i = K("li", {
 				id: `iti-${this.#t}__item-${r.iso2}`,
 				class: t,
-				tabindex: "-1",
 				role: "option",
 				[R.SELECTED]: "false"
 			});
@@ -1919,7 +1920,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 			let n = xe.toAscii(e);
 			t = ye(this.#i, this.#a, n);
 		}
-		this.#ae(t);
+		this.#oe(t);
 	}
 	prefillSearchWithPlus() {
 		this.#g.value = "+", this.#g.focus(), this.#W("");
@@ -1940,13 +1941,14 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 		let t = this.#v, 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);
 	}
-	#Y(e, t = !0) {
+	#Y() {
+		return this.#e.countrySearch ? this.#g : this.#v;
+	}
+	#X(e, t = !0) {
 		if (this.#T?.classList.remove(v.HIGHLIGHT), e) {
-			if (e.classList.add(v.HIGHLIGHT), this.#e.countrySearch) {
-				let t = e.getAttribute("id") || "";
-				this.#g.setAttribute(R.ACTIVE_DESCENDANT, t);
-			}
-			t && this.#J(e), this.#T = e;
+			e.classList.add(v.HIGHLIGHT);
+			let n = e.getAttribute("id") || "";
+			this.#Y().setAttribute(R.ACTIVE_DESCENDANT, n), t && this.#J(e), this.#T = e;
 		} else this.#T = null;
 	}
 	bindHiddenInputSubmitListener(e, t, n) {
@@ -1972,124 +1974,126 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 		}, { signal: e });
 	}
 	openCountrySelector(e, t) {
-		let { countrySearch: n, dropdownAlwaysOpen: r } = this.#e;
-		if (this.#D = new AbortController(), this.#e.countrySelectorMode !== I.FULLSCREEN && this.#V(), this.ensureDropdownWidthSet(), this.#C) this.#se();
+		let { dropdownAlwaysOpen: n } = this.#e;
+		if (this.#D = new AbortController(), this.#e.countrySelectorMode !== I.FULLSCREEN && this.#V(), this.ensureDropdownWidthSet(), this.#C) this.#ce();
 		else {
-			let e = this.#oe(), t = this.telInputEl.offsetHeight + C.DROPDOWN_MARGIN;
+			let e = this.#se(), t = this.telInputEl.offsetHeight + C.DROPDOWN_MARGIN;
 			e ? this.#m.style.top = `${t}px` : this.#m.style.bottom = `${t}px`;
 		}
 		this.#m.classList.remove(v.HIDE), this.#u.setAttribute(R.EXPANDED, "true");
-		let i = this.#w ?? this.#v.firstElementChild;
-		i && this.#Y(i), n && !r && this.#g.focus(), this.#e.countrySelectorMode === I.FULLSCREEN && this.#C && window.visualViewport && window.visualViewport.addEventListener("resize", () => {
-			this.#le(), this.#T && this.#J(this.#T);
-		}, { signal: this.#D.signal }), this.#p.classList.add(v.ARROW_UP), this.#X(e, t);
+		let r = this.#w ?? this.#v.firstElementChild;
+		r && this.#X(r), n || this.#Y().focus(), this.#e.countrySelectorMode === I.FULLSCREEN && this.#C && window.visualViewport && (this.#ue(), window.visualViewport.addEventListener("resize", () => {
+			this.#ue(), this.#T && this.#J(this.#T);
+		}, { signal: this.#D.signal })), this.#p.classList.add(v.ARROW_UP), this.#Z(e, t);
 	}
-	#X(e, t) {
+	#Z(e, t) {
 		let n = this.#D.signal;
-		this.#Z(n), this.#Q(n, e), this.#e.dropdownAlwaysOpen || this.#$(n, t), this.#ee(n, e, t), this.#e.countrySearch && this.#te(n), this.#e.countrySelectorMode === I.DROPDOWN && this.#e.dropdownParent && !Se && document.addEventListener("scroll", t, {
+		this.#Q(n), this.#$(n, e), this.#e.dropdownAlwaysOpen || this.#ee(n, t), this.#te(n, e, t), this.#e.countrySearch && this.#ne(n), this.#e.countrySelectorMode === I.DROPDOWN && this.#e.dropdownParent && !Se && document.addEventListener("scroll", t, {
 			signal: n,
 			capture: !0,
 			passive: !0
 		});
 	}
-	#Z(e) {
+	#Q(e) {
 		this.#v.addEventListener("mouseover", (e) => {
 			let t = e.target?.closest(`.${v.COUNTRY_ITEM}`);
-			t && this.#Y(t, !1);
+			t && this.#X(t, !1);
 		}, { signal: e });
 	}
-	#Q(e, t) {
+	#$(e, t) {
 		this.#v.addEventListener("click", (e) => {
 			let n = e.target?.closest(`.${v.COUNTRY_ITEM}`);
 			n && t(n);
 		}, { signal: e });
 	}
-	#$(e, t) {
+	#ee(e, t) {
 		setTimeout(() => {
 			document.documentElement.addEventListener("click", (e) => {
 				this.#m.contains(e.target) || t();
 			}, { signal: e });
 		}, 0);
 	}
-	#ee(e, t, n) {
+	#te(e, t, n) {
 		let r = "", i = null, a = (e) => {
 			[
 				y.ARROW_UP,
 				y.ARROW_DOWN,
 				y.ENTER,
 				y.ESC
-			].includes(e.key) && (e.preventDefault(), e.stopPropagation(), e.key === y.ARROW_UP || e.key === y.ARROW_DOWN ? this.#re(e.key) : e.key === y.ENTER && !e.isComposing ? t(this.#T) : e.key === y.ESC && (n(), this.#u.focus())), !this.#e.countrySearch && x.HIDDEN_SEARCH_CHAR.test(e.key) && (e.stopPropagation(), i && clearTimeout(i), r += e.key.toLowerCase(), this.#ne(r), i = setTimeout(() => {
+			].includes(e.key) && (e.preventDefault(), e.stopPropagation(), e.key === y.ARROW_UP || e.key === y.ARROW_DOWN ? this.#ie(e.key) : e.key === y.ENTER && !e.isComposing ? t(this.#T) : e.key === y.ESC && (n(), this.#u.focus())), !this.#e.countrySearch && x.HIDDEN_SEARCH_CHAR.test(e.key) && (e.stopPropagation(), i && clearTimeout(i), r += e.key.toLowerCase(), this.#re(r), i = setTimeout(() => {
 				r = "";
 			}, S.HIDDEN_SEARCH_RESET_MS));
 		};
-		this.#u?.addEventListener("keydown", a, { signal: e }), this.#m?.addEventListener("keydown", a, { signal: e });
+		this.#u?.addEventListener("keydown", a, { signal: e }), this.#m?.addEventListener("keydown", a, { signal: e }), this.#C && this.#m?.addEventListener("keydown", (e) => {
+			e.key === y.TAB && (e.preventDefault(), n(), (e.shiftKey ? this.#u : this.telInputEl).focus());
+		}, { signal: e });
 	}
-	#te(e) {
+	#ne(e) {
 		this.#g.addEventListener("input", () => this.#K(), { signal: e }), this.#_.addEventListener("click", () => this.#q(), { signal: e });
 	}
-	#ne(e) {
+	#re(e) {
 		let t = be(this.#i, this.#a, e);
 		if (t) {
 			let e = this.#E.get(t.iso2);
-			this.#Y(e);
+			this.#X(e);
 		}
 	}
-	#re(e) {
+	#ie(e) {
 		let t = e === y.ARROW_UP ? this.#T?.previousElementSibling : this.#T?.nextElementSibling;
-		!t && this.#v.childElementCount > 1 && (t = e === y.ARROW_UP ? this.#v.lastElementChild : this.#v.firstElementChild), t && this.#Y(t);
+		!t && this.#v.childElementCount > 1 && (t = e === y.ARROW_UP ? this.#v.lastElementChild : this.#v.firstElementChild), t && this.#X(t);
 	}
-	#ie(e) {
+	#ae(e) {
 		if (this.#w && this.#w.dataset[L.ISO2] !== e && (this.#w.setAttribute(R.SELECTED, "false"), this.#w.querySelector(".iti__country-check")?.remove(), this.#w = null), e && !this.#w) {
 			let t = this.#v.querySelector(`[data-iso2="${e}"]`);
 			t && (t.setAttribute(R.SELECTED, "true"), K("span", {
 				class: this.#k("countryCheck", "iti__country-check"),
 				[R.HIDDEN]: "true"
-			}, t).appendChild(_e()), this.#w = t, this.#e.dropdownAlwaysOpen && this.#Y(t));
+			}, t).appendChild(_e()), this.#w = t, this.#e.dropdownAlwaysOpen && this.#X(t));
 		}
 	}
-	#ae(e) {
+	#oe(e) {
 		this.#v.replaceChildren();
 		let t = !0;
 		for (let n of e) {
 			let e = this.#E.get(n.iso2);
-			e && (this.#v.appendChild(e), t &&= (this.#Y(e, !1), !1));
+			e && (this.#v.appendChild(e), t &&= (this.#X(e, !1), !1));
 		}
-		t ? (this.#Y(null), this.#x && this.#x.classList.remove(v.HIDE)) : this.#x && this.#x.classList.add(v.HIDE), this.#v.scrollTop = 0, this.#U();
+		t ? (this.#X(null), this.#x && this.#x.classList.remove(v.HIDE)) : this.#x && this.#x.classList.add(v.HIDE), this.#v.scrollTop = 0, this.#U();
 	}
 	closeCountrySelector() {
 		let { countrySearch: e } = this.#e;
-		this.#D.abort(), this.#D = null, this.#m.classList.add(v.HIDE), this.#u.setAttribute(R.EXPANDED, "false"), e && (this.#g.removeAttribute(R.ACTIVE_DESCENDANT), this.#g.value = "", this.#G(), this.#T &&= (this.#T.classList.remove(v.HIGHLIGHT), null)), this.#p.classList.remove(v.ARROW_UP), this.#C ? (this.#C.remove(), this.#C.style.top = "", this.#C.style.bottom = "", this.#C.style.paddingLeft = "", this.#C.style.paddingRight = "") : (this.#m.style.top = "", this.#m.style.bottom = "");
+		this.#D.abort(), this.#D = null, this.#m.classList.add(v.HIDE), this.#u.setAttribute(R.EXPANDED, "false"), this.#Y().removeAttribute(R.ACTIVE_DESCENDANT), e && (this.#g.value = "", this.#G(), this.#T &&= (this.#T.classList.remove(v.HIGHLIGHT), null)), this.#p.classList.remove(v.ARROW_UP), this.#C ? (this.#C.remove(), this.#C.style.top = "", this.#C.style.bottom = "", this.#C.style.removeProperty("--iti-virtual-keyboard-height"), this.#C.style.paddingLeft = "", this.#C.style.paddingRight = "") : (this.#m.style.top = "", this.#m.style.bottom = "");
 	}
-	#oe() {
+	#se() {
 		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;
 	}
-	#se() {
+	#ce() {
 		let e = this.#e.countrySelectorMode === I.FULLSCREEN, t = this.#N();
 		if (e) {
 			if (window.innerWidth >= C.NARROW_VIEWPORT_WIDTH) {
 				let e = this.telInputEl.getBoundingClientRect();
 				this.#C.style.paddingLeft = `${e.left}px`, this.#C.style.paddingRight = `${window.innerWidth - e.right}px`;
 			}
-		} else this.#ce();
+		} else this.#le();
 		if (!e && !Se) {
 			let e = this.telInputEl.getBoundingClientRect();
-			this.#C.style.left = `${e.left}px`, this.#oe() ? this.#C.style.top = `${e.bottom + C.DROPDOWN_MARGIN}px` : (this.#C.style.top = "unset", this.#C.style.bottom = `${window.innerHeight - e.top + C.DROPDOWN_MARGIN}px`);
+			this.#C.style.left = `${e.left}px`, this.#se() ? this.#C.style.top = `${e.bottom + C.DROPDOWN_MARGIN}px` : (this.#C.style.top = "unset", this.#C.style.bottom = `${window.innerHeight - e.top + C.DROPDOWN_MARGIN}px`);
 		}
 		t.appendChild(this.#C);
 	}
-	#ce() {
+	#le() {
 		if (this.#c) return;
 		this.#c = !0;
 		let e = `--iti-anchor-${this.#t}`, t = getComputedStyle(this.telInputEl).anchorName;
 		this.telInputEl.style.anchorName = t && t !== "none" ? `${t}, ${e}` : e, this.#C.style.positionAnchor = e;
 	}
-	#le() {
-		let e = window.visualViewport;
-		if (!e || !this.#C) return;
-		let t = window.innerHeight - e.height;
-		this.#C.style.bottom = `${t}px`;
+	#ue() {
+		let e = window.visualViewport, t = this.#C;
+		if (!e || !t) return;
+		let n = Math.max(0, t.offsetHeight - e.height);
+		t.style.setProperty("--iti-virtual-keyboard-height", `${n}px`);
 	}
 	isCountrySelectorOpen() {
 		return !this.#m.classList.contains(v.HIDE);
@@ -2113,7 +2117,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 	}
 	setSelectedCountry(e) {
 		let { countrySelectorMode: t, showFlags: n, separateDialCode: r, uiTranslations: i } = this.#e, a = e?.name, o = e?.dialCode, s = e?.iso2 ?? "";
-		if (t !== I.OFF && this.#ie(s), this.#u) {
+		if (t !== I.OFF && this.#ae(s), this.#u) {
 			let e = this.#k("selectedFlag", s && n ? `${v.FLAG} iti__${s}` : `${v.FLAG} ${v.GLOBE}`), t, r, c = null;
 			s ? (r = a, t = i.selectedCountryAriaLabel.replace("${countryName}", a).replace("${dialCode}", `+${o}`), n || (c = J())) : (r = i.noCountrySelected, t = i.noCountrySelected, c = J()), this.#d.className = e, this.#u.setAttribute("title", r), this.#u.setAttribute(R.LABEL, t), c ? this.#d.replaceChildren(c) : this.#d.replaceChildren();
 		}
@@ -2730,7 +2734,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 	},
 	startedLoadingUtils: !1,
 	startedLoadingAutoCountry: !1,
-	version: "29.3.0",
+	version: "29.4.1",
 	NUMBER_FORMAT: N,
 	NUMBER_TYPE: P,
 	VALIDATION_ERROR: F,
@@ -2771,6 +2775,7 @@ var p = new Set(f.map((e) => e.iso2)), m = (e) => p.has(e), h = f, g = {
 		excludeCountries: {},
 		matchDropdownWidth: { type: Boolean },
 		formatAsYouType: { type: Boolean },
+		fullscreenParent: {},
 		hiddenInputs: {},
 		uiTranslations: {},
 		initialCountry: {},

package/dist/IntlTelInput.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "./IntlTelInput-B6i9DFRz.js";
+import { n as e, t } from "./IntlTelInput-DGKXDaPb.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-B6i9DFRz.js";
+import { n as e, t } from "./IntlTelInput-DGKXDaPb.js";
 //#region packages/core/dist/js/utils.js
 var n = {};
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intl-tel-input/vue",
-  "version": "29.3.0",
+  "version": "29.4.1",
   "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": "^29.3.0"
+    "intl-tel-input": "^29.4.1"
   },
   "peerDependencies": {
     "vue": "^3.0.0"