@webority/ui-elements 0.34.0 → 0.35.0

package/dist/WuiAutocomplete-ByxnwJNQ.js

@@ -0,0 +1,283 @@
+import { t as e } from "./elementBase-Bg1xpvup.js";
+import { n as t, r as n, t as r } from "./anchorOverlay-DluGZ8ef.js";
+import { t 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";
+//#region src/WuiAutocomplete.js
+var d = class extends e {
+	static formAssociated = !0;
+	_accessibleName() {
+		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
+	}
+	static get observedAttributes() {
+		return [
+			"value",
+			"placeholder",
+			"disabled",
+			"min-chars",
+			"debounce",
+			"remote",
+			"size",
+			"aria-label",
+			"allow-custom",
+			"aria-invalid"
+		];
+	}
+	constructor() {
+		super(), this._value = "", this._label = "", this._optionsProp = null, this._loading = !1, this._active = -1, this._timer = null, this._reqSeq = 0, this._pendingSearch = null, this._typeahead = "", this._typeaheadTimer = null;
+		try {
+			this._internals = this.attachInternals();
+		} catch {
+			this._internals = null;
+		}
+	}
+	connectedCallback() {
+		if (!this._rendered) {
+			this._defaultCaptured ||= (this._defaultValue = this._value, !0), this.render();
+			return;
+		}
+		if (this._bindGlobal?.(), this._pendingSearch) {
+			let { query: e, seq: t } = this._pendingSearch;
+			clearTimeout(this._timer), this._timer = setTimeout(() => this._fireSearch(e, t), this._debounceMs);
+		}
+	}
+	formResetCallback() {
+		this.value = this._defaultValue || "";
+	}
+	attributeChangedCallback(e, t, n) {
+		if (e === "value") {
+			this.value = n;
+			return;
+		}
+		if (e === "aria-invalid") {
+			this._syncInvalid();
+			return;
+		}
+		this._rendered && this.render();
+	}
+	_syncInvalid() {
+		let e = this.querySelector(".search-select-control");
+		e && (this.hasAttribute("aria-invalid") ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
+	}
+	get value() {
+		return this._value;
+	}
+	set value(e) {
+		this._value = e == null ? "" : String(e), i(this, this._value);
+		let t = this._readOptions().find((e) => String(e.value) === this._value);
+		this._label = t ? p(t.label) : "", this._syncInput(), this._renderOptions("");
+	}
+	set options(e) {
+		this._optionsProp = Array.isArray(e) ? e : [];
+		let t = this._readOptions().find((e) => String(e.value) === this._value);
+		t && (this._label = p(t.label)), this._renderOptions(), this._syncInput();
+	}
+	get options() {
+		return this._readOptions();
+	}
+	set loading(e) {
+		this._loading = !!e, this._renderLoading(), this._renderOptions();
+	}
+	get loading() {
+		return this._loading;
+	}
+	get _remote() {
+		return this.hasAttribute("remote");
+	}
+	get _allowCustom() {
+		return this.hasAttribute("allow-custom");
+	}
+	_matchesKnownOption(e) {
+		let t = e.toLowerCase();
+		return this._readOptions().some((e) => p(e.label).toLowerCase() === t || String(e.value ?? "").toLowerCase() === t);
+	}
+	get _minChars() {
+		return Math.max(0, Number(this.getAttribute("min-chars")) || +!!this._remote);
+	}
+	get _debounceMs() {
+		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;
+		let e = [...this.querySelectorAll(":scope > wui-option")];
+		e.length && (this._declared = e.map((e) => ({
+			value: e.getAttribute("value") ?? e.textContent.trim(),
+			label: e.innerHTML,
+			icon: e.getAttribute("icon") || void 0,
+			[u]: !0,
+			selected: e.hasAttribute("selected")
+		})));
+	}
+	_readOptions() {
+		return this._optionsProp ? this._optionsProp : (this._snapshotDeclared(), this._declared || []);
+	}
+	render() {
+		this._snapshotDeclared();
+		let e = this.getAttribute("placeholder") || "Search…", t = this.getAttribute("size"), n = t === "sm" ? " search-select-sm" : t === "lg" ? " search-select-lg" : "";
+		this.id ||= `wui-autocomplete-${Math.random().toString(36).slice(2, 9)}`;
+		let r = `${this.id}-listbox`;
+		this._listboxId = r, this.innerHTML = `
+      <div class="search-select${n}">
+        <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${f(r)}" aria-label="${f(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}>
+          <input class="search-select-input search-select-ac-input" placeholder="${f(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""} />
+          <span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
+          <button type="button" class="search-select-clear" aria-label="Clear" hidden>${a("x")}</button>
+        </div>
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${f(r)}" tabindex="-1" hidden>
+          <div class="search-select-options"></div>
+          <div class="search-select-empty" hidden>No matches</div>
+          <div class="search-select-hint" hidden>Type to search…</div>
+        </div>
+      </div>`, this._rendered = !0, i(this, this._value), this._wire(), this._syncInput(), this._renderOptions();
+	}
+	_refs() {
+		return {
+			control: this.querySelector(".search-select-control"),
+			input: this.querySelector(".search-select-ac-input"),
+			menu: this.querySelector(".search-select-menu"),
+			spinner: this.querySelector(".search-select-spinner"),
+			clear: this.querySelector(".search-select-clear"),
+			optionsWrap: this.querySelector(".search-select-options"),
+			empty: this.querySelector(".search-select-empty"),
+			hint: this.querySelector(".search-select-hint")
+		};
+	}
+	_optionEls() {
+		return [...this.querySelectorAll(".search-select-option")];
+	}
+	_syncInput() {
+		let { input: e, clear: t } = this._refs();
+		e && document.activeElement !== e && (e.value = this._label), t && (t.hidden = !this._value && !e?.value);
+	}
+	_renderLoading() {
+		let { spinner: e } = this._refs();
+		e && (e.hidden = !this._loading);
+	}
+	_renderOptions(e) {
+		let t = this._refs();
+		if (!t.optionsWrap) return;
+		let n = e ?? (t.input ? t.input.value : ""), r = n.trim().toLowerCase(), i = this._readOptions();
+		!this._remote && r && (i = i.filter((e) => p(e.label).toLowerCase().includes(r)));
+		let a = n.trim(), o = this._allowCustom && a && !this._matchesKnownOption(a) ? [...i, {
+			value: a,
+			custom: !0
+		}] : i, s = this._listboxId || `${this.id || "wui-autocomplete"}-listbox`;
+		t.optionsWrap.innerHTML = o.map((e, t) => {
+			let n = `${s}-opt-${t}`;
+			if (e.custom) {
+				let t = `Add “${c(e.value)}”`;
+				return `<button type="button" role="option" id="${f(n)}" class="search-select-option search-select-option-custom" data-value="${f(e.value)}" data-custom="true" aria-selected="false">${t}</button>`;
+			}
+			let r = String(e.value) === String(this._value);
+			return `<button type="button" role="option" id="${f(n)}" class="search-select-option${r ? " selected" : ""}" data-value="${f(e.value)}" aria-selected="${r}">${l(e)}</button>`;
+		}).join(""), this._active = -1, t.control?.removeAttribute("aria-activedescendant");
+		let u = r.length < this._minChars;
+		t.hint && (t.hint.hidden = !(this._remote && u && !i.length)), t.empty && (t.empty.hidden = this._loading || o.length > 0 || this._remote && u), this._reanchor?.();
+	}
+	_wire() {
+		this._teardown();
+		let e = this._refs();
+		if (!e.control || !e.input) return;
+		let a = () => r(e.control, e.menu, { matchWidth: !0 }), c = () => this._optionEls().filter((e) => !e.hidden), l = (t, { reveal: n = !0 } = {}) => {
+			let r = c();
+			this._active = t, o(e.optionsWrap, t >= 0 && r[t] || null), t >= 0 && r[t] ? (n && r[t].scrollIntoView({ block: "nearest" }), e.control.setAttribute("aria-activedescendant", r[t].id)) : e.control.removeAttribute("aria-activedescendant");
+		}, u = () => !e.menu.hidden, d = () => {
+			u() && a();
+		}, f = () => {
+			e.menu.hidden = !1, e.control.setAttribute("aria-expanded", "true"), e.control.classList.add("open"), a(), t(this, d), this._renderOptions();
+		}, m = () => {
+			e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), l(-1), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "", this._syncInput(), n(this);
+		}, h = (t) => {
+			let n = t.dataset.custom === "true";
+			this._value = t.dataset.value, this._label = n ? t.dataset.value : p(t.innerHTML), i(this, this._value), e.input.value = this._label, this.dispatchEvent(new CustomEvent("change", {
+				bubbles: !0,
+				detail: { isCustom: n }
+			})), m(), e.input.focus();
+		}, g = (t) => {
+			this._value = t, this._label = t, i(this, t), e.input.value = t, this.dispatchEvent(new CustomEvent("change", {
+				bubbles: !0,
+				detail: { isCustom: !0 }
+			})), m();
+		}, _ = () => {
+			let t = e.input.value;
+			if (e.clear && (e.clear.hidden = !t), u() || f(), this._remote) {
+				if (this._renderOptions(t), clearTimeout(this._timer), t.trim().length < this._minChars) {
+					this._pendingSearch = null;
+					return;
+				}
+				let e = ++this._reqSeq;
+				this._pendingSearch = {
+					query: t,
+					seq: e
+				}, this._timer = setTimeout(() => this._fireSearch(t, e), this._debounceMs);
+			} else this._renderOptions(t);
+		};
+		this._navHandler = s({
+			getVisibleOptions: c,
+			getActive: () => this._active,
+			setActive: (e) => l(e),
+			onEnter: (t, n) => {
+				if (n[this._active]) h(n[this._active]);
+				else if (this._allowCustom) {
+					let t = e.input.value.trim();
+					t && !this._matchesKnownOption(t) && g(t);
+				}
+			},
+			onEscape: () => {
+				this._navHandler.clearTypeahead(), m();
+			}
+		});
+		let v = (e) => {
+			let t = e.target?.tagName === "INPUT" || e.target?.tagName === "TEXTAREA";
+			if (e.key === "ArrowDown") {
+				e.preventDefault(), u() || f();
+				let t = c();
+				l(Math.min(this._active + 1, t.length - 1));
+				return;
+			} else if (e.key === "ArrowUp") {
+				e.preventDefault(), l(Math.max(this._active - 1, 0));
+				return;
+			} else if ((e.key === "Home" || e.key === "End" || e.key === "PageDown" || e.key === "PageUp") && (!u() || t)) return;
+			else if (e.key.length === 1 && (e.ctrlKey || e.metaKey || e.altKey || !u() || e.target?.tagName === "INPUT" || e.target?.tagName === "TEXTAREA") && (!u() || e.target?.tagName === "INPUT" || e.target?.tagName === "TEXTAREA")) return;
+			this._navHandler.handler(e);
+		};
+		e.input.addEventListener("focus", () => f()), e.input.addEventListener("input", _), e.input.addEventListener("keydown", v), e.menu.addEventListener("keydown", v), e.input.addEventListener("blur", (t) => {
+			if (!this._allowCustom || t.relatedTarget && this.contains(t.relatedTarget)) return;
+			let n = e.input.value.trim();
+			!n || n === this._label || this._matchesKnownOption(n) || g(n);
+		}), e.optionsWrap.addEventListener("click", (e) => {
+			let t = e.target.closest(".search-select-option");
+			t && h(t);
+		}), e.optionsWrap.addEventListener("mousemove", (e) => {
+			let t = e.target.closest(".search-select-option");
+			t && !t.classList.contains("is-active") && l(this._optionEls().indexOf(t), { reveal: !1 });
+		}), e.optionsWrap.addEventListener("mouseleave", () => l(-1)), e.clear?.addEventListener("click", () => {
+			this._value = "", this._label = "", i(this, ""), e.input.value = "", e.clear.hidden = !0, this._renderOptions(""), this.dispatchEvent(new Event("change", { bubbles: !0 })), e.input.focus();
+		}), this._bindGlobal = () => {
+			this._teardown(), this._onDocClick = (e) => {
+				u() && !this.contains(e.target) && m();
+			}, document.addEventListener("click", this._onDocClick), u() && t(this, d);
+		}, this._bindGlobal();
+	}
+	_fireSearch(e, t) {
+		this._pendingSearch = null, this.dispatchEvent(new CustomEvent("search", {
+			bubbles: !0,
+			detail: {
+				query: e,
+				seq: t
+			}
+		}));
+	}
+	_teardown() {
+		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), n(this), clearTimeout(this._timer), this._navHandler?.teardown();
+	}
+	disconnectedCallback() {
+		this._teardown();
+	}
+}, f = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), p = (e) => String(e ?? "").replace(/<[^>]*>/g, "");
+//#endregion
+export { d as t };

