@m4l/styles 6.4.0 → 6.4.1

package/theme/overrides/M4LExtendedComponents/M4LMenuActions.js

@@ -0,0 +1,38 @@
+const n = (o) => ({
+  M4LMenuActions: {
+    styleOverrides: {
+      "&.M4LMenuActions-root": {
+        "& .MuiPaper-root": {
+          display: "flex",
+          flexDirection: "column",
+          background: o.vars.palette.background.default,
+          gap: "8px",
+          "& .MuiButtonBase-root": {
+            display: "flex",
+            justifyContent: "center",
+            minHeight: "24px",
+            minWidth: "24px",
+            padding: "0",
+            gap: "0px",
+            "& .M4LIcon-root": {
+              minHeight: "24px",
+              minWidth: "24px"
+            },
+            "& .css-hgjo64": {
+              margin: "0"
+            }
+          }
+        },
+        "& .M4LMenuActions-itemDelete": {
+          color: o.vars.palette.error.main,
+          "& .M4LIcon-root .M4LIcon-icon": {
+            backgroundColor: o.vars.palette.error.main
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  n as M
+};

package/theme/overrides/M4LExtendedComponents/M4LModalDialog.js

@@ -0,0 +1,152 @@
+const o = (e) => ({
+  M4LModalDialog: {
+    styleOverrides: {
+      "&.M4LModal-root": {
+        test: "root",
+        "& .MuiPaper-root": {
+          "& .M4LModal-windowBaseRoot": {
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            height: "100%"
+          },
+          // Contenedor Window Confirm
+          "& .M4LModal-containerWindow": {
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "100%",
+            overflow: "hidden",
+            width: "100%",
+            background: e.vars.palette.background.default,
+            boxShadow: e.customShadows?.z2,
+            borderRadius: "4px",
+            // Contenedor botones de acción
+            "& .M4LCommonActions-root": {
+              padding: "16px 0 0 0",
+              margin: "0px",
+              width: "100%",
+              height: "fit-content",
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "flex-end",
+              gap: "12px"
+            },
+            "& .M4LModal-containerMassageIlustration": {
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100%",
+              width: "100%",
+              overflow: "auto",
+              gap: "12px",
+              // Contenedor
+              "& .M4LModal-modalContent": {
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: "12px",
+                // Ilustración
+                "& .M4LModal-illustrationContainer": {
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  marginBottom: "12px",
+                  height: "100px",
+                  width: "100px"
+                },
+                // Título de alerta
+                "& .MuiTypography-subtitle": {
+                  ...e.colorSchemes.finalTheme.typography.subtitleDens,
+                  color: e.vars.palette.text.primary
+                },
+                // Mensaje de alerta
+                "& .M4LModal-messageContainer": {
+                  ...e.colorSchemes.finalTheme.typography.body,
+                  color: e.vars.palette.text.secondary,
+                  textAlign: "center"
+                }
+              }
+            },
+            "& .M4LModal-headerContainer": {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              minHeight: "36px",
+              padding: "6px 4px 6px 8px",
+              gap: "8px",
+              cursor: "move",
+              "& .M4LModal-iconHeader": {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              "& .M4LModal-titleHeader": {
+                ...e.colorSchemes.finalTheme.typography.paragraphDens,
+                width: "100%",
+                whiteSpace: "nowrap",
+                textOverflow: "ellipsis",
+                overflow: "hidden"
+              },
+              "& .M4LModal-iconCloseHeader": {
+                /* Optional overrides */
+              }
+            },
+            "& .M4LModal-windowContent": {
+              padding: "24px",
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              flexDirection: "column",
+              flex: "1",
+              overflow: "hidden",
+              "& .M4LStack-root": {
+                //gap: '8px',
+                overflow: "hidden"
+              }
+            }
+          }
+          /*'& .react-resizable': {
+                                      display: 'flex',
+                                      flexDirection: 'column',
+                                      justifyContent: 'center',
+                                      alignItems: 'center',
+          
+                                      '& .M4LIcon-root': {
+                                          '& .M4LIcon-icon': {
+                                              background: theme.vars.palette.text.secondary,
+                                              boxShadow: theme.colorSchemes.finalTheme.customShadows.z1,
+                                          },
+                                      },
+                                  }, */
+        }
+      },
+      "& .MuiPaper-root.MuiDialog-paperFullScreen": {
+        width: "100%",
+        height: "100%"
+      },
+      "& .MuiPaper-root:not(.MuiDialog-paperFullScreen).MuiDialog-paper": {
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        borderRadius: "4px",
+        margin: "0px",
+        maxWidth: "unset",
+        maxHeight: "unset",
+        background: e.vars.palette.primary.opacity,
+        border: "2px solid",
+        borderColor: e.vars.palette?.border.default,
+        boxShadow: e.vars.customShadows.z4,
+        width: "auto",
+        height: "auto"
+      }
+    }
+  }
+});
+export {
+  o as M
+};

package/theme/overrides/M4LExtendedComponents/M4LModuleLayout.js

@@ -0,0 +1,21 @@
+const o = (e) => ({
+  M4LModuleLayout: {
+    styleOverrides: {
+      "&.M4LModuleLayout-root": {
+        display: "flex",
+        width: "100%",
+        height: "100%",
+        "& .M4LModuleLayout-moduleContent": {
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          overflow: "auto",
+          borderRadius: "6px"
+        }
+      }
+    }
+  }
+});
+export {
+  o as M
+};

package/theme/overrides/M4LExtendedComponents/M4LNavLink.js

@@ -0,0 +1,24 @@
+const o = (r) => ({
+  M4LNavLink: {
+    styleOverrides: {
+      "&.M4LNavLink-root": {
+        "& .M4LTypography-root": {
+          color: r.vars.palette.primary.focusActive
+        },
+        "&: hover": {
+          "& .M4LTypography-root": {
+            color: r.vars.palette.primary?.hover,
+            textDecoration: "underline",
+            textDecorationColor: r.vars.palette.primary?.hover
+          }
+        },
+        "& > a": {
+          textDecoration: "none"
+        }
+      }
+    }
+  }
+});
+export {
+  o as M
+};

package/theme/overrides/M4LExtendedComponents/M4LNoItemSelected.js

@@ -0,0 +1,24 @@
+const t = (e) => ({
+  M4LNoItemSelected: {
+    styleOverrides: {
+      "&.M4LNoItemSelected-root": {
+        width: "100%",
+        height: "80%",
+        maxWidth: "600px",
+        minWidth: "200px",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "24px",
+        "& .M4LImage-root": {
+          maxWidth: "300px",
+          minWidth: "100px"
+        }
+      }
+    }
+  }
+});
+export {
+  t as M
+};

package/theme/overrides/M4LExtendedComponents/M4LPDFViewer.js

@@ -0,0 +1,19 @@
+const e = (t) => ({
+  M4LPDFViewer: {
+    styleOverrides: {
+      "&.M4LPDFViewer-root": {
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        "& .M4LButton-root": {
+          position: "sticky!important",
+          bottom: "20px",
+          left: "20px"
+        }
+      }
+    }
+  }
+});
+export {
+  e as M
+};

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

@@ -10,7 +10,7 @@ export declare const M4LPager: (theme: Omit<Theme, "palette" | "applyStyles"> &
                 whiteSpace: string;
                 width: string;
                 justifyContent: string;
-                "& .M4LPager-pagerActions": {
+                '& .M4LPager-pagerActions': {
                     [x: string]: string | {
                         gap: string;
                         padding: string;
@@ -41,7 +41,7 @@ export declare const M4LPager: (theme: Omit<Theme, "palette" | "applyStyles"> &
                     background: string;
                     borderRadius: string;
                     margin: string;
-                    "& .M4LIconButton-root": {
+                    '& .M4LIconButton-root': {
                         [x: string]: string | {
                             width: string;
                             height: string;
@@ -54,7 +54,7 @@ export declare const M4LPager: (theme: Omit<Theme, "palette" | "applyStyles"> &
                         minHeight: string;
                     };
                 };
-                "& .M4LPager-labelRowsPerPageContainer": {
+                '& .M4LPager-labelRowsPerPageContainer': {
                     display: string;
                     flexDirection: string;
                     justifyContent: string;
@@ -73,13 +73,13 @@ export declare const M4LPager: (theme: Omit<Theme, "palette" | "applyStyles"> &
                 '& .M4LPager-labelDisplayRows': {
                     marginLeft: string;
                 };
-                "& .MuiInputBase-root": {
+                '& .MuiInputBase-root': {
                     padding: string;
                     borderRadius: string;
                     background: string;
                     overflow: string;
                     minWidth: string;
-                    "& .MuiSvgIcon-root": {
+                    '& .MuiSvgIcon-root': {
                         background: string;
                     };
                 };

package/theme/overrides/M4LExtendedComponents/M4LPager.js

@@ -0,0 +1,112 @@
+const t = (e) => ({
+  M4LPager: {
+    styleOverrides: {
+      "&.M4LPager-root": {
+        test: "root",
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        whiteSpace: "nowrap",
+        width: "100%",
+        justifyContent: "space-between",
+        // pagerActions
+        "& .M4LPager-pagerActions": {
+          display: "flex",
+          padding: "2px",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "2px",
+          width: "fit-content",
+          background: e.vars.palette.background.default,
+          borderRadius: "4px",
+          margin: "auto",
+          [e.breakpoints.down("sm")]: {
+            gap: "4px",
+            padding: "4px"
+          },
+          "& .M4LIconButton-root": {
+            width: "20px",
+            height: "20px",
+            minWidth: "20px",
+            minHeight: "20px",
+            [e.breakpoints.down("sm")]: {
+              width: "28px",
+              height: "28px",
+              minWidth: "28px",
+              minHeight: "28px"
+            }
+          }
+        },
+        "& .M4LPager-labelRowsPerPageContainer": {
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "center",
+          alignItems: "center",
+          "& .M4LPager-select": {
+            "& .MuiSelect-select": {
+              ...e.colorSchemes.finalTheme.typography.body,
+              color: e.vars.palette.text.primary
+            },
+            "& .MuiSelect-icon": {
+              right: "0",
+              top: "0",
+              bottom: "0"
+            }
+          }
+        },
+        "& .M4LPager-labelDisplayRows": {
+          marginLeft: "12px"
+        },
+        "& .MuiInputBase-root": {
+          padding: "4px 2px 4px 6px",
+          borderRadius: "4px",
+          background: e.vars.palette.background.default,
+          overflow: "hidden",
+          minWidth: "fit-content",
+          "& .MuiSvgIcon-root": {
+            background: e.vars.palette.background.default
+          }
+        },
+        "& .M4LPager-skeletonRoot": {
+          width: "100%",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          marginLeft: e.spacing(3),
+          "& .M4LPager-skeletonRowsPerPage": {
+            display: "grid",
+            gridTemplateColumns: "auto auto",
+            gridGap: e.spacing(1),
+            marginRight: e.spacing(3)
+          },
+          "& .M4LPager-skeletonButtonContainer": {
+            display: "flex",
+            marginLeft: e.spacing(3),
+            "& .M4LPager-skeletonIconButton": {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              width: e.spacing(3.75),
+              height: e.spacing(3.75)
+            }
+          }
+        }
+      }
+    }
+  },
+  M4LPagerMenuPopover: {
+    styleOverrides: {
+      "&.M4LPager-selectMenuPopover": {
+        "& .MuiList-root": {
+          "& .MuiMenuItem-root": {
+            ...e.colorSchemes.finalTheme.typography.body,
+            color: e.vars.palette.text.primary
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  t as M
+};

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

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

package/theme/overrides/M4LExtendedComponents/M4LPaperForm.js

@@ -0,0 +1,58 @@
+const o = (r) => ({
+  M4LPaperForm: {
+    styleOverrides: {
+      "&.M4LPaperForm-root": {
+        padding: "0",
+        borderRadius: "4px",
+        background: r.vars.palette.background.default,
+        border: "1px solid",
+        borderColor: r.vars.palette?.border.secondary,
+        width: "100%",
+        height: "auto",
+        // variante isForm
+        "&.M4LPaperForm-isForm .M4LPaperForm-content": {
+          gap: "12px"
+        },
+        // Header
+        "& .M4LPaperForm-headerContainer": {
+          width: "100%",
+          height: "28px",
+          minHeight: "28px",
+          padding: "2px 4px 2px 8px",
+          margin: "0px",
+          borderRadius: "4px",
+          background: r.vars.palette.primary.opacity,
+          borderBottom: "none",
+          [r.breakpoints.down("md")]: {
+            height: "36px",
+            minHeight: "36px"
+          },
+          //Title paperForm
+          "& .M4LPaperForm-iconTitleContainer": {
+            ...r.colorSchemes.finalTheme.typography.bodyDens,
+            color: r.vars.palette.text.primary,
+            display: "flex",
+            gap: "8px",
+            //Icon paperForm
+            "& .M4LPaperForm-iconHeaderContainer": {
+              margin: "0px"
+            }
+          }
+        },
+        //Container paperForm
+        "& .M4LPaperForm-content": {
+          display: "flex",
+          flexDirection: "column",
+          height: "fit-content",
+          width: "100%",
+          padding: "12px",
+          color: r.vars.palette.text.primary,
+          ...r.colorSchemes.finalTheme.typography.body
+        }
+      }
+    }
+  }
+});
+export {
+  o as M
+};

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

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