@hybridcore/ui 1.4.5 → 1.4.7

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/dist/main.d.ts

@@ -517,6 +517,7 @@ declare interface Props {
 declare interface Props_10 {
     values: FV.TemplateFilter[];
     templates: Map<string | number, ONTOLOGY.TemplateType>;
+    inputVariant?: "standard" | "outlined" | "filled";
     onChange(values: FV.TemplateFilter[]): void;
 }
 

package/dist/{property-list-form-D-SW5H_I.js → property-list-form-B1GZ9ZGO.js}

@@ -1,10 +1,10 @@
-import K, { jsx as t, jsxs as c, Fragment as J } from "react/jsx-runtime";
+import K, { jsx as t, jsxs as m, Fragment as J } from "react/jsx-runtime";
 import * as Q from "react";
 import F from "react";
 import X from "lodash";
 import { r as Z, i as ee } from "./createSvgIcon-Cfm1LkEe.js";
 import { DATA_TYPES as R, COORDINATE_FORMAT as te, PRIVACY_PRESERVATION_METHOD as Y } from "./constants/index.js";
-import { T as b } from "./TextField-D87qTh1k.js";
+import { T as h } from "./TextField-D87qTh1k.js";
 import { f as re, F as w, I as C } from "./InputLabel-CWkW8NtU.js";
 import { S as P } from "./Select-ClaBvSqf.js";
 import { M as _ } from "./MenuItem-D-INSvZa.js";
@@ -12,10 +12,10 @@ import { _ as M, a as ae } from "./objectWithoutPropertiesLoose-BK36oJDi.js";
 import { P as n } from "./createStyled-BzvgQjjR.js";
 import { g as oe, u as le, c as ne, a as ie } from "./useThemeProps-uYx_RkOH.js";
 import { g as se, s as de } from "./styled-LNCprp4n.js";
-import { u as me } from "./useFormControl-CatNKXAi.js";
-import { F as f } from "./FormControlLabel-D9KFjcIx.js";
-import { C as y } from "./Checkbox-qy3cjvnb.js";
-import { B as ce } from "./Box-BPyg-Ybm.js";
+import { u as ce } from "./useFormControl-CatNKXAi.js";
+import { F as p } from "./FormControlLabel-D9KFjcIx.js";
+import { C as f } from "./Checkbox-qy3cjvnb.js";
+import { B as me } from "./Box-BPyg-Ybm.js";
 import { B as $ } from "./Button-DLwB_sKd.js";
 function ue(a) {
   return se("MuiFormGroup", a);
@@ -24,20 +24,20 @@ oe("MuiFormGroup", ["root", "row", "error"]);
 const pe = ["className", "row"], fe = (a) => {
   const {
     classes: i,
-    row: m,
+    row: c,
     error: s
   } = a;
   return ie({
-    root: ["root", m && "row", s && "error"]
+    root: ["root", c && "row", s && "error"]
   }, ue, i);
 }, ye = de("div", {
   name: "MuiFormGroup",
   slot: "Root",
   overridesResolver: (a, i) => {
     const {
-      ownerState: m
+      ownerState: c
     } = a;
-    return [i.root, m.row && i.row];
+    return [i.root, c.row && i.row];
   }
 })(({
   ownerState: a
@@ -47,26 +47,26 @@ const pe = ["className", "row"], fe = (a) => {
   flexWrap: "wrap"
 }, a.row && {
   flexDirection: "row"
-})), z = /* @__PURE__ */ Q.forwardRef(function(i, m) {
+})), z = /* @__PURE__ */ Q.forwardRef(function(i, c) {
   const s = le({
     props: i,
     name: "MuiFormGroup"
   }), {
-    className: v,
+    className: b,
     row: e = !1
-  } = s, h = ae(s, pe), u = me(), T = re({
+  } = s, y = ae(s, pe), u = ce(), v = re({
     props: s,
     muiFormControl: u,
     states: ["error"]
   }), o = M({}, s, {
     row: e,
-    error: T.error
+    error: v.error
   }), g = fe(o);
   return /* @__PURE__ */ t(ye, M({
-    className: ne(g.root, v),
+    className: ne(g.root, b),
     ownerState: o,
-    ref: m
-  }, h));
+    ref: c
+  }, y));
 });
 process.env.NODE_ENV !== "production" && (z.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -119,46 +119,46 @@ function We({
     temporal: !1,
     unique: !1
   },
-  disablePropertyId: m,
+  disablePropertyId: c,
   onSubmit: s,
-  onCancel: v
+  onCancel: b
 }) {
   var D, k, E, S, j, O, W, N, G, V, A, U, B, L;
-  const [e, h] = F.useState(i), [u, T] = F.useState({
+  const [e, y] = F.useState(i), [u, v] = F.useState({
     name: !1
   }), o = (r) => {
-    var x, I;
+    var T, x;
     const l = r.target.name;
     let d = r.target.type === "checkbox" ? r.target.checked : r.target.value;
-    if (e.type === "enum" && l === "dataTypeInfo.enumValues" && (d = d.split(",")), ((I = (x = e.dataTypeInfo) == null ? void 0 : x.innerType) == null ? void 0 : I.type) === "enum" && l === "dataTypeInfo.innerType.enumValues" && (d = d.split(",").map((p) => p.trim())), l.includes(".")) {
-      let p = { ...e };
-      X.set(p, l, d), h(p);
+    if (e.type === "enum" && l === "dataTypeInfo.enumValues" && (d = d.split(",")), ((x = (T = e.dataTypeInfo) == null ? void 0 : T.innerType) == null ? void 0 : x.type) === "enum" && l === "dataTypeInfo.innerType.enumValues" && (d = d.split(",")), l.includes(".")) {
+      let I = { ...e };
+      X.set(I, l, d), y(I);
       return;
     }
-    h((p) => ({
-      ...p,
+    y((I) => ({
+      ...I,
       [l]: d
     }));
   }, g = () => {
     if (!e.name) {
-      T({ ...u, name: !0 });
+      v({ ...u, name: !0 });
       return;
     }
     s(e);
   };
-  return F.useEffect(() => (u.name && e.name && T({ ...u, name: !1 }), () => {
+  return F.useEffect(() => (u.name && e.name && v({ ...u, name: !1 }), () => {
   }), [e.name]), F.useEffect(() => {
     if (!["date", "coordinate", "composite-list", "enum"].includes(e.type)) {
       if (e.dataTypeInfo) {
-        const { coordinateFormat: r, datePattern: l, innerType: d, enumValues: x } = e.dataTypeInfo;
-        (r || l || d || x) && h((I) => ({ ...I, dataTypeInfo: {} }));
+        const { coordinateFormat: r, datePattern: l, innerType: d, enumValues: T } = e.dataTypeInfo;
+        (r || l || d || T) && y((x) => ({ ...x, dataTypeInfo: {} }));
       }
       return () => {
       };
     }
-  }, [e.type]), /* @__PURE__ */ c(J, { children: [
+  }, [e.type]), /* @__PURE__ */ m(J, { children: [
     /* @__PURE__ */ t(
-      b,
+      h,
       {
         label: "Name",
         name: "name",
@@ -175,19 +175,19 @@ function We({
       }
     ),
     /* @__PURE__ */ t(
-      b,
+      h,
       {
         label: "Property ID",
         name: "propertyId",
         variant: a,
         fullWidth: !0,
-        disabled: m,
+        disabled: c,
         sx: { mb: 2 },
         value: e.propertyId,
         onChange: o
       }
     ),
-    /* @__PURE__ */ c(w, { fullWidth: !0, variant: a, sx: { mb: 2 }, children: [
+    /* @__PURE__ */ m(w, { fullWidth: !0, variant: a, sx: { mb: 2 }, children: [
       /* @__PURE__ */ t(C, { id: "type-select-label", children: "Type" }),
       /* @__PURE__ */ t(
         P,
@@ -203,7 +203,7 @@ function We({
       )
     ] }),
     e.type === "date" && /* @__PURE__ */ t(
-      b,
+      h,
       {
         label: "Date Format",
         name: "dataTypeInfo.datePattern",
@@ -214,7 +214,7 @@ function We({
         onChange: o
       }
     ),
-    e.type === "coordinate" && /* @__PURE__ */ c(w, { fullWidth: !0, variant: a, sx: { mb: 2 }, children: [
+    e.type === "coordinate" && /* @__PURE__ */ m(w, { fullWidth: !0, variant: a, sx: { mb: 2 }, children: [
       /* @__PURE__ */ t(C, { id: "coordinate-format-select-label", children: "Cordinate Format" }),
       /* @__PURE__ */ t(
         P,
@@ -229,7 +229,7 @@ function We({
         }
       )
     ] }),
-    e.type === "composite-list" && /* @__PURE__ */ c(w, { fullWidth: !0, variant: a, sx: { mb: 2 }, children: [
+    e.type === "composite-list" && /* @__PURE__ */ m(w, { fullWidth: !0, variant: a, sx: { mb: 2 }, children: [
       /* @__PURE__ */ t(C, { id: "composite-list-select-label", children: "Inner Type" }),
       /* @__PURE__ */ t(
         P,
@@ -247,7 +247,7 @@ function We({
       )
     ] }),
     (e.type === "enum" || ((O = (j = e.dataTypeInfo) == null ? void 0 : j.innerType) == null ? void 0 : O.type) === "enum") && /* @__PURE__ */ t(
-      b,
+      h,
       {
         label: "Enum Values",
         name: ((N = (W = e.dataTypeInfo) == null ? void 0 : W.innerType) == null ? void 0 : N.type) === "enum" ? "dataTypeInfo.innerType.enumValues" : "dataTypeInfo.enumValues",
@@ -260,7 +260,7 @@ function We({
       }
     ),
     /* @__PURE__ */ t(
-      b,
+      h,
       {
         label: "Default Value",
         name: "defaultValue",
@@ -271,7 +271,7 @@ function We({
         onChange: o
       }
     ),
-    /* @__PURE__ */ c(w, { fullWidth: !0, variant: a, sx: { mb: 2 }, children: [
+    /* @__PURE__ */ m(w, { fullWidth: !0, variant: a, sx: { mb: 2 }, children: [
       /* @__PURE__ */ t(C, { id: "privacy-method-label", children: "Privacy Preservation Method" }),
       /* @__PURE__ */ t(
         P,
@@ -286,13 +286,13 @@ function We({
         }
       )
     ] }),
-    /* @__PURE__ */ c(z, { row: !0, sx: { mb: 2 }, children: [
+    /* @__PURE__ */ m(z, { row: !0, sx: { mb: 2 }, children: [
       /* @__PURE__ */ t(
-        f,
+        p,
         {
           label: "Required",
           control: /* @__PURE__ */ t(
-            y,
+            f,
             {
               name: "required",
               checked: e.required,
@@ -303,11 +303,11 @@ function We({
         }
       ),
       /* @__PURE__ */ t(
-        f,
+        p,
         {
           label: "Editable",
           control: /* @__PURE__ */ t(
-            y,
+            f,
             {
               name: "editable",
               checked: e.editable,
@@ -318,11 +318,11 @@ function We({
         }
       ),
       /* @__PURE__ */ t(
-        f,
+        p,
         {
           label: "Visible",
           control: /* @__PURE__ */ t(
-            y,
+            f,
             {
               name: "visible",
               checked: e.visible,
@@ -333,19 +333,19 @@ function We({
         }
       ),
       /* @__PURE__ */ t(
-        f,
+        p,
         {
           label: "Unique",
-          control: /* @__PURE__ */ t(y, { name: "unique", checked: e.unique, onChange: o }),
+          control: /* @__PURE__ */ t(f, { name: "unique", checked: e.unique, onChange: o }),
           sx: { width: "30%" }
         }
       ),
       /* @__PURE__ */ t(
-        f,
+        p,
         {
           label: "Distinctive",
           control: /* @__PURE__ */ t(
-            y,
+            f,
             {
               name: "distinctive",
               checked: e.distinctive,
@@ -356,11 +356,11 @@ function We({
         }
       ),
       /* @__PURE__ */ t(
-        f,
+        p,
         {
           label: "Temporal",
           control: /* @__PURE__ */ t(
-            y,
+            f,
             {
               name: "temporal",
               checked: e.temporal,
@@ -371,8 +371,8 @@ function We({
         }
       )
     ] }),
-    /* @__PURE__ */ c(ce, { display: "flex", justifyContent: "flex-end", children: [
-      /* @__PURE__ */ t($, { variant: "contained", onClick: v, sx: { marginRight: 2 }, children: "Cancel" }),
+    /* @__PURE__ */ m(me, { display: "flex", justifyContent: "flex-end", children: [
+      /* @__PURE__ */ t($, { variant: "contained", onClick: b, sx: { marginRight: 2 }, children: "Cancel" }),
       /* @__PURE__ */ t(
         $,
         {

package/package.json

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