componentes-sinco 1.0.36-rc.0 → 1.0.36-rc.2

package/dist/index.cjs

@@ -386,14 +386,6 @@ var SCModal = ({
   const handleToggle = (0, import_react4.useCallback)(() => setModalOpen((prev) => !prev), [setModalOpen]);
   const handleClose = (0, import_react4.useCallback)(() => setModalOpen(false), [setModalOpen]);
   const Icon = (0, import_react4.useMemo)(() => getIconComponent(buttonModal == null ? void 0 : buttonModal.icon), [buttonModal == null ? void 0 : buttonModal.icon]);
-  const prevAction = (0, import_react4.useMemo)(
-    () => action != null ? action : [
-      { text: "Cancelar", fn: handleClose },
-      { text: "Consultar", fn: () => {
-      } }
-    ],
-    [action, handleClose]
-  );
   const { icon, defaultDescription } = modalStateConfig[state];
   return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, buttonModal && /* @__PURE__ */ import_react4.default.createElement(
     import_material2.Button,
@@ -2298,6 +2290,7 @@ var DrawerActions = ({ actions, anchor }) => {
       padding: "8px 12px",
       height: "42px",
       alignItems: "center",
+      flexWrap: "nowrap",
       justifyContent: actions.length > 1 ? "space-between" : anchor !== "right" ? "flex-end" : "flex-start",
       flexDirection: anchor !== "right" ? "row-reverse" : "row"
     },
@@ -2309,7 +2302,8 @@ var DrawerActions = ({ actions, anchor }) => {
         color: "primary",
         onClick: btn.fn,
         disabled: btn.disabled || false,
-        size: "small"
+        size: "small",
+        fullWidth: anchor === "bottom" ? true : false
       },
       btn.text
     ))
@@ -2324,14 +2318,16 @@ var import_Close = __toESM(require("@mui/icons-material/Close"), 1);
 var DrawerHeader = ({
   title,
   colorTitle,
-  onClose
+  onClose,
+  anchor
 }) => {
   return /* @__PURE__ */ import_react19.default.createElement(
     import_Grid3.default,
     {
       container: true,
       sx: {
-        backgroundColor: "primary.50",
+        marginTop: anchor == "bottom" ? "16px" : "0px",
+        backgroundColor: anchor == "bottom" ? "white" : "primary.50",
         alignItems: "center",
         height: "42px",
         textAlign: "left",
@@ -2479,7 +2475,8 @@ function SCDrawer({
       {
         title,
         colorTitle,
-        onClose: handleDrawerClose
+        onClose: handleDrawerClose,
+        anchor
       }
     ), /* @__PURE__ */ import_react20.default.createElement(DrawerContent, { arrayElements }), /* @__PURE__ */ import_react20.default.createElement(DrawerActions, { actions: drawerActions, anchor }))
   ));
@@ -3291,6 +3288,8 @@ var EmptyState = ({
 var import_react33 = __toESM(require("react"), 1);
 var import_material20 = require("@mui/material");
 var import_Grid6 = __toESM(require("@mui/material/Grid"), 1);
+var import_ToggleButton = __toESM(require("@mui/material/ToggleButton"), 1);
+var import_ToggleButtonGroup = __toESM(require("@mui/material/ToggleButtonGroup"), 1);
 var import_Close2 = __toESM(require("@mui/icons-material/Close"), 1);
 var Muicon5 = __toESM(require("@mui/icons-material"), 1);
 var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, disableClose, dividers, widthContent, heightContent, background, typeView = "web", setShow, show }) => {
@@ -3367,7 +3366,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         }
       }
     },
-    title && /* @__PURE__ */ import_react33.default.createElement(import_material20.DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, "data-testid": "dialog-icon-title" }, /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { container: true, size: 12, sx: { justifyContent: "space-between", flexWrap: "nowrap" } }, /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { container: true, size: 11, sx: { alignItems: "center" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ import_react33.default.createElement(import_material20.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react33.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react33.default.createElement(import_material20.SvgIcon, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, null, /* @__PURE__ */ import_react33.default.createElement(import_material20.Typography, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), /* @__PURE__ */ import_react33.default.createElement(import_material20.Typography, { color: "text.secondary", variant: "body2", gutterBottom: true }, subtitle ? subtitle : ""))), disableClose != true ? /* @__PURE__ */ import_react33.default.createElement(import_material20.IconButton, { "data-testid": "close-dialog-button", onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ import_react33.default.createElement(import_Close2.default, { color: "action" })) : "")),
+    title && /* @__PURE__ */ import_react33.default.createElement(import_material20.DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, "data-testid": "dialog-icon-title" }, /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { container: true, size: 12, sx: { justifyContent: "space-between", flexWrap: "nowrap" } }, /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { container: true, size: 11, sx: { alignItems: "center" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ import_react33.default.createElement(import_material20.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react33.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react33.default.createElement(import_material20.SvgIcon, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { sx: { width: "98%" } }, /* @__PURE__ */ import_react33.default.createElement(import_material20.Typography, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), subtitle ? subtitle : "")), disableClose != true ? /* @__PURE__ */ import_react33.default.createElement(import_material20.IconButton, { "data-testid": "close-dialog-button", onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ import_react33.default.createElement(import_Close2.default, { color: "action" })) : "")),
     /* @__PURE__ */ import_react33.default.createElement(
       import_material20.DialogContent,
       {
@@ -3391,7 +3390,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
               case "extra-large":
                 return { xs: "84vw", md: "93vw" };
               default:
-                return { xs: "64vw", md: "56vw" };
+                return { xs: "100% !important", md: "100% !important" };
             }
           })
         }
@@ -3406,7 +3405,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         }
       ) : content.component
     ),
