@ogc-maps/storybook-components 0.14.0 → 0.16.0

package/dist/SearchPanel-DIb7aYVs.js

@@ -0,0 +1,725 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { useState as k, useRef as W, useId as z, useMemo as E, useCallback as J, useEffect as B } from "react";
+import { g as X } from "./id-C2J6iu8_.js";
+function U({
+  value: e,
+  onChange: i,
+  suggestions: a,
+  onQueryChange: s,
+  placeholder: v = "",
+  className: n = "",
+  id: y
+}) {
+  const [$, N] = k(!1), [l, p] = k(-1), m = W(null), f = z(), g = l >= 0 ? `${f}-option-${l}` : void 0, d = E(
+    () => a.filter((b) => b.toLowerCase().includes(e.toLowerCase())),
+    [a, e]
+  ), j = $ && d.length > 0, u = J(
+    (b) => {
+      i(b), s == null || s(b), N(!1), p(-1);
+    },
+    [i, s]
+  ), S = (b) => {
+    const w = b.target.value;
+    i(w), s == null || s(w), N(!0), p(-1);
+  }, D = (b) => {
+    j && (b.key === "ArrowDown" ? (b.preventDefault(), p((w) => Math.min(w + 1, d.length - 1))) : b.key === "ArrowUp" ? (b.preventDefault(), p((w) => Math.max(w - 1, 0))) : b.key === "Enter" && l >= 0 ? (b.preventDefault(), u(d[l])) : b.key === "Escape" && (N(!1), p(-1)));
+  };
+  return B(() => {
+    const b = (w) => {
+      m.current && !m.current.contains(w.target) && (N(!1), p(-1));
+    };
+    return document.addEventListener("mousedown", b), () => document.removeEventListener("mousedown", b);
+  }, []), /* @__PURE__ */ o("div", { ref: m, className: `mapui:relative ${n}`.trim(), children: [
+    /* @__PURE__ */ t(
+      "input",
+      {
+        id: y,
+        type: "text",
+        value: e,
+        placeholder: v,
+        role: "combobox",
+        "aria-expanded": j,
+        "aria-autocomplete": "list",
+        "aria-controls": f,
+        "aria-activedescendant": g,
+        onChange: S,
+        onFocus: () => N(!0),
+        onKeyDown: D,
+        className: "mapui:w-full mapui:rounded mapui:border mapui:border-slate-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500"
+      }
+    ),
+    j && /* @__PURE__ */ t(
+      "ul",
+      {
+        id: f,
+        role: "listbox",
+        className: "mapui:absolute mapui:z-10 mapui:mt-1 mapui:w-full mapui:rounded mapui:border mapui:border-slate-200 mapui:bg-white mapui:shadow-lg mapui:max-h-48 mapui:overflow-y-auto mapui:p-0 mapui:m-0 mapui:list-none",
+        children: d.map((b, w) => /* @__PURE__ */ t(
+          "li",
+          {
+            id: `${f}-option-${w}`,
+            role: "option",
+            "aria-selected": w === l,
+            onMouseDown: (A) => {
+              A.preventDefault(), u(b);
+            },
+            className: `mapui:cursor-pointer mapui:px-2 mapui:py-1 mapui:text-sm ${w === l ? "mapui:bg-blue-100" : "hover:mapui:bg-slate-50"}`,
+            children: b
+          },
+          `${w}-${b}`
+        ))
+      }
+    )
+  ] });
+}
+function Q({
+  startValue: e,
+  endValue: i,
+  onStartChange: a,
+  onEndChange: s,
+  className: v = "",
+  id: n
+}) {
+  const y = z(), $ = n ?? y, N = `${$}-start`, l = `${$}-end`, p = "mapui:flex-1 mapui:rounded mapui:border mapui:border-slate-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
+  return /* @__PURE__ */ o("div", { className: `mapui:flex mapui:flex-col mapui:gap-1.5 ${v}`.trim(), children: [
+    /* @__PURE__ */ o("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+      /* @__PURE__ */ t("label", { htmlFor: N, className: "mapui:text-xs mapui:text-slate-400 mapui:w-8", children: "From" }),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          id: N,
+          type: "datetime-local",
+          value: e,
+          onChange: (m) => a(m.target.value),
+          "aria-label": "Start date",
+          className: p
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+      /* @__PURE__ */ t("label", { htmlFor: l, className: "mapui:text-xs mapui:text-slate-400 mapui:w-8", children: "To" }),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          id: l,
+          type: "datetime-local",
+          value: i,
+          onChange: (m) => s(m.target.value),
+          "aria-label": "End date",
+          className: p
+        }
+      )
+    ] })
+  ] });
+}
+const F = {
+  eq: "=",
+  gt: ">",
+  lt: "<",
+  gte: ">=",
+  lte: "<=",
+  between: "between"
+}, Z = {
+  eq: "equal to",
+  gt: "greater than",
+  lt: "less than",
+  gte: "greater than or equal to",
+  lte: "less than or equal to",
+  between: "between"
+}, q = ["eq", "gt", "lt", "gte", "lte", "between"];
+function P(e, i) {
+  if (e && typeof e == "object") {
+    if ("operator" in e) return e.operator;
+    if ("min" in e) return "between";
+  }
+  return i;
+}
+const R = "mapui:rounded mapui:border mapui:border-slate-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500", ee = "mapui:rounded mapui:border mapui:border-slate-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500 mapui:bg-white";
+function ae({ field: e, value: i, onChange: a, className: s = "", id: v }) {
+  const [n, y] = k(
+    () => P(i, e.operator)
+  );
+  B(() => {
+    y(P(i, e.operator));
+  }, [i, e.operator]);
+  const $ = n === "between", N = e.inputMode === "slider" ? q.filter((u) => u !== "between") : q, l = (u) => {
+    if (y(u), u === "between")
+      a(void 0);
+    else if ($)
+      a(void 0);
+    else if (i && typeof i == "object" && "value" in i) {
+      const S = i.value;
+      a({ value: S, operator: u });
+    }
+  }, p = (u) => {
+    a(u === "" ? void 0 : { value: Number(u), operator: n });
+  }, m = (u) => {
+    const S = i && typeof i == "object" && "max" in i ? i.max : void 0;
+    a(u === "" ? S === void 0 ? void 0 : { min: e.min ?? 0, max: S } : { min: Number(u), max: S ?? e.max ?? 0 });
+  }, f = (u) => {
+    const S = i && typeof i == "object" && "min" in i ? i.min : void 0;
+    a(u === "" ? S === void 0 ? void 0 : { min: S, max: e.max ?? 0 } : { min: S ?? e.min ?? 0, max: Number(u) });
+  }, g = i && typeof i == "object" && "value" in i ? String(i.value) : "", d = i && typeof i == "object" && "min" in i ? String(i.min) : "", j = i && typeof i == "object" && "max" in i ? String(i.max) : "";
+  return /* @__PURE__ */ o("div", { className: `mapui:flex mapui:flex-col mapui:gap-1.5 ${s}`.trim(), children: [
+    /* @__PURE__ */ t(
+      "select",
+      {
+        value: n,
+        onChange: (u) => l(u.target.value),
+        "aria-label": `${e.label} operator`,
+        className: ee,
+        children: N.map((u) => /* @__PURE__ */ t("option", { value: u, children: (e.operatorLabelStyle === "word" ? Z : F)[u] }, u))
+      }
+    ),
+    $ ? (
+      /* Between: min + max inputs */
+      /* @__PURE__ */ o("div", { className: "mapui:flex mapui:gap-2", children: [
+        /* @__PURE__ */ t(
+          "input",
+          {
+            type: "number",
+            value: d,
+            placeholder: e.min !== void 0 ? String(e.min) : "Min",
+            min: e.min,
+            max: e.max,
+            step: e.step,
+            onChange: (u) => m(u.target.value),
+            "aria-label": `${e.label} minimum`,
+            className: `${R} mapui:w-1/2`
+          }
+        ),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            type: "number",
+            value: j,
+            placeholder: e.max !== void 0 ? String(e.max) : "Max",
+            min: e.min,
+            max: e.max,
+            step: e.step,
+            onChange: (u) => f(u.target.value),
+            "aria-label": `${e.label} maximum`,
+            className: `${R} mapui:w-1/2`
+          }
+        )
+      ] })
+    ) : e.inputMode === "slider" ? (
+      /* Slider */
+      e.showRange ? /* @__PURE__ */ o("div", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
+        /* @__PURE__ */ o("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+          /* @__PURE__ */ t("span", { className: "mapui:text-xs mapui:text-slate-400 mapui:whitespace-nowrap", children: e.min ?? 0 }),
+          /* @__PURE__ */ t(
+            "input",
+            {
+              type: "range",
+              value: g !== "" ? g : e.min ?? 0,
+              min: e.min ?? 0,
+              max: e.max ?? 100,
+              step: e.step ?? 1,
+              onChange: (u) => p(u.target.value),
+              "aria-label": e.label,
+              className: "mapui:flex-1"
+            }
+          ),
+          /* @__PURE__ */ t("span", { className: "mapui:text-xs mapui:text-slate-400 mapui:whitespace-nowrap", children: e.max ?? 100 })
+        ] }),
+        /* @__PURE__ */ t("span", { className: "mapui:text-xs mapui:text-slate-600 mapui:text-center", children: g !== "" ? g : e.min ?? 0 })
+      ] }) : /* @__PURE__ */ o("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+        /* @__PURE__ */ t(
+          "input",
+          {
+            type: "range",
+            value: g !== "" ? g : e.min ?? 0,
+            min: e.min ?? 0,
+            max: e.max ?? 100,
+            step: e.step ?? 1,
+            onChange: (u) => p(u.target.value),
+            "aria-label": e.label,
+            className: "mapui:flex-1"
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "mapui:text-xs mapui:text-slate-600 mapui:min-w-12 mapui:whitespace-nowrap mapui:text-right", children: g !== "" ? g : e.min ?? 0 })
+      ] })
+    ) : (
+      /* Number input */
+      /* @__PURE__ */ t(
+        "input",
+        {
+          id: v,
+          type: "number",
+          value: g,
+          placeholder: e.placeholder ?? "",
+          min: e.min,
+          max: e.max,
+          step: e.step,
+          onChange: (u) => p(u.target.value),
+          className: R
+        }
+      )
+    )
+  ] });
+}
+const te = /* @__PURE__ */ new Set(["number", "integer"]), ie = /* @__PURE__ */ new Set(["string"]), ue = /* @__PURE__ */ new Set(["date-time", "date"]);
+function pe(e) {
+  return e != null && e.type ? te.has(e.type) ? "number" : ie.has(e.type) && e.format && ue.has(e.format) ? "datetime" : "string" : "string";
+}
+function me(e) {
+  switch (e) {
+    case "number":
+      return { value: 0, operator: "eq" };
+    case "datetime":
+      return { start: "", end: "" };
+    default:
+      return "";
+  }
+}
+function re(e) {
+  return {
+    id: X(),
+    layerId: e,
+    property: "",
+    propertyType: "string",
+    value: ""
+  };
+}
+const K = "mapui:rounded mapui:border mapui:border-slate-300 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500", M = "mapui:rounded mapui:border mapui:border-slate-300 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500", le = [
+  { value: "eq", label: "=" },
+  { value: "gt", label: ">" },
+  { value: "lt", label: "<" },
+  { value: "gte", label: ">=" },
+  { value: "lte", label: "<=" },
+  { value: "between", label: "between" }
+];
+function ne({
+  filter: e,
+  onUpdate: i
+}) {
+  const a = typeof e.value == "string" ? e.value : "";
+  return /* @__PURE__ */ t(
+    "input",
+    {
+      "aria-label": "Value",
+      type: "text",
+      value: a,
+      placeholder: "Value",
+      onChange: (s) => i(e.id, { value: s.target.value }),
+      className: `mapui:flex-1 ${M}`
+    }
+  );
+}
+function se({
+  filter: e,
+  onUpdate: i
+}) {
+  const a = e.value, s = typeof a == "object" && "min" in a, v = s ? "between" : typeof a == "object" && "operator" in a ? a.operator : "eq", n = typeof a == "object" && "value" in a ? String(a.value) : "", y = typeof a == "object" && "min" in a ? String(a.min) : "", $ = typeof a == "object" && "max" in a ? String(a.max) : "", N = (l) => {
+    if (l === "between")
+      i(e.id, { value: { min: 0, max: 0 } });
+    else if (s)
+      i(e.id, { value: { value: 0, operator: l } });
+    else {
+      const p = typeof a == "object" && "value" in a ? a.value : 0;
+      i(e.id, { value: { value: p, operator: l } });
+    }
+  };
+  return /* @__PURE__ */ o("div", { className: "mapui:flex mapui:flex-1 mapui:items-center mapui:gap-1", children: [
+    /* @__PURE__ */ t(
+      "select",
+      {
+        "aria-label": "Operator",
+        value: v,
+        onChange: (l) => N(l.target.value),
+        className: K,
+        children: le.map((l) => /* @__PURE__ */ t("option", { value: l.value, children: l.label }, l.value))
+      }
+    ),
+    s ? /* @__PURE__ */ o("div", { className: "mapui:flex mapui:flex-1 mapui:gap-1", children: [
+      /* @__PURE__ */ t(
+        "input",
+        {
+          "aria-label": "Minimum",
+          type: "number",
+          value: y,
+          placeholder: "Min",
+          onChange: (l) => {
+            const p = typeof a == "object" && "max" in a ? a.max : 0;
+            i(e.id, { value: { min: l.target.value === "" ? 0 : Number(l.target.value), max: p } });
+          },
+          className: `mapui:flex-1 mapui:min-w-0 ${M}`
+        }
+      ),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          "aria-label": "Maximum",
+          type: "number",
+          value: $,
+          placeholder: "Max",
+          onChange: (l) => {
+            const p = typeof a == "object" && "min" in a ? a.min : 0;
+            i(e.id, { value: { min: p, max: l.target.value === "" ? 0 : Number(l.target.value) } });
+          },
+          className: `mapui:flex-1 mapui:min-w-0 ${M}`
+        }
+      )
+    ] }) : /* @__PURE__ */ t(
+      "input",
+      {
+        "aria-label": "Value",
+        type: "number",
+        value: n,
+        placeholder: "Value",
+        onChange: (l) => {
+          l.target.value === "" ? i(e.id, { value: { value: 0, operator: v } }) : i(e.id, { value: { value: Number(l.target.value), operator: v } });
+        },
+        className: `mapui:flex-1 mapui:min-w-0 ${M}`
+      }
+    )
+  ] });
+}
+function oe({
+  filter: e,
+  onUpdate: i
+}) {
+  const a = e.value, s = typeof a == "object" && "start" in a ? a.start : "", v = typeof a == "object" && "end" in a ? a.end : "";
+  return /* @__PURE__ */ o("div", { className: "mapui:flex mapui:flex-1 mapui:flex-col mapui:gap-1", children: [
+    /* @__PURE__ */ o("div", { className: "mapui:flex mapui:items-center mapui:gap-1", children: [
+      /* @__PURE__ */ t("span", { className: "mapui:text-xs mapui:text-slate-400 mapui:w-8 mapui:shrink-0", children: "From" }),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          "aria-label": "Start date",
+          type: "datetime-local",
+          value: s,
+          onChange: (n) => i(e.id, { value: { start: n.target.value, end: v } }),
+          className: `mapui:flex-1 mapui:min-w-0 ${M}`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o("div", { className: "mapui:flex mapui:items-center mapui:gap-1", children: [
+      /* @__PURE__ */ t("span", { className: "mapui:text-xs mapui:text-slate-400 mapui:w-8 mapui:shrink-0", children: "To" }),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          "aria-label": "End date",
+          type: "datetime-local",
+          value: v,
+          onChange: (n) => i(e.id, { value: { start: s, end: n.target.value } }),
+          className: `mapui:flex-1 mapui:min-w-0 ${M}`
+        }
+      )
+    ] })
+  ] });
+}
+function ce({
+  layers: e,
+  availableProperties: i,
+  filters: a,
+  onFiltersChange: s,
+  maxFiltersPerLayer: v = 20
+}) {
+  if (e.length === 0)
+    return /* @__PURE__ */ t("p", { className: "mapui:m-0 mapui:text-xs mapui:text-slate-500", children: "No layers available." });
+  const n = (p, m) => {
+    s(a.map((f) => f.id === p ? { ...f, ...m } : f));
+  }, y = (p) => {
+    s(a.filter((m) => m.id !== p));
+  }, $ = (p) => {
+    s([...a, re(p)]);
+  }, N = (p) => {
+    s(a.filter((m) => m.layerId !== p));
+  }, l = (p, m, f) => {
+    const g = f.find((u) => u.name === m), d = pe(g), j = d !== p.propertyType;
+    s(
+      a.map(
+        (u) => u.id === p.id ? {
+          ...u,
+          property: m,
+          propertyType: d,
+          value: j ? me(d) : u.value
+        } : u
+      )
+    );
+  };
+  return /* @__PURE__ */ o("div", { className: "mapui:flex mapui:flex-col mapui:gap-4", children: [
+    /* @__PURE__ */ o("div", { children: [
+      /* @__PURE__ */ t("h4", { className: "mapui:m-0 mapui:mb-1 mapui:text-sm mapui:font-semibold mapui:text-slate-700", children: "All Filters" }),
+      /* @__PURE__ */ t("p", { className: "mapui:m-0 mapui:text-xs mapui:text-slate-500", children: "Pick a layer property and enter a value. Combined with search filters via AND." })
+    ] }),
+    e.map((p) => {
+      const m = a.filter((d) => d.layerId === p.id), f = (i == null ? void 0 : i[p.id]) ?? [], g = m.length >= v;
+      return /* @__PURE__ */ o(
+        "div",
+        {
+          className: "mapui:flex mapui:flex-col mapui:gap-2 mapui:rounded mapui:border mapui:border-slate-200 mapui:bg-slate-50 mapui:p-3",
+          children: [
+            /* @__PURE__ */ o("div", { className: "mapui:flex mapui:items-center mapui:justify-between", children: [
+              /* @__PURE__ */ t("span", { className: "mapui:text-sm mapui:font-medium mapui:text-slate-700", children: p.label }),
+              m.length > 0 && /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => N(p.id),
+                  className: "mapui:cursor-pointer mapui:border-none mapui:bg-transparent mapui:p-0 mapui:text-xs mapui:text-blue-600 hover:mapui:text-blue-800",
+                  children: "Clear"
+                }
+              )
+            ] }),
+            m.length === 0 ? /* @__PURE__ */ t("p", { className: "mapui:m-0 mapui:text-xs mapui:text-slate-500", children: "No filters added for this layer." }) : /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: m.map((d) => {
+              const j = `propfilter-${d.id}-property`;
+              return /* @__PURE__ */ o(
+                "div",
+                {
+                  className: "mapui:flex mapui:items-start mapui:gap-2",
+                  children: [
+                    /* @__PURE__ */ o(
+                      "select",
+                      {
+                        id: j,
+                        "aria-label": "Property",
+                        value: d.property,
+                        onChange: (u) => l(d, u.target.value, f),
+                        className: `mapui:flex-1 ${K}`,
+                        children: [
+                          /* @__PURE__ */ t("option", { value: "", children: f.length === 0 ? "No properties available" : "Select property..." }),
+                          f.map((u) => /* @__PURE__ */ t("option", { value: u.name, children: u.title ?? u.name }, u.name))
+                        ]
+                      }
+                    ),
+                    d.propertyType === "number" ? /* @__PURE__ */ t(se, { filter: d, onUpdate: n }) : d.propertyType === "datetime" ? /* @__PURE__ */ t(oe, { filter: d, onUpdate: n }) : /* @__PURE__ */ t(ne, { filter: d, onUpdate: n }),
+                    /* @__PURE__ */ t(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => y(d.id),
+                        "aria-label": "Remove filter",
+                        title: "Remove filter",
+                        className: "mapui:cursor-pointer mapui:border-none mapui:bg-transparent mapui:px-1 mapui:text-sm mapui:text-slate-500 hover:mapui:text-red-600",
+                        children: "×"
+                      }
+                    )
+                  ]
+                },
+                d.id
+              );
+            }) }),
+            g ? /* @__PURE__ */ o("p", { className: "mapui:m-0 mapui:text-xs mapui:text-slate-500", children: [
+              "Up to ",
+              v,
+              " filters per layer."
+            ] }) : /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: () => $(p.id),
+                className: "mapui:cursor-pointer mapui:self-start mapui:rounded mapui:border mapui:border-dashed mapui:border-slate-300 mapui:bg-white mapui:px-2 mapui:py-0.5 mapui:text-xs mapui:text-slate-600 hover:mapui:border-blue-400 hover:mapui:text-blue-600",
+                children: "+ Add filter"
+              }
+            )
+          ]
+        },
+        p.id
+      );
+    })
+  ] });
+}
+function de(e) {
+  return e === void 0 || e === "" || e === null ? !1 : typeof e == "object" && "start" in e && "end" in e ? e.start !== "" || e.end !== "" : !0;
+}
+function ve({
+  layers: e,
+  activeFilters: i,
+  onFilterChange: a,
+  onClearFilters: s,
+  autocompleteSuggestions: v = {},
+  onZoomToFeature: n,
+  onFetchSuggestions: y,
+  className: $ = "",
+  hideTitle: N,
+  expandable: l = !1,
+  expanded: p = !1,
+  onExpandedChange: m,
+  availableProperties: f,
+  propertyFilters: g,
+  onPropertyFiltersChange: d
+}) {
+  const j = E(
+    () => e.filter((c) => {
+      var V;
+      return (V = c.search) == null ? void 0 : V.fields.length;
+    }),
+    [e]
+  );
+  B(() => {
+    if (y)
+      for (const c of j)
+        for (const V of c.search.fields)
+          V.type === "select" && V.prefetch && y(c.id, V.property, "", { prefetch: !0 });
+  }, [j, y]);
+  const u = l && !p, S = l && p, D = p && g !== void 0 && d !== void 0, b = !N || S ? /* @__PURE__ */ o("div", { className: "mapui:flex mapui:items-center mapui:justify-between mapui:mb-2", children: [
+    N ? /* @__PURE__ */ t("span", {}) : /* @__PURE__ */ t("h3", { className: "mapui:m-0 mapui:text-sm mapui:font-semibold mapui:text-slate-700", children: "Search & Filter" }),
+    S && /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        onClick: () => m == null ? void 0 : m(!1),
+        title: "Close",
+        className: "mapui:cursor-pointer mapui:rounded mapui:border-none mapui:bg-transparent mapui:p-2 mapui:min-w-[44px] mapui:min-h-[44px] mapui:flex mapui:items-center mapui:justify-center mapui:text-slate-500 hover:mapui:text-slate-800",
+        "aria-label": "Close expanded search",
+        children: /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "mapui:h-4 mapui:w-4", children: /* @__PURE__ */ t("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) })
+      }
+    )
+  ] }) : null, w = u ? /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      onClick: () => m == null ? void 0 : m(!0),
+      title: "Expand to full search builder",
+      "aria-label": "Expand to full search builder",
+      className: "mapui:mt-1 mapui:w-full mapui:cursor-pointer mapui:border-0 mapui:border-t mapui:border-solid mapui:border-slate-200 mapui:bg-transparent mapui:pt-2 mapui:text-center mapui:text-xs mapui:text-slate-600 hover:mapui:text-blue-600",
+      children: "Expand"
+    }
+  ) : null;
+  if (j.length === 0) {
+    const c = /* @__PURE__ */ o("div", { className: `mapui:flex mapui:flex-col mapui:gap-1 ${$}`.trim(), children: [
+      b,
+      /* @__PURE__ */ t("p", { className: "mapui:m-0 mapui:text-xs mapui:text-slate-500", children: "No searchable layers configured." }),
+      w
+    ] });
+    return p ? /* @__PURE__ */ t(C, { onClose: () => m == null ? void 0 : m(!1), children: c }) : c;
+  }
+  const A = /* @__PURE__ */ o("div", { className: `mapui:flex mapui:flex-col mapui:gap-3 ${p ? "" : $}`.trim(), children: [
+    b,
+    j.map((c) => {
+      const V = i[c.id] ?? {}, T = Object.values(V).some(de);
+      return /* @__PURE__ */ o("div", { className: "mapui:flex mapui:flex-col mapui:gap-3 mapui:border-b mapui:border-slate-100 mapui:pb-3 last:mapui:border-0", children: [
+        /* @__PURE__ */ o("div", { className: "mapui:flex mapui:items-center mapui:justify-between", children: [
+          /* @__PURE__ */ t("span", { className: "mapui:text-sm mapui:font-medium mapui:text-slate-600", children: c.label }),
+          T && /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              onClick: () => s(c.id),
+              className: "mapui:cursor-pointer mapui:border-none mapui:bg-transparent mapui:p-0 mapui:text-xs mapui:text-blue-600 hover:mapui:text-blue-800",
+              children: "Clear"
+            }
+          )
+        ] }),
+        c.search.fields.map((r) => {
+          const h = V[r.property], _ = `${c.id}:${r.property}`, I = `search-${c.id}-${r.property}`;
+          return /* @__PURE__ */ o("div", { className: "mapui:flex mapui:flex-col mapui:gap-1", children: [
+            /* @__PURE__ */ t("label", { htmlFor: I, className: "mapui:text-xs mapui:text-slate-500", children: r.label }),
+            r.type === "text" && r.autocomplete ? /* @__PURE__ */ t(
+              U,
+              {
+                id: I,
+                value: h ?? "",
+                onChange: (x) => {
+                  a(c.id, r.property, x || void 0), x && r.zoomTo && (n == null || n(c.id, r.property, x));
+                },
+                suggestions: [.../* @__PURE__ */ new Set([
+                  ...v[_] ?? [],
+                  ...r.options ?? []
+                ])],
+                onQueryChange: (x) => y == null ? void 0 : y(c.id, r.property, x, { prefetch: r.prefetch }),
+                placeholder: r.placeholder ?? ""
+              }
+            ) : r.type === "text" ? /* @__PURE__ */ t(
+              "input",
+              {
+                id: I,
+                type: "text",
+                value: h ?? "",
+                placeholder: r.placeholder ?? "",
+                onChange: (x) => a(c.id, r.property, x.target.value || void 0),
+                onBlur: (x) => {
+                  x.target.value && r.zoomTo && (n == null || n(c.id, r.property, x.target.value));
+                },
+                onKeyDown: (x) => {
+                  x.key === "Enter" && x.target.value && r.zoomTo && (n == null || n(c.id, r.property, x.target.value));
+                },
+                className: "mapui:rounded mapui:border mapui:border-slate-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500"
+              }
+            ) : r.type === "datetime" && r.range ? /* @__PURE__ */ t(
+              Q,
+              {
+                id: I,
+                startValue: h && typeof h == "object" && "start" in h ? h.start : "",
+                endValue: h && typeof h == "object" && "end" in h ? h.end : "",
+                onStartChange: (x) => a(c.id, r.property, {
+                  start: x,
+                  end: h && typeof h == "object" && "end" in h ? h.end : ""
+                }),
+                onEndChange: (x) => a(c.id, r.property, {
+                  start: h && typeof h == "object" && "start" in h ? h.start : "",
+                  end: x
+                })
+              }
+            ) : r.type === "datetime" ? /* @__PURE__ */ t(
+              "input",
+              {
+                id: I,
+                type: "datetime-local",
+                value: h ?? "",
+                onChange: (x) => a(c.id, r.property, x.target.value || void 0),
+                className: "mapui:rounded mapui:border mapui:border-slate-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500"
+              }
+            ) : r.type === "number" ? /* @__PURE__ */ t(
+              ae,
+              {
+                id: I,
+                field: r,
+                value: h,
+                onChange: (x) => a(c.id, r.property, x)
+              }
+            ) : r.type === "select" ? (() => {
+              const x = r, Y = v[_] ?? [], G = x.options ?? [], H = [.../* @__PURE__ */ new Set([...Y, ...G])];
+              return /* @__PURE__ */ o(
+                "select",
+                {
+                  id: I,
+                  value: h ?? "",
+                  onChange: (O) => {
+                    const L = O.target.value || void 0;
+                    a(c.id, r.property, L), L && r.zoomTo && (n == null || n(c.id, r.property, L));
+                  },
+                  className: "mapui:rounded mapui:border mapui:border-slate-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500",
+                  children: [
+                    /* @__PURE__ */ t("option", { value: "", children: r.placeholder ?? "Select..." }),
+                    H.map((O) => /* @__PURE__ */ t("option", { value: O, children: O }, O))
+                  ]
+                }
+              );
+            })() : null
+          ] }, r.property);
+        })
+      ] }, c.id);
+    }),
+    D && /* @__PURE__ */ t("div", { className: "mapui:mt-2 mapui:border-t mapui:border-slate-200 mapui:pt-3", children: /* @__PURE__ */ t(
+      ce,
+      {
+        layers: e,
+        availableProperties: f,
+        filters: g,
+        onFiltersChange: d
+      }
+    ) }),
+    w
+  ] });
+  return p ? /* @__PURE__ */ t(C, { onClose: () => m == null ? void 0 : m(!1), children: A }) : A;
+}
+function C({ onClose: e, children: i }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: "mapui:fixed mapui:inset-0 mapui:z-50 mapui:flex mapui:items-center mapui:justify-center mapui:bg-black/40 mapui:p-4",
+      onClick: (a) => {
+        a.target === a.currentTarget && e();
+      },
+      children: /* @__PURE__ */ t("div", { className: "mapui:relative mapui:flex mapui:max-h-[90vh] mapui:w-full mapui:max-w-2xl mapui:flex-col mapui:overflow-y-auto mapui:rounded-lg mapui:bg-white mapui:p-4 mapui:shadow-xl", children: i })
+    }
+  );
+}
+export {
+  ce as P,
+  ve as S
+};