@webority/ui-elements 0.7.0 → 0.7.2

package/dist/ui-elements.js

@@ -69,7 +69,8 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			"debounce",
 			"remote",
 			"size",
-			"aria-label"
+			"aria-label",
+			"allow-custom"
 		];
 	}
 	constructor() {
@@ -106,6 +107,13 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	get _remote() {
 		return this.hasAttribute("remote");
 	}
+	get _allowCustom() {
+		return this.hasAttribute("allow-custom");
+	}
+	_matchesKnownOption(e) {
+		let t = e.toLowerCase();
+		return this._readOptions().some((e) => h(e.label).toLowerCase() === t || String(e.value ?? "").toLowerCase() === t);
+	}
 	get _minChars() {
 		return Math.max(0, Number(this.getAttribute("min-chars")) || +!!this._remote);
 	}
@@ -172,13 +180,22 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	_renderOptions(e) {
 		let t = this._refs();
 		if (!t.optionsWrap) return;
-		let n = (e ?? (t.input ? t.input.value : "")).trim().toLowerCase(), r = this._readOptions();
-		!this._remote && n && (r = r.filter((e) => h(e.label).toLowerCase().includes(n))), t.optionsWrap.innerHTML = r.map((e) => {
+		let n = e ?? (t.input ? t.input.value : ""), r = n.trim().toLowerCase(), i = this._readOptions();
+		!this._remote && r && (i = i.filter((e) => h(e.label).toLowerCase().includes(r)));
+		let a = n.trim(), o = this._allowCustom && a && !this._matchesKnownOption(a) ? [...i, {
+			value: a,
+			custom: !0
+		}] : i;
+		t.optionsWrap.innerHTML = o.map((e) => {
+			if (e.custom) {
+				let t = `Add “${u(e.value)}”`;
+				return `<button type="button" role="option" class="search-select-option search-select-option-custom" data-value="${m(e.value)}" data-custom="true" aria-selected="false">${t}</button>`;
+			}
 			let t = String(e.value) === String(this._value);
 			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${m(e.value)}" aria-selected="${t}">${f(e)}</button>`;
 		}).join(""), this._active = -1;
-		let i = n.length < this._minChars;
-		t.hint && (t.hint.hidden = !(this._remote && i && !r.length)), t.empty && (t.empty.hidden = this._loading || r.length > 0 || this._remote && i);
+		let s = r.length < this._minChars;
+		t.hint && (t.hint.hidden = !(this._remote && s && !i.length)), t.empty && (t.empty.hidden = this._loading || o.length > 0 || this._remote && s);
 	}
 	_wire() {
 		let e = this._refs();
@@ -193,7 +210,16 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		}, l = () => {
 			e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), r(-1), this._syncInput();
 		}, u = (t) => {
-			this._value = t.dataset.value, this._label = h(t.innerHTML), c(this, this._value), e.input.value = this._label, this.dispatchEvent(new Event("change", { bubbles: !0 })), l(), e.input.focus();
+			let n = t.dataset.custom === "true";
+			this._value = t.dataset.value, this._label = n ? t.dataset.value : h(t.innerHTML), c(this, this._value), e.input.value = this._label, this.dispatchEvent(new CustomEvent("change", {
+				bubbles: !0,
+				detail: { isCustom: n }
+			})), l(), e.input.focus();
+		}, d = (t) => {
+			this._value = t, this._label = t, c(this, t), e.input.value = t, this.dispatchEvent(new CustomEvent("change", {
+				bubbles: !0,
+				detail: { isCustom: !0 }
+			})), l();
 		};
 		e.input.addEventListener("focus", () => s()), e.input.addEventListener("input", () => {
 			let t = e.input.value;
@@ -206,9 +232,21 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 					}));
 				}, this._debounceMs);
 			} else this._renderOptions(t);
