@webority/ui-elements 0.37.0 → 0.38.0

package/dist/wuiHttp-BC8co934.js

@@ -0,0 +1 @@
+var e=`wui-csrf`,t=`RequestVerificationToken`,n=Object.freeze({fragment:`X-Wui-Fragment`,message:`X-Wui-Message`,redirect:`X-Wui-Redirect`,result:`X-Wui-Result`,keepOpen:`X-Wui-Keep-Open`,toastVariant:`X-Wui-Toast-Variant`}),r=Object.freeze([`ok`,`validation`,`forbidden`,`client`,`server`,`network`,`aborted`,`stale`,`session`]),i=new Set([`GET`,`HEAD`]);function a(t=document){let n=t.querySelector(`meta[name="${e}"]`),r=n?.getAttribute(`content`);return r?{header:n.getAttribute(`data-header`)||`RequestVerificationToken`,token:r}:null}var o=e=>{try{return new URL(e,window.location.href).origin===window.location.origin}catch{return!1}};function s(e){return e>=200&&e<300?`ok`:e===401?`session`:e===403?`forbidden`:e===422?`validation`:e>=400&&e<500?`client`:`server`}var c=e=>e?.name===`AbortError`;async function l(e,t={}){let r=(t.method||`GET`).toUpperCase(),l=t.navigate||(e=>window.location.assign(e)),u={Accept:`text/html`,"X-Requested-With":`XMLHttpRequest`,"X-Wui-Request":`1`,...t.headers};if(!i.has(r)&&o(e)){let e=a();e&&(u[e.header]=e.token)}let d=e=>{if(e==null)return null;try{return decodeURIComponent(e)}catch{return e}},f=(e,t=null,r=``)=>{let i=e=>t?.headers.get(e)??null;return{kind:e,ok:e===`ok`,status:t?.status??0,html:r,response:t,message:d(i(n.message)),redirect:i(n.redirect),result:i(n.result),keepOpen:i(n.keepOpen)===`1`,toastVariant:i(n.toastVariant),fragment:i(n.fragment)===`1`}},p;try{p=await fetch(e,{method:r,body:t.body,headers:u,signal:t.signal,credentials:`same-origin`})}catch(e){return f(c(e)||t.signal?.aborted?`aborted`:`network`)}let m=s(p.status);if(m===`ok`&&p.redirected&&p.headers.get(n.fragment)!==`1`&&(m=`session`),m===`session`)return l(p.status===401?p.headers.get(`Location`)||window.location.href:p.url),f(m,p);let h=``;if(m===`ok`||m===`validation`)try{h=await p.text()}catch(e){return f(c(e)||t.signal?.aborted?`aborted`:`network`,p)}return f(m,p,h)}function u(){let e=null,t=0;return{async run(n,r={}){e?.abort();let i=new AbortController;e=i;let a=++t,o=r.signal;o&&(o.aborted?i.abort():o.addEventListener(`abort`,()=>i.abort(),{once:!0}));let s=await l(n,{...r,signal:i.signal});return e===i&&(e=null),a!==t&&s.kind!==`aborted`?{...s,kind:`stale`,ok:!1}:s},abort(){e?.abort(),e=null}}}export{s as a,l as c,n as i,t as n,u as o,r,a as s,e as t};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-elements",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "description": "Webority framework-agnostic UI custom elements (<wui-*>) — the single implementation of the interactive components, styled by @webority/theme. Used natively in Razor and wrapped by @webority/ui-react.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -8,14 +8,12 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Webority/webority-ui.git",
-    "directory": "packages/elements"
-  },
   "files": [
     "dist",
-    "THIRD-PARTY-NOTICES.txt"
+    "THIRD-PARTY-NOTICES.txt",
+    "!dist/**/__tests__",
+    "!dist/**/*.test.*",
+    "!dist/**/*.map"
   ],
   "main": "./dist/ui-elements.js",
   "module": "./dist/ui-elements.js",

package/dist/WuiAutocomplete-ByxnwJNQ.js

@@ -1,283 +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 { 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

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