package/dist/WuiCommandPalette-CtZ04JxZ.js

@@ -0,0 +1,130 @@
+import { t as e } from "./elementBase-Bg1xpvup.js";
+import { n as t } from "./optionLabel-Dn-I7zyp.js";
+import { t as n } from "./textMatch-DEUjlkdy.js";
+//#region src/WuiCommandPalette.js
+var r = "[role=\"option\"]", i = "No results", a = class extends e {
+	static get observedAttributes() {
+		return [
+			"filter",
+			"highlight",
+			"empty-text"
+		];
+	}
+	constructor() {
+		super(), this._activeId = null, this._lastQuery = null, this._lastIds = null, this._userChose = !1, this._onKeyDown = (e) => this._handleKeyDown(e), this._onClick = (e) => {
+			let t = this._optionFrom(e.target);
+			t && this._select(t);
+		}, this._onMouseDown = (e) => {
+			this._optionFrom(e.target, !0) && e.preventDefault();
+		}, this._onMouseMove = (e) => {
+			let t = this._optionFrom(e.target);
+			t && t.id !== this._activeId && (this._userChose = !0, this._setActive(t, !1));
+		}, this._onInput = (e) => {
+			!this.hasAttribute("filter") || e.target !== this._input() || (this._applyFilter(), this.refresh());
+		};
+	}
+	connectedCallback() {
+		this._teardown(), this.addEventListener("keydown", this._onKeyDown), this.addEventListener("click", this._onClick), this.addEventListener("mousedown", this._onMouseDown), this.addEventListener("mousemove", this._onMouseMove), this.addEventListener("input", this._onInput), this.hasAttribute("filter") && this._applyFilter(), this.refresh();
+	}
+	disconnectedCallback() {
+		this._teardown();
+	}
+	attributeChangedCallback() {
+		this.isConnected && (this.hasAttribute("filter") && this._applyFilter(), this.refresh());
+	}
+	get filter() {
+		return this.hasAttribute("filter");
+	}
+	set filter(e) {
+		this.toggleAttribute("filter", !!e);
+	}
+	get highlight() {
+		return this.getAttribute("highlight") !== "false";
+	}
+	set highlight(e) {
+		this.setAttribute("highlight", e ? "true" : "false");
+	}
+	get emptyText() {
+		return this.getAttribute("empty-text") ?? i;
+	}
+	set emptyText(e) {
+		this.setAttribute("empty-text", String(e ?? ""));
+	}
+	refresh() {
+		let e = this._input(), t = e ? e.value : "", n = t !== this._lastQuery;
+		this._lastQuery = t;
+		let r = this._selectableOptions(), i = r.map((e) => e.id).join("\n"), a = i !== this._lastIds;
+		this._lastIds = i;
+		let o = !n && (this._userChose || !a) ? r.find((e) => e.id === this._activeId) : null;
+		o || (this._userChose = !1), this._setActive(o ?? r[0] ?? null, n);
+	}
+	_input() {
+		return this.querySelector("[role=\"combobox\"]");
+	}
+	_optionFrom(e, t = !1) {
+		let n = e?.closest?.(r);
+		return n && this.contains(n) && !this._isHidden(n) && (t || !this._isDisabled(n)) ? n : null;
+	}
+	_isDisabled(e) {
+		return e.getAttribute("aria-disabled") === "true";
+	}
+	_isHidden(e) {
+		return e.hidden || !!e.closest("[role=\"group\"]")?.hidden;
+	}
+	_selectableOptions() {
+		return [...this.querySelectorAll(r)].filter((e) => !this._isHidden(e) && !this._isDisabled(e));
+	}
+	_setActive(e, t) {
+		this._activeId = e ? e.id : null;
+		for (let t of this.querySelectorAll(r)) t.setAttribute("aria-selected", t === e ? "true" : "false");
+		let n = this._input();
+		n && (e ? n.setAttribute("aria-activedescendant", e.id) : n.removeAttribute("aria-activedescendant")), e && t && e.scrollIntoView({ block: "nearest" });
+	}
+	_move(e) {
+		let t = this._selectableOptions();
+		if (!t.length) return;
+		let n = t.findIndex((e) => e.id === this._activeId), r = n < 0 ? e > 0 ? 0 : t.length - 1 : (n + e + t.length) % t.length;
+		this._userChose = !0, this._setActive(t[r], !0);
+	}
+	_handleKeyDown(e) {
+		if (e.target === this._input()) {
+			if (e.key === "ArrowDown" || e.key === "ArrowUp") e.preventDefault(), this._move(e.key === "ArrowDown" ? 1 : -1);
+			else if (e.key === "Enter" && !e.isComposing) {
+				let t = this._selectableOptions().find((e) => e.id === this._activeId);
+				if (!t) return;
+				e.preventDefault(), this._select(t);
+			}
+		}
+	}
+	_select(e) {
+		this.dispatchEvent(new CustomEvent("wui-command-palette:select", {
+			bubbles: !0,
+			cancelable: !0,
+			detail: {
+				key: e.dataset.key ?? null,
+				groupKey: e.dataset.groupKey ?? null,
+				id: e.id
+			}
+		})) && e.dataset.href && this._navigate(e.dataset.href);
+	}
+	_navigate(e) {
+		window.location.assign(e);
+	}
+	_applyFilter() {
+		let e = this._input(), i = (e ? e.value : "").trim(), a = i.toLowerCase(), o = this.highlight, s = 0;
+		for (let e of this.querySelectorAll(r)) {
+			let r = e.querySelector(".wui-cmd-item-label"), c = e.dataset.label ?? r?.textContent ?? "", l = !a || c.toLowerCase().includes(a);
+			e.hidden = !l, l && s++, r && (r.innerHTML = n(c, o ? i : "").map((e) => e.match ? `<mark class="wui-cmd-mark">${t(e.text)}</mark>` : t(e.text)).join(""));
+		}
+		for (let e of this.querySelectorAll("[role=\"group\"]")) e.hidden = ![...e.querySelectorAll(r)].some((e) => !e.hidden);
+		let c = this.querySelector("[role=\"listbox\"]");
+		c && (c.hidden = s === 0);
+		let l = this.querySelector(".wui-cmd-empty");
+		l && (l.textContent = a && s === 0 ? this.emptyText : "");
+	}
+	_teardown() {
+		this.removeEventListener("keydown", this._onKeyDown), this.removeEventListener("click", this._onClick), this.removeEventListener("mousedown", this._onMouseDown), this.removeEventListener("mousemove", this._onMouseMove), this.removeEventListener("input", this._onInput);
+	}
+};
+//#endregion
+export { a as t };