@m4l/components 1.0.0 → 1.0.2

package/components/mui_extended/Accordion/index.391679d1.js

@@ -0,0 +1,143 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { generateUtilityClasses, generateUtilityClass, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from "@mui/material";
+import { I as IconButton } from "../IconButton/index.87f4726c.js";
+import { useEnvironment } from "@m4l/core";
+import { unstable_composeClasses } from "@mui/base";
+import { styled } from "@mui/material/styles";
+import clsx from "clsx";
+import { T as TEST_PROP_ID } from "../../areas/constants.630a4f42.js";
+import { a as getNameDataTestId } from "../../../test/getNameDataTestId.aee44365.js";
+import { I as Icon } from "../../Icon/index.2e8ec5a1.js";
+import { T as Typography } from "../Typography/index.2a1c68f8.js";
+const componentName = "M4LAccordion";
+generateUtilityClasses(componentName, [
+  "root",
+  "endIcon",
+  "labelIcon",
+  "label",
+  "content"
+]);
+function getAccordionUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const accordionUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    endIcon: ["endIcon"],
+    labelIcon: ["labelIcon"],
+    label: ["label"],
+    content: ["content"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getAccordionUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  borderRadius: theme.spacing(0.5),
+  height: theme.spacing(4.5),
+  minHeight: theme.spacing(4.5),
+  backgroundColor: theme.vars.palette.background.header,
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  marginBottom: "0px"
+}));
+styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  gap: theme.spacing(2)
+}));
+const AccordionRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LAccordion?.styleOverrides
+}));
+const COMPONENT_PREFIX = "m4l-accordion";
+function Accordion(props) {
+  const {
+    label,
+    SKTWidht,
+    SKTHeight,
+    children,
+    accordionProps,
+    summaryProps,
+    labelIcon,
+    className,
+    dataTestId = ""
+  } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const classes = accordionUtilityClasses();
+  return /* @__PURE__ */ jsx(
+    AccordionRoot,
+    {
+      className: clsx(classes.root, className),
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId(
+          COMPONENT_PREFIX,
+          "root",
+          dataTestId
+        )
+      } : {},
+      children: /* @__PURE__ */ jsxs(
+        Accordion$1,
+        {
+          variant: "outlined",
+          square: true,
+          TransitionProps: { unmountOnExit: true },
+          defaultExpanded: true,
+          ...accordionProps,
+          children: [
+            /* @__PURE__ */ jsx(
+              AccordionSummary,
+              {
+                "aria-controls": "expanded-content",
+                disableTouchRipple: false,
+                expandIcon: /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    "aria-label": "settings",
+                    src: `${host_static_assets}/${environment_assets}/frontend/components/accordion/assets/icons/expanded.svg`,
+                    className: classes.endIcon
+                  }
+                ),
+                ...summaryProps,
+                children: /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: classes.labelIcon,
+                    ...process.env.NODE_ENV !== "production" ? {
+                      [TEST_PROP_ID]: getNameDataTestId(
+                        COMPONENT_PREFIX,
+                        "labelIcon",
+                        dataTestId
+                      )
+                    } : {},
+                    children: [
+                      labelIcon && /* @__PURE__ */ jsx(Icon, { src: labelIcon }),
+                      /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          className: classes.label,
+                          variant: "subtitle",
+                          skeletonWidth: SKTWidht,
+                          skeletongHeight: SKTHeight,
+                          children: label
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(AccordionDetails, { className: classes.content, children })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  Accordion as A
+};

package/components/mui_extended/Avatar/index.3ba36655.js

@@ -0,0 +1,63 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Skeleton, generateUtilityClasses, generateUtilityClass, styled, Avatar as Avatar$1 } from "@mui/material";
+import { useModuleSkeleton } from "@m4l/core";
+import { T as TEST_PROP_ID } from "../../areas/constants.630a4f42.js";
+import { unstable_composeClasses } from "@mui/base";
+import clsx from "clsx";
+const AVATAR_PREFIX = "M4LAvatar";
+const getNameAvatarDataTestId = (KEY) => {
+  return `${AVATAR_PREFIX}-${KEY}`;
+};
+const SkeletonAvatar = (props) => {
+  const { className } = props;
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      variant: "circular",
+      width: "32px",
+      height: "32px",
+      className,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameAvatarDataTestId("skeleton") } : {}
+    }
+  );
+};
+const componentName = "M4LAvatar";
+generateUtilityClasses(componentName, [
+  "root",
+  "skeleton"
+]);
+function getAvatarUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useAvatarUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getAvatarUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const AvatarRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LAvatar?.styleOverrides
+}));
+const Avatar = forwardRef(
+  ({ color = "default", sx, className, ...other }, ref) => {
+    const isSkeleton = useModuleSkeleton();
+    const classes = useAvatarUtilityClasses();
+    return /* @__PURE__ */ jsx(
+      AvatarRoot,
+      {
+        className: clsx(classes.root, className),
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameAvatarDataTestId("root") } : {},
+        children: !isSkeleton ? /* @__PURE__ */ jsx(Avatar$1, { ref, ...other }) : /* @__PURE__ */ jsx(SkeletonAvatar, { className: classes.skeleton })
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+export {
+  Avatar as A
+};

package/components/mui_extended/Badge/index.3465d7fb.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { generateUtilityClasses, Badge as Badge$1 } from "@mui/material";
+import "@mui/base";
+import { styled } from "@mui/material/styles";
+import { T as TEST_PROP_ID } from "../../areas/constants.630a4f42.js";
+const componentName = "M4LBadge";
+const badgeClasses = generateUtilityClasses(componentName, [
+  "root"
+]);
+const BadgeRoot = styled("div")(({ theme }) => ({
+  display: "flex",
+  ...theme.components?.M4LBadge?.styleOverrides
+}));
+const BADGE_PREFIX = "M4LBadge";
+const getNameBadgeDataTestId = (ELEMENTKEY, ID) => {
+  return `${BADGE_PREFIX}-${ELEMENTKEY}-${ID}`;
+};
+const Badge = (props) => {
+  const { children, dataTestId = "", ...others } = props;
+  return /* @__PURE__ */ jsx(
+    BadgeRoot,
+    {
+      className: badgeClasses.root,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameBadgeDataTestId("root", dataTestId) } : {},
+      children: /* @__PURE__ */ jsx(Badge$1, { ...others, children })
+    }
+  );
+};
+export {
+  Badge as B
+};

package/components/mui_extended/BoxIcon/index.d61e7ac5.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+function BoxIcon({ src, sx }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "span",
+      sx: {
+        width: 20,
+        height: 20,
+        display: "inline-block",
+        bgcolor: "currentColor",
+        mask: `url(${src}) no-repeat center / contain`,
+        WebkitMask: `url(${src}) no-repeat center / contain`,
+        ...sx
+      }
+    }
+  );
+}
+export {
+  BoxIcon as B
+};

