@m4l/components 0.1.13 → 0.1.15

package/components/mui_extended/Accordion/index.js

@@ -0,0 +1,105 @@
+import { Skeleton, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from "@mui/material";
+import { I as IconButton } from "../IconButton/index.js";
+import { useEnvironment, useModuleSkeleton } from "@m4l/core";
+import { I as Icon } from "../../Icon/index.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.js

@@ -0,0 +1,33 @@
+import { forwardRef } from "react";
+import { useTheme } from "@mui/material/styles";
+import { Avatar as Avatar$1 } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+const Avatar = forwardRef(({
+  color = "default",
+  children,
+  sx,
+  ...other
+}, ref) => {
+  const theme = useTheme();
+  if (color === "default") {
+    return /* @__PURE__ */ jsx(Avatar$1, {
+      ref,
+      sx,
+      ...other,
+      children
+    });
+  }
+  return /* @__PURE__ */ jsx(Avatar$1, {
+    ref,
+    sx: {
+      fontWeight: theme.typography.fontWeightMedium,
+      color: theme.palette[color].contrastText,
+      backgroundColor: theme.palette[color].main,
+      ...sx
+    },
+    ...other,
+    children
+  });
+});
+Avatar.displayName = "Avatar";
+export { Avatar as A };

package/components/mui_extended/BoxIcon/index.js

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

package/components/mui_extended/Breadcrumbs/index.js

@@ -0,0 +1,92 @@
+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,
+    name,
+    icon,
+    dictionaryField: dictionaryDescription
+  } = link;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  return /* @__PURE__ */ jsxs(Link, {
+    variant: "body2",
+    component: Link$1,
+    to: href || "#",
+    sx: {
+      lineHeight: 2,
+      display: "flex",
+      alignItems: "center",
+      color: "text.primary",
+      "& > div": {
+        display: "inherit"
+      }
+    },
+    children: [icon && /* @__PURE__ */ jsx(Box, {
+      sx: {
+        mr: 1,
+        "& svg": {
+          width: 20,
+          height: 20
+        }
+      },
+      children: icon
+    }), dictionaryDescription !== void 0 && getLabel ? getLabel(dictionaryDescription) : name]
+  }, name);
+}
+function Breadcrumbs(props) {
+  const {
+    links,
+    activeLast = false,
+    ...other
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const currentLink = useMemo(() => {
+    if (links.length === 0)
+      return "";
+    const {
+      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,
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      color: "text.disabled",
+      textOverflow: "ellipsis"
+    },
+    children: currentLink
+  }, link.name)), [currentLink, links]);
+  return /* @__PURE__ */ jsx(Breadcrumbs$1, {
+    id: "MUIBreadcrumbs",
+    separator: /* @__PURE__ */ jsx(Box, {
+      component: "span",
+      sx: {
+        width: 4,
+        height: 4,
+        mx: 0.5,
+        borderRadius: "50%",
+        bgcolor: "text.disabled"
+      }
+    }),
+    ...other,
+    children: activeLast ? listDefault : listActiveLast
+  });
+}
+export { Breadcrumbs as B };

package/components/mui_extended/Button/index.js

