@m4l/components 0.1.40 → 0.1.41

package/components/modal/WindowConfirm.0b8a6818.js

@@ -0,0 +1,115 @@
+import { useEnvironment } from "@m4l/core";
+import "react";
+import { u as useModal } from "../../hooks/useModal/index.d14edee3.js";
+import "../areas/contexts/DynamicMFParmsContext/index.668bc2e2.js";
+import { A as Actions } from "../CommonActions/components/Actions/index.d3e1f36e.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.9230c57b.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.a0a341c7.js";
+import "react-hook-form";
+import { Typography } from "@mui/material";
+import "@mui/material/Button";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "../../react-draggable.84d6b038.js";
+import "../ModalDialog/index.a684827f.js";
+import "../Resizeable/index.c96c0f09.js";
+import "@m4l/graphics";
+import { styled } from "@mui/material/styles";
+import { I as Icon } from "../Icon/index.8d754623.js";
+import { b as getVariantColor } from "../../utils/index.899eb67b.js";
+import { W as WindowBase } from "./WindowBase.04439b8e.js";
+import "@mui/lab";
+const WrapperMessageIlustration = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%"
+}));
+const ModalContent = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  gridGap: theme.spacing(5),
+  flexGrow: 1,
+  [theme.breakpoints.up("sm")]: {
+    display: "grid",
+    flexDirection: "row",
+    gridTemplateColumns: "1fr 1fr"
+  }
+}));
+const IllustrationContainer = styled("div")(({
+  theme,
+  variant
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  "& > span": {
+    background: variant === "warning" ? theme.palette.warning.main : variant === "delete" ? theme.palette.error.main : variant === "info" ? theme.palette.info.main : "theme.palette.text.primary"
+  }
+}));
+const MessageContainer = styled("div")(() => ({
+  display: "flex",
+  alignItems: "center"
+}));
+const MessageIlustration = (props) => {
+  const {
+    variant = "info",
+    msg = "Are you sure you want to perform this action? Once complete, the information will be deleted."
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const illustrationWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_warning.svg`;
+  const illustrationError = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_danger.svg`;
+  const illustrationInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_info.svg`;
+  return /* @__PURE__ */ jsx(WrapperMessageIlustration, {
+    children: /* @__PURE__ */ jsxs(ModalContent, {
+      children: [/* @__PURE__ */ jsx(IllustrationContainer, {
+        variant,
+        children: /* @__PURE__ */ jsx(Icon, {
+          src: variant === "warning" ? illustrationWarning : variant === "delete" ? illustrationError : illustrationInfo,
+          size: "230px"
+        })
+      }), /* @__PURE__ */ jsx(MessageContainer, {
+        children: /* @__PURE__ */ jsx(Typography, {
+          variant: "body1",
+          children: msg
+        })
+      })]
+    })
+  });
+};
+const WindowConfirm = (props) => {
+  const {
+    variant,
+    title,
+    onClickCancel,
+    onClickIntro
+  } = props;
+  const {
+    closeModal
+  } = useModal();
+  const onCloseCancel = () => {
+    onClickCancel && onClickCancel();
+    closeModal();
+  };
+  return /* @__PURE__ */ jsxs(WindowBase, {
+    title,
+    variant,
+    onClickCancel,
+    children: [/* @__PURE__ */ jsx(MessageIlustration, {}), /* @__PURE__ */ jsxs(Actions, {
+      children: [/* @__PURE__ */ jsx(ActionCancel, {
+        onClick: onCloseCancel
+      }), " ", /* @__PURE__ */ jsx(ActionIntro, {
+        onClick: onClickIntro,
+        color: getVariantColor(variant)
+      })]
+    })]
+  });
+};
+export {
+  WindowConfirm as W
+};

package/components/modal/index.8387e90e.js

@@ -0,0 +1,18 @@
+import "@mui/material";
+import "../../react-draggable.84d6b038.js";
+import "react";
+import "../../contexts/ModalContext/index.b90eec94.js";
+import "../ModalDialog/index.a684827f.js";
+import "../Resizeable/index.c96c0f09.js";
+import "react/jsx-runtime";
+import "@m4l/graphics";
+import "@m4l/core";
+import "../areas/contexts/DynamicMFParmsContext/index.668bc2e2.js";
+import "../CommonActions/components/Actions/index.d3e1f36e.js";
+import "@mui/material/Button";
+import "react-hook-form";
+import "./WindowBase.04439b8e.js";
+import "../Icon/index.8d754623.js";
+import "@mui/material/styles";
+import "@mui/lab";
+import "./WindowConfirm.0b8a6818.js";

package/components/modal/index.d.ts

@@ -0,0 +1,4 @@
+export { ModalDialog } from './ModalDialog';
+export * from './ModalDialog/dictionary';
+export * from './WindowConfirm';
+export * from './WindowBase';

package/components/mui_extended/Accordion/components/AccordionLabel.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { AccordionLabelProps } from '../types';
+export declare const AccordionLabel: (props: AccordionLabelProps) => JSX.Element;

package/components/mui_extended/Accordion/index.a541c71c.js

@@ -0,0 +1,107 @@
+import { Skeleton, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from "@mui/material";
+import { I as IconButton } from "../IconButton/index.82f16572.js";
+import { useEnvironment, useModuleSkeleton } from "@m4l/core";
+import { I as Icon } from "../../Icon/index.8d754623.js";
+import { styled } from "@mui/material/styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+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.palette.background.header,
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  marginBottom: "0px"
+}));
+const WrapperAccordionLabel = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  gap: theme.spacing(2)
+}));
+const Label = styled("span")(({
+  theme
+}) => ({
+  ...theme.typography.subtitle2
+}));
+const AccordionLabel = (props) => {
+  const {
+    isSkeleton,
+    label,
+    SKTWidht,
+    SKTHeight,
+    labelIcon
+  } = props;
+  return /* @__PURE__ */ jsx("div", {
+    children: isSkeleton ? /* @__PURE__ */ jsxs(WrapperAccordionLabel, {
+      children: [labelIcon && /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: "16px",
+        height: "16px"
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: SKTWidht,
+        height: SKTHeight
+      })]
+    }) : /* @__PURE__ */ jsxs(WrapperAccordionLabel, {
+      children: [labelIcon && /* @__PURE__ */ jsx(Icon, {
+        src: labelIcon
+      }), /* @__PURE__ */ jsx(Label, {
+        children: label
+      })]
+    })
+  });
+};
+function Accordion(props) {
+  const {
+    label,
+    SKTWidht,
+    SKTHeight,
+    children,
+    accordionProps,
+    summaryProps,
+    labelIcon
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const isSkeleton = useModuleSkeleton();
+  return /* @__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`
+      }),
+      ...summaryProps,
+      children: /* @__PURE__ */ jsx(AccordionLabel, {
+        isSkeleton,
+        label,
+        SKTWidht,
+        SKTHeight,
+        labelIcon
+      })
+    }), /* @__PURE__ */ jsx(AccordionDetails, {
+      children
+    })]
+  });
+}
+export {
+  Accordion as A
+};

