@webority/ui-elements 0.7.1 → 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);

package/package.json

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