@m4l/components 0.1.36 → 0.1.37

package/dist/components/mui_extended/Button/index.55fc70dc.js

@@ -1,178 +0,0 @@
-import { useModuleSkeleton, useEnvironment, useModuleDictionary } from "@m4l/core";
-import { Skeleton, styled, IconButton as IconButton$1, Tooltip } from "@mui/material";
-import MuiButton from "@mui/material/Button";
-import { jsx } from "react/jsx-runtime";
-import { LoadingButton as LoadingButton$1 } from "@mui/lab";
-import { I as IconButton } from "../IconButton/index.e3adaa33.js";
-import { styled as styled$1, alpha } from "@mui/material/styles";
-import { u as useBase } from "../../DynamicFilter/index.32f84995.js";
-import { useMemo } from "react";
-import { I as Image } from "../../Image/index.93d5f37f.js";
-const Button = (props) => {
-  const isSkeleton = useModuleSkeleton();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(Skeleton, {
-      sx: {
-        borderRadius: 2
-      },
-      variant: "rectangular",
-      width: "100px",
-      height: "36px"
-    });
-  }
-  return /* @__PURE__ */ jsx(MuiButton, {
-    ...props
-  });
-};
-const WrapperSkeleton = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  width: "100%",
-  borderRadius: theme.spacing(1),
-  overflow: "hidden"
-}));
-const SkeletonLoadingButton = () => /* @__PURE__ */ jsx(WrapperSkeleton, {
-  id: "WrapperSKTLoadingButton",
-  children: /* @__PURE__ */ jsx(Skeleton, {
-    variant: "rectangular",
-    width: "100%",
-    height: "48px"
-  })
-});
-const LoadingButton = (props) => {
-  const {
-    children,
-    ...other
-  } = props;
-  const isSkeleton = useModuleSkeleton();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SkeletonLoadingButton, {});
-  }
-  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`
-    })
-  });
-}
-function ImageButton({
-  src,
-  width,
-  height,
-  className,
-  useIntersectionObserver,
-  skeletonVariant = "circle",
-  tooltip,
-  dictionaryTooltip,
-  sx = {
-    width: 40,
-    height: 40
-  },
-  ...other
-}) {
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const finalTooltip = useMemo(() => {
-    if (dictionaryTooltip && getLabel) {
-      return getLabel(dictionaryTooltip);
-    }
-    return tooltip;
-  }, [tooltip, dictionaryTooltip, getLabel]);
-  const imageButton = useMemo(() => {
-    return /* @__PURE__ */ jsx(IconButton$1, {
-      sx,
-      className: `m4l_image_button ${className ? className : ""}`,
-      ...other,
-      children: /* @__PURE__ */ jsx(Image, {
-        src,
-        width,
-        height,
-        useIntersectionObserver,
-        skeletonVariant
-      })
-    });
-  }, [src, width, height, useIntersectionObserver, skeletonVariant, sx]);
-  return finalTooltip ? /* @__PURE__ */ jsx(Tooltip, {
-    title: finalTooltip || "",
-    children: imageButton
-  }) : imageButton;
-}
-export {
-  Button as B,
-  FilterButton as F,
-  ImageButton as I,
-  LoadingButton as L
-};

package/dist/components/mui_extended/Popover/index.97cf3a3e.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.1dbd3e58.js";
-import { styled } from "@mui/material/styles";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import "../Accordion/index.8e123c57.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.55fc70dc.js";
-import "../../CommonActions/components/Actions/index.ba86f72f.js";
-import "../Pager/index.d245f821.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
-};