package/components/mui_extended/Accordion/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { AccordionProps } from './types';
+export declare function Accordion(props: AccordionProps): JSX.Element;

package/components/mui_extended/Accordion/styles.d.ts

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

package/components/mui_extended/Accordion/types.d.ts

@@ -0,0 +1,14 @@
+import { AccordionProps as MUIAccordionProps, AccordionSummaryProps } from '@mui/material';
+import type { ReactNode } from 'react';
+export declare type AccordionProps = {
+    label: string;
+    children: ReactNode;
+    accordionProps?: MUIAccordionProps;
+    summaryProps?: AccordionSummaryProps;
+    labelIcon?: string;
+    SKTWidht?: string | number;
+    SKTHeight?: string | number;
+};
+export interface AccordionLabelProps extends Pick<AccordionProps, 'label' | 'SKTWidht' | 'SKTHeight' | 'labelIcon'> {
+    isSkeleton: boolean;
+}

package/components/mui_extended/Avatar/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { AvatarProps } from './types';
+export declare const Avatar: import("react").ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default Avatar;

package/components/mui_extended/Avatar/index.fe06afd7.js

@@ -0,0 +1,51 @@
+import { forwardRef } from "react";
+import { useTheme } from "@mui/material/styles";
+import { Skeleton, Avatar as Avatar$1 } from "@mui/material";
+import { useModuleSkeleton } from "@m4l/core";
+import { jsx } from "react/jsx-runtime";
+const SkeletonAvatar = () => {
+  return /* @__PURE__ */ jsx(Skeleton, {
+    variant: "circular",
+    width: "32px",
+    height: "32px"
+  });
+};
+const Avatar = forwardRef(({
+  color = "default",
+  children,
+  sx,
+  ...other
+}, ref) => {
+  const theme = useTheme();
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonAvatar, {});
+  }
+  if (color === "default") {
+    return /* @__PURE__ */ jsx(Avatar$1, {
+      ref,
+      sx: {
+        cursor: "pointer",
+        ...sx
+      },
+      ...other,
+      children
+    });
+  }
+  return /* @__PURE__ */ jsx(Avatar$1, {
+    ref,
+    sx: {
+      fontWeight: theme.typography.fontWeightMedium,
+      color: theme.palette[color].contrastText,
+      backgroundColor: theme.palette[color].main,
+      cursor: "pointer",
+      ...sx
+    },
+    ...other,
+    children
+  });
+});
+Avatar.displayName = "Avatar";
+export {
+  Avatar as A
+};

