componentes-sinco 1.1.3 → 1.1.5

package/dist/index.cjs

@@ -92,6 +92,7 @@ __export(index_exports, {
   MultiSelect: () => MultiSelect,
   PageHeader: () => PageHeader,
   SCActivityCalendar: () => SCActivityCalendar,
+  SCAppBar: () => SCAppBar,
   SCAutocomplete: () => SCAutocomplete,
   SCCalendarSwipeable: () => SCCalendarSwipeable,
   SCCard: () => SCCard,
@@ -2789,7 +2790,12 @@ var SCCalendarSwipeable = ({
   const toggleCalendar = (newOpen) => () => {
     setOpenCalendar(newOpen);
   };
-  const locale = __spreadValues({}, import_locale.es);
+  const locale = __spreadProps(__spreadValues({}, import_locale.es), {
+    options: __spreadProps(__spreadValues({}, import_locale.es.options), {
+      weekStartsOn: 0
+      // 0 = domingo, 1 = lunes
+    })
+  });
   return /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(import_LocalizationProvider2.LocalizationProvider, { dateAdapter: import_AdapterDateFns.AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ import_react26.default.createElement(import_material18.Box, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react26.default.createElement(import_material18.Box, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ import_react26.default.createElement(import_Grid5.default, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 0px", background: "transparent" } }, diasSemana.map((dia) => /* @__PURE__ */ import_react26.default.createElement(import_Grid5.default, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ import_react26.default.createElement(import_material18.Box, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react26.default.createElement(import_material18.Typography, { sx: { fontSize: "12px !important", color: "#10184099" } }, (0, import_date_fns.format)(dia, "EEEE", { locale: import_locale.es }).charAt(0).toUpperCase())), /* @__PURE__ */ import_react26.default.createElement(
     import_material18.Box,
     {
@@ -2855,6 +2861,7 @@ function SCDataGridInitial({ data, columns, groupColumns, rowsTable, checkboxSel
     renderCell: (params) => {
       var _a, _b;
       let label = params.value.toString().includes("/") ? params.value.split("/")[0].toString() : params.value.toString();
+      debugger;
       let maxDepth = 0;
       if (groupColumns && data.length > 0) {
         const sampleItem = groupColumns(data[0]);
@@ -2877,12 +2884,12 @@ function SCDataGridInitial({ data, columns, groupColumns, rowsTable, checkboxSel
               customLabel = itemValue.textGroup1 || label;
             }
           }
-          const subgroup1 = arrayRows.filter((r) => {
+          let subgroup1 = arrayRows.filter((r) => {
             var _a2;
             return groupColumns && String((_a2 = groupColumns(r)) == null ? void 0 : _a2.valueGroup1) === label;
           }).map((r) => {
-            var _a2;
-            return groupColumns && String((_a2 = groupColumns(r)) == null ? void 0 : _a2.valueGroup2);
+            var _a2, _b2;
+            return groupColumns && String(((_a2 = groupColumns(r)) == null ? void 0 : _a2.valueGroup2) || ((_b2 = groupColumns(r)) == null ? void 0 : _b2.fieldFirstColumn));
           });
           const groupedDataLength1 = subgroup1.filter((valor, indiceActual, arreglo) => arreglo.indexOf(valor) === indiceActual);
           label = `${customLabel} (${groupedDataLength1.length})`;
@@ -3385,7 +3392,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, { 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" })) : "")),
+    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", flexWrap: "nowrap" } }, 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,
       {
@@ -4734,7 +4741,7 @@ var import_CardActions = __toESM(require("@mui/material/CardActions"), 1);
 var import_Collapse = __toESM(require("@mui/material/Collapse"), 1);
 var import_ExpandMore = __toESM(require("@mui/icons-material/ExpandMore"), 1);
 var Muicon9 = __toESM(require("@mui/icons-material"), 1);
-var SCCard = ({ title, image, iconTitle, actionsTitle, subtitle, content, actions, expand }) => {
+var SCCard = ({ width, title, image, iconTitle, actionsTitle, subtitle, content, actions, expand }) => {
   let iconTitleValidation = "";
   let IconTitle;
   const [expanded, setExpanded] = import_react49.default.useState(false);
@@ -4755,7 +4762,7 @@ var SCCard = ({ title, image, iconTitle, actionsTitle, subtitle, content, action
   const handleExpandClick = () => {
     setExpanded(!expanded);
   };
-  return /* @__PURE__ */ import_react49.default.createElement(import_Card.default, { sx: { maxWidth: 345 } }, title && /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(import_Card.default, { sx: { width: width || "auto" } }, title && /* @__PURE__ */ import_react49.default.createElement(
     import_CardHeader.default,
     {
       avatar: iconTitle ? iconTitleValidation === "image" ? /* @__PURE__ */ import_react49.default.createElement(import_material33.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react49.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react49.default.createElement(import_material33.SvgIcon, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : void 0,
@@ -4850,12 +4857,12 @@ var SCActivityCalendar = ({
     setOpenCalendar(newOpen);
   };
   const locale = __spreadProps(__spreadValues({}, import_locale2.es), {
-    options: {
+    options: __spreadProps(__spreadValues({}, import_locale2.es.options), {
       weekStartsOn: 0
-      // 0 para domingo, 1 para lunes, etc.
-    }
+      // 0 = domingo, 1 = lunes
+    })
   });
-  return /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_LocalizationProvider4.LocalizationProvider, { dateAdapter: import_AdapterDateFns2.AdapterDateFns, adapterLocale: import_locale2.es }, 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%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 0px", 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(
+  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%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 0px", 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,
     {
       onClick: () => setFecha(dia),
@@ -5388,12 +5395,89 @@ var SCSnackBar = ({
   ));
 };
 
+// src/Components/SCAppBar.tsx
+var import_react54 = __toESM(require("react"), 1);
+var import_material37 = require("@mui/material");
+var import_Grid10 = __toESM(require("@mui/material/Grid"), 1);
+var import_es5 = require("dayjs/locale/es");
+var import_Menu = __toESM(require("@mui/icons-material/Menu"), 1);
+var import_ArrowBack = __toESM(require("@mui/icons-material/ArrowBack"), 1);
+var import_icons_material14 = require("@mui/icons-material");
+var SCAppBar = ({
+  background = "linear-gradient(180deg, #BBE9FC, #FFFFFF)",
+  contenidoExtra,
+  options,
+  fnVolver,
+  visibleVolver = true,
+  visibleConexion = true,
+  visibleMenu = true
+}) => {
+  const [isOnline, setIsOnline] = (0, import_react54.useState)(window.navigator.onLine);
+  const [anchorEl, setAnchorEl] = (0, import_react54.useState)(null);
+  const openMenu = Boolean(anchorEl);
+  const handleMenuClick = (event2) => {
+    setAnchorEl(event2.currentTarget);
+  };
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+  (0, import_react54.useEffect)(() => {
+    const handleOnline = () => {
+      console.log("tiene internet");
+      setIsOnline(true);
+    };
+    const handleOffline = () => {
+      console.log(" no tiene internet");
+      setIsOnline(false);
+    };
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, []);
+  return /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement(import_Grid10.default, { sx: { display: "flex", flexDirection: "column" } }, /* @__PURE__ */ import_react54.default.createElement(import_Grid10.default, { size: 12, sx: { display: "flex", flexDirection: "row", alignItems: "center", background, padding: "0px 16px", justifyContent: "space-between" } }, visibleVolver && /* @__PURE__ */ import_react54.default.createElement(import_material37.IconButton, { size: "medium", onClick: fnVolver }, /* @__PURE__ */ import_react54.default.createElement(import_ArrowBack.default, { color: "action" })), /* @__PURE__ */ import_react54.default.createElement(import_Grid10.default, { sx: { display: "flex", flexDirection: "row", alignItems: "center" } }, visibleConexion && /* @__PURE__ */ import_react54.default.createElement(import_Grid10.default, { sx: { display: "flex", flexDirection: "row", alignItems: "center" } }, isOnline ? /* @__PURE__ */ import_react54.default.createElement(import_icons_material14.Wifi, { color: "action", sx: { marginRight: "8px" } }) : /* @__PURE__ */ import_react54.default.createElement(import_icons_material14.WifiOff, { color: "action", sx: { marginRight: "8px" } }), /* @__PURE__ */ import_react54.default.createElement(
+    import_material37.Badge,
+    {
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      variant: "dot",
+      sx: {
+        position: "relative",
+        top: "-3px",
+        left: "-4px"
+      },
+      color: isOnline ? "success" : "error"
+    }
+  ), /* @__PURE__ */ import_react54.default.createElement(import_material37.Typography, { variant: "caption", color: "text.secondary" }, isOnline ? "Online" : "Offline")), visibleMenu && /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement(import_material37.IconButton, { size: "medium", onClick: handleMenuClick }, /* @__PURE__ */ import_react54.default.createElement(import_Menu.default, { color: "action" })), /* @__PURE__ */ import_react54.default.createElement(
+    import_material37.Menu,
+    {
+      anchorEl,
+      open: openMenu,
+      onClose: handleMenuClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      sx: { zIndex: "2000" }
+    },
+    options.map((option, index) => /* @__PURE__ */ import_react54.default.createElement(import_material37.MenuItem, { onClick: option.fn, disabled: option.disabled, key: index }, /* @__PURE__ */ import_react54.default.createElement(import_material37.Typography, { variant: "body2" }, option.name)))
+  )))), /* @__PURE__ */ import_react54.default.createElement(import_material37.Box, { sx: { padding: "8px 16px 0px 16px" } }, contenidoExtra)));
+};
+
 // src/Theme/index.ts
 var import_styles3 = require("@mui/material/styles");
 
 // src/Theme/components.ts
-var import_react54 = __toESM(require("react"), 1);
-var import_icons_material14 = require("@mui/icons-material");
+var import_react55 = __toESM(require("react"), 1);
+var import_icons_material15 = require("@mui/icons-material");
 var components = {
   MuiSelect: {
     styleOverrides: {
@@ -6090,10 +6174,10 @@ var components = {
   MuiAlert: {
     defaultProps: {
       iconMapping: {
-        success: import_react54.default.createElement(import_icons_material14.CheckCircleRounded),
-        error: import_react54.default.createElement(import_icons_material14.ErrorRounded),
-        warning: import_react54.default.createElement(import_icons_material14.WarningRounded),
-        info: import_react54.default.createElement(import_icons_material14.InfoRounded)
+        success: import_react55.default.createElement(import_icons_material15.CheckCircleRounded),
+        error: import_react55.default.createElement(import_icons_material15.ErrorRounded),
+        warning: import_react55.default.createElement(import_icons_material15.WarningRounded),
+        info: import_react55.default.createElement(import_icons_material15.InfoRounded)
       }
     },
     variants: [
@@ -7146,6 +7230,7 @@ var ADCSincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ADCTheme)
   MultiSelect,
   PageHeader,
   SCActivityCalendar,
+  SCAppBar,
   SCAutocomplete,
   SCCalendarSwipeable,
   SCCard,