@ogc-maps/storybook-components 0.7.0 → 0.9.0

package/dist/{CollapsibleControl-VFUTWb_5.js → CollapsibleControl-CGRNPpCw.js}

@@ -26,7 +26,7 @@ function x({
         children: /* @__PURE__ */ a(t, { size: 20, className: "mapui:text-gray-700" })
       }
     ),
-    !m && /* @__PURE__ */ e("div", { className: "mapui:absolute mapui:top-0 mapui:right-full mapui:mr-2 mapui:z-10 mapui:bg-white mapui:rounded-lg mapui:shadow-lg mapui:overflow-hidden", children: [
+    !m && /* @__PURE__ */ e("div", { className: "mapui:absolute mapui:top-0 mapui:right-full mapui:mr-2 mapui:z-10 mapui:bg-white mapui:rounded-lg mapui:shadow-lg", children: [
       /* @__PURE__ */ e("div", { className: "mapui:flex mapui:items-center mapui:justify-between mapui:p-2 mapui:border-b mapui:border-gray-200", children: [
         /* @__PURE__ */ e("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
           /* @__PURE__ */ a(t, { size: 18, className: "mapui:text-gray-700" }),

package/dist/Legend-CwaZA84A.js

@@ -0,0 +1,273 @@
+import { jsxs as l, jsx as e, Fragment as v } from "react/jsx-runtime";
+import { useState as b } from "react";
+import { BsArrowsAngleContract as C, BsArrowsAngleExpand as A } from "react-icons/bs";
+import { MdOutlineKeyboardArrowDown as k, MdOutlineKeyboardArrowRight as $ } from "react-icons/md";
+const E = {
+  fill: "fill-opacity",
+  line: "line-opacity",
+  circle: "circle-opacity",
+  symbol: "icon-opacity"
+};
+function I(m) {
+  var r, s;
+  const a = (r = m.styles) == null ? void 0 : r[0];
+  if (!a) return 1;
+  const i = E[a.type];
+  if (!i) return 1;
+  const n = (s = a.paint) == null ? void 0 : s[i];
+  return typeof n == "number" ? n : 1;
+}
+function w({ color: m, shape: a }) {
+  const i = a ?? "square";
+  let n;
+  return i === "circle" ? n = /* @__PURE__ */ e(
+    "span",
+    {
+      className: "mapui:inline-block mapui:h-3 mapui:w-3 mapui:rounded-full",
+      style: { backgroundColor: m }
+    }
+  ) : i === "line" ? n = /* @__PURE__ */ e(
+    "span",
+    {
+      className: "mapui:inline-block mapui:h-0.5 mapui:w-4 mapui:rounded-full",
+      style: { backgroundColor: m }
+    }
+  ) : n = /* @__PURE__ */ e(
+    "span",
+    {
+      className: "mapui:inline-block mapui:h-3 mapui:w-3 mapui:rounded-sm",
+      style: { backgroundColor: m }
+    }
+  ), /* @__PURE__ */ e("span", { className: "mapui:inline-flex mapui:items-center mapui:justify-center mapui:w-5 mapui:shrink-0", children: n });
+}
+function j(m) {
+  return `linear-gradient(to right, ${m.map((a, i) => `${a.color} ${i / m.length * 100}% ${(i + 1) / m.length * 100}%`).join(", ")})`;
+}
+function y(m) {
+  return `linear-gradient(to right, ${m.map((a) => a.color).join(", ")})`;
+}
+function N(m) {
+  const a = m.trim();
+  let i, n, r;
+  if (/^#[0-9a-f]{3}$/i.test(a))
+    i = parseInt(a[1] + a[1], 16), n = parseInt(a[2] + a[2], 16), r = parseInt(a[3] + a[3], 16);
+  else if (/^#[0-9a-f]{6}$/i.test(a))
+    i = parseInt(a.slice(1, 3), 16), n = parseInt(a.slice(3, 5), 16), r = parseInt(a.slice(5, 7), 16);
+  else
+    return null;
+  const s = i / 255, u = n / 255, p = r / 255, g = Math.max(s, u, p), f = Math.min(s, u, p), d = g - f;
+  if (d === 0) return 0;
+  let h = 0;
+  return g === s ? h = ((u - p) / d + 6) % 6 : g === u ? h = (p - s) / d + 2 : h = (s - u) / d + 4, h * 60;
+}
+function L(m) {
+  return [...m].sort((a, i) => {
+    const n = N(a.color), r = N(i.color);
+    return n === null && r === null ? 0 : n === null ? 1 : r === null ? -1 : n - r;
+  });
+}
+function S({ legend: m, label: a, hasArrowColumn: i }) {
+  const { entries: n } = m, r = i ? /* @__PURE__ */ e("span", { className: "mapui:w-5 mapui:shrink-0" }) : null;
+  return n.length === 1 ? /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2 mapui:min-w-0", children: [
+    r,
+    /* @__PURE__ */ e(w, { color: n[0].color, shape: n[0].shape }),
+    /* @__PURE__ */ e("span", { className: "mapui:text-gray-700 mapui:truncate", children: n[0].label || a })
+  ] }) : /* @__PURE__ */ l("div", { children: [
+    /* @__PURE__ */ e("div", { className: "mapui:mb-1 mapui:text-xs mapui:font-medium mapui:text-gray-600", children: a }),
+    /* @__PURE__ */ e("ul", { className: "mapui:m-0 mapui:list-none mapui:space-y-1 mapui:p-0 mapui:pl-1", children: n.map((s, u) => /* @__PURE__ */ l(
+      "li",
+      {
+        className: "mapui:flex mapui:items-center mapui:gap-2 mapui:min-w-0",
+        children: [
+          r,
+          /* @__PURE__ */ e(w, { color: s.color, shape: s.shape }),
+          /* @__PURE__ */ e("span", { className: "mapui:text-gray-700 mapui:truncate", children: s.label })
+        ]
+      },
+      `${s.label}-${u}`
+    )) })
+  ] });
+}
+function M({
+  legend: m,
+  label: a,
+  expanded: i,
+  onToggle: n,
+  hasArrowColumn: r
+}) {
+  const { entries: s } = m, u = m.showColorBar !== !1, p = m.showDisclosureArrow !== !1, g = s.filter((t, o, c) => c.findIndex((x) => x.color === t.color) === o), f = L(g), d = /* @__PURE__ */ e("span", { className: "mapui:inline-flex mapui:items-center mapui:justify-center mapui:w-5 mapui:shrink-0", children: /* @__PURE__ */ e("span", { className: "mapui:text-gray-400", children: i ? /* @__PURE__ */ e(k, {}) : /* @__PURE__ */ e($, {}) }) }), h = /* @__PURE__ */ l(v, { children: [
+    r && (p ? d : /* @__PURE__ */ e("span", { className: "mapui:w-5 mapui:shrink-0" })),
+    u ? /* @__PURE__ */ e(
+      "div",
+      {
+        className: "mapui:h-3 mapui:w-5 mapui:rounded-sm mapui:shrink-0",
+        style: { background: j(f) }
+      }
+    ) : !r && p ? d : /* @__PURE__ */ e("span", { className: "mapui:w-5 mapui:shrink-0" }),
+    /* @__PURE__ */ e("span", { className: "mapui:truncate", children: a })
+  ] });
+  return /* @__PURE__ */ l("div", { children: [
+    p ? /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        className: "mapui:flex mapui:items-center mapui:gap-2 mapui:bg-transparent mapui:border-none mapui:p-0 mapui:cursor-pointer mapui:text-left mapui:text-gray-700 mapui:text-sm mapui:font-medium mapui:min-w-0",
+        onClick: n,
+        "aria-expanded": i,
+        children: h
+      }
+    ) : /* @__PURE__ */ e("div", { className: "mapui:flex mapui:items-center mapui:gap-2 mapui:text-gray-700 mapui:text-sm mapui:font-medium mapui:min-w-0", children: h }),
+    i && /* @__PURE__ */ e("ul", { className: `mapui:m-0 mapui:mt-1 mapui:list-none mapui:space-y-1 mapui:p-0 mapui:max-h-48 mapui:overflow-y-auto${p ? " mapui:ml-7" : ""}`, children: s.map((t, o) => /* @__PURE__ */ l(
+      "li",
+      {
+        className: "mapui:flex mapui:items-center mapui:gap-2 mapui:min-w-0",
+        children: [
+          /* @__PURE__ */ e(w, { color: t.color, shape: t.shape }),
+          /* @__PURE__ */ e("span", { className: "mapui:text-gray-700 mapui:truncate mapui:text-xs", children: t.label })
+        ]
+      },
+      `${t.label}-${o}`
+    )) })
+  ] });
+}
+function B({
+  legend: m,
+  label: a,
+  expanded: i,
+  onToggle: n,
+  hasArrowColumn: r
+}) {
+  const { entries: s, gradientProperty: u } = m, p = m.showDisclosureArrow !== !1, f = /* @__PURE__ */ l(v, { children: [
+    r && (p ? /* @__PURE__ */ e("span", { className: "mapui:inline-flex mapui:items-center mapui:justify-center mapui:w-5 mapui:shrink-0", children: /* @__PURE__ */ e("span", { className: "mapui:text-gray-400", children: i ? /* @__PURE__ */ e(k, {}) : /* @__PURE__ */ e($, {}) }) }) : /* @__PURE__ */ e("span", { className: "mapui:w-5 mapui:shrink-0" })),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "mapui:h-3 mapui:w-5 mapui:rounded-sm mapui:shrink-0",
+        style: { background: y(s) }
+      }
+    ),
+    /* @__PURE__ */ e("span", { className: "mapui:truncate", children: a })
+  ] });
+  return /* @__PURE__ */ l("div", { children: [
+    p ? /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        className: "mapui:flex mapui:items-center mapui:gap-2 mapui:bg-transparent mapui:border-none mapui:p-0 mapui:cursor-pointer mapui:text-left mapui:text-gray-700 mapui:text-sm mapui:font-medium",
+        onClick: n,
+        "aria-expanded": i,
+        children: f
+      }
+    ) : /* @__PURE__ */ e("div", { className: "mapui:flex mapui:items-center mapui:gap-2 mapui:text-gray-700 mapui:text-sm mapui:font-medium", children: f }),
+    /* @__PURE__ */ e("div", { className: p ? "mapui:mt-1 mapui:ml-7" : "mapui:mt-1", children: /* @__PURE__ */ e(
+      "div",
+      {
+        className: "mapui:h-3 mapui:min-w-12 mapui:max-w-32 mapui:rounded-sm",
+        style: { background: y(s) }
+      }
+    ) }),
+    i && /* @__PURE__ */ l("div", { className: `mapui:mt-1 mapui:text-xs mapui:text-gray-600${p ? " mapui:ml-7" : ""}`, children: [
+      u && /* @__PURE__ */ e("div", { className: "mapui:font-medium mapui:mb-1", children: u }),
+      s.length >= 2 && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:justify-between mapui:max-w-32", children: [
+        /* @__PURE__ */ e("span", { children: s[0].label }),
+        /* @__PURE__ */ e("span", { children: s[s.length - 1].label })
+      ] })
+    ] })
+  ] });
+}
+function D({
+  layerId: m,
+  opacity: a,
+  onChange: i
+}) {
+  return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-1.5 mapui:mt-0.5 mapui:ml-1", children: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        type: "range",
+        min: 0,
+        max: 1,
+        step: 0.01,
+        value: a,
+        onChange: (n) => i(m, parseFloat(n.target.value)),
+        className: "range-sm mapui:w-14"
+      }
+    ),
+    /* @__PURE__ */ l("span", { className: "mapui:text-[9px] mapui:text-gray-400 mapui:w-6 mapui:text-right mapui:tabular-nums", children: [
+      Math.round(a * 100),
+      "%"
+    ] })
+  ] });
+}
+function q({ layers: m, visibleLayerIds: a, onOpacityChange: i, className: n }) {
+  const [r, s] = b(/* @__PURE__ */ new Set()), [u, p] = b(!1), g = m.filter((t) => a.includes(t.id));
+  function f(t) {
+    s((o) => {
+      const c = new Set(o);
+      return c.has(t) ? c.delete(t) : c.add(t), c;
+    });
+  }
+  const d = g.filter((t) => t.legend !== void 0);
+  if (d.length === 0)
+    return null;
+  const h = d.some((t) => {
+    const o = t.legend, c = o.displayMode ?? "simple", x = o.showDisclosureArrow !== !1;
+    return c === "gradient" ? x : c === "categorical" ? x && o.showColorBar !== !1 : !1;
+  });
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: `mapui:rounded-lg mapui:bg-white mapui:p-3 mapui:shadow-md mapui:text-sm${n ? ` ${n}` : ""}`,
+      children: [
+        /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:justify-between mapui:mb-2", children: [
+          /* @__PURE__ */ e("h3", { className: "mapui:m-0 mapui:text-xs mapui:font-semibold mapui:uppercase mapui:tracking-wide mapui:text-gray-500", children: "Legend" }),
+          i && /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: "mapui:bg-transparent mapui:border-none mapui:p-0 mapui:cursor-pointer mapui:text-gray-400 hover:mapui:text-gray-600 mapui:text-sm",
+              onClick: () => p((t) => !t),
+              "aria-label": u ? "Collapse legend" : "Expand legend",
+              children: u ? /* @__PURE__ */ e(C, {}) : /* @__PURE__ */ e(A, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e("ul", { className: `mapui:m-0 mapui:list-none mapui:p-0 ${u ? "mapui:space-y-1.5" : "mapui:space-y-2"}`, children: d.map((t) => {
+          const o = t.legend, c = o.displayMode ?? "simple", x = u || r.has(t.id);
+          return /* @__PURE__ */ l("li", { children: [
+            c === "categorical" ? /* @__PURE__ */ e(
+              M,
+              {
+                legend: o,
+                label: t.label,
+                expanded: x,
+                onToggle: () => f(t.id),
+                hasArrowColumn: h
+              }
+            ) : c === "gradient" ? /* @__PURE__ */ e(
+              B,
+              {
+                legend: o,
+                label: t.label,
+                expanded: x,
+                onToggle: () => f(t.id),
+                hasArrowColumn: h
+              }
+            ) : /* @__PURE__ */ e(S, { legend: o, label: t.label, hasArrowColumn: h }),
+            u && i && /* @__PURE__ */ e(
+              D,
+              {
+                layerId: t.id,
+                opacity: I(t),
+                onChange: i
+              }
+            )
+          ] }, t.id);
+        }) })
+      ]
+    }
+  );
+}
+export {
+  q as L
+};

