@m4l/components 0.1.15 → 0.1.17

package/components/hook-form/RHFRadioGroup/index.b3335e13.js

@@ -0,0 +1,43 @@
+import { useFormContext as s, Controller as u } from "react-hook-form";
+import { RadioGroup as c, FormControlLabel as x, Radio as p, FormHelperText as f } from "@mui/material";
+import { jsx as r, jsxs as R } from "react/jsx-runtime";
+function j({
+  name: l,
+  options: m,
+  getOptionLabel: e,
+  ...n
+}) {
+  const {
+    control: a
+  } = s();
+  return /* @__PURE__ */ r(u, {
+    name: l,
+    control: a,
+    render: ({
+      field: d,
+      fieldState: {
+        error: t
+      }
+    }) => /* @__PURE__ */ R("div", {
+      children: [/* @__PURE__ */ r(c, {
+        ...d,
+        row: !0,
+        ...n,
+        children: m.map((o, i) => /* @__PURE__ */ r(x, {
+          value: o,
+          control: /* @__PURE__ */ r(p, {}),
+          label: e?.length ? e[i] : o
+        }, o))
+      }), !!t && /* @__PURE__ */ r(f, {
+        error: !0,
+        sx: {
+          px: 2
+        },
+        children: t.message
+      })]
+    })
+  });
+}
+export {
+  j as R
+};

package/components/hook-form/RHFSelect/index.b6ca8bb2.js

@@ -0,0 +1,36 @@
+import { useFormContext as m, Controller as s } from "react-hook-form";
+import { TextField as u } from "@mui/material";
+import { jsx as t } from "react/jsx-runtime";
+function x({
+  name: r,
+  children: o,
+  ...l
+}) {
+  const {
+    control: n
+  } = m();
+  return /* @__PURE__ */ t(s, {
+    name: r,
+    control: n,
+    render: ({
+      field: i,
+      fieldState: {
+        error: e
+      }
+    }) => /* @__PURE__ */ t(u, {
+      ...i,
+      select: !0,
+      fullWidth: !0,
+      SelectProps: {
+        native: !0
+      },
+      error: !!e,
+      helperText: e?.message,
+      ...l,
+      children: o
+    })
+  });
+}
+export {
+  x as R
+};

package/components/hook-form/RHFTextField/index.4c455f75.js

@@ -0,0 +1,77 @@
+import { useFormContext as R, Controller as T } from "react-hook-form";
+import { Skeleton as k, TextField as C } from "@mui/material";
+import { styled as S } from "@mui/material/styles";
+import { forwardRef as b } from "react";
+import { useModuleSkeleton as y } from "@m4l/core";
+import { jsx as t } from "react/jsx-runtime";
+const H = S("div")(({
+  theme: e
+}) => ({
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  border: `1px solid ${e.palette.divider}`,
+  padding: "12px 14px",
+  borderRadius: e.spacing(1)
+})), v = b((e, l) => {
+  const {
+    name: a,
+    autoComplete: d = "off",
+    skeletonProps: s = {},
+    type: o,
+    ...p
+  } = e, {
+    width: m = "100%",
+    height: f = 14
+  } = s, u = y(), {
+    control: x
+  } = R();
+  return u ? /* @__PURE__ */ t(H, {
+    children: /* @__PURE__ */ t(k, {
+      variant: "text",
+      width: m,
+      height: f
+    })
+  }) : /* @__PURE__ */ t(T, {
+    name: a,
+    control: x,
+    render: ({
+      field: {
+        onChange: n,
+        onBlur: c,
+        value: g,
+        name: h,
+        ref: F
+      },
+      fieldState: {
+        error: i
+      }
+    }) => /* @__PURE__ */ t(
+      C,
+      {
+        inputRef: l,
+        autoComplete: d,
+        onChange: (r) => {
+          if (o === "number" && r.target.value) {
+            n(Number(r.target.value));
+            return;
+          }
+          n(r);
+        },
+        onBlur: c,
+        value: g,
+        name: h,
+        ref: F,
+        fullWidth: !0,
+        error: !!i,
+        helperText: i?.message,
+        type: o,
+        ...p
+      }
+    )
+  });
+});
+v.displayName = "RHFTextField";
+export {
+  v as R
+};

package/components/hook-form/RHFUpload/index.ed3d739f.js

