@m4l/components 0.1.35 → 0.1.37

package/dist/components/Icon/index.8d754623.js

@@ -0,0 +1,153 @@
+import { m } from "framer-motion";
+import { forwardRef, useState, useMemo, useEffect } from "react";
+import { IconButton, Box, styled } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@mui/material/styles";
+import { g as getPaletteColor } from "../../utils/index.899eb67b.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, {
+    size,
+    ref,
+    ...other,
+    children
+  })
+}));
+IconButtonAnimate.displayName = "IconButtonAnimate";
+const DivIcon = styled("div", {
+  shouldForwardProp: (props) => props !== "src" && props !== "size" && props !== "bgColor" && props !== "rotationAngle" && props !== "angleTransition"
+})(({
+  size,
+  src,
+  bgColor,
+  rotationAngle,
+  angleTransition
+}) => ({
+  maskPosition: "center!important",
+  maskRepeat: "no-repeat!important",
+  WebkitMaskRepeat: "no-repeat!important",
+  width: size,
+  height: size,
+  backgroundColor: bgColor,
+  mask: `url('data:image/svg+xml;base64,${src}')`,
+  WebkitMask: `url('data:image/svg+xml;base64,${src}')`,
+  ...rotationAngle && {
+    transform: `rotate(${rotationAngle}deg)`
+  },
+  ...angleTransition && rotationAngle && {
+    transition: `transform ${angleTransition}s ease-in-out`
+  }
+}));
+const WrapperPlaceHolder = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
+}));
+function Icon(props) {
+  const {
+    src,
+    size = "small",
+    bgColor = "action.active",
+    rotationAngle,
+    angleTransition
+  } = props;
+  const [resource, setResource] = useState(void 0);
+  const theme = useTheme();
+  const finalSize = useMemo(() => {
+    switch (size) {
+      case "extra-small":
+        return "12px";
+      case "small":
+        return "16px";
+      case "medium":
+        return "18px";
+      case "large":
+        return "22px";
+    }
+    return size;
+  }, [size]);
+  useEffect(() => {
+    let mounted = true;
+    (async function networkOperation() {
+      await fetch(src).then((response) => {
+        return response.text() || "";
+      }).then((xml) => {
+        xml = xml.match(
+          /(<svg\b[^>]*\s*(viewBox="(\b[^"]*)").*?>([\s\S]*?)<\/svg>|<svg>([\s\S]*?)<\/svg>)/g
+        )?.toString() || "";
+        if (mounted) {
+          setResource(window.btoa(xml));
+        }
+      }).catch((_err) => {
+      });
+    })();
+    return function clenUp() {
+      mounted = false;
+    };
+  }, [src]);
+  const placeHolder = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==";
+  return /* @__PURE__ */ jsx(WrapperPlaceHolder, {
+    className: "m4l_icon",
+    children: resource ? /* @__PURE__ */ jsx(DivIcon, {
+      src: resource,
+      size: finalSize,
+      bgColor: getPaletteColor(theme.palette, bgColor),
+      rotationAngle,
+      angleTransition
+    }) : /* @__PURE__ */ jsx("img", {
+      src: placeHolder,
+      alt: "icon_svg",
+      width: finalSize,
+      height: finalSize
+    })
+  });
+}
+export {
+  Icon as I,
+  IconButtonAnimate as a
+};

package/dist/components/LanguagePopover/index.cbc4b282.js

