@m4l/styles 7.1.29 → 7.1.30

package/theme/overrides/M4LExtendedComponents/M4LDataGrid.js

@@ -1,393 +0,0 @@
-import { alpha as o } from "@mui/material/styles";
-const e = (r) => ({
-  M4LDataGrid: {
-    styleOverrides: {
-      "&.M4LDataGrid-root": {
-        background: r.vars.palette.background.default,
-        boxShadow: "unset",
-        borderRadius: "4px",
-        border: "1px solid",
-        borderColor: r.vars.palette?.border.default,
-        display: "flex",
-        position: "relative",
-        flexDirection: "column",
-        gap: "4px",
-        height: "100%",
-        width: "100%",
-        flexGrow: 1,
-        "& .rdg .MuiCheckbox-root": {
-          "& > svg": {
-            color: r.vars.palette.text.secondary
-          }
-        },
-        // Condicion Breakpoint css Query Container
-        // Condiciones BreakPoint < sm
-        "&.M4LDataGrid-xs": {
-          "& .M4LDataGrid-actions": {
-            height: "44px",
-            "& .M4LPager-labelRowsPerPageContainer": {
-              "& .M4LTypography-root": {
-                display: "none"
-              }
-            },
-            "& .M4LPager-labelDisplayRows": {
-              display: "none"
-            }
-          }
-        },
-        "& .M4LDataGrid-actions": {
-          ...r.colorSchemes.finalTheme.typography.body,
-          left: "0px",
-          right: "0px",
-          top: "0px",
-          height: "32px",
-          minHeight: "32px",
-          padding: "4px 8px",
-          display: "flex",
-          flexDirection: "row",
-          borderRadius: "4px",
-          alignItems: "center",
-          justifyContent: "space-between",
-          background: r.vars.palette.background.default,
-          position: "absolute",
-          gap: "8px",
-          "@container main (max-width: 600px)": {
-            height: "44px"
-          },
-          /*  [theme.breakpoints.down('sm')]: {
-                           height: '44px',
-                       }, */
-          "& .M4LDataGrid-actionsConfigContainer": {
-            display: "flex",
-            flexDirection: "row",
-            gap: "8px",
-            marginLeft: "12px",
-            "& .M4LIconButton-root": {
-              background: r.vars.palette.background.default
-            }
-          },
-          "& .M4LDataGrid-rowsCount": {
-            display: "flex",
-            gap: "8px",
-            alignItems: "center",
-            "& .M4LDataGrid-rowsCountLabel": {
-              ...r.colorSchemes.finalTheme.typography.body,
-              color: r.vars.palette.text.primary,
-              height: "100%"
-              //revisar
-            },
-            "& .M4LDataGrid-rowsCountValue": {
-              paddingTop: "4px",
-              paddingBottom: "2px",
-              paddingLeft: "4px",
-              paddingRight: "6px",
-              background: r.vars.palette.background.default,
-              borderRadius: "4px"
-            }
-          },
-          /* Action density se carga en el portal M4LDataGridDensityPopover, no se debe estilar desde aquí. */
-          "& .M4LDataGrid-actionFilter": {
-            /* Estilos de iconButton Filter */
-          },
-          "& .M4LDataGrid-actionSettings": {
-            /* Estilos de iconButton Settings */
-          }
-        },
-        "& .M4LDataGrid-tableContaniner:not(.M4LDataGrid-withActions)": {
-          top: "0!important"
-        },
-        "& .M4LDataGrid-tableContaniner": {
-          display: "flex",
-          flexDirection: "column",
-          position: "absolute",
-          top: "32px",
-          bottom: "0px",
-          left: "0px",
-          right: "0px",
-          overflow: "hidden",
-          padding: "0 4px",
-          borderRadius: "4px",
-          border: "none",
-          boxshadow: r.customShadows?.z2,
-          background: r.vars.palette.background.default,
-          "@container main (max-width: 600px)": {
-            top: "44px"
-          },
-          "& .M4LDataGrid-wrapperDataGridCss": {
-            position: "relative",
-            height: "100%",
-            overflow: "hidden",
-            borderRadius: "4px 0px",
-            "& .rdg ": {
-              border: "none",
-              background: r.vars.palette.background.default,
-              gridColumnGap: "0px",
-              gridRowGap: "0px",
-              userSelect: "initial",
-              height: "100%",
-              contentVisibility: "unset",
-              overflow: "auto",
-              padding: "0px",
-              "--rdg-grid-inline-size": "0px",
-              "--rdg-header-background-color": r.vars.palette.primary.opacity,
-              "--rdg-row-selected-background-color": "#D9E9FC",
-              "--rdg-row-hover-background-color": "#D9E9FC",
-              "--rdg-background-color": r.vars.palette.background.default,
-              "--rdg-selection-color": r.vars.palette.primary.focusVisible,
-              "--row-selected-hover-background-color": r.vars.palette.primary.toneOpacity,
-              "--rdg-checkbox-color": r.vars.palette.primary.main,
-              "--rdg-checkbox-focus-color": o(
-                r.colorSchemes.finalTheme.palette.primary.main,
-                r.colorSchemes.finalTheme.palette.action.selectedOpacity
-              ),
-              "--rdg-border-color": "none",
-              // "--rdg-checkbox-disabled-border-color:":theme.vars.palette.divider,
-              // "--rdg-checkbox-disabled-background-color":theme.vars.palette.,
-              /* border-bottom-right-radius: 3px; */
-              "&:last-child .rdg-cell": {
-                borderTop: "0.5px solid",
-                borderBottom: "1px solid",
-                borderLeft: "0.5px solid",
-                borderRight: "0.5px solid",
-                borderColor: r.vars.palette?.border.disabled
-              }
-            },
-            '& [role="columnheader"]': {
-              justifyContent: "center",
-              alignItems: "center"
-            },
-            "& .rdg-row": {
-              '&[aria-selected="false"] .rdg-cell': {
-                backgroundColor: r.vars.palette.background.default,
-                borderLeft: "0.5px solid",
-                borderColor: r.vars.palette?.border.disabled
-              },
-              "&:nth-of-type(odd)": {
-                "& .rdg-cell": {
-                  backgroundColor: r.vars.palette.background.default
-                }
-              },
-              '&[aria-selected="true"] .rdg-cell': {
-                backgroundColor: r.vars.palette.primary?.toneOpacity
-              },
-              "&:hover": {
-                "& .rdg-cell": {
-                  backgroundColor: `${r.vars.palette.general.gridHover} !important`,
-                  transition: "background-color 0.1s linear"
-                }
-                /* backgroundColor: theme.vars.palette.primary.primaryOpacity, */
-              },
-              backgroundColor: "transparent"
-            },
-            "& .rdg-cell": {
-              transition: "background-color 0.1s linear",
-              borderBottom: "0px solid transparent",
-              borderRight: "0.5px solid transparent",
-              borderColor: r.vars.palette.background.neutral,
-              color: r.vars.palette.text.secondary,
-              display: "inline",
-              justifyContent: "center",
-              alignItems: "center",
-              textOverflow: "inline",
-              gridTemplateColumns: "auto",
-              "& .rdg-text-editor": {
-                textAlign: "inherit",
-                color: r.vars.palette.text.secondary,
-                padding: "0 8px",
-                lineHeight: "var(--rdg-row-height)!important",
-                border: "0",
-                borderTop: "0.5px solid",
-                borderBottom: "1px solid",
-                borderLeft: "0.5px solid",
-                borderRight: "0.5px solid",
-                borderColor: `${r.vars.palette?.border.disabled} !important`,
-                ...r.colorSchemes.finalTheme.typography.body
-              },
-              "&.rdg-cell-frozen": {
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                boxShadow: "unset"
-              },
-              "&:after": {
-                content: '""',
-                borderRight: `0px solid ${r.vars.palette.divider}`,
-                position: "absolute",
-                right: "0px",
-                // Por desajuste en chrome en el espaciado
-                height: "100%"
-              },
-              "& .m4l_icon": {
-                height: "100%"
-              }
-            },
-            '& .rdg-cell[role="gridcell"]': {
-              ...r.colorSchemes.finalTheme.typography.body,
-              lineHeight: "var(--rdg-row-height)!important"
-            },
-            '& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
-              ...r.colorSchemes.finalTheme.typography.bodyDens,
-              lineHeight: "var(--rdg-row-height)!important",
-              //ajuste de contenido filtro del DataGrid
-              height: "28px",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center"
-            },
-            // Esta condicion para el flujo de cabecera cuando no tiene utilidad sort
-            '& .rdg-cell[role="columnheader"] [draggable="true"]': {
-              ...r.colorSchemes.finalTheme.typography.bodyDens,
-              lineHeight: "var(--rdg-row-height)!important"
-            },
-            "& [aria-selected=true]": {
-              backgroundColor: r.vars.palette.primary?.toneOpacity,
-              color: r.vars.palette.text.primary,
-              //cambia el color del contorno de cada celda selecionada
-              outline: "1px solid",
-              outlineOffset: "-1px",
-              outlineColor: r.vars.palette.primary.focusVisible
-            },
-            // Alineaciones
-            "& .rdg-cell.rdg-cell-align-left": {
-              textAlign: "start",
-              display: "inline",
-              justifyContent: "center",
-              alignItems: "center"
-            },
-            "& .rdg-cell.rdg-cell-align-center": {
-              textAlign: "center",
-              display: "flex"
-            },
-            "& .rdg-cell.rdg-cell-align-right": {
-              textAlign: "right"
-            },
-            // Estilado de la ultima celda congelada
-            "& .rdg-row .rdg-cell-frozen-last:after": {
-              borderRight: "0px solid transparent"
-            },
-            // Estilado de la ultima celda (Quitar la linea divisora derecha)
-            "& .rdg-row :last-child:after": {
-              borderRight: "0px solid",
-              borderColor: r.vars.palette.background.surface
-            },
-            "& .rdg-header-row": {
-              backgroundColor: r.vars.palette.primary.opacity
-            },
-            // Estilado de celdas de la cabecera
-            "& .rdg-header-row .rdg-cell": {
-              fontFamily: r.typography.body,
-              fontWeight: r.typography.body,
-              fontSize: r.typography.body,
-              color: r.vars.palette.text.primary,
-              borderRight: "0.5px solid !important",
-              boxShadow: "none",
-              gridTemplateColumns: "auto",
-              borderBottom: "0.5px solid !important",
-              borderColor: `${r.vars.palette?.border.disabled} !important`,
-              '& [draggable="true"]': {
-                fontSize: r.typography.body
-              },
-              // Ultima celda de la cebecera frozen
-              "&.rdg-cell-frozen-last": {
-                borderColor: r.vars.palette.background.default,
-                boxShadow: "var(--rdg-frozen-cell-box-shadow)",
-                "&:after": {
-                  //borderRight: `1.5px solid`,
-                  //borderColor: theme.vars.palette.background.surface,
-                }
-              },
-              "& .rdg-header-sort-cell": {
-                "& .rdg-header-sort-name + span": {
-                  position: "absolute",
-                  margin: "auto",
-                  right: "5px",
-                  "& .rdg-sort-arrow": {
-                    width: "8px"
-                  }
-                }
-              },
-              // Modificar el tamaño de la flecha
-              "& .rdg-sort-arrow": {}
-            },
-            // Estilado de la ultima celda Header
-            "& .rdg-header-row :last-child.rdg-cell": {
-              borderTopRightRadius: "0",
-              "&:after": {
-                borderRight: "0px solid transparent"
-              }
-            },
-            // filter
-            "& .filter_cell_div": {
-              paddingLeft: "8px",
-              paddingRight: "8px"
-            },
-            //
-            "& .rdg-header-sort-cell": {
-              width: "100%",
-              flexGrow: "1",
-              alignItems: "center",
-              color: r.vars.palette.text.primary
-            }
-            /*  '& [aria-columnsort="ASC"]': {
-                              borderTop: `2px solid ${theme.vars.palette.primary.main}`,
-                          }, */
-            /* '& [aria-columnsort="DESC"]': {
-                              borderBottom: `2px solid ${theme.vars.palette.primary.main}`,
-                          }, */
-          }
-        },
-        /* Flujo sin paginador */
-        "&.M4LDataGrid-withNoPager": {
-          /*  Por definir */
-        }
-      }
-    }
-  },
-  M4LDataGridDensityPopover: {
-    styleOverrides: {
-      "&.M4LDataGrid-actionDensityPopover": {
-        test: "root"
-      }
-    }
-  },
-  M4LDataGridActionsFormatter: {
-    styleOverrides: {
-      "&.M4LDataGrid-actionsFormatter": {
-        test: "root",
-        "& .MuiPaper-root": {
-          gap: "4px",
-          "& .MuiButtonBase-root": {
-            minHeight: "24px",
-            padding: "2px 4px",
-            gap: "12px",
-            "& .M4LIcon-root": {
-              minHeight: "20px",
-              minWidth: "20px"
-            }
-          }
-        },
-        [r.breakpoints.down("md")]: {
-          "& .MuiPaper-root": {
-            padding: "12px",
-            "& .MuiButtonBase-root": {
-              minHeight: "36px",
-              padding: "2px 4px",
-              gap: "16px",
-              "& .M4LIcon-root": {
-                minHeight: "28px",
-                minWidth: "28px",
-                "& .M4LIcon-icon": {
-                  minHeight: "20px",
-                  minWidth: "20px"
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-});
-export {
-  e as M
-};