@@ -0,0 +1,244 @@
+import { styled as y, FormHelperText as f } from "@mui/material";
+import { useCallback as x } from "react";
+import { useFormContext as v, Controller as C } from "react-hook-form";
+import { i as b } from "../../../lodash.e09401f0.js";
+import { useDropzone as w } from "react-dropzone";
+import { styled as o, alpha as I } from "@mui/material/styles";
+import { I as h } from "../../Image/index.e790b50b.js";
+import { useEnvironment as _, useModuleDictionary as R } from "@m4l/core";
+import { jsxs as a, Fragment as j, jsx as e } from "react/jsx-runtime";
+import "../../../react-lazy-load-image-component.45b56650.js";
+const D = o("div")(({
+  theme: t
+}) => ({
+  width: "inherit",
+  height: "100%",
+  minWidth: t.spacing(20),
+  margin: "auto",
+  borderRadius: t.spacing(1),
+  padding: t.spacing(1),
+  border: `1px dashed ${t.palette.grey[50032]}`
+})), S = o("div")(({
+  theme: t
+}) => ({
+  zIndex: 0,
+  width: "100%",
+  height: "100%",
+  outline: "none",
+  display: "flex",
+  overflow: "hidden",
+  borderRadius: t.spacing(1),
+  position: "relative",
+  alignItems: "center",
+  justifyContent: "center",
+  "& > *": {
+    width: "100%",
+    height: "100%"
+  },
+  "&:hover": {
+    cursor: "pointer",
+    "& .placeholder": {
+      zIndex: 9
+    }
+  }
+})), U = o("div")(({
+  theme: t
+}) => ({
+  "&:hover": {
+    opacity: 1
+  },
+  display: "flex",
+  justifyContent: "center",
+  position: "absolute",
+  zIndex: "2",
+  inset: "0",
+  transition: t.transitions.create("opacity", {
+    easing: t.transitions.easing.easeInOut,
+    duration: t.transitions.duration.shorter
+  }),
+  overflow: "auto"
+})), W = o("div")(({
+  theme: t
+}) => ({
+  padding: t.spacing(3, 5),
+  display: "flex",
+  flexWrap: "wrap",
+  justifyContent: "center",
+  width: "100%",
+  height: "100%",
+  gap: t.spacing(3)
+})), z = o("div")(({
+  theme: t
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  flexDirection: "column",
+  gap: t.spacing(3)
+})), F = o("span")(({
+  theme: t
+}) => ({
+  ...t.typography.subtitle2,
+  width: "fit-content"
+})), P = o("span")(({
+  theme: t
+}) => ({
+  ...t.typography.body2,
+  minWidth: t.spacing(20)
+})), $ = o("span")(({
+  theme: t
+}) => ({
+  ...t.typography.caption,
+  width: "fit-content"
+})), H = o("div")(({
+  theme: t
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  maxWidth: t.spacing(20)
+}));
+o("div")(() => ({
+  width: "100%",
+  height: "100%",
+  position: "absolute",
+  inset: "0",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
+}));
+function L({
+  error: t,
+  file: i,
+  helperText: s,
+  sx: l,
+  ...c
+}) {
+  const {
+    getRootProps: r,
+    getInputProps: n,
+    isDragActive: d,
+    isDragReject: g
+  } = w({
+    multiple: !1,
+    ...c
+  }), {
+    host_static_assets: m,
+    environment_assets: u
+  } = _(), {
+    getLabel: p
+  } = R();
+  return /* @__PURE__ */ a(j, {
+    children: [/* @__PURE__ */ e(D, {
+      id: "RootStyle",
+      sx: {
+        ...(g || t) && {
+          borderColor: "error.light"
+        },
+        ...l
+      },
+      children: /* @__PURE__ */ a(S, {
+        id: "DropZoneStyle",
+        ...r(),
+        sx: {
+          ...d && {
+            opacity: 0.72
+          }
+        },
+        children: [/* @__PURE__ */ e("input", {
+          ...n()
+        }), i && /* @__PURE__ */ e(h, {
+          alt: "avatar",
+          src: b(i) ? i : i.preview,
+          sx: {
+            zIndex: 8
+          }
+        }), /* @__PURE__ */ e(U, {
+          id: "PlaceholderStyle",
+          className: "placeholder",
+          sx: {
+            ...i ? {
+              bgcolor: I("#161C24", 0.72),
+              color: "common.white",
+              opacity: 0
+            } : {
+              opacity: 1
+            },
+            ...(g || t) && {
+              bgcolor: "error.lighter",
+              borderColor: "error.light",
+              color: "error.main"
+            }
+          },
+          children: /* @__PURE__ */ a(W, {
+            className: "ContainerUploadBody",
+            children: [/* @__PURE__ */ e(H, {
+              children: /* @__PURE__ */ e(h, {
+                src: `${m}/${u}/frontend/components/upload_image/assets/img/upload_image_illustration.svg`,
+                effect: "opacity",
+                width: "100%",
+                height: "auto",
+                mb: 1
+              })
+            }), /* @__PURE__ */ a(z, {
+              children: [/* @__PURE__ */ e(F, {
+                children: p(i ? "upload_image.title_update" : "upload_image.title_upload")
+              }), /* @__PURE__ */ e(P, {
+                children: p("upload_image.description")
+              }), /* @__PURE__ */ e($, {
+                children: p("upload_image.conditions")
+              })]
+            })]
+          })
+        })]
+      })
+    }), s && s]
+  });
+}
+const O = y("div")(() => ({
+  width: "inherit",
+  height: "inherit",
+  padding: "1px"
+}));
+function G({
+  name: t,
+  ...i
+}) {
+  const {
+    control: s,
+    setValue: l
+  } = v(), c = x((r) => {
+    const n = r[0];
+    n && l(t, Object.assign(n, {
+      preview: URL.createObjectURL(n)
+    }));
+  }, [l]);
+  return /* @__PURE__ */ e(C, {
+    name: t,
+    control: s,
+    render: ({
+      field: r,
+      fieldState: {
+        error: n
+      }
+    }) => {
+      const d = !!n && !r.value;
+      return /* @__PURE__ */ a(O, {
+        children: [/* @__PURE__ */ e(L, {
+          onDrop: c,
+          error: d,
+          ...i,
+          file: r.value
+        }), d && /* @__PURE__ */ e(f, {
+          error: !0,
+          sx: {
+            px: 2,
+            textAlign: "center"
+          },
+          children: n.message
+        })]
+      });
+    }
+  });
+}
+export {
+  G as R
+};