-    dialogActions != void 0 && dialogActions != false ? Array.isArray(dialogActions) && (dialogActions == null ? void 0 : dialogActions.length) > 0 ? /* @__PURE__ */ import_react33.default.createElement(import_material20.DialogActions, { sx: { gap: 1, m: 0, padding: "12px 16px 12px 16px", justifyContent: dialogActions.length >= 3 ? "space-between" : "flex-end" } }, dialogActions.length >= 3 ? /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(
+    dialogActions != void 0 && dialogActions != false ? Array.isArray(dialogActions) && (dialogActions == null ? void 0 : dialogActions.length) > 0 ? /* @__PURE__ */ import_react33.default.createElement(import_material20.DialogActions, { sx: { gap: 1, m: 0, padding: "12px 16px 12px 16px", justifyContent: dialogActions.length >= 3 ? "space-between" : "flex-end" } }, typeView !== "mobile" ? /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, dialogActions.length >= 3 ? /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(
       import_material20.Button,
       {
         variant: "text",
@@ -3445,7 +3444,10 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         },
         boton.text
       );
-    })) : "" : ""
+    })) : /* @__PURE__ */ import_react33.default.createElement(import_material20.Box, { sx: { width: "100%", display: "flex", flexDirection: "row", justifyContent: "center" } }, /* @__PURE__ */ import_react33.default.createElement(import_ToggleButtonGroup.default, { size: "large", fullWidth: true }, dialogActions.map((boton, index) => {
+      var _a;
+      return /* @__PURE__ */ import_react33.default.createElement(import_ToggleButton.default, { fullWidth: boton.text ? true : false, size: "medium", value: "text", onClick: boton.fn }, (_a = boton.text) != null ? _a : /* @__PURE__ */ import_react33.default.createElement(import_material20.SvgIcon, { fontSize: "small", component: boton.icon }));
+    })))) : "" : ""
   )));
 };
 
@@ -3453,42 +3455,48 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
 var import_react34 = __toESM(require("react"), 1);
 var import_material21 = require("@mui/material");
 var import_Grid7 = __toESM(require("@mui/material/Grid"), 1);
+var import_Avatar = __toESM(require("@mui/material/Avatar"), 1);
 var Muicon6 = __toESM(require("@mui/icons-material"), 1);
