@m4l/components 0.2.35 → 0.2.36

package/components/modal/WindowBase.2414cd02.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { m as modalUtilityClasses } from "./index.81eb6def.js";
+import { useEnvironment } from "@m4l/core";
+import clsx from "clsx";
+import { I as IconButton } from "../mui_extended/IconButton/index.b0ee4965.js";
+import { I as Icon } from "../Icon/index.ee7b85c9.js";
+import { u as useModal } from "../../hooks/useModal/index.30674bb7.js";
+const Header = (props) => {
+  const { title, onClickCancel, urlIcon, classes } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const handlerClick = (e) => {
+    e.stopPropagation();
+    onClickCancel && onClickCancel();
+  };
+  return /* @__PURE__ */ jsxs("div", { id: "Header", className: clsx(classes.headerContainer, "m4l_draggable_handle"), children: [
+    urlIcon && /* @__PURE__ */ jsx("div", { className: classes.iconHeader, children: /* @__PURE__ */ jsx(Icon, { src: urlIcon, size: "medium" }) }),
+    /* @__PURE__ */ jsx("div", { className: classes.titleHeader, children: title }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className: classes.iconCloseHeader,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/close.svg`,
+        onClick: (e) => handlerClick(e),
+        "aria-label": "click"
+      }
+    )
+  ] });
+};
+const WindowBase = (props) => {
+  const { children, onClickCancel, ...other } = props;
+  const { closeModal, variant } = useModal();
+  const onCloseCancel = () => {
+    onClickCancel && onClickCancel();
+    closeModal();
+  };
+  const classes = modalUtilityClasses({ variant });
+  return /* @__PURE__ */ jsxs("div", { className: classes.windowBaseRoot, children: [
+    /* @__PURE__ */ jsx(Header, { ...other, onClickCancel: onCloseCancel, classes }),
+    /* @__PURE__ */ jsx("div", { className: classes.windowContent, children })
+  ] });
+};
+export {
+  WindowBase as W
+};

package/components/modal/WindowConfirm/types.d.ts

@@ -21,12 +21,12 @@ export interface WindowConfirmProps {
      */
     titleAccept?: string;
     /**
-    * Mensaje de la ventana de confirmación.
-    */
+     * Mensaje de la ventana de confirmación.
+     */
     msg: string;
     /**
-    * Función de clic en el botón de introducción.
-    */
+     * Función de clic en el botón de introducción.
+     */
     onClickIntro?: () => void;
     /**
      * Función de clic en el botón de cancelar.

package/components/modal/WindowConfirm.48140481.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { A as Actions } from "../CommonActions/components/Actions/index.273645af.js";
+import { Typography } from "@mui/material";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { u as useModal } from "../../hooks/useModal/index.30674bb7.js";
+import { I as Image } from "../Image/index.8cc036b1.js";
+import { m as modalUtilityClasses } from "./index.81eb6def.js";
+import { W as WindowBase } from "./WindowBase.2414cd02.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.46f636e9.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.7406bd47.js";
+const dictionary = {
+  MESSAGE: "common_actions.confirm_quit_msg"
+};
+const MessageIlustration = (props) => {
+  const { getLabel } = useModuleDictionary();
+  const { variant } = useModal();
+  const {
+    msg = getLabel(dictionary.MESSAGE),
+    classes,
+    title
+  } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const illustrationWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustrator_confirm_warning.svg`;
+  const illustrationDanger = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustrator_confirm_danger.svg`;
+  const illustrationSuccess = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustrator_confirm_success.svg`;
+  const illustrationInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustrator_confirm_info.svg`;
+  return /* @__PURE__ */ jsx("div", { className: classes.containerMassageIlustration, children: /* @__PURE__ */ jsxs("div", { className: classes.modalContent, children: [
+    /* @__PURE__ */ jsx("div", { className: classes.illustrationContainer, children: /* @__PURE__ */ jsx(
+      Image,
+      {
+        className: classes.illustration,
+        src: variant === "warning" ? illustrationWarning : variant === "delete" ? illustrationDanger : variant === "success" ? illustrationSuccess : illustrationInfo
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle", children: title }) }),
+    /* @__PURE__ */ jsx("div", { className: classes.messageContainer, children: /* @__PURE__ */ jsx(Typography, { variant: "body", children: msg }) })
+  ] }) });
+};
+const WindowConfirm = (props) => {
+  const { variant, title, onClickCancel, onClickIntro, msg } = props;
+  const { closeModal } = useModal();
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const onCloseCancel = () => {
+    onClickCancel && onClickCancel();
+    closeModal();
+  };
+  const classes = modalUtilityClasses({ variant });
+  return /* @__PURE__ */ jsxs(
+    WindowBase,
+    {
+      title: getLabel("modal_dialog.label_window_confirm"),
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/window_confirm.svg`,
+      children: [
+        /* @__PURE__ */ jsx(MessageIlustration, { classes, msg, title }),
+        /* @__PURE__ */ jsxs(Actions, { children: [
+          /* @__PURE__ */ jsx(ActionCancel, { onClick: onCloseCancel }),
+          /* @__PURE__ */ jsx(ActionIntro, { onClick: onClickIntro })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  WindowConfirm as W
+};

package/components/modal/classes/types.d.ts

@@ -1,4 +1,4 @@
-import { modalUtilityClasses } from ".";
+import { modalUtilityClasses } from '.';
 export interface ModalClassesType {
     root: string;
     windowBaseRoot: string;

package/components/modal/{index.61389369.js → index.81eb6def.js}

@@ -27,7 +27,13 @@ function getModalUtilityClass(slot) {
 }
 const modalUtilityClasses = (ownerState) => {
   const slots = {
-    root: ["root", ownerState?.variant === "delete" && "variantDelete", ownerState.variant === "warning" && "variantWarning", ownerState.variant === "info" && "variantInfo", ownerState.variant === "success" && "variantSuccess"],
+    root: [
+      "root",
+      ownerState?.variant === "delete" && "variantDelete",
+      ownerState.variant === "warning" && "variantWarning",
+      ownerState.variant === "info" && "variantInfo",
+      ownerState.variant === "success" && "variantSuccess"
+    ],
     windowBaseRoot: ["windowBaseRoot"],
     containerWindow: ["containerWindow"],
     headerContainer: ["headerContainer"],

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

@@ -1,4 +1,4 @@
-import { accordionUtilityClasses } from ".";
+import { accordionUtilityClasses } from '.';
 export interface AccordionClassesType {
     root: string;
     endIcon: string;

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

@@ -0,0 +1,142 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { generateUtilityClasses, generateUtilityClass, styled, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from "@mui/material";
+import { I as IconButton } from "../IconButton/index.b0ee4965.js";
+import { useEnvironment } from "@m4l/core";
+import { unstable_composeClasses } from "@mui/base";
+import clsx from "clsx";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { g as getNameDataTestId } from "../../../test/getNameDataTestId.0faeade8.js";
+import { I as Icon } from "../../Icon/index.ee7b85c9.js";
+import { T as Typography } from "../Typography/index.a1e774a2.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.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/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").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperAccordionLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AccordionRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,4 +1,4 @@
-import { useAvatarUtilityClasses } from "./index";
+import { useAvatarUtilityClasses } from './index';
 export interface AvatarClassesType {
     root: string;
     skeleton: string;

package/components/mui_extended/Avatar/{index.75e6ed57.js → index.fb9ad158.js}

@@ -1,8 +1,8 @@
+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 "../../../test/constants_no_mock.86c553a9.js";
-import { jsx } from "react/jsx-runtime";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
 const AVATAR_PREFIX = "M4LAvatar";
@@ -10,18 +10,17 @@ 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 { 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, [
@@ -44,27 +43,20 @@ const useAvatarUtilityClasses = () => {
 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
-    })
-  });
-});
+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/Avatar/styles.d.ts

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

package/components/mui_extended/Avatar/tests/utils.d.ts

@@ -1,2 +1,2 @@
-import { AvatarClassesKey } from "../classes/types";
+import { AvatarClassesKey } from '../classes/types';
 export declare const getNameAvatarDataTestId: (KEY: AvatarClassesKey) => string;

package/components/mui_extended/Badge/Badge.d.ts

@@ -1,2 +1,2 @@
-import { BadgeProps } from "./types";
+import { BadgeProps } from './types';
 export declare const Badge: (props: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/Badge/classes/types.d.ts

@@ -1,4 +1,4 @@
-import { badgeUtilityClasses } from ".";
+import { badgeUtilityClasses } from '.';
 export interface BabgeClassesType {
     root: string;
 }

package/components/mui_extended/Badge/{index.09f5aee5.js → index.2a3aef2c.js}

@@ -1,7 +1,7 @@
+import { jsx } from "react/jsx-runtime";
 import { generateUtilityClasses, styled, Badge as Badge$1 } from "@mui/material";
 import "@mui/base";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { jsx } from "react/jsx-runtime";
 const componentName = "M4LBadge";
 const badgeClasses = generateUtilityClasses(componentName, [
   "root"
@@ -15,21 +15,15 @@ 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
-    })
-  });
+  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/Badge/styles.d.ts

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

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

@@ -1,4 +1,4 @@
-import { BadgeProps as MUIBadgeProps } from "@mui/material";
+import { BadgeProps as MUIBadgeProps } from '@mui/material';
 export interface BadgeProps extends MUIBadgeProps {
     dataTestId?: string;
 }

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/classes/types.d.ts

@@ -1,9 +1,9 @@
-import { useUtilityClasses } from ".";
+import { useUtilityClasses } from '.';
 export interface ButtonClassesType {
     root: string;
     skeleton: string;
     sizeSmall: string;
-    sizeMedium: String;
+    sizeMedium: string;
     variantOutlined: string;
     variantContained: string;
     variantText: string;