package/components/mui_extended/Accordion/index.2116e423.js

@@ -0,0 +1,103 @@
+import { Skeleton as d, Accordion as f, AccordionSummary as x, AccordionDetails as b } from "@mui/material";
+import { I as v } from "../IconButton/index.88f3aadb.js";
+import { useEnvironment as y, useModuleSkeleton as I } from "@m4l/core";
+import { I as S } from "../../Icon/index.cbca79b0.js";
+import { styled as c } from "@mui/material/styles";
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+c("div")(({
+  theme: n
+}) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  borderRadius: n.spacing(0.5),
+  height: n.spacing(4.5),
+  minHeight: n.spacing(4.5),
+  backgroundColor: n.palette.background.header,
+  paddingLeft: n.spacing(2),
+  paddingRight: n.spacing(2),
+  marginBottom: "0px"
+}));
+const l = c("div")(({
+  theme: n
+}) => ({
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  gap: n.spacing(2)
+})), A = c("span")(({
+  theme: n
+}) => ({
+  ...n.typography.subtitle2
+})), k = (n) => {
+  const {
+    isSkeleton: e,
+    label: i,
+    SKTWidht: r,
+    SKTHeight: a,
+    labelIcon: o
+  } = n;
+  return /* @__PURE__ */ t("div", {
+    children: e ? /* @__PURE__ */ s(l, {
+      children: [o && /* @__PURE__ */ t(d, {
+        variant: "circular",
+        width: "16px",
+        height: "16px"
+      }), /* @__PURE__ */ t(d, {
+        variant: "text",
+        width: r,
+        height: a
+      })]
+    }) : /* @__PURE__ */ s(l, {
+      children: [o && /* @__PURE__ */ t(S, {
+        src: o
+      }), /* @__PURE__ */ t(A, {
+        children: i
+      })]
+    })
+  });
+};
+function E(n) {
+  const {
+    label: e,
+    SKTWidht: i,
+    SKTHeight: r,
+    children: a,
+    accordionProps: o,
+    summaryProps: p,
+    labelIcon: u
+  } = n, {
+    host_static_assets: g,
+    environment_assets: h
+  } = y(), m = I();
+  return /* @__PURE__ */ s(f, {
+    variant: "outlined",
+    square: !0,
+    TransitionProps: {
+      unmountOnExit: !0
+    },
+    defaultExpanded: !0,
+    ...o,
+    children: [/* @__PURE__ */ t(x, {
+      "aria-controls": "expanded-content",
+      disableTouchRipple: !1,
+      expandIcon: /* @__PURE__ */ t(v, {
+        "aria-label": "settings",
+        src: `${g}/${h}/frontend/components/accordion/assets/icons/expanded.svg`
+      }),
+      ...p,
+      children: /* @__PURE__ */ t(k, {
+        isSkeleton: m,
+        label: e,
+        SKTWidht: i,
+        SKTHeight: r,
+        labelIcon: u
+      })
+    }), /* @__PURE__ */ t(b, {
+      children: a
+    })]
+  });
+}
+export {
+  E as A
+};

