@m4l/components 0.1.12 → 0.1.13

package/components/mui_extended/Button/index.js

@@ -1,131 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,135 +0,0 @@
-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 };

package/components/mui_extended/Pager/index.js

@@ -1,137 +0,0 @@
-import { useMemo } from "react";
-import { Skeleton, TablePagination } from "@mui/material";
-import { P as PagerActions } from "../../CommonActions/components/Actions/index.js";
-import { styled } from "@mui/material/styles";
-import { jsxs, jsx } from "react/jsx-runtime";
-styled("div")(() => ({
-  display: "flex",
-  flexDirection: "column",
-  height: "100%",
-  overflow: "hidden"
-}));
-const SKTWrapperPagerActions = styled("div")(({ theme }) => ({
-  width: "100%",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  marginLeft: theme.spacing(3)
-}));
-const SKTSvgIconButtonContainer = styled("div")(({ theme }) => ({
-  display: "flex",
-  marginLeft: theme.spacing(3)
-}));
-const SKTSvgIconButton = styled("div")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  width: theme.spacing(3.75),
-  height: theme.spacing(3.75)
-}));
-const SKTWrapperRowsPerPage = styled("div")(({ theme }) => ({
-  display: "grid",
-  gridTemplateColumns: "auto auto",
-  gridGap: theme.spacing(1),
-  marginRight: theme.spacing(3)
-}));
-function Pager(props) {
-  const {
-    totalRecords,
-    rowsPerPageOptions = [5, 10, 2],
-    rowsPerPage = 25,
-    page,
-    onPageChange,
-    onRowsPerPageChange,
-    labelRows = "Rows per page",
-    labelOf = "Of",
-    isSkeleton = "false",
-    isDesktop
-  } = props;
-  const currentPage = useMemo(() => {
-    if (rowsPerPage * page > totalRecords) {
-      return Math.floor(totalRecords / rowsPerPage);
-    }
-    return page;
-  }, [page, rowsPerPage, totalRecords]);
-  const handleChangeRowsPerPage = (event) => {
-    onRowsPerPageChange(parseInt(event.target.value, 10));
-    onPageChange(0);
-  };
-  const handleChangePage = (_event, newPage) => {
-    onPageChange(newPage);
-  };
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsxs(SKTWrapperPagerActions, {
-      children: [/* @__PURE__ */ jsxs(SKTWrapperRowsPerPage, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: "40px",
-          height: "16px"
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: "20px",
-          height: "16px"
-        })]
-      }), /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width: "50px",
-        height: "16px"
-      }), /* @__PURE__ */ jsxs(SKTSvgIconButtonContainer, {
-        children: [/* @__PURE__ */ jsx(SKTSvgIconButton, {
-          children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "circular",
-            width: 20,
-            height: 20
-          })
-        }), /* @__PURE__ */ jsx(SKTSvgIconButton, {
-          children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "circular",
-            width: 20,
-            height: 20
-          })
-        }), /* @__PURE__ */ jsx(SKTSvgIconButton, {
-          children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "circular",
-            width: 20,
-            height: 20
-          })
-        }), /* @__PURE__ */ jsx(SKTSvgIconButton, {
-          children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "circular",
-            width: 20,
-            height: 20
-          })
-        })]
-      })]
-    });
-  }
-  return /* @__PURE__ */ jsx(TablePagination, {
-    id: "TablePagination",
-    rowsPerPageOptions,
-    component: "div",
-    count: totalRecords,
-    rowsPerPage,
-    page: currentPage,
-    onPageChange: handleChangePage,
-    onRowsPerPageChange: handleChangeRowsPerPage,
-    labelDisplayedRows: isDesktop ? ({
-      from,
-      to,
-      count
-    }) => `${from}-${to} ${labelOf} ${count}` : () => ``,
-    labelRowsPerPage: isDesktop ? labelRows : "",
-    ActionsComponent: PagerActions
-  });
-}
-function getPagerComponentsDictionary() {
-  return ["pager"];
-}
-const defaultPagerDictionary = {
-  pager: {
-    first: "First",
-    previous: "Previous",
-    before: "Before",
-    last: "Last",
-    of: "of"
-  }
-};
-export { Pager as P, defaultPagerDictionary as d, getPagerComponentsDictionary as g };

package/components/mui_extended/Tab/index.js

@@ -1,30 +0,0 @@
-import { useModuleSkeleton } from "@m4l/core";
-import { Skeleton, Tab as Tab$1 } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { jsx } from "react/jsx-runtime";
-const SKTTabWrapper = styled("div")(({
-  theme
-}) => ({
-  padding: theme.spacing(1.5, 2)
-}));
-function Tab(props) {
-  const {
-    SKTWidth,
-    SKTHeight,
-    ...other
-  } = props;
-  const isSkeleton = useModuleSkeleton();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTTabWrapper, {
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width: SKTWidth,
-        height: SKTHeight
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx(Tab$1, {
-    ...other
-  });
-}
-export { Tab as T };

package/components/mui_extended/Typography/index.js

@@ -1,21 +0,0 @@
-import { Skeleton, Typography as Typography$1 } from "@mui/material";
-import { jsx } from "react/jsx-runtime";
-function Typography(props) {
-  const {
-    skeletonProps = {},
-    ...other
-  } = props;
-  const {
-    isSkeleton = "false",
-    width = "100%",
-    height = "14px"
-  } = skeletonProps;
-  return isSkeleton ? /* @__PURE__ */ jsx(Skeleton, {
-    variant: "text",
-    width,
-    height
-  }) : /* @__PURE__ */ jsx(Typography$1, {
-    ...other
-  });
-}
-export { Typography as T };