@webority/ui-elements 0.33.0 → 0.35.0

package/dist/WuiSortable-JjJqstSU.js

@@ -0,0 +1,280 @@
+import { t as e } from "./elementBase-Bg1xpvup.js";
+import { n as t } from "./formMirror-jGf5M4gk.js";
+//#region src/WuiSortable.js
+var n = /* @__PURE__ */ new Set(), r = ".wui-sortable-handle", i = "a[href],button,input,select,textarea,label,summary,[contenteditable='true'],[role='button'],[role='link']", a = 4, o = 8, s = 250, c = 48, l = 18, u = class extends e {
+	static get observedAttributes() {
+		return ["name", "disabled"];
+	}
+	constructor() {
+		super(), this._drag = null, this._kb = null, this._moving = !1, this.controlled = !1, this._observer = null, this._onPointerDown = this._onPointerDown.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onFocusOut = this._onFocusOut.bind(this), this._onDragStart = (e) => e.preventDefault(), this._onDocMove = this._onDocMove.bind(this), this._onDocUp = this._onDocUp.bind(this), this._onDocCancel = this._onDocCancel.bind(this), this._onDocKey = this._onDocKey.bind(this), this._onDocTouchMove = (e) => {
+			this._drag?.started && e.preventDefault();
+		}, this._onSelectStart = (e) => e.preventDefault(), this._scrollTick = this._scrollTick.bind(this);
+	}
+	connectedCallback() {
+		n.add(this), this.addEventListener("pointerdown", this._onPointerDown), this.addEventListener("keydown", this._onKeyDown), this.addEventListener("focusout", this._onFocusOut), this.addEventListener("dragstart", this._onDragStart), this._observer = new MutationObserver(() => this._syncMirrors()), this._observer.observe(this, { childList: !0 }), this._syncMirrors();
+	}
+	disconnectedCallback() {
+		n.delete(this), this.removeEventListener("pointerdown", this._onPointerDown), this.removeEventListener("keydown", this._onKeyDown), this.removeEventListener("focusout", this._onFocusOut), this.removeEventListener("dragstart", this._onDragStart), this._observer?.disconnect(), this._observer = null, this._abort();
+	}
+	attributeChangedCallback(e) {
+		e === "disabled" && this._abort(), this.isConnected && this._syncMirrors();
+	}
+	get order() {
+		return this._items().map((e) => e.getAttribute("data-id"));
+	}
+	set order(e) {
+		if (this._drag?.started || this._kb) return;
+		let t = this._items(), n = new Map(t.map((e) => [e.getAttribute("data-id"), e])), r = [];
+		for (let t of e ?? []) {
+			let e = n.get(String(t));
+			e && !r.includes(e) && r.push(e);
+		}
+		[...r, ...t.filter((e) => !r.includes(e))].forEach((e, t) => {
+			let n = this._items()[t];
+			n !== e && this.insertBefore(e, n);
+		}), this._syncMirrors();
+	}
+	_items() {
+		return [...this.querySelectorAll(":scope > [data-id]")];
+	}
+	_itemFrom(e) {
+		let t = e;
+		for (; t && t.parentElement !== this;) t = t.parentElement;
+		return t?.hasAttribute("data-id") ? t : null;
+	}
+	_itemDisabled(e) {
+		return e.hasAttribute("data-disabled");
+	}
+	_horizontal() {
+		return this.getAttribute("orientation") === "horizontal";
+	}
+	_syncMirrors() {
+		t(this, this.order);
+	}
+	_insertAt(e, t) {
+		let n = this._items();
+		if (n.indexOf(e) === t) return;
+		let r = n.filter((t) => t !== e), i = r[t] ?? null;
+		i ? this.insertBefore(e, i) : r.length > 0 ? r[r.length - 1].after(e) : this.appendChild(e);
+	}
+	_indexFor(e, t, n) {
+		let r = this._items().filter((t) => t !== e), i = this._horizontal();
+		for (let e = 0; e < r.length; e++) {
+			let a = r[e].getBoundingClientRect();
+			if (i ? n < a.top || n <= a.bottom && t < a.left + a.width / 2 : n < a.top + a.height / 2) return e;
+		}
+		return r.length;
+	}
+	_peers() {
+		let e = this.getAttribute("group");
+		return [...n].filter((t) => t === this || e && t.getAttribute("group") === e && !t.hasAttribute("disabled"));
+	}
+	_labelOf(e) {
+		return e.getAttribute("data-label") || e.textContent.replace(/\s+/g, " ").trim() || e.getAttribute("data-id");
+	}
+	_announce(e) {
+		let t = this.querySelector(":scope > .wui-sortable-live");
+		t || (t = document.createElement("div"), t.className = "wui-sortable-live", t.setAttribute("role", "status"), t.setAttribute("aria-live", "polite"), t.setAttribute("aria-atomic", "true"), this.appendChild(t)), t.textContent = e;
+	}
+	_position(e) {
+		let t = this._items();
+		return `position ${t.indexOf(e) + 1} of ${t.length}`;
+	}
+	_onPointerDown(e) {
+		if (this._drag || this._kb || this.hasAttribute("disabled") || e.pointerType === "mouse" && e.button !== 0) return;
+		let t = this._itemFrom(e.target);
+		if (!t || this._itemDisabled(t)) return;
+		let n = t.querySelector(`:scope > ${r}`), c = !!n && n.contains(e.target);
+		if (this.hasAttribute("handle") && !c) return;
+		if (!c) {
+			let n = e.target.closest?.(i);
+			if (n && n !== t && t.contains(n)) return;
+		}
+		let l = e.pointerType === "touch" && !c, u = {
+			item: t,
+			pointerId: e.pointerId,
+			startX: e.clientX,
+			startY: e.clientY,
+			x: e.clientX,
+			y: e.clientY,
+			slop: e.pointerType === "touch" ? o : a,
+			ready: !l,
+			started: !1,
+			timer: null,
+			raf: 0,
+			list: this,
+			ghost: null
+		};
+		this._drag = u, l && (u.timer = setTimeout(() => {
+			u.timer = null, u.ready = !0, this._begin();
+		}, s)), document.addEventListener("pointermove", this._onDocMove), document.addEventListener("pointerup", this._onDocUp), document.addEventListener("pointercancel", this._onDocCancel), document.addEventListener("keydown", this._onDocKey, !0), document.addEventListener("touchmove", this._onDocTouchMove, { passive: !1 });
+	}
+	_onDocMove(e) {
+		let t = this._drag;
+		if (!(!t || e.pointerId !== t.pointerId)) {
+			if (t.x = e.clientX, t.y = e.clientY, !t.started) {
+				let e = Math.hypot(t.x - t.startX, t.y - t.startY);
+				if (!t.ready) {
+					e > t.slop && this._finish(!0);
+					return;
+				}
+				if (e < t.slop || (this._begin(), !this._drag?.started)) return;
+			}
+			e.preventDefault?.(), this._moveGhost(), this._update();
+		}
+	}
+	_onDocUp(e) {
+		this._drag && e.pointerId === this._drag.pointerId && this._finish(!1);
+	}
+	_onDocCancel(e) {
+		this._drag && e.pointerId === this._drag.pointerId && this._finish(!0);
+	}
+	_onDocKey(e) {
+		e.key !== "Escape" || !this._drag || (e.preventDefault(), e.stopPropagation(), this._finish(!0));
+	}
+	_begin() {
+		let e = this._drag;
+		if (!e || e.started) return;
+		e.started = !0;
+		let t = e.item.getBoundingClientRect();
+		e.offsetX = e.startX - t.left, e.offsetY = e.startY - t.top, e.fromIndex = this._items().indexOf(e.item);
+		let n = e.item.cloneNode(!0);
+		for (let e of [n, ...n.querySelectorAll("[id],[data-id]")]) e.removeAttribute("id"), e.removeAttribute("data-id");
+		n.classList.add("wui-sortable-ghost"), n.setAttribute("aria-hidden", "true"), n.inert = !0, n.style.width = `${t.width}px`, n.style.height = `${t.height}px`, e.ghost = n, e.item.classList.add("wui-sortable-dragging"), document.body.appendChild(n), document.documentElement.classList.add("wui-sortable-active"), document.addEventListener("selectstart", this._onSelectStart), this._moveGhost(), e.raf = requestAnimationFrame(this._scrollTick), this._emit(this, "wui-sortable:start", { id: e.item.getAttribute("data-id") });
+	}
+	_moveGhost() {
+		let e = this._drag;
+		e?.ghost && (e.ghost.style.transform = `translate(${e.x - e.offsetX}px, ${e.y - e.offsetY}px)`);
+	}
+	_update() {
+		let e = this._drag;
+		if (!e?.started) return;
+		let t = e.list;
+		for (let n of this._peers()) {
+			let r = n.getBoundingClientRect();
+			if (e.x >= r.left && e.x <= r.right && e.y >= r.top && e.y <= r.bottom) {
+				t = n;
+				break;
+			}
+		}
+		let n = t._indexFor(e.item, e.x, e.y);
+		(t !== e.list || n !== t._items().indexOf(e.item)) && t._insertAt(e.item, n), e.list = t;
+	}
+	_scrollTick() {
+		let e = this._drag;
+		if (!e?.started) return;
+		let t = f(e.list), n = t ? t.getBoundingClientRect() : null, r = Math.max(n?.top ?? 0, 0), i = Math.min(n?.bottom ?? window.innerHeight, window.innerHeight), a = Math.max(n?.left ?? 0, 0), o = Math.min(n?.right ?? window.innerWidth, window.innerWidth), s = d(e.y, r, i), c = d(e.x, a, o);
+		(c || s) && (t ? (t.scrollTop += s, t.scrollLeft += c) : window.scrollBy(c, s), this._update()), e.raf = requestAnimationFrame(this._scrollTick);
+	}
+	_finish(e) {
+		let t = this._drag;
+		if (!t || (this._drag = null, clearTimeout(t.timer), cancelAnimationFrame(t.raf), document.removeEventListener("pointermove", this._onDocMove), document.removeEventListener("pointerup", this._onDocUp), document.removeEventListener("pointercancel", this._onDocCancel), document.removeEventListener("keydown", this._onDocKey, !0), document.removeEventListener("touchmove", this._onDocTouchMove), document.removeEventListener("selectstart", this._onSelectStart), !t.started)) return;
+		t.ghost?.remove(), document.documentElement.classList.remove("wui-sortable-active"), t.item.classList.remove("wui-sortable-dragging");
+		let n = t.item.getAttribute("data-id");
+		e ? (this._insertAt(t.item, t.fromIndex), this._syncMirrors(), t.list !== this && t.list._syncMirrors()) : this._settle(t.item, this, t.fromIndex, t.list), this._emit(this, "wui-sortable:end", {
+			id: n,
+			cancelled: e
+		});
+	}
+	_settle(e, t, n, r) {
+		let i = r._items().indexOf(e);
+		if (r === t && i === n) return;
+		let a = e.getAttribute("data-id"), o = r.order, s = r !== t, c = t.order;
+		s && (t.controlled || r.controlled) && t._insertAt(e, n), t._syncMirrors(), r._syncMirrors();
+		let l = r._labelOf(e), u = s && r.getAttribute("aria-label") ? ` to ${r.getAttribute("aria-label")}` : "", d = {
+			id: a,
+			fromIndex: n,
+			toIndex: i,
+			from: t,
+			to: r
+		};
+		s && this._emit(t, "wui-sortable:change", {
+			...d,
+			ids: c
+		}), this._emit(r, "wui-sortable:change", {
+			...d,
+			ids: o
+		}), r._announce(`${l} moved${u}, position ${i + 1} of ${o.length}.`);
+	}
+	_emit(e, t, n) {
+		e.dispatchEvent(new CustomEvent(t, {
+			bubbles: !0,
+			detail: n
+		}));
+	}
+	_abort() {
+		this._drag && this._finish(!0), this._kb && this._dropKeyboard(!0);
+	}
+	_onKeyDown(e) {
+		if (this.hasAttribute("disabled")) return;
+		let t = e.target.closest?.(r), n = t && t.parentElement?.parentElement === this ? t.parentElement : null;
+		if (!n || this._itemDisabled(n) || this._drag) return;
+		let i = e.key;
+		if (!this._kb) {
+			if (i !== " " && i !== "Enter") return;
+			e.preventDefault(), this._liftKeyboard(n, t);
+			return;
+		}
+		if (this._kb.item === n) {
+			if (i === " " || i === "Enter") e.preventDefault(), this._dropKeyboard(!1);
+			else if (i === "Escape") e.preventDefault(), e.stopPropagation(), this._dropKeyboard(!0);
+			else if ([
+				"ArrowUp",
+				"ArrowLeft",
+				"ArrowDown",
+				"ArrowRight",
+				"Home",
+				"End"
+			].includes(i)) {
+				e.preventDefault();
+				let r = this._items(), a = r.indexOf(n), o = r.length - 1, s = i === "Home" ? 0 : i === "End" ? o : Math.max(0, Math.min(o, a + (i === "ArrowUp" || i === "ArrowLeft" ? -1 : 1)));
+				if (s === a) {
+					this._announce(`${this._labelOf(n)} is already ${a === 0 ? "first" : "last"}, ${this._position(n)}.`);
+					return;
+				}
+				this._moveFocused(() => this._insertAt(n, s), t), this._announce(`${this._labelOf(n)} moved to ${this._position(n)}.`);
+			}
+		}
+	}
+	_onFocusOut(e) {
+		!this._kb || this._moving || e.relatedTarget && this._kb.handle.contains(e.relatedTarget) || this._dropKeyboard(!1);
+	}
+	_liftKeyboard(e, t) {
+		this._kb = {
+			item: e,
+			handle: t,
+			fromIndex: this._items().indexOf(e)
+		}, t.setAttribute("aria-pressed", "true"), this._announce(`${this._labelOf(e)} lifted, ${this._position(e)}. Use the arrow keys to move it, Space to drop it, Escape to cancel.`);
+	}
+	_dropKeyboard(e) {
+		let t = this._kb;
+		if (t) {
+			if (this._kb = null, t.handle.removeAttribute("aria-pressed"), e) {
+				this._moveFocused(() => this._insertAt(t.item, t.fromIndex), t.handle), this._announce(`Reorder cancelled. ${this._labelOf(t.item)} is back at ${this._position(t.item)}.`);
+				return;
+			}
+			if (this._items().indexOf(t.item) === t.fromIndex) {
+				this._announce(`${this._labelOf(t.item)} dropped, ${this._position(t.item)}.`);
+				return;
+			}
+			this._settle(t.item, this, t.fromIndex, this);
+		}
+	}
+	_moveFocused(e, t) {
+		this._moving = !0;
+		let n = this.contains(document.activeElement);
+		e(), n && document.activeElement !== t && t.focus(), this._moving = !1;
+	}
+};
+function d(e, t, n) {
+	return e < t + c ? -Math.ceil(l * Math.min(1, (t + c - e) / c)) : e > n - c ? Math.ceil(l * Math.min(1, (e - (n - c)) / c)) : 0;
+}
+function f(e) {
+	for (let t = e.parentElement; t && t !== document.body && t !== document.documentElement; t = t.parentElement) {
+		let e = getComputedStyle(t), n = /(auto|scroll)/.test(e.overflowY) && t.scrollHeight > t.clientHeight, r = /(auto|scroll)/.test(e.overflowX) && t.scrollWidth > t.clientWidth;
+		if (n || r) return t;
+	}
+	return null;
+}
+//#endregion
+export { u as t };