package/components/mui_extended/Avatar/subcomponents/SkeletonAvatar/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SkeletonAvatar: () => JSX.Element;

package/components/mui_extended/Avatar/types.d.ts

@@ -0,0 +1,6 @@
+import { AvatarProps as MUIAvatarProps } from '@mui/material';
+declare type AvatarColor = 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
+export interface AvatarProps extends MUIAvatarProps {
+    color?: AvatarColor;
+}
+export {};

package/components/mui_extended/BoxIcon/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BoxIconProps } from './types';
+export declare function BoxIcon({ src, sx }: BoxIconProps): JSX.Element;

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

@@ -0,0 +1,22 @@
+import { Box } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+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/BoxIcon/types.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '@mui/material';
+export interface BoxIconProps extends BoxProps {
+    src: string;
+}

package/components/mui_extended/Breadcrumbs/components/LinkItem/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { LinkItemProps } from './types';
+export declare function LinkItem({ link }: LinkItemProps): JSX.Element;

package/components/mui_extended/Breadcrumbs/components/LinkItem/types.d.ts

@@ -0,0 +1,4 @@
+import { TLink } from '../../types';
+export declare type LinkItemProps = {
+    link: TLink;
+};

package/components/mui_extended/Breadcrumbs/index.5e37d903.js

@@ -0,0 +1,94 @@
+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";
+import { jsxs, jsx } from "react/jsx-runtime";
+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/Breadcrumbs/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { BreadcrumbsProps } from './types';
+export declare function Breadcrumbs(props: BreadcrumbsProps): JSX.Element;
+export default Breadcrumbs;

package/components/mui_extended/Breadcrumbs/types.d.ts

@@ -0,0 +1,12 @@
+import { BreadcrumbsProps as MUIBreadcrumbsProps } from '@mui/material';
+import { ReactElement } from 'react';
+export declare type TLink = {
+    href?: string;
+    name: string;
+    dictionaryField: string;
+    icon?: ReactElement;
+};
+export interface BreadcrumbsProps extends MUIBreadcrumbsProps {
+    links: TLink[];
+    activeLast?: boolean;
+}

package/components/mui_extended/Button/index.86a155a2.js

@@ -0,0 +1,101 @@
+import { useModuleSkeleton, useModuleDictionary } from "@m4l/core";
+import { Skeleton, styled, IconButton, 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 { 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
+  });
+};
+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, {
+      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,
+  ImageButton as I,
+  LoadingButton as L
+};

package/components/mui_extended/Button/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ExtendButtonProps } from './types';
+export declare const Button: (props: ExtendButtonProps) => JSX.Element;

package/components/mui_extended/Button/types.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from '@mui/material';
+export declare type ExtendButtonProps = ButtonProps;

package/components/mui_extended/CircularProgress/index.ad569afd.js

@@ -0,0 +1,10 @@
+import { CircularProgress as CircularProgress$1 } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+const CircularProgress = (props) => {
+  return /* @__PURE__ */ jsx(CircularProgress$1, {
+    ...props
+  });
+};
+export {
+  CircularProgress as C
+};

package/components/mui_extended/CircularProgress/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CircularProgressProps } from '@mui/material';
+export declare const CircularProgress: (props: CircularProgressProps) => JSX.Element;