@m4l/components 0.1.12 → 0.1.13

package/components/animate/variants/container.11f82b76.js

@@ -0,0 +1,20 @@
+const r = (t) => {
+  const n = t?.staggerIn || 0.05, e = t?.staggerIn || 0.05, a = t?.staggerIn || 0.05;
+  return {
+    animate: {
+      transition: {
+        staggerChildren: n,
+        delayChildren: e
+      }
+    },
+    exit: {
+      transition: {
+        staggerChildren: a,
+        staggerDirection: -1
+      }
+    }
+  };
+};
+export {
+  r as v
+};

package/components/animate/variants/fade.b561c0fc.js

@@ -0,0 +1,59 @@
+import { v as t, a } from "./transition.bd46b9ce.js";
+const s = (e) => {
+  const i = e?.distance || 120, n = e?.durationIn, o = e?.durationOut, y = e?.easeIn, c = e?.easeOut;
+  return {
+    in: {
+      initial: { opacity: 0 },
+      animate: { opacity: 1, transition: t },
+      exit: { opacity: 0, transition: a }
+    },
+    inUp: {
+      initial: { y: i, opacity: 0 },
+      animate: { y: 0, opacity: 1, transition: t({ durationIn: n, easeIn: y }) },
+      exit: { y: i, opacity: 0, transition: a({ durationOut: o, easeOut: c }) }
+    },
+    inDown: {
+      initial: { y: -i, opacity: 0 },
+      animate: { y: 0, opacity: 1, transition: t({ durationIn: n, easeIn: y }) },
+      exit: { y: -i, opacity: 0, transition: a({ durationOut: o, easeOut: c }) }
+    },
+    inLeft: {
+      initial: { x: -i, opacity: 0 },
+      animate: { x: 0, opacity: 1, transition: t({ durationIn: n, easeIn: y }) },
+      exit: { x: -i, opacity: 0, transition: a({ durationOut: o, easeOut: c }) }
+    },
+    inRight: {
+      initial: { x: i, opacity: 0 },
+      animate: { x: 0, opacity: 1, transition: t({ durationIn: n, easeIn: y }) },
+      exit: { x: i, opacity: 0, transition: a({ durationOut: o, easeOut: c }) }
+    },
+    out: {
+      initial: { opacity: 1 },
+      animate: { opacity: 0, transition: t({ durationIn: n, easeIn: y }) },
+      exit: { opacity: 1, transition: a({ durationOut: o, easeOut: c }) }
+    },
+    outUp: {
+      initial: { y: 0, opacity: 1 },
+      animate: { y: -i, opacity: 0, transition: t({ durationIn: n, easeIn: y }) },
+      exit: { y: 0, opacity: 1, transition: a({ durationOut: o, easeOut: c }) }
+    },
+    outDown: {
+      initial: { y: 0, opacity: 1 },
+      animate: { y: i, opacity: 0, transition: t({ durationIn: n, easeIn: y }) },
+      exit: { y: 0, opacity: 1, transition: a({ durationOut: o, easeOut: c }) }
+    },
+    outLeft: {
+      initial: { x: 0, opacity: 1 },
+      animate: { x: -i, opacity: 0, transition: t({ durationIn: n, easeIn: y }) },
+      exit: { x: 0, opacity: 1, transition: a({ durationOut: o, easeOut: c }) }
+    },
+    outRight: {
+      initial: { x: 0, opacity: 1 },
+      animate: { x: i, opacity: 0, transition: t({ durationIn: n, easeIn: y }) },
+      exit: { x: 0, opacity: 1, transition: a({ durationOut: o, easeOut: c }) }
+    }
+  };
+};
+export {
+  s as v
+};

package/components/animate/variants/transition.bd46b9ce.js

@@ -0,0 +1,15 @@
+const e = (n) => {
+  const t = n?.duration || 0.32, a = n?.ease || [0.43, 0.13, 0.23, 0.96];
+  return { duration: t, ease: a };
+}, r = (n) => {
+  const t = n?.durationIn || 0.64, a = n?.easeIn || [0.43, 0.13, 0.23, 0.96];
+  return { duration: t, ease: a };
+}, s = (n) => {
+  const t = n?.durationOut || 0.48, a = n?.easeOut || [0.43, 0.13, 0.23, 0.96];
+  return { duration: t, ease: a };
+};
+export {
+  s as a,
+  e as b,
+  r as v
+};

package/components/formatters/BooleanFormatter/index.cca53b7f.js