-var SCListContent = ({ options }) => {
+var SCListContent = ({ options, iconLeftType = "Icon", iconRightType = "Icon" }) => {
   const [selectedIndex, setSelectedIndex] = import_react34.default.useState("1");
   const [value, setValue] = import_react34.default.useState("1");
   options.map(function(option, index, array) {
     if (option == null ? void 0 : option.iconLeft) {
       if ((option == null ? void 0 : option.iconLeft.type) == void 0) {
-        option.iconLeft = Muicon6[option == null ? void 0 : option.iconLeft];
-      } else {
-        option;
+        const found = Muicon6[option == null ? void 0 : option.iconLeft];
+        if (found != void 0) {
+          option.iconLeft = Muicon6[option == null ? void 0 : option.iconLeft];
+        }
       }
     }
     if (option == null ? void 0 : option.iconRight) {
       if ((option == null ? void 0 : option.iconRight.type) == void 0) {
-        option.iconRight = Muicon6[option == null ? void 0 : option.iconRight];
-      } else {
-        option;
+        const found = Muicon6[option == null ? void 0 : option.iconRight];
+        if (found != void 0) {
+          option.iconRight = Muicon6[option == null ? void 0 : option.iconRight];
+        }
       }
     }
   });
-  return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(import_material21.List, { sx: { width: "100%", maxWidth: 360, bgcolor: "background.paper", padding: "0px !important" } }, options.map((option, index) => /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, { key: index }, /* @__PURE__ */ import_react34.default.createElement(
-    import_material21.ListItemButton,
-    {
-      disabled: option.disable,
-      onClick: option.fn
-    },
-    option.iconLeft ? /* @__PURE__ */ import_react34.default.createElement(import_material21.ListItemIcon, { sx: { minWidth: "30px !important" } }, /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", color: option.iconLeftColor || "action", component: option.iconLeft })) : "",
-    /* @__PURE__ */ import_react34.default.createElement(
-      import_material21.ListItemText,
+  return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(import_material21.List, { sx: { width: "100%", maxWidth: 360, bgcolor: "background.paper", padding: "0px !important" } }, options.map((option, index) => {
+    var _a, _b;
+    return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, { key: index }, /* @__PURE__ */ import_react34.default.createElement(
+      import_material21.ListItemButton,
       {
-        primary: option.title,
-        secondary: /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { gap: 0.5 }, /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { container: true, gap: 0.5 }, option.subtitle), /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { container: true, gap: 0.5 }, option.description))
-      }
-    ),
-    option.iconRight ? /* @__PURE__ */ import_react34.default.createElement(import_material21.ListItemIcon, { sx: { minWidth: "0px !important" } }, /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", color: option.iconRightColor || "action", component: option.iconRight })) : ""
-  ), option.divider == true ? /* @__PURE__ */ import_react34.default.createElement(import_material21.Divider, null) : ""))));
+        disabled: option.disable,
+        onClick: option.fn
+      },
+      option.iconLeft ? iconLeftType == "Icon" ? /* @__PURE__ */ import_react34.default.createElement(import_material21.ListItemIcon, { sx: { minWidth: "0px !important", marginRight: "8px" } }, /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", color: option.iconLeftColor || "action", component: option.iconLeft })) : /* @__PURE__ */ import_react34.default.createElement(import_Avatar.default, null, ((_a = option.iconLeft) == null ? void 0 : _a.type) != void 0 ? /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", color: option.iconLeftColor || "action", component: option.iconLeft }) : option.iconLeft) : "",
+      /* @__PURE__ */ import_react34.default.createElement(
+        import_material21.ListItemText,
+        {
+          primary: option.title,
+          secondary: /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { gap: 0.5 }, /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { container: true, gap: 0.5 }, option.subtitle), /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { container: true, gap: 0.5 }, option.description))
+        }
+      ),
+      option.iconRight ? iconRightType == "Icon" ? /* @__PURE__ */ import_react34.default.createElement(import_material21.ListItemIcon, { sx: { minWidth: "0px !important", marginRight: "8px" } }, /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", color: option.iconRightColor || "action", component: option.iconRight })) : /* @__PURE__ */ import_react34.default.createElement(import_Avatar.default, null, ((_b = option.iconRight) == null ? void 0 : _b.type) != void 0 ? /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", color: option.iconRightColor || "action", component: option.iconRight }) : option.iconRight) : ""
+    ), option.divider == true ? /* @__PURE__ */ import_react34.default.createElement(import_material21.Divider, null) : "");
+  })));
 };
 
 // src/Components/SCMenu.tsx
