@m4l/components 0.1.35 → 0.1.36

package/components/mui_extended/IconButton/index.25ff14bd.js

@@ -1,120 +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.619fa9ad.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/MenuActions/types.d.ts

@@ -1,27 +0,0 @@
-/// <reference types="react" />
-import { PopoverProps } from '../Popover/types';
-export interface ComponentActionProps {
-    description?: string;
-    onClick: (props?: any) => void;
-}
-export interface MenuAction {
-    urlIcon: string;
-    iconWidth?: number;
-    iconHeight?: number;
-    dictionaryField: string;
-    onClick: (props?: any) => void;
-    disabled: boolean;
-    color?: string;
-    component?: (props: ComponentActionProps) => JSX.Element;
-}
-export interface MenuActionsProps extends Omit<PopoverProps, 'open'> {
-    objItem?: any;
-    urlIcon?: string;
-    menuActions: MenuAction[] | ((row: any) => MenuAction[]);
-    toolTip?: string;
-    marginTop?: number | string;
-    marginBottom?: number | string;
-    marginRight?: number | string;
-    marginLeft?: number | string;
-    width?: number;
-}

package/components/mui_extended/Pager/index.74f16fe0.js

@@ -1,141 +0,0 @@
-import { useMemo } from "react";
-import { Skeleton, TablePagination } from "@mui/material";
-import { P as PagerActions } from "../../CommonActions/components/Actions/index.4b0d3293.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/Popover/index.2a084d8a.js

@@ -1,275 +0,0 @@
-import { useState, useEffect } from "react";
-import { Popover as Popover$1, styled as styled$1, Stack, MenuItem } from "@mui/material";
-import { I as Image } from "../../Image/index.93d5f37f.js";
-import { useLocales } from "@m4l/graphics";
-import { useEnvironment, useNetwork } from "@m4l/core";
-import "../../Icon/index.619fa9ad.js";
-import { styled } from "@mui/material/styles";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import "../Accordion/index.86b97783.js";
-import "../Avatar/index.fe06afd7.js";
-import "react-router-dom";
-import "@mui/material/Button";
-import { C as CircularProgress } from "../CircularProgress/index.ad569afd.js";
-import "@mui/lab";
-import { I as ImageButton } from "../Button/index.44282241.js";
-import "../../CommonActions/components/Actions/index.4b0d3293.js";
-import "../Pager/index.74f16fe0.js";
-import "../Tab/index.e0653a0a.js";
-const ArrowStyle = styled("span")(({
-  arrowType,
-  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
-    },
-    ...arrowType === "top-left" && {
-      ...topStyle,
-      left: 20
-    },
-    ...arrowType === "top-center" && {
-      ...topStyle,
-      left: 0,
-      right: 0,
-      margin: "auto"
-    },
-    ...arrowType === "top-right" && {
-      ...topStyle,
-      right: 20
-    },
-    ...arrowType === "bottom-left" && {
-      ...bottomStyle,
-      left: 20
-    },
-    ...arrowType === "bottom-center" && {
-      ...bottomStyle,
-      left: 0,
-      right: 0,
-      margin: "auto"
-    },
-    ...arrowType === "bottom-right" && {
-      ...bottomStyle,
-      right: 20
-    },
-    ...arrowType === "left-top" && {
-      ...leftStyle,
-      top: 20
-    },
-    ...arrowType === "left-center" && {
-      ...leftStyle,
-      top: 0,
-      bottom: 0,
-      margin: "auto"
-    },
-    ...arrowType === "left-bottom" && {
-      ...leftStyle,
-      bottom: 20
-    },
-    ...arrowType === "right-top" && {
-      ...rightStyle,
-      top: 20
-    },
-    ...arrowType === "right-center" && {
-      ...rightStyle,
-      top: 0,
-      bottom: 0,
-      margin: "auto"
-    },
-    ...arrowType === "right-bottom" && {
-      ...rightStyle,
-      bottom: 20
-    }
-  };
-});
-function Popover({
-  children,
-  arrowType = "top-right",
-  sx,
-  className,
-  ...other
-}) {
-  return /* @__PURE__ */ jsxs(Popover$1, {
-    className: `m4l_popover ${className ? className : ""}`,
-    anchorOrigin: {
-      vertical: "bottom",
-      horizontal: "right"
-    },
-    transformOrigin: {
-      vertical: "top",
-      horizontal: "right"
-    },
-    PaperProps: {
-      sx: {
-        p: 1,
-        overflow: "inherit",
-        ...sx
-      }
-    },
-    ...other,
-    children: [arrowType !== "no-arrow" && /* @__PURE__ */ jsx(ArrowStyle, {
-      arrowType
-    }), children]
-  });
-}
-const LabelItem = styled$1("span")(({
-  theme
-}) => ({
-  marginLeft: theme.spacing(1)
-}));
-const ContainerProgress = styled$1("div")(({
-  theme
-}) => ({
-  padding: theme.spacing(0.75, 0),
-  margin: theme.spacing(0, 1.25)
-}));
-const ContainerMenuItems = styled$1("div")(() => ({
-  display: "flex",
-  flexDirection: "column"
-}));
-function LanguagePopover() {
-  const {
-    currentLocale,
-    onChangeLocale
-  } = useLocales();
-  const {
-    domain_token
-  } = useEnvironment();
-  const {
-    networkOperation
-  } = useNetwork();
-  const [open, setOpen] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [allLocales, setAllLocales] = useState([]);
-  const handleOpen = (event) => {
-    setOpen(event.currentTarget);
-  };
-  const handleClose = () => {
-    setOpen(null);
-  };
-  useEffect(() => {
-    let mounted = true;
-    if (open === null || loading || allLocales.length > 0) {
-      return;
-    }
-    setLoading(true);
-    networkOperation({
-      method: "GET",
-      endPoint: `na/locales`,
-      parms: {
-        domain_token
-      }
-    }).then((response) => {
-      if (mounted) {
-        setAllLocales(response.data);
-      }
-    }).finally(() => {
-      setLoading(false);
-    });
-    return function cleanUp() {
-      mounted = false;
-    };
-  }, [open]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(ImageButton, {
-      className: "m4l_language_popover",
-      onClick: handleOpen,
-      sx: {
-        width: 40,
-        height: 40,
-        ...open && {
-          bgcolor: "action.selected"
-        }
-      },
-      src: currentLocale?.url_icon || "",
-      alt: currentLocale?.name,
-      width: "24px",
-      height: "24px",
-      skeletonVariant: "circle",
-      tooltip: "dddd"
-    }), /* @__PURE__ */ jsx(Popover, {
-      arrowType: "top-right",
-      open: Boolean(open),
-      anchorEl: open,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "right"
-      },
-      onClose: handleClose,
-      sx: {
-        mt: 1.5,
-        ml: 0.75,
-        width: 180,
-        rowGap: "100px",
-        "& .MuiMenuItem-root": {
-          px: 1,
-          typography: "body2",
-          borderRadius: 0.75
-        }
-      },
-      children: /* @__PURE__ */ jsxs(ContainerMenuItems, {
-        children: [allLocales.length === 0 && /* @__PURE__ */ jsx(ContainerProgress, {
-          children: /* @__PURE__ */ jsx(CircularProgress, {
-            size: "20px"
-          })
-        }), allLocales.length > 0 && /* @__PURE__ */ jsx(Stack, {
-          spacing: 0.75,
-          children: allLocales.map((option) => /* @__PURE__ */ jsxs(MenuItem, {
-            selected: option.lang === currentLocale?.lang && option?.script === currentLocale?.script && option?.region === currentLocale?.region,
-            onClick: () => {
-              onChangeLocale(option);
-              handleClose();
-            },
-            children: [/* @__PURE__ */ jsx(Image, {
-              alt: option.name,
-              src: option.url_icon,
-              width: "24px",
-              height: "24px"
-            }), /* @__PURE__ */ jsx(LabelItem, {
-              children: option.name
-            })]
-          }, option.lang || option.script || option.region))
-        })]
-      })
-    })]
-  });
-}
-export {
-  LanguagePopover as L,
-  Popover as P
-};