@@ -0,0 +1,42 @@
+import { useModuleDictionary as u, useEnvironment as _, getPropertyByString as p } from "@m4l/core";
+import l from "react";
+import { I as d } from "../../Icon/index.cbca79b0.js";
+import { jsx as t } from "react/jsx-runtime";
+function g(r) {
+  const {
+    presentationType: n,
+    value: s,
+    Component: o = l.Fragment
+  } = r, {
+    getLabel: e
+  } = u(), {
+    host_static_assets: c,
+    environment_assets: i
+  } = _(), a = s ?? !1, m = `${c}/${i}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_true.svg`, f = `${c}/${i}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_false.svg`;
+  return n === "string_yes_no" ? /* @__PURE__ */ t(o, {
+    children: e(a ? "formatters.boolean_yes" : "formatters.boolean_no")
+  }) : n === "string_true_false" ? /* @__PURE__ */ t(o, {
+    children: e(a ? "formatters.boolean_true" : "formatters.boolean_false")
+  }) : /* @__PURE__ */ t(o, {
+    children: /* @__PURE__ */ t(d, {
+      src: a ? m : f,
+      bgColor: "action.disabled"
+    })
+  });
+}
+function C(r) {
+  const {
+    fieldValue: n,
+    presentationType: s,
+    Component: o = l.Fragment
+  } = r;
+  return (e) => /* @__PURE__ */ t(g, {
+    presentationType: s,
+    value: p(e, n),
+    Component: o
+  });
+}
+export {
+  g as B,
+  C as c
+};

package/components/formatters/DateFormatter/index.ad8d9b8e.js

@@ -0,0 +1,57 @@
+import c from "react";
+import { useEnvironment as p, useHostTools as u, getPropertyByString as d } from "@m4l/core";
+import "../../Icon/index.cbca79b0.js";
+import "@mui/material/styles";
+import { jsx as f, Fragment as y } from "react/jsx-runtime";
+function g(a) {
+  const {
+    presentationType: n,
+    value: t,
+    format: e,
+    Component: m = c.Fragment
+  } = a, {
+    dfnsFormat: r
+  } = p(), {
+    formatDate: l
+  } = u();
+  let o = e || r.datetime_format, i, s;
+  if (t == null)
+    return /* @__PURE__ */ f(y, {
+      children: "-"
+    });
+  switch (n) {
+    case "datetime":
+      o = e || r.datetime_format;
+      break;
+    case "date":
+      o = e || r.date_format;
+      break;
+    case "time":
+      o = e || r.time_format;
+      break;
+  }
+  try {
+    typeof t == "number" || typeof t == "string" ? s = new Date(t) : s = t, i = l(s, o);
+  } catch {
+    i = "err_typing";
+  }
+  return /* @__PURE__ */ f(m, {
+    children: i
+  });
+}
+function k(a) {
+  const {
+    fieldValue: n,
+    presentationType: t,
+    Component: e = c.Fragment
+  } = a;
+  return (m) => /* @__PURE__ */ f(g, {
+    presentationType: t,
+    value: d(m, n),
+    Component: e
+  });
+}
+export {
+  g as D,
+  k as c
+};

package/components/formatters/index.55856d65.js

