componentes-sinco 1.1.13 → 1.1.15-rc.2

package/dist/index.cjs

@@ -2338,7 +2338,8 @@ var DrawerHeader = ({
   title,
   colorTitle,
   onClose,
-  anchor
+  anchor,
+  filterSideCard
 }) => {
   return /* @__PURE__ */ import_react19.default.createElement(
     import_Grid3.default,
@@ -2356,7 +2357,7 @@ var DrawerHeader = ({
       }
     },
     /* @__PURE__ */ import_react19.default.createElement(import_material13.Typography, { variant: "h6", color: colorTitle || "text.primary" }, title != null ? title : "Personaliza tu b\xFAsqueda"),
-    /* @__PURE__ */ import_react19.default.createElement(import_material13.IconButton, { onClick: onClose }, /* @__PURE__ */ import_react19.default.createElement(import_Close.default, { "data-testid": "test-button-close", sx: { color: "text.primary" } }))
+    filterSideCard ? /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, filterSideCard) : /* @__PURE__ */ import_react19.default.createElement(import_material13.IconButton, { onClick: onClose }, /* @__PURE__ */ import_react19.default.createElement(import_Close.default, { "data-testid": "test-button-close", sx: { color: "text.primary" } }))
   );
 };
 
@@ -2372,7 +2373,8 @@ function SCDrawer({
   open,
   setOpen,
   chipFilters,
-  heightDrawer = 456
+  heightDrawer = 456,
+  filterSideCard
 }) {
   const drawerBleeding = heightDrawer;
   const { drawerOpen, handleDrawerClose, toggleDrawer } = useDrawerState({ open, setOpen });
@@ -2441,7 +2443,7 @@ function SCDrawer({
     import_material14.Drawer,
     {
       open: drawerOpen,
-      onClose: toggleDrawer(false),
+      onClose: filterSideCard ? void 0 : toggleDrawer(false),
       anchor: anchor != null ? anchor : "left",
       sx: {
         "& .MuiDrawer-paper": {
@@ -2456,7 +2458,9 @@ function SCDrawer({
       {
         title,
         colorTitle,
-        onClose: handleDrawerClose
+        onClose: handleDrawerClose,
+        anchor,
+        filterSideCard
       }
     ), /* @__PURE__ */ import_react20.default.createElement(DrawerContent, { arrayElements }), /* @__PURE__ */ import_react20.default.createElement(DrawerActions, { actions: drawerActions, anchor }))
   ) : /* @__PURE__ */ import_react20.default.createElement(
@@ -2885,7 +2889,7 @@ var import_x_license2 = require("@mui/x-license");
 var import_KeyboardArrowDown = __toESM(require("@mui/icons-material/KeyboardArrowDown"), 1);
 var import_KeyboardArrowUp = __toESM(require("@mui/icons-material/KeyboardArrowUp"), 1);
 var import_styles = require("@mui/material/styles");
-function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, checkboxSelection, width, maxHeight, density }) {
+function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, checkboxSelection, width, maxHeight, disableColumnMenu, disableColumnSorting }) {
   import_x_license2.LicenseInfo.setLicenseKey(
     "77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
   );
@@ -3036,11 +3040,12 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, c
       }
     }
   };
+  let densityC = "compact";
   let validationTreeData = groupColumns ? true : false;
   let validationCheckboxSelection = checkboxSelection || false;
-  let styleDensity = density || "compact";
+  let styleDensity = densityC || "compact";
   let styleTopContainerHeight = styleDensity === "compact" ? "26px" : styleDensity === "standard" ? "38px" : styleDensity === "comfortable" ? "60px" : "27px";
-  let styleRowHeight = density == "compact" ? 32 : density == "standard" ? 28 : density == "comfortable" ? 36 : 32;
+  let styleRowHeight = densityC == "compact" ? 32 : densityC == "standard" ? 28 : densityC == "comfortable" ? 36 : 32;
   let rows = rowsTable ? rowsTable : validationTreeData != false ? parseInt(data.length.toString()) : data.length < 10 ? parseInt(data.length.toString()) : 10;
   let validationGroupingColDef = groupingColDefs || {};
   const [groupDataLenght, setGroupDataLengh] = (0, import_react27.useState)(0);
@@ -3114,6 +3119,24 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, c
       flex: 1
     });
   });
