@m4l/components 0.1.18 → 0.1.19

package/components/hook-form/RHFTextField/index.bab2a2cf.js

@@ -0,0 +1,113 @@
+import { useModuleSkeleton as w, useEnvironment as F } from "@m4l/core";
+import { styled as v, Skeleton as S, TextField as y, InputAdornment as C } from "@mui/material";
+import { forwardRef as I, useState as R } from "react";
+import { I as H } from "../../mui_extended/IconButton/index.4b5ce8b5.js";
+import { useFormContext as T, Controller as b } from "react-hook-form";
+import { jsx as t } from "react/jsx-runtime";
+const $ = v("div")(({
+  theme: e
+}) => ({
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  border: `1px solid ${e.palette.divider}`,
+  padding: "12px 14px",
+  borderRadius: e.spacing(1)
+})), P = (e) => {
+  const {
+    width: o,
+    height: n
+  } = e;
+  return /* @__PURE__ */ t($, {
+    children: /* @__PURE__ */ t(S, {
+      variant: "text",
+      width: o,
+      height: n
+    })
+  });
+}, c = I((e, o) => {
+  const {
+    name: n,
+    autoComplete: l = "off",
+    skeletonWidth: d = "100%",
+    skeletonHeight: s = "18px",
+    type: r,
+    ...i
+  } = e, a = w(), {
+    control: f
+  } = T();
+  return a ? /* @__PURE__ */ t(P, {
+    width: d,
+    height: s
+  }) : /* @__PURE__ */ t(b, {
+    name: n,
+    control: f,
+    render: ({
+      field: {
+        onChange: p,
+        onBlur: h,
+        value: g,
+        name: x,
+        ref: k
+      },
+      fieldState: {
+        error: u
+      }
+    }) => /* @__PURE__ */ t(
+      y,
+      {
+        inputRef: o,
+        autoComplete: l,
+        onChange: (m) => {
+          if (r === "number" && m.target.value) {
+            p(Number(m.target.value));
+            return;
+          }
+          p(m);
+        },
+        onBlur: h,
+        value: g || "",
+        name: x,
+        ref: k,
+        fullWidth: !0,
+        error: !!u,
+        helperText: u?.message,
+        type: r,
+        ...i
+      }
+    )
+  });
+});
+c.displayName = "RHFTextField";
+const M = (e) => {
+  const {
+    name: o,
+    label: n,
+    skeletonWidth: l,
+    skeletonHeight: d
+  } = e, [s, r] = R(!1), {
+    host_static_assets: i,
+    environment_assets: a
+  } = F();
+  return /* @__PURE__ */ t(c, {
+    name: o,
+    label: n,
+    type: s ? "text" : "password",
+    autoComplete: "on",
+    skeletonWidth: l,
+    skeletonHeight: d,
+    InputProps: {
+      endAdornment: /* @__PURE__ */ t(C, {
+        position: "start",
+        children: /* @__PURE__ */ t(H, {
+          onClick: () => r(!s),
+          src: s ? `${i}/${a}/frontend/domain/host/login/assets/icons/eye.svg` : `${i}/${a}/frontend/domain/host/login/assets/icons/eye_off.svg`
+        })
+      })
+    }
+  });
+};
+export {
+  c as R,
+  M as a
+};

package/components/hook-form/RHFUpload/{index.ed3d739f.js → index.cbf11b68.js}

@@ -1,14 +1,13 @@
 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 { i as w } from "../../../lodash.e09401f0.js";
