@m4l/components 0.1.27 → 0.1.28

package/components/mui_extended/Accordion/index.a02ac6ae.js

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

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

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

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

@@ -1,22 +1,22 @@
-import { Box as r } from "@mui/material";
-import { jsx as t } from "react/jsx-runtime";
-function a({
-  src: o,
-  sx: n
+import { Box } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+function BoxIcon({
+  src,
+  sx
 }) {
-  return /* @__PURE__ */ t(r, {
+  return /* @__PURE__ */ jsx(Box, {
     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
+      mask: `url(${src}) no-repeat center / contain`,
+      WebkitMask: `url(${src}) no-repeat center / contain`,
+      ...sx
     }
   });
 }
 export {
-  a as B
+  BoxIcon as B
 };

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

@@ -1,23 +1,24 @@
-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
+import { useMemo } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { Link, Box, Typography, Breadcrumbs as Breadcrumbs$1 } from "@mui/material";
+import { Link as Link$1 } from "react-router-dom";
+import { jsxs, jsx } from "react/jsx-runtime";
+function LinkItem({
+  link
 }) {
   const {
-    href: e,
-    name: n,
-    icon: a,
-    dictionaryField: o
-  } = s, {
-    getLabel: r
-  } = m();
-  return /* @__PURE__ */ g(u, {
+    href,
+    name,
+    icon,
+    dictionaryField: dictionaryDescription
+  } = link;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  return /* @__PURE__ */ jsxs(Link, {
     variant: "body2",
-    component: b,
-    to: e || "#",
+    component: Link$1,
+    to: href || "#",
     sx: {
       lineHeight: 2,
       display: "flex",
@@ -27,7 +28,7 @@ function d({
         display: "inherit"
       }
     },
-    children: [a && /* @__PURE__ */ i(l, {
+    children: [icon && /* @__PURE__ */ jsx(Box, {
       sx: {
         mr: 1,
         "& svg": {
@@ -35,29 +36,33 @@ function d({
           height: 20
         }
       },
-      children: a
-    }), o !== void 0 && r ? r(o) : n]
-  }, n);
+      children: icon
+    }), dictionaryDescription !== void 0 && getLabel ? getLabel(dictionaryDescription) : name]
+  }, name);
 }
-function D(s) {
+function Breadcrumbs(props) {
+  const {
+    links,
+    activeLast = false,
+    ...other
+  } = props;
   const {
-    links: e,
-    activeLast: n = !1,
-    ...a
-  } = s, {
-    getLabel: o
-  } = m(), r = c(() => {
-    if (e.length === 0)
+    getLabel
+  } = useModuleDictionary();
+  const currentLink = useMemo(() => {
+    if (links.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, {
+      dictionaryField
+    } = links[links.length - 1];
+    return getLabel(dictionaryField);
+  }, [getLabel, links]);
+  const listDefault = useMemo(() => links.map((link) => /* @__PURE__ */ jsx(LinkItem, {
+    link
+  }, link.name)), [links]);
+  const listActiveLast = useMemo(() => links.map((link) => link.name !== currentLink ? /* @__PURE__ */ jsx(LinkItem, {
+    link
+  }, link.name) : /* @__PURE__ */ jsx(Typography, {
     variant: "body2",
     sx: {
       maxWidth: 260,
@@ -66,11 +71,11 @@ function D(s) {
       color: "text.disabled",
       textOverflow: "ellipsis"
     },
-    children: r
-  }, t.name)), [r, e]);
-  return /* @__PURE__ */ i(f, {
+    children: currentLink
+  }, link.name)), [currentLink, links]);
+  return /* @__PURE__ */ jsx(Breadcrumbs$1, {
     id: "MUIBreadcrumbs",
-    separator: /* @__PURE__ */ i(l, {
+    separator: /* @__PURE__ */ jsx(Box, {
       component: "span",
       sx: {
         width: 4,
@@ -80,10 +85,10 @@ function D(s) {
         bgcolor: "text.disabled"
       }
     }),
-    ...a,
-    children: n ? p : h
+    ...other,
+    children: activeLast ? listDefault : listActiveLast
   });
 }
 export {
-  D as B
+  Breadcrumbs as B
 };

package/components/mui_extended/Button/index.53b56958.js

@@ -0,0 +1,178 @@
+import { useModuleSkeleton, useEnvironment, useModuleDictionary } from "@m4l/core";
+import { Skeleton, styled, IconButton as IconButton$1, Tooltip } from "@mui/material";
+import MuiButton from "@mui/material/Button";
+import { jsx } from "react/jsx-runtime";
+import { LoadingButton as LoadingButton$1 } from "@mui/lab";
+import { I as IconButton } from "../IconButton/index.a321e5cb.js";
+import { styled as styled$1, alpha } from "@mui/material/styles";
+import { u as useBase } from "../../DynamicFilter/index.342ba5fe.js";
+import { useMemo } from "react";
+import { I as Image } from "../../Image/index.93d5f37f.js";
+const Button = (props) => {
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(Skeleton, {
+      sx: {
+        borderRadius: 2
+      },
+      variant: "rectangular",
+      width: "100px",
+      height: "36px"
+    });
+  }
+  return /* @__PURE__ */ jsx(MuiButton, {
+    ...props
+  });
+};
+const WrapperSkeleton = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  borderRadius: theme.spacing(1),
+  overflow: "hidden"
+}));
+const SkeletonLoadingButton = () => /* @__PURE__ */ jsx(WrapperSkeleton, {
+  id: "WrapperSKTLoadingButton",
+  children: /* @__PURE__ */ jsx(Skeleton, {
+    variant: "rectangular",
+    width: "100%",
+    height: "48px"
+  })
+});
+const LoadingButton = (props) => {
+  const {
+    children,
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonLoadingButton, {});
+  }
+  return /* @__PURE__ */ jsx(LoadingButton$1, {
+    ...other,
+    children
+  });
+};
+const SKTWrapperFilterButton = styled$1("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minWidth: theme.spacing(3.75),
+  height: theme.spacing(3.75),
+  background: alpha(theme.palette.primary.main, 0.3)
+}));
+const WrapperFilterButton = styled$1("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 FilterButton() {
+  const {
+    isSkeleton,
+    fireOnChangeFilters,
+    automatic,
+    isDirty,
+    isValid
+  } = useBase();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTWrapperFilterButton, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 20,
+        height: 20
+      })
+    });
+  }
+  const color = useMemo(() => {
+    if (automatic || !isDirty) {
+      return "action.active";
+    }
+    if (!isValid) {
+      return "error.main";
+    }
+    return "primary.main";
+  }, [automatic, isValid, isDirty]);
+  return /* @__PURE__ */ jsx(WrapperFilterButton, {
+    id: "WrapperFilterButton",
+    className: isDirty && isValid ? "isDirty" : "",
+    children: /* @__PURE__ */ jsx(IconButton, {
+      bgColor: color,
+      dictionaryTooltip: "dynamic_filter.filter_tooltip",
+      onClick: () => fireOnChangeFilters(),
+      "aria-label": "settings",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/${automatic ? "refresh" : "search"}.svg`
+    })
+  });
+}
+function ImageButton({
+  src,
+  width,
+  height,
+  className,
+  useIntersectionObserver,
+  skeletonVariant = "circle",
+  tooltip,
+  dictionaryTooltip,
+  sx = {
+    width: 40,
+    height: 40
+  },
+  ...other
+}) {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const finalTooltip = useMemo(() => {
+    if (dictionaryTooltip && getLabel) {
+      return getLabel(dictionaryTooltip);
+    }
+    return tooltip;
+  }, [tooltip, dictionaryTooltip, getLabel]);
+  const imageButton = useMemo(() => {
+    return /* @__PURE__ */ jsx(IconButton$1, {
+      sx,
+      className: `m4l_image_button ${className ? className : ""}`,
+      ...other,
+      children: /* @__PURE__ */ jsx(Image, {
+        src,
+        width,
+        height,
+        useIntersectionObserver,
+        skeletonVariant
+      })
+    });
+  }, [src, width, height, useIntersectionObserver, skeletonVariant, sx]);
+  return finalTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+    title: finalTooltip || "",
+    children: imageButton
+  }) : imageButton;
+}
+export {
+  Button as B,
+  FilterButton as F,
+  ImageButton as I,
+  LoadingButton as L
+};

package/components/mui_extended/CircularProgress/index.ad569afd.js

@@ -1,8 +1,10 @@
-import { CircularProgress as s } from "@mui/material";
-import { jsx as o } from "react/jsx-runtime";
-const i = (r) => /* @__PURE__ */ o(s, {
-  ...r
-});
+import { CircularProgress as CircularProgress$1 } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+const CircularProgress = (props) => {
+  return /* @__PURE__ */ jsx(CircularProgress$1, {
+    ...props
+  });
+};
 export {
-  i as C
+  CircularProgress as C
 };