package/components/mui_extended/index.d.ts

@@ -1,56 +0,0 @@
-export { Accordion } from './Accordion';
-export { Avatar } from './Avatar';
-export { type AvatarProps } from './Avatar/types';
-export { BoxIcon } from './BoxIcon';
-export { Breadcrumbs } from './Breadcrumbs';
-export type { TLink } from './Breadcrumbs/types';
-export { Button } from './Button';
-export { CircularProgress } from './CircularProgress';
-export { IconButton } from './IconButton';
-export { LinearProgress } from './LinearProgress';
-export { LinkWithRoute } from './LinkWithRoute';
-export { LoadingButton } from './LoadingButton';
-export { MenuActions } from './MenuActions';
-export type { MenuAction, ComponentActionProps } from './MenuActions/types';
-export { Popover } from './Popover';
-export { Pager } from './Pager';
-export type { PagerProps } from './Pager/types';
-export { getPagerComponentsDictionary } from './Pager/dicctionary';
-export { Tab } from './Tab';
-export { Typography } from './Typography';
-declare module '@mui/material/styles/createPalette' {
-    interface TypeBackground {
-        neutral: string;
-        autofill: string;
-        header: string;
-    }
-    interface SimplePaletteColorOptions {
-        lighter?: string;
-        darker?: string;
-        LightSelected?: string;
-        LightSelectedHover?: string;
-        DarkSelected?: string;
-        DarkSelectedHover?: string;
-    }
-    interface PaletteColor {
-        lighter?: string;
-        darker?: string;
-        LightSelected?: string;
-        LightSelectedHover?: string;
-        DarkSelected?: string;
-        DarkSelectedHover?: string;
-    }
-}
-declare module '@mui/material' {
-    interface Color {
-        0: string;
-        500_8: string;
-        500_12: string;
-        500_16: string;
-        500_24: string;
-        500_32: string;
-        500_48: string;
-        500_56: string;
-        500_80: string;
-    }
-}