@m4l/components 0.1.26 → 0.1.28

package/components/mui_extended/LinkWithRoute/index.16436ab8.js

@@ -1,26 +1,30 @@
-import { Link as k } from "react-router-dom";
-import { Skeleton as m, Link as h } from "@mui/material";
-import { useModuleSkeleton as l } from "@m4l/core";
-import { jsx as t } from "react/jsx-runtime";
-const a = (e) => {
+import { Link as Link$1 } from "react-router-dom";
+import { Skeleton, Link } from "@mui/material";
+import { useModuleSkeleton } from "@m4l/core";
+import { jsx } from "react/jsx-runtime";
+const LinkWithRoute = (props) => {
   const {
-    to: o,
-    children: n,
-    skeletonWidth: i = "100%",
-    skeletonHeight: r = "14px",
-    ...s
-  } = e;
-  return l() ? /* @__PURE__ */ t(m, {
-    variant: "text",
-    width: i,
-    height: r
-  }) : /* @__PURE__ */ t(h, {
-    component: k,
-    to: o,
-    ...s,
-    children: n
+    to,
+    children,
+    skeletonWidth = "100%",
+    skeletonHeight = "14px",
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: skeletonWidth,
+      height: skeletonHeight
+    });
+  }
+  return /* @__PURE__ */ jsx(Link, {
+    component: Link$1,
+    to,
+    ...other,
+    children
   });
 };
 export {
-  a as L
+  LinkWithRoute as L
 };

package/components/mui_extended/Pager/index.c0865b70.js

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

@@ -0,0 +1,278 @@
+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.619c31c4.js";
+import { styled } from "@mui/material/styles";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import "../Accordion/index.a02ac6ae.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.53b56958.js";
+import "../../CommonActions/components/Actions/index.0645e30f.js";
+import "../Pager/index.c0865b70.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) => {
+    console.log("handleOpen", allLocales, loading);
+    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) => {
+      console.log("Response", response.data);
+      if (mounted) {
+        setAllLocales(response.data);
+      }
+    }).finally(() => {
+      setLoading(false);
+    });
+    return function cleanUp() {
+      mounted = false;
+    };
+  }, [open]);
+  console.log("Render lang", allLocales, loading);
+  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/Tab/index.e0653a0a.js

@@ -1,28 +1,32 @@
-import { useModuleSkeleton as n } from "@m4l/core";
-import { Skeleton as a, Tab as s } from "@mui/material";
-import { styled as p } from "@mui/material/styles";
-import { jsx as e } from "react/jsx-runtime";
-const d = p("div")(({
-  theme: t
+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: t.spacing(1.5, 2)
+  padding: theme.spacing(1.5, 2)
 }));
-function c(t) {
+function Tab(props) {
   const {
-    SKTWidth: o,
-    SKTHeight: r,
-    ...i
-  } = t;
-  return n() ? /* @__PURE__ */ e(d, {
-    children: /* @__PURE__ */ e(a, {
-      variant: "text",
-      width: o,
-      height: r
-    })
-  }) : /* @__PURE__ */ e(s, {
-    ...i
+    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 {
-  c as T
+  Tab as T
 };

package/components/mui_extended/Typography/index.e5494696.js

@@ -1,31 +1,35 @@
-import { useModuleSkeleton as s } from "@m4l/core";
-import { Skeleton as p, Typography as i } from "@mui/material";
-import { jsx as r } from "react/jsx-runtime";
-const h = (t) => {
+import { useModuleSkeleton } from "@m4l/core";
+import { Skeleton, Typography as Typography$1 } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+const SkeletonTypography = (props) => {
   const {
-    skeletonWidth: e,
-    skeletongHeight: o
-  } = t;
-  return /* @__PURE__ */ r(p, {
+    skeletonWidth,
+    skeletongHeight
+  } = props;
+  return /* @__PURE__ */ jsx(Skeleton, {
     variant: "text",
-    width: e,
-    height: o
+    width: skeletonWidth,
+    height: skeletongHeight
   });
 };
-function k(t) {
+function Typography(props) {
   const {
-    skeletonWidth: e = "100%",
-    skeletongHeight: o = "18px",
-    ...n
-  } = t;
-  return s() ? /* @__PURE__ */ r(h, {
-    skeletonWidth: e,
-    skeletongHeight: o
-  }) : /* @__PURE__ */ r(i, {
+    skeletonWidth = "100%",
+    skeletongHeight = "18px",
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonTypography, {
+      skeletonWidth,
+      skeletongHeight
+    });
+  }
+  return /* @__PURE__ */ jsx(Typography$1, {
     className: "m4l_typography",
-    ...n
+    ...other
   });
 }
 export {
-  k as T
+  Typography as T
 };