package/components/mui_extended/Breadcrumbs/index.4a44883c.js

@@ -0,0 +1,87 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { Link, Box, Typography, Breadcrumbs as Breadcrumbs$1 } from "@mui/material";
+import { Link as Link$1 } from "react-router-dom";
+function LinkItem({ link }) {
+  const { href, name, icon, dictionaryField: dictionaryDescription } = link;
+  const { getLabel } = useModuleDictionary();
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      variant: "body2",
+      component: Link$1,
+      to: href || "#",
+      sx: {
+        lineHeight: 2,
+        display: "flex",
+        alignItems: "center",
+        color: "text.primary",
+        "& > div": { display: "inherit" }
+      },
+      children: [
+        icon && /* @__PURE__ */ jsx(Box, { sx: { mr: 1, "& svg": { width: 20, height: 20 } }, children: icon }),
+        dictionaryDescription !== void 0 && getLabel ? getLabel(dictionaryDescription) : name
+      ]
+    },
+    name
+  );
+}
+function Breadcrumbs(props) {
+  const { links, activeLast = false, ...other } = props;
+  const { getLabel } = useModuleDictionary();
+  const currentLink = useMemo(() => {
+    if (links.length === 0)
+      return "";
+    const { dictionaryField } = links[links.length - 1];
+    return getLabel(dictionaryField);
+  }, [getLabel, links]);
+  const listDefault = useMemo(
+    () => links.map((link) => /* @__PURE__ */ jsx(LinkItem, { link }, link.name)),
+    [links]
+  );
+  const listActiveLast = useMemo(
+    () => links.map(
+      (link) => link.name !== currentLink ? /* @__PURE__ */ jsx(LinkItem, { link }, link.name) : /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "body2",
+          sx: {
+            maxWidth: 260,
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            color: "text.disabled",
+            textOverflow: "ellipsis"
+          },
+          children: currentLink
+        },
+        link.name
+      )
+    ),
+    [currentLink, links]
+  );
+  return /* @__PURE__ */ jsx(
+    Breadcrumbs$1,
+    {
+      id: "MUIBreadcrumbs",
+      separator: /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "span",
+          sx: {
+            width: 4,
+            height: 4,
+            mx: 0.5,
+            borderRadius: "50%",
+            bgcolor: "text.disabled"
+          }
+        }
+      ),
+      ...other,
+      children: activeLast ? listDefault : listActiveLast
+    }
+  );
+}
+export {
+  Breadcrumbs as B
+};