@@ -4833,10 +4841,7 @@ var SCActivityCalendar = ({
         backgroundColor: (0, import_date_fns2.isSameDay)(dia, fecha) ? "#2063a0" : "transparent",
         cursor: "pointer",
         borderRadius: "50%",
-        //border: '1px solid lightgray',
         position: "relative"
-        //width: '36px',
-        //height: '36px',
       }
     },
     /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { sx: { fontSize: "12px !important", color: (0, import_date_fns2.isSameDay)(dia, fecha) ? "white" : "#101840DE" } }, (0, import_date_fns2.format)(dia, "d"))
@@ -4850,7 +4855,7 @@ var SCActivityCalendar = ({
       sx: { fontSize: "12px !important", height: "300px !important", background: background ? background : "white", "& .MuiDayCalendar-header": { justifyContent: "space-between" }, "& .MuiDayCalendar-weekContainer": { justifyContent: "space-between" }, "& .MuiPickersCalendarHeader-root": { paddingLeft: "0px", paddingRight: "0px", color: "#10184099" }, "& .MuiPickersDay-root": { fontSize: "12px !important" }, "& .MuiDayCalendar-weekDayLabel": { fontSize: "12px !important" } },
       onChange: (newValue) => setFecha(newValue)
     }
-  ), /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react50.default.createElement(import_material34.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react50.default.createElement(import_KeyboardDoubleArrowUp2.default, { color: "action" }))))), /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { width: "100%", height: openCalendar ? "calc(91% - 300px)" : "calc(91% - 100px)", background: "white", display: "flex", flexDirection: "column", overflowY: "auto", gap: "8px", scrollSnapType: "x mandatory", paddingBottom: "10px" } }, diasSemana.map((day, dayIndex) => /* @__PURE__ */ import_react50.default.createElement(
+  ), /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react50.default.createElement(import_material34.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react50.default.createElement(import_KeyboardDoubleArrowUp2.default, { color: "action" }))))), /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { padding: "0px 16px", width: "100%", height: openCalendar ? "calc(91% - 300px)" : "calc(91% - 100px)", background: "white", display: "flex", flexDirection: "column", overflowY: "auto", gap: "8px", scrollSnapType: "x mandatory", paddingBottom: "10px" } }, diasSemana.map((day, dayIndex) => /* @__PURE__ */ import_react50.default.createElement(
     import_material34.Box,
     {
       key: dayIndex
@@ -4876,7 +4881,7 @@ var SCActivityCalendar = ({
           {
             key: idx,
             options: [{
-              title: event2.description,
+              title: event2.activityDescription,
               subtitle: /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, configRangeHour && new Date(event2.date.replace("00:00:00", event2.startTime)).getHours() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[0])).getHours() && new Date(event2.date.replace("00:00:00", event2.finalTime)).getHours() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[1])).getHours() && new Date(event2.date.replace("00:00:00", event2.startTime)).getMinutes() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[0])).getMinutes() && new Date(event2.date.replace("00:00:00", event2.finalTime)).getMinutes() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[1])).getMinutes() ? /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, "Todo el dia"), /* @__PURE__ */ import_react50.default.createElement(import_LightModeOutlined.default, { fontSize: "small" })) : /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, new Date(event2.date.replace("00:00:00", event2.startTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })), /* @__PURE__ */ import_react50.default.createElement(import_ArrowForward.default, { fontSize: "small" }), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, new Date(event2.date.replace("00:00:00", event2.finalTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })))),
               iconLeftColor: event2.state === "Finalizada" ? "success" : "action",
               iconLeft: event2.state === "Finalizada" ? "CheckCircle" : event2.state === "Aplazada" ? "EventBusyOutlined" : event2.state === "En progreso" ? "PendingOutlined" : "RadioButtonUnchecked",