+import { useDropzone as b } from "react-dropzone";
+import { styled as i, alpha as I } from "@mui/material/styles";
+import { I as h } from "../../Image/index.c9da2d5a.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")(({
+const D = i("div")(({
   theme: t
 }) => ({
   width: "inherit",
@@ -18,7 +17,7 @@ const D = o("div")(({
   borderRadius: t.spacing(1),
   padding: t.spacing(1),
   border: `1px dashed ${t.palette.grey[50032]}`
-})), S = o("div")(({
+})), S = i("div")(({
   theme: t
 }) => ({
   zIndex: 0,
@@ -41,7 +40,7 @@ const D = o("div")(({
       zIndex: 9
     }
   }
-})), U = o("div")(({
+})), U = i("div")(({
   theme: t
 }) => ({
   "&:hover": {
@@ -57,7 +56,7 @@ const D = o("div")(({
     duration: t.transitions.duration.shorter
   }),
   overflow: "auto"
-})), W = o("div")(({
+})), W = i("div")(({
   theme: t
 }) => ({
   padding: t.spacing(3, 5),
@@ -67,36 +66,36 @@ const D = o("div")(({
   width: "100%",
   height: "100%",
   gap: t.spacing(3)
-})), z = o("div")(({
+})), F = i("div")(({
   theme: t
 }) => ({
   display: "flex",
   justifyContent: "center",
   flexDirection: "column",
   gap: t.spacing(3)
-})), F = o("span")(({
+})), z = i("span")(({
   theme: t
 }) => ({
   ...t.typography.subtitle2,
   width: "fit-content"
-})), P = o("span")(({
+})), P = i("span")(({
   theme: t
 }) => ({
   ...t.typography.body2,
   minWidth: t.spacing(20)
-})), $ = o("span")(({
+})), $ = i("span")(({
   theme: t
 }) => ({
   ...t.typography.caption,
   width: "fit-content"
-})), H = o("div")(({
+})), H = i("div")(({
   theme: t
 }) => ({
   display: "flex",
   alignItems: "center",
   maxWidth: t.spacing(20)
 }));
-o("div")(() => ({
+i("div")(() => ({
   width: "100%",
   height: "100%",
   position: "absolute",
@@ -107,7 +106,7 @@ o("div")(() => ({
 }));
 function L({
   error: t,
-  file: i,
+  file: o,
   helperText: s,
   sx: l,
   ...c
@@ -117,12 +116,12 @@ function L({
     getInputProps: n,
     isDragActive: d,
     isDragReject: g
-  } = w({
+  } = b({
     multiple: !1,
     ...c
   }), {
-    host_static_assets: m,
-    environment_assets: u
+    host_static_assets: u,
+    environment_assets: m
   } = _(), {
     getLabel: p
   } = R();
@@ -145,17 +144,15 @@ function L({
         },
         children: [/* @__PURE__ */ e("input", {
           ...n()
-        }), i && /* @__PURE__ */ e(h, {
+        }), o && /* @__PURE__ */ e(h, {
           alt: "avatar",
-          src: b(i) ? i : i.preview,
-          sx: {
-            zIndex: 8
-          }
+          src: w(o) ? o : o.preview || "",
+          width: "100%"
         }), /* @__PURE__ */ e(U, {
           id: "PlaceholderStyle",
           className: "placeholder",
           sx: {
-            ...i ? {
+            ...o ? {
               bgcolor: I("#161C24", 0.72),
               color: "common.white",
               opacity: 0
@@ -172,15 +169,13 @@ function L({
             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",
+                src: `${u}/${m}/frontend/components/upload_image/assets/img/upload_image_illustration.svg`,
                 width: "100%",
-                height: "auto",
-                mb: 1
+                height: "auto"
               })
-            }), /* @__PURE__ */ a(z, {
-              children: [/* @__PURE__ */ e(F, {
-                children: p(i ? "upload_image.title_update" : "upload_image.title_upload")
+            }), /* @__PURE__ */ a(F, {
+              children: [/* @__PURE__ */ e(z, {
+                children: p(o ? "upload_image.title_update" : "upload_image.title_upload")
               }), /* @__PURE__ */ e(P, {
                 children: p("upload_image.description")
               }), /* @__PURE__ */ e($, {
@@ -198,9 +193,9 @@ const O = y("div")(() => ({
   height: "inherit",
   padding: "1px"
 }));
-function G({
+function q({
   name: t,
-  ...i
+  ...o
 }) {
   const {
     control: s,
@@ -225,7 +220,7 @@ function G({
         children: [/* @__PURE__ */ e(L, {
           onDrop: c,
           error: d,
-          ...i,
+          ...o,
           file: r.value
         }), d && /* @__PURE__ */ e(f, {
           error: !0,
@@ -240,5 +235,5 @@ function G({
   });
 }
 export {
-  G as R
+  q as R
 };

package/components/mui_extended/Accordion/{index.2116e423.js → index.49f5df8e.js}

@@ -1,7 +1,7 @@
 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 { I as v } from "../IconButton/index.4b5ce8b5.js";
 import { useEnvironment as y, useModuleSkeleton as I } from "@m4l/core";
-import { I as S } from "../../Icon/index.cbca79b0.js";
+import { I as S } from "../../Icon/index.f569765b.js";
 import { styled as c } from "@mui/material/styles";
 import { jsx as t, jsxs as s } from "react/jsx-runtime";
 c("div")(({

package/components/mui_extended/Avatar/index.dadb0528.js

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

package/components/mui_extended/Button/index.bcf26c59.js

@@ -0,0 +1,144 @@
+import { useModuleSkeleton as g, useEnvironment as B, useModuleDictionary as k } from "@m4l/core";
+import { Skeleton as m, styled as S, IconButton as v, Tooltip as I } from "@mui/material";
+import _ from "@mui/material/Button";
+import { jsx as i } from "react/jsx-runtime";
+import { LoadingButton as b } from "@mui/lab";
+import { I as x } from "../IconButton/index.4b5ce8b5.js";
+import { styled as h, alpha as F } from "@mui/material/styles";
+import { u as L } from "../../DynamicFilter/index.118d3638.js";
+import { useMemo as u } from "react";
+import { I as $ } from "../../Image/index.c9da2d5a.js";
+const G = (t) => g() ? /* @__PURE__ */ i(_, {
+  ...t
+}) : /* @__PURE__ */ i(m, {
+  sx: {
+    borderRadius: 2
+  },
+  variant: "rectangular",
+  width: "100px",
+  height: "36px"
+}), D = S("div")(({
+  theme: t
+}) => ({
+  display: "flex",
+  width: "100%",
+  borderRadius: t.spacing(1),
+  overflow: "hidden"
+})), W = () => /* @__PURE__ */ i(D, {
+  id: "WrapperSKTLoadingButton",
+  children: /* @__PURE__ */ i(m, {
+    variant: "rectangular",
+    width: "100%",
+    height: "48px"
+  })
+}), H = (t) => {
+  const {
+    children: r,
+    ...n
+  } = t;
+  return g() ? /* @__PURE__ */ i(W, {}) : /* @__PURE__ */ i(b, {
+    ...n,
+    children: r
+  });
+}, w = h("div")(({
+  theme: t
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minWidth: t.spacing(3.75),
+  height: t.spacing(3.75),
+  background: F(t.palette.primary.main, 0.3)
+})), C = h("div")(() => ({
+  "&.isDirty": {
+    animationName: "dirtyEffect",
+    animationDuration: "1s",
+    animationFillMode: "both",
+    animationIterationCount: "infinite",
+    transition: "all .3s",
+    "@keyframes dirtyEffect": {
+      "20%": {
+        opacity: 1
+      },
+      "50%": {
+        opacity: 0.5
+      },
+      "100%": {
+        opacity: 1
+      }
+    }
+  },
+  "&.isDirtyError": {}
+}));
+function J() {
+  const {
+    isSkeleton: t,
+    fireOnChangeFilters: r,
+    automatic: n,
+    isDirty: o,
+    isValid: e
+  } = L(), {
+    host_static_assets: s,
+    environment_assets: l
+  } = B();
+  if (t)
+    return /* @__PURE__ */ i(w, {
+      children: /* @__PURE__ */ i(m, {
+        variant: "circular",
+        width: 20,
+        height: 20
+      })
+    });
+  const a = u(() => n || !o ? "action.active" : e ? "primary.main" : "error.main", [n, e, o]);
+  return /* @__PURE__ */ i(C, {
+    id: "WrapperFilterButton",
+    className: o && e ? "isDirty" : "",
+    children: /* @__PURE__ */ i(x, {
+      bgColor: a,
+      dictionaryTooltip: "dynamic_filter.filter_tooltip",
+      onClick: () => r(),
+      "aria-label": "settings",
+      src: `${s}/${l}/frontend/components/dynamic_filter/assets/icons/${n ? "refresh" : "search"}.svg`
+    })
+  });
+}
+function O({
+  src: t,
+  width: r,
+  height: n,
+  className: o,
+  useIntersectionObserver: e,
+  skeletonVariant: s = "circle",
+  tooltip: l,
+  dictionaryTooltip: a,
+  sx: d = {
+    width: 40,
+    height: 40
+  },
+  ...y
+}) {
+  const {
+    getLabel: c
+  } = k(), p = u(() => a && c ? c(a) : l, [l, a, c]), f = u(() => /* @__PURE__ */ i(v, {
+    sx: d,
+    className: `m4l_image_button ${o || ""}`,
+    ...y,
+    children: /* @__PURE__ */ i($, {
+      src: t,
+      width: r,
+      height: n,
+      useIntersectionObserver: e,
+      skeletonVariant: s
+    })
+  }), [t, r, n, e, s, d]);
+  return p ? /* @__PURE__ */ i(I, {
+    title: p || "",
+    children: f
+  }) : f;
+}
+export {
+  G as B,
+  J as F,
+  O as I,
+  H as L
+};

package/components/mui_extended/IconButton/index.4b5ce8b5.js

@@ -0,0 +1,103 @@
+import { m as p } from "framer-motion";
+import { forwardRef as f, useMemo as v } from "react";
+import { IconButton as l, Box as I, Skeleton as b, Tooltip as h } from "@mui/material";
+import { jsx as e } from "react/jsx-runtime";
+import { useModuleDictionary as x, useModuleSkeleton as B } from "@m4l/core";
+import { I as d } from "../../Icon/index.f569765b.js";
+const g = {
+  hover: {
+    scale: 1.1
+  },
+  tap: {
+    scale: 0.95
+  }
+}, S = {
+  hover: {
+    scale: 1.09
+  },
+  tap: {
+    scale: 0.97
+  }
+}, k = {
+  hover: {
+    scale: 1.08
+  },
+  tap: {
+    scale: 0.99
+  }
+};
+function w({
+  size: n,
+  children: t
+}) {
+  const a = n === "small", o = n === "large";
+  return /* @__PURE__ */ e(I, {
+    component: p.div,
+    whileTap: "tap",
+    whileHover: "hover",
+    variants: a && g || o && k || S,
+    sx: {
+      display: "inline-flex"
+    },
+    children: t
+  });
+}
+const M = f(({
+  children: n,
+  size: t = "medium",
+  ...a
+}, o) => /* @__PURE__ */ e(w, {
+  size: t,
+  children: /* @__PURE__ */ e(l, {
+    size: t,
+    ref: o,
+    ...a,
+    children: n
+  })
+}));
+M.displayName = "IconButtonAnimate";
+const A = () => /* @__PURE__ */ e(b, {
+  variant: "circular",
+  width: "30px",
+  height: "30px"
+});
+function N({
+  src: n,
+  tooltip: t,
+  size: a = "small",
+  dictionaryTooltip: o,
+  bgColor: s = "primary.active",
+  rotate: c,
+  ...r
+}) {
+  const {
+    getLabel: i
+  } = x(), u = B(), m = v(() => {
+    if (!r.disabled)
+      return o && i ? i(o) : t;
+  }, [o, i, r.disabled]);
+  return u ? /* @__PURE__ */ e(A, {}) : m ? /* @__PURE__ */ e(h, {
+    title: m || "",
+    children: /* @__PURE__ */ e(l, {
+      size: a,
+      ...r,
+      children: /* @__PURE__ */ e(d, {
+        src: n,
+        bgColor: r.disabled ? "action.disabled" : s,
+        rotate: c
+      })
+    })
+  }) : /* @__PURE__ */ e(l, {
+    size: a,
+    ...r,
+    children: /* @__PURE__ */ e(d, {
+      src: n,
+      bgColor: r.disabled ? "action.disabled" : s,
+      rotate: c
+    })
+  });
+}
+export {
+  N as I,
+  M as a
+};

package/components/mui_extended/LinkWithRoute/index.16436ab8.js

@@ -0,0 +1,26 @@
+import { Link as k } from "react-router-dom";
+import { Skeleton as m, Link as h } from "@mui/material";
+import { useModuleSkeleton as l } from "@m4l/core";
+import { jsx as t } from "react/jsx-runtime";
+const a = (e) => {
+  const {
+    to: o,
+    children: n,
+    skeletonWidth: i = "100%",
+    skeletonHeight: r = "14px",
+    ...s
+  } = e;
+  return l() ? /* @__PURE__ */ t(m, {
+    variant: "text",
+    width: i,
+    height: r
+  }) : /* @__PURE__ */ t(h, {
+    component: k,
+    to: o,
+    ...s,
+    children: n
+  });
+};
+export {
+  a as L
+};

package/components/mui_extended/Pager/{index.f0911163.js → index.03103cdd.js}

@@ -1,6 +1,6 @@
 import { useMemo as y } from "react";
 import { Skeleton as i, TablePagination as R } from "@mui/material";
-import { P as S } from "../../CommonActions/components/Actions/index.6b25caed.js";
+import { P as S } from "../../CommonActions/components/Actions/index.9324a339.js";
 import { styled as a } from "@mui/material/styles";
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 a("div")(() => ({