@webority/ui-elements 0.6.12 → 0.7.0

package/dist/ui-elements.js

@@ -87,16 +87,18 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	set value(e) {
 		this._value = e == null ? "" : String(e), c(this, this._value);
 		let t = this._readOptions().find((e) => String(e.value) === this._value);
-		t && (this._label = h(t.label)), this._syncInput();
+		this._label = t ? h(t.label) : "", this._syncInput(), this._renderOptions("");
 	}
 	set options(e) {
-		this._optionsProp = Array.isArray(e) ? e : [], this._renderOptions();
+		this._optionsProp = Array.isArray(e) ? e : [];
+		let t = this._readOptions().find((e) => String(e.value) === this._value);
+		t && (this._label = h(t.label)), this._renderOptions(), this._syncInput();
 	}
 	get options() {
 		return this._readOptions();
 	}
 	set loading(e) {
-		this._loading = !!e, this._renderLoading();
+		this._loading = !!e, this._renderLoading(), this._renderOptions();
 	}
 	get loading() {
 		return this._loading;
@@ -108,8 +110,10 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		return Math.max(0, Number(this.getAttribute("min-chars")) || +!!this._remote);
 	}
 	get _debounceMs() {
-		let e = Number(this.getAttribute("debounce"));
-		return Number.isFinite(e) && e >= 0 ? e : 250;
+		let e = this.getAttribute("debounce");
+		if (e == null || e === "") return 250;
+		let t = Number(e);
+		return Number.isFinite(t) && t >= 0 ? t : 250;
 	}
 	_snapshotDeclared() {
 		if (this._declared) return;
@@ -564,24 +568,24 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	"Th",
 	"Fr",
 	"Sa"
-], D = (e) => String(e).padStart(2, "0"), O = (e, t, n) => `${e}-${D(t + 1)}-${D(n)}`, k = (e) => {
+], D = (e) => String(e).padStart(2, "0"), ee = (e, t, n) => `${e}-${D(t + 1)}-${D(n)}`, O = (e) => {
 	let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
 	return t ? {
 		y: +t[1],
 		m: t[2] - 1,
 		d: +t[3]
 	} : null;
-}, A = (e) => {
-	let t = k(e);
+}, k = (e) => {
+	let t = O(e);
 	return t ? `${D(t.d)} ${T[t.m].slice(0, 3)} ${t.y}` : "";
-}, j = (e, t) => new Date(e, t + 1, 0).getDate(), M = (e, t) => {
+}, A = (e, t) => new Date(e, t + 1, 0).getDate(), j = (e, t) => {
 	for (; t < 0;) t += 12, --e;
 	for (; t > 11;) t -= 12, e += 1;
 	return {
 		y: e,
 		m: t
 	};
-}, N = class extends HTMLElement {
+}, M = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"start",
@@ -624,13 +628,13 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			text: e,
 			empty: !0
 		} : {
-			text: `${A(this._start) || "Start"} – ${A(this._end) || "End"}`,
+			text: `${k(this._start) || "Start"} – ${k(this._end) || "End"}`,
 			empty: !1
 		};
 	}
 	render() {
 		this._start = this.getAttribute("start") || this._start, this._end = this.getAttribute("end") || this._end;
-		let e = k(this._start);
+		let e = O(this._start);
 		e && (this._viewY = e.y, this._viewM = e.m);
 		let t = this.getAttribute("size"), n = t === "sm" ? " input-sm" : t === "lg" ? " input-lg" : "", { text: r, empty: i } = this._label();
 		this.innerHTML = `
@@ -658,20 +662,20 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute("data-range-mirror", e), this.appendChild(r)), r.name = t, r.value = n || "";
 	}
 	_limits() {
-		let e = k(this.getAttribute("min")), t = k(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
+		let e = O(this.getAttribute("min")), t = O(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
 		return (e, t, i) => {
 			let a = new Date(e, t, i).getTime();
 			return a < n || a > r;
 		};
 	}
 	_monthHtml(e, t) {
-		let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = j(e, t), a = this._limits(), o = E.map((e, t) => E[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
-			let i = O(e, t, n), o = a(e, t, n);
+		let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = A(e, t), a = this._limits(), o = E.map((e, t) => E[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
+			let i = ee(e, t, n), o = a(e, t, n);
 			return `<button type="button" class="${["datepicker-day", r ? "is-outside" : ""].filter(Boolean).join(" ")}" data-iso="${i}"${o ? " disabled" : ""}>${n}</button>`;
-		}, c = "", l = M(e, t - 1), u = j(l.y, l.m);
+		}, c = "", l = j(e, t - 1), u = A(l.y, l.m);
 		for (let e = r - 1; e >= 0; e--) c += s(l.y, l.m, u - e, !0);
 		for (let n = 1; n <= i; n++) c += s(e, t, n, !1);
-		let d = M(e, t + 1), f = (7 - (r + i) % 7) % 7;
+		let d = j(e, t + 1), f = (7 - (r + i) % 7) % 7;
 		for (let e = 1; e <= f; e++) c += s(d.y, d.m, e, !0);
 		return `
       <div class="daterange-cal">
@@ -683,7 +687,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	_renderView() {
 		let e = this.querySelector(".daterange-pop");
 		if (!e) return;
-		let t = M(this._viewY, this._viewM + 1);
+		let t = j(this._viewY, this._viewM + 1);
 		e.innerHTML = `
       <div class="daterange-head">
         <button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month"><i class="bi bi-chevron-left" aria-hidden="true"></i></button>
@@ -709,7 +713,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			n.classList.toggle("is-range-start", i), n.classList.toggle("is-range-end", a), n.classList.toggle("in-range", o);
 		}
 		let i = e.querySelector("[data-range-hint]");
-		i && (i.textContent = this._start ? this._end ? `${A(this._start)} – ${A(this._end)}` : "Pick an end date" : "Pick a start date");
+		i && (i.textContent = this._start ? this._end ? `${k(this._start)} – ${k(this._end)}` : "Pick an end date" : "Pick a start date");
 	}
 	_position(e, t) {
 		i(e, t);
@@ -730,7 +734,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		if (!e || !t) return;
 		let r = () => !t.hidden;
 		this._open = () => {
-			let r = k(this._start);
+			let r = O(this._start);
 			if (r) this._viewY = r.y, this._viewM = r.m;
 			else {
 				let e = /* @__PURE__ */ new Date();
@@ -743,7 +747,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			this._popClick = !0;
 			let t = e.target.closest("[data-nav]");
 			if (t) {
-				let e = M(this._viewY, this._viewM + Number(t.dataset.nav));
+				let e = j(this._viewY, this._viewM + Number(t.dataset.nav));
 				this._viewY = e.y, this._viewM = e.m, this._renderView();
 				return;
 			}
@@ -768,7 +772,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey), o(this);
 	}
-}, P = class extends HTMLElement {
+}, N = class extends HTMLElement {
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
 	}
@@ -838,13 +842,13 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		let e = this.hasAttribute("searchable"), t = this.getAttribute("search-placeholder") || "Search…", n = this.getAttribute("icon"), r = this.getAttribute("size"), i = r === "sm" ? " search-select-sm" : r === "lg" ? " search-select-lg" : "";
 		c(this, this._values.join(",")), this.innerHTML = `
       <div class="search-select${i}">
-        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${F(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
-          ${n ? `<i class="bi bi-${F(n)} search-select-icon" aria-hidden="true"></i>` : ""}
+        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${P(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
+          ${n ? `<i class="bi bi-${P(n)} search-select-icon" aria-hidden="true"></i>` : ""}
           <div class="ms-chips" data-chips></div>
           <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
         </div>
         <div class="search-select-menu search-select-menu-fixed" role="listbox" aria-multiselectable="true" tabindex="-1" hidden>
-          ${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${F(t)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
+          ${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${P(t)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
           <div class="search-select-options"></div>
           <div class="search-select-empty" hidden>No matches</div>
         </div>
@@ -858,7 +862,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			e.innerHTML = `<span class="search-select-placeholder">${u(t)}</span>`;
 			return;
 		}
-		e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${F(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(""), this._collapseChips();
+		e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${P(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(""), this._collapseChips();
 	}
 	_collapseChips() {
 		let e = this.querySelector("[data-chips]");
@@ -882,9 +886,9 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
 		if (!t) return;
 		let r = (e || "").trim().toLowerCase(), i = this._readOptions();
-		r && (i = i.filter((e) => ee(e.label).toLowerCase().includes(r))), t.innerHTML = i.map((e) => {
+		r && (i = i.filter((e) => te(e.label).toLowerCase().includes(r))), t.innerHTML = i.map((e) => {
 			let t = this._values.includes(String(e.value));
-			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${F(e.value)}" aria-selected="${t}"><span class="ms-opt-label">${f(e)}</span><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span></button>`;
+			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${P(e.value)}" aria-selected="${t}"><span class="ms-opt-label">${f(e)}</span><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span></button>`;
 		}).join(""), n && (n.hidden = i.length > 0), this._active = -1;
 	}
 	_wire() {
@@ -946,7 +950,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this), this._ro?.disconnect(), this._ro = null;
 	}
-}, F = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), ee = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), I = /[^0-9]/g, L = /[^0-9a-zA-Z]/g, R = class extends HTMLElement {
+}, P = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), te = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), ne = /[^0-9]/g, re = /[^0-9a-zA-Z]/g, F = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"value",
@@ -976,7 +980,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		this._value = this._clean(e), c(this, this._value), this._paint();
 	}
 	_clean(e) {
-		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? L : I, "").slice(0, this.length);
+		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? re : ne, "").slice(0, this.length);
 	}
 	connectedCallback() {
 		this._rendered || this.render();
@@ -1042,7 +1046,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			document.activeElement === e && this._paint();
 		});
 	}
-}, z = [
+}, I = [
 	[
 		"AF",
 		"Afghanistan",
@@ -2268,11 +2272,67 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		"Zimbabwe",
 		"263"
 	]
-], B = (e) => (z.find((t) => t[0] === e) || [
+], L = (e) => (I.find((t) => t[0] === e) || [
 	"",
 	"",
 	""
-])[2], V = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, H = class extends HTMLElement {
+])[2], R = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, z = null, B = null;
+function ie() {
+	return z ? Promise.resolve(z) : (B ||= Promise.all([import("./libphonenumber-js-BcNT8oq0.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (z = {
+		AsYouType: e.AsYouType,
+		getExampleNumber: e.getExampleNumber,
+		isValidPhoneNumber: e.isValidPhoneNumber,
+		examples: t.default || t
+	}, z)).catch(() => null), B);
+}
+function V(e, t) {
+	if (!z || !t) return t;
+	try {
+		return new z.AsYouType(e).input(t);
+	} catch {
+		return t;
+	}
+}
+function H(e) {
+	if (!z) return null;
+	try {
+		return z.getExampleNumber(e, z.examples)?.formatNational() || null;
+	} catch {
+		return null;
+	}
+}
+function U(e) {
+	if (!z || !e) return null;
+	try {
+		return z.isValidPhoneNumber(e);
+	} catch {
+		return null;
+	}
+}
+function ae(e) {
+	if (!z) return null;
+	try {
+		let t = z.getExampleNumber(e, z.examples);
+		return t?.nationalNumber ? t.nationalNumber.length : null;
+	} catch {
+		return null;
+	}
+}
+function W(e) {
+	if (!z || !e?.trim().startsWith("+")) return null;
+	try {
+		let t = new z.AsYouType();
+		t.input(e.trim());
+		let n = t.getCountry();
+		return n ? {
+			country: n,
+			national: t.getNationalNumber() || ""
+		} : null;
+	} catch {
+		return null;
+	}
+}
+var G = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"value",
@@ -2291,73 +2351,103 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
 	}
 	get value() {
-		return `+${B(this._country)}${this._national}`;
+		return `+${L(this._country)}${this._national}`;
 	}
 	set value(e) {
-		this._national = String(e ?? "").replace(/[^0-9]/g, ""), this._commit();
+		let t = String(e ?? "").trim(), n = W(t);
+		if (n) this._country = n.country, this._national = n.national.replace(/[^0-9]/g, "");
+		else if (t.startsWith("+")) {
+			let e = t.replace(/[^0-9]/g, ""), n = String(L(this._country));
+			n && e.startsWith(n) && (e = e.slice(n.length)), this._national = e;
+		} else this._national = t.replace(/[^0-9]/g, "");
+		n && this.getAttribute("country") !== this._country ? this.setAttribute("country", this._country) : this._rendered && this.render(), this._commit();
 	}
 	_commit() {
 		c(this, this.value), this.dispatchEvent(new Event("change", { bubbles: !0 }));
 	}
 	render() {
-		let e = this.getAttribute("placeholder") || "Enter phone number";
+		let e = this.getAttribute("placeholder") || H(this._country) || "Enter phone number";
 		this._country = this.getAttribute("country") || this._country;
-		let t = z.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${V(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
+		let t = I.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${R(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
 		this.innerHTML = `
       <div class="phone-input-wrap">
         <div class="phone-country-adornment">
           <button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
-            <span class="${V(this._country)}" data-flag aria-hidden="true"></span>
+            <span class="${R(this._country)}" data-flag aria-hidden="true"></span>
             <i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
-            <span class="phone-dial" data-dial>+${B(this._country)}</span>
+            <span class="phone-dial" data-dial>+${L(this._country)}</span>
           </button>
           <div class="country-dropdown-menu" role="listbox" hidden>
             <div class="dropdown-search-wrapper"><span class="dropdown-search-icon"><i class="bi bi-search" aria-hidden="true"></i></span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" /></div>
             <div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
           </div>
         </div>
-        <input type="tel" class="input" placeholder="${U(e)}" value="${U(this._national)}"${this.hasAttribute("disabled") ? " disabled" : ""} />
-      </div>`, this._rendered = !0, c(this, this.value), this._wire();
+        <input type="tel" class="input" placeholder="${K(e)}" value="${K(V(this._country, this._national))}"${this.hasAttribute("disabled") ? " disabled" : ""} />
+      </div>
+      <div class="field-error" data-phone-error hidden></div>`, this._rendered = !0, c(this, this.value), this._wire();
 	}
 	_wire() {
-		let e = this.querySelector(".country-toggle"), t = this.querySelector(".country-dropdown-menu"), n = this.querySelector(".dropdown-search-input"), r = this.querySelector(".country-list-scroll"), i = this.querySelector(".country-empty"), a = this.querySelector("input[type=tel]"), o = this.querySelector("[data-flag]"), s = this.querySelector("[data-dial]");
-		if (!e || !t) return;
-		let l = () => !t.hidden, u = () => {
-			let n = e.getBoundingClientRect(), r = t.offsetWidth || 320, i = t.offsetHeight || 320, a = window.innerHeight - n.bottom, o = a < i + 6 && n.top > a ? n.top - i - 6 : n.bottom + 6, s = Math.min(Math.max(8, n.left), Math.max(8, window.innerWidth - r - 8));
-			t.style.top = `${Math.max(8, o)}px`, t.style.left = `${s}px`;
-		}, d = () => {
-			t.hidden = !1, e.setAttribute("aria-expanded", "true"), n.value = "", p(""), u(), n.focus();
+		let e = this.querySelector(".country-toggle"), t = this.querySelector(".phone-input-wrap"), n = this.querySelector(".country-dropdown-menu"), r = this.querySelector(".dropdown-search-input"), i = this.querySelector(".country-list-scroll"), a = this.querySelector(".country-empty"), o = this.querySelector("input[type=tel]"), s = this.querySelector("[data-flag]"), l = this.querySelector("[data-dial]");
+		if (!e || !n) return;
+		let u = () => !n.hidden, d = () => {
+			let r = (t || e).getBoundingClientRect(), i = n.offsetWidth || 320, a = n.offsetHeight || 320, o = window.innerHeight - r.bottom, s = o < a + 6 && r.top > o ? r.top - a - 6 : r.bottom + 6, c = Math.min(Math.max(8, r.left), Math.max(8, window.innerWidth - i - 8));
+			n.style.top = `${Math.max(8, s)}px`, n.style.left = `${c}px`;
 		}, f = () => {
-			t.hidden = !0, e.setAttribute("aria-expanded", "false");
+			n.hidden = !1, e.setAttribute("aria-expanded", "true"), r.value = "", m(""), d(), r.focus();
+		}, p = () => {
+			n.hidden = !0, e.setAttribute("aria-expanded", "false");
 		};
 		this._reposition = () => {
-			l() && u();
+			u() && d();
 		}, window.addEventListener("scroll", this._reposition, !0), window.addEventListener("resize", this._reposition);
-		let p = (e) => {
+		let m = (e) => {
 			let t = e.trim().toLowerCase(), n = 0;
-			for (let e of r.querySelectorAll(".country-dropdown-item")) {
+			for (let e of i.querySelectorAll(".country-dropdown-item")) {
 				let r = !t || e.textContent.toLowerCase().includes(t);
 				e.hidden = !r, r && (n += 1);
 			}
-			i && (i.hidden = n > 0);
-		}, m = (e) => {
-			this._country = e, this.setAttribute("country", e), o && (o.className = V(e)), s && (s.textContent = `+${B(e)}`);
-			for (let t of r.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
-			f(), this._commit();
+			a && (a.hidden = n > 0);
+		}, h = (e) => {
+			this._country = e, this.setAttribute("country", e), s && (s.className = R(e)), l && (l.textContent = `+${L(e)}`);
+			for (let t of i.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
+			p(), this._commit();
 		};
-		e.addEventListener("click", () => l() ? f() : d()), n.addEventListener("input", () => p(n.value)), r.addEventListener("click", (e) => {
+		e.addEventListener("click", () => u() ? p() : f()), r.addEventListener("input", () => m(r.value)), i.addEventListener("click", (e) => {
 			let t = e.target.closest(".country-dropdown-item");
-			t && m(t.dataset.iso);
-		}), a.addEventListener("input", () => {
-			this._national = a.value.replace(/[^0-9]/g, ""), this._commit();
+			t && h(t.dataset.iso);
+		});
+		let g = this.querySelector("[data-phone-error]"), _ = (e) => {
+			if (o.classList.toggle("is-invalid", e), e ? o.setAttribute("aria-invalid", "true") : o.removeAttribute("aria-invalid"), g) {
+				if (e) {
+					let e = H(this._country);
+					g.textContent = e ? `Enter a valid phone number, e.g. ${e}` : "Enter a valid phone number";
+				}
+				g.hidden = !e;
+			}
+		};
+		o.addEventListener("input", () => {
+			let e = o.value.replace(/[^0-9]/g, ""), t = ae(this._country);
+			t && e.length > t && (e = e.slice(0, t)), this._national = e;
+			let n = V(this._country, this._national);
+			o.value !== n && (o.value = n), this._commit(), o.classList.contains("is-invalid") && (!this._national || U(this.value) === !0) && _(!1);
+		}), o.addEventListener("blur", () => {
+			_(this._national.length > 0 && U(this.value) === !1);
+		}), o.addEventListener("paste", (e) => {
+			let t = W(e.clipboardData?.getData("text"));
+			t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value = V(this._country, this._national) : this.setAttribute("country", t.country), this._commit(), this.querySelector("input[type=tel]")?.focus());
 		}), this._onDocClick = (e) => {
-			l() && !this.contains(e.target) && f();
-		}, document.addEventListener("click", this._onDocClick), c(this, this.value);
+			u() && !this.contains(e.target) && p();
+		}, document.addEventListener("click", this._onDocClick), ie().then((e) => {
+			if (!(!e || !o) && (this._national && (o.value = V(this._country, this._national)), !this.getAttribute("placeholder"))) {
+				let e = H(this._country);
+				e && (o.placeholder = e);
+			}
+		}), c(this, this.value);
 	}
 	disconnectedCallback() {
 		this._reposition && (window.removeEventListener("scroll", this._reposition, !0), window.removeEventListener("resize", this._reposition)), this._onDocClick && document.removeEventListener("click", this._onDocClick);
 	}
-}, U = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), W = class extends HTMLElement {
+}, K = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), q = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"value",
@@ -2383,7 +2473,11 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		this._rendered || this.render();
 	}
 	attributeChangedCallback(e, t, n) {
-		this._rendered && (e === "value" ? this.value = n : this.render());
+		if (e === "value") {
+			this.value = n;
+			return;
+		}
+		this._rendered && this.render();
 	}
 	get value() {
 		return this._value;
@@ -2417,19 +2511,19 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		d && (this._value = String(d.value)), c(this, this._value);
 		let p = e.map((e) => {
 			let t = String(e.value) === String(this._value);
-			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${G(e.value)}" aria-selected="${t}">${f(e)}</button>`;
+			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${J(e.value)}" aria-selected="${t}">${f(e)}</button>`;
 		}).join("");
 		this.innerHTML = `
       <div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}${i}">
-        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${G(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
-          ${a ? `<i class="bi bi-${G(a)} search-select-icon" aria-hidden="true"></i>` : ""}
+        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${J(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
+          ${a ? `<i class="bi bi-${J(a)} search-select-icon" aria-hidden="true"></i>` : ""}
           ${o ? `<span class="search-select-prefix">${u(o)}</span>` : ""}
           <span class="${d ? "" : "search-select-placeholder"}" data-label>${d ? f(d) : u(s)}</span>
           ${n ? "<span class=\"search-select-reset\" role=\"button\" aria-label=\"Clear selection\" hidden><i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i></span>" : ""}
           <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
         </button>
         <div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
-          ${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${G(l)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
+          ${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${J(l)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
           <div class="search-select-options">${p}<div class="search-select-empty" hidden>No matches</div></div>
         </div>
       </div>`, this._rendered = !0, c(this, this._value), this._wire(), this._syncReset();
@@ -2510,7 +2604,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			t && n(this._visible().indexOf(t));
 		}), e.optionsWrap.addEventListener("mouseleave", () => n(-1)), e.search?.addEventListener("input", () => {
 			r(e.search.value), n(-1);
-		}), e.search?.addEventListener("keydown", u), e.clear?.addEventListener("click", () => {
+		}), e.clear?.addEventListener("click", () => {
 			e.search.value = "", r(""), e.search.focus();
 		}), e.menu.addEventListener("keydown", u), this._onDocClick = (e) => {
 			o() && !this.contains(e.target) && c();
@@ -2521,14 +2615,14 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this);
 	}
-}, G = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), K = "image/png,image/jpeg,image/webp", te = 5, q = {
+}, J = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Y = "image/png,image/jpeg,image/webp", oe = 5, se = {
 	"image/png": [".png"],
 	"image/jpeg": [".jpg", ".jpeg"],
 	"image/webp": [".webp"],
 	"image/gif": [".gif"],
 	"image/svg+xml": [".svg"],
 	"application/pdf": [".pdf"]
-}, J = {
+}, ce = {
 	"image/png": "PNG",
 	"image/jpeg": "JPG",
 	"image/webp": "WEBP",
@@ -2542,34 +2636,34 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	".gif": "GIF",
 	".svg": "SVG",
 	".pdf": "PDF"
-}, Y = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
-function X(e) {
+}, X = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
+function Z(e) {
 	let t = [];
-	for (let n of Y(e)) {
-		let e = J[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
+	for (let n of X(e)) {
+		let e = ce[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
 		t.includes(e) || t.push(e);
 	}
 	return t.length <= 1 ? t[0] || "supported" : `${t.slice(0, -1).join(", ")} or ${t[t.length - 1]}`;
 }
-function Z(e, t) {
-	let n = Y(t);
+function Q(e, t) {
+	let n = X(t);
 	if (!n.length) return !0;
 	let r = (e.type || "").toLowerCase(), i = (e.name || "").toLowerCase();
-	return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (q[e] || []).some((e) => i.endsWith(e)));
+	return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (se[e] || []).some((e) => i.endsWith(e)));
 }
-function ne(e, t = {}) {
+function le(e, t = {}) {
 	if (!e) return null;
-	let n = t.accept === void 0 ? K : t.accept, r = t.maxSizeMb || 5;
-	return Z(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${X(n)} file.`;
+	let n = t.accept === void 0 ? Y : t.accept, r = t.maxSizeMb || 5;
+	return Q(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${Z(n)} file.`;
 }
 //#endregion
 //#region src/index.js
-var Q = (e, t) => {
+var $ = (e, t) => {
 	typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
 };
-function $() {
-	Q("wui-select", W), Q("wui-phone", H), Q("wui-datepicker", w), Q("wui-date-range", N), Q("wui-autocomplete", p), Q("wui-multiselect", P), Q("wui-otp", R), Q("wui-status-icon", n);
+function ue() {
+	$("wui-select", q), $("wui-phone", G), $("wui-datepicker", w), $("wui-date-range", M), $("wui-autocomplete", p), $("wui-multiselect", N), $("wui-otp", F), $("wui-status-icon", n);
 }
-$();
+ue();
 //#endregion
-export { K as DEFAULT_IMAGE_ACCEPT, te as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, p as WuiAutocomplete, w as WuiDatePicker, N as WuiDateRange, P as WuiMultiSelect, R as WuiOtp, H as WuiPhone, W as WuiSelect, n as WuiStatusIcon, X as acceptLabel, $ as defineWeborityElements, Z as matchesAccept, ne as validateFile };
+export { Y as DEFAULT_IMAGE_ACCEPT, oe as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, p as WuiAutocomplete, w as WuiDatePicker, M as WuiDateRange, N as WuiMultiSelect, F as WuiOtp, G as WuiPhone, q as WuiSelect, n as WuiStatusIcon, Z as acceptLabel, ue as defineWeborityElements, Q as matchesAccept, le as validateFile };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-elements",
-  "version": "0.6.12",
+  "version": "0.7.0",
   "description": "Webority framework-agnostic UI custom elements (<wui-*>) — the single implementation of the interactive components, styled by @webority/theme. Used natively in Razor and wrapped by @webority/ui-react.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -26,10 +26,19 @@
   "sideEffects": [
     "./dist/*"
   ],
+  "dependencies": {
+    "libphonenumber-js": "^1.13.9"
+  },
   "devDependencies": {
-    "vite": "^8.0.12"
+    "@vitest/coverage-v8": "^3.2.4",
+    "jsdom": "^26.0.0",
+    "vite": "^8.0.12",
+    "vitest": "^3.2.4"
   },
   "scripts": {
-    "build": "vite build && node ../../scripts/sync-rcl-assets.mjs elements"
+    "build": "vite build && node ../../scripts/sync-rcl-assets.mjs elements",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   }
 }