package/dist/{SearchPanel-DCY01Wa-.js → SearchPanel-DtLXMoVs.js}

@@ -80,7 +80,7 @@ function R({
   id: l
 }) {
   const y = D(), f = l ?? y, c = `${f}-start`, p = `${f}-end`, o = "mapui:flex-1 mapui:rounded mapui:border mapui:border-gray-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__ */ h("div", { className: `mapui:flex mapui:flex-col mapui:gap-1 ${N}`.trim(), children: [
+  return /* @__PURE__ */ h("div", { className: `mapui:flex mapui:flex-col mapui:gap-1.5 ${N}`.trim(), children: [
     /* @__PURE__ */ h("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
       /* @__PURE__ */ m("label", { htmlFor: c, className: "mapui:text-xs mapui:text-gray-400 mapui:w-8", children: "From" }),
       /* @__PURE__ */ m(
@@ -152,7 +152,7 @@ function P({ field: e, value: t, onChange: u, className: d = "", id: N }) {
     const x = t && typeof t == "object" && "min" in t ? t.min : void 0;
     u(a === "" ? x === void 0 ? void 0 : { min: x, max: e.max ?? 0 } : { min: x ?? e.min ?? 0, max: Number(a) });
   }, r = t && typeof t == "object" && "value" in t ? String(t.value) : "", v = t && typeof t == "object" && "min" in t ? String(t.min) : "", b = t && typeof t == "object" && "max" in t ? String(t.max) : "";
-  return /* @__PURE__ */ h("div", { className: `mapui:flex mapui:flex-col mapui:gap-1 ${d}`.trim(), children: [
+  return /* @__PURE__ */ h("div", { className: `mapui:flex mapui:flex-col mapui:gap-1.5 ${d}`.trim(), children: [
     /* @__PURE__ */ m(
       "select",
       {
@@ -264,9 +264,9 @@ function _({
     !f && /* @__PURE__ */ m("h3", { className: "mapui:m-0 mapui:mb-2 mapui:text-sm mapui:font-semibold mapui:text-gray-700", children: "Search & Filter" }),
     c.map((p) => {
       const o = t[p.id] ?? {}, g = Object.values(o).some(q);
-      return /* @__PURE__ */ h("div", { className: "mapui:flex mapui:flex-col mapui:gap-2 mapui:border-b mapui:border-gray-100 mapui:pb-2 last:mapui:border-0", children: [
+      return /* @__PURE__ */ h("div", { className: "mapui:flex mapui:flex-col mapui:gap-3 mapui:border-b mapui:border-gray-100 mapui:pb-3 last:mapui:border-0", children: [
         /* @__PURE__ */ h("div", { className: "mapui:flex mapui:items-center mapui:justify-between", children: [
-          /* @__PURE__ */ m("span", { className: "mapui:text-xs mapui:font-medium mapui:text-gray-600", children: p.label }),
+          /* @__PURE__ */ m("span", { className: "mapui:text-sm mapui:font-medium mapui:text-gray-600", children: p.label }),
           g && /* @__PURE__ */ m(
             "button",
             {
@@ -279,7 +279,7 @@ function _({
         ] }),
         p.search.fields.map((i) => {
           const r = o[i.property], v = `${p.id}:${i.property}`, b = `search-${p.id}-${i.property}`;
-          return /* @__PURE__ */ h("div", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
+          return /* @__PURE__ */ h("div", { className: "mapui:flex mapui:flex-col mapui:gap-1", children: [
             /* @__PURE__ */ m("label", { htmlFor: b, className: "mapui:text-xs mapui:text-gray-500", children: i.label }),
             i.type === "text" && i.autocomplete ? /* @__PURE__ */ m(
               V,

package/dist/components/CollapsibleControl/index.js

@@ -1,4 +1,4 @@
-import { C as r } from "../../CollapsibleControl-VFUTWb_5.js";
+import { C as r } from "../../CollapsibleControl-CGRNPpCw.js";
 export {
   r as CollapsibleControl
 };

package/dist/components/Legend/Legend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../../src/components/Legend/Legend.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAA6B,MAAM,aAAa,CAAC;AAE1E,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+ND,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,eAAe,EAAE,SAAS,EAAE,EAAE,WAAW,kDA8E1F"}
+{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../../src/components/Legend/Legend.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAA6B,MAAM,aAAa,CAAC;AAE1E,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8TD,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,eAAe,EAAE,SAAS,EAAE,EAAE,WAAW,kDA2F1F"}

package/dist/components/Legend/index.js

@@ -1,4 +1,4 @@
-import { L as r } from "../../Legend-DNjVLgsd.js";
+import { L as r } from "../../Legend-CwaZA84A.js";
 export {
   r as Legend
 };

package/dist/components/LegendEditor/LegendEditor.d.ts

@@ -2,7 +2,7 @@ import { LegendConfig, StyleConfig } from '../../types';
 export interface LegendEditorProps {
     value: LegendConfig | undefined;
     onChange: (legend: LegendConfig | undefined) => void;
-    style?: StyleConfig;
+    styles?: StyleConfig[];
 }
-export declare function LegendEditor({ value, onChange, style }: LegendEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function LegendEditor({ value, onChange, styles }: LegendEditorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LegendEditor.d.ts.map

package/dist/components/LegendEditor/LegendEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LegendEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LegendEditor/LegendEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAe,WAAW,EAAE,MAAM,aAAa,CAAC;AAW1E,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,YAAY,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AAeD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,2CA8NzE"}
+{"version":3,"file":"LegendEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LegendEditor/LegendEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAe,WAAW,EAAE,MAAM,aAAa,CAAC;AAW1E,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,YAAY,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;CACxB;AAeD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,iBAAiB,2CAyQ1E"}

package/dist/components/SearchPanel/index.js

@@ -1,4 +1,4 @@
-import { S as r } from "../../SearchPanel-DCY01Wa-.js";
+import { S as r } from "../../SearchPanel-DtLXMoVs.js";
 export {
   r as SearchPanel
 };