-		}), e.input.addEventListener("keydown", (e) => {
-			let t = n();
-			e.key === "ArrowDown" ? (e.preventDefault(), o() || s(), r(Math.min(this._active + 1, t.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), r(Math.max(this._active - 1, 0))) : e.key === "Enter" ? t[this._active] && (e.preventDefault(), u(t[this._active])) : e.key === "Escape" && l();
+		}), e.input.addEventListener("keydown", (t) => {
+			let i = n();
+			if (t.key === "ArrowDown") t.preventDefault(), o() || s(), r(Math.min(this._active + 1, i.length - 1));
+			else if (t.key === "ArrowUp") t.preventDefault(), r(Math.max(this._active - 1, 0));
+			else if (t.key === "Enter") {
+				if (i[this._active]) t.preventDefault(), u(i[this._active]);
+				else if (this._allowCustom) {
+					let n = e.input.value.trim();
+					n && !this._matchesKnownOption(n) && (t.preventDefault(), d(n));
+				}
+			} else t.key === "Escape" && l();
+		}), 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) || d(n);
 		}), e.optionsWrap.addEventListener("click", (e) => {
 			let t = e.target.closest(".search-select-option");
 			t && u(t);
@@ -2636,8 +2674,29 @@ var G = class extends HTMLElement {
 	".gif": "GIF",
 	".svg": "SVG",
 	".pdf": "PDF"
-}, X = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
-function Z(e) {
+}, X = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), Z = [
+	".png",
+	".jpg",
+	".jpeg",
+	".webp",
+	".gif",
+	".svg",
+	".bmp",
+	".avif",
+	".heic"
+];
+function le(e) {
+	if (!e) return !1;
+	let t = typeof e == "object" && e.type ? String(e.type).toLowerCase() : "";
+	if (t) return t.startsWith("image/");
+	let n = typeof e == "string" ? e : e.name || e.url || "", r = String(n).toLowerCase();
+	return Z.some((e) => r.endsWith(e));
+}
+function ue(e) {
+	let t = X(e);
+	return t.length ? t.every((e) => e.startsWith(".") ? Z.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
+}
+function Q(e) {
 	let t = [];
 	for (let n of X(e)) {
 		let e = ce[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
@@ -2645,25 +2704,25 @@ function Z(e) {
 	}
 	return t.length <= 1 ? t[0] || "supported" : `${t.slice(0, -1).join(", ")} or ${t[t.length - 1]}`;
 }
-function Q(e, t) {
+function de(e, t) {
 	let n = X(t);
 	if (!n.length) return !0;
 	let r = (e.type || "").toLowerCase(), i = (e.name || "").toLowerCase();
 	return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (se[e] || []).some((e) => i.endsWith(e)));
 }
-function le(e, t = {}) {
+function fe(e, t = {}) {
 	if (!e) return null;
 	let n = t.accept === void 0 ? Y : t.accept, r = t.maxSizeMb || 5;
-	return Q(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${Z(n)} file.`;
+	return de(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${Q(n)} file.`;
 }
 //#endregion
 //#region src/index.js
 var $ = (e, t) => {
 	typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
 };
-function ue() {
+function pe() {
 	$("wui-select", q), $("wui-phone", G), $("wui-datepicker", w), $("wui-date-range", M), $("wui-autocomplete", p), $("wui-multiselect", N), $("wui-otp", F), $("wui-status-icon", n);
 }
-ue();
+pe();
 //#endregion
-export { Y as DEFAULT_IMAGE_ACCEPT, oe as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, p as WuiAutocomplete, w as WuiDatePicker, M as WuiDateRange, N as WuiMultiSelect, F as WuiOtp, G as WuiPhone, q as WuiSelect, n as WuiStatusIcon, Z as acceptLabel, ue as defineWeborityElements, Q as matchesAccept, le as validateFile };
+export { Y as DEFAULT_IMAGE_ACCEPT, oe as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, p as WuiAutocomplete, w as WuiDatePicker, M as WuiDateRange, N as WuiMultiSelect, F as WuiOtp, G as WuiPhone, q as WuiSelect, n as WuiStatusIcon, Q as acceptLabel, pe as defineWeborityElements, le as isImageFile, ue as isImageOnlyAccept, de as matchesAccept, fe as validateFile };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-elements",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "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",