+  const columnVisibilityModel = {};
+  processedColumns.forEach((col) => {
+    if (col.hide === true) {
+      columnVisibilityModel[col.field] = false;
+    }
+  });
+  console.log("columnVisibilityModel:", columnVisibilityModel);
+  const initialState = {
+    pagination: { paginationModel: { pageSize: rows } }
+  };
+  if (Object.keys(columnVisibilityModel).length > 0) {
+    initialState.columns = { columnVisibilityModel };
+  }
+  (0, import_react27.useEffect)(() => {
+    if (apiRef.current && Object.keys(columnVisibilityModel).length > 0) {
+      apiRef.current.setColumnVisibilityModel(columnVisibilityModel);
+    }
+  }, [columnVisibilityModel, apiRef]);
   return /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, data && /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, /* @__PURE__ */ import_react27.default.createElement("div", { style: { width: width || "100%", maxHeight: maxHeight ? `${maxHeight}px` : "none" } }, /* @__PURE__ */ import_react27.default.createElement(
     import_x_data_grid_pro.DataGridPro,
     {
@@ -3131,6 +3154,8 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, c
         pagination: { paginationModel: { pageSize: rows } }
       },
       scrollbarSize: 0,
+      disableColumnMenu: disableColumnMenu ? disableColumnMenu : false,
+      disableColumnSorting: disableColumnSorting ? disableColumnSorting : false,
       checkboxSelection: validationCheckboxSelection,
       rowSelectionModel: selectionModel,
       onRowSelectionModelChange: (newSelection) => handleSelectionChange(newSelection),
@@ -3259,7 +3284,7 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, c
   ))));
 }
 var SCDataGrid = import_react27.default.memo(SCDataGridInitial, (prevProps, nextProps) => {
-  const isEqual = prevProps.rowsTable === nextProps.rowsTable && prevProps.checkboxSelection === nextProps.checkboxSelection && prevProps.width === nextProps.width && prevProps.maxHeight === nextProps.maxHeight && prevProps.density === nextProps.density;
+  const isEqual = prevProps.rowsTable === nextProps.rowsTable && prevProps.checkboxSelection === nextProps.checkboxSelection && prevProps.width === nextProps.width && prevProps.maxHeight === nextProps.maxHeight;
   return isEqual;
 });
 
@@ -3526,7 +3551,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
       );
     })) : /* @__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, { disabled: boton.disabled || false, 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 }));
+      return /* @__PURE__ */ import_react33.default.createElement(import_ToggleButton.default, { sx: { color: "primary.main" }, disabled: boton.disabled || false, 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 }));
     })))) : "" : ""
   )));
 };