@@ -0,0 +1,106 @@
+import l from "react";
+import { jsx as m, Fragment as u } from "react/jsx-runtime";
+import { getPropertyByString as i } from "@m4l/core";
+import "../Icon/index.cbca79b0.js";
+import "@mui/material/styles";
+function _(e) {
+  const {
+    value: n,
+    unit: t,
+    symbol: c,
+    Component: o = l.Fragment
+  } = e;
+  if (n == null || !Array.isArray(n))
+    return /* @__PURE__ */ m(u, {
+      children: ""
+    });
+  let r = "";
+  return n.map((a, s) => {
+    const f = a.cmc_min_closed != !0 ? "<" : "\u2264", d = a.cmc_max_closed != !0 ? "<" : "\u2264";
+    r = r.concat(`${s > 0 ? " " : ""}`, a.cmc_min !== a.cmc_max ? `[${a.cmc_min}${t} ${f} ${c} ${d} ${a.cmc_max}${t} \xB1 ${a.cmc_uncertainty}]` : `[${a.cmc_min}${t} \xB1 ${a.cmc_uncertainty}]`);
+  }), /* @__PURE__ */ m(o, {
+    children: r
+  });
+}
+function y(e) {
+  const {
+    value: n,
+    unit: t,
+    Component: c = l.Fragment
+  } = e;
+  if (console.log("points", n), n == null || !Array.isArray(n))
+    return /* @__PURE__ */ m(u, {
+      children: "[]"
+    });
+  let o = "";
+  return n.map((r) => {
+    r && (console.log("point", r), o = o.concat(`[${r}${t}]`));
+  }), /* @__PURE__ */ m(c, {
+    children: o
+  });
+}
+function C(e) {
+  const {
+    value: n,
+    Component: t = l.Fragment
+  } = e;
+  return /* @__PURE__ */ m(t, {
+    children: `${n}$Cop`
+  });
+}
+function v() {
+  return ["formatters"];
+}
+const h = {
+  pager: {
+    boolean_yes: "Yes",
+    boolean_no: "No",
+    boolean_true: "True",
+    boolean_false: "False"
+  }
+};
+function U(e) {
+  const {
+    fieldUnit: n,
+    fieldValue: t,
+    fieldSymbol: c,
+    Component: o
+  } = e;
+  return (r) => /* @__PURE__ */ m(_, {
+    Component: o,
+    value: i(r, t),
+    unit: i(r, n),
+    symbol: i(r, c)
+  });
+}
+function A(e) {
+  const {
+    fieldUnit: n,
+    fieldValue: t,
+    Component: c
+  } = e;
+  return (o) => /* @__PURE__ */ m(y, {
+    Component: c,
+    value: i(o, t),
+    unit: i(o, n)
+  });
+}
+function V(e) {
+  const {
+    fieldValue: n,
+    Component: t = l.Fragment
+  } = e;
+  return (c) => /* @__PURE__ */ m(t, {
+    children: i(c, n) + ""
+  });
+}
+export {
+  y as P,
+  _ as U,
+  C as a,
+  A as b,
+  U as c,
+  h as d,
+  V as e,
+  v as g
+};

package/components/hook-form/FormProvider/index.257acd9f.js

@@ -0,0 +1,55 @@
+import { useEffect as l } from "react";
+import { useForm as f, FormProvider as m } from "react-hook-form";
+import { o as c } from "../../../node_modules.168cb897.js";
+import { styled as n } from "@mui/material/styles";
+import { jsx as d } from "react/jsx-runtime";
+const p = n("form")(({
+  theme: e
+}) => ({
+  display: "flex",
+  paddingTop: e.spacing(1),
+  marginBottom: e.spacing(1),
+  flexDirection: "column",
+  width: "100%",
+  overflow: "scroll"
+}));
+function V(e) {
+  const {
+    children: i,
+    onSubmit: t,
+    values: s,
+    validationSchema: u,
+    statusLoad: o = "ready"
+  } = e, r = f({
+    resolver: c(u),
+    defaultValues: s
+  });
+  return l(() => {
+    if (console.log("useEffect FormProvider reload_values_provider===", o), o === "reload_values_provider") {
+      Object.keys(s).forEach((a) => {
+        r.setValue(a, s[a], {
+          shouldValidate: !1,
+          shouldDirty: !1,
+          shouldTouch: !1
+        });
+      });
+      return;
+    }
+  }, [r, o, s]), l(() => {
+    o === "ready" && (console.log("useEffect FormProvider Ready", o), r.setValue("statusLoad", "ready", {
+      shouldValidate: !1,
+      shouldDirty: !1,
+      shouldTouch: !1
+    }));
+  }, [o]), /* @__PURE__ */ d(m, {
+    ...r,
+    children: /* @__PURE__ */ d(p, {
+      id: "formProvider",
+      onSubmit: r.handleSubmit(t),
+      children: i
+    })
+  });
+}
+export {
+  V as F
+};

package/components/hook-form/RHFAutocomplete/index.6ed76d4c.js