@@ -0,0 +1,131 @@
+import { useModuleSkeleton, useEnvironment } from "@m4l/core";
+import MuiButton from "@mui/material/Button";
+import { styled, Skeleton } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { LoadingButton as LoadingButton$1 } from "@mui/lab";
+import { styled as styled$1, alpha } from "@mui/material/styles";
+import { I as IconButton } from "../IconButton/index.js";
+import { u as useBase } from "../../DynamicFilter/index.js";
+import { useMemo } from "react";
+const SKTButton = styled(Skeleton)(({
+  theme
+}) => ({
+  borderRadius: theme.spacing(0.5)
+}));
+const Button = (props) => {
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTButton, {
+      variant: "rectangular",
+      width: "100px",
+      height: "36px"
+    });
+  }
+  return /* @__PURE__ */ jsx(MuiButton, {
+    ...props
+  });
+};
+const WrapperSKTLoadingButton = styled$1("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  borderRadius: theme.spacing(1),
+  overflow: "hidden"
+}));
+const SKTLoadingButton = () => /* @__PURE__ */ jsx(WrapperSKTLoadingButton, {
+  id: "WrapperSKTLoadingButton",
+  children: /* @__PURE__ */ jsx(Skeleton, {
+    variant: "rectangular",
+    width: "100%",
+    height: "48px"
+  })
+});
+const LoadingButton = (props) => {
+  const {
+    isSkeleton,
+    children,
+    ...other
+  } = props;
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTLoadingButton, {});
+  }
+  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`
+    })
+  });
+}
+export { Button as B, FilterButton as F, LoadingButton as L };

package/components/mui_extended/IconButton/index.js

@@ -0,0 +1,108 @@
+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.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";
+function IconButton({
+  src,
+  tooltip,
+  size = "small",
+  dictionaryTooltip,
+  bgColor = "primary.active",
+  ...other
+}) {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const finalTooltip = useMemo(() => {
+    if (dictionaryTooltip && getLabel) {
+      return getLabel(dictionaryTooltip);
+    }
+    return tooltip;
+  }, [dictionaryTooltip, getLabel]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(Skeleton, {
+      variant: "circular",
+      width: "30px",
+      height: "30px"
+    });
+  }
+  return finalTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+    title: finalTooltip || "",
+    children: /* @__PURE__ */ jsx("div", {
+      children: /* @__PURE__ */ jsx(IconButton$1, {
+        size,
+        ...other,
+        children: /* @__PURE__ */ jsx(Icon, {
+          src,
+          bgColor: other.disabled ? "action.disabled" : bgColor
+        })
+      })
+    })
+  }) : /* @__PURE__ */ jsx(IconButton$1, {
+    size,
+    ...other,
+    children: /* @__PURE__ */ jsx(Icon, {
+      src,
+      bgColor: other.disabled ? "action.disabled" : bgColor
+    })
+  });
+}
+export { IconButton as I, IconButtonAnimate as a };

package/components/mui_extended/LinkWithRoute/index.js

@@ -0,0 +1,30 @@
+import { Link as Link$1 } from "react-router-dom";
+import { Skeleton, Link } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+const LinkWithRoute = (props) => {
+  const {
+    to,
+    children,
+    skeletonProps = {},
+    ...other
+  } = props;
+  const {
+    isSkeleton = false,
+    width = "100%",
+    height = "14px"
+  } = skeletonProps;
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width,
+      height
+    });
+  }
+  return /* @__PURE__ */ jsx(Link, {
+    component: Link$1,
+    to,
+    ...other,
+    children
+  });
+};
+export { LinkWithRoute as L };

package/components/mui_extended/MenuPopover/index.js

@@ -0,0 +1,135 @@
+import { styled } from "@mui/material/styles";
+import { Popover } from "@mui/material";
+import { jsxs, jsx } from "react/jsx-runtime";
+const ArrowStyle = styled("span")(({
+  arrow,
+  theme
+}) => {
+  const SIZE = 12;
+  const POSITION = -(SIZE / 2);
+  const borderStyle = `solid 1px ${theme.palette.grey[50012]}`;
+  const topStyle = {
+    borderRadius: "0 0 3px 0",
+    top: POSITION,
+    borderBottom: borderStyle,
+    borderRight: borderStyle
+  };
+  const bottomStyle = {
+    borderRadius: "3px 0 0 0",
+    bottom: POSITION,
+    borderTop: borderStyle,
+    borderLeft: borderStyle
+  };
+  const leftStyle = {
+    borderRadius: "0 3px 0 0",
+    left: POSITION,
+    borderTop: borderStyle,
+    borderRight: borderStyle
+  };
+  const rightStyle = {
+    borderRadius: "0 0 0 3px",
+    right: POSITION,
+    borderBottom: borderStyle,
+    borderLeft: borderStyle
+  };
+  return {
+    display: "none",
+    [theme.breakpoints.up("sm")]: {
+      zIndex: 1,
+      width: SIZE,
+      height: SIZE,
+      content: "''",
+      position: "absolute",
+      display: "block",
+      transform: "rotate(-135deg)",
+      background: theme.palette.background.paper
+    },
+    ...arrow === "top-left" && {
+      ...topStyle,
+      left: 20
+    },
+    ...arrow === "top-center" && {
+      ...topStyle,
+      left: 0,
+      right: 0,
+      margin: "auto"
+    },
+    ...arrow === "top-right" && {
+      ...topStyle,
+      right: 20
+    },
+    ...arrow === "bottom-left" && {
+      ...bottomStyle,
+      left: 20
+    },
+    ...arrow === "bottom-center" && {
+      ...bottomStyle,
+      left: 0,
+      right: 0,
+      margin: "auto"
+    },
+    ...arrow === "bottom-right" && {
+      ...bottomStyle,
+      right: 20
+    },
+    ...arrow === "left-top" && {
+      ...leftStyle,
+      top: 20
+    },
+    ...arrow === "left-center" && {
+      ...leftStyle,
+      top: 0,
+      bottom: 0,
+      margin: "auto"
+    },
+    ...arrow === "left-bottom" && {
+      ...leftStyle,
+      bottom: 20
+    },
+    ...arrow === "right-top" && {
+      ...rightStyle,
+      top: 20
+    },
+    ...arrow === "right-center" && {
+      ...rightStyle,
+      top: 0,
+      bottom: 0,
+      margin: "auto"
+    },
+    ...arrow === "right-bottom" && {
+      ...rightStyle,
+      bottom: 20
+    }
+  };
+});
+function MenuPopover({
+  children,
+  arrow = "top-right",
+  disabledArrow,
+  sx,
+  ...other
+}) {
+  return /* @__PURE__ */ jsxs(Popover, {
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "right"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    },
+    PaperProps: {
+      sx: {
+        p: 1,
+        width: 200,
+        overflow: "inherit",
+        ...sx
+      }
+    },
+    ...other,
+    children: [!disabledArrow && /* @__PURE__ */ jsx(ArrowStyle, {
+      arrow
+    }), children]
+  });
+}
+export { MenuPopover as M };