@m4l/components 1.0.0 → 1.0.2

package/components/Icon/index.d5fed418.js

@@ -1,420 +0,0 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { generateUtilityClasses, generateUtilityClass, Skeleton, Tooltip, IconButton as IconButton$1, Box, styled as styled$1, SvgIcon } from "@mui/material";
-import clsx from "clsx";
-import { unstable_composeClasses } from "@mui/base";
-import { s as componentName, I as ICON_PREFIX, T as TEST_PROP_ID, t as componentName$1, L as LABEL_BK_COLOR_DEFAULT, u as LABEL_COLOR_DEFAULT } from "../areas/constants.5387d83e.js";
-import { w as withToggle } from "../../hocs/withToggle/index.548aeace.js";
-import { useMemo, useState } from "react";
-import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
-import { styled } from "@mui/material/styles";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { Marker } from "react-leaflet";
-import L__default from "leaflet";
-import { m as mapClasses } from "../maps/index.8ec46ce4.js";
-import { u as useSideBar, g as getNameDataTestId$1 } from "../SideBar/index.629ba840.js";
-const IconRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LIcon?.styleOverrides
-}));
-const DivIcon = styled("div", {
-  shouldForwardProp: (props) => props !== "src" && props !== "rotationAngle"
-})(({ src, rotationAngle }) => ({
-  maskPosition: "center",
-  maskRepeat: "no-repeat",
-  maskSize: "cover",
-  WebkitMaskRepeat: "no-repeat",
-  mask: `url(${src})`,
-  WebkitMask: `url(${src})`,
-  WebkitMaskSize: "cover",
-  ...rotationAngle && {
-    transform: `rotate(${rotationAngle}deg)`
-  }
-}));
-generateUtilityClasses(componentName, [
-  "root",
-  "icon",
-  "variantSkeleton",
-  "sizeExtraSmall",
-  "sizeSmall",
-  "sizeMedium",
-  "sizeLarge",
-  "sizeExtraLarge",
-  "rotationAngle"
-]);
-function getIconClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses$1 = (ownerState) => {
-  const slots = {
-    root: ["root"],
-    icon: [
-      "icon",
-      ownerState.size === "extraSmall" && "sizeExtraSmall",
-      ownerState.size === "small" && "sizeSmall",
-      ownerState.size === "medium" && "sizeMedium",
-      ownerState.size === "large" && "sizeLarge",
-      ownerState.size === "extraLarge" && "sizeExtraLarge",
-      ownerState.rotationAngle ? "rotationAngle" : ""
-    ],
-    variantSkeleton: [
-      "variantSkeleton",
-      ownerState.size === "extraSmall" && "sizeExtraSmall",
-      ownerState.size === "small" && "sizeSmall",
-      ownerState.size === "medium" && "sizeMedium",
-      ownerState.size === "large" && "sizeLarge",
-      ownerState.size === "extraLarge" && "sizeExtraLarge"
-    ]
-  };
-  const composedClasses = unstable_composeClasses(slots, getIconClassesUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const getNameDataTestId = (KEY) => {
-  return `${ICON_PREFIX}-${KEY}`;
-};
-function Icon(props) {
-  const { src, size = "small", rotationAngle, className } = props;
-  const isDesktop = useResponsiveDesktop();
-  const ownerState = {
-    size: isDesktop ? size : "medium",
-    rotationAngle
-  };
-  const classes = useUtilityClasses$1(ownerState);
-  return /* @__PURE__ */ jsx(
-    IconRoot,
-    {
-      className: clsx(classes.root, className),
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
-      children: /* @__PURE__ */ jsx(
-        DivIcon,
-        {
-          className: classes.icon,
-          src,
-          rotationAngle,
-          ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("icon") } : {}
-        }
-      )
-    }
-  );
-}
-const SkeletonIconButton = (props) => {
-  const { classes } = props;
-  return /* @__PURE__ */ jsx(
-    Skeleton,
-    {
-      variant: "rectangular",
-      className: classes.skeleton,
-      "data-testid": "SkeletonIconButton"
-    }
-  );
-};
-const IconButtonRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LIconButton?.styleOverrides
-}));
-const iconButtonClasses = generateUtilityClasses(componentName$1, [
-  "root",
-  "skeleton",
-  "sizemSall",
-  "sizeMedium",
-  "variantPrimary",
-  "variantSecondary",
-  "variantLine",
-  "isFocus",
-  "isDisabled",
-  "togglePressed",
-  "toggleNotPressed"
-]);
-function getIconButtonUtilityClass(slot) {
-  return generateUtilityClass(componentName$1, slot);
-}
-const useUtilityClasses = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.size === "small" && "sizeSmall",
-      ownerState.size === "medium" && "sizeMedium",
-      ownerState.variant === "primary" && ownerState.isSkeleton !== true && "variantPrimary",
-      ownerState.variant === "secondary" && ownerState.isSkeleton !== true && "variantSecondary",
-      ownerState.variant === "line" && ownerState.isSkeleton !== true && "variantLine",
-      ownerState.isFocus && !ownerState.isDisabled && "isFocus",
-      ownerState.isDisabled && "isDisabled"
-    ],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getIconButtonUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const IconButton = (props) => {
-  const {
-    src,
-    tooltip,
-    size = "small",
-    dictionaryTooltipId,
-    rotationAngle,
-    variant = "line",
-    disabled,
-    className,
-    onClick,
-    ...other
-  } = props;
-  const { getLabel } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const finalTooltip = useMemo(() => {
-    if (disabled) {
-      return void 0;
-    }
-    if (tooltip && tooltip !== "") {
-      return tooltip;
-    }
-    if (dictionaryTooltipId && getLabel) {
-      return getLabel(dictionaryTooltipId);
-    }
-    return void 0;
-  }, [tooltip, dictionaryTooltipId, getLabel, disabled]);
-  const [isfocus] = useState(false);
-  const ownerState = {
-    variant,
-    size: isDesktop ? size : "medium",
-    isSkeleton,
-    isFocus: disabled ? false : isfocus,
-    isDisabled: disabled
-  };
-  const classes = useUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsx(IconButtonRoot, { className: clsx(classes.root, className), "data-testid": "IconButtonRoot", children: !isSkeleton ? /* @__PURE__ */ jsx(Fragment, { children: finalTooltip ? /* @__PURE__ */ jsx(Tooltip, { title: finalTooltip || "", children: /* @__PURE__ */ jsx(
-    IconButton$1,
-    {
-      ...other,
-      onClick,
-      disableRipple: true,
-      disabled,
-      children: /* @__PURE__ */ jsx(Icon, { src, size })
-    }
-  ) }) : /* @__PURE__ */ jsx(
-    IconButton$1,
-    {
-      ...other,
-      onClick,
-      disableRipple: true,
-      disabled,
-      children: /* @__PURE__ */ jsx(Icon, { src, size: isDesktop ? size : "medium", rotationAngle })
-    }
-  ) }) : /* @__PURE__ */ jsx(SkeletonIconButton, { classes }) });
-};
-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
-      }
-    }
-  );
-}
-const ArrowStyle = styled$1("span")(({ arrowType, theme }) => {
-  const SIZE = 12;
-  const POSITION = -(SIZE / 2);
-  const borderStyle = `solid 1px ${theme.vars.palette.state.borderDens}`;
-  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")]: {
-      width: SIZE,
-      height: SIZE,
-      content: "''",
-      position: "absolute",
-      display: "block",
-      transform: "rotate(-135deg)",
-      background: theme.vars.palette.background.default
-    },
-    ...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 }
-  };
-});
-const ToggleAbleIconButton = ({
-  onToggle,
-  isToggled,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      onClick: onToggle,
-      ...props,
-      className: clsx(
-        onToggle ? iconButtonClasses.togglePressed : iconButtonClasses.toggleNotPressed
-      )
-    }
-  );
-};
-const ToggleIconButton = withToggle(ToggleAbleIconButton);
-function CheckboxIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm0 2H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2z" }) });
-}
-function CheckboxCheckedIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.372 4.972a1.006 1.006 0 00-.928.388l-3.78 5-1.63-2.08a1.001 1.001 0 00-1.58 1.23l2.44 3.11a1 1 0 001.58-.01l4.57-6v-.03a1.006 1.006 0 00-.672-1.608z" }) });
-}
-function CheckboxIndeterminateIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.75 8h-6.5a.75.75 0 00-.75.75v.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-.5a.75.75 0 00-.75-.75z" }) });
-}
-const FeatureDivIconLabel = (props) => {
-  const {
-    label,
-    iconSrc,
-    iconScale: scale = 1,
-    iconRotate,
-    labelBkColor: bkColor = LABEL_BK_COLOR_DEFAULT,
-    labelColor: color = LABEL_COLOR_DEFAULT,
-    iconWidth = 24,
-    iconHeight = 24,
-    offsetLeftTop = [24, 0]
-  } = props;
-  let html = label ? `<div class="${mapClasses.featureLabel}" 
-                style="background-color:${bkColor}; color:${color};left:${offsetLeftTop[0]}px;top:${offsetLeftTop[1]}px;">${label}</div>` : "";
-  if (iconSrc) {
-    html = `<div class="${mapClasses.markerLayerIcon}" style="transform: rotate(${iconRotate}deg) scale(${scale}); transform-origin: center center;">
-                    <img src=${iconSrc}></img>
-                </div>` + html;
-  }
-  return L__default.divIcon({
-    className: clsx(mapClasses.markerLayerRoot, ""),
-    iconSize: [iconWidth, iconHeight],
-    html
-  });
-};
-const MarkerIconLabel = (props) => {
-  const {
-    position,
-    draggable = true,
-    iconSrc,
-    iconRotate,
-    iconScale: scale,
-    className,
-    label,
-    markerColor,
-    labelBkColor: bkColor,
-    labelColor: color,
-    iconWidth,
-    iconHeight,
-    offsetLeftTop,
-    ...properties
-  } = props;
-  const makerIcon = FeatureDivIconLabel({
-    iconSrc,
-    iconRotate,
-    iconScale: scale,
-    label,
-    iconWidth,
-    iconHeight,
-    labelBkColor: bkColor,
-    labelColor: color,
-    offsetLeftTop
-  });
-  return /* @__PURE__ */ jsx(
-    Marker,
-    {
-      position,
-      draggable,
-      riseOnHover: true,
-      icon: makerIcon,
-      ...properties
-    },
-    Math.random()
-  );
-};
-const ArrowIconRoot$1 = styled$1("div")(() => ({
-  display: "flex",
-  alignSelf: "center",
-  lineHeight: 0
-}));
-function ArrowIcon$1(props) {
-  const { openState } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { classes } = useSideBar();
-  return /* @__PURE__ */ jsx(
-    ArrowIconRoot$1,
-    {
-      className: classes.arrowIconRoot,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1("arrowIconRoot") } : {},
-      children: /* @__PURE__ */ jsx(
-        Icon,
-        {
-          src: `${host_static_assets}/${environment_assets}/frontend/components/sidebar/assets/icons/ChevronRight.svg`,
-          rotationAngle: openState ? 90 : 0
-        }
-      )
-    }
-  );
-}
-const ArrowIconRoot = styled$1("div")(() => ({
-  display: "flex",
-  alignSelf: "center",
-  lineHeight: 0
-}));
-function ArrowIcon(props) {
-  const { openState } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  return /* @__PURE__ */ jsx(ArrowIconRoot, { className: "", children: /* @__PURE__ */ jsx(
-    Icon,
-    {
-      src: `${host_static_assets}/${environment_assets}/frontend/components/sidebar/assets/icons/ChevronRight.svg`,
-      rotationAngle: openState ? 270 : 90,
-      size: "medium"
-    }
-  ) });
-}
-export {
-  ArrowIcon$1 as A,
-  BoxIcon as B,
-  CheckboxIcon as C,
-  Icon as I,
-  MarkerIconLabel as M,
-  ToggleIconButton as T,
-  IconButton as a,
-  ArrowStyle as b,
-  CheckboxCheckedIcon as c,
-  CheckboxIndeterminateIcon as d,
-  ArrowIcon as e
-};

