@webority/ui-elements 0.33.0 → 0.35.0

package/dist/WuiMultiSelect-BrCGRNCt.js

@@ -0,0 +1,416 @@
+import { t as e } from "./elementBase-Bg1xpvup.js";
+import { n as t, r as n, t as r } from "./anchorOverlay-DluGZ8ef.js";
+import { n as i } from "./formMirror-jGf5M4gk.js";
+import { t as a } from "./iconGlyphs.g-Cpg1BUHm.js";
+import { n as o, t as s } from "./listboxKeyNav-zts_8d5e.js";
+import { n as c, r as l, t as u } from "./optionLabel-Dn-I7zyp.js";
+import { i as d, t as f } from "./tokenCommit-VWz-2jEf.js";
+//#region src/WuiMultiSelect.js
+var p = class extends e {
+	static formAssociated = !0;
+	_accessibleName() {
+		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
+	}
+	static get observedAttributes() {
+		return [
+			"placeholder",
+			"search-placeholder",
+			"searchable",
+			"disabled",
+			"icon",
+			"size",
+			"collapse-chips",
+			"aria-label",
+			"aria-invalid",
+			"allow-custom",
+			"custom-pattern",
+			"custom-invalid-message"
+		];
+	}
+	constructor() {
+		super(), this._values = [], this._optionsProp = null, this._active = -1, this._typeahead = "", this._typeaheadTimer = null, this._customError = "";
+		try {
+			this._internals = this.attachInternals();
+		} catch {
+			this._internals = null;
+		}
+	}
+	connectedCallback() {
+		if (!this._rendered) {
+			if (!this._valuesInit && !this._optionsProp && !this._values.length) {
+				let e = this.getAttribute("value");
+				if (e != null && e !== "") this._values = e.split(",").map((e) => e.trim()).filter(Boolean);
+				else {
+					let e = [...this.querySelectorAll(":scope > wui-option[selected]")].map((e) => e.getAttribute("value") ?? e.textContent.trim());
+					e.length && (this._values = e.map(String));
+				}
+			}
+			this._valuesInit = !0, this._defaultCaptured ||= (this._defaultValues = this._values.slice(), !0), this.render();
+			return;
+		}
+		this._bindGlobal?.();
+	}
+	formResetCallback() {
+		this.values = (this._defaultValues || []).slice();
+		let e = this.querySelector("[data-input]");
+		e && (e.value = ""), this._setCustomError("");
+	}
+	attributeChangedCallback(e) {
+		if (e === "aria-invalid") {
+			this._syncInvalid();
+			return;
+		}
+		e === "custom-pattern" || e === "custom-invalid-message" || this._rendered && this.render();
+	}
+	_syncInvalid() {
+		let e = this.querySelector(".search-select-control");
+		e && (this.hasAttribute("aria-invalid") || this._customError ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
+	}
+	get values() {
+		return this._values.slice();
+	}
+	set values(e) {
+		this._values = Array.isArray(e) ? e.map(String) : [], i(this, this._values), this._rendered && (this._renderControl(), this._renderOptions(this._query()));
+	}
+	set options(e) {
+		if (this._optionsProp = Array.isArray(e) ? e : null, this._rendered && this._allowCustom) {
+			this._renderControl(), this._renderOptions(this._query());
+			return;
+		}
+		this.isConnected && this.render();
+	}
+	get options() {
+		return this._readOptions();
+	}
+	get validateCustom() {
+		return this._validateCustom ?? null;
+	}
+	set validateCustom(e) {
+		this._validateCustom = typeof e == "function" ? e : null;
+	}
+	get _allowCustom() {
+		return this.hasAttribute("allow-custom");
+	}
+	_query() {
+		let e = this.querySelector(this._allowCustom ? "[data-input]" : ".search-select-input");
+		return e ? e.value : "";
+	}
+	_snapshotDeclared() {
+		if (this._declared) return;
+		let e = [...this.querySelectorAll(":scope > wui-option")];
+		e.length && (this._declared = e.map((e) => {
+			let t = {
+				value: e.getAttribute("value") ?? e.textContent.trim(),
+				label: e.innerHTML,
+				icon: e.getAttribute("icon") || void 0,
+				[u]: !0,
+				selected: e.hasAttribute("selected")
+			};
+			for (let [n, r] of h) {
+				let i = e.getAttribute(n);
+				i && (t[r] = i);
+			}
+			return e.hasAttribute("disabled") && (t.disabled = !0), t;
+		}));
+	}
+	_readOptions() {
+		return this._optionsProp ? this._optionsProp : (this._snapshotDeclared(), this._declared || []);
+	}
+	_labelFor(e) {
+		let t = this._readOptions().find((t) => String(t.value) === String(e));
+		return t ? t.label : e;
+	}
+	_labelHtmlFor(e) {
+		let t = this._readOptions().find((t) => String(t.value) === String(e));
+		return t ? l(t) : c(e);
+	}
+	render() {
+		this._snapshotDeclared();
+		let e = this._allowCustom, t = this.hasAttribute("searchable") && !e, n = this.getAttribute("search-placeholder") || "Search…", r = this.getAttribute("icon"), o = this.getAttribute("size"), s = o === "sm" ? " search-select-sm" : o === "lg" ? " search-select-lg" : "";
+		i(this, this._values), this.id ||= `wui-multiselect-${Math.random().toString(36).slice(2, 9)}`;
+		let c = `${this.id}-listbox`;
+		this._listboxId = c;
+		let l = this.hasAttribute("disabled");
+		if (e) {
+			let e = `${this.id}-custom-error`;
+			this.innerHTML = `
+      <div class="search-select${s}">
+        <div class="input search-select-control search-select-multi"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${l ? " aria-disabled=\"true\"" : ""}>
+          ${r ? a(r, { className: "search-select-icon" }) : ""}
+          <div class="ms-chips" data-chips><input type="text" class="ms-input" data-input role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="false" aria-controls="${S(c)}" aria-label="${S(this._accessibleName())}" aria-describedby="${S(e)}" autocomplete="off"${l ? " disabled" : ""} /></div>
+          ${a("chevron-down", { className: "search-select-caret" })}
+        </div>
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${S(c)}" aria-multiselectable="true" tabindex="-1" hidden>
+          <div class="search-select-options"></div>
+        </div>
+      </div>
+      <div class="field-error wui-ms-custom-error" id="${S(e)}" aria-live="polite" hidden></div>`;
+		} else this.innerHTML = `
+      <div class="search-select${s}">
+        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${S(c)}" aria-label="${S(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${l ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
+          ${r ? a(r, { className: "search-select-icon" }) : ""}
+          <div class="ms-chips" data-chips></div>
+          ${a("chevron-down", { className: "search-select-caret" })}
+        </div>
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${S(c)}" aria-multiselectable="true" tabindex="-1" hidden>
+          ${t ? `<div class="search-select-search">${a("search")}<input class="search-select-input" placeholder="${S(n)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${a("x")}</button></div>` : ""}
+          <div class="search-select-options"></div>
+          <div class="search-select-empty" hidden>No matches</div>
+        </div>
+      </div>`;
+		this._rendered = !0, this._customError = "", i(this, this._values), this._renderControl(), this._renderOptions(), this._wire();
+	}
+	_renderControl() {
+		let e = this.querySelector("[data-chips]");
+		if (!e) return;
+		let t = this.getAttribute("placeholder") || "Select…", n = this._allowCustom ? e.querySelector("[data-input]") : null, r = 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="${S(e)}" aria-label="Remove ${S(C(this._labelFor(e)))}">${a("x")}</button></span>`).join("");
+		if (n) {
+			for (let t of [...e.querySelectorAll(":scope > .chip")]) t.remove();
+			n.insertAdjacentHTML("beforebegin", r), n.placeholder = this._values.length ? "" : t, this._collapseChips();
+			return;
+		}
+		if (!this._values.length) {
+			e.innerHTML = `<span class="search-select-placeholder">${c(t)}</span>`;
+			return;
+		}
+		e.innerHTML = r, this._collapseChips();
+	}
+	_collapseChips() {
+		let e = this.querySelector("[data-chips]");
+		if (!e || !this.hasAttribute("collapse-chips") || !this._values.length) return;
+		e.querySelector(".chip-more")?.remove();
+		let t = [...e.querySelectorAll(":scope > .chip:not(.chip-more)")];
+		for (let e of t) e.style.display = "";
+		if (!t.length) return;
+		let n = e.clientWidth, r = (e) => e.offsetLeft + e.offsetWidth;
+		if (r(t[t.length - 1]) <= n) return;
+		let i = document.createElement("span");
+		i.className = "chip chip-sm chip-more", i.textContent = `+${t.length}`, t[t.length - 1].after(i);
+		let a = i.offsetWidth + 6, o = 0;
+		for (let e of t) if (r(e) <= n - a) o += 1;
+		else break;
+		o < 1 && (o = 1);
+		for (let e = o; e < t.length; e += 1) t[e].style.display = "none";
+		i.textContent = `+${t.length - o}`;
+	}
+	_matches(e, t) {
+		return C(e.label).toLowerCase().includes(t) || String(e.description ?? "").toLowerCase().includes(t);
+	}
+	_optionNamed(e) {
+		let t = e.trim().toLowerCase();
+		return this._readOptions().find((e) => String(e.value ?? "").toLowerCase() === t || C(e.label).trim().toLowerCase() === t);
+	}
+	_renderOptions(e) {
+		let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
+		if (!t) return;
+		let r = (e || "").trim(), i = r.toLowerCase(), o = this._readOptions();
+		i && (o = o.filter((e) => this._matches(e, i)));
+		let s = this._listboxId || `${this.id || "wui-multiselect"}-listbox`, u = this._allowCustom && r && !this._optionNamed(r), d = o.map((e, t) => {
+			let n = this._values.includes(String(e.value)), r = `${s}-opt-${t}`;
+			return g(e) ? y(e, r, n) : `<button type="button" role="option" id="${S(r)}" class="search-select-option${n ? " selected" : ""}" data-value="${S(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${l(e)}</span><span class="ms-check">${a("check")}</span></button>`;
+		});
+		u && d.push(`<button type="button" role="option" id="${S(`${s}-opt-${o.length}`)}" class="search-select-option search-select-option-custom" data-value="${S(r)}" data-custom="true" aria-selected="false">Add “${c(r)}”</button>`), t.innerHTML = d.join(""), n && (n.hidden = o.length > 0), this._active = -1, this._combobox()?.removeAttribute("aria-activedescendant"), this._allowCustom && this._syncCustomMenu?.(), this._reanchor?.();
+	}
+	_combobox() {
+		return this._allowCustom ? this.querySelector("[data-input]") : this.querySelector(".search-select-control");
+	}
+	_setCustomError(e) {
+		this._customError = e || "";
+		let t = this.querySelector(".wui-ms-custom-error"), n = this.querySelector("[data-input]");
+		t && (t.textContent = this._customError, t.hidden = !this._customError), n && (this._customError ? n.setAttribute("aria-invalid", "true") : n.removeAttribute("aria-invalid")), this._syncInvalid();
+	}
+	_customRefusal(e) {
+		let t = this.getAttribute("custom-invalid-message") || "Enter a valid value.", n = this.getAttribute("custom-pattern");
+		if (n) {
+			let r = x(n);
+			if (r && !r.test(e)) return t;
+		}
+		let r = this._validateCustom;
+		if (r) {
+			let n = r(e);
+			return n === !0 ? "" : typeof n == "string" && n ? n : t;
+		}
+		return "";
+	}
+	_commitTyped(e) {
+		let t = e.trim().replace(/,+$/, "").trim();
+		if (!t) return "";
+		let n = this._optionNamed(t), r;
+		if (n) {
+			if (n.disabled) return n.disabledHint || this.getAttribute("custom-invalid-message") || "That option is not available.";
+			r = String(n.value);
+		} else {
+			let e = this._customRefusal(t);
+			if (e) return e;
+			r = t;
+		}
+		let i = r.toLowerCase();
+		return this._values.some((e) => e.toLowerCase() === i) || (this._values = [...this._values, r]), "";
+	}
+	_wire() {
+		this._teardown();
+		let e = this.querySelector(".search-select-control"), a = this.querySelector(".search-select-menu"), c = this.querySelector(".search-select-input"), l = this.querySelector(".search-select-clear"), u = this.querySelector(".search-select-options"), p = this._allowCustom, h = p ? this.querySelector("[data-input]") : null, g = h || e;
+		if (!e || !a) return;
+		let _ = () => this.hasAttribute("disabled"), v = () => r(e, a, { matchWidth: !0 }), y = () => [...this.querySelectorAll(".search-select-option")], b = () => y().filter((e) => !e.hidden), x = (e, { reveal: t = !0 } = {}) => {
+			let n = b();
+			this._active = e, o(u, e >= 0 && n[e] || null), e >= 0 && n[e] ? (t && n[e].scrollIntoView({ block: "nearest" }), g.setAttribute("aria-activedescendant", n[e].id)) : g.removeAttribute("aria-activedescendant");
+		}, S = !1, C = () => p ? S : !a.hidden, w = () => {
+			let t = S && y().length > 0, n = a.hidden;
+			a.hidden = !t, g.setAttribute("aria-expanded", String(t)), e.classList.toggle("open", t), t && n && v();
+		};
+		this._syncCustomMenu = p ? w : null;
+		let T = () => {
+			C() && v();
+		}, E = () => {
+			if (!_()) {
+				if (t(this, T), p) {
+					S = !0, w();
+					return;
+				}
+				a.hidden = !1, e.setAttribute("aria-expanded", "true"), e.classList.add("open"), v(), c && (c.value = "", this._renderOptions(""), c.focus());
+			}
+		}, D = () => {
+			p ? (S = !1, w()) : (a.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open")), x(-1), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "", n(this);
+		}, O = () => {
+			i(this, this._values), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+		}, k = (e) => {
+			let t = String(e);
+			if (this._values.includes(t)) this._values = this._values.filter((e) => e !== t);
+			else if (p && this._values.some((e) => e.toLowerCase() === t.toLowerCase())) return;
+			else this._values = [...this._values, t];
+			this._renderControl(), this._renderOptions(this._query()), O();
+		}, A = (e) => {
+			this._values = this._values.filter((t) => t !== String(e)), this._renderControl(), this._renderOptions(this._query()), O();
+		}, j = (e, { quiet: t = !1 } = {}) => {
+			let n = this._values.length, r = f(e, m) ? d(e, m) : [e], i = [], a = "";
+			for (let e of r) {
+				let t = this._commitTyped(e);
+				t && (i.push(e.trim()), a ||= t);
+			}
+			t && i.length || (h.value = i.join(", "), this._setCustomError(a), this._values.length !== n && (this._renderControl(), O()), this._renderOptions(h.value));
+		}, M = (e) => {
+			if (!(!e || e.getAttribute("aria-disabled") === "true")) {
+				if (e.dataset.custom === "true") {
+					j(e.dataset.value);
+					return;
+				}
+				k(e.dataset.value), h?.value && (h.value = "", this._setCustomError(""), this._renderOptions(""));
+			}
+		};
+		e.addEventListener("click", (e) => {
+			if (_()) return;
+			let t = e.target.closest("[data-remove]");
+			if (t) {
+				e.stopPropagation(), A(t.dataset.remove), h?.focus();
+				return;
+			}
+			if (h) {
+				let t = C();
+				e.target !== h && h.focus(), e.target === h || !t ? E() : D();
+				return;
+			}
+			C() ? D() : E();
+		}), u.addEventListener("click", (e) => {
+			let t = e.target.closest(".search-select-option");
+			t && (M(t), (h || c)?.focus());
+		}), u.addEventListener("mousemove", (e) => {
+			let t = e.target.closest(".search-select-option");
+			t && !t.classList.contains("is-active") && x(b().indexOf(t), { reveal: !1 });
+		}), u.addEventListener("mouseleave", () => x(-1)), u.addEventListener("error", (e) => {
+			e.target?.classList?.contains("avatar-img") && e.target.remove();
+		}, !0), c?.addEventListener("input", () => {
+			this._renderOptions(c.value), l && (l.hidden = !c.value), x(-1);
+		}), this._navHandler = s({
+			getVisibleOptions: b,
+			getActive: () => this._active,
+			setActive: (e) => x(e),
+			onEnter: (e) => {
+				e ? M(e) : h?.value.trim() && j(h.value);
+			},
+			onEscape: () => {
+				this._navHandler.clearTypeahead(), D(), h || e.focus();
+			}
+		});
+		let N = (e) => {
+			let t = h || c;
+			if (e.key === "Backspace" && !t?.value && this._values.length) {
+				A(this._values[this._values.length - 1]);
+				return;
+			}
+			this._navHandler.handler(e);
+		};
+		if (c?.addEventListener("keydown", N), l?.addEventListener("click", () => {
+			c.value = "", this._renderOptions(""), l.hidden = !0, c.focus();
+		}), h) {
+			let t = (e) => {
+				e.target !== h && e.preventDefault();
+			};
+			u.addEventListener("mousedown", t), e.addEventListener("mousedown", t), h.addEventListener("focus", () => E()), h.addEventListener("input", () => {
+				this._customError && this._setCustomError(""), this._renderOptions(h.value), E();
+			}), h.addEventListener("keydown", (e) => {
+				if (e.key === "," && h.value.trim()) {
+					e.preventDefault(), j(h.value);
+					return;
+				}
+				if (e.key === "Enter") {
+					if (this._active < 0 && !h.value.trim()) return;
+					this._navHandler.handler(e);
+					return;
+				}
+				(e.key === "ArrowDown" || e.key === "ArrowUp") && !C() && E(), N(e);
+			}), h.addEventListener("paste", (e) => {
+				let t = e.clipboardData?.getData("text/plain") ?? "";
+				f(t, m) && (e.preventDefault(), j(`${h.value}${t}`));
+			}), h.addEventListener("blur", (e) => {
+				e.relatedTarget && this.contains(e.relatedTarget) || (h.value.trim() && j(h.value, { quiet: !0 }), D());
+			});
+		} else e.addEventListener("keydown", (e) => {
+			if (C()) {
+				N(e);
+				return;
+			}
+			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), E());
+		});
+		this._bindGlobal = () => {
+			this._teardown(), !this._ro && typeof ResizeObserver < "u" && (this._ro = new ResizeObserver(() => this._collapseChips()), this._ro.observe(this)), this._onDocClick = (e) => {
+				C() && !this.contains(e.target) && D();
+			}, document.addEventListener("click", this._onDocClick), C() && t(this, T);
+		}, this._bindGlobal();
+	}
+	_teardown() {
+		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), n(this), this._navHandler?.teardown();
+	}
+	disconnectedCallback() {
+		this._teardown(), this._ro?.disconnect(), this._ro = null;
+	}
+}, m = [
+	",",
+	";",
+	"\n",
+	"	"
+], h = [
+	["description", "description"],
+	["avatar", "avatar"],
+	["initials", "initials"],
+	["disabled-hint", "disabledHint"]
+], g = (e) => !!(e.description || e.avatar || e.initials || e.disabled || e.disabledHint), _ = (e) => {
+	let t = String(e ?? "").trim();
+	return /^(https?:)?\/\//i.test(t) || /^\/(?!\/)/.test(t) || /^data:image\/(png|jpe?g|gif|webp|avif);/i.test(t) ? t : "";
+}, v = (e) => {
+	let t = _(e.avatar);
+	return !t && !e.initials ? "" : `<span class="avatar wui-opt-avatar" aria-hidden="true"><span class="avatar-face">${c(e.initials ?? "")}</span>${t ? `<img class="avatar-img" src="${S(t)}" alt="" />` : ""}</span>`;
+}, y = (e, t, n) => {
+	let r = !!e.disabled, i = e.description ? `<span class="wui-opt-desc">${c(e.description)}</span>` : "", o = e.disabledHint && r ? `<span class="wui-opt-hint">${c(e.disabledHint)}</span>` : "";
+	return `<button type="button" role="option" id="${S(t)}" class="search-select-option wui-opt-rich${n ? " selected" : ""}" data-value="${S(e.value)}" aria-selected="${n}"${r ? " aria-disabled=\"true\"" : ""}><span class="ms-opt-label"><span class="wui-opt-name">${l(e)}</span>${i}</span>${o}${v(e)}<span class="ms-check">${a("check")}</span></button>`;
+}, b = /* @__PURE__ */ new Map(), x = (e) => {
+	if (b.has(e)) return b.get(e);
+	let t = null;
+	try {
+		t = RegExp(`^(?:${e})$`, "u");
+	} catch {
+		console.warn(`<wui-multiselect> custom-pattern is not a valid regular expression and is ignored: ${e}`);
+	}
+	return b.set(e, t), t;
+}, S = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), C = (e) => String(e ?? "").replace(/<[^>]*>/g, "");
+//#endregion
+export { p as t };

