@m4l/styles 6.4.0 → 6.4.1

package/theme/overrides/M4LExtendedComponents/M4LAreasViewer.js

@@ -0,0 +1,565 @@
+const o = (r) => ({
+  M4LAreasViewer: {
+    styleOverrides: {
+      "&.M4LAreasViewer-root": {
+        test: "root",
+        background: r.vars.palette.background.neutral,
+        "& .M4LGridLayout-gridItemRoot.M4LGridLayout-colapsed-40 .M4LAreasViewer-windowHeader": {
+          minHeight: "38px",
+          height: "38px"
+        },
+        "& .M4LGridLayout-gridItemRoot.M4LGridLayout-colapsed-48 .M4LAreasViewer-windowHeader": {
+          minHeight: "50px",
+          height: "50px"
+        },
+        "& .M4LGridLayout-gridItemRoot": {
+          containerName: "main",
+          containerType: "inline-size",
+          "& .react-resizable-handle-nw": {
+            top: "0px !important",
+            left: "0px !important"
+          },
+          "& .react-resizable-handle-ne": {
+            top: "0px !important",
+            right: "0px !important"
+          },
+          "& .react-resizable-handle-sw": {
+            bottom: "0px !important",
+            left: "0px !important"
+          },
+          "& .react-resizable-handle-se": {
+            bottom: "0px !important",
+            right: "0px !important"
+          }
+        },
+        "& .M4LAreasViewer-areaGridLayout": {
+          "& .M4LAreasViewer-resizeHandle": {
+            test: "test",
+            "& .M4LImage-root .M4LImage-img": {
+              opacity: "0.5",
+              filter: "invert(0.4) hue-rotate(20deg) saturate(1000%)"
+            }
+          },
+          "& .M4LAreasViewer-windowRoot": {
+            background: r.vars.palette.background.surface,
+            border: "1.5px solid",
+            borderColor: r.vars.palette?.border.default,
+            borderRadius: "4px",
+            display: "flex",
+            "&:not(.M4LAreasViewer-loading)": {
+              "& .M4LinearProgressIndeterminate-root": {
+                opacity: 0
+              }
+            },
+            // '& .react-resizable-handle': {
+            //   backgroundColor: 'transparent',
+            // },
+            "&.react-colapsed": {
+              border: "1px solid",
+              borderColor: r.vars.palette?.border.default
+            },
+            "& .M4LAreasViewer-windowRootContainer": {
+              display: "flex",
+              flexDirection: "column",
+              width: "100%",
+              height: "100%",
+              overflow: "hidden"
+            },
+            "& .M4LAreasViewer-windowHeader": {
+              display: "flex",
+              flexDirection: "column",
+              padding: "6px 4px 6px 8px",
+              boxShadow: r.vars.customShadows.z1,
+              //minHeight: '28px',
+              //height: '28px',
+              //[theme.breakpoints.down('md')]: {
+              //    height: '44px',
+              //    minHeight: '44px',
+              //},
+              "& .M4LAreasViewer-windowHeaderContent": {
+                display: "flex",
+                width: "100%",
+                height: "100%",
+                alignItems: "center",
+                "& .M4LIcon-root": {
+                  "& .M4LIcon-icon": {
+                    background: r.vars.palette.text.secondary
+                  }
+                },
+                "& .M4LAreasViewer-windowHeaderTitle": {
+                  display: "flex",
+                  alignItems: "center",
+                  overflow: "hidden",
+                  width: "100%",
+                  padding: "0 8px",
+                  height: "100%",
+                  "& .MuiTypography-root": {
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    width: "100%",
+                    color: r.vars.palette.text.secondary
+                  }
+                },
+                "& .M4LAreasViewer-windowHeaderCancelHandle": {
+                  "& .M4LIconButton-icon": {
+                    "& .MuiButtonBase-root": {
+                      "& .M4LIcon-icon": {
+                        background: r.vars.palette.text.secondary
+                      }
+                    }
+                  }
+                }
+              },
+              "& .M4LTypography-root .MuiTypography-root": {
+                ...r.colorSchemes.finalTheme.typography.paragraphDens,
+                color: r.vars.palette.text.primary,
+                overflow: "visible"
+              }
+            },
+            // Contenedor de window
+            "& .M4LAreasViewer-windowContent": {
+              padding: "16px",
+              background: r.vars.palette.background.default,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "100%",
+              flex: "1",
+              overflow: "hidden",
+              [r.breakpoints.up("sm")]: {
+                padding: "12px"
+              },
+              "& .M4LAreasViewer-containerComponent": {
+                display: "flex",
+                width: "100%",
+                height: "100%",
+                overflow: "auto"
+              },
+              "& .M4LAreasViewer-loaderContainer": {
+                width: "100%",
+                height: "100%",
+                overflow: "auto",
+                display: "flex"
+              },
+              "& .M4LPrintingSystem-root": {
+                position: "relative",
+                margin: "auto"
+              },
+              "& .M4LAreasViewer-containerLinearProgress": {
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                alignItems: "center",
+                padding: "0 16px",
+                "& .MuiLinearProgress-root": {
+                  background: `rgba(${r.colorSchemes.finalTheme.palette.primary.focusActive} / 0.3)`
+                }
+              }
+            },
+            // Area seleccionada
+            "&.M4LAreasViewer-selectedWindow": {
+              border: "1.5px solid",
+              borderColor: r.vars.palette.primary.focusVisible,
+              boxShadow: r.customShadows?.z2,
+              backdropFilter: "blur(100px)",
+              background: r.vars.palette.background.default,
+              "& .M4LAreasViewer-windowHeader": {
+                display: "flex",
+                flexDirection: "column",
+                background: r.vars.palette.primary.opacity,
+                gap: "4px",
+                alignItems: "center",
+                position: "relative",
+                padding: "6px 4px 6px 8px",
+                justifyContent: "end",
+                overflow: "hidden",
+                cursor: "move",
+                "& .M4LAreasViewer-windowHeaderContent": {
+                  "& .M4LIcon-root": {
+                    "& .M4LIcon-icon": {
+                      background: r.vars.palette.primary.focusVisible
+                    }
+                  },
+                  "& .M4LAreasViewer-windowHeaderCancelHandle": {
+                    "& .M4LIcon-root": {
+                      "& .M4LIcon-icon": {
+                        background: r.vars.palette.text.primary
+                      }
+                    }
+                  }
+                },
+                "& .M4LTypography-root .MuiTypography-root": {
+                  ...r.colorSchemes.finalTheme.typography.paragraphDens,
+                  color: r.vars.palette.primary.focusVisible
+                },
+                "& .MuiButtonBase-root": {
+                  "& .M4LIcon-icon": {
+                    backgroundColor: r.vars.palette.text.primary
+                  }
+                },
+                "& .Mui-disabled": {
+                  "& .M4LIcon-icon": {
+                    backgroundColor: r.vars.palette.text.disabled
+                  }
+                },
+                "& .MuiButtonBase-root:hover": {
+                  "& .M4LIcon-icon": {
+                    backgroundColor: r.vars.palette.primary.hover
+                  }
+                }
+              }
+            }
+          },
+          "&.M4LGridLayout-root .M4LGridLayout-maximizeMe": {
+            border: "1.5px solid",
+            borderColor: r.vars.palette?.border.default,
+            borderRadius: "4px",
+            "& .M4LAreasViewer-windowContent": {
+              padding: "16px"
+            },
+            "& .M4LAreasViewer-selectedWindow": {
+              borderColor: "transparent",
+              boxShadow: "unset",
+              padding: "0px",
+              border: "unset"
+            }
+          },
+          "&.M4LGridLayout-colapsed ": {
+            "& .M4LAreasViewer-windowRoot": {
+              borderColor: r.vars.palette?.border.default,
+              boxShadow: r.vars.customShadows.z1
+            }
+          },
+          "&.react-draggable": {
+            background: r.vars.palette.primary.opacity
+          },
+          "& .M4LAreasViewer-windowPopupRoot": {
+            boxShadow: r.customShadows?.z2,
+            border: "none",
+            background: r.vars.palette.background.default,
+            borderRadius: "4px",
+            backdropFilter: "blur(8px)",
+            "& .M4LIcon-root.custom-handle": {
+              "& .M4LIcon-icon": {
+                backgroundColor: r.vars.palette.skeleton.default,
+                width: "11px",
+                height: "11px",
+                minWidth: "11px",
+                minHeight: "11px",
+                boxShadow: r.vars.customShadows.z1,
+                border: "1px solid",
+                borderColor: r.vars.palette.grey[50016]
+              }
+            },
+            "& .M4LAreasViewer-windowRootContainer": {
+              background: r.vars.palette.background.default,
+              borderRadius: "4px",
+              border: "1.5px solid",
+              borderColor: r.vars.palette?.border.default,
+              "& .M4LAreasViewer-windowHeader": {
+                boxShadow: "none",
+                borderTopLeftRadius: "4px",
+                borderTopRightRadius: "4px",
+                background: r.vars.palette.primary.opacity,
+                border: "none",
+                "& .M4LIcon-root": {
+                  "& .M4LIcon-icon": {
+                    width: "18px",
+                    height: "18px",
+                    minWidth: "18px",
+                    minHeight: "18px",
+                    backgroundColor: r.vars.palette.text.secondary
+                  }
+                },
+                "& .M4LTypography-root .MuiTypography-root": {
+                  ...r.colorSchemes.finalTheme.typography.paragraphDens,
+                  color: r.vars.palette.text.secondary,
+                  overflow: "visible"
+                }
+              },
+              "& .M4LAreasViewer-windowContent": {
+                background: r.vars.palette.background.surface,
+                padding: "12px"
+              }
+            },
+            "& .M4LAreasViewer-windowRoot": {
+              padding: "4px",
+              background: r.vars.palette.background.default,
+              borderRadius: "4px",
+              borderColor: r.vars.palette?.border.default,
+              "&:not(.M4LAreasViewer-loading)": {
+                "& .M4LinearProgressIndeterminate-root": {
+                  opacity: 0
+                }
+              },
+              "& > .react-resizable-handle": {
+                backgroundColor: "transparent"
+              },
+              "&.M4LAreasViewer-selectedWindow": {
+                borderColor: r.vars.palette.primary.opacity,
+                background: r.vars.palette.primary.opacity,
+                boxShadow: r.vars.customShadows.z4,
+                padding: "4px",
+                "& .M4LAreasViewer-windowRootContainer": {
+                  "& .M4LAreasViewer-windowHeader": {
+                    background: r.vars.palette.background.surface,
+                    borderRadius: "4px",
+                    boxShadow: r.vars.customShadows.z1,
+                    "& .M4LIcon-root": {
+                      "& .M4LIcon-icon": {
+                        backgroundColor: r.vars.palette.text.primary
+                      }
+                    },
+                    "& .M4LTypography-root .MuiTypography-root": {
+                      ...r.colorSchemes.finalTheme.typography.paragraph,
+                      color: r.vars.palette.text.primary,
+                      overflow: "visible"
+                    }
+                  }
+                }
+              }
+            },
+            "&.M4LAreasViewer-selectedWindow": {
+              border: "none",
+              background: r.vars.palette.primary.opacity,
+              boxShadow: r.vars.customShadows.z4,
+              [r.breakpoints.down("sm")]: {
+                padding: "0"
+              },
+              "& .M4LAreasViewer-windowRootContainer": {
+                boxShadow: r.customShadows?.z2,
+                border: "1.5px solid",
+                borderColor: `rgba(${r.colorSchemes.finalTheme.palette.primary.focusActive} / 0.5)`,
+                "& .M4LAreasViewer-windowHeader": {
+                  background: r.vars.palette.primary.opacity,
+                  borderTopLeftRadius: "4px",
+                  borderTopRightRadius: "4px",
+                  "& .M4LIcon-root": {
+                    "& .M4LIcon-icon": {
+                      backgroundColor: r.vars.palette.text.primary
+                    }
+                  },
+                  "& .M4LTypography-root .MuiTypography-root": {
+                    ...r.colorSchemes.finalTheme.typography.paragraphDens,
+                    color: r.vars.palette.text.primary,
+                    overflow: "visible"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "& .M4LAreasViewer-panelWindowsRoot": {
+          background: r.vars.palette.background.surface,
+          display: "flex",
+          alignItems: "center",
+          padding: "8px",
+          gap: "8px",
+          borderLeft: "1.5px solid",
+          borderColor: r.vars.palette?.border.default,
+          "& .M4LAreasViewer-panelWindowsButtonContainer": {
+            borderRadius: "2px",
+            boxShadow: r.vars.customShadows.z1,
+            "&.M4LAreasViewer-selected": {
+              background: r.vars.palette.primary.main,
+              "& .M4LIconButton-root": {
+                "& .M4LIcon-root": {
+                  "& .M4LIcon-icon": {
+                    backgroundColor: r.vars.palette.primary.contrastText
+                  }
+                }
+              }
+            }
+          },
+          "& .M4LAreasViewer-panelWindowsSeparator": {
+            width: "100%",
+            border: "0.5px solid",
+            borderColor: r.vars.palette?.border.default
+          }
+        }
+      }
+    }
+  },
+  M4LAreasViewerModal: {
+    styleOverrides: {
+      // WindowsModal
+      "&.M4LAreasViewer-windowModalRoot .M4LAreasViewer-windowRoot": {
+        borderRadius: "4px",
+        boxShadow: r.vars.customShadows.z4,
+        background: r.vars.palette.background.default,
+        border: "2px solid",
+        borderColor: r.vars.palette?.border.disabled,
+        "& .M4LAreasViewer-windowContent": {
+          borderRadius: "4px",
+          background: r.vars.palette.background.default
+        },
+        "& .M4LAreasViewer-windowHeaderTitle": {
+          display: "flex",
+          alignItems: "center",
+          overflow: "auto",
+          width: "100%",
+          padding: "0 8px",
+          height: "100%",
+          "& .MuiTypography-root": {
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            width: "100%",
+            fontSize: "16px"
+          }
+        },
+        // LoaddingError
+        "& .M4LAreasViewer-areasLoadingErrorRoot": {
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          position: "relative",
+          inset: "0",
+          overflow: "hidden",
+          width: "100%",
+          height: "100%",
+          "& .M4LAreasViewer-areasLoadingError": {
+            display: "flex",
+            padding: "12px",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: "12px",
+            position: "absolute",
+            inset: "0",
+            // Contenedor de ilustracion
+            "& .M4LIcon-root": {
+              display: "flex",
+              padding: "12px",
+              marginBottom: "4px",
+              // Ilustración
+              " .M4LIcon-icon": {
+                width: "100px",
+                height: "100px",
+                backgroundColor: r.vars.palette.skeleton.default
+              }
+            },
+            // Título
+            "& .M4LAreasViewer-areasLoadingErrorTitle": {
+              ...r.colorSchemes.finalTheme.typography.h3,
+              color: r.vars.palette.text.primary,
+              [r.breakpoints.down("sm")]: {
+                ...r.colorSchemes.finalTheme.typography.h5
+              }
+            },
+            // Subtítulo (explicaciòn de resultado)
+            "& .M4LAreasViewer-areasLoadingErrorDescription": {
+              ...r.colorSchemes.finalTheme.typography.subtitle,
+              color: r.vars.palette.text.secondary
+            },
+            // Linea divisora
+            "& .M4LAreasViewer-areasLoadingErrorDivider": {
+              width: "208px",
+              height: "1px",
+              background: r.vars.palette.skeleton.default
+            },
+            // pasos de acción
+            "& .MuiTypography-paragraph": {
+              ...r.colorSchemes.finalTheme.typography.body,
+              color: r.vars.palette.text.primary
+            },
+            "& .MuiButtonBase-root": {
+              marginTop: "4px"
+            }
+          }
+        },
+        "& .MuiBackdrop-root": {
+          background: "#00000094"
+          // todo definir token
+        },
+        "&:not(.M4LAreasViewer-loading)": {
+          "& .M4LinearProgressIndeterminate-root": {
+            opacity: 0
+          }
+        },
+        "& .react-resizable-handle": {
+          backgroundColor: "transparent"
+        },
+        "& .M4LAreasViewer-windowRootContainer": {
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          background: r.vars.palette.background.default,
+          borderRadius: "4px",
+          boxShadow: r.vars.customShadows.z4,
+          overflow: "hidden",
+          "& .M4LAreasViewer-windowHeader": {
+            cursor: "all-scroll",
+            display: "flex",
+            flexDirection: "column",
+            padding: "6px 4px 6px 8px",
+            borderRadius: "4px",
+            border: "none",
+            background: r.vars.palette.primary.opacity,
+            height: "28px",
+            minHeight: "28px",
+            [r.breakpoints.down("md")]: {
+              height: "36px",
+              minHeight: "36px"
+            },
+            "& .M4LTypography-root .MuiTypography-root": {
+              ...r.colorSchemes.finalTheme.typography.paragraph,
+              color: r.vars.palette.text.primary,
+              overflow: "hidden"
+            },
+            "& .M4LAreasViewer-windowHeaderContent": {
+              display: "flex",
+              alignItems: "center",
+              height: "100%"
+            }
+          },
+          "& .M4LAreasViewer-windowContent": {
+            padding: "12px",
+            background: r.vars.palette.background.default,
+            borderRadius: "4px",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            flexGrow: "1",
+            height: "100%"
+          }
+        }
+      },
+      "& .M4LIcon-root.custom-handle-nw": {
+        top: "1px",
+        left: "1px"
+      },
+      "& .M4LIcon-root.custom-handle-ne": {
+        top: "1px",
+        right: "1px"
+      },
+      "& .M4LIcon-root.custom-handle-sw": {
+        bottom: "1px",
+        left: "1px"
+      },
+      "& .M4LIcon-root.custom-handle-se": {
+        bottom: "1px",
+        right: "1px"
+      },
+      "& .M4LIcon-root.custom-handle": {
+        "& .M4LIcon-icon": {
+          backgroundColor: r.vars.palette.skeleton.default,
+          width: "11px",
+          height: "11px",
+          minWidth: "11px",
+          minHeight: "11px",
+          boxShadow: r.customShadows?.z2,
+          border: "1px solid",
+          borderColor: r.vars.palette?.border.default
+        }
+      }
+    }
+  }
+});
+export {
+  o as M
+};

package/theme/overrides/M4LExtendedComponents/M4LAvatar.js

@@ -0,0 +1,46 @@
+import { B as r } from "../../palette/baseColors.js";
+const o = (t) => ({
+  M4LAvatar: {
+    styleOverrides: {
+      "&.M4LAvatar-root": {
+        padding: "0px !important",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "36px !important",
+        height: "36px !important",
+        "& .MuiAvatar-root": {
+          width: "28px !important",
+          height: "28px !important",
+          borderRadius: "4px",
+          //padding: '4px',
+          background: r.blazeOrange[50],
+          color: r.marbleLight[30],
+          boxShadow: t.vars.customShadows.z1,
+          ...t.typography.subtitle
+        },
+        //desktop
+        [t.breakpoints.up("md")]: {
+          width: "28px !important",
+          height: "28px !important",
+          "& .MuiAvatar-root": {
+            width: "20px !important",
+            height: "20px !important"
+          }
+        },
+        [t.breakpoints.down("sm")]: {
+          width: "36px !important",
+          height: "36px !important",
+          "& .MuiAvatar-root": {
+            width: "28px !important",
+            height: "28px !important"
+          }
+        },
+        test: "root"
+      }
+    }
+  }
+});
+export {
+  o as M
+};

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

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

package/theme/overrides/M4LExtendedComponents/M4LBadge.js

@@ -0,0 +1,35 @@
+const t = (o) => ({
+  M4LBadge: {
+    styleOverrides: {
+      "&.M4LBadge-root": {
+        test: "root",
+        "& .MuiBadge-root": {
+          "& .M4LIconButton-root": {
+            "& .M4LIcon-root .M4LIcon-icon": {}
+          },
+          "& .MuiBadge-badge": {
+            fontWeight: "450",
+            fontSize: "8pt",
+            minWidth: "16px",
+            width: "16px",
+            lineHeight: "1px",
+            textAlign: "center",
+            paddingBottom: "1px",
+            paddingLeft: "7px",
+            borderRadius: "4px",
+            border: "1px solid",
+            borderColor: o.vars.palette.background.default,
+            backgroundColor: o.vars.palette.error.main,
+            height: "16px",
+            top: "14%",
+            right: "16%",
+            color: o.vars.palette.grey[200]
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  t as M
+};

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

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