@@ -4661,6 +4686,7 @@ var SCTime = ({
   const [anchorEl, setAnchorEl] = (0, import_react48.useState)(null);
   const [isOpenPopover, setIsOpenPopover] = (0, import_react48.useState)(false);
   const [popoverPlacement, setPopoverPlacement] = (0, import_react48.useState)("bottom");
+  const [popoverWidth, setPopoverWidth] = (0, import_react48.useState)(void 0);
   const detectPlacement = (element) => {
     const rect = element.getBoundingClientRect();
     const windowHeight = window.innerHeight;
@@ -4677,6 +4703,7 @@ var SCTime = ({
     if (!disabled) {
       const target = event2.currentTarget;
       setAnchorEl(target);
+      setPopoverWidth(target.offsetWidth);
       detectPlacement(target);
       setIsOpenPopover(true);
     }
@@ -4757,7 +4784,8 @@ var SCTime = ({
             border: "1px solid #e0e0e0",
             maxHeight: "300px",
             overflow: "visible",
-            width: width ? `calc(${width}% - 15px)` : "97%"
+            width: popoverWidth ? `${popoverWidth}px` : "100%",
+            maxWidth: "none"
           }
         }
       }
@@ -4874,11 +4902,6 @@ var import_KeyboardDoubleArrowDown2 = __toESM(require("@mui/icons-material/Keybo
 var import_KeyboardDoubleArrowUp2 = __toESM(require("@mui/icons-material/KeyboardDoubleArrowUp"), 1);
 var import_ArrowForward = __toESM(require("@mui/icons-material/ArrowForward"), 1);
 var import_LightModeOutlined = __toESM(require("@mui/icons-material/LightModeOutlined"), 1);
-var import_FilterList = __toESM(require("@mui/icons-material/FilterList"), 1);
-var import_CalendarMonthOutlined = __toESM(require("@mui/icons-material/CalendarMonthOutlined"), 1);
-var import_CheckCircleOutlineOutlined = __toESM(require("@mui/icons-material/CheckCircleOutlineOutlined"), 1);
-var import_EventBusyOutlined = __toESM(require("@mui/icons-material/EventBusyOutlined"), 1);
-var import_PendingOutlined = __toESM(require("@mui/icons-material/PendingOutlined"), 1);
 var SCActivityCalendar = ({
   //informativas
   //apariencia
@@ -4895,9 +4918,6 @@ var SCActivityCalendar = ({
   const [fechaSeleccionada, setFechaSeleccionada] = (0, import_react50.useState)();
   const [stateVal, setstateVal] = import_react50.default.useState(/* @__PURE__ */ new Date());
   const [openCalendar, setOpenCalendar] = import_react50.default.useState(false);
-  const [anchorPopoverFiltro, setAnchorPopoverFiltro] = (0, import_react50.useState)(null);
-  const [datosEventos, setDatosEventos] = import_react50.default.useState(events);
-  const openPopoverFiltro = Boolean(anchorPopoverFiltro);
   const hoy = /* @__PURE__ */ new Date();
   const inicioSemana = (0, import_date_fns2.startOfWeek)(fecha, { weekStartsOn: 0 });
   const diasSemana = Array.from({ length: 7 }, (_, i) => (0, import_date_fns2.addDays)(inicioSemana, i));
@@ -4925,22 +4945,6 @@ var SCActivityCalendar = ({
       // 0 = domingo, 1 = lunes
     })
   });
-  const handleClickPopoverFiltro = (event2) => {
-    setAnchorPopoverFiltro(event2.currentTarget);
-  };
-  const handleClosePopoverFiltro = () => {
-    setAnchorPopoverFiltro(null);
-  };
-  const filtrarActividad = (event2, filtro) => {
-    if (filtro === "Todo") {
-      setDatosEventos(events);
-    } else {
-      const resultado = events.filter(
-        (item) => item.state === filtro
-      );
-      setDatosEventos(resultado);
-    }
-  };
   return /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_LocalizationProvider4.LocalizationProvider, { dateAdapter: import_AdapterDateFns2.AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { width: "100%", padding: "0px", background: "transparent" } }, /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 16px", background: "transparent" } }, diasSemana.map((dia) => /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { sx: { fontSize: "12px !important", color: "#10184099" } }, (0, import_date_fns2.format)(dia, "EEEE", { locale: import_locale2.es }).charAt(0).toUpperCase())), /* @__PURE__ */ import_react50.default.createElement(
     import_material34.Box,
     {
@@ -4980,36 +4984,7 @@ var SCActivityCalendar = ({
       },
       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.IconButton, { onClick: handleClickPopoverFiltro, sx: { position: "fixed", right: "calc(100% - 96%)", top: openCalendar == false ? "220px" : "380px" } }, /* @__PURE__ */ import_react50.default.createElement(import_FilterList.default, { color: "action" })), /* @__PURE__ */ import_react50.default.createElement(
-    import_material34.Popover,
-    {
-      open: openPopoverFiltro,
-      anchorEl: anchorPopoverFiltro,
-      onClose: handleClosePopoverFiltro,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "right"
-      }
-    },
-    /* @__PURE__ */ import_react50.default.createElement(
-      import_material34.Menu,
-      {
-        id: "basic-menu",
-        anchorEl: anchorPopoverFiltro,
-        open: openPopoverFiltro,
-        onClose: handleClosePopoverFiltro,
-        slotProps: {
-          list: {
-            "aria-labelledby": "basic-button"
-          }
-        }
-      },
-      /* @__PURE__ */ import_react50.default.createElement(import_material34.MenuItem, { onClick: (event2) => filtrarActividad(event2, "Todo") }, /* @__PURE__ */ import_react50.default.createElement(import_material34.ListItemIcon, null, /* @__PURE__ */ import_react50.default.createElement(import_CalendarMonthOutlined.default, { fontSize: "small" })), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { variant: "inherit" }, "Ver todo")),
-      /* @__PURE__ */ import_react50.default.createElement(import_material34.MenuItem, { onClick: (event2) => filtrarActividad(event2, "Finalizada") }, /* @__PURE__ */ import_react50.default.createElement(import_material34.ListItemIcon, null, /* @__PURE__ */ import_react50.default.createElement(import_CheckCircleOutlineOutlined.default, { fontSize: "small" })), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { variant: "inherit" }, "Ver finalizadas")),
-      /* @__PURE__ */ import_react50.default.createElement(import_material34.MenuItem, { onClick: (event2) => filtrarActividad(event2, "Aplazada") }, /* @__PURE__ */ import_react50.default.createElement(import_material34.ListItemIcon, null, /* @__PURE__ */ import_react50.default.createElement(import_EventBusyOutlined.default, { fontSize: "small" })), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { variant: "inherit" }, "Ver aplazadas")),
-      /* @__PURE__ */ import_react50.default.createElement(import_material34.MenuItem, { onClick: (event2) => filtrarActividad(event2, "En progreso") }, /* @__PURE__ */ import_react50.default.createElement(import_material34.ListItemIcon, null, /* @__PURE__ */ import_react50.default.createElement(import_PendingOutlined.default, { fontSize: "small" })), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { variant: "inherit" }, "Ver en progreso"))
-    )
-  ), /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { boxSizing: "border-box", padding: "0px 16px", width: "100%", height: openCalendar ? "calc(91% - 260px)" : "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: { boxSizing: "border-box", padding: "0px 16px", width: "100%", height: openCalendar ? "calc(91% - 260px)" : "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
@@ -5026,7 +5001,7 @@ var SCActivityCalendar = ({
       flexDirection: "column"
     } }, (() => {
       const esDomingo = day.getDay() === 0;
-      const eventosDelDia = datosEventos.filter(
+      const eventosDelDia = events.filter(
         (event2) => new Date(event2.date).toDateString() === day.toDateString()
       );
       if (eventosDelDia.length > 0) {
@@ -5039,7 +5014,7 @@ var SCActivityCalendar = ({
               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" ? "#C7E49D" : "action",
               iconLeft: event2.state === "Finalizada" ? "CheckCircle" : event2.state === "Aplazada" ? "EventBusyOutlined" : event2.state === "En progreso" ? "PendingOutlined" : "RadioButtonUnchecked",
-              description: /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, event2.state === "Aplazada" || event2.state === "En progreso" || event2.state === "Auto asignada" ? /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_material34.Badge, { variant: "dot", badgeContent: "", sx: { display: "flex", alignItems: "center", "& .MuiBadge-badge": { top: "50%", transform: "translateY(-50%)" }, color: "action" } }), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, event2.state == "Auto asignada" ? "Adicional" : event2.state)) : null),
+              description: /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { display: "flex", flexDirection: "column", alignItems: "flex-start" }, event2.state === "Aplazada" || event2.state === "En progreso" || event2.state === "Auto asignada" ? /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { display: "flex", flexDirection: "row", alignItems: "center", gap: 0.5, sx: { marginLeft: "7px" } }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Badge, { variant: "dot", badgeContent: "", sx: { display: "flex", alignItems: "center", "& .MuiBadge-badge": { top: "50%", transform: "translateY(-50%)" }, color: "action" } }), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, event2.state == "Auto asignada" ? "Adicional" : event2.state)) : null, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { variant: "body2" }, event2.equipmentDescription)),
               divider: eventosDelDia.length === idx + 1 ? false : true,
               colorDisabled: event2.state === "Finalizada" || event2.state === "Aplazada" || event2.state === "En progreso" ? true : false,
               fn: fn ? () => fn(event2) : void 0
@@ -5388,7 +5363,7 @@ var AttachmentMobile = ({
       screenshotFormat: "image/jpeg",
       videoConstraints: {
         //facingMode: { exact: "environment" }
-        facingMode: "user"
+        facingMode: "environment"
         //facingMode: "environment" // cámara trasera
       },
       style: {
@@ -5653,7 +5628,6 @@ var SCDatePicker = ({ label, required, disabled, background, state, setState, wi
       maxDate: (0, import_dayjs11.default)().add(3, "month"),
       sx: {
         minWidth: 140,
-        padding: "13px 0px",
         width: width || "100%",
         "& .MuiPickersInputBase-sectionsContainer": {
           padding: "8px 0px"
@@ -5668,13 +5642,7 @@ var SCDatePicker = ({ label, required, disabled, background, state, setState, wi
         },
         textField: {
           required: required || false,
-          InputLabelProps: {
-            sx: {
-              "&.MuiInputLabel-shrink": {
-                transform: "translate(10px, 5px) scale(0.9) !important"
-              }
-            }
-          }
+          size: "small"
         }
       },
       slots: {