package/dist/WuiTagInput-D1ay3OcL.js

@@ -0,0 +1,158 @@
+import { t as e } from "./elementBase-Bg1xpvup.js";
+import { n as t } from "./formMirror-jGf5M4gk.js";
+import { t as n } from "./iconGlyphs.g-Cpg1BUHm.js";
+import { i as r, n as i, r as a, t as o } from "./tokenCommit-VWz-2jEf.js";
+//#region src/WuiTagInput.js
+var s = class extends e {
+	static formAssociated = !0;
+	_accessibleName() {
+		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Add tags";
+	}
+	static get observedAttributes() {
+		return [
+			"placeholder",
+			"disabled",
+			"size",
+			"max-tags",
+			"aria-label",
+			"separators",
+			"allow-duplicates",
+			"aria-invalid"
+		];
+	}
+	constructor() {
+		super(), this._values = [], this._draftText = "";
+		try {
+			this._internals = this.attachInternals();
+		} catch {
+			this._internals = null;
+		}
+	}
+	connectedCallback() {
+		if (!this._rendered) {
+			if (!this._valuesInit && !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-tag")].map((e) => 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._wire();
+	}
+	formResetCallback() {
+		this.values = (this._defaultValues || []).slice(), this._draftText = "";
+		let e = this.querySelector("[data-input]");
+		e && (e.value = "");
+	}
+	attributeChangedCallback(e) {
+		if (e === "aria-invalid") {
+			this._syncInvalid();
+			return;
+		}
+		if (this._rendered) {
+			if (e === "separators" || e === "allow-duplicates") {
+				this._wire();
+				return;
+			}
+			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 values() {
+		return this._values.slice();
+	}
+	set values(e) {
+		this._values = Array.isArray(e) ? e.map(String) : [], t(this, this._values), this._rendered && this._renderControl();
+	}
+	render() {
+		let e = this.getAttribute("size"), n = e === "sm" ? " search-select-sm" : e === "lg" ? " search-select-lg" : "";
+		t(this, this._values), this.innerHTML = `
+      <div class="search-select${n}">
+        <div class="input search-select-control search-select-multi"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
+          <div class="ms-chips" data-chips><input type="text" class="ms-input" data-input aria-label="${l(this._accessibleName())}" placeholder="${l(this.getAttribute("placeholder") || "Add…")}" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""}/></div>
+        </div>
+      </div>`, this._rendered = !0, t(this, this._values), this._renderControl(), this._wire();
+	}
+	_renderControl() {
+		let e = this.querySelector("[data-chips]");
+		if (e) {
+			for (let t of e.querySelectorAll(":scope > .chip")) t.remove();
+			this._values.length && e.querySelector("[data-input]").insertAdjacentHTML("beforebegin", this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${c(e)}</span><button type="button" class="chip-remove" data-remove="${l(e)}" aria-label="Remove ${l(e)}">${n("x")}</button></span>`).join(""));
+		}
+	}
+	_wire() {
+		this._teardown();
+		let e = this.querySelector(".search-select-control"), n = this.querySelector("[data-input]");
+		if (!e || !n) return;
+		let s = () => this.hasAttribute("disabled"), c = (this.getAttribute("separators") || "enter,comma").split(",").map((e) => e.trim()), l = this.getAttribute("max-tags"), u = this.hasAttribute("allow-duplicates"), d = new Set(c.map(a).filter(Boolean)), f = () => {
+			t(this, this._values), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+		}, p = (e) => {
+			let t = e.trim();
+			if (!t || l && this._values.length >= parseInt(l, 10)) return;
+			let n = u ? t : t.toLowerCase();
+			(!this._values.some((e) => u ? e === t : e.toLowerCase() === n) || u) && (this._values.push(t), this._renderControl(), f());
+		}, m = (e) => {
+			this._values = this._values.filter((t) => t !== e), this._renderControl(), f();
+		}, h = (e) => {
+			if (e.key === "Enter" && d.has("Enter")) {
+				e.preventDefault(), p(n.value), n.value = "";
+				return;
+			}
+			if (e.key === "," && d.has(",")) {
+				e.preventDefault(), p(n.value.replace(/,+$/, "")), n.value = "";
+				return;
+			}
+			if (e.key === " " && d.has(" ")) {
+				let t = n.value.trim();
+				t && (e.preventDefault(), p(t), n.value = "");
+				return;
+			}
+			if (e.key === "Tab" && d.has("Tab")) {
+				e.preventDefault(), p(n.value), n.value = "";
+				return;
+			}
+			e.key === "Backspace" && !n.value && this._values.length && (e.preventDefault(), m(this._values[this._values.length - 1])), e.key === "Escape" && (n.value = "");
+		}, g = (e) => {
+			e.preventDefault();
+			let t = e.clipboardData.getData("text/plain"), a = [];
+			for (let e of c) {
+				let n = i(e) ?? e;
+				if (o(t, [n])) {
+					a.push(...r(t, [n]));
+					break;
+				}
+			}
+			a.length || a.push(t.trim());
+			for (let e of a) if (p(e), l && this._values.length >= parseInt(l, 10)) break;
+			n.value = "";
+		};
+		this._onControlClick = (e) => {
+			if (s()) return;
+			let t = e.target.closest("[data-remove]");
+			if (t) {
+				e.stopPropagation(), m(t.dataset.remove), n.focus();
+				return;
+			}
+			n.focus();
+		}, this._onInputKey = h, this._onInputPaste = g, e.addEventListener("click", this._onControlClick), n.addEventListener("keydown", this._onInputKey), n.addEventListener("paste", this._onInputPaste), this._onDocClick = (e) => {
+			this.contains(e.target) || n.blur();
+		}, document.addEventListener("click", this._onDocClick);
+	}
+	_teardown() {
+		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null);
+		let e = this.querySelector(".search-select-control"), t = this.querySelector("[data-input]");
+		e && this._onControlClick && e.removeEventListener("click", this._onControlClick), t && this._onInputKey && (t.removeEventListener("keydown", this._onInputKey), t.removeEventListener("paste", this._onInputPaste));
+	}
+	disconnectedCallback() {
+		this._teardown();
+	}
+}, c = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), l = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+//#endregion
+export { s as t };