@hybridcore/ui 1.4.6 → 1.4.7

package/dist/components/instance-form/components/composite-list/index.js

@@ -3,7 +3,7 @@ import "@mui/material";
 import "./styled.js";
 import "@mui/icons-material";
 import "../../../../hooks/useToggle.js";
-import { C as l } from "../../../../index-DPf5olog.js";
+import { C as l } from "../../../../index-V39OBeR0.js";
 import "react";
 import "lodash";
 import "dayjs";

package/dist/components/instance-form/components/variable/index.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "lodash";
 import "dayjs";
-import { V as g } from "../../../../index-DPf5olog.js";
+import { V as g } from "../../../../index-V39OBeR0.js";
 import "@mui/material";
 import "@mui/icons-material";
 import "../../../geometry-picker/index.js";

package/dist/components/instance-form/components/variables/index.js

@@ -1,29 +1,29 @@
-import { jsx as n, Fragment as t } from "react/jsx-runtime";
-import l from "react";
-import { V as p } from "../../../../index-DPf5olog.js";
+import { jsx as i, Fragment as t } from "react/jsx-runtime";
+import p from "react";
+import { V as l } from "../../../../index-V39OBeR0.js";
 import m from "lodash";
 function b({
   template: o,
-  value: i,
+  value: e,
   mapboxAccessToken: s,
   variant: a = "outlined",
   onChange: u
 }) {
-  const d = l.useMemo(() => {
-    let r = o == null ? void 0 : o.properties.filter((e) => e.visible);
+  const d = p.useMemo(() => {
+    let r = o == null ? void 0 : o.properties.filter((n) => n.visible);
     return r = m.orderBy(r, "id"), r;
   }, [o]), f = (r) => {
-    const e = {
+    const n = {
       target: {
-        value: { ...i, ...r }
+        value: { ...e, ...r }
       }
     };
-    u(e);
+    u(n);
   };
-  return o === void 0 ? /* @__PURE__ */ n(t, {}) : /* @__PURE__ */ n(t, { children: d.map((r, e) => {
-    const c = i[r.propertyId];
-    return /* @__PURE__ */ n(
-      p,
+  return o === void 0 ? /* @__PURE__ */ i(t, {}) : /* @__PURE__ */ i(t, { children: d.map((r, n) => {
+    const c = e ? e[r.propertyId] : "";
+    return /* @__PURE__ */ i(
+      l,
       {
         property: r,
         value: c,
@@ -31,7 +31,7 @@ function b({
         variant: a,
         onChange: f
       },
-      e
+      n
     );
   }) });
 }

package/dist/components/property-mapping/index.js

@@ -5,7 +5,7 @@ import { DataGrid as fe } from "@mui/x-data-grid";
 import { useState as H, useEffect as ue } from "react";
 import h from "lodash";
 import { e as ye } from "../../ol-CHaVTXvL.js";
-import { V as he } from "../../index-DPf5olog.js";
+import { V as he } from "../../index-V39OBeR0.js";
 import { RangeSelector as me } from "../range-selector/index.js";
 const $e = ({
   open: F,

package/dist/index-V39OBeR0.js

@@ -0,0 +1,335 @@
+import { jsxs as h, Fragment as D, jsx as n } from "react/jsx-runtime";
+import I from "lodash";
+import N from "dayjs";
+import { FormControl as W, FormLabel as j, FormGroup as Y, FormControlLabel as $, Checkbox as v, Typography as P, Button as L, Chip as O, Dialog as _, DialogTitle as E, DialogContent as G, DialogActions as M, InputAdornment as H, Tooltip as K } from "@mui/material";
+import { Container as R, Values as U, MiniButton as q } from "./components/instance-form/components/composite-list/styled.js";
+import { KeyboardArrowUp as J, KeyboardArrowDown as Q, Add as X, LockOutlined as Z } from "@mui/icons-material";
+import z from "./hooks/useToggle.js";
+import { GeometryPicker as ee } from "./components/geometry-picker/index.js";
+import { PhoneInput as ne } from "./components/phone-input/index.js";
+import { DateTimePicker as le } from "./components/date-time-picker/index.js";
+import { T as S } from "./TextField-D87qTh1k.js";
+import { B as T } from "./Box-BPyg-Ybm.js";
+import { F as te } from "./FormControlLabel-D9KFjcIx.js";
+import { C as ae } from "./Checkbox-qy3cjvnb.js";
+import { F as oe, I as ie } from "./InputLabel-CWkW8NtU.js";
+import { S as de } from "./Select-ClaBvSqf.js";
+import { M as me } from "./MenuItem-D-INSvZa.js";
+import { useState as B } from "react";
+function ce({
+  property: i,
+  mapboxAccessToken: e,
+  value: l,
+  variant: r = "outlined",
+  size: m = "medium",
+  onChange: d
+}) {
+  var g, V, t;
+  const f = z(!1), [c, p] = B(), [C, w] = B(!1), x = 10, A = (a) => {
+    p(I.get(a, i.propertyId));
+  }, y = () => {
+    d([...l || [], c]), p(""), f.action.close();
+  }, F = (a) => () => {
+    if (l) {
+      const o = [...l];
+      o.splice(a, 1), d(o);
+    }
+  }, k = (a) => {
+    const { value: o, checked: s } = a.target;
+    let u = I.isArray(l) ? l : [];
+    s ? u.push(o) : u = u.filter((b) => b !== o), d(u);
+  };
+  if (((V = (g = i.dataTypeInfo) == null ? void 0 : g.innerType) == null ? void 0 : V.type) === "enum") {
+    const { enumValues: a } = i.dataTypeInfo.innerType;
+    return /* @__PURE__ */ h(D, { children: [
+      /* @__PURE__ */ h(W, { fullWidth: !0, component: "fieldset", variant: r, children: [
+        /* @__PURE__ */ n(j, { component: "legend", sx: { mb: 1 }, children: i.name }),
+        /* @__PURE__ */ n(Y, { children: a && a.length > 0 ? a.slice(0, C ? 9999 : x).map((o, s) => /* @__PURE__ */ n(
+          $,
+          {
+            label: o,
+            control: /* @__PURE__ */ n(
+              v,
+              {
+                name: i.propertyId,
+                value: o,
+                size: "small",
+                checked: I.isArray(l) ? l.includes(o) : !1,
+                onChange: k
+              }
+            ),
+            componentsProps: {
+              typography: {
+                variant: "body2"
+              }
+            }
+          },
+          s
+        )) : /* @__PURE__ */ n(P, { variant: "caption", mb: 1, children: "No enum values!" }) })
+      ] }),
+      I.isArray(a) && a.length > x && /* @__PURE__ */ h(
+        L,
+        {
+          size: "small",
+          sx: { p: 0, textTransform: "none" },
+          endIcon: C ? /* @__PURE__ */ n(J, {}) : /* @__PURE__ */ n(Q, {}),
+          onClick: () => w((o) => !o),
+          children: [
+            "Show ",
+            C ? "Less" : "More"
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ h(D, { children: [
+    /* @__PURE__ */ h(R, { variant: r, children: [
+      /* @__PURE__ */ n(P, { children: i.name }),
+      /* @__PURE__ */ n(U, { children: I.isArray(l) && l.map((a, o) => {
+        var s, u;
+        return /* @__PURE__ */ n(
+          O,
+          {
+            label: ((u = (s = i.dataTypeInfo) == null ? void 0 : s.innerType) == null ? void 0 : u.type) === "date" ? N(a).format("DD/MM/YYYY HH:mm:ss") : a,
+            size: m,
+            onDelete: F(o)
+          },
+          o
+        );
+      }) }),
+      /* @__PURE__ */ n(
+        q,
+        {
+          startIcon: /* @__PURE__ */ n(X, {}),
+          variant: "text",
+          onClick: f.action.open,
+          children: "Add"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ h(
+      _,
+      {
+        open: f.state.isOpen,
+        onClose: f.action.close,
+        maxWidth: "sm",
+        fullWidth: !0,
+        children: [
+          /* @__PURE__ */ n(E, { children: "Add List Value" }),
+          /* @__PURE__ */ n(G, { children: (t = i.dataTypeInfo) != null && t.innerType ? /* @__PURE__ */ n(
+            se,
+            {
+              mapboxAccessToken: e,
+              property: {
+                ...i,
+                name: "Value",
+                type: i.dataTypeInfo.innerType.type
+              },
+              value: c,
+              onChange: A
+            }
+          ) : null }),
+          /* @__PURE__ */ h(M, { children: [
+            /* @__PURE__ */ n(
+              L,
+              {
+                variant: "contained",
+                color: "inherit",
+                onClick: f.action.close,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ n(L, { variant: "contained", color: "primary", onClick: y, children: "Ok" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function se({
+  mapboxAccessToken: i,
+  property: e,
+  value: l,
+  variant: r = "standard",
+  size: m = "medium",
+  disableMargin: d = !1,
+  defaultExtent: f,
+  // keyAuth,
+  onChange: c
+}) {
+  var k, g, V;
+  const p = (t) => {
+    const o = t.target.value.split(",").map((s) => s.trimStart());
+    c({
+      [e.propertyId]: o
+    });
+  }, C = (t) => {
+    const { name: a, type: o, checked: s, value: u } = t.target;
+    let b = u;
+    e.type === "double" && (b = b.replace(",", "."), b = b.replace(/[^\d.-]+/g, "")), c({
+      [a]: o === "checkbox" ? s : b
+    });
+  }, w = (t) => {
+    c({
+      [e.propertyId]: t
+    });
+  }, x = (t) => {
+    c({
+      [e.propertyId]: t.target.value
+    });
+  }, A = (t) => (a) => {
+    c({
+      [t]: a
+    });
+  }, y = (t) => (a) => {
+    c({
+      [t]: a
+    });
+  }, F = (t) => (a) => {
+    c({
+      [t]: a
+    });
+  };
+  if ([
+    "string",
+    "integer",
+    "double",
+    "text",
+    "long",
+    "byte",
+    "bank-account"
+  ].includes(e.type))
+    return /* @__PURE__ */ n(
+      S,
+      {
+        label: e.name,
+        name: e.propertyId,
+        value: l ?? e.defaultValue ?? "",
+        defaultValue: l,
+        onChange: C,
+        variant: r,
+        type: "text",
+        multiline: e.type === "text",
+        disabled: !e.editable,
+        fullWidth: !0,
+        sx: { mb: d ? 0 : 2 },
+        InputProps: {
+          size: m,
+          ...e.privacyPreservationMethod === "ENCRYPTION" ? {
+            endAdornment: /* @__PURE__ */ n(H, { position: "end", children: /* @__PURE__ */ n(K, { title: "Encrypted Field", children: /* @__PURE__ */ n(Z, {}) }) })
+          } : {}
+        }
+      }
+    );
+  if (e.type === "date") {
+    const t = l !== void 0 ? N(l).format() : l;
+    return /* @__PURE__ */ n(T, { mb: d ? 0 : 2, children: /* @__PURE__ */ n(
+      le,
+      {
+        label: e.name,
+        value: t,
+        variant: r,
+        size: m,
+        name: e.propertyId,
+        onChange: w
+      }
+    ) });
+  }
+  if (e.type === "list") {
+    let t = "";
+    return e.defaultValue && (t = I.isArray(e.defaultValue) ? l.join(", ") : e.defaultValue), l && (t = I.isArray(l) ? l.join(",") : l), /* @__PURE__ */ n(
+      S,
+      {
+        label: e.name,
+        name: e.propertyId,
+        value: t,
+        onChange: p,
+        variant: r,
+        disabled: !e.editable,
+        fullWidth: !0,
+        helperText: m === "small" ? null : "Add list values with the comma (,) separated string",
+        sx: { mb: d ? 0 : 2 },
+        InputProps: {
+          size: m,
+          placeholder: m === "small" ? "Add list values with the comma (,) separated string" : ""
+        }
+      }
+    );
+  }
+  if (e.type === "boolean")
+    return /* @__PURE__ */ n(T, { mb: d ? 0 : 2, children: /* @__PURE__ */ n(
+      te,
+      {
+        control: /* @__PURE__ */ n(
+          ae,
+          {
+            name: e.propertyId,
+            checked: !!l,
+            onChange: C,
+            size: m
+          }
+        ),
+        label: e.name
+      }
+    ) });
+  if (e.type === "enum") {
+    let t = [];
+    return (k = e.dataTypeInfo) != null && k.enumValues && (t = e.dataTypeInfo.enumValues), (V = (g = e.dataTypeInfo) == null ? void 0 : g.innerType) != null && V.enumValues && (t = e.dataTypeInfo.innerType.enumValues), /* @__PURE__ */ h(
+      oe,
+      {
+        fullWidth: !0,
+        variant: r,
+        sx: { mb: d ? 0 : 2 },
+        size: m,
+        children: [
+          /* @__PURE__ */ n(ie, { id: `${e.propertyId}-label`, children: e.name }),
+          /* @__PURE__ */ n(
+            de,
+            {
+              label: e.name,
+              name: e.name,
+              labelId: `${e.propertyId}-label`,
+              id: e.propertyId,
+              value: l ?? "",
+              onChange: x,
+              children: t.map((a, o) => /* @__PURE__ */ n(me, { value: a, children: a }, o))
+            }
+          )
+        ]
+      }
+    );
+  }
+  return e.type === "geometry" ? /* @__PURE__ */ n(T, { sx: { mb: d ? 0 : 2, width: "100%" }, children: /* @__PURE__ */ n(
+    ee,
+    {
+      mapboxAccessToken: i,
+      label: e.name,
+      value: l ?? e.defaultValue ?? "",
+      defaultExtent: f,
+      variant: r,
+      onChange: A(e.propertyId)
+    }
+  ) }) : e.type === "phone-number" ? /* @__PURE__ */ n(T, { sx: { mb: d ? 0 : 2, width: "100%" }, children: /* @__PURE__ */ n(
+    ne,
+    {
+      label: e.name,
+      placeholder: "Enter phone number",
+      value: l ?? e.defaultValue ?? "",
+      onChange: y(e.propertyId)
+    }
+  ) }) : e.type === "composite-list" ? /* @__PURE__ */ n(T, { sx: { mb: d ? 0 : 2, width: "100%" }, children: /* @__PURE__ */ n(
+    ce,
+    {
+      property: e,
+      value: l ?? e.defaultValue ?? "",
+      variant: r,
+      size: m,
+      mapboxAccessToken: i,
+      onChange: F(e.propertyId)
+    }
+  ) }) : /* @__PURE__ */ n(D, {});
+}
+export {
+  ce as C,
+  se as V
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hybridcore/ui",
   "description": "Hybrid Core UI Library",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "author": "Hybrid Core",
   "license": "ISC",
   "type": "module",

package/dist/index-DPf5olog.js

@@ -1,288 +0,0 @@
-import { jsxs as C, Fragment as P, jsx as n } from "react/jsx-runtime";
-import T from "lodash";
-import F from "dayjs";
-import { Typography as B, Chip as j, Dialog as N, DialogTitle as S, DialogContent as W, DialogActions as Y, Button as w, InputAdornment as v, Tooltip as O } from "@mui/material";
-import { Container as _, Values as y, MiniButton as E } from "./components/instance-form/components/composite-list/styled.js";
-import { Add as G, LockOutlined as H } from "@mui/icons-material";
-import R from "./hooks/useToggle.js";
-import { GeometryPicker as $ } from "./components/geometry-picker/index.js";
-import { PhoneInput as q } from "./components/phone-input/index.js";
-import { DateTimePicker as J } from "./components/date-time-picker/index.js";
-import { T as D } from "./TextField-D87qTh1k.js";
-import { B as b } from "./Box-BPyg-Ybm.js";
-import { F as K } from "./FormControlLabel-D9KFjcIx.js";
-import { C as Q } from "./Checkbox-qy3cjvnb.js";
-import { F as U, I as X } from "./InputLabel-CWkW8NtU.js";
-import { S as Z } from "./Select-ClaBvSqf.js";
-import { M } from "./MenuItem-D-INSvZa.js";
-import { useState as z } from "react";
-function ee({
-  property: m,
-  mapboxAccessToken: e,
-  value: l,
-  variant: c = "outlined",
-  size: i = "medium",
-  onChange: a
-}) {
-  var x;
-  const s = R(!1), [d, g] = z(), V = (u) => {
-    g(T.get(u, m.propertyId));
-  }, p = () => {
-    a([...l || [], d]), g(""), s.action.close();
-  }, k = (u) => () => {
-    if (l) {
-      const r = [...l];
-      r.splice(u, 1), a(r);
-    }
-  };
-  return /* @__PURE__ */ C(P, { children: [
-    /* @__PURE__ */ C(_, { variant: c, children: [
-      /* @__PURE__ */ n(B, { children: m.name }),
-      /* @__PURE__ */ n(y, { children: T.isArray(l) && l.map((u, r) => {
-        var h, t;
-        return /* @__PURE__ */ n(
-          j,
-          {
-            label: ((t = (h = m.dataTypeInfo) == null ? void 0 : h.innerType) == null ? void 0 : t.type) === "date" ? F(u).format("DD/MM/YYYY HH:mm:ss") : u,
-            size: i,
-            onDelete: k(r)
-          },
-          r
-        );
-      }) }),
-      /* @__PURE__ */ n(
-        E,
-        {
-          startIcon: /* @__PURE__ */ n(G, {}),
-          variant: "text",
-          onClick: s.action.open,
-          children: "Add"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ C(
-      N,
-      {
-        open: s.state.isOpen,
-        onClose: s.action.close,
-        maxWidth: "sm",
-        fullWidth: !0,
-        children: [
-          /* @__PURE__ */ n(S, { children: "Add List Value" }),
-          /* @__PURE__ */ n(W, { children: (x = m.dataTypeInfo) != null && x.innerType ? /* @__PURE__ */ n(
-            ne,
-            {
-              mapboxAccessToken: e,
-              property: {
-                ...m,
-                name: "Value",
-                type: m.dataTypeInfo.innerType.type
-              },
-              value: d,
-              onChange: V
-            }
-          ) : null }),
-          /* @__PURE__ */ C(Y, { children: [
-            /* @__PURE__ */ n(
-              w,
-              {
-                variant: "contained",
-                color: "inherit",
-                onClick: s.action.close,
-                children: "Cancel"
-              }
-            ),
-            /* @__PURE__ */ n(w, { variant: "contained", color: "primary", onClick: p, children: "Ok" })
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-function ne({
-  mapboxAccessToken: m,
-  property: e,
-  value: l,
-  variant: c = "standard",
-  size: i = "medium",
-  disableMargin: a = !1,
-  defaultExtent: s,
-  // keyAuth,
-  onChange: d
-}) {
-  var h;
-  const g = (t) => {
-    const f = t.target.value.split(",").map((A) => A.trimStart());
-    d({
-      [e.propertyId]: f
-    });
-  }, V = (t) => {
-    const { name: o, type: f, checked: A, value: L } = t.target;
-    let I = L;
-    e.type === "double" && (I = I.replace(",", "."), I = I.replace(/[^\d.-]+/g, "")), d({
-      [o]: f === "checkbox" ? A : I
-    });
-  }, p = (t) => {
-    d({
-      [e.propertyId]: t
-    });
-  }, k = (t) => {
-    d({
-      [e.propertyId]: t.target.value
-    });
-  }, x = (t) => (o) => {
-    d({
-      [t]: o
-    });
-  }, u = (t) => (o) => {
-    d({
-      [t]: o
-    });
-  }, r = (t) => (o) => {
-    d({
-      [t]: o
-    });
-  };
-  if ([
-    "string",
-    "integer",
-    "double",
-    "text",
-    "long",
-    "byte",
-    "bank-account"
-  ].includes(e.type))
-    return /* @__PURE__ */ n(
-      D,
-      {
-        label: e.name,
-        name: e.propertyId,
-        value: l ?? e.defaultValue ?? "",
-        defaultValue: l,
-        onChange: V,
-        variant: c,
-        type: "text",
-        multiline: e.type === "text",
-        disabled: !e.editable,
-        fullWidth: !0,
-        sx: { mb: a ? 0 : 2 },
-        InputProps: {
-          size: i,
-          ...e.privacyPreservationMethod === "ENCRYPTION" ? {
-            endAdornment: /* @__PURE__ */ n(v, { position: "end", children: /* @__PURE__ */ n(O, { title: "Encrypted Field", children: /* @__PURE__ */ n(H, {}) }) })
-          } : {}
-        }
-      }
-    );
-  if (e.type === "date") {
-    const t = l !== void 0 ? F(l).format() : l;
-    return /* @__PURE__ */ n(b, { mb: a ? 0 : 2, children: /* @__PURE__ */ n(
-      J,
-      {
-        label: e.name,
-        value: t,
-        variant: c,
-        size: i,
-        name: e.propertyId,
-        onChange: p
-      }
-    ) });
-  }
-  if (e.type === "list") {
-    let t = "";
-    return e.defaultValue && (t = T.isArray(e.defaultValue) ? l.join(", ") : e.defaultValue), l && (t = T.isArray(l) ? l.join(",") : l), /* @__PURE__ */ n(
-      D,
-      {
-        label: e.name,
-        name: e.propertyId,
-        value: t,
-        onChange: g,
-        variant: c,
-        disabled: !e.editable,
-        fullWidth: !0,
-        helperText: i === "small" ? null : "Add list values with the comma (,) separated string",
-        sx: { mb: a ? 0 : 2 },
-        InputProps: {
-          size: i,
-          placeholder: i === "small" ? "Add list values with the comma (,) separated string" : ""
-        }
-      }
-    );
-  }
-  if (e.type === "boolean")
-    return /* @__PURE__ */ n(b, { mb: a ? 0 : 2, children: /* @__PURE__ */ n(
-      K,
-      {
-        control: /* @__PURE__ */ n(
-          Q,
-          {
-            name: e.propertyId,
-            checked: !!l,
-            onChange: V,
-            size: i
-          }
-        ),
-        label: e.name
-      }
-    ) });
-  if (e.type === "enum") {
-    let t = [];
-    return (h = e.dataTypeInfo) != null && h.enumValues && (t = e.dataTypeInfo.enumValues), /* @__PURE__ */ C(
-      U,
-      {
-        fullWidth: !0,
-        variant: c,
-        sx: { mb: a ? 0 : 2 },
-        size: i,
-        children: [
-          /* @__PURE__ */ n(X, { id: `${e.propertyId}-label`, children: e.name }),
-          /* @__PURE__ */ n(
-            Z,
-            {
-              label: e.name,
-              name: e.name,
-              labelId: `${e.propertyId}-label`,
-              id: e.propertyId,
-              value: l ?? "",
-              onChange: k,
-              children: t.map((o, f) => /* @__PURE__ */ n(M, { value: o, children: o }, f))
-            }
-          )
-        ]
-      }
-    );
-  }
-  return e.type === "geometry" ? /* @__PURE__ */ n(b, { sx: { mb: a ? 0 : 2, width: "100%" }, children: /* @__PURE__ */ n(
-    $,
-    {
-      mapboxAccessToken: m,
-      label: e.name,
-      value: l ?? e.defaultValue ?? "",
-      defaultExtent: s,
-      variant: c,
-      onChange: x(e.propertyId)
-    }
-  ) }) : e.type === "phone-number" ? /* @__PURE__ */ n(b, { sx: { mb: a ? 0 : 2, width: "100%" }, children: /* @__PURE__ */ n(
-    q,
-    {
-      label: e.name,
-      placeholder: "Enter phone number",
-      value: l ?? e.defaultValue ?? "",
-      onChange: u(e.propertyId)
-    }
-  ) }) : e.type === "composite-list" ? /* @__PURE__ */ n(b, { sx: { mb: a ? 0 : 2, width: "100%" }, children: /* @__PURE__ */ n(
-    ee,
-    {
-      property: e,
-      value: l ?? e.defaultValue ?? "",
-      variant: c,
-      size: i,
-      mapboxAccessToken: m,
-      onChange: r(e.propertyId)
-    }
-  ) }) : /* @__PURE__ */ n(P, {});
-}
-export {
-  ee as C,
-  ne as V
-};