@webority/ui-elements 0.36.0 → 0.38.0

package/dist/WuiMultiSelect-BrCGRNCt.js

@@ -1,416 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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 };