@m4l/styles 6.4.0 → 6.4.1

package/theme/overrides/M4LExtendedComponents/M4LDataGrid.js

@@ -0,0 +1,392 @@
+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%",
+        "& .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
+};

package/theme/overrides/M4LExtendedComponents/M4LErrorLabel.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LErrorLabel: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LErrorLabel: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LErrorLabel: {
         styleOverrides: {
             "&.M4LHelperText-root": {

package/theme/overrides/M4LExtendedComponents/M4LErrorLabel.js

@@ -0,0 +1,28 @@
+const o = (r) => ({
+  M4LErrorLabel: {
+    styleOverrides: {
+      "&.M4LHelperText-root": {
+        /* Root properties */
+        /* Variant info */
+        "&.M4LHelperText-variantInfo .MuiTypography-root": {
+          color: r.vars.palette.info.main
+        },
+        /* Variant success */
+        "&.M4LHelperText-variantSuccess .MuiTypography-root": {
+          color: r.vars.palette.success.main
+        },
+        /* Variant success */
+        "&.M4LHelperText-variantWarning .MuiTypography-root": {
+          color: r.vars.palette.warning.main
+        },
+        /* Variant success */
+        "&.M4LHelperText-variantError .MuiTypography-root": {
+          color: r.vars.palette.error.main
+        }
+      }
+    }
+  }
+});
+export {
+  o as M
+};

package/theme/overrides/M4LExtendedComponents/M4LFieldLabel.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LFieldLabel: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LFieldLabel: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LFieldLabel: {
         styleOverrides: {
             '&.M4LFieldLabel-root': {

package/theme/overrides/M4LExtendedComponents/M4LFieldLabel.js

@@ -0,0 +1,27 @@
+const a = (e) => ({
+  M4LFieldLabel: {
+    styleOverrides: {
+      "&.M4LFieldLabel-root": {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        width: "100%",
+        "& .M4LFieldLabel-mandatory": {
+          marginLeft: "2px",
+          "& .MuiTypography-root": {
+            color: e.vars.palette.text.secondary
+          }
+        },
+        "& .M4LFieldLabel-tooltip": {
+          marginLeft: "6px",
+          "& .M4LIcon-root .M4LIcon-icon": {
+            backgroundColor: e.vars.palette.info.main
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  a as M
+};

package/theme/overrides/M4LExtendedComponents/M4LFormatter.js

@@ -0,0 +1,21 @@
+const o = (r) => ({
+  M4LFormatter: {
+    styleOverrides: {
+      "&.M4LFormatter-root": {
+        "& .M4LFormatter-booleanFormatterIcon": {
+          "& .M4LIcon-icon": {
+            backgroundColor: r.vars.palette.text.secondary
+          },
+          "&.M4LFormatter-booleanFormatterCheck": {
+            "& .M4LIcon-icon": {
+              backgroundColor: r.vars.palette.primary.focusActive
+            }
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  o as M
+};

package/theme/overrides/M4LExtendedComponents/M4LGridLayout.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LGridLayout: (_theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LGridLayout: (_theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LGridLayout: {
         styleOverrides: {
             '&.M4LGridLayout-root': {

package/theme/overrides/M4LExtendedComponents/M4LGridLayout.js

@@ -0,0 +1,12 @@
+const r = (t) => ({
+  M4LGridLayout: {
+    styleOverrides: {
+      "&.M4LGridLayout-root": {
+        test: "root"
+      }
+    }
+  }
+});
+export {
+  r as M
+};

package/theme/overrides/M4LExtendedComponents/M4LHamburgerMenuCommercial.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LHamburgerMenuCommercial: (_theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LHamburgerMenuCommercial: (_theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LHamburgerMenuCommercial: {
         styleOverrides: {
             '&.M4LHamburgerMenuCommercial-root': {

package/theme/overrides/M4LExtendedComponents/M4LHamburgerMenuCommercial.js

@@ -0,0 +1,14 @@
+const r = (e) => ({
+  M4LHamburgerMenuCommercial: {
+    styleOverrides: {
+      "&.M4LHamburgerMenuCommercial-root": {
+        "& .M4LSideBar-root": {
+          display: "none"
+        }
+      }
+    }
+  }
+});
+export {
+  r as M
+};

package/theme/overrides/M4LExtendedComponents/M4LIcon.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LIcon: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LIcon: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LIcon: {
         styleOverrides: {
             "&.M4LIcon-root": {

package/theme/overrides/M4LExtendedComponents/M4LIcon.js

@@ -0,0 +1,53 @@
+const i = (t) => ({
+  M4LIcon: {
+    styleOverrides: {
+      "&.M4LIcon-root": {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "fit-content",
+        transition: "transform 0.5s ease-in-out",
+        ".M4LIcon-icon": {
+          backgroundColor: t.vars.palette.text.primary
+        },
+        ".M4LIcon-sizeExtraSmall": {
+          width: "14px",
+          height: "14px",
+          minWidth: "14px",
+          minHeight: "14px"
+        },
+        ".M4LIcon-sizeSmall": {
+          width: "16px",
+          height: "16px",
+          minWidth: "16px",
+          minHeight: "16px"
+        },
+        ".M4LIcon-sizeMedium": {
+          width: "20px",
+          height: "20px",
+          minWidth: "20px",
+          minHeight: "20px"
+        },
+        ".M4LIcon-sizeLarge": {
+          width: "28px",
+          height: "28px",
+          minWidth: "28px",
+          minHeight: "28px"
+        },
+        ".M4LIcon-sizeExtraLarge": {
+          width: "36px",
+          height: "36px",
+          minWidth: "36px",
+          minHeight: "36px"
+        },
+        ".M4LIcon-variantSkeleton": {
+          borderRadius: "4px",
+          backgroundColor: t.vars.palette.skeleton?.default
+        }
+      }
+    }
+  }
+});
+export {
+  i as M
+};

package/theme/overrides/M4LExtendedComponents/M4LIconButton.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LIconButton: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LIconButton: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LIconButton: {
         styleOverrides: {
             "&.M4LIconButton-root": {