package/components/mui_extended/Button/index.a7dc6ef0.js

@@ -0,0 +1,289 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { Skeleton, generateUtilityClasses, generateUtilityClass, IconButton, Tooltip, styled as styled$1 } from "@mui/material";
+import MuiButton from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
+import { unstable_composeClasses } from "@mui/base";
+import clsx from "clsx";
+import { useMemo, useState, useEffect } from "react";
+import { I as Image } from "../../Image/index.0d32558e.js";
+import { T as TEST_PROP_ID } from "../../areas/constants.630a4f42.js";
+import { LoadingButton as LoadingButton$1 } from "@mui/lab";
+import { T as Typography } from "../Typography/index.2a1c68f8.js";
+import { useMap } from "react-leaflet";
+import { M as MAP_ICONS } from "../../areas/icons.504ec098.js";
+import { m as mapClasses } from "../../maps/index.ba1ccfad.js";
+import { I as IconButton$1 } from "../IconButton/index.87f4726c.js";
+import { u as useSideBar, g as getNameDataTestId$2 } from "../../SideBar/index.004a2de1.js";
+const ButtonRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LButton?.styleOverrides
+}));
+styled(Skeleton)(({ theme }) => ({
+  borderRadius: theme.spacing(0.5)
+}));
+const componentName$2 = "M4LButton";
+const buttonClasses = generateUtilityClasses(componentName$2, [
+  "root",
+  "skeleton",
+  "sizeSmall",
+  "sizeMedium",
+  "variantOutlined",
+  "variantContained",
+  "variantText",
+  "isDisabled",
+  "colorError",
+  "colorSuccess",
+  "colorWarning",
+  "togglePressed",
+  "toggleNotPressed"
+]);
+function getButtonUtilityClass(slot) {
+  return generateUtilityClass(componentName$2, slot);
+}
+const useUtilityClasses$2 = (onwerState) => {
+  const slots = {
+    root: [
+      "root",
+      onwerState.size === "small" && "sizeSmall",
+      onwerState.size === "medium" && "sizeMedium",
+      onwerState.variant === "outlined" && "variantOutlined",
+      onwerState.variant === "contained" && "variantContained",
+      onwerState.variant === "text" && "variantText",
+      onwerState.isDisabled && "isDisabled",
+      onwerState.colorState === "error" && "colorError",
+      onwerState.colorState === "success" && "colorSuccess",
+      onwerState.colorState === "warning" && "colorWarning"
+    ],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getButtonUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const Button = (props) => {
+  const {
+    size = "small",
+    variant = "contained",
+    className,
+    disabled,
+    skeletonWidth = "100px",
+    skeletonHeight = "28px",
+    colorState,
+    ...others
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  const ownerState = {
+    size,
+    variant,
+    isDisabled: disabled,
+    colorState
+  };
+  const classes = useUtilityClasses$2(ownerState);
+  return /* @__PURE__ */ jsx(ButtonRoot, { className: clsx(classes.root, className), "data-testid": "ButtonRoot", children: !isSkeleton ? /* @__PURE__ */ jsx(MuiButton, { ...others, variant, size, disableRipple: true, disabled }) : /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      className: classes.skeleton,
+      "data-testid": "MuiSkeleton",
+      variant: "rectangular",
+      width: skeletonWidth
+    }
+  ) });
+};
+const WrapperImageButton = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LImageButton?.styleOverrides
+}));
+const componentName$1 = "M4LImageButton";
+generateUtilityClasses(componentName$1, [
+  "root"
+]);
+function getImageButtonUtilityClass(slot) {
+  return generateUtilityClass(componentName$1, slot);
+}
+const useUtilityClasses$1 = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getImageButtonUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const IMAGEBUTTON_PREFIX = "ImageButton";
+const getNameDataTestId$1 = (KEY) => {
+  return `${IMAGEBUTTON_PREFIX}-${KEY}`;
+};
+function ImageButton({
+  src,
+  width,
+  height,
+  tooltip,
+  sx = { width, height },
+  ...other
+}) {
+  const finalTooltip = tooltip;
+  const classes = useUtilityClasses$1();
+  const imageButton = useMemo(() => {
+    return /* @__PURE__ */ jsx(IconButton, { sx, ...other, children: /* @__PURE__ */ jsx(Image, { src }) });
+  }, [src, width, height, sx]);
+  return /* @__PURE__ */ jsx(
+    WrapperImageButton,
+    {
+      className: classes.root,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1("root") } : {},
+      children: finalTooltip ? /* @__PURE__ */ jsx(Tooltip, { title: finalTooltip || "", children: imageButton }) : imageButton
+    }
+  );
+}
+const componentName = "M4LLoadingButton";
+generateUtilityClasses(
+  componentName,
+  [
+    "root",
+    "skeleton",
+    "sizeSmall",
+    "sizeMedium",
+    "variantOutlined",
+    "variantContained",
+    "variantText",
+    "isDisabled"
+  ]
+);
+function getLoadingButtonUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (onwerState) => {
+  const slots = {
+    root: [
+      "root",
+      onwerState.size === "small" && "sizeSmall",
+      onwerState.size === "medium" && "sizeMedium",
+      onwerState.variant === "outlined" && "variantOutlined",
+      onwerState.variant === "contained" && "variantContained",
+      onwerState.variant === "text" && "variantText",
+      onwerState.isDisabled && "isDisabled"
+    ],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getLoadingButtonUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const LoadingButtonRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LLoadingButton?.styleOverrides
+}));
+const LOADINGBUTTON_PREFIX = "M4LoadingButton";
+const getNameDataTestId = (KEY) => {
+  return `${LOADINGBUTTON_PREFIX}-${KEY}`;
+};
+const LoadingButton = (props) => {
+  const {
+    children,
+    skeletonWidth = "100%",
+    size = "small",
+    variant = "contained",
+    disabled,
+    className,
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  const ownerState = {
+    size,
+    variant,
+    isDisabled: disabled
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(
+    LoadingButtonRoot,
+    {
+      className: clsx(classes.root, className),
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
+      children: !isSkeleton ? /* @__PURE__ */ jsx(LoadingButton$1, { ...other, variant, size, children: /* @__PURE__ */ jsx(Typography, { variant: "action", children }) }) : /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          className: classes.skeleton,
+          ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("skeleton") } : {},
+          variant: "rectangular",
+          width: skeletonWidth
+        }
+      )
+    }
+  );
+};
+function ZoomButtons() {
+  const map = useMap();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const [, setZoomInDisabled] = useState(false);
+  const [, setZoomOutDisabled] = useState(false);
+  useEffect(() => {
+    const updateButtonState = () => {
+      const currentZoom = map.getZoom();
+      const maxZoom = map.getMaxZoom();
+      const minZoom = map.getMinZoom();
+      setZoomInDisabled(currentZoom === maxZoom);
+      setZoomOutDisabled(currentZoom === minZoom);
+    };
+    map.on("zoomend", updateButtonState);
+    updateButtonState();
+    return () => {
+      map.off("zoomend", updateButtonState);
+    };
+  }, [map]);
+  const handleZoomIn = () => {
+    map.zoomIn();
+  };
+  const handleZoomOut = () => {
+    map.zoomOut();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: mapClasses.zoomButtons, children: [
+    /* @__PURE__ */ jsx(
+      IconButton$1,
+      {
+        onClick: handleZoomIn,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_ZOOM_IN}`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton$1,
+      {
+        onClick: handleZoomOut,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_ZOOM_OUT}`
+      }
+    )
+  ] });
+}
+const CollapseButtonRoot = styled$1("div")(() => ({
+  display: "flex"
+}));
+styled$1("div")(() => ({
+  display: "flex"
+}));
+function FooterSidebar(_props) {
+  const { classes, companyLogoNormalUrl } = useSideBar();
+  return /* @__PURE__ */ jsx(
+    CollapseButtonRoot,
+    {
+      className: classes.footer,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$2("footer") } : {},
+      children: /* @__PURE__ */ jsx("div", { className: classes.wrapperLogoFooter, children: /* @__PURE__ */ jsx("div", { className: classes.containerLogoButtonLogo, children: /* @__PURE__ */ jsx(
+        Image,
+        {
+          width: "192px",
+          height: "28px",
+          src: companyLogoNormalUrl || "",
+          alt: "logo"
+        },
+        "Logo"
+      ) }) })
+    }
+  );
+}
+export {
+  Button as B,
+  FooterSidebar as F,
+  ImageButton as I,
+  LoadingButton as L,
+  ZoomButtons as Z,
+  buttonClasses as b
+};