solid-ui 3.1.3-10 → 3.1.3-12

package/dist/components/combobox/Combobox.esm.js

@@ -1,39 +1,42 @@
 import { customElement as e } from "../../lib/components/decorators.esm.js";
 import t from "../../lib/components/web-component/WebComponent.esm.js";
-import n from "../../lib/components/traits/InputTrait.esm.js";
+import n from "../../lib/components/traits/FormControlTrait.esm.js";
 import "../../lib/components/index.esm.js";
 import "../../_virtual/~icons/lucide/chevron-down.esm.js";
-import r from "./Combobox.styles.esm.js";
-import { html as i, nothing as a } from "lit";
-import { property as o, query as s, state as c } from "lit/decorators.js";
+import { debounce as r } from "../../lib/timing.esm.js";
+import "../../_virtual/~icons/svg-spinners/3-dots-fade.esm.js";
+import i from "./Combobox.styles.esm.js";
+import { html as a, nothing as o } from "lit";
+import { property as s, query as c, state as l } from "lit/decorators.js";
+import { Task as u } from "@lit/task";
 import "@awesome.me/webawesome/dist/components/popup/popup.js";
 //#region src/components/combobox/Combobox.ts
-var l, u, d, f, p, m, h, g, _, v, y, b, x, S, C, w, T, E, D, O, k, A, j, M, N, P, F, I, L, R, z, B, V, H;
-function U(e, t, n) {
-	W(e, t), t.set(e, n);
+var d, f, p, m, h, g, _, v, y, b, x, S, C, w, T, E, D, O, k, A, j, M, ee, te, ne, re, ie, ae, oe, N, P, F, I, L, R, z, B, V, H, U, W, G, K, q, se, ce, le, ue, de, fe, pe, me, he, ge, _e, ve, ye, be;
+function J(e, t, n) {
+	xe(e, t), t.set(e, n);
 }
-function W(e, t) {
+function xe(e, t) {
 	if (t.has(e)) throw TypeError("Cannot initialize the same private elements twice on an object");
 }
-function G(e, t, n) {
-	return e.set(q(e, t), n), n;
+function Y(e, t, n) {
+	return e.set(Se(e, t), n), n;
 }
-function K(e, t) {
-	return e.get(q(e, t));
+function X(e, t) {
+	return e.get(Se(e, t));
 }
-function q(e, t, n) {
+function Se(e, t, n) {
 	if (typeof e == "function" ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
 	throw TypeError("Private element is not present on this object");
 }
-function J(e, t, n) {
-	return (t = X(t)) in e ? Object.defineProperty(e, t, {
+function Z(e, t, n) {
+	return (t = we(t)) in e ? Object.defineProperty(e, t, {
 		value: n,
 		enumerable: !0,
 		configurable: !0,
 		writable: !0
 	}) : e[t] = n, e;
 }
-function Y(e, t, n, r, i, a) {
+function Ce(e, t, n, r, i, a) {
 	function o(e, t, n) {
 		return function(r, i) {
 			return n && n(r), e[t].call(r, i);
@@ -56,13 +59,13 @@ function Y(e, t, n, r, i, a) {
 			n || Array.isArray(_) || (_ = [_]);
 			var b = {}, x = [], S = i === 3 ? "get" : i === 4 || p ? "set" : "value";
 			d ? (f || p ? b = {
-				get: Q(function() {
+				get: Ee(function() {
 					return v(this);
 				}, r, "get"),
 				set: function(e) {
 					t[4](this, e);
 				}
-			} : b[S] = v, f || Q(b[S], r, i === 2 ? "" : S)) : f || (b = Object.getOwnPropertyDescriptor(e, r));
+			} : b[S] = v, f || Ee(b[S], r, i === 2 ? "" : S)) : f || (b = Object.getOwnPropertyDescriptor(e, r));
 		}
 		for (var C = e, w = _.length - 1; w >= 0; w -= n ? 2 : 1) {
 			var T = _[w], E = n ? _[w - 1] : void 0, D = {}, O = {
@@ -122,7 +125,7 @@ function Y(e, t, n, r, i, a) {
 	if (arguments.length >= 6) var d = a[Symbol.metadata || Symbol.for("Symbol.metadata")];
 	var f = Object.create(d ?? null), p = function(e, t, n, r) {
 		var i, a, o = [], c = function(t) {
-			return ee(t) === e;
+			return De(t) === e;
 		}, u = /* @__PURE__ */ new Map();
 		function d(e) {
 			e && o.push(s.bind(null, e));
@@ -136,7 +139,7 @@ function Y(e, t, n, r, i, a) {
 					if (!0 === x || x === 3 && m !== 4 || x === 4 && m !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + h);
 					u.set(b, !(m > 2) || m);
 				}
-				l(v ? e : e.prototype, p, _, g ? "#" + h : X(h), m, r, v ? a ||= [] : i ||= [], o, v, g, y, m === 1, v && g ? c : n);
+				l(v ? e : e.prototype, p, _, g ? "#" + h : we(h), m, r, v ? a ||= [] : i ||= [], o, v, g, y, m === 1, v && g ? c : n);
 			}
 		}
 		return d(i), d(a), o;
@@ -149,11 +152,11 @@ function Y(e, t, n, r, i, a) {
 		}
 	};
 }
-function X(e) {
-	var t = Z(e, "string");
+function we(e) {
+	var t = Te(e, "string");
 	return typeof t == "symbol" ? t : t + "";
 }
-function Z(e, t) {
+function Te(e, t) {
 	if (typeof e != "object" || !e) return e;
 	var n = e[Symbol.toPrimitive];
 	if (n !== void 0) {
@@ -163,7 +166,7 @@ function Z(e, t) {
 	}
 	return (t === "string" ? String : Number)(e);
 }
-function Q(e, t, n) {
+function Ee(e, t, n) {
 	typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
 	try {
 		Object.defineProperty(e, "name", {
@@ -173,108 +176,176 @@ function Q(e, t, n) {
 	} catch {}
 	return e;
 }
-function ee(e) {
+function De(e) {
 	if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (e === null ? "null" : typeof e));
 	return e;
 }
-function te(e) {
+function Oe(e) {
+	return e;
+}
+var Q = class extends Error {};
+function ke(e) {
 	return e;
 }
-S = [e("solid-ui-combobox")];
+M = [e("solid-ui-combobox")];
 var $;
-new (V = (d = /*#__PURE__*/ new WeakMap(), f = /*#__PURE__*/ new WeakMap(), p = /*#__PURE__*/ new WeakMap(), m = /*#__PURE__*/ new WeakMap(), h = /*#__PURE__*/ new WeakMap(), g = /*#__PURE__*/ new WeakMap(), _ = /*#__PURE__*/ new WeakMap(), v = /*#__PURE__*/ new WeakMap(), y = /*#__PURE__*/ new WeakMap(), H = (C = o({
+new (ye = (p = /*#__PURE__*/ new WeakMap(), m = /*#__PURE__*/ new WeakMap(), h = /*#__PURE__*/ new WeakMap(), g = /*#__PURE__*/ new WeakMap(), _ = /*#__PURE__*/ new WeakMap(), v = /*#__PURE__*/ new WeakMap(), y = /*#__PURE__*/ new WeakMap(), b = /*#__PURE__*/ new WeakMap(), x = /*#__PURE__*/ new WeakMap(), S = /*#__PURE__*/ new WeakMap(), C = /*#__PURE__*/ new WeakMap(), w = /*#__PURE__*/ new WeakMap(), T = /*#__PURE__*/ new WeakMap(), E = /*#__PURE__*/ new WeakMap(), D = /*#__PURE__*/ new WeakMap(), O = /*#__PURE__*/ new WeakMap(), k = /*#__PURE__*/ new WeakMap(), be = (ee = s({
 	type: String,
 	reflect: !0
-}), T = o({
+}), ne = s({
 	type: String,
 	reflect: !0
-}), D = o({ type: String }), k = o({
+}), ie = s(), oe = s({
 	type: String,
 	reflect: !0
-}), j = o({
+}), P = s({
 	type: Boolean,
 	reflect: !0
-}), N = s("input"), F = c(), L = c(), z = c(), "label"), u = class extends t {
-	get [H]() {
-		return K(d, this);
+}), I = s({
+	type: Boolean,
+	reflect: !0,
+	attribute: "select-only"
+}), R = s({
+	type: String,
+	attribute: "async-options-url"
+}), B = s({
+	type: String,
+	attribute: "async-options-results-field"
+}), H = s({
+	type: String,
+	attribute: "async-options-label-field"
+}), W = s({
+	type: String,
+	attribute: "async-options-value-field"
+}), K = s({ type: Function }), se = s({ type: Array }), le = c("input"), de = l(), pe = l(), he = l(), _e = l(), "label"), f = class extends t {
+	get [be]() {
+		return X(p, this);
 	}
 	set label(e) {
-		G(d, this, e);
+		Y(p, this, e);
 	}
 	get name() {
-		return K(f, this);
+		return X(m, this);
 	}
 	set name(e) {
-		G(f, this, e);
+		Y(m, this, e);
 	}
 	get value() {
-		return K(p, this);
+		return X(h, this);
 	}
 	set value(e) {
-		G(p, this, e);
+		Y(h, this, e);
 	}
 	get placeholder() {
-		return K(m, this);
+		return X(g, this);
 	}
 	set placeholder(e) {
-		G(m, this, e);
+		Y(g, this, e);
 	}
 	get required() {
-		return K(h, this);
+		return X(_, this);
 	}
 	set required(e) {
-		G(h, this, e);
+		Y(_, this, e);
+	}
+	get selectOnly() {
+		return X(v, this);
+	}
+	set selectOnly(e) {
+		Y(v, this, e);
+	}
+	get asyncOptionsUrl() {
+		return X(y, this);
+	}
+	set asyncOptionsUrl(e) {
+		Y(y, this, e);
+	}
+	get asyncOptionsResultsField() {
+		return X(b, this);
+	}
+	set asyncOptionsResultsField(e) {
+		Y(b, this, e);
+	}
+	get asyncOptionsLabelField() {
+		return X(x, this);
+	}
+	set asyncOptionsLabelField(e) {
+		Y(x, this, e);
+	}
+	get asyncOptionsValueField() {
+		return X(S, this);
+	}
+	set asyncOptionsValueField(e) {
+		Y(S, this, e);
+	}
+	get asyncOptionsProvider() {
+		return X(C, this);
+	}
+	set asyncOptionsProvider(e) {
+		Y(C, this, e);
+	}
+	get optionsFallback() {
+		return X(w, this);
+	}
+	set optionsFallback(e) {
+		Y(w, this, e);
 	}
 	get inputElement() {
-		return K(g, this);
+		return X(T, this);
 	}
 	set inputElement(e) {
-		G(g, this, e);
+		Y(T, this, e);
 	}
 	get filter() {
-		return K(_, this);
+		return X(E, this);
 	}
 	set filter(e) {
-		G(_, this, e);
+		Y(E, this, e);
+	}
+	get displayValue() {
+		return X(D, this);
+	}
+	set displayValue(e) {
+		Y(D, this, e);
 	}
 	get open() {
-		return K(v, this);
+		return X(O, this);
 	}
 	set open(e) {
-		G(v, this, e);
+		Y(O, this, e);
 	}
 	get activeIndex() {
-		return K(y, this);
+		return X(k, this);
 	}
 	set activeIndex(e) {
-		G(y, this, e);
+		Y(k, this, e);
 	}
 	constructor() {
-		super(), U(this, d, (b(this), w(this, ""))), U(this, f, E(this, "")), U(this, p, O(this, "")), U(this, m, A(this, "")), U(this, h, M(this, !1)), U(this, g, P(this, null)), U(this, _, I(this, "")), U(this, v, R(this, !1)), U(this, y, B(this, -1)), J(this, "inputTrait", void 0), J(this, "openListenersAttached", !1), J(this, "listboxId", void 0), J(this, "handleDocumentFocusIn", (e) => {
+		super(), J(this, p, (A(this), te(this, ""))), J(this, m, re(this, "")), J(this, h, ae(this, "")), J(this, g, N(this, "")), J(this, _, F(this, !1)), J(this, v, L(this, !1)), J(this, y, z(this, "")), J(this, b, V(this, "")), J(this, x, U(this, "")), J(this, S, G(this, "")), J(this, C, q(this, null)), J(this, w, ce(this, null)), J(this, T, ue(this, null)), J(this, E, fe(this, "")), J(this, D, me(this, "")), J(this, O, ge(this, !1)), J(this, k, ve(this, -1)), Z(this, "controlTrait", void 0), Z(this, "openListenersAttached", !1), Z(this, "updateDebouncedFilter", r(300, (e) => this.filter = e)), Z(this, "asyncOptionsTask", void 0), Z(this, "_selectedOption", void 0), Z(this, "listboxId", void 0), Z(this, "handleDocumentFocusIn", (e) => {
 			e.composedPath().includes(this) || this.hide();
-		}), J(this, "handleDocumentMouseDown", (e) => {
+		}), Z(this, "handleDocumentMouseDown", (e) => {
 			e.composedPath().includes(this) || this.hide();
-		}), this.inputTrait = this.addTrait(new n(this, {
-			getInputElement: () => this.inputElement,
-			getInternals: () => this.getInternals(),
-			onValueChanged: (e) => {
-				this.filter = e.toLowerCase();
-				let t = this.getFilteredOptions();
-				if (t.length === 0) {
-					this.hide();
-					return;
-				}
-				this.open && (this.activeIndex = this.getInitialActiveIndex(t));
-			}
-		})), this.listboxId = `listbox-${this.inputTrait.inputId}`;
+		}), this.controlTrait = this.addTrait(new n(this, {
+			getControlElement: () => this.inputElement,
+			getInternals: () => this.getInternals()
+		})), this.listboxId = `listbox-${this.controlTrait.controlId}`;
+	}
+	get selectedOption() {
+		return this._selectedOption;
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.removeOpenListeners();
 	}
+	willUpdate(e) {
+		if (super.willUpdate(e), (e.has("asyncOptionsUrl") || e.has("asyncOptionsProvider")) && this.updateAsyncOptionsTask(), e.has("value")) {
+			let e = this.getFilteredOptions(), t = e.find((e) => e.selectable !== !1 && e.value === this.value) ?? this.optionsFallback?.find((e) => e.value === this.value), n = t?.selectable !== !1 && t?.label;
+			this.updateDisplayValue(n || this.value), this.open && (this.activeIndex = this.getInitialActiveIndex(e)), this._selectedOption && this._selectedOption.value !== this.value && (this._selectedOption = void 0);
+		}
+	}
 	render() {
 		let e = this.getFilteredOptions(), t = (this.open && this.activeIndex >= 0 ? e[this.activeIndex] : void 0) === void 0 ? void 0 : this.getOptionId(this.activeIndex), n = this.placeholder || "Combobox";
-		return i`
-      ${this.inputTrait.renderLabel()}
+		return a`
+      ${this.controlTrait.renderLabel()}
       <wa-popup
         placement="bottom"
         flip
@@ -286,7 +357,7 @@ new (V = (d = /*#__PURE__*/ new WeakMap(), f = /*#__PURE__*/ new WeakMap(), p =
       >
         <div class="input-wrapper" slot="anchor" @mousedown=${this.onAnchorMouseDown}>
           <input
-            id="${this.inputTrait.inputId}"
+            id="${this.controlTrait.controlId}"
             type="text"
             name=${this.name}
             placeholder=${this.placeholder}
@@ -295,17 +366,17 @@ new (V = (d = /*#__PURE__*/ new WeakMap(), f = /*#__PURE__*/ new WeakMap(), p =
             aria-haspopup="listbox"
             aria-expanded=${this.open ? "true" : "false"}
             aria-controls=${this.listboxId}
-            aria-activedescendant=${t ?? a}
-            aria-labelledby=${this.label ? this.inputTrait.labelId : a}
-            aria-label=${this.label ? a : n}
-            aria-required=${this.required ? "true" : a}
+            aria-activedescendant=${t ?? o}
+            aria-labelledby=${this.label ? this.controlTrait.labelId : o}
+            aria-label=${this.label ? o : n}
+            aria-required=${this.required ? "true" : o}
             autocomplete="off"
             spellcheck="false"
             ?required=${this.required}
-            .value=${this.value}
+            .value=${this.displayValue}
             @keydown=${this.onInputKeyDown}
             @focus=${this.onInputFocus}
-            @input=${() => this.inputTrait.onInput()}
+            @input=${() => this.selectOnly ? this.updateDisplayValue(this.inputElement?.value ?? "") : this.controlTrait.onInput()}
           />
           <icon-lucide-chevron-down></icon-lucide-chevron-down>
         </div>
@@ -314,28 +385,46 @@ new (V = (d = /*#__PURE__*/ new WeakMap(), f = /*#__PURE__*/ new WeakMap(), p =
           class="listbox"
           role="listbox"
           aria-orientation="vertical"
-          aria-labelledby=${this.label ? this.inputTrait.labelId : a}
-          aria-label=${this.label ? a : n}
+          aria-labelledby=${this.label ? this.controlTrait.labelId : o}
+          aria-label=${this.label ? o : n}
           ?hidden=${!this.open}
           @mousedown=${this.onListboxMouseDown}
         >
-          ${e.map((e, t) => i`<div
-                id=${this.getOptionId(t)}
-                role="option"
-                aria-selected=${this.open && t === this.activeIndex ? "true" : "false"}
-                data-active=${t === this.activeIndex || a}
-                @mousemove=${() => this.setActiveIndex(t)}
-              >
-                ${e.label}
-              </div>`)}
+          ${e.map((e, t) => e.selectable === !1 ? a`<div class="non-selectable-option">${e.template ?? e.label}</div>` : a`<div
+                  id=${this.getOptionId(t)}
+                  role="option"
+                  aria-selected=${e.value === this.value ? "true" : "false"}
+                  data-active=${t === this.activeIndex || o}
+                  @mousemove=${() => this.setActiveIndex(t)}
+                >
+                  ${e.template ?? e.label}
+                </div>`)}
         </div>
       </wa-popup>
     `;
 	}
 	getFilteredOptions() {
-		return this.getOptions().filter((e) => e.label.toLowerCase().includes(this.filter));
+		return this.asyncOptionsTask ? this.asyncOptionsTask.render({
+			initial: () => this.optionsFallback ?? [],
+			complete: (e) => e,
+			pending: () => [{
+				value: "",
+				label: "Loading...",
+				template: a`<icon-svg-spinners-3-dots-fade></icon-svg-spinners-3-dots-fade>`,
+				selectable: !1
+			}],
+			error: (e) => {
+				let t = !(e instanceof Q), n = Object(e).message ?? "Something went wrong";
+				return [{
+					value: "",
+					label: n,
+					template: a`<span class="message message--${t ? "error" : "info"}">${n}</span>`,
+					selectable: !1
+				}];
+			}
+		}) : this.getOptionsFromDOM().filter((e) => String(e.label).toLowerCase().includes(this.filter));
 	}
-	getOptions() {
+	getOptionsFromDOM() {
 		let e = this.querySelectorAll("solid-ui-combobox-option");
 		return Array.from(e).map((e) => ({
 			value: e.value,
@@ -355,16 +444,47 @@ new (V = (d = /*#__PURE__*/ new WeakMap(), f = /*#__PURE__*/ new WeakMap(), p =
 	setActiveIndex(e) {
 		this.activeIndex = e;
 	}
+	updateDisplayValue(e) {
+		if (this.displayValue = String(e), this.open) {
+			let e = this.displayValue.toLowerCase();
+			this.asyncOptionsTask ? this.updateDebouncedFilter(e) : this.filter = e;
+		}
+	}
+	updateAsyncOptionsTask() {
+		if (!this.asyncOptionsUrl && !this.asyncOptionsProvider) {
+			this.asyncOptionsTask = void 0;
+			return;
+		}
+		this.asyncOptionsTask ??= new u(this, async ([e]) => {
+			if (this.asyncOptionsProvider) {
+				let t = await this.asyncOptionsProvider(e);
+				if (t.length === 0) throw new Q("No results found");
+				return t;
+			}
+			let t = await (await fetch(this.asyncOptionsUrl.replace("%search%", encodeURIComponent(e)))).json(), n = Array.from(this.asyncOptionsResultsField ? t[this.asyncOptionsResultsField] : t);
+			if (n.length === 0) throw new Q("No results found");
+			let r = this.asyncOptionsLabelField || "label", i = this.asyncOptionsValueField || "value";
+			return n.map((e) => ({
+				label: String(Object(e)[r]),
+				value: Object(e)[i]
+			}));
+		}, () => [this.filter]);
+	}
 	show(e) {
 		if (this.open) return;
 		let t = this.getFilteredOptions();
 		t.length !== 0 && (this.open = !0, this.activeIndex = e?.focusLast ? t.length - 1 : this.getInitialActiveIndex(t), this.addOpenListeners(), requestAnimationFrame(() => this.scrollActiveOptionIntoView()));
 	}
 	hide() {
-		this.open && (this.filter = "", this.open = !1, this.activeIndex = -1, this.removeOpenListeners());
+		this.open && (this.filter = "", this.open = !1, this.activeIndex = -1, this.removeOpenListeners(), this.updateDebouncedFilter.cancel());
 	}
 	selectOption(e) {
-		this.inputTrait.setValue(e), this.hide(), this.inputElement?.focus({ preventScroll: !0 });
+		let t = this.value;
+		this._selectedOption = e, this.hide(), this.controlTrait.setValue(e.value), this.inputElement?.focus({ preventScroll: !0 }), this.dispatchEvent(new CustomEvent("change", {
+			bubbles: !0,
+			composed: !0,
+			detail: { option: e }
+		})), t === this.value && this.updateDisplayValue(e.label);
 	}
 	scrollActiveOptionIntoView() {
 		this.activeIndex < 0 || this.shadowRoot?.querySelector(`#${this.getOptionId(this.activeIndex)}`)?.scrollIntoView({ block: "nearest" });
@@ -382,7 +502,7 @@ new (V = (d = /*#__PURE__*/ new WeakMap(), f = /*#__PURE__*/ new WeakMap(), p =
 		e !== document && e.removeEventListener("focusin", this.handleDocumentFocusIn), this.openListenersAttached = !1;
 	}
 	onAnchorMouseDown(e) {
-		e.preventDefault(), this.inputElement?.focus({ preventScroll: !0 });
+		e.target !== this.inputElement && (e.preventDefault(), this.inputElement?.focus({ preventScroll: !0 }));
 	}
 	onInputFocus() {
 		this.show();
@@ -400,7 +520,7 @@ new (V = (d = /*#__PURE__*/ new WeakMap(), f = /*#__PURE__*/ new WeakMap(), p =
 				e.preventDefault(), this.open ? (this.activeIndex = this.getNextIndex(this.activeIndex, t, -1), this.scrollActiveOptionIntoView()) : this.openPopupFromKey(!0);
 				break;
 			case "Enter":
-				this.open && this.activeIndex >= 0 && t[this.activeIndex] ? (e.preventDefault(), this.selectOption(t[this.activeIndex].value)) : this.open || (e.preventDefault(), this.inputTrait.onSubmit());
+				this.open && this.activeIndex >= 0 && t[this.activeIndex] ? (e.preventDefault(), this.selectOption(t[this.activeIndex])) : this.open || (e.preventDefault(), this.controlTrait.onSubmit());
 				break;
 			case "Escape":
 				this.open && (e.preventDefault(), e.stopPropagation(), this.hide(), this.inputElement?.focus({ preventScroll: !0 }));
@@ -408,6 +528,7 @@ new (V = (d = /*#__PURE__*/ new WeakMap(), f = /*#__PURE__*/ new WeakMap(), p =
 			case "Tab":
 				this.hide();
 				break;
+			default: this.open || this.show();
 		}
 	}
 	onListboxMouseDown(e) {
@@ -415,60 +536,100 @@ new (V = (d = /*#__PURE__*/ new WeakMap(), f = /*#__PURE__*/ new WeakMap(), p =
 		let t = e.target.closest("[role=\"option\"]");
 		if (!t) return;
 		let n = t.id, r = Number.parseInt(n.replace(`${this.listboxId}-option-`, ""), 10), i = this.getFilteredOptions()[r];
-		i && this.selectOption(i.value);
+		i && this.selectOption(i);
 	}
-}, {e: [w, E, O, A, M, P, I, R, B, b], c: [$, x]} = Y(u, [
+}, {e: [te, re, ae, N, F, L, z, V, U, G, q, ce, ue, fe, me, ge, ve, A], c: [$, j]} = Ce(f, [
 	[
-		C,
+		ee,
 		1,
 		"label"
 	],
 	[
-		T,
+		ne,
 		1,
 		"name"
 	],
 	[
-		D,
+		ie,
 		1,
 		"value"
 	],
 	[
-		k,
+		oe,
 		1,
 		"placeholder"
 	],
 	[
-		j,
+		P,
 		1,
 		"required"
 	],
 	[
-		N,
+		I,
+		1,
+		"selectOnly"
+	],
+	[
+		R,
+		1,
+		"asyncOptionsUrl"
+	],
+	[
+		B,
+		1,
+		"asyncOptionsResultsField"
+	],
+	[
+		H,
+		1,
+		"asyncOptionsLabelField"
+	],
+	[
+		W,
+		1,
+		"asyncOptionsValueField"
+	],
+	[
+		K,
+		1,
+		"asyncOptionsProvider"
+	],
+	[
+		se,
+		1,
+		"optionsFallback"
+	],
+	[
+		le,
 		1,
 		"inputElement"
 	],
 	[
-		F,
+		de,
 		1,
 		"filter"
 	],
 	[
-		L,
+		pe,
+		1,
+		"displayValue"
+	],
+	[
+		he,
 		1,
 		"open"
 	],
 	[
-		z,
+		_e,
 		1,
 		"activeIndex"
 	]
-], S, 0, void 0, t), u), l = class extends te {
+], M, 0, void 0, t), f), d = class extends Oe {
 	constructor() {
-		super($), J(this, "styles", r), J(this, "formAssociated", !0), x();
+		super($), Z(this, "styles", i), Z(this, "formAssociated", !0), j();
 	}
-}, J(l, V, void 0), l)();
+}, Z(d, ye, void 0), d)();
 //#endregion
-export { $ as default };
+export { $ as default, ke as defineAsyncComboboxOptionsProvider };
 
 //# sourceMappingURL=Combobox.esm.js.map