@@ -0,0 +1,122 @@
+import { useModuleDictionary as S, useModuleSkeleton as L } from "@m4l/core";
+import { useFormContext as V, Controller as _ } from "react-hook-form";
+import { Skeleton as s, Autocomplete as $, TextField as I } from "@mui/material";
+import { styled as l } from "@mui/material/styles";
+import { jsx as o, jsxs as R } from "react/jsx-runtime";
+const j = l("div")(() => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column"
+}));
+l("div")(({
+  theme: t
+}) => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  paddingRight: `${t.spacing(2)}`,
+  [t.breakpoints.down("md")]: {
+    justifyContent: "flex-start"
+  }
+}));
+const A = l("div")(({
+  theme: t
+}) => ({
+  width: "100%",
+  display: "grid",
+  gridTemplateColumns: "1fr auto",
+  gridGap: t.spacing(2),
+  alignItems: "center",
+  height: `${t.spacing(4.5)}`,
+  border: `1px solid ${t.palette.divider}`,
+  borderRadius: `${t.spacing(1)}`,
+  padding: `0 ${t.spacing(2)}`,
+  [t.breakpoints.down("md")]: {
+    width: "100%"
+  }
+}));
+l("div")(() => ({
+  display: "flex",
+  width: "100%",
+  "& .MuiAutocomplete-root": {
+    width: "100%"
+  }
+}));
+function D(t) {
+  const {
+    name: r,
+    getOptionLabel: d,
+    isOptionEqualToValue: u,
+    label: p,
+    skeletonProps: c = {},
+    options: f,
+    disabled: g,
+    ...x
+  } = t, {
+    width: m = 100,
+    height: h = "18px"
+  } = c, {
+    getLabel: b
+  } = S(), T = L(), {
+    control: v,
+    getValues: w
+  } = V(), y = w(r), k = (e) => e == null ? "" : d(e), C = (e, i) => i == null || e === null ? !1 : u(e, i);
+  return T ? /* @__PURE__ */ o(j, {
+    children: /* @__PURE__ */ R(A, {
+      children: [/* @__PURE__ */ o(s, {
+        variant: "text",
+        width: m,
+        height: h
+      }, "sk1"), /* @__PURE__ */ o(s, {
+        variant: "circular",
+        width: 16,
+        height: 16
+      }, "sk2")]
+    })
+  }) : /* @__PURE__ */ o(_, {
+    name: r,
+    control: v,
+    render: ({
+      field: {
+        onChange: e,
+        value: i
+      },
+      fieldState: {
+        error: a
+      }
+    }) => /* @__PURE__ */ o(
+      $,
+      {
+        options: f,
+        getOptionLabel: k,
+        defaultValue: y,
+        isOptionEqualToValue: C,
+        disableClearable: !0,
+        value: i || null,
+        onChange: (n, O) => {
+          e(O);
+        },
+        loadingText: "",
+        disabled: g,
+        noOptionsText: b("rhf_autocomplete.component_no_options"),
+        renderInput: (n) => /* @__PURE__ */ o(I, {
+          ...n,
+          label: p,
+          fullWidth: !0,
+          SelectProps: {
+            native: !0
+          },
+          InputProps: {
+            ...n.InputProps
+          },
+          autoComplete: "off",
+          error: !!a,
+          helperText: a?.message,
+          ...x
+        }, `tx_async_${n.id}`)
+      }
+    )
+  });
+}
+export {
+  D as R
+};

package/components/hook-form/RHFAutocompleteAsync/index.8f2c97ea.js