package/dist/WuiOtp-D8-4Pqil.js

@@ -0,0 +1,128 @@
+import { t as e } from "./elementBase-Bg1xpvup.js";
+import { t } from "./formMirror-jGf5M4gk.js";
+//#region src/WuiOtp.js
+var n = /[^0-9]/g, r = /[^0-9a-zA-Z]/g, i = class extends e {
+	static formAssociated = !0;
+	static get observedAttributes() {
+		return [
+			"value",
+			"length",
+			"mode",
+			"disabled",
+			"aria-label"
+		];
+	}
+	get length() {
+		let e = Number.parseInt(this.getAttribute("length") ?? "6", 10);
+		return Number.isFinite(e) && e > 0 ? e : 6;
+	}
+	set length(e) {
+		this.setAttribute("length", String(e));
+	}
+	get mode() {
+		return this.getAttribute("mode") === "alphanumeric" ? "alphanumeric" : "numeric";
+	}
+	set mode(e) {
+		this.setAttribute("mode", String(e ?? "numeric"));
+	}
+	get value() {
+		return this._value ?? "";
+	}
+	set value(e) {
+		this._value = this._clean(e), t(this, this._value), this._paint();
+	}
+	_clean(e) {
+		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? r : n, "").slice(0, this.length);
+	}
+	constructor() {
+		super();
+		try {
+			this._internals = this.attachInternals();
+		} catch {
+			this._internals = null;
+		}
+	}
+	connectedCallback() {
+		this._rendered ? this._onSelectionChange && document.addEventListener("selectionchange", this._onSelectionChange) : (this._defaultCaptured ||= (this._defaultValue = this._value, !0), this.render());
+	}
+	formResetCallback() {
+		this._value = this._defaultValue || "", t(this, this._value), this._paint();
+	}
+	attributeChangedCallback(e, n, r) {
+		this._rendered && (e === "value" ? (this._value = this._clean(r), t(this, this._value), this._paint()) : this.render());
+	}
+	render() {
+		this._value = this._clean(this.getAttribute("value") ?? this._value);
+		let e = this.length, n = this.mode === "numeric", r = this.hasAttribute("disabled"), i = Array.from({ length: e }, () => "<span class=\"otp-slot\" aria-hidden=\"true\"></span>").join(""), a = this.getAttribute("aria-label"), o = a ? ` aria-label="${a.replace(/"/g, "&quot;")}"` : "";
+		this.innerHTML = `
+      <div class="otp">
+        <input
+          class="otp-field"
+          type="text"
+          autocomplete="one-time-code"
+          inputmode="${n ? "numeric" : "text"}"
+          ${n ? "pattern=\"[0-9]*\"" : ""}${o}
+          autocapitalize="off"
+          autocorrect="off"
+          spellcheck="false"
+          ${r ? "disabled" : ""} />
+        <div class="otp-slots" aria-hidden="true">${i}</div>
+      </div>`, this._rendered = !0, t(this, this._value), this._wire(), this._paint();
+	}
+	_refs() {
+		return {
+			input: this.querySelector(".otp-field"),
+			slots: [...this.querySelectorAll(".otp-slot")]
+		};
+	}
+	_paint() {
+		let { input: e, slots: t } = this._refs();
+		if (!e || !t.length) return;
+		e.value !== this._value && (e.value = this._value);
+		let n = e.selectionStart ?? this._value.length, r = Math.min(n, t.length - 1), i = document.activeElement === e;
+		t.forEach((e, t) => {
+			e.textContent = this._value[t] ?? "", e.classList.toggle("filled", !!this._value[t]), e.classList.toggle("active", i && t === r);
+		});
+	}
+	_wire() {
+		let { input: e } = this._refs();
+		if (!e) return;
+		let n = (e) => {
+			let n = this._clean(e), r = n !== this._value;
+			this._value = n, t(this, this._value), this._paint(), r && this.dispatchEvent(new Event("change", { bubbles: !0 })), r && n.length === this.length && this.dispatchEvent(new CustomEvent("complete", {
+				bubbles: !0,
+				detail: n
+			}));
+		};
+		e.addEventListener("input", () => {
+			let t = e.value;
+			if (this._value.length === this.length && t.length > this._value.length && t.startsWith(this._value)) {
+				let e = this._clean(t.slice(this._value.length));
+				if (e) {
+					n(e);
+					return;
+				}
+			}
+			n(t);
+		}), e.addEventListener("paste", (e) => {
+			let t = e.clipboardData?.getData("text");
+			t != null && (e.preventDefault(), n(t));
+		});
+		for (let t of [
+			"keyup",
+			"click",
+			"blur",
+			"select"
+		]) e.addEventListener(t, () => this._paint());
+		e.addEventListener("focus", () => {
+			this._value.length === this.length && e.select(), this._paint();
+		}), this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange), this._onSelectionChange = () => {
+			document.activeElement === e && this._paint();
+		}, document.addEventListener("selectionchange", this._onSelectionChange);
+	}
+	disconnectedCallback() {
+		this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange);
+	}
+};
+//#endregion
+export { i as t };