@@ -0,0 +1,144 @@
+import { useState, useEffect } from "react";
+import { styled, 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.8d754623.js";
+import "@mui/material/styles";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import "../mui_extended/Accordion/index.a541c71c.js";
+import "../mui_extended/Avatar/index.fe06afd7.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import { C as CircularProgress } from "../mui_extended/CircularProgress/index.ad569afd.js";
+import "@mui/lab";
+import { I as ImageButton } from "../mui_extended/Button/index.86a155a2.js";
+import { P as Popover } from "../mui_extended/Popover/index.53c77d23.js";
+import "../mui_extended/MenuActions/index.ee17bddd.js";
+import "../mui_extended/Pager/index.74d3f5fc.js";
+import "../mui_extended/Tab/index.e0653a0a.js";
+const LabelItem = styled("span")(({
+  theme
+}) => ({
+  marginLeft: theme.spacing(1)
+}));
+const ContainerProgress = styled("div")(({
+  theme
+}) => ({
+  padding: theme.spacing(0.75, 0),
+  margin: theme.spacing(0, 1.25)
+}));
+const ContainerMenuItems = styled("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
+};

package/dist/components/Loadable/index.117eaced.js

@@ -0,0 +1,14 @@
+import { Suspense } from "react";
+import { P as PropagateLoader } from "../animate/PropagateLoader/index.be5b02c3.js";
+import { jsx } from "react/jsx-runtime";
+const Loadable = (Component) => function EmbededLoadable(props) {
+  return /* @__PURE__ */ jsx(Suspense, {
+    fallback: /* @__PURE__ */ jsx(PropagateLoader, {}),
+    children: /* @__PURE__ */ jsx(Component, {
+      ...props
+    })
+  });
+};
+export {
+  Loadable as L
+};

package/dist/components/ModalDialog/index.a684827f.js

@@ -0,0 +1,123 @@
+import { Dialog, Paper } from "@mui/material";
+import { c as cjs } from "../../react-draggable.84d6b038.js";
+import { u as useModal } from "../../hooks/useModal/index.d14edee3.js";
+import { styled } from "@mui/material/styles";
+import { a as getThemeVariantColor } from "../../utils/index.899eb67b.js";
+import { R as ResizeableWindow } from "../Resizeable/index.c96c0f09.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.d3e1f36e.js";
+const WrapperDialog = styled(Dialog)(() => ({}));
+const Container = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  overflow: "hidden",
+  padding: theme.spacing(3)
+}));
+styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  minHeight: theme.spacing(5),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  overflow: "hidden"
+}));
+styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  flexGrow: 1,
+  alignItems: "center",
+  cursor: "move",
+  ...theme.typography.subtitle1,
+  color: theme.palette.text.primary
+}));
+styled("div")(({ theme, variant }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: theme.spacing(1.5),
+  "& > span": {
+    background: getThemeVariantColor(theme, variant)
+  }
+}));
+styled("div")(() => ({
+  flexGrow: 1,
+  position: "relative",
+  overflow: "auto"
+}));
+styled("div")(({ theme, variant }) => ({
+  ...theme.typography.subtitle1,
+  color: getThemeVariantColor(theme, variant),
+  width: "100%",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+  overflow: "hidden"
+}));
+const DragabblePaperComponent = (props) => {
+  return /* @__PURE__ */ jsx(cjs.exports, {
+    handle: ".m4l_draggable_handle",
+    cancel: '[class*="MuiDialogContent-root"]',
+    children: /* @__PURE__ */ jsx(Paper, {
+      sx: {
+        maxHeight: "unset",
+        maxWidth: "unset"
+      },
+      ...props
+    })
+  });
+};
+function PaperComponent(props) {
+  return /* @__PURE__ */ jsx(Paper, {
+    sx: {
+      maxHeight: "unset",
+      maxWidth: "unset",
+      height: "100%"
+    },
+    ...props
+  });
+}
+const ModalDialog = () => {
+  const {
+    open,
+    initialWidth = 600,
+    initialHeigth = 400,
+    maxWidth,
+    maxHeigth,
+    window,
+    fullScreen
+  } = useModal();
+  const isDesktop = useResponsiveDesktop();
+  const contentComnponent = /* @__PURE__ */ jsx(Container, {
+    id: "Container",
+    children: typeof window === "function" ? window() : window
+  });
+  return /* @__PURE__ */ jsxs(WrapperDialog, {
+    open,
+    "aria-labelledby": "child-modal-title",
+    "aria-describedby": "child-modal-description",
+    PaperComponent: isDesktop ? DragabblePaperComponent : PaperComponent,
+    maxWidth: false,
+    fullWidth: !isDesktop,
+    fullScreen,
+    disableEnforceFocus: true,
+    children: [isDesktop && /* @__PURE__ */ jsx(ResizeableWindow, {
+      width: initialWidth,
+      height: initialHeigth,
+      maxWidth,
+      maxHeigth,
+      children: contentComnponent
+    }), !isDesktop && contentComnponent]
+  });
+};
+function getModalDialogComponentsDictionary() {
+  return ["modal_dialog"].concat(getCommonActionsDictionary());
+}
+const defaultModalDialogDictionary = {
+  modal_dialog: {}
+};
+export {
+  ModalDialog as M,
+  defaultModalDialogDictionary as d,
+  getModalDialogComponentsDictionary as g
+};