@m4l/components 0.2.35 → 1.0.0

package/components/HelperText/{index.7d2afdb3.js → index.be949cdf.js}

@@ -1,10 +1,9 @@
-import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
 import { jsx } from "react/jsx-runtime";
-import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
-const HelperTextRoot = styled("div")(({
-  theme
-}) => ({
+import { styled } from "@mui/material/styles";
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { T as Typography } from "../../vendor.a1ce6777.js";
+const HelperTextRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LErrorLabel?.styleOverrides
 }));
 const componentName = "M4LHelperText";
@@ -20,7 +19,13 @@ function getHelperTextUtilityClass(slot) {
 }
 const useUtilityClasses = (ownerSate) => {
   const slots = {
-    root: ["root", ownerSate.variant === "info" && "variantInfo", ownerSate.variant === "success" && "variantSuccess", ownerSate.variant === "warning" && "variantWarning", ownerSate.variant === "error" && "variantError"]
+    root: [
+      "root",
+      ownerSate.variant === "info" && "variantInfo",
+      ownerSate.variant === "success" && "variantSuccess",
+      ownerSate.variant === "warning" && "variantWarning",
+      ownerSate.variant === "error" && "variantError"
+    ]
   };
   const composedClasses = unstable_composeClasses(slots, getHelperTextUtilityClass, {});
   return {
@@ -28,25 +33,12 @@ const useUtilityClasses = (ownerSate) => {
   };
 };
 const HelperText = (props) => {
-  const {
-    message = "",
-    skeletonWidth,
-    skeletongHeight,
-    variant
-  } = props;
+  const { message = "", skeletonWidth, skeletongHeight, variant } = props;
   const ownerSate = {
     variant
   };
   const classes = useUtilityClasses(ownerSate);
-  return /* @__PURE__ */ jsx(HelperTextRoot, {
-    className: classes.root,
-    children: /* @__PURE__ */ jsx(Typography, {
-      variant: "body",
-      skeletonWidth,
-      skeletongHeight,
-      children: message
-    })
-  });
+  return /* @__PURE__ */ jsx(HelperTextRoot, { className: classes.root, children: /* @__PURE__ */ jsx(Typography, { variant: "body", skeletonWidth, skeletongHeight, children: message }) });
 };
 export {
   HelperText as H,

package/components/HelperText/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const HelperTextRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Icon/index.d5fed418.js

@@ -0,0 +1,420 @@
+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/Icon/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DivIconProps } from './types';
+export declare const IconRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DivIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & DivIconProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;