@m4l/components 0.1.26 → 0.1.28

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

@@ -0,0 +1,107 @@
+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: 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 WrapperAccordionLabel = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  gap: theme.spacing(2)
+}));
+const Label = styled("span")(({
+  theme
+}) => ({
+  ...theme.typography.subtitle2
+}));
+const AccordionLabel = (props) => {
+  const {
+    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__ */ jsx(Skeleton, {
+        variant: "text",
+        width: SKTWidht,
+        height: SKTHeight
+      })]
+    }) : /* @__PURE__ */ jsxs(WrapperAccordionLabel, {
+      children: [labelIcon && /* @__PURE__ */ jsx(Icon, {
+        src: labelIcon
+      }), /* @__PURE__ */ jsx(Label, {
+        children: label
+      })]
+    })
+  });
+};
+function Accordion(props) {
+  const {
+    label,
+    SKTWidht,
+    SKTHeight,
+    children,
+    accordionProps,
+    summaryProps,
+    labelIcon
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const isSkeleton = useModuleSkeleton();
+  return /* @__PURE__ */ jsxs(Accordion$1, {
+    variant: "outlined",
+    square: true,
+    TransitionProps: {
+      unmountOnExit: true
+    },
+    defaultExpanded: true,
+    ...accordionProps,
+    children: [/* @__PURE__ */ jsx(AccordionSummary, {
+      "aria-controls": "expanded-content",
+      disableTouchRipple: false,
+      expandIcon: /* @__PURE__ */ jsx(IconButton, {
+        "aria-label": "settings",
+        src: `${host_static_assets}/${environment_assets}/frontend/components/accordion/assets/icons/expanded.svg`
+      }),
+      ...summaryProps,
+      children: /* @__PURE__ */ jsx(AccordionLabel, {
+        isSkeleton,
+        label,
+        SKTWidht,
+        SKTHeight,
+        labelIcon
+      })
+    }), /* @__PURE__ */ jsx(AccordionDetails, {
+      children
+    })]
+  });
+}
+export {
+  Accordion as A
+};

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

@@ -0,0 +1,51 @@
+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: theme.typography.fontWeightMedium,
+      color: theme.palette[color].contrastText,
+      backgroundColor: theme.palette[color].main,
+      cursor: "pointer",
+      ...sx
+    },
+    ...other,
+    children
+  });
+});
+Avatar.displayName = "Avatar";
+export {
+  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
 };

package/components/mui_extended/IconButton/index.a321e5cb.js

@@ -0,0 +1,120 @@
+import { m } from "framer-motion";
+import { forwardRef, useMemo } from "react";
+import { IconButton as IconButton$1, Box, Skeleton, Tooltip } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { I as Icon } from "../../Icon/index.619c31c4.js";
+const varSmall = {
+  hover: {
+    scale: 1.1
+  },
+  tap: {
+    scale: 0.95
+  }
+};
+const varMedium = {
+  hover: {
+    scale: 1.09
+  },
+  tap: {
+    scale: 0.97
+  }
+};
+const varLarge = {
+  hover: {
+    scale: 1.08
+  },
+  tap: {
+    scale: 0.99
+  }
+};
+function AnimateWrap({
+  size,
+  children
+}) {
+  const isSmall = size === "small";
+  const isLarge = size === "large";
+  return /* @__PURE__ */ jsx(Box, {
+    component: m.div,
+    whileTap: "tap",
+    whileHover: "hover",
+    variants: isSmall && varSmall || isLarge && varLarge || varMedium,
+    sx: {
+      display: "inline-flex"
+    },
+    children
+  });
+}
+const IconButtonAnimate = forwardRef(({
+  children,
+  size = "medium",
+  ...other
+}, ref) => /* @__PURE__ */ jsx(AnimateWrap, {
+  size,
+  children: /* @__PURE__ */ jsx(IconButton$1, {
+    size,
+    ref,
+    ...other,
+    children
+  })
+}));
+IconButtonAnimate.displayName = "IconButtonAnimate";
+const SkeletonIconButton = () => {
+  return /* @__PURE__ */ jsx(Skeleton, {
+    variant: "circular",
+    width: "30px",
+    height: "30px"
+  });
+};
+function IconButton({
+  src,
+  tooltip,
+  size = "small",
+  dictionaryTooltip,
+  bgColor = "primary.active",
+  rotationAngle,
+  angleTransition,
+  ...other
+}) {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const finalTooltip = useMemo(() => {
+    if (other.disabled) {
+      return void 0;
+    }
+    if (dictionaryTooltip && getLabel) {
+      return getLabel(dictionaryTooltip);
+    }
+    return tooltip;
+  }, [dictionaryTooltip, getLabel, other.disabled]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonIconButton, {});
+  }
+  return finalTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+    title: finalTooltip || "",
+    children: /* @__PURE__ */ jsx(IconButton$1, {
+      size,
+      ...other,
+      children: /* @__PURE__ */ jsx(Icon, {
+        src,
+        bgColor: other.disabled ? "action.disabled" : bgColor,
+        rotationAngle
+      })
+    })
+  }) : /* @__PURE__ */ jsx(IconButton$1, {
+    size,
+    ...other,
+    children: /* @__PURE__ */ jsx(Icon, {
+      src,
+      bgColor: other.disabled ? "action.disabled" : bgColor,
+      rotationAngle,
+      angleTransition
+    })
+  });
+}
+export {
+  IconButton as I,
+  IconButtonAnimate as a
+};

package/components/mui_extended/IconButton/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { IconButtonProps as MUIIconButtonProps } from '@mui/material';
 import { IconButtonProps } from './types';
-export declare function IconButton({ src, tooltip, size, dictionaryTooltip, bgColor, rotate, ...other }: IconButtonProps & MUIIconButtonProps): JSX.Element;
+export declare function IconButton({ src, tooltip, size, dictionaryTooltip, bgColor, rotationAngle, angleTransition, ...other }: IconButtonProps & MUIIconButtonProps): JSX.Element;