@@ -0,0 +1,153 @@
+import { useState as p, useEffect as c, Fragment as K } from "react";
+import { useModuleDictionary as M, useModuleSkeleton as W, useNetwork as z, getPropertyByString as B } from "@m4l/core";
+import { useFormContext as N, Controller as J } from "react-hook-form";
+import { Skeleton as b, Autocomplete as Q, TextField as U, CircularProgress as X } from "@mui/material";
+import { styled as f } from "@mui/material/styles";
+import { jsx as i, jsxs as O } from "react/jsx-runtime";
+const Y = f("div")(() => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column"
+}));
+f("div")(({
+  theme: e
+}) => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  paddingRight: `${e.spacing(2)}`,
+  [e.breakpoints.down("md")]: {
+    justifyContent: "flex-start"
+  }
+}));
+const Z = f("div")(({
+  theme: e
+}) => ({
+  width: "100%",
+  display: "grid",
+  gridTemplateColumns: "1fr auto",
+  gridGap: e.spacing(2),
+  alignItems: "center",
+  height: `${e.spacing(4.5)}`,
+  border: `1px solid ${e.palette.divider}`,
+  borderRadius: `${e.spacing(1)}`,
+  padding: `0 ${e.spacing(2)}`,
+  [e.breakpoints.down("md")]: {
+    width: "100%"
+  }
+}));
+function le(e) {
+  const {
+    name: a,
+    getOptionLabel: T,
+    isOptionEqualToValue: k,
+    label: C,
+    endPoint: d,
+    timeout: _ = 5e3,
+    parms: g,
+    resultField: v = "data",
+    skeletonProps: w = {},
+    isRemote: S = !0,
+    disabled: L,
+    ...P
+  } = e, {
+    width: $ = 100,
+    height: A = "18px"
+  } = w, {
+    getLabel: V
+  } = M(), m = W(), {
+    control: F,
+    getValues: I,
+    setValue: R
+  } = N(), {
+    networkOperation: E
+  } = z(), r = I(a), [j, u] = p(r === null ? [] : [r]), [q, x] = p(!1), [l, h] = p(!1), s = q && !l && !!d && !m;
+  c(() => {
+    l && (h(!1), u([]), R(a, null));
+  }, [g, d]), c(() => {
+    !l && r && u([r]);
+  }, [r, l]);
+  const D = (t) => t == null ? "" : T(t), G = (t, n) => n == null || t === null ? !1 : k(t, n);
+  return c(() => {
+    let t = !0;
+    if (!!s)
+      return E({
+        method: "GET",
+        endPoint: d,
+        timeout: _,
+        parms: g,
+        isRemote: S
+      }).then((n) => {
+        t && (u(B(n, v)), h(!0));
+      }), () => {
+        t = !1;
+      };
+  }, [s]), m ? /* @__PURE__ */ i(Y, {
+    children: /* @__PURE__ */ O(Z, {
+      children: [/* @__PURE__ */ i(b, {
+        variant: "text",
+        width: $,
+        height: A
+      }, "sk1"), /* @__PURE__ */ i(b, {
+        variant: "circular",
+        width: 16,
+        height: 16
+      }, "sk2")]
+    })
+  }) : /* @__PURE__ */ i(J, {
+    name: a,
+    control: F,
+    render: ({
+      field: {
+        onChange: t,
+        value: n
+      },
+      fieldState: {
+        error: y
+      }
+    }) => /* @__PURE__ */ i(Q, {
+      options: j,
+      getOptionLabel: D,
+      defaultValue: r,
+      isOptionEqualToValue: G,
+      disableClearable: !0,
+      value: n || null,
+      onOpen: () => {
+        x(!0);
+      },
+      onClose: () => {
+        x(!1);
+      },
+      onChange: (o, H) => {
+        t(H);
+      },
+      disabled: L,
+      loading: s,
+      loadingText: "",
+      noOptionsText: V("rhf_autocomplete.component_no_options"),
+      renderInput: (o) => /* @__PURE__ */ i(U, {
+        ...o,
+        label: C,
+        fullWidth: !0,
+        SelectProps: {
+          native: !0
+        },
+        InputProps: {
+          ...o.InputProps,
+          endAdornment: /* @__PURE__ */ O(K, {
+            children: [s ? /* @__PURE__ */ i(X, {
+              color: "primary",
+              size: 20
+            }, `cp_async${o.id}`) : null, o.InputProps.endAdornment]
+          }, `fr_async_${o.id}`)
+        },
+        autoComplete: "off",
+        error: !!y,
+        helperText: y?.message,
+        ...P
+      }, `tx_async_${o.id}`)
+    }, "at_async")
+  });
+}
+export {
+  le as R
+};

package/components/hook-form/RHFCheckbox/index.f9ce6c39.js

@@ -0,0 +1,59 @@
+import { useFormContext as c, Controller as m } from "react-hook-form";
+import { styled as t } from "@mui/material/styles";
+import { Skeleton as p, FormControlLabel as d, Checkbox as h } from "@mui/material";
+import { useModuleSkeleton as x } from "@m4l/core";
+import { jsx as e, jsxs as g, Fragment as u } from "react/jsx-runtime";
+const f = t("div")(() => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "8px"
+})), k = t(p)(() => ({
+  width: "20px",
+  height: "20px",
+  borderRadius: "4px"
+})), C = t("p")(({
+  theme: r
+}) => ({
+  ...r.typography.caption,
+  color: r.palette.error.main,
+  marginRight: 14,
+  marginLeft: 14
+}));
+function j({
+  name: r,
+  sizeCheck: i = "small",
+  ...l
+}) {
+  const {
+    control: a
+  } = c(), s = x();
+  return /* @__PURE__ */ e(d, {
+    control: /* @__PURE__ */ e(m, {
+      name: r,
+      control: a,
+      render: ({
+        field: o,
+        fieldState: {
+          error: n
+        }
+      }) => s ? /* @__PURE__ */ e(f, {
+        children: /* @__PURE__ */ e(k, {
+          variant: "rectangular"
+        })
+      }) : /* @__PURE__ */ g(u, {
+        children: [/* @__PURE__ */ e(h, {
+          size: i,
+          ...o,
+          checked: o.value
+        }), n?.message && /* @__PURE__ */ e(C, {
+          children: n?.message + ""
+        })]
+      })
+    }),
+    ...l
+  });
+}
+export {
+  j as R
+};