@svgrid/grid-wc 2.0.1 → 2.2.1

package/dist/SvGridDropdown-N9LVZsIs.js

@@ -0,0 +1,251 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { A as t, B as n, C as r, D as i, F as a, G as o, I as s, J as c, K as l, L as u, M as d, O as f, P as p, Q as m, T as h, V as g, X as _, Y as v, _ as y, a as b, b as x, d as S, et as C, k as ee, n as w, nt as T, q as E, rt as D, s as te, tt as ne, u as re, v as O } from "./client-DOa609yZ.js";
+import { n as ie, r as ae, t as k } from "./popover-WsGlvtQv.js";
+//#region ../grid/dist/SvGridDropdown.svelte
+var A = /* @__PURE__ */ e({ default: () => j }), oe = t("<span class=\"sv-grid-chip sv-grid-chip-removable svelte-13rpzh6\"> <span class=\"sv-grid-chip-remove svelte-13rpzh6\" role=\"button\">×</span></span>"), se = t("<span class=\"sv-grid-dropdown-chips svelte-13rpzh6\"></span>"), ce = t("<span class=\"sv-grid-chip svelte-13rpzh6\"> </span>"), le = t("<span class=\"sv-grid-dropdown-label svelte-13rpzh6\"> </span>"), ue = t("<input type=\"search\" class=\"sv-grid-dropdown-search\" placeholder=\"Search…\"/>"), de = t("<div class=\"sv-grid-dropdown-empty\"> </div>"), fe = t("<span class=\"sv-grid-dropdown-check\" aria-hidden=\"true\"> </span>"), pe = t("<span class=\"sv-grid-dropdown-option-chip\"> </span>"), me = t("<span class=\"sv-grid-dropdown-option-label\"> </span>"), he = t("<div role=\"option\"><!> <!></div>"), ge = t("<div class=\"sv-grid-dropdown-footer\"><button type=\"button\" class=\"sv-grid-dropdown-done\">Done</button></div>"), _e = t("<div role=\"listbox\"><!> <!> <!></div>"), ve = t("<div><button type=\"button\" aria-haspopup=\"listbox\"><!> <span class=\"sv-grid-dropdown-caret svelte-13rpzh6\" aria-hidden=\"true\">▾</span></button> <!></div>");
+function j(e, t) {
+	let p = d();
+	ne(t, !0);
+	let A = w(t, "multiple", 3, !1), j = w(t, "placeholder", 3, "Select…"), M = w(t, "renderChipsInTrigger", 3, !1), N = w(t, "searchable", 3, !1), ye = w(t, "autoOpen", 3, !0);
+	function P(e) {
+		return e >= 0 && e < u(L).length ? `${p}-opt-${e}` : void 0;
+	}
+	let F = m(() => t.options.some((e) => e.color) ? 40 : 32), I = _(""), L = m(() => !N() || !u(I).trim() ? t.options : (() => {
+		let e = u(I).trim().toLowerCase();
+		return t.options.filter((t) => t.label.toLowerCase().includes(e));
+	})()), R = _(!1), z = _(-1), B = _(null), V = _(null), H = _(null), U = _(c({
+		top: 0,
+		left: 0,
+		width: 0,
+		openUpward: !1,
+		maxHeight: 0,
+		availHeight: 0
+	})), W = m(() => Array.isArray(t.value) ? t.value : t.value == null || t.value === "" ? [] : [t.value]), be = m(() => {
+		if (u(W).length === 0) return j();
+		if (!A()) {
+			let e = u(W)[0], n = t.options.find((t) => String(t.value) === String(e));
+			return n ? n.label : String(e);
+		}
+		return `${u(W).length} selected`;
+	}), xe = m(() => {
+		if (A() || u(W).length !== 1) return;
+		let e = u(W)[0];
+		return t.options.find((t) => String(t.value) === String(e))?.color;
+	});
+	function G(e) {
+		return u(W).some((t) => String(t) === String(e.value));
+	}
+	function K(e) {
+		if (A()) {
+			let n = G(e) ? u(W).filter((t) => String(t) !== String(e.value)) : [...u(W), e.value];
+			t.onChange?.(n);
+		} else t.onChange?.(e.value), v(R, !1), t.onCommit?.();
+	}
+	function q() {
+		if (!u(R)) {
+			if (v(R, !0), u(z) < 0) {
+				let e = t.options.findIndex((e) => G(e));
+				v(z, e >= 0 ? e : 0, !0);
+			}
+			Se();
+		}
+	}
+	function Se() {
+		if (!u(V)) return;
+		let e = Math.min(t.options.length, 10) * u(F) + (A() ? 40 : 0) + 8;
+		v(U, k(u(V).getBoundingClientRect(), {
+			estimatedHeight: e,
+			clampHorizontal: !1
+		}), !0);
+	}
+	g(() => {
+		if (!u(R)) return;
+		let e = () => Se();
+		return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+		};
+	});
+	function J() {
+		v(R, !1), v(z, -1);
+	}
+	function Ce(e) {
+		if (e.stopPropagation(), e.key === "Escape") {
+			e.preventDefault(), J(), t.onCancel?.();
+			return;
+		}
+		if (e.key === "ArrowDown") {
+			if (e.preventDefault(), !u(R)) {
+				q();
+				return;
+			}
+			v(z, Math.min(u(z) + 1, t.options.length - 1), !0), Y();
+		} else if (e.key === "ArrowUp") {
+			if (e.preventDefault(), !u(R)) {
+				q();
+				return;
+			}
+			v(z, Math.max(u(z) - 1, 0), !0), Y();
+		} else if (e.key === "Home") {
+			if (!u(R)) return;
+			e.preventDefault(), v(z, 0), Y();
+		} else if (e.key === "End") {
+			if (!u(R)) return;
+			e.preventDefault(), v(z, t.options.length - 1), Y();
+		} else if (e.key === "Enter") {
+			if (e.preventDefault(), !u(R)) {
+				q();
+				return;
+			}
+			let n = t.options[u(z)];
+			n ? K(n) : A() && (J(), t.onCommit?.());
+		} else if (e.key === " " && u(R)) {
+			e.preventDefault();
+			let n = t.options[u(z)];
+			n && K(n);
+		} else e.key === "Tab" && (u(R) && J(), t.onCommit?.());
+	}
+	function Y() {
+		queueMicrotask(() => {
+			u(H) && u(H).querySelector(`[data-opt-idx="${u(z)}"]`)?.scrollIntoView({ block: "nearest" });
+		});
+	}
+	function we(e) {
+		let n = e.relatedTarget;
+		n && u(B)?.contains(n) || (u(R) && J(), t.onCommit?.());
+	}
+	function Te(e, n) {
+		n.preventDefault(), n.stopPropagation();
+		let r = u(W).filter((t) => String(t) !== String(e));
+		t.onChange?.(A() ? r : r[0] ?? null);
+	}
+	function Ee(e) {
+		ye() && (e.focus(), q());
+	}
+	g(() => {
+		if (!u(R)) return;
+		let e = (e) => {
+			let n = e.target;
+			n && (u(B)?.contains(n) || u(H)?.contains(n) || (J(), t.onCommit?.()));
+		};
+		return document.addEventListener("pointerdown", e, !0), () => document.removeEventListener("pointerdown", e, !0);
+	});
+	function X(e) {
+		return `background: color-mix(in srgb, ${e} 22%, transparent);border-color: color-mix(in srgb, ${e} 45%, transparent);color: color-mix(in srgb, ${e} 80%, var(--sg-fg, #0f172a));`;
+	}
+	var Z = ve();
+	let De;
+	var Q = o(Z);
+	let $;
+	var Oe = o(Q), ke = (e) => {
+		var s = se();
+		r(s, 21, () => u(W), (e) => String(e), (e, r) => {
+			let s = m(() => t.options.find((e) => String(e.value) === String(u(r))));
+			var c = oe(), l = o(c), d = E(l);
+			S(d, "tabindex", -1), D(c), n((e, t, n) => {
+				y(c, e), i(l, `${t ?? ""}  `), S(d, "aria-label", `Remove ${n ?? ""}`);
+			}, [
+				() => u(s)?.color ? X(u(s).color) : "",
+				() => u(s) ? u(s).label : String(u(r)),
+				() => u(s) ? u(s).label : String(u(r))
+			]), a("mousedown", d, (e) => e.preventDefault()), a("click", d, (e) => Te(u(r), e)), f(e, c);
+		}), D(s), f(e, s);
+	}, Ae = (e) => {
+		var t = ce(), r = o(t, !0);
+		D(t), n((e) => {
+			y(t, e), i(r, u(be));
+		}, [() => X(u(xe))]), f(e, t);
+	}, je = (e) => {
+		var t = le(), r = o(t, !0);
+		D(t), n(() => i(r, u(be))), f(e, t);
+	};
+	h(Oe, (e) => {
+		M() && u(W).length > 0 ? e(ke) : !A() && u(W).length === 1 && u(xe) ? e(Ae, 1) : e(je, -1);
+	}), T(2), D(Q), b(Q, (e) => v(V, e), () => u(V)), x(Q, (e) => Ee?.(e));
+	var Me = E(Q, 2), Ne = (e) => {
+		let c = m(() => t.options.length > 10), d = m(() => Math.min(u(c) ? 10 * u(F) + (A() ? 40 : 0) + 8 : Infinity, u(U).maxHeight));
+		var p = _e();
+		let g, _;
+		var C = o(p), w = (e) => {
+			var n = ue();
+			re(n), a("mousedown", n, (e) => e.stopPropagation()), a("click", n, (e) => e.stopPropagation()), a("keydown", n, (e) => {
+				e.key === "Escape" && (e.preventDefault(), v(R, !1), t.onCancel?.());
+			}), te(n, () => u(I), (e) => v(I, e)), f(e, n);
+		};
+		h(C, (e) => {
+			N() && e(w);
+		});
+		var T = E(C, 2), ne = (e) => {
+			var t = de(), r = o(t, !0);
+			D(t), n(() => i(r, N() && u(I) ? `No matches for "${u(I)}"` : "No options")), f(e, t);
+		}, k = (e) => {
+			var t = ee();
+			r(l(t), 19, () => u(L), (e) => String(e.value), (e, t, r) => {
+				let c = m(() => G(u(t)));
+				var l = he();
+				let d;
+				var p = o(l), g = (e) => {
+					var t = fe(), r = o(t, !0);
+					D(t), n(() => i(r, u(c) ? "✓" : "")), f(e, t);
+				};
+				h(p, (e) => {
+					A() && e(g);
+				});
+				var _ = E(p, 2), b = (e) => {
+					var r = pe(), a = o(r, !0);
+					D(r), n((e) => {
+						y(r, e), i(a, u(t).label);
+					}, [() => X(u(t).color)]), f(e, r);
+				}, x = (e) => {
+					var r = me(), a = o(r, !0);
+					D(r), n(() => i(a, u(t).label)), f(e, r);
+				};
+				h(_, (e) => {
+					u(t).color ? e(b) : e(x, -1);
+				}), D(l), n((e) => {
+					d = O(l, 1, "sv-grid-dropdown-option", null, d, {
+						"sv-grid-dropdown-option-selected": u(c),
+						"sv-grid-dropdown-option-highlighted": u(r) === u(z)
+					}), S(l, "id", e), S(l, "aria-selected", u(c)), S(l, "data-opt-idx", u(r));
+				}, [() => P(u(r))]), a("mousedown", l, (e) => {
+					e.preventDefault(), K(u(t));
+				}), s("mouseenter", l, () => v(z, u(r), !0)), f(e, l);
+			}), f(e, t);
+		};
+		h(T, (e) => {
+			u(L).length === 0 ? e(ne) : e(k, -1);
+		});
+		var oe = E(T, 2), se = (e) => {
+			var n = ge(), r = o(n);
+			D(n), a("mousedown", r, (e) => e.preventDefault()), a("click", r, () => {
+				J(), t.onCommit?.();
+			}), f(e, n);
+		};
+		h(oe, (e) => {
+			A() && e(se);
+		}), D(p), b(p, (e) => v(H, e), () => u(H)), x(p, (e) => ae?.(e)), x(p, (e, t) => ie?.(e, t), () => ({ up: u(U).openUpward })), n(() => {
+			g = O(p, 1, "sv-grid-dropdown-panel", null, g, { "sv-grid-dropdown-panel-fits": !u(c) }), S(p, "aria-multiselectable", A()), _ = y(p, "", _, {
+				position: "fixed",
+				top: `${u(U).top}px`,
+				left: `${u(U).left}px`,
+				width: `${u(U).width}px`,
+				"max-height": u(d) === null ? null : `${u(d)}px`,
+				"z-index": "2147483647"
+			});
+		}), a("pointerdown", p, (e) => e.stopPropagation()), a("mousedown", p, (e) => e.stopPropagation()), a("click", p, (e) => e.stopPropagation()), f(e, p);
+	};
+	h(Me, (e) => {
+		u(R) && e(Ne);
+	}), D(Z), b(Z, (e) => v(B, e), () => u(B)), n((e) => {
+		De = O(Z, 1, "sv-grid-dropdown svelte-13rpzh6", null, De, { "sv-grid-dropdown-open": u(R) }), $ = O(Q, 1, "sv-grid-dropdown-trigger svelte-13rpzh6", null, $, { "sv-grid-dropdown-trigger-chips": M() && u(W).length > 0 }), S(Q, "aria-expanded", u(R)), S(Q, "aria-activedescendant", e);
+	}, [() => u(R) ? P(u(z)) : void 0]), a("focusout", Z, we), a("click", Z, (e) => e.stopPropagation()), a("dblclick", Z, (e) => e.stopPropagation()), a("pointerdown", Z, (e) => e.stopPropagation()), a("mousedown", Z, (e) => e.stopPropagation()), a("click", Q, () => u(R) ? J() : q()), a("keydown", Q, Ce), f(e, Z), C();
+}
+p([
+	"focusout",
+	"click",
+	"dblclick",
+	"pointerdown",
+	"mousedown",
+	"keydown"
+]);
+//#endregion
+export { A as n, j as t };