package/components/mui_extended/Avatar/index.0a2a4523.js

@@ -0,0 +1,32 @@
+import { forwardRef as i } from "react";
+import { useTheme as n } from "@mui/material/styles";
+import { Avatar as f } from "@mui/material";
+import { jsx as p } from "react/jsx-runtime";
+const s = i(({
+  color: t = "default",
+  children: r,
+  sx: e,
+  ...o
+}, m) => {
+  const a = n();
+  return t === "default" ? /* @__PURE__ */ p(f, {
+    ref: m,
+    sx: e,
+    ...o,
+    children: r
+  }) : /* @__PURE__ */ p(f, {
+    ref: m,
+    sx: {
+      fontWeight: a.typography.fontWeightMedium,
+      color: a.palette[t].contrastText,
+      backgroundColor: a.palette[t].main,
+      ...e
+    },
+    ...o,
+    children: r
+  });
+});
+s.displayName = "Avatar";
+export {
+  s as A
+};

package/components/mui_extended/BoxIcon/index.e638ecc8.js

@@ -0,0 +1,22 @@
+import { Box as r } from "@mui/material";
+import { jsx as t } from "react/jsx-runtime";
+function a({
+  src: o,
+  sx: n
+}) {
+  return /* @__PURE__ */ t(r, {
+    component: "span",
+    sx: {
+      width: 20,
+      height: 20,
+      display: "inline-block",
+      bgcolor: "currentColor",
+      mask: `url(${o}) no-repeat center / contain`,
+      WebkitMask: `url(${o}) no-repeat center / contain`,
+      ...n
+    }
+  });
+}
+export {
+  a as B
+};

package/components/mui_extended/Breadcrumbs/index.5e37d903.js

@@ -0,0 +1,89 @@
+import { useMemo as c } from "react";
+import { useModuleDictionary as m } from "@m4l/core";
+import { Link as u, Box as l, Typography as x, Breadcrumbs as f } from "@mui/material";
+import { Link as b } from "react-router-dom";
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+function d({
+  link: s
+}) {
+  const {
+    href: e,
+    name: n,
+    icon: a,
+    dictionaryField: o
+  } = s, {
+    getLabel: r
+  } = m();
+  return /* @__PURE__ */ g(u, {
+    variant: "body2",
+    component: b,
+    to: e || "#",
+    sx: {
+      lineHeight: 2,
+      display: "flex",
+      alignItems: "center",
+      color: "text.primary",
+      "& > div": {
+        display: "inherit"
+      }
+    },
+    children: [a && /* @__PURE__ */ i(l, {
+      sx: {
+        mr: 1,
+        "& svg": {
+          width: 20,
+          height: 20
+        }
+      },
+      children: a
+    }), o !== void 0 && r ? r(o) : n]
+  }, n);
+}
+function D(s) {
+  const {
+    links: e,
+    activeLast: n = !1,
+    ...a
+  } = s, {
+    getLabel: o
+  } = m(), r = c(() => {
+    if (e.length === 0)
+      return "";
+    const {
+      dictionaryField: t
+    } = e[e.length - 1];
+    return o(t);
+  }, [o, e]), p = c(() => e.map((t) => /* @__PURE__ */ i(d, {
+    link: t
+  }, t.name)), [e]), h = c(() => e.map((t) => t.name !== r ? /* @__PURE__ */ i(d, {
+    link: t
+  }, t.name) : /* @__PURE__ */ i(x, {
+    variant: "body2",
+    sx: {
+      maxWidth: 260,
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      color: "text.disabled",
+      textOverflow: "ellipsis"
+    },
+    children: r
+  }, t.name)), [r, e]);
+  return /* @__PURE__ */ i(f, {
+    id: "MUIBreadcrumbs",
+    separator: /* @__PURE__ */ i(l, {
+      component: "span",
+      sx: {
+        width: 4,
+        height: 4,
+        mx: 0.5,
+        borderRadius: "50%",
+        bgcolor: "text.disabled"
+      }
+    }),
+    ...a,
+    children: n ? p : h
+  });
+}
+export {
+  D as B
+};