package/components/LanguagePopover/index.e6fa2336.js

@@ -1,184 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { generateUtilityClasses, generateUtilityClass, Stack, MenuItem } from "@mui/material";
-import { a as ImageButton, I as Image } from "../Image/index.36a3d440.js";
-import { useLocales } from "@m4l/graphics";
-import { styled } from "@mui/material/styles";
-import { useEnvironment, useNetwork } from "@m4l/core";
-import { unstable_composeClasses } from "@mui/base";
-import { E as componentName, F as LANGUAGEPOPOVER_PREFIX, T as TEST_PROP_ID } from "../areas/constants.5387d83e.js";
-import { P as Popover, C as CircularProgress } from "../../vendor.a1ce6777.js";
-const LanguagePopoverRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LanguagePopover?.styleOverrides
-}));
-const LabelItem = styled("div")(({ 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"
-}));
-const ContainerImage = styled("div")(() => ({
-  display: "flex",
-  gap: "4px",
-  width: "16px",
-  height: "16px"
-}));
-generateUtilityClasses(
-  componentName,
-  [
-    "root",
-    "containerItems",
-    "containerProgress",
-    "labelItem",
-    "imageButton"
-  ]
-);
-function getM4LanguagePopoverClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses = () => {
-  const slots = {
-    root: ["root"],
-    containerItems: ["containerItems"],
-    containerProgress: ["containerProgress"],
-    labelItem: ["labelItem"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getM4LanguagePopoverClassesUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const getNameDataTestId = (KEY) => {
-  return `${LANGUAGEPOPOVER_PREFIX}-${KEY}`;
-};
-function LanguagePopover(props) {
-  const { testingProps } = props;
-  const { currentLocale, onChangeLocale } = useLocales();
-  const { domain_token } = useEnvironment();
-  const { networkOperation } = useNetwork();
-  const [open, setOpen] = useState(testingProps?.open || null);
-  const [loading, setLoading] = useState(testingProps?.loading || false);
-  const [allLocales, setAllLocales] = useState(
-    testingProps?.allLocales || []
-  );
-  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) {
-        !testingProps && setAllLocales(response.data);
-      }
-    }).finally(() => {
-      setLoading(false);
-    });
-    return function cleanUp() {
-      mounted = false;
-    };
-  }, [open]);
-  const classes = useUtilityClasses();
-  return /* @__PURE__ */ jsxs(
-    LanguagePopoverRoot,
-    {
-      className: classes.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
-      children: [
-        /* @__PURE__ */ jsx(
-          ImageButton,
-          {
-            className: classes.imageButton,
-            onClick: handleOpen,
-            sx: {
-              width: 28,
-              height: 28,
-              ...open && { bgcolor: "action.selected" }
-            },
-            src: currentLocale?.url_icon || "",
-            alt: currentLocale?.name,
-            width: "24px",
-            height: "24px",
-            ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("imageButton") } : {}
-          }
-        ),
-        /* @__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,
-              {
-                className: classes.containerItems,
-                ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("containerItems") } : {},
-                children: [
-                  allLocales.length === 0 && /* @__PURE__ */ jsx(
-                    ContainerProgress,
-                    {
-                      className: classes.containerProgress,
-                      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("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(ContainerImage, { children: /* @__PURE__ */ jsx(Image, { alt: option.name, src: option.url_icon, ratio: "1:1" }) }),
-                        /* @__PURE__ */ jsx(
-                          LabelItem,
-                          {
-                            className: classes.labelItem,
-                            ...process.env.NODE_ENV !== "production" ? {
-                              [TEST_PROP_ID]: getNameDataTestId("labelItem")
-                            } : {},
-                            children: option.name
-                          }
-                        )
-                      ]
-                    },
-                    option.lang || option.script || option.region
-                  )) })
-                ]
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